/* GIAHÀO MEDIA · LOVE STORIES — DIRECTOR'S CUT V11
   GPU-conscious, mobile first. Animation is compositor-only where possible. */
:root{--ink:#f5f4fc;--muted:#aebbd8;--soft:#dce4fb;--gold:#f4d19f;--lilac:#c3b2fa;--night:#080f29;--border:rgba(189,200,250,.19);--btn:#d8c7ff;--shell:min(1300px,100%);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{overflow-x:hidden;background:#070d24;color:var(--ink);font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #f6dfa8;outline-offset:4px}a{color:inherit;text-decoration:none}button[disabled]{cursor:default;opacity:.34}
.experience{min-height:100svh;position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 53% 42%,#14264b 0%,#0a1531 41%,#060d22 88%);transition:background .6s ease}
.experience[data-chapter="1"]{background:radial-gradient(ellipse at 50% 42%,#293460 0%,#101940 44%,#060b23 90%)}
.experience[data-chapter="2"]{background:radial-gradient(ellipse at 50% 45%,#24275b 0%,#121935 49%,#070d24 95%)}
.experience[data-chapter="3"]{background:radial-gradient(ellipse at 50% 38%,#263453 0%,#111a31 48%,#070d20 92%)}
.experience[data-chapter="4"]{background:radial-gradient(ellipse at 50% 43%,#30305f 0%,#131832 48%,#060c1e 90%)}
.world,.world-vignette,.world-stars,#star-canvas{position:absolute;inset:0;pointer-events:none}.world{z-index:0;overflow:hidden;contain:layout paint}.world-stars{background-image:radial-gradient(1px 1px at 12% 16%,#ffffffbd 95%,transparent),radial-gradient(1px 1px at 87% 30%,#fffbd5bd 95%,transparent),radial-gradient(1px 1px at 46% 12%,#ffffff9c 95%,transparent),radial-gradient(1px 1px at 75% 87%,#ffffffb3 95%,transparent),radial-gradient(1px 1px at 23% 69%,#ffffff9c 95%,transparent),radial-gradient(1.5px 1.5px at 65% 49%,#fff9d1a6 95%,transparent);background-size:367px 283px;opacity:.65}.world-vignette{background:radial-gradient(ellipse at 50% 48%,transparent 45%,#0508198c 100%)}#star-canvas{width:100%;height:100%;opacity:.9}
.world-glow{position:absolute;pointer-events:none;will-change:auto;border-radius:50%;opacity:.45}.glow-one{width:min(58vw,650px);aspect-ratio:1;left:-22%;top:-20%;background:radial-gradient(circle,#5968c863,transparent 66%);filter:blur(21px)}.glow-two{width:min(64vw,740px);aspect-ratio:1;right:-26%;bottom:-39%;background:radial-gradient(circle,#4c82cb62,transparent 66%);filter:blur(27px)}
.film-bars{pointer-events:none;position:absolute;inset:0;z-index:7}.film-bars i{display:block;position:absolute;left:0;right:0;height:clamp(6px,1.8vw,17px);background:#050711a3}.film-bars i:first-child{top:0}.film-bars i:last-child{bottom:0}
.film-header,.film-progress,.film-footer,.film-stage{position:relative;z-index:2;width:var(--shell);margin-inline:auto}.film-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(27px,3vw,40px) clamp(20px,4.8vw,68px) 0;gap:20px}.film-brand{display:inline-flex;gap:10px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.15em;line-height:1.25}.film-brand small{display:block;color:#9baecb;font-size:9px;letter-spacing:.22em;margin-top:4px}.brand-icon{border:1px solid #b3c4f776;border-radius:50%;display:grid;place-items:center;width:37px;height:37px;color:#d8c8ff;font-size:21px;box-shadow:0 0 15px #b8c3ff19}.film-actions{display:flex;align-items:center;gap:22px}.film-edition{font-size:9px;letter-spacing:.22em;color:#8fa2c8;font-weight:700}.sound-control{border:1px solid var(--border);background:#ffffff08;color:#e6eafc;display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:11px 16px;border-radius:100px;font-size:11px;font-weight:700;min-height:43px;transition:background .2s,border .2s}.sound-control:hover{background:#ffffff16;border-color:#d7dffb69}.sound-control[aria-pressed="true"]{border-color:#c1b3f480;color:#f2e2ff}.sound-icon{font-size:15px}
.film-progress{padding:24px clamp(20px,4.8vw,68px) 0}.film-progress-label{display:flex;justify-content:space-between;gap:14px;font-size:10px;letter-spacing:.18em;color:#a6b6d6;font-weight:700}.film-progress-label span:last-child{font-variant-numeric:tabular-nums;color:#efd8bd}.film-progress-track{height:1px;background:#bec6ef30;margin-top:14px;overflow:visible}.film-progress-track i{display:block;width:20%;height:2px;background:linear-gradient(90deg,#9ebcff,#d9b4f1,#f5d09a);box-shadow:0 0 12px #b8baffaa;transition:width .6s cubic-bezier(.24,.7,.25,1)}
.film-stage{flex:1;display:grid;place-items:center;align-content:stretch;padding:22px clamp(20px,4.8vw,68px) 16px;min-height:min(680px,calc(100svh - 235px))}.chapter{grid-area:1/1;width:100%;max-width:1120px;display:none;opacity:0;transform:translate3d(0,26px,0)}.chapter.current{display:block;animation:chapterAppear .8s cubic-bezier(.19,.78,.25,1) forwards}.chapter.leaving{display:block;opacity:1;animation:chapterLeave .25s ease-in forwards}.chapter h1,.chapter h2,.chapter p{overflow-wrap:anywhere}.chapter h1:focus,.chapter h2:focus{outline:0}
@keyframes chapterAppear{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes chapterLeave{to{opacity:0;transform:translate3d(0,-20px,0)}}
.chapter-eyebrow{color:#b3caff;font-size:10px;letter-spacing:.24em;font-weight:800;text-transform:uppercase;line-height:1.9;margin:0 0 22px}.dot-glow{display:inline-block;width:6px;height:6px;background:#d0e4ff;border-radius:50%;margin-right:11px;box-shadow:0 0 13px #afc5ff}
.opening-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:center;min-height:clamp(420px,60svh,680px)}.opening-copy{max-width:680px;z-index:2}.film-title{font-size:clamp(41px,4.9vw,77px);font-weight:700;letter-spacing:-.067em;line-height:1.17;margin:0 0 24px;text-wrap:balance}.film-title em{display:block;color:var(--gold);font-weight:600;font-style:normal;text-shadow:0 4px 44px #d5aaff25}.film-description{font-size:clamp(13px,1.2vw,16px);color:var(--muted);line-height:2;max-width:565px;margin:0 0 30px}.opening-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:#8fa5c9;font-size:9px;line-height:1.9;letter-spacing:.16em;margin:34px 0 0;font-weight:700}.opening-meta span{display:block;width:3px;height:3px;border-radius:50%;background:#edc9a1}
.opening-visual{width:min(39vw,445px);aspect-ratio:1;margin:auto;position:relative;display:grid;place-items:center;isolation:isolate;filter:drop-shadow(0 0 50px #819df519)}.opening-visual:before{content:"";position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e4defb66,#9c92e336 29%,#27397f35 65%,transparent 72%);box-shadow:0 0 90px #8e9ffb30}.orbit{position:absolute;border:1px solid #b0baff55;border-radius:50%}.orbit-outer{inset:3%;transform:rotate(-22deg) scaleY(.74);border-style:dashed;animation:orbitMove 42s linear infinite}.orbit-mid{inset:15%;border-color:#cbb3f8a6;transform:rotate(33deg) scaleY(.82);box-shadow:0 0 30px #98bbff1a;animation:orbitMove 33s linear infinite reverse}.orbit-inner{inset:27%;border-color:#e2d4ffaa;background:radial-gradient(circle,#828ecb26,transparent 70%)}.orb-heart{font-family:Georgia,serif;font-size:clamp(80px,12vw,165px);line-height:1;color:#f7dfc6;text-shadow:0 0 32px #c7aefa,0 0 80px #8aabf5;animation:heartBreath 5s ease-in-out infinite}.orbit-spark{position:absolute;font-size:24px;color:#fce6bf;filter:drop-shadow(0 0 12px #adc5ff)}.spark-a{top:4%;left:44%}.spark-b{bottom:19%;right:2%}.spark-c{bottom:6%;left:16%}.chapter-actions{display:flex;flex-wrap:wrap;gap:11px;align-items:center}.center-actions{justify-content:center;margin-top:27px}.primary-action,.secondary-action{display:inline-flex;align-items:center;gap:18px;justify-content:center;border-radius:999px;min-height:53px;padding:14px 24px;font-size:12px;line-height:1.5;font-weight:800;transition:transform .2s,background .2s,border .2s}.primary-action{border:1px solid #fff5;background:linear-gradient(110deg,#b9c8ff,#d0b4f4,#f4d5b6);color:#14203a;box-shadow:0 15px 35px #677cdd35}.primary-action span{font-size:19px;font-weight:500}.primary-action:hover{transform:translateY(-2px);box-shadow:0 20px 42px #677cdd56}.secondary-action{border:1px solid #a6bce658;background:#ffffff0c;color:#e4eafd}.secondary-action:hover{background:#fff2}
.name-scene,.wishes-scene,.message-scene,.final-scene{text-align:center;width:100%;max-width:1000px;margin:auto;padding:20px 0 38px}.scene-lead,.scene-description{font-size:clamp(13px,1.35vw,16px);line-height:2;color:#c4d1e7;max-width:640px;margin:0 auto}.scene-lead{margin-top:-4px}.celestial-name-wrap{position:relative;display:grid;place-items:center;min-height:clamp(200px,34vh,340px);margin:10px auto 14px}.celestial-halo{position:absolute;width:min(48vw,320px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#d6c6ff29,transparent 63%);box-shadow:0 0 90px #8b9ef32f}.celestial-halo i{position:absolute;border-radius:50%;border:1px solid #d3d4ff7a;inset:9%;transform:rotate(-25deg) scaleY(.67)}.celestial-halo i:nth-child(2){inset:18%;transform:rotate(53deg) scaleY(.58);border-color:#ffe1ac77}.celestial-halo i:nth-child(3){inset:28%;border-color:#b5d7ff80}.celestial-name{position:relative;font-size:clamp(46px,8vw,104px);font-weight:800;letter-spacing:-.07em;line-height:1.2;margin:0;max-width:100%;color:#fff6e7;text-shadow:0 0 24px #d0b9ffa8,0 0 80px #95b3ff8c;animation:nameReveal .9s .24s both;word-break:break-word}.name-scene .scene-description{margin:0 auto 25px}
.scene-title{font-size:clamp(31px,4.7vw,60px);letter-spacing:-.063em;line-height:1.22;margin:0 auto 24px;max-width:900px;text-wrap:balance}.scene-title em{font-style:normal;color:#f3d4b1}.wishes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;text-align:left;margin:35px auto 14px}.wish-card{border:1px solid #a4b0ef35;background:linear-gradient(144deg,#ffffff0d,#94abef08);border-radius:22px;padding:22px 22px 26px;min-height:225px;position:relative;overflow:hidden;transition:transform .25s,border-color .25s}.wish-card:hover{transform:translateY(-3px);border-color:#cbb2f887}.wish-card:before{content:"";position:absolute;width:140px;height:140px;right:-60px;top:-65px;background:radial-gradient(circle,#b6a6ff23,transparent 75%)}.wish-card>span{font-size:10px;letter-spacing:.15em;color:#9caed1}.wish-symbol{font-family:Georgia,serif;font-size:39px;color:#ead5ff;margin:8px 0 10px}.wish-card h3{font-size:16px;margin:3px 0 10px;color:#f5ebff}.wish-card p{font-size:12px;line-height:1.85;color:#aebedf;margin:0}.current .wish-card{animation:chapterAppear .7s backwards}.current .wish-card:nth-child(2){animation-delay:.12s}.current .wish-card:nth-child(3){animation-delay:.24s}.wish-interaction{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;min-height:42px;margin-top:7px}.wish-star{display:inline-flex;align-items:center;gap:9px;border:0;background:none;color:#e4d6ff;font-size:23px;padding:5px 12px}.wish-star span{font-size:11px;color:#b7c8ea;letter-spacing:.04em}.wish-star:hover{color:#ffe1a8}.wish-interaction>span{font-size:11px;color:#d9c2fa}
.message-scene{max-width:910px}.letter-frame{position:relative;text-align:left;border:1px solid #cdb6e457;border-radius:5px;padding:clamp(28px,5vw,58px);background:linear-gradient(155deg,#e0e8ff10,#aeaffc06 58%,#ffe4c80b);margin:30px auto 12px;box-shadow:0 20px 65px #0004,inset 0 0 0 1px #fff1}.letter-frame:before,.letter-frame:after{content:"";position:absolute;width:24px;height:24px;border-color:#e7c9aa;opacity:.7}.letter-frame:before{border-top:1px solid;border-left:1px solid;left:10px;top:10px}.letter-frame:after{border-bottom:1px solid;border-right:1px solid;right:10px;bottom:10px}.letter-ornament{font-family:Georgia,serif;font-size:75px;line-height:.5;color:#f2d5bd;margin-bottom:14px}.letter-message{white-space:pre-wrap;overflow-wrap:anywhere;color:#f1f2ff;font-size:clamp(16px,2vw,22px);line-height:2.05;letter-spacing:-.013em;margin:0 0 27px;max-height:50vh;overflow-y:auto;scrollbar-width:thin}.letter-signature{border-top:1px solid #dddfff29;padding-top:19px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:11px;color:#bfc8e3}.letter-signature span{letter-spacing:.13em;font-size:10px;text-transform:uppercase}.letter-signature strong{color:#f7ddb9;font-size:16px;line-height:1.7}.letter-signature small{color:#98a9cb}
.final-scene{max-width:800px}.final-symbol{width:clamp(116px,18vw,170px);height:clamp(116px,18vw,170px);display:grid;place-items:center;border:1px solid #b8adf977;border-radius:50%;margin:10px auto 24px;color:#f7deb7;font-family:Georgia,serif;font-size:90px;box-shadow:0 0 0 19px #9faee812,0 0 80px #c1b0fa4b;animation:heartBreath 4s ease-in-out infinite}.final-scene .scene-description{max-width:590px}.ending-credit{color:#9dacc8;font-size:10px;letter-spacing:.26em;margin-top:30px}
.film-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px clamp(20px,4.8vw,68px) 34px}.film-footer button{display:inline-flex;align-items:center;gap:7px;color:#d8ddfa;background:none;border:0;font-size:12px;min-height:44px;padding:10px 0}.film-footer-copy{color:#7f94b8;font-family:Georgia,serif;font-style:italic;font-size:13px;text-align:center}
.portal-overlay{position:fixed;inset:0;background:radial-gradient(circle at 50% 50%,#e4e3ff 0%,#bbc8fa 15%,#273969 48%,#070d24 100%);z-index:8;opacity:0;pointer-events:none;transform:scale(1.6)}.portal-overlay.is-playing{animation:lightPortal .62s ease-in-out forwards}.spark-field{pointer-events:none;position:fixed;inset:0;z-index:5;overflow:hidden}.spark-field i{position:absolute;left:50%;top:50%;display:block;width:var(--sz);height:var(--sz);border-radius:50%;background:#f9e7cc;box-shadow:0 0 9px #e8d6fb;animation:burstOut 1s ease-out forwards}.spark-field i.heart{font-family:Georgia,serif;width:auto;height:auto;background:none;border:0;color:#f8d8e1;font-size:23px}
@keyframes burstOut{0%{opacity:0;transform:translate3d(0,0,0) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate3d(var(--tx),var(--ty),0) scale(.2)}}@keyframes lightPortal{0%{opacity:0;transform:scale(1.6)}38%{opacity:.78;transform:scale(1)}70%{opacity:.5;transform:scale(.95)}100%{opacity:0;transform:scale(.8)}}@keyframes orbitMove{to{transform:rotate(360deg) scaleY(.75)}}@keyframes heartBreath{50%{transform:scale(1.045)}}@keyframes nameReveal{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:900px){.film-edition{display:none}.opening-layout{grid-template-columns:1fr;gap:8px;align-items:start;padding-top:32px}.opening-visual{order:-1;width:min(56vw,260px);margin:0 auto}.film-title{font-size:clamp(38px,6.5vw,66px)}.film-stage{min-height:calc(100svh - 220px)}.wishes-grid{grid-template-columns:1fr;gap:9px;margin:22px auto 7px}.wish-card{min-height:0;display:grid;grid-template-columns:40px 1fr;column-gap:11px;align-items:center;padding:12px 16px}.wish-card>span{align-self:center}.wish-symbol{grid-row:1 / span 2;grid-column:1;font-size:31px;margin:0}.wish-card>span{display:none}.wish-card h3{grid-column:2;font-size:14px;margin:0}.wish-card p{grid-column:2;font-size:12px;margin-top:3px}.wishes-scene,.message-scene{padding-top:22px}}
@media(max-width:580px){.film-header{padding:22px 17px 0}.film-brand{font-size:10px}.film-brand small{font-size:8px}.film-actions{gap:8px}.sound-control{padding:10px 11px;font-size:10px;min-height:39px}.film-progress{padding:20px 18px 0}.film-progress-label{font-size:9px;letter-spacing:.12em}.film-stage{padding:12px 18px 4px;min-height:calc(100svh - 195px)}.opening-layout{padding-top:9px}.opening-visual{width:min(49vw,195px)}.orbit-spark{font-size:18px}.orb-heart{font-size:79px}.chapter-eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:13px}.film-title{font-size:clamp(33px,8.9vw,48px);line-height:1.17;letter-spacing:-.06em;margin-bottom:14px}.film-description{font-size:12px;line-height:1.85;margin-bottom:20px}.opening-meta{gap:7px;font-size:8px;margin-top:23px}.primary-action,.secondary-action{font-size:12px;padding:13px 17px;min-height:49px}.film-footer{padding:6px 19px 19px}.film-footer-copy{font-size:10px;max-width:160px}.name-scene,.wishes-scene,.message-scene,.final-scene{padding:18px 0 27px}.celestial-name-wrap{min-height:210px;margin-top:0}.celestial-halo{width:220px}.celestial-name{font-size:clamp(41px,11vw,63px)}.scene-title{font-size:clamp(30px,7.8vw,44px);margin-bottom:16px}.scene-lead,.scene-description{font-size:12px;line-height:1.9}.wishes-grid{gap:8px;margin:17px auto 9px}.wish-card{padding:12px;min-height:0}.wish-card h3{font-size:13px}.wish-card p{font-size:11px;line-height:1.55}.wish-interaction{margin-top:2px}.letter-frame{margin:18px 0 5px;padding:20px 18px}.letter-message{font-size:14px;line-height:1.9;max-height:43svh}.letter-ornament{font-size:48px}.letter-signature strong{font-size:13px}.final-symbol{width:107px;height:107px;font-size:65px;margin:5px auto 26px}.ending-credit{font-size:9px;margin-top:20px}}
@media(max-height:740px) and (max-width:580px){.opening-visual{width:min(32vw,145px)}.opening-layout{padding-top:3px}.film-title{font-size:clamp(30px,7.4vw,42px)}.opening-meta{display:none}.film-stage{min-height:480px}.celestial-name-wrap{min-height:165px}.celestial-halo{width:180px}.wishes-grid{gap:6px}.wish-card{padding:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.orb-heart,.final-symbol{animation:none!important}.chapter.current{opacity:1;transform:none}}

/* ===== GIAHÀO MEDIA V12 · BEYOND THE STARS ===== */
:root{--v12-pearl:#f8e7c3;--v12-glass:rgba(171,186,241,.12)}
.experience[data-accent="blue"]{--v12-pearl:#d2ecff;--v12-glass:rgba(115,200,255,.13)}
.experience[data-accent="rose"]{--v12-pearl:#ffd4e9;--v12-glass:rgba(255,153,200,.12)}
.experience[data-accent="sunset"]{--v12-pearl:#ffdab0;--v12-glass:rgba(240,163,109,.13)}
.experience{background:radial-gradient(ellipse at 50% 35%,#1e2e60 0%,#101d3d 47%,#070c25 93%)}
.chapter.current .chapter-eyebrow{animation:v12Rise .7s .05s both}
.chapter.current .film-title,.chapter.current .scene-title{animation:v12Rise .8s .13s both}
.chapter.current .film-description,.chapter.current .scene-description{animation:v12Rise .7s .28s both}
.chapter.current .chapter-actions{animation:v12Rise .6s .38s both}
@keyframes v12Rise{from{opacity:0;transform:translate3d(0,13px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.opening-visual{isolation:isolate}
.opening-aura{position:absolute;inset:8%;z-index:-1;background:radial-gradient(circle,#d0c4ff38,transparent 72%);border-radius:50%;box-shadow:0 0 65px #9b9ff12f;pointer-events:none}
.celestial-name-wrap{isolation:isolate}
.constellation{position:absolute;z-index:0;width:min(75vw,580px);height:auto;pointer-events:none;opacity:.68;overflow:visible}
.constellation path{stroke-dasharray:740;stroke-dashoffset:740;animation:v12Constellation 2.8s .12s ease-out both}
.constellation circle{filter:drop-shadow(0 0 3px #d8e8ff)}
.name-aura{position:absolute;width:min(55vw,370px);aspect-ratio:1;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#c2b6fb25 2%,#98b2f20a 45%,transparent 70%)}
.celestial-name{z-index:1;font-size:clamp(42px,7vw,94px);color:var(--v12-pearl);text-shadow:0 0 23px #9daaff75,0 0 55px #8d87ed55;max-width:860px;padding:0 12px}
@keyframes v12Constellation{to{stroke-dashoffset:0}}
.wish-card{color:inherit;font-family:inherit;width:100%;text-align:left;appearance:none;cursor:pointer;outline-offset:3px}
.wish-card:focus-visible{outline:2px solid var(--v12-pearl)}
.wish-card.lit{border-color:#e2d5a9aa;background:linear-gradient(136deg,#ecddab20,#a6b8f511);box-shadow:inset 0 0 0 1px #f6dcaa26,0 0 28px #f3d19a18}
.wish-card.lit .wish-symbol{color:var(--v12-pearl);text-shadow:0 0 15px #f2db9f}
.wish-card.lit::after{content:'✦';position:absolute;right:13px;top:10px;font-size:20px;color:var(--v12-pearl);animation:v12Rise .35s both}
.wish-counter{font-size:11px;color:#e2dafa;text-align:center}
.wish-counter strong{color:var(--v12-pearl)}
.wish-interaction{flex-direction:column;gap:4px;padding:8px 0 10px}
.wish-interaction>span{min-height:18px}
.letter-frame{isolation:isolate;overflow:hidden}
.letter-message{position:relative;outline:none;transition:filter .6s ease,opacity .6s ease}
.letter-cover{display:none;text-align:center;position:absolute;z-index:2;left:14%;right:14%;top:28%;padding:10px;border-radius:14px;pointer-events:none}
.letter-cover span{display:block;font-size:10px;letter-spacing:.22em;color:#ddc6f1;margin:5px auto 14px}
.letter-cover strong{display:block;font:italic clamp(18px,2.5vw,25px)/1.6 Georgia,serif;color:#ffe7c0;margin:0 auto 19px;max-width:450px}
.letter-cover button{pointer-events:auto}
.letter-frame.is-sealed .letter-message,.letter-frame.is-sealed .letter-signature{filter:blur(12px);opacity:.14;user-select:none;pointer-events:none}
.letter-frame.is-sealed .letter-cover{display:block;pointer-events:auto}
.letter-frame.revealed .letter-cover{display:none}
.letter-frame.revealed .letter-message{animation:v12Rise .55s .07s both}
.final-ceremony{margin:12px auto 23px;text-align:center;display:grid;justify-items:center;gap:7px}
.ceremony-button{border:1px solid #c8c1f34c;border-radius:999px;background:var(--v12-glass);color:#f8e4cb;min-height:50px;display:flex;align-items:center;gap:11px;padding:8px 20px;font-size:11px;letter-spacing:.015em}
.ceremony-heart{font-family:Georgia,serif;font-size:26px;line-height:1}
.ceremony-button.released{border-color:#f9d6a1;background:#ffe0ae20}
.ceremony-button.released .ceremony-heart{animation:v12Heart .7s 1 both;color:var(--v12-pearl)}
.final-ceremony p{font-size:10px;color:#aab9da;line-height:1.8;margin:0 0 3px}
@keyframes v12Heart{0%,100%{transform:scale(1)}35%{transform:scale(1.4)}}
.final-scene .chapter-actions{gap:10px;flex-wrap:wrap}
.film-edition{font-size:10px;letter-spacing:.14em}
@media(max-width:900px){.constellation{width:min(93vw,490px)}.letter-cover{left:7%;right:7%;top:28%}}
@media(max-width:580px){.opening-aura{box-shadow:none}.constellation{width:min(95vw,420px)}.name-aura{width:230px}.wish-card{display:grid}.wish-card.lit:after{font-size:16px}.letter-cover{left:5%;right:5%;top:20%}.letter-cover strong{font-size:17px;line-height:1.5}.letter-cover span{font-size:8px}.letter-message{min-height:160px}.final-ceremony{margin:10px auto 18px}.ceremony-button{font-size:10px;min-height:46px}.final-scene .chapter-actions{display:grid;justify-items:stretch}.final-scene .chapter-actions button{width:100%}}
@media(max-width:360px){.celestial-name{font-size:38px}.wishes-scene .scene-title{font-size:28px}.letter-cover{top:24%;padding:4px}.letter-cover strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.constellation path{stroke-dashoffset:0;animation:none}.chapter.current .chapter-eyebrow,.chapter.current .film-title,.chapter.current .scene-title,.chapter.current .film-description,.chapter.current .scene-description,.chapter.current .chapter-actions{animation:none!important}.ceremony-button.released .ceremony-heart{animation:none}}

/* V13 — Starlight Edition. Retains all five V12 scenes. */
:root{--story-tint:#7763bd;--story-rgb:153,139,225}
.experience[data-accent="rose"]{--story-tint:#ae5b85;--story-rgb:236,138,182;--gold:#ffd4e9}
.experience[data-accent="blue"]{--story-tint:#407fba;--story-rgb:115,200,255;--gold:#d2ecff}
.experience[data-accent="sunset"]{--story-tint:#ad734a;--story-rgb:240,163,109;--gold:#ffdab0}
.experience::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 65% 22%,rgba(var(--story-rgb),.17),transparent 65%);z-index:0}
.opening-aura{background:radial-gradient(circle,rgba(var(--story-rgb),.25),transparent 72%)}
.scene-title em{color:var(--v12-pearl)}
.chapter-nav{position:relative;z-index:3;display:flex;justify-content:space-between;gap:8px;width:min(660px,100%);margin:18px auto 0;padding-inline:20px}
.chapter-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#acbbdc;background:transparent;border:0;min-width:44px;min-height:48px;padding:5px;font-size:11px;line-height:1.5;touch-action:manipulation}
.chapter-nav button>span:first-child{display:grid;place-items:center;width:28px;height:28px;border:1px solid #889bc75c;border-radius:50%;font-size:10px;font-variant-numeric:tabular-nums;transition:background .25s,border-color .25s}
.chapter-nav [aria-current="step"]{color:var(--v12-pearl)}
.chapter-nav [aria-current="step"]>span:first-child{background:rgba(var(--story-rgb),.22);border-color:var(--v12-pearl);box-shadow:0 0 18px rgba(var(--story-rgb),.2)}
.film-header{padding-top:max(25px,env(safe-area-inset-top))}
.film-footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
.prepare{padding-top:max(25px,env(safe-area-inset-top));padding-bottom:max(25px,env(safe-area-inset-bottom))}
.film-stage,.chapter,.opening-copy,.opening-layout>*{min-width:0}
.letter-frame.is-sealed{min-height:340px;display:grid;align-content:center}
.letter-frame.is-sealed .letter-message,.letter-frame.is-sealed .letter-signature,.letter-frame.is-sealed .letter-ornament{visibility:hidden;filter:none}
.letter-cover{inset:0!important;padding:28px!important;align-content:center;min-height:100%}
.letter-frame.is-sealed .letter-cover{display:grid;justify-items:center}
.letter-cover strong{overflow-wrap:anywhere}
.letter-frame.revealed .letter-message{max-height:none;overflow:visible}
.film-description,.scene-description{font-size:clamp(14px,1.3vw,17px)}
.wish-card p{font-size:13px;line-height:1.8}
.final-ceremony p{font-size:12px}
.sound-control,.wish-star,.film-footer button{min-height:44px}
button,a{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
.page-hidden *,.page-hidden *::before,.page-hidden *::after{animation-play-state:paused!important}
@media(max-width:580px){
 .film-brand{letter-spacing:.08em}.film-brand small{font-size:9px}.sound-control{font-size:11px}
 .chapter-nav{gap:0;margin-top:14px;padding-inline:12px}.chapter-nav button{font-size:10px;padding-inline:2px}
 .film-stage{min-height:calc(100svh - 280px)}
 .chapter-eyebrow{font-size:10px}.film-description,.scene-lead,.scene-description{font-size:14px;line-height:1.85}
 .wish-card h3{font-size:15px}.wish-card p{font-size:13px;line-height:1.7}
 .wish-counter,.wish-star span{font-size:12px}.letter-message{font-size:16px;line-height:1.95}
 .letter-frame.is-sealed{min-height:330px}.letter-cover span{font-size:10px}.letter-cover strong{font-size:19px;line-height:1.6}
 .primary-action,.secondary-action{font-size:13px}.ceremony-button{font-size:12px}
 .film-footer-copy{font-size:11px}.film-footer button{min-width:48px}
 .glow-one,.glow-two{filter:none}.opening-visual{filter:none}
}
@media(max-width:360px){.film-brand{font-size:9px;gap:6px}.brand-icon{width:30px;height:30px}.chapter-nav button{font-size:9px}.film-header{gap:8px}.sound-control{padding-inline:9px}.film-stage{padding-inline:14px}}
@media(max-height:500px) and (orientation:landscape){.opening-layout{grid-template-columns:1.2fr .8fr;align-items:center;padding-top:12px}.opening-visual{order:0;width:170px}.film-stage{min-height:0}.film-title{font-size:35px}.chapter-nav{margin-top:10px}.celestial-name-wrap{min-height:180px}}
@media(prefers-reduced-motion:reduce){.chapter.current,.chapter.current *{animation:none!important;opacity:1;transform:none}.chapter.leaving{display:none}.portal-overlay{display:none}html{scroll-behavior:auto}}

/* Normalize path drawing to its real length across all screen sizes. */
.constellation path{stroke-dasharray:1;stroke-dashoffset:1;animation-name:v13Constellation}
@keyframes v13Constellation{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.constellation path{stroke-dashoffset:0;animation:none}}

/* V14 — A Sky of Our Own. A tactile, quieter cinema. */
.experience{--sky-light:0}
.cinema-curtain{position:fixed;inset:0;pointer-events:none;z-index:9;display:flex;visibility:hidden;overflow:hidden}
.cinema-curtain i{width:50%;height:100%;background:linear-gradient(110deg,#0c1129,#171c37);border-inline-end:1px solid #d7c1ee22}
.cinema-entered .cinema-curtain{visibility:visible;animation:v14CurtainHide 1.15s forwards}
.cinema-entered .cinema-curtain i:first-child{animation:v14CurtainLeft 1.1s cubic-bezier(.22,.7,.22,1) both}
.cinema-entered .cinema-curtain i:last-child{animation:v14CurtainRight 1.1s cubic-bezier(.22,.7,.22,1) both}
@keyframes v14CurtainLeft{to{transform:translateX(-101%)}}
@keyframes v14CurtainRight{to{transform:translateX(101%)}}
@keyframes v14CurtainHide{99%{visibility:visible}100%{visibility:hidden}}
.orbital-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-block:4%;color:#d0c7e4;font-size:8px;letter-spacing:.24em;transform:rotate(-14deg);pointer-events:none}
.opening-visual::after{content:"";position:absolute;inset:41%;border:1px solid #f2d4b75c;transform:rotate(45deg);border-radius:15%;pointer-events:none}
.sky-ritual{width:min(360px,100%);margin:-6px auto 24px}
.sky-switches{position:relative;display:flex;justify-content:space-between;gap:8px;isolation:isolate}
.sky-switches::before{content:"";height:1px;position:absolute;left:8%;right:8%;top:24px;background:linear-gradient(90deg,transparent,#a9b7e268,transparent);z-index:-1}
.sky-switches button{border:1px solid #9faed64a;border-radius:50%;width:48px;min-width:44px;height:48px;min-height:44px;background:#101a34;color:#8c9cbe;font-size:21px;display:grid;place-items:center;transition:color .25s,border-color .25s,transform .25s,background .25s}
.sky-switches button[aria-pressed="true"]{color:var(--v12-pearl);border-color:var(--v12-pearl);background:rgba(var(--story-rgb),.22);box-shadow:0 0 20px rgba(var(--story-rgb),.2)}
.sky-switches button:hover{transform:translateY(-2px)}
#sky-caption{font-size:12px;line-height:1.8;color:#c6cfe7;margin:13px 0 0;min-height:44px;overflow-wrap:anywhere}
.sky-complete .name-aura{background:radial-gradient(circle,rgba(var(--story-rgb),.3),transparent 68%)}
.constellation{transition:opacity .4s}
.letter-frame{border-radius:16px;border-color:#cbb8df70;background:linear-gradient(145deg,rgba(var(--story-rgb),.09),#10182b99);box-shadow:0 26px 70px #0005}
.letter-stamp{position:absolute;right:28px;top:20px;font:italic 13px/1.5 Georgia,serif;letter-spacing:.1em;color:#cdb7d9;opacity:.55}
.letter-cover::before{content:'♡';display:grid;place-items:center;width:59px;height:59px;border:1px solid #dcb8de88;border-radius:50%;font:36px Georgia,serif;color:var(--v12-pearl);margin-bottom:12px;box-shadow:0 0 0 6px #ccb3dc08}
.letter-frame.is-sealed{min-height:380px}
.letter-frame.revealed{animation:v14OpenLetter .7s ease both}
@keyframes v14OpenLetter{from{opacity:.65;transform:translateY(9px)}to{opacity:1;transform:none}}
.share-status{font-size:12px;line-height:1.8;min-height:22px;color:#c4d0e9;margin:15px auto 0;max-width:500px}
@media(min-width:901px){.name-scene{padding-top:0}.celestial-name-wrap{min-height:260px}.film-stage{padding-top:18px}.sky-ritual{margin-top:-10px}}
@media(max-width:580px){.sky-ritual{max-width:300px;margin-top:-5px}.sky-switches button{width:46px;height:46px}.orbital-label{font-size:6px;letter-spacing:.15em}.letter-stamp{right:20px;top:14px}.letter-cover::before{width:48px;height:48px;font-size:29px;margin-bottom:5px}.letter-cover strong{font-size:18px}.letter-cover span{margin-bottom:9px}.letter-frame.is-sealed{min-height:365px}}
@media(prefers-reduced-motion:reduce){.cinema-curtain{display:none!important}.sky-switches button:hover{transform:none}.letter-frame.revealed{animation:none}}
/* Keep the sealed cover in normal flow: its content can grow at large text sizes. */
.letter-frame.is-sealed{display:block;min-height:0;padding:0}
.letter-frame.is-sealed .letter-message,.letter-frame.is-sealed .letter-signature,.letter-frame.is-sealed .letter-ornament{display:none}
.letter-frame.is-sealed .letter-cover{position:relative!important;inset:auto!important;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px!important}
.letter-cover::before{flex-shrink:0}.letter-cover button{flex-shrink:0;max-width:100%}