html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*,*:after,*:before{box-sizing:border-box}:root{--nav-height: 60px;--black: hsl(0 0% 2%);--white: hsl(0 0% 98%);--content-width: 120ch;--accent: hsl(10 90% 50%)}body{min-height:100vh;font-family:sans-serif,system-ui;background:var(--white)}body:before{--line: color-mix(in lch, canvasText 45%, transparent);--size: 60px;content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size);-webkit-mask:linear-gradient(-15deg,transparent 40%,white);mask:linear-gradient(-15deg,transparent 40%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}footer{padding:2rem;background:var(--black);color:var(--white);text-align:center}h1{font-size:clamp(2rem,5vw + 1rem,8rem);font-family:EB Garamond,serif;line-height:.9;font-weight:500;translate:0 -100%;margin:0}h1 span{font-variant:small-caps;font-size:.5em}header{height:100vh;position:absolute;padding:2rem;width:800px;max-width:calc(100% - 4rem);left:50%;top:0;translate:-50% 0;display:grid;align-content:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.laptop *,.laptop *:before,.laptop *:after{transform-style:preserve-3d;box-sizing:border-box}.laptop{height:500vh;view-timeline:--laptop;position:sticky;top:0;z-index:2}.shell--top .cuboid__side:nth-of-type(5):after{content:"JFDI";padding:.5vmin;font-size:3vmin;position:absolute;color:#fff;font-weight:700;background:var(--black);top:60%;left:65%;rotate:140deg}.laptop section{width:100%;position:sticky;top:0;display:grid;place-items:center;overflow:hidden;height:100vh}.laptop .scene{transform:rotateX(-24deg) rotateY(-32deg) rotateX(90deg) translateZ(-20vmin)}.jbook{width:30vmin;aspect-ratio:16 / 12;position:relative;transform:translateZ(2vmin)}.scroll-section.laptop{padding:0}.screen-bear{position:absolute;width:25%;--base-coat: var(--white);rotate:180deg;top:50%;left:50%;translate:-50% -50%;z-index:10}.screen-bear__eyes{transform-box:fill-box;transform-origin:50% 50%;animation:blink 6s -2s infinite}.laptop-keyboard{width:90%;position:absolute;top:50%;left:50%;translate:-50% -80%}.scene__shadow{position:relative}.scene__shadow:after{background:#00000080;content:"";position:absolute;inset:5%;filter:blur(10px)}.shell--bottom .cuboid__side:nth-of-type(6){--b: .8}.shell--bottom .cuboid__side:nth-of-type(2):after{content:"";position:absolute;width:50%;aspect-ratio:1 / 3;background:var(--black);left:50%;top:10%;translate:-50% 0}.shell--bottom:after{content:"";width:32%;aspect-ratio:4 / 3;background:#666;position:absolute;bottom:5%;left:50%;translate:-50% 0;border-radius:.5vmin}.shell-bear{--base-coat: var(--black);rotate:180deg;width:20%;position:absolute;top:50%;left:50%;translate:-50% -50%}.scene{transform:translateZ(100vmin)}.shell{position:absolute;inset:0}.shell--top{--depth: 2;--color: hsl(0 0% 80%);background:var(--black);transform:rotateX(0);transform-origin:50% 0}.shell--top:after{content:"";position:absolute;inset:0;border:1vmin solid hsl(0 0% 10%);background:var(--black);transform-origin:50% 100%}.shell--bottom{--depth: 2;--color: hsl(0 0% 80%);background:gray;transform-origin:50% 0}.shell--top .cuboid{transform:translateZ(calc(1vmin + 1px))}.shell--bottom .cuboid{transform:translateZ(calc(-1vmin - 1px))}.sign-off{height:100vh}.sig path{--draw: 1.025;--end: 1.025;stroke-dasharray:var(--end);stroke-dashoffset:var(--draw)}.sig :is(.eye,.nose){fill:transparent}.sig{width:max(100px,25vmin);color:var(--white);position:fixed;bottom:4rem;right:2rem;z-index:10;translate:-20% -20%;rotate:-15deg}.cuboid{width:100%;height:100%;position:relative}.cuboid__side{background:var(--color);filter:brightness(var(--b, 1));position:absolute}.cuboid__side:nth-of-type(1){--b: 1.1;height:calc(var(--depth, 20) * 1vmin);width:100%;top:0;transform:translateY(-50%) rotateX(90deg)}.cuboid__side:nth-of-type(2){--b: .9;height:100%;width:calc(var(--depth, 20) * 1vmin);top:50%;right:0;transform:translate(50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(3){--b: .5;width:100%;height:calc(var(--depth, 20) * 1vmin);bottom:0;transform:translateY(50%) rotateX(90deg)}.cuboid__side:nth-of-type(4){--b: 1;height:100%;width:calc(var(--depth, 20) * 1vmin);left:0;top:50%;transform:translate(-50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(5){--b: .8;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20) * .5vmin));top:0;left:0}.cuboid__side:nth-of-type(6){--b: 1.2;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20) * -.5vmin)) rotateY(180deg);top:0;left:0}@keyframes blink{0%,46%,48%,50%,to{scale:1 1}47%,49%{scale:1 .01}}.bear-link{color:canvasText;position:fixed;top:2rem;right:2rem;width:48px;aspect-ratio:1;display:grid;place-items:center;opacity:.8}:where(.x-link,.bear-link):is(:hover,:focus-visible){opacity:1}.bear-link svg{width:75%}.scroll-icon{height:30px;position:fixed;bottom:2rem;right:2rem;color:currentColor;opacity:.5;overflow:visible!important}.scroll-icon path{animation:active 4s infinite ease-in-out;transform-box:fill-box;transform-origin:center}@keyframes active{0%,20%,30%,40%,to{translate:0 0}25%,35%{translate:0 -50%}}@supports (animation-timeline: scroll()){:root{--jump: cover 15% cover 45%;--spin: cover 15% cover 45%;--flip: cover 15% cover 45%;--open: cover 15% cover 45%;--straighten: contain 25% contain 65%;--zoom: contain 25% exit -20%}.scroll-icon{animation:fade-away both linear;animation-timeline:scroll(root);animation-range:50px 100px}@keyframes fade-away{to{translate:0 -100%;opacity:0}}.sign-off{view-timeline:--sign-off}.sig path{animation:draw both linear;animation-timeline:--sign-off;animation-range:entry 0% entry 80%}.sig :is(.eye,.nose){animation:draw both linear,fill both linear;animation-timeline:--sign-off}.sig :is(.ear,.eye){animation-range:entry 30% entry 90%}.sig .nose{animation-range:entry 40% entry 100%}@keyframes draw{to{stroke-dashoffset:0}}@keyframes fill{to{fill:currentColor}}.shell--bottom{animation:book-open-bottom both linear;animation-timeline:--laptop;animation-range:var(--open)}.shell--top{animation:book-open-top both linear;animation-timeline:--laptop;animation-range:var(--open)}.shell--top:after{animation:bezel both ease-in;animation-timeline:--laptop;animation-range:var(--zoom)}@keyframes bezel{0%,40%{border-color:#1a1a1a;scale:1}75%{scale:1}to{border-color:var(--black);scale:2}}@keyframes book-open-top{0%,30%{transform:rotateX(0)}40%{transform:rotateX(120deg)}75%,to{transform:rotateX(90deg)}}@keyframes book-open-bottom{0%,45%{transform:rotateX(0)}65%{transform:rotateX(50deg)}to{transform:rotateX(0)}}.scene__zoom{animation:scene-zoom both linear;animation-timeline:--laptop;animation-range:var(--zoom)}@keyframes scene-zoom{0%{scale:1}to{scale:9}}.scene{animation:scale-to-view both linear;animation-timeline:--laptop;animation-range:var(--straighten)}@keyframes scale-to-view{0%{transform:rotateX(-24deg) rotateY(-32deg) rotateX(90deg) translateZ(-20vmin)}to{transform:rotateX(0) rotateY(0) rotateX(90deg) translateZ(-12vmin)}}@keyframes book-spin{to{transform:rotate(-360deg)}}.scene__shadow:after{animation:shadow-in-out both linear;animation-timeline:--laptop;animation-range:var(--jump)}@keyframes shadow-in-out{0%,5%,95%,to{opacity:1}35%,65%{opacity:0}}.scene__spin{animation:book-spin both ease-in-out;animation-timeline:--laptop;animation-range:var(--spin)}.scene__flip{animation:book-flip both ease-in-out;animation-timeline:--laptop;animation-range:var(--flip)}@keyframes book-flip{0%,20%{transform:rotateX(0)}80%,to{transform:rotateX(360deg)}}@keyframes book-jump{50%{transform:translateZ(40vmin)}}main{view-timeline:--main}.scene__jump{animation:book-jump both ease-in-out;animation-timeline:--laptop;animation-range:var(--jump)}@keyframes jump{50%{transform:translateZ(30vmin)}}}