/* ═══════════════════════════════════════════════════════════
   钟鸣 · CAMPANELLA
   蓝印花布的靛青底 / 朱砂只留给简谱与拍点 / 复进弦独用一色青玉
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:      #121A2E;
  --ink-2:    #19233D;
  --ink-3:    #223052;
  --paper:    #EFE9DB;
  --mist:     #8590AC;
  --mist-dim: #5B6786;

  --zhu:      #E1483B;   /* 朱砂：简谱数字、拍点、报错 */
  --jade:     #46C2A2;   /* 青玉：只给第四弦（复进弦） */
  --koa:      #E0A63F;   /* 相思木：其余三弦、旋律音 */

  --line:     rgba(239,233,219,.13);
  --line-2:   rgba(239,233,219,.07);

  --f-disp:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:  'Noto Serif SC', 'Songti SC', 'Source Han Serif SC', serif;
  --f-mono:  'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  --pad: clamp(20px, 5vw, 56px);
  --bar: 60px;              /* topbar 高 */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.mono{ font-family:var(--f-mono); font-variant-ligatures:none; }

.wrap{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

.band{ padding-block:clamp(56px,8vw,104px); }

::selection{ background:var(--zhu); color:#fff; }

:focus-visible{
  outline:2px solid var(--jade);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:99;
  background:var(--jade); color:var(--ink);
  padding:10px 18px; font-weight:700; text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }

/* ── TOPBAR ────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  height:var(--bar);
  background:rgba(18,26,46,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar__in{
  height:100%;
  display:flex; align-items:center; gap:20px;
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand__cn{
  font-family:var(--f-body); font-weight:700;
  font-size:20px; letter-spacing:.22em; padding-left:.22em;
}
.brand__la{
  font-family:var(--f-disp); font-weight:800;
  font-stretch:125%;
  font-size:10px; letter-spacing:.3em;
  color:var(--jade);
}
.brand__job{
  margin:0; flex:1;
  font-size:13px; color:var(--mist);
  border-left:1px solid var(--line); padding-left:20px;
}
.topbar__jump{
  color:var(--paper); text-decoration:none;
  font-size:13px; letter-spacing:.08em;
  border-bottom:1px solid var(--zhu);
  padding-bottom:2px;
}
.topbar__jump:hover{ color:var(--zhu); }

/* ── HERO ──────────────────────────────────────────────── */
.band--hero{
  padding-block:clamp(48px,7vw,92px) clamp(40px,5vw,64px);
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(70,194,162,.10), transparent 62%),
    radial-gradient(90% 70% at 6% 96%, rgba(225,72,59,.07), transparent 60%);
}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}

.eyebrow{
  margin:0 0 22px;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.26em;
  color:var(--mist);
  text-transform:uppercase;
}

.hero__h1{
  margin:0 0 24px;
  font-family:var(--f-body);
  font-weight:700;
  font-size:clamp(44px,7.2vw,88px);
  line-height:1.06;
  letter-spacing:.06em;
  text-indent:.06em;
}

.lede{
  margin:0 0 30px;
  max-width:52ch;
  font-size:clamp(14.5px,1.15vw,16.5px);
  color:#CFD4E2;
}
.lede b{ font-weight:700; }
.hl-jade{ color:var(--jade); }

.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; }

/* 复进弦图 */
.reent{
  margin:0;
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:clamp(18px,2.6vw,30px);
}
.reent__plot{ width:100%; }
.reent__plot svg{ display:block; width:100%; height:auto; overflow:visible; }
.reent__cap{
  margin:18px 0 0; padding-top:16px;
  border-top:1px solid var(--line-2);
  font-size:13px; line-height:1.7; color:var(--mist);
}

/* ── 走带 + 指板 ───────────────────────────────────────── */
.transport{
  display:flex; align-items:center; gap:clamp(12px,1.8vw,26px);
  flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid var(--line-2);
}
.transport__pos{
  margin:0 0 0 auto;
  font-size:12px; letter-spacing:.1em; color:var(--mist);
}

.board{
  background:var(--ink-2);
  border:1px solid var(--line);
  margin-bottom:16px;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--mist-dim) transparent;
}
.board svg{ display:block; width:100%; height:auto; overflow:visible; }

