/* Raw Reportage tokens (from the design system bundle) */
:root{
/* Surfaces (DESIGN.md + globals.css @theme) */
--carbon:#131313;
--surface:#131313;
--surface-lowest:#0e0e0e;
--surface-low:#1c1b1b;
--surface-high:#2a2a2a;
--surface-highest:#353534;
--industrial-grey:#2a2a2a;
--black:#000000;
--void:#050505;
--white:#ffffff;
/* Accent */
--emergency:#DB3C2A;
--accent-muted:#ffb4a8;
--on-surface-tint:#f9dcd7;
--outline-variant:#603e39;
/* Zinc scale as used in the codebase (Tailwind zinc) */
--zinc-300:#d4d4d8;
--zinc-400:#a1a1aa;
--zinc-500:#71717a;
--zinc-600:#52525b;
--zinc-800:#27272a;
--zinc-900:#18181b;
/* Alpha lines (border-white/5, /10, /20) */
--line-5:rgba(255,255,255,.05);
--line-10:rgba(255,255,255,.10);
--line-20:rgba(255,255,255,.20);
--ghost-border:rgba(96,62,57,.15);
--emergency-50:rgba(219,60,42,.5);
--emergency-30:rgba(219,60,42,.3);
--emergency-20:rgba(219,60,42,.2);
--carbon-80:rgba(19,19,19,.8);
/* Semantic aliases */
--bg-page:var(--carbon);
--bg-section-alt:rgba(24,24,27,.5);
--bg-card:var(--carbon);
--bg-card-hover:var(--zinc-900);
--bg-chip:var(--industrial-grey);
--bg-footer:var(--black);
--text-primary:var(--white);
--text-body:var(--zinc-300);
--text-secondary:var(--zinc-400);
--text-muted:var(--zinc-500);
--text-faint:var(--zinc-600);
--text-accent:var(--emergency);
--selection-bg:var(--emergency);
}

:root{
--font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
--font-grotesk:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
--font-mono:"Space Mono",ui-monospace,SFMono-Regular,monospace;
--font-display:var(--font-sans);
--font-body:var(--font-grotesk);
--font-label:var(--font-mono);
/* Weights */
--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-bold:700;--weight-black:900;
/* Sizes (Tailwind scale as used) */
--text-9:9px;--text-10:10px;--text-11:11px;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--text-7xl:4.5rem;--text-8xl:6rem;--text-9xl:8rem;
--text-hero:clamp(3.75rem,9.8vw,12rem);
/* Leading */
--leading-hero:.82;--leading-heading:.85;--leading-tight:.9;--leading-none:1;--leading-snug:1.25;--leading-relaxed:1.625;--leading-loose:2;
/* Tracking */
--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-wide:.1em;--tracking-widest:.15em;--tracking-label:.2em;--tracking-ultra:.3em;
}

:root{
--duration-instant:75ms; /* @kind other */
--duration-step:100ms; /* @kind other */
--duration-fast:200ms; /* @kind other */
--duration-reveal:700ms; /* @kind other */
--ease:ease-out; /* @kind other */
--underline-thin:2px;--underline:4px;--underline-heavy:8px;
--blur-glass:20px;--blur-nav:12px;
--grain-opacity:.04; /* @kind other */
--grain-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); /* @kind other */
--glitch-shadow:-2px 2px 0px var(--emergency);
--img-filter:grayscale(1) brightness(.75); /* @kind other */
--img-filter-hover:grayscale(0) brightness(1); /* @kind other */
}

:root{
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-11:2.75rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;--space-32:8rem;--space-48:12rem;
--page-px:1.5rem;--page-px-md:3rem;--page-max:80rem;--content-max:64rem;
--section-py:8rem;--card-p:3rem;--card-gap:2.75rem;
--nav-h:6rem;
--radius:0px;
}

