/* 图鸣 · shared design tokens and components for the product pages (index / feature-music / music-art). */
:root{
  color-scheme:light;
  --bg:#f4f1ea;--surface:#fbfaf6;--surface-2:#efece4;--surface-3:#e6e2d7;
  --ink:#17181a;--ink-2:#3d3f42;--muted:#676a64;--faint:#8d8f88;
  --line:#e0dcd1;--line-strong:#c8c3b6;
  --accent:#f36343;--accent-ink:#c5432a;--accent-soft:#fde3dc;
  --acid:#d7ff48;--acid-ink:#55660f;
  --stage:#141517;--stage-2:#1d1f22;--stage-line:#2c2f33;--stage-text:#e9e7e1;--stage-muted:#9a9c97;
  --radius:16px;--radius-md:12px;--radius-sm:8px;--pill:999px;
  --shadow-sm:0 1px 2px #17181a0f;
  --shadow:0 1px 2px #17181a0d,0 12px 32px -12px #17181a2e;
  --shadow-lg:0 2px 4px #17181a0f,0 32px 64px -24px #17181a47;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:320px;color:var(--ink);background:var(--bg);font:14px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"tnum" 0}
button,input,select{font:inherit;color:inherit}
button,select,label[for],.upload,.import{cursor:pointer}
button:disabled,select:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.upload:focus-within,.import:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Layout shell and header */
.shell{max-width:1440px;margin:auto;padding:0 40px}
.topbar{position:relative;height:72px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:19px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.brand-logo{width:30px;height:30px;flex:none;display:block;border-radius:8px;box-shadow:var(--shadow-sm)}
.brand small{font:500 10px var(--mono);letter-spacing:.16em;color:var(--muted);margin-left:2px}
.site-nav{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:var(--pill);margin-left:12px}
.site-nav a{display:block;padding:6px 14px;border-radius:var(--pill);font-size:13px;text-decoration:none;color:var(--ink-2);transition:background .2s var(--ease),color .2s var(--ease)}
.site-nav a:hover{color:var(--ink);background:var(--surface-3)}
.site-nav a[aria-current=page]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.privacy{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.privacy i{width:8px;height:8px;border-radius:50%;background:#43b05c;box-shadow:0 0 0 3px #43b05c26}

/* Type */
.eyebrow{font:600 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 12px}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:40px 0 32px}
.intro h1{margin:0;font:700 clamp(34px,3.8vw,54px)/1.2 var(--serif);letter-spacing:-.01em}
.intro h1 br{display:none}
.intro h1 em{font-style:normal;color:var(--accent-ink)}

/* Controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease)}
.btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--ink-2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-primary:hover:not(:disabled){background:#2c2e31;border-color:#2c2e31}
.btn .icon,.icon{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
select{appearance:none;-webkit-appearance:none;min-height:38px;padding:0 34px 0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23676a64' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/14px;font-size:13px;color:var(--ink);text-overflow:ellipsis;transition:border-color .15s var(--ease)}
select:hover:not(:disabled){border-color:var(--ink-2)}
input[type=range]{accent-color:var(--accent);cursor:pointer}

/* Switch: any checkbox inside .switch-label renders as a toggle */
.switch-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;user-select:none}
.switch-label input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:32px;height:18px;margin:0;border-radius:var(--pill);background:var(--line-strong);cursor:pointer;transition:background .2s var(--ease)}
.switch-label input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .2s var(--ease)}
.switch-label input[type=checkbox]:checked{background:var(--ink)}
.switch-label input[type=checkbox]:checked::after{transform:translateX(14px)}
.switch-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}

/* Status, toast, footer */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:min(560px,calc(100% - 32px));padding:12px 18px;border-radius:var(--radius-md);background:var(--ink);color:#fff;font-size:13px;line-height:1.6;box-shadow:var(--shadow-lg);z-index:40;animation:toast-in .25s var(--ease)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;opacity:.8}
footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:48px;padding:24px 0 36px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
footer .footer-brand{display:flex;align-items:center;gap:8px;margin-right:auto;color:var(--ink-2)}
footer .footer-brand svg{width:18px;height:18px;border-radius:5px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){.shell{padding:0 24px}.privacy span{display:none}}
@media(max-width:640px){
  .shell{padding:0 16px}
  .topbar{height:60px;gap:12px}
  .brand{font-size:17px}.brand small{display:none}.brand-logo{width:26px;height:26px}
  .site-nav{margin-left:auto}.site-nav a{padding:5px 11px;font-size:12px}
  .privacy{display:none}
  .intro{display:block;padding:28px 0 24px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}