:root{color-scheme:dark;--ink:#0b1417;--text:#f2eedf;--quiet:#bdc7c7;--gold:#dcbf86;--gold-hi:#f6e3b0;--gold-lo:#a9843f;--metal:linear-gradient(180deg,#f8e8bd 0%,#e3c47f 42%,#b48b46 68%,#ecd49c 100%);--line:#ffffff20;--pad:4.5vw;--stage-h:100vh;--ease:cubic-bezier(.2,.7,.2,1)} @supports(height:100svh){:root{--stage-h:100svh}} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--text);font:15px/1.7 "Segoe UI",Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px} .skip-link{position:absolute;top:-100px;left:20px;background:var(--text);color:var(--ink);padding:10px;z-index:20}.skip-link:focus{top:10px} .review-strip{font-size:9px;letter-spacing:.15em;background:#192427;color:#c5d0cd;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px var(--pad)}.review-strip a{font-size:10px;letter-spacing:0;white-space:nowrap} /* Journey: a tall native-scroll track holding one sticky stage. Without JS it collapses to a single static view. */ .journey{position:relative;overflow-x:clip} /* v0.17.0: eight stage heights: chapters 1-6 one screen each, one more screen from the chapter-6 read moment to the flight gate (further native scroll launches the flight), plus a short landing. The finale plays on its own clock. */ .js .journey{height:calc(var(--stage-h) * 8)} .experience{position:relative;min-height:var(--stage-h);isolation:isolate;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr)} .js .experience{position:sticky;top:0;height:var(--stage-h);min-height:0;background:var(--ink)} .journey[data-fit="2"]{height:auto} .journey[data-fit="2"] .experience{position:relative;height:auto;min-height:var(--stage-h)} @media(max-height:460px){.js .journey{height:auto}.js .experience{position:relative;height:auto;min-height:var(--stage-h)}} #universe{position:absolute;inset:0;width:100%;height:100%;z-index:0;touch-action:pan-y;opacity:0;transition:opacity .6s}body.webgl-ready #universe{opacity:1} /* v0.12.0 flight sky (Canvas2D nebula + streaks) sits behind the transparent WebGL crest; hidden in static/fallback views. */ #flight-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0}body.webgl-ready:not(.static-mode) #flight-sky{opacity:1} .flight-layer{display:none} .js .flight-layer{display:block;position:absolute;inset:0;z-index:3;pointer-events:none} .flight-word{position:absolute;left:0;top:0;margin:0;display:inline-block;font:400 40px/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.01em;text-align:center;color:#f6ead0;text-shadow:0 0 .3em #0b1417f0,0 0 1em #0b1417c0,0 0 .5em #e8c97a3a;transform-origin:0 0;white-space:nowrap;opacity:0;visibility:hidden;will-change:transform,opacity} /* v0.14.0: six concurrent depth-projected phrases; each is translated + scaled (1/Z) by flight.js. */ /* Native CJK faces where available; Vietnamese stays in a serif with full diacritics. */ .flight-word:lang(ja){font-family:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","MS PMincho",serif;letter-spacing:.04em} .flight-word:lang(ko){font-family:"Noto Serif KR","Batang","AppleMyungjo","Nanum Myeongjo",serif;letter-spacing:.02em} .flight-word:lang(vi){font-family:Georgia,"Times New Roman","Noto Serif",serif} #replay[hidden]{display:none} .flight-measure{visibility:hidden!important;opacity:0!important;transform:none!important} .fallback-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:calc(.7 - var(--immerse,0) * .55);pointer-events:none;transform-origin:72% 50%;transform:translate3d(calc(var(--journey,0) * -5%),calc(var(--journey,0) * 2%),0) scale(calc(1 + var(--journey,0) * .28));transition:opacity .5s,transform .9s var(--ease)} body.webgl-ready .fallback-art{opacity:0}body.static-mode .fallback-art{opacity:calc(.7 - var(--immerse,0) * .55)}body.static-mode #universe{opacity:0} /* Scrims: the copy scrim (lateral; top on mobile) fades as the finale takes over; the bottom scrim always protects the controls. */ .experience::before,.experience::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none} .experience::before{background:linear-gradient(90deg,#0b1417e6 0%,#0b1417b0 32%,#0b141700 60%);opacity:calc(1 - var(--immerse,0) * .94)} .experience::after{background:linear-gradient(0deg,#0b1417d0 0%,#0b141700 24%)} .product-header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:28px var(--pad) 10px;pointer-events:none} /* v0.14.0 brand: emblem symbol left of the wordmark, one accessible link. Fades (opacity/visibility only, no layout shift) as the finale name arrives; script makes it inert while hidden and restores it on replay or navigation back. */ .brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;pointer-events:auto;border-radius:2px} .brand-symbol{display:block;flex:none;width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 6px #e2b85e30)} .js .brand{opacity:calc(1 - var(--brand-hide,0))} .experience[data-brand="hidden"] .brand{visibility:hidden} .wordmark{font:36px/1 Georgia,serif;letter-spacing:-.05em;display:flex;align-items:center;gap:10px}.brand-point{height:4px;width:4px;background:var(--gold);border-radius:50%;display:block;margin-top:9px;box-shadow:0 0 6px #e8c97a80} /* Brand accents: a finely beveled warm-gold face on the live wordmarks; plain gold where text clipping is unsupported. */ .wordmark,.finale-wordmark{color:var(--gold-hi)} @supports((-webkit-background-clip:text) or (background-clip:text)){.wordmark,.finale-wordmark{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} /* The large name is translucent ivory with a pale warm edge: lit lettering, never an opaque gold finish. */ .js .finale-wordmark{background-image:linear-gradient(180deg,#fffaeee6 6%,#f6ead0d9 50%,#e6d2a6cc 82%,#f3e6c8d9 96%)}} .language-switch{display:flex;align-items:center;gap:10px;pointer-events:auto;color:#96a5a3;font-size:11px}.language-switch button{border:0;background:transparent;color:#9fada9;font-size:11px;padding:8px 4px}.language-switch button[aria-pressed=true]{color:#f0e6c6;box-shadow:inset 0 -1px 0 var(--gold)} /* Copy column: every chapter shares one grid cell, so the tallest localized chapter reserves the space. */ .stage-main{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(16px,3vw,56px);min-width:0;padding:10px var(--pad);pointer-events:none} .stage-copy{flex:none;width:min(720px,max(46vw,500px));max-width:100%;pointer-events:auto} /* The chapter copy and actions yield as the immersive finale takes over; captions stay in the journey controls; the no-JS narrative is separate. */ .js .stage-copy{opacity:calc(1 - var(--immerse,0));transform:translate3d(calc(var(--immerse,0) * -28px),0,0)} .experience[data-copy="yielded"] .stage-copy{visibility:hidden} /* Finale without JS: the emblem sits beside (desktop) or below (mobile) the copy. Flex-basis 0 means it never takes room from the copy, and the size container hides it when the leftover region is too small to read. */ .finale-mark{flex:1 1 0;align-self:stretch;min-width:0;min-height:0;container:finale/size;display:grid;place-items:center;pointer-events:none} .finale-inner{margin:0;display:grid;justify-items:center;gap:clamp(8px,1.6vh,16px)} /* The target box, not the bitmap, is what the WebGL stars converge into, so a missing image never affects the silhouette. */ .finale-target{position:relative;width:min(100cqw,calc(100cqh - 70px),400px);aspect-ratio:1} .finale-emblem{display:block;width:100%;height:100%;filter:drop-shadow(0 0 14px #e2b85e26)} .finale-mark.is-missing .finale-emblem{visibility:hidden} .finale-wordmark{position:relative;font:400 clamp(26px,min(3vw,5vh),44px)/1.1 Georgia,serif;letter-spacing:-.04em;padding-bottom:12px} /* A restrained filigree echo: a hairline with a small centered jewel, like the crest's ribbon crossing. */ .finale-wordmark::after{content:"";position:absolute;left:50%;bottom:0;width:72px;height:5px;transform:translateX(-50%);background:radial-gradient(circle,var(--gold-hi) 0 1.5px,transparent 2px) center/5px 5px no-repeat,linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent) center/100% 1px no-repeat} @container finale (max-height:150px) or (max-width:120px){.finale-inner{display:none}} /* Immersive finale (JS): one layer over the whole safe area between header and bottom bar. A tight star crest sits behind a large live wordmark; no card, no container. Opacities follow scroll position (set by script). */ .js .finale-mark{position:absolute;inset:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:stretch;padding:0 var(--pad) 4px} .js .finale-mark[data-shown="0"] .finale-inner{visibility:hidden} .js .finale-inner{position:relative;min-width:0;min-height:0;container:crest/size;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;gap:0} /* --shrink (0-1, set by script) eases the crest down to its flight size so words pass beside it, then back to full. v0.13.0 flight size is about 19-20% larger than v0.12.0 (min(64cqh,40cqw)). */ .js .finale-target{grid-area:1/1;width:calc(min(97cqh,88cqw,820px) * (1 - var(--shrink,0)) + min(76cqh,48cqw,820px) * var(--flight-fit,1) * var(--shrink,0))} /* v0.15.0: invisible probe with the unscaled flight-size formula; flight.js reads it to plan the phrases and may set --flight-fit (<1) on .stage-main to reserve room at short/intermediate sizes. The final emblem size never changes. */ .finale-probe{display:none} .js .finale-probe{display:block;grid-area:1/1;width:min(76cqh,48cqw,820px);aspect-ratio:1;visibility:hidden;pointer-events:none} /* Bitmap: a quiet fallback for static view and unavailable WebGL; live 3D draws the emblem from stars only. */ .js .finale-emblem{opacity:calc(var(--emblem-in,0) * .55);transition:opacity .4s} body.webgl-ready:not(.static-mode) .finale-emblem{opacity:0;transition:none} .js .finale-wordmark{grid-area:1/1;font-size:clamp(48px,min(18cqw,19cqh),170px);line-height:1;letter-spacing:-.035em;padding:0 .04em .2em;white-space:nowrap;opacity:var(--name,0);transform:translate3d(0,calc((1 - var(--name-in,0)) * 18px),0);filter:drop-shadow(0 0 .16em #0b1417d8) drop-shadow(0 .02em .02em #0b1417a0)} .js .finale-wordmark::after{width:clamp(72px,1.5em,260px);height:7px;background-size:7px 7px,100% 1px;opacity:.75} .purpose{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 clamp(12px,2.4vh,22px);font-weight:600;line-height:1.5} .chapter-stack{display:grid} .chapter-copy{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translate3d(0,26px,0);filter:blur(4px);transition:opacity .45s ease,transform .7s var(--ease),filter .45s ease,visibility 0s linear .7s} .chapter-copy.is-before{transform:translate3d(0,-26px,0)} .chapter-copy.is-active{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .7s ease .15s,transform .9s var(--ease) .1s,filter .7s ease .15s,visibility 0s} .chapter-label{font-size:10px;letter-spacing:.15em;color:#b9c3c1;margin:0 0 clamp(10px,2vh,20px);line-height:1.5} .chapter-title{font:400 clamp(32px,min(4.4vw,7.2vh),76px)/1.06 Georgia,serif;letter-spacing:-.035em;margin:0;text-wrap:balance} .chapter-caption{font-size:15px;line-height:1.7;color:var(--quiet);max-width:440px;margin:clamp(14px,2.6vh,26px) 0 0} .stage-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(18px,3.4vh,32px)} .interest-button{padding:13px 20px;background:linear-gradient(180deg,#f4e6bd 0%,#e0c486 58%,#cdab68 100%);color:#162125;border:1px solid #ecd398;box-shadow:inset 0 1px 0 #fffbe8b0,inset 0 -1px 0 #8a6a3166,0 0 18px #d9b46a1f;font-size:11px;display:inline-flex;align-items:center;gap:32px}.interest-button span{font-size:21px;line-height:1} #read-story{font-size:11px;text-underline-offset:4px;color:#c7d1ce;padding:8px 0} /* Bottom bar sits in its own grid row; it can wrap but never crosses the copy. */ .stage-bar{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 36px;padding:12px var(--pad) clamp(16px,3.2vh,30px);pointer-events:none}.stage-bar button{pointer-events:auto} .journey-nav{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 26px} .progress-meta{display:grid;gap:9px;width:130px}#progress-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#d9cfae;line-height:1.3} .progress-track{position:relative;display:block;height:2px;background:#ffffff1f;overflow:hidden}.progress-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold) 70%,var(--gold-hi));transform:scaleX(0);transform-origin:0 50%} .scene-progress{display:flex;gap:10px}.scene-progress button{border:0;box-shadow:inset 0 1px 0 #778985;background:transparent;color:#9dafaa;font-size:10px;padding:10px 0 4px;width:32px;min-height:36px}.scene-progress button[aria-pressed=true]{box-shadow:inset 0 2px 0 #e8d6a2;color:#e8d6a2} .navigation{display:flex;gap:8px}.navigation button{width:36px;height:36px;border:1px solid #ffffff2b;background:transparent;color:var(--quiet)}.navigation button[aria-disabled=true]{opacity:.4;cursor:default} .scroll-cue{display:flex;align-items:center;gap:12px;margin:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#cfd7d3;line-height:1.4} .cue-mark{position:relative;flex:none;width:1px;height:30px;background:linear-gradient(#d7c39700,#d7c397)}.cue-mark::after{content:"";position:absolute;left:-3px;bottom:1px;width:5px;height:5px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg)} .view-group{display:grid;justify-items:end;gap:6px;text-align:right}.view-tools{display:flex;gap:20px} .view-tools button{border:0;border-bottom:1px solid #66817b;background:transparent;color:#c3d0cb;font-size:10px;padding:6px 0;white-space:nowrap}.view-tools button[aria-pressed=true]{color:#ead8aa;border-color:#ead8aa}.view-tools button:disabled{opacity:.5;cursor:default} .view-notes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 14px;margin:0;max-width:300px;font-size:9px;line-height:1.5;color:#aab8b4} /* v0.15.0 cinematic chrome (data-cinema=1: autoplay finale on the sticky stage). Navigation, cue and helper notes fade with the immersion and keep their slots (opacity/visibility only), so the bar, stage-main and header boxes never move. Pause and a quieter Static view stay; Replay is absolutely placed left of them and fades in at completion without taking layout space. */ .journey-nav,.scroll-cue,.view-notes{transition:opacity .5s ease,visibility 0s} .experience[data-cinema="1"] :is(.journey-nav,.scroll-cue,.view-notes){opacity:calc(1 - var(--immerse,0))} .experience[data-cinema="1"][data-copy="yielded"] :is(.journey-nav,.scroll-cue,.view-notes){visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s} .view-tools{position:relative} .experience[data-cinema="1"] .view-tools button{color:#b3c2bd;border-bottom-color:#51665f} .experience[data-cinema="1"] #replay{position:absolute;right:calc(100% + 20px);bottom:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s} .experience[data-cinema="1"] #replay[hidden]{display:block} .experience[data-cinema="1"] #replay:not([hidden]){opacity:1;visibility:visible;color:#ead8aa;border-bottom-color:#a9905c;transition:opacity .9s ease .2s,visibility 0s} /* Compact fit, chosen by script only when the tallest localized chapter would not fit. */ .journey[data-fit="1"] .product-header{padding-top:16px;padding-bottom:4px} .journey[data-fit="1"] .purpose{margin-bottom:8px} .journey[data-fit="1"] .chapter-title{font-size:clamp(26px,min(3.5vw,5.6vh),60px)} .journey[data-fit="1"] .chapter-caption{font-size:13.5px;line-height:1.6;margin-top:10px} .journey[data-fit="1"] .stage-actions{margin-top:14px} .journey[data-fit="1"] .stage-bar{padding-top:6px;padding-bottom:12px} .journey[data-fit="1"] #explore-hint{display:none} /* v0.16.0 no-JS narrative: rendered only inside