/* Page */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--carbon);color:var(--white);font-family:var(--font-grotesk);-webkit-font-smoothing:antialiased}
a{color:var(--white)}a:hover{color:var(--emergency)}
::selection{background:var(--emergency);color:#fff}
.grain{position:fixed;inset:0;pointer-events:none;background-image:var(--grain-image);opacity:var(--grain-opacity);z-index:50;mix-blend-mode:screen}
.intro{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadein .4s ease-out}
.intro.hide{display:none}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.intro .box{background:var(--carbon);border:1px solid var(--line-10);max-width:680px;width:100%;padding:40px 44px 36px;display:flex;flex-direction:column;gap:22px;max-height:90vh;overflow:auto}
.intro h2{font-family:var(--font-sans);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.85;font-size:clamp(40px,6vw,76px)}
.intro h2 span{color:var(--emergency)}
.intro .lead{font-weight:300;font-size:19px;line-height:1.55;color:var(--zinc-300);text-wrap:pretty}
.intro .how{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--zinc-800)}
.intro .how div{background:var(--carbon);padding:12px 14px}
.intro .how b{display:block;font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--emergency);margin-bottom:4px}
.intro .how span{font-size:13px;line-height:1.45;color:var(--zinc-400)}
.intro .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.intro .cta{background:var(--emergency);color:#fff;border:0;padding:14px 22px;cursor:pointer;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;font-size:12px;border-bottom:4px solid #fff;transition:all var(--duration-step)}
.intro .cta:hover{background:var(--white);color:var(--carbon);border-bottom-color:var(--emergency)}
.intro .cta:active{transform:scale(.95)}
@media (max-width:600px){.intro .box{padding:28px 22px}.intro .how{grid-template-columns:1fr}}
.app{height:100vh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:11px}
header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:12px 24px;border-bottom:1px solid var(--line-10);background:var(--carbon-80);backdrop-filter:blur(12px);min-width:0}
header>div:first-child{min-width:0;flex:1 1 160px;max-width:38%}
.sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.sub{display:none}}
main{min-width:0}
.wordmark{font-family:var(--font-sans);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;font-size:22px;line-height:.9;white-space:nowrap}
.wordmark span{color:var(--emergency)}
.wordmark a{color:var(--white)}.wordmark a:hover{color:var(--emergency)}
.wordmark span:first-of-type{margin:0 6px}
.support{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--white);text-decoration:none;padding:9px 14px;border:1px solid var(--line-20);transition:all var(--duration-step);white-space:nowrap}
.support:hover{background:var(--emergency);border-color:var(--emergency);color:#fff}
.sub{color:var(--zinc-500);font-size:10px;letter-spacing:.2em}
.spacer{flex:0 0 0}
.seg{display:grid;grid-auto-flow:column;background:var(--industrial-grey);gap:1px}
.seg button{background:var(--industrial-grey);color:var(--zinc-400);border:0;padding:9px 14px;cursor:pointer;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.15em;font-size:11px;transition:all var(--duration-step)}
.seg button:hover{background:var(--white);color:var(--carbon)}
.seg button.on{background:var(--emergency);color:#fff}
.seg button:active{transform:scale(.95)}
main{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:0}
.mapwrap{position:relative;min-height:0;border-right:1px solid var(--line-10);overflow:hidden}
svg{display:block;width:100%;height:100%}
.land{fill:var(--surface-low);stroke:rgba(255,255,255,.08);stroke-width:.6}
.land.iran{fill:rgba(219,60,42,.28)}
.land.coal{fill:rgba(255,255,255,.14)}
.land.hit{fill:var(--industrial-grey);stroke:var(--emergency);stroke-width:1}
.clabel{font-family:var(--font-mono);font-size:11px;fill:var(--zinc-500);letter-spacing:.15em;text-transform:uppercase;pointer-events:none;text-anchor:middle}
.arc{fill:none;stroke-width:1.4;stroke-linecap:square}
.arc.axis{stroke:var(--emergency)}
.arc.coal{stroke:var(--white)}
.tgt{fill:var(--carbon);stroke-width:1.5}
.tgt.axis{stroke:var(--emergency)}.tgt.coal{stroke:var(--white)}
.pulse{fill:none;stroke-width:1;opacity:.8;transform-box:fill-box;transform-origin:center;animation:pulse 1.6s ease-out infinite}
.pulse.axis{stroke:var(--emergency)}.pulse.coal{stroke:var(--white)}
@keyframes pulse{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.ship{stroke:var(--emergency);fill:var(--carbon);stroke-width:1.2}
.ship.coal{stroke:var(--white)}
.tlabel{font-family:var(--font-mono);font-size:10px;fill:var(--zinc-300);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;paint-order:stroke;stroke:var(--carbon);stroke-width:3px}
.choke rect{fill:var(--black);stroke:var(--line-20)}
.choke text{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;fill:var(--white)}
.choke .st{fill:var(--emergency)}
.choke.ok .st{fill:var(--zinc-300)}
.choke line{stroke:var(--line-20)}
.front text{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;fill:var(--emergency)}
.front rect{fill:var(--emergency)}
.fac{stroke-width:1.2}.fac.closed{fill:var(--emergency);stroke:var(--emergency)}.fac.damaged{fill:var(--carbon);stroke:var(--emergency)}.fac.open{fill:var(--carbon);stroke:var(--zinc-400)}.fac.disputed{fill:var(--carbon);stroke:var(--zinc-500);stroke-dasharray:2 1}
.pipe{fill:none;stroke-width:2;stroke-dasharray:5 3}.pipe.closed{stroke:var(--emergency)}.pipe.damaged{stroke:var(--emergency);stroke-dasharray:2 3}.pipe.open{stroke:var(--zinc-400)}.pipe.disputed{stroke:var(--zinc-600)}.pipe.none{stroke:var(--zinc-800);stroke-dasharray:1 3}
.flabel{font-family:var(--font-mono);font-size:10px;fill:var(--zinc-300);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;paint-order:stroke;stroke:var(--carbon);stroke-width:3px}
.mkt{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--zinc-800)}
.mkt>div{background:var(--carbon);padding:10px 12px}.mkt b{display:block;font-family:var(--font-sans);font-weight:900;font-size:26px;letter-spacing:-.04em;line-height:1;margin-top:4px}.mkt .d{font-size:10px;margin-top:4px;color:var(--zinc-400)}.mkt .d.up{color:var(--emergency)}
.spark{grid-column:1/-1;padding:8px 12px 6px!important}.spark svg{display:block;width:100%;height:44px;overflow:visible}
.tag{display:inline-block;font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;padding:1px 6px;margin-right:8px;vertical-align:middle;background:var(--industrial-grey);color:var(--zinc-300)}.tag.closed{background:var(--emergency);color:#fff}.tag.damaged{color:var(--emergency);border:1px solid var(--emergency);background:transparent}
.ev.inf a{color:var(--zinc-500);text-decoration:none;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em}.ev.inf a:hover{color:var(--emergency)}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:3px 14px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--zinc-400);line-height:1.3}
.legend>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend i{display:inline-block;width:18px;height:0;border-top:2px solid;vertical-align:middle;margin-right:8px}
.legend .b{display:inline-block;width:10px;height:10px;vertical-align:middle;margin-right:8px}
.ghost{position:absolute;right:-2vw;top:40%;font-family:var(--font-sans);font-weight:900;font-size:22vw;line-height:.8;color:rgba(255,255,255,.03);letter-spacing:-.05em;transform:rotate(-90deg);transform-origin:right top;pointer-events:none;user-select:none;text-transform:uppercase}
aside{display:flex;flex-direction:column;min-height:0;overflow:auto;padding:24px 28px 28px;gap:18px}
.eyebrow{color:var(--emergency)}
.title{font-family:var(--font-sans);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.85;font-size:clamp(30px,3.2vw,46px);text-wrap:balance}
.rule{height:4px;background:var(--emergency);width:72px}
.dates{color:var(--zinc-400)}
.simple{font-weight:300;font-size:18px;line-height:1.5;color:var(--zinc-300);text-wrap:pretty}
.num{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:end;padding:14px 0;border-top:1px solid var(--line-10);border-bottom:1px solid var(--line-10)}
.num b{font-family:var(--font-sans);font-weight:900;font-size:44px;line-height:.85;letter-spacing:-.05em;color:var(--white)}
.num span{color:var(--zinc-400);font-size:10px}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--zinc-800)}
.chip{background:var(--carbon);padding:10px 12px}
.chip .k{color:var(--zinc-500);font-size:9px;letter-spacing:.2em}
.chip .v{margin-top:4px;color:var(--white);font-size:11px}
.chip .v.red{color:var(--emergency)}
.detail{display:none;flex-direction:column;gap:12px}
.on-detail .detail{display:flex}
.on-detail .simple{font-size:15px;color:var(--zinc-400)}
.ev{display:grid;grid-template-columns:3px 1fr;gap:14px}
.ev i{background:var(--emergency)}
.ev p{font-size:14px;line-height:1.5;color:var(--zinc-300);text-wrap:pretty}
.ev p b{font-family:var(--font-mono);font-weight:400;color:var(--white);font-size:11px;letter-spacing:.1em;display:block;margin-bottom:2px}
.ledger{margin-top:auto;border-top:1px solid var(--line-10);padding-top:12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--zinc-800)}
.ledger div{background:var(--carbon);padding:8px 10px}
.ledger b{display:block;font-family:var(--font-sans);font-weight:900;font-size:20px;letter-spacing:-.04em;line-height:1}
.ledger span{color:var(--zinc-500);font-size:9px;letter-spacing:.15em}
.src{color:var(--zinc-600);font-size:9px;letter-spacing:.1em;line-height:1.6}
.fac{cursor:pointer}.fac.rep{stroke-dasharray:2 1.5}.fac.dis{stroke:var(--zinc-500);stroke-dasharray:1 2}
.fac-hit{fill:transparent;cursor:pointer;outline:none}
.fac-g{outline:none}.fac-g:focus-visible .fac-ring{display:block}.fac-ring{display:none;fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:3 2}
.strip{display:grid;grid-template-columns:repeat(41,minmax(0,1fr));gap:1px;height:10px;margin-top:6px}
.strip i{background:var(--zinc-800);display:block}.strip i.closed{background:var(--emergency)}.strip i.damaged{background:#7a2a22}.strip i.open{background:var(--zinc-500)}.strip i.disputed{background:var(--zinc-600)}.strip i.cur{outline:1px solid #fff;outline-offset:-1px}
.strip i.ok{background:var(--zinc-600)}.strip i.bad{background:var(--emergency)}.strip i.mid{background:#7a2a22}
.obs{display:flex;flex-wrap:wrap;gap:1px;background:var(--zinc-800)}.obs>div{background:var(--carbon);padding:8px 10px;flex:1 1 140px}.obs b{display:block;font-family:var(--font-sans);font-weight:900;font-size:20px;letter-spacing:-.04em;line-height:1}.obs span{color:var(--zinc-500);font-size:9px;letter-spacing:.12em}
.obs .nd{color:var(--zinc-600)}.obs .nd b{color:var(--zinc-600);font-size:14px}
.wrap{border:1px solid var(--line-10);padding:14px;display:flex;flex-direction:column;gap:12px}
.wrap h3{font-family:var(--font-sans);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:22px;line-height:.9}
.wrap p{font-size:14px;line-height:1.5;color:var(--zinc-300);text-wrap:pretty}.wrap p b{color:var(--white);font-weight:600}
.cite{color:var(--zinc-500);text-decoration:none;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em}.cite:hover{color:var(--emergency)}
.fac-sel{fill:none;stroke:#fff;stroke-width:1}
.pipe-hit{fill:none;stroke:transparent;stroke-width:12;cursor:pointer}
.tag.cf{background:transparent;border:1px solid var(--line-20);color:var(--zinc-400)}.tag.cf.ind{border-color:var(--zinc-300);color:var(--white)}.tag.cf.dis{border-style:dashed}
.ev.future{opacity:.4}
.back{background:transparent;border:1px solid var(--line-20);color:var(--white);padding:8px 12px;cursor:pointer;align-self:flex-start;transition:all var(--duration-step)}.back:hover{background:var(--emergency);border-color:var(--emergency)}
.phases{display:grid;grid-template-columns:repeat(41,minmax(0,1fr));gap:2px;height:14px}
.phases span{font-family:var(--font-mono);font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--zinc-400);background:var(--zinc-900);padding:0 6px;line-height:14px;overflow:hidden;white-space:nowrap}.phases span.cf{color:var(--zinc-500);background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(255,255,255,.06) 3px 4px)}.phases span.ye{background:var(--industrial-grey);color:var(--white)}
.cell.key::after{content:'';position:absolute;left:2px;top:2px;width:4px;height:4px;background:#fff}
.intro .meth{border-top:1px solid var(--line-10);padding-top:14px;font-size:12px;line-height:1.55;color:var(--zinc-500);text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.pulse,.intro,.arc{animation:none!important;transition:none!important}}
footer{border-top:1px solid var(--line-10);background:var(--black);padding:10px 24px 10px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;max-height:38vh}
.mapwrap:has(+aside) svg{min-height:0}
@media (max-height:640px){.legend{display:none}.months{display:none}}
.ctrl{display:flex;gap:1px;background:var(--industrial-grey)}
.ctrl button{background:var(--black);color:var(--white);border:0;width:40px;height:40px;cursor:pointer;font-family:var(--font-mono);font-size:14px;transition:all var(--duration-step)}
.ctrl button:hover{background:var(--emergency)}
.ctrl button:active{transform:scale(.95)}
.tl{display:flex;flex-direction:column;gap:4px;min-width:0}
.cells{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;height:28px}
.cell{background:var(--zinc-900);border:0;cursor:pointer;position:relative;padding:0;transition:background var(--duration-step)}
.cell:hover{background:var(--zinc-800)}
.cell.day{border-top:3px solid var(--emergency)}
.cell.cf{background:#1c1b1b;background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(255,255,255,.06) 3px 4px)}
.cell.on{background:var(--emergency)!important;background-image:none!important}
.cell span{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-family:var(--font-mono);font-size:8px;color:var(--zinc-500);letter-spacing:0}
.cell.on span{color:#fff}
.months{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px}
.months span{font-family:var(--font-mono);font-size:9px;color:var(--zinc-500);letter-spacing:.15em;text-transform:uppercase;overflow:hidden;white-space:nowrap}
.tlhead{display:flex;justify-content:space-between;color:var(--zinc-500)}
.tlhead .live{display:inline-block;width:8px;height:8px;background:var(--zinc-500);margin-right:8px;vertical-align:middle}
@keyframes blink{to{opacity:.2}}

/* ===== MOBILE LAYOUT (standalone) ===== */
html,body{overscroll-behavior:none}
.app{height:100dvh;grid-template-rows:auto auto 1fr auto}
header{padding:10px 14px;gap:8px;flex-wrap:nowrap;justify-content:space-between}
header>div:first-child{max-width:none;flex:0 1 auto}
.sub{display:none}
.wordmark{font-size:18px}
.support{display:none}
#langSeg{display:none}
.seg button{padding:9px 10px;font-size:10px;min-height:36px}
#modeSeg button[data-mode=simple]{display:none}
#modeSeg button[data-mode=detail]::before{content:''}
.hb{display:flex;gap:6px;align-items:center}
.mapwrap{height:auto;border-right:0;border-bottom:1px solid var(--line-10);position:relative;touch-action:pan-y}
.mapwrap svg{height:38dvh;max-height:360px}
.ghost{display:none}
.clabel{font-size:9px}
.flabel,.tlabel{font-size:9px}
.choke rect{height:18px}
.turnbar{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line-10);background:var(--black)}
.turnbar .tn{font-family:var(--font-sans);font-weight:900;font-size:26px;letter-spacing:-.05em;line-height:1;color:var(--emergency)}
.turnbar .td{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--zinc-400)}
.turnbar .tp{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--white);background:var(--industrial-grey);padding:3px 7px;justify-self:end}
.turnbar .tp.cf{background:transparent;border:1px solid var(--line-20);color:var(--zinc-400)}
main{display:block;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
aside{padding:18px 16px 24px;gap:14px;overflow:visible;min-height:0}
.title{font-size:clamp(30px,9vw,44px)}
.simple{font-size:16px}
.num b{font-size:36px}
.chips{grid-template-columns:1fr 1fr}
.mkt b{font-size:22px}
.on-detail .simple{font-size:15px}
.ledger{grid-template-columns:1fr 1fr}
.ev p{font-size:13px}
.wrap h3{font-size:19px}
.strip{height:8px}
footer{padding:8px 10px calc(8px + env(safe-area-inset-bottom));grid-template-columns:1fr;gap:6px;max-height:none;background:var(--black);border-top:1px solid var(--line-10)}
.ctrl{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:1px}
.ctrl button{width:auto;height:48px;font-size:18px}
.ctrl #speed{width:56px}
.tl{gap:4px}
.tlhead{display:none}
.phases{height:10px;gap:1px}
.phases span{font-size:0;padding:0}
.cells{height:22px;gap:1px}
.cell span{font-size:0}
.cell.key::after{left:1px;top:1px;width:3px;height:3px}
.months{display:none}
.legend{display:none}
.mleg{display:flex;gap:12px;overflow-x:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--zinc-400);white-space:nowrap;padding-top:2px;scrollbar-width:none}
.mleg::-webkit-scrollbar{display:none}
.mleg i{display:inline-block;width:14px;border-top:2px solid;vertical-align:middle;margin-right:5px}
.mleg .b{display:inline-block;width:8px;height:8px;vertical-align:middle;margin-right:5px}
.swipehint{position:absolute;left:0;right:0;top:6px;text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--zinc-500);pointer-events:none;opacity:1;transition:opacity .6s}
.swipehint.gone{opacity:0}
.intro .box{padding:24px 18px 20px;gap:14px;max-height:92dvh}
.intro h2{font-size:clamp(34px,11vw,56px)}
.intro .lead{font-size:15px}
.intro .how{grid-template-columns:1fr}
.intro .how div{padding:9px 11px}
.intro .meth{display:none}
.intro .foot{flex-direction:column;align-items:stretch}
.intro .cta{width:100%;min-height:48px}
.mapwrap:has(+aside) svg{min-height:0}
@media (min-width:700px){.app{max-width:480px;margin:0 auto;border-left:1px solid var(--line-10);border-right:1px solid var(--line-10)}body{background:#000}}