:root{--dark:#162e31;--orange:#c66e2c;--gray:#cecece;font-family:"Aktiv Grotesk",Roboto,-apple-system,"Segoe UI",sans-serif;color:var(--dark)}
*{box-sizing:border-box}
html,body{margin:0;background:transparent}
main{padding:0}
#stage{position:relative;aspect-ratio:16/10;width:100%;border-radius:8px;overflow:hidden;cursor:grab;touch-action:pan-y;background:#f4f4f2;border:1px solid var(--gray)}
#stage.dragging{cursor:grabbing}
canvas{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none;pointer-events:none}
.badge{position:absolute;top:12px;left:14px;font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--orange)}
.stage-bottom{position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;font-size:12px;color:#555;pointer-events:none}
#angle{font-variant-numeric:tabular-nums}
#loading{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:5px 12px;border-radius:20px;font-size:11px;pointer-events:none}
#loading[hidden]{display:none}
input[type=range]{display:block;width:100%;margin:10px 0;accent-color:var(--orange);cursor:pointer}
.controls{display:flex;gap:8px}
button{border:1px solid var(--dark);border-radius:4px;min-height:40px;padding:8px 16px;background:var(--dark);color:#fff;font:inherit;font-size:14px;cursor:pointer}
button:hover{background:var(--orange);border-color:var(--orange)}
button#reset{background:#fff;color:var(--dark)}
button#reset:hover{background:var(--gray)}
button:focus-visible,input:focus-visible,#stage:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:600px){.controls button{flex:1;font-size:13px}}