/* Scroll story: the CRT introduction hands off to the existing health scenes. */
html:has(body.intro-mode .retro-intro) { scroll-snap-type: none; }
body.intro-mode:has(.retro-intro) { background: #faf6e3; }
body.intro-mode:has(.retro-intro) .topbar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); width: min(850px,calc(100% - 40px)); min-height: 80px; padding: 10px 24px; gap: 22px; background: #fffefb; border: 2px solid #181a17; border-radius: 9px; box-shadow: 5px 5px 0 #181a17; z-index: 20; }
body.intro-mode:has(.retro-intro) .brand { color: #176b5b; font-family: Georgia,'Nanum Myeongjo',serif; font-size: 34px; letter-spacing: -.06em; font-weight: 900; }
body.intro-mode:has(.retro-intro) .brand-mark { display: none; }
body.intro-mode:has(.retro-intro) .topbar .service-flow-panel { margin-left: auto; flex: 0 0 auto; }
body.intro-mode:has(.retro-intro) .topbar .service-flow-panel li[data-auth-entry] button { color: #171a17; border-radius: 6px; padding: 11px 16px; }
body.intro-mode:has(.retro-intro) .topbar #sidebar-signup { background: #111; color: #fff; }
body.intro-mode:has(.retro-intro) .header-utilities { margin-left: 0; }
body.intro-mode:has(.retro-intro) #font-toggle { border: 0; background: transparent; color: #494a43; font-size: 12px; padding: 8px; }
body.intro-mode:has(.retro-intro) .app-shell { padding: 0; }
body.intro-mode:has(.retro-intro) .intro-screen { overflow: clip; background: #faf6e3; }
body.intro-mode:has(.retro-intro) .intro-screen::before { content: none; }
body.intro-mode .landing-first.retro-intro { display: block; position: relative; height: 255svh; min-height: 0; background: #faf6e3; }
.retro-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #faf6e3; isolation: isolate; }
.retro-computer { position: absolute; --retro-top-space: clamp(230px,18svh,320px); top: calc(var(--retro-top-space) - var(--retro-width) * .135); left: 50%; --retro-width: min(1280px,88vw,69svh); width: var(--retro-width); aspect-ratio: 1122/1402; transform: translateX(-50%) scale(var(--retro-scale,1)); transform-origin: 50% 42%; will-change: transform; }
.retro-computer-shell { width: 100%; height: 100%; display: block; object-fit: contain; mix-blend-mode: multiply; }
.retro-display { position: absolute; top: 20.3%; left: 16.9%; width: 66.2%; height: 37.4%; display: grid; place-items: center; text-align: center; color: #212923; overflow: hidden; border-radius: 6%; container-type: inline-size; }
.retro-message { padding: 5%; opacity: var(--retro-copy,1); transform: translateY(calc(var(--retro-copy-shift,0) * 1px)); }
.retro-eyebrow { font-size: clamp(13px,2.35cqw,20px); color: #4d6153; margin: 0 0 1.8cqw; font-weight: 600; }
body.intro-mode .landing-first.retro-intro #intro-title { font-family: Georgia,'Noto Serif KR','Batang',serif; font-weight: 700; font-size: clamp(28px,6.1cqw,52px); letter-spacing: -.07em; line-height: 1.35; text-shadow: none; color: #1b211b; margin: 0 0 2.5cqw; max-width: none; white-space: normal; word-break: keep-all; }
.retro-description { font-size: clamp(14px,2.35cqw,20px); line-height: 1.8; letter-spacing: -.035em; margin: 0; color: #4a5449; word-break: keep-all; }
.retro-meet { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: var(--retro-meet,0); transform: scale(var(--retro-meet-scale,.88)); pointer-events: none; }
.retro-meet img { width: 34%; height: 46%; object-fit: contain; mix-blend-mode: multiply; }
.retro-meet p { font-family: Georgia,'Batang',serif; font-weight: 800; color: #17251c; letter-spacing: -.08em; font-size: clamp(37px,5vw,70px); line-height: 1.2; margin: 0; }.retro-meet p span { color: #176b5b; }.retro-meet small { font-size: clamp(11px,1.1vw,16px); color: #59604f; margin-top: 6px; }
.retro-scroll { position: absolute; top: min(66%,calc(100svh - 115px - var(--retro-top-space) + var(--retro-width) * .135)); left: 50%; transform: translateX(-50%); width: max-content; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: transparent; color: #30392d; font-size: 14px; font-weight: 700; cursor: pointer; opacity: var(--retro-hint,1); }.retro-scroll span { font-size: 40px; line-height: 1; }
.retro-bottom { position: absolute; bottom: 24px; left: 40px; right: 330px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
body.intro-mode .retro-bottom .intro-safety-note { margin: 0; color: #65705f; font-size: 11px; max-width: 450px; }.retro-bottom .intro-safety-note p { margin: 0; }.retro-bottom .primary { background: #fffdf1; color: #233c2c; border: 1px solid #4f6855; border-radius: 5px; padding: 10px 20px; min-height: 48px; font-size: 16px; flex-shrink: 0; margin-right: 0; }
body.intro-mode:has(.retro-intro) .landing-pager { background: #fffef6; border: 1px solid #a8ad93; box-shadow: none; border-radius: 5px; z-index: 15; }
body.intro-mode:has(.retro-intro) .landing-pager button { background: #eeefdf; border-radius: 4px; }
body.intro-mode:has(.retro-intro) #story-health { position: relative; overflow: hidden; min-height: 110svh; padding-top: 140px; padding-bottom: 90px; background: #f5f4ef; color: #292e32; gap: 30px; }
body.intro-mode:has(.retro-intro) #story-health .story-copy { text-align: left; width: min(1100px,100%); max-width: 1100px; }
body.intro-mode:has(.retro-intro) #story-health .story-kicker { color: #176b5b; font-size: 17px; }
body.intro-mode:has(.retro-intro) #story-health h2 { display: inline; padding: 7px 17px; background: #e6ece5; color: #203e33; font-family: Georgia,'Batang',serif; font-size: clamp(32px,4.2vw,58px); line-height: 1.6; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
body.intro-mode:has(.retro-intro) #story-health .story-record-preview { background: #faf9f1; border-color: #a5c3b3; box-shadow: 0 16px 36px #193c3010; transform: rotate(-2deg); }
body.intro-mode:has(.retro-intro) #story-health .story-record-preview h3 { color: #293d31; }
body.intro-mode:has(.retro-intro) #story-health .story-record-categories li { color: #4d5d50; }
body.intro-mode:has(.retro-intro) #story-health .story-description { color: #52665f; font-size: clamp(18px,1.8vw,25px); }
body.intro-mode:has(.retro-intro) #story-health .zoom-guides,body.intro-mode:has(.retro-intro) #story-health .zoom-source { stroke: #7b9b88; }
body.intro-mode:has(.retro-intro) .story-copy,body.intro-mode:has(.retro-intro) .story-visual { animation: none; }
body.intro-mode:has(.retro-intro) #story-health .story-visual { transform: translateY(calc((1 - var(--health-reveal,1)) * 60px)); opacity: var(--health-reveal,1); }
body.intro-mode:has(.retro-intro) .service-story>section { scroll-margin-top: 110px; }

@media(max-width:760px){body.intro-mode:has(.retro-intro) .topbar{top:10px;width:calc(100% - 28px);min-height:66px;padding:8px 14px;gap:8px}body.intro-mode:has(.retro-intro) .brand{font-size:25px}body.intro-mode:has(.retro-intro) .topbar .service-flow-panel li[data-auth-entry] button{font-size:12px;padding:8px 10px}body.intro-mode:has(.retro-intro) .header-utilities{order:initial}body.intro-mode:has(.retro-intro) #font-toggle{font-size:10px;padding:4px}.retro-computer{--retro-width:128vw;width:var(--retro-width);top:calc(50svh - 66vw)}.retro-display{left:17%;width:66%}.retro-eyebrow{font-size:13px;margin-bottom:13px}body.intro-mode .landing-first.retro-intro #intro-title{font-size:clamp(25px,6.3vw,43px);margin-bottom:14px}.retro-description{font-size:clamp(12px,3.1vw,17px)}.retro-meet p{font-size:clamp(40px,10vw,65px)}.retro-scroll{top:66%;font-size:12px}.retro-scroll span{font-size:29px}.retro-bottom{bottom:85px;left:20px;right:20px;justify-content:center;flex-direction:column;gap:10px}.retro-bottom .primary{margin-right:0;font-size:14px;padding:9px 20px}body.intro-mode .retro-bottom .intro-safety-note{font-size:10px;max-width:280px;text-align:center;order:2}body.intro-mode:has(.retro-intro) .landing-pager{bottom:14px;right:14px}body.intro-mode:has(.retro-intro) #story-health{padding-top:110px;gap:25px;min-height:100svh}body.intro-mode:has(.retro-intro) #story-health h2{font-size:30px}body.intro-mode:has(.retro-intro) #story-health .story-copy{text-align:center}.retro-stage{min-height:650px}body.intro-mode .landing-first.retro-intro{height:230svh;min-height:1400px}}
@media(prefers-reduced-motion:reduce){body.intro-mode .landing-first.retro-intro{height:auto;min-height:100svh}.retro-stage{position:relative}.retro-computer{transform:translateX(-50%)!important}.retro-message{opacity:1!important;transform:none!important}.retro-meet{display:none}.retro-scroll{opacity:1!important}body.intro-mode:has(.retro-intro) #story-health .story-visual{opacity:1;transform:none}}

/* Blank CRT → typing → greeting → floppy insertion → health record. */
body.intro-mode .landing-first.retro-intro { height: 370svh; }
.retro-computer { transform: translate(-50%,var(--retro-camera-y,0px)) scale(var(--retro-scale,1)); }
.retro-type-line { position: relative; display: inline-block; max-width: 100%; }
.retro-type-text { display: block; clip-path: inset(0 calc((1 - var(--typed,0)) * 100%) 0 0); }
.retro-type-line::after { content: ''; position: absolute; top: .1em; left: calc(var(--typed,0) * 100%); width: 2px; height: 1em; background: #176b5b; opacity: var(--cursor,0); }
.retro-scroll .retro-scroll-label { font-size: 14px; line-height: 1.5; }
.retro-scroll .retro-scroll-arrow { font-size: 38px; }
.retro-disk { position: absolute; left: 60.5%; bottom: 25.2%; width: 27.5%; aspect-ratio: 1; z-index: 5; transform-origin: 50% 100%; transform: translateX(var(--retro-disk-x,2000px)) translateY(calc(var(--retro-disk-insert,0) * -8px)) perspective(900px) rotateX(calc(var(--retro-disk-turn,0) * 78deg)) rotateZ(calc((1 - var(--retro-disk-turn,0)) * -12deg)); opacity: var(--retro-disk-visible,0); clip-path: inset(calc(var(--retro-disk-insert,0) * 100%) 0 0); pointer-events: none; will-change: transform; }
.retro-disk svg { width: 100%; height: 100%; display: block; filter: drop-shadow(1px 6px 2px #18292030); }
.retro-disk-hand { position: absolute; left: 64%; top: 47%; width: 80%; height: auto; z-index: 6; pointer-events: none; transform-origin: 20% 55%; transform: translateX(var(--retro-hand-x,2000px)) translateY(calc(var(--retro-disk-turn,0) * 10%)) rotate(calc(var(--retro-disk-turn,0) * 7deg)); opacity: var(--retro-hand-visible,0); }
.retro-drive-lip { position: absolute; left: 61.1%; top: 74.5%; width: 26.4%; height: .8%; background: #171d16; box-shadow: 0 2px 1px #414638; border-radius: 2px; z-index: 7; opacity: var(--retro-disk-turn,0); pointer-events: none; }
.retro-loaded { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; color: #176b5b; opacity: var(--retro-loaded,0); pointer-events: none; }
.retro-loaded > span { font-size: clamp(15px,1.5vw,22px); }.retro-loaded strong { font-size: clamp(32px,3.7vw,60px); line-height: 1.35; font-weight: 700; }.retro-loaded small { font-size: clamp(13px,1.3vw,20px); }
@media(max-width:760px){body.intro-mode .landing-first.retro-intro{height:330svh;min-height:1900px}.retro-scroll .retro-scroll-label{font-size:12px}.retro-loaded{gap:12px}.retro-loaded strong{font-size:28px}.retro-loaded small{font-size:12px}}
@media(prefers-reduced-motion:reduce){body.intro-mode .landing-first.retro-intro{height:auto;min-height:100svh}.retro-type-text{clip-path:none!important}.retro-type-line::after,.retro-disk,.retro-disk-hand,.retro-drive-lip,.retro-loaded{display:none!important}}

/* Wide opening navigation collapses as the scroll story begins. */
.intro-route-nav { display: none; }
body.intro-mode:has(.retro-intro) .topbar { width: min(1040px,calc(100% - 260px)); transition: width .4s ease, padding .4s ease; }
body.intro-mode .intro-route-nav:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: clamp(12px,2vw,28px); margin-left: auto; white-space: nowrap; }
.intro-route-nav a,.intro-route-nav button { display: inline-flex; align-items: center; justify-content: center; height: 42px; margin: 0; border: 0; background: none; color: #233d33; font: inherit; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; }
.intro-route-nav a:hover,.intro-route-nav button:hover { color: #b44830; }
body.intro-mode .intro-version-switch-floating { display: inline-flex; position: fixed; top: 18px; right: 20px; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1.5px solid #9eb8aa; border-radius: 999px; background: #fffdf1; color: #176b5b; text-decoration: none; font-size: 15px; font-weight: 900; line-height: 1; letter-spacing: -.02em; box-shadow: 0 10px 22px rgba(16,75,58,.10); white-space: nowrap; z-index: 30; }
body.intro-mode .intro-version-switch-floating:hover,body.intro-mode .intro-version-switch-floating:focus-visible { border-color: #176b5b; background: #e8f3ed; color: #0b473a; }
body.intro-mode:has(.retro-intro) .topbar.retro-nav-compact { width: min(480px,calc(100% - 28px)); }
body.intro-mode:has(.retro-intro) .topbar .header-utilities { display: none; }
body.intro-mode .landing-first.retro-intro { height: 500svh; }
.retro-loaded { transform: perspective(900px) rotateZ(calc(var(--retro-spin,0)*-320deg)) rotateY(calc(var(--retro-spin,0)*12deg)) scale(calc(1 + var(--retro-spin,0)*.62)); transform-origin: 50% 50%; will-change: transform, opacity; }
.retro-emblem { width: auto; height: 88%; max-width: 90%; object-fit: contain; mix-blend-mode: normal; }
.retro-bottom { opacity: calc(1 - min(var(--retro-loaded,0),1)); }
body.intro-mode:has(.retro-intro) #story-orbit { display: block; min-height: 175svh; padding: 0; background: #dce8de; position: relative; }
.orbit-stage { height: 100svh; min-height: 690px; position: sticky; top: 0; overflow: hidden; background: #dce8de; isolation: isolate; }
.orbit-copy { position: absolute; left: 5%; right: 5%; top: max(140px,16svh); display: flex; align-items: start; justify-content: space-between; gap: 40px; z-index: 4; }
body.intro-mode .service-story .orbit-copy h2 { font-family: Georgia,'Batang',serif; font-size: clamp(30px,3.6vw,62px); line-height: 1.65; letter-spacing: -.055em; margin: 0; text-align: left; max-width: none; }
.orbit-copy h2 span { display: inline-block; background: #fff8e7; padding: 0 18px; transform: rotate(-3deg); }
.orbit-copy h2 span:last-child { transform: rotate(-1deg); }
.orbit-copy h2 em { color: #176b5b; font-style: normal; }
body.intro-mode .service-story .orbit-description p { color: #304f41; font-size: clamp(17px,1.65vw,28px); line-height: 1.7; text-align: left; margin: 0 0 22px; }
.orbit-description strong { font-weight: 600; border-bottom: 2px dashed #759b83; padding-bottom: 8px; }
.orbit-visual { position: absolute; bottom: 0; width: 100%; height: 58%; }


.orbit-belt { position: absolute; top: 35%; width: 100%; overflow: hidden; z-index: 1; transform: translateY(calc(var(--orbit-scroll,0)*-18px)); }
.orbit-track { display: flex; width: max-content; animation: orbit-conveyor 26s linear infinite; animation-play-state: paused; }
.orbit-card-group { display: flex; gap: clamp(28px,5vw,100px); padding-right: clamp(28px,5vw,100px); }
.orbit-card { width: clamp(130px,14vw,240px); height: clamp(150px,15.5vw,260px); border-radius: 26px; background: #163e33; color: #fff9e8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; box-shadow: inset 0 0 0 2px #0c2f27; }
.orbit-card svg { width: 48%; height: 48%; }.orbit-card span { font-size: clamp(16px,1.6vw,26px); font-weight: 600; }
.orbit-mascot { position: absolute; height: 104%; width: min(42vw,680px); object-fit: contain; object-position: center bottom; bottom: -8%; left: 50%; transform: translateX(-50%); z-index: 3; mix-blend-mode: normal; animation: orbit-mascot-sway 6s ease-in-out infinite; animation-play-state: paused; pointer-events: none; }
.story-orbit.is-orbit-visible .orbit-track,.story-orbit.is-orbit-visible .orbit-mascot { animation-play-state: running; }


@keyframes orbit-conveyor { to { transform: translateX(-50%); } }
@keyframes orbit-mascot-sway { 0%,100% { transform: translateX(-50%) rotate(-2deg); } 50% { transform: translateX(-50%) rotate(2deg); } }
@media(max-width:1000px) { body.intro-mode:has(.retro-intro) .topbar { left: 14px; transform: none; width: calc(100% - 190px); flex-wrap: wrap; gap: 8px; padding: 8px 16px; }.intro-route-nav { order: 3; width: 100%; }.intro-route-nav a,.intro-route-nav button { height: 32px; font-size: 12px; }body.intro-mode .intro-version-switch-floating { top: 18px; right: 14px; min-height: 40px; padding: 0 18px; font-size: 13px; }body.intro-mode:has(.retro-intro) .topbar.retro-nav-compact { flex-wrap: nowrap; }.orbit-copy { gap: 24px; }.orbit-description { max-width: 43%; } }
@media(max-width:760px) { body.intro-mode .landing-first.retro-intro { height: 450svh; min-height: 2500px; }.retro-emblem { height: 82%; }body.intro-mode .intro-version-switch-floating { top: 12px; right: 12px; min-height: 36px; padding: 0 14px; font-size: 12px; }.orbit-stage { min-height: 690px; }.orbit-copy { top: 112px; left: 6%; right: 6%; flex-direction: column; gap: 18px; }body.intro-mode .service-story .orbit-copy h2 { font-size: clamp(27px,5.5vw,40px); }.orbit-description { max-width: none; }body.intro-mode .service-story .orbit-description p { font-size: 15px; margin-bottom: 8px; }.orbit-visual { height: 48%; }.orbit-mascot { width: 76vw; height: 104%; }.orbit-card { width: 130px; height: 145px; border-radius: 19px; }.orbit-card-group { gap: 30px; padding-right: 30px; } }
@media(prefers-reduced-motion:reduce) { body.intro-mode:has(.retro-intro) .topbar { transition: none; }body.intro-mode .landing-first.retro-intro { height: auto; min-height: 100svh; }body.intro-mode:has(.retro-intro) #story-orbit { min-height: 100svh; }.orbit-stage { position: relative; }.orbit-track,.orbit-mascot { animation: none; } }

.retro-stage::after { content: ''; position: absolute; inset: 0; background: #dce8de; opacity: var(--retro-wipe,0); z-index: 10; pointer-events: none; }

/* Keep the introduction and the complete mascot inside one viewport. */
.orbit-stage { display: grid; grid-template-rows: auto minmax(0,1fr); gap: clamp(24px,4svh,64px); padding: clamp(160px,15svh,220px) 0 90px; box-sizing: border-box; }
.orbit-copy { position: relative; inset: auto; margin: 0 5%; align-items: center; }
.orbit-heading { flex: 1 1 65%; }
body.intro-mode .service-story .orbit-kicker { color: #376751; font-size: clamp(16px,1.4vw,22px); font-weight: 700; text-align: left; margin: 0 0 18px; }
body.intro-mode .service-story .orbit-copy h2 { font-size: clamp(32px,3.5vw,60px); }
.orbit-description { flex: 0 1 34%; }
body.intro-mode .service-story .orbit-description p { font-size: clamp(18px,1.7vw,28px); word-break: keep-all; }
.orbit-visual { position: relative; bottom: auto; height: 100%; min-height: 0; }
.orbit-mascot { width: min(42vw,620px); height: 100%; bottom: 0; object-position: center; }
.orbit-belt { top: 28%; }

@media(max-width:760px) {
 .orbit-stage { padding: 128px 0 82px; gap: 20px; }
 .orbit-copy { margin: 0 6%; gap: 16px; align-items: stretch; }
 .orbit-heading,.orbit-description { flex: auto; }
 body.intro-mode .service-story .orbit-copy h2 { font-size: clamp(25px,5.2vw,36px); line-height: 1.65; }
 .orbit-copy h2 span { padding: 0 9px; }
 body.intro-mode .service-story .orbit-kicker { font-size: 15px; margin-bottom: 12px; }
 body.intro-mode .service-story .orbit-description p { font-size: 16px; margin: 0; }
 .orbit-mascot { width: 78vw; height: 100%; bottom: 0; }
 .orbit-card { width: 110px; height: 122px; }
}

/* Separate the moving cards from the full-body mascot below them. */
.orbit-visual { --orbit-card-height: clamp(180px,18vw,310px); }
.orbit-belt { top: 27%; height: min(var(--orbit-card-height),30%); }
.orbit-track,.orbit-card-group,.orbit-card { height: 100%; }
.orbit-mascot { top: calc(27% + min(var(--orbit-card-height),30%) + 24px); bottom: auto; height: calc(73% - min(var(--orbit-card-height),30%) - 24px); object-position: center top; }
@media(max-width:760px) { .orbit-visual { --orbit-card-height: 150px; } }

/* A scroll-driven handoff from Hyeoldangi to the three service folders. */
body.intro-mode:has(.retro-intro) #story-orbit { min-height: 300svh; }
.orbit-copy,.orbit-belt { opacity: var(--handoff-clear,1); }
.orbit-mascot { opacity: calc(1 - var(--handoff-reveal,0)); scale: calc(1 + var(--handoff-reveal,0)*1.8); transform-origin: 50% 35%; }
.orbit-handoff { position: absolute; inset: 110px 0 70px; z-index: 5; opacity: var(--handoff-reveal,0); pointer-events: none; perspective: 1400px; }
.handoff-mascot { position: absolute; width: 52%; height: 86%; object-fit: contain; left: calc(24% - var(--handoff-turn,0)*25%); bottom: 0; transform: rotateY(calc(var(--handoff-turn,0)*-18deg)) scale(calc(1.3 - var(--handoff-turn,0)*.3)); transform-origin: center bottom; z-index: 2; }
.handoff-computer { position: absolute; width: 55%; right: 4%; top: 15%; opacity: var(--handoff-turn,0); transform: translateX(calc((1 - var(--handoff-turn,0))*60%)) rotateY(calc((1 - var(--handoff-turn,0))*-18deg)); }
.handoff-screen { position: relative; padding: clamp(25px,4vw,70px); border: clamp(10px,1.3vw,22px) solid #173e33; border-radius: 28px; background: #fffaf0; box-shadow: 12px 12px 0 #94b09d; }
.handoff-screen>span { color: #39715a; font-size: clamp(16px,1.6vw,26px); font-weight: 700; }
.handoff-screen>strong { display: block; font-family: Georgia,'Batang',serif; font-size: clamp(30px,4vw,66px); line-height: 1.3; color: #163e33; margin: 24px 0; }
.handoff-screen ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.handoff-screen li { font-size: clamp(15px,1.6vw,26px); border-top: 1px solid #b8cabb; padding-top: 12px; color: #304f41; }
.handoff-stand { width: 24%; height: 7svh; margin: auto; background: #9bb7a5; border-inline: 5px solid #173e33; }
.handoff-keyboard { width: 65%; height: 20px; margin: auto; border: 5px solid #173e33; border-radius: 50% 50% 10px 10px; background: #fffaf0; }
.story-step-flow { position: relative; background: #f8f5e9; padding: 0 3%; isolation: isolate; }
.flow-anchor { height: 0; scroll-margin-top: 112px; }
body.intro-mode:has(.retro-intro) .story-step-flow>:is(#story-health,#story-results,#story-challenge,#story-report) { --folder-color:#e6edd8; position: sticky; top: calc(112px + var(--flow-index)*18px); z-index: calc(1 + var(--flow-index)); display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; height: calc(100svh - 170px); min-height: 580px; padding: 0; margin: 0 0 14svh; gap: 0; overflow: visible; background: transparent; }
body.intro-mode:has(.retro-intro) .story-step-flow>#story-results { --folder-color:#b9d6c1; }
body.intro-mode:has(.retro-intro) .story-step-flow>#story-challenge { --folder-color:#86b59b; }
.flow-tab { position: relative; flex: 0 0 auto; width: 55%; margin-left: calc(var(--flow-index)*15%); padding: clamp(22px,3svh,48px) 20px; text-align: center; color: #163e33; background: var(--folder-color); border: 3px solid #163e33; border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 6px 0 #163e33; font-family: Georgia,'Batang',serif; font-weight: 700; font-size: clamp(26px,3vw,50px); box-sizing: border-box; }
.flow-page { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px,2svh,32px); padding: clamp(24px,3svh,50px) 5%; background: #fffdf5; border: 3px solid #163e33; border-top: 3px dashed #163e33; border-radius: 0 0 24px 24px; box-shadow: 6px 8px #163e33; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-copy { text-align: center; width: 100%; max-width: 1100px; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) h2 { display: block; margin: 0; padding: 0; background: none; font-family: Georgia,'Batang',serif; font-size: clamp(28px,3vw,48px); line-height: 1.35; color: #203e33; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-scene { width: min(1100px,100%); flex: 0 1 46svh; height: 46svh; min-height: 180px; padding: 12px 24px; opacity: 1; transform: none; box-sizing: border-box; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-scene>img { max-width: 440px; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-description { margin: 0; text-align: center; font-size: clamp(18px,1.6vw,26px); color: #52665f; line-height: 1.6; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-habits figure { flex: 1; min-width: 0; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-habits img { width: 100%; height: clamp(150px,26svh,360px); object-fit: contain; }
@media(max-width:760px) {
 .orbit-handoff { inset: 110px 0 70px; }
 .handoff-mascot { width: 70%; height: 48%; left: calc(15% - var(--handoff-turn,0)*18%); }
 .handoff-computer { width: 82%; right: 5%; top: 5%; }
 .handoff-screen { padding: 22px; border-width: 10px; border-radius: 18px; }
 .handoff-screen>strong { font-size: 32px; margin: 12px 0; }
 .handoff-screen li { font-size: 14px; padding-top: 8px; }
 .handoff-stand { height: 35px; }
 .story-step-flow { padding-inline: 12px; }
 body.intro-mode:has(.retro-intro) .story-step-flow>:is(#story-health,#story-results,#story-challenge,#story-report) { top: calc(92px + var(--flow-index)*12px); height: calc(100svh - 142px); min-height: 540px; }
 .flow-tab { width: 88%; margin-left: calc(var(--flow-index)*4%); font-size: clamp(20px,4.5vw,30px); padding: 23px 10px; border-radius: 18px 18px 0 0; }
 .flow-page { padding: 24px 12px; gap: 20px; }
 body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) h2 { font-size: 28px; }
 body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-scene { padding: 8px 0; flex-basis: 30svh; height: 30svh; min-height: 180px; }
 body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-description { font-size: 16px; }
 body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-habits img { height: 150px; }
}
@media(prefers-reduced-motion:reduce),(max-height:680px) {
 body.intro-mode:has(.retro-intro) .story-step-flow>:is(#story-health,#story-results,#story-challenge,#story-report) { position: relative; top: auto; height: auto; min-height: 650px; margin-bottom: 60px; }
 .flow-page { min-height: 510px; }
}
@media(prefers-reduced-motion:reduce) {
 body.intro-mode:has(.retro-intro) #story-orbit { min-height: 100svh; }
 .orbit-handoff { display: none; }
 .orbit-copy,.orbit-belt,.orbit-mascot { opacity: 1; scale: 1; }
}


/* The opening is blank before any script runs; the first sentence owns the CRT. */
.retro-message { position: absolute; inset: 0; padding: 0; }
.retro-message .retro-type-text { clip-path: none; visibility: hidden; }
.retro-message .retro-type-text>span { opacity: 0; visibility: visible; }
.retro-message .retro-eyebrow { position: absolute; left: 4%; right: 4%; top: 50%; margin: 0; transform: translateY(calc(-50% - var(--intro-details,0)*110px)); font-family: Georgia,'Noto Serif KR','Batang',serif; font-size: clamp(22px,5.4cqw,46px); line-height: 1.4; color: #203e33; }
body.intro-mode .landing-first.retro-intro #intro-title { position: absolute; left: 3%; right: 3%; top: 50%; margin: 0; transform: translateY(-30%); font-size: clamp(28px,6.1cqw,52px); }
.retro-message .retro-description { position: absolute; left: 3%; right: 3%; top: calc(50% + 7.2cqw); font-size: clamp(14px,2.35cqw,20px); }
@media(max-width:760px) {
 .retro-message .retro-eyebrow { font-size: clamp(23px,5vw,38px); transform: translateY(calc(-50% - var(--intro-details,0)*70px)); }
 body.intro-mode .landing-first.retro-intro #intro-title { font-size: clamp(25px,6vw,43px); }
 .retro-message .retro-description { top: calc(50% + 52px); font-size: clamp(12px,3vw,18px); }
}
@media(prefers-reduced-motion:reduce) {
 .retro-message .retro-type-text>span { opacity: 1 !important; }
}


/* Reuse the opening CRT shell for the guide scene. */
.handoff-computer { width: min(68vw,80svh); aspect-ratio: 1122 / 1402; right: 1%; top: 50%; container-type: inline-size; transform: translateY(-50%) translateX(calc((1 - var(--handoff-turn,0))*60%)) rotateY(calc((1 - var(--handoff-turn,0))*-18deg)); }
.handoff-computer-shell { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.handoff-screen { position: absolute; left: 16.9%; top: 20.3%; width: 66.2%; height: 37.4%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 3.5%; border: 0; border-radius: 6%; background: transparent; box-shadow: none; overflow: hidden; }
.handoff-screen>span { font-size: 2.5cqw; }
.handoff-screen>strong { font-size: 5.2cqw; line-height: 1.3; margin: 1.8cqw 0 2.2cqw; }
.handoff-screen ol { gap: 1cqw; }
.handoff-screen li { font-size: 2.5cqw; line-height: 1.45; padding-top: 1cqw; }
.handoff-mascot { width: 46%; height: 78%; }
@media(max-width:760px) {
 .handoff-computer { width: min(106vw,66svh); right: -3%; top: -3%; transform: translateX(calc((1 - var(--handoff-turn,0))*60%)); }
 .handoff-mascot { width: 66%; height: 42%; }
 .handoff-screen>span,.handoff-screen li { font-size: 2.8cqw; }
}
.orbit-stage { background: color-mix(in srgb,#dce8de calc((1 - var(--handoff-reveal,0))*100%),#faf6e3); }
.handoff-computer { mix-blend-mode: multiply; }


/* Scene revisions: centered guide, larger artwork, fourth folder, forest CRT. */
.handoff-computer { right: auto; left: 50%; width: min(94vw,80svh); transform: translate(-50%,-50%) translateY(calc((1 - var(--handoff-turn,0))*70px)) scale(calc(.88 + var(--handoff-turn,0)*.12)); }
.orbit-mascot { opacity: var(--handoff-clear,1); scale: 1; }
body.intro-mode:has(.retro-intro) .story-step-flow>#story-report { --folder-color: #d6ddbd; margin-bottom: 0; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-scene { width: min(1450px,100%); max-width: 1450px; flex: 1 1 auto; height: auto; min-height: 230px; padding: 8px 0; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-report) .story-scene>img { width: 45%; max-width: 640px; max-height: 55svh; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-report) :is(.story-record-preview,.story-practice-preview) { flex-basis: 560px; padding: clamp(24px,3vw,52px); }
body.intro-mode:has(.retro-intro) .story-step-flow #story-challenge .story-habits img { height: min(40svh,480px); }
body.intro-mode:has(.retro-intro) #story-forest { background: #faf6e3; padding: 130px 20px 90px; gap: 16px; }
body.intro-mode #story-forest .story-forest-heading { margin-bottom: 0; }
.forest-computer { position: relative; width: min(1100px,94vw,56svh); aspect-ratio: 1122 / 1402; margin-top: -6svh; margin-bottom: -4svh; flex: none; }
.forest-computer-shell { width: 100%; height: 100%; display: block; mix-blend-mode: multiply; }
.forest-computer-screen { position: absolute; left: 16.9%; top: 20.3%; width: 66.2%; height: 37.4%; display: grid; align-items: center; overflow: hidden; border-radius: 6%; background: #fcfbf4; }
body.intro-mode #story-forest .story-forest-image { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; animation: none; }
body.intro-mode #story-forest>.story-description { position: relative; margin-top: 0; }
.story-closing [data-closing-type] { visibility: hidden; }
.story-closing [data-closing-type] .closing-letter { visibility: visible; opacity: 0; }
.story-closing [data-story-start] { opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .5s,transform .5s,visibility .5s; }
.story-closing.closing-ready [data-story-start] { opacity: 1; visibility: visible; transform: translateY(0); }
@media(max-width:760px) {
 .handoff-computer { left: 50%; right: auto; top: 50%; width: min(112vw,75svh); transform: translate(-50%,-50%) translateY(calc((1 - var(--handoff-turn,0))*50px)); }
 body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-scene { min-height: 220px; }
 body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-report) :is(.story-record-preview,.story-practice-preview) { flex-basis: 56%; padding: 16px; }
 body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-report) .story-scene>img { width: 42%; }
 body.intro-mode:has(.retro-intro) .story-step-flow #story-results .story-scene>img { width: 85%; }
 body.intro-mode:has(.retro-intro) .story-step-flow #story-challenge .story-habits img { height: min(29svh,220px); }
 .forest-computer { width: 112vw; margin: -10% -6vw -4%; }
 body.intro-mode:has(.retro-intro) #story-forest { overflow: hidden; }
}
@media(prefers-reduced-motion:reduce) {
 .story-closing [data-closing-type],.story-closing [data-closing-type] .closing-letter { visibility: visible; opacity: 1; }
 .story-closing [data-story-start] { opacity: 1; visibility: visible; transform: none; transition: none; }
}

body.intro-mode:has(.retro-intro) #story-forest { align-items: center; }
body.intro-mode:has(.retro-intro) .story-step-flow #story-challenge .story-habits figure { max-width: 430px; width: auto; }

/* Keep all four folders pinned until the last page has been read. */
.flow-end-space { height: calc(14svh + 54px); pointer-events: none; }
body.intro-mode:has(.retro-intro) .story-step-flow #story-challenge .story-habits figure { justify-content: center; padding-bottom: clamp(20px,4svh,64px); box-sizing: border-box; }

/* Opening: one title, then two larger lines of explanation. */
body.intro-mode .landing-first.retro-intro #intro-title { top: 38%; transform: translateY(-50%); }
.retro-message .retro-description { top: 53%; font-size: clamp(14px,2.35cqw,20px); line-height: 1.8; margin: 0; }

/* The forest uses the same full-size CRT as the three-step guide. */
body.intro-mode:has(.retro-intro) #story-forest { padding: 60px 20px 100px; gap: 0; height: auto; min-height: 100svh; }
.forest-computer { width: min(94vw,80svh); container-type: inline-size; margin: 0 0 -5svh; }
.forest-computer-screen { display: flex; flex-direction: column; justify-content: center; gap: 1.4cqw; padding: 2cqw 0; box-sizing: border-box; }
body.intro-mode #story-forest .story-forest-heading { flex: none; width: 100%; margin: 0; padding: 0 2cqw; box-sizing: border-box; }
body.intro-mode #story-forest #story-forest-title { font-size: 3.1cqw; line-height: 1.4; margin: 0; color: #173f35; }
body.intro-mode #story-forest .story-forest-image { flex: 0 1 auto; min-height: 0; height: auto; width: 100%; object-fit: contain; }
body.intro-mode #story-forest>.story-description { font-size: clamp(22px,2vw,32px); line-height: 1.7; margin: 0; text-align: center; }

body.intro-mode .service-story .story-closing { min-height: 100svh; height: auto; padding: 150px 30px 110px; gap: 32px; box-sizing: border-box; }
body.intro-mode .service-story .story-closing h2 { font-size: clamp(54px,6.5vw,116px); line-height: 1.28; letter-spacing: -.035em; margin: 0; }
body.intro-mode .service-story .story-closing p[data-closing-type] { font-size: clamp(24px,2.5vw,42px); line-height: 1.7; max-width: 1280px; margin: 0; word-break: keep-all; }
body.intro-mode .service-story .story-closing [data-story-start] { margin: 14px 0 0; font-size: clamp(20px,1.7vw,28px); }
@media(max-width:760px) {
 .retro-message .retro-description { top: 54%; font-size: clamp(13px,3.3vw,22px); line-height: 1.7; }
 .forest-computer { width: min(112vw,75svh); margin: 0 -6vw -4%; }
 body.intro-mode:has(.retro-intro) #story-forest { padding: 80px 12px; }
 body.intro-mode #story-forest>.story-description { font-size: 18px; }
 body.intro-mode .service-story .story-closing { padding: 120px 22px 100px; gap: 30px; }
 body.intro-mode .service-story .story-closing h2 { font-size: clamp(40px,9vw,64px); }
 body.intro-mode .service-story .story-closing p[data-closing-type] { font-size: 21px; }
}
@media(prefers-reduced-motion:reduce),(max-height:680px) {
 .flow-end-space { height: 0; }
}

/* The forest shell stays within its own scene during the folder exit. */
body.intro-mode:has(.retro-intro) #story-forest { position: relative; isolation: isolate; overflow: clip; }

/* Readable folder copy, scaled to the available viewport height. */
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-copy { max-width: 1700px; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) h2 { font-size: clamp(40px,min(4.5vw,6svh),84px); line-height: 1.25; word-break: keep-all; }
body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-description { font-size: clamp(24px,min(2.5vw,3svh),40px); line-height: 1.55; word-break: keep-all; }
body.intro-mode .story-step-flow .story-record-preview h3,
body.intro-mode .story-step-flow .story-practice-preview figcaption { font-size: clamp(28px,min(3vw,3.4svh),46px); }
body.intro-mode .story-step-flow .story-record-categories { font-size: clamp(24px,min(2.5vw,2.8svh),36px); }
body.intro-mode .story-step-flow .story-signal-label { font-size: clamp(24px,min(2.5vw,3svh),38px); max-width: 320px; }
body.intro-mode .story-step-flow .story-habits figcaption { font-size: clamp(24px,min(2.5vw,3svh),38px); }
body.intro-mode .story-step-flow .story-practice-days span { font-size: clamp(22px,min(2vw,2.5svh),32px); }
@media(max-width:760px) {
 body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) h2 { font-size: clamp(32px,6vw,44px); }
 body.intro-mode:has(.retro-intro) .story-step-flow :is(#story-health,#story-results,#story-challenge,#story-report) .story-description { font-size: 20px; }
 body.intro-mode .story-step-flow .story-record-preview h3,
 body.intro-mode .story-step-flow .story-practice-preview figcaption { font-size: 23px; }
 body.intro-mode .story-step-flow .story-record-categories { font-size: 20px; }
 body.intro-mode .story-step-flow .story-signal-label,
 body.intro-mode .story-step-flow .story-habits figcaption { font-size: 20px; }
 body.intro-mode .story-step-flow .story-practice-days span { font-size: 16px; }
}

body.intro-mode .story-step-flow .story-record-categories li { font-size: inherit; }

/* Crop the baked backdrop to the computer silhouette, without fading the shell. */
body.intro-mode:has(.retro-intro) #story-forest { background: linear-gradient(180deg,#f8f5e9 0%,#faf6e3 25%,#f2f2e7 65%,#e6ece5 100%); }
.forest-computer { filter: drop-shadow(0 16px 18px #263f2828); }
.forest-computer-shell {
 mix-blend-mode: normal;
 mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201122%201402%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M78%20190%20Q79%20163%20105%20160%20Q561%20138%201017%20160%20Q1043%20163%201045%20190%20L1055%20951%20Q1056%20960%201051%20965%20Q1056%20972%201055%20985%20L1054%201146%20Q1054%201165%201036%201171%20L1024%201235%20Q1023%201258%201003%201259%20L996%201263%20Q990%201272%20955%201272%20Q922%201272%20915%201259%20L209%201259%20Q202%201273%20164%201273%20Q130%201273%20124%201259%20L114%201259%20Q97%201259%2095%201238%20L85%201171%20Q67%201169%2068%201148%20L67%20985%20Q66%20970%2070%20965%20Q65%20961%2067%20950%20Z%22%2F%3E%3C%2Fsvg%3E");
 mask-size: 100% 100%;
 mask-repeat: no-repeat;
 mask-composite: add;
}
.forest-computer-screen { display: grid; grid-template-rows: auto minmax(0,1fr); align-items: stretch; gap: 1.2cqw; padding: 1.7cqw 0 1.2cqw; }
body.intro-mode #story-forest .story-forest-image { width: 100%; height: 100%; max-width: none; min-height: 0; object-fit: cover; object-position: center; }

/* Keep the guide pinned until the first folder covers its screen. */
@media(min-height:681px) and (prefers-reduced-motion:no-preference) {
 body.intro-mode:has(.retro-intro) #story-orbit { min-height: 360svh; --guide-cover-hold: .6; }
 .story-step-flow {
  margin-top: -90svh;
  background: #f8f5e9;
 }
 .handoff-computer {
  opacity: calc(var(--handoff-turn,0) * (1 - var(--guide-folder-cover,0)));
  transform: translate(-50%,-50%)
    translateY(calc((1 - var(--handoff-turn,0))*70px - var(--guide-folder-cover,0)*24px))
    scale(calc(.88 + var(--handoff-turn,0)*.12 - var(--guide-folder-cover,0)*.06));
 }
}

/* Four tabs share a baseline; each new page covers only the previous page. */
.story-step-flow .flow-tab {
 width: calc(25% - 9px);
 margin-left: calc(var(--flow-index)*25%);
 flex: 0 0 clamp(94px,9svh,132px);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px 10px;
 font-size: clamp(18px,1.65vw,34px);
 line-height: 1.35;
 word-break: keep-all;
}
body.intro-mode #story-forest .story-forest-heading { animation: none; }
@media(min-height:681px) and (prefers-reduced-motion:no-preference) {
 body.intro-mode:has(.retro-intro) .story-step-flow>:is(#story-health,#story-results,#story-challenge,#story-report) { top: 112px; margin-bottom: 0; }
 /* Space the anchors, not sticky margins, so all four pages release together. */
 .story-step-flow .flow-anchor:not(:first-child) { height: 14svh; }
 .flow-end-space { height: 0; }
 body.intro-mode:has(.retro-intro) #story-forest { padding-top: 0; }
 /* Move the whole computer together, including its title and picture. */
 .forest-computer {
  opacity: calc(.3 + var(--forest-enter,1)*.7);
  transform: translateY(calc((1 - var(--forest-enter,1))*48px)) scale(calc(.97 + var(--forest-enter,1)*.03));
 }
 body.intro-mode #story-forest>.story-description {
  opacity: var(--forest-caption,1);
  transform: translateY(calc((1 - var(--forest-caption,1))*24px));
 }
 .story-closing [data-closing-type] {
  transform: translateY(calc((1 - var(--closing-enter,1))*32px));
 }
}
@media(max-width:760px) {
 .story-step-flow .flow-tab { width: calc(25% - 5px); padding: 12px 4px; font-size: clamp(12px,2.6vw,18px); border-radius: 14px 14px 0 0; }
}
@media(max-width:760px) and (min-height:681px) and (prefers-reduced-motion:no-preference) {
 body.intro-mode:has(.retro-intro) .story-step-flow>:is(#story-health,#story-results,#story-challenge,#story-report) { top: 92px; }
}

/* Reserve the measured floating-header area without changing the section backgrounds. */
html:has(body.intro-mode .retro-intro) { --intro-safe-top: 124px; }
body.intro-mode:has(.retro-intro) :is(.retro-computer-shell,.retro-display,.orbit-copy,.orbit-belt,.orbit-mascot,.handoff-computer,.story-flow-step,.forest-computer),
body.intro-mode #story-forest>.story-description,
body.intro-mode .story-closing>:is([data-closing-type],[data-story-start]) {
 mask-image: linear-gradient(to bottom,transparent var(--header-cutoff,-100px),#000 calc(var(--header-cutoff,-100px) + 12px));
 mask-repeat: no-repeat;
}

/* Fit each ending destination beneath the floating header in one viewport. */
@media(min-width:761px) and (min-height:681px) {
 body.intro-mode:has(.retro-intro) #story-forest {
  min-height: calc(100svh - var(--intro-safe-top));
  padding: 0 20px 56px;
  box-sizing: border-box;
 }
 .forest-computer {
  --forest-fit-width: min(94vw,72svh,calc(100svh - var(--intro-safe-top) - 300px));
  width: var(--forest-fit-width);
  margin: calc(var(--forest-fit-width)*-.07) 0 22px;
 }
 body.intro-mode #story-forest>.story-description {
  max-width: 980px;
 }
 body.intro-mode .service-story .story-closing {
  min-height: calc(100svh - var(--intro-safe-top));
  padding-block: 70px;
 }
}
body.intro-mode:has(.retro-intro) .service-story>section { scroll-margin-top: var(--intro-safe-top); }
.orbit-stage { padding-top: max(var(--intro-safe-top),clamp(160px,15svh,220px)); }
.orbit-handoff { top: var(--intro-safe-top); }
@media(min-height:681px) and (prefers-reduced-motion:no-preference) {
 body.intro-mode:has(.retro-intro) .story-step-flow>:is(#story-health,#story-results,#story-challenge,#story-report) {
  top: var(--intro-safe-top);
  height: calc(100svh - var(--intro-safe-top) - 42px);
 }
}

/* Keep the carrot forest caption fully visible in the standalone 8033 preview. */
@media(min-width:761px) and (min-height:681px) {
 body.intro-mode:has(.retro-intro) #story-forest {
  min-height: 100svh;
  padding: clamp(76px,8svh,132px) 20px 84px;
  justify-content: flex-start;
  gap: clamp(12px,1.4svh,24px);
  overflow: visible;
 }
 .forest-computer {
  --forest-fit-width: min(88vw,52svh);
  width: var(--forest-fit-width);
  margin: 0;
 }
 body.intro-mode #story-forest>.story-description {
  max-width: min(980px,92vw);
  margin: 0;
  font-size: clamp(22px,1.75vw,30px);
  line-height: 1.55;
 }
}
@media(max-width:760px) {
 body.intro-mode:has(.retro-intro) #story-forest {
  padding: 92px 12px 104px;
  gap: 16px;
  overflow: visible;
 }
 .forest-computer {
  width: min(100vw,54svh);
  margin: 0 -4vw;
 }
 body.intro-mode #story-forest>.story-description {
  margin: 0;
  line-height: 1.6;
 }
}


/* Make the emblem handoff feel like a single page turn instead of a long zoom tunnel. */
body.intro-mode .landing-first.retro-intro { height: 420svh; }
@media(max-width:760px) { body.intro-mode .landing-first.retro-intro { height: 380svh; min-height: 2100px; } }


/* Hide the guide computer as soon as the first folder takes over the viewport. */
@media(min-height:681px) and (prefers-reduced-motion:no-preference) {
 .story-step-flow { z-index: 6; }
 .orbit-handoff { z-index: 4; }
}