/* 刻声 · 设计冻结 v0（docs/DESIGN-FREEZE-v0.md）。颜色只来自这 5 个值。 */
@font-face {
  font-family: "KS Fangsong";
  src: url("fonts/ks-fangsong-subset.woff2") format("woff2");
  font-display: swap;
}

:root {
  --alu: #D3D7DA;       /* 冷铝 */
  --ink: #24304A;       /* 石墨蓝 */
  --lathe: #515C6A;     /* 车床灰 */
  --paper: #F2F4F3;     /* 档案白 */
  --scope: #E6BE3A;     /* 示波黄：只给针下高亮与“正在录” */

  --fang: "KS Fangsong", "Zhuque Fangsong (technical preview)", "FangSong", "STFangsong", "Noto Serif CJK SC", serif;
  --hei: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif;

  /* 字号阶梯 14 / 16 / 21 / 36 / 56 */
  --fs-s: 0.875rem;
  --fs-b: 1rem;
  --fs-m: 1.3125rem;
  --fs-l: 2.25rem;
  --fs-xl: 3.5rem;
  --u: 8px;
}

* { box-sizing: border-box; }

html { background: var(--alu); color: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  font: 400 var(--fs-b)/1.6 var(--hei);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

/* —— 顶栏 —— */
.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: calc(var(--u) * 3) calc(var(--u) * 5) 0;
}
.mark {
  font: 400 var(--fs-m)/1 var(--fang);
  letter-spacing: 0.32em;
  color: var(--ink);
  text-decoration: none;
}
.bar-note { margin: 0; color: var(--lathe); font-size: var(--fs-s); }
.bar-end { display: flex; align-items: baseline; gap: calc(var(--u) * 3); }
.bar-link {
  color: var(--ink);
  font: 400 var(--fs-b)/1 var(--fang);
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 1px solid var(--lathe);
  padding-bottom: 2px;
}
.bar-link:hover { border-bottom-color: var(--ink); }

/* —— 舞台：左档案签，右刻盘 —— */
.stage {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: calc(var(--u) * 6);
  align-items: start;
  padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 8);
  max-width: 1440px;
  margin: 0 auto;
}

.desk { display: grid; gap: calc(var(--u) * 3); padding-top: calc(var(--u) * 4); }

/* 档案签 */
.tag {
  background: var(--paper);
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 2.5);
  border-radius: 2px;
}
.tag-no { margin: 0; font: var(--fs-s)/1.4 var(--fang); color: var(--lathe); letter-spacing: 0.08em; }
.place {
  margin: calc(var(--u) * 0.5) 0 calc(var(--u) * 1);
  font: 400 var(--fs-xl)/1.1 var(--fang);
  letter-spacing: 0.04em;
  text-wrap: balance;
}
.meta { margin: 0; font: var(--fs-m)/1.55 var(--fang); max-width: 30ch; }
.hint { margin: calc(var(--u) * 1.5) 0 0; color: var(--lathe); font-size: var(--fs-s); max-width: 34ch; }

/* 控件 */
.controls { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); }
.btn {
  appearance: none;
  font: 500 var(--fs-b)/1 var(--hei);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--lathe);
  border-radius: 6px;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.25);
  min-height: 44px;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease-out;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { color: var(--lathe); border-style: dashed; cursor: not-allowed; }
.btn[aria-pressed="true"] { background: var(--alu); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { background: #fff; }
  .btn-rec:not(:disabled):hover, .btn-primary:not(:disabled):hover { background: #2E3C5C; }
}

.btn-rec, .btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-rec { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.25); min-width: 10.5em; }
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: transparent; border: 2px solid var(--paper);
}
.btn-rec.is-rec .rec-dot { background: var(--scope); border-color: var(--scope); animation: rec 1s ease-in-out infinite; }
@keyframes rec { 50% { opacity: 0.35; } }

.note { margin: calc(var(--u) * -1.5) 0 0; font-size: var(--fs-s); color: var(--lathe); }

/* 声场选择 */
.rooms { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u) * 2.5); }
.rooms legend { font-size: var(--fs-s); color: var(--lathe); margin-bottom: var(--u); padding: 0; }
.rooms label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 32px; }
.rooms input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.rooms input:disabled + * , .rooms label:has(input:disabled) { color: var(--lathe); cursor: not-allowed; }

