@font-face{font-family:Smiley;src:url('assets/fonts/SmileySans.woff2') format('woff2');font-display:swap}
@font-face{font-family:Wenkai;src:url('assets/fonts/LXGWWenKai-Skymoni.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--story-bg);color:var(--story-ink);font:14px/1.7 Arial,'Microsoft YaHei',sans-serif}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--story-accent);outline-offset:5px}button:disabled{opacity:.4;cursor:default}button[hidden],[hidden]{display:none!important}.story-header{position:fixed;top:0;left:0;right:0;z-index:100;height:85px;display:flex;align-items:center;justify-content:space-between;padding:0 4.3%;border-bottom:1px solid color-mix(in srgb,var(--story-ink) 9%,transparent);background:color-mix(in srgb,var(--story-bg) 65%,transparent);backdrop-filter:blur(12px)}.story-brand{font-size:24px;font-weight:800;letter-spacing:-1.1px;display:flex;gap:24px;align-items:center}.story-brand span{font-size:10px;font-weight:400;letter-spacing:.06em;opacity:.6}.story-header>div{display:flex;gap:22px;align-items:center;font-size:11px}.story-header button{border:0;background:transparent;color:var(--story-ink);font-size:10px;opacity:.6}.story-world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.story-atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 35%,color-mix(in srgb,var(--story-accent) 14%,transparent),transparent 63%)}#story-canvas{position:absolute;width:100%;height:100%;display:block}.story-fallback{position:absolute;left:45%;right:0;top:28%;font:300 clamp(200px,30vw,450px)/1 Georgia,serif;color:var(--story-accent);opacity:.25;transform:rotate(-10deg)}.story-webgl .story-fallback{display:none}.story-runway{position:relative;z-index:2;padding:100px 7% 150px}.story-frame{padding:70px 0;max-width:700px}.story-stage{position:relative}.story-enhanced .story-runway{height:790svh;padding:0;pointer-events:none}.story-enhanced .story-stage{position:sticky;top:0;width:100%;height:100vh;height:100svh;pointer-events:none;perspective:none}.story-enhanced .story-frame{position:absolute;left:7%;top:22%;width:min(550px,43vw);max-width:none;padding:0;pointer-events:auto;transform-origin:center;will-change:transform,opacity;backface-visibility:hidden}.story-frame[inert]{pointer-events:none}.frame-surface{max-height:calc(100svh - 210px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--story-accent) 35%,transparent) transparent;padding:5px 15px 25px 0}.frame-eyebrow{font:10px/1.7 Consolas,monospace;letter-spacing:.13em;color:var(--story-accent);margin:0 0 28px;display:flex;align-items:center;gap:20px}.frame-eyebrow span{opacity:.6;white-space:nowrap}.story-frame h1{font:400 clamp(38px,4.7vw,69px)/1.13 Smiley,sans-serif;letter-spacing:-.025em;margin:0 0 27px;max-width:700px;text-wrap:balance}.frame-paragraph{font-size:13px;line-height:2;max-width:410px;color:color-mix(in srgb,var(--story-ink) 74%,var(--story-bg));margin:0 0 19px}.frame-note{font-size:11px;color:color-mix(in srgb,var(--story-accent) 68%,var(--story-ink));margin:0;max-width:410px;line-height:1.9}.story-widget{margin-top:30px;max-width:405px}.widget-label,.letter-form label{font-size:11px;margin:0 0 12px;display:block;color:var(--story-ink)}.choice-group{display:flex;flex-wrap:wrap;gap:9px}.choice-group button,.story-widget>button,.ending-links button,.final-memory>button{border:1px solid color-mix(in srgb,var(--story-accent) 50%,transparent);border-radius:30px;padding:10px 17px;background:color-mix(in srgb,var(--story-bg) 80%,transparent);color:var(--story-ink);font-size:11px;transition:background .2s,color .2s}.choice-group button[aria-pressed=true]{background:var(--story-accent);color:var(--story-bg);border-color:var(--story-accent)}.range-widget label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:12px}.range-widget input{accent-color:var(--story-accent);width:100%;height:6px;cursor:pointer}.range-widget small{display:block;margin-top:14px;font-size:9px;opacity:.5}.letter-form textarea{display:block;width:100%;padding:12px 14px;resize:vertical;max-height:150px;background:color-mix(in srgb,var(--story-bg) 60%,white);border:1px solid color-mix(in srgb,var(--story-accent) 35%,transparent);border-radius:3px;color:var(--story-ink);font-family:Wenkai,serif;line-height:1.6;font-size:15px}.letter-form>button{margin:12px 10px 0 0}.letter-form>span{font-size:9px;opacity:.55}.collect-object{display:flex;align-items:center;gap:12px;color:var(--story-ink);background:color-mix(in srgb,var(--story-bg) 70%,white);border:1px solid color-mix(in srgb,var(--story-accent) 55%,transparent);border-radius:30px;padding:10px 22px 10px 12px;font-size:12px;margin-top:25px;box-shadow:0 7px 30px color-mix(in srgb,var(--story-accent) 15%,transparent)}.collect-object span{color:var(--story-accent);font-size:29px;line-height:1.2;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--story-accent) 40%,transparent))}.collect-object.is-collected{opacity:1;background:color-mix(in srgb,var(--story-accent) 22%,var(--story-bg));font-size:11px;box-shadow:none;padding:12px 20px}.carry-note{margin:26px 0 0;padding:15px 20px;border-left:2px solid var(--story-accent);background:color-mix(in srgb,var(--story-bg) 80%,transparent);font:16px/1.8 Wenkai,serif;max-width:370px;white-space:pre-wrap;overflow-wrap:anywhere}.carry-note small{display:block;font:9px Arial,sans-serif;opacity:.5;margin-bottom:7px}.carry-note pre{font:11px/1.7 Consolas,monospace;margin:0;white-space:pre-wrap}.final-memory{margin:26px 0 0;padding:22px 24px;border:1px solid color-mix(in srgb,var(--story-accent) 30%,transparent);background:color-mix(in srgb,var(--story-bg) 90%,transparent);border-radius:10px;max-width:440px;white-space:normal;overflow-wrap:anywhere}.final-memory>small{display:block;font-size:10px;color:var(--story-accent);margin-bottom:9px}.final-memory>strong{display:block;font:400 32px/1.5 Smiley,sans-serif;margin:8px 0;color:var(--story-ink)}.final-memory>span{display:block;font-size:10px;opacity:.6;margin-top:12px}.final-memory p{font-size:12px;line-height:1.8;margin:0 0 13px}.final-memory pre{font:11px/1.9 Consolas,monospace;white-space:pre-wrap;margin:0}.final-letter p{font:20px/1.6 Wenkai,serif}.final-letter footer{font:11px/1.8 Wenkai,serif;text-align:right;opacity:.6;margin-top:20px}.reward-code{font:700 35px Consolas,monospace;letter-spacing:.15em;display:block;margin:10px 0}.final-memory [data-reward-code]{padding-top:20px}.final-memory [data-reward-code] small{font-size:10px;opacity:.65}.final-memory [data-copy-code]{border:0;border-bottom:1px solid var(--story-accent);padding:5px 0;background:none;font-size:11px;color:var(--story-ink)}.memory-marks{display:flex;gap:22px;padding:10px 0}.memory-marks>span{display:grid;place-items:center;font-size:29px;opacity:.17;color:var(--story-accent)}.memory-marks>span.is-lit{opacity:1}.memory-marks small{font:9px Consolas,monospace;margin-top:3px}.ending-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:24px;font-size:10px}.ending-links a{border-bottom:1px solid color-mix(in srgb,var(--story-accent) 30%,transparent);padding-bottom:4px}.ending-links button{font-size:10px;padding:8px 13px}.story-bottom{position:fixed;bottom:0;left:0;right:0;z-index:90;padding:18px 4.3% 22px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(transparent,var(--story-bg) 35%);color:var(--story-ink)}.bottom-heading{min-width:190px;max-width:360px}.story-inventory{font:9px Consolas,monospace;letter-spacing:.12em;color:var(--story-accent);margin-bottom:7px}.bottom-heading>[data-stop-label]{font-size:10px;opacity:.6;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.story-stops{display:flex;gap:9px;align-items:center}.story-stop{background:none;border:0;color:var(--story-ink);padding:12px 5px;position:relative;display:flex;flex-direction:column;gap:8px;align-items:center;min-width:34px}.story-stop span{font:9px Consolas,monospace;opacity:.4}.story-stop i{display:block;width:26px;height:2px;background:var(--story-ink);opacity:.15;transition:opacity .3s,transform .3s}.story-stop[aria-current=step] span,.story-stop[aria-current=step] i{opacity:1}.story-stop[aria-current=step] i{background:var(--story-accent);transform:scaleX(1.3)}.story-directions{display:flex;gap:14px;align-items:center}.story-directions button{background:none;border:1px solid color-mix(in srgb,var(--story-ink) 19%,transparent);color:var(--story-ink);border-radius:30px;padding:11px 17px;font-size:10px;white-space:nowrap}.story-directions [data-prev]{padding:10px 14px}.story-announcement{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:150;max-width:85vw;background:var(--story-ink);color:var(--story-bg);padding:10px 17px;border-radius:30px;font-size:11px;pointer-events:none;text-align:center}.story-announcement:empty{display:none}.story-route{position:absolute;inset:16% 0 13%;width:100%;height:71%;opacity:.24}.story-route path{fill:none;stroke:var(--story-accent);stroke-width:1}.story-route .route-ghost{opacity:.23}.story-route .route-ink{stroke-width:2}.story-route .route-traveller{fill:var(--story-accent)}.memory-star-points circle{fill:var(--story-accent);opacity:.16}.memory-star-points circle.is-lit{opacity:1}.theme-scenery{position:absolute;inset:0;pointer-events:none}.no-script{position:fixed;bottom:0;left:0;right:0;text-align:center;background:var(--story-bg);z-index:120;font-size:12px}
/* 01 — typography pulls apart and comes back as a giant end mark. */
.story-sky .story-atmosphere{background:linear-gradient(160deg,#f4fbff,#d2e4fb)}.story-sky .story-frame h1{font-weight:800;font-size:clamp(45px,5.8vw,82px)}.story-sky .frame-eyebrow{letter-spacing:.24em}.story-sky .theme-scenery::before{content:'S K Y';position:absolute;bottom:13%;right:4%;font:800 13vw/1 Arial,sans-serif;letter-spacing:calc(var(--user-value)*1.4vw);color:#6988a515;transform:translateX(calc((1 - var(--story-progress))*30%))}.story-sky .frame-5{left:12%;width:65vw}.story-sky .frame-5 h1{font-size:clamp(55px,8vw,115px)}
/* 02 — cartoon ascent: clouds continue upwards for the whole trip, warm light at delivery. */
.story-cloud .story-atmosphere{background:linear-gradient(0deg,#fff4df,#d8f2fb 45%,#acdced);transform:translateY(calc(var(--story-progress)*-5%));height:110%}.story-cloud .story-frame{top:27%;width:450px}.story-cloud .story-frame h1{font-family:Wenkai,serif;font-size:clamp(42px,4.5vw,63px);line-height:1.2}.story-cloud .theme-scenery i{position:absolute;left:70%;top:23%;width:270px;height:85px;background:#fff8;border-radius:80px;box-shadow:-40px 10px 0 -8px #fff8,42px -35px 0 -3px #fff8;transform:translateY(calc(var(--story-progress)*-450px))}.story-cloud .theme-scenery i:nth-child(2){left:-9%;top:76%;transform:translateY(calc(var(--story-progress)*-700px));opacity:.8}.story-cloud .theme-scenery i:nth-child(3){left:80%;top:110%;transform:translateY(calc(var(--story-progress)*-750px));opacity:.7}.story-cloud .theme-scenery i:nth-child(4){left:7%;top:130%;transform:translateY(calc(var(--story-progress)*-400px));opacity:.5}.story-cloud .theme-scenery i:nth-child(5){width:80px;height:80px;border-radius:50%;background:#ffe9ac;left:80%;top:12%;box-shadow:0 0 80px #ffe9acbb;opacity:calc(.2 + var(--story-progress)*.8)}.story-cloud .frame-surface{background:#f5fbff33;border-radius:30px;padding:26px;backdrop-filter:blur(3px)}.story-cloud .story-stop i{border-radius:50%;width:8px;height:8px}.story-cloud .collect-object{border-width:2px;box-shadow:0 5px 0 #c0dce6;background:#fff9e8}.story-cloud .story-inventory{background:#fff8;padding:7px 11px;border-radius:30px;display:inline-block;color:#648aa0}
/* 03 — one unbroken figure-eight: text orbits around the same knot. */
.story-knot .story-route{opacity:.45}.story-knot .story-atmosphere{background:radial-gradient(ellipse at 60% 50%,#353047,#090d17 80%)}.story-knot .story-frame{left:7%;top:27%;width:500px;transform-origin:60vw 20vh}.story-knot .story-frame h1{font-size:clamp(45px,5.8vw,81px)}.story-knot .frame-paragraph{background:#0d101977;padding:14px 17px;margin-left:-17px}.story-knot .story-stops{border:1px solid #b4a6ef25;border-radius:50%;padding:0 14px}
/* 04 — whole-page scrapbook leaves, a visible spine and paper texture. */
.story-archive .story-atmosphere{background:radial-gradient(ellipse at 50% 50%,#eef0e6,#c6d0c2)}.story-archive .story-frame{left:10%;top:14%;width:70vw;max-width:950px;transform-origin:left center}.story-archive .frame-surface{background:repeating-linear-gradient(0deg,transparent 0 32px,#9ab19a14 32px 33px),#fffef0;min-height:66svh;max-height:74svh;padding:55px 8% 45px;box-shadow:5px 20px 60px #354b4823;border-left:16px solid #bdcab7;position:relative}.story-archive .frame-surface::before{content:'';position:absolute;top:0;bottom:0;left:55%;border-left:1px solid #a1bda125}.story-archive .story-frame h1{font-family:Wenkai,serif;max-width:500px;font-size:clamp(40px,4.2vw,62px)}.story-archive .frame-paragraph{max-width:430px}.scrap-date{font:9px Consolas,monospace;position:absolute;top:20px;right:25px;color:#9eab98;letter-spacing:.15em}.scrap-tape{position:absolute;right:12%;top:52%;width:90px;height:25px;background:#deca8790;transform:rotate(-9deg)}.story-archive .carry-note{background:#ede8ca;transform:rotate(-3deg);box-shadow:3px 6px 12px #40594813}.story-archive .story-stop i{width:18px;height:24px;background:#587a6020;border:1px solid #587a6040}.story-archive .story-stop[aria-current=step] i{background:#587a6080;transform:rotate(-7deg)}
/* 05 — depth instead of stacked sections. All six acts approach then pass the camera. */
.story-tunnel .story-frame{left:20%;top:28%;width:60%;text-align:center;transform-origin:center}.story-tunnel .frame-paragraph,.story-tunnel .frame-note,.story-tunnel .story-widget,.story-tunnel .final-memory{margin-left:auto;margin-right:auto}.story-tunnel .frame-eyebrow,.story-tunnel .ending-links{justify-content:center}.story-tunnel .story-frame h1{text-shadow:0 0 30px #020611,0 2px 30px #020611;font-size:clamp(46px,6.4vw,90px)}.story-tunnel .frame-paragraph{background:#040914b5;padding:12px 20px}.story-tunnel .story-atmosphere{background:#020611}.story-tunnel .story-stop i{width:21px;height:27px;background:transparent;border:1px solid var(--story-accent);opacity:.2}.story-tunnel .story-stop[aria-current=step] i{transform:scale(1.15);background:transparent}
/* 06 — a complete orbit; the satellite and camera never return to a generic side position. */
.story-orbit .story-frame{left:6%;top:28%;width:460px;transform-origin:60vw 20vh}.story-orbit .frame-surface{padding:25px;border-left:1px solid #d4f09e50;background:linear-gradient(90deg,#101827ef,#10182766 80%,transparent)}.story-orbit .story-route{opacity:.26}.story-orbit .story-frame h1{font-size:clamp(39px,4.3vw,63px)}.story-orbit .story-stops{gap:15px}.story-orbit .story-stop i{width:9px;height:9px;border-radius:50%;background:var(--story-accent);outline:1px solid #d4f09e33;outline-offset:5px}.story-orbit .theme-scenery::after{content:'CURIOSITY / ORBIT';position:absolute;right:7%;top:17%;writing-mode:vertical-rl;letter-spacing:.28em;font:9px Consolas,monospace;color:#d4f09e66}
/* 07 — expanding ribbon and a diagonal editorial reading path. */
.story-ribbon .story-frame{left:9%;top:25%;width:520px}.story-ribbon .story-frame h1{font-family:Wenkai,serif;font-size:clamp(43px,5.3vw,75px);line-height:1.25}.story-ribbon .story-route{opacity:.4}.story-ribbon .route-ink{stroke-width:5}.story-ribbon .frame-surface{background:linear-gradient(90deg,#f3eae3ce,transparent);padding-right:30px}.story-ribbon .story-stops{transform:rotate(-4deg)}.story-ribbon .story-stop i{height:4px;width:33px;border-radius:5px}
/* 08 — refracted slices, diagonal wipe and changing light across every chapter. */
.story-prism .story-frame{left:6%;top:23%;width:570px}.story-prism .frame-surface{border-left:3px solid var(--story-accent);padding-left:30px;background:linear-gradient(90deg,#f0eff6d9,transparent)}.story-prism .theme-scenery::before,.story-prism .theme-scenery::after{content:'';position:absolute;width:130%;height:32%;left:-15%;top:30%;transform:rotate(calc(-35deg + var(--story-progress)*55deg));background:linear-gradient(90deg,transparent,#b9b5ee19,#abd3db28,#e2c9dd1a,transparent);clip-path:polygon(0 0,100% 70%,100% 100%,0 30%)}.story-prism .theme-scenery::after{transform:rotate(calc(20deg - var(--story-progress)*65deg));opacity:.6}.story-prism .story-stop i{height:12px;width:12px;transform:rotate(45deg);background:var(--story-accent)}.story-prism .story-stop[aria-current=step] i{transform:rotate(135deg)}
/* 09 — growth carries across the journey, from seed to a fully opened flower. */
.story-bloom .story-frame{left:7%;top:24%;width:500px}.story-bloom .story-frame h1{font-family:Wenkai,serif;font-size:clamp(42px,4.9vw,68px)}.growth-tag{display:inline-block;padding:6px 12px;border:1px solid #70876d44;border-radius:99px;font:9px Consolas,monospace;color:#71836b;margin-bottom:22px}.story-bloom .story-atmosphere{background:radial-gradient(ellipse at 74% 53%,color-mix(in srgb,var(--story-accent) 22%,transparent),transparent 55%),linear-gradient(#edf0e7,#d5dfcb)}.story-bloom .story-stops{border-bottom:1px solid #79927555}.story-bloom .story-stop i{width:10px;height:18px;border-radius:100% 0;background:#78986c;transform:rotate(-35deg)}.story-bloom .story-stop[aria-current=step] i{transform:rotate(15deg) scale(1.3)}
/* 10 — no soft editorial transitions: a terminal reveals itself scanline by scanline. */
.story-signal .story-frame{left:7%;top:20%;width:580px}.story-signal .frame-surface{background:#061018cf;border:1px solid #68dfb236;padding:30px;box-shadow:0 0 50px #03110b30}.story-signal .story-frame h1{font:500 clamp(33px,3.7vw,53px)/1.3 Consolas,'Microsoft YaHei',monospace;letter-spacing:-.035em}.terminal-line{font:10px Consolas,monospace;color:var(--story-accent);border-bottom:1px solid #68dfb222;padding-bottom:14px;margin-bottom:23px}.story-signal .theme-scenery{background:repeating-linear-gradient(0deg,transparent 0 4px,#69dfb20a 4px 5px)}.story-signal .theme-scenery::before{content:'';position:absolute;left:0;right:0;height:12vh;top:calc(var(--story-progress)*90%);background:linear-gradient(transparent,#68dfb215,transparent)}.story-signal .choice-group{display:grid;grid-template-columns:1fr}.story-signal .choice-group button{border-radius:0;text-align:left;padding:12px 15px;font-family:Consolas,monospace}.story-signal .story-stops{gap:2px}.story-signal .story-stop i{height:9px;width:30px}.story-signal .final-memory{border-radius:0}.story-signal .frame-eyebrow{font-size:8px}
/* 11 — unfolding paper becomes the actual letter surface; the message travels with it. */
.story-paper .story-frame{left:9%;top:16%;width:550px;transform-origin:center bottom}.story-paper .frame-surface{position:relative;background:#fffcf2e8;padding:40px 37px 35px;border:1px solid #a9956e21;box-shadow:0 20px 60px #79684818;min-height:60svh}.story-paper .story-frame h1{font-family:Wenkai,serif;font-size:clamp(34px,4vw,56px);line-height:1.35}.story-paper .frame-eyebrow{font-size:8px;margin-top:30px}.letter-postmark{position:absolute;right:22px;top:19px;border:1px dashed #ae604877;border-radius:50%;width:64px;height:64px;display:grid;place-content:center;text-align:center;font:8px/1.7 Consolas,monospace;color:#ae604899;transform:rotate(-15deg)}.story-paper .story-stop i{width:24px;height:18px;background:transparent;border:1px solid #ae604877;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.story-paper .story-stop[aria-current=step] i{background:#ae604866;transform:rotate(-10deg)}.story-paper .final-letter{transform:rotate(-2deg);background:#fffdf3;border-radius:0}
/* 12 — each page hangs from the same ceiling, pivoting with the mobile sculpture. */
.story-mobile .story-frame{left:56%;top:24%;width:470px;transform-origin:50% -60vh}.story-mobile .frame-surface{background:#f4f1e9a1;border-radius:0 0 70px 0;padding:30px 33px}.story-mobile .story-frame::before{content:'';position:absolute;left:50%;bottom:100%;height:60vh;width:1px;background:#323b462c}.story-mobile .story-frame h1{font-family:Wenkai,serif;font-size:clamp(38px,4.5vw,63px)}.story-mobile .story-stops{border-top:1px solid #323b4633;padding-top:5px}.story-mobile .story-stop i{height:10px;width:10px;border-radius:50%;background:#bd533e;position:relative}.story-mobile .story-stop i::before{content:'';height:13px;width:1px;background:#323b4644;position:absolute;bottom:100%;left:50%}
/* 13 — street signs, urban parallax and a collected passport. */
.story-voxel .story-frame{left:7%;top:20%;width:490px}.story-voxel .frame-surface{background:#f5f9fccf;border:1px solid #ffffff88;padding:30px;border-radius:8px;box-shadow:8px 10px 0 #87a2b52b}.street-sign{display:inline-block;padding:8px 14px;background:#34536e;color:#ecf3fa;font-size:10px;margin-bottom:25px;transform:rotate(-3deg)}.story-voxel .story-frame h1{font-size:clamp(38px,4.4vw,63px)}.story-voxel .theme-scenery::before{content:'';position:absolute;left:0;right:0;bottom:13%;height:1px;border-bottom:1px dashed #34536e44;transform:translateX(calc(var(--story-progress)*-20%))}.story-voxel .story-stop i{height:15px;width:18px;border:1px solid #34536e66;background:#8dabb8;transform:skewY(-15deg)}.story-voxel .story-stop[aria-current=step] i{transform:skewY(-15deg) translateY(-5px);background:var(--story-accent)}.story-voxel .collect-object{border-radius:5px;border-style:dashed;box-shadow:none}
/* 14 — text is uncovered by the tide, while the same water stays in view. */
.story-wave .story-frame{left:9%;top:20%;width:650px}.story-wave .story-frame h1{font-family:Wenkai,serif;font-size:clamp(43px,5vw,74px)}.story-wave .frame-paragraph{max-width:430px}.story-wave .frame-surface{padding:25px 25px 25px 0;text-shadow:0 1px 20px #102b36}.story-wave .story-atmosphere{background:linear-gradient(#15313c,#1c424c 65%,#102b36)}.story-wave .story-stop i{height:5px;width:31px;border-radius:50%;transform:rotate(-8deg)}.story-wave .story-stop[aria-current=step] i{transform:rotate(8deg);background:var(--story-accent)}.story-wave .theme-scenery::before{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#84c5be0f);transform:translateY(calc((var(--user-value) - .5)*90px))}
/* 15 — the content is a door leaf; subsequent rooms occupy the same continuous space. */
.story-portal .story-frame{left:13%;top:18%;width:570px;transform-origin:left center}.story-portal .frame-surface{min-height:62svh;background:#f5f2e8e6;border:1px solid #aa826147;border-width:9px 1px 1px 9px;padding:43px 38px;box-shadow:inset 8px 0 20px #534a3f0c}.story-portal .story-frame h1{font-family:Wenkai,serif;font-size:clamp(36px,4.2vw,59px);line-height:1.3}.story-portal .story-stop i{height:22px;width:15px;border:1px solid #aa8261;background:transparent;border-bottom:0}.story-portal .story-stop[aria-current=step] i{transform:perspective(80px) rotateY(-35deg);background:#aa826133}
/* 16 — reading slices rotate around the same growing helix. */
.story-helix .story-frame{left:7%;top:25%;width:540px;transform-origin:70vw center}.slice-label{font:10px Consolas,monospace;color:#c5a5e888;display:block;margin-bottom:25px;letter-spacing:.18em}.story-helix .frame-surface{background:linear-gradient(90deg,#171627df,transparent);border-left:1px solid #c5a5e855;padding-left:28px}.story-helix .story-frame h1{font-size:clamp(38px,4.7vw,65px)}.story-helix .story-stops{gap:13px;transform:skewY(-4deg)}.story-helix .story-stop i{height:2px;width:23px;transform:rotate(-35deg)}.story-helix .story-stop[aria-current=step] i{transform:rotate(35deg)}
/* 17 — a radial dial changes the whole reading axis, not just an icon. */
.story-clock .story-frame{left:7%;top:26%;width:520px;transform-origin:70vw 22vh}.dial-label{font:9px Consolas,monospace;letter-spacing:.14em;border-block:3px double #9b724044;padding:9px 0;display:inline-block;margin-bottom:22px}.story-clock .story-frame h1{font-family:Wenkai,serif;font-size:clamp(41px,4.8vw,68px);line-height:1.25}.story-clock .frame-surface{background:linear-gradient(90deg,#e9e1d1df,transparent)}.story-clock .story-stop{transform:rotate(-12deg)}.story-clock .story-stop:nth-child(2n){transform:rotate(12deg)}.story-clock .story-stop i{height:15px;width:2px}.story-clock .story-stops{border-top:1px solid #9b72403b;border-radius:50%;padding-inline:20px}
/* 18 — woven strips complete across the full viewport and remain at the end. */
.story-fabric .story-frame{left:8%;top:24%;width:550px}.story-fabric .story-frame h1{font-family:Wenkai,serif;font-size:clamp(41px,4.8vw,68px);line-height:1.3}.story-fabric .frame-surface{background:repeating-linear-gradient(0deg,transparent 0 5px,#a17aaa05 5px 6px),#ede8f1b8;padding:25px 30px;border:1px dashed #a17aaa4a}.story-fabric .theme-scenery{background:repeating-linear-gradient(90deg,transparent 0 32px,#a17aaa10 32px 33px);clip-path:inset(0 calc((1 - var(--story-progress))*100%) 0 0)}.story-fabric .theme-scenery::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 28px,#a17aaa12 28px 29px)}.story-fabric .story-stop i{height:7px;width:27px;background:repeating-linear-gradient(90deg,var(--story-accent) 0 2px,transparent 2px 4px)}.story-fabric .story-stop[aria-current=step] i{height:10px;transform:scale(1)}
/* 19 — a wall-sized horizontal manifesto; typography and content slide as one strip. */
.story-monolith .story-frame{left:0;top:12%;width:100vw;padding:0 8%;transform-origin:center}.story-monolith .frame-surface{position:relative;min-height:71svh;padding:35px 0;background:linear-gradient(90deg,#e7e9dfc9 0,transparent 85%);overflow:hidden}.story-monolith .story-frame h1{font-size:clamp(57px,8vw,118px);font-weight:800;max-width:950px;line-height:1.02;position:relative;margin-top:35px}.story-monolith .frame-eyebrow{font-weight:700}.poster-number{position:absolute;right:1%;top:0;font:800 30vw/1 Arial,sans-serif;color:#171d2209;letter-spacing:-.09em}.story-monolith .frame-paragraph{font-size:14px;max-width:470px;background:#e7e9df66}.story-monolith .final-memory{background:var(--story-ink);color:var(--story-bg);border-radius:0}.story-monolith .final-memory strong{color:var(--story-accent);font-size:60px}.story-monolith .story-stop i{height:5px;width:36px;background:var(--story-ink)}.story-monolith .choice-group button{border-radius:0;border-width:2px}.story-monolith .story-bottom{border-top:3px solid var(--story-ink)}
/* 20 — the map remembers the journey. Its ink and chosen stars stay until the final frame. */
.story-constellation .story-frame{left:7%;top:27%;width:520px}.story-constellation .story-frame h1{font-family:Wenkai,serif;font-size:clamp(41px,4.7vw,66px);line-height:1.3}.story-constellation .frame-surface{padding:25px;background:radial-gradient(ellipse at 20% 50%,#111b32ed,#111b32bb 60%,transparent)}.story-constellation .story-route{opacity:.6}.story-constellation .collect-object{background:#1d2d459c;color:#e3e8f2;border-color:#e4cc8c66;box-shadow:0 0 30px #e4cc8c11}.story-constellation .story-stop i{width:7px;height:7px;border-radius:50%;background:var(--story-accent)}.story-constellation .story-stop[aria-current=step] i{box-shadow:0 0 13px var(--story-accent)}
@media(max-height:780px) and (min-width:721px){.story-enhanced .story-frame{top:17%}.frame-surface{max-height:calc(100svh - 185px)}.story-frame h1{font-size:clamp(33px,4vw,57px);margin-bottom:20px}.frame-eyebrow{margin-bottom:18px}.frame-paragraph{font-size:12px}.story-widget{margin-top:20px}.story-archive .frame-surface,.story-paper .frame-surface,.story-portal .frame-surface{padding:28px 35px}.story-bottom{padding-bottom:13px}.story-header{height:72px}.story-monolith .story-frame h1{font-size:70px}}
@media(max-width:720px){
 .story-header{height:67px;padding:0 5%}.story-brand{font-size:21px;gap:10px}.story-brand span{display:none}.story-header>div{gap:14px;font-size:10px}.story-header button{font-size:9px}.story-enhanced .story-runway{height:850svh}.story-enhanced .story-frame{left:5%;top:32%;width:90%;padding:0;transform-origin:center}.frame-surface,.story-paper .frame-surface,.story-archive .frame-surface,.story-portal .frame-surface,.story-monolith .frame-surface{padding:22px 23px;min-height:0;max-height:calc(66svh - 105px);background:color-mix(in srgb,var(--story-bg) 91%,transparent);border-radius:13px;backdrop-filter:blur(5px)}
 .story-page .story-frame h1{font-size:31px;line-height:1.18;margin:0 0 17px}.frame-eyebrow{font-size:8px;letter-spacing:.07em;gap:8px;margin:0 0 15px}.frame-eyebrow span{font-size:8px}.frame-paragraph{font-size:11px;line-height:1.9;margin-bottom:11px}.frame-note{font-size:9px;line-height:1.8}.story-widget{margin-top:19px}.choice-group button{padding:8px 12px;font-size:10px}.range-widget label{font-size:10px}.range-widget small{font-size:8px;margin-top:9px}.story-bottom{display:grid;grid-template-columns:1fr auto;padding:12px 5% 17px;gap:5px 12px}.bottom-heading{min-width:0;max-width:210px}.bottom-heading>[data-stop-label]{font-size:8px}.story-inventory{font-size:8px;letter-spacing:.035em;margin-bottom:3px}.story-stops{grid-row:2;grid-column:1/-1;justify-content:space-between;width:100%;gap:0!important;border:0!important;padding:0!important;transform:none!important}.story-stop{padding:7px 0 0;min-width:30px;gap:4px}.story-stop span{font-size:7px}.story-stop i{width:23px}.story-directions{gap:7px}.story-directions button{padding:8px 11px;font-size:9px}.story-directions [data-prev]{padding:7px 10px}.story-announcement{bottom:118px;font-size:10px;width:max-content;max-width:90%;padding:8px 14px}.story-route{opacity:.2;top:8%;height:35%}.story-fallback{left:0;top:11%;text-align:center;font-size:150px;width:100%}.collect-object{margin-top:18px;padding:7px 16px 7px 10px;font-size:10px}.collect-object span{font-size:25px}.final-memory{margin-top:18px;padding:16px 18px}.final-memory>strong{font-size:25px}.final-memory p{font-size:11px}.final-memory pre{font-size:10px}.ending-links{margin-top:17px;font-size:9px;gap:12px}.carry-note{margin-top:18px;font-size:14px;padding:12px 15px}.carry-note small{font-size:8px}.letter-form textarea{font-size:13px}.letter-form>span{display:block;margin-top:7px;font-size:8px}.story-paper .frame-eyebrow{margin-top:0;padding-right:40px}.letter-postmark{width:41px;height:41px;right:12px;top:13px;font-size:6px}.scrap-date{font-size:7px;top:8px;right:14px}.scrap-tape{display:none}.story-archive .frame-surface::before{display:none}.story-cloud .frame-surface{background:#f6fcffe6;border-radius:25px}.story-cloud .theme-scenery i{width:170px;height:55px;opacity:.6}.story-cloud .theme-scenery i:nth-child(5){width:50px;height:50px;left:78%;top:11%}.growth-tag,.dial-label,.slice-label{font-size:8px;margin-bottom:13px}.terminal-line{font-size:8px;padding-bottom:10px;margin-bottom:14px}.street-sign{font-size:8px;margin-bottom:15px;padding:5px 9px}.story-mobile .story-frame::before{height:35vh}.story-monolith .poster-number{font-size:50vw}.story-monolith .final-memory strong{font-size:40px}.story-monolith .frame-surface{overflow-y:auto}.story-tunnel .frame-eyebrow{justify-content:center}.story-tunnel .frame-paragraph{background:transparent;padding:0}.story-tunnel .frame-surface{background:#040914aa}.memory-marks{gap:17px}.memory-marks>span{font-size:24px}.story-paper .final-letter p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .story-enhanced .story-runway{height:auto!important;padding:110px 6% 160px}.story-enhanced .story-stage{position:relative;inset:auto;height:auto;perspective:none}.story-enhanced .story-frame{position:relative!important;inset:auto!important;width:100%!important;max-width:850px!important;margin:0 auto 80px;padding:0;pointer-events:auto;transform:none!important;clip-path:none!important;filter:none!important;opacity:1!important;visibility:visible!important}.story-enhanced .frame-surface{max-height:none;min-height:0;overflow:visible;padding:35px;background:var(--story-bg);border:1px solid color-mix(in srgb,var(--story-accent) 25%,transparent)}.story-frame::before{display:none!important}.story-frame h1{font-size:clamp(32px,5vw,60px)!important}.story-world{opacity:.3}.story-stop i{transition:none}.story-announcement{bottom:120px}.story-route{display:none}.story-bottom .story-inventory{display:none}.story-widget button{transition:none}
}