.story-visual { --story-accent: var(--accent-1); position: relative; isolation: isolate; }
.story-visual[data-phase="1"] { --story-accent: var(--accent-2); }
.story-visual[data-phase="2"] { --story-accent: var(--accent-1); }
.story-visual[data-phase="3"] { --story-accent: var(--accent-4); }
.story-visual::before { content: ""; position: absolute; inset: 5% -6% 22%; z-index: -1; background: radial-gradient(ellipse, color-mix(in srgb, var(--story-accent) 10%, transparent), transparent 68%); transition: background 1s; }
.story-topline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--text-muted); font: 0.65rem 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.story-toggle { flex-shrink: 0; display: none; align-items: center; gap: 0.4rem; background: transparent; border: 0; color: var(--text-muted); font: inherit; letter-spacing: 0; padding: 0.7rem 0; cursor: pointer; }
.story-ready .story-toggle { display: inline-flex; }
.story-toggle:hover { color: var(--text-primary); }
.story-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.story-toggle .play-icon, .story-visual[data-paused="true"] .pause-icon { display: none; }
.story-visual[data-paused="true"] .play-icon { display: block; }
.story-scene { display: block; width: 100%; height: auto; overflow: visible; color: var(--story-accent); }
.story-orbit { fill: none; stroke: var(--text-muted); stroke-width: 0.7; opacity: 0.12; }
.story-axis { stroke: var(--text-muted); stroke-width: 0.6; stroke-dasharray: 2 7; opacity: 0.2; }
.story-piece { transition: transform 1.5s cubic-bezier(.22,.8,.2,1); }
.story-tile { fill: var(--bg-elevated); stroke: color-mix(in srgb, var(--story-accent) 55%, transparent); stroke-width: 1; transition: stroke 1s; }
.story-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.story-line { stroke: var(--text-muted); stroke-width: 3; stroke-linecap: round; opacity: 0.35; }
.story-small-line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.story-piece:nth-child(1) { transform: translate(65px, 63px) rotate(-12deg); }
.story-piece:nth-child(2) { transform: translate(256px, 40px) rotate(7deg); }
.story-piece:nth-child(3) { transform: translate(446px, 95px) rotate(14deg); }
.story-piece:nth-child(4) { transform: translate(89px, 235px) rotate(8deg); }
.story-piece:nth-child(5) { transform: translate(278px, 213px) rotate(-9deg); }
.story-piece:nth-child(6) { transform: translate(455px, 257px) rotate(-6deg); }
.story-visual:not([data-phase="0"]) .story-piece:nth-child(1) { transform: translate(129px, 117px); }
.story-visual:not([data-phase="0"]) .story-piece:nth-child(2) { transform: translate(259px, 117px); }
.story-visual:not([data-phase="0"]) .story-piece:nth-child(3) { transform: translate(389px, 117px); }
.story-visual:not([data-phase="0"]) .story-piece:nth-child(4) { transform: translate(129px, 227px); }
.story-visual:not([data-phase="0"]) .story-piece:nth-child(5) { transform: translate(259px, 227px); }
.story-visual:not([data-phase="0"]) .story-piece:nth-child(6) { transform: translate(389px, 227px); }
.story-wires { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 700; stroke-dashoffset: 700; opacity: 0; transition: stroke-dashoffset 2s ease .6s, opacity .6s; }
.story-visual[data-phase="1"] .story-wires { stroke-dashoffset: 0; opacity: .65; }
.story-window { opacity: 0; transform: translateY(12px) scale(.97); transform-origin: 300px 195px; transition: opacity 1s, transform 1s; }
.story-window-frame { fill: color-mix(in srgb, var(--bg-elevated) 65%, transparent); stroke: color-mix(in srgb, var(--story-accent) 50%, transparent); }
.story-window-top { fill: none; stroke: var(--text-muted); opacity: .2; }
.story-window-dot { fill: currentColor; opacity: .6; }
.story-window-name { fill: var(--text-muted); font: 9px 'JetBrains Mono', monospace; letter-spacing: 2px; }
.story-visual[data-phase="2"] .story-window, .story-visual[data-phase="3"] .story-window { opacity: 1; transform: none; }
.story-checks { opacity: 0; transition: opacity .8s .6s; }
.story-checks circle { fill: var(--bg-elevated); stroke: currentColor; }
.story-checks path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.story-visual[data-phase="2"] .story-checks, .story-visual[data-phase="3"] .story-checks { opacity: 1; }
.story-expansion { opacity: 0; transform: scale(.9); transform-origin: 300px 195px; transition: opacity 1s .2s, transform 1s .2s; }
.story-visual[data-phase="3"] .story-expansion { opacity: 1; transform: none; }
.story-extension { fill: var(--bg-elevated); stroke: currentColor; stroke-width: 1; }
.story-extension-link { fill: none; stroke: currentColor; opacity: .5; }
.story-signal { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 12 200; animation: story-flow 3s linear infinite; }
@keyframes story-flow { to { stroke-dashoffset: -212; } }
.story-visual[data-paused="true"] .story-signal, .story-visual[data-suspended="true"] .story-signal { animation-play-state: paused; }
.story-caption { display: grid; min-height: 5.3rem; padding: 0 0 1.2rem; }
.story-caption > div { grid-area: 1 / 1; }
.story-caption h2 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; color: var(--text-primary); margin: 0 0 .45rem; }
.story-caption p { color: var(--text-muted); font-size: .92rem; line-height: 1.6; margin: 0; }
.story-caption [hidden] { display: block; visibility: hidden; }
.story-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.story-step { min-width: 0; position: relative; border: 0; border-top: 2px solid var(--card-border); padding: .85rem 0 .5rem; text-align: left; background: transparent; color: var(--text-muted); font: .68rem 'JetBrains Mono', monospace; cursor: pointer; transition: color .3s, border-color .3s; }
.story-step::before { content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: var(--story-accent); transform: scaleX(0); transform-origin: left; }
.story-step[aria-pressed="true"] { color: var(--text-primary); }
.story-step[aria-pressed="true"]::before { transform: scaleX(var(--story-progress, 1)); }
.story-step span:first-child { display: block; color: var(--story-accent); margin-bottom: .45rem; font-size: .6rem; }
.story-step:hover { color: var(--text-primary); border-color: var(--text-muted); }
.story-step:focus-visible, .story-toggle:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 5px; border-radius: 2px; }
@media (max-width: 440px) {
  .story-topline { font-size: .55rem; letter-spacing: .06em; }
  .story-caption { min-height: 6.3rem; }
  .story-caption p { font-size: .85rem; }
  .story-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
  .story-step { font-size: .7rem; padding-top: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story-visual *, .story-visual::before { animation: none !important; transition: none !important; }
}