:root{color-scheme:light;--ink:#142640;--paper:#f4f0e5;--coral:#e76c58;--yellow:#ead46c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,sans-serif}::selection{background:var(--coral);color:#142640}a{color:inherit;text-underline-offset:.2em}button,input{font:inherit}button,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--coral)}.skip{position:absolute;top:-5rem;left:1rem;z-index:5;background:white;padding:1rem}.skip:focus{top:1rem}header{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #182b3c30}.signature{font-family:Fraunces,serif;font-size:1.4rem;text-decoration:none}.back{font-size:.8rem;text-decoration:none;min-height:44px;display:flex;align-items:center}.hero{position:relative}.hero-copy{position:absolute;z-index:1;top:5vw;left:6vw;pointer-events:none}.hero-copy h1,h2{font-family:Fraunces,serif;font-weight:300;letter-spacing:-.025em}.hero-copy h1{font-size:clamp(3rem,6vw,6rem);line-height:.94;margin:0}.hero-copy p{font-size:.9rem;line-height:1.6;margin-top:1.5rem}.artwork{margin:0}.art-stage{height:min(760px,75vw);min-height:570px;position:relative;background:#e8e9d9;overflow:hidden}.art-stage img,.art-stage canvas{width:100%;height:100%;position:absolute;inset:0}.art-stage img{object-fit:contain;padding:6%;background:#e8e9d9}.art-stage canvas{display:none}body[data-renderer="webgpu"] .art-stage canvas{display:block}body[data-renderer="webgpu"] .art-stage img{visibility:hidden}.artwork figcaption{padding:.8rem 6vw;color:#455563;font-size:.75rem}.control-area{padding:3.5rem 6vw 5rem;display:grid;grid-template-columns:1fr 1.3fr;gap:1rem 8vw}.intro h2{font-size:clamp(2rem,3vw,3rem);line-height:1.05;margin:0 0 1.2rem}.intro p,.source p{max-width:42ch;line-height:1.7}.intro p{font-size:.92rem}form{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.actions{grid-column:1/-1;display:flex;gap:.7rem}button{border:1px solid var(--ink);background:transparent;color:var(--ink);min-height:44px;padding:0 1.5rem;cursor:pointer}button:first-child{background:var(--ink);color:#fff}button:hover:not(:disabled){background:var(--coral);color:var(--ink)}button:disabled{opacity:.55;cursor:wait}.control label{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600}.control output{font-weight:400;font-variant-numeric:tabular-nums}.control input{width:100%;accent-color:var(--coral);margin:1.1rem 0 .6rem;cursor:pointer}.ends{display:flex;justify-content:space-between;color:#455563;font-size:.75rem}#motion-note,#renderer-status{margin:0;font-size:.75rem;color:#455563}#motion-note{grid-column:2}#renderer-status{grid-column:2}.source{background:#e4d67f;padding:6vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.source h2{font-size:clamp(2.8rem,5vw,5rem);line-height:1;margin:0 0 2rem}.source figure{margin:0}.source img{display:block;width:100%;max-height:580px;object-fit:contain;object-position:left}.source figcaption{font-size:.85rem;line-height:1.7;margin-top:1rem}.source figcaption span{font-size:.75rem}footer{display:flex;justify-content:space-between;gap:1rem;padding:2rem 6vw;font-size:.8rem}footer a{min-height:44px} @media(max-width:700px){header{height:60px}.hero-copy{top:1.4rem;left:5vw}.hero-copy h1{font-size:2.8rem}.hero-copy p{font-size:.75rem;margin-top:.6rem}.art-stage{height:480px;min-height:0}.art-stage img{padding:20% 5% 5%}.control-area{display:block;padding:2rem 5vw 3.5rem}.intro h2{font-size:2rem}.intro p{font-size:.88rem}form{margin-top:1.5rem;gap:1rem;grid-template-columns:1fr}.actions{grid-column:auto;grid-row:1}.control{margin-top:.2rem}#motion-note{margin-top:1.5rem}#renderer-status{margin-top:.5rem}.source{display:block;padding:3rem 5vw}.source figure{margin-top:2rem}footer{padding:2rem 5vw}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Keep control guidance across the whole control grid. */
#study-controls > p { grid-column: 1 / -1; margin: 0; max-width: 100%; line-height: 1.5; }
@media (max-width: 700px) {
  .control-area { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  #study-controls { order: -1; margin-top: 0; }
  .intro { margin-top: 2.5rem; }
}

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