/* ==========================================================================
   Telegraph design system, extracted from telegraphprotocol mirror
   Tokens, fonts, base, frame, components, motion.
   ========================================================================== */

/* ---------- fonts: Roboto Mono (variable, 400..700), subset by script ---------- */
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/roboto-mono-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/roboto-mono-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/roboto-mono-greek.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/roboto-mono-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/roboto-mono-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/roboto-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --tg-bg:#000;
  --tg-bg-deep:#000;
  --tg-bg-nav:#010101;
  --tg-fg:#e9e9e9;
  --tg-fg-bright:#f1f1f1;
  --tg-fg-dim:#b5b5b5;
  --tg-fg-faint:#6b6b6b;
  --tg-line:#2a2a2a;
  --tg-line-soft:#1c1c1c;
  --tg-line-strong:#3a3a3a;
  --tg-surface:#1a1a1a;          /* secondary button / chip */
  --tg-surface-hover:#222;
  --tg-primary:#f2f2f2;          /* primary button */
  --tg-emerald:#00d294;          /* only accent colour on the site: "live" / "up next" */
  --tg-glow:0 0 14px 2px rgba(241,241,241,.35);
  --tg-dot-glow:0 0 8px 2px rgba(241,241,241,.5);
  --tg-radius-sm:.25rem;
  --tg-radius-lg:.5rem;
  --tg-ease:cubic-bezier(.4,0,.2,1);
  --tg-frame:1400px;
  --tg-content:1280px;
  --tg-content-narrow:1080px;
  --tg-header-h:72px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;border:0 solid var(--tg-line);margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100%}
body{
  background:var(--tg-bg-deep);color:var(--tg-fg);
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--tg-fg-bright);color:#000}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;cursor:pointer}
img,svg,canvas{display:block;max-width:100%}
ul{list-style:none}
:focus-visible{outline:1px solid var(--tg-fg-dim);outline-offset:2px}
h1,h2,h3,h4{font-weight:500;margin:0}
p{margin:0}

/* typography roles */
.tg-h1{font-size:clamp(22px,2.6vw,34px);line-height:1.35;letter-spacing:-.005em;color:var(--tg-fg-bright);text-wrap:balance}
.tg-h2{font-size:clamp(22px,2.2vw,30px);line-height:1.35;letter-spacing:.005em;font-weight:400;color:var(--tg-fg)}
.tg-h2--big{font-size:clamp(22px,3vw,38px);line-height:1.3;letter-spacing:-.005em;font-weight:500;text-wrap:pretty}
.tg-h3{font-size:16px;font-weight:500;color:var(--tg-fg)}
.tg-lead{font-size:14px;line-height:1.85;color:var(--tg-fg-dim);text-wrap:pretty}
.tg-eyebrow{display:block;font-size:11px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--tg-fg-faint)}
.tg-eyebrow--tight{letter-spacing:.18em}
.tg-caption{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tg-fg-faint)}
.tg-pre{white-space:pre-wrap}

/* ---------- frame: 1400px column with hairline rails and section brackets ---------- */
.tg-frame{
  background:var(--tg-bg);position:relative;
  max-width:var(--tg-frame);margin:0 auto;
  border-left:1px solid var(--tg-line);border-right:1px solid var(--tg-line);
}
.tg-frame>section+section,.tg-frame>footer{border-top:1px solid var(--tg-line);position:relative}
.tg-frame>section{scroll-margin-top:var(--tg-header-h)}
@media (min-width:1280px){
  .tg-frame>section+section::before,.tg-frame>section+section::after,
  .tg-frame>footer::before,.tg-frame>footer::after{
    content:"";z-index:20;pointer-events:none;width:13px;height:21px;
    position:absolute;top:-1px;transform:translateY(-50%);
  }
  .tg-frame>section+section::before,.tg-frame>footer::before{
    left:-1px;
    background:linear-gradient(var(--tg-fg-dim),var(--tg-fg-dim)) 0 50%/1px 21px no-repeat,
               linear-gradient(var(--tg-fg-dim),var(--tg-fg-dim)) 0 50%/13px 1px no-repeat;
  }
  .tg-frame>section+section::after,.tg-frame>footer::after{
    right:-1px;
    background:linear-gradient(var(--tg-fg-dim),var(--tg-fg-dim)) 100% 50%/1px 21px no-repeat,
               linear-gradient(var(--tg-fg-dim),var(--tg-fg-dim)) 100% 50%/13px 1px no-repeat;
  }
}
.tg-container{position:relative;z-index:10;margin:0 auto;max-width:var(--tg-content)}
.tg-container--narrow{max-width:var(--tg-content-narrow)}

