:root{--paper:#f3f1eb;--ink:#273931;--muted:#5c685f;--line:#c9d0c5;--white:#fffef9;--accent:#485c3f;--scene:#e5e8e1}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 "Microsoft JhengHei","PingFang TC",system-ui,sans-serif}
button,input{font:inherit}
button,a,input{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,#constructionViewport:focus-visible{outline:3px solid #687e3c;outline-offset:3px}
[hidden]{display:none!important}
.skip-link{position:fixed;top:-80px;left:16px;z-index:100;padding:12px 16px;background:var(--white)}
.skip-link:focus{top:12px}
.site-header{border-bottom:1px solid var(--line)}
.header-inner{max-width:1600px;min-height:82px;margin:auto;padding:0 5%;display:flex;align-items:center;gap:32px}
.brand{text-decoration:none;font-size:21px;font-weight:600;letter-spacing:.1em;white-space:nowrap;line-height:1.25}
.brand span{display:block;font-size:10px;font-weight:400;letter-spacing:.19em;margin-top:3px}
.edition{margin-left:auto;font-size:11px;letter-spacing:.16em;white-space:nowrap;color:var(--muted)}
.back-link{display:flex;align-items:center;gap:16px;min-height:44px;text-decoration:none;border-bottom:1px solid var(--ink);font-size:13px;white-space:nowrap}
.back-link:hover{color:var(--accent)}
.page-shell{max-width:1600px;margin:auto;padding:0 5%}
.intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);align-items:end;gap:8%;padding:44px 0 36px}
.eyebrow{margin:0 0 14px;color:var(--muted);font-size:10px;letter-spacing:.17em;line-height:1.5}
h1,h2,h3,p{overflow-wrap:break-word}
h1{font-family:"Noto Serif TC","PMingLiU",serif;font-size:clamp(34px,3.4vw,54px);font-weight:500;line-height:1.4;letter-spacing:.02em;margin:0}
h1 span{color:#67765c}
.intro-aside{padding-bottom:6px;font-size:14px;color:var(--muted)}
.intro-aside>p{margin:0 0 14px}
.orbit-note{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:12px;letter-spacing:.05em}
.orbit-symbol{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;font-size:19px;line-height:1}
.construction-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,330px);border:1px solid var(--line);background:var(--white);min-width:0}
.viewer-column{min-width:0}
.scene-frame{position:relative;background:var(--scene)}
.scene-topline,.scene-footline{height:36px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;font-size:10px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.scene-topline{border-bottom:1px solid #c7d0c5}
.scene-footline{border-top:1px solid #c7d0c5}
.scene-viewport{position:relative;height:clamp(450px,60vh,740px);min-width:0;overflow:hidden;background:#e5e8e1;touch-action:none}
.scene-viewport canvas{display:block;width:100%;height:100%}
.scene-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:32px;background:linear-gradient(90deg,#d5ddd2 1px,transparent 1px),linear-gradient(#d5ddd2 1px,transparent 1px),#e7ebe4;background-size:40px 40px}
.scene-cover:before{content:"";position:absolute;inset:18px;border:1px solid #aab6aa;pointer-events:none}
.cover-copy{position:relative;width:min(100%,440px);padding:42px 44px;background:rgba(255,254,249,.96);border:1px solid #b8c2b7;box-shadow:0 24px 60px #25352c1c}
.cover-index{display:block;margin-bottom:24px;font-size:10px;letter-spacing:.17em;color:var(--muted)}
.cover-copy strong{display:block;font-family:"Noto Serif TC","PMingLiU",serif;font-size:clamp(25px,2.5vw,38px);font-weight:500;line-height:1.45}
.cover-copy p{font-size:13px;color:var(--muted);margin:16px 0 25px}
.button-primary{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:48px;width:100%;padding:10px 16px;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--white);font-size:13px;text-align:left;transition:background .18s}
.button-primary:hover{background:#3f5747}
.button-primary:disabled{opacity:.5;cursor:default}
.cover-copy small{display:block;font-size:10px;color:var(--muted);margin-top:14px}
.cover-edge{position:absolute;width:38px;height:38px;border-color:#819481;pointer-events:none}
.cover-edge-top{top:18px;left:18px;border-left:2px solid;border-top:2px solid}
.cover-edge-bottom{bottom:18px;right:18px;border-right:2px solid;border-bottom:2px solid}
.transport{padding:18px 22px 14px;border-top:1px solid var(--line);background:var(--paper)}
.transport-buttons{display:flex;flex-wrap:wrap;gap:8px}
.transport-buttons button{min-height:42px;padding:7px 14px;border:1px solid var(--line);border-radius:0;background:var(--white);font-size:12px;transition:background .18s}
.transport-buttons button:first-child{background:var(--ink);border-color:var(--ink);color:var(--white);min-width:116px}
.transport-buttons button:hover:not(:disabled){background:#e0e5d9}
.transport-buttons button:first-child:hover:not(:disabled){background:#3f5747}
.transport-buttons button:disabled{opacity:.48;cursor:default}
.timeline-control{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:16px}
.timeline-control label,.timeline-control output{font-size:11px;color:var(--muted);white-space:nowrap}
.timeline-control output{font-variant-numeric:tabular-nums}
#constructionTimeline{width:100%;height:24px;margin:0;accent-color:var(--accent);cursor:pointer}
#constructionTimeline:disabled{cursor:default}
.construction-status{min-height:1.5em;margin:10px 0 0;font-size:11px;color:var(--muted)}
.progress-panel{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--line);background:var(--white)}
.panel-heading{padding:24px 24px 21px;border-bottom:1px solid var(--line)}
.panel-heading .eyebrow{margin-bottom:8px}
.panel-heading h2{font-family:"Noto Serif TC","PMingLiU",serif;font-size:25px;font-weight:500;line-height:1.5;margin:0 0 24px}
.stage-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.stage-tags span{display:inline-block;padding:3px 9px;border:1px solid #adb8aa;background:#e8ece5;font-size:10px;letter-spacing:.06em;color:var(--ink)}
.stage-tags span+span{background:transparent}
.panel-heading h3{font-size:20px;font-weight:500;line-height:1.4;margin:0 0 8px}
.panel-heading #stageDetail{min-height:5em;color:var(--muted);font-size:12px;line-height:1.75;margin:0}
.floor-sequence{padding:16px 24px;border-bottom:1px solid var(--line)}
.floor-sequence>span,.steps-heading{font-size:11px;letter-spacing:.08em;color:var(--muted)}
.floor-sequence p{margin:8px 0 0;font-size:12px;line-height:1.9}
.floor-sequence b{font-weight:400;color:#859183;margin:0 2px}
.steps-wrap{padding:18px 24px 24px;min-height:0;overflow:auto}
.steps-heading{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px}
.steps-heading span{font-variant-numeric:tabular-nums}
.step-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 7px}
.step-list li{display:flex;align-items:center;gap:7px;padding:7px 5px;border-bottom:1px solid #e3e7df;color:var(--muted);font-size:11px;line-height:1.45;transition:background .2s,color .2s}
.step-list li span{min-width:20px;font-size:10px;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:#889488}
.step-list li.is-active,.step-list li[aria-current="step"]{background:#e8ece5;color:var(--ink);font-weight:600}
.step-list li.is-complete{color:var(--ink)}
.method-note{display:grid;grid-template-columns:minmax(190px,.38fr) minmax(0,.62fr);gap:8%;padding:42px 0 60px;border-bottom:1px solid var(--line)}
.method-note h2{font-family:"Noto Serif TC","PMingLiU",serif;font-size:26px;font-weight:500;line-height:1.5;margin:0}
.method-note p:not(.eyebrow){font-size:12px;color:var(--muted);line-height:1.9;margin:0 0 9px}
.noscript-note{padding:10px 0;font-size:12px;color:var(--muted)}
.site-footer{max-width:1600px;min-height:100px;margin:auto;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-footer div{display:flex;align-items:center;gap:20px;font-size:13px}
.site-footer strong{font-weight:600}
.site-footer span{color:var(--muted);font-size:11px}
.site-footer a{font-size:12px;text-decoration:none;border-bottom:1px solid var(--ink)}
@media(max-width:1100px){.construction-workspace{grid-template-columns:minmax(0,1fr) minmax(255px,285px)}.panel-heading,.floor-sequence,.steps-wrap{padding-left:17px;padding-right:17px}.scene-viewport{height:clamp(440px,57vh,680px)}}
@media(max-width:780px){.header-inner{min-height:76px;gap:16px}.edition{display:none}.back-link{margin-left:auto}.intro{display:block;padding:34px 0 26px}.intro-aside{margin-top:18px;max-width:58ch}.construction-workspace{display:block}.scene-viewport{height:clamp(390px,54vh,600px)}.progress-panel{border-left:0;border-top:1px solid var(--line)}.panel-heading{padding:23px 22px 20px}.panel-heading h2{margin-bottom:16px}.panel-heading #stageDetail{min-height:0}.floor-sequence{padding:14px 22px}.steps-wrap{padding:18px 22px 24px;overflow:visible}.step-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.method-note{grid-template-columns:1fr;gap:15px;padding:38px 0 45px}}
@media(max-width:520px){.header-inner{padding:0 5%;min-height:70px}.brand{font-size:18px}.brand span{font-size:9px}.back-link{font-size:11px;gap:6px}.page-shell{padding:0 4%}.intro{padding:27px 0 23px}.eyebrow{font-size:9px}h1{font-size:clamp(29px,8vw,38px)}.intro-aside{font-size:12px}.orbit-note{margin-top:4px;font-size:11px}.scene-topline,.scene-footline{height:30px;padding:0 12px;font-size:8px;letter-spacing:.06em}.scene-viewport{height:clamp(360px,53dvh,500px)}.scene-cover{padding:16px;background-size:30px 30px}.scene-cover:before{inset:10px}.cover-copy{padding:27px 23px}.cover-index{margin-bottom:16px;font-size:9px}.cover-copy strong{font-size:29px}.cover-copy p{font-size:12px;margin:12px 0 20px}.cover-copy small{font-size:9px}.cover-edge-top{top:10px;left:10px}.cover-edge-bottom{bottom:10px;right:10px}.transport{padding:12px}.transport-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.transport-buttons button,.transport-buttons button:first-child{min-width:0;min-height:43px;padding:6px 3px;font-size:10px}.timeline-control{grid-template-columns:1fr auto;gap:3px 10px;margin-top:12px}.timeline-control label,.timeline-control output{font-size:10px}.timeline-control input{grid-column:1/-1;grid-row:2}.construction-status{font-size:10px}.panel-heading{padding:21px 17px 17px}.panel-heading h2{font-size:23px}.panel-heading h3{font-size:18px}.floor-sequence{padding:13px 17px}.steps-wrap{padding:16px 17px 22px}.step-list li{font-size:11px;gap:7px;padding:8px 4px}.step-list li span{min-width:17px;font-size:9px}.method-note{padding:33px 0 38px}.method-note h2{font-size:22px}.site-footer{padding:23px 4%;align-items:flex-start}.site-footer div{display:block}.site-footer span{display:block;margin-top:3px}.site-footer a{white-space:nowrap;font-size:11px}}
@media(max-width:360px){.back-link{font-size:10px}.scene-viewport{height:360px}.cover-copy{padding:23px 18px}.cover-copy strong{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{body{background:#fff}.site-header,.transport,.scene-cover,.site-footer,.skip-link{display:none!important}.intro{padding:12px 0 20px}.scene-viewport{height:240px}.construction-workspace{display:block}.progress-panel{border:0}.step-list{display:grid;grid-template-columns:repeat(3,1fr)}.method-note{padding:20px 0}.site-footer{display:none}}