@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Share+Tech+Mono&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}*{-webkit-tap-highlight-color:transparent}:root{--bg:#090d1f;--surface:#0d1530;--border:#1a2a60;--text:#f0f8ff;--muted:#8aaae8;--green:#39ff14;--yellow:#ffe600;--red:#ff3131;--accent:#ff2d9b;--cyan:#00e5ff;--pink:#ff2d9b;--blue:#4a6fe3;--purple:#bf00ff;--orange:#ff6b00;--chassis-line:#0a0a14;--chassis-highlight:#ffffff0a;--chassis-recess:#00000040}html,body{height:100%;color:var(--text);background:#060609;font-family:Inter,system-ui,sans-serif;font-size:16px;overflow:hidden}body{flex-direction:column;justify-content:center;align-items:stretch;display:flex}.layout{background:repeating-linear-gradient(#0000 0 3px,#00000014 3px 4px),linear-gradient(#141420 0%,#0f0f18 50%,#0a0a12 100%);border:1px solid #24242f;border-radius:10px;flex-direction:column;gap:0;width:100%;max-width:680px;height:min(100dvh - 8px,940px);margin:auto;padding:0;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0f,inset 0 -1px #0009,0 30px 60px #0000008c,0 0 0 1px #0006}.layout:after{content:"";pointer-events:none;z-index:10;background:radial-gradient(7px at 16px 22px,#05050a 2px,#3a3a48 2.5px,#1a1a22 5px,#05050a 6px,#0000 7px),radial-gradient(7px at calc(100% - 16px) 22px,#05050a 2px,#3a3a48 2.5px,#1a1a22 5px,#05050a 6px,#0000 7px),radial-gradient(7px at 16px calc(100% - 16px),#05050a 2px,#3a3a48 2.5px,#1a1a22 5px,#05050a 6px,#0000 7px),radial-gradient(7px at calc(100% - 16px) calc(100% - 16px),#05050a 2px,#3a3a48 2.5px,#1a1a22 5px,#05050a 6px,#0000 7px);border-radius:10px;position:absolute;inset:0}.layout>*+*{border-top:1px solid #0000;border-image:linear-gradient(to right, transparent 5px, var(--chassis-line) 5px, var(--chassis-line) calc(100% - 5px), transparent calc(100% - 5px)) 1}#start-screen,#home-panel,#program-panel,#proving-panel,#tuner-panel,#match-panel,#melody-panel,#scales-panel,#song-panel,#range-panel{flex:1;min-height:0;overflow:hidden auto}#home-panel,#program-panel{flex-direction:column;overflow:hidden}.header{flex-shrink:0;justify-content:space-between;align-items:center;height:44px;padding:0 32px;display:flex}.logo{letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(#2a2a34 0%,#1c1c24 100%);border:1px solid #0a0a12;border-radius:3px;align-items:baseline;gap:8px;padding:6px 10px;font-family:"Press Start 2P",monospace;font-size:.7rem;line-height:1.1;display:inline-flex;box-shadow:inset 0 1px #ffffff0d,inset 0 -1px 2px #0009,0 1px #0006}.logo-w{color:var(--pink);text-shadow:0 0 6px var(--pink), 0 0 14px #ff2d9b99}.logo-m{color:var(--yellow);text-shadow:0 0 6px var(--yellow), 0 0 14px #ffe60080}.logo-5{color:var(--cyan);text-shadow:0 0 6px var(--cyan), 0 0 14px #00e5ff8c}.logo-5 sup{opacity:.7;font-size:8px}.home-logo{color:#ff2d9b;text-align:center;text-shadow:0 0 10px #ff2d9b,0 0 30px #ff2d9b99,2px 2px #ffe600,-1px -1px #ffe600;letter-spacing:.05em;padding:8px 0 4px;font-family:"Press Start 2P",monospace;font-size:clamp(1.6rem,6vw,2.8rem);line-height:1.4}.home-logo span{display:block}@keyframes rainbow-border{0%{border-color:var(--pink)}33%{border-color:var(--yellow)}66%{border-color:var(--cyan)}to{border-color:var(--pink)}}.auth-area{align-items:center;gap:8px;margin-left:auto;padding-right:8px;display:flex}.auth-name{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:120px;font-size:.75rem;overflow:hidden}.btn-auth{color:#d7d7e4;cursor:pointer;background:linear-gradient(#2a2a38,#1a1a24);border:1px solid #3a3a4a;border-radius:5px;padding:6px 12px;font-size:.75rem;transition:background .15s,border-color .15s;box-shadow:inset 0 1px #ffffff14,0 2px 4px #0006}.btn-auth:hover{background:linear-gradient(#32323f,#1e1e29);border-color:#4a4a5a}.tab{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:8px;padding:6px 14px;font-size:.85rem;transition:all .15s}.tab.active,.tab:hover{background:var(--accent);border-color:var(--accent);color:#fff}#start-screen{flex:1;justify-content:center;align-items:center;display:flex}.btn-start{padding:18px 36px;font-size:1.1rem}.section-grid{grid-template-columns:1fr 1fr;gap:10px;width:100%;min-width:0;max-width:480px;margin:0 auto;display:grid;position:relative}.section-card-frame{aspect-ratio:1;width:100%;min-width:0;max-height:26vh;box-shadow:none;background:linear-gradient(#32323e 0%,#28282f 40%,#1e1e28 100%);border:2px solid #0a0a14;border-radius:22px;padding:12px;position:relative}.section-card-frame:before{content:"";border:4px solid var(--neon-color,transparent);box-shadow:0 0 10px var(--neon-glow,transparent), 0 0 24px var(--neon-glow,transparent), 0 0 40px var(--neon-glow,transparent), inset 0 0 12px var(--neon-glow,transparent);pointer-events:none;z-index:1;background:0 0;border-radius:15px;position:absolute;inset:10px}.section-card-frame:after{content:"";pointer-events:none;z-index:3;background:repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 0 33%/5px 30px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 0 67%/5px 30px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 100% 33%/5px 30px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 100% 67%/5px 30px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 33% 0/30px 5px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 67% 0/30px 5px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 33% 100%/30px 5px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 67% 100%/30px 5px no-repeat;border-radius:22px;position:absolute;inset:0}.section-card{cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;z-index:2;background:linear-gradient(#1e1e3a 0%,#06091a 100%);border:2px solid #0a0a14;border-radius:12px;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;width:100%;height:100%;padding:10px 10px 14px;transition:transform .1s,filter .1s;display:flex;position:relative;overflow:hidden;transform:scale(.94)}.section-card:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(90deg,#0000,#ffffff59 30% 70%,#0000);height:1px;position:absolute;top:0;left:10%;right:10%}.section-card-frame:hover:before{box-shadow:0 0 12px var(--neon-glow,transparent), 0 0 28px var(--neon-glow,transparent), 0 0 50px var(--neon-glow,transparent), inset 0 0 16px var(--neon-glow,transparent)}.section-card:active{transform:scale(.91)}.section-card-frame:active:before{box-shadow:0 0 16px var(--neon-glow,transparent), 0 0 36px var(--neon-glow,transparent), 0 0 65px var(--neon-glow,transparent), 0 0 90px var(--neon-glow,transparent), inset 0 0 20px var(--neon-glow,transparent);border-width:5px}.section-card-icon{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0 0 35%}.section-card-icon-img{aspect-ratio:1;width:65%;filter:brightness(1.4) drop-shadow(0 0 6px var(--neon-color)) drop-shadow(0 0 14px var(--neon-glow));background:50%/contain no-repeat;transition:filter .1s}.section-card:active .section-card-icon-img{filter:brightness(1.8) drop-shadow(0 0 10px var(--neon-color)) drop-shadow(0 0 22px var(--neon-glow)) drop-shadow(0 0 40px var(--neon-glow))}.section-card-label{z-index:2;letter-spacing:.05em;text-transform:uppercase;font-family:"Press Start 2P",monospace;font-size:.65rem;line-height:1.7;position:relative}.section-card-frame[data-neon=pink]{--neon-color:#ff2d78;--neon-glow:#ff2d7880;--neon-text:#ff5a9e}.section-card-frame[data-neon=cyan]{--neon-color:#00e5ff;--neon-glow:#00e5ff80;--neon-text:#5eeeff}.section-card-frame[data-neon=yellow]{--neon-color:#ffe100;--neon-glow:#ffe10080;--neon-text:#ffe766}.section-card-frame[data-neon=green]{--neon-color:#39ff14;--neon-glow:#39ff1480;--neon-text:#7aff5a}.section-card-frame[data-neon] .section-card-label{color:var(--neon-text);text-shadow:0 0 8px var(--neon-glow)}.hw-panel{box-sizing:border-box;background:radial-gradient(circle,#3a3a4a 2px,#2a2a38 3px,#1a1a28 4px,#0000 5px) 10px 10px/10px 10px no-repeat,radial-gradient(circle,#3a3a4a 2px,#2a2a38 3px,#1a1a28 4px,#0000 5px) calc(100% - 10px) 10px/10px 10px no-repeat,radial-gradient(circle,#3a3a4a 2px,#2a2a38 3px,#1a1a28 4px,#0000 5px) 10px calc(100% - 10px)/10px 10px no-repeat,radial-gradient(circle,#3a3a4a 2px,#2a2a38 3px,#1a1a28 4px,#0000 5px) calc(100% - 10px) calc(100% - 10px)/10px 10px no-repeat,linear-gradient(#14182a 0%,#0c0f1e 100%);border:1px solid #2a2e45;border-radius:16px;width:100%;max-width:480px;margin:0 auto;padding:18px 12px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,0 4px 16px #00000080}.hw-strip{background:#060912;border:1px solid #1a2a60;border-radius:8px;justify-content:space-around;align-items:center;gap:8px;width:100%;max-width:480px;margin:0 auto;padding:8px 12px;display:flex}.hw-group{flex-direction:row;align-items:center;gap:5px;display:flex}.hw-label{color:#4a5a8a;text-transform:uppercase;letter-spacing:.08em;font-family:monospace;font-size:.6rem}.hw-leds{gap:4px;display:flex}.hw-led{background:#1a2a60;border:1px solid #0d1530;border-radius:50%;width:8px;height:8px}.hw-led.on{background:#ffe600;box-shadow:0 0 4px #ffe600,0 0 8px #ffe60080}.hw-led.green{background:#1a2a60}.hw-led.green.on{background:#39ff14;box-shadow:0 0 4px #39ff14,0 0 8px #39ff1480}.hw-led.red.on{background:#ff3131;box-shadow:0 0 4px #ff3131,0 0 8px #ff313180}@media (orientation:landscape) and (height<=540px){.layout{gap:6px;padding:6px 16px}.home-logo,.hw-strip{display:none}.hw-panel{flex:1;justify-content:center;align-items:center;max-width:none;padding:10px;display:flex}.section-grid{grid-template-columns:repeat(4,1fr);align-content:center;justify-items:center;gap:8px;max-width:none;height:100%}.section-card-frame{aspect-ratio:1;max-width:100%;height:100%;max-height:100%}.section-card-label{font-size:clamp(.45rem,2.5vh,.85rem)}#trace-container{height:80px}}.btn{background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:10px;padding:10px 20px;font-size:.95rem;transition:all .15s}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--pink);border-color:var(--pink);color:#fff;padding:14px 28px;font-size:1.1rem;font-weight:700;box-shadow:0 0 16px #ff2d9b59}.btn-primary:hover{color:#fff;background:#ff50b0;border-color:#ff50b0;box-shadow:0 0 22px #ff2d9b80}.note-display-wrapper{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px}#note-display{flex-direction:column;align-items:center;gap:12px;display:flex}.note-name{letter-spacing:-2px;color:var(--green);font-size:4rem;font-weight:800;line-height:1}.raw-hz{color:var(--muted);min-height:1.1em;font-family:monospace;font-size:.8rem}.cents{color:var(--muted);min-height:1.4em;font-size:1rem;transition:color .2s}.meter{width:100%;max-width:300px}.meter-track{background:var(--bg);border-radius:4px;height:8px;position:relative;overflow:hidden}.meter-center{background:var(--border);width:2px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}.meter-bar{background:var(--green);border-radius:2px;width:12px;height:100%;transition:left 80ms ease-out;position:absolute;top:0;left:calc(50% - 6px)}.meter-labels{color:var(--muted);justify-content:space-between;margin-top:4px;font-size:.7rem;display:flex}#trace-container{border:1px solid var(--border);border-radius:12px;height:160px;overflow:hidden}.game-hud{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;align-items:center;gap:10px;padding:24px;display:flex}.hud-top-row{justify-content:space-between;align-items:center;width:100%;display:flex}.hud-controls{gap:6px;display:flex}.btn-sm{border-radius:7px;padding:4px 10px;font-size:.75rem}.round-counter{color:var(--muted);font-size:.85rem}.streak{min-height:1.4em;font-size:1rem}.target-note{letter-spacing:-3px;color:var(--yellow);font-size:5rem;font-weight:900;line-height:1}.target-note .octave{color:var(--muted);font-size:2.5rem}.target-hz{color:var(--muted);font-family:monospace;font-size:.8rem}.phase-label{min-height:1.5em;color:var(--text);font-size:1.1rem;font-weight:600;transition:all .2s}.phase-label.whistle{color:var(--green)}.phase-label.result{color:var(--yellow)}.round-score{font-size:2rem;font-weight:800}.score-perfect{color:var(--green)}.score-great{color:#86efac}.score-ok{color:var(--yellow)}.score-miss{color:var(--red)}.game-result{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;align-items:center;gap:16px;max-height:100%;padding:32px;display:flex;overflow-y:auto}.result-title{color:var(--muted);font-size:1.2rem}.final-score{color:var(--green);font-size:5rem;font-weight:900}.final-score span{color:var(--muted);font-size:1.5rem}.round-breakdown{flex-direction:column;gap:6px;width:100%;display:flex}.round-row{color:var(--muted);align-items:center;gap:10px;font-size:.95rem;display:flex}.rr-num{min-width:56px;font-size:.8rem}.rr-note{color:var(--text);min-width:36px;font-weight:700}.rr-icon{margin-left:auto;font-size:1.1rem;font-weight:800}.rr-icon.perfect{color:var(--green)}.rr-icon.great{color:#86efac}.rr-icon.ok{color:var(--yellow)}.rr-icon.miss{color:var(--red)}.song-idle,.song-countdown,.song-result{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;align-items:center;gap:16px;padding:24px;display:flex}.song-title{font-size:1.3rem;font-weight:700}.song-key{color:var(--muted);font-size:.85rem}.song-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.countdown-num{color:var(--yellow);font-size:7rem;font-weight:900;line-height:1}.song-hud{flex-direction:column;align-items:center;gap:16px;display:flex}.song-live-note{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;flex-direction:column;align-items:center;gap:4px;min-width:180px;padding:20px 32px;font-size:4.5rem;font-weight:900;line-height:1;transition:color .1s;display:flex}.song-live-octave{color:var(--muted);font-size:2rem;font-weight:400}.song-live-lyric{color:var(--muted);margin-top:4px;font-size:1rem;font-weight:600}.song-live-cents{min-height:1.3em;font-family:monospace;font-size:.9rem;transition:color .1s}.song-strip{scroll-snap-type:x mandatory;scrollbar-width:none;box-sizing:border-box;gap:6px;width:100%;padding:8px 50%;display:flex;overflow-x:auto}.song-strip::-webkit-scrollbar{display:none}.snote{scroll-snap-align:center;border:1px solid var(--border);background:var(--bg);opacity:.4;border-radius:8px;flex-direction:column;flex-shrink:0;align-items:center;gap:2px;min-width:52px;padding:6px 4px;transition:all .15s;display:flex}.snote .sn{color:var(--muted);font-size:.85rem;font-weight:700}.snote .sl{color:var(--muted);text-align:center;font-size:.6rem}.snote.active{opacity:1;border-color:var(--yellow);background:#facc1514;transform:scale(1.12)}.snote.active .sn,.snote.active .sl{color:var(--yellow)}.snote.hit{opacity:1;border-color:var(--green);background:#4ade8014}.snote.hit .sn{color:var(--green)}.snote.close{opacity:1;border-color:var(--yellow);background:#facc1514}.snote.close .sn{color:var(--yellow)}.snote.miss{opacity:1;border-color:var(--red);background:#f8717114}.snote.miss .sn{color:var(--red)}.song-note-grid{flex-wrap:wrap;justify-content:center;gap:6px;width:100%;display:flex}.song-note-cell{border:1px solid var(--border);background:var(--bg);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:54px;min-height:62px;padding:4px 2px;display:flex}.snc-note{color:var(--muted);font-size:.85rem;font-weight:700;line-height:1}.snc-lyric{color:var(--muted);text-align:center;font-size:.62rem}.snc-cents{color:var(--muted);font-family:monospace;font-size:.58rem}.song-note-cell.hit{border-color:var(--green);background:#4ade8014}.song-note-cell.hit .snc-note{color:var(--green)}.song-note-cell.close{border-color:var(--yellow);background:#facc1514}.song-note-cell.close .snc-note{color:var(--yellow)}.song-note-cell.miss{border-color:var(--red);background:#f8717114}.song-note-cell.miss .snc-note{color:var(--red)}.song-grade{font-size:6rem;font-weight:900;line-height:1}.song-score{color:var(--muted);margin-top:-8px;font-size:1.3rem}#status-bar{color:var(--muted);text-align:center;font-size:.8rem}.hint{color:var(--muted);text-align:center;font-size:.9rem}@font-face{font-family:DSEG7;src:url(https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Regular.woff2)format("woff2");font-display:swap}#tuner-panel{flex-direction:column;flex:none;gap:12px;min-height:200px;max-height:72vh;padding:12px 8px;overflow:hidden}@media (orientation:landscape){#tuner-panel{flex-direction:row;padding:8px 12px}.tuner-pitch-card{flex:3}.tuner-vu-card{flex:2}}.tuner-pitch-card{--neon-color:#ff2d78;--neon-glow:#ff2d7880;background:linear-gradient(#32323e 0%,#28282f 40%,#1e1e28 100%);border:2px solid #0a0a14;border-radius:22px;flex-direction:column;flex:3;justify-content:center;padding:30px 22px;display:flex;position:relative}.tuner-pitch-card:before{content:"";border:3px solid var(--neon-color);box-shadow:0 0 6px var(--neon-glow), 0 0 14px var(--neon-glow), inset 0 0 6px var(--neon-glow);pointer-events:none;z-index:1;background:0 0;border-radius:15px;position:absolute;inset:10px}.tuner-pitch-card:after{content:"";pointer-events:none;z-index:3;background:repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 0 33%/5px 30px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 0 67%/5px 30px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 100% 33%/5px 30px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 100% 67%/5px 30px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 33% 0/30px 5px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 67% 0/30px 5px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 33% 100%/30px 5px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 67% 100%/30px 5px no-repeat;border-radius:22px;position:absolute;inset:0}.tuner-pitch-inner{z-index:2;align-items:center;gap:12px;display:flex;position:relative}.tuner-lcd{text-align:center;background:#03050a;border:1px solid #00e5ff33;border-radius:8px;flex-shrink:0;min-width:100px;padding:12px 16px 10px;box-shadow:inset 0 2px 12px #000000e6,inset 0 0 0 1px #00e5ff0a}.tuner-lcd-screen{justify-content:center;align-items:center;height:1.1em;font-size:3.4rem;display:flex;position:relative}.tuner-lcd-ghost{color:#00e5ff1a;pointer-events:none;-webkit-user-select:none;user-select:none;letter-spacing:.05em;justify-content:center;align-items:center;font-family:DSEG7,monospace;font-size:1em;display:flex;position:absolute;inset:0}.tuner-lcd-note{color:#00e5ff;text-shadow:0 0 8px #00e5ff,0 0 20px #00e5ff8c;z-index:1;letter-spacing:.05em;justify-content:center;align-items:center;font-family:DSEG7,monospace;font-size:1em;display:flex;position:absolute;inset:0}.tuner-lcd-label{letter-spacing:.14em;color:#00e5ff61;text-transform:uppercase;margin-top:8px;font-family:monospace;font-size:.38rem}.tuner-dots-area{flex:1;min-width:0}.tuner-dots-row,.tuner-zone-labels{grid-template-columns:repeat(9,1fr);justify-items:center;display:grid}.tuner-dots-row{align-items:flex-end;margin-bottom:6px}.tuner-dot-col{flex-direction:column;align-items:center;gap:5px;display:flex}.tuner-dot-label{color:#ffffff4d;font-family:monospace;font-size:.45rem;line-height:1}.tuner-dot{background:#070710;border:1.5px solid #ffffff12;border-radius:50%;width:16px;height:16px;transition:background .1s,box-shadow .1s,border-color .1s}.tuner-dot.lit[data-color=green]{background:#4ade80;border-color:#4ade80;box-shadow:0 0 7px #4ade80,0 0 18px #4ade808c}.tuner-dot.lit[data-color=cyan]{background:#00e5ff;border-color:#00e5ff;box-shadow:0 0 7px #00e5ff,0 0 18px #00e5ff8c}.tuner-dot.lit[data-color=pink]{background:#ff2d9b;border-color:#ff2d9b;box-shadow:0 0 7px #ff2d9b,0 0 18px #ff2d9b8c}.zone-label{letter-spacing:.06em;color:#ffffff47;text-transform:uppercase;text-align:center;font-family:monospace;font-size:.42rem;line-height:1}.tuner-card-title{text-align:center;letter-spacing:.22em;text-transform:uppercase;color:#ffffff73;z-index:2;margin-bottom:14px;font-family:monospace;font-size:.52rem;position:relative}.tuner-vu-card{--neon-color:#ffe100;--neon-glow:#ffe10080;background:linear-gradient(#32323e 0%,#28282f 40%,#1e1e28 100%);border:2px solid #0a0a14;border-radius:22px;flex-direction:column;flex:2;justify-content:center;gap:6px;padding:30px 22px;display:flex;position:relative}.tuner-vu-card:before{content:"";border:3px solid var(--neon-color);box-shadow:0 0 6px var(--neon-glow), 0 0 14px var(--neon-glow), inset 0 0 6px var(--neon-glow);pointer-events:none;z-index:1;background:0 0;border-radius:15px;position:absolute;inset:10px}.tuner-vu-card:after{content:"";pointer-events:none;z-index:3;background:repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 0 33%/5px 30px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 0 67%/5px 30px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 100% 33%/5px 30px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 100% 67%/5px 30px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 33% 0/30px 5px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 67% 0/30px 5px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 33% 100%/30px 5px no-repeat,repeating-linear-gradient(90deg,#0a0a12 0 2px,#0000 2px 5px) 67% 100%/30px 5px no-repeat;border-radius:22px;position:absolute;inset:0}.tuner-vu-bar{z-index:2;align-items:stretch;gap:2px;height:42px;display:flex;position:relative}.vu-seg{background:#ffffff0d;border-radius:2px;flex:1;transition:background 50ms,box-shadow 50ms}.vu-seg.lit-green{background:#39ff14;box-shadow:0 0 5px #39ff1499}.vu-seg.lit-yellow{background:#ffe600;box-shadow:0 0 5px #ffe60099}.vu-seg.lit-red{background:#ff3131;box-shadow:0 0 5px #ff313199}.tuner-vu-scale{color:#ffffff47;justify-content:space-between;font-family:monospace;font-size:.48rem;display:flex}#flappy-panel{flex:1;min-height:300px;position:relative}.flappy-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.flappy-debug{color:#ccc;z-index:10;background:#090d1fd9;border:1px solid #00e5ff4d;border-radius:8px;flex-direction:column;gap:6px;min-width:200px;padding:8px 10px;font-size:11px;display:flex;position:absolute;top:8px;left:8px}.fdebug-row{align-items:center;gap:6px;display:flex}.fdebug-label{color:#00e5ff;flex-shrink:0;width:68px;font-size:10px}.fdebug-slider{accent-color:#ff2d9b;cursor:pointer;flex:1}.fdebug-val{text-align:right;font-variant-numeric:tabular-nums;color:#ffe600;width:36px}.fdebug-recal{color:#ff2d9b;cursor:pointer;background:0 0;border:1px solid #ff2d9b80;border-radius:4px;width:100%;margin-top:4px;padding:3px 8px;font-size:10px}.fdebug-recal:hover{background:#ff2d9b1f}.lock-bar-wrap{background:var(--bg);border:1px solid var(--border);border-radius:4px;width:100%;max-width:260px;height:8px;overflow:hidden}.lock-bar{background:var(--green);border-radius:4px;height:100%;transition:width 80ms linear}.octave-hint{border-radius:20px;min-height:1.6em;padding:4px 12px;font-size:.85rem;font-weight:600}.octave-hint.ok{color:var(--green);background:#4ade801a;border:1px solid #4ade804d}.octave-hint.warn{color:var(--yellow);background:#facc151a;border:1px solid #facc154d}.octave-badge{vertical-align:middle;border-radius:10px;padding:2px 7px;font-size:.7rem;font-weight:600}.octave-badge.ok{color:var(--green);background:#4ade801f}.octave-badge.warn{color:var(--yellow);background:#facc151f}.melody-hud{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;align-items:center;gap:20px;padding:24px;display:flex}.melody-phase{color:var(--text);font-size:1.1rem;font-weight:600}.melody-notes{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.melody-note-box{border:2px solid var(--border);background:var(--bg);width:72px;height:86px;color:var(--muted);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;padding-top:18px;font-size:1.8rem;font-weight:800;line-height:1;transition:border-color .2s,color .2s,background .2s,transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.melody-note-box span{color:var(--muted);font-size:.9rem;font-weight:400}.note-seq{color:var(--muted);opacity:.6;letter-spacing:.03em;font-size:.62rem;font-weight:500;position:absolute;top:5px;left:50%;transform:translate(-50%)}.note-timer-bar{background:var(--yellow);border-radius:0 0 10px 10px;width:0%;height:4px;position:absolute;bottom:0;left:0}.melody-note-box.current .note-timer-bar{animation:1.05s linear forwards note-fill}@keyframes note-fill{0%{width:0%}to{width:100%}}.melody-note-box.upcoming{color:#facc1566;background:#facc1505;border-color:#facc154d}.melody-note-box.upcoming span,.melody-note-box.upcoming .note-seq{color:#facc1566}.melody-note-box.active-waiting{border-color:var(--green);color:var(--green);animation:1.1s ease-in-out infinite waiting-pulse}.melody-note-box.active-waiting span{color:var(--green)}.melody-note-box.active-waiting .note-seq{color:var(--green);opacity:.8}@keyframes waiting-pulse{0%,to{box-shadow:0 0 #4ade8000}50%{box-shadow:0 0 14px 5px #4ade8040}}.melody-note-box.current{border-color:var(--yellow);color:var(--yellow);background:#facc1514;transform:scale(1.08);box-shadow:0 0 20px #facc1533}.melody-note-box.current span{color:var(--yellow)}.melody-note-box.hit{border-color:var(--green);color:var(--green);background:#4ade8014}.melody-note-box.hit span{color:var(--green)}.melody-note-box.close{border-color:var(--yellow);color:var(--yellow);background:#facc1514}.melody-note-box.close span{color:var(--yellow)}.melody-note-box.miss{border-color:var(--red);color:var(--red);background:#f8717114}.melody-note-box.miss span{color:var(--red)}.melody-hint{color:var(--muted);font-size:.78rem}.match-lock-wrap{background:var(--bg);border:1px solid var(--border);border-radius:10px;width:100%;max-width:320px;height:20px;overflow:hidden}.match-lock-bar{background:var(--green);border-radius:10px;height:100%;transition:width 60ms linear}.phase-label.success{color:var(--green);font-size:1.5rem}.phase-label.listen{color:var(--muted)}.hit-count{color:var(--green);min-width:80px;font-size:.85rem;font-weight:600}.btn-skip{color:var(--red);border:1px solid var(--red);background:#f8717114;border-radius:10px;width:100%;max-width:260px;padding:10px 24px;font-size:.85rem}.btn-skip:hover{color:var(--red);background:#f871712e}.match-actions{flex-direction:column;align-items:center;gap:10px;width:100%;display:flex}.btn-replay{color:var(--muted);border-color:var(--border);font-size:.8rem}.hit-count-row{justify-content:flex-end;width:100%;min-height:1.4em;display:flex}.match-top-row{justify-content:space-between;align-items:center;width:100%;min-height:2rem;display:flex}.match-top-left,.match-top-right{align-items:center;display:flex}.challenge-badge{color:var(--yellow);background:#facc151a;border:1px solid #facc154d;border-radius:20px;padding:4px 14px;font-size:.8rem;font-weight:700}.phase-label.challenge-success{color:var(--yellow);font-size:1.6rem}.range-pos-wrap{width:100%;max-width:260px}.range-pos-track{background:#6366f126;border:1px solid #6366f14d;border-radius:3px;height:6px;margin-bottom:4px;position:relative}.range-pos-dot{background:var(--accent);border-radius:50%;width:12px;height:12px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px #6366f199}.range-pos-labels{color:var(--muted);justify-content:space-between;font-size:.68rem;display:flex}.range-pos-center{color:var(--accent);font-weight:600}.range-pos-dot.live{background:var(--green);z-index:2;width:10px;height:10px;box-shadow:0 0 6px #4ade80b3}.range-pos-wrap.outside{justify-content:center;display:flex}.range-pos-outside{color:var(--yellow);background:#facc1514;border:1px solid #facc1540;border-radius:20px;padding:3px 10px;font-size:.8rem;font-weight:600}#range-panel{flex-direction:column;flex:1;justify-content:stretch;align-items:stretch;width:100%;min-height:0;display:flex}.range-layout{box-sizing:border-box;flex-direction:column;flex:1;gap:10px;width:100%;min-height:0;padding:8px 10px;display:flex}.range-lcd-strip{flex-direction:column;flex:auto;justify-content:center;max-height:160px;display:flex}.range-lcd-glass{flex-direction:column;flex:auto;justify-content:center;min-height:80px;display:flex}.range-lcd-strip{background:linear-gradient(#17171f 0%,#0f0f17 100%);border:3px solid #0a0a12;border-radius:3px;padding:12px;position:relative;box-shadow:inset 0 1px #ffffff0a,inset 0 -2px 4px #000000b3}.range-lcd-glass{color:#4dff5a;background:linear-gradient(#1a2a14 0%,#0a1608 100%);border-radius:2px;min-height:70px;padding:18px 20px 14px;font-family:VT323,monospace;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #0a0c06,inset 0 0 24px #000c,inset 0 2px 3px #000000a6}.range-lcd-glass:before{content:"";pointer-events:none;mix-blend-mode:multiply;opacity:.7;background-image:repeating-linear-gradient(0deg,#00000040 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#0000001f 0 1px,#0000 1px 3px);position:absolute;inset:0}.range-lcd-glass:after{content:"";pointer-events:none;background:linear-gradient(#ffffff0f 0%,#fff0 30%),radial-gradient(70% 40% at 30% 10%,#ffffff12,#0000 60%);position:absolute;inset:0}.range-lcd-headline{z-index:1;letter-spacing:2px;color:#4dff5a;text-shadow:0 0 6px #4dff5ab3,0 0 14px #4dff5a73;min-height:22px;font-family:"Press Start 2P",monospace;font-size:16px;line-height:1.3;position:relative}.range-lcd-sub{z-index:1;letter-spacing:2px;color:#4dff5a;text-shadow:0 0 6px #4dff5ab3,0 0 14px #4dff5a73;text-transform:uppercase;min-height:0;margin-top:4px;font-family:"Press Start 2P",monospace;font-size:16px;line-height:1.3;position:relative}.lcd-arrow{letter-spacing:0;vertical-align:-.05em;font-size:1.4em}.lb-narrow{display:none}@media (orientation:landscape) and (height<=540px){.lb-narrow{display:inline}}.lcd-char{opacity:0;white-space:pre;animation:60ms step-end forwards lcd-char-in;display:inline-block}@keyframes lcd-char-in{to{opacity:1}}.range-lcd-gauge{z-index:1;margin-top:8px;position:relative}.range-lcd-bar{gap:3px;display:flex}.range-lcd-bar.wide .range-lcd-seg{flex:1;min-width:0}.range-lcd-seg{background:#4dff5a14;border-radius:1px;height:14px;box-shadow:inset 0 0 1px #0009}.range-lcd-seg.on{background:#4dff5a;box-shadow:0 0 4px #4dff5ab3,0 0 10px #4dff5a73}.range-lcd-seg.on.seg-pink{background:var(--pink);box-shadow:0 0 4px var(--pink), 0 0 10px #ff2e7e99}.range-lcd-seg.on.seg-cyan{background:var(--cyan);box-shadow:0 0 4px var(--cyan), 0 0 10px #22e7ff99}.range-lcd-glass .dead{pointer-events:none;background:#0006;width:2px;height:2px;position:absolute}.range-scope-row{background:linear-gradient(#17171f 0%,#0f0f17 100%);border:3px solid #0a0a12;border-radius:3px;grid-template-columns:1fr 1fr;gap:14px;width:100%;padding:12px;display:grid;box-shadow:inset 0 1px #ffffff0a,inset 0 -2px 4px #000000b3}.range-scope-frame{aspect-ratio:auto;max-height:none}.range-scope-frame:after{background:repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 0 35%/5px 22px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 0 65%/5px 22px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 100% 35%/5px 22px no-repeat,repeating-linear-gradient(#0a0a12 0 2px,#0000 2px 5px) 100% 65%/5px 22px no-repeat}.section-card-frame[data-neon=dim]{opacity:.4}.range-scope-body{z-index:2;text-align:center;background:linear-gradient(#32323e 0%,#28282f 40%,#1e1e28 100%);border:2px solid #0a0a14;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;height:100%;padding:6px;display:flex;position:relative;overflow:hidden;transform:scale(.94)}.range-scope-label{letter-spacing:2px;text-transform:uppercase;color:var(--neon-text,#ffffff80);text-shadow:0 0 5px var(--neon-glow,transparent), 0 0 12px var(--neon-glow,transparent);font-family:"Press Start 2P",monospace;font-size:9px}.range-scope-status{letter-spacing:2px;text-transform:uppercase;color:var(--neon-text,#ffffff80);text-shadow:0 0 4px var(--neon-glow,transparent);align-items:center;gap:5px;height:14px;font-family:"Press Start 2P",monospace;font-size:7px;display:inline-flex}.range-scope-status .rec-dot{background:var(--neon-color,var(--pink));width:7px;height:7px;box-shadow:0 0 6px var(--neon-color,var(--pink)), 0 0 14px var(--neon-glow,#ff2d78cc);border-radius:50%;animation:.9s ease-in-out infinite range-rec-blink;display:inline-block}@keyframes range-rec-blink{0%,to{opacity:1}50%{opacity:.25}}.range-scope-hz{color:var(--neon-text,#fff6);opacity:.7;letter-spacing:1px;justify-content:center;align-items:center;height:14px;font-family:Share Tech Mono,monospace;font-size:10px;display:flex}.range-scope-lcd{aspect-ratio:1;background:#03050a;border:1px solid #00e5ff33;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:5rem;font-size:2.6rem;display:flex;position:relative;box-shadow:inset 0 2px 12px #000000e6,inset 0 0 0 1px #00e5ff0a}.range-scope-lcd-ghost{color:#00e5ff1a;pointer-events:none;-webkit-user-select:none;user-select:none;letter-spacing:.05em;justify-content:center;align-items:center;font-family:DSEG7,monospace;font-size:1em;display:flex;position:absolute;inset:0}.range-scope-lcd-note{color:#00e5ff;text-shadow:0 0 8px #00e5ff,0 0 20px #00e5ff8c;z-index:1;letter-spacing:.05em;justify-content:center;align-items:center;font-family:DSEG7,monospace;font-size:1em;display:flex;position:absolute;inset:0}.range-signal-leds{gap:3px;width:100%;max-width:110px;height:8px;display:flex}.range-signal-leds-lcd{max-width:none;height:6px;margin-top:8px}.range-leds-hidden{visibility:hidden}.range-prog-leds{gap:3px;width:100%;max-width:110px;height:6px;display:flex}.range-prog-seg{background:#ffffff12;border-radius:1px;flex:1}.range-prog-seg.lit-prog{background:var(--yellow);box-shadow:0 0 4px var(--yellow)}.range-btn-deck{background:linear-gradient(#17171f 0%,#0f0f17 100%);border:3px solid #0a0a12;border-radius:3px;grid-template-columns:1fr 1fr;gap:14px;padding:12px;display:grid;box-shadow:inset 0 1px #ffffff0a,inset 0 -2px 4px #000000b3}.range-hwbtn{--b-col:var(--cyan);--b-rgb:34,231,255;appearance:none;cursor:pointer;color:var(--b-col);letter-spacing:2px;text-shadow:0 0 6px var(--b-col), 0 0 14px rgba(var(--b-rgb),.6);box-shadow:inset 0 1px 0 #ffffff26, inset 0 -3px 0 #0009, inset 0 0 0 2px #00000059, 0 6px 10px #000000a6, 0 0 0 1px #05050a, 0 0 18px rgba(var(--b-rgb),.45), 0 0 36px rgba(var(--b-rgb),.25);background:linear-gradient(#262632 0%,#1a1a24 50%,#0f0f18 100%);border:0;border-radius:12px;justify-content:center;align-items:center;width:100%;height:68px;padding:0;font-family:"Press Start 2P",monospace;font-size:12px;transition:transform 80ms,box-shadow 80ms,filter .12s;display:flex;position:relative;overflow:hidden}.range-hwbtn:before{content:"";opacity:.55;background-image:repeating-linear-gradient(90deg,#000 0 1px,#0000 1px 3px);border-radius:1px;height:5px;position:absolute;top:5px;left:18px;right:18px}.range-hwbtn:after{content:"";opacity:.55;background-image:repeating-linear-gradient(90deg,#000 0 1px,#0000 1px 3px);border-radius:1px;height:5px;position:absolute;bottom:5px;left:18px;right:18px}.range-hwbtn .cap-inset{border:2px solid var(--b-col);box-shadow:inset 0 0 10px rgba(var(--b-rgb),.35), inset 0 0 0 1px #0000008c;pointer-events:none;border-radius:9px;position:absolute;inset:4px}.range-hwbtn .cap-label{z-index:1;position:relative}.range-hwbtn:hover{filter:brightness(1.12)}.range-hwbtn:active{box-shadow:inset 0 1px 0 #ffffff14, inset 0 -1px 0 #0009, inset 0 0 0 2px #0006, 0 2px 4px #000000a6, 0 0 0 1px #05050a, 0 0 10px rgba(var(--b-rgb),.35);transform:translateY(2px)}.range-hwbtn[disabled]{--b-col:#3a3a48;--b-rgb:58,58,72;color:#3a3a48;cursor:not-allowed;text-shadow:none;filter:saturate(.2);box-shadow:inset 0 1px #ffffff0d,inset 0 -2px #0006,0 3px 6px #00000080,0 0 0 1px #05050a}.range-hwbtn.btn-cyan{--b-col:var(--cyan);--b-rgb:34,231,255}.range-hwbtn.btn-pink{--b-col:var(--pink);--b-rgb:255,46,126}.range-hwbtn.btn-green{--b-col:var(--green);--b-rgb:59,255,122}.range-hwbtn.btn-dim{--b-col:#9a9aaa;--b-rgb:154,154,170}.range-hwbtn.armed{animation:1.4s ease-in-out infinite range-armed}@keyframes range-armed{0%,to{box-shadow:inset 0 1px 0 #ffffff26, inset 0 -3px 0 #0009, inset 0 0 0 2px #00000059, 0 6px 10px #000000a6, 0 0 0 1px #05050a, 0 0 18px rgba(var(--b-rgb),.45), 0 0 36px rgba(var(--b-rgb),.25)}50%{box-shadow:inset 0 1px 0 #ffffff26, inset 0 -3px 0 #0009, inset 0 0 0 2px #00000059, 0 6px 10px #000000a6, 0 0 0 1px #05050a, 0 0 26px rgba(var(--b-rgb),.7), 0 0 54px rgba(var(--b-rgb),.4)}}.range-note-count{letter-spacing:1.5px;color:#4dff5a;text-align:center;padding:0 12px;font-family:"Press Start 2P",monospace;font-size:8px}.hw-btn-frame{background:linear-gradient(#32323e 0%,#28282f 40%,#1e1e28 100%);border:2px solid #0a0a14;border-radius:20px;justify-content:center;align-items:center;width:100%;max-width:280px;padding:8px;display:inline-flex;position:relative}.hw-btn-frame:before{content:"";border:3px solid var(--neon-color,transparent);box-shadow:0 0 8px var(--neon-glow,transparent), 0 0 20px var(--neon-glow,transparent), inset 0 0 8px var(--neon-glow,transparent);pointer-events:none;z-index:1;background:0 0;border-radius:14px;position:absolute;inset:6px}.hw-btn-frame:active:before{box-shadow:0 0 12px var(--neon-glow,transparent), 0 0 30px var(--neon-glow,transparent), 0 0 50px var(--neon-glow,transparent), inset 0 0 15px var(--neon-glow,transparent);border-width:4px}.hw-btn-frame[data-neon=cyan]{--neon-color:#00e5ff;--neon-glow:#00e5ff80}.hw-btn-frame[data-neon=pink]{--neon-color:#ff2d78;--neon-glow:#ff2d7880}.hw-btn-frame[data-neon=yellow]{--neon-color:#ffe100;--neon-glow:#ffe10080}.hw-btn-frame[data-neon=green]{--neon-color:#39ff14;--neon-glow:#39ff1480}.hw-btn{color:#ffffffe6;letter-spacing:.04em;cursor:pointer;-webkit-tap-highlight-color:transparent;background:radial-gradient(at 50% 20%,#2a2e3a 0%,#181b27 100%);border:none;border-radius:14px;width:100%;padding:14px 24px;font-family:"Press Start 2P",monospace;font-size:.6rem;transition:transform .1s;transform:scale(.96);box-shadow:inset 0 1px #ffffff0f}.hw-btn:active{transform:scale(.91)}.melody-breakdown{flex-direction:column;gap:8px;width:100%;display:flex}.melody-result-row{align-items:center;gap:12px;font-size:.9rem;display:flex}.mnote{min-width:36px;font-size:1rem;font-weight:700}.mnote.hit{color:var(--green)}.mnote.close{color:var(--yellow)}.mnote.miss{color:var(--red)}.mstatus{flex:1}.mstatus.hit{color:var(--green)}.mstatus.close{color:var(--yellow)}.mstatus.miss{color:var(--red)}.mcents{color:var(--muted);text-align:right;min-width:48px;font-family:monospace;font-size:.8rem}.melody-big-note{color:var(--yellow);text-align:center;text-shadow:0 0 30px #facc1566;margin:4px 0 8px;font-size:4.5rem;font-weight:800;line-height:1}.melody-big-octave{color:#facc15b3;vertical-align:super;font-size:2rem;font-weight:400}.melody-big-hz{color:var(--muted);margin-top:4px;font-size:.85rem;font-weight:400}.melody-pitch-ladder{box-sizing:border-box;background:#ffffff08;border:1px solid #ffffff12;border-radius:8px;width:100%;margin:4px 0 8px;padding:6px 8px}.melody-note-box.previewing{border-color:var(--yellow);background:#eab3082e;transform:scale(1.08);box-shadow:0 0 12px #eab30859}.melody-note-box.previewing span{color:var(--yellow)}.scales-hud{flex-direction:column;align-items:stretch;gap:0;display:flex}.scales-top-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.scales-dir-row{align-items:center;gap:6px;display:flex}.scales-dir-btn{background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:6px;width:36px;height:36px;font-size:1rem;transition:border-color .15s,color .15s}.scales-dir-btn.active{border-color:var(--accent);color:var(--accent);background:#6366f11a}.scales-phase-label{color:var(--muted);text-align:center;margin-bottom:8px;font-size:.85rem}.scales-strip{flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 4px;display:flex}.scale-note-pip{border:1px solid var(--border);background:var(--surface);width:38px;height:46px;color:var(--muted);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:1px;transition:border-color .15s,color .15s,opacity .15s;display:flex;position:relative}.pip-note{font-size:.95rem;font-weight:700;line-height:1}.pip-oct{color:var(--muted);font-size:.65rem}.scale-note-pip.current{border-color:var(--text);color:var(--text);background:#ffffff0f}.scale-note-pip.current:before{content:"●";color:var(--accent);font-size:8px;position:absolute;top:-16px}.scale-note-pip.current .pip-oct{color:var(--muted)}.scale-note-pip.previewing{border-color:var(--yellow);color:var(--yellow);background:#eab30814}.scale-note-pip.hit{border-color:var(--green);color:var(--green);opacity:.7}.scale-note-pip.close{border-color:var(--green);color:var(--green);opacity:.5}.scale-note-pip.miss{opacity:.3}.scales-strip-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.scales-lock-wrap{background:#ffffff0f;border-radius:4px;width:100%;max-width:280px;height:6px;overflow:hidden}.scales-lock-bar{background:var(--green);border-radius:4px;height:100%;transition:width 50ms linear}.scale-note-pip{cursor:pointer}.scale-note-pip:active{opacity:.7}.scales-replay{font-size:.78rem}.melody-note-box.scales-current{border-color:var(--text);color:var(--text);background:#ffffff12}.melody-note-box.scales-current span{color:var(--muted)}.melody-note-box.scales-current .note-timer-bar{background:var(--green)}.scales-result-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.debug-block-wrap{flex-direction:column;align-items:center;gap:8px;margin-bottom:24px;display:flex}.debug-block-label{color:var(--muted);font-family:monospace;font-size:.75rem}.debug-note-block{border:1px solid var(--border);background:var(--surface);border-radius:16px;width:160px;height:160px;position:relative;overflow:hidden}.dnb-band{opacity:0;height:25%;transition:top 50ms linear,background .1s linear,opacity .1s linear;position:absolute;top:37.5%;left:0;right:0}.dnb-label{color:var(--text);z-index:3;pointer-events:none;text-shadow:0 1px 4px #0009;font-size:1.5rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#debug-note-block .note-timer-bar{background:var(--green);z-index:2;transition:width 50ms linear}@keyframes dnb-pop{0%{transform:scale(1)}45%{transform:scale(1.09);box-shadow:0 0 0 3px #50dc6466}to{box-shadow:none;transform:scale(1)}}.debug-note-block.dnb-popping{animation:.35s cubic-bezier(.34,1.56,.64,1) dnb-pop}#home-panel,#program-panel{flex-direction:column;flex:1;justify-content:center;gap:16px;padding:0 8px 4px;display:flex;position:relative}.footer{flex-shrink:0;justify-content:flex-end;align-items:center;margin-top:auto;padding:6px 26px 11px;display:flex}.footer-serial{letter-spacing:.14em;color:#ffffff2e;-webkit-user-select:none;user-select:none;font-family:monospace;font-size:.5rem}.footer-debug-btn{letter-spacing:.12em;color:#ffffff40;cursor:pointer;background:0 0;border:1px solid #ffffff1f;border-radius:4px;margin-right:auto;padding:2px 6px;font-family:monospace;font-size:.45rem}.footer-debug-btn:hover{color:#ffffff80;border-color:#ffffff4d}#debug-panel{flex-direction:column;flex:1;gap:12px;min-height:0;padding:12px;overflow-y:auto}.dbg-graphs{flex-direction:column;flex:1;gap:4px;min-height:0;display:flex}.dbg-graph-wrap{background:#0f172a;border-radius:6px;flex:1;min-height:60px;overflow:hidden}.dbg-readout{color:#ffffff80;gap:20px;padding:0 2px;font-family:monospace;font-size:.65rem;display:flex}.dbg-readout b{color:#4ade80}.dbg-pause-btn{color:#fff9;cursor:pointer;background:#ffffff14;border:1px solid #fff3;border-radius:4px;margin-left:auto;padding:1px 8px;font-family:monospace;font-size:.6rem}.dbg-pause-btn--active{color:#fbbf24e6;background:#fbbf2426;border-color:#fbbf2499}.dbg-toolbar{flex-shrink:0;align-items:center;gap:8px;padding:0 2px;display:flex}.dbg-rec-btn,.dbg-test-btn{color:#fff9;cursor:pointer;background:#ffffff14;border:1px solid #fff3;border-radius:4px;padding:2px 10px;font-family:monospace;font-size:.6rem}.dbg-rec-btn--active{color:#f87171;background:#f8717126;border-color:#f87171b3}.dbg-test-btn:disabled{opacity:.35;cursor:default}.dbg-status{color:#fbbf24e6;font-family:monospace;font-size:.6rem}.dbg-controls{flex-direction:column;gap:10px;display:flex}.dbg-row{flex-direction:column;gap:4px;display:flex}.dbg-label{color:#ffffff73;justify-content:space-between;font-family:monospace;font-size:.6rem;display:flex}.dbg-val{color:#00e5ff}.dbg-slider{accent-color:#00e5ff;width:100%}#coming-soon-toast{color:#ffffffb3;pointer-events:none;opacity:0;z-index:9999;background:#0f172aeb;border:1px solid #ffffff26;border-radius:8px;padding:10px 20px;font-family:monospace;font-size:.75rem;transition:opacity .2s,transform .2s;position:fixed;bottom:80px;left:50%;transform:translate(-50%)translateY(8px)}#coming-soon-toast.coming-soon-toast--visible{opacity:1;transform:translate(-50%)translateY(0)}.home-grid{grid-template-columns:1fr 1fr;gap:16px;max-width:480px;margin:24px auto 0;padding:0 8px;display:grid}.home-card-full{grid-column:1/-1}.mode-card{background:var(--surface);border:1px solid var(--border);cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;border-radius:12px;padding:20px 16px;transition:border-color .15s,background .15s}.mode-card:hover{border-color:var(--accent);background:#6366f112}.mode-card-icon{margin-bottom:8px;font-size:2rem}.mode-card-name{margin-bottom:6px;font-size:1rem;font-weight:700}.mode-card-desc{color:var(--muted);font-size:.78rem;line-height:1.4}.home-range-badge{color:var(--green);background:#4ade8014;border:1px solid #4ade8040;border-radius:20px;margin-top:4px;padding:1px 8px;font-size:.72rem;display:inline-block}.home-range-badge.no-range{color:var(--muted);border-color:var(--border);background:0 0}#home-panel{justify-content:center;gap:8px}.home-led-rail{background:linear-gradient(#0a0a12,#05050a);border:1px solid #1e1e2a;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;padding:7px 14px;display:flex;position:relative;box-shadow:inset 0 2px 6px #000c}.home-led-rail:before,.home-led-rail:after{content:"";background:radial-gradient(circle at 30% 30%,#4a4a58,#1a1a24 70%);border-radius:50%;width:5px;height:5px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:inset 0 0 2px #000}.home-led-rail:before{left:5px}.home-led-rail:after{right:5px}.home-led-group{align-items:center;gap:14px;display:flex}.home-led-item{align-items:center;gap:5px;display:inline-flex}.home-led{background:#151520;border-radius:50%;flex-shrink:0;width:8px;height:8px;box-shadow:inset 0 0 2px #000,0 0 0 1px #000}.home-led.hled-gr{background:var(--green);box-shadow:0 0 6px var(--green), 0 0 14px #39ff1499, inset 0 0 2px #fff}.home-led.hled-yl{background:var(--yellow);box-shadow:0 0 6px var(--yellow), 0 0 14px #ffe60099, inset 0 0 2px #fff}.home-led.hled-pk{background:var(--pink);box-shadow:0 0 6px var(--pink), 0 0 14px #ff2d7899, inset 0 0 2px #fff}.home-led.hled-cy{background:var(--cyan);box-shadow:0 0 6px var(--cyan), 0 0 14px #00e5ff99, inset 0 0 2px #fff}.home-led-lbl{letter-spacing:1px;color:#8b8b9a;font-family:"Press Start 2P",monospace;font-size:6px}@keyframes hled-blink{50%{opacity:.2}}.hled-blink{animation:1.8s steps(2,jump-none) infinite hled-blink}.home-core{flex-direction:row;align-items:stretch;gap:10px;display:flex}.home-fader{background:linear-gradient(#161620,#0f0f18);border:1px solid #262636;border-radius:8px;flex-direction:column;flex-shrink:0;align-items:center;gap:8px;width:64px;padding:12px 8px;display:flex;box-shadow:inset 0 0 12px #0009}.home-fader-title{letter-spacing:1px;color:#8b8b9a;text-align:center;font-family:"Press Start 2P",monospace;font-size:5px;line-height:1.8}.home-fader-track{background:linear-gradient(#05050a,#0a0a12);border:1px solid #0a0a12;border-radius:4px;flex:1;width:14px;min-height:80px;position:relative;box-shadow:inset 0 0 6px #000000e6}.home-fader-track:before{content:"";background-image:repeating-linear-gradient(0deg,#3a3a4a 0 1px,#0000 1px 12px);width:5px;position:absolute;top:4px;bottom:4px;left:-8px}.home-fader-track:after{content:"";background-image:repeating-linear-gradient(0deg,#3a3a4a 0 1px,#0000 1px 12px);width:5px;position:absolute;top:4px;bottom:4px;right:-8px}.home-fader-cap{cursor:grab;touch-action:none;background:linear-gradient(#3a3a48 0%,#1a1a24 45%,#252531 50%,#0a0a12 100%);border-radius:4px;width:36px;height:22px;position:absolute;left:50%;transform:translate(-50%);box-shadow:inset 0 1px #ffffff26,inset 0 -2px 3px #000c,0 3px 6px #000000b3,0 0 0 1px #05050a}.home-fader-cap:before{content:"";background:var(--cyan);box-shadow:0 0 6px var(--cyan), 0 0 12px var(--cyan);border-radius:1px;position:absolute;inset:9px 5px}.home-fader-readout{color:var(--cyan);text-shadow:0 0 6px #00e5ffb3;text-align:center;background:#05050a;border:1px solid #1a1a24;border-radius:3px;min-width:38px;padding:1px 4px;font-family:monospace;font-size:11px}.home-fader-label{letter-spacing:1px;color:var(--cyan);text-shadow:0 0 6px #00e5ff99;text-align:center;font-family:"Press Start 2P",monospace;font-size:5px}.home-knobs{flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:12px;width:70px;padding:6px 0;display:flex}.home-knob-wrap{flex-direction:column;align-items:center;gap:5px;display:flex}.home-knob-holder{width:46px;height:46px;position:relative}.home-knob-holder:before{content:"";pointer-events:none;background:radial-gradient(circle at 50% 0,#3a3a4a 1px,#0000 1.5px),radial-gradient(circle at 100%,#3a3a4a 1px,#0000 1.5px),radial-gradient(circle at 50% 100%,#3a3a4a 1px,#0000 1.5px),radial-gradient(circle at 0%,#3a3a4a 1px,#0000 1.5px),radial-gradient(circle at 15% 15%,#2a2a38 1px,#0000 1.5px),radial-gradient(circle at 85% 15%,#2a2a38 1px,#0000 1.5px),radial-gradient(circle at 15% 85%,#2a2a38 1px,#0000 1.5px),radial-gradient(circle at 85% 85%,#2a2a38 1px,#0000 1.5px);border-radius:50%;position:absolute;inset:-7px}.home-knob{cursor:grab;touch-action:none;background:radial-gradient(circle at 35% 30%,#3a3a48 0%,#1a1a22 55%,#05050a 100%);border-radius:50%;width:46px;height:46px;position:relative;box-shadow:inset 0 2px 3px #ffffff14,inset 0 -3px 6px #000c,0 3px 6px #0009,0 0 0 2px #0a0a12,0 0 0 3px #242432}.home-knob:before{content:"";background:var(--knob-col,var(--cyan));width:3px;height:12px;box-shadow:0 0 6px var(--knob-col,var(--cyan)), 0 0 12px var(--knob-col,var(--cyan));transform-origin:50% 19px;border-radius:2px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.home-knob-mon{--knob-col:var(--pink);transform:rotate(-30deg)}.home-knob-bass{--knob-col:var(--yellow);transform:rotate(20deg)}.home-knob-treb{--knob-col:var(--cyan);transform:rotate(60deg)}.home-knob-label{letter-spacing:1px;color:#8b8b9a;text-align:center;font-family:"Press Start 2P",monospace;font-size:5px;line-height:1.6}.home-bottom-deck{flex-direction:row;flex-shrink:0;justify-content:center;align-items:center;gap:12px;padding:4px 0 2px;display:flex}.home-speaker-wrap{flex-direction:column;align-items:center;gap:4px;display:flex}.home-speaker{--spk-glow:var(--pink);--spk-rgb:255,45,120;width:100px;height:100px;box-shadow:0 0 0 1px #05050a, 0 0 0 2px #2a2a38, 0 0 20px rgba(var(--spk-rgb), .5), 0 0 40px rgba(var(--spk-rgb), .3), 0 6px 14px #000000b3;background:conic-gradient(from 220deg,#2a2a38 0%,#0a0a12 25%,#3a3a48 50%,#0a0a12 75%,#2a2a38 100%);border-radius:50%;place-items:center;display:grid;position:relative}.home-speaker-mesh{background:radial-gradient(circle at 30% 25%, #ffffff0f, transparent 45%), radial-gradient(circle at 50% 50%, rgba(var(--spk-rgb),.3) 0%, rgba(var(--spk-rgb),.12) 40%, #0a0a12 75%);box-shadow:inset 0 0 0 2px var(--spk-glow), inset 0 0 14px rgba(var(--spk-rgb), .8), inset 0 0 30px rgba(var(--spk-rgb), .4), 0 0 8px rgba(var(--spk-rgb), .5);border-radius:50%;position:absolute;inset:10px;overflow:hidden}.home-speaker-mesh:before{content:"";mix-blend-mode:multiply;opacity:.9;background:radial-gradient(circle at 2px 2px,#000000bf 1.6px,#0000 2.2px) 0 0/5px 5px;position:absolute;inset:0}.home-speaker-mesh:after{content:"";background:radial-gradient(60% 40% at 35% 25%,#fff3,#0000 60%);position:absolute;inset:0}.home-speaker-center{width:24px;height:24px;box-shadow:inset 0 1px 1px #ffffff1f, 0 0 0 2px #05050a, 0 0 0 3px var(--spk-glow), 0 0 8px rgba(var(--spk-rgb), .8), 0 0 16px rgba(var(--spk-rgb), .5);z-index:2;background:radial-gradient(circle at 35% 30%,#4a4a5a,#0a0a12 70%);border-radius:50%;position:absolute}.home-speaker.home-speaker-cyan{--spk-glow:var(--cyan);--spk-rgb:0,229,255}@keyframes home-spk-pulse{0%,to{box-shadow:inset 0 0 0 2px var(--spk-glow), inset 0 0 14px rgba(var(--spk-rgb), .8), inset 0 0 30px rgba(var(--spk-rgb), .4), 0 0 8px rgba(var(--spk-rgb), .5)}50%{box-shadow:inset 0 0 0 2px var(--spk-glow), inset 0 0 20px rgba(var(--spk-rgb), 1), inset 0 0 44px rgba(var(--spk-rgb), .7), 0 0 16px rgba(var(--spk-rgb), .8)}}.home-speaker-mesh{animation:2.4s ease-in-out infinite home-spk-pulse}.home-speaker-base{background:#0a0a12;border-radius:2px;width:18px;height:4px;box-shadow:inset 0 1px #ffffff0d}.home-speaker-plate{letter-spacing:1px;color:#6b6b7a;justify-content:center;align-items:center;gap:8px;font-family:"Press Start 2P",monospace;font-size:5px;display:flex}.home-sp-dot{background:#2a2a38;border-radius:50%;width:3px;height:3px;display:inline-block;box-shadow:inset 0 0 1px #000}.home-mixer{background:linear-gradient(#181822,#0f0f18);border:1px solid #262636;border-radius:10px;padding:10px 12px 12px;position:relative;box-shadow:inset 0 1px #ffffff0d,inset 0 -1px #0009,0 2px 6px #00000080}.home-mixer-screws{pointer-events:none;position:absolute;inset:0}.home-mixer-screws span{background:radial-gradient(circle at 30% 30%,#4a4a58,#1a1a24 70%);border-radius:50%;width:5px;height:5px;position:absolute;box-shadow:inset 0 0 2px #000}.home-mixer-screws span:first-child{top:4px;left:4px}.home-mixer-screws span:nth-child(2){top:4px;right:4px}.home-mixer-screws span:nth-child(3){bottom:4px;left:4px}.home-mixer-screws span:nth-child(4){bottom:4px;right:4px}.home-mixer-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.home-ch{flex-direction:column;align-items:center;gap:4px;display:flex}.home-ch-head{letter-spacing:1px;color:var(--ch-col,var(--cyan));text-shadow:0 0 4px var(--ch-col,var(--cyan));font-family:"Press Start 2P",monospace;font-size:6px}.home-ch-track{background:linear-gradient(#05050a,#0a0a12);border:1px solid #0a0a12;border-radius:3px;width:10px;height:64px;position:relative;box-shadow:inset 0 0 4px #000000e6}.home-ch-track:before{content:"";background-image:repeating-linear-gradient(0deg,#3a3a4a 0 1px,#0000 1px 8px);width:4px;position:absolute;top:2px;bottom:2px;left:-6px}.home-ch-track:after{content:"";background-image:repeating-linear-gradient(0deg,#3a3a4a 0 1px,#0000 1px 8px);width:4px;position:absolute;top:2px;bottom:2px;right:-6px}.home-ch-cap{cursor:grab;touch-action:none;background:linear-gradient(#3a3a48 0%,#1a1a24 45%,#252531 50%,#0a0a12 100%);border-radius:3px;width:22px;height:12px;position:absolute;left:50%;transform:translate(-50%);box-shadow:inset 0 1px #ffffff26,inset 0 -2px 3px #000c,0 2px 4px #000000b3,0 0 0 1px #05050a}.home-ch-cap:before{content:"";background:var(--ch-col,var(--cyan));box-shadow:0 0 4px var(--ch-col,var(--cyan));border-radius:1px;position:absolute;inset:4px 3px}.home-ch-label{letter-spacing:1px;color:#8b8b9a;text-align:center;font-family:"Press Start 2P",monospace;font-size:5px}.home-c1{--ch-col:var(--pink)}.home-c2{--ch-col:var(--yellow)}.home-c3{--ch-col:var(--cyan)}.home-c4{--ch-col:var(--green)}@media (width<=479px){.home-fader{display:none}.home-core{flex-direction:column;align-items:center}.home-knobs{flex-direction:row;order:-1;gap:16px;width:auto;padding:0}.home-bottom-deck{gap:6px}.home-speaker{width:68px;height:68px}.home-speaker-center{width:16px;height:16px}.home-mixer{padding:8px}.home-ch-track{height:48px}}@media (width<=479px) and (height<=680px){.home-bottom-deck,.home-knobs{display:none}}@media (width>=480px) and (width<=599px){.home-fader,.home-knobs{display:none}}@media (height<=620px){.home-bottom-deck,.home-led-rail{display:none}}.range-landscape-logo{display:none}@media (orientation:landscape) and (height<=540px){.home-led-rail,.home-fader,.home-knobs,.home-bottom-deck,body[data-mode=range] .header,body[data-mode=range] .footer{display:none}body[data-mode=range] #range-panel{flex:1;height:100%;min-height:0}.range-layout{box-sizing:border-box;grid-template:"logo scope""lcd scope"minmax(0,1fr)"lcd btn"/minmax(0,1fr) minmax(0,1.2fr);gap:6px 8px;height:100%;padding:4px 8px;display:grid}.range-landscape-logo{letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(#2a2a34 0%,#1c1c24 100%);border:1px solid #0a0a12;border-radius:3px;grid-area:logo;align-self:start;align-items:baseline;gap:6px;padding:5px 10px;font-family:"Press Start 2P",monospace;font-size:.55rem;line-height:1.1;display:inline-flex;box-shadow:inset 0 1px #ffffff0d,inset 0 -1px 2px #0009,0 1px #0006}.range-lcd-strip{flex-direction:column;grid-area:lcd;justify-content:center;min-height:0;max-height:none;padding:10px;display:flex}.range-lcd-glass{flex-direction:column;flex:1;justify-content:center;min-height:0;display:flex}.range-scope-row{grid-area:scope;gap:8px;min-height:0;padding:6px}.range-btn-deck{grid-area:btn;gap:8px;padding:6px}.range-scope-frame{padding:8px}.range-scope-body{gap:2px;padding:4px}.range-scope-lcd{font-size:36px}.range-lcd-headline{font-size:18px}.range-lcd-headline .lcd-prefix,.range-lcd-headline .lcd-notes{display:block}}