:root{--paper:#e8e4dc;--ink:#292b28;--muted:#73756f;--accent:#c85529}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit}header{position:absolute;z-index:2;top:0;left:0;width:100%;padding:32px 4%;display:flex;justify-content:space-between;align-items:center}.wordmark{text-decoration:none;color:inherit;font-family:Georgia,serif;font-size:32px;font-style:italic}.wordmark span{display:block;font:9px Arial;letter-spacing:2px;margin-top:8px}header button{background:none;border:1px solid #a9aaa1;border-radius:30px;padding:14px 22px;font-size:13px}header button span{margin-left:30px}.intro{position:absolute;left:6%;top:145px;pointer-events:none;z-index:1}h1{font:normal clamp(30px,3.5vw,53px)/1.08 Georgia,serif;letter-spacing:-1.8px;margin:0}.intro p{font-size:13px;color:var(--muted);margin-top:19px}#scene{height: min(76vh,820px);min-height:560px;width:100%;touch-action:none}#scene canvas{display:block;width:100%;height:100%}.readout{display:flex;gap:10px;justify-content:center;align-items:center;font:10px monospace;letter-spacing:1.3px;min-height:22px}.lamp{width:5px;height:5px;background:#95968e;border-radius:100%}.playing .lamp{background:var(--accent)}.controls{display:flex;justify-content:center;gap:5px;align-items:center;margin:18px auto 0;flex-wrap:wrap;padding:0 20px}.controls button{border:1px solid #b6b7ad;background:transparent;min-width:55px;height:42px;font-size:12px;border-radius:3px}.controls button span{display:block;font:8px Arial;letter-spacing:1px;margin-top:5px}.controls button:active,.controls button.active{background:#d0d0c7;transform:translateY(1px)}.controls label{font-size:8px;letter-spacing:1px;margin:0 15px}.controls input{display:block;width:80px;margin-top:7px;accent-color:#4f5b60}.controls .orange{background:#b94f27;color:#fff;border:0;font-size:8px;padding:10px}.hint{text-align:center;font-size:10px;color:var(--muted);margin:14px 0 25px}footer{display:flex;justify-content:space-between;padding:24px 4%;font:9px monospace;letter-spacing:1px}footer i{font:italic 12px Georgia;margin:0 5px}footer button{background:none;border:0;font-size:10px;text-decoration:underline}dialog{border:0;padding:40px;background:#f5f2eb;color:var(--ink);max-width:450px;width:calc(100% - 32px)}dialog::backdrop{background:#272b2966;backdrop-filter:blur(6px)}.close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:26px}h2{font:normal 32px Georgia;letter-spacing:-.7px}dialog p{font-size:13px;line-height:1.6;color:#65665f}.eyebrow{font-size:9px;letter-spacing:2px}form>label{display:block;font-size:11px;margin:24px 0 8px}input[type=url]{width:100%;padding:14px;background:transparent;border:1px solid #b9bbb1;font-size:12px}.primary,.file{width:100%;display:block;padding:14px;background:#344f61;color:white;border:0;text-align:center;font-size:12px;margin:12px 0}.file{position:relative;background:#deded4;color:var(--ink);cursor:pointer}.file input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.or{text-align:center;font:italic 14px Georgia}.note{font-size:10px!important}#error{color:#a5371f}#video-panel{text-align:center;margin:25px auto;width:320px}#youtube{width:320px;height:200px}small{display:block;font-size:9px;margin-top:8px;color:#777}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #bc5528;outline-offset:4px}@media(max-width:650px){header{padding:24px}.intro{top:115px;left:25px}h1{font-size:32px}.intro p{font-size:11px}#scene{height:68vh;min-height:540px}footer{gap:16px;flex-wrap:wrap;padding:20px 24px;font-size:8px}.controls{gap:4px}.controls button{min-width:42px}.controls label{margin:8px}.hint{font-size:9px}.readout{font-size:8px;padding:0 20px;text-align:center}dialog{padding:30px}}

.controls.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hint{margin-top:15px}#scene{cursor:grab}#scene:active{cursor:grabbing}

.wordmark span{font-size:11px;letter-spacing:1px}.readout{font:12px Arial;letter-spacing:.3px}.hint{font-size:12px;color:#565951}footer{font:11px Arial;letter-spacing:.3px}footer button{font-size:12px}.controls button span,.controls label,.controls .orange{font-size:11px}

small,.eyebrow,.note{font-size:11px!important}@media(max-width:650px){.wordmark span{font-size:9px;white-space:nowrap}header button{font-size:12px;padding:12px 16px}header button span{margin-left:12px}.intro p{font-size:12px}}

@media(max-width:650px){
  .intro{position:relative;left:auto;top:auto;padding:112px 24px 0}
  .intro h1{font-size:30px;letter-spacing:-1px}
  .intro p{margin:12px 0 0}
  #scene{height:clamp(360px,52svh,450px);min-height:0;margin-top:8px;overflow:hidden}
  .readout{padding:0 22px;line-height:1.5}
  .hint{padding:0 25px;line-height:1.5;margin-bottom:12px}
  footer{padding-top:18px}
}

@media(max-width:650px){.intro p{color:#565951}}