/* A scroll-driven diagram, distinct from the hero's product greeting. */
.story{background:#fbf6ef}
.scene{top:80px;height:calc(100svh - 80px);background:#fbf6ef}
.story-stage{position:absolute;left:50%;top:50%;width:650px;height:650px;transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center}
.story-stage img{display:block;width:100%;height:auto;mix-blend-mode:normal;mask-image:none;filter:drop-shadow(0 12px 12px #5641291b);user-select:none}
.glasses-node,.wearable-node{position:absolute;will-change:transform,opacity;text-align:center}
.glasses-node{width:320px;left:28%;top:24%;transform:translate(-50%,-50%)}
.wearable-node{width:200px;left:79%;top:24%;transform:translate(-50%,-50%);opacity:0}
.node-label{display:block;font-family:Booton,Arial,sans-serif;font-size:20px;line-height:1.3;white-space:nowrap;color:#5d4837}
.glasses-node .node-label{margin-top:-12px}.wearable-node .node-label{margin-top:3px}
.story-links{position:absolute;inset:0;width:650px;height:650px;color:#bb6a39;stroke-width:1.3;pointer-events:none;overflow:visible}
.story-links path{stroke-dasharray:1;stroke-dashoffset:var(--line-rest,0)}
.story-links circle{fill:#c95f27;stroke:0}
#network-links,#family-link{opacity:0}
.elda-hub{position:absolute;left:50%;top:51%;width:180px;height:200px;transform:translate(-50%,-50%);will-change:transform}
.hub-orbit{position:absolute;left:50%;top:43%;width:190px;height:190px;transform:translate(-50%,-50%);border:1px solid #c78d684f;border-radius:50%;opacity:0}
#traveller{position:absolute;left:50%;top:0;width:170px;height:175px;transform:translateX(-50%);will-change:auto}
#story-elda{display:block;width:100%;height:100%}
.elda-hub .node-label{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:18px}
.letter-demo{position:absolute;width:230px;height:260px;left:68%;top:31%;transform:translate(-50%,-50%) rotate(7deg);background:#fffaf4;border:1px solid #ddcebd;box-shadow:0 15px 27px #56412912;padding:28px;overflow:hidden}
.letter-heading{font-family:Instrument,Georgia,serif;font-size:23px;margin-bottom:24px}
.letter-demo p,.letter-sign{font-family:Instrument,Georgia,serif;font-size:20px;font-style:italic}
.letter-lines{display:grid;gap:14px;margin:19px 0}
.letter-lines i{display:block;height:1px;background:#c7b7a3}.letter-lines i:nth-child(2){width:85%}.letter-lines i:last-child{width:70%}
.reading-rule{position:absolute;left:20px;right:20px;top:148px;height:20px;background:#ffbc8040;border-top:1px solid #cc875170;transform:translateY(var(--reading-y,0px))}
.voice-output{position:absolute;top:72%;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;color:#6b5a4a;font-family:Instrument,Georgia,serif;font-size:25px;font-style:italic}
.story-wave{display:flex;justify-content:center;align-items:center;gap:6px;height:48px;margin-bottom:8px}
.story-wave i{width:4px;height:20px;background:#c95f27;border-radius:3px;transform:scaleY(var(--wave-scale,1))}.story-wave i:nth-child(3n){height:42px}.story-wave i:nth-child(2n){height:30px;opacity:.5}
.story-stage .family-phone{left:79%;top:74%;width:310px;transform:translate(-50%,-50%) scale(.5) rotate(8deg);opacity:0;will-change:transform,opacity}
.story-stage .family-phone .phone-top,.story-stage .family-phone .phone-brand,.story-stage .family-phone .parent-avatar,.story-stage .family-phone .request-status,.story-stage .family-phone .phone-reply{display:flex}
.story-stage .family-phone .phone-reply{display:block}.story-stage .family-phone .parent-avatar{display:grid}
.story-stage .family-phone h3{font-size:36px}.story-stage .family-phone>p{font-size:17px;margin-top:17px}
.story-stage .family-phone .button,.story-stage .family-phone .secondary{font-size:18px;min-height:52px;padding:12px 16px;pointer-events:auto}
.scene-foot{left:4%;right:4%;bottom:25px;font-family:Booton,Arial,sans-serif}
.scene-column{pointer-events:auto}
@media(max-width:1000px) and (min-width:681px){.scene-foot{font-size:11px;left:2%;right:2%}}
@media(max-width:680px){.scene{top:0;height:38svh;min-height:300px;max-height:400px;border-bottom:1px solid #ddcebd}.scene-column{top:70px;pointer-events:auto}.story-stage{top:47%}.node-label{font-size:25px}.elda-hub .node-label{font-size:24px}.voice-output{font-size:29px}.scene-foot{left:24px;right:24px;bottom:12px;font-size:10px}.chapter{min-height:80svh}.chapter p{max-width:100%}.story-stage .family-phone{pointer-events:auto!important}.story-stage .family-phone .button,.story-stage .family-phone .secondary{font-size:23px;min-height:60px}.story-stage .family-phone .phone-reply{font-size:18px}.story-stage .family-phone .demo-label{font-size:12px}.chapter{scroll-margin-top:calc(38svh + 70px)}}
@media(prefers-reduced-motion:reduce){.story-stage,.glasses-node,.wearable-node,.elda-hub,.letter-demo,.family-phone{will-change:auto}}
.letter-demo{left:73%;top:32%}.voice-output{left:68%;top:78%}
@media(min-width:1100px){.chapter{max-width:610px;padding-right:45px}.chapter h2{font-size:clamp(68px,5.3vw,88px)}.chapter p{max-width:500px;font-size:22px}.chapter .detail{max-width:480px;font-size:15px}.open-list{max-width:470px}.open-list div{font-size:18px}}
.family-node-label{position:absolute;left:79%;top:96%;transform:translateX(-50%);opacity:0}