/* ---------- corner marks ---------- */
.tg-corner{z-index:4;pointer-events:none;width:12px;height:12px;position:absolute}
.tg-corner::before,.tg-corner::after{content:"";background:var(--tg-fg-dim);position:absolute}
.tg-corner-tl{top:-2px;left:-2px}.tg-corner-tr{top:-2px;right:-2px}
.tg-corner-bl{bottom:-2px;left:-2px}.tg-corner-br{bottom:-2px;right:-2px}
.tg-corner-tl::before{width:12px;height:1px;top:0;left:0}.tg-corner-tl::after{width:1px;height:12px;top:0;left:0}
.tg-corner-tr::before{width:12px;height:1px;top:0;right:0}.tg-corner-tr::after{width:1px;height:12px;top:0;right:0}
.tg-corner-bl::before{width:12px;height:1px;bottom:0;left:0}.tg-corner-bl::after{width:1px;height:12px;bottom:0;left:0}
.tg-corner-br::before{width:12px;height:1px;bottom:0;right:0}.tg-corner-br::after{width:1px;height:12px;bottom:0;right:0}

/* ---------- buttons ---------- */
.tg-btn{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  border-radius:var(--tg-radius-sm);padding:11px 18px;
  font-size:14px;font-weight:500;line-height:1;
  transition:background-color .15s var(--tg-ease),color .15s var(--tg-ease);
}
.tg-btn--primary{background:var(--tg-primary);color:#000}
.tg-btn--primary:hover{background:#fff}
.tg-btn--secondary{background:var(--tg-surface);color:var(--tg-fg)}
.tg-btn--secondary:hover{background:var(--tg-surface-hover)}
.tg-btn--ghost{background:rgba(20,20,20,.6);color:var(--tg-fg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tg-btn--ghost:hover{background:rgba(30,30,30,.7)}
.tg-btn--icon{padding:11px}
.tg-btn .tg-arrow{display:inline-block;transition:transform .2s var(--tg-ease)}
.tg-btn .tg-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tg-btn:hover .tg-arrow{transform:translateX(4px)}
.tg-btn .tg-tag{margin-left:4px;border-radius:var(--tg-radius-sm);border:1px solid;border-color:color-mix(in oklab,currentColor 30%,transparent);padding:2px 6px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.tg-btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* chip: static tag in the "power" section */
.tg-chip{
  display:inline-flex;align-items:center;white-space:nowrap;border-radius:4px;
  background:var(--tg-surface);padding:10px 16px;font-size:14px;font-weight:500;line-height:1;color:var(--tg-fg);
}

/* text link */
.tg-link{color:var(--tg-fg-dim);transition:color .15s var(--tg-ease)}
.tg-link:hover{color:var(--tg-fg)}
.tg-link--underline{color:var(--tg-fg);text-decoration:none}
.tg-link--underline:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- live indicator (emerald ping) ---------- */
.tg-live{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tg-emerald)}
.tg-live__dot{position:relative;display:inline-flex;width:6px;height:6px}
.tg-live__dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--tg-emerald);opacity:.75;animation:tg-ping 1s cubic-bezier(0,0,.2,1) infinite}
.tg-live__dot::after{content:"";position:relative;display:inline-flex;width:6px;height:6px;border-radius:50%;background:var(--tg-emerald)}

/* ---------- header ---------- */
.tg-header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;height:var(--tg-header-h);
  border-bottom:1px solid var(--tg-line);
  background:rgba(1,1,1,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.tg-header__inner{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:12px;padding:0 16px}
@media (min-width:640px){.tg-header__inner{padding:0 24px}}
@media (min-width:768px){.tg-header__inner{padding:0 40px}}
.tg-brand{display:flex;min-width:0;flex-shrink:1;align-items:center;gap:10px;font-size:17px;font-weight:500;color:var(--tg-fg)}
.tg-brand__mark{width:20px;height:20px;flex:none}
.tg-header__nav{display:none;align-items:center;gap:12px}
@media (min-width:768px){.tg-header__nav{display:flex}}
.tg-header__nav .tg-btn--secondary{padding:10px 14px}
.tg-header__mobile{display:flex;flex-shrink:0;align-items:center;gap:8px}
@media (min-width:768px){.tg-header__mobile{display:none}}
.tg-burger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* mobile menu */
.tg-menu{position:fixed;left:0;right:0;top:var(--tg-header-h);bottom:0;z-index:40;transition:opacity .2s var(--tg-ease);pointer-events:none;opacity:0}
.tg-menu.is-open{pointer-events:auto;opacity:1}
.tg-menu__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tg-menu__nav{position:relative;display:flex;width:100%;flex-direction:column;gap:12px;border-bottom:1px solid var(--tg-line);background:var(--tg-bg-nav);padding:24px}
.tg-menu__nav .tg-btn{padding:12px 16px;gap:12px}
.tg-menu__rule{display:block;height:1px;width:100%;background:var(--tg-line);margin:4px 0}
@media (min-width:768px){.tg-menu{display:none}}

/* ---------- section scaffolding ---------- */
.tg-section{position:relative;background:var(--tg-bg)}
.tg-section--pad{padding:80px 24px}
@media (min-width:640px){.tg-section--pad{padding:80px 32px}}
@media (min-width:768px){.tg-section--pad{padding:120px 32px}}
.tg-section--pad-lg{padding:96px 24px}
@media (min-width:768px){.tg-section--pad-lg{padding:140px 32px}}

/* background illustration layer (absolute, behind content) */
.tg-bglayer{pointer-events:none;position:absolute;inset:0;z-index:0;overflow:hidden}
.tg-illo{position:absolute;overflow:hidden}
.tg-illo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent}
.tg-illo--flip img{transform:scaleX(-1)}
.tg-illo canvas{pointer-events:none;position:absolute;inset:0;z-index:3;width:100%;height:100%;image-rendering:pixelated;opacity:0}

/* ---------- hero ---------- */
.tg-hero{position:relative;isolation:isolate;display:flex;min-height:calc(100vh - var(--tg-header-h));align-items:center;justify-content:center;overflow:hidden}
.tg-hero__bg{position:absolute;inset:0;right:-512px;z-index:-20;background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden;opacity:.55}
@media (min-width:1024px){.tg-hero__bg{right:0}}
.tg-hero__vignette{
  pointer-events:none;position:absolute;inset:0;z-index:-10;
  background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(0,0,0,.75) 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,0) 78%),
             linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.6) 100%);
}
.tg-hero__content{width:100%;max-width:720px;padding:80px 20px;text-align:center}
@media (min-width:768px){.tg-hero__content{padding:80px 32px}}
.tg-hero__content .tg-h1{margin:16px 0 20px}
@media (min-width:1024px){.tg-hero__content .tg-h1{min-height:90px}}
.tg-hero__content .tg-lead{max-width:560px;margin:0 auto 36px;line-height:1.75}
.tg-hero__actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.tg-hero__actions .tg-btn-row{justify-content:center;gap:14px}
.tg-hero__status{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;line-height:1.7;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tg-fg-faint);margin-top:6px}
.tg-blur-xs{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@media (min-width:1024px){.tg-blur-xs{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ---------- node timeline (the "three networks" block) ---------- */
.tg-nodes{position:relative;margin:0 auto;max-width:960px}
.tg-nodes__rail{position:absolute;background:var(--tg-line)}
.tg-nodes__rail--v{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.tg-nodes__rail--h{display:none;left:0;right:0;top:27px;height:1px}
.tg-nodes__grid{display:grid;grid-template-columns:1fr;gap:48px}
@media (min-width:768px){
  .tg-nodes__rail--v{display:none}
  .tg-nodes__rail--h{display:block}
  .tg-nodes__grid{grid-template-columns:repeat(var(--cols,3),1fr);gap:24px}
}
.tg-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.tg-node__glow{pointer-events:none;position:absolute;top:-4px;width:36px;height:36px;border-radius:50%;background:var(--tg-fg);opacity:.1;filter:blur(12px);animation:tg-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.tg-node__dot{position:relative;z-index:10;display:flex;width:13px;height:13px;align-items:center;justify-content:center;margin-bottom:20px}
.tg-node__ping{position:absolute;inset:0;border-radius:50%;background:var(--tg-fg-dim);opacity:.4;animation:tg-ping 1s cubic-bezier(0,0,.2,1) infinite}
.tg-node__ring{position:relative;display:flex;width:13px;height:13px;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--tg-line-strong);background:var(--tg-bg)}
.tg-node__ring::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--tg-fg-dim)}
.tg-node--now .tg-node__ring{border-color:var(--tg-fg)}
.tg-node--now .tg-node__ring::after{background:var(--tg-fg)}
.tg-node__year{margin-bottom:6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tg-fg-faint)}
.tg-node .tg-h3{margin-bottom:8px;position:relative}
.tg-node__year,.tg-node .tg-h3,.tg-node__text{background:var(--tg-bg);padding:0 8px}
@media (min-width:768px){.tg-node__year,.tg-node .tg-h3,.tg-node__text{background:none;padding:0}}
.tg-node__text{position:relative;max-width:240px;font-size:13.5px;line-height:1.6;color:var(--tg-fg-dim);text-wrap:pretty}

/* ---------- flow dot (running light along a rail) ---------- */
.tg-flow-dot{position:absolute;pointer-events:none;width:9px;height:9px;border-radius:50%;background:var(--tg-fg-bright);box-shadow:var(--tg-dot-glow);transform:translateX(-50%);animation:tg-flow 3.6s linear infinite}
.tg-flow-dot-vertical{position:absolute;pointer-events:none;left:50%;width:6px;height:6px;border-radius:50%;background:var(--tg-fg);box-shadow:0 0 6px 1px rgba(241,241,241,.5);transform:translateX(-50%);animation:tg-flow-vertical 2.2s linear infinite}
.tg-connector{position:relative;display:block;height:20px;width:1px;overflow:hidden;background:var(--tg-line-strong)}
.tg-connector-row{display:flex;justify-content:center}
.tg-connector-row--wide{display:none;justify-content:center;gap:160px}
@media (min-width:640px){.tg-connector-row--wide{display:flex}.tg-connector-row--single{display:none}}

/* ---------- boxed cells with corner marks ---------- */
.tg-cell{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--tg-line);background:var(--tg-bg-deep);
  transition:border-color .3s var(--tg-ease);
}
.tg-cell:hover{border-color:var(--tg-line-strong)}
.tg-cell--soft{border-color:var(--tg-line-soft);background:var(--tg-bg)}
.tg-cell--hero{border-color:var(--tg-fg);text-align:center;padding:28px 16px}
@media (min-width:640px){.tg-cell--hero{padding:36px 24px}}
@media (min-width:768px){.tg-cell--hero{padding:36px 40px}}
.tg-cell--hero .tg-cell__glow{pointer-events:none;position:absolute;left:50%;top:50%;width:96px;height:96px;transform:translate(-50%,-50%);border-radius:50%;background:var(--tg-fg);opacity:.06;filter:blur(64px)}
@media (min-width:640px){.tg-cell--hero .tg-cell__glow{width:128px;height:128px}}
.tg-cell--hero .tg-cell__title{position:relative;font-size:22px;font-weight:500;letter-spacing:.06em;color:var(--tg-fg);text-transform:uppercase}
@media (min-width:640px){.tg-cell--hero .tg-cell__title{font-size:26px}}
@media (min-width:768px){.tg-cell--hero .tg-cell__title{font-size:30px}}
.tg-cell--hero .tg-cell__sub{position:relative;margin:12px 0;font-size:13px;color:var(--tg-fg-dim)}
.tg-cell--hero .tg-cell__meta,.tg-cell--soft .tg-cell__meta{position:relative;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tg-fg-faint)}
@media (min-width:640px){.tg-cell--hero .tg-cell__meta,.tg-cell--soft .tg-cell__meta{font-size:13px;letter-spacing:.18em}}
.tg-cell--soft{text-align:center;padding:20px 16px}
@media (min-width:640px){.tg-cell--soft{padding:24px}}
.tg-cell--soft .tg-cell__meta{color:var(--tg-fg-dim);margin-bottom:6px}
.tg-cell--soft .tg-cell__sub{font-size:12px;color:var(--tg-fg-faint)}
@media (min-width:640px){.tg-cell--soft .tg-cell__sub{font-size:13px}}