/* 演奏键 */
.play{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--zhu); color:#fff;
  border:none; cursor:pointer;
  padding:11px 22px 11px 18px;
  font-family:var(--f-body); font-size:15px; font-weight:500;
  letter-spacing:.14em; text-indent:.14em;
  transition:background .16s, transform .16s;
}
.play:hover{ background:#F05A4C; }
.play:active{ transform:translateY(1px); }
.play__ico{
  width:0; height:0;
  border-left:11px solid currentColor;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
.play.is-on .play__ico{
  width:11px; height:13px; border:none;
  background:currentColor;
  box-shadow:inset 3.5px 0 0 var(--zhu), inset -3.5px 0 0 var(--zhu);
}

/* ── 控件 ──────────────────────────────────────────────── */
.ctl{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.ctl__k{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.2em; color:var(--mist); white-space:nowrap;
}
.ctl__v{ font-size:12px; color:var(--koa); min-width:5.5em; }

.ctl--range input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:clamp(90px,13vw,168px); height:2px;
  background:var(--line); outline-offset:8px;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; border-radius:50%;
  background:var(--koa); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:13px; height:13px; border:none; border-radius:50%;
  background:var(--koa); cursor:pointer;
}

.sw{ position:absolute; opacity:0; width:0; height:0; }
.sw__box{
  width:34px; height:18px; border-radius:9px;
  background:var(--ink-3); border:1px solid var(--line);
  position:relative; transition:background .18s;
}
.sw__box::after{
  content:''; position:absolute; left:2px; top:2px;
  width:12px; height:12px; border-radius:50%;
  background:var(--mist); transition:transform .18s, background .18s;
}
.sw:checked + .sw__box{ background:rgba(70,194,162,.22); border-color:var(--jade); }
.sw:checked + .sw__box::after{ transform:translateX(16px); background:var(--jade); }
.sw:focus-visible + .sw__box{ outline:2px solid var(--jade); outline-offset:3px; }

.sel{
  background:var(--ink); color:var(--paper);
  border:1px solid var(--line);
  padding:7px 10px; font-size:13px;
  cursor:pointer;
}
.sel:hover{ border-color:var(--mist-dim); }

/* ── 按钮 ──────────────────────────────────────────────── */
.btn{
  display:inline-block;
  background:transparent; color:var(--paper);
  border:1px solid var(--line);
  padding:11px 20px;
  font-family:var(--f-body); font-size:14px;
  letter-spacing:.1em; text-indent:.1em;
  cursor:pointer;
  transition:border-color .16s, color .16s, background .16s;
}
.btn:hover{ border-color:var(--koa); color:var(--koa); }
.btn--solid{
  background:var(--paper); color:var(--ink);
  border-color:var(--paper); font-weight:500;
}
.btn--solid:hover{ background:var(--koa); border-color:var(--koa); color:var(--ink); }
.btn--sm{ padding:6px 13px; font-size:12.5px; }

.chip{
  display:inline-block;
  font-size:11px; letter-spacing:.14em; color:var(--mist);
  border:1px solid var(--line); padding:5px 11px;
}

/* ── WORKBENCH ─────────────────────────────────────────── */
.work{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(24px,3.4vw,52px);
  align-items:start;
}
.panel{ min-width:0; }
.panel__head{
  display:flex; align-items:center; gap:16px;
  padding-bottom:14px; margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.panel__t{
  margin:0; flex:1;
  font-family:var(--f-body); font-weight:700;
  font-size:19px; letter-spacing:.2em; text-indent:.2em;
}
.panel__acts{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* 编辑器 */
.editor{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line);
  transition:border-color .18s;
}
.editor:focus-within{ border-color:var(--zhu); }
.editor__ta{
  display:block; width:100%;
  min-height:300px; resize:vertical;
  background:transparent; border:none; outline:none;
  color:var(--zhu);
  padding:20px 22px;
  font-size:16.5px; line-height:2.1; letter-spacing:.07em;
  caret-color:var(--paper);
}
.editor__ta::placeholder{ color:var(--mist-dim); }

.msg{
  margin:12px 0 26px;
  min-height:1.7em;
  font-size:13px; line-height:1.7; color:var(--mist);
}
.msg.is-bad{ color:var(--zhu); }
.msg.is-ok{ color:var(--jade); }

.setrow{
  display:flex; flex-wrap:wrap; gap:16px 26px;
  padding-bottom:24px; margin-bottom:24px;
  border-bottom:1px solid var(--line-2);
}

/* 编排方式 */
.styles{ border:none; margin:0; padding:0; }
.styles legend{ padding:0; margin-bottom:14px; }
.styles__row{ display:grid; gap:9px; }
.sty{ display:block; cursor:pointer; }
.sty input{ position:absolute; opacity:0; width:0; height:0; }
.sty__box{
  display:block;
  border:1px solid var(--line);
  border-left:2px solid var(--line);
  padding:13px 17px;
  transition:border-color .16s, background .16s;
}
.sty:hover .sty__box{ border-color:var(--mist-dim); }
.sty input:checked + .sty__box{
  border-color:var(--line);
  border-left-color:var(--jade);
  background:var(--ink-2);
}
.sty input:focus-visible + .sty__box{ outline:2px solid var(--jade); outline-offset:2px; }
.sty__n{
  display:block; font-size:15px; font-weight:700;
  letter-spacing:.18em; margin-bottom:3px;
}
.sty input:checked + .sty__box .sty__n{ color:var(--jade); }
.sty__d{ display:block; font-size:12.5px; line-height:1.6; color:var(--mist); }

/* ── TAB ───────────────────────────────────────────────── */
.tabwrap{
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--line);
  min-height:180px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--mist-dim) transparent;
}
.tabwrap::-webkit-scrollbar{ height:8px; }
.tabwrap::-webkit-scrollbar-thumb{ background:var(--mist-dim); }
.tabwrap::-webkit-scrollbar-track{ background:transparent; }

.tab{ position:relative; height:180px; }
.tab svg{ display:block; height:180px; overflow:visible; }

/* 全谱视图：按小节折行纵排，字号不变，一次看全 */
.tabwrap.is-full{ overflow-x:hidden; overflow-y:auto; }
.tabwrap.is-full .tab{ height:auto; }
.tabwrap.is-full .tab svg{ width:100%; height:auto; }

.empty{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none; padding:24px; text-align:center;
}
.empty p{ margin:0; color:var(--mist); font-size:14px; }
.empty[hidden]{ display:none; }

/* ── 共鸣带（签名元素）───────────────────────────────────── */
.ring{ margin-top:26px; }
.ring__head{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:12px;
}
.ring__t{
  margin:0;
  font-size:14px; font-weight:700;
  letter-spacing:.24em; text-indent:.24em;
}
.ring__cap{
  margin:0 0 0 auto;
  font-size:11.5px; letter-spacing:.1em; color:var(--koa);
}
.ring__plot{
  background:var(--ink-2);
  border:1px solid var(--line);
  overflow:hidden;
}
.ring__plot svg{ display:block; width:100%; height:auto; }
.ring__note{
  margin:11px 0 0;
  font-size:12.5px; line-height:1.7; color:var(--mist);
  max-width:60ch;
}

/* ── 记谱法 ────────────────────────────────────────────── */
.band--ref{ border-top:1px solid var(--line); }
.ref{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.ref__t{
  margin:0 0 16px;
  font-size:clamp(24px,3vw,34px); font-weight:700;
  letter-spacing:.1em; text-indent:.1em;
}
.ref__p{ margin:0 0 24px; color:var(--mist); font-size:14.5px; max-width:34ch; }
.ref__p code{
  color:var(--zhu); background:var(--ink-2);
  padding:1px 6px; font-size:13px;
}
.ref__demos{ display:flex; flex-wrap:wrap; gap:8px; }

.syn{
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.syn__i{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 4px;
  border-bottom:1px solid var(--line-2);
}
.syn__i dt{
  color:var(--zhu); font-size:14px;
  min-width:5.6em; letter-spacing:.06em;
}
.syn__i dd{ margin:0; font-size:13px; color:var(--mist); }

/* ── FOOT ──────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); padding-block:28px; }
.foot__in{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  align-items:baseline;
}
.foot__l{ margin:0; font-size:13px; color:var(--mist); }
.foot__r{ margin:0 0 0 auto; font-size:11px; letter-spacing:.1em; color:var(--mist-dim); }

/* ── 响应式 ────────────────────────────────────────────── */
@media (max-width:1080px){
  .work{ grid-template-columns:1fr; }
  .ref{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  :root{ --bar:54px; }
  .hero{ grid-template-columns:1fr; }
  .brand__job{ display:none; }
  .board svg{ min-width:620px; }
  .transport{ gap:14px; }
  .transport__pos{ margin-left:0; width:100%; }
  .syn{ grid-template-columns:1fr; }
}

@media (max-width:520px){
  .hero__h1{ letter-spacing:.03em; text-indent:.03em; }
  .editor__ta{ font-size:15.5px; padding:16px; }
  .panel__head{ flex-wrap:wrap; }
  .play{ flex:1; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}