:root{color-scheme:light;--ink:#232321;--paper:#dedede;--paper-rgb:222,222,222;--track:rgba(35,35,33,.4);--muted:#686864;--line:rgba(35,35,33,.24)}
*{box-sizing:border-box}
html{margin:0;scroll-behavior:auto}
body{margin:0;min-height:600vh;background:var(--paper);color:var(--ink);font-family:"Helvetica Neue","Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:12px;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
#scene:active{cursor:grabbing}
#journey{height:600vh;pointer-events:none}
.masthead{position:fixed;z-index:3;top:34px;left:40px;right:40px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.wordmark{position:relative;display:block;color:inherit;text-decoration:none;font-size:26px;line-height:.86;font-weight:500;letter-spacing:-1.8px;pointer-events:auto}
.wordmark span{letter-spacing:-1px}.wordmark sup{position:absolute;left:100%;top:-3px;margin-left:7px;font-size:9px;letter-spacing:0}
.edition{display:grid;gap:5px;text-align:right;font-size:10px;letter-spacing:1.3px;line-height:1.4}
.edition span:last-child{letter-spacing:.3px;color:var(--muted)}
.scene-caption{position:fixed;left:40px;top:43%;display:flex;gap:14px;align-items:flex-start;z-index:2}
.scene-caption .cross{font-size:21px;line-height:1.3}
.scene-caption p{margin:0;font-size:12px;letter-spacing:2px;line-height:1.9}
.side-note{position:fixed;right:37px;top:43%;margin:0;writing-mode:vertical-rl;font-size:9px;letter-spacing:2px;color:var(--muted)}
.control-panel{position:fixed;z-index:4;bottom:0;left:0;right:0;padding:22px 40px max(24px,env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(var(--paper-rgb),.97),rgba(var(--paper-rgb),.9) 75%,rgba(var(--paper-rgb),0));}
.control-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px}
.gesture-guide{margin:0;font-size:11px;letter-spacing:.45px;line-height:1.5}.gesture-guide span{margin:0 14px 0 5px}.gesture-guide small{display:block;margin-top:5px;color:var(--muted);font-size:9px;letter-spacing:.3px}
.buttons{display:flex;gap:6px;flex-wrap:wrap}
button{background:rgba(var(--paper-rgb),.6);border:1px solid var(--line);border-radius:0;color:inherit;padding:9px 12px;font:inherit;font-size:11px;letter-spacing:.3px;cursor:pointer;min-height:36px;transition:background .16s,color .16s}
button:hover,button[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.timeline{display:grid;grid-template-columns:75px 1fr 80px;gap:16px;align-items:center;padding-top:14px;border-top:1px solid var(--line)}
.timeline label{font-size:10px;letter-spacing:1px}.timeline output{text-align:right;font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
input[type="range"]{width:100%;margin:0;height:24px;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;accent-color:var(--ink)}
input[type="range"]::-webkit-slider-runnable-track{height:1px;background:var(--track)}
input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:15px;background:var(--ink);border:0;border-radius:0;margin-top:-7px}
input[type="range"]::-moz-range-track{height:1px;background:var(--track)}
input[type="range"]::-moz-range-thumb{width:9px;height:15px;background:var(--ink);border:0;border-radius:0}
.status{position:fixed;z-index:5;top:104px;left:40px;max-width:calc(100% - 80px);color:var(--muted);font-size:10px;line-height:1.6;letter-spacing:.4px;pointer-events:none}
.error{position:fixed;z-index:8;top:120px;left:50%;transform:translateX(-50%);width:min(460px,calc(100% - 40px));padding:20px;border:1px solid var(--ink);background:var(--paper);line-height:1.7;overflow-wrap:anywhere}
.reference-panel{position:fixed;z-index:6;right:40px;top:105px;width:min(310px,29vw);max-height:calc(100dvh - 280px);overflow:auto;background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.08)}
.reference-heading{display:flex;justify-content:space-between;padding:12px 14px;font-size:9px;letter-spacing:1px;border-bottom:1px solid var(--line)}
.reference-panel img{display:block;width:100%;height:auto}.reference-panel p{margin:0;padding:10px 14px;font-size:10px;letter-spacing:.4px}
.skip-link{position:fixed;z-index:20;top:10px;left:10px;padding:10px;background:var(--ink);color:var(--paper);transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}
@media(max-width:700px){.masthead{top:max(24px,env(safe-area-inset-top));left:22px;right:22px}.wordmark{font-size:22px}.edition{font-size:8px;letter-spacing:.8px}.scene-caption{left:22px;top:22%;gap:8px}.scene-caption p{font-size:10px;letter-spacing:1px}.scene-caption .cross{font-size:16px}.side-note{right:19px;font-size:8px;top:28%}.status{top:86px;left:22px;max-width:calc(100% - 44px)}.control-panel{padding:24px 22px max(18px,env(safe-area-inset-bottom))}.control-topline{display:block;margin-bottom:12px}.gesture-guide{font-size:10px}.gesture-guide small{display:none}.buttons{margin-top:12px;gap:5px}button{font-size:10px;padding:10px 12px;min-height:40px}.timeline{grid-template-columns:58px 1fr 68px;gap:10px;padding-top:9px}.timeline label,.timeline output{font-size:9px}.reference-panel{right:22px;top:100px;width:min(280px,64vw);max-height:calc(100dvh - 295px)}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Responsive full-viewport presentation; device chrome belongs to the browser. */
:root{--stage-width:100vw;--stage-height:100dvh;--bezel:0px;--screen-radius:0px}
html{overflow-x:hidden}
body{background:var(--paper);overflow-x:hidden}
body::before,body::after{content:none;display:none}
#scene{inset:0;left:0;top:0;width:var(--stage-width);height:var(--stage-height);transform:none;border-radius:0;outline:none;box-shadow:none}
.masthead,.scene-caption,.side-note,.status,.skip-link,.reference-panel,.control-topline,.timeline label,#frameSlider{display:none!important}
.control-panel{left:0;right:0;bottom:0;width:var(--stage-width);transform:none;padding:0 12px max(18px,env(safe-area-inset-bottom));background:none;border:0;pointer-events:none}
.timeline{display:block;padding:0;border:0;text-align:center}
.timeline #frameLabel{display:block;text-align:center;font-size:10px;line-height:1.4;letter-spacing:.5px}

/* First screen stays in place; scroll controls only its opacity. */
body{min-height:750vh}
#journey{height:750vh}
#introScreen{position:fixed;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--stage-width);height:var(--stage-height);background:#fff;border-radius:var(--screen-radius);overflow:hidden;pointer-events:none;will-change:opacity}
#introScreen img{display:block;width:100%;height:100%;object-fit:contain;padding:calc(var(--stage-width) * 56 / 393) 0 calc(var(--stage-width) * 34 / 393);user-select:none}

/* Real load progress becomes the wordmark underline before the first gesture. */
#introScreen .brand-artwork{display:block;width:100%;height:calc(100% - var(--stage-width) * 90 / 393);margin-top:calc(var(--stage-width) * 56 / 393);overflow:visible;user-select:none}
.brand-wordmark,.brand-arrow,.brand-welcome,.brand-underline{opacity:0}
.brand-welcome{font-family:Arial,sans-serif;font-size:27px;letter-spacing:1px;fill:#000}
.brand-revealed .brand-underline{opacity:1}
.brand-arriving .brand-wordmark{opacity:1;transition:opacity 1.5s ease}
.brand-ready .brand-wordmark{animation:brand-breathe 3s ease-in-out infinite}
.brand-ready .brand-arrow,.brand-ready .brand-welcome{opacity:1;transition:opacity .65s ease}
@keyframes brand-breathe{0%,100%{opacity:1}50%{opacity:0}}
body.is-loading .control-panel{visibility:hidden}
#loadingScreen{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--stage-width);height:var(--stage-height);border-radius:var(--screen-radius);overflow:hidden;--loading-line-y:50%;color:#fff;pointer-events:auto;touch-action:none}
.loading-shutter{position:absolute;left:0;right:0;background:#000;transition:transform 1s cubic-bezier(.65,0,.35,1);will-change:transform}
.loading-top{top:0;height:var(--loading-line-y);transform-origin:top}
.loading-bottom{top:var(--loading-line-y);bottom:0;transform-origin:bottom}
.loading-terminal{position:absolute;z-index:1;inset:0;font-family:Consolas,"Courier New",monospace;font-size:calc(var(--stage-width) * 9 / 393);line-height:1.9;letter-spacing:.12px;color:#fff;text-shadow:0 0 4px #ffffff38}
.loading-code-upper,.loading-code-lower{position:absolute;left:7%;width:86%}
.loading-code-upper{bottom:calc(100% - var(--loading-line-y) + var(--stage-width) * 18 / 393)}
.loading-code-lower{top:calc(var(--loading-line-y) + var(--stage-width) * 18 / 393)}
.loading-code-row{white-space:pre;min-height:1.9em;transition:opacity .15s ease}
.loading-code-row.is-typing::after{content:"";display:inline-block;width:1px;height:.9em;margin-left:1px;vertical-align:-.06em;background:currentColor}
.loading-code-row.log-cleared{opacity:0;animation:none}
@keyframes code-arrive{from{opacity:0}to{opacity:1}}
.loading-progress{position:absolute;z-index:2;top:var(--loading-line-y);height:1.4px;transform:translateY(-50%);background:#ffffff25;overflow:hidden}
.loading-progress>span{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .25s ease,background .8s ease;box-shadow:0 0 4px #ffffff66}
.loading-complete .loading-progress{box-shadow:0 0 5px #ffffff66}
.loading-reveal .loading-shutter{transform:scaleY(0)}
.loading-reveal .loading-progress{background:transparent;box-shadow:none}
.loading-reveal .loading-progress>span{background:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);box-shadow:none}
.loading-error .loading-terminal{font-size:11px;left:7%;max-width:85%;top:30%;white-space:pre-wrap;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.loading-shutter{transition-duration:.08s}.brand-arriving .brand-wordmark{transition-duration:.08s}.brand-ready .brand-wordmark{animation:none}.brand-ready .brand-arrow,.brand-ready .brand-welcome{transition:none}.loading-code-row{animation:none;transition:none}}

.loading-terminal{font-size:calc(var(--stage-width) * 11 / 393)}
.loading-reveal .loading-top{mask-image:linear-gradient(to bottom,#000 calc(100% - 12px),transparent)}
.loading-reveal .loading-bottom{mask-image:linear-gradient(to top,#000 calc(100% - 12px),transparent)}
.loading-progress>span{transition:opacity .8s ease}
.loading-reveal .loading-progress>span{background:#fff;opacity:0}