*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:#10130f;color:#f4f0e8;font-family:Avenir Next,Segoe UI,sans-serif}button,input{font:inherit}.shell{height:100vh;display:grid;grid-template-columns:340px minmax(0,1fr);overflow:hidden;background:linear-gradient(90deg,#11130feb,#11130f8c),radial-gradient(circle at 80% 20%,rgba(88,166,102,.22),transparent 32%),#10130f}.sidebar{min-height:0;padding:24px;display:flex;flex-direction:column;gap:22px;overflow:auto;border-right:1px solid rgba(244,240,232,.14);background:#10130fe0}.brand{display:flex;align-items:center;gap:12px}.brand-link,.brand-copy{color:inherit;text-decoration:none}.brand-link{flex:0 0 auto}.brand-copy{display:grid;gap:2px}.brand-mark{width:42px;height:42px;border-radius:50%;display:block;object-fit:cover;border:1px solid rgba(244,240,232,.34);box-shadow:0 0 0 2px #e7c96f2e,0 10px 24px #00000057}.brand-link:hover .brand-mark,.brand-link:focus-visible .brand-mark{border-color:#e7c96f;box-shadow:0 0 0 3px #e7c96f52,0 12px 28px #0000006b}.brand-copy:hover h1,.brand-copy:focus-visible h1{color:#e7c96f}h1,h2,p{margin:0}h1{font-size:24px}h2{margin-bottom:10px;font-size:13px;color:#aeb7a7;text-transform:uppercase}.brand p,.empty,.difficulty span,.difficulty small{color:#aeb7a7}.drop-zone{min-height:110px;display:grid;place-items:center;border:1px dashed rgba(231,201,111,.7);background:#e7c96f14;cursor:pointer}.drop-zone.dragging{background:#58a66633}.drop-zone input{display:none}.starter-card{display:grid;gap:10px;padding:16px;border:1px solid rgba(231,201,111,.32);background:linear-gradient(135deg,#e7c96f2e,#58a66614),#f4f0e80d;box-shadow:inset 0 1px #f4f0e814}.starter-card .eyebrow{color:#e7c96f;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.starter-card h2{margin:0;color:#f4f0e8;font-size:17px;text-transform:none}.starter-card p{color:#c7d0bf;font-size:13px;line-height:1.45}.starter-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.starter-download,.starter-copy{border:1px solid rgba(244,240,232,.16);padding:10px 12px;color:#f4f0e8;text-decoration:none;cursor:pointer}.starter-download{background:#e7c96f;color:#151713;font-weight:800;text-align:center}.starter-copy{background:#f4f0e80f}.starter-download:hover,.starter-download:focus-visible{background:#f4dc89}.starter-copy:hover,.starter-copy:focus-visible{border-color:#58a666;background:#58a66633}.starter-password{display:flex;gap:8px;align-items:center}.starter-password code{padding:2px 7px;border:1px solid rgba(244,240,232,.16);border-radius:999px;background:#0000003d;color:#f4dc89}.difficulty-list,.toolbar,.mod-grid{display:grid;gap:8px}.difficulty,.toolbar button,.mod-toggle{border:1px solid rgba(244,240,232,.14);color:#f4f0e8;background:#f4f0e80f;padding:12px;text-align:left;cursor:pointer}.difficulty{display:grid;gap:4px}.difficulty.active{border-color:#e7c96f;background:#e7c96f24}.toolbar button.active,.mod-toggle.active{border-color:#58a666;background:#58a66633}.difficulty:disabled,.toolbar button:disabled,.mod-toggle:disabled{opacity:.46;cursor:not-allowed}.mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mod-toggle{display:grid;gap:2px}.mod-toggle span{color:#aeb7a7;font-size:11px}.stage-column{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}.stage{min-height:0;position:relative;overflow:hidden;background:#080c10}.stage canvas{width:100%;height:100%;display:block;position:relative;z-index:2}.wait-overlay{position:absolute;top:0;left:0;right:0;z-index:3;height:5px;pointer-events:none;opacity:0;overflow:hidden;transition:opacity .12s ease}.wait-overlay.visible{opacity:1}.wait-overlay i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ffffffe6,#fff);box-shadow:0 0 14px #ffffffb3,0 0 28px #ffffff47;transform:scaleX(1);transform-origin:left center;transition:transform 60ms linear}.stage-media,.stage-background,.stage-video{position:absolute;inset:0;width:100%;height:100%}.stage-media{z-index:0;pointer-events:none;overflow:hidden}.stage-background,.stage-video{object-fit:cover;opacity:.42;filter:saturate(.9) brightness(.58) blur(.5px)}.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(244,240,232,.14);border-bottom:1px solid rgba(244,240,232,.14)}.hud>div{padding:14px 18px;display:grid;gap:4px;border-right:1px solid rgba(244,240,232,.12)}.hud span{color:#aeb7a7;font-size:12px}.judgement-panel{grid-column:1 / -1;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(320px,1.2fr);gap:18px;align-items:center;padding:12px 18px;background:#0000002e}.result-strip{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.result-strip span{display:flex;gap:6px;align-items:baseline}.offset-row{display:grid;grid-template-columns:auto minmax(160px,1fr) auto;gap:10px;align-items:center}.offset-chart{position:relative;height:28px;border-radius:999px;background:linear-gradient(90deg,rgba(56,189,248,.2),transparent 44%,rgba(244,240,232,.2) 50%,transparent 56%,rgba(248,113,113,.2)),#f4f0e812;overflow:hidden}.offset-chart:before{content:"";position:absolute;top:4px;bottom:4px;left:50%;width:1px;background:#f4f0e8a8}.offset-dot{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);background:#f4f0e8;box-shadow:0 0 10px #f4f0e880}.offset-dot.great{background:#8ee8a0}.offset-dot.ok{background:#e7c96f}.offset-dot.meh{background:#fb923c}.offset-dot.miss{background:#ef4444}.debug{display:none;margin:0;padding:16px 18px;overflow:auto;color:#d6ded0;background:#00000047}@media(max-width:820px){html,body,#app{height:auto;min-height:100%}.shell{height:auto;min-height:100vh;grid-template-columns:1fr;overflow:visible}.sidebar{overflow:visible;border-right:0;border-bottom:1px solid rgba(244,240,232,.14)}.stage-column{grid-template-rows:minmax(420px,68vh) auto}.hud{grid-template-columns:repeat(2,minmax(0,1fr))}.judgement-panel{grid-template-columns:1fr}}