:root{color-scheme:light;--ink:#273b34;--paper:#e9e0cd;--line:#a79c85;--accent:#9c4431}*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,sans-serif;background:#e9e0cd}::selection{background:#a54e38;color:#fffaf0}a{color:inherit;text-underline-offset:.22em}button,input{font:inherit}button,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #a23f2c}.skip{position:absolute;left:1rem;top:-5rem;z-index:3;background:#fff;padding:.8rem}.skip:focus{top:1rem}.topbar,footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 4vw;border-bottom:1px solid var(--line);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.topbar a,footer a{text-decoration:none}.topbar i{color:var(--accent);padding:0 .3em}.studio{display:grid;grid-template-columns:minmax(175px, .7fr) minmax(340px,1.9fr) minmax(230px,.85fr);gap:3vw;align-items:start;padding:4vw}.intro{position:sticky;top:2rem}.intro h1,.story h2{font-family:Fraunces,Georgia,serif;font-weight:300;line-height:.93;letter-spacing:-.035em;margin:0;font-size:clamp(3.25rem,5.1vw,5.8rem)}em{font-weight:300}.intro p{max-width:16rem;font-family:Fraunces,Georgia,serif;font-size:1.2rem;line-height:1.35;margin:1.6rem 0}.plate-wrap{min-width:0}.art-stage{position:relative;aspect-ratio:1;overflow:hidden;background:#e1d3bb;box-shadow:0 14px 35px #4438292b;touch-action:none}.art-stage img,.art-stage canvas{position:absolute;width:100%;height:100%;inset:0}.art-stage img{object-fit:cover}.art-stage canvas{opacity:0;transition:opacity .5s ease}.art-stage canvas:only-child,body[data-renderer="webgpu"] .art-stage canvas,body[data-renderer="vgpu"] .art-stage canvas{opacity:1}.plate-caption{display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;letter-spacing:.1em;margin-top:.9rem;color:#564e41}.controls{border-top:1px solid var(--ink);padding-top:1.2rem}.control-heading h2{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:1.7rem;line-height:1.05;margin:0 0 .8rem}.control-heading p,.story p{font-size:.87rem;line-height:1.65}.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2rem}.actions button{min-height:44px;padding:.65rem .9rem;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}.actions button:first-child{background:var(--ink);color:#fff9ea}.actions button:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}.actions button:disabled{opacity:.48;cursor:not-allowed}.control{padding:.85rem 0;border-top:1px solid #b9ad97}.control label{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem}.control output{font-variant-numeric:tabular-nums;color:#635946}.control input{width:100%;accent-color:var(--accent);margin:.9rem 0 .2rem;cursor:pointer}#renderer-status,#motion-note{font-size:.75rem;line-height:1.5;color:#594e3e}#renderer-status{margin-top:1.5rem}.story{display:grid;grid-template-columns:1fr 1fr;gap:12vw;padding:9vw 12vw;background:#ded3bc}.story h2{font-size:clamp(2.7rem,4.4vw,5rem);margin-bottom:2rem}.story p{max-width:55ch}.story figure{margin:0}.story img{display:block;width:100%;height:auto}.story figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;font-size:.75rem}.story figcaption em{font-family:Fraunces,Georgia,serif;font-size:1.1rem}footer{border:0;border-top:1px solid var(--line);padding-block:2rem}@media(max-width:950px){.studio{grid-template-columns:1fr 1fr}.intro{grid-column:1/-1;position:static;display:flex;justify-content:space-between;align-items:end}.intro h1 br{display:none}.intro p{margin:0}.controls{align-self:start}.story{gap:7vw;padding:10vw 6vw}}@media(max-width:620px){.topbar{padding:1rem 5vw;font-size:.75rem}.topbar span{display:none}.studio{display:flex;flex-direction:column;gap:1.2rem;padding:1.6rem 5vw 3.5rem}.intro{display:block}.intro h1{font-size:3.5rem}.intro p{font-size:1rem;margin:.8rem 0 0;max-width:none}.plate-wrap,.controls{width:100%}.plate-caption{font-size:.75rem}.controls{margin-top:.6rem}.control-heading h2{font-size:1.55rem}.actions{margin:1rem 0 1.5rem}.story{grid-template-columns:1fr;gap:2rem;padding:4rem 5vw}.story h2{font-size:3rem}.story figcaption{flex-direction:column;gap:.2rem}footer{padding:1.5rem 5vw;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.art-stage canvas{transition:none}}
:root .intro{min-width:0}
@media(max-width:620px){.studio>.intro{width:100%}.intro h1 br{display:block}}

.plate-caption{flex-wrap:wrap;gap:.25rem .8rem;letter-spacing:.03em}

@media(max-width:620px){.controls{display:flex;flex-direction:column}.controls>.actions{order:-1;margin:0 0 1.2rem}}

.art-stage{touch-action:none}.control input[type=range]{min-height:44px}