@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/archivo-vietnamese-rJmnGBSt.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/archivo-latin-ext-7khWdh9v.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/archivo-latin-DY7AcnAa.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--cream:#fbf5ea;--sand:#efe5d4;--paper:#fffdf8;--ink:#231d17;--ink-soft:#4a4037;--muted:#6f6458;--amber:#f2913d;--blue:#6aa8e0;--purple:#b48be0;--green:#6fbf8b;--coral:#ee8577;--yellow:#f2c14e;--dark:#1f1a16;--dark-2:#2a241e;--dark-line:#3d352d;--on-dark:#f6eee1;--muted-dark:#b9ad9c;--bass:#4fc3c9;--danger:#c2410c;--font:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:var(--amber) var(--sand);scrollbar-width:thin}body{background:var(--cream);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer}input::placeholder{color:#b9ad9c}::selection{background:var(--amber);color:var(--ink)}:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.muted{color:var(--muted)}.error{color:var(--danger);font-weight:700}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:800}.eyebrow-light{letter-spacing:.06em;color:var(--muted);font-size:12px;font-weight:800}.eyebrow-dark{letter-spacing:.05em;color:var(--muted-dark);font-size:11px;font-weight:800}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}.mega{font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.005em;margin:0;font-weight:900;font-stretch:62%;line-height:.86}h1,h2{margin:0}.scroll-progress{background:var(--ink);transform-origin:0;z-index:50;pointer-events:none;height:4px;position:fixed;inset:0 0 auto;transform:scaleX(0)}.cc-cur{pointer-events:none;z-index:9999;mix-blend-mode:difference;display:none;position:fixed;top:0;left:0}.cc-ring{border:2px solid var(--cream);border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px}.cc-ring span{font:900 8px var(--font);letter-spacing:.08em;color:var(--cream);opacity:0;place-items:center;display:grid;position:absolute;inset:0}.cc-glyph{width:24px;height:24px;color:var(--cream);z-index:10000;margin:-12px 0 0 -12px;display:none}.cc-glyph svg{display:block}@media (pointer:fine){html.cc-on,html.cc-on *{cursor:none!important}html.cc-on .cc-ring,html.cc-on .cc-glyph{display:block}}[data-mag],[data-tilt]{will-change:transform}.cc-note{pointer-events:none;z-index:9998;font-family:var(--font);color:var(--cream);mix-blend-mode:difference;font-weight:700;position:fixed;top:0;left:0}.pill-btn{background:var(--dark-2);min-height:44px;color:var(--on-dark);font:800 12px var(--font);letter-spacing:.05em;border:2px solid #0000;border-radius:999px;padding:0 18px}.pill-btn.amber{background:var(--amber);color:var(--ink)}.pill-btn.outline{color:var(--ink);border-color:var(--ink);background:0 0}.pill-btn.outline[aria-pressed=true]{background:var(--ink);color:var(--cream)}.pill-btn[aria-pressed=true]:not(.outline){background:var(--amber);color:var(--ink)}.segmented{border-radius:999px;padding:3px;display:inline-flex}.segmented button{min-height:38px;font:800 11px var(--font);letter-spacing:.05em;background:0 0;border:0;border-radius:999px;padding:0 14px}.segmented.sand{background:var(--sand)}.segmented.sand button[aria-pressed=true]{background:var(--ink);color:var(--cream)}.segmented.dark{background:var(--dark-2);color:var(--on-dark)}.segmented.dark button[aria-pressed=true]{background:var(--amber);color:var(--ink)}.segmented.light{background:#231d171f}.segmented.light button{min-height:34px;padding:0 14px}.segmented.light button[aria-checked=true]{background:var(--ink);color:var(--cream)}.rule-line{border-top:2px solid var(--ink);margin:0 12px}.rule-label{letter-spacing:.05em;align-items:center;gap:16px;margin-top:36px;font-size:12px;font-weight:800;display:flex}.rule-label i{background:var(--ink);flex:1;height:2px}.logo-dot-accent{fill:var(--amber)}.button{border:2px solid var(--ink);min-height:44px;color:var(--ink);font:800 12px var(--font);letter-spacing:.04em;background:0 0;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0 18px;display:inline-flex}.button.primary,.button[aria-pressed=true],.button[aria-selected=true]{background:var(--ink);color:var(--cream)}.button:disabled{opacity:.5;cursor:default}.dark-surface .button,.modal .button{border-color:currentColor}.site-nav{letter-spacing:.06em;justify-content:space-between;align-items:center;gap:12px;padding:20px 0;font-size:11px;font-weight:800;display:flex}.nav-home{align-items:center;gap:8px;display:flex}.bar-nav{border-bottom:2px solid var(--ink);padding:16px clamp(16px,4vw,48px)}.site-nav a:hover{text-underline-offset:4px;text-decoration:underline}.hero-panel{background:var(--amber);color:var(--ink);border-radius:0 0 36px 36px;margin:12px 12px 0;padding:0 clamp(16px,4vw,64px) 120px;position:relative}.hero-rule{letter-spacing:.14em;white-space:nowrap;align-items:center;gap:20px;margin-top:clamp(36px,7vw,96px);font-size:12px;font-weight:800;display:flex}.hero-rule i{background:var(--ink);flex:1;height:2px}.wordmark{font-variation-settings:"wdth" 62;letter-spacing:-.01em;text-align:center;white-space:nowrap;margin:clamp(4px,1vw,14px) 0 0;padding-top:18px;font-size:clamp(52px,16.4vw,300px);font-weight:900;font-stretch:62%;line-height:.86;overflow:hidden}.wordmark-letter{display:inline-block}.hero-grid{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:clamp(20px,3vw,40px);display:flex}.hero-side{letter-spacing:.02em;flex:180px;max-width:220px;margin:0;font-size:12px;font-weight:700;line-height:1.4}.hero-side.right{text-align:right}.hero-form{flex-direction:column;flex:2 520px;gap:12px;max-width:660px;display:flex}.hero-step{letter-spacing:.06em;align-items:center;gap:10px;font-size:13px;font-weight:900;display:flex}.step-num{background:var(--ink);width:26px;height:26px;color:var(--amber);border-radius:50%;place-items:center;font-size:13px;display:grid}.step-arrow{font-size:18px;display:inline-block}.queue-bar{background:#231d1726;border-radius:999px;height:6px;overflow:hidden}.queue-bar div{background:var(--ink);transform-origin:0;width:100%;height:100%}.url-pill{background:var(--paper);border:3px solid var(--ink);border-radius:999px;align-items:center;min-height:64px;padding:6px;display:flex;box-shadow:0 14px 34px -14px #231d17b3}.yt-badge{color:#fff;background:#e5322d;border-radius:7px;flex:none;place-items:center;width:34px;height:24px;margin:0 4px 0 8px;font-size:11px;display:grid}.url-pill input{min-width:0;font:600 17px var(--font);color:var(--ink);background:0 0;border:0;outline:0;flex:1;padding:0 14px}.go-btn{background:var(--ink);color:var(--cream);min-height:52px;font:900 14px var(--font);letter-spacing:.05em;white-space:nowrap;border:0;border-radius:999px;padding:0 26px}.go-btn:disabled{opacity:.55;cursor:default}.hero-sub{flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.link-btn{font:800 13px var(--font);text-underline-offset:3px;background:0 0;border:0;padding:6px 0;text-decoration:underline}.hero-mode{letter-spacing:.04em;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;font-size:11px;font-weight:800;display:flex}.hero-error{background:var(--ink);color:var(--cream);border-radius:12px;margin:0;padding:10px 14px;font-weight:700}.hero-notch{width:156px;height:156px;margin-left:-78px;position:absolute;bottom:-78px;left:50%}.notch-disc{background:var(--amber);border-radius:50%;place-items:center;display:grid;position:absolute;inset:0}.notch-logo{background:var(--ink);width:118px;height:118px;color:var(--cream);border-radius:50%;place-items:center;display:grid}.notch-l,.notch-r{width:24px;height:24px;position:absolute;top:54px}.notch-l{background:radial-gradient(circle 24px at 0 100%, transparent 23.5px, var(--amber) 24px);left:-24px}.notch-r{background:radial-gradient(circle 24px at 100% 100%, transparent 23.5px, var(--amber) 24px);right:-24px}.intro{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:center;gap:24px;max-width:1400px;margin:0 auto;padding:clamp(100px,10vw,130px) clamp(20px,5vw,72px) 24px;display:grid}.intro-copy{flex-direction:column;gap:22px;max-width:480px;display:flex}@media (width>=900px){.intro-copy{justify-self:end;margin-right:clamp(0px,4vw,64px)}}.intro-copy h2{font-size:clamp(48px,6vw,84px)}.intro-copy p{color:var(--ink-soft);text-wrap:pretty;margin:0;font-size:17px;line-height:1.55}.intro-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.legend-dots{color:var(--muted);gap:18px;font-size:12px;font-weight:700;display:flex}.legend-dots span{align-items:center;gap:7px;display:flex}.ld{border-radius:50%;width:12px;height:12px;display:inline-block}.ld.ink{background:var(--ink)}.ld.amber{background:var(--amber)}.ld.blue{background:var(--blue)}.intro-wheel{height:clamp(380px,44vw,580px);position:relative}.wheel-3d{cursor:grab;touch-action:pan-y;position:absolute;inset:0}.wheel-3d canvas{display:block;width:100%!important;height:100%!important}.wheel{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.wheel:active{cursor:grabbing}.wheel-ring{fill:none;stroke:#cfc3af;stroke-width:2px}.wheel-shape{fill:#f2913d47;stroke:var(--amber);stroke-width:2px;stroke-linejoin:round}.wheel-hi-root{stop-color:#6b5f52}.wheel-lo-root{stop-color:#231d17}.wheel-hi-tone{stop-color:#ffc88f}.wheel-lo-tone{stop-color:#e07a1c}.wheel-hi-bass{stop-color:#b7d8f5}.wheel-lo-bass{stop-color:#4b8fc9}.wheel-hi-other{stop-color:#e8dfd0}.wheel-lo-other{stop-color:#a99d8b}.wheel-ball{filter:drop-shadow(0 6px 6px #231d1740);transition:r .2s}.wheel-label{font:800 15px var(--font);fill:var(--muted);pointer-events:none}.wheel-root .wheel-label,.wheel-tone .wheel-label,.wheel-bass .wheel-label{fill:var(--ink)}.wheel-node{cursor:pointer}.wheel-centre{pointer-events:none;text-align:center;place-items:center;display:grid;position:absolute;inset:0}.wheel-centre-text{flex-direction:column;align-items:center;display:flex}.wheel-chord{font-variation-settings:"wdth" 62;font-size:clamp(56px,7vw,96px);font-weight:900;font-stretch:62%;line-height:.85}.wheel-where{letter-spacing:.06em;color:var(--muted);margin-top:6px;font-size:11px;font-weight:800}.steps-bar{letter-spacing:.05em;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:26px clamp(20px,5vw,72px);font-size:12px;font-weight:800;display:flex}.cs{font-family:var(--font);font-variation-settings:"wdth" 62;align-items:baseline;font-weight:900;font-stretch:62%;display:inline-flex}.cs-quality{font-size:.66em}.cs-ext{margin-left:.04em;font-size:.46em;position:relative;top:-.55em}.cs-bass{color:var(--bass);font-size:.62em;font-weight:700}.cs.low-confidence{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-color:var(--muted-dark);text-decoration-color:var(--muted-dark);text-underline-offset:.12em}.modal .cs-bass,.light-ctx .cs-bass{color:#0b7c86}.play-panel{background:var(--dark);color:var(--on-dark);border-radius:22px;flex-direction:column;gap:18px;min-width:0;padding:20px;display:flex}.play-meta{letter-spacing:.05em;color:var(--muted-dark);justify-content:space-between;gap:8px;font-size:10px;font-weight:800;display:flex}.play-hero{perspective:600px;justify-content:space-between;align-items:flex-end;gap:12px;min-height:130px;display:flex}.big-chord{font-variation-settings:"wdth" 62;color:var(--amber);font-size:clamp(84px,10vw,128px);font-weight:900;font-stretch:62%;line-height:.82}.countdown{display:inline-block}.play-next{flex-direction:column;align-items:flex-end;gap:10px;padding-bottom:6px;display:flex}.next-chord{font-variation-settings:"wdth" 62;font-size:36px;font-weight:900;font-stretch:62%;line-height:.9}.beat-dots{gap:6px;display:inline-flex}.dot{background:var(--dark-line);border-radius:50%;width:10px;height:10px}.dot.on{background:var(--amber)}.structure{gap:4px;display:flex;position:relative}.structure-block{border:2px solid var(--sec);min-width:0;min-height:36px;color:var(--on-dark);text-align:left;font:800 10px var(--font);letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;background:0 0;border-radius:8px;flex-basis:0;padding:7px 8px;overflow:hidden}.structure-block.active{background:var(--sec);color:var(--ink)}.structure-block.looping{box-shadow:0 0 0 3px var(--cream)}.structure-block.guess{border-style:dashed}.structure-playhead{background:var(--on-dark);pointer-events:none;border-radius:2px;width:3px;position:absolute;top:-5px;bottom:-5px}.mini-lane{gap:6px;display:flex;overflow:hidden}.mini-lane span{background:var(--dark-2);white-space:nowrap;min-width:56px;color:var(--muted-dark);border-radius:8px;flex:1 0 auto;padding:9px 8px;font-size:15px;font-weight:800}.mini-lane span.now{color:var(--amber)}.transport-pill{background:var(--on-dark);color:var(--ink);border-radius:999px;display:flex;overflow:hidden}.transport-pill button{min-height:44px;font:800 12px var(--font);letter-spacing:.05em;color:var(--ink);background:0 0;border:0;flex:1;justify-content:space-around;align-items:center;display:flex}.live-badge{background:var(--amber);font:800 11px var(--font);letter-spacing:.06em;place-items:center;padding:0 20px;display:grid}.tool{background:var(--dark);color:var(--on-dark);border-radius:32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));margin:0 12px;display:grid;overflow:hidden}.tool-copy{flex-direction:column;justify-content:space-between;gap:40px;min-height:580px;padding:28px clamp(20px,3vw,40px);display:flex;position:relative;overflow:hidden}.tool-top{letter-spacing:.05em;color:var(--muted-dark);justify-content:space-between;font-size:12px;font-weight:800;display:flex}.tool-feature{text-align:center;flex-direction:column;align-items:center;gap:14px;display:flex}.tool-feature h2{font-size:clamp(56px,7vw,96px)}.tool-feature p{color:#d8cdbd;text-wrap:pretty;max-width:330px;margin:0;font-size:15px;line-height:1.55}.tool-tag{color:var(--ink);letter-spacing:.05em;border-radius:999px;padding:6px 12px;font-size:11px;font-weight:800}.tool-dots{gap:10px;margin-top:18px;display:flex}.tool-dots button{background:var(--dark-line);border:0;border-radius:999px;width:12px;height:12px;padding:0;transition:width .3s}.tool-dots button.on{background:var(--amber);width:36px}.tool-specs{letter-spacing:.04em;text-align:center;color:var(--muted-dark);justify-content:space-around;font-size:11px;font-weight:800;line-height:1.3;display:flex}.tool-stage{background:var(--dark-2);justify-content:center;align-items:center;min-height:580px;padding:clamp(20px,3vw,36px);display:flex;position:relative;overflow:hidden}.ring{border-radius:50%;width:900px;height:900px;position:absolute}.ring-amber{border:64px solid var(--amber);top:-42%;left:32%}.ring-blue{border:28px solid var(--blue);top:46%;left:-72%}.tool-card{border-radius:22px;width:min(100%,460px);position:relative;box-shadow:0 30px 60px -20px #0009}.library{padding:clamp(40px,5vw,72px) clamp(16px,4vw,64px)}.lib-top,.sheet-top{letter-spacing:.05em;color:var(--muted);justify-content:space-between;font-size:12px;font-weight:800;display:flex}.lib-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:28px;display:flex}.lib-title{font-size:clamp(64px,12vw,180px)}.lib-head p{max-width:320px;color:var(--ink-soft);margin:0 0 8px;font-size:15px;line-height:1.5}.resume-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin-top:14px;display:grid}.resume-card{background:var(--ink);color:var(--on-dark);border-radius:20px;align-items:center;gap:14px;padding:12px;display:flex}.resume-key{font-variation-settings:"wdth" 62;width:64px;height:64px;color:var(--ink);border-radius:14px;flex:none;place-items:center;font-size:30px;font-weight:900;font-stretch:62%;display:grid}.resume-info{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.resume-title{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:800;overflow:hidden}.resume-where{letter-spacing:.04em;color:var(--muted-dark);font-size:11px;font-weight:700}.resume-bar{background:var(--dark-line);border-radius:2px;height:4px;position:relative;overflow:hidden}.resume-bar span{position:absolute;top:0;bottom:0;left:0}.lib-tools{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:40px;display:flex}.lib-tools input{border:2px solid var(--ink);background:var(--paper);max-width:340px;min-height:44px;font:600 14px var(--font);border-radius:999px;outline:none;flex:220px;padding:0 18px}.lib-filters{flex-wrap:wrap;gap:10px;display:flex}.fav-filter{min-height:44px;font:800 11px var(--font);letter-spacing:.05em;background:var(--sand);border:0;border-radius:999px;padding:0 16px}.fav-filter[aria-pressed=true]{background:var(--amber);color:var(--ink)}.song-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:16px;margin-top:18px;display:grid}.song-card{background:var(--paper);border:2px solid var(--ink);border-radius:22px;flex-direction:column;padding:8px;display:flex}.song-art{aspect-ratio:16/10;color:var(--ink);border-radius:15px;place-items:center;display:grid;position:relative}.song-art span{letter-spacing:.05em;font-size:10px;font-weight:800;position:absolute}.song-no{top:10px;left:12px}.song-q{background:var(--paper);color:var(--ink);border-radius:999px;padding:5px 8px;top:8px;right:8px}.song-q.accurate{background:var(--ink);color:var(--cream)}.song-art .song-key{font-variation-settings:"wdth" 62;letter-spacing:0;font-size:84px;font-weight:900;font-stretch:62%;line-height:.8;position:static}.song-dur{bottom:10px;right:12px}.song-info{justify-content:space-between;gap:8px;padding:12px 6px 4px;display:flex}.song-text{flex-direction:column;gap:4px;min-width:0;display:flex}.song-title{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:800;overflow:hidden}.song-sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.fav-btn{width:44px;height:44px;color:var(--ink);background:0 0;border:0;flex:none;margin:-8px -6px 0 0;font-size:22px}.fav-btn[aria-pressed=true]{color:var(--amber)}.lib-empty{margin:24px 0 0;font-size:15px;font-weight:600}.sheet{background:var(--dark);color:var(--on-dark);border-radius:32px;margin:0 12px;padding:clamp(28px,4vw,48px) clamp(20px,4vw,56px) 48px}.sheet-top{color:var(--muted-dark)}.sheet-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:28px;display:flex}.sheet-title{overflow-wrap:anywhere;font-size:clamp(48px,8vw,128px)}.sheet-meta{letter-spacing:.05em;color:var(--muted-dark);margin-top:14px;font-size:12px;font-weight:800}.sheet-controls{flex-wrap:wrap;gap:10px;display:flex}.stepper{background:var(--dark-2);letter-spacing:.05em;border-radius:999px;align-items:center;font-size:11px;font-weight:800;display:flex}.stepper button{width:44px;min-height:44px;color:var(--on-dark);font:800 18px var(--font);background:0 0;border:0}.stepper span{text-align:center;min-width:96px}.sheet-body{flex-direction:column;gap:28px;margin-top:40px;display:flex}.sheet-section{flex-direction:column;gap:8px;display:flex}.sheet-section-head{letter-spacing:.06em;align-items:center;gap:14px;font-size:12px;font-weight:800;display:flex}.section-chip{font:800 11px var(--font);letter-spacing:.06em;color:var(--ink);border:0;border-radius:999px;padding:7px 12px}.section-chip[aria-pressed=true]{box-shadow:0 0 0 3px var(--cream)}.sheet-section-head .rule{background:var(--dark-line);flex:1;height:1px}.bars-range{color:var(--muted-dark)}.sheet-row{--bar-font:clamp(24px, 2.6vw, 36px);gap:6px;display:grid}.bar-cell{text-align:left;background:var(--dark-2);min-height:72px;color:var(--on-dark);font-size:var(--bar-font);border:2px solid #0000;border-radius:14px;align-items:stretch;padding:0 0 8px;line-height:1;transition:background .2s,transform .2s;display:flex;position:relative;overflow:hidden}.bar-cell.fit-sm{font-size:calc(var(--bar-font) * .8)}.bar-cell.fit-xs{font-size:calc(var(--bar-font) * .64)}.bar-chords{flex:1;min-width:0;display:flex}.bar-chord{white-space:nowrap;flex-basis:0;align-items:center;min-width:0;padding:10px 12px;display:flex;overflow:hidden}.bar-chord+.bar-chord{border-left:2px dashed #f6eee14d}.bar-cell.now .bar-chord+.bar-chord{border-left-color:#231d1766}.bar-ruler{opacity:.35;background-image:linear-gradient(90deg,currentColor 1px,#0000 1px);height:7px;position:absolute;bottom:0;left:0;right:0}.sheet-row[data-per-row="8"]{--bar-font:clamp(15px, 1.5vw, 22px)}.sheet-row[data-per-row="8"] .bar-chord{padding:8px 6px}.bar-cell:hover{background:#342c25}.bar-cell.now{background:var(--amber);color:var(--ink);transform:scale(1.02)}.bar-cell.now .cs-bass{color:#0b4f55}.bar-cell.guess{border:2px dashed var(--amber)}.bar-cell .guess-mark{font:800 11px var(--font);color:var(--amber);position:absolute;top:7px;right:10px}.sheet-foot{border-top:1px solid var(--dark-line);color:#d8cdbd;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:32px;padding-top:20px;font-size:13px;font-weight:600;display:flex}.sheet-foot b{color:var(--amber)}.export-links{letter-spacing:.05em;flex-wrap:wrap;gap:8px;font-size:12px;font-weight:800;display:flex}.export-links button{background:var(--dark-2);color:var(--on-dark);font:800 12px var(--font);letter-spacing:.05em;border:0;border-radius:999px;padding:12px 16px}.export-links button.primary{background:var(--on-dark);color:var(--ink);padding:12px 18px}.sheet-hint{color:var(--muted-dark);font-size:12px;font-weight:700}.site-footer{background:var(--amber);color:var(--ink);letter-spacing:.06em;border-radius:24px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:12px;padding:22px clamp(20px,5vw,72px);font-size:13px;font-weight:800;display:flex}.song-head{padding:28px clamp(16px,4vw,48px) 8px}.song-back{letter-spacing:.08em;margin-bottom:14px;font-size:12px;font-weight:800;display:inline-block}.track-title{overflow-wrap:anywhere;text-wrap:balance;font-size:clamp(40px,7vw,108px)}.song-chips{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.chip-meta{background:var(--sand);letter-spacing:.04em;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:800}.chip-meta.muted{color:var(--muted)}.notices{gap:10px;padding:14px clamp(16px,4vw,48px) 0;display:grid}.banner{background:var(--sand);border-left:6px solid var(--amber);border-radius:16px;padding:14px 18px;font-size:14px;font-weight:600}.banner p{margin:0 0 6px}.banner p:last-child{margin:0}.banner .muted{font-size:12px}.notice{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.notice p{flex:320px;margin:0}.guess-mark{color:var(--amber);font-weight:800}.banner .button{min-height:40px;margin:4px 0}.stage{background:var(--dark);color:var(--on-dark);border-radius:32px;gap:16px;margin:18px 12px 12px;padding:clamp(16px,3vw,36px);display:grid}.stage-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;display:grid}@media (width<=860px){.stage-grid{grid-template-columns:1fr}}.player{aspect-ratio:16/9;background:#000;border-radius:20px;width:100%;overflow:hidden}.player iframe,.player>div{width:100%;height:100%}.stage .play-panel{background:var(--dark-2)}.stage .structure-block{color:var(--on-dark)}.lane{background:var(--dark-2);border-radius:16px;height:96px;position:relative;overflow:hidden}.lane-playhead{background:var(--amber);z-index:2;border-radius:2px;width:3px;position:absolute;top:0;bottom:0;left:50%}.lane-track{will-change:transform;position:absolute;top:0;bottom:0;left:0}.beat-tick{background:var(--dark-line);width:1px;height:10px;position:absolute;bottom:0}.bar-line{background:var(--dark-line);width:1px;position:absolute;top:0;bottom:0}.chip{text-align:left;height:54px;color:var(--on-dark);white-space:nowrap;background:#342c25;border:2px solid #0000;border-radius:10px;align-items:center;padding:0 10px;font-size:1.35rem;font-weight:800;display:flex;position:absolute;top:28px;overflow:hidden}.chip.past{opacity:.45}.chip.active{background:var(--amber);color:var(--ink)}.chip.active .cs-bass{color:#0b4f55}.chip.low{border:2px dashed var(--amber)}.chip.edited{box-shadow:inset 0 -3px 0 var(--blue)}.chip.empty{opacity:.4;border-style:dashed;border-color:var(--muted-dark);color:var(--muted-dark);background:0 0;justify-content:center}.chip.empty:hover{opacity:.8}.section-tag{border:0;border-left:4px solid var(--sec,var(--muted-dark));background:color-mix(in srgb, var(--sec,var(--muted-dark)) 24%, transparent);height:20px;color:var(--on-dark);font:800 11px var(--font);letter-spacing:.03em;text-align:left;white-space:nowrap;text-overflow:ellipsis;border-radius:4px;padding:0 8px;line-height:20px;position:absolute;top:3px;overflow:hidden}.section-tag.guess{border-left-style:dashed}.section-tag[data-kind=intro]{--sec:var(--yellow)}.section-tag[data-kind=verse]{--sec:var(--blue)}.section-tag[data-kind=chorus]{--sec:var(--amber)}.section-tag[data-kind=bridge]{--sec:var(--purple)}.section-tag[data-kind=interlude]{--sec:var(--coral)}.section-tag[data-kind=outro]{--sec:var(--green)}.lane-legend{color:var(--muted-dark);margin:-4px 4px 0;font-size:12px;font-weight:700}.legend-bass{color:var(--bass);font-weight:800}.hide-bass .cs-bass{display:none}.practice{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.practice .pill-btn{background:var(--dark-2)}.practice .pill-btn[aria-pressed=true]{background:var(--amber);color:var(--ink)}.practice-note{color:var(--muted-dark);font-size:12px;font-weight:700}.stage-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px;display:grid}@media (width<=860px){.stage-bottom{grid-template-columns:1fr}}.diagrams,.controls{background:var(--dark-2);border-radius:20px;padding:16px}.tabs{gap:8px;margin-bottom:12px;display:flex}.diagrams .button,.controls .button{color:var(--on-dark);border-color:var(--dark-line)}.diagrams .button[aria-selected=true],.controls .button[aria-pressed=true]{background:var(--amber);color:var(--ink);border-color:var(--amber)}.controls .button.primary{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}.piano .white{fill:var(--on-dark);stroke:var(--dark-line)}.piano .black{fill:#14110d}.piano [data-state=tone]{fill:var(--amber)}.piano [data-state=bass]{fill:var(--bass)}.guitar{width:160px}.guitar line{stroke:var(--muted-dark)}.guitar .fret-dot{fill:var(--amber)}.guitar .open{fill:none;stroke:var(--on-dark)}.guitar text{fill:var(--on-dark);font-size:10px}.controls{letter-spacing:.04em;flex-wrap:wrap;align-items:center;gap:14px 18px;font-size:12px;font-weight:800;display:flex}.control{align-items:center;gap:8px;display:flex}.control output{text-align:center;min-width:2.5ch;font-size:15px;font-weight:900}.controls select{background:var(--dark);border:1px solid var(--dark-line);color:var(--on-dark);border-radius:8px;padding:8px}.controls input[type=checkbox]{accent-color:var(--amber);width:18px;height:18px}.page{gap:16px;max-width:880px;margin:0 auto;padding:36px clamp(16px,4vw,24px) 64px;display:grid}.page h1{font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(48px,9vw,110px);font-weight:900;font-stretch:62%;line-height:.86}.steps{margin:0;padding:0;list-style:none;display:grid}.steps li{border-bottom:2px solid var(--sand);color:var(--muted);padding:14px 4px;font-weight:700}.steps li:last-child{border-bottom:0}.steps li[data-status=done]{text-decoration:line-through}.steps li[data-status=active]{color:var(--ink);font-weight:900}.steps li[data-status=active]:before{content:"● ";color:var(--amber)}progress{width:100%;height:12px;accent-color:var(--amber);border-radius:999px;overflow:hidden}.modal-backdrop{z-index:100;background:#231d17a6;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:var(--paper);width:min(560px,100%);max-height:92vh;color:var(--ink);border:3px solid var(--ink);border-radius:24px;gap:14px;padding:22px;display:grid;overflow:auto}.modal h2{font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:40px;font-weight:900;font-stretch:62%;line-height:1}.modal input[type=text],.modal select{border:2px solid var(--ink);background:var(--paper);border-radius:12px;min-height:40px;padding:0 12px}.formats{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}@media (width<=480px){.formats{grid-template-columns:1fr}}.formats label{border:2px solid var(--sand);cursor:pointer;border-radius:16px;padding:12px;display:block}.formats label:has(input:checked){border-color:var(--ink);background:var(--cream)}.formats .fmt-row{justify-content:space-between;align-items:baseline;font-weight:800;display:flex}.formats .fmt-ext{color:var(--muted);font-family:monospace;font-size:.8rem;font-weight:400}.root-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.root-grid .button{min-height:40px;padding:0}.suggestions{flex-wrap:wrap;gap:8px;display:flex}.suggestions .button{font-size:1.3rem;font-weight:900}.modal .button{border-color:var(--ink);color:var(--ink)}.modal .button.primary,.modal .button[aria-pressed=true]{background:var(--ink);color:var(--cream)}