/* zone box: cell with an uppercase title and a rail list */
.tg-zones{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:640px){.tg-zones{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (min-width:1024px){.tg-zones{grid-template-columns:repeat(4,1fr)}}
.tg-zone{padding:20px 18px 22px}
.tg-zone__title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tg-fg);margin-bottom:14px}
.tg-zone ul{padding-left:14px;border-left:1px solid var(--tg-line)}
.tg-zone li{font-size:12.5px;line-height:1.55;color:var(--tg-fg-dim);padding:5px 0;text-wrap:pretty}

/* ---------- stats box (cave section) ---------- */
.tg-stats{
  position:relative;display:grid;grid-template-columns:1fr;width:100%;
  border:1px solid var(--tg-line);background:rgba(0,0,0,.2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
@media (min-width:768px){.tg-stats{grid-template-columns:repeat(3,1fr)}}
.tg-stat{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;border-bottom:1px solid #1f1f1f}
.tg-stat:last-child{border-bottom:0}
@media (min-width:768px){
  .tg-stat{border-bottom:0;border-right:1px solid #1f1f1f}
  .tg-stat:nth-of-type(3n){border-right:0}
  .tg-stat:nth-of-type(n+4){border-top:1px solid #1f1f1f}
}
@media (min-width:1024px){.tg-stat{padding:24px 20px}}
.tg-stat__body{display:flex;flex-direction:column;gap:4px}
@media (min-width:1024px){.tg-stat__body{gap:6px}}
.tg-stat__n{font-size:16px;font-weight:500;line-height:1.1;letter-spacing:-.01em;color:var(--tg-fg)}
@media (min-width:1024px){.tg-stat__n{font-size:18px}}
.tg-stat__d{font-size:13px;letter-spacing:.02em;color:var(--tg-fg-faint);text-wrap:pretty}
@media (min-width:1024px){.tg-stat__d{font-size:14px}}
.tg-stat__icon{display:flex;width:22px;height:22px;flex:none;align-items:center;justify-content:center;border-radius:50%;border:1px solid #d4d4d4;font-size:12px;line-height:1;color:#d4d4d4}

/* ---------- table ---------- */
.tg-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px}
.tg-table th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid #1a1a1a;background:var(--tg-bg-deep);padding:12px 8px;text-align:left;font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--tg-fg-dim)}
.tg-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid #111;padding:16px 8px;font-size:12px;color:var(--tg-fg)}
.tg-table tbody tr{background:rgba(255,255,255,.025);transition:background-color .15s var(--tg-ease)}
.tg-table tbody tr:hover{background:rgba(255,255,255,.05)}
.tg-table tbody tr:last-child td{border-bottom:0}
@media (min-width:640px){.tg-table th,.tg-table td{padding-left:18px;padding-right:18px;font-size:14px}}
.tg-table td.is-key{color:var(--tg-fg-dim)}
.tg-table td.is-val{color:var(--tg-fg)}

/* ---------- terminal window card ---------- */
.tg-term{
  position:relative;overflow:hidden;border-radius:var(--tg-radius-lg);
  border:1px solid rgba(255,255,255,.1);background:rgba(6,6,6,.6);
  box-shadow:0 8px 32px rgba(0,0,0,.35);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  transition:border-color .3s var(--tg-ease),background-color .3s var(--tg-ease);
}
.tg-term--link{cursor:pointer}
.tg-term--link:hover{border-color:rgba(255,255,255,.22);background:rgba(14,14,14,.7)}
.tg-term__bar{display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);padding:10px 16px}
.tg-term__lights{display:flex;gap:6px}
.tg-term__lights i{width:9px;height:9px;border-radius:50%}
.tg-term__lights i:nth-child(1){background:rgba(255,95,87,.7)}
.tg-term__lights i:nth-child(2){background:rgba(254,188,46,.7)}
.tg-term__lights i:nth-child(3){background:rgba(40,200,64,.7)}
.tg-term__file{margin-left:4px;font-size:11px;letter-spacing:.08em;color:var(--tg-fg-faint)}
.tg-term__right{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tg-fg-faint);transition:color .2s var(--tg-ease)}
.tg-term--link:hover .tg-term__right{color:var(--tg-fg)}
.tg-term__body{position:relative;padding:20px}
.tg-term__scan{pointer-events:none;position:absolute;inset:0;z-index:2;opacity:.05;background-image:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 3px)}
.tg-term__log{position:relative;overflow:hidden;font-size:14px;line-height:1.7;color:var(--tg-fg-dim)}
.tg-term__log .is-head{color:var(--tg-fg)}

/* ---------- framed container (buy section) ---------- */
.tg-framed{position:relative;margin:0 auto;max-width:var(--tg-content);overflow:hidden;padding:16px}
@media (min-width:768px){.tg-framed{padding:56px}}
@media (min-width:1024px){.tg-framed{padding:36px}}
.tg-framed__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.6;overflow:hidden}
.tg-framed__shade{pointer-events:none;position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.7) 100%),
             linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.55) 100%)}
