/* r27: rich page heroes, ecosystem filters, community open-source, graceful live fallbacks */
.phx{padding:clamp(48px,7vw,88px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line);overflow:hidden}
.light.phx{border-color:var(--pline)}
.phx .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.phx .lede{max-width:44ch}
.phx .h1{font-size:clamp(42px,5.4vw,78px)}
.phx .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.phx .ctas .btn{width:auto;margin-top:0;height:46px}
.vis{position:relative;border-radius:22px;background:radial-gradient(120% 90% at 70% 0%,rgba(201,140,240,.20),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(255,61,143,.16),transparent 60%),var(--ink2);border:1px solid var(--line2);padding:clamp(16px,2.2vw,26px);color:var(--bone);box-shadow:0 30px 80px -30px rgba(0,0,0,.55)}
.vis svg{display:block;width:100%;height:auto}
.vis-h{display:flex;justify-content:space-between;align-items:center;font:500 11.5px/1 var(--m);letter-spacing:.07em;text-transform:uppercase;color:var(--bone3);margin-bottom:10px}
.vis-h b{color:var(--ok);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.vis-h b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(56,217,154,.18)}
.vis-k{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:14px;border-radius:12px;overflow:hidden;background:var(--line2)}
.vis-k div{background:var(--ink2);padding:12px 12px 11px}
.vis-k b{display:block;font:700 clamp(17px,1.7vw,21px)/1.1 var(--d);letter-spacing:-.03em;color:var(--bone)}
.vis-k span{display:block;margin-top:5px;font:500 10.5px/1.3 var(--m);letter-spacing:.04em;text-transform:uppercase;color:var(--bone3)}
.vis text{font-family:var(--m)}
.vis .t-lg{font:700 17px var(--d);fill:var(--bone)}
.vis .t-sm{font-size:12px;fill:var(--bone3);letter-spacing:.04em}
.vis .t-pk{fill:#ff86b8}
.vis .flow{fill:none;stroke:url(#gFlow);stroke-width:2;stroke-dasharray:5 7;animation:r27dash 1.6s linear infinite}
.vis .flow.rev{animation-direction:reverse}
.vis .nodebox{fill:#18181c;stroke:rgba(255,255,255,.16)}
.vis .ring{fill:none;stroke:rgba(255,255,255,.09)}
.vis .spin{transform-origin:50% 50%;transform-box:fill-box;animation:r27spin 60s linear infinite}
.vis .blk{fill:#1d1d22;stroke:rgba(255,255,255,.14)}
.vis .blk.top{fill:url(#gBlk);stroke:none;animation:r27pulse 2.4s ease-in-out infinite}
.vis .chain-l{stroke:rgba(255,255,255,.18);stroke-width:1.2}
@keyframes r27dash{to{stroke-dashoffset:-24}}
@keyframes r27spin{to{transform:rotate(360deg)}}
@keyframes r27pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.vis .flow,.vis .spin,.vis .blk.top{animation:none}}
@media (max-width:900px){.phx .wrap{grid-template-columns:1fr}.vis{max-width:560px}}
@media (max-width:560px){.vis-k{grid-template-columns:repeat(2,1fr)}.vis{border-radius:18px}}
/* light-section text inside heroes */
.light.phx .lede{color:var(--text2)}
/* stats band */
.sband{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line2);border-radius:18px;overflow:hidden}
.sband div{padding:22px 22px 20px;border-right:1px solid var(--line2)}
.sband div:last-child{border-right:0}
.sband b{display:block;font:800 clamp(28px,3.4vw,42px)/1 var(--d);letter-spacing:-.045em}
.sband span{display:block;margin-top:8px;font-size:14px;color:var(--bone2)}
.light .sband{border-color:var(--pline)}.light .sband div{border-color:var(--pline)}.light .sband span{color:var(--text2)}
@media (max-width:760px){.sband{grid-template-columns:1fr 1fr}.sband div:nth-child(2){border-right:0}.sband div:nth-child(-n+2){border-bottom:1px solid var(--line2)}.light .sband div:nth-child(-n+2){border-color:var(--pline)}}
/* section heading row */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.shead .h2{margin:0;font-size:clamp(30px,4vw,48px)}
.shead p{max-width:46ch;color:var(--text2);margin:0}
.dark .shead p{color:var(--bone2)}
/* three-step strip */
.steps-x{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:sx}
.steps-x li{list-style:none;position:relative;padding:24px 22px 22px;border:1px solid var(--line2);border-radius:16px;background:var(--ink2)}
.steps-x li::before{counter-increment:sx;content:"0" counter(sx);display:block;font:600 12px var(--m);color:var(--pink);margin-bottom:14px;letter-spacing:.06em}
.steps-x h3{font-size:20px;letter-spacing:-.02em;margin:0 0 6px}
.steps-x p{color:var(--bone2);font-size:15px;margin:0}
.steps-x a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.steps-x{grid-template-columns:1fr}}
/* ecosystem filter */
.flt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.flt button{height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--pline);background:#fff;color:var(--text);font:500 14px var(--s);cursor:pointer;transition:border-color .2s,background .2s}
.flt button:hover{border-color:rgba(18,18,20,.35)}
.flt button[aria-pressed="true"]{background:var(--text);color:#fff;border-color:var(--text)}
.flt button:focus-visible{outline:2px solid var(--pinkd);outline-offset:2px}
.app[hidden]{display:none!important}
.app .ico{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font:700 15px var(--d);color:#fff;background:linear-gradient(135deg,#ff3d8f,#9e5ecf)}
.app .hd{display:flex;align-items:center;gap:12px}
.app .hd h3{margin:0}
.feat{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;border:1px solid var(--line2);border-radius:22px;padding:clamp(22px,3.5vw,40px);background:radial-gradient(80% 120% at 100% 0%,rgba(255,61,143,.14),transparent 60%),var(--ink2)}
.feat .h2{font-size:clamp(28px,3.6vw,44px);max-width:18ch;margin:0}
.feat p{color:var(--bone2);margin:14px 0 0;max-width:46ch}
.feat dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.feat dl div{border:1px solid var(--line2);border-radius:14px;padding:16px}
.feat dt{font:500 11px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--bone3)}
.feat dd{margin:6px 0 0;font:800 clamp(24px,2.8vw,34px)/1 var(--d);letter-spacing:-.04em}
@media (max-width:860px){.feat{grid-template-columns:1fr}}
/* community */
.ch{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ch a{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--line2);border-radius:16px;background:var(--ink2);transition:border-color .2s,transform .2s var(--e)}
.ch a:hover{border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.ch .ci{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--line2);margin-bottom:6px}
.ch .ci svg{width:20px;height:20px}
.ch h3{font-size:21px;letter-spacing:-.02em;margin:0}
.ch p{color:var(--bone2);font-size:14.5px;margin:0}
.ch .go{margin-top:auto;padding-top:6px;font:500 13px var(--m);color:var(--pink)}
@media (max-width:900px){.ch{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ch{grid-template-columns:1fr}}
.repos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.repo{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--pline);border-radius:14px;background:#fff;transition:border-color .2s}
.repo:hover{border-color:rgba(18,18,20,.3)}
.repo .rn{font:600 14px var(--m);color:var(--text)}
.repo p{margin:0;color:var(--text2);font-size:14.5px}
.repo .rv{margin-top:auto;padding-top:8px;display:flex;gap:10px;flex-wrap:wrap;font:500 12px var(--m);color:var(--text2)}
.repo .rv b{color:var(--pinkd);font-weight:600}
@media (max-width:900px){.repos{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.repos{grid-template-columns:1fr}}
.ways{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ways a{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:16px;border:1px solid var(--line2);background:var(--ink2);transition:border-color .2s}
.ways a:hover{border-color:rgba(255,255,255,.32)}
.ways b{font:700 19px/1.2 var(--d);letter-spacing:-.02em}
.ways span{color:var(--bone2);font-size:14.5px}
.ways em{font-style:normal;margin-top:auto;padding-top:6px;color:var(--pink);font:500 13px var(--m)}
@media (max-width:900px){.ways{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ways{grid-template-columns:1fr}}
/* token: supply bar */
.sup{margin-top:24px}
.sup-bar{height:14px;border-radius:99px;background:var(--paper2);overflow:hidden;display:flex}
.sup-bar i{display:block;height:100%}
.sup-bar .c{background:linear-gradient(90deg,#ff3d8f,#c98cf0);width:99.67%}
.sup-bar .o{background:#c9c4bb;width:.33%}
.sup-l{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font:500 12px var(--m);color:var(--text2)}
/* graceful live fallbacks */
.stale-note{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:500 12px var(--m);color:var(--warn)}
.stale-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn)}

/* r28: phone-sized diagrams. Each hero diagram has a phone layout (svg.vm) that takes over when its box is narrow, so labels stay >= 12px. */
.vis{container-type:inline-size}
.vis svg.vm{display:none}
.vis .vd .t-sm{font-size:13px}
@container (max-width:440px){.vis svg.vd{display:none}.vis svg.vm{display:block;max-width:400px;margin:0 auto}.vis .vm .flow{stroke:url(#gFlowM)}.vis .vm .blk.top{fill:url(#gBlkM)}.vis .vm .t-lg{font-size:16px}.vis .vm .t-sm{font-size:12.5px}}
.ancf{container-type:inline-size}
@container (max-width:860px){.ancf svg:not(.ancm){display:none}.ancf .ancm{display:block;margin:0 auto}}

/* ==========================================================================
   Chromia design system layer (redesign/r28-design)
   Maps r28 onto chromia.com's sticker system: light paper/ink theme,
   Battlefin poster headings, NB International text, NB International Mono
   data, 2px ink borders with hard offset shadows. Content and HTML untouched.
   ========================================================================== */
@font-face{font-family:"Battlefin";src:url(/fonts/Battlefin-Black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"NB International";src:url(/fonts/NBInternational-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"NB International";src:url(/fonts/NBInternational-Bold.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"NB International Mono";src:url(/fonts/NBInternational-Mono.woff2) format("woff2");font-display:swap}

:root{
  /* r28 dark roles -> DS light roles */
  --ink:#f5eeee;--ink-1:#faf5f5;--ink2:#ece3e5;--ink3:#e3d8db;
  --line:#dccfd3;--line2:#c7b8be;--rule-3:#9a90a0;
  --bone:#1f1a23;--bone2:#5c5466;--bone3:#6b6474;--bone-4:#9a90a0;
  /* r28 light roles -> DS paper */
  --paper:#ece3e5;--paper2:#e3d8db;--text:#1f1a23;--text2:#5c5466;--pline:#c7b8be;
  /* brand */
  --pink:#ff5c8a;--pinkd:#c2185b;--sig-2:#ff7ea3;--sig-dim:rgba(255,92,138,.16);--vio:#7d42ab;--violet:#7d42ab;
  --ok:#0b7a52;--warn:#8f5f00;--no:#b42f2f;
  /* type */
  --poster:"Battlefin",ui-sans-serif,system-ui,sans-serif;
  --d:"NB International",ui-sans-serif,system-ui,sans-serif;
  --s:"NB International",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:"NB International Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* sticker */
  --st-line:#1f1a23;--st-card:#fff8f8;
  --st-pink:#ffb0c2;--st-pink-sh:#ff7ea3;--st-lav:#c98cf0;--st-lav-sh:#9e5ecf;
  color-scheme:light;
}
.dark{background:var(--ink);color:var(--bone)}
.light{background:var(--paper);color:var(--text)}
.hdr{background:rgba(245,238,238,.86);border-bottom:2px solid var(--st-line)}
.ftr{background:#1f1a23;color:#fff8f8;border-top:0;--bone:#fff8f8;--bone2:#cdc4cc;--bone3:#cdc4cc;--line:#4a4050;--line2:#4f4459}

/* poster headings (Battlefin is a single black cut: h1/h2 only, never small) */
.h1,h1,.h2,h2{font-family:var(--poster);font-weight:900;letter-spacing:-.015em}
.h1,h1{line-height:.92}
.h2,h2{line-height:.96}
h3,h4,.h3{font-family:var(--s);font-weight:700}

/* buttons -> st-btn */
.btn{border:2px solid var(--st-line);border-radius:999px;height:auto;padding:13px 22px;font:700 15px/1 var(--s);color:#1f1a23;
  transition:transform .15s ease,box-shadow .15s ease}
.btn-p{background:var(--st-pink);color:#1f1a23;box-shadow:5px 5px 0 var(--st-pink-sh)}
.btn-p:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--st-pink-sh)}
.btn-g{background:var(--st-card);color:#1f1a23;border-color:var(--st-line);box-shadow:5px 5px 0 var(--st-lav-sh)}
.btn-g:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--st-lav-sh)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--st-pink-sh)}
.btn:focus-visible{outline:3px solid var(--vio);outline-offset:3px}

/* pills -> st-chip */
.pill{border:2px solid var(--st-line);color:#1f1a23;background:var(--st-card);font:700 11px/1.4 var(--s);letter-spacing:.02em}

/* cards -> st-card */
.cmp-r{background:var(--st-card);color:#1f1a23;border:2px solid var(--st-line)!important;border-radius:18px;box-shadow:5px 5px 0 var(--st-line)}

@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none;transition:none}}

/* accent words: solid DS purple, no gradient */
main .dark h1 em,main h1.h1 em,.hero .h1 em,.h2 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--vio)}
.dark .fact b,.fact b{background:none;color:var(--bone)}
.hero::after{background:radial-gradient(60% 50% at 78% 30%,rgba(201,140,240,.18),transparent 70%)}

/* data boxes (terminal, code, ledger, query console) -> DS ink panel with on-panel text */
.code,.term,.glance,.ledger,.qc,.qc-res th,.cx-live div{background:#1f1a23;color:#fff8f8;
  --bone:#fff8f8;--bone2:#cdc4cc;--bone3:#a99cb2;--bone-4:#8a7e93;--line:#4a4050;--line2:#4f4459;--ink2:#2a2430;--ink3:#3a3340}
.code,.term,.glance,.ledger,.qc{border:2px solid var(--st-line)!important;border-radius:18px;box-shadow:5px 5px 0 var(--st-lav-sh)}
.ledger::before{display:none}

/* surfaces -> st-card */
.card,.layer,.ancf,.quick3 a,.qrun,.cmp,.trio>div,.mflow span{background:var(--st-card);color:#1f1a23;border:2px solid var(--st-line);border-radius:18px;box-shadow:5px 5px 0 var(--st-line)}
.quick3 a:hover,a.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--st-line);transition:transform .15s ease,box-shadow .15s ease}

/* SVG diagrams (.vis): sticker nodes on paper */
.vis .nodebox{fill:#fff8f8;stroke:#1f1a23;stroke-width:2}
.vis .blk{fill:#ece3e5;stroke:#1f1a23}
.vis .ring{stroke:rgba(31,26,35,.14)}
.vis .chain-l{stroke:rgba(31,26,35,.3)}
.vis .t-lg{fill:#1f1a23}
.vis .t-sm{fill:#5c5466}
.vis .t-pk{fill:#c2185b}
/* inline page accents follow the DS accent too */
.h1 em[style],.h2 em[style]{color:var(--vio)!important}
/* Learn section headings (learn.css sets them to the text face) */
.lx-h1,.lx-h1 *{font-family:var(--poster)!important;font-weight:900!important;letter-spacing:-.015em!important}
.lx-sh h2,.lx-build h2{font-family:var(--poster);font-weight:900;letter-spacing:-.015em}

/* header stays light when scrolled (r20 darkens it) */
.hdr.scrolled{background:rgba(245,238,238,.94);box-shadow:none;border-bottom:2px solid var(--st-line)}

/* every r28 surface box -> st-card (sm) */
.app,.buy3 li,.card,.ch a,.cmp,.cost3>div,.door,.door+.door,.exl li,.feat,.flag,.jobs,.layer,.lc,.mem,.nstats,.q30,.qrun,
.quick3 a,.repo,.rm-stat,.sband,.steps-x li,.tiles,.trio,.vis,.viz,.ways a,.wpnote,.mflow span,.ancf{
  background:var(--st-card);color:#1f1a23;border:2px solid var(--st-line);border-radius:18px;box-shadow:5px 5px 0 var(--st-line)}
.vis,.viz,.flag,.sband{box-shadow:8px 8px 0 var(--st-lav-sh);border-radius:28px}
a.door:hover,a.app:hover,.ways a:hover,.ch a:hover,.quick3 a:hover,a.card:hover,a.repo:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--st-line);border-color:var(--st-line);background:var(--st-card);transition:transform .15s ease,box-shadow .15s ease}
.go,.go b{color:#1f1a23;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
/* dark consoles -> ink panel */
.console,.sb,.cx-wrap,.cx-live{background:#1f1a23;color:#fff8f8;--bone:#fff8f8;--bone2:#cdc4cc;--bone3:#a99cb2;--line:#4a4050;--line2:#4f4459;
  border:2px solid var(--st-line);border-radius:18px;box-shadow:5px 5px 0 var(--st-lav-sh)}
.go,.go *,.door .go{color:#1f1a23!important}
/* r29 pages (/chr-2/simulator/): r29.css loads after this file, so selectors carry html for specificity */
html .sim-kpis div,html .sim-chart{background:var(--st-card);border:2px solid var(--st-line);border-radius:18px;box-shadow:5px 5px 0 var(--st-line)}
html .sim-pre button{border:2px solid var(--st-line);font-weight:500}
html .sim-pre button[aria-pressed=true]{background:var(--pink);border-color:var(--st-line);color:#1f1a23}
html .sim-ctl input[type=range]{accent-color:var(--vio)}

/* taste pass (Nov 2026): readability and consistency inside the sticker system */
/* running text in near-full ink (dark panels redefine --bone2 locally) */
:root{--bone2:#3a3240}
/* 13px floor for labels and captions outside code */
.eb,.src,p.src,.fh,.l,.lapps-l,.lapps small,.proof small,.who,.me,.ml,small.ml,.step .n,.sig .y,.sig span,.sig-cap,.row span,.tag,.fb span,.lock span,
.cmp-r span,.l-f a,.l-f span,.card .l,a .l,.door .who,.qc-l,.qc-rid,.qc-ph,.qc-ex button,.qc-tabs button,.qc-lk,.copy,th,summary,summary b{font-size:13px}
/* sentence-case labels: no tiny tracked capitals */
.fh,.l,.lapps-l,.who,.me,.qc-l,.cmp-r span,.eb,.card .l{text-transform:none;letter-spacing:.01em}
/* one border language: 2px ink or nothing, no hairline dividers in light sections */
.proof,.l-top,.lapps{border-top:0!important;border-bottom:0!important}
/* hero: display size capped so the headline clears the chain drawing; tablet keeps two lines */
@media (min-width:1101px){.hero .h1{font-size:clamp(64px,6.2vw,92px)}}
@media (min-width:600px) and (max-width:1100px){.hero .h1{font-size:clamp(46px,6.4vw,64px);max-width:none}}
@media (max-width:599px){.hero .h1{font-size:clamp(38px,10.4vw,46px)}h2,.h2{font-size:clamp(28px,8vw,34px)}.wrap{padding-left:20px;padding-right:20px}}
@media (min-width:761px) and (max-width:1100px){.hero-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"eb" "h1" "body" "led";row-gap:36px}}
@media (max-width:599px){.hero .ledger{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:100%}}
.ftr .fh,.ftr h3,table th,th span,.sig-cap,.lock span{font-size:13px}
.sig-cap,.sig-cap *{color:#1f1a23!important}
/* how-it-works flow: one sticker card, steps separated by a tone step instead of hairlines */
.flow{background:var(--st-card);border:2px solid var(--st-line)!important;border-radius:18px;box-shadow:5px 5px 0 var(--st-line);overflow:hidden}
.flow .step{border:0!important}
.flow .step+.step{background:rgba(31,26,35,.035)}
.flow .step+.step+.step{background:rgba(31,26,35,.065)}

/* ==== v2 alignment (Nov 2026): match chromia.com main sticker.css (tokens copied from src/app/globals.css) ==== */
:root{--st-lav:#c98cf0;--st-lav-sh:#9e5ecf;--st-pink:#ffb0c2;--st-pink-sh:#ff7ea3;--st-green:#93f091;--st-green-sh:#4fcd4c;--st-yellow:#ffb500;--st-yellow-sh:#ff9100;--st-r:28px}
/* type scale as main */
h1,.h1{font-size:clamp(46px,7vw,116px);line-height:.9}
.hero .h1{line-height:.9}
h2,.h2{font-size:clamp(36px,4.4vw,66px);line-height:.96}
.lede{font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:#1f1a23}
.pad{padding-top:88px;padding-bottom:88px}
@media (max-width:999px){.pad{padding-top:64px;padding-bottom:64px}}
/* eyebrow: dark mono pill */
.eb{display:inline-flex;align-items:center;gap:10px;font-family:var(--m);font-size:13px!important;letter-spacing:.08em!important;text-transform:uppercase!important;
  background:#1f1a23;color:#fff8f8!important;padding:9px 16px;border-radius:999px;border:2px solid #1f1a23}
.eb *{color:inherit!important}
/* cards: 28px radius, 8px shadow, tone shadows cycling lav / pink / green / yellow */
.door,.card,.app,.feat,.layer,.repo,.q30,.tiles,.trio,.mem,.lc,.cmp,.jobs{border-radius:var(--st-r)!important;box-shadow:8px 8px 0 var(--sh,#1f1a23)!important}
:is(.door,.card,.app,.feat,.layer,.repo,.mem,.lc):nth-child(4n+1){--sh:var(--st-lav-sh)}
:is(.door,.card,.app,.feat,.layer,.repo,.mem,.lc):nth-child(4n+2){--sh:var(--st-pink-sh)}
:is(.door,.card,.app,.feat,.layer,.repo,.mem,.lc):nth-child(4n+3){--sh:var(--st-green-sh)}
:is(.door,.card,.app,.feat,.layer,.repo,.mem,.lc):nth-child(4n+4){--sh:var(--st-yellow-sh)}
a.door:hover,a.card:hover,a.app:hover,a.repo:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--sh,#1f1a23)!important}
/* step label -> tone tag */
.step .n{display:inline-flex;border:2px solid #1f1a23;border-radius:999px;padding:5px 12px;font-family:var(--s);font-weight:700;font-size:13px!important;letter-spacing:0!important;color:#1f1a23!important;background:var(--st-pink)}
.step:nth-child(2) .n{background:var(--st-lav)}.step:nth-child(3) .n{background:var(--st-green)}
.flow{border-radius:var(--st-r)!important;box-shadow:8px 8px 0 var(--st-lav-sh)!important}
/* stats: dark strip, Battlefin numbers (hero proof + fact row) */
:has(> .fact){background:#1f1a23;color:#fff8f8;border:2px solid #1f1a23;border-radius:var(--st-r);padding:32px 36px;box-shadow:8px 8px 0 var(--st-yellow-sh)}
.fact,.fact *{color:#fff8f8!important}.fact small,.fact span{color:#cdc4cc!important}
.fact b,.fact strong,.fact .big,.fact>:first-child{font-family:var(--poster)!important;font-weight:900!important;letter-spacing:-.01em}
.proof b,.proof strong{font-family:var(--poster);font-weight:900;font-size:clamp(34px,3.4vw,48px);letter-spacing:-.01em}
/* visual frames: illustration window with a corner sticker */
.vis,.viz{position:relative;border-radius:var(--st-r)!important;box-shadow:8px 8px 0 var(--st-pink-sh)!important;overflow:visible!important}
.viz:nth-of-type(2n){box-shadow:8px 8px 0 var(--st-yellow-sh)!important}
.vis::after,.viz::after{content:"";position:absolute;top:-26px;right:-22px;width:64px;height:56px;background:var(--st-yellow);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);pointer-events:none;z-index:3}
.viz:nth-of-type(2n)::after{width:56px;height:56px;border-radius:50%;clip-path:none;background:var(--st-green);border:2px solid #1f1a23;box-shadow:4px 4px 0 #1f1a23;top:auto;bottom:-24px}
/* closing CTA: violet sticker band */
section.cta>.wrap{background:var(--st-lav);color:#1f1a23;border:2px solid #1f1a23;border-radius:var(--st-r);box-shadow:8px 8px 0 #1f1a23;padding:clamp(32px,5vw,64px)}
section.cta>.wrap :is(h2,p,.lede,span){color:#1f1a23!important}
section.cta>.wrap h2 em{background:#fff8f8;border:2px solid #1f1a23;border-radius:14px;padding:0 .18em;color:#1f1a23!important}
/* tags/pills -> st-tag */
.pill{border-width:2px!important;font-weight:700}
/* hero eyebrow keeps its dark pill readable; corner stickers only on section-level frames */
.hero .eb{background:#1f1a23!important;color:#fff8f8!important;border-color:#1f1a23!important}
.hero .eb *{color:#fff8f8!important}
.step .vis::after,.step .viz::after,.flow .vis::after,.flow .viz::after{display:none}
.step .vis,.step .viz,.flow .vis,.flow .viz{box-shadow:5px 5px 0 var(--st-lav-sh)!important;border-radius:18px!important}
/* SVG diagrams on light frames: dark-theme text fills remapped to ink */
:is(.viz,.vis,.anc) svg text.h{fill:#1f1a23}
:is(.viz,.vis,.anc) svg text:is(.s,.t){fill:#5c5466}
/* contrast: faint tokens on paper raised to >= 4.5:1 (dark panels keep their own values) */
:root{--bone-4:#6b6474}
.lnk,a.lnk{color:#7d42ab}
.lv,.lx-lv{color:#5c5466}
/* course videos never wider than the column */
video{max-width:100%;height:auto}
/* learn lessons: sticker components, readable links and buttons */
.lx-art a:not(.btn),.lx-outline a:not(.btn),.lx-secs a{color:#7d42ab;text-decoration-color:currentColor}
a.btn.btn-p,a.btn.btn-p *{color:#1f1a23!important}
.lx-outline,.lx-od{background:var(--st-card);border:2px solid #1f1a23!important;border-radius:18px;box-shadow:5px 5px 0 var(--st-lav-sh)}
.lx-pn{background:var(--st-card);border:2px solid #1f1a23!important;border-radius:18px;box-shadow:5px 5px 0 #1f1a23;transition:transform .15s ease,box-shadow .15s ease}
.lx-pn-n{box-shadow:5px 5px 0 var(--st-pink-sh)}
.lx-pn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #1f1a23}
.lx-pn-n:hover{box-shadow:7px 7px 0 var(--st-pink-sh)}
.lx-mod{line-height:1.35!important;text-transform:none!important;letter-spacing:.01em!important;font-size:13px!important;color:#1f1a23!important;font-weight:700}
.lx-od-n,.lx-step-of{color:#7d42ab!important}
.lx-side a[aria-current] .lx-i,.lx-side .on .lx-i,.lx-side [aria-current] .lx-i{color:#1f1a23}
.lx-lv{border:2px solid #1f1a23;border-radius:999px;background:var(--st-green);color:#1f1a23!important;font-weight:700}
/* learn: lesson outline box, path steps, course cards, closing band */
.lx-secs{background:var(--st-card);border:2px solid #1f1a23!important;border-radius:18px;box-shadow:5px 5px 0 var(--st-lav-sh)}
.lx-pc{background:var(--st-card);border:2px solid #1f1a23!important;border-radius:var(--st-r);box-shadow:8px 8px 0 var(--sh,#1f1a23)}
.lx-pc:nth-child(4n+1){--sh:var(--st-lav-sh)}.lx-pc:nth-child(4n+2){--sh:var(--st-pink-sh)}.lx-pc:nth-child(4n+3){--sh:var(--st-green-sh)}.lx-pc:nth-child(4n+4){--sh:var(--st-yellow-sh)}
.lx-pcs{gap:22px!important}
a.lx-card{background:var(--st-card);border:2px solid #1f1a23!important;border-radius:18px;box-shadow:5px 5px 0 #1f1a23;transition:transform .15s ease,box-shadow .15s ease}
a.lx-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--st-pink-sh)}
.lx-sec details{border:2px solid #1f1a23!important;border-radius:18px;background:var(--st-card)}
.lx-build-in{background:var(--st-lav);border:2px solid #1f1a23;border-radius:var(--st-r);box-shadow:8px 8px 0 #1f1a23;padding:clamp(28px,4vw,56px)!important}
.lx-build-in *{color:#1f1a23}
.lx-hero .eb,.lx-hero>.wrap>p:first-child{color:#7d42ab}
/* compare table is a light table: sticker card, not an ink panel */
.cx-wrap{background:var(--st-card)!important;color:#1f1a23!important;--bone:#1f1a23;--bone2:#3a3240;--bone3:#5c5466;--line:#dccfd3;--line2:#c7b8be;box-shadow:8px 8px 0 var(--st-lav-sh)!important;border-radius:var(--st-r)!important}
/* chips always carry ink text on their light fill */
.pill,.pill *{color:#1f1a23!important}
/* header as chromia.com: wordmark logo, semibold nav, sticker search + menu buttons */
.hdr .brand{width:104px;height:26px;background:url(/img/brand/chromia-logo-light.svg) left center/contain no-repeat;font-size:0;gap:0}
.hdr .brand>*{display:none}
.ftr .brand{width:104px;height:26px;background:url(/img/brand/chromia-logo-dark.svg) left center/contain no-repeat;font-size:0;gap:0}
.ftr .brand>*{display:none}
.hdr nav a,.hdr .nav a,.hdr .nav-docs{font-weight:600;font-size:15px;color:#1f1a23}
.hdr .kbtn{border:2px solid #1f1a23!important;border-radius:999px!important;background:#fff8f8;font-weight:600;color:#1f1a23}
.hdr .menu-b{border:2px solid #1f1a23!important;border-radius:50%!important;background:#fff8f8;width:42px;height:42px}
/* ecosystem: real app logos in the icon tile */
.app .hd:has(.ico.logo){flex-direction:column;align-items:flex-start;gap:12px}
.app .hd h3{overflow-wrap:anywhere}
.app .ico.logo{width:132px;height:52px;padding:2px 6px;background:#fff;border:2px solid #1f1a23;flex:none}
.app .ico.logo.dk{background:#1f1a23}
.app .ico.logo.sq{width:52px;padding:6px}
.app .ico.logo img{display:block;width:100%;height:100%;object-fit:contain}
/* logo audit: brand marks next to brand names */
.si{display:block;width:22px;height:22px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ci .si{width:20px;height:20px;color:var(--bone,#1f1a23)}
/* social links by destination (footer, layers, anywhere) */
a:is([href^="https://x.com/"],[href^="https://discord.gg/"],[href^="https://t.me/"],[href*="youtube.com/"],[href^="https://gitlab.com/chromaway"],[href^="https://github.com/"]):not(.repo):not(.btn)::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:.45em;vertical-align:-.1em;background:currentColor;-webkit-mask:var(--si) center/contain no-repeat;mask:var(--si) center/contain no-repeat}
a[href^="https://x.com/"]{--si:url(/img/social/x.svg)}
a[href^="https://discord.gg/"]{--si:url(/img/social/discord.svg)}
a[href^="https://t.me/"]{--si:url(/img/social/telegram.svg)}
a[href*="youtube.com/"]{--si:url(/img/social/youtube.svg)}
a[href^="https://gitlab.com/chromaway"]{--si:url(/img/social/gitlab.svg)}
a[href^="https://github.com/"]{--si:url(/img/social/github.svg)}
.community a[href]::before,main a:has(.ci)::before,.layer::before{display:none!important}
.layer:is([href^="https://x.com/"],[href^="https://discord.gg/"],[href^="https://t.me/"],[href^="https://gitlab.com/chromaway"]) b::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.4em;vertical-align:-.08em;background:currentColor;-webkit-mask:var(--si) center/contain no-repeat;mask:var(--si) center/contain no-repeat}
/* app logos by destination (home live-apps pills, use-case rows) */
:is(a[href$="#app-my-neighbor-alice"],a[href$="#app-mines-of-dalarnia"],a[href$="#app-eval-engine"],a[href$="#app-traced-systems"],a[href$="#app-atbash"],a[href$="#app-chromia-pay"],a[href$="#app-filehub"],a[href$="#app-xoob-network"],.layer[href="https://www.evalengine.ai"],.layer[href="https://tracedsystems.com"],.layer[href="https://atbash.ai"]) b::before{content:"";display:inline-block;width:64px;height:28px;margin-right:8px;vertical-align:middle;padding:3px 6px;box-sizing:border-box;background:#1f1a23 var(--al) center/contain no-repeat;background-origin:content-box;background-clip:border-box;border-radius:7px}
a[href$="#app-my-neighbor-alice"]{--al:url(/img/ecosystem/trim/mna.webp)}
a[href$="#app-mines-of-dalarnia"]{--al:url(/img/ecosystem/trim/mod.webp)}
a[href$="#app-eval-engine"],.layer[href="https://www.evalengine.ai"]{--al:url(/img/ecosystem/trim/eval.webp)}
a[href$="#app-traced-systems"],.layer[href="https://tracedsystems.com"]{--al:url(/img/ecosystem/trim/traced.webp)}
a[href$="#app-atbash"],.layer[href="https://atbash.ai"]{--al:url(/img/ecosystem/trim/atbash.webp)}
a[href$="#app-chromia-pay"]{--al:url(/img/ecosystem/trim/chromia-pay.webp)}
a[href$="#app-filehub"]{--al:url(/img/ecosystem/trim/filehub.webp)}
a[href$="#app-xoob-network"]{--al:url(/img/ecosystem/trim/xoob.webp)}
:is(a[href$="#app-eval-engine"],a[href$="#app-atbash"],a[href$="#app-chromia-pay"],a[href$="#app-filehub"],.layer[href="https://www.evalengine.ai"],.layer[href="https://atbash.ai"]) b::before{background-color:#fff;box-shadow:inset 0 0 0 1.5px #1f1a23}
/* network provider chips, exchange table, compare header */
.pchips li.lg{display:inline-flex;align-items:center;gap:8px}
.pchips li.lg img{height:44px;width:100px;margin:-10px -10px;clip-path:inset(10px 10px round 6px);background:#1f1a23;object-fit:contain}
.pchips li.lg.si-mono img{height:22px;width:22px;margin:0;clip-path:none;background:#fff;padding:3px;border-radius:6px}
td.xlg{display:flex;align-items:center;gap:10px}
td.xlg img{height:46px;width:104px;margin:-11px -10px;clip-path:inset(11px 10px round 6px);object-fit:contain;background:#1f1a23;flex:none}
th img.thl{height:16px;width:16px;vertical-align:-3px;margin-right:6px}
/* chr-2 backfill (from chromia.com/chr-2) */
.c2-hint{margin-top:14px;max-width:62ch;color:var(--bone3)}
.c2-jumps{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.c2-jumps a{display:inline-flex;gap:6px;align-items:center;height:34px;padding:0 14px;border:2px solid currentColor;border-radius:999px;font-size:13.5px;font-weight:600}
.c2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 8px}
.c2-stats>div{border:2px solid #1f1a23;border-radius:18px;padding:18px 20px;background:#fff8f8;color:#1f1a23}
.c2-stats span{display:block;font:500 12px var(--m);text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.c2-stats b{display:block;font:900 clamp(30px,3.4vw,44px)/1.1 var(--poster,var(--d));margin:6px 0 4px}
.c2-stats small{font-size:13px;opacity:.75}
.c2-chart{margin:24px 0}
.c2-leg{display:flex;flex-wrap:wrap;gap:16px;font:500 12.5px var(--m);opacity:.85}.c2-leg .acc{color:#9e5ecf}
.c2-chart svg{width:100%;height:auto;margin-top:10px;font:11px var(--m);fill:currentColor}
.c2-chart .bars rect{fill:#c98cf0;opacity:.6}.c2-chart .rate{fill:none;stroke:#7d42ab;stroke-width:3}
.tbl caption{caption-side:top;text-align:left;font:500 12px var(--m);text-transform:uppercase;letter-spacing:.06em;padding:0 0 10px;opacity:.75}
.c2-copy{margin:6px 0 14px}
@media (max-width:640px){.c2-stats{grid-template-columns:1fr}}
/* /chat: main's in-browser chat app, framed */
.chat-live{padding:24px 0 8px}
.chat-frame{height:min(860px,calc(100dvh - 140px));min-height:560px;border:2px solid #1f1a23;border-radius:24px;overflow:hidden;background:#f5eeee;box-shadow:8px 8px 0 #9e5ecf;position:relative}
@media (max-width:760px){.chat-frame{height:calc(100dvh - 120px);border-radius:18px;box-shadow:5px 5px 0 #9e5ecf}}
/* header dropdown groups (chromia.com IA) */
.nav .dd{position:relative;display:flex;align-items:center}
.nav .dd-t{background:none;border:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 10px}
.nav .dd-t::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg)}
.nav .dd-p{position:absolute;left:50%;top:100%;transform:translateX(-50%);display:none;min-width:220px;padding:8px;margin-top:6px;background:var(--ink2,#16161a);border:1px solid var(--line2,#333);border-radius:14px;z-index:70}
.nav .dd:hover .dd-p,.nav .dd:focus-within .dd-p{display:block}
.nav .dd-p::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav .dd-p a{display:block;padding:8px 12px;border-radius:8px;white-space:nowrap}
.nav .dd-p a:hover{background:rgba(127,127,127,.12)}
.nav .dd-h{display:block;padding:10px 12px 4px;font:600 11px var(--m);text-transform:uppercase;letter-spacing:.08em;opacity:.6}
.nav .dd-p hr{border:0;border-top:1px solid var(--line2,#333);margin:6px 4px}
.mnav .mn-h{display:block;margin-top:18px;font:600 12px var(--m);text-transform:uppercase;letter-spacing:.08em;opacity:.6}
.mnav .mn-s{display:block;margin-top:8px;font:600 11px var(--m);opacity:.5}
/* theme toggle (chromia.com st-theme-seg) */
.st-theme-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;flex:none;border-radius:999px;border:2px solid currentColor}
.st-theme-opt{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;border:1.5px solid transparent;background:none;color:inherit;opacity:.7;cursor:pointer;padding:0}
.st-theme-opt:hover{opacity:1}
.st-theme-opt.is-on{opacity:1;background:#c98cf0;color:#1f1a23;border-color:currentColor}
.st-theme-seg.is-lg .st-theme-opt{width:40px;height:36px}
.mnav .st-theme-seg{margin:8px 0 6px}
@media (max-width:1040px){.hdr-r>.st-theme-seg{display:none}}
/* main's own social buttons (ported pages) already carry their marks */
.mx a:is([href^="https://x.com/"],[href^="https://discord.gg/"],[href^="https://t.me/"],[href*="youtube.com/"],[href^="https://gitlab.com/chromaway"],[href^="https://github.com/"])::before{content:none!important;display:none!important}