:root{--serif: "Noto Serif CJK SC", "Songti SC", "STSong", serif;--sans: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;--mono: "JetBrains Mono", "Noto Sans Mono CJK SC", ui-monospace, monospace;--bg: #05060f;--ink: #f1ede4;--ink-2: rgba(241, 237, 228, .72);--ink-3: rgba(241, 237, 228, .46);--panel: rgba(10, 12, 28, .66);--line: rgba(241, 237, 228, .14);--accent: #ffc861;--accent-ink: #1a1408;--shadow: 0 2px 18px rgba(0, 0, 0, .45)}body[data-zone=micro]{--bg: #0b0a10;--accent: #5fe0ff;--accent-ink: #04161c;--panel: rgba(14, 12, 20, .68)}body[data-zone=macro]{--bg: #efe8da;--ink: #2b2620;--ink-2: rgba(43, 38, 32, .78);--ink-3: rgba(43, 38, 32, .5);--panel: rgba(255, 251, 243, .86);--line: rgba(43, 38, 32, .14);--accent: #c4512c;--accent-ink: #fff8ef;--shadow: 0 1px 10px rgba(255, 250, 240, .8)}body[data-zone=newworld]{--bg: #0c2442;--ink: #e8f2ff;--ink-2: rgba(232, 242, 255, .76);--ink-3: rgba(232, 242, 255, .5);--panel: rgba(7, 26, 50, .78);--line: rgba(160, 205, 255, .2);--accent: #7fe3c4;--accent-ink: #062a22}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden}canvas#stage{position:fixed;left:0;top:0;display:block;touch-action:none}.shell{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"story nav" "stage panel" "controls panel";gap:14px;padding:18px 20px}.shell>*{pointer-events:auto;min-width:0}.story{grid-area:story;max-width:780px;pointer-events:none}.brand{font-size:12px;letter-spacing:.32em;color:var(--ink-3);margin-bottom:10px}.story h1{font-family:var(--serif);font-weight:700;font-size:34px;margin:0;letter-spacing:.06em;text-shadow:var(--shadow)}.story .sub{font-size:13px;color:var(--ink-2);margin-top:4px;letter-spacing:.04em}.story .narr{font-family:var(--serif);font-size:14.5px;line-height:1.75;color:var(--ink-2);margin:10px 0 0;max-width:660px;text-shadow:var(--shadow)}.story .live{margin-top:8px;font-size:13px;line-height:1.5;color:var(--accent);height:3em;overflow:hidden;text-shadow:var(--shadow);font-weight:500}body[data-zone=macro] .story .live{text-shadow:none}#stageBox{grid-area:stage;pointer-events:none}.nav{grid-area:nav;display:flex;flex-direction:column;gap:8px;align-self:start}.zones{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px}.zone{all:unset;cursor:pointer;text-align:center;padding:6px 2px 5px;border-radius:9px;color:var(--ink-2)}.zone b{display:block;font-family:var(--serif);font-size:14px;color:var(--ink)}.zone span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px}.zone.on{background:var(--accent)}.zone.on b,.zone.on span{color:var(--accent-ink)}.exps{display:flex;flex-direction:column;gap:5px}.tab{all:unset;cursor:pointer;padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:13px;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px}.tab b{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:14px;white-space:nowrap}.tab span{color:var(--ink-3);font-size:11.5px;align-self:center;text-align:right}.tab.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.panel{grid-area:panel;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 12px 6px;overflow-y:auto;align-self:stretch}.inst{margin-bottom:12px}.inst h3{margin:0 0 4px;font-size:12px;font-weight:600;color:var(--ink-2);display:flex;justify-content:space-between;gap:6px}.inst h3 em{font-style:normal;color:var(--ink-3);font-weight:400;font-family:var(--mono);font-size:11px;text-align:right}.inst canvas{width:100%;height:108px;display:block;border-radius:8px;background:color-mix(in srgb,var(--ink) 4%,transparent)}.note{font-size:11px;color:var(--ink-3);line-height:1.55;margin-top:4px}.kv{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12px;color:var(--ink-2)}.kv b{font-family:var(--mono);font-weight:500;color:var(--ink);text-align:right}.panel .close{display:none}.controls{grid-area:controls;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px}.ctl{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}.ctl output{font-family:var(--mono);color:var(--ink);min-width:46px;font-size:12px}.ctl input[type=range]{width:120px;accent-color:var(--accent)}.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}.seg button{all:unset;cursor:pointer;padding:6px 11px;font-size:12.5px;color:var(--ink-2)}.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}.btn{all:unset;cursor:pointer;padding:7px 13px;border-radius:9px;border:1px solid var(--line);font-size:12.5px;color:var(--ink);white-space:nowrap}.btn.primary{background:var(--accent);color:var(--accent-ink);font-weight:700;border-color:transparent;min-width:40px;text-align:center}.sep{width:1px;height:22px;background:var(--line)}.mobile-only{display:none!important}.perf{font-family:var(--mono);font-size:11px;color:var(--ink-3)}.zoombar{position:fixed;display:flex;flex-direction:column;gap:4px;z-index:3}.zoombar button{all:unset;cursor:pointer;width:30px;height:30px;text-align:center;line-height:30px;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--ink-2);font-size:15px}.editor{font-size:12px;color:var(--ink-2)}.editor .row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}.editor label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--ink-3)}.editor input,.editor select,.editor textarea{all:unset;box-sizing:border-box;background:color-mix(in srgb,var(--ink) 7%,transparent);border:1px solid var(--line);border-radius:7px;padding:5px 7px;font-family:var(--mono);font-size:12px;color:var(--ink);width:100%}.editor select option{color:#111}.editor input[type=color]{padding:0;height:28px}.editor .list{display:flex;flex-direction:column;gap:4px;margin:6px 0 10px}.editor .item{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:8px;border:1px solid var(--line);cursor:pointer}.editor .item.on{border-color:var(--accent)}.editor .dot{width:12px;height:12px;border-radius:50%;flex:none}.editor .force{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;margin-bottom:5px}.editor .force input[type=checkbox]{all:revert;accent-color:var(--accent)}.editor .force input[type=number]{width:72px}.editor .err{color:#ff8a8a;font-size:11px;min-height:1em}.editor h4{margin:10px 0 5px;font-size:12px;color:var(--ink)}.editor .btns{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}@media(max-width:860px){.shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"nav" "story" "stage" "controls";padding:8px 10px;gap:6px}.zones{padding:3px}.zone{padding:4px 2px}.zone span{display:none}.exps{flex-direction:row;overflow-x:auto;scrollbar-width:none}.tab{flex:0 0 auto;padding:6px 10px}.tab span{display:none}.story h1{font-size:22px}.story .narr,.story .sub,.brand{display:none}.story .live{font-size:12px;margin-top:4px;height:4.5em}.controls{max-height:32vh;overflow-y:auto;gap:8px 12px;padding:8px 10px}.ctl input[type=range]{width:92px}.panel{display:none;position:fixed;left:8px;right:8px;bottom:8px;max-height:70vh;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent)}.panel .close{display:block;position:sticky;top:0;margin-left:auto}body.show-panel .panel{display:block}body.show-story .story .narr{display:block;position:fixed;left:8px;right:8px;top:100px;z-index:6;background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;pointer-events:auto}.mobile-only{display:inline-block!important}.inst canvas{height:84px}}