:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#f6f8ff;background:radial-gradient(circle at 15% 10%,rgba(91,124,255,.15),transparent 35%),radial-gradient(circle at 85% 12%,rgba(104,224,196,.08),transparent 30%),#0a1020;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:transparent}:root{--bg: #0a1020;--surface: #121b33;--surface-elevated: #172445;--surface-muted: #0e1730;--text: #f4f7ff;--text-secondary: #b6c1e4;--text-muted: #8d9bc7;--border: #2b3a64;--border-strong: #3c4f85;--brand: #5b7cff;--brand-strong: #4a67e6;--danger: #db5160;--danger-strong: #bf3e4d;--shadow: 0 20px 60px rgba(4, 9, 24, .32);--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--control-height: 40px;--space-1: .45rem;--space-2: .7rem;--space-3: .95rem;--space-4: 1.2rem;--space-5: 1.6rem;--import-peek-width: 34px;--side-panel-top: 12px}.layout{display:grid;gap:.8rem;width:min(1400px,100%);margin:0 auto;padding:1rem 1rem 5.5rem;box-sizing:border-box;min-height:100vh}.topbar{padding:.8rem .4rem;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.topbar-meta{display:grid;gap:var(--space-1)}.topbar h1{margin:0;font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.02em}.topbar p{margin:.4rem 0 0;color:var(--text-secondary)}.sidebar-toggle{min-width:116px}.panel{border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem;background:linear-gradient(165deg,var(--surface-elevated),var(--surface));box-shadow:var(--shadow);overflow-x:hidden;display:grid;gap:var(--space-3)}.game-layout{position:relative;display:grid;grid-template-columns:1fr;gap:var(--space-3);align-items:start;padding-left:46px}.import-panel{position:fixed;top:130px;left:0;z-index:20;width:min(340px,calc(100vw - 10px));max-height:calc(100vh - 230px);overflow-y:auto;transform:translate(calc(-100% + var(--import-peek-width)));opacity:.92;transition:transform .18s ease,opacity .18s ease;border-left:0;border-radius:0 var(--radius-lg) var(--radius-lg) 0}.import-panel.open{transform:translate(0);opacity:1}.import-panel-peek{position:absolute;right:0;top:.95rem;margin:0;width:var(--import-peek-width);min-height:118px;display:inline-flex;align-items:center;justify-content:center;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:#dce5ff;background:#5b7cff38;border:1px solid rgba(91,124,255,.45);border-right:0;border-radius:8px 0 0 8px;writing-mode:vertical-rl;text-orientation:mixed;pointer-events:none}.import-panel-content{opacity:0;pointer-events:none;transition:opacity .12s ease}.import-panel.open .import-panel-content{opacity:1;pointer-events:auto}.import-panel.open .import-panel-peek{opacity:0}.performance-panel{min-height:calc(100vh - 180px)}.panel h2{margin-top:0;margin-bottom:0;font-size:1.15rem;letter-spacing:-.01em}form,.url-import{display:grid;gap:var(--space-2)}.row{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:flex-end}label{display:grid;gap:.55rem;flex:1;min-width:210px;color:var(--text-secondary);font-size:.9rem}textarea,input,select,button{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-muted);color:var(--text);padding:.6rem .78rem;max-width:100%;box-sizing:border-box;font-size:.95rem}input:not([type=range]),select,.btn{min-height:var(--control-height)}textarea:focus,input:focus,select:focus,button:focus-visible{outline:none;border-color:var(--border-strong);box-shadow:0 0 0 3px #5b7cff38}.btn{cursor:pointer;font-weight:600;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-strong);border-color:var(--brand-strong)}.btn-secondary{background:#5b7cff1f;border-color:#5b7cff73;color:#dce5ff}.btn-secondary:hover{background:#5b7cff33}.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text-secondary)}.btn-ghost:hover{background:#ffffff0d}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-danger:hover{background:var(--danger-strong);border-color:var(--danger-strong)}.sheet-focus-panel{background:linear-gradient(160deg,#5b7cff33,#5b7cff0f);border-radius:var(--radius-md);border:1px solid rgba(91,124,255,.4);padding:1rem;min-height:calc(100vh - 220px);position:relative}.sheet-current-corner{position:absolute;top:1.5rem;right:1rem;z-index:2;display:grid;justify-items:center;text-align:center;background:linear-gradient(160deg,#1a53ef82,#6c4b1c91);border:1px solid rgba(91,124,255,.4);border-radius:var(--radius-md);padding:.75rem 1rem;width:clamp(300px,36vw,350px);max-width:calc(100% - 1.5rem);box-shadow:var(--shadow)}.label{margin:0;color:var(--text-muted)}.current{font-size:clamp(2rem,6vw,2.8rem);margin:.3rem 0;letter-spacing:-.015em}.corner-current{margin:.25rem 0;font-size:clamp(1.95rem,3.8vw,2.8rem);font-weight:700;line-height:1.1}.next{margin:0;color:#d6def8;font-size:.95rem}.hint{margin:0;color:var(--text-muted);font-size:.9rem}.controls{display:flex;gap:var(--space-3);flex-wrap:wrap}.transpose-controls{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-2);align-items:center}.transpose-field,.slider-field{justify-content:start}.compact-range{min-height:var(--control-height);padding:0 .2rem;accent-color:var(--brand)}.range-with-value{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-1)}.range-with-value input[type=range]{width:100%;margin:0}.range-value{min-width:32px;text-align:right;color:var(--text-secondary);font-weight:600;font-size:.86rem}.transpose-btn{min-width:58px}.transpose-readout{text-align:center;min-width:86px}.section-row{margin-top:var(--space-1)}.sheet-view{display:grid;gap:var(--space-2);max-height:calc(100vh - 200px);overflow-y:auto;padding:1rem 0 .4rem}.sheet-paragraph{display:grid;gap:.3rem;padding:.45rem .55rem;border:1px solid rgba(91,124,255,.2);border-radius:var(--radius-md);background:#5b7cff0a}.sheet-section{margin:0;color:#cdd8ff;font-weight:600}.sheet-lyric{margin:0;color:var(--text-secondary);line-height:1.35}.sheet-chord-line{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.sheet-token-muted{color:var(--text-muted);font-size:.9rem}.chord-chip{min-width:62px;white-space:nowrap;border-radius:999px;background:#5b7cff1a;border-color:#5b7cff59;color:#dce5ff}.chord-chip.active{background:var(--brand);border-color:var(--brand);color:#fff}.warnings{margin:0;color:#ffb8c0}.warnings li,.error,.hint,p{overflow-wrap:anywhere;word-break:break-word}.error{color:#ff96a2}table{width:100%;border-collapse:collapse;border-radius:var(--radius-md);overflow:hidden}th,td{border-bottom:1px solid var(--border);text-align:left;padding:.58rem}thead th{color:var(--text-secondary);font-weight:600;background:#ffffff08}.take-actions{display:flex;gap:var(--space-1)}.control-hud{position:fixed;left:50%;bottom:14px;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:center;padding:.55rem .65rem;border-radius:999px;background:#080f2194;border:1px solid rgba(91,124,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:45}.hud-btn{background:#ffffff0f;border-color:#fff3;color:#dce5ff;min-height:34px;padding:.4rem .7rem;font-size:.86rem}.sidebar-backdrop{position:fixed;inset:0;background:#050a1880;border:0;opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:30}.sidebar-backdrop.open{opacity:1;pointer-events:auto}.control-sidebar{position:fixed;top:var(--side-panel-top);right:0;height:calc(100vh - var(--side-panel-top));width:min(460px,94vw);padding:1rem;box-sizing:border-box;overflow-y:auto;background:linear-gradient(180deg,#101a35,#0c1328);border-left:1px solid var(--border-strong);transform:translate(104%);transition:transform .22s ease;z-index:40;display:grid;gap:var(--space-3)}.control-sidebar.open{transform:translate(0)}.control-sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.control-sidebar-header h2{margin:0;font-size:1rem;color:var(--text-secondary)}@media(max-width:760px){.layout{padding:1rem;gap:.8rem}.panel{padding:.9rem;border-radius:var(--radius-md)}.game-layout{grid-template-columns:1fr;padding-left:0}.import-panel{position:static;width:100%;max-height:none;transform:none;opacity:1}.import-panel-content{opacity:1;pointer-events:auto}.import-panel-peek{display:none}.performance-panel,.sheet-focus-panel{min-height:auto}.sheet-view{max-height:52vh}.take-actions{flex-wrap:wrap}.topbar{flex-direction:column;align-items:stretch}.sidebar-toggle{width:100%}.control-hud{width:calc(100vw - 18px);bottom:8px;border-radius:14px}}