*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:var(--font-sans); -webkit-font-smoothing: antialiased; font-size:15px; line-height:1.55; transition:background-color var(--motion-med),color var(--motion-med); }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
svg { display:block; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; flex-shrink:0; }
.icon-sm { width:16px; height:16px; }
.icon-lg { width:26px; height:26px; }
.icon-xl { width:32px; height:32px; }
.container { width:min(calc(100% - 72px), var(--container)); margin-inline:auto; }
.section { padding:84px 0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted { color:var(--ink-secondary); }
.fineprint { color:var(--ink-tertiary); font-size:12px; }
.eyebrow { letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-size:12px; font-weight:800; }
.section-heading { margin:0; font-size:clamp(30px,3.1vw,43px); line-height:1.14; letter-spacing:-.045em; font-weight:800; }
.section-subtitle { font-size:16px; color:var(--ink-secondary); max-width:600px; margin:14px auto 0; }
.center { text-align:center; }
.btn { display:inline-flex; justify-content:center; align-items:center; text-align:center; gap:10px; min-height:44px; padding:10px 18px; border-radius:var(--radius-sm); background:transparent; border:1px solid transparent; color:var(--ink); font-size:13px; font-weight:750; transition:background var(--motion-fast),color var(--motion-fast),border var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast); white-space:nowrap; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn:active:not(:disabled) { transform:translateY(0); }
.btn:disabled { cursor:not-allowed; opacity:.45; }
.btn-primary { color:var(--accent-on); background:var(--accent); box-shadow:0 6px 16px rgba(var(--accent-rgb),.17); }
.btn-primary:hover:not(:disabled) { color:var(--accent-on); background:var(--accent-hover); box-shadow:0 8px 22px rgba(var(--accent-rgb),.23); }
.btn-secondary { background:var(--surface); border-color:var(--stroke); box-shadow:var(--shadow-sm); }
.btn-secondary:hover { background:var(--surface-hover); color:var(--ink); border-color:var(--stroke-strong); }
.btn-ghost { color:var(--ink-secondary); }
.btn-ghost:hover { background:var(--surface-hover); color:var(--ink); }
.btn-outline { border-color:var(--stroke-strong); background:transparent; }
.btn-outline:hover { background:var(--surface-hover); }
.btn-lg { min-height:52px; padding:14px 24px; font-size:14px; border-radius:13px; }
.btn-sm { min-height:35px; padding:8px 12px; font-size:12px; }
.btn-full { width:100%; }
.btn-icon { padding:0; width:42px; height:42px; min-height:42px; border-color:var(--stroke); background:var(--surface); border-radius:12px; }
.pill { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; font-size:11px; font-weight:750; border-radius:100px; color:var(--accent); background:var(--accent-soft); }
.pill .icon { width:13px; height:13px; }
.pill-quiet { background:var(--surface-2); color:var(--ink-secondary); border:1px solid var(--stroke); }
.pill-success { background:var(--positive-soft); color:var(--positive); }
.card { background:var(--surface); border:1px solid var(--stroke); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.divider { height:1px; background:var(--stroke); border:0; margin:0; }
.theme-toggle { display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--stroke); padding:4px; border-radius:100px; height:40px; gap:2px; }
.theme-toggle button { width:34px; height:30px; border:0; border-radius:100px; display:grid; place-items:center; color:var(--ink-tertiary); background:transparent; }
.theme-toggle button[aria-pressed="true"] { color:var(--accent); background:var(--surface); box-shadow:var(--shadow-sm); }
.theme-toggle .icon { width:17px; height:17px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:820; font-size:17px; letter-spacing:-.045em; }
.brand-mark { color:var(--accent); width:31px; height:31px; stroke-width:0; }
.site-header { position:sticky; top:0; z-index:100; background:var(--header-bg); border-bottom:1px solid var(--stroke); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.site-header__inner { height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-nav, .header-actions { display:flex; align-items:center; gap:24px; }
.site-nav a { font-size:13px; font-weight:650; color:var(--ink-secondary); }
.site-nav a:hover { color:var(--accent); }
.header-actions { gap:10px; }
.menu-button { display:none; }
.demo-label { font-size:11px; color:var(--ink-tertiary); }
.icon-circle { width:44px; height:44px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); border-radius:13px; }
.icon-circle .icon { width:22px; height:22px; }
.tabs { display:flex; align-items:center; gap:5px; border-bottom:1px solid var(--stroke); }
.tab { background:none; border:0; border-bottom:2px solid transparent; padding:13px 15px; color:var(--ink-secondary); font-size:12px; font-weight:750; margin-bottom:-1px; white-space:nowrap; }
.tab:hover { color:var(--ink); }
.tab[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent); }
.tab-panel[hidden] { display:none; }
.chord-row { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; }
.chord-chip { min-width:0; text-align:center; border:1px solid rgba(var(--accent-rgb),.05); background:var(--accent-soft); color:var(--accent); border-radius:6px; min-height:29px; padding:5px 2px; font-size:11px; font-weight:760; }
.chord-chip:nth-child(4n + 2) { background:var(--surface-2); color:var(--ink-secondary); border-color:var(--stroke); }
.chord-chip:nth-child(4n + 3) { background:rgba(var(--accent-rgb),.12); color:var(--accent); }
.chord-chip:nth-child(4n) { background:var(--surface-2); color:var(--ink); border-color:var(--stroke); }
.chord-chip.is-current { background:var(--accent); color:#fff; box-shadow:0 2px 12px rgba(var(--accent-rgb),.25); }
[data-theme="dark"] .chord-chip:nth-child(4n + 3) { background:rgba(var(--accent-rgb),.16); }
.sheet-line { padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:12px; margin-top:24px; }
.sheet-beat { min-width:0; }
.sheet-beat strong { display:block; color:var(--accent); font-size:13px; margin-bottom:6px; }
.sheet-beat span { color:var(--ink-secondary); font:11px/1.6 var(--font-mono); overflow-wrap:anywhere; }
.sheet-line:first-child { margin-top:14px; }
.waveform { display:flex; align-items:center; height:68px; gap:2px; width:100%; overflow:hidden; padding:0 1px; }
.waveform__bar { display:block; flex:1 1 0; min-width:1px; background:linear-gradient(to top,var(--wave-start),var(--wave-end)); border-radius:4px; opacity:.9; }
.waveform__bar.is-future { background:var(--wave-inactive); opacity:.8; }
.waveform.is-decorative .waveform__bar { opacity:.65; }
.stat { padding:13px; background:var(--surface-2); border:1px solid var(--stroke); border-radius:var(--radius-sm); min-width:0; }
.stat__name { color:var(--ink-tertiary); font-size:10px; font-weight:650; }
.stat__value { display:block; font-size:16px; letter-spacing:-.02em; font-weight:800; line-height:1.35; margin-top:4px; }
.stat__hint { color:var(--ink-tertiary); font-size:10px; }
.upload-zone { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1.5px dashed rgba(var(--accent-rgb),.44); background:linear-gradient(145deg,rgba(var(--accent-rgb),.035),rgba(var(--accent-rgb),.008)); border-radius:16px; padding:22px; min-height:182px; transition:background var(--motion-med),border-color var(--motion-med),transform var(--motion-med); }
.upload-zone.is-dragover { border-color:var(--accent); background:var(--accent-soft); transform:scale(1.01); }
.upload-zone__icon { color:var(--accent); margin-bottom:7px; }
.upload-zone__title { font-weight:750; font-size:15px; }
.upload-zone__caption { font-size:12px; color:var(--ink-tertiary); margin:4px 0 13px; }
.upload-zone__foot { font-size:11px; color:var(--ink-tertiary); margin-top:11px; }
.upload-zone__error { color:var(--danger); font-size:12px; font-weight:650; min-height:0; margin-top:9px; }
.upload-zone__error:empty { display:none; }
.file-ready { background:var(--positive-soft); color:var(--positive); border:1px solid rgba(0,180,120,.2); border-radius:10px; padding:10px 13px; font-size:12px; font-weight:650; overflow-wrap:anywhere; margin-top:12px; }
[data-theme="dark"] .file-ready { border-color:#285347; }
.status { display:flex; align-items:flex-start; gap:12px; background:var(--surface-2); border:1px solid var(--stroke); border-radius:13px; padding:15px; }
.status .icon { flex-shrink:0; color:var(--accent); }
.status__title { font-size:13px; font-weight:750; }
.status__detail { color:var(--ink-secondary); font-size:12px; margin-top:2px; }
.status--success .icon { color:var(--positive); }
.status--warning .icon { color:var(--warning); }
.status--error .icon { color:var(--danger); }
.progress { width:100%; height:6px; background:var(--surface-2); border-radius:100px; overflow:hidden; }
.progress > span { height:100%; display:block; background:var(--accent); border-radius:100px; }
.locked-preview { padding:20px; border:1px dashed var(--stroke-strong); border-radius:var(--radius-md); background:var(--surface-2); overflow:hidden; }
.locked-preview__line { height:11px; margin:12px 0; border-radius:5px; background:linear-gradient(90deg,var(--stroke) 0 17%,transparent 17% 22%,var(--stroke) 22% 68%,transparent 68% 74%,var(--stroke) 74% 95%); opacity:.8; }
.locked-preview__line:nth-child(2) { width:91%; }
.locked-preview__line:nth-child(3) { width:74%; }
.locked-preview__content { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:13px; padding:16px; border:1px solid var(--stroke); border-radius:13px; background:var(--surface); }
.locked-preview__content .icon { color:var(--accent); }
.skeleton { background:linear-gradient(90deg,var(--surface-2),var(--stroke),var(--surface-2)); background-size:220% 100%; animation:shimmer 2s infinite linear; border-radius:6px; }
@keyframes shimmer { to { background-position-x:-220%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media(max-width:920px) { .site-nav { display:none; position:absolute; left:16px; right:16px; top:74px; background:var(--surface); padding:14px; border:1px solid var(--stroke); border-radius:16px; box-shadow:var(--shadow-lg); flex-direction:column; align-items:stretch; gap:5px; } .site-nav.is-open { display:flex; } .site-nav a { padding:11px 12px; } .menu-button { display:grid; place-items:center; } }
@media(max-width:640px) { .container { width:min(calc(100% - 32px),var(--container)); } .section { padding:62px 0; } .site-header__inner { height:66px; } .site-nav { top:66px; } .header-actions > .btn { display:none; } .sheet-beat span { font-size:10px; } .sheet-line { column-gap:7px; } .locked-preview__content { align-items:flex-start; flex-direction:column; } }
.file-ready[hidden] { display:none; }