:root{--ground: #1c1a1f;--accent: #d9a441;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:dark}html.k-light{--fg: #1d1b18;--muted: #5d574e;--panel: rgb(250 248 243 / .9);--surface: #f4f1ea;--line: rgb(0 0 0 / .14);color-scheme:light}html.k-dark,html:not(.k-light){--fg: #f2efe9;--muted: #b9b3aa;--panel: rgb(17 16 19 / .84);--surface: #141316;--line: rgb(255 255 255 / .16)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem}body{margin:0;background:var(--ground);color:var(--fg);font:16px/1.5 var(--sans);transition:background-color .9s ease;overflow-x:hidden}a{color:inherit}:focus-visible{outline:3px solid var(--fg);outline-offset:3px;border-radius:4px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.skip{position:absolute;left:1rem;top:-4rem;z-index:20;padding:.6rem 1rem;background:var(--panel);border-radius:8px}.skip:focus{top:1rem}canvas.paint{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:0;display:block;touch-action:pan-y}main,.bar,.foot{position:relative;z-index:1}.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:max(.75rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .75rem max(1rem,env(safe-area-inset-left));pointer-events:none}.bar>*{pointer-events:auto}.name{font:600 1.05rem/1 var(--serif);letter-spacing:.02em;text-decoration:none;background:var(--panel);padding:.55rem .85rem;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem}.btn{font:500 .85rem/1 var(--sans);color:var(--fg);text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.55rem .8rem;min-height:2.25rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn[hidden]{display:none}.btn[aria-pressed]:before{content:"";width:.55rem;height:.55rem;border-radius:50%;border:1.5px solid currentColor}.btn[aria-pressed=true]:before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 1.5px var(--fg)}.stage{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:4.75rem 1rem 1.5rem;position:relative}.piece{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem}.frame{line-height:0}img.art{display:block;width:min(calc(var(--w) * 1px),92vw,calc((100svh - var(--chrome, 19rem)) * var(--ar)));min-width:min(14rem,80vw);height:auto;box-shadow:0 1px 2px #00000040,0 12px 40px #00000047;view-transition-name:art}@supports not (height: 100svh){img.art{width:min(calc(var(--w) * 1px),92vw,calc((100vh - var(--chrome, 19rem)) * var(--ar)))}}img.art.pending{opacity:0}.cap{background:var(--panel);color:var(--fg);padding:.75rem 1.1rem .85rem;border-radius:12px;border:1px solid var(--line);text-align:center;max-width:min(36rem,92vw);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);view-transition-name:cap}.pos{margin:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;gap:.6rem;justify-content:center}.pos a{text-decoration:none}.pos a:hover{text-decoration:underline}.title{margin:.15rem 0 .1rem;font:italic 400 clamp(1.45rem,3.5vw,2rem)/1.15 var(--serif)}.meta{margin:0;color:var(--muted);font-size:.95rem}.scalebox{margin-top:.55rem;display:flex;align-items:flex-end;justify-content:center;gap:.6rem;font-size:.72rem;color:var(--muted)}.scale{color:var(--fg);overflow:visible}.scale .fig{fill:currentColor;opacity:.65}.scale .r{fill:var(--accent);stroke:currentColor;stroke-width:.6}.scale .floor{stroke:currentColor;stroke-width:.6;opacity:.4}.step a{position:absolute;top:50%;translate:0 -50%;width:3.25rem;height:3.25rem;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:1.35rem;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:scale .15s ease}.step a:hover{scale:1.08}.step .prev{left:max(1rem,env(safe-area-inset-left))}.step .next{right:max(1rem,env(safe-area-inset-right))}@media (max-width: 560px){.bar{position:absolute;flex-wrap:wrap;row-gap:.5rem}.name{white-space:nowrap}.controls{flex:1 1 100%;justify-content:flex-start}.btn{padding:.5rem .7rem;font-size:.8rem}.stage{padding-top:7rem;--chrome: 24rem}}@media (max-width: 760px){.stage{padding-bottom:5.5rem}.step a{top:auto;bottom:1.2rem;translate:none}.step .prev{left:calc(50% - 4rem)}.step .next{right:calc(50% - 4rem)}}.arriving .cap{animation:cap-in .9s cubic-bezier(.2,.7,.2,1) both}@keyframes cap-in{0%{opacity:0;translate:0 .6rem}}.all{background:var(--surface);color:var(--fg);padding:3.5rem max(1rem,env(safe-area-inset-right)) 2rem max(1rem,env(safe-area-inset-left));border-top:1px solid var(--line);transition:background-color .9s ease}.all-in{max-width:72rem;margin:0 auto}.all h2{font:400 2rem/1.1 var(--serif);margin:0 0 1rem}.toc ul{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-wrap:wrap;gap:.4rem}.toc a{display:inline-block;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.88rem}.toc a:hover{border-color:var(--fg)}.chapter{margin-top:2.25rem}.chapter h3{font:italic 400 1.4rem/1.2 var(--serif);margin:0}.note{margin:.2rem 0 0;color:var(--muted);font-size:.92rem}.grid{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(10.5rem,42vw),1fr));gap:1.25rem 1rem}.grid a{display:block;text-decoration:none;border-radius:6px}.grid picture{display:block;aspect-ratio:4 / 5;border-radius:6px;overflow:hidden;background:color-mix(in oklab,var(--c, #888) 40%,var(--surface))}.grid img{width:100%;height:100%;object-fit:contain;display:block;transition:scale .35s cubic-bezier(.2,.7,.2,1)}.grid a:hover img{scale:1.04}.grid .t{display:block;margin-top:.45rem;font:italic 1rem/1.25 var(--serif)}.grid a[aria-current] picture{outline:2px solid var(--fg);outline-offset:3px}@supports (animation-timeline: view()){@media (prefers-reduced-motion: no-preference){.grid li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}@keyframes rise{0%{opacity:0;translate:0 1.5rem}}}}.foot{background:var(--surface);color:var(--muted);text-align:center;font-size:.85rem;padding:1.5rem 1rem 2.5rem;transition:background-color .9s ease}.foot p{margin:.2rem 0}.hint{display:none}@media (pointer: fine){.js .hint{display:block}}@media (prefers-reduced-motion: no-preference){@view-transition{navigation: auto;}}::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}::view-transition-group(art){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.2s!important}body,.all,.foot{transition:none}}.nf{min-height:100vh;display:grid;place-content:center;text-align:center;padding:2rem}.nf h1{font:italic 400 2rem/1.2 var(--serif)}
