@layer normalize,base,board,demo;@layer normalize{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}}@layer board{.board{--cols: 12;--cell-w-n: 1.3;--cell-h-n: 1.6;--track-n: .075;--pad-n: .22;--bezel-n: .42;--brand-n: .12;--size: 3.2rem;--persp: 3.2;--gap: .036em;--radius: .07em;--cell-w: calc(var(--cell-w-n) * 1em);--cell-h: calc(var(--cell-h-n) * 1em);--track: calc(var(--track-n) * 1em);--span: calc( var(--cols) * var(--cell-w-n) + (var(--cols) - 1) * var(--track-n) + var(--pad-n) * 2 );--case: #100f0c;--case-edge: #2b2926;--cavity: #050403;--face: #12100d;--hi: 6%;--lo: 68%;--face-hi: color-mix(in srgb, var(--face), white var(--hi));--face-lo: color-mix(in srgb, var(--face), black var(--lo));--notch: color-mix(in srgb, var(--face), black 55%);--leaf-edge: #66635a;--ink: #f5eee0;--accent: #f5af20;--label: #9a958a;--shadow: rgb(0 0 0 / .85);--spec: rgb(255 255 255 / .11);position:relative;display:grid;gap:.55em;padding:calc(var(--pad-n) * 1em) calc(var(--pad-n) * 1em) calc(var(--bezel-n) * 1em);inline-size:-moz-max-content;inline-size:max-content;font-family:Roboto Mono,ui-monospace,monospace;font-size:clamp(.85rem,calc(100cqi / var(--span)),var(--size));font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink);background:linear-gradient(oklch(1 0 0 / .05),transparent 20%),var(--case);border-radius:.2em;box-shadow:0 0 0 .022em var(--case-edge),inset 0 .018em #ffffff17,inset 0 -.02em .04em #00000080;transform-style:flat}.board__mark{position:absolute;inset:auto 0 0;block-size:calc(var(--bezel-n) * 1em);display:flex;align-items:center;justify-content:center;pointer-events:none}.board__mark span{font-size:calc(var(--cell-h-n) * var(--brand-n) * 1em);font-weight:600;line-height:1;letter-spacing:.38em;text-indent:.38em;color:color-mix(in oklab,var(--case),var(--ink) 44%);translate:0 .105em;text-shadow:0 -.055em 0 oklch(0 0 0 / .65),0 .06em .012em oklch(1 0 0 / .22)}.row{display:flex;gap:.4em;flex:none}.row[data-highlighted]{--ink: var(--accent)}.field{position:relative;display:flex;gap:var(--track);flex:none}.cell{position:relative;display:grid;flex:none;inline-size:var(--cell-w);block-size:var(--cell-h);border-radius:var(--radius);perspective:calc(var(--persp) * 1em);background:var(--cavity);box-shadow:inset 0 .03em .1em #000000d9,0 0 0 .012em #0009}.cell:before{content:"";position:absolute;z-index:5;inset:auto 0 -.005em;block-size:.1em;background:var(--notch);clip-path:polygon(0 100%,calc(50% - .14em) 100%,calc(50% - .095em) 0,calc(50% + .095em) 0,calc(50% + .14em) 100%,100% 100%,100% 110%,0 110%);pointer-events:none}.cell__mag{position:absolute;z-index:0;inset-inline:.05em;top:calc(50% - .22em);block-size:.44em;overflow:hidden;background:repeating-linear-gradient(180deg,var(--leaf-edge) 0 .0101em,transparent .0101em .03636em);opacity:.5}.leaf{position:absolute;inset:0;display:grid;place-items:center;line-height:1;padding-block-end:.0125em;border-radius:var(--radius);color:var(--ink);backface-visibility:hidden;transform-origin:50% 50%;background:linear-gradient(transparent 44%,#000000b3 47.75%),linear-gradient(90deg,oklch(1 0 0 / .09) 0 2.2%,transparent 5% 95%,oklch(0 0 0 / .3) 97.5% 100%),linear-gradient(var(--face-hi),var(--face) 42%,var(--face-lo))}.leaf--bot{background:linear-gradient(transparent 52.25%,color-mix(in srgb,var(--leaf-edge),transparent 52%) 52.5%,transparent 55.5%),linear-gradient(90deg,oklch(1 0 0 / .09) 0 2.2%,transparent 5% 95%,oklch(0 0 0 / .3) 97.5% 100%),linear-gradient(var(--face-hi),var(--face) 42%,var(--face-lo))}.leaf--top{clip-path:inset(0 0 calc(50% + var(--gap)) 0 round var(--radius) var(--radius) 0 0)}.leaf--bot{clip-path:inset(calc(50% + var(--gap)) 0 0 0 round 0 0 var(--radius) var(--radius))}.leaf--rest{z-index:1}.leaf--rise{z-index:3;transform:rotateX(-180deg)}.leaf--fall{z-index:4;transform:rotateX(0)}.leaf__lx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}.leaf--fall .leaf__lx{background:linear-gradient(var(--spec),oklch(1 0 0 / .015))}.leaf--rise .leaf__lx{background:linear-gradient(oklch(1 0 0 / .015),var(--spec))}.leaf--rest.leaf--top .leaf__lx{background:linear-gradient(var(--shadow),transparent 66%)}.leaf--rest.leaf--bot .leaf__lx{background:linear-gradient(transparent 30%,var(--shadow))}.cell__cast{position:absolute;z-index:2;inset:50% 0 0;transform-origin:50% 0;scale:1 .001;border-radius:0 0 var(--radius) var(--radius);background:linear-gradient(#000000b8,#0000001f);pointer-events:none}.cell__pins{position:absolute;z-index:5;inset:calc(50% - .16em) -.02em auto;block-size:.32em;border-radius:.03em;background:linear-gradient(90deg,var(--face-lo),var(--leaf-edge) 55%,var(--face-lo)) left / .1em 100% no-repeat,linear-gradient(90deg,var(--face-lo),var(--leaf-edge) 55%,var(--face-lo)) right / .1em 100% no-repeat;pointer-events:none}.cell:after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;background:linear-gradient(oklch(1 0 0 / .16),transparent 38%,transparent 62%,oklch(1 0 0 / .12));opacity:0}.cell[data-moving]:after{opacity:.4}.cell[data-moving] .leaf{color:color-mix(in oklab,var(--ink),var(--face) 55%)}.board[data-look=station]{--case: #0d1114;--case-edge: #242c34;--cavity: #03060a;--face: #141a20;--hi: 10%;--lo: 45%;--leaf-edge: #5f6e7d;--ink: #eaf6f4;--accent: #ffb057;--label: #7c8a97}.board[data-look=paper]{--case: #cfcabf;--case-edge: #b3aea3;--cavity: #6f6c65;--face: #f4f1e9;--hi: 80%;--lo: 11%;--leaf-edge: #a29d91;--ink: #26241f;--accent: #b8791b;--label: #6a665e;--shadow: rgb(50 48 44 / .55);--spec: rgb(255 255 255 / .55)}@media(prefers-reduced-motion:reduce){.cell:after,.cell[data-moving]:after{opacity:0}.cell[data-moving] .leaf{color:var(--ink)}}}@layer demo{body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;min-height:100svh;padding:4rem 1rem}.stage{display:grid;justify-items:center;gap:1.4rem;inline-size:min(100%,1400px)}@media(min-width:1100px){.stage{padding-inline-end:300px}}.scaler{container-type:inline-size;inline-size:100%;display:grid;justify-items:center;overflow-x:auto;overflow-y:hidden;padding:1.4rem .8rem;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,canvasText 25%,transparent) transparent}.caption{display:flex;gap:1.4rem;align-items:baseline;font-family:Roboto Mono,ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5}.caption b{font-weight:500;font-variant-numeric:tabular-nums}.caption a{color:inherit}}@layer base{html{color-scheme:light dark}[data-theme=light]{color-scheme:light only}[data-theme=dark]{color-scheme:dark only}*,*:after,*:before{box-sizing:border-box}body{margin:0;background:light-dark(#fff,#000);font-family:SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif,system-ui}body:before{--size: 45px;--line: color-mix(in hsl, canvasText, transparent 80%);content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) calc(var(--size) * .36) 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 0% calc(var(--size) * .32) / var(--size) var(--size);-webkit-mask:linear-gradient(-20deg,transparent 50%,white);mask:linear-gradient(-20deg,transparent 50%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}.bear-link{color:canvasText;position:fixed;top:1rem;left:1rem;width:48px;aspect-ratio:1;display:grid;place-items:center;opacity:.8}.bear-link:is(:hover,:focus-visible){opacity:1}.bear-link svg{width:75%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}div.tp-dfwv{z-index:9999;width:290px}div.tp-dfwv .tp-rotv{max-height:calc(100vh - 16px);overflow:auto;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv>.tp-rotv_b{position:sticky;top:0;z-index:2;background:#45474c}