@property --m-acc{syntax:"<color>";inherits:true;initial-value:#d3aa54}@property --m-soft{syntax:"<color>";inherits:true;initial-value:#0000}@property --m-line{syntax:"<color>";inherits:true;initial-value:#0000}@property --m-amb{syntax:"<color>";inherits:true;initial-value:#0000}@property --m-glow{syntax:"<color>";inherits:true;initial-value:#0000}.modes-page{transition:--m-acc .7s,--m-soft .7s,--m-line .7s,--m-amb .7s,--m-glow .7s}.mo-ambient{pointer-events:none;z-index:0;background:radial-gradient(1000px 520px at 50% -160px, var(--m-amb), transparent 70%);transition:inherit;position:fixed;inset:0}.mo-chapter{z-index:1;padding:40px 32px 72px;position:relative}.mo-inner{max-width:1120px;margin:0 auto}.mo-crumb{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-subtle);align-items:center;gap:8px;margin-bottom:12px;font-size:11px;display:flex}.mo-crumb .now{color:var(--ink)}.modes-page h1{letter-spacing:-.03em;color:var(--ink);margin:0;font-size:clamp(30px,4.5vw,48px);font-weight:400;line-height:1}.modes-page h1 em{font-family:var(--font-display);color:var(--m-acc);font-style:italic;font-weight:400}.mo-lede{color:var(--ink-muted);max-width:62ch;margin:14px 0 0;font-size:15px;line-height:1.6}.modes-page .caption{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-subtle);font-size:11px;font-weight:500}.spectrum{margin-top:30px}.spec-bar{opacity:.9;background:linear-gradient(90deg,#6addf7,#ecbd51,#fb9d59,#68ceaa,#8ca2e4,#ef6661,#a185b7);background:linear-gradient(90deg,lab(82.1563% -28.4789 -23.4324),lab(79.3382% 9.4277 59.3369),lab(73.8123% 31.6311 50.3442),lab(75.9391% -37.6911 8.44592),lab(66.7343% 4.61593 -36.3614),lab(61.2026% 53.402 31.0145),lab(59.4839% 18.5235 -22.4677));border-radius:999px;height:8px;position:relative}.spec-marker{border:3px solid var(--bg);width:18px;height:18px;box-shadow:0 0 16px var(--m-glow);border-radius:50%;transition:left .5s cubic-bezier(.2,.8,.2,1);position:absolute;top:50%;transform:translate(-50%,-50%)}.spec-ends{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-subtle);justify-content:space-between;margin:8px 2px 0;font-size:10px;display:flex}.spec-cells{grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px;display:grid}.spec-cell{border:1px solid var(--line);color:var(--ink-muted);cursor:pointer;background:0 0;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;transition:all .2s;display:flex}.spec-cell .dot{background:var(--oc);border-radius:50%;width:10px;height:10px}.spec-cell b{font-size:12.5px;font-weight:500}.spec-cell .alt{font-family:var(--font-mono);color:var(--ink-subtle);font-size:10px}.spec-cell:hover{border-color:var(--line-strong);color:var(--ink)}.spec-cell.on{border-color:var(--oc);background:var(--oc-s);color:var(--ink)}.spec-cell.on .alt{color:var(--oc)}.hero-mood{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:38px;display:flex}.hero-word{font-family:var(--font-display);color:var(--m-acc);text-shadow:0 0 70px var(--m-glow);font-size:clamp(56px,9vw,108px);font-style:italic;font-weight:400;line-height:.95;transition:letter-spacing .6s}.hero-meta{flex-direction:column;align-items:flex-end;gap:8px;padding-bottom:10px;display:flex}.hero-name{color:var(--ink);font-size:18px;font-weight:500}.hero-rel{font-family:var(--font-mono);color:var(--m-acc);border:1px solid var(--m-line);background:var(--m-soft);border-radius:999px;padding:4px 10px;font-size:12px}.hero-light{gap:3px;display:flex}.hero-light i,.spec-row .lm i{background:var(--bg-elevated-2);border-radius:2px;width:14px;height:5px}.hero-light i.f,.spec-row .lm i.f{background:var(--m-acc)}.mo-body-grid{grid-template-columns:320px minmax(0,1fr);align-items:start;gap:28px;margin-top:30px;display:grid}.mo-panel{background:var(--bg-elevated);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:18px;padding:22px;display:flex}.mo-panel.sticky{position:sticky;top:96px}.mo-panel-block{flex-direction:column;gap:10px;display:flex}.mo-hint{color:var(--ink-subtle);margin:0;font-size:12px;line-height:1.55}.modes-page .chip-row{flex-wrap:wrap;gap:6px;display:flex}.modes-page .chip{border:1px solid var(--line);color:var(--ink-muted);cursor:pointer;background:0 0;border-radius:999px;justify-content:center;align-items:center;min-width:46px;padding:8px 13px;font-size:13px;font-weight:500;transition:all .16s;display:inline-flex}.modes-page .chip:hover{color:var(--ink)}.modes-page .chip.on{border-color:var(--m-line);background:var(--m-soft);color:var(--m-acc)}.modes-page .btn-m{background:var(--m-acc);color:#120c04;color:lab(3.71299% 1.09463 3.77601);cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;height:44px;padding:0 18px;font-size:14px;font-weight:600;transition:background .5s;display:inline-flex}.modes-page .btn-g{height:44px;color:var(--ink);border:1px solid var(--line-input);cursor:pointer;background:0 0;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:13.5px;font-weight:500;display:inline-flex}.modes-page .btn-g:hover{border-color:var(--m-line);color:var(--m-acc)}.mo-staff-real{background:var(--bg-sunken);border:1px solid var(--line);border-radius:14px;padding:14px 12px 34px;position:relative;overflow:auto visible}.mo-tonic-ring{border:1.5px solid var(--ink-subtle);pointer-events:none;border-radius:50%;width:22px;height:22px;position:absolute;transform:translate(calc(14px - 50%),calc(14px - 50%))}.mo-note-glow{filter:blur(12px);pointer-events:none;border-radius:50%;width:36px;height:36px;position:absolute;transform:translate(calc(14px - 50%),calc(14px - 50%))}.mo-note-hit{cursor:pointer;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:flex-end;width:38px;padding:0 0 8px;display:flex;position:absolute;top:0;bottom:0;transform:translate(calc(14px - 50%))}.mo-note-hit:hover{background:color-mix(in oklab, var(--ink) 5%, transparent)}.mo-note-hit .rn{font-family:var(--font-display);color:var(--ink-muted);font-size:17px;font-style:italic;line-height:1;transition:color .3s}.mo-note-hit.char .rn,.mo-note-hit.play .rn{color:var(--m-acc)}.mo-names-row{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.modes-page .pill{font-family:var(--font-mono);border:1px solid var(--line);color:var(--ink-muted);border-radius:999px;align-items:center;gap:5px;padding:4px 10px;font-size:11.5px;display:inline-flex}.modes-page .pill.char{color:var(--m-acc);background:var(--m-soft);border-color:var(--m-line)}.modes-page .pill.ex{font-family:var(--font-sans);color:var(--ink);font-size:12px}.modes-page .func-card{background:var(--bg-elevated);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:12px;margin-top:22px;padding:22px;display:flex}.modes-page .func-card h3{color:var(--ink);margin:0;font-size:15px;font-weight:500}.modes-page .func-card h3 em{font-family:var(--font-display);color:var(--m-acc);font-style:italic;font-weight:400}.modes-page .func-card p{color:var(--ink-muted);margin:0;font-size:13.5px;line-height:1.6}.cn-card{border-color:var(--m-line)!important;background:linear-gradient(135deg, var(--m-soft), transparent)!important}.cn-btns{flex-wrap:wrap;gap:10px;margin-top:2px;display:flex}.ex-chips{flex-wrap:wrap;gap:6px;display:flex}.modes-page .ear{background:linear-gradient(135deg, var(--m-soft), transparent);border:1px solid var(--m-line);border-radius:16px;flex-direction:column;gap:16px;margin-top:22px;padding:24px;display:flex}.modes-page .ear-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.modes-page .ear-head h3{letter-spacing:-.01em;color:var(--ink);margin:0;font-size:18px;font-weight:500}.modes-page .ear-head h3 em{font-family:var(--font-display);color:var(--m-acc);font-style:italic;font-weight:400}.modes-page .ear-play{background:var(--m-acc);color:#120c04;color:lab(3.71299% 1.09463 3.77601);cursor:pointer;border:0;border-radius:999px;align-items:center;gap:10px;height:46px;padding:0 20px 0 8px;font-size:14.5px;font-weight:600;transition:background .5s;display:inline-flex}.modes-page .ear-play .disc{width:32px;height:32px;color:var(--m-acc);background:#120c04;background:lab(3.71299% 1.09463 3.77601);border-radius:50%;justify-content:center;align-items:center;font-size:12px;display:inline-flex}.mode-opts{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;display:grid}.mode-opt{border:1px solid var(--line);background:var(--bg-elevated);color:var(--ink);cursor:pointer;border-radius:10px;padding:13px 6px;font-size:12.5px;font-weight:500}.mode-opt:hover{border-color:var(--oc-l)}.mode-opt.correct{background:var(--oc-s);color:var(--oc);border-color:#0000}.mode-opt.wrong{color:#ff5352;color:lab(60.719% 67.9023 41.2136);background:#ff535229;background:lab(60.719% 67.9023 41.2136/.16);border-color:#0000}.modes-page .ear-meta{color:var(--ink-muted);font-size:12px;font-family:var(--font-mono);flex-wrap:wrap;gap:18px;display:flex}.modes-page .ear-meta b{color:var(--ink)}.edu-rows{flex-direction:column;gap:5px;margin-top:4px;display:flex}.spec-row{color:var(--ink-muted);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;grid-template-columns:18px 1fr auto 120px;align-items:center;gap:12px;padding:9px 12px;font-size:13px;transition:all .16s;display:grid}.spec-row .dot{background:var(--oc);border-radius:50%;width:9px;height:9px}.spec-row .nm{font-weight:500}.spec-row .cum{font-family:var(--font-mono);color:var(--ink-subtle);font-size:11.5px}.spec-row .lm{justify-content:flex-end;gap:3px;display:flex}.spec-row:hover{color:var(--ink);background:var(--bg-elevated)}.spec-row.on{border-color:var(--oc);background:var(--bg-elevated);color:var(--ink)}.spec-row.on .lm i.f{background:var(--oc)}@media (max-width:920px){.mo-chapter{padding:28px 18px 48px}.mo-body-grid{grid-template-columns:1fr;gap:18px}.mo-panel.sticky{position:static}.spec-cells{scrollbar-width:thin;padding-bottom:6px;display:flex;overflow-x:auto}.spec-cell{flex:none;padding:10px 14px 9px}.spec-cell .alt{display:none}.hero-meta{align-items:flex-start}.spec-row{grid-template-columns:18px 1fr auto;gap:10px}.spec-row .lm{display:none}.mo-staff-real{padding:10px 6px 30px}.mo-note-hit{width:28px}.mo-note-hit .rn{font-size:14px}}
