:root{color-scheme:dark;--bg:#090d13;--surface:#10161e;--border:#25303b;--text:#edf3f7;--muted:#9aa8b7;--green:#85f3d4;--red:#ee9ca7;--blue:#8eaef3;--gold:#dcc18c}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",sans-serif;font-size:15px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:5px}button{cursor:pointer}svg{display:block;width:100%;height:auto}.shell{width:min(1200px,calc(100% - 96px));margin-inline:auto}.skip{position:absolute;top:-100px;left:15px;z-index:100;background:var(--green);color:#071914;padding:12px}.skip:focus{top:12px}.header{height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 4%;border-bottom:1px solid #ffffff0a}.brand{display:flex;align-items:center;white-space:nowrap;letter-spacing:-1px;font-size:24px;font-weight:650}.brand-domain{font-weight:350;color:var(--muted)}.brand-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-right:10px;font-size:36px;color:var(--green);line-height:1}.brand-mark span{font-size:23px;margin-left:-7px;margin-top:-17px}.header nav{display:flex;gap:30px;font-size:13px;color:var(--muted)}.header nav a:hover,.footer a:hover{color:var(--green)}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:14px 22px;border-radius:7px;font-size:14px;font-weight:600;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.button-small{padding:9px 16px;font-size:12px}.button-outline{border:1px solid #3c4b57}.button-primary{background:var(--green);color:#0a201b}.button-primary:hover{background:#b3ffe9}.hero{min-height:690px;display:grid;grid-template-columns:1.04fr 1fr;gap:36px;align-items:center;padding-top:65px;padding-bottom:75px}.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:650;color:var(--green);margin:0 0 26px;display:flex;align-items:center;gap:9px}.status-dot{display:inline-block;width:6px;height:6px;flex-shrink:0;background:var(--green);border-radius:50%;box-shadow:0 0 12px #85f3d440}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(54px,5.1vw,76px);letter-spacing:-4px;line-height:1.07;font-weight:550;margin-bottom:26px}.gradient{color:var(--green);background:linear-gradient(100deg,#a4ffe2,#79b9f4);background-clip:text;-webkit-text-fill-color:transparent}.hero-description{max-width:450px;color:var(--muted);font-size:17px;line-height:1.85;margin-bottom:32px}.hero-actions{display:flex;align-items:center;gap:20px}.hero-caption{font-size:11px;color:var(--muted)}.hero-footnote{display:flex;align-items:center;gap:10px;color:#7e8d9d;font-size:11px;margin-top:35px}.mini-line{width:24px;height:1px;background:var(--green)}.hero-art{position:relative;min-height:440px;background:radial-gradient(ellipse at 75% 30%,#15443e33,transparent 65%);border:1px solid #2b3c453f;border-radius:16px;box-shadow:0 40px 130px #0005}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#8099ad0b 1px,transparent 1px),linear-gradient(90deg,#8099ad0b 1px,transparent 1px);background-size:45px 45px;mask-image:linear-gradient(transparent,#000,transparent)}.art-top,.art-bottom{position:relative;display:flex;justify-content:space-between;gap:14px;font-size:8px;letter-spacing:1px;color:#7e92a1;padding:20px}.art-top .status-dot{width:4px;height:4px;margin-right:5px}.paths{position:relative;margin:10px 0}.historical{stroke:url(#pathFade);stroke-width:2.5;fill:none}.future{fill:none;stroke-width:2}.upper{stroke:var(--green)}.middle{stroke:#8da6ba;stroke-dasharray:4 7;opacity:.5}.lower{stroke:var(--red);opacity:.55}.future-area{fill:#85f3d409}.cut-line{stroke:#637384;stroke-dasharray:3 6;opacity:.55}.paths text{font-size:10px;fill:#7f99a9;letter-spacing:2px}.pulse-ring{fill:#85f3d411;stroke:#85f3d43d}.floating-note{position:absolute;left:17%;bottom:52px;display:flex;align-items:center;gap:14px;background:#14212bee;border:1px solid #3c555f;border-radius:10px;padding:15px 20px;box-shadow:0 12px 50px #0005;font-size:12px;color:#a6b8c5}.floating-note strong{color:var(--text);font-weight:500}.note-icon{color:var(--green);font-size:28px}.note-bars{color:var(--green);font-size:16px;padding-left:22px}.art-bottom{padding-top:0}.principles{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding-block:26px;gap:18px;color:#abb8c4;font-size:12px}.principles>span{font-size:9px;letter-spacing:1.6px;color:#687b8d}.principles>div:before{content:"+";margin-right:15px;color:var(--green)}.section{padding-block:110px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:42px}.section-heading .eyebrow{margin-bottom:20px}h2{font-size:clamp(30px,3vw,42px);line-height:1.22;letter-spacing:-1.6px;font-weight:500;margin-bottom:0}.section-heading>p{max-width:320px;color:var(--muted);font-size:13px;line-height:1.9;margin-bottom:3px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{padding:28px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(145deg,#131d25,#0d1219)}.feature-number{font-size:9px;letter-spacing:1.5px;color:#8da1b3}.feature-symbol{font-size:33px;color:var(--green);margin:22px 0 14px}.feature h3{font-size:19px;font-weight:500;letter-spacing:-.4px;margin-bottom:10px}.feature p{font-size:13px;color:var(--muted);margin:0;line-height:1.9}.demo-section{background:#0d1219;border-block:1px solid #1e2932}.terminal{border:1px solid #35414c;border-radius:12px;background:#0a1017;overflow:hidden;box-shadow:0 20px 80px #0003}.terminal-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 22px;border-bottom:1px solid var(--border);font-size:10px;letter-spacing:1px}.terminal-brand{display:flex;align-items:center;gap:9px}.muted{color:var(--muted)}.demo-badge{font-size:8px;letter-spacing:.8px;border:1px solid #625233;color:var(--gold);background:#dcc18c09;padding:4px 8px;border-radius:4px}.terminal-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px;border-bottom:1px solid #25303b99}.terminal-toolbar>div>.muted{font-size:8px;letter-spacing:1.4px}.terminal-toolbar strong{display:block;font-size:17px;font-weight:500}.terminal-toolbar strong span{color:var(--green);margin-left:10px}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-size:9px;color:var(--muted);padding:0 0 6px;letter-spacing:.4px}.switcher{display:flex;gap:4px;background:#151e28;border:1px solid var(--border);border-radius:6px;padding:4px}.switcher button{border:0;border-radius:4px;background:none;color:var(--muted);padding:7px 12px;font-size:10px;white-space:nowrap}.switcher button[aria-pressed=true]{color:var(--green);background:#85f3d414;box-shadow:0 0 0 1px #85f3d423}.terminal-body{display:grid;grid-template-columns:1.65fr 1fr}.chart-panel{padding:24px 18px;min-width:0}.chart-heading{display:flex;justify-content:space-between;color:#8ea0b3;font-size:8px;letter-spacing:1px;padding:0 8px 18px}.chart-grid{fill:none;stroke:#26303c;stroke-width:.7}.upper-zone{fill:#85f3d407;stroke:#85f3d438;stroke-dasharray:4 4}.lower-zone{fill:#ee9ca707;stroke:#ee9ca733;stroke-dasharray:4 4}.zone-label{fill:#798c9d;font-size:8px;letter-spacing:.7px}.demo-projection{fill:none;stroke:var(--green);stroke-width:2;stroke-dasharray:5 6}.chart-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:8px;color:#8c9dad;padding:22px 8px 0}.legend-dot{width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:5px}.green{background:var(--green)}.red{background:var(--red)}.probability-panel{border-left:1px solid var(--border);padding:24px}.panel-label{font-size:9px;letter-spacing:1px;display:flex;justify-content:space-between;gap:8px;color:var(--muted)}.panel-label>span{color:#d5dfeb}.scenario-head{display:flex;align-items:center;gap:8px;margin-top:22px}.scenario-head h3{font-size:16px;font-weight:500;margin:0}.probability-panel>p{font-size:11px;color:var(--muted);margin:8px 0 23px}.probability-row{margin-bottom:14px}.probability-row>div:first-child{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}.probability-row strong{font-size:13px;font-weight:600}.track{height:4px;border-radius:4px;background:#1a2530;overflow:hidden}.track span{display:block;height:100%;width:var(--value);background:var(--row-color);transition:width .4s}.calculation{border-top:1px solid var(--border);margin-top:25px;padding-top:14px;font-size:10px;color:var(--muted)}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.calculation summary{display:flex;justify-content:space-between}.calculation summary span{color:var(--green)}.calculation[open] summary{margin-bottom:12px}.calculation p{line-height:1.8}.terminal-footer{padding:12px 22px;border-top:1px solid var(--border);font-size:9px;color:#8ea0b2;display:flex;align-items:center;gap:8px}.demo-indicator{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0}.demo-disclaimer{font-size:10px;color:#8d9bac;text-align:center;margin:20px auto 0;max-width:740px}.mobile-section{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:90px}.mobile-copy h2{font-size:46px;margin-bottom:26px}.mobile-copy>p:not(.eyebrow){color:var(--muted);max-width:460px;line-height:1.9}.roadmap-label{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1px;color:var(--gold);margin-top:28px}.roadmap-label .status-dot{background:var(--gold);box-shadow:none}.connection{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:22px 0;font-size:10px;color:#bdcbd5}.connection>span:nth-child(odd){padding:8px;border:1px solid var(--border);border-radius:4px;background:#121a23}.connection>span:nth-child(even){color:var(--green)}.mobile-copy .small-print{font-size:10px;line-height:1.8;max-width:440px}.phone-stage{position:relative;display:flex;justify-content:center;min-height:520px;align-items:center}.phone{z-index:1;position:relative;background:linear-gradient(150deg,#14202a,#0a1017);border:6px solid #27313c;border-radius:38px;box-shadow:0 30px 90px #0008,inset 0 0 0 1px #48535d;width:272px;min-height:500px;padding:40px 20px 24px;transform:rotate(7deg)}.phone-island{position:absolute;top:10px;left:calc(50% - 38px);width:76px;height:16px;border-radius:12px;background:#06090c}.phone-header{display:flex;justify-content:space-between;font-weight:600;letter-spacing:-.5px;font-size:17px;margin-bottom:33px}.phone-header span{color:var(--green)}.phone-label{font-size:8px;letter-spacing:1.4px;color:var(--muted)}.phone h3{font-weight:450;font-size:25px;line-height:1.2;letter-spacing:-.8px;margin-bottom:22px}.phone-card{margin-top:20px;padding:16px 12px;border:1px solid var(--border);border-radius:10px;background:#17232c}.phone-card>span{font-size:7px;letter-spacing:1px;color:var(--muted)}.phone-card strong{display:block;font-size:14px;margin:6px 0 15px;font-weight:500}.phone-bar{height:5px;display:flex;gap:3px}.phone-bar i{background:var(--green);flex:4}.phone-bar i:nth-child(2){background:var(--red);flex:2}.phone-bar i:nth-child(3){background:var(--gold);flex:1}.phone-bar i:nth-child(4){background:var(--blue);flex:3}.phone-card small{display:block;font-size:8px;margin-top:12px;color:var(--muted)}.phone-bottom{font-size:6px;display:flex;justify-content:space-between;margin-top:25px;letter-spacing:.6px;color:#8596a7}.phone-bottom span{color:var(--green)}.orbit{position:absolute;border:1px solid #2d4d493d;border-radius:50%;width:410px;height:410px;transform:rotate(-30deg) scaleX(.8)}.orbit-two{width:500px;height:500px;opacity:.4}.closing{text-align:center;border-top:1px solid var(--border);padding-block:85px 100px}.closing .eyebrow{justify-content:center}.closing h2{margin-bottom:32px}.footer{border-top:1px solid var(--border);padding-top:34px;padding-bottom:22px}.footer-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer-top .brand{font-size:20px}.footer-top>span,.footer-top>a:last-child{font-size:11px;color:var(--muted)}.risk{font-size:10px;line-height:1.9;color:#8392a1;margin:28px 0;max-width:1050px}.risk strong{color:#b4c0cb}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#738395;border-top:1px solid #1a2530;padding-top:20px}.noscript-note{padding:20px;color:var(--gold)}
@media(min-width:1500px){.hero{min-height:760px}}
.phone-stage{overflow:hidden}
@media(max-width:1050px){.shell{width:calc(100% - 56px)}.header nav{gap:15px}.hero{gap:20px}.hero-actions{flex-wrap:wrap}h1{font-size:58px}.hero-art{min-height:390px}.art-top{font-size:7px}.hero-description{font-size:15px}.terminal-body{grid-template-columns:1.3fr 1fr}.mobile-section{gap:30px}.mobile-copy h2{font-size:40px}.orbit-two{width:390px;height:390px}.orbit-one{width:330px;height:330px}}
@media(max-width:760px){html{scroll-padding-top:25px}.shell{width:calc(100% - 40px)}.header{padding:0 20px;height:76px}.brand{font-size:21px}.brand-mark{width:26px;margin-right:7px}.header nav{display:none}.header .button{font-size:10px;gap:10px;padding:8px 12px}.hero{grid-template-columns:1fr;padding-block:55px;gap:40px;min-height:0}h1{font-size:64px;letter-spacing:-3.5px}.hero-description{max-width:500px}.hero-art{min-height:0;max-width:560px;width:100%;margin:auto}.art-top{font-size:7px}.floating-note{bottom:42px;font-size:10px;padding:10px 16px}.art-bottom{font-size:6px}.principles{flex-wrap:wrap;justify-content:flex-start;column-gap:24px;row-gap:14px;padding-block:20px}.principles>span{width:100%}.principles>div{font-size:10px}.principles>div:before{margin-right:6px}.section{padding-block:65px}.section-heading{display:block;margin-bottom:28px}.section-heading>p{max-width:500px;margin-top:22px}.feature-grid{grid-template-columns:1fr;gap:12px}.feature{padding:24px}.feature-symbol{margin:12px 0;font-size:27px}.feature p{max-width:500px}.terminal-toolbar{align-items:flex-start;flex-direction:column;gap:15px;padding:18px}.terminal-toolbar fieldset{width:100%}.switcher button{flex:1;padding:8px 5px;font-size:9px}.terminal-body{grid-template-columns:1fr}.probability-panel{border-left:0;border-top:1px solid var(--border);padding:23px}.chart-panel{padding:20px 10px}.terminal-header{padding:14px 12px;font-size:8px;gap:8px}.terminal-brand>.muted{display:none}.demo-badge{font-size:7px}.terminal-footer{font-size:8px;align-items:flex-start;padding:14px}.mobile-section{grid-template-columns:1fr;gap:30px}.phone-stage{min-height:520px;overflow:hidden}.mobile-copy h2{font-size:38px}.mobile-copy>p:not(.eyebrow){font-size:14px}.mobile-copy .small-print{font-size:10px}.phone{transform:rotate(5deg)}.closing{padding-block:60px}.closing h2{font-size:31px}.footer-top{flex-wrap:wrap}.footer-top>span{width:100%;order:3}.footer-bottom{flex-direction:column;gap:6px}.hero-footnote{font-size:10px}.chart-heading{font-size:7px}.chart-legend{gap:12px}.eyebrow{font-size:8px;letter-spacing:1.5px}}
@media(max-width:360px){h1{font-size:54px}.header .button{padding:7px;gap:6px}.brand{font-size:18px}.shell{width:calc(100% - 30px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Public visualizations use synthetic data, independent of the private panel. */
#evolution-chart,#app-evolution{touch-action:pan-y;cursor:ew-resize;user-select:none;outline-offset:4px}
.phase-controls{display:flex;flex-wrap:wrap;gap:8px;padding:12px 22px;background:#101c25}
.phase-controls button{border:1px solid #355348;border-radius:6px;padding:9px;color:#a6c7bd;background:none;font:11px "Segoe UI",sans-serif;min-height:44px}
.phase-controls button[aria-pressed=true]{color:#8befd0;background:#8befd016}
.phase-controls>span{font-size:10px;color:#a9bdcb;align-self:center}
#market-index{display:block;max-width:100%;margin-top:7px;background:#11202c;color:#8befd0;border:1px solid #355348;border-radius:6px;padding:10px;font:14px "Segoe UI",sans-serif}
body {
  background-image: radial-gradient(ellipse 75% 650px at 90% 150px, #143d3926, transparent),
    radial-gradient(ellipse 50% 600px at 0% 2000px, #15294b25, transparent);
}
.header { background: #090d13b8; }
.hero { gap: 48px; }
.hero h1 { font-size: clamp(46px, 4.65vw, 68px); letter-spacing: -3.4px; }
.hero-art { border-color: #3b62584a; transform: perspective(1200px) rotateY(-7deg) rotateX(3deg); }
.hero-art::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #62f7ca0a; filter: blur(40px); z-index: -1;
}
.hero-data-strip { display: flex; justify-content: space-around; border-top: 1px solid #284039; padding: 18px 10px; font-size: 9px; color: var(--green); }
.hero-data-strip b { font-size: 11px; color: #b6c6d1; font-weight: 450; margin-left: 8px; }
.historical { stroke-dasharray: 800; animation: draw-path 3s ease-out both; }
.upper { stroke-dasharray: 500; animation: draw-path 4s ease-out both; }
.pulse-ring { transform-origin: 286px 141px; animation: chart-pulse 4s ease-out 3; }
.feature { transition: transform .25s, border-color .25s; position: relative; overflow: hidden; }
.feature:hover { transform: translateY(-5px); border-color: #85f3d45c; }
.feature::after { content: ""; position: absolute; width: 140px; height: 140px; top: -90px; right: -40px; background: #85f3d418; filter: blur(40px); }
.perspective-intro { padding-block: 70px 90px; }
.demo-section { background: radial-gradient(ellipse at 50% 40%, #16302c42, transparent 70%), #0b1118; }
.terminal { border-color: #3e5a56; box-shadow: 0 0 0 7px #85f3d403, 0 35px 100px #0006; }
.replay-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 16px 22px; background: #111d23; border-bottom: 1px solid var(--border); }
.play-button { background: #85f3d416; border: 1px solid #85f3d43d; border-radius: 5px; padding: 10px 14px; color: var(--green); font-size: 11px; min-width: 154px; }
.play-button[aria-pressed=true] { color: #0c211b; background: var(--green); }
.replay-toolbar label { font-size: 8px; color: var(--muted); letter-spacing: 1px; }
.replay-toolbar output { display: block; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: 0; }
.replay-toolbar input { flex: 1 1 180px; min-width: 90px; accent-color: var(--green); cursor: ew-resize; }
.replay-clock { font-size: 10px; color: #b9c9d4; }
.replay-clock span { display: block; font-size: 7px; color: var(--muted); letter-spacing: 1px; }
.total-ribbon { display: flex; gap: 22px; padding: 24px; border-bottom: 1px solid var(--border); background: linear-gradient(110deg, #17312877, #0d171e 60%); }
.total-heading { min-width: 135px; border-right: 1px solid #34463f; padding-right: 22px; }
.total-heading .eyebrow { font-size: 7px; letter-spacing: 1.1px; margin-bottom: 1px; }
.total-heading>strong { font-size: 40px; line-height: 1.25; font-weight: 500; letter-spacing: -2px; }
.total-heading>strong>span { font-size: 18px; margin-left: 4px; color: var(--green); }
.total-heading small { display: block; color: #94aea5; font-size: 9px; }
.total-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; flex: 1; align-items: center; }
.total-card { color: var(--row-color); min-width: 0; }
.total-card>span { display: block; font-size: 10px; color: #a7b7c5; }
.total-card>strong { font-size: 32px; font-weight: 500; font-variant-numeric: tabular-nums; }
.total-card>strong>span { font-size: 13px; margin-left: 4px; opacity: .7; }
.total-card .track { height: 3px; margin-top: 5px; }
.insights-grid { display: grid; grid-template-columns: 1.12fr 1fr; border-top: 1px solid var(--border); }
.insight-card { min-width: 0; padding: 25px 22px 18px; }
.state-card { border-left: 1px solid var(--border); }
.insight-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.insight-heading .eyebrow { font-size: 7px; letter-spacing: 1px; margin: 0 0 7px; }
.insight-heading h3 { font-size: 15px; font-weight: 450; margin: 0; }
.chart-chip { white-space: nowrap; border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font-size: 6px; color: var(--muted); letter-spacing: .5px; }
.evolution-grid { fill: none; stroke: #bdcfe438; stroke-dasharray: 3 6; }
.axis-labels { fill: #8d9fb1; font: 10px "Segoe UI", sans-serif; }
.evolution-cursor { stroke: #e4fff5; stroke-width: 1.5; stroke-dasharray: 3 4; }
.evolution-now { fill: var(--green); font-size: 11px; }
.area-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 9px; color: var(--muted); margin: 5px 0 0 20px; }
.area-legend i { width: 6px; height: 6px; border-radius: 2px; display: inline-block; margin-right: 5px; background: var(--key-color); }
.state-layout { display: grid; grid-template-columns: minmax(0, 1fr) 135px; align-items: center; gap: 8px; }
#state-chart { overflow: visible; }
.state-node { cursor: pointer; outline: none; }
.state-node .node-body { fill: #111d27; stroke: #3f5364; stroke-width: 1; transition: stroke .2s, fill .2s; }
.state-node:hover .node-body, .state-node:focus-visible .node-body { stroke: #fff; stroke-width: 2; }
.state-node[aria-pressed=true] .node-body { fill: #18382e; stroke: var(--green); }
.state-node text { fill: #c4d2de; font-size: 11px; pointer-events: none; }
.state-node .node-subtitle { fill: #83a196; font-size: 8px; }
.state-edge { fill: none; stroke: #466374; stroke-width: 1.5; }
.state-edge.active { stroke: var(--green); stroke-width: 2; stroke-dasharray: 5 5; animation: edge-flow 12s linear 1; }
.edge-percentage { fill: #92ae9f; font-size: 10px; }
.state-detail { padding: 12px; border: 1px solid #294139; border-radius: 8px; background: #11231d55; min-height: 150px; }
.state-detail>span { font-size: 7px; color: var(--green); letter-spacing: 1px; }
.state-detail h4 { font-size: 12px; line-height: 1.4; font-weight: 500; margin: 8px 0 14px; }
.state-detail p { font-size: 9px; color: var(--muted); margin: 6px 0; }
.state-detail strong { color: var(--green); }
.graph-footnote { font-size: 8px; color: #93a2b3; line-height: 1.7; margin: 12px 0 0; }
.session-event { display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-top: 1px solid var(--border); background: #131e2655; }
.event-icon { width: 32px; height: 32px; border: 1px solid #354f4a; border-radius: 50%; text-align: center; color: var(--green); font-size: 21px; }
.session-event>div { flex: 1; }
.session-event>div>span { font-size: 7px; letter-spacing: 1.3px; color: var(--green); }
.session-event p { font-size: 11px; margin: 2px 0 0; color: #aabbca; }
#session-step { font-size: 9px; color: var(--muted); white-space: nowrap; }
.app-features { display: grid; margin: 28px 0; }
.app-features>button { display: flex; align-items: center; gap: 16px; text-align: left; background: none; border: 0; border-top: 1px solid var(--border); padding: 17px 0; color: var(--text); }
.app-features>button>span { font-size: 9px; color: var(--green); }
.app-features>button>div { flex: 1; }
.app-features strong { display: block; font-weight: 450; font-size: 14px; }
.app-features small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.app-features b { font-size: 17px; color: var(--green); font-weight: 400; transition: transform .2s; }
.app-features>button:hover b { transform: translate(3px, -3px); }
.mobile-section { gap: 70px; }
.mobile-copy h2 { font-size: clamp(30px, 3.1vw, 44px); }
.phone-stage { min-height: 780px; padding: 15px; }
.app-phone { width: 316px; min-width: 290px; min-height: 650px; padding: 44px 20px 15px; transform: perspective(1100px) rotateY(-10deg) rotateZ(3deg); display: flex; flex-direction: column; box-shadow: 0 0 0 1px #52675e, 22px 35px 100px #0009; }
.app-phone .phone-header { font-size: 20px; margin-bottom: 20px; }
.phone-status { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 22px; font-size: 7px; color: var(--gold); display: flex; gap: 5px; align-items: center; letter-spacing: 1px; }
.phone-status .status-dot { background: var(--gold); box-shadow: none; width: 4px; height: 4px; }
.phone-status>span:last-child { margin-left: auto; color: #7f95a4; }
.app-screen { flex: 1; min-height: 420px; }
.app-screen[hidden] { display: none; }
.app-phone h3 { font-size: 25px; margin-bottom: 20px; }
.app-session-line { display: flex; justify-content: space-between; font-size: 9px; color: #8fa4b5; margin: 18px 0; }
.app-session-line strong { font-weight: 500; color: var(--green); }
.app-probability { display: flex; align-items: center; gap: 10px; padding: 13px 10px; border: 1px solid #293c42; border-radius: 7px; margin: 8px 0; background: #15252b; }
.app-probability>i { height: 6px; width: 6px; border-radius: 50%; background: var(--row-color); }
.app-probability>span { font-size: 10px; color: #bacbd8; flex: 1; }
.app-probability>strong { font-weight: 500; font-size: 20px; color: var(--row-color); }
.phone-data-note { color: #8da1b2; font-size: 9px; line-height: 1.8; margin-top: 18px; }
.app-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.app-tabbar button { padding: 5px 0; border: none; color: #8c9fae; background: none; font-size: 8px; min-height: 44px; }
.app-tabbar button[aria-selected=true] { color: var(--green); }
.app-tabbar button>span { display: block; font-size: 21px; line-height: 1.3; margin-bottom: 4px; }
.phone-inline-link { display: block; color: var(--green); font-size: 10px; margin-top: 20px; }
.phone-alert { border: 1px solid #384744; border-radius: 8px; padding: 17px 14px; background: #17292c; }
.phone-alert>span { color: var(--green); font-size: 26px; display: block; }
.phone-alert>strong { font-size: 12px; font-weight: 500; }
.phone-alert p { font-size: 10px; color: var(--muted); margin-top: 8px; }
.alert-toggle { width: 100%; margin-top: 20px; padding: 12px; border: 1px solid #6ad8b96b; border-radius: 6px; color: var(--green); background: #85f3d40b; font-size: 11px; }
.connection-status { font-size: 8px; color: var(--gold); border: 1px solid #5b523a; border-radius: 6px; padding: 12px 9px; }
.offline-dot { background: var(--gold); width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.pairing-steps { font-size: 10px; color: #b4c3ce; padding-left: 20px; margin-top: 22px; }
.pairing-steps li { padding: 8px 0 8px 6px; }
.orbit { border-color: #4a8f7833; }
@keyframes draw-path { from { stroke-dashoffset: 800; } to { stroke-dashoffset: 0; } }
@keyframes chart-pulse { 0% { transform: scale(.8); opacity: 1; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes edge-flow { to { stroke-dashoffset: -120; } }
@media (max-width: 1100px) {
  .hero { gap: 26px; }
  .total-cards { gap: 12px; }
  .total-card>strong { font-size: 27px; }
  .insights-grid { grid-template-columns: 1fr; }
  .state-card { border-left: none; border-top: 1px solid var(--border); }
  .state-layout { grid-template-columns: minmax(0, 1fr) 180px; }
  #state-chart { max-height: 300px; }
  .mobile-section { gap: 25px; }
}
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(41px, 7.8vw, 60px); letter-spacing: -2.5px; }
  .hero-art { transform: none; }
  .hero-data-strip { padding: 13px 5px; }
  .hero-data-strip b { font-size: 9px; }
  .total-ribbon { flex-direction: column; padding: 18px; gap: 16px; }
  .total-heading { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #34463f; }
  .total-heading>strong { font-size: 26px; margin-left: auto; }
  .total-heading small { display: none; }
  .total-cards { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
  .total-card>strong { font-size: 30px; }
  .total-card>span { font-size: 10px; }
  .replay-toolbar { gap: 12px; padding: 16px; }
  .play-button { min-width: 150px; }
  .replay-toolbar input { flex-basis: calc(100% - 110px); order: 4; min-height: 28px; }
  .replay-clock { order: 5; font-size: 8px; }
  .replay-clock span { font-size: 6px; }
  .insight-card { padding: 20px 14px; }
  .insight-heading h3 { font-size: 13px; }
  .insight-heading .chart-chip { font-size: 5px; }
  .state-layout { grid-template-columns: 1fr; }
  #state-chart { max-height: none; }
  .state-detail { min-height: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px; }
  .state-detail>span { width: 100%; }
  .state-detail h4 { margin: 0; }
  .state-detail p { margin: 0; }
  .session-event { padding: 16px; align-items: start; }
  .session-event p { font-size: 10px; }
  #session-step { font-size: 7px; }
  .phone-stage { min-height: 710px; padding: 20px 0; }
  .app-phone { transform: none; width: 316px; max-width: 100%; min-width: 0; padding-inline: 16px; }
  .mobile-section { gap: 15px; }
  .app-features strong { font-size: 13px; }
  .app-features small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .historical, .upper, .pulse-ring, .state-edge.active { animation: none; }
}