:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#fff8e7;background:#172126;font-synthesis:none}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#172126}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.playground{position:relative;width:100%;height:100dvh;min-height:320px;overflow:hidden;background:#8f9d8b}.playground canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}.playground canvas:active{cursor:grabbing}.topbar{position:absolute;z-index:3;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:linear-gradient(180deg,#172126f2,#172126c9 75%,transparent);pointer-events:none}.brand,.top-actions>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:9px;color:#fff8e7;text-decoration:none;min-width:0}.brand img{width:clamp(92px,14vw,152px);max-height:34px;object-fit:contain;object-position:left center}.brand span{font-size:clamp(11px,1.8vw,17px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:8px;min-width:0}.return,.reset{min-height:44px;border:2px solid #f2b51d;border-radius:9px;padding:9px 13px;background:#f2b51d;color:#172126;font:800 13px system-ui;text-decoration:none;white-space:nowrap;cursor:pointer}.reset{background:#172126e8;color:#fff8e7}.progress{padding:6px 8px;color:#fff8e7;background:#172126bd;border-radius:7px;font-size:12px;font-weight:700;white-space:nowrap}.hint{position:absolute;z-index:2;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;flex-direction:column;gap:2px;padding:9px 14px;color:#fff8e7;background:#172126cf;border:1px solid #fff8e74d;border-radius:12px;font-size:clamp(12px,2vw,15px);font-weight:700;text-align:center;pointer-events:none;transition:opacity .35s,transform .35s}.hint strong{font-size:1em}.hint span{font-size:.84em;font-weight:500;color:#f3dc9d}.hint.is-hidden{opacity:0;transform:translate(-50%,8px)}.marker{position:absolute;z-index:1;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid #fff8e7;border-radius:50%;box-shadow:0 0 0 7px #f2b51d88,0 4px 16px #17212688;pointer-events:none;opacity:0;transform:scale(.7);transition:opacity .15s,transform .15s}.marker.is-visible{opacity:1;transform:scale(1)}@media(max-width:600px){.topbar{align-items:flex-start}.brand span{display:none}.top-actions{gap:5px}.progress{font-size:11px;padding:5px 6px}.return,.reset{min-height:42px;padding:8px 9px;font-size:12px}.hint{bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100% - 24px)}}@media(max-width:370px){.progress{display:none}.return,.reset{font-size:11px;padding-inline:8px}}@media(orientation:landscape)and (max-height:500px){.topbar{padding-top:6px;padding-bottom:6px}.brand img{max-height:26px}.return,.reset{min-height:38px;padding-block:6px}.hint{bottom:10px}}