.tg-framed__content{position:relative;z-index:10}

/* ---------- numbered steps on a rail (request → settle) ---------- */
.tg-steps{position:relative}
.tg-steps__rail{position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:var(--tg-line)}
.tg-steps__list{display:flex;flex-direction:column;gap:28px}
.tg-step{position:relative;z-index:10;display:flex;align-items:flex-start;gap:16px}
.tg-step__n{display:flex;width:31px;height:31px;flex:none;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--tg-line-strong);background:var(--tg-bg-deep);font-size:12px;font-weight:500;color:var(--tg-fg-bright);transition:border-color .3s var(--tg-ease),box-shadow .3s var(--tg-ease)}
.tg-step:hover .tg-step__n{border-color:var(--tg-fg);box-shadow:var(--tg-glow)}
.tg-step__title{margin:6px 0 6px;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--tg-fg-bright);text-transform:uppercase}
.tg-step__text{max-width:280px;font-size:13px;line-height:1.6;color:var(--tg-fg-dim);text-wrap:pretty}
@media (min-width:768px){
  .tg-steps__rail{left:15.5px;right:15.5px;top:15px;bottom:auto;height:1px;width:auto}
  .tg-steps__list{flex-direction:row;justify-content:space-between;gap:8px}
  .tg-step{flex-direction:column;width:150px;flex:none;gap:0}
  .tg-step__n{margin-bottom:16px}
  .tg-step__title{margin:0 0 8px}
  .tg-step__text{max-width:150px}
}