/* 衰减曲线 */
.decay { display: grid; gap: var(--u); }
.decay[hidden] { display: none; }
.decay-read { margin: 0; font: var(--fs-m)/1.4 var(--fang); }
.decay-plot { width: 100%; max-width: 380px; height: auto; overflow: visible; }
.decay-plot .axis { stroke: var(--lathe); stroke-width: 1; fill: none; }
.decay-plot .edc { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linejoin: round; }
.decay-plot .fit { stroke: var(--lathe); stroke-width: 1.25; stroke-dasharray: 4 3; fill: none; }
.decay-plot text { fill: var(--lathe); font: 11px var(--hei); }

.status { margin: 0; min-height: 1.6em; font-weight: 500; }
.status button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0 0 0 0.5em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 声片柜 */
.shelf h2 { margin: 0 0 var(--u); font: 400 var(--fs-m)/1.3 var(--fang); }
.shelf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(81, 92, 106, 0.45); }
.shelf-list li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--u);
  border-bottom: 1px solid rgba(81, 92, 106, 0.45);
  padding: var(--u) 0;
}
.shelf-list .load {
  appearance: none; border: 0; background: none; text-align: left; padding: 4px 0; cursor: pointer; color: var(--ink);
  display: grid; gap: 2px;
}
.shelf-list .load .p { font: var(--fs-b)/1.3 var(--fang); }
.shelf-list .load .n { font-size: 12px; color: var(--lathe); }
.shelf-list li[aria-current="true"] .load .p { text-decoration: underline; text-underline-offset: 4px; }
.shelf-list .mini {
  appearance: none; border: 0; background: none; color: var(--lathe); font: var(--fs-s) var(--hei);
  padding: 8px 6px; cursor: pointer;
}
.shelf-list .mini:hover { color: var(--ink); }
.shelf-tools { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.5); margin-top: var(--u); }
.shelf-tools .mini {
  appearance: none; border: 1px solid rgba(81, 92, 106, 0.45); background: none; color: var(--lathe);
  font: var(--fs-s) var(--hei); padding: 6px 10px; cursor: pointer;
}
.shelf-tools .mini:hover { color: var(--ink); border-color: var(--ink); }
.shelf-tools .mini:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.source-switch { display: flex; gap: calc(var(--u) * 0.5); margin-bottom: calc(var(--u) * 0.5); }
.source-switch .mini {
  appearance: none; border: 1px solid transparent; background: none; color: var(--lathe);
  font: var(--fs-s) var(--hei); padding: 6px 10px; cursor: pointer;
}
.source-switch .mini[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.source-switch .mini:disabled { opacity: 0.45; cursor: not-allowed; }
.shelf-empty { color: var(--lathe); font-size: var(--fs-s); padding: var(--u) 0; }

/* —— 刻盘 —— */
.turntable {
  --S: min(72vh, 40vw, 680px);
  position: relative;
  height: var(--S);
  margin-top: calc(var(--u) * 2);
}
.sleeve {
  position: absolute;
  right: 0; top: 0;
  width: var(--S); height: var(--S);
  background: var(--paper);
  border-radius: 2px;
  padding: calc(var(--u) * 4);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.sleeve-title { margin: 0; font: var(--fs-l)/1.2 var(--fang); letter-spacing: 0.2em; writing-mode: vertical-rl; position: absolute; top: calc(var(--u) * 4); right: calc(var(--u) * 4); }
.sleeve-sub { margin: 0; font: var(--fs-s)/1.5 var(--fang); color: var(--lathe); max-width: 12em; text-align: right; }

.platter {
  position: absolute;
  top: 0;
  right: calc(var(--S) * 0.42);
  width: var(--S); height: var(--S);
  animation: slide-out 640ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
}
@keyframes slide-out { from { transform: translateX(38%); } to { transform: none; } }

.disc {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%;
  touch-action: none;
  cursor: grab;
  background: var(--alu);
}
.disc:active { cursor: grabbing; }
.disc:focus-visible { outline-offset: 6px; }

.label {
  position: absolute;
  left: 50%; top: 50%;
  width: 28%; height: 28%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  text-align: center;
  overflow: hidden;
  pointer-events: none;
}
.label::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--ink);
}
.label-place { align-self: end; font: clamp(12px, 1.4vw, 18px)/1.2 var(--fang); margin-bottom: 14%; max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-no { align-self: start; font: clamp(10px, 0.9vw, 12px)/1.2 var(--fang); color: var(--lathe); margin-top: 14%; white-space: nowrap; }

.rail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rail-line { stroke: var(--lathe); stroke-width: 0.008; }
.rail .tick { stroke: var(--lathe); stroke-width: 0.006; }
.rail .tick-label { fill: var(--lathe); font: 0.042px var(--hei); }
.carriage rect { fill: var(--ink); }
.carriage .tip { fill: var(--ink); }
.carriage.is-cutting .tip { fill: var(--scope); }

/* —— 归档对话框 —— */
.save {
  border: 0; border-radius: 4px; padding: calc(var(--u) * 4); background: var(--paper); color: var(--ink);
  width: min(92vw, 420px);
}
.save::backdrop { background: rgba(36, 48, 74, 0.35); }
.save h2 { margin: 0 0 calc(var(--u) * 2); font: 400 var(--fs-l)/1.2 var(--fang); }
.save form { display: grid; gap: calc(var(--u) * 2); }
.save label { display: grid; gap: 6px; font-size: var(--fs-s); color: var(--lathe); }
.save input, .save select {
  font: var(--fs-m)/1.3 var(--fang); color: var(--ink); background: #fff; border: 1px solid var(--lathe);
  border-radius: 4px; padding: 10px 12px; min-height: 44px;
}
.save-actions { display: flex; justify-content: flex-end; gap: calc(var(--u) * 1.5); margin-top: var(--u); }

/* —— 窄屏：盘在上，档案签在下 —— */
@media (max-width: 960px) {
  .bar { padding: calc(var(--u) * 2) calc(var(--u) * 2.5) 0; }
  .stage { grid-template-columns: 1fr; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 2.5) calc(var(--u) * 6); }
  .turntable { order: -1; --S: min(92vw, 560px); width: var(--S); margin: 0 auto; }
  .platter { right: 0; }
  .sleeve { display: none; }
  .desk { padding-top: 0; }
  .place { font-size: var(--fs-l); }
  .label-place { font-size: 13px; }
  .label-no { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .platter { animation: none; }
  .btn { transition: none; }
  .btn-rec.is-rec .rec-dot { animation: none; }
}

/* ======================================================================================
   第三轮 · 视觉线 · 主页「声片柜」装帧（接第 1、2 轮的 plan3d.css，同一套语言）
   主张：封套是一件被认真印出来的物件。桌面是各季一种纸材；内页和封套是卡纸；
        封套有色脊、压痕环、环排小字、盲压银杏叶、印刷标记；盘压在封套上，带一道唱片反光。
   取色全部来自参考图取样（tokens.json）；红只给录音钮的点（校庆层除外：整面红纸）。
   ====================================================================================== */
:root {
  --desk: #E69507;            /* 桌面底色：秋=银杏黄（autumn_03） */
  --spine: #005BAC;           /* 封套色脊：北航蓝（VI 手册 PANTONE 2935 C） */
  --on-spine: #F4EFE3;
  --on-desk: #151C2C;         /* 桌面上的字：压深的石墨蓝 */
  --sheet: #F4EFE3;           /* 内页/封套的纸 */
  --acc: #E69507;
  --acc-line: #8F5A00;
  --rec: #DD1809;             /* 取样自 buaa-ref-autumn_01.jpg 门廊红条，非官方色 */
  /* 色标条：五个季节层的桌面色，按顺序印在色脊上 */
  --c-spring: #BD8D89; --c-summer: #82971B; --c-autumn: #E69507; --c-winter: #92A4C1; --c-event: #DD1809;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --stock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .08  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");         /* 桌面纸材：秋=牛皮麻面 */
  --stock-size: 120px;
}
:root[data-theme-season="spring"] {
  --desk: #BD8D89; --spine: #7D7645; --on-spine: #F4EFE3; --acc: #DAB8B6; --acc-line: #8C5A60;
  --stock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .64' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .96  0 0 0 0 .92  .75 0 0 0 -.27'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"); --stock-size: 200px 150px;   /* 宣纸：横向长纤维 */
}
:root[data-theme-season="summer"] {
  --desk: #82971B; --spine: #54BDEA; --on-spine: #151C2C; --acc: #799317; --acc-line: #566B10;
  --stock: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(20,30,5,.07) 0 1px, transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .16  0 0 0 0 .02  0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");  /* 布纹纸：经纬线 */
  --stock-size: auto;
}
:root[data-theme-season="winter"] {
  --desk: #92A4C1; --spine: #CEAA1D; --on-spine: #151C2C; --sheet: #EEF3FA; --acc: #CEAA1D; --acc-line: #7A6200;
  --stock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 11 -8.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 11 -8.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"); --stock-size: 170px, 260px;   /* 珠光纸上落着稀疏的雪点 */
}
:root[data-theme-event="anniversary-74"] {
  --desk: #DD1809; --spine: #005BAC; --on-spine: #F4EFE3; --on-desk: #FFFBF2; --sheet: #F5F2EB; --acc: #DD1809; --acc-line: #B50F06;
  --stock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .08  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"); --stock-size: 120px;
}

/* html 不画底，body 的底色和纸材才会上提到整张画布；校庆层的刻纹伪元素才压得在它上面 */
html { background: none; }
body { background-color: var(--desk); background-image: var(--stock); background-size: var(--stock-size); }

/* 校庆层是一块红纸：纸面上压着一张放大的唱片刻纹，真盘就躺在它上面（压印，不是印刷） */
:root[data-theme-event="anniversary-74"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 58% 52%, rgba(90, 0, 0, 0.28) 0 1px, rgba(255, 190, 170, 0.16) 1px 2px, transparent 2px 7px);
  -webkit-mask-image: radial-gradient(circle at 58% 52%, #000 0 40%, transparent 92%);
  mask-image: radial-gradient(circle at 58% 52%, #000 0 40%, transparent 92%);
}

/* 顶栏：字直接落在桌面上 */
.bar { padding-top: calc(var(--u) * 3.5); }
.mark, .bar-link { color: var(--on-desk); }
.mark { font-size: 1.5rem; letter-spacing: 0.36em; }
.bar-link { border-bottom-color: currentColor; }
.bar-note { color: var(--on-desk); }
:focus-visible { outline-color: var(--on-desk); }
.desk :focus-visible, .save :focus-visible { outline-color: var(--ink); }

/* 版面：左边抽出来的内页，右边是封套和盘 */
.stage {
  --S: min(78vh, 43vw, 720px);
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: calc(var(--u) * 6);
  align-items: start;
  padding-top: calc(var(--u) * 3);
}
.desk {
  min-height: var(--S);
  align-content: start;
  gap: calc(var(--u) * 2.5);
  padding: calc(var(--u) * 4) calc(var(--u) * 3.5) calc(var(--u) * 3);
  margin-top: calc(var(--u) * 2);
  background: var(--paper-grain), var(--sheet);
  border-radius: 2px;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(36, 48, 74, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 22px 46px -14px rgba(36, 48, 74, 0.5);
}
.tag { background: none; padding: 0; border-radius: 0; }
.place { font-size: 2.75rem; letter-spacing: 0.05em; }
.tag::after {
  content: ""; display: block; height: 6px; margin-top: 18px;
  background:
    linear-gradient(var(--acc-line), var(--acc-line)) 0 0 / 56px 3px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 5px / 100% 1px no-repeat;
}
.btn { background: color-mix(in srgb, var(--sheet) 70%, #fff); }
.btn-rec, .btn-primary { background: var(--ink); }
/* 全屏唯一的红：录音钮的点 */
.btn-rec .rec-dot { background: var(--rec); border-color: var(--rec); }
.btn-rec.is-rec .rec-dot { background: var(--scope); border-color: var(--scope); }
.rooms, .shelf { margin-top: 0; }
.shelf .note { margin-top: calc(var(--u) * 1.5); }
/* 盘跟着视口走：内页再长（柜子里盘多）盘也不会被挤到折线以下 */
.turntable { align-self: start; position: sticky; top: max(16px, calc((100vh - var(--S)) / 2)); margin-top: calc(var(--u) * 10); }

/* 封套：卡纸厚度（右、下各一道亮边）+ 压痕环 + 色脊 */
.sleeve {
  right: 0; top: 0;
  width: var(--S); height: var(--S);
  border-radius: 2px;
  background:
    /* 压痕环：盘装在封套里时留下的圆，露出的只有盘右侧那一弯 */
    radial-gradient(circle calc(var(--S) * 0.468) at 50% 50%, rgba(255,255,255,.34) 0 calc(var(--S) * 0.462), rgba(36,48,74,.10) calc(var(--S) * 0.468), transparent calc(var(--S) * 0.476)),
    var(--paper-grain), var(--sheet);
  box-shadow:
    inset 0 0 0 1px rgba(36, 48, 74, 0.08),
    1px 1px 0 #fff, 3px 3px 0 color-mix(in srgb, var(--sheet) 82%, #6a5a3a), 4px 4px 0 rgba(36, 48, 74, 0.14),
    0 30px 50px -16px rgba(36, 48, 74, 0.5);
  padding: 0;
  overflow: hidden;
}
/* 色脊：右缘整条，像封套的折边 */
.sleeve::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--S) * 0.1); z-index: 1;
  background: var(--paper-grain), var(--spine);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(0,0,0,.06);
  transform-origin: top;
}
.sleeve-title {
  position: absolute; z-index: 2;
  top: calc(var(--S) * 0.27); right: calc(var(--S) * 0.1 + var(--S) * 0.06);
  font-size: calc(var(--S) * 0.09); letter-spacing: 0.22em; line-height: 1;
}
.sleeve-print { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: hidden; }
/* 盲压：一亮一暗两道偏移，面与纸同色，读作压出来的浮雕；脉络是浅压线 */
.emboss .e-hi { fill: #fff; fill-opacity: 0.85; }
.emboss .e-lo { fill: var(--ink); fill-opacity: 0.30; }
.emboss .e-face { fill: color-mix(in srgb, var(--sheet) 92%, #fff); }
.emboss .e-vein { fill: none; stroke: var(--ink); stroke-opacity: 0.10; stroke-width: 0.35; }
/* 环排小字：墨色细字，跟着压痕环走 */
.ring-text { font-family: var(--fang); font-size: 24px; letter-spacing: 8px; fill: var(--ink); }
/* 印刷标记：色标条取五个季节层的桌面色；套准十字用脊上的对比色 */
.marks .bar { stroke: rgba(0,0,0,.12); stroke-width: 1; }
.marks .c-spring { fill: var(--c-spring); } .marks .c-summer { fill: var(--c-summer); } .marks .c-autumn { fill: var(--c-autumn); }
.marks .c-winter { fill: var(--c-winter); } .marks .c-event { fill: var(--c-event); }
.marks .reg { fill: none; stroke: var(--on-spine); stroke-width: 1.4; opacity: 0.9; }

/* 盘压在封套上：圆影 + 一道唱片反光（相对光源固定，盘转它不转；两道对角的宽楔，不是光晕） */
.disc { box-shadow: 0 18px 34px -6px rgba(36, 48, 74, 0.55), 0 2px 0 rgba(255,255,255,.4) inset; }
.platter::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(from 28deg, transparent 0 6%, rgba(255,255,255,.34) 11%, transparent 17% 50%, rgba(255,255,255,.26) 61%, transparent 67%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 15%, #000 16% 97%, transparent 100%);
  mask-image: radial-gradient(circle, transparent 0 15%, #000 16% 97%, transparent 100%);
}
.label, .rail { z-index: 2; }

/* 进场次序：封套落下 → 色脊印上 → 内页盖章 → 盘抽出来 → 控件依次出现（时长与触发见 tokens.motion） */
@media (prefers-reduced-motion: no-preference) {
  .sleeve { animation: sleeve-in 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .sleeve::after { animation: spine-ink 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 220ms both; }
  .platter { animation: slide-out 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 460ms both; }
  .desk { animation: sheet-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both; }
  .controls .btn { animation: rise 320ms ease-out both; }
  .controls .btn:nth-child(1) { animation-delay: 520ms; }
  .controls .btn:nth-child(2) { animation-delay: 580ms; }
  .controls .btn:nth-child(3) { animation-delay: 640ms; }
  .controls .btn:nth-child(4) { animation-delay: 700ms; }
}
@keyframes sleeve-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spine-ink { from { transform: scaleY(0); } to { transform: none; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px) scale(1.012); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 归档弹窗：和内页同一张纸，标题下压双线，遮罩是暖色 */
.save {
  background: var(--paper-grain), var(--sheet);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(36, 48, 74, 0.08), 0 30px 70px -10px rgba(36, 48, 74, 0.55);
}
.save::backdrop { background: rgba(60, 50, 36, 0.62); }
.save h2 {
  padding-bottom: 14px;
  background: linear-gradient(var(--acc-line), var(--acc-line)) 0 100% / 56px 3px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 calc(100% - 2px) / 100% 1px no-repeat;
}
.save input, .save select { border-radius: 2px; background: color-mix(in srgb, var(--sheet) 55%, #fff); }
/* 声片柜条目：点线分隔，当前盘左边压一道色脊 */
.shelf-list li[aria-current="true"] { box-shadow: inset 3px 0 0 var(--spine); padding-left: 8px; }
.shelf-list { border-top-color: var(--ink); }
.shelf-list li { border-bottom-style: dotted; }

@media (max-width: 960px) {
  /* 窄屏：盘在上，内页在下；盘缩到 86%，让封套的色脊从右边露出一条 */
  .stage { --S: min(92vw, 560px); grid-template-columns: 1fr; gap: calc(var(--u) * 2.5); }
  .turntable { order: -1; width: var(--S); margin: 0 auto; align-self: start; position: relative; top: 0; }
  .desk { min-height: 0; margin-top: 0; }
  .sleeve-title, .sleeve-print { display: none; }
  .sleeve { display: block; }
  .platter { right: calc(var(--S) * 0.14); width: calc(var(--S) * 0.86); height: calc(var(--S) * 0.86); top: calc(var(--S) * 0.07); }
  .place { font-size: var(--fs-l); }
}

/* ======================================================================================
   A 轨 · 主页深色版：同一套封套语言，换成深色皮桌面 + 黑卡封套 + 暖光。
   光从左上来；桌面有光池，纸压在桌上，落叶 / 花瓣 / 霜躺在桌面上、探出纸边。
   ====================================================================================== */
:root {
  --desk: #1D140B;                /* 深色皮桌面（秋）：暖黑 */
  --on-desk: #E8DFC8;
  --leaf: #E69507;
  --sleeve-ink: #12161D;          /* 黑卡封套 */
  --sleeve-fg: #E9E0CA;
  --pool: rgba(255, 206, 140, 0.20);
}
:root[data-theme-season="spring"] { --desk: #131D1A; --leaf: #DAB8B6; --pool: rgba(236, 190, 196, 0.14); }
:root[data-theme-season="summer"] { --desk: #121C12; --leaf: #82971B; --pool: rgba(190, 220, 140, 0.14); }
:root[data-theme-season="winter"] { --desk: #0F1726; --leaf: #CEAA1D; --pool: rgba(170, 196, 240, 0.16); }
:root[data-theme-event="anniversary-74"] { --desk: #2A0B08; --on-desk: #FFE9DC; --pool: rgba(255, 120, 90, 0.20); }

html { background: none; }
body {
  background-color: var(--desk);
  background-image: radial-gradient(120% 90% at 16% 6%, var(--pool), transparent 58%), radial-gradient(90% 80% at 100% 100%, rgba(0, 0, 0, 0.55), transparent 60%), var(--stock);
  background-size: auto, auto, var(--stock-size);
}
:root[data-theme-season="winter"] body { background-image: radial-gradient(120% 90% at 16% 6%, var(--pool), transparent 58%), radial-gradient(90% 80% at 100% 100%, rgba(0, 0, 0, 0.55), transparent 60%), var(--stock); }
/* 校庆：深红皮面上压着放大的唱片刻纹，周期 12px（不靠降对比压“振”） */
:root[data-theme-event="anniversary-74"] body::before {
  background: repeating-radial-gradient(circle at 58% 52%, rgba(0, 0, 0, 0.55) 0 1px, rgba(255, 170, 150, 0.16) 1px 2px, transparent 2px 12px);
  -webkit-mask-image: radial-gradient(circle at 58% 52%, #000 0 36%, transparent 86%);
  mask-image: radial-gradient(circle at 58% 52%, #000 0 36%, transparent 86%);
}

.stage { position: relative; z-index: 1; }
.bar { position: relative; z-index: 1; }

/* 桌面物件：压在纸下面（z-index 0），探出纸边；大的前景几片虚化 */
.props { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.props-defs { position: absolute; width: 0; height: 0; }
.prop { position: absolute; display: none; fill: var(--leaf); }
:root .leaf, :root[data-theme-season="autumn"] .leaf, :root[data-theme-season="summer"] .leaf { display: block; }
:root[data-theme-season="spring"] .leaf, :root[data-theme-season="winter"] .leaf, :root[data-theme-event="anniversary-74"] .prop { display: none; }
:root[data-theme-season="spring"] .petal { display: block; }
:root[data-theme-season="summer"] .leaf { fill: #82971B; }
.prop { filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.55)); opacity: 0.94; }
.p1 { right: 3vw; bottom: 1vh; width: 210px; transform: rotate(24deg); filter: blur(4px); }
.p2 { right: 31vw; bottom: 0vh; width: 120px; transform: rotate(-38deg); fill: #D47512; }
.p3 { right: 1vw; bottom: 30vh; width: 130px; transform: rotate(72deg); fill: #CEAA1D; }
.p4 { left: 27vw; bottom: 1vh; width: 150px; transform: rotate(112deg); filter: blur(3px); fill: #B8650E; }
.p5 { left: 0vw; bottom: 6vh; width: 230px; transform: rotate(-22deg); filter: blur(6px); }
.p6 { right: 44vw; bottom: 10vh; width: 90px; transform: rotate(160deg); fill: #D47512; }
.p7 { left: 20vw; bottom: 22vh; width: 100px; transform: rotate(40deg); fill: #CEAA1D; }
.p8 { right: 14vw; bottom: 0vh; width: 80px; transform: rotate(-80deg); fill: #B8650E; }
:root[data-theme-season="spring"] .petal { fill: #E8C4C4; }
:root[data-theme-season="spring"] .petal.p2, :root[data-theme-season="spring"] .petal.p6 { fill: #DAB8B6; }
:root[data-theme-season="spring"] .petal.p3, :root[data-theme-season="spring"] .petal.p7 { fill: #F2E4E0; }

/* 内页：仍是纸，但是躺在深色桌面上——影子更大，边缘有一道暖光 */
.desk {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(36, 48, 74, 0.1), 0 40px 70px -16px rgba(0, 0, 0, 0.75), 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* 封套：黑卡 */
.sleeve {
  background:
    radial-gradient(circle calc(var(--S) * 0.468) at 50% 50%, rgba(255,255,255,.05) 0 calc(var(--S) * 0.462), rgba(255,255,255,.10) calc(var(--S) * 0.468), transparent calc(var(--S) * 0.476)),
    var(--paper-grain), var(--sleeve-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 1px 1px 0 rgba(255,255,255,.10), 3px 3px 0 #05070a, 0 40px 60px -16px rgba(0, 0, 0, 0.85);
}
.sleeve-title { color: var(--sleeve-fg); }
.ring-text { fill: var(--sleeve-fg); opacity: 0.78; }
.emboss .e-hi { fill: #fff; fill-opacity: 0.10; }
.emboss .e-lo { fill: #000; fill-opacity: 0.75; }
.emboss .e-face { fill: #151a22; }
.emboss .e-vein { stroke: #fff; stroke-opacity: 0.07; }
.marks .bar { stroke: rgba(255, 255, 255, 0.18); }
.disc { box-shadow: 0 30px 50px -8px rgba(0, 0, 0, 0.85), 0 2px 0 rgba(255,255,255,.35) inset; }
:root[data-theme-event="anniversary-74"] .sleeve-title { color: #FFF3E6; }