/* Archery IT — product stories (Android Extractor, TRACEWIRE). Loaded only on those product pages.
   A sticky stage holds the scene while the step cards scroll past; story.js drives the scene from scroll position. */

.story-cue { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font: 600 .74rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.story-cue:hover { color: #fff; }
.story-cue .ic { width: 1.1em; height: 1.1em; animation: story-cue 2.4s ease-in-out infinite; }
@keyframes story-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------------------------------------------------------------- shared frame */
.story { position: relative; isolation: isolate; border-bottom: 1px solid var(--line); background: radial-gradient(70% 34% at 72% 0%, color-mix(in srgb, var(--acc) 8%, transparent), transparent 70%), linear-gradient(180deg, var(--bg), #040b10 45%, var(--bg)); }
.story-head { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(28px, 4vw, 48px); }
.story-head h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.03em; max-width: 15ch; }
.story-note { margin: 18px 0 0; max-width: 700px; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.story-skip { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.tw-grad { background: linear-gradient(90deg, #7be36b, #c9f7ad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.story-body { position: relative; display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); max-width: 1480px; margin: 0 auto; padding: 0 var(--gut); }
.story-steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 6vh 0 22vh; }
.story-step { min-height: 78vh; display: flex; align-items: center; }
.story-card { max-width: 380px; }
.story.is-live .story-card { opacity: .26; transform: translateY(14px); transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.story.is-live .story-step.is-active .story-card { opacity: 1; transform: none; }
.story-num { display: block; margin-bottom: 16px; font: 600 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.story-card h3 { font-size: clamp(1.6rem, 2.5vw, 2.25rem); line-height: 1.08; letter-spacing: -.025em; margin-bottom: .55em; }
.story-card p { font-size: 1.04rem; color: var(--text-2); margin: 0; }
.story-card .btn-row { margin-top: 24px; }

.story-stage { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); display: flex; align-items: center; padding: 22px 0; }
.story-frame { position: relative; width: 100%; height: 100%; max-height: 880px; border-radius: 24px; overflow: hidden; isolation: isolate; border: 1px solid color-mix(in srgb, var(--acc) 20%, var(--line)); background: radial-gradient(55% 50% at 50% 46%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 72%), linear-gradient(180deg, #071319, #03090d); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04); }
.story-visual { position: absolute; inset: 0; }
.story-hud { position: absolute; left: 22px; right: 56px; bottom: 16px; display: flex; justify-content: space-between; gap: 12px; font: 600 .64rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(184, 201, 208, .55); pointer-events: none; z-index: 6; }
.story-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, .04); z-index: 6; pointer-events: none; }
.story-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, transparent, var(--acc)); }
.story-rail { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; z-index: 7; }
.story-rail button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 6px; }
.story-rail button::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .24); transition: height .35s ease, background .35s ease; }
.story-rail button:hover::before { background: rgba(255, 255, 255, .6); }
.story-rail button[aria-current="step"]::before { height: 18px; background: var(--acc); }
.story-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }

.story-end { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(64px, 8vw, 104px); }
.story-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, .015); }
.story-sum > div { padding: 22px 22px 20px; border-left: 1px solid var(--line); }
.story-sum > div:first-child { border-left: 0; }
.story-sum-k { display: block; margin-bottom: 8px; font: 600 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.story-sum strong { display: block; font-size: 1.02rem; line-height: 1.35; }
.story-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; margin-top: 28px; }
.story-link { display: inline-block; color: #fff; font-weight: 700; line-height: 1.4; }
.story-link > span { display: block; margin-bottom: 4px; font: 600 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.story-link .ic { display: inline-block; width: 1em; height: 1em; margin-left: 6px; vertical-align: -2px; color: var(--acc); transition: transform .25s ease; }
.story-link:hover { color: #fff; }
.story-link:hover .ic { transform: translateX(4px); }

/* ---------------------------------------------------------------- Android Extractor */
.story-light { position: absolute; left: 50%; top: 46%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(25, 214, 205, .15), rgba(25, 214, 205, .04) 55%, transparent 76%); pointer-events: none; will-change: transform; }
.ex-scene { position: absolute; inset: 0; perspective: 2400px; perspective-origin: 50% 50%; }
.ex-device { position: absolute; left: 50%; top: 50%; width: 280px; height: 590px; margin: -295px 0 0 -140px; transform-style: preserve-3d; transform: rotateX(5deg) rotateY(-26deg) scale(.8); will-change: transform; }
.ex-l, .ex-rail { position: absolute; inset: 0; border-radius: 42px; }
.ex-l > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-a { position: absolute; width: 2px; height: 2px; margin: -1px 0 0 -1px; pointer-events: none; }
.ex-back { transform-style: preserve-3d; }
.ex-back::after { content: ""; position: absolute; inset: 0; border-radius: 42px; background: #03070a; transform: translateZ(-3px); }
.ex-batt { inset: auto; left: 30px; top: 236px; width: 220px; height: 296px; border-radius: 16px; transform-style: preserve-3d; background: linear-gradient(155deg, #27343d 0%, #131c22 52%, #1b262d 100%); border: 1px solid rgba(255, 255, 255, .1); }
.ex-batt::after { content: ""; position: absolute; inset: -1px; border-radius: 16px; background: #060b0e; transform: translateZ(-5px); }
.ex-batt .tab { position: absolute; left: 88px; top: -18px; width: 46px; height: 22px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #d39a48, #8f6026); }
.ex-batt .lbl { position: absolute; left: 22px; bottom: 22px; font: 600 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .3); }
.ex-batt .cells { position: absolute; left: 22px; right: 22px; top: 26px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(25, 214, 205, .55), rgba(25, 214, 205, 0)); }
.ex-board { --hl: 0; }
.ex-storage-glow { fill: rgba(25, 214, 205, calc(var(--hl) * .5)); stroke: rgba(150, 255, 250, var(--hl)); stroke-width: 1.5; }
.ex-rail { border: 2.5px solid var(--rc, #4a5761); }
.ex-rail.rim { border-color: #5f6e78; box-shadow: 0 0 calc(4px + var(--rim, 1) * 22px) rgba(25, 214, 205, calc(var(--rim, 1) * .4)), inset 0 0 calc(var(--rim, 1) * 10px) rgba(25, 214, 205, calc(var(--rim, 1) * .2)); }
.ex-rail .bv, .ex-rail .bp { position: absolute; right: -6px; width: 4px; border-radius: 2px; background: #5b6973; }
.ex-rail .bv { top: 150px; height: 74px; }
.ex-rail .bp { top: 250px; height: 44px; }
.ex-display { inset: 5px; border-radius: 37px; overflow: hidden; color: #eaf7f8; background: radial-gradient(120% 55% at 10% 0%, rgba(0, 195, 187, .5), transparent 62%), radial-gradient(110% 60% at 100% 100%, rgba(124, 104, 255, .42), transparent 62%), linear-gradient(170deg, #04161c, #060b16 60%, #0b0a1c); }
.ex-display::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 40% at 50% 62%, rgba(25, 214, 205, .1), transparent 70%); }
.ex-status { position: absolute; left: 28px; right: 26px; top: 15px; display: flex; justify-content: space-between; align-items: center; font: 600 11px/1 var(--sans); }
.ex-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.ex-sig i { width: 2.5px; border-radius: 1px; background: #eaf7f8; }
.ex-sig i:nth-child(1) { height: 3px; } .ex-sig i:nth-child(2) { height: 5px; } .ex-sig i:nth-child(3) { height: 7.5px; } .ex-sig i:nth-child(4) { height: 10px; }
.ex-sig b { width: 19px; height: 10px; margin-left: 6px; padding: 1.5px; border: 1.3px solid rgba(234, 247, 248, .85); border-radius: 3px; background: linear-gradient(90deg, #eaf7f8 72%, transparent 72%) content-box; }
.ex-punch { position: absolute; left: 50%; top: 13px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #010203; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .07); }
.ex-clock { position: absolute; left: 0; right: 0; top: 86px; text-align: center; font: 300 70px/1 var(--sans); letter-spacing: -.03em; }
.ex-date { position: absolute; left: 0; right: 0; top: 166px; text-align: center; font: 500 13px/1 var(--sans); opacity: .78; }
.ex-lock { position: absolute; left: 50%; bottom: 60px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.ex-lock svg { width: 18px; height: 18px; }
.ex-home { position: absolute; left: 50%; bottom: 14px; width: 96px; height: 4px; margin-left: -48px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.ex-glass { --sweep: 85%; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(112deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .14) 47%, rgba(255, 255, 255, .03) 53%, transparent 60%) no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 30%); background-size: 260% 100%, 100% 100%; background-position: var(--sweep) 0, 0 0; box-shadow: inset 0 0 0 5px rgba(1, 4, 6, .97), inset 0 0 0 6px rgba(255, 255, 255, .07); }
.ex-shadow { position: absolute; left: 50%; top: 50%; width: 460px; height: 140px; margin: -70px 0 0 -230px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .28) 60%, transparent); will-change: transform, opacity; }

.ex-wires .ex-leads path { fill: none; stroke: rgba(200, 235, 240, .5); stroke-width: 1; }
.ex-wires .ex-leads circle { fill: #19d6cd; stroke: rgba(25, 214, 205, .35); stroke-width: 5; }
.ex-trail { fill: none; stroke: rgba(80, 235, 225, .75); stroke-width: 1.6; stroke-dasharray: 3 7; animation: ex-dash 1s linear infinite; }
.ex-trail--glow { stroke: rgba(25, 214, 205, .16); stroke-width: 9; stroke-dasharray: none; animation: none; }
@keyframes ex-dash { to { stroke-dashoffset: -20; } }
.ex-packets circle { fill: #b4fff9; opacity: 0; }

.ex-tags { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ex-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 .62rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #d3e6ea; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.ex-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-2); }
.ex-tag.up { flex-direction: column-reverse; }
.ex-call { position: absolute; left: 0; top: 0; width: 214px; padding: 12px 14px 13px; border-radius: 12px; background: rgba(4, 15, 20, .86); border: 1px solid rgba(25, 214, 205, .3); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); font-size: .8rem; line-height: 1.45; color: var(--text-2); opacity: 0; z-index: 4; will-change: transform, opacity; }
.ex-call b { display: block; margin-bottom: 4px; font: 700 .66rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-2); }
.ex-chips { position: absolute; left: 0; top: 0; width: 214px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; z-index: 4; opacity: 0; will-change: transform, opacity; }
.ex-mode { position: relative; width: 100%; height: 1.3em; margin-bottom: 4px; font: 700 .66rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-2); }
.ex-mode span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .35s ease; }
.ex-mode .m-tgt, .ex-chips.is-tgt .m-full { opacity: 0; }
.ex-chips.is-tgt .m-tgt { opacity: 1; }
.ex-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(25, 214, 205, .55); background: rgba(0, 120, 115, .2); font: 600 .74rem/1 var(--mono); color: #fff; transition: color .35s, border-color .35s, background .35s; }
.ex-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 10px var(--teal-2); transition: background .35s, box-shadow .35s; }
.ex-chips.is-tgt .ex-chip:not(.tg) { color: var(--muted); border-color: var(--line-2); background: rgba(5, 16, 22, .7); }
.ex-chips.is-tgt .ex-chip:not(.tg) i { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(184, 201, 208, .45); }

.ex-case { position: absolute; right: 64px; top: 50%; width: min(420px, 46%); padding: 14px 14px 12px; border-radius: 16px; background: linear-gradient(180deg, rgba(9, 28, 36, .95), rgba(4, 13, 18, .97)); border: 1px solid rgba(25, 214, 205, .3); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 70px -40px rgba(25, 214, 205, .7); font-family: var(--mono); z-index: 4; opacity: 0; transform: translate(0, -50%); will-change: transform, opacity; }
.ex-case-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font-size: .72rem; color: #fff; }
.ex-case-bar .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 10px var(--teal-2); }
.ex-case-bar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-folders { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ex-folders li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font-size: .7rem; color: var(--text-2); overflow: hidden; }
.ex-folders .fi { display: grid; place-items: center; color: var(--teal-2); }
.ex-folders .fi .ic { width: 16px; height: 16px; }
.ex-folders .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e3f1f3; }
.ex-folders .ct { font-size: .66rem; color: var(--muted); white-space: nowrap; }
.ex-folders .ct b { color: #fff; font-weight: 600; }
.ex-folders .fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--teal-ink), var(--teal-2)); }
.ex-manifest { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: .62rem; }
.ex-manifest .mh, .ex-manifest .mr { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; padding: 6px 10px; }
.ex-manifest .mh { background: rgba(255, 255, 255, .04); color: var(--teal-2); letter-spacing: .08em; text-transform: uppercase; }
.ex-manifest .mr { border-top: 1px solid rgba(140, 200, 210, .08); color: var(--text-2); opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease; }
.ex-manifest .mr.on { opacity: 1; transform: none; }
.ex-manifest span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-manifest .mr span + span { color: var(--muted); }
.ex-verified { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .68rem; color: var(--ok); opacity: 0; transition: opacity .4s ease; }
.ex-verified .ic { width: 14px; height: 14px; }
.ex-verified.on { opacity: 1; }

.is-compact .ex-tags { display: none; }
.is-compact .ex-call { width: auto; padding: 7px 10px; }
.is-compact .ex-call span { display: none; }
.is-compact .ex-call b { margin: 0; font-size: .6rem; white-space: nowrap; }
.is-compact .ex-chips { width: auto; max-width: calc(100% - 24px); flex-direction: row; flex-wrap: wrap; gap: 6px; }
.is-compact .ex-mode { margin-bottom: 0; }
.is-compact .ex-chip { padding: 6px 10px; font-size: .64rem; gap: 7px; }
.is-compact .ex-case { right: auto; left: 50%; top: 30%; width: min(380px, calc(100% - 24px)); padding: 12px; transform: translate(-50%, 0); }
.is-compact .ex-folders { grid-template-columns: 1fr 1fr; gap: 5px; }
.is-compact .ex-folders li { grid-template-columns: 14px minmax(0, 1fr); padding: 6px 8px; font-size: .62rem; }
.is-compact .ex-folders .ct { grid-column: 2; font-size: .58rem; }
.is-compact .ex-folders .fi .ic { width: 13px; height: 13px; }
.is-compact .ex-manifest .mr:nth-child(n+3) { display: none; }
.is-compact .ex-case-bar { font-size: .62rem; padding-bottom: 9px; margin-bottom: 8px; }
.is-overlay .ex-case { right: auto; left: 50%; top: 48px; width: min(440px, calc(100% - 24px)); }
.is-overlay .story-hud { top: 14px; bottom: auto; right: 22px; }
.is-compact .story-hud { top: 14px; bottom: auto; right: 22px; }

/* ---------------------------------------------------------------- TRACEWIRE */
.story--tw .story-frame { background: radial-gradient(60% 50% at 55% 45%, rgba(76, 192, 63, .08), transparent 72%), linear-gradient(180deg, #06120d, #030a07); }
.story--tw .story-hud { display: none; }
.story--tw .story-rail { right: auto; left: 20px; top: auto; bottom: 18px; transform: none; }
.tw-bar { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid rgba(140, 220, 150, .12); background: rgba(3, 10, 8, .6); font: 600 .68rem/1 var(--mono); letter-spacing: .1em; color: var(--muted); z-index: 5; white-space: nowrap; }
.tw-bar .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.tw-bar b { color: #fff; letter-spacing: .2em; }
.tw-crumb { overflow: hidden; text-overflow: ellipsis; }
.tw-ill { margin-left: auto; color: #f2c46b; text-transform: uppercase; }
.tw-tools { position: absolute; left: 0; top: 44px; bottom: 0; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 14px; border-right: 1px solid rgba(140, 220, 150, .1); background: rgba(3, 10, 8, .35); z-index: 5; }
.tw-tools span { display: grid; justify-items: center; gap: 4px; width: 52px; padding: 8px 0 6px; border-radius: 10px; color: rgba(184, 201, 208, .42); transition: color .35s ease, background .35s ease; }
.tw-tools .ic { width: 18px; height: 18px; }
.tw-tools em { font: 600 .5rem/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.tw-tools span.on { color: #a6f39a; background: rgba(76, 192, 63, .13); }
.tw-graph { position: absolute; left: 64px; right: 0; top: 44px; bottom: 0; z-index: 1; }
.tw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; transition: opacity .2s linear; }
.tw-node { cursor: pointer; outline: none; }
.tw-node .core { fill: #06140d; stroke: var(--nc); stroke-width: 2; }
.tw-node .halo { fill: none; stroke: var(--nc); stroke-opacity: 0; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: stroke-opacity .3s ease; }
.tw-node use { color: var(--nc); pointer-events: none; }
.tw-node .lbl { fill: #dbe8df; font: 600 15px var(--sans); text-anchor: middle; paint-order: stroke; stroke: #030a07; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.t-person { --nc: #e4eee7; } .t-account { --nc: #5fd34f; } .t-company { --nc: #f2b84b; } .t-card { --nc: #7fd6c9; } .t-cash { --nc: #c9b6ff; }
.tw-node:hover .halo, .tw-node:focus-visible .halo, .tw-node.is-sel .halo { stroke-opacity: .75; }
.tw-node:focus-visible .core { stroke-width: 3.5; }
.tw-node.is-shared .halo { stroke: #f2c46b; stroke-opacity: .95; animation: tw-pulse 1.8s ease-out infinite; }
.tw-node.is-watch .halo { stroke: #ff7a7a; stroke-opacity: .95; animation: tw-pulse 1.8s ease-out infinite; }
.tw-node.is-watch .core { stroke: #ff8f8f; }
@keyframes tw-pulse { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.55); opacity: 0; } }
.tw-edge .base { fill: none; stroke: rgba(170, 205, 180, .4); stroke-width: calc(var(--k, 1) * 1.5px); transition: stroke .4s ease, stroke-width .4s ease; }
.tw-edge.is-amber .base { stroke: #f2c46b; stroke-width: calc(var(--k, 1) * 2.4px); }
.tw-edge.is-hot .base { stroke: rgba(123, 227, 107, .9); stroke-width: calc(var(--k, 1) * 2.4px); }
.tw-edge.is-near .base { stroke: rgba(230, 245, 235, .85); }
.tw-edge .flowline { stroke: #c4ffb0; stroke-width: calc(var(--k, 1) * 2.6px); stroke-linecap: round; stroke-dasharray: calc(var(--k, 1) * 1.5px) calc(var(--k, 1) * 17px); opacity: 0; transition: opacity .4s ease; animation: tw-flow 1.1s linear infinite; }
.tw-edge.is-hot .flowline { opacity: 1; }
@keyframes tw-flow { to { stroke-dashoffset: calc(var(--k, 1) * -18.5px); } }
.tw-edge .elbl { fill: rgba(214, 235, 220, .9); font: 500 12.5px var(--mono); font-size: calc(var(--k, 1) * 12.5px); text-anchor: middle; paint-order: stroke; stroke: #030a07; stroke-width: calc(var(--k, 1) * 4px); stroke-linejoin: round; }
.tw-edge.is-amber .elbl { fill: #f7d58e; }
.tw-edge.k-link .elbl { opacity: 0 !important; transition: opacity .25s ease; }
.tw-edge.k-link.is-near .elbl { opacity: 1 !important; }
.tw-edge.is-hot .elbl { fill: #bdf6ad; }

.tw-chip { position: absolute; left: 0; top: 0; padding: 6px 11px; border-radius: 999px; font: 600 .66rem/1.2 var(--mono); letter-spacing: .03em; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 3; will-change: transform, opacity; }
.tw-chip--shared { color: #ffe1a3; background: rgba(48, 32, 4, .9); border: 1px solid rgba(242, 196, 107, .6); }
.tw-chip--risk, .tw-chip--watch { color: #ffd2d2; background: rgba(52, 10, 10, .9); border: 1px solid rgba(255, 122, 122, .55); }
.tw-docs { position: absolute; left: 4%; top: 6%; display: grid; gap: 10px; z-index: 3; pointer-events: none; }
.tw-doc { display: flex; align-items: center; gap: 10px; width: 224px; padding: 10px 12px; border-radius: 10px; background: rgba(8, 22, 16, .92); border: 1px solid rgba(140, 220, 150, .24); box-shadow: 0 16px 34px -18px #000; color: var(--text-2); font-size: .72rem; line-height: 1.35; will-change: transform, opacity; }
.tw-doc .ic { width: 20px; height: 20px; color: #9be38c; }
.tw-doc b { display: block; color: #fff; font: 600 .74rem/1.3 var(--mono); }
.tw-report { position: absolute; left: 50%; top: 50%; width: min(340px, 86%); padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(10, 30, 20, .96), rgba(4, 12, 9, .98)); border: 1px solid rgba(123, 227, 107, .35); box-shadow: 0 40px 90px -40px #000, 0 0 70px -40px rgba(76, 192, 63, .8); z-index: 4; opacity: 0; transform: translate(-50%, -44%); pointer-events: none; font-size: .8rem; will-change: transform, opacity; }
.tw-report-h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid rgba(140, 220, 150, .15); }
.tw-report-h .ic { width: 20px; height: 20px; color: #9be38c; }
.tw-report-h b { color: #fff; }
.tw-report-h span { margin-left: auto; font: 600 .64rem/1 var(--mono); color: var(--muted); }
.tw-report-r { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: var(--text-2); border-bottom: 1px dashed rgba(140, 220, 150, .1); }
.tw-report-r b { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-family: var(--mono); font-weight: 600; }
.tw-report-r.ok b { color: #8ff07d; }
.tw-report-r .ic { width: 14px; height: 14px; }
.tw-report-f { margin-top: 10px; font: 600 .6rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #f2c46b; }
.tw-timeline { position: absolute; left: 80px; right: 272px; bottom: 16px; height: 104px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(140, 220, 150, .16); background: rgba(4, 14, 10, .86); z-index: 4; opacity: 0; font-family: var(--mono); will-change: transform, opacity; }
.tw-tl-h { display: flex; justify-content: space-between; gap: 10px; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tw-tl-h .lg { display: inline-flex; align-items: center; gap: 6px; }
.tw-tl-h .lg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.tw-tl-h .lg .p { background: #4cc03f; }
.tw-tl-h .lg .o { margin-left: 8px; background: #ff7a7a; }
.tw-tl-axis { position: relative; height: 30px; margin-top: 10px; border-bottom: 1px solid rgba(140, 220, 150, .25); }
.tw-dot { position: absolute; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.tw-dot.p { background: #4cc03f; box-shadow: 0 0 10px rgba(76, 192, 63, .8); }
.tw-dot.o { bottom: 10px; background: #ff7a7a; box-shadow: 0 0 10px rgba(255, 122, 122, .8); }
.tw-dot.on { transform: scale(1); }
.tw-tl-m { display: flex; justify-content: space-between; margin-top: 8px; font-size: .6rem; color: rgba(184, 201, 208, .55); }
.tw-panel { position: absolute; right: 16px; bottom: 16px; width: 240px; min-height: 104px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(140, 220, 150, .22); background: rgba(4, 14, 10, .9); z-index: 4; display: flex; flex-direction: column; gap: 3px; }
.tw-panel-k { font: 600 .6rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9be38c; }
.tw-panel-t { color: #fff; font-size: .95rem; }
.tw-panel-d { color: var(--text-2); font-size: .78rem; line-height: 1.4; }
.tw-panel-n { margin-top: auto; padding-top: 4px; font: 600 .56rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #f2c46b; }

.is-compact .tw-tools { display: none; }
.is-compact .tw-crumb { display: none; }
.is-compact .tw-graph { left: 0; top: 44px; bottom: 38%; }
.is-compact .tw-docs { left: 50%; top: 4%; margin-left: -100px; gap: 8px; }
.is-compact .tw-doc { width: 200px; padding: 8px 10px; }
.is-compact .tw-timeline { left: 12px; right: 12px; top: 52px; bottom: auto; height: 96px; padding: 10px 12px; }
.is-compact .tw-tl-h .lg { display: none; }
.is-compact .tw-panel { left: 12px; right: 12px; top: 52px; bottom: auto; width: auto; min-height: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.is-compact .tw-panel.is-open { opacity: 1; visibility: visible; }
.is-compact .tw-report { top: 32%; }

/* ---------------------------------------------------------------- phones and tablets: cards scroll over the stage */
@media (max-width: 999px) {
  .story-body { display: block; padding: 0; }
  .story-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); padding: 10px var(--gut) 12px; z-index: 0; }
  .story-frame { max-height: none; border-radius: 18px; }
  .story-steps { position: relative; z-index: 2; margin-top: calc(-1 * (100vh - var(--header-h))); margin-top: calc(-1 * (100svh - var(--header-h))); padding: 0 calc(var(--gut) + 10px) 26vh; pointer-events: none; }
  .story-step { min-height: 96vh; min-height: 96svh; align-items: flex-end; padding-bottom: 5vh; }
  .story-card { pointer-events: auto; max-width: 560px; margin: 0 auto; padding: 18px 18px 20px; border-radius: 16px; background: rgba(4, 12, 17, .9); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); }
  .story.is-live .story-card { opacity: 1; transform: none; transition: none; }
  .story-num { margin-bottom: 10px; }
  .story-card h3 { font-size: 1.35rem; }
  .story-card p { font-size: .95rem; }
  .story-rail { display: none; }
  .story-sum { grid-template-columns: 1fr 1fr; }
  .story-sum > div:nth-child(3) { border-left: 0; }
  .story-sum > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .story-sum { grid-template-columns: 1fr; }
  .story-sum > div { border-left: 0; }
  .story-sum > div + div { border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- reduced motion: a still composition and a readable list */
.story--static .story-body { display: block; padding: 0 var(--gut); }
.story--static .story-stage { position: relative; top: auto; height: min(76vh, 720px); padding: 0; }
.story--static .story-frame { max-height: none; }
.story--static .story-steps { margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; pointer-events: auto; }
.story--static .story-step { min-height: 0; display: block; padding: 0; }
.story--static .story-card { opacity: 1; transform: none; max-width: none; height: 100%; padding: 22px; border-radius: 14px; background: linear-gradient(180deg, rgba(20, 46, 60, .5), rgba(10, 24, 32, .5)); border: 1px solid var(--line); box-shadow: none; }
.story--static .story-rail, .story--static .story-progress { display: none; }
.story--static .story-cue .ic, .story--static .ex-trail, .story--static .tw-edge .flowline, .story--static .tw-node .halo { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .story-cue .ic, .ex-trail, .tw-edge .flowline, .tw-node .halo { animation: none !important; }
}
.story--static .is-compact .tw-graph { bottom: 0; }
.is-narrow .tw-panel { left: auto; right: 12px; top: 54px; bottom: auto; width: 240px; min-height: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.is-narrow .tw-panel.is-open { opacity: 1; visibility: visible; }
.is-narrow .tw-timeline { right: 16px; }
.tw-panel.is-off { opacity: 0; visibility: hidden; }
.is-compact .tw-edge.k-flow .elbl { display: none; }
.story--static .story-scene { visibility: hidden; }
.ex-spec { position: absolute; left: 22px; bottom: 44px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 5; pointer-events: none; will-change: transform, opacity; }
.ex-spec span { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(25, 214, 205, .45); background: rgba(0, 120, 115, .16); font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #dff9f7; }
.is-compact .ex-spec, .is-overlay .ex-spec { top: 40px; bottom: auto; }