@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#e9e9df;--muted:#9babb9;--gold:#e4bb73;--line:#ffffff14;--panel:#111e2b;--blue:#56c9e5;--pink:#db77ab}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% 0,#1c3042 0,transparent 48%),#0a1420;color:var(--ink);font-family:'Noto Sans TC',system-ui,sans-serif;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}button,select,input{font:inherit}button,select{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{cursor:default;opacity:.45}.site-head{min-height:76px;padding:16px 5vw;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{font-size:15px;font-weight:600;display:flex;align-items:center;gap:12px}.brand-icon{font-size:28px;color:var(--gold)}.brand-divider{color:#617080}.brand-tail{font-size:13px;color:var(--muted);font-weight:400}.back-link{font-size:13px;color:var(--muted)}.back-link:hover{color:var(--gold)}main{max-width:1530px;margin:auto;padding:0 5vw}.hero{padding:40px 0 28px;display:flex;align-items:center;justify-content:space-between;gap:30px}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--gold);margin:0 0 10px}.hero h1{font-size:clamp(28px,3.2vw,47px);margin:0;letter-spacing:.02em;font-weight:500;display:flex;align-items:baseline;gap:20px}.hero h1 span{font:500 clamp(52px,5.4vw,76px)/1 Georgia,serif;letter-spacing:.04em}.hero-copy{color:var(--muted);margin:16px 0 0;font-size:14px;line-height:1.8}.edition{display:flex;gap:15px;align-items:center;border-left:1px solid #ffffff25;padding-left:28px}.edition-mark{color:var(--gold);font-size:42px}.edition strong,.edition small{display:block}.edition strong{font-size:14px;font-weight:500}.edition small{font-size:11px;color:var(--muted);margin-top:4px}.chapters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:18px}.chapters button{border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:13px;padding:11px 15px;transition:.2s}.chapters button span{font-size:10px;margin-right:8px;color:#6e8597}.chapters button.active{background:#e4bb7318;border-color:#e4bb734b;color:var(--gold)}.chapters button:hover{background:#ffffff08}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:stretch}.stage-panel{min-width:0;border:1px solid #39546b70;border-radius:16px;overflow:hidden;background:linear-gradient(#152736,#0d1b29);position:relative}.stage-top{display:flex;align-items:center;gap:8px;padding:15px 20px;border-bottom:1px solid var(--line);font-size:11px;color:#a5bac9}.live-dot{height:5px;width:5px;border-radius:50%;background:#72cbb5;box-shadow:0 0 12px #72cbb5}.scene-tag{margin-left:auto;font-size:8px;letter-spacing:.16em;color:#617e93}#viewport{height:550px;position:relative;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:14px}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.model-label{position:absolute;color:#cad9e5;background:#0a1723bd;border:1px solid #ffffff18;border-radius:5px;padding:3px 7px;font-size:10px;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none}.view-tools{position:absolute;left:16px;right:16px;bottom:74px;display:flex;justify-content:center;gap:5px;flex-wrap:wrap;pointer-events:none}.view-tools button{pointer-events:auto;background:#0d1d2cda;border:1px solid #47617b66;color:#bbcede;border-radius:7px;padding:7px 11px;font-size:11px}.view-tools button:hover,.view-tools button[aria-pressed=true]{color:var(--gold);border-color:#e4bb7377}.stage-bottom{border-top:1px solid var(--line);padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;color:#8ca4b7}.stage-bottom label{display:flex;align-items:center;gap:8px;white-space:nowrap}.stage-bottom input{width:84px;accent-color:var(--gold)}.stage-bottom output{width:32px}.guide{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:26px 25px 20px;display:flex;flex-direction:column;min-height:640px}.guide-top{display:flex;align-items:start;justify-content:space-between;gap:8px}.step-count{font:12px ui-monospace,monospace;color:#7d94a6}.guide h2{font-size:23px;font-weight:500;line-height:1.55;margin:16px 0 21px;letter-spacing:.02em}.player-control{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:15px}.player-control select{color:#e6c997;background:#1d2d3b;border:1px solid #ffffff20;border-radius:6px;padding:5px 10px}.guide-body{font-size:13px;color:#bbc8d2}.guide-body p{margin:0 0 13px}.guide-body strong{color:#e9ddc4;font-weight:500}.guide-body ul{padding-left:19px;margin:0 0 16px}.guide-body li+li{margin-top:8px}.rule-stat{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}.rule-stat b{color:var(--gold);font-weight:500}.rule-callout{padding:12px 14px;background:#213341;border-left:2px solid var(--blue);border-radius:0 6px 6px 0;margin:14px 0;color:#bfdbe7;font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.actions button{border:1px solid #ffffff28;border-radius:7px;padding:10px 15px;background:#1b2d3d;color:#d3dde6;font-size:12px}.actions button.primary{background:var(--gold);border-color:var(--gold);color:#16202a;font-weight:600;flex:1}.actions button:hover{filter:brightness(1.1)}.guide-bottom{margin-top:auto;padding-top:25px;display:flex;justify-content:space-between;gap:8px;color:#6f879a;font-size:10px}.teaching-tag{font-size:8px;letter-spacing:.1em}.notice{margin-top:14px;padding:10px;background:#304237;border-radius:6px;font-size:12px;color:#b9d6b2}.reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:30px 0}.reference-grid article{display:flex;gap:15px;align-items:flex-start}.route-icon{display:grid;place-items:center;width:41px;height:41px;flex-shrink:0;border:1px solid currentColor;border-radius:11px;font-size:23px}.orange{color:var(--gold)}.pink{color:var(--pink)}.blue{color:var(--blue)}.reference-grid h3{font-size:13px;font-weight:500;margin:0 0 5px}.reference-grid p{font-size:11px;color:#8da1b1;margin:0;line-height:1.8}.model-note{border-top:1px solid var(--line);padding:25px 0 35px;max-width:1020px}.model-note h2{font-size:14px;font-weight:500;margin:0 0 12px}.model-note p{font-size:11px;color:#8c9eae;line-height:1.9}.model-note a{font-size:12px;color:var(--gold)}footer{border-top:1px solid var(--line);padding:20px 5vw;color:#61798e;font-size:10px;display:flex;justify-content:space-between;gap:12px}.mobile-br{display:none}[hidden]{display:none!important}
@media(min-width:1500px){main{padding:0 45px}#viewport{height:600px}}
@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) 300px}.guide{padding:22px 20px}.hero h1{font-size:30px}.hero h1 span{font-size:60px}#viewport{height:520px}.view-tools{bottom:90px}.stage-bottom{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:760px){.site-head{padding:12px 5vw;min-height:62px}.brand-tail,.brand-divider{display:none}.brand{font-size:13px;gap:8px}.back-link{font-size:11px}.hero{padding:26px 0 22px}.hero h1{font-size:24px;gap:12px}.hero h1 span{font-size:47px}.hero .eyebrow{font-size:8px;max-width:210px}.hero-copy{font-size:12px}.edition{display:none}.chapters{flex-wrap:nowrap;overflow-x:auto;margin-right:-5vw;padding-right:5vw;padding-bottom:5px;scrollbar-width:thin}.chapters button{white-space:nowrap;padding:9px 11px;font-size:12px}.workspace{grid-template-columns:1fr;gap:14px}#viewport{height:420px}.stage-top{padding:12px 15px}.scene-tag{font-size:7px}.stage-bottom{flex-direction:row;align-items:center;font-size:9px;padding:12px}.stage-bottom input{width:57px}.mobile-br{display:initial}.view-tools{left:8px;right:8px;bottom:76px}.view-tools button{font-size:10px;padding:7px 9px}.guide{min-height:0;padding:22px}.guide h2{font-size:21px;margin:10px 0 15px}.guide-bottom{padding-top:20px}.reference-grid{grid-template-columns:1fr;gap:18px;margin:25px 0}.reference-grid p{font-size:12px}footer{flex-direction:column;gap:5px}.model-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}