:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;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: #f5f6fa;--surface: #ffffff;--surface-elevated: #ffffff;--surface-muted: #f2f4f9;--text: #23242a;--text-secondary: #4d5160;--text-muted: #8a90a3;--border: #e7eaf3;--border-strong: #d8ddeb;--brand: #ff6c3a;--brand-strong: #ff5a26;--danger: #e45565;--danger-strong: #ce4051;--shadow: 0 16px 40px rgba(18, 31, 66, .1);--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}kbd{background-color:#f0f0f0;border:1px solid #ccc;border-radius:3px;padding:2px 4px;font-family:monospace;font-size:.85em}.layout{display:grid;gap:.8rem;width:min(1240px,100%);margin:0 auto;padding:1rem 1rem 5.5rem;box-sizing:border-box;min-height:100vh}.topbar{padding:.6rem .25rem;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.topbar-meta{display:grid;gap:var(--space-1)}.topbar-meta h1{color:#f6f8ff}.topbar h1{margin:0;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.1;letter-spacing:-.02em}.topbar p{margin:.15rem 0 0;color:#9a9a9a;font-weight:500;font-size:.95rem}.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)}.onboarding-panel{gap:var(--space-2)}.onboarding-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.onboarding-head h2{margin:0;color:#2f3850}.onboarding-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.onboarding-step{display:grid;gap:.55rem;padding:.7rem;border:1px solid #e2e8f6;border-radius:var(--radius-md);background:linear-gradient(180deg,#fdfdff,#f6f9ff)}.onboarding-image-frame{width:100%;aspect-ratio:19 / 9;justify-self:stretch;border-radius:12px;border:1px solid #d8dff1;box-shadow:0 10px 22px #2332581f;background:#eef2fb;overflow:hidden}.onboarding-image{width:100%;height:100%;object-fit:cover;display:block}.onboarding-step h3{margin:0;color:#364161;font-size:.98rem}.onboarding-step p{margin:0;color:#5c6786;font-size:.9rem;line-height:1.45}.game-layout{position:relative;display:grid;grid-template-columns:1fr;gap:var(--space-3);align-items:start}.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 20px 20px 0;background:linear-gradient(180deg,#fff,#f9fbff)}.import-panel.open{transform:translate(0);opacity:1}.import-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.import-panel-head h2{margin:0;color:#2e3448;font-weight:700}.import-panel-content{opacity:0;pointer-events:none;transition:opacity .12s ease}.import-panel-content.open{opacity:1;pointer-events:auto}.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:#334064;font-weight:700;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.open .import-panel-peek{opacity:0}.import-panel-toggle{display:none}.import-panel .row{align-items:stretch}.import-panel label{min-width: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;box-shadow:0 10px 20px #ff6c3a3d}.btn-primary:hover{background:var(--brand-strong);border-color:var(--brand-strong)}.btn-secondary{background:#f5f7fd;border-color:#dde3f2;color:#4c5878}.btn-secondary:hover{background:#eef2fb}.btn-ghost{background:#fff;border-color:#e2e6f2;color:#5d647a}.btn-ghost:hover{background:#f8faff}.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(180deg,#fff,#fbfcff);border-radius:var(--radius-md);border:1px solid #e7eaf3;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(180deg,#fff,#f9fbff);border:1px solid #cfd6e8;border-radius:var(--radius-md);padding:.75rem 1rem;width:clamp(300px,36vw,350px);max-width:calc(100% - 1.5rem);box-shadow:0 0 0 1px #e4e9f5,var(--shadow);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.sheet-current-corner:hover,.sheet-current-corner:focus-visible{border-color:#b9c4df;box-shadow:0 0 0 1px #d7deef,0 10px 22px #28355729}.sheet-current-corner:active{transform:translateY(1px)}.label{margin:0;color:#6f7589;font-weight:600}.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;color:var(--current-chord-color, #3f4c70);text-shadow:0 1px 0 rgba(255,255,255,.7)}.next{margin:0;color:#5f667e;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:0;padding:.55rem .7rem;border:1px solid #edf0f7;border-radius:var(--radius-md);background:#fff}.sheet-section{margin:0 0 .55rem;color:#556081;font-weight:600}.sheet-lyric{margin:0;color:var(--text-secondary);line-height:1.6}.sheet-chord-line{display:flex;flex-wrap:wrap;gap:0;align-items:center;margin:0 0 .08rem}.sheet-chord-line+.sheet-lyric{margin-top:0}.sheet-lyric+.sheet-chord-line{margin-top:.8rem}.sheet-token-muted{color:var(--text-muted);font-size:.9rem;white-space:pre}.chord-chip{min-width:48px;height:28px;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;padding:0 .5rem;font-weight:700;font-size:.83rem;background:linear-gradient(180deg,var(--chip-bg-start, #f6f7fc),var(--chip-bg-end, #e9edf7));border-color:var(--chip-border, #e7eaf3);--chip-ripple: rgba(115, 128, 162, .38);--chip-shadow-soft: rgba(115, 128, 162, .2);--chip-shadow-strong: rgba(115, 128, 162, .34);color:#fff;box-shadow:inset 0 -8px 14px var(--chip-shadow-soft),0 6px 12px var(--chip-shadow-soft),0 0 0 1px #ffffff47;opacity:.68;position:relative;overflow:visible}.chord-chip:before{content:"";position:absolute;inset:1px 2px auto;height:42%;border-radius:7px 7px 12px 12px;background:linear-gradient(180deg,#ffffff80,#ffffff0f);pointer-events:none}.chord-chip.active{color:#fff;box-shadow:0 12px 20px var(--chip-shadow-strong),0 0 0 4px var(--chip-shadow-soft),0 0 18px var(--chip-shadow-strong);opacity:1}.chord-chip.ripple-play{animation:chord-chip-pop .26s ease-out}.chord-chip.ripple-play:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 var(--chip-ripple);animation:chord-chip-ripple 1.1s ease-out}@keyframes chord-chip-pop{0%{transform:scale(.92)}65%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes chord-chip-ripple{0%{transform:scale(1);opacity:.95}to{transform:scale(1.18);box-shadow:0 0 0 14px #fff0;opacity:0}}.warnings{margin:0;color:#c8465a}.warnings li,.error,.hint,p{overflow-wrap:anywhere;word-break:break-word}.error{color:#c8465a}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:#f5f7fd}.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:#ffffffeb;border:1px solid #e3e7f3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 28px #28355724;z-index:45;transition:transform .22s ease,bottom .22s ease,box-shadow .22s ease}.control-hud:before{content:"";position:absolute;top:-9px;left:50%;transform:translate(-50%);width:74px;height:6px;border-radius:999px;background:linear-gradient(90deg,#d7ddeb,#c9d1e4,#d7ddeb);box-shadow:0 2px 8px #37466c38}.hud-btn{background:#f6f8fe;border-color:#e1e6f2;color:#49526c;min-height:34px;padding:.4rem .7rem;font-size:.86rem;position:relative;z-index:2}@media(hover:hover)and (pointer:fine){.control-hud:after{content:"";position:absolute;inset:-24px -22px -14px;z-index:1}.control-hud{bottom:-32px;transform:translate(-50%)}.control-hud:hover,.control-hud:focus-within{bottom:12px;box-shadow:0 18px 34px #28355733}}.sidebar-backdrop{position:fixed;inset:0;background:#26314c33;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,#fff,#f7f9ff);border-left:1px solid #e1e6f2;transform:translate(104%);transition:transform .22s ease;z-index:40;display:grid;gap:var(--space-3);box-shadow:-8px 0 30px #1e2c4c24}.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:1024px){.layout{padding:.9rem .9rem 6.2rem}.game-layout{padding-left:0}.import-panel{position:static;width:100%;max-height:none;transform:none;opacity:1;border-left:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.import-panel h2{font-size:1.02rem}.import-panel-toggle{display:inline-flex}.import-panel .row{flex-direction:column;align-items:stretch;gap:var(--space-2)}.import-panel label{min-width:0;width:100%}.import-panel textarea,.import-panel input,.import-panel select,.import-panel .btn{width:100%;max-width:100%}.import-panel-peek{display:none}.import-panel-content{max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .22s ease,opacity .16s ease}.import-panel-content.open{max-height:80vh;opacity:1;pointer-events:auto;margin-top:var(--space-2)}.sheet-current-corner{position:static;width:100%;max-width:none;margin-bottom:var(--space-2)}.sheet-view{padding-top:.4rem}.control-hud{width:calc(100vw - 16px);left:8px;transform:none;bottom:8px;border-radius:14px;justify-content:stretch}.hud-btn{flex:1 1 calc(33.333% - .5rem);min-height:40px}}@media(max-width:760px){.layout{padding:1rem;gap:.8rem}.panel{padding:.9rem;border-radius:var(--radius-md)}.onboarding-head{flex-direction:column;align-items:stretch}.onboarding-grid{grid-template-columns:1fr}.performance-panel,.sheet-focus-panel{min-height:auto}.sheet-view{max-height:52vh}.chord-chip{min-width:44px;height:26px;font-size:.78rem}.take-actions{flex-wrap:wrap}.topbar{flex-direction:column;align-items:stretch}.sidebar-toggle{width:100%}.hud-btn{flex:1 1 calc(50% - .5rem)}}