:root{--ink-950: #1d160e;--ink-900: #2e2419;--ink-700: #4a3d2c;--ink-500: #6f6047;--ink-300: #8a7a62;--paper-50: #faf6ea;--paper-100: #f3ecdd;--paper-200: #ece3cf;--paper-300: #e0d4b8;--cinnabar-700: #87301f;--cinnabar-600: #9e3b2c;--cinnabar-500: #b34a38;--cinnabar-300: #d98b74;--gold-700: #6f5618;--gold-600: #8f6f24;--gold-500: #a8842c;--jade-700: #2f5847;--jade-600: #3f6e5a;--wood-300: #dcb681;--wood-500: #c89c60;--wood-700: #a87f45;--night-900: #16120d;--night-800: #221c14;--night-700: #2e2619;--night-fg: #ece2cd;--night-muted: #a08f74;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--space-9: 96px;--font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, serif;--font-kai: "Kaiti SC", "STKaiti", KaiTi, "楷体", "Noto Serif SC", serif;--radius-sm: 4px;--radius-md: 10px;--radius-lg: 18px;--motion-fast: .15s;--motion-base: .2s;--motion-exit: .14s;--ease-out: cubic-bezier(.23, 1, .32, 1);--z-sticky: 1100;--z-modal: 1200;--bg: var(--paper-100);--card: var(--paper-50);--recessed: var(--paper-200);--fg: var(--ink-900);--strong: var(--ink-700);--muted: var(--ink-300);--line: rgba(46, 36, 25, .14);--line-strong: rgba(46, 36, 25, .26);--accent: var(--cinnabar-600);--accent-strong: var(--cinnabar-700);--accent-soft: rgba(158, 59, 44, .09);--on-accent: #fdf8ef;--gold: var(--gold-600);--jade: var(--jade-600);--wood: var(--wood-300);--wood-deep: var(--wood-500);--wood-line: rgba(72, 46, 15, .55);--wood-hoshi: rgba(40, 25, 8, .85);--board-ring: rgba(72, 46, 15, .35);--board-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 14px 34px rgba(46, 36, 25, .22);--shadow-card: 0 1px 2px rgba(46, 36, 25, .06), 0 6px 18px rgba(46, 36, 25, .08);--shadow-float: 0 2px 6px rgba(46, 36, 25, .1), 0 14px 34px rgba(46, 36, 25, .14);color-scheme:light}[data-theme=dark]{--bg: var(--night-900);--card: var(--night-800);--recessed: #100d09;--fg: var(--night-fg);--strong: #d9cdb4;--muted: var(--night-muted);--line: rgba(236, 226, 205, .12);--line-strong: rgba(236, 226, 205, .22);--accent: #cf7158;--accent-strong: #de8a72;--accent-soft: rgba(207, 113, 88, .14);--on-accent: #1d150f;--gold: #c2a04e;--jade: #7fae97;--wood: #4c3b25;--wood-deep: #3e2f1d;--wood-line: rgba(236, 226, 205, .28);--wood-hoshi: rgba(236, 226, 205, .55);--board-ring: rgba(236, 226, 205, .18);--board-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 34px rgba(0, 0, 0, .5);--shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);--shadow-float: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .5);color-scheme:dark}:root{--seal-bg: var(--accent);--seal-fg: var(--on-accent);--btn-bg: var(--accent);--btn-fg: var(--on-accent);--btn-ghost-line: var(--line-strong);--timeline-dot: var(--accent);--quote-mark: var(--gold)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;font-family:var(--font-serif);font-size:16px;line-height:1.75;letter-spacing:.02em;color:var(--fg);background-color:var(--bg);background-image:repeating-linear-gradient(0deg,rgba(46,36,25,.018) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(46,36,25,.012) 0 1px,transparent 1px 7px);min-height:100dvh;display:flex;flex-direction:column}[data-theme=dark] body{background-image:repeating-linear-gradient(0deg,rgba(236,226,205,.016) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(236,226,205,.01) 0 1px,transparent 1px 7px)}h1,h2,h3,h4{font-family:var(--font-serif);font-weight:700;line-height:1.3;color:var(--fg);margin:0 0 var(--space-4)}h1{font-size:2rem;letter-spacing:.06em}h2{font-size:1.45rem;letter-spacing:.08em}h3{font-size:1.15rem;letter-spacing:.05em}p{margin:0 0 var(--space-4)}a{color:var(--accent);text-decoration:none;transition:color var(--motion-fast) var(--ease-out)}a:hover{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}img,svg,canvas{max-width:100%}button{font-family:inherit;cursor:pointer}::selection{background:var(--accent);color:var(--on-accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}.skip-link{position:absolute;left:-999px;top:8px;z-index:var(--z-modal);background:var(--card);color:var(--fg);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);box-shadow:var(--shadow-float)}.skip-link:focus{left:8px}.app{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-8);outline:none}.container-narrow{max-width:760px;margin-inline:auto}.section{margin-block:var(--space-8)}.section-head{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-5);flex-wrap:wrap}.section-head h2{margin:0}.section-head .head-note{color:var(--muted);font-size:.9rem}.prose{max-width:70ch}.prose p+p{margin-top:var(--space-2)}.text-muted{color:var(--muted)}.text-accent{color:var(--accent)}.small{font-size:.88rem}.vertical{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.35em}.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--motion-base) var(--ease-out),transform .36s var(--ease-out);transition-delay:calc(var(--i, 0) * 60ms)}.reveal.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.site-head{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-5);padding:var(--space-3) var(--space-5);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--fg);flex-shrink:0}.brand:hover{text-decoration:none;color:var(--fg)}.brand-mark{width:34px;height:34px}.bm-wood{fill:var(--wood);stroke:var(--wood-line);stroke-width:1.5}.bm-grid{stroke:var(--wood-line);fill:none}.bm-black{fill:var(--fg)}.bm-white{fill:var(--card);stroke:var(--muted);stroke-width:1}.brand-name{font-size:1.06rem;font-weight:700;letter-spacing:.12em;white-space:nowrap}.brand-name i{font-style:normal;color:var(--accent);margin-inline:2px}.site-nav{display:flex;align-items:center;gap:var(--space-1);overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}.site-nav::-webkit-scrollbar{display:none}.site-nav a{color:var(--muted);font-size:.95rem;letter-spacing:.08em;padding:var(--space-1) var(--space-3);border-radius:999px;white-space:nowrap;transition:color var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}.site-nav a:hover{color:var(--fg);text-decoration:none}.site-nav a.active{color:var(--on-accent);background:var(--accent)}.head-actions{display:flex;gap:var(--space-2);flex-shrink:0}.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--btn-ghost-line);background:var(--card);color:var(--fg);font-size:1.05rem;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow-card);transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-float)}.icon-btn:active{transform:scale(.95)}.icon-btn[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:transparent}.site-foot{border-top:1px solid var(--line);padding:var(--space-6) var(--space-5);margin-top:var(--space-7)}.foot-inner{max-width:1080px;margin:0 auto;text-align:center}.foot-motto{font-family:var(--font-kai);font-size:1.05rem;color:var(--muted);letter-spacing:.14em;margin-bottom:var(--space-4)}.foot-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-4)}.foot-nav a{font-size:.92rem;color:var(--muted)}.foot-nav a:hover{color:var(--accent)}.foot-note{font-size:.8rem;color:var(--muted);max-width:760px;margin:0 auto}.btn{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--btn-bg);color:var(--btn-fg);border:none;border-radius:999px;padding:10px 26px;font-size:1rem;font-family:inherit;letter-spacing:.14em;box-shadow:var(--shadow-card);transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-float);text-decoration:none;color:var(--btn-fg)}.btn:active{transform:scale(.97)}.btn.secondary{background:var(--card);color:var(--fg);border:1px solid var(--btn-ghost-line)}.btn.small{padding:6px 16px;font-size:.9rem}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.art{display:block;width:100%;height:auto}.seal{display:inline-grid;place-items:center;background:var(--seal-bg);color:var(--seal-fg);font-family:var(--font-kai);border-radius:var(--radius-sm);padding:6px 8px;line-height:1.2;letter-spacing:.2em;box-shadow:var(--shadow-card)}.seal.vertical{writing-mode:vertical-rl;text-orientation:upright}.hero{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-6);align-items:center;padding:var(--space-7) 0 var(--space-6)}.hero-side{display:flex;gap:var(--space-4);align-items:flex-start}.hero-title{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--font-kai);font-size:clamp(2.4rem,6vw,3.6rem);font-weight:700;letter-spacing:.22em;line-height:1.25;color:var(--fg);margin:0}.hero-title em{font-style:normal;color:var(--accent)}.hero-main{max-width:560px}.hero-eyebrow{color:var(--gold);font-size:.92rem;letter-spacing:.3em;margin-bottom:var(--space-3)}.hero-sub{color:var(--strong);font-size:1.05rem;margin-bottom:var(--space-5)}.hero-cta{display:flex;gap:var(--space-3);flex-wrap:wrap}.panel{background:var(--card);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card)}.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.entry-card{display:flex;flex-direction:column;gap:var(--space-2);background:var(--card);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card);color:var(--fg);transition:transform var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out)}.entry-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float);color:var(--fg);text-decoration:none}.entry-card .ec-glyph{font-family:var(--font-kai);font-size:1.5rem;color:var(--accent)}.entry-card h3{margin:0}.entry-card p{margin:0;color:var(--muted);font-size:.92rem}.quote-block{position:relative;background:var(--card);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5) var(--space-5);box-shadow:var(--shadow-card);overflow:hidden}.quote-block:before{content:"「";position:absolute;top:-12px;left:10px;font-family:var(--font-kai);font-size:4rem;color:var(--quote-mark);opacity:.4}.quote-block .qb-text{font-family:var(--font-kai);font-size:1.25rem;letter-spacing:.1em;margin:0 0 var(--space-2)}.quote-block .qb-by{color:var(--muted);font-size:.9rem;text-align:right;margin:0}.timeline{position:relative;padding-left:34px}.timeline:before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line-strong)}.tl-item{position:relative;padding-bottom:var(--space-6)}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:"";position:absolute;left:-31px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--timeline-dot);box-shadow:0 0 0 4px var(--accent-soft)}.tl-era{color:var(--accent);font-size:.88rem;letter-spacing:.2em;margin-bottom:var(--space-1)}.tl-item h3{margin-bottom:var(--space-2)}.scene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.scene-card{background:var(--card);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-3)}.scene-card .sc-tags{display:flex;gap:var(--space-2);flex-wrap:wrap}.badge{display:inline-block;font-size:.78rem;letter-spacing:.12em;padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}.badge.jade{background:transparent;color:var(--jade);border-color:color-mix(in srgb,var(--jade) 40%,transparent)}.badge.gold{background:transparent;color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}.scene-card blockquote{margin:0;font-family:var(--font-kai);color:var(--strong);border-left:3px solid var(--gold);padding-left:var(--space-3)}.scene-card blockquote p{margin:0 0 2px}.scene-card blockquote footer{color:var(--muted);font-size:.85rem}.cast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4)}.cast-card{background:var(--card);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card)}.cast-card .cc-name{display:flex;align-items:baseline;gap:var(--space-3)}.cast-card .cc-name h3{margin:0;font-size:1.3rem}.cast-card .cc-name span{color:var(--muted);font-size:.88rem}.cast-card dl{display:grid;grid-template-columns:auto 1fr;gap:2px var(--space-3);margin:var(--space-3) 0 0;font-size:.92rem}.cast-card dt{color:var(--accent);font-weight:700;white-space:nowrap}.cast-card dd{margin:0;color:var(--strong)}.board-wrap{display:flex;flex-direction:column;gap:var(--space-3)}.board-canvas{width:100%;height:auto;display:block;border-radius:var(--radius-sm);cursor:default;touch-action:manipulation}.board-canvas.clickable{cursor:pointer}.board-figure figcaption{color:var(--muted);font-size:.88rem;text-align:center}.board-demo{max-width:420px}.board-play{max-width:620px;margin-inline:auto}.lesson-nav{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5)}.lesson-nav a{border:1px solid var(--btn-ghost-line);border-radius:999px;padding:5px 16px;font-size:.9rem;color:var(--strong);background:var(--card)}.lesson-nav a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}.lesson{background:var(--card);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-card);margin-bottom:var(--space-6);scroll-margin-top:90px}.lesson-demo{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:var(--space-5);align-items:start;margin-top:var(--space-5)}.demo-controls{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.demo-caption{font-family:var(--font-kai);color:var(--strong);min-height:3.2em;padding-top:var(--space-2)}.demo-step{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}.puzzle-list{display:grid;gap:var(--space-4)}.puzzle-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-5);display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:var(--space-5);align-items:start}.puzzle-meta{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-2)}.puzzle-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}.puzzle-feedback{margin-top:var(--space-3);min-height:1.8em;font-family:var(--font-kai)}.puzzle-feedback.ok{color:var(--jade)}.puzzle-feedback.no{color:var(--accent-strong)}.puzzle-card.solved{outline:2px solid var(--jade);outline-offset:-2px}@keyframes qh-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.shake{animation:qh-shake .18s var(--ease-out) 2}.play-layout{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:var(--space-6);align-items:start}.play-side{display:flex;flex-direction:column;gap:var(--space-4)}.turn-indicator{display:flex;align-items:center;gap:var(--space-3);font-size:1.05rem}.turn-stone{width:26px;height:26px;border-radius:50%;box-shadow:var(--shadow-card)}.turn-stone.black{background:radial-gradient(circle at 32% 30%,#4a4a4a,#101010)}.turn-stone.white{background:radial-gradient(circle at 32% 30%,#fffdf4,#cfc8b2);border:1px solid var(--line-strong)}.score-line{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:var(--strong);font-size:.95rem}.seg{display:inline-flex;border:1px solid var(--btn-ghost-line);border-radius:999px;overflow:hidden;background:var(--card)}.seg button{border:none;background:transparent;color:var(--strong);padding:6px 18px;font-size:.92rem;letter-spacing:.1em;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}.seg button.active{background:var(--accent);color:var(--on-accent)}.play-log{font-size:.88rem;color:var(--muted);max-height:200px;overflow-y:auto;font-variant-numeric:tabular-nums}.play-log ol{margin:0;padding-left:1.4em}.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-4)}.term-card{background:var(--card);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card)}.term-card .tc-head{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-2)}.term-card .tc-head h3{margin:0}.term-card .tc-py{color:var(--gold);font-size:.85rem;letter-spacing:.05em}.term-card .tc-cat{margin-left:auto;font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 10px;white-space:nowrap}.term-card p{font-size:.94rem;margin-bottom:var(--space-2)}.term-figure{max-width:200px;margin:0 auto}.music-hero{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:var(--space-6);align-items:center}.music-panel{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-5)}.music-now{font-family:var(--font-kai);font-size:1.1rem;letter-spacing:.12em;margin-bottom:var(--space-3)}.music-row{display:flex;align-items:center;gap:var(--space-3)}input[type=range].vol{accent-color:var(--accent);flex:1}.music-track-list{display:grid;gap:var(--space-3)}.track-card{display:flex;align-items:baseline;gap:var(--space-3);background:var(--card);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-card)}.track-card b{letter-spacing:.08em}.track-card span{color:var(--muted);font-size:.9rem}@keyframes qh-breathe{0%,to{opacity:.35}50%{opacity:1}}.breathe-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--jade);animation:qh-breathe 2.6s ease-in-out infinite}@keyframes qh-drop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:880px){.hero{grid-template-columns:auto 1fr}.hero-art{display:none}.lesson-demo,.puzzle-card,.play-layout,.music-hero,.entry-grid,.scene-grid{grid-template-columns:1fr}.site-head{gap:var(--space-3);padding-inline:var(--space-4)}.brand-name{display:none}}