/* EXEVIO · ORBITAL — v1 Three.js cinematic deck */

@font-face{font-family:'Space Grotesk Variable';font-style:normal;font-display:swap;font-weight:300 700;src:url('assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'Space Grotesk Variable';font-style:normal;font-display:swap;font-weight:300 700;src:url('assets/fonts/space-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');unicode-range:U+0100-024F}
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');unicode-range:U+0100-024F}

:root{
  --bg:#07070e;--bg-1:#0c0c16;--ink:#ede8e0;--dim:rgba(237,232,224,.64);--faint:rgba(237,232,224,.4);
  --rust:#d98e5f;--rust2:#c06b3e;--deep:#8a4127;--ember:#eda774;--star:#9fb4de;
  --ok:#7dc9a2;--live:#8fa8d8;--dev:#e7c069;--eu:#ffcc39;
  --line:rgba(237,232,224,.12);--line-strong:rgba(237,232,224,.25);
  --surface:rgba(12,12,22,.72);
  --fd:'Space Grotesk Variable',system-ui,sans-serif;
  --fb:'Inter Variable',system-ui,sans-serif;
  --fm:ui-monospace,'Cascadia Code',Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none;overflow:hidden}
html{background:var(--bg)}
/* body is pinned to the viewport: no document scroll or rubber-band overscroll on phones, which otherwise
   lets the browser paint the fixed layers offset (a "second copy" of the page peeking in at the edges) */
body{position:fixed;inset:0;width:100%;height:100%;font-family:var(--fb);color:var(--ink);overflow:hidden;
  -webkit-font-smoothing:antialiased;touch-action:none;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

#gl{position:fixed;inset:0;display:block}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(4,4,10,.55) 100%);}
/* film grain: plain low-opacity noise, no blend mode (blend modes on a full-screen fixed layer are a
   classic trigger for duplicated/offset composites on mobile GPUs) */
#vignette::after{content:"";position:absolute;inset:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- HUD ---------- */
.hud-top{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.4vh,24px) clamp(16px,3vw,36px);pointer-events:none}
.hud-top .brand{pointer-events:auto;display:block}
.hud-top .brand img{height:17px;display:block;opacity:.95}
.hud-tag{font-family:var(--fm);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.dots{position:fixed;z-index:10;right:clamp(12px,2.4vw,28px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.dots button{width:22px;height:14px;display:grid;place-items:center;padding:0}
.dots button i{width:5px;height:5px;border-radius:50%;background:var(--faint);transition:all .4s var(--ease);display:block}
.dots button.is-act i{background:var(--ember);box-shadow:0 0 12px var(--ember);height:16px;border-radius:3px}
.hud-bottom{position:fixed;z-index:10;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(12px,2vh,22px) clamp(16px,3vw,36px)}
.hud-count{font-family:var(--fm);font-size:12px;letter-spacing:.14em;color:var(--faint)}
.hud-count b{color:var(--ink);font-weight:600}
.hud-count i{margin:0 5px;font-style:normal;opacity:.5}
.hud-hint{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  text-align:center;flex:1;transition:opacity .5s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-keys{display:flex;gap:8px}
.knav{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--dim);font-size:19px;line-height:1;
  transition:all .3s;display:grid;place-items:center;padding-bottom:3px}
.knav:hover{border-color:var(--line-strong);color:var(--ink);background:rgba(237,232,224,.06)}

/* ---------- slides ---------- */
#deck{position:fixed;inset:0;z-index:5}
.slide{position:absolute;inset:0;display:flex;align-items:center;visibility:hidden;pointer-events:none;
  padding:clamp(70px,10vh,110px) clamp(20px,4.5vw,64px) clamp(66px,9vh,96px)}
.slide::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s;
  background:linear-gradient(90deg,rgba(7,7,14,.82) 0%,rgba(7,7,14,.45) 34%,transparent 60%)}
.slide.is-act::before{opacity:1}
.slide.is-act{visibility:visible;pointer-events:auto}
/* Panel edge fades. Two independent, animatable lengths so the top and bottom fades never replace each other:
   --mask-top grows once the panel has been scrolled (content is passing under its top edge),
   --mask-bottom grows while there is more content below (set by markOverflow in app.js), and drops at the end. */
@property --mask-top{syntax:'<length>';inherits:false;initial-value:0px}
@property --mask-bottom{syntax:'<length>';inherits:false;initial-value:0px}
.panel{position:relative;width:min(600px,100%);max-height:100%;overflow-y:auto;scrollbar-width:none;padding:4px;
  --mask-top:0px;--mask-bottom:0px;transition:--mask-top .45s var(--ease),--mask-bottom .45s var(--ease);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--mask-top),#000 calc(100% - var(--mask-bottom)),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 var(--mask-top),#000 calc(100% - var(--mask-bottom)),transparent 100%)}
.panel::-webkit-scrollbar{display:none}
.is-wide .panel{width:min(760px,100%)}
.panel.is-overflow{--mask-bottom:56px}
.panel.is-overflow.is-scrolled-end{--mask-bottom:0px}
.panel.is-scrolled{--mask-top:22px}

/* reveal choreography */
[data-r]{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.slide.is-act [data-r]{opacity:1;transform:none;filter:none}
.slide.is-act [data-r]:nth-child(1){transition-delay:.15s}
.slide.is-act [data-r]:nth-child(2){transition-delay:.25s}
.slide.is-act [data-r]:nth-child(3){transition-delay:.35s}
.slide.is-act [data-r]:nth-child(4){transition-delay:.45s}
.slide.is-act [data-r]:nth-child(5){transition-delay:.55s}
.slide.is-act [data-r]:nth-child(6){transition-delay:.65s}
.slide.is-act [data-r]:nth-child(7){transition-delay:.75s}
.slide.is-leaving [data-r]{opacity:0;transform:translateY(-18px);filter:blur(4px);transition-duration:.35s;transition-delay:0s!important}

/* type */
.eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ember);margin-bottom:16px}
.display{font-family:var(--fd);font-weight:700;letter-spacing:-.022em;line-height:1.02;
  font-size:clamp(34px,5.6vw,62px);margin-bottom:18px;text-wrap:balance}
.is-cover .display{font-size:clamp(38px,6.4vw,72px)}
.grad{background:linear-gradient(100deg,var(--ember),var(--rust) 55%,var(--star));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--dim);font-size:clamp(14.5px,1.55vw,17px);line-height:1.65;max-width:56ch;margin-bottom:22px}
.lead b{color:var(--ink);font-weight:600}
.foot-note{color:var(--faint);font-size:12.5px;line-height:1.6;margin-top:18px;max-width:52ch}
.foot-note b{color:var(--ember);font-weight:600;font-family:var(--fm)}
.readout{margin-top:16px;color:var(--dim);font-size:14px;line-height:1.6;min-height:3.2em;max-width:52ch;
  border-left:2px solid var(--rust);padding-left:14px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:12.5px;color:var(--dim);background:rgba(237,232,224,.03);
  transition:all .3s;letter-spacing:.02em;white-space:nowrap}
.chip b{color:var(--ink);font-family:var(--fd);font-weight:600}
button.chip:hover{border-color:var(--line-strong);color:var(--ink)}
button.chip.is-act{border-color:var(--ember);color:var(--ink);background:rgba(217,142,95,.12);box-shadow:0 0 18px -6px var(--ember)}
.sector-chips,.eu-projects,.sdg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sdg-chips .chip{border-color:color-mix(in srgb,var(--g) 45%,transparent);}
.sdg-chips .chip.is-act{border-color:var(--g);background:color-mix(in srgb,var(--g) 18%,transparent);box-shadow:0 0 18px -6px var(--g)}
.sdg-chips .chip.is-next{border-style:dashed}

/* buttons */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:600;font-size:14.5px;
  border-radius:999px;padding:13px 22px;letter-spacing:.01em;transition:all .35s var(--ease);text-decoration:none}
.btn-fill{background:linear-gradient(135deg,#d98e5f,#8a4127);color:#140a05;box-shadow:0 10px 30px -10px rgba(217,142,95,.5)}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(217,142,95,.65)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink)}
.btn-ghost:hover{background:rgba(237,232,224,.07)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;font-size:14px;color:var(--ember);margin-top:4px}
.link-arrow svg{transition:transform .3s}
.link-arrow[aria-expanded="true"] svg{transform:rotate(180deg)}

/* cover chips */
.is-cover .chips .chip{font-size:13px;padding:8px 15px}

/* pivot */
.pivot-widget{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
#reinvest{user-select:none;-webkit-user-select:none;touch-action:none}
#reinvest.is-hold{transform:scale(.97);box-shadow:0 0 34px -6px var(--ember)}
.pivot-read{display:flex;gap:22px;font-size:13px;color:var(--dim)}
.pivot-read b{display:block;font-family:var(--fd);font-size:26px;color:var(--ink);line-height:1.1}

/* fleet */
.fleet{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:6px}
.vcard{position:relative;text-align:left;border:1px solid var(--line);border-radius:14px;padding:14px 15px 13px;
  background:var(--surface);transition:all .35s var(--ease)}
.vcard:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.vcard.is-act{border-color:var(--ember);box-shadow:0 0 26px -8px var(--ember)}
.vcard b{display:block;font-family:var(--fd);font-size:17px;margin:8px 0 3px}
.vcard i{display:block;font-style:normal;color:var(--dim);font-size:12.5px;line-height:1.45}
.vcard em{display:none;font-style:normal;color:var(--faint);font-size:11.5px;line-height:1.5;margin-top:8px}
.vcard.is-act em{display:block}
.v-status{display:inline-block;font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:3px 8px}
.is-exit{color:var(--ok);background:rgba(125,201,162,.12)}
.is-live{color:var(--live);background:rgba(143,168,216,.14)}
.is-dev{color:var(--dev);background:rgba(231,192,105,.13)}

/* telemetry */
.telemetry{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 16px}
.telemetry span{border:1px solid var(--line);border-radius:10px;padding:9px 13px;background:var(--surface)}
.telemetry i{display:block;font-family:var(--fm);font-style:normal;font-size:9.5px;letter-spacing:.18em;color:var(--faint)}
.telemetry b{font-family:var(--fd);font-size:16px}
.telemetry .ok{color:var(--ok)}
.labs{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:14px;font-size:12.5px;color:var(--dim)}
.labs b{color:var(--ink);font-weight:600}

/* stats */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:2px 0 18px}
.stat{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface)}
.stat b{display:block;font-family:var(--fd);font-size:clamp(20px,2.4vw,27px);letter-spacing:-.01em;color:var(--ember)}
.stat i{font-style:normal;font-size:11.5px;color:var(--faint);line-height:1.4;display:block;margin-top:3px}

/* eu card */
.eu-card{border:1px solid var(--line);border-radius:14px;padding:15px 17px;margin-top:14px;background:var(--surface)}
.eu-card>b{font-family:var(--fd);font-size:17px;margin-right:10px}
.eu-card p{color:var(--dim);font-size:13px;line-height:1.55;margin-top:7px}
.euc-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.euc-facts span{font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;color:var(--eu);
  border:1px solid rgba(255,204,57,.3);border-radius:999px;padding:4px 10px}

/* stages */
.stages{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.stage{border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-family:var(--fd);font-weight:600;font-size:14px;
  display:flex;align-items:center;gap:9px;transition:all .3s}
.stage i{font-family:var(--fm);font-style:normal;font-weight:400;font-size:10px;color:var(--faint);letter-spacing:.1em}
.stage:hover{border-color:var(--line-strong)}
.stage.is-act{border-color:var(--ember);background:rgba(217,142,95,.12);box-shadow:0 0 18px -6px var(--ember)}

/* agents */
.agents-widget{margin-top:6px;max-width:460px}
.agents-label{display:flex;justify-content:space-between;font-family:var(--fm);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.agents-label b{color:var(--ember);font-size:13px}
input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ember) var(--fill,12%),rgba(237,232,224,.14) var(--fill,12%));outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--ink);border:3px solid var(--rust);box-shadow:0 0 16px -2px var(--ember);cursor:grab}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid var(--rust);cursor:grab}
.agents-read{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.agents-read span{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface);flex:1;min-width:120px}
.agents-read i{display:block;font-family:var(--fm);font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.agents-read b{font-family:var(--fd);font-size:14.5px}

/* ask */
.ask-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin:2px 0 16px}
.tgl{border-radius:999px;padding:8px 18px;font-family:var(--fd);font-weight:600;font-size:13.5px;color:var(--dim);transition:all .3s}
.tgl.is-act{background:linear-gradient(135deg,#d98e5f,#8a4127);color:#140a05}
.gets{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:560px}
.gets li{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--surface);font-size:12.5px;
  transition:all .5s var(--ease)}
.gets li b{display:block;font-family:var(--fd);font-size:13.5px;margin-bottom:3px}
.gets li span{color:var(--faint);line-height:1.45}
.gets.is-lit li{border-color:rgba(125,201,162,.45);box-shadow:0 0 20px -10px var(--ok)}

/* the manifest (you bring / we bring) — the tallest slide, so its rhythm is deliberately tight */
.is-manifest .lead{margin-bottom:14px}
.is-manifest .display{margin-bottom:14px}
.exchange{display:grid;grid-template-columns:1fr 176px 1fr;gap:16px;align-items:start;margin-top:2px}
.xcol h3{font-family:var(--fm);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;margin:0 0 4px;padding-left:34px}
.xcol.is-you h3{color:var(--star)}
.xcol.is-we h3{color:var(--ember)}
.xcol{--crew:var(--ember)}
.xcol.is-you{--crew:var(--star)}
/* manifest rows: a numbered lane, a title, a sub-line; hairlines instead of boxes so the slide breathes */
.xitem{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:baseline;width:100%;text-align:left;
  padding:9px 6px 9px 2px;border-top:1px solid var(--line);transition:background .3s,transform .3s var(--ease)}
.xcol .xitem:last-child{border-bottom:1px solid var(--line)}
.xitem i{grid-row:1/3;align-self:start;font-family:var(--fm);font-style:normal;font-size:9.5px;letter-spacing:.1em;color:var(--faint);
  padding-top:5px;position:relative;transition:color .3s}
.xitem i::after{content:"";position:absolute;left:1px;top:22px;width:5px;height:5px;border-radius:50%;background:var(--crew);opacity:.28;transition:all .3s}
.xitem b{font-family:var(--fd);font-size:14px;letter-spacing:-.005em;transition:color .3s}
.xitem span{grid-column:2;font-size:11.5px;color:var(--faint);line-height:1.4;margin-top:1px}
.xitem:hover{background:rgba(237,232,224,.03);transform:translateX(3px)}
.xitem:focus-visible{outline:2px solid var(--ember);outline-offset:-2px;border-radius:6px}
.xitem.is-act{background:rgba(237,232,224,.035)}
.xitem.is-act i,.xitem.is-act b{color:var(--crew)}
.xitem.is-act i::after{opacity:1;box-shadow:0 0 12px 1px var(--crew)}
.xitem.is-act{border-top-color:color-mix(in srgb,var(--crew) 55%,transparent)}
/* the stake meter: sweeps 10→49→10% on its own (a scanning instrument), tap to hold; a segmented scan bar under the number */
.xdial{text-align:center;padding:0 2px;align-self:center;position:relative}
.stake{display:block;width:100%;padding:16px 12px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  transition:border-color .3s,box-shadow .3s;text-align:center;-webkit-tap-highlight-color:transparent}
.stake:hover{border-color:var(--line-strong)}
.stake.is-held{border-color:rgba(237,167,116,.6);box-shadow:0 0 24px -10px var(--ember)}
.stake:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.stake-num{display:block}
.stake-num b{display:block;font-family:var(--fd);font-weight:700;font-size:38px;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stake-num i{display:block;font-style:normal;font-family:var(--fm);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ember);margin-top:6px}
.stake-bar{display:grid;grid-template-columns:repeat(40,1fr);gap:2px;height:16px;margin:12px 0 10px;align-items:end}
.stake-bar i{display:block;height:8px;border-radius:1px;background:rgba(237,232,224,.12);transition:background .15s,height .15s}
.stake-bar i:nth-child(10n+1){height:14px}
.stake-bar i.on{background:var(--rust)}
.stake-bar i.head{background:#fff5e9;height:16px;box-shadow:0 0 10px 1px rgba(237,167,116,.9)}
.stake-mode{display:block;font-family:var(--fm);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.stake.is-held .stake-mode{color:var(--ember)}
.sr-range{position:absolute;width:1px;height:1px;left:50%;bottom:0;opacity:0;pointer-events:none}
.xdial:has(.sr-range:focus-visible) .stake{outline:2px solid var(--ember);outline-offset:3px}
.xdial-note{display:block;margin-top:10px;font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.6}
.is-manifest .readout{margin-top:14px;min-height:3.2em}
.readout.is-lit{border-color:var(--ok)}
@media (max-height:740px){
  .is-manifest .display{font-size:clamp(30px,4.6vw,48px)}
  .is-manifest .lead{margin-bottom:10px}
  .xitem{padding:7px 6px 7px 2px}
  .xitem span{font-size:11px}
  .stake{padding:12px 10px 10px}
  .stake-num b{font-size:32px}
  .stake-bar{margin:9px 0 8px}
}

/* roadmap + contact */
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin:4px 0 20px;max-width:640px}
.roadmap span{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--surface)}
.roadmap i{display:block;font-family:var(--fm);font-style:normal;font-size:10px;letter-spacing:.18em;color:var(--ember)}
.roadmap b{font-family:var(--fd);font-size:13.5px;line-height:1.35;display:block;margin-top:4px}
.contact{margin-bottom:20px;color:var(--dim);font-size:14px;line-height:1.7}
.contact b{color:var(--ink)}
.contact a{color:var(--ember);text-decoration:none}

/* ---------- portrait / mobile ---------- */
/* Layout contract in portrait: the formation owns the top ~38% of the screen (below the HUD), the panel the
   bottom 62% (above the dot row + HUD). app.js sizes every formation to that zone (see FORMS.*.offP / .sP). */
@media (max-width:760px), (orientation:portrait) and (max-width:900px){
  .slide{align-items:flex-end;padding:60px 18px calc(84px + env(safe-area-inset-bottom))}
  .slide::before{background:linear-gradient(180deg,transparent 24%,rgba(7,7,14,.6) 40%,rgba(7,7,14,.9) 60%)}
  .panel{width:100%;max-height:54svh}
  .is-cover .panel{max-height:66svh}
  .display{font-size:clamp(28px,8vw,38px)}
  .is-cover .display{font-size:clamp(30px,9.2vw,42px)}
  .lead{font-size:14px}
  .dots{right:auto;left:50%;top:auto;bottom:calc(62px + env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:row;gap:7px}
  .dots button{width:16px}
  .dots button.is-act i{height:5px;width:14px}
  .hud-bottom{padding:10px 16px calc(12px + env(safe-area-inset-bottom));align-items:center}
  .hud-tag{display:none}
  .hud-hint{text-align:left}
  .gets{grid-template-columns:1fr}
  .exchange{grid-template-columns:1fr;gap:12px}
  .xdial{order:-1;display:flex;align-items:center;gap:14px;text-align:left;padding:2px 0 6px}
  .stake{flex:1;padding:10px 12px 9px;text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
  .stake-num b{font-size:28px}
  .stake-num i{margin-top:3px}
  .stake-bar{grid-column:2;grid-row:1;margin:0;height:14px}
  .stake-bar i{height:7px} .stake-bar i:nth-child(10n+1){height:12px} .stake-bar i.head{height:14px}
  .stake-mode{grid-column:1/3;margin-top:8px}
  .xdial-note{margin:0;width:88px;flex:none;font-size:9px;line-height:1.7}
  .xcol h3{padding-left:0}
  /* the readout stays pinned at the panel's foot while the manifest scrolls, so a tap always shows its text */
  .is-manifest .readout{position:sticky;bottom:0;margin-top:8px;padding-top:12px;padding-bottom:6px;min-height:0;
    background:linear-gradient(180deg,rgba(7,7,14,0) 0,rgba(7,7,14,.92) 26%,rgba(7,7,14,.96) 100%)}
  .is-manifest .panel.is-overflow{--mask-bottom:0px} /* the sticky readout is its own footer; no fade under it */
  .fleet{grid-template-columns:1fr 1fr}
  .labs{grid-template-columns:1fr}
  .knav{width:34px;height:34px}
}
/* ---------- landscape phone (short + wide): panel takes the left 54%, formation the right ---------- */
@media (orientation:landscape) and (max-height:520px){
  .slide{align-items:center;padding:46px 14px 50px}
  .panel{width:min(600px,54vw);max-height:100%}
  .is-wide .panel{width:min(760px,58vw)}
  .display{font-size:clamp(20px,4.2vw,30px);margin-bottom:8px}
  .is-cover .display{font-size:clamp(22px,4.8vw,34px)}
  .eyebrow{margin-bottom:8px;font-size:9.5px}
  .lead{font-size:12px;line-height:1.5;margin-bottom:10px}
  .foot-note{font-size:11px;margin-top:8px}
  .readout{font-size:12px;margin-top:8px;min-height:0}
  .chips{margin-bottom:10px} .chip{padding:5px 10px;font-size:11px}
  .btn{padding:9px 14px;font-size:12.5px}
  .stat b{font-size:18px} .stat{padding:8px 10px}
  .vcard{padding:9px 10px} .vcard b{font-size:14px;margin:5px 0 2px} .vcard i{font-size:11px}
  .fleet{gap:7px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .telemetry span{padding:6px 9px} .telemetry b{font-size:13px}
  .stat-row{gap:7px;margin-bottom:8px}
  .eu-card{padding:9px 11px} .eu-card p{font-size:11.5px}
  .agents-widget{max-width:none} .agents-read span{padding:6px 9px}
  .exchange{grid-template-columns:1fr 128px 1fr;gap:10px}
  .stake{padding:9px 8px 8px} .stake-num b{font-size:24px} .stake-bar{margin:6px 0 6px;height:12px} .stake-bar i{height:6px} .stake-bar i:nth-child(10n+1){height:10px} .stake-bar i.head{height:12px}
  .xitem{padding:5px 4px 5px 2px} .xitem b{font-size:12.5px} .xitem span{font-size:10.5px}
  .roadmap{gap:6px} .roadmap span{padding:7px 9px} .roadmap b{font-size:12px}
  .contact{font-size:12px;line-height:1.5;margin-bottom:10px}
  .hud-top{padding:9px 14px} .hud-tag{display:none}
  .hud-bottom{padding:7px 14px}
  .knav{width:30px;height:30px;font-size:16px}
  .dots{right:8px;gap:6px}
  .dots button{height:10px}
}
@media (prefers-reduced-motion:reduce){
  [data-r]{transition-duration:.01s!important}
  .slide.is-leaving [data-r]{transition-duration:.01s!important}
}