/* ---------- roadmap style numbered circles (bigger, on rail) ---------- */
.tg-roadmap{position:relative}
.tg-roadmap__rail{position:absolute;left:19px;top:19px;bottom:19px;width:1px;background:var(--tg-line)}
.tg-roadmap__grid{display:flex;flex-direction:column;gap:40px}
.tg-road{position:relative;display:flex;gap:20px}
.tg-road__n{position:relative;z-index:10;display:flex;width:38px;height:38px;flex:none;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--tg-line-strong);background:var(--tg-bg);font-size:12px;font-weight:500;color:var(--tg-fg-dim)}
.tg-road--active .tg-road__n{border-color:var(--tg-fg);color:var(--tg-fg)}
.tg-road__body{flex:1;padding-top:4px}
.tg-road__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.tg-road__title{font-size:18px;font-weight:500;color:var(--tg-fg)}
.tg-road__text{max-width:300px;font-size:14px;line-height:1.75;color:var(--tg-fg-dim);text-wrap:pretty}
@media (min-width:768px){
  .tg-roadmap__rail{left:0;right:0;top:19px;bottom:auto;height:1px;width:auto}
  .tg-roadmap__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
  .tg-road{flex-direction:column;gap:0}
  .tg-road__n{margin-bottom:20px}
  .tg-road__body{padding-top:0}
}

