.og-stage{position:absolute;inset:0;z-index:14;pointer-events:none;color:#f5f1e7;font-family:inherit;overflow:hidden;--og-gold:#e4cca0;--og-line:rgba(243,239,222,.25)}
.og-stage *, .og-stage *::before,.og-stage *::after{box-sizing:border-box}
.og-stage [hidden]{display:none!important}
.og-stage button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;pointer-events:auto}
.og-stage button:disabled{cursor:default;opacity:.5}
.og-stage button:focus-visible{outline:2px solid #ead5ae;outline-offset:5px}
.og-stage svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.og-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.og-welcome{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);width:min(490px,calc(100% - 40px));padding:30px 34px 26px;text-align:center;border-radius:25px;border:1px solid var(--og-line);background:linear-gradient(145deg,rgba(38,48,43,.76),rgba(18,28,27,.82));backdrop-filter:blur(20px);box-shadow:0 15px 60px #0002;pointer-events:auto;animation:og-reveal .7s ease both}
.og-eyebrow{font-size:9px;letter-spacing:.23em;color:var(--og-gold);font-weight:500}
.og-welcome h2,.og-finish h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:35px;line-height:1.15;letter-spacing:-.03em;margin:13px 0 15px}
.og-welcome p{font-size:13px;line-height:1.8;max-width:340px;margin:0 auto;color:#f6f3e7c7}
.og-key-hint{display:block;font-size:10px;letter-spacing:.08em;color:#f6f3e789;margin:20px 0 18px}
.og-primary{border:1px solid #ead8b640;background:#e9dec5;color:#263c35!important;border-radius:30px;min-height:45px;padding:13px 24px;display:inline-flex;align-items:center;justify-content:center;gap:20px;font-size:12px!important;font-weight:500!important;box-shadow:0 3px 20px #0001;transition:background .2s,transform .2s}
.og-primary:hover{background:#f5e9d1;transform:translateY(-1px)}
.og-primary:active{transform:translateY(0) scale(.98)}
.og-primary svg{width:15px;height:15px}
.og-hud{position:absolute;top:114px;left:40px;right:40px;display:flex;align-items:center;gap:24px;pointer-events:none;animation:og-reveal .5s ease both}
.og-score{border-radius:18px;border:1px solid var(--og-line);background:#1c302b6e;backdrop-filter:blur(18px);padding:14px 19px;min-width:114px}
.og-hud-label{display:block;font-size:8px;letter-spacing:.2em;color:#f4efe0a6;margin-bottom:5px}
.og-score strong{font-family:Georgia,serif;font-size:29px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1}
.og-score strong span{font:11px 'Segoe UI',sans-serif;color:#f4efe097}
.og-round{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.04em;text-shadow:0 1px 8px #0008}
.og-round i{height:4px;width:4px;border-radius:100%;background:var(--og-gold)}
.og-exit{margin-left:auto;border:1px solid var(--og-line);background:#1c302b6e;backdrop-filter:blur(18px);padding:10px 15px;border-radius:25px;display:flex;align-items:center;gap:8px;font-size:10px!important}
.og-exit:hover{background:#4e5b4bb8}
.og-controls{position:absolute;bottom:83px;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 38px));padding:17px 24px 14px;text-align:center;background:linear-gradient(145deg,#253b33dd,#182b28dc);border:1px solid var(--og-line);border-radius:22px;box-shadow:0 10px 35px #0002;backdrop-filter:blur(22px);pointer-events:auto}
.og-feedback{height:30px;margin:0 0 9px;font-size:11px;line-height:1.4;display:flex;align-items:center;justify-content:center;color:#f2eee2c4}
.og-feedback[data-tone=good]{color:#e9d9b3}.og-feedback[data-tone=wait]{color:#dfc6a8}
.og-meter-wrap{max-width:310px;margin:0 auto 14px}
.og-meter-label{display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:.13em;color:#eeeadd70;margin-bottom:10px}
.og-meter-caption{letter-spacing:.02em;color:#eeeadd9c}
.og-meter{height:5px;background:#ffffff17;border-radius:5px;position:relative}
.og-sweetspot{position:absolute;top:0;bottom:0;background:#c8b080;border-radius:4px;box-shadow:0 0 15px #c9ac6a33}
.og-needle{position:absolute;top:-5px;bottom:-5px;width:3px;background:#fff5df;border-radius:3px;transform:translateX(-50%);box-shadow:0 0 9px #fff7de6a}
.og-meter-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:linear-gradient(90deg,#a9b795,#e7cfa3);transition:width .08s linear}
.og-actions{display:flex;justify-content:center;align-items:center;gap:9px}
.og-actions .og-primary{min-width:180px;min-height:42px;padding:10px 21px;font-size:11px!important}
.og-actions kbd{font-family:inherit;font-size:8px;letter-spacing:.04em;opacity:.55;display:inline-block;border:1px solid #253e342f;border-radius:4px;padding:4px 5px}
.og-pedal{border:1px solid #e2dac443;border-radius:30px;background:#ffffff08;display:inline-flex;align-items:center;gap:12px;justify-content:center;padding:11px 19px;min-width:132px;font-size:11px!important;transition:background .2s,border-color .2s,color .2s,transform .15s;user-select:none;touch-action:manipulation}
.og-pedal:hover{background:#ffffff15}
.og-pedal.og-next{color:#2c4035;background:#e6d9ba;border-color:#e6d9ba;box-shadow:0 0 20px #e9d3a014}
.og-pedal:active{transform:scale(.94)}
.og-pedal-dot{font-size:24px;color:#e3d1ac88}
.og-control-hint{display:block;font-size:8px;letter-spacing:.05em;color:#eeeadd63;margin-top:10px}
.og-finish{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 40px));padding:26px;text-align:center;text-shadow:0 2px 20px #000b;animation:og-finish .65s ease both}
.og-finish p{font-size:13px;color:#faf2dfc7}
@keyframes og-reveal{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes og-finish{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(max-width:650px){.og-hud{top:97px;left:20px;right:20px;gap:14px}.og-score{padding:10px 13px;min-width:86px;border-radius:14px}.og-score strong{font-size:25px}.og-hud-label{font-size:7px}.og-round{max-width:110px;font-size:9px;line-height:1.5;gap:6px}.og-exit{padding:9px 11px}.og-exit span{display:none}.og-welcome{bottom:90px;padding:27px 25px 23px}.og-welcome h2,.og-finish h2{font-size:30px}.og-welcome p{font-size:12px}.og-controls{bottom:77px;padding:14px 18px 12px;border-radius:19px}.og-feedback{font-size:10px;height:28px}.og-meter-label{font-size:7px}.og-pedal{min-width:123px;padding:11px 14px;gap:9px}.og-control-hint{font-size:7px}.og-actions .og-primary{min-height:40px}.og-finish{top:40%}}
@media(max-height:640px) and (min-width:651px){.og-hud{top:94px;left:25px;right:25px}.og-score{padding:9px 13px}.og-score strong{font-size:24px}.og-welcome{bottom:75px;padding:23px 30px;width:440px}.og-welcome h2{font-size:29px;margin:9px 0}.og-welcome p{font-size:11px}.og-key-hint{margin:13px 0}.og-controls{bottom:65px;padding:10px 20px}.og-feedback{height:23px;margin-bottom:6px}.og-control-hint{margin-top:7px}.og-meter-wrap{margin-bottom:11px}.og-actions .og-primary,.og-pedal{min-height:34px;padding-top:8px;padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){.og-stage *{animation:none!important;transition:none!important}}