:root{--ink: #1c4ca9;--panel: #17409a;--raise: #2559bd;--edge: #3f70cf;--text: #f4f7fd;--muted: #b3c8ec;--dim: #86a4d8;--stage-bg: #050c1c;--cue: #ffb020;--cue-ink: #241701;--alarm: #ff7063;--solid: #74dfa2;--sans: ui-sans-serif, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--tap: 3rem;--r: 12px;--stage-base: clamp(2rem, 5.5vw, 5rem);--stage-scale: 1;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}:focus-visible{outline:3px solid var(--cue);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.app{display:flex;flex-direction:column;height:100%}.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.wrap{max-width:46rem;margin:0 auto;padding:1.25rem 1rem 2rem;padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}.topbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem .8rem;padding-top:max(.75rem,calc(env(safe-area-inset-top) + .45rem));padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right));border-bottom:1px solid var(--edge);background:var(--ink);position:sticky;top:0;z-index:10}.mark{font-size:1.75rem;font-weight:800;letter-spacing:.16em;margin:0;padding-right:.16em;line-height:1}.mark b{color:var(--cue);font-weight:800}@media (min-width: 700px){.mark{font-size:2.1rem}}.grow{flex:1}h2{font-size:1.5rem;font-weight:700;letter-spacing:-.015em;margin:0 0 .15rem}.sub{color:var(--muted);margin:0 0 1.5rem}.nav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--edge);background:var(--panel);padding-bottom:env(safe-area-inset-bottom)}.nav button{padding:.8rem .25rem .9rem;font-size:.78rem;font-weight:700;letter-spacing:.09em;color:var(--dim);border-top:3px solid transparent;margin-top:-1px;transition:color .12s ease}.nav button[aria-current=true]{color:var(--cue);border-top-color:var(--cue)}.card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:1rem;margin-bottom:.85rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--tap);padding:0 1.1rem;border-radius:10px;background:var(--raise);border:1px solid var(--edge);font-weight:600;transition:transform 90ms ease,background .12s ease}.btn:active{transform:translateY(2px)}.btn-go{background:var(--cue);color:var(--cue-ink);border-color:var(--cue);font-weight:700}.btn-ghost{background:none;border-color:transparent;color:var(--muted)}.btn-ghost:active{color:var(--text)}.btn-wide{width:100%}.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}input[type=text],textarea{width:100%;background:#123480;color:var(--text);border:1px solid var(--edge);border-radius:10px;padding:.75rem .8rem;font:inherit;min-height:var(--tap)}textarea{min-height:14rem;line-height:1.6;resize:vertical}::placeholder{color:var(--dim)}.field{margin-bottom:.8rem}.field label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:.35rem}.songrow{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;padding:.85rem .9rem;border-radius:var(--r);background:var(--panel);border:1px solid var(--edge);margin-bottom:.5rem;transition:transform 90ms ease}.songrow:active{transform:translateY(2px)}.songrow .t{font-weight:650;font-size:1.05rem}.songrow .a{color:var(--muted);font-size:.85rem}.gauge{width:3.25rem;height:6px;border-radius:3px;background:#0f2f75;overflow:hidden;flex-shrink:0}.gauge i{display:block;height:100%;background:var(--cue)}.gauge[data-solid=true] i{background:var(--solid)}.status{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--muted);flex-shrink:0}.lyric{line-height:1.75}.phrase{display:block;margin-bottom:.15rem}.tok{transition:opacity .1s ease}.tok[data-hide=true]{color:transparent;background:linear-gradient(#5b87dc,#5b87dc) no-repeat center / 100% 2px;border-radius:2px}.tok[data-emph=true]{color:var(--cue);font-weight:700}.phrase[data-class=response]{color:var(--dim);font-size:.85em}.cue-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.15rem .6rem;border:1px solid var(--cue);border-radius:999px;color:var(--cue);font-size:.78rem;font-weight:700;letter-spacing:.05em;vertical-align:middle}.pips{display:inline-flex;gap:3px}.pips i{width:6px;height:6px;border-radius:50%;background:var(--cue);display:block}.seclabel{font-size:.8rem;font-weight:800;letter-spacing:.14em;color:var(--cue);margin:1.4rem 0 .4rem}.seclabel:first-child{margin-top:0}.seclabel[data-guess=true]{color:var(--dim);font-style:italic}.reentry{border-left:3px solid var(--alarm);padding-left:.7rem;margin-left:-.85rem}.stage{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--stage-bg);display:flex;flex-direction:column;z-index:50;-webkit-user-select:none;user-select:none}.stage-head{display:flex;align-items:baseline;gap:.75rem;padding:.7rem 1rem .3rem;padding-top:max(.7rem,calc(env(safe-area-inset-top) + .35rem))}.stage-title{font-weight:700;font-size:.95rem;color:var(--muted)}.stage-section{font-weight:800;letter-spacing:.16em;color:var(--cue);font-size:.9rem}.stage-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;justify-content:center;padding:.5rem 1rem;line-height:1.35;font-weight:650;font-size:calc(var(--stage-scale) * var(--stage-base));overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}@media (min-width: 700px){.stage-body{padding:.5rem 2rem}}.sizebtn{min-width:2.6rem;min-height:2.4rem;border:1px solid var(--edge);border-radius:8px;color:var(--muted);font-weight:700}.sizebtn:active{color:var(--cue);border-color:var(--cue)}.stage-foot{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;padding-bottom:max(.6rem,env(safe-area-inset-bottom));border-top:1px solid #0e1a33;color:var(--dim);font-size:.8rem}.nextup{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zone{position:absolute;top:calc(3rem + env(safe-area-inset-top));bottom:3.5rem;width:26%;display:flex;align-items:center;transition:background .12s ease}.zone.back{left:0;justify-content:flex-start;padding-left:.35rem}.zone.fwd{right:0;justify-content:flex-end;padding-right:.35rem}.zone:active{background:#ffb02012}.chev{font-size:clamp(2.5rem,6vw,4rem);line-height:1;font-weight:300;color:#2c4778;transition:color .12s ease}.zone:active .chev{color:var(--cue)}.zone[data-end=true]{pointer-events:none}.zone[data-end=true] .chev{color:#132444}.revealbar{position:absolute;left:0;right:0;bottom:3.5rem;display:flex;justify-content:center;pointer-events:none}.revealbtn{pointer-events:auto;min-height:3.25rem;padding:0 2rem;border-radius:999px;background:#ffb02024;border:1px solid var(--cue);color:var(--cue);font-weight:800;letter-spacing:.08em}.revealbtn:active{background:var(--cue);color:var(--cue-ink)}.pagedots{display:flex;gap:5px}.pagedots i{width:7px;height:7px;border-radius:50%;background:#1d3055}.pagedots i[data-on=true]{background:var(--cue)}.levels{display:flex;gap:4px}.levels button{flex:1;min-height:2.75rem;border-radius:8px;background:var(--raise);border:1px solid var(--edge);font-weight:700;font-size:.85rem;color:var(--muted)}.levels button[aria-pressed=true]{background:var(--cue);border-color:var(--cue);color:var(--cue-ink)}.sizer{display:flex;align-items:center;gap:.75rem}.sizer input{flex:1;accent-color:var(--cue);height:var(--tap)}.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}.banner{border-radius:var(--r);padding:.85rem 1rem;margin-bottom:.85rem;border:1px solid var(--edge);background:var(--panel)}.banner[data-tone=warn]{border-color:var(--cue)}.banner[data-tone=bad]{border-color:var(--alarm)}.hint{color:var(--muted);font-size:.85rem;margin:.5rem 0 0}.stage-preview{font-size:calc(var(--stage-scale) * var(--stage-base));font-weight:650;line-height:1.3;margin:.75rem 0 0;overflow-wrap:break-word}.swipe{position:relative;overflow:hidden;border-radius:var(--r);margin-bottom:.5rem}.swipe .songrow{margin-bottom:0}.swipe-face{position:relative;z-index:1;touch-action:pan-y}.swipe-delete{position:absolute;top:0;right:0;bottom:0;width:6rem;background:var(--alarm);color:#2a0a06;font-weight:800;letter-spacing:.06em;border-radius:0 var(--r) var(--r) 0}.undo{position:fixed;left:50%;transform:translate(-50%);bottom:calc(4.5rem + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:1rem;padding:.7rem .8rem .7rem 1.1rem;border-radius:999px;background:#0f2f75;border:1px solid var(--edge);box-shadow:0 8px 24px #00000073;max-width:calc(100vw - 2rem)}.undo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.undo button{color:var(--cue);font-weight:800;letter-spacing:.06em;padding:.35rem .6rem;min-height:2.25rem}.jumper{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--stage-bg);z-index:5;display:flex;flex-direction:column;padding-top:max(.75rem,env(safe-area-inset-top))}.jumper-head{display:flex;gap:.5rem;padding:.5rem .9rem}.jumper-list{flex:1;overflow-y:auto;padding:0 .9rem 1rem}.jumper-row{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.9rem .8rem;margin-bottom:.4rem;border-radius:10px;border:1px solid #1d3055;background:#0b1830}.jumper-row:active{border-color:var(--cue)}.jumper-row .t{font-weight:650;font-size:1.05rem}.jumper-row .a{color:var(--dim);font-size:.85rem}.jumper-empty{color:var(--dim);text-align:center;padding:2rem 0}.returnbar{position:absolute;left:.9rem;right:.9rem;bottom:4rem;z-index:6;min-height:3rem;border-radius:999px;background:var(--cue);color:var(--cue-ink);font-weight:800;letter-spacing:.09em}