/* Illustrative logic, never simulated app controls, player state or telemetry. */
.overview-story{
 --story-ink:#eef2f1;--story-muted:#bdc7c8;--story-cyan:#abe7e6;
 --story-gold:#c7b58f;--story-line:#6a8388;--story-play-state:running;
 box-sizing:border-box;container-type:inline-size;display:grid;gap:23px;
 width:100%;max-width:760px;min-height:0;margin:0;padding:25px;
 overflow:hidden;color:var(--story-ink);border:1px solid #b5cdd82b;
 border-radius:7px;background:linear-gradient(145deg,#172126ed,#0d161bed);
 font:400 18px/1.5 Noto,Arial,sans-serif;text-align:left;
}
.overview-story *,.overview-story *:before,.overview-story *:after{box-sizing:border-box}
.overview-story :is(h3,h4,p,ul,ol){margin:0}
.overview-story :is(ul,ol){padding:0;list-style:none}
.overview-story h3{font:500 25px/1.25 Marcellus,Georgia,serif;color:var(--story-gold);max-width:28ch}
.overview-story h4{font-size:19px;font-weight:600;line-height:1.3;color:var(--story-ink)}
.overview-story p{font-size:18px;line-height:1.5}
.overview-story .story-note{font-size:17px;line-height:1.5;color:var(--story-muted);border-top:1px solid #b5cdd81f;padding-top:17px}
.overview-story .story-content{display:grid;gap:24px;align-content:center;min-width:0}
.overview-story .story-icon{display:block;flex:none;width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
/* Stronger than the late generic presentation rules; only diagram internals. */
#product-tour figure.overview-story{min-height:0;font-size:18px;padding:25px;max-width:none}
#product-tour figure.overview-story h3{font-size:25px}
#product-tour figure.overview-story .story-note{font-size:17px;line-height:1.5}

/* Planning: one destination remains visible while a useful stop fits the route. */
.overview-story .story-planning-inputs{display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--story-muted);font-size:17px}
.overview-story .story-planning-inputs li{display:flex;align-items:center;gap:6px}
.overview-story .story-planning-inputs .story-icon{width:18px;height:18px;color:var(--story-cyan);stroke-width:2}
.overview-story .story-route-map{position:relative;background:radial-gradient(ellipse at 48% 48%,#abe7e60a,transparent 65%)}
.overview-story .story-route-map svg{display:block;width:100%;height:auto;overflow:visible}
.overview-story .story-route-direct{fill:none;stroke:#c7b58f38;stroke-width:2;stroke-dasharray:5 9}
.overview-story .story-route-active{fill:none;stroke:var(--story-cyan);stroke-width:3;stroke-dasharray:5 4;animation:story-route-travel 12s linear infinite;animation-play-state:var(--story-play-state)}
.overview-story .story-route-start{fill:#eef2f1;stroke:#101b20;stroke-width:5}
.overview-story .story-route-stop{fill:#14292e;stroke:var(--story-cyan);stroke-width:3}
.overview-story .story-route-stop-ring{fill:none;stroke:#abe7e629;stroke-width:1}
.overview-story .story-route-goal{fill:var(--story-gold);stroke:#ede2c8;stroke-width:1.5}
.overview-story .story-route-legend{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:16px;align-items:start;font-size:17px;line-height:1.4}
.overview-story .story-route-legend li{display:flex;align-items:flex-start;gap:9px;min-width:0}
.overview-story .story-route-legend i{display:block;flex:none;width:11px;height:11px;margin-top:6px}
.overview-story .story-route-legend .is-you{border-radius:50%;background:#eef2f1}
.overview-story .story-route-legend .is-stop{border:1.5px solid var(--story-cyan);transform:rotate(45deg)}
.overview-story .story-route-legend .is-goal{background:var(--story-gold);transform:rotate(45deg)}

/* Screen-space diagrams: geometry and icons, not fake native windows or data. */
.overview-story .story-screen-space{position:relative;isolation:isolate;width:100%;aspect-ratio:2.15;border:1px solid #9db7bb66;border-radius:3px;background:linear-gradient(#101d24,#15232a);overflow:hidden}
.overview-story .story-screen-space:after{content:'';position:absolute;inset:6px;border:1px solid #b5cdd815;pointer-events:none}
.overview-story .story-screen-landscape{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#a6babe28;stroke-width:2}
.overview-story .story-screen-landscape circle{fill:#b5cdd84a;stroke:none}
.overview-story .story-screen-player{fill:#c6d4d547;stroke:none}
.overview-story .story-arrangement-widget{position:absolute;display:grid;place-items:center;color:var(--story-cyan);border:1px solid #92cbd073;background:#10252b75;border-radius:3px}
.overview-story .story-arrangement-widget .story-icon{width:53%;height:61%}
.overview-story .story-arrangement-widget--map{left:4%;top:8%;width:20%;height:40%}
.overview-story .story-arrangement-widget--compass{left:40%;top:8%;width:20%;height:22%}
.overview-story .story-arrangement-widget--clock{right:4%;bottom:8%;width:16%;height:27%;color:var(--story-gold)}
.overview-story .story-arrangement-widget--target{left:4%;bottom:8%;width:16%;height:27%}
.overview-story .story-scene-glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--story-gold);background:#101d24;border-radius:50%;padding:10px}
.overview-story .story-scene-glyph .story-icon{width:43px;height:43px}
.overview-story .is-scene .story-screen-landscape{stroke:#c7b58f3d}
.overview-story .is-scene .story-screen-player,.overview-story .is-scene .story-screen-landscape circle{opacity:.4}
.overview-story .story-hud-contrast{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.overview-story .story-hud-contrast section{min-width:0}
.overview-story .story-hud-contrast h4{margin-top:15px;margin-bottom:5px}
.overview-story .story-hud-contrast p{color:var(--story-muted);font-size:17px}
.overview-story .story-context-helper{display:flex;align-items:center;gap:16px;padding-top:19px;border-top:1px solid #b5cdd82b}
.overview-story .story-context-helper>.story-icon{width:36px;height:36px;color:var(--story-cyan)}
.overview-story .story-context-helper p{display:grid;gap:4px;font-size:17px}
.overview-story .story-context-helper strong{font-weight:500}
.overview-story .story-context-helper p span{color:var(--story-muted)}

/* Layout: the empty middle is the point, with just one gentle move/snap cue. */
.overview-story .story-layout-demo{position:relative;padding:0 0 8px}
.overview-story .story-layout-demo .story-screen-space{aspect-ratio:2.1}
.overview-story .story-layout-demo .story-screen-space:before{content:'';position:absolute;inset:0;background:linear-gradient(#9bbbc20a 1px,transparent 1px),linear-gradient(90deg,#9bbbc20a 1px,transparent 1px);background-size:25px 25px}
.overview-story .is-arrangement .story-arrangement-widget--map{animation:story-widget-place 10s ease-in-out infinite;animation-play-state:var(--story-play-state)}
.overview-story .is-arrangement .story-arrangement-widget i{position:absolute;right:4px;bottom:4px;width:6px;height:6px;border-right:1px solid var(--story-cyan);border-bottom:1px solid var(--story-cyan)}
.overview-story .story-clear-centre{position:absolute;left:27%;right:23%;top:58%;text-align:center;color:var(--story-ink);font-size:18px;line-height:1.4;text-shadow:0 2px 8px #000}
.overview-story .story-layout-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;color:var(--story-muted);font-size:17px}
.overview-story .story-layout-tools li{display:flex;align-items:center;justify-content:center;gap:9px}
.overview-story .story-layout-tools .story-icon{width:21px;height:21px;color:var(--story-cyan)}

/* Cubes: evidence is the distinction. No fabricated counts, signals or timers. */
.overview-story .story-cube-comparison{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.overview-story .story-cube-comparison section{min-width:0;text-align:center}
.overview-story .story-cube-art{position:relative;display:grid;place-items:center;width:118px;height:118px;margin:0 auto 18px;color:var(--story-cyan)}
.overview-story .story-cube-art>.story-icon{position:relative;z-index:1;width:66px;height:66px;stroke-width:1.1}
.overview-story .story-cube-art i{position:absolute;inset:0;border:1px solid #abe7e655;border-radius:50%}
.overview-story .story-cube-art.is-live{background:radial-gradient(#abe7e615,transparent 68%)}
.overview-story .story-cube-art.is-live i:after{content:'';position:absolute;width:8px;height:8px;right:6px;top:22px;background:var(--story-cyan);border-radius:50%;box-shadow:0 0 13px #abe7e650}
.overview-story .story-cube-art.is-recorded{color:#9ba9ad}
.overview-story .story-cube-art.is-recorded i{border-style:dashed;border-color:#a3b3b15c}
.overview-story .story-cube-art.is-recorded>.story-icon{opacity:.48;stroke-dasharray:3 2}
.overview-story .story-cube-comparison h4{margin-bottom:7px}
.overview-story .story-cube-comparison p{font-size:17px;color:var(--story-muted)}
.overview-story .story-key-hint{display:flex;gap:12px;align-items:center;justify-content:center;font-size:17px;color:var(--story-muted);padding-top:17px;border-top:1px solid #b5cdd824}
.overview-story .story-key-hint>.story-icon{width:21px;height:21px;color:var(--story-gold)}

/* Performance stays proportional to its real, deliberately small native widget. */
#product-tour figure.overview-story.overview-story--performance-context{gap:21px;min-height:0}
.overview-story .story-metric-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.overview-story .story-metric-pair section{display:flex;align-items:flex-start;gap:15px;min-width:0}
.overview-story .story-metric-pair section+section{padding-left:24px;border-left:1px solid #b5cdd82b}
.overview-story .story-metric-pair .story-icon{color:var(--story-cyan);width:31px;height:31px;margin-top:3px}
.overview-story .story-metric-pair h4{margin-bottom:5px}
.overview-story .story-metric-pair p{color:var(--story-muted);font-size:17px}

/* One manual choice, two linked navigation views; no mock search controls. */
.overview-story .story-linked-destination{display:grid;gap:0;justify-items:center;text-align:center}
.overview-story .story-linked-destination>span{display:grid;justify-items:center;gap:13px;color:var(--story-ink)}
.overview-story .story-linked-destination>span>.story-icon{width:44px;height:44px;color:var(--story-gold)}
.overview-story .story-linked-destination strong{font-size:18px;font-weight:500}
.overview-story .story-destination-link{width:1px;height:31px;background:#a9d8da66}
.overview-story .story-destination-outputs{display:grid;grid-template-columns:1fr 1fr;gap:45px;width:100%;max-width:430px;padding-top:25px;border-top:1px solid #a9d8da66}
.overview-story .story-destination-outputs span{display:grid;justify-items:center;gap:13px}
.overview-story .story-destination-outputs .story-icon{width:39px;height:39px;color:var(--story-cyan)}

/* Existing secondary explanations retain the same public kind IDs. */
.overview-story .story-activities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 21px;font-size:17px}
.overview-story .story-activities li{position:relative;padding:12px 0 12px 17px;border-bottom:1px solid #b5cdd81c}
.overview-story .story-activities li:before{content:'';position:absolute;left:0;top:23px;width:5px;height:5px;background:var(--story-cyan);transform:rotate(45deg)}
.overview-story .story-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px}
.overview-story .story-flow li{position:relative;display:grid;align-content:start;gap:10px;padding-top:26px;min-width:0}
.overview-story .story-flow li+li:before{content:'';position:absolute;left:-27px;right:calc(100% - 11px);top:6px;border-top:1px solid #a9d8da66}
.overview-story .story-flow-dot{position:absolute;left:0;top:0;width:13px;height:13px;border:1px solid var(--story-cyan);transform:rotate(45deg);background:#17272d}
.overview-story .story-flow li:last-child .story-flow-dot{background:var(--story-cyan)}
.overview-story .story-flow strong{font-size:18px;line-height:1.35;font-weight:500}
.overview-story .story-flow li>span:last-child{font-size:17px;line-height:1.5;color:var(--story-muted)}
.overview-story .story-target-link{display:flex;gap:24px;align-items:center;padding:13px 0}
.overview-story .story-target-link>.story-icon{width:59px;height:59px;color:var(--story-cyan)}
.overview-story .story-target-link p{display:grid;gap:10px}
.overview-story .story-target-link strong{font-weight:500;font-size:20px}
.overview-story .story-target-link p span{color:var(--story-muted);font-size:17px}
.overview-story .story-formats{display:grid;grid-template-columns:16fr 21fr 32fr;gap:17px;align-items:start}
.overview-story .story-formats li{display:grid;gap:8px;min-width:0}
.overview-story .story-format-screen{position:relative;width:100%;border:1px solid #a5c8ce88;background:linear-gradient(135deg,#1e333c,#13232b);box-shadow:inset 0 0 0 5px #10191f}
.overview-story .story-format--standard .story-format-screen{aspect-ratio:16/9}
.overview-story .story-format--wide .story-format-screen{aspect-ratio:21/9}
.overview-story .story-format--super .story-format-screen{aspect-ratio:32/9}
.overview-story .story-format-screen i{position:absolute;left:40%;top:30%;width:20%;height:38%;border:1px solid #c7b58f55;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.overview-story .story-formats strong{color:var(--story-cyan);font-size:19px;font-weight:500}
.overview-story .story-formats li>span{color:var(--story-muted);font-size:17px;line-height:1.35}

[hidden] .overview-story,.overview-story[hidden],body[data-overview-active="false"] .overview-story{--story-play-state:paused}
.overview-story[hidden]{display:none}
@keyframes story-route-travel{to{stroke-dashoffset:-108}}
@keyframes story-widget-place{0%,13%,87%,100%{transform:translate(0,0)}35%,66%{transform:translate(12px,8px)}}
@container(max-width:510px){
 .overview-story .story-planning-inputs{gap:8px 15px}
 .overview-story .story-route-legend{gap:12px;font-size:17px;grid-template-columns:1fr 1.2fr 1fr}
 .overview-story .story-hud-contrast{gap:17px}
 .overview-story .story-hud-contrast h4{font-size:18px}
 .overview-story .story-metric-pair{grid-template-columns:1fr;gap:21px}
 .overview-story .story-metric-pair section+section{border-left:0;border-top:1px solid #b5cdd82b;padding:19px 0 0}
 .overview-story .story-activities{grid-template-columns:repeat(2,minmax(0,1fr))}
 .overview-story .story-flow{grid-template-columns:1fr;gap:20px}
 .overview-story .story-flow li{padding:0 0 0 29px;gap:3px}
 .overview-story .story-flow-dot{left:0;top:6px;width:11px;height:11px}
 .overview-story .story-flow li+li:before{top:-15px;bottom:calc(100% - 9px);left:5px;right:auto;height:20px;border-top:0;border-left:1px solid #a9d8da66}
 .overview-story .story-formats{--screen-height:min(58px,calc((100cqw - 146px)*9/32));grid-template-columns:1fr;gap:22px}
 .overview-story .story-formats li{grid-template-columns:minmax(0,1fr) 133px;gap:3px 13px;align-items:center}
 .overview-story .story-format-screen{grid-row:span 2;height:var(--screen-height);width:auto;max-width:none}
 .overview-story .story-format--standard .story-format-screen{width:calc(var(--screen-height)*16/9)}
 .overview-story .story-format--wide .story-format-screen{width:calc(var(--screen-height)*21/9)}
 .overview-story .story-format--super .story-format-screen{width:calc(var(--screen-height)*32/9)}
}
@container(max-width:360px){
 .overview-story .story-hud-contrast{grid-template-columns:1fr;gap:24px}
 .overview-story .story-hud-contrast .story-screen-space{aspect-ratio:2.7}
 .overview-story .story-route-legend{grid-template-columns:1fr;gap:9px}
 .overview-story .story-cube-comparison{gap:16px}
 .overview-story .story-cube-art{width:95px;height:95px}
 .overview-story .story-cube-art>.story-icon{width:52px;height:52px}
 .overview-story .story-cube-comparison h4{font-size:18px}
 .overview-story .story-layout-tools{grid-template-columns:repeat(2,1fr);gap:13px}
 .overview-story .story-clear-centre{font-size:17px;left:24%;right:22%;top:55%}
 .overview-story .story-target-link{align-items:flex-start;gap:17px}
 .overview-story .story-target-link>.story-icon{width:40px;height:40px}
}
@media(max-width:760px){
 #product-tour figure.overview-story{padding:20px;font-size:18px;min-height:0}
 #product-tour figure.overview-story .story-note{font-size:17px}
 #product-tour figure.overview-story h3{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
 .overview-story *,.overview-story *:before,.overview-story *:after{animation:none!important;transition:none!important}
}