*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#070707;color:#f5f0e5;font-family:Arial,sans-serif}button{cursor:pointer;font:inherit}button:focus-visible,[role=button]:focus-visible{outline:2px solid #fff;outline-offset:4px}.scene{position:relative;width:100%;min-height:100svh;display:grid;place-items:center;overflow:hidden}.stage{position:relative;width:100vw;aspect-ratio:16/9;max-height:100svh;max-width:177.7778svh}.stage video,.interactions{position:absolute;inset:0;width:100%;height:100%;display:block}.stage video{object-fit:fill}.interactions{overflow:visible}.object{cursor:pointer;outline:none}.hover-shade{fill:#000;fill-opacity:0;transition:fill-opacity .3s ease;pointer-events:all}.object:hover .hover-shade,.object:focus-visible .hover-shade{fill-opacity:.32}/* Layered sketch: separate near-identical lines drift and fade independently.
   No geometry wobble, no glow, no visible text labels. */
.pencil-line{fill:none;stroke:#f2e9dc;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none;filter:none;transform-box:view-box;transform-origin:center;will-change:transform,opacity}
.primary{stroke-width:.72;animation:sketch-a 5.8s ease-in-out infinite alternate}
.ghost{stroke-width:.62;animation:sketch-b 7.1s ease-in-out infinite alternate}
.fleck{stroke-width:.48;animation:sketch-c 6.4s ease-in-out infinite alternate}
@keyframes sketch-a{0%{transform:translate(-2px,1px);opacity:.64}30%{transform:translate(1px,-1px);opacity:.29}65%{transform:translate(2px,1px);opacity:.57}100%{transform:translate(-1px,-2px);opacity:.37}}
@keyframes sketch-b{0%{transform:translate(2px,-2px);opacity:.16}35%{transform:translate(-1px,1px);opacity:.62}70%{transform:translate(-2px,-1px);opacity:.26}100%{transform:translate(2px,2px);opacity:.54}}
@keyframes sketch-c{0%{transform:translate(0,2px);opacity:.4}40%{transform:translate(2px,0);opacity:.13}75%{transform:translate(-1px,-2px);opacity:.48}100%{transform:translate(1px,1px);opacity:.2}}
.object:hover .pencil-line,.object:focus-visible .pencil-line{stroke:#fff9ed}
.motion-toggle{position:fixed;right:14px;bottom:14px;z-index:3;background:#1119;color:#fff;border:1px solid #ffffff66;border-radius:3px;width:35px;height:35px;font-size:18px}.film-overlay{position:fixed;inset:0;z-index:10;background:#050505;display:grid;place-items:center;padding:55px 16px 20px}.film-overlay[hidden]{display:none}.film-overlay video{width:min(100%,1200px);max-height:calc(100svh - 85px);background:#000}.close-film{position:absolute;top:12px;right:18px;background:none;border:none;color:#fff;font-size:36px;line-height:1}.film-overlay p{position:absolute;bottom:12px;background:#111;padding:8px 14px;font-size:13px}@media(prefers-reduced-motion:reduce){.pencil-line{animation:none}.primary{opacity:.58}.ghost{opacity:.24}.fleck{opacity:.16}}