/* ---------- footer ---------- */
.tg-footer{background:var(--tg-bg);padding:36px 32px}
.tg-footer__row{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:16px;font-size:12px;color:var(--tg-fg)}
@media (min-width:768px){.tg-footer__row{flex-direction:row;align-items:center}}
.tg-footer__links{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
@media (min-width:768px){.tg-footer__links{gap:32px}}
.tg-footer__sep{display:none;height:14px;width:1px;background:var(--tg-line)}
@media (min-width:768px){.tg-footer__sep{display:inline-block}}
.tg-footer__icons{display:flex;align-items:center;gap:16px}
.tg-footer__icons svg{width:16px;height:16px;fill:currentColor}

/* ---------- loader gate ---------- */
.tg-loader{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:#000;transition:opacity .5s var(--tg-ease);opacity:1;animation:tg-gate-out .5s ease 4s forwards}
.tg-loader.is-out{opacity:0;pointer-events:none}
.tg-loader__inner{display:flex;width:100%;max-width:320px;flex-direction:column;align-items:center;gap:16px;padding:0 24px;color:var(--tg-fg-dim)}
.tg-loader__spin{width:40px;height:40px;border-radius:50%;border:2px solid var(--tg-line-strong);border-top-color:var(--tg-fg);animation:tg-spin 1s linear infinite}
.tg-loader__label{min-height:34px;width:100%;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- modal (case sheet) ---------- */
.tg-modal{position:fixed;inset:0;z-index:100;display:none}
.tg-modal.is-open{display:block}
.tg-modal__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tg-sheet{position:absolute;inset:24px;max-width:960px;margin:0 auto;display:flex;flex-direction:column;border:1px solid var(--tg-line);background:var(--tg-bg-nav);overflow:hidden}
.tg-sheet__bar{flex:none;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--tg-line);background:rgba(255,255,255,.03);padding:12px 20px}
.tg-sheet__bar .tg-term__file{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-sheet__close{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:var(--tg-radius-sm);background:var(--tg-surface);color:var(--tg-fg-dim);transition:background-color .15s var(--tg-ease),color .15s var(--tg-ease)}
.tg-sheet__close:hover{background:var(--tg-surface-hover);color:var(--tg-fg)}
.tg-sheet__close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.tg-sheet__body{flex:1;overflow-y:auto;padding:36px 36px 72px}
@media (max-width:1024px){.tg-sheet{inset:16px}.tg-sheet__body{padding:28px 26px 60px}}
@media (max-width:720px){.tg-sheet{inset:0;border:0}.tg-sheet__bar{padding:12px 16px}.tg-sheet__body{padding:22px 18px 60px}}
.tg-case__lead{color:var(--tg-fg-bright);font-size:17px;line-height:1.6;max-width:72ch;margin-bottom:32px;text-wrap:pretty}
@media (max-width:720px){.tg-case__lead{font-size:15px;max-width:none;margin-bottom:24px}}
.tg-case__blk{padding:26px 0;border-top:1px solid var(--tg-line-soft)}
.tg-case__blk>.tg-eyebrow{margin-bottom:14px;letter-spacing:.14em}
.tg-case__blk p{font-size:13.5px;line-height:1.75;color:var(--tg-fg-dim);margin-bottom:14px;max-width:none;text-wrap:pretty}
.tg-case__blk p:last-child{margin-bottom:0}
.tg-case__blk .tg-table{margin:10px 0}
.tg-case__blk .tg-eyebrow.is-sub{margin:22px 0 12px;letter-spacing:.14em}
.tg-case__note{font-size:12px;color:var(--tg-fg-faint);border-left:1px solid var(--tg-line);padding-left:14px;margin-top:18px;line-height:1.7;text-wrap:pretty}
.tg-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tg-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tg-gap{height:14px}
@media (max-width:720px){.tg-row2,.tg-row3{grid-template-columns:1fr;gap:12px}}

/* case images */
.tg-fig{margin:0;min-width:0}
.tg-fig figcaption{margin-top:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tg-fg-faint);line-height:1.6}
.tg-figtext{display:flex;flex-direction:column;justify-content:center;gap:10px}
.tg-figtext p{margin:0}
.tg-case__img{display:block;width:100%;border:1px solid var(--tg-line-soft);background:#050505}
.tg-case__img--m{max-width:640px;margin:0 auto}

/* ---------- placeholder slot for your own images ---------- */
.tg-ph{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--tg-line-soft);background:#050505;color:var(--tg-fg-faint);text-align:center;padding:16px;
}
.tg-ph::before{content:"";pointer-events:none;position:absolute;inset:0;opacity:.05;background-image:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 3px)}
.tg-ph b{position:relative;display:block;color:var(--tg-fg-dim);font-weight:500;font-size:12px}
.tg-ph span{position:relative;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#4a4a4a}
@media (max-width:720px){.tg-ph{height:auto!important;aspect-ratio:16/10;padding:14px}}

/* ---------- motion ---------- */
@keyframes tg-blink{50%{opacity:0}}
@keyframes tg-flow{0%{opacity:0;left:15.5px}8%{opacity:1}92%{opacity:1}to{opacity:0;left:calc(100% - 15.5px)}}
@keyframes tg-flow-vertical{0%{opacity:0;top:0%}15%{opacity:1}85%{opacity:1}to{opacity:0;top:100%}}
@keyframes tg-glitch{0%{transform:translate(0)}25%{filter:hue-rotate(10deg);transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px)}to{transform:translate(0)}}
@keyframes tg-spin{to{transform:rotate(360deg)}}
@keyframes tg-ping{75%,to{opacity:0;transform:scale(2)}}
@keyframes tg-pulse{50%{opacity:.5}}
@keyframes tg-gate-out{to{opacity:0;visibility:hidden;pointer-events:none}}

.tg-tw-cursor{color:var(--tg-fg);margin-left:2px;display:inline-block;animation:tg-blink 1s steps(2,end) infinite}
.tg-glitch-hover:hover{animation:tg-glitch .22s steps(2,end)}

.tg-reveal{opacity:0;transform:translateY(12px);transition:opacity .7s,transform .7s}
.tg-reveal.is-in{opacity:1;transform:none}
.tg-reveal-blur{opacity:0;filter:blur(6px);transform:translateY(6px);transition:opacity .8s,filter .8s,transform .8s}
.tg-reveal-blur.is-in{opacity:1;filter:blur(0);transform:none}
.tg-reveal-fade{opacity:0;transition:opacity .7s}
.tg-reveal-fade.is-in{opacity:1}

@media (prefers-reduced-motion:reduce){
  .tg-reveal,.tg-reveal-blur,.tg-reveal-fade{opacity:1;filter:none;transition:none;transform:none}
  .tg-flow-dot,.tg-flow-dot-vertical,.tg-tw-cursor,.tg-node__ping,.tg-node__glow,.tg-live__dot::before{animation:none}
  .tg-glitch-hover:hover{animation:none}
  .tg-btn .tg-arrow{transition:none}
}

/* no JS: show everything, skip canvas masks */
.no-js .tg-reveal,.no-js .tg-reveal-blur,.no-js .tg-reveal-fade{opacity:1;filter:none;transform:none}
.no-js [data-pixel-reveal] canvas{display:none}
.no-js .tg-loader{display:none}