:root{--paper: #ece0c8;--paper-2: #e4d6ba;--paper-edge: #d8c39a;--ink: #2b2117;--ink-soft: #5a4a36;--ink-faint: #8a7656;--cinnabar: #9e2b1e;--cinnabar-soft: #b5503f;--jade: #3f6b4f;--gold: #9c7b2e;--rule: #6b3a2e;--highlight: rgba(158, 43, 30, .13);--code-font: "Kaiti SC", "STKaiti", "楷体", "SimSun", "宋体", serif;--mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--serif: "Songti SC", "STSong", "宋体", "Kaiti SC", serif}*{box-sizing:border-box}html,body,#root{height:100%}html,body{margin:0;background:#2a241c;color:var(--ink);font-family:var(--serif);line-height:1.9;overflow:hidden}.app{max-width:1560px;height:calc(100vh - 44px);margin:22px auto;padding:0;background:var(--paper);background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(120,90,50,.02) 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,rgba(120,90,50,.02) 3px 4px),radial-gradient(ellipse at 20% 10%,rgba(180,140,80,.12),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(150,110,60,.14),transparent 55%);border:1px solid var(--paper-edge);border-radius:2px;box-shadow:0 0 0 10px var(--paper),0 0 0 12px #b89a64,0 0 0 16px #2a241c,0 22px 60px #0000008c;position:relative;display:flex;flex-direction:column;overflow:hidden}.app:before{content:"";position:absolute;top:14px;right:14px;bottom:14px;left:14px;border:2px solid var(--rule);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--rule);pointer-events:none;border-radius:1px;z-index:2}.page-inner{padding:30px 44px 26px;position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column}.app-header{text-align:center;margin-bottom:4px;position:relative;flex-shrink:0}.app-header .book-title{font-family:var(--code-font);font-size:32px;letter-spacing:9px;color:var(--ink);margin:0;text-shadow:0 1px 0 rgba(255,255,255,.25)}.app-header .book-sub{font-size:15px;color:var(--ink-soft);letter-spacing:3px;margin-top:6px}.repo-star{position:absolute;top:2px;right:86px;display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:4px 11px;border:1px solid rgba(107,58,46,.55);border-radius:3px;background:#e4d6baad;color:var(--ink-soft);font-family:var(--mono);font-size:12.5px;line-height:1;letter-spacing:0;text-decoration:none;box-shadow:0 1px #ffffff47 inset;transition:color .18s,border-color .18s,background .18s}.repo-star:hover{background:var(--paper-2);border-color:var(--cinnabar);color:var(--cinnabar)}.repo-star-icon{color:var(--gold);font-size:14px;line-height:1}@media(max-width:860px){.repo-star{left:6px;right:auto}}.seal{position:absolute;top:-6px;right:6px;width:64px;height:64px;border:3px solid var(--cinnabar);border-radius:6px;color:var(--cinnabar);font-family:var(--code-font);font-size:18px;line-height:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:center;justify-items:center;gap:1px;padding:6px;transform:rotate(-6deg);opacity:.86;box-shadow:0 0 0 2px #9e2b1e40 inset}.seal span{display:grid;place-items:center;width:100%;height:100%}.divider{text-align:center;color:var(--cinnabar);letter-spacing:6px;margin:10px 0 16px;font-size:14px;opacity:.8;flex-shrink:0}.book-body{flex:1;min-height:0;display:grid;grid-template-columns:196px minmax(0,1fr) minmax(300px,360px);gap:28px;align-items:stretch}.vol-nav,.middle,.zone-notes{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden}.vol-nav::-webkit-scrollbar,.middle::-webkit-scrollbar,.zone-notes::-webkit-scrollbar{width:7px}.vol-nav::-webkit-scrollbar-thumb,.middle::-webkit-scrollbar-thumb,.zone-notes::-webkit-scrollbar-thumb{background:#6b3a2e4d;border-radius:4px}.vol-nav::-webkit-scrollbar-thumb:hover,.middle::-webkit-scrollbar-thumb:hover,.zone-notes::-webkit-scrollbar-thumb:hover{background:#6b3a2e80}.middle{padding:0 6px}.codex-pair{display:grid;grid-template-columns:minmax(0,1fr) 408px;gap:26px;align-items:start}.zone-code,.zone-arena{min-width:0}.zone-notes{border-left:1px solid var(--paper-edge);padding-left:24px}.vol-nav{display:flex;flex-direction:column;gap:4px;padding-right:22px;border-right:1px solid var(--paper-edge)}.vol-nav-title{font-family:var(--code-font);font-size:13px;letter-spacing:4px;color:var(--ink-faint);margin-bottom:8px;padding-left:10px}.vol-tab{background:transparent;border:none;border-left:3px solid transparent;color:var(--ink-faint);padding:8px 10px;cursor:pointer;font-family:var(--code-font);font-size:15px;letter-spacing:2px;text-align:left;line-height:1.5;transition:all .18s}.vol-tab:hover{color:var(--ink-soft);background:#3f6b4f12}.vol-tab.active{color:var(--cinnabar);border-left-color:var(--cinnabar);background:var(--highlight)}.scrolls{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}.scroll-tab{background:var(--paper-2);border:1px solid var(--paper-edge);color:var(--ink-soft);padding:8px 16px;border-radius:3px;cursor:pointer;font-family:var(--code-font);font-size:15px;letter-spacing:2px;transition:all .18s}.scroll-tab:hover{color:var(--ink);border-color:var(--cinnabar-soft)}.scroll-tab.active{background:var(--cinnabar);color:var(--paper);border-color:var(--cinnabar);box-shadow:0 2px 8px #9e2b1e66}@media(max-width:1180px){.codex-pair{grid-template-columns:1fr}.zone-notes{min-width:260px}.book-body{grid-template-columns:180px minmax(0,1fr) minmax(260px,320px)}}@media(max-width:860px){html,body{overflow:auto}.app{height:auto;overflow:visible}.page-inner{display:block}.book-body{display:block;min-height:0}.vol-nav,.middle,.zone-notes{height:auto;overflow:visible}.vol-nav{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--paper-edge);padding-right:0;padding-bottom:14px;margin-bottom:18px}.vol-nav-title{width:100%}.bridge-panel{grid-template-columns:1fr}.zone-notes{border-left:none;border-top:1px solid var(--paper-edge);padding-left:0;padding-top:18px;margin-top:18px}.codex-pair{grid-template-columns:1fr}}.scroll-intro{border-left:3px solid var(--cinnabar);padding:4px 0 4px 16px;margin-bottom:20px;color:var(--ink-soft);font-size:15px}.scroll-intro b{color:var(--cinnabar);font-weight:600}.bridge-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:-4px 0 18px}.bridge-item{min-width:0;border:1px solid var(--paper-edge);border-left:3px solid var(--gold);background:#e4d6bab8;padding:8px 10px;border-radius:2px}.bridge-label{font-family:var(--code-font);color:var(--cinnabar);font-size:12px;letter-spacing:2px;margin-bottom:2px}.bridge-text{color:var(--ink-soft);font-size:12.5px;line-height:1.55}@media(max-width:860px){.bridge-panel{grid-template-columns:1fr}}.section-label{font-family:var(--code-font);font-size:17px;letter-spacing:3px;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:6px;margin:0 0 14px;display:flex;align-items:center;gap:8px}.section-label:before{content:"❖";color:var(--cinnabar)}.manual{background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;box-shadow:inset 0 0 18px #7850281f;padding:14px 0;font-family:var(--mono);font-size:13.5px;line-height:1.95;overflow-x:auto}.manual-line{display:flex;align-items:baseline;white-space:pre;padding:1px 18px;border-left:3px solid transparent;cursor:pointer;transition:background .12s}.manual-line:hover{background:#3f6b4f1a}.manual-line.active{background:var(--highlight);border-left-color:var(--cinnabar)}.manual-line .ln{color:var(--ink-faint);width:24px;text-align:right;margin-right:14px;flex-shrink:0;-webkit-user-select:none;user-select:none;font-size:12px}.manual-line .src{color:var(--ink)}.tok-kw{color:var(--cinnabar);font-weight:600}.tok-fn{color:var(--jade)}.tok-num{color:var(--gold);font-weight:600}.tok-str{color:#6b7d3f}.tok-com{color:var(--ink-faint);font-style:italic}.tok-op{color:var(--ink-soft)}.live-num{color:var(--gold);font-weight:700;cursor:ew-resize;border-bottom:1px dashed var(--cinnabar-soft);padding:0 1px;-webkit-user-select:none;user-select:none}.live-num:hover{background:#9c7b2e2e;border-radius:2px}.arena{background:var(--paper-2);border:1px solid var(--rule);border-radius:2px;box-shadow:inset 0 0 18px #7850281f;padding:14px;min-height:320px;display:flex;align-items:center;justify-content:center}.arena svg{max-width:100%;height:auto}.arena text{font-family:var(--serif)}.note{margin-top:0;padding:12px 16px;background:var(--paper);border:1px dashed var(--rule);border-radius:2px;font-size:14.5px;color:var(--ink);min-height:30px}.note .label{color:var(--cinnabar);font-weight:700;margin-right:6px}.note b{color:var(--jade)}.glossary{margin-top:14px;padding:12px 16px 14px;background:var(--paper-2);border:1px solid var(--paper-edge);border-left:3px solid var(--gold);border-radius:2px}.glossary-title{font-family:var(--code-font);font-size:14px;letter-spacing:2px;color:var(--gold);margin-bottom:8px}.glossary dl{margin:0}.glossary .gloss-item{margin:0 0 8px}.glossary .gloss-item:last-child{margin-bottom:0}.glossary dt{font-family:var(--code-font);font-size:14px;color:var(--cinnabar);font-weight:600;margin-bottom:1px}.glossary dd{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-soft)}.glossary dd b{color:var(--jade);font-weight:600}.glossary dd code{font-family:var(--mono);font-size:12.5px;background:var(--paper);padding:0 3px;border-radius:2px;color:var(--ink)}.play-bar{margin-top:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.btn-play{background:var(--jade);color:var(--paper);border:none;padding:7px 16px;border-radius:3px;cursor:pointer;font-family:var(--serif);font-size:14px;letter-spacing:2px}.btn-play:hover{filter:brightness(1.08)}.btn-play.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--rule);padding:6px 12px;letter-spacing:1px}.btn-play.ghost:hover{background:var(--paper);color:var(--ink)}.play-count{margin-left:auto;font-size:13px;color:var(--gold);font-family:var(--mono);letter-spacing:1px}.knobs{margin-top:14px;display:flex;flex-wrap:wrap;gap:18px}.knob{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-soft)}.knob label{letter-spacing:1px}.knob input[type=range]{width:150px;accent-color:var(--cinnabar)}.knob .val{color:var(--gold);font-weight:700;font-family:var(--mono)}.tip-banner{text-align:center;font-size:13px;color:var(--ink-faint);margin:22px 0 0;letter-spacing:1px}