/* ==========================================================================
Music Theory Playground · 组件层
方向 B（实验台）：卡片 + 圆角 + 阴影做主要容器语言；
黄绿承担"仪表"角色（状态点、读数、进度），不只是批注。
========================================================================== */
/* --- 顶栏 ----------------------------------------------------------------- */
.topbar {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: var(--sp-4);
padding: var(--sp-3) var(--sp-5);
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.topbar .brand {
font-family: var(--font-serif); font-size: var(--fs-small);
color: var(--ink-1); text-decoration: none; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.topbar .btn { white-space: nowrap; flex-shrink: 0; }
.topbar .crumb { font-size: var(--fs-small); color: var(--ink-3); }
.topbar .crumb b { color: var(--ink-1); font-weight: 500; }
.topbar .spacer { flex: 1; }
/* 进度格：一格一个知识点，当前用绿点，已学用黄 */
.meter { display: flex; gap: 3px; align-items: center; }
.meter i {
display: block; width: 10px; height: 10px; border-radius: 3px;
background: var(--surface-3);
}
.meter i.done { background: var(--amber); }
.meter i.now { background: var(--green); }
/* --- 外壳与左栏 ----------------------------------------------------------- */
.shell {
display: grid;
grid-template-columns: var(--rail-w) minmax(0, 1fr);
gap: var(--sp-6);
max-width: var(--shell-max);
margin: 0 auto;
padding: var(--sp-6) var(--sp-5) var(--sp-8);
align-items: start;
}
.rail {
position: sticky; top: 72px;
display: flex; flex-direction: column; gap: var(--sp-1);
font-size: var(--fs-small);
max-height: calc(100vh - 96px); overflow-y: auto;
}
.rail .tier {
margin: var(--sp-4) 0 var(--sp-2);
font-size: var(--fs-tiny); letter-spacing: .08em;
color: var(--ink-3); text-transform: none;
}
.rail .tier:first-child { margin-top: 0; }
.rail .part {
margin: var(--sp-5) 0 var(--sp-2);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--line);
font-family: var(--font-serif);
font-size: var(--fs-small);
color: var(--ink-1);
}
.rail .part:first-child { margin-top: 0; }
.rail .reserved {
padding: var(--sp-2) var(--sp-3);
font-size: var(--fs-tiny); color: var(--ink-4); line-height: 1.6;
}
.rail a {
display: flex; gap: var(--sp-2); align-items: baseline;
padding: 6px var(--sp-3); border-radius: var(--r-sm);
color: var(--ink-2); text-decoration: none;
}
.rail a em {
font-style: normal; font-variant-numeric: tabular-nums;
color: var(--ink-4); font-size: var(--fs-tiny); min-width: 1.4em;
}
.rail a:hover { background: var(--surface-2); color: var(--ink-1); }
.rail a[aria-current="page"] {
background: var(--amber-soft); color: var(--ink-1); font-weight: 500;
}
.rail a[aria-current="page"] em { color: var(--amber-deep); }
.rail a.soon { color: var(--ink-4); }
.rail a.soon em { color: var(--ink-4); }
/* --- 正文块 --------------------------------------------------------------- */
.lesson { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.lesson > * { max-width: var(--measure); }
.lesson > .wide { max-width: none; }
.lesson h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-2); }
.lesson h2 { font-size: var(--fs-h2); margin-top: var(--sp-2); }
.lesson p, .shell--full p { color: var(--ink-2); }
.lesson strong { color: var(--ink-1); font-weight: 500; }
.kicker {
font-size: var(--fs-tiny); letter-spacing: .1em;
color: var(--ink-3); margin-bottom: var(--sp-2);
}
.lesson .lead-p, .shell--full .lead-p {
font-size: var(--fs-h3); line-height: 1.7; color: var(--ink-1);
}
/* --- 卡片 ----------------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: var(--shadow-1);
padding: var(--card-pad);
}
.card-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.card-head h2 { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; margin: 0; }
.card-head .hint { font-size: var(--fs-small); color: var(--ink-3); margin: 0; }
/* 卡片外的说明文字 */
.hint { font-size: var(--fs-small); color: var(--ink-3); margin: var(--sp-3) 0 0; }
.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;
}
/* 实验台内部的一行控件 */
.lab-controls {
display: flex; align-items: center; gap: var(--sp-3);
flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.lab-controls .field { flex: 1; min-width: 220px; }
/* 律制实验台：圆盘 + 读数并排，窄屏堆叠 */
.temper-grid {
display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
gap: var(--sp-5); align-items: center;
}
@media (max-width: 720px) {
.temper-grid { grid-template-columns: 1fr; }
}
/* 表格在窄屏横向滚动，不要挤成一团 */
.scroll-x { overflow-x: auto; }
/* 列多的表才强制宽度，列少的不该无谓地出现横向滚动 */
.scroll-x--wide .table { min-width: 560px; }
/* 数字列和表头不许折行，宁可整表横向滚动 */
.table td.num { white-space: nowrap; }
.table th { white-space: nowrap; }
.table td:last-child { min-width: 10em; }
/* 公式块与行内代码 */
.formula {
font-family: var(--font-mono); font-size: var(--fs-h3);
background: var(--surface-2); border-radius: var(--r-md);
padding: var(--sp-4) var(--sp-5); text-align: center;
color: var(--ink-1); margin: var(--sp-4) 0; overflow-x: auto;
}
.lesson code {
background: var(--surface-2); padding: 1px 6px;
border-radius: 5px; color: var(--ink-1); white-space: nowrap;
}
/* --- 谱面音符符号：用 CSS 画，不依赖字体 ---------------------------------
♩ 这个字符（U+2669）在部分中文字体里没有，系统回退时会被画成完全不相干的
形状（实测有机器把它显示成三道横线）。速度记号又非用它不可，所以干脆自己画：
符头 + 符干，两个伪元素解决，任何字体环境下都一样。
用法：
附点：里面加一个 （）
二分音符： */
.note, .note-half {
position: relative; display: inline-block;
width: .68em; height: 1em; vertical-align: -.16em;
}
.note::before, .note-half::before {
content: ''; position: absolute; left: 0; bottom: 0;
width: .56em; height: .42em;
background: currentColor; border-radius: 50%;
transform: rotate(-20deg);
}
.note-half::before {
background: transparent; border: .11em solid currentColor;
box-sizing: border-box;
}
.note::after, .note-half::after {
content: ''; position: absolute; left: .5em; bottom: .18em;
width: .085em; height: .95em; background: currentColor; border-radius: 1px;
}
.note i {
position: absolute; right: -.28em; bottom: .1em;
width: .16em; height: .16em; border-radius: 50%; background: currentColor;
}
/* --- 按钮 ----------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font: inherit; font-size: var(--fs-small);
padding: 7px var(--sp-4); min-height: 34px;
border-radius: var(--r-pill);
border: 1px solid var(--line-strong);
background: var(--surface); color: var(--ink-1);
cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--amber); border-color: var(--amber-deep); color: var(--ink-1);
}
.btn-primary:hover { background: color-mix(in srgb, var(--amber) 85%, var(--surface)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink-1); }
.btn[aria-pressed="true"] {
background: var(--amber-soft); border-color: var(--amber-deep); color: var(--ink-1);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, .seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* 分段选择器：预设、章节切换这类"选一个"的场景 */
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button {
font: inherit; font-size: var(--fs-small);
padding: 5px var(--sp-3); min-height: 30px;
border: 1px solid var(--line); border-radius: var(--r-pill);
background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.seg button:hover { background: var(--surface-2); }
.seg button[aria-pressed="true"] {
background: var(--amber-soft); border-color: var(--amber-deep); color: var(--ink-1);
}
/* --- 表单 ----------------------------------------------------------------- */
.field { display: flex; align-items: center; gap: var(--sp-3); }
.field label { font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.field .val {
font-family: var(--font-mono); font-size: var(--fs-small);
font-variant-numeric: tabular-nums; color: var(--ink-1); min-width: 6.5em;
}
input[type="range"] {
flex: 1; min-width: 120px; height: 22px;
accent-color: var(--amber-deep); background: transparent;
}
/* --- 读数 ----------------------------------------------------------------- */
.readout { display: flex; flex-direction: column; margin: 0; }
.readout > div {
display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
padding: 6px 0; border-bottom: 1px dashed var(--line);
font-size: var(--fs-small);
}
.readout > div:last-child { border-bottom: 0; }
.readout dt { color: var(--ink-3); }
.readout dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink-1); }
.readout dd.hi { color: var(--green-deep); }
.readout dd.lo { color: var(--clay-deep); }
/* --- 标签 ----------------------------------------------------------------- */
.tag {
display: inline-block; font-size: var(--fs-tiny);
padding: 2px var(--sp-2); border-radius: var(--r-pill);
border: 1px solid transparent;
}
.tag-green { background: var(--green-soft); color: var(--green-deep); }
.tag-clay { background: var(--clay-soft); color: var(--clay-deep); }
/* --- 乐句条：四个小格，播到哪句哪句亮（作品分析用） --------------------- */
.ode-phrases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4); }
.ode-phrase {
flex: 1; min-width: 8.5em;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface-2); color: var(--ink-3);
font-size: var(--fs-tiny); line-height: 1.5;
}
.ode-phrase b {
font-family: var(--font-serif); font-size: var(--fs-small);
color: var(--ink-2); margin-right: 4px;
}
.ode-phrase[aria-current="true"] {
background: var(--amber-soft); border-color: var(--amber-deep); color: var(--ink-1);
}
.ode-phrase[aria-current="true"] b { color: var(--amber-deep); }
/* --- 卡农台：四个声部的进入图（作品分析 D 用） ------------------------- */
.canon-lanes { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-4); }
.canon-lane { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-tiny); }
.canon-name { flex: 0 0 5.2em; color: var(--ink-2); }
.canon-cells { display: flex; gap: 3px; flex: 1; }
.canon-cells i {
flex: 1; height: 14px; border-radius: 3px;
background: var(--surface-3); border: 1px solid var(--line);
}
.canon-cells i.on { background: var(--green); border-color: var(--green-deep); opacity: .8; }
.canon-bar { flex: 0 0 6.5em; text-align: right; color: var(--ink-4); }
/* --- Afrobeat 节奏台：十六格 × 六行的节奏图 ----------------------------- */
.afro-grid { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-4); }
.afro-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-tiny); }
.afro-name { flex: 0 0 3.2em; color: var(--ink-2); }
.afro-cells { display: flex; gap: 3px; flex: 1; }
.afro-cells i {
flex: 1; height: 13px; border-radius: 3px;
background: var(--surface-2); border: 1px solid var(--line);
}
.afro-cells i.beat { border-left-color: var(--line-strong); }
.afro-cells i.on { background: var(--green); border-color: var(--green-deep); }
/* --- 拉格台：七个音 + 塔拉格子 ----------------------------------------- */
.raga-scale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4); }
.raga-note {
flex: 1; min-width: 3.4em; text-align: center;
padding: var(--sp-2) 0; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface-2);
}
.raga-note b { display: block; font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink-1); }
.raga-note i { font-style: normal; font-size: var(--fs-tiny); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.raga-note.hi { background: var(--amber-soft); border-color: var(--amber-deep); }
.raga-note.hi i { color: var(--amber-deep); }
.tala-grid { display: flex; gap: 4px; }
.tala-cell {
flex: 1; height: 22px; border-radius: 3px;
background: var(--surface-3); border: 1px solid var(--line);
}
.tala-cell.first { background: var(--amber); border-color: var(--amber-deep); }
.tala-cell.khali { background: var(--slate-soft); border-color: var(--slate); }
.tala-cell.now { outline: 2px solid var(--ink-1); }
/* --- 表格 ----------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th {
text-align: left; font-weight: 400; color: var(--ink-3);
padding: 4px var(--sp-2); border-bottom: 1px solid var(--line);
}
.table td { padding: 5px var(--sp-2); border-bottom: 1px solid var(--surface-2); }
.table td.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.table tr.off { color: var(--ink-4); }
.table .flag-lo { color: var(--clay-deep); }
.table .flag-ok { color: var(--green-deep); }
/* --- 波形 / 频谱画布 ------------------------------------------------------- */
.scope {
width: 100%; background: var(--surface-2);
border-radius: var(--r-md); display: block;
}
/* --- 泛音条：像图形均衡器一样的一排竖直条 -------------------------------- */
.bars { display: flex; gap: 2px; align-items: flex-end; height: 132px; }
.bars .bar {
flex: 1; position: relative; height: 100%;
background: var(--surface-2); border-radius: var(--r-sm);
cursor: ns-resize; touch-action: none;
display: flex; align-items: flex-end;
}
.bars .bar i {
display: block; width: 100%; height: 0;
background: var(--amber); border-radius: var(--r-sm);
transition: height var(--dur-fast) linear;
}
.bars .bar.mute i { background: var(--surface-3); }
.bars .bar.mute::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); }
.bars .bar:hover { outline: 1px solid var(--line-strong); outline-offset: 1px; }
.bars .bar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bar-labels { display: flex; gap: 2px; margin-top: 4px; }
.bar-labels span {
flex: 1; text-align: center; font-size: var(--fs-tiny);
color: var(--ink-4); font-variant-numeric: tabular-nums;
overflow: hidden;
}
.bar-labels span.on { color: var(--ink-1); }
.bar-labels span.off { color: var(--ink-4); opacity: .5; }
/* --- 音高圈：十二平均律的"等分圆" ----------------------------------------- */
.circle-wrap { display: flex; justify-content: center; }
/* --- 挑战 ----------------------------------------------------------------- */
/* --- 键盘组件（widgets/keyboard.js） --------------------------------------- */
.kb {
position: relative;
user-select: none;
-webkit-user-select: none;
}
/* 窄屏时键盘整块横滑，不要压扁琴键 */
.kb-scroll { overflow-x: auto; padding-bottom: var(--sp-2); }
.kb-key {
position: absolute; top: 0; padding: 0; cursor: pointer;
border-radius: 0 0 6px 6px;
transition: background var(--dur-fast) linear;
}
.kb-white {
background: var(--surface);
border: 1px solid var(--line-strong);
}
.kb-white:hover { background: var(--surface-2); }
.kb-black {
background: var(--ink-1);
border: 1px solid var(--ink-1);
border-radius: 0 0 4px 4px;
z-index: 2;
}
.kb-black:hover { background: var(--ink-2); }
.kb-key:focus-visible { outline: none; box-shadow: var(--focus-ring); z-index: 3; }
.kb-label {
position: absolute; left: 0; right: 0; bottom: 5px;
text-align: center; font-size: 10px; color: var(--ink-3);
pointer-events: none;
}
/* --- 通用小控件 ------------------------------------------------------------ */
/* 一排可点的小方格，用于把音级/时值/和弦摆出来 */
.tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.tile {
font: inherit; font-size: var(--fs-small);
padding: 4px var(--sp-3); min-height: 28px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.tile:hover { background: var(--surface-2); }
.tile[aria-pressed="true"] {
background: var(--amber-soft); border-color: var(--amber-deep); color: var(--ink-1);
}
.tile.tone-green[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green); }
/* 只作指示用、不可点的方块（比如正在播放到第几小节） */
.tile.is-on { background: var(--amber); border-color: var(--amber-deep); color: var(--ink-1); }
/* 两个面板并排（左图右读数），窄屏堆叠 */
.lab-split {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
gap: var(--sp-5); align-items: start;
}
@media (max-width: 760px) { .lab-split { grid-template-columns: 1fr; } }
/* 小节网格：节奏用 */
.grid-notes {
display: flex; gap: 2px; align-items: flex-end;
height: 84px; margin-top: var(--sp-3);
}
.grid-notes .cell {
flex: 1; background: var(--surface-2); border-radius: var(--r-sm);
display: flex; align-items: flex-end; justify-content: center;
font-size: var(--fs-tiny); color: var(--ink-4);
padding-bottom: 4px; min-height: 84px;
}
/* 强弱梯度条 */
.accent-bar { display: flex; gap: 2px; align-items: flex-end; height: 56px; margin-top: var(--sp-2); }
.accent-bar span {
flex: 1; background: var(--amber); border-radius: 3px 3px 0 0;
min-height: 2px; transition: height var(--dur) var(--ease-out);
}
/* 时间轴上的时值块 */
.timeline {
position: relative; height: 56px; margin-top: var(--sp-3);
background: var(--surface-2); border-radius: var(--r-md);
display: flex; align-items: stretch; overflow: hidden;
}
.timeline .seg {
border-right: 1px solid var(--surface);
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-tiny); color: var(--ink-1);
background: var(--amber);
overflow: hidden; white-space: nowrap;
}
.timeline .seg.rest { background: var(--surface-3); color: var(--ink-4); }
.timeline .tickbar {
position: absolute; inset: 0; display: flex; pointer-events: none;
}
.timeline .tickbar i { flex: 1; border-left: 1px dashed color-mix(in srgb, var(--ink-4) 45%, transparent); }
.challenge .choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.challenge .picks { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.challenge .choice-play {
min-width: 52px; padding-inline: var(--sp-3);
background: var(--amber-soft); border-color: var(--amber-deep);
}
.challenge .choice-pick { min-width: 86px; }
.challenge .verdict {
margin-top: var(--sp-3); font-size: var(--fs-small); min-height: 1.6em;
color: var(--ink-2);
}
.challenge .verdict.ok { color: var(--green-deep); }
.challenge .verdict.no { color: var(--clay-deep); }
/* --- 页脚 ----------------------------------------------------------------- */
.lesson-foot {
display: flex; justify-content: space-between; gap: var(--sp-4);
padding-top: var(--sp-5); border-top: 1px solid var(--line);
font-size: var(--fs-small);
}
/* --- 首页学习地图 --------------------------------------------------------- */
.map-part { margin-bottom: var(--sp-8); }
.map-part > h2 {
font-size: var(--fs-h2); margin-bottom: var(--sp-2);
padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.map-part .blurb { font-size: var(--fs-small); color: var(--ink-3); margin: 0 0 var(--sp-4); }
.map-sub { font-size: var(--fs-h3); margin: var(--sp-6) 0 var(--sp-1); }
.map-sub + .blurb { margin-bottom: var(--sp-4); }
.map-reserved {
padding: var(--sp-5); border: 1px dashed var(--line-strong);
border-radius: var(--r-card); background: var(--surface-2);
color: var(--ink-3); font-size: var(--fs-small); margin: 0;
}
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--sp-4); }
.map-card {
display: flex; flex-direction: column; gap: var(--sp-2);
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-card); box-shadow: var(--shadow-1);
padding: var(--sp-4) var(--sp-5); text-decoration: none; color: inherit;
}
a.map-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.map-card .no { font-size: var(--fs-tiny); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.map-card h4 { font-family: var(--font-serif); font-size: var(--fs-h3); margin: 0; }
.map-card p { font-size: var(--fs-small); color: var(--ink-3); margin: 0; }
.map-card.soon { opacity: .62; box-shadow: none; }
/* --- 窄屏 ----------------------------------------------------------------- */
/* --- 落地首页：毛玻璃门面 -------------------------------------------------- */
/* --- 术语表 ---------------------------------------------------------------- */
/* --- 音值组合法 ------------------------------------------------------------ */
.grp-bar {
position: relative; height: 104px;
background: var(--surface-2); border-radius: var(--r-md); overflow: hidden;
}
.grp-grid { position: absolute; inset: 0; }
.grp-grid i {
position: absolute; top: 0; bottom: 0;
border-left: 1px dashed color-mix(in srgb, var(--ink-4) 40%, transparent);
}
.grp-beams { position: absolute; left: 0; right: 0; top: 10px; height: 6px; }
.grp-beam { position: absolute; top: 0; height: 4px; background: var(--ink-1); border-radius: 2px; }
.grp-notes { position: absolute; left: 0; right: 0; top: 28px; bottom: 0; display: flex; }
.grp-note {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; border-right: 1px solid var(--surface);
}
.grp-head { font-size: 19px; color: var(--ink-1); line-height: 1; }
.grp-beats { font-size: var(--fs-tiny); color: var(--ink-3); }
/* --- 和弦外音 -------------------------------------------------------------- */
.nc-slots { display: flex; gap: 4px; flex-wrap: wrap; }
.nc-slot {
flex: 1 1 68px; min-width: 68px; min-height: 76px; padding: 6px 4px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; font: inherit; cursor: pointer;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.nc-slot[aria-current="true"] { border-color: var(--amber-deep); box-shadow: var(--focus-ring); }
.nc-idx { font-size: var(--fs-tiny); color: var(--ink-4); }
.nc-name { font-size: var(--fs-small); color: var(--ink-1); }
.nc-kind { font-size: var(--fs-tiny); color: var(--ink-3); }
.nc-slot.is-chord { background: var(--green-soft); }
.nc-slot.is-chord .nc-kind { color: var(--green-deep); }
.nc-slot.is-passing, .nc-slot.is-neighbor { background: var(--amber-soft); }
.nc-slot.is-passing .nc-kind, .nc-slot.is-neighbor .nc-kind { color: var(--amber-deep); }
.nc-slot.is-appoggiatura { background: var(--clay-soft); }
.nc-slot.is-appoggiatura .nc-kind { color: var(--clay-deep); }
/* --- 音域条 ----------------------------------------------------------------- */
/* --- 和弦进行编辑器 ---------------------------------------------------------- */
/* --- 曲式积木 ---------------------------------------------------------------- */
.form-row { display: flex; gap: 6px; flex-wrap: wrap; }
.form-block {
flex: 1 1 82px; min-width: 82px; min-height: 76px; border-radius: var(--r-md);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; color: var(--ink-1);
}
.form-letter { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1; }
.form-bar { font-size: var(--fs-tiny); color: color-mix(in srgb, var(--ink-1) 70%, transparent); }
/* --- 三日月之舞：三段结构台 / 独奏对照台 -------------------------------- */
/* 三段的速度画成条：长度就是速度本身，"缓"那一段短一大截 */
.mzk-bars { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-4); }
.mzk-bar { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-tiny); color: var(--ink-2); }
.mzk-bar span { flex: 0 0 6.5em; }
.mzk-bar i { display: block; height: 10px; border-radius: var(--r-pill); background: var(--amber); }
.mzk-bar i.slow { background: var(--green); }
/* 两种吹法各占一张卡：两条时间轴并排看，差别才是看得见的 */
.solo-takes { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.solo-take {
border: 1px solid var(--line); border-radius: var(--r-md);
padding: var(--sp-3); background: var(--surface);
}
.solo-take h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-small); }
.prog-row { display: flex; gap: 6px; flex-wrap: wrap; }
.prog-slot {
flex: 1 1 76px; min-width: 76px; min-height: 84px; padding: 8px 6px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; font: inherit; cursor: pointer;
border: 1px solid var(--line-strong); border-radius: var(--r-md);
background: var(--surface);
}
.prog-slot:hover { background: var(--surface-2); }
.prog-roman { font-size: var(--fs-h3); font-family: var(--font-serif); color: var(--ink-1); }
.prog-name { font-size: var(--fs-tiny); color: var(--ink-2); }
.prog-fn { font-size: var(--fs-tiny); color: var(--ink-4); }
/* 三种功能各一个底色，一眼看出方向 */
.prog-slot.fn-T { background: var(--green-soft); }
.prog-slot.fn-S { background: var(--amber-soft); }
.prog-slot.fn-D { background: var(--clay-soft); }
.prog-slot.fn-T:hover, .prog-slot.fn-S:hover, .prog-slot.fn-D:hover { filter: brightness(.97); }
.range-row {
display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
gap: var(--sp-3); align-items: center; margin-bottom: 5px;
}
.range-row > span { font-size: var(--fs-small); color: var(--ink-2); text-align: right; }
.range-track { position: relative; height: 14px; background: var(--surface-2); border-radius: 7px; }
.range-bar {
position: absolute; top: 0; height: 14px; border-radius: 7px;
background: var(--amber);
}
.range-bar.alt { background: var(--green); }
.range-axis {
display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
gap: var(--sp-3); margin-top: var(--sp-2);
}
.range-axis .ticks { position: relative; height: 16px; }
.range-axis .ticks i {
position: absolute; font-size: var(--fs-tiny); color: var(--ink-4);
transform: translateX(-50%);
}
.gloss-search { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.form-input {
flex: 1; min-width: 220px; min-height: 44px;
font: inherit; font-size: var(--fs-body);
padding: 10px var(--sp-4);
border: 1px solid var(--line-strong); border-radius: var(--r-pill);
background: var(--surface); color: var(--ink-1);
}
.form-input::placeholder { color: var(--ink-4); }
.form-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.term-list { margin: 0; display: flex; flex-direction: column; }
.term {
display: grid; grid-template-columns: 14rem minmax(0, 1fr);
gap: var(--sp-4); align-items: baseline;
padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
}
.term dt { display: flex; flex-direction: column; gap: 2px; }
.term-en { color: var(--ink-1); font-weight: 500; }
.term-zh { font-size: var(--fs-tiny); color: var(--ink-3); }
.term dd { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.term-def { color: var(--ink-2); font-size: var(--fs-small); }
.term-meta { font-size: var(--fs-tiny); color: var(--ink-4); }
.term-meta a { color: var(--ink-3); }
.term-meta a:hover { color: var(--ink-1); }
details.quick { border-top: 1px solid var(--line); padding: var(--sp-3) 0; }
details.quick summary {
cursor: pointer; font-family: var(--font-serif);
font-size: var(--fs-h3); color: var(--ink-1);
}
details.quick summary:hover { color: var(--amber-deep); }
details.quick[open] summary { margin-bottom: var(--sp-2); }
@media (max-width: 640px) {
.term { grid-template-columns: 1fr; gap: var(--sp-1); }
}
.landing {
min-height: 100dvh;
display: flex; flex-direction: column;
position: relative; overflow: hidden;
}
/* 背景色团。毛玻璃要背后有东西才看得出来，这三个色团就是"背后"。 */
.orbs { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.orb { position: absolute; border-radius: 50%; }
.orb-a {
width: 58vmax; height: 58vmax; left: -20vmax; top: -24vmax;
background: radial-gradient(circle,
color-mix(in srgb, var(--amber) 60%, transparent), transparent 68%);
}
.orb-b {
width: 48vmax; height: 48vmax; right: -18vmax; top: -6vmax;
background: radial-gradient(circle,
color-mix(in srgb, var(--green) 45%, transparent), transparent 68%);
}
.orb-c {
width: 54vmax; height: 54vmax; left: 16vmax; bottom: -28vmax;
background: radial-gradient(circle,
color-mix(in srgb, var(--clay) 34%, transparent), transparent 70%);
}
.landing > .topbar, .landing-stage { position: relative; z-index: 1; }
/* 门面页的顶栏不要那条底色，让它透出背景色团 */
.topbar--plain {
position: static;
background: transparent; border-bottom: 0; backdrop-filter: none;
}
.landing-stage {
flex: 1;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--sp-5);
padding: var(--sp-6) var(--sp-5) var(--sp-8);
}
.glass {
width: min(36rem, 100%);
padding: clamp(32px, 6vw, 60px) clamp(24px, 5vw, 56px);
border-radius: 28px;
text-align: center;
background: color-mix(in srgb, var(--surface) 58%, transparent);
backdrop-filter: blur(26px) saturate(150%);
-webkit-backdrop-filter: blur(26px) saturate(150%);
border: 1px solid color-mix(in srgb, #FFFFFF 62%, transparent);
box-shadow:
0 24px 64px rgba(90, 78, 52, .14),
inset 0 1px 0 rgba(255, 255, 255, .8);
}
.glass h1 {
font-size: clamp(1.7rem, 1rem + 2.6vw, 2.6rem);
margin-bottom: var(--sp-4);
}
.glass p { color: var(--ink-2); margin-inline: auto; max-width: 26rem; }
.glass .actions {
display: flex; flex-wrap: wrap; gap: var(--sp-3);
justify-content: center; margin-top: var(--sp-6);
}
.glass .actions .btn {
min-height: 44px; padding-inline: var(--sp-5);
background: color-mix(in srgb, var(--surface) 72%, transparent);
border-color: color-mix(in srgb, var(--line-strong) 70%, transparent);
}
.glass .actions .btn.btn-primary {
background: var(--amber); border-color: var(--amber-deep);
}
.glass .actions .btn:hover { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.glass .actions .btn.btn-primary:hover {
background: color-mix(in srgb, var(--amber) 85%, var(--surface));
}
.landing-note {
margin: 0; font-size: var(--fs-tiny); color: var(--ink-3);
text-align: center;
}
/* 浏览器不支持 backdrop-filter 时给一块实底，别让字浮在色团上 */
@supports not (backdrop-filter: blur(4px)) {
.glass { background: color-mix(in srgb, var(--surface) 94%, transparent); }
}
/* --- 课程地图页 ------------------------------------------------------------ */
/* 首页和地图页不需要左栏，用整幅宽度 */
.shell--full {
display: block;
max-width: 1080px;
margin: 0 auto;
padding: var(--sp-7) var(--sp-5) var(--sp-8);
}
.hero { max-width: 46rem; }
.hero h1 {
font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem);
line-height: 1.25;
margin-bottom: var(--sp-4);
}
.hero .actions {
display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6);
}
.hero .actions .btn { min-height: 42px; padding-inline: var(--sp-5); }
.home-section { margin-top: var(--sp-8); }
.home-section > h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.home-section > .sub { color: var(--ink-3); margin: 0 0 var(--sp-5); }
/* 顶层导航（课程地图入口） */
.topnav { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.topnav a {
font-size: var(--fs-small); color: var(--ink-2); text-decoration: none;
padding: 5px var(--sp-3); border-radius: var(--r-pill); white-space: nowrap;
}
.topnav a:hover { background: var(--surface-2); color: var(--ink-1); }
.topnav a[aria-current="page"] { background: var(--amber-soft); color: var(--ink-1); }
.page-foot {
margin-top: var(--sp-8); padding-top: var(--sp-5);
border-top: 1px solid var(--line);
font-size: var(--fs-small); color: var(--ink-3);
display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
justify-content: space-between;
}
.page-foot a { color: var(--ink-2); }
@media (max-width: 640px) {
/* 门面页的顶栏就是导航本身，不能藏；内容页有左栏，藏掉省地方 */
.topbar:not(.topbar--plain) .topnav { display: none; }
.topbar--plain { flex-wrap: wrap; row-gap: var(--sp-1); }
.topbar--plain .brand { width: 100%; }
}
@media (max-width: 960px) {
.shell { grid-template-columns: 1fr; gap: var(--sp-5); padding-top: var(--sp-5); }
/* 窄屏不要纵向堆出半屏目录，改成一条可横滑的层级条 */
.rail {
position: static; max-height: none;
flex-direction: row; flex-wrap: nowrap; gap: var(--sp-2);
overflow-x: auto; overflow-y: hidden;
padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.rail .tier {
width: auto; margin: 0; align-self: center;
white-space: nowrap; padding-right: var(--sp-2);
border-right: 1px solid var(--line);
}
.rail .part {
width: auto; margin: 0; align-self: center;
white-space: nowrap; padding: 0 var(--sp-3) 0 0;
border-bottom: 0; border-right: 2px solid var(--line-strong);
}
.rail .reserved { display: none; }
.rail a { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 640px) {
.topbar { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }
.topbar .crumb { display: none; }
.shell { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
.lesson { gap: var(--sp-5); }
}
/* 顶栏放不下时先砍面包屑，别去挤进度格和声音开关 */
@media (max-width: 900px) {
.topbar .crumb { display: none; }
}