/* DEVLESS v3 launch site (owner: pixel, agency/projects/devless-m3). Source of truth: Methman's mockup v3 HTML export (GH #80),
   agency/inbox/devless-site-v3/methman-v3/mockup/devless-mockup-v3-html. Every colour, size, space and radius is a token below; the token
   names are the ones the loader kit (dvl-loaders.css) reads, so the kit picks them up without an alias edit. Dark only. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/m3/fonts/archivo-latin-v25.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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/m3/fonts/jetbrains-mono-latin-v24.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;
}

:root {
  /* surfaces and lines */
  --bg: #05070D;
  --inset: #070A14;
  --card: #0B1020;
  --line: #1A2236;
  --line-strong: #2A3550;
  --cyan-line-dark: #164A55;
  --violet-line-dark: #3B2A5C;
  /* text */
  --text: #E8F0FF;
  --text-2: #C9D5EA;
  --text-3: #9FB0CC;
  --text-4: #7A89A6;
  --white: #FFFFFF;
  /* roles */
  --cyan: #4FE3FF;
  --cyan-2: #7FEBFF;
  --cyan-3: #BFF6FF;
  --cyan-4: #E8FCFF;
  --on-cyan: #04121A;
  --violet: #B06CFF;
  --violet-2: #C99BFF;
  --violet-3: #E4CCFF;
  --violet-4: #EBDDFF;
  --amber: #FFB547;
  --on-amber: #1A0E00;
  --on-violet: #12061F;
  --asleep: #3A4560;
  --later: #5F6E8A;
  --text-count: #8393B0;    /* v3.6 tab counts: 6:1 on --bg at 10 px (aegis F2) */
  --error: #FF6B6B;
  --error-line: rgba(255, 107, 107, .45);
  --error-tint: rgba(255, 107, 107, .08);
  --cyan-tint: rgba(79, 227, 255, .12);
  --cyan-edge: rgba(79, 227, 255, .45);
  --cyan-glow: rgba(79, 227, 255, .8);
  --violet-tint: rgba(176, 108, 255, .16);
  --violet-edge: rgba(176, 108, 255, .5);
  --amber-tint: rgba(255, 181, 71, .12);
  --amber-edge: rgba(255, 181, 71, .45);
  --amber-wash: rgba(255, 181, 71, .06);
  --amber-frame: rgba(255, 181, 71, .35);
  --ag-mint: #7FE3B0;         /* v3.5 agent faces: Callouts and Social manager (DlToken, DlStudio, DlMyDevs) */
  --ag-blue: #8FA8FF;
  --dev-answer: #08141C;      /* the dev's answer box in Talk to the dev */
  --sample: #FFB3DA;          /* the mockup's SAMPLE label, kept only where the mockup labels sample data */
  --sample-edge: #FF7AC2;
  --sample-wash: rgba(255, 122, 194, .08);
  /* type */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px;
  --fs-19: 19px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-26: 26px; --fs-28: 28px;
  --track-label: .08em; --track-label-wide: .12em; --track-label-mid: .1em; --track-tight: .06em;
  /* shape and space */
  --radius-control: 4px;
  --radius-seg: 6px;
  --radius-inner: 8px;
  --radius-card: 12px;
  --radius-tile: 14px;
  --maxw: 1280px;
  --gutter: clamp(20px, 8.2vw, 32px);
  --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px; --s-14: 14px; --s-16: 16px; --s-18: 18px; --s-20: 20px;
  --s-22: 22px; --s-24: 24px; --s-26: 26px; --s-28: 28px; --s-32: 32px; --s-36: 36px; --s-40: 40px; --s-48: 48px; --s-56: 56px; --s-64: 64px; --s-72: 72px;
  --s-88: 88px; --s-96: 96px; --s-112: 112px; --s-120: 120px;
  --tap: 44px; --tap-lg: 56px;
  /* motion */
  --dur-fast: .2s;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dvl-sticky-top: 12px;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-24); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-display); font-size: var(--fs-16); line-height: 1.5; min-height: 100vh;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--cyan); color: var(--on-cyan); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--cyan); }
input::placeholder, textarea::placeholder { color: var(--text-4); opacity: 1; }
html { scrollbar-color: var(--line-strong) var(--bg); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s-12); top: -100px; z-index: 50; padding: var(--s-10) var(--s-16); background: var(--cyan); color: var(--on-cyan);
  font: 700 var(--fs-13)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; border-radius: var(--radius-control); text-decoration: none; }
.skip:focus { top: var(--s-12); }
[hidden] { display: none !important; }
.m3-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.v3-ribbon { position: relative; z-index: 2; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-wide); color: var(--text-4); text-transform: uppercase; margin: 0; }
.eyebrow--cyan { color: var(--cyan); }
.eyebrow--amber { color: var(--amber); }
.eyebrow--violet { color: var(--violet-2); }
.label { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-mid); color: var(--text-3); text-transform: uppercase; margin: 0; font-weight: 500; }
.label--11 { font-size: var(--fs-11); letter-spacing: var(--track-label-wide); color: var(--text-4); }
.cyan { color: var(--cyan); }
.violet { color: var(--violet-2); }
.amber { color: var(--amber); }
.muted { color: var(--text-3); }
.dim { color: var(--text-4); }

/* display type */
.d-hero { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(38px, 5.2vw, 76px); line-height: .95; letter-spacing: -.015em; text-transform: uppercase; }
.d-page { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(36px, 5vw, 72px); line-height: .95; text-transform: uppercase; }
.d-sec { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(30px, 3.6vw, 52px); line-height: .95; text-transform: uppercase; }
.d-card { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(24px, 2.6vw, 34px); line-height: 1; text-transform: uppercase; }
.d-step { margin: 0; font-weight: 800; font-stretch: 118%; font-size: var(--fs-28); text-transform: uppercase; line-height: 1.05; }
.d-28 { margin: 0; font-weight: 850; font-stretch: 125%; font-size: var(--fs-28); text-transform: uppercase; line-height: 1.05; }
.d-26 { margin: 0; font-weight: 850; font-stretch: 125%; font-size: var(--fs-26); text-transform: uppercase; line-height: 1.05; }
.d-38 { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(26px, 2.8vw, 38px); line-height: 1; text-transform: uppercase; }
.lede { margin: 0; font-size: var(--fs-19); line-height: 1.55; color: var(--text-2); max-width: 560px; }
.body-17 { margin: 0; font-size: var(--fs-17); line-height: 1.6; color: var(--text-3); }
.body-16 { margin: 0; font-size: var(--fs-16); line-height: 1.6; color: var(--text-3); }
.body-15 { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--text-3); }
.body-13 { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-4); }
.t-name { font-weight: 800; font-stretch: 112%; font-size: var(--fs-17); }
.t-h17 { font-weight: 700; font-stretch: 108%; font-size: var(--fs-17); line-height: 1.3; color: var(--text); }
.t-h20 { font-weight: 800; font-stretch: 112%; font-size: var(--fs-20); }

/* ---------- buttons and controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: var(--tap); padding: 0 var(--s-18); border-radius: var(--radius-control);
  font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.btn:hover { border-color: var(--text-4); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--cyan); border-color: var(--cyan); color: var(--on-cyan); font-weight: 700; }
.btn--primary:hover { background: var(--cyan-2); border-color: var(--cyan-2); }
.btn--outline-cyan { border-color: var(--cyan); color: var(--cyan); }
.btn--outline-cyan:hover { background: var(--cyan-tint); border-color: var(--cyan); }
.btn--ghost { color: var(--text-2); }
.btn--lg { min-height: var(--tap-lg); padding: 0 var(--s-28); font-size: var(--fs-14); }
.btn--lg.btn--ghost, .btn--lg:not(.btn--primary) { padding: 0 var(--s-26); }
.btn--md { min-height: 52px; padding: 0 var(--s-24); }
.btn--48 { min-height: 48px; padding: 0 var(--s-20); }
.btn--sm { font-size: var(--fs-12); padding: 0 var(--s-16); }
.btn:disabled:not([aria-busy="true"]), .btn[aria-disabled="true"] { background: var(--line); border-color: var(--line); color: var(--text-4); cursor: not-allowed; transform: none; }
.btn:disabled[aria-busy="true"] { cursor: progress; }
.tlink { color: var(--cyan); font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none;
  min-height: var(--tap); display: inline-flex; align-items: center; align-self: flex-start; text-underline-offset: 4px; }
.tlink:hover { text-decoration: underline; }
.tlink--12 { font-size: var(--fs-12); letter-spacing: var(--track-label-mid); }
.tlink--amber { color: var(--amber); }

.chip { display: inline-flex; align-items: center; gap: var(--s-6); font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label-mid); padding: 3px 7px;
  border-radius: var(--radius-control); white-space: nowrap; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--text-3); line-height: 1.4; }
.chip--11 { font-size: var(--fs-11); letter-spacing: var(--track-label); }
.chip--cyan { color: var(--cyan); border-color: var(--cyan-edge); }
.chip--amber { color: var(--amber); border-color: var(--amber-edge); }
.chip--violet { color: var(--violet-2); border-color: var(--violet-edge); }
.chip--sample { color: var(--sample); border: 1px dashed var(--sample-edge); padding: 2px 5px; }
.chip--signed { color: var(--on-cyan); background: var(--cyan); border-color: var(--cyan); font-size: var(--fs-11); padding: 4px 8px; }
.chip--refused { color: var(--amber); background: var(--amber-tint); border-color: transparent; font-size: var(--fs-11); padding: 4px 8px; }
.chip--paid { color: var(--text); background: var(--violet-line-dark); border-color: var(--violet-line-dark); font-size: var(--fs-11); padding: 4px 8px; }

/* option buttons (sort, range, filters, launch options) */
.opts { display: flex; flex-wrap: wrap; gap: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label); }
.opts--8 { gap: var(--s-8); }
.opt { min-height: 40px; padding: 0 var(--s-14); border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: transparent; color: var(--text-3);
  font: inherit; letter-spacing: normal; cursor: pointer; text-transform: uppercase; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.opt:hover { color: var(--text); border-color: var(--text-4); }
.opt[aria-pressed="true"], .opt[aria-checked="true"], .opt[aria-selected="true"] { border-color: var(--cyan); background: var(--cyan-tint); color: var(--cyan); }
.opt--44 { min-height: var(--tap); padding: 0 var(--s-16); font-size: var(--fs-13); letter-spacing: var(--track-tight); color: var(--text-2); }
.opt--36 { min-height: 36px; min-width: 48px; padding: 0 var(--s-8); }

.field { display: flex; flex-direction: column; gap: var(--s-8); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-mid); color: var(--text-3); text-transform: uppercase; }
.input { width: 100%; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-14); min-height: 48px; padding: 0 var(--s-14); background: var(--inset);
  border: 1px solid var(--line-strong); border-radius: var(--radius-control); color: var(--text); letter-spacing: 0; text-transform: none; }
.input--52 { min-height: 52px; padding: 0 var(--s-16); }
.input--56 { min-height: var(--tap-lg); padding: 0 var(--s-16); font-size: var(--fs-15); }
.input--sans { font-family: var(--font-display); font-size: var(--fs-17); }
.input--ticker { font-size: var(--fs-17); letter-spacing: var(--track-tight); text-transform: uppercase; }
.input--big { font-size: var(--fs-24); min-height: 60px; padding: 0 var(--s-16); }
textarea.input { font-family: var(--font-display); font-size: var(--fs-17); line-height: 1.55; padding: var(--s-14) var(--s-16); resize: vertical; min-height: 0; }
.input[aria-invalid="true"] { border-color: var(--amber); }
.field-row { display: flex; flex-wrap: wrap; gap: var(--s-8); }

/* cards and lists */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.p-16 { padding: var(--s-16); } .p-20 { padding: var(--s-20); } .p-22 { padding: var(--s-22); } .p-24 { padding: var(--s-24); } .p-28 { padding: var(--s-28); } .p-32 { padding: var(--s-32); }
.stack { display: flex; flex-direction: column; }
.g-4 { gap: var(--s-4); } .g-6 { gap: var(--s-6); } .g-8 { gap: var(--s-8); } .g-10 { gap: var(--s-10); } .g-12 { gap: var(--s-12); } .g-14 { gap: var(--s-14); } .g-16 { gap: var(--s-16); }
.g-18 { gap: var(--s-18); } .g-20 { gap: var(--s-20); } .g-22 { gap: var(--s-22); } .g-26 { gap: var(--s-26); }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-12); }
.ul-reset { margin: 0; padding: 0; list-style: none; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr)); gap: var(--gap, 14px); }
.dl-reset { margin: 0; }
.dl-reset dd { margin: 0; }

/* icon card list item ("What a dev can never do", "Built so you can check it", How "Never" and "Day one") */
.ilist { display: flex; flex-direction: column; gap: var(--s-10); margin: 0; padding: 0; list-style: none; }
.icard { background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-16) var(--s-18); display: flex; gap: var(--s-14); align-items: flex-start; }
.icard--center { align-items: center; padding: var(--s-14) var(--s-18); }
.icard__ico { flex: none; margin-top: 1px; width: 24px; height: 24px; }
.icard__ico path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icard__ico--amber { color: var(--amber); filter: drop-shadow(0 0 4px rgba(255, 181, 71, .55)); }
.icard__ico--cyan { color: var(--cyan); filter: drop-shadow(0 0 4px rgba(79, 227, 255, .6)); }
.icard__ico--violet { color: var(--violet-2); filter: drop-shadow(0 0 4px rgba(176, 108, 255, .6)); }
.icard__ico--later { color: var(--later); }
.icard__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.icard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-10); }
.icard__p { font-size: var(--fs-15); line-height: 1.5; color: var(--text-3); }
.ico { width: 24px; height: 24px; flex: none; }
.ico path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- chrome: status strip, header, footer ---------- */
/* v3.6 (DlHeader): a 248 px left column >= 1100 px, a 76 px icon rail 761 to 1099 px, the compact phone header <= 760 px.
   One header element serves all three; the page content and the footer sit in .m3-page to the right of the column. */
.m3-status { border-bottom: 1px solid var(--line); }
.m3-status__in { padding-top: var(--s-10); padding-bottom: var(--s-10); display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-12); align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label); color: var(--text-4); text-transform: uppercase; }
.m3-status__state { display: flex; align-items: center; gap: var(--s-8); color: var(--text-2); }
.m3-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--amber); flex: none; }
.m3-dot--on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.m3-head { position: relative; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.m3-head__bar { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-14) var(--gutter); }
.m3-logo { display: flex; align-items: center; gap: var(--s-12); text-decoration: none; color: var(--text); min-height: var(--tap); border-radius: var(--radius-inner); }
.m3-logo svg { filter: drop-shadow(0 0 6px var(--cyan-glow)); flex: none; }
.m3-logo__w { font-weight: 850; font-stretch: 125%; font-size: var(--fs-20); letter-spacing: .02em; }
.m3-head__ph { margin-left: auto; display: flex; align-items: center; gap: var(--s-6); }
.m3-icbtn { width: var(--tap); height: var(--tap); flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-control);
  border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; transition: border-color var(--dur-fast); }
.m3-icbtn:hover { border-color: var(--text-4); }
.m3-icbtn[aria-expanded="true"] { border-color: var(--cyan); }
.m3-icbtn__close, .m3-icbtn[aria-expanded="true"] .m3-icbtn__open { display: none; }
.m3-icbtn[aria-expanded="true"] .m3-icbtn__close { display: inline; }
.m3-head__go { min-height: var(--tap); padding: 0 var(--s-12); font-size: var(--fs-12); letter-spacing: var(--track-tight); white-space: nowrap; }
/* 360 px and narrower: logo, search, LAUNCH and the menu button do not fit side by side; LAUNCH A DEV stays in the menu */
@media (max-width: 360px) { .m3-head__go { display: none; } }
.m3-nav__ico { flex: none; }
.m3-nav__ico path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.m3-nav__ico--plus path { stroke-width: 2.2; }
.m3-head__menu { display: flex; flex-direction: column; gap: var(--s-12); }
.m3-nav { display: flex; flex-direction: column; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-label); }
.m3-nav a { display: flex; align-items: center; gap: var(--s-14); min-height: 46px; padding: 0 var(--s-12); border-radius: var(--radius-inner); text-decoration: none; color: var(--text-2);
  transition: background-color var(--dur-fast), color var(--dur-fast); }
.m3-nav a .m3-nav__ico { color: var(--text-3); }
.m3-nav a:hover { background: var(--card); color: var(--white); }
.m3-nav a[aria-current="page"] { background: rgba(79, 227, 255, .10); color: var(--white); box-shadow: inset 2px 0 0 var(--cyan); }
.m3-nav a[aria-current="page"] .m3-nav__ico { color: var(--cyan); }
.m3-search { display: flex; min-width: 0; position: relative; }
.m3-search .dvl-field { flex: 1 1 auto; display: flex; min-width: 0; }
.m3-search input { flex: 1 1 auto; min-width: 0; min-height: var(--tap); font-size: var(--fs-13); }
.m3-search__panel { position: absolute; left: 0; right: 0; top: calc(100% + var(--s-6)); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-inner);
  padding: var(--s-6); z-index: 20; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.m3-search__panel ul { margin: 0; padding: 0; list-style: none; }
.m3-search__panel a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); min-height: var(--tap); padding: 0 var(--s-10); border-radius: var(--radius-control);
  text-decoration: none; color: var(--text); font-size: var(--fs-15); }
.m3-search__panel a span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-search__panel a:hover, .m3-search__panel a:focus-visible { background: var(--inset); }
.m3-search__panel .tk { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-4); flex: none; }
.m3-head__launch { min-height: 48px; padding: 0 var(--s-16); letter-spacing: var(--track-label); }
.m3-head__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-14); }
.m3-head__status { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-12); border: 1px solid var(--line); border-radius: var(--radius-inner);
  font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label); color: var(--text-4); line-height: 1.5; text-transform: uppercase; }
.m3-wallet { font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--track-label); }
.m3-wallet[data-connected="1"] { border-color: var(--cyan-edge); color: var(--cyan); }
.m3-wallet .wallet-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* phone: the compact header; its menu opens under the bar (m3.js toggles data-open) */
@media (max-width: 760px) {
  .m3-head__menu { display: none; border-top: 1px solid var(--line); background: var(--inset); padding: var(--s-12) var(--gutter) var(--s-18); }
  .m3-head[data-open] .m3-head__menu { display: flex; }
  .m3-search input { min-height: 48px; font-size: var(--fs-14); }
  .m3-nav { font-size: var(--fs-14); gap: 0; }
  .m3-nav a { min-height: 48px; border-radius: 0; border-bottom: 1px solid var(--line); padding: 0 var(--s-4) 0 var(--s-12); box-shadow: inset 2px 0 0 transparent; }
  .m3-nav a[aria-current="page"] { background: transparent; box-shadow: inset 2px 0 0 var(--cyan); }
  .m3-head__launch, .m3-head__status { display: none; }
  .m3-head__foot { margin-top: 0; }
  .m3-wallet { align-self: flex-start; min-height: 48px; font-size: var(--fs-13); }
}
/* the column and the rail */
@media (min-width: 761px) {
  :root { --side-w: 248px; }
  .m3-body { padding-left: var(--side-w); }
  .m3-status, .m3-head__ph { display: none; }
  .m3-head { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w); border-bottom: 0; border-right: 1px solid var(--line); padding: var(--s-20) var(--s-16);
    display: flex; flex-direction: column; gap: var(--s-18); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .m3-head__bar { padding: 0; }
  .m3-logo { padding: 0 var(--s-8); }
  .m3-logo:hover { background: var(--card); }
  .m3-head__menu { flex: 1 1 auto; gap: var(--s-18); }
  .m3-search input { border-radius: var(--radius-seg); }
  .m3-wallet { min-height: var(--tap); border-radius: var(--radius-seg); padding: 0 var(--s-14); }
}
@media (min-width: 761px) and (max-width: 1099px) {
  :root { --side-w: 76px; }
  .m3-head { padding: var(--s-16) var(--s-10); }
  .m3-logo { justify-content: center; padding: 0; }
  .m3-logo__w, .m3-search, .m3-head__status { display: none; }
  .m3-nav__l { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .m3-nav a { justify-content: center; padding: 0; }
  .m3-head__launch, .m3-wallet { padding: 0; }
  .m3-wallet .wallet-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
}
.m3-foot { border-top: 1px solid var(--line); }
.m3-foot__in { padding-top: var(--s-40); padding-bottom: 44px; display: flex; flex-direction: column; gap: var(--s-28); font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: var(--track-label); color: var(--text-4); text-transform: uppercase; }
.m3-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-24); }
.m3-foot__brand { display: flex; flex-direction: column; gap: var(--s-8); max-width: 360px; }
.m3-foot__w { font-family: var(--font-display); font-weight: 850; font-stretch: 125%; font-size: var(--fs-22); letter-spacing: .02em; color: var(--text); }
.m3-foot__brand p { margin: 0; line-height: 1.6; }
.m3-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-24); max-width: 640px; }
.m3-foot nav a { color: var(--text-2); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.m3-foot nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.m3-foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-16); border-top: 1px solid var(--line); padding-top: var(--s-24); }
.m3-foot__bottom p { margin: 0; line-height: 1.7; letter-spacing: .04em; max-width: 820px; }
.m3-foot__contact a { color: var(--text-2); text-decoration: none; text-transform: none; letter-spacing: .02em; display: inline-flex; align-items: center; min-height: 24px; }
.m3-foot__contact a:hover { text-decoration: underline; }

/* wallet picker (overlay/v3/js/core.js draws it: dialog.sheet.wallet-sheet) */
dialog.wallet-sheet { background: var(--card); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: var(--s-24); width: min(420px, calc(100vw - 32px)); }
dialog.wallet-sheet::backdrop { background: rgba(2, 3, 8, .72); }
dialog.wallet-sheet h2 { margin: 0 0 var(--s-16); font-weight: 850; font-stretch: 125%; font-size: var(--fs-24); text-transform: uppercase; }
dialog.wallet-sheet h2:focus { outline: none; }
.wallet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-8); }
dialog.wallet-sheet .btn.sec { width: 100%; justify-content: flex-start; }
.wallet-msg { margin: var(--s-12) 0 0; font-size: var(--fs-14); color: var(--amber); min-height: 1em; }
dialog.wallet-sheet .ctas { margin: var(--s-16) 0 0; }
.btn.sec { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-16); border-radius: var(--radius-control); border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; }
.btn.sec:hover { border-color: var(--cyan); color: var(--cyan); }
.toast { position: fixed; left: 50%; bottom: var(--s-24); transform: translateX(-50%); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-inner);
  padding: var(--s-12) var(--s-16); font-size: var(--fs-14); z-index: 60; max-width: calc(100vw - 32px); }

/* ---------- page shells ---------- */
.page-main { padding-top: var(--s-48); padding-bottom: var(--s-96); display: flex; flex-direction: column; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-24); }
.page-head__t { display: flex; flex-direction: column; gap: var(--s-16); }
.page-head--rule { border-bottom: 1px solid var(--line); padding-bottom: var(--s-36); }
.page-head p.page-side { margin: 0; max-width: 440px; font-size: var(--fs-17); line-height: 1.6; color: var(--text-3); }
.sample-band { border-bottom: 1px dashed var(--sample-edge); background: var(--sample-wash); }
.sample-band p { margin: 0 auto; padding-top: var(--s-10); padding-bottom: var(--s-10); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-tight); color: var(--sample); }

/* ---------- home ---------- */
.home-hero { padding-top: var(--s-48); padding-bottom: var(--s-24); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-24) var(--s-40); }
.home-hero__copy { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-22); }
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.hive { flex: 2 1 380px; min-width: 0; position: relative; aspect-ratio: 640 / 440; max-width: 560px; }
.hive__nebula { position: absolute; inset: 10% 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(176, 108, 255, .28), rgba(79, 227, 255, .08) 60%, rgba(5, 7, 13, 0) 100%);
  animation: dlNebula 9s ease-in-out infinite; }
.hive svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hive__links { filter: drop-shadow(0 0 2px rgba(79, 227, 255, .6)); }
.hive__sigs { filter: drop-shadow(0 0 4px rgba(191, 246, 255, 1)); }
.hive__sigs line { stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100; animation: dlSignal var(--dur, 3s) linear var(--del, 0s) infinite; }
.hive__nodes { filter: drop-shadow(0 0 4px rgba(79, 227, 255, 1)); }
.hive__nodes circle { animation: dlTwinkle var(--dur, 3s) ease-in-out var(--del, 0s) infinite; }
.hive__core { filter: drop-shadow(0 0 12px rgba(176, 108, 255, 1)); }
.hive__koko { filter: drop-shadow(0 0 10px rgba(79, 227, 255, 1)); }
.breathe { transform-box: fill-box; transform-origin: center; animation: dlBreathe 3.2s ease-out infinite; }
.breathe--late { animation-delay: 1.6s; }
.spin24 { transform-box: fill-box; transform-origin: center; animation: dlSpin 24s linear infinite; }
.core-pulse { animation: dlCore 3.2s ease-in-out infinite; }
.hive__tag { position: absolute; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text); background: rgba(11, 16, 32, .85);
  border: 1px solid var(--violet-line-dark); padding: 3px 7px; border-radius: var(--radius-control); white-space: nowrap; }
.hive__tag--hive { left: 53.5%; top: 34%; }
.hive__tag--koko { left: auto; right: 0; top: 62%; border-color: var(--cyan-line-dark); } /* v3.6: right-aligned so it never passes the content edge next to the column */
@keyframes dlTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes dlSignal { 0% { stroke-dashoffset: 100; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dlBreathe { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.6); opacity: 0; } }
@keyframes dlSpin { to { transform: rotate(360deg); } }
@keyframes dlNebula { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes dlCore { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

.tokens { padding-top: var(--s-24); display: flex; flex-direction: column; gap: var(--s-18); }
.tokens__head { border-top: 1px solid var(--line); padding-top: var(--s-20); }
.trend-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-10); padding: var(--s-14) var(--s-16); border: 1px dashed var(--line-strong); border-radius: var(--radius-card);
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-mid); color: var(--text-4); text-transform: uppercase; }
.trend-empty .d { width: 8px; height: 8px; border-radius: 50%; background: var(--asleep); flex: none; }
.trend-empty .k { color: var(--text-3); }
.koko-card { background: var(--card); border: 1px solid var(--cyan-line-dark); border-radius: var(--radius-card); padding: var(--s-22); display: flex; flex-direction: column; gap: var(--s-16);
  text-decoration: none; color: var(--text); box-shadow: 0 0 40px rgba(79, 227, 255, .08); }
.koko-card__top { display: flex; align-items: center; gap: var(--s-14); }
.koko-card__top svg { filter: drop-shadow(0 0 8px rgba(79, 227, 255, .9)); flex: none; }
.koko-card__t { font-weight: 850; font-stretch: 125%; font-size: var(--fs-26); line-height: 1; }
.empty-card { border: 1px dashed var(--line-strong); border-radius: var(--radius-card); padding: var(--s-22); display: flex; flex-direction: column; justify-content: center; gap: var(--s-10); }
.empty-card__t { font-weight: 700; font-stretch: 112%; font-size: var(--fs-20); }
.trend { display: flex; flex-direction: column; gap: var(--s-12); }
.trend__h { display: inline-flex; align-items: center; gap: var(--s-10); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-wide); color: var(--text-3); text-transform: uppercase; margin: 0; font-weight: 400; }
.trend__h .d { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: dlTwinkle 1.8s ease-in-out infinite; }
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-16); display: flex; flex-direction: column; gap: var(--s-12);
  text-decoration: none; color: var(--text); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.tcard:hover { border-color: var(--line-strong); }
.tcard--trend { background: linear-gradient(180deg, rgba(79, 227, 255, .06), var(--card) 60%); border-color: var(--cyan-line-dark); }
.tcard--trend:hover { border-color: var(--cyan-edge); }
.tcard__top { display: flex; align-items: center; gap: var(--s-12); }
.tcard__rank { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--cyan); width: 22px; flex: none; }
.tcard__who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tcard__who .t-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard__tk { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard__fig { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-8); }
.tcard__mcap { font-family: var(--font-mono); font-size: var(--fs-17); font-variant-numeric: tabular-nums; }
.tcard__chg { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--cyan); font-variant-numeric: tabular-nums; }
.tcard__chg--down { color: var(--amber); }
.tcard__chg--none { color: var(--text-4); }
.tcard__last { display: flex; align-items: center; gap: var(--s-8); border-top: 1px solid var(--line); padding-top: var(--s-10); font-size: var(--fs-13); color: var(--text-3); }
.av { width: 44px; height: 44px; border-radius: 10px; flex: none; background: linear-gradient(135deg, var(--a, var(--cyan)), var(--b, var(--cyan-line-dark))); object-fit: cover; }
.av--56 { width: 56px; height: 56px; border-radius: 12px; }
.av--72 { width: 72px; height: 72px; border-radius: var(--radius-tile); }
.sdot { width: 8px; height: 8px; border-radius: 4px; flex: none; background: var(--asleep); }
.sdot--awake { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.tokens__all { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-wide); color: var(--text-3); padding-top: var(--s-6); text-transform: uppercase; margin: 0; font-weight: 400; }
.preview-note { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.preview-note a { color: var(--cyan); }

.sec { padding-top: var(--s-96); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-20); }
.sec-head p { margin: 0; max-width: 440px; font-size: var(--fs-17); line-height: 1.6; color: var(--text-3); }
.does { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-20); display: flex; flex-direction: column; gap: var(--s-10); }
.does__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-8); }
.does__ico { width: 26px; height: 26px; }
.does__ico path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.fees { display: flex; flex-wrap: wrap; gap: var(--s-40); align-items: center; }
.fees__copy { flex: 1 1 340px; display: flex; flex-direction: column; gap: var(--s-18); }
.fees dl { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.seg { position: relative; display: flex; gap: var(--s-16); align-items: baseline; padding: var(--s-14) 0 var(--s-14) var(--s-14); border-bottom: 1px solid var(--line);
  opacity: calc(.35 + var(--on, 1) * .65); transition: opacity var(--dur-fast); }
.seg__bar { position: absolute; left: 0; top: var(--s-14); bottom: var(--s-14); width: 2px; background: var(--c); transform-origin: top; transform: scaleY(var(--on, 1)); }
.seg dt { flex: 0 0 64px; font-variant-numeric: tabular-nums; font-weight: 900; font-stretch: 125%; font-size: var(--fs-28); color: var(--c); }
.seg dd { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.seg dd .k { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-mid); }
.seg dd .v { font-size: var(--fs-14); color: var(--text-3); }
.seg--dev { --c: var(--cyan); } .seg--hive { --c: var(--violet); } .seg--you { --c: var(--text); }
.fees__note { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-tight); color: var(--text-4); text-transform: uppercase; }
.split { flex: 1 1 420px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s-8); max-width: 420px; padding: var(--s-24); background: var(--inset);
  border: 1px solid var(--line); border-radius: var(--radius-card); margin: 0; list-style: none; }
.split span { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: var(--glow, none);
  opacity: calc(.1 + var(--on, 1) * .9); transform: scale(calc(.55 + var(--on, 1) * .45)); }
.split .dv { --c: var(--cyan); --glow: 0 0 6px rgba(79, 227, 255, .6); }
.split .hv { --c: var(--violet); --glow: 0 0 6px rgba(176, 108, 255, .6); }
.split .cr { --c: var(--text); }

.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--s-24); }
.verify-box { display: flex; flex-direction: column; gap: var(--s-8); }
.verify-res { min-height: 0; }
.home-cta { padding-top: var(--s-96); padding-bottom: var(--s-88); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-24); }
.home-cta__w { margin: 0; font-weight: 900; font-stretch: 125%; font-size: clamp(40px, 7vw, 104px); line-height: .88; letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--white) 0%, #8FA3C8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-cta__r { display: flex; flex-direction: column; gap: var(--s-14); align-items: flex-start; }

/* ---------- launch ---------- */
.launch-main { gap: var(--s-36); }
.launch-grid { display: flex; flex-wrap: wrap; gap: var(--s-32); align-items: flex-start; }
.steps { flex: 1 1 220px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.steps li { display: flex; align-items: center; gap: var(--s-14); padding: var(--s-14) 0; border-bottom: 1px solid var(--line); color: var(--text-4); }
.steps .n { font-family: var(--font-mono); font-size: var(--fs-12); width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control); border: 1px solid var(--line-strong); }
.steps .l { font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-label-mid); }
.steps .h { font-size: var(--fs-13); color: var(--text-4); }
.steps li[data-s="past"] { color: var(--cyan); }
.steps li[data-s="past"] .n { border-color: rgba(79, 227, 255, .5); }
.steps li[aria-current="step"] { color: var(--white); }
.steps li[aria-current="step"] .n { background: var(--cyan); color: var(--on-cyan); border-color: var(--cyan); }
.launch-col { flex: 4 1 600px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-16); }
/* A3 (CLS): while the config loads, the ready block keeps its place invisibly and the skeleton sits on top, so nothing below moves when it settles */
.launch-col.dvl-section[data-state="loading"] { position: relative; }
.launch-col.dvl-section[data-state="loading"] > .dvl-when-ready { display: flex !important; visibility: hidden; }
.launch-col.dvl-section[data-state="loading"] > .dvl-when-loading { position: absolute; inset: 0 0 auto; }
.lcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-32); display: flex; flex-direction: column; gap: var(--s-20); }
.lcard--26 { gap: var(--s-26); } .lcard--22 { gap: var(--s-22); }
.lcard--done { border-color: var(--cyan-line-dark); background: var(--inset); box-shadow: 0 0 60px rgba(79, 227, 255, .08); gap: var(--s-18); }
.lcard:focus { outline: none; }
.lcard h2:focus { outline: none; }
.lcard .dvl-skel { max-width: 100%; }
.pitches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--s-12); }
.pitch { display: flex; flex-direction: column; gap: var(--s-8); align-items: flex-start; padding: var(--s-12); border-radius: var(--radius-inner); background: var(--inset);
  border: 1px solid var(--line-strong); cursor: pointer; text-align: left; color: var(--text); font: inherit; width: 100%; }
.pitch[aria-pressed="true"] { border: 1.5px solid var(--cyan); }
.pitch__art { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius-inner); background: linear-gradient(135deg, var(--a, var(--cyan)), var(--b, var(--cyan-line-dark))); object-fit: cover; }
.pitch__n { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: var(--fs-17); }
.pitch__t { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-4); }
.pitch__a { font-size: var(--fs-13); line-height: 1.45; color: var(--text-3); }
.drop { border: 1px dashed var(--line-strong); border-radius: var(--radius-inner); padding: var(--s-18); display: flex; align-items: center; gap: var(--s-14); cursor: pointer; position: relative; }
.drop:focus-within { border-color: var(--cyan); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop__img { width: 48px; height: 48px; border-radius: var(--radius-inner); object-fit: cover; flex: none; }
.lend { border: 1px solid var(--line); border-radius: var(--radius-inner); padding: var(--s-18); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-12); background: var(--inset); }
.lend__t { display: flex; flex-direction: column; gap: var(--s-4); max-width: 520px; }
.bars { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: var(--s-6); background: var(--line); }
.bars span { display: block; height: 100%; transition: flex-grow var(--dur-fast) var(--ease-out); }
.bars .b1 { background: var(--cyan); } .bars .b2 { background: var(--violet); }
.fixed { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s-10); }
.fixed div { border: 1px solid var(--line); border-radius: var(--radius-inner); padding: var(--s-14); background: var(--inset); display: flex; flex-direction: column; gap: var(--s-4); }
.fixed b { font-weight: 800; font-stretch: 118%; font-size: var(--fs-24); }
.fixed span { font-size: var(--fs-13); color: var(--text-3); }
.cfg { margin: 0; border-top: 1px solid var(--line); }
.cfg div { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-24); padding: 15px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cfg dt { flex: 0 0 170px; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-mid); color: var(--text-4); }
.cfg dd { margin: 0; flex: 1 1 300px; font-size: var(--fs-16); line-height: 1.5; overflow-wrap: anywhere; }
.feeline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-8); padding: var(--s-14) var(--s-16); background: var(--inset); border-radius: var(--radius-seg);
  font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-tight); }
.agree { display: flex; gap: var(--s-14); align-items: flex-start; font-size: var(--fs-16); line-height: 1.5; cursor: pointer; }
.agree input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--cyan); }
.agree a { color: var(--cyan); }
.closed { border: 1px solid var(--amber-frame); background: var(--amber-wash); border-radius: var(--radius-card); padding: var(--s-16) var(--s-20); display: flex; gap: var(--s-12); align-items: flex-start; }
.closed svg { width: 18px; height: 18px; color: var(--amber); flex: none; margin-top: 2px; }
.closed p { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--text-2); }
.closed b { color: var(--amber); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--track-label-mid); display: block; margin-bottom: var(--s-4); }
.quota { align-self: flex-start; white-space: normal; max-width: 100%; }

/* ---------- token page ---------- */
.tok-main { padding-top: var(--s-28); gap: var(--s-28); }
.tok-head { display: flex; flex-wrap: wrap; gap: var(--s-20) var(--s-32); align-items: center; justify-content: space-between; }
.tok-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-18); }
.tok-h1 { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(34px, 4.4vw, 60px); line-height: .9; text-transform: uppercase; overflow-wrap: anywhere; }
.tok-h1 .tk { font-family: var(--font-mono); font-weight: 500; font-stretch: 100%; font-size: .36em; color: var(--text-3); }
.tok-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6) var(--s-16); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-tight); color: var(--text-3); text-transform: uppercase; }
.tok-links a { color: var(--cyan); text-decoration: none; min-height: 32px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
.tok-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ca { display: inline-flex; align-items: center; gap: var(--s-6); min-height: 32px; padding: 0 var(--s-8); border-radius: var(--radius-control); border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); font: inherit; letter-spacing: inherit; cursor: pointer; }
.ca:hover { border-color: var(--cyan); }
.ca svg { width: 14px; height: 14px; fill: none; stroke: var(--text-3); stroke-width: 1.8; }
.stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: var(--s-20); flex: 1 1 520px; max-width: 640px; min-width: 0; }
.stats div { display: flex; flex-direction: column; gap: var(--s-4); }
.stats dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-wide); color: var(--text-4); }
.stats dd { margin: 0; font-weight: 800; font-stretch: 118%; font-size: var(--fs-26); font-variant-numeric: tabular-nums; }
.stats dd.na { color: var(--text-4); }
.tok-row { display: flex; flex-wrap: wrap; gap: var(--s-20); align-items: flex-start; }
.chart-card { flex: 999 1 600px; min-width: 0; }
.chart { width: 100%; height: 320px; display: block; }
.chart polyline { fill: none; stroke: var(--cyan); stroke-width: 2.2; filter: drop-shadow(0 0 6px var(--cyan-glow)); vector-effect: non-scaling-stroke; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .rings { filter: drop-shadow(0 0 8px rgba(176, 108, 255, 1)); }
.chart .rings circle { fill: var(--bg); stroke: var(--violet-2); stroke-width: 2; }
.trade { flex: 1 1 362px; min-width: 0; }
.side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); background: var(--inset); padding: var(--s-4); border-radius: var(--radius-seg); }
.side button { min-height: var(--tap); border-radius: var(--radius-control); border: 0; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-13); letter-spacing: var(--track-label-mid);
  cursor: pointer; background: transparent; color: var(--text-3); }
.side button[aria-checked="true"][data-v="buy"] { background: var(--cyan); color: var(--on-cyan); }
.side button[aria-checked="true"][data-v="sell"] { background: var(--amber); color: var(--on-amber); }
.qrows { display: flex; flex-direction: column; gap: var(--s-6); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-tight); color: var(--text-3); margin: 0; }
.qrows div { display: flex; justify-content: space-between; gap: var(--s-8); }
.qrows dd { margin: 0; }
.slot { min-height: 0; display: flex; flex-direction: column; gap: var(--s-12); }
.slot .skel { height: 52px; border-radius: var(--radius-control); background: var(--line); }
.slot .plate, .slot .plate-help { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--text-3); }
.slot .slot-jup { min-height: 470px; }
.slot .btn.pri { min-height: var(--tap-lg); background: var(--cyan); color: var(--on-cyan); border: 0; border-radius: var(--radius-control); font: 700 var(--fs-14)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; }
.dev-sec { display: flex; flex-direction: column; gap: var(--s-20); padding-top: var(--s-28); border-top: 1px solid var(--line); }
.dev-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-16); }
.dev-head__id { display: flex; align-items: center; gap: var(--s-16); }
.dev-h2 { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(28px, 3vw, 42px); line-height: .95; text-transform: uppercase; }
.dvl-dev { --size: 64px; }
.devstate { display: inline-flex; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label); color: var(--cyan); text-transform: uppercase; }
.devstate--asleep { color: var(--text-3); }
.devstate--unknown { color: var(--text-4); }
.feed-col { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-14); }
.move { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-18); display: flex; flex-direction: column; gap: var(--s-12); }
.move__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-14); }
.move__t { font-weight: 700; font-stretch: 108%; font-size: var(--fs-17); }
.move__time { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-tight); color: var(--text-4); margin-left: auto; text-transform: uppercase; }
.move dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-10) var(--s-24); font-size: var(--fs-15); line-height: 1.5; }
.move dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-wide); }
.move dd { margin: var(--s-4) 0 0; color: var(--text-2); overflow-wrap: anywhere; }
.move .why { color: var(--violet-2); } .move .rule { color: var(--amber); } .move .res { color: var(--cyan); }
.move .ref { font-family: var(--font-mono); color: var(--cyan); }
.side-col { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-14); }
.mini { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-20); display: flex; flex-direction: column; gap: var(--s-14); }
.mini--10 { gap: var(--s-10); }
.mini--promise { border-color: var(--violet-line-dark); }
.mini--verify { border-color: var(--cyan-line-dark); background: var(--inset); }
.mini h3 { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--track-label-wide); color: var(--text-3); text-transform: uppercase; }
.mini--promise h3 { color: var(--violet-2); }
.mini--verify h3 { color: var(--cyan); }
.wallet-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-14); }
.wallet-grid dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--text-4); }
.wallet-grid dd { margin: var(--s-4) 0 0; font-weight: 800; font-stretch: 112%; font-size: var(--fs-22); font-variant-numeric: tabular-nums; }
.wallet-grid dd.na { font-family: var(--font-mono); font-weight: 400; font-stretch: 100%; font-size: var(--fs-12); letter-spacing: var(--track-tight); color: var(--text-4); padding-top: var(--s-6); }
.meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter span { display: block; height: 100%; width: var(--w, 0%); background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.meter--violet span { background: var(--violet); box-shadow: none; }
.meter-note { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-tight); color: var(--text-4); text-transform: uppercase; }
.rules { margin: 0; display: flex; flex-direction: column; gap: var(--s-8); font-size: var(--fs-14); }
.rules div { display: flex; justify-content: space-between; gap: var(--s-12); }
.rules dt { color: var(--text-3); }
.rules dd { margin: 0; text-align: right; }
.rules dd.amber { color: var(--amber); }
.vlist { margin: 0; display: flex; flex-direction: column; gap: var(--s-8); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .04em; }
.vlist div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4) var(--s-12); }
.vlist dt { color: var(--text-3); }
.vlist dd { margin: 0; color: var(--cyan); }
.vlist dd a { color: var(--cyan); }
.vlist dd.pending { color: var(--text-3); text-transform: uppercase; }
.promise { margin: 0; font-size: var(--fs-16); line-height: 1.5; }

/* ---------- my devs ---------- */
.earn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.earn > div { padding: var(--s-26) var(--s-24) var(--s-26) 0; display: flex; flex-direction: column; gap: var(--s-8); }
.earn__big { font-weight: 900; font-stretch: 125%; font-size: clamp(40px, 4.6vw, 64px); line-height: .9; font-variant-numeric: tabular-nums; }
.earn__big small { font-size: .4em; color: var(--text-3); }
.earn__big.na { font-family: var(--font-mono); font-weight: 400; font-stretch: 100%; font-size: var(--fs-13); line-height: 1.5; color: var(--text-4); letter-spacing: var(--track-tight); text-transform: uppercase; }
.mycard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-24); display: flex; flex-direction: column; gap: var(--s-18); }
.mycard__top { display: flex; align-items: center; gap: var(--s-16); }
.mycard__n { font-weight: 850; font-stretch: 125%; font-size: var(--fs-24); text-transform: uppercase; line-height: 1; }
.mycard__n .tk { font-family: var(--font-mono); font-weight: 400; font-stretch: 100%; font-size: var(--fs-13); color: var(--text-4); }
.mycard dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); border-top: 1px solid var(--line); padding-top: var(--s-16); }
.mycard dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-wide); color: var(--text-4); }
.mycard dd { margin: var(--s-4) 0 0; font-weight: 800; font-stretch: 112%; font-size: var(--fs-20); font-variant-numeric: tabular-nums; }
.mycard dd.na { font-family: var(--font-mono); font-weight: 400; font-stretch: 100%; font-size: var(--fs-12); color: var(--text-4); }
.mycard__rules { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .04em; color: var(--text-3); line-height: 1.6; text-transform: uppercase; }
.mycard__x { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-12); background: var(--inset); border-radius: var(--radius-inner); padding: var(--s-14) var(--s-16); }
.pitchrow { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s-16) 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); }
.pitchrow + .pitchrow { border-top: 0; }
.empty-line { margin: 0; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-tight); color: var(--text-4); text-transform: uppercase; line-height: 1.6; }

/* ---------- how it works ---------- */
.how-main { gap: var(--s-56); }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: var(--s-40) var(--s-56); }
.how-grid h2 { margin: 0; font-weight: 800; font-stretch: 118%; font-size: var(--fs-26); text-transform: uppercase; line-height: 1.05; }
.how-grid p:not(.eyebrow) { margin: 0; font-size: var(--fs-16); line-height: 1.65; color: var(--text-2); }
.how-verify { display: flex; flex-wrap: wrap; gap: var(--s-32); align-items: flex-start; border-top: 1px solid var(--line); padding-top: var(--s-40); }
.how-verify__t { flex: 1 1 340px; display: flex; flex-direction: column; gap: var(--s-12); }
.how-verify__f { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-8); }
.addr { margin: 0; border-top: 1px solid var(--line); }
.addr div { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-24); padding: var(--s-14) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.addr dt { flex: 0 0 240px; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-mid); color: var(--text-3); }
.addr dd { margin: 0; flex: 1 1 300px; font-family: var(--font-mono); font-size: var(--fs-14); word-break: break-all; }
.addr dd.pending { color: var(--text-3); word-break: normal; text-transform: uppercase; font-size: var(--fs-13); letter-spacing: var(--track-tight); }
.addr dd a { color: var(--text); text-decoration: none; }
.addr dd a:hover { color: var(--cyan); }
.risk-box { border: 1px solid var(--amber-frame); background: var(--amber-wash); border-radius: var(--radius-card); padding: var(--s-28); display: flex; flex-direction: column; gap: var(--s-12); }
.risk-box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-12); font-size: var(--fs-16); line-height: 1.55; }
.risk-box li { display: flex; gap: var(--s-12); align-items: flex-start; }
.risk-box li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--amber); }
.risk-box li svg path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- roadmap ---------- */
.rm-root { position: relative; overflow-x: clip; }
.rm-main { padding-bottom: var(--s-120); gap: var(--s-72); }
.rm-h1 { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(40px, 6.4vw, 104px); line-height: .92; text-transform: uppercase; }
.rm-h1 span { display: block; }
.rm-h1 .v { color: var(--violet); text-shadow: 0 0 40px rgba(176, 108, 255, .45); }
.rm-in { animation: rmIn 1.1s var(--ease-out) both; }
.rm-in--2 { animation-delay: .18s; } .rm-in--3 { animation-delay: .36s; }
@keyframes rmIn { from { opacity: 0; transform: translateY(44px); letter-spacing: .09em; filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
.rm-cue { display: inline-flex; align-items: center; gap: var(--s-12); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: .14em; color: var(--text-4); text-transform: uppercase; }
.rm-cue__l { position: relative; width: 1px; height: 32px; background: var(--line); overflow: hidden; }
.rm-cue__l span { position: absolute; inset: 0; background: var(--cyan); animation: rmCue 2.2s ease-in-out infinite; }
@keyframes rmCue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.rm-path { --pad: clamp(44px, 7vw, 104px); --rail: clamp(14px, 2.4vw, 34px); position: relative; padding-left: var(--pad); display: flex; flex-direction: column; gap: var(--s-112); }
.rm-rail { position: absolute; left: var(--rail); top: 18px; bottom: 40px; width: 2px; background: var(--line); }
.rm-fill { position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--fill, 1) * 100%); background: linear-gradient(var(--cyan), var(--violet) 55%, var(--later)); box-shadow: 0 0 14px rgba(79, 227, 255, .7); }
.rm-fill span { position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--text); box-shadow: 0 0 16px 5px rgba(79, 227, 255, .85); }
.rm-stage { position: relative; display: flex; flex-wrap: wrap; gap: var(--s-32) var(--s-48); align-items: flex-start; }
.rm-node { position: absolute; left: calc(var(--rail) - var(--pad) + 1px - 20px); top: 6px; width: 40px; height: 40px; display: block; background: var(--bg); border-radius: 50%; }
.rm-node svg { display: block; overflow: visible; }
.rm-node .halo { fill: none; stroke: var(--c); stroke-width: 1.2; opacity: var(--lit, 1); transform-box: fill-box; transform-origin: center; animation: dlBreathe 2.8s ease-out infinite; }
.rm-node .ring { fill: var(--bg); stroke: var(--c); stroke-width: 1.4; stroke-opacity: calc(.3 + var(--lit, 1) * .7); }
.rm-node .core { fill: var(--c); opacity: calc(.25 + var(--lit, 1) * .75); filter: drop-shadow(0 0 6px var(--c)); }
.rm-copy { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-14); }
.rm-num { display: block; font-weight: 850; font-stretch: 125%; font-size: clamp(80px, 10vw, 150px); line-height: .8; color: transparent; -webkit-text-stroke: 1.2px var(--c);
  opacity: calc(.2 + var(--p, 1) * .6); transform: translateY(calc((1 - var(--p, 1)) * 70px)); }
.rm-title { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(30px, 3.6vw, 52px); line-height: .95; text-transform: uppercase; color: var(--tc);
  opacity: var(--p, 1); transform: translateX(calc((1 - var(--p, 1)) * -56px)); letter-spacing: calc((1 - var(--p, 1)) * .14em); }
.rm-items { flex: 2 1 560px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-14); }
.rm-item { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-20); display: flex; flex-direction: column; gap: var(--s-10);
  opacity: var(--p, 1); transform: translateY(calc((1 - var(--p, 1)) * 36px)) scale(calc(.96 + var(--p, 1) * .04)); }
.rm-item__edge { position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--p, 1) * 100%); background: var(--c); box-shadow: 0 0 10px var(--c); }
.rm-item svg { width: 26px; height: 26px; color: var(--c); }
.rm-item svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rm-stage--glow .rm-item svg { filter: drop-shadow(0 0 4px var(--c)); }
.rm-item h3 { margin: 0; font-weight: 700; font-stretch: 112%; font-size: var(--fs-19); line-height: 1.25; }
.rm-item p { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--text-3); }
.rm-s1 { --c: var(--cyan); --tc: var(--cyan); } .rm-s2 { --c: var(--violet); --tc: var(--violet-2); } .rm-s3 { --c: var(--text-3); --tc: var(--text); } .rm-s4 { --c: var(--later); --tc: var(--text-3); }
.cut { border: 1px solid var(--amber-frame); background: var(--amber-wash); border-radius: var(--radius-card); padding: var(--s-28); display: flex; flex-direction: column; gap: var(--s-18); }
.cut h2 { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(26px, 3vw, 40px); line-height: 1; text-transform: uppercase; color: var(--amber); }
.cut ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-10); }
.cut li { position: relative; display: inline-flex; align-items: center; gap: var(--s-10); min-height: var(--tap); padding: 0 var(--s-16); border: 1px solid rgba(255, 181, 71, .4); border-radius: 999px;
  font-size: var(--fs-15); color: var(--text); opacity: calc(1 - var(--p, 1) * .3); }
.cut li svg { width: 14px; height: 14px; flex: none; }
.cut li svg path { fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round; }
.cut .t { position: relative; }
.cut .t i { position: absolute; left: -2px; top: 52%; height: 1.5px; width: calc((100% + 4px) * var(--p, 1)); background: var(--amber); }

/* ---------- terms ---------- */
.terms-main { padding-top: var(--s-56); gap: var(--s-40); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-4); border: 1px solid var(--line); padding: var(--s-4); border-radius: var(--radius-seg); }
.tabs a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-18); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: var(--track-label-mid); text-decoration: none; color: var(--text-3); }
.tabs a:hover { color: var(--text); }
.tabs a[aria-selected="true"] { background: var(--cyan); color: var(--on-cyan); font-weight: 700; }
.draft-note { border: 1px solid var(--line-strong); border-radius: var(--radius-inner); padding: var(--s-14) var(--s-18); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-tight);
  line-height: 1.6; color: var(--text-3); text-transform: uppercase; margin: 0; }
.doc { display: flex; flex-wrap: wrap; gap: var(--s-56); align-items: flex-start; }
.doc__t { flex: 1 1 240px; display: flex; flex-direction: column; gap: var(--s-12); }
.doc__t h2 { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(28px, 3vw, 40px); line-height: 1; text-transform: uppercase; }
.doc__t p { margin: 0; font-size: var(--fs-15); line-height: 1.6; color: var(--text-3); }
.doc ol.secs { flex: 3 1 600px; min-width: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.secs > li { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); padding: var(--s-22) 0; border-bottom: 1px solid var(--line); }
.secs .n { flex: 0 0 32px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-4); padding-top: 3px; }
.secs .b { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-8); }
.secs h3 { margin: 0; font-weight: 700; font-stretch: 112%; font-size: var(--fs-20); }
.secs p { margin: 0; font-size: var(--fs-16); line-height: 1.65; color: var(--text-2); }
.secs ul { margin: 0; padding-left: var(--s-18); display: flex; flex-direction: column; gap: var(--s-8); font-size: var(--fs-15); line-height: 1.6; color: var(--text-2); }
.secs ul b { color: var(--text); font-weight: 600; }
.secs a { color: var(--cyan); }
.ph { color: var(--amber); font-family: var(--font-mono); font-size: .9em; }

/* ==========================================================================
   v3.1 (Methman mockup v3.1, GH #80): nav, footer, home ways in, launch team, token posts and media, the Hive page
   ========================================================================== */
.g-24 { gap: var(--s-24); }
.btn--violet { background: var(--violet); border-color: var(--violet); color: var(--on-violet); font-weight: 700; }
.btn--violet:hover { background: var(--violet-2); border-color: var(--violet-2); }
/* footer */
.m3-foot__brand a.m3-foot__hive { color: var(--violet-2); text-decoration: none; display: inline-flex; min-height: 24px; align-items: center; }
.m3-foot__brand a.m3-foot__hive:hover { text-decoration: underline; text-underline-offset: 4px; }
/* home: the Hive label in the network graphic and the 20% row are links */
.hive__tag--link { text-decoration: none; border-color: var(--violet); min-height: 24px; display: inline-flex; align-items: center; gap: var(--s-4); }
.hive__tag--link:hover { background: var(--violet-tint); }
.seg dd a.k--hive { color: var(--violet-2); text-decoration: none; align-self: flex-start; min-height: 24px; display: inline-flex; align-items: center; }
.seg dd a.k--hive:hover { text-decoration: underline; text-underline-offset: 4px; }
/* home: More ways in (CTO takeover + free Studio) */
.ways { padding-top: var(--s-56); display: flex; flex-wrap: wrap; gap: var(--s-16); align-items: stretch; }
.ways__cto { flex: 3 1 560px; min-width: 0; position: relative; overflow: hidden; border: 1px solid var(--violet-line-dark); border-radius: var(--radius-card); padding: var(--s-28);
  background: radial-gradient(circle at 88% 30%, rgba(176, 108, 255, .22), transparent 45%), var(--card); display: flex; flex-wrap: wrap; gap: var(--s-24); align-items: center; }
.ways__cto-t { flex: 999 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-14); }
.ways__cto-t .body-16, .ways__studio .body-16 { color: var(--text-2); max-width: 520px; }
.ways__cto-t .btn, .ways__go { align-self: flex-start; }
.d-ways { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(26px, 2.6vw, 38px); line-height: .95; text-transform: uppercase; }
.d-ways--s { font-size: clamp(24px, 2.4vw, 34px); }
.ways__art { flex: 1 1 120px; width: 100%; max-width: 200px; height: auto; }
.ways__art .o { fill: none; stroke: var(--later); stroke-width: 1.6; stroke-dasharray: 4 6; }
.ways__art circle.o { stroke-dasharray: 3 4; }
.ways__art .n { stroke: var(--cyan); stroke-width: 1.8; filter: drop-shadow(0 0 4px var(--cyan-glow)); }
.ways__art .c { fill: var(--bg); stroke: var(--text); stroke-width: 1.6; }
.ways__art .nd { fill: var(--cyan); filter: drop-shadow(0 0 10px var(--cyan)); }
.ways__art .ni { fill: var(--cyan-4); }
.ways__art text { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-anchor: middle; }
.ways__art .lo { fill: var(--text-4); } .ways__art .ln { fill: var(--cyan); } .ways__art .ct { fill: var(--text); font-size: 10px; letter-spacing: .08em; }
.ways__studio { flex: 2 1 360px; min-width: 0; background: var(--card); border: 1px solid var(--cyan-line-dark); border-radius: var(--radius-card); padding: var(--s-28);
  display: flex; flex-direction: column; gap: var(--s-14); }
.ways__note { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--text-4); }
.ways__note a { color: var(--text-3); }
.ways__go { margin-top: auto; }
/* your launch team strip (/launch step 1, My devs) */
.team__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-6); }
.team__r { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 32px; padding: 0 var(--s-10); border-radius: var(--radius-control); border: 1px dashed var(--line-strong);
  color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); }
.team__d { width: 6px; height: 6px; border-radius: 3px; background: var(--asleep); flex: none; }
.team__w { color: var(--text-4); } /* LATER label: 5.3:1 on --card (aegis v3.4 A8); --later stays for lines and icons */
.team__r--on { border: 1px solid var(--cyan-edge); color: var(--text); }
.team__r--on .team__d { background: var(--cyan); }
.team__r--on .team__w { color: var(--cyan); }
.team__note { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--text-4); }
.team__note a { color: var(--text-3); display: inline-flex; min-height: 24px; align-items: center; }
/* token page: per-token links and the Verify box */
.vlist dd.vlist__v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-10); }
.vlist dd .vlist__scan { color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; min-height: 24px; display: inline-flex; align-items: center; }
.vlist dd .vlist__scan:hover { color: var(--cyan); }
.vlist__hive a { color: var(--violet-2); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.vlist__hive a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* token page: What it puts out */
.out { display: flex; flex-direction: column; gap: var(--s-20); padding-top: var(--s-28); border-top: 1px solid var(--line); }
.out__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-16); }
.d-out { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(28px, 3vw, 42px); line-height: .95; text-transform: uppercase; }
.out__lede { max-width: 560px; }
.out__views a { min-height: 24px; display: inline-flex; align-items: center; }
.out__views a[aria-current] { color: var(--text); text-decoration: none; }
.out__row { display: flex; flex-wrap: wrap; gap: var(--s-20); align-items: flex-start; }
.out__feed { flex: 999 1 600px; }
.out__media { flex: 1 1 380px; }
.out__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8) var(--s-12); }
.out__ht { margin: 0; display: inline-flex; align-items: center; gap: var(--s-10); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--track-label-wide); color: var(--text-3); }
.out__ico { width: 16px; height: 16px; flex: none; }
.out__ico path { fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.out__sub { margin: 0; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.out__empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-card); padding: var(--s-28) var(--s-24); display: flex; flex-direction: column; gap: var(--s-10); }
.out__empty-t { margin: 0; font-weight: 800; font-stretch: 112%; font-size: var(--fs-20); }
.out__empty .body-15 { max-width: 560px; }
.posts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-10); }
.post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-18); display: flex; gap: var(--s-14); }
.post__av { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 0 6px rgba(79, 227, 255, .6)); }
.post__av .a { fill: var(--inset); stroke: var(--line-strong); } .post__av .b { fill: var(--cyan); } .post__av .c { fill: var(--cyan-4); } .post__av .d { fill: var(--cyan-2); }
.post__av-skel { --w: 40px; --h: 40px; --r: 20px; flex: none; }
.post__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-10); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-10); }
.post__name { font-weight: 700; font-stretch: 108%; font-size: var(--fs-16); }
.post__handle { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-4); }
.post__time { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-tight); color: var(--text-4); }
.post__text { margin: 0; font-size: var(--fs-16); line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.post__ctx { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.post__reply { border-left: 2px solid var(--line-strong); padding: 2px 0 2px var(--s-12); display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--fs-14); line-height: 1.5; color: var(--text-3); }
.post__quote { border: 1px solid var(--line-strong); border-radius: 10px; padding: var(--s-12) var(--s-14); display: flex; flex-direction: column; gap: var(--s-4); background: var(--inset);
  font-size: var(--fs-14); line-height: 1.5; color: var(--text-2); }
.post__sm { aspect-ratio: 16 / 7; border-radius: 10px; border: 1px solid var(--line); display: flex; align-items: flex-end; padding: var(--s-10);
  background: radial-gradient(circle at 30% 25%, rgba(232, 252, 255, .35), transparent 40%), linear-gradient(135deg, var(--a), var(--b)); }
.post__sm span, .mtile__net, .mtile__len { font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label-mid); color: var(--text); background: rgba(5, 7, 13, .75); padding: 3px 6px; border-radius: var(--radius-control); }
.post__sm span { font-size: var(--fs-11); padding: 4px 8px; }
.post__imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.post__imgs--1 { grid-template-columns: 1fr; }
.post__imgs img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-inner); border: 1px solid var(--line); background: var(--inset); }
.post__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6) var(--s-16); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); }
.post__about { color: var(--violet-2); }
.post__x { margin-left: auto; color: var(--cyan); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; gap: var(--s-6); }
.post__x:hover { text-decoration: underline; text-underline-offset: 4px; }
.post__x svg { width: 12px; height: 12px; }
.post__x path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post--skel .post__body { gap: var(--s-10); }
.posts-more { position: relative; display: flex; flex-direction: column; padding-top: var(--s-16); }
.posts-more .post { opacity: .6; }
.posts-more__pill { position: absolute; top: 0; left: 50%; transform: translate(-50%, -30%); z-index: 1; }
.posts-more__err { margin: 0; }
.posts-older { align-self: center; }
.posts-end { margin: 0; align-self: center; text-align: center; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--text-4); }
.mgrid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10); }
.mgrid__skel { --h: auto; --r: 10px; aspect-ratio: 3 / 4; }
.mtile { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.mtile__b { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; border: 1px solid var(--line); padding: 0; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: var(--text);
  background: radial-gradient(circle at 30% 25%, rgba(232, 252, 255, .35), transparent 40%), linear-gradient(135deg, var(--a, var(--inset)), var(--b, var(--card)));
  transition: border-color var(--dur-fast) var(--ease-out); }
.mtile__b:hover { border-color: var(--cyan-edge); }
.mtile__b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mtile__net { position: absolute; top: var(--s-8); left: var(--s-8); }
.mtile__len { position: absolute; bottom: var(--s-8); right: var(--s-8); }
.play { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(5, 7, 13, .7); border: 1px solid rgba(232, 240, 255, .5); display: inline-flex; align-items: center; justify-content: center; }
.play svg { width: 16px; height: 16px; } .play path { fill: var(--text); }
.mtile__t { font-size: var(--fs-14); font-weight: 600; line-height: 1.35; }
.mtile__m { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-10); font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label); color: var(--text-4); }
.mtile__m a { color: var(--cyan); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.mtile__m a:hover { text-decoration: underline; }
dialog.viewer { padding: 0; border: 0; background: transparent; color: var(--text); width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
dialog.viewer::backdrop { background: rgba(5, 7, 13, .88); }
.viewer__in { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: var(--s-16); display: flex; flex-direction: column; gap: var(--s-14); }
.viewer__top, .viewer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); }
.viewer__meta { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-mid); color: var(--text-3); }
.viewer__stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; gap: var(--s-12);
  align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, rgba(232, 252, 255, .35), transparent 40%), linear-gradient(135deg, var(--a, var(--inset)), var(--b, var(--card))); }
.viewer__stage--video { aspect-ratio: 16 / 9; }
.viewer__stage--video .play { width: 64px; height: 64px; } .viewer__stage--video .play svg { width: 22px; height: 22px; }
.viewer__stage img { width: 100%; height: 100%; object-fit: contain; background: var(--inset); }
.viewer__stage video, .viewer__stage iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--inset); }
.viewer__note { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--text); background: rgba(5, 7, 13, .75); padding: 4px 8px; border-radius: var(--radius-control); }
.viewer__t { font-weight: 700; font-stretch: 108%; font-size: var(--fs-18); }
/* the Hive page (DlHive) */
.hive-main { gap: var(--s-64); }
.hv-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-32) var(--s-48); }
.hv-hero__t { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-18); }
.d-hive { margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(40px, 5.6vw, 84px); line-height: .92; text-transform: uppercase; }
.hv-glow { color: var(--violet-2); text-shadow: 0 0 28px rgba(176, 108, 255, .55); }
.hv-hero .lede { font-size: var(--fs-18); }
.hv-hero__art { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }
.hv-art { width: 100%; max-width: 440px; height: auto; display: block; overflow: visible; }
.hv-spoke { stroke: var(--violet-line-dark); stroke-width: 1; }
.hv-sig { stroke: var(--violet-2); stroke-width: 1.6; stroke-dasharray: 14 86; animation: dlSignal var(--dur) linear var(--del) infinite; opacity: 0; }
.hv-ring { stroke: #1E2C46; stroke-width: 1; }
.hv-node { fill: var(--bg); stroke: var(--cyan); stroke-width: 1.6; filter: drop-shadow(0 0 6px var(--cyan-glow)); }
.hv-halo { fill: none; stroke: var(--violet); stroke-opacity: .35; }
.hv-breathe { fill: none; stroke: var(--violet-2); stroke-width: 1.5; }
.hv-core { fill: var(--violet); filter: drop-shadow(0 0 24px rgba(176, 108, 255, 1)); }
.hv-inner { fill: #F2E6FF; }
.hv-t { fill: var(--violet-2); stroke: var(--bg); stroke-width: 5; paint-order: stroke; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; }
.hv-t2 { fill: var(--cyan); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; }
.hjobs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-14); }
/* /hive Growth plan: the week's proposals in one row on a wide screen (the summary line is the thread's; the cards carry the plan) */
.hjobs--plan { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--s-10); }
@media (max-width: 760px) { .hjobs--plan { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .hjobs--plan { grid-template-columns: 1fr; } }
.hjob { --c: var(--violet-2); background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--c); border-radius: var(--radius-card); padding: var(--s-20); display: flex; flex-direction: column; gap: var(--s-12); }
.hjob--cyan { --c: var(--cyan); } .hjob--amber { --c: var(--amber); } .hjob--later { --c: var(--text-3); }
.hjob__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-10); }
.hjob__ico { width: 26px; height: 26px; }
.hjob__ico path { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hjob__h { margin: 0; font-weight: 700; font-stretch: 108%; font-size: var(--fs-19); line-height: 1.25; }
.hjob__p { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--text-3); }
.hv-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); }
.hv-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--fs-15); line-height: 1.5; }
.hv-table thead th, .hv-table thead td { padding: var(--s-14) var(--s-18); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-11); letter-spacing: var(--track-label-wide); text-align: left; border-bottom: 1px solid var(--line); }
.hv-table .c-dev { color: var(--cyan); } .hv-table .c-hive { color: var(--violet-2); }
.hv-table tbody th { padding: var(--s-14) var(--s-18); text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--text-4); border-top: 1px solid var(--line); vertical-align: top; }
.hv-table tbody td { padding: var(--s-14) var(--s-18); color: var(--text-2); border-top: 1px solid var(--line); vertical-align: top; }
.hv-table tbody td:last-child { color: var(--text); }
.hv-wallet { display: flex; flex-wrap: wrap; gap: var(--s-20); align-items: stretch; scroll-margin-top: var(--s-24); }
.hv-wallet__main { flex: 999 1 520px; min-width: 0; background: var(--card); border: 1px solid var(--violet-line-dark); border-radius: var(--radius-card); padding: var(--s-24); display: flex; flex-direction: column; gap: var(--s-16); }
.hv-wallet__h { color: var(--violet-2); letter-spacing: var(--track-label-wide); }
.hv-wallet__dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-18); }
.hv-wallet__dl dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--text-4); }
.hv-wallet__dl dd { margin: var(--s-6) 0 0; font-weight: 800; font-stretch: 112%; font-size: var(--fs-22); }
.hv-wallet__dl dd.pending { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-15); color: var(--text-3); }
.hv-wallet__main a { display: inline-flex; min-height: 24px; align-items: center; }
.hv-wallet__log { flex: 1 1 320px; min-width: 0; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-24); display: flex; flex-direction: column; gap: var(--s-12); }
.hv-wallet__none { margin: 0; font-weight: 800; font-stretch: 112%; font-size: var(--fs-20); }
.hv-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-20); padding-top: var(--s-32); border-top: 1px solid var(--line); }
.hv-end p { margin: 0; max-width: 620px; font-size: var(--fs-18); line-height: 1.5; color: var(--text-2); }

/* ---------- reduced motion: every scroll effect and loop off, final states shown ---------- */
@media (prefers-reduced-motion: reduce) {
  .hive__nebula, .hive__sigs line, .hive__nodes circle, .breathe, .spin24, .core-pulse, .trend__h .d, .rm-in, .rm-cue__l span, .rm-node .halo { animation: none !important; }
  .hive__sigs { display: none; }
  .hv-sig { display: none; }
  .seg, .split span, .rm-num, .rm-title, .rm-item, .rm-item__edge, .cut li, .cut .t i, .rm-fill { --p: 1 !important; --on: 1 !important; --fill: 1 !important; }
  .btn, .opt, .tcard { transition: none; }
}

/* ---------- phones ---------- */
@media (max-width: 560px) {
  .hive__tag--koko { left: auto; right: 0; }
  .post { padding: var(--s-14); gap: var(--s-10); }
  .post__av, .post__av-skel { width: 32px; height: 32px; --w: 32px; --h: 32px; }
}
/* ---------- narrow phones ---------- */
@media (max-width: 400px) {
  .lcard { padding: var(--s-24) var(--s-20); }
  .cfg dt { flex-basis: 100%; }
  .mycard dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { padding: var(--s-16); gap: var(--s-6); }
}

/* ---------- v3.2: DexScreener profile (token card, launch step 3 switch), every item PLANNED ---------- */
:root { --dur-fill: .6s; --switch-w: 40px; --switch-h: 24px; --switch-knob: 18px; }
.dex__head { gap: var(--s-10); }
.dex__st { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-6) var(--s-8); font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-label); color: var(--text); text-wrap: balance; }
.dex__st a { color: var(--cyan); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.dex__st a:hover { text-decoration: underline; }
.dex__st--amber { color: var(--amber); }
.dex__st--amber { display: block; line-height: 1.6; }
.dex__st--amber svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--s-6); fill: currentColor; }
.dex__st--amber .chip { margin-left: var(--s-6); vertical-align: 1px; }
.dex__on { color: var(--cyan); text-decoration: none; min-height: 24px; }
a.dex__on:hover { text-decoration: underline; }
.dex__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); flex: none; }
.dex__ref { font-family: var(--font-mono); color: var(--text-3); }
.dex__p { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-4); text-wrap: balance; }
.dex__p a { color: var(--text-3); }
.dex__p--none { font-size: var(--fs-14); color: var(--text-3); }
.dex__meter span { transform-origin: left center; animation: dex-fill var(--dur-fill) var(--ease-out) both; }
@keyframes dex-fill { from { transform: scaleX(0); } }
.dex__views a { min-height: 24px; display: inline-flex; align-items: center; }
.dex__views a[aria-current] { color: var(--text); text-decoration: none; }
.rm-item h3 .chip { vertical-align: middle; margin-left: var(--s-8); }
.how-grid p.how-planned { font-size: var(--fs-15); line-height: 1.6; color: var(--text-3); text-wrap: balance; }
.how-planned .chip { margin-right: var(--s-6); vertical-align: 1px; }
/* launch step 3 */
.dexl { display: flex; flex-direction: column; gap: var(--s-10); }
.dexl p { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--text-2); text-wrap: balance; }
.switch { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s-12); min-height: 44px; padding: 0 var(--s-14) 0 var(--s-8); border-radius: var(--radius-control);
  border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 500 var(--fs-12)/1.2 var(--font-mono); letter-spacing: var(--track-label); cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out); }
.switch:hover { border-color: var(--cyan-edge); }
.switch__t { position: relative; width: var(--switch-w); height: var(--switch-h); border-radius: calc(var(--switch-h) / 2); flex: none; background: var(--line); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color var(--dur-fast) var(--ease-out); }
.switch__k { position: absolute; top: calc((var(--switch-h) - var(--switch-knob)) / 2); left: calc((var(--switch-h) - var(--switch-knob)) / 2); width: var(--switch-knob); height: var(--switch-knob); border-radius: 50%;
  background: var(--text-3); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.switch[aria-checked="true"] .switch__t { background: var(--cyan); box-shadow: none; }
.switch[aria-checked="true"] .switch__k { background: var(--on-cyan); transform: translateX(calc(var(--switch-w) - var(--switch-h))); }
.dexl__note { font-size: var(--fs-13); line-height: 1.5; color: var(--text-4); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) {
  .dex__meter span { animation: none; }
  .switch, .switch__t, .switch__k { transition: none; }
}

/* ---------- v3.4 Free Studio (/studio; mockup DlStudio.dc.html, loader kit L07 / L08). Motion: CSS keyframes, transform and opacity only,
   all of it off under prefers-reduced-motion (the hero stands on its fanned-out frame, the placeholder stays static). ---------- */
.g-2 { gap: var(--s-2); }
.st-main { --st-hero-h: 300px; --st-card-w: 250px; --st-how-w: 220px; --st-glow: rgba(79, 227, 255, .45); --st-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  --st-ring: 0 0 0 1px var(--cyan), 0 12px 36px rgba(79, 227, 255, .18); --st-ease: cubic-bezier(.23, 1, .32, 1); gap: var(--s-56); }
.st-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-32) var(--s-48); }
.st-top__t { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-16); }
/* CLS (aegis v3.4 A1): metric-matched fallbacks so the Archivo swap keeps the same line breaks (advance widths from the font files: Archivo
   400 at 100% = 98% of Arial and 86% of DejaVu Sans; 850 at 125% = 131% of Arial Bold and 117% of DejaVu Sans Bold), and the per-day count
   already laid out, hidden until /quota answers. Arial or Liberation first (Windows, macOS, most Linux), DejaVu next (other Linux). */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"); font-weight: 100 900; size-adjust: 98%; }
@font-face { font-family: "Archivo Fallback D"; src: local("DejaVu Sans"), local("DejaVuSans"); font-weight: 100 900; size-adjust: 86%; }
@font-face { font-family: "Archivo Display Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 100 900; size-adjust: 131%; }
@font-face { font-family: "Archivo Display Fallback D"; src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold"); font-weight: 100 900; size-adjust: 117%; }
.st-top { font-family: "Archivo", "Archivo Fallback", "Archivo Fallback D", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.st-perday:empty::before { content: "0 rounds a day / "; visibility: hidden; } /* a hidden pseudo: no number in the DOM or for AT */
.more:empty::before { content: attr(data-on); visibility: hidden; } /* reserved room, no words in the DOM until the flag fills it */
.st-h1 { font-family: "Archivo", "Archivo Display Fallback", "Archivo Display Fallback D", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; font-weight: 850; font-stretch: 125%; font-size: clamp(38px, 5.6vw, 84px); line-height: .92; text-transform: uppercase; }
.st-glow { text-shadow: 0 0 28px var(--st-glow); }
.st-lede { max-width: 560px; font-size: var(--fs-18); line-height: 1.55; color: var(--text-2); }

/* hero loop: tweet card -> beam -> violet dev node -> three pitch cards */
.st-hero { flex: 1 1 380px; min-width: 0; position: relative; height: var(--st-hero-h); }
.st-hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.st-hero__rail { stroke: var(--line-strong); stroke-width: 2; }
.st-hero__rail--v { stroke: var(--violet-line-dark); stroke-width: 1.5; }
.st-hero__beam { stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 6 10; animation: stBeam 1.2s linear infinite; }
.st-hero__beam--v { stroke: var(--violet-2); stroke-width: 1.5; stroke-dasharray: 5 11; animation-duration: 1.6s; }
.st-hero__halo { stroke: var(--violet-2); transform-box: fill-box; transform-origin: center; animation: dlBreathe 2.4s ease-in-out infinite; }
.st-hero__node circle { fill: var(--violet); } .st-hero__node .st-hero__core { fill: var(--violet-3); }
.st-hero__node { filter: drop-shadow(0 0 14px rgba(176, 108, 255, .8)); }
.st-hero__tweet { position: absolute; left: 0; top: 96px; width: 128px; padding: var(--s-12); border-radius: 10px; background: var(--card); border: 1px solid var(--line-strong);
  box-shadow: var(--st-shadow); display: flex; flex-direction: column; gap: var(--s-8); font-size: var(--fs-11); line-height: 1.35; color: var(--text-2); animation: stBob 4s ease-in-out infinite; }
.st-hero__who { display: flex; align-items: center; gap: var(--s-6); font: 9px var(--font-mono); color: var(--text-3); }
.st-hero__who i { width: 18px; height: 18px; border-radius: 9px; background: linear-gradient(135deg, var(--text-4), var(--line-strong)); }
.st-hero__card { position: absolute; left: calc(50% + 20px); top: 106px; width: 104px; padding: var(--s-8); border-radius: 10px; background: var(--card); border: 1px solid var(--c);
  box-shadow: var(--st-shadow); display: flex; flex-direction: column; gap: var(--s-4); opacity: 0; animation: stFan 6s var(--st-ease) infinite; animation-delay: calc(var(--k) * .25s); }
.st-hero__card b { font-weight: 800; font-stretch: 110%; font-size: var(--fs-12); }
.st-hero__card span { font: 9px var(--font-mono); color: var(--text-3); }
.st-hero__art { display: block; height: 34px; border-radius: 6px; background: radial-gradient(circle at 35% 30%, var(--a), var(--b)); }
.st-hero__card--1 { --c: var(--cyan); --x: 20px; --y: -98px; --r: -4deg; --k: 0; --a: #C6F38A; --b: #1E6F4A; }
.st-hero__card--2 { --c: var(--violet); --x: 44px; --y: 0px; --r: 2deg; --k: 1; --a: #9AD8FF; --b: #2A3FA0; }
.st-hero__card--3 { --c: var(--amber); --x: 20px; --y: 98px; --r: 5deg; --k: 2; --a: #FFC9B8; --b: #9E3A6B; }
/* the static frame and the loop's hold frame: three cards 88px tall on a 98px pitch, no overlap (aegis v3.4 A6) */
/* offscreen: the loop and the how-card lights pause (m3-studio.js toggles .is-paused with an IntersectionObserver) */
.st-hero.is-paused, .st-hero.is-paused *, .st-how__list.is-paused .st-how__run { animation-play-state: paused; }
@keyframes stBeam { to { stroke-dashoffset: -48; } }
@keyframes stBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes stFan { 0%, 6% { opacity: 0; transform: translate(-120px, 0) scale(.6); } 22%, 78% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
  94%, 100% { opacity: 0; transform: translate(calc(var(--x) + 30px), var(--y)) rotate(var(--r)) scale(.92); } }
@media (max-width: 560px) { .st-hero { transform: scale(.86); transform-origin: left center; height: 260px; } }

/* the round (L07 root: data-state idle | signing | working | done | error; data-api wait | on | soon) */
.st-round.dvl-studio { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(18px, 3vw, 32px); gap: var(--s-20); overflow: hidden; }
.st-round__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); }
.st-round__head .d-step { margin-right: auto; }
.st-quota { color: var(--text-3); border-color: var(--line-strong); white-space: normal; padding: 6px 9px; }
.st-quota[data-tone="cyan"] { color: var(--cyan); border-color: var(--cyan-edge); }
.st-quota[data-tone="amber"] { color: var(--amber); border-color: var(--amber-edge); }
.st-quota[data-tone="soon"] { color: var(--text-3); border-style: dashed; }
.st-quota.is-flip { animation: stFlip .45s var(--st-ease) both; }
@keyframes stFlip { from { transform: perspective(200px) rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.st-field { letter-spacing: var(--track-label-mid); }
textarea.input.st-idea { font-size: var(--fs-18); padding: var(--s-16) var(--s-18); transition: border-color var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.st-idea[readonly] { border-color: var(--violet-line-dark); opacity: .55; }
.st-idea:disabled { opacity: .55; cursor: not-allowed; }
.st-round__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); }
.st-hint { max-width: 520px; flex: 1 1 280px; }
.st-round__go { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.st-sign { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-14) var(--s-16); border: 1px solid var(--line-strong); border-radius: var(--radius-inner); background: var(--inset); }
.st-sign .dvl-node { filter: drop-shadow(0 0 8px var(--text)); }
.st-sign__t { margin: 0; font: 700 var(--fs-12)/1.5 var(--font-mono); letter-spacing: var(--track-label); color: var(--text); }
.st-think { padding: var(--s-14) var(--s-16); border: 1px solid var(--violet-line-dark); border-radius: var(--radius-inner); background: rgba(176, 108, 255, .06); --size: 44px; }
.st-round[data-state="error"] .st-cards, .st-round[data-state="idle"] .st-cards, .st-round[data-state="signing"] .st-cards { display: none; }

/* the three cards (selectors under .st-card beat the kit's .dvl-skel, which loads after this sheet): skeletons while the round writes, then name, ticker, story and angle rise in; the art develops in after */
.st-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--st-card-w), 100%), 1fr)); gap: var(--s-14); }
.st-card { background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-14); display: flex; flex-direction: column; gap: var(--s-12); min-width: 0;
  transition: transform .25s var(--st-ease), box-shadow .25s ease, border-color .25s ease; }
.st-card[data-state="pending"] { gap: var(--s-10); }
.st-card .st-card__wait { --dvl-skel: #141B2D; display: grid; place-items: center; }
.st-card[data-picked] { border-color: var(--cyan); box-shadow: var(--st-ring); transform: translateY(-4px); }
@media (hover: hover) and (pointer: fine) { .st-card[data-state="ready"]:hover { transform: translateY(-4px); } }
.st-card__art { position: relative; aspect-ratio: 1; border-radius: var(--radius-inner); overflow: hidden; background: radial-gradient(circle at 35% 30%, var(--a), var(--b)); }
.st-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: radial-gradient(circle at 35% 30%, var(--a), var(--b)); }
.st-card__img.is-in { animation: stDevelop .9s var(--st-ease) both; }
@keyframes stDevelop { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.st-card__art .st-card__draw { --dvl-skel: #141B2D; position: absolute; inset: 0; --h: 100%; --r: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-10); }
.st-card__draw b { position: relative; font: 500 var(--fs-10) var(--font-mono); letter-spacing: var(--track-label-mid); color: var(--violet-2); }
.st-card__tag { position: absolute; top: var(--s-8); left: var(--s-8); z-index: 1; font: var(--fs-10) var(--font-mono); letter-spacing: var(--track-label-mid); color: var(--text); background: rgba(5, 7, 13, .7); padding: 3px 6px; border-radius: var(--radius-control); }
.st-card__body { display: flex; flex-direction: column; gap: var(--s-4); }
.st-rise { animation: stRise .5s var(--st-ease) both; animation-delay: calc(var(--i) * 120ms); }
@keyframes stRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.st-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-8); }
.st-card__n { margin: 0; font-weight: 850; font-stretch: 118%; font-size: var(--fs-22); text-transform: uppercase; line-height: 1; overflow-wrap: anywhere; }
.st-card__t { font: var(--fs-12) var(--font-mono); color: var(--text-3); }
.st-card__a { margin: var(--s-6) 0 0; font: var(--fs-12)/1.5 var(--font-mono); letter-spacing: .02em; color: var(--violet-2); }
.st-card__s { margin: var(--s-4) 0 0; font-size: var(--fs-14); line-height: 1.5; color: var(--text-2); }
.st-star { flex: none; width: var(--tap); height: var(--tap); border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--text-3); transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.st-star svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.st-star[aria-pressed="true"] { color: var(--amber); border-color: var(--amber-edge); cursor: default; }
.st-star[aria-pressed="true"] svg { fill: var(--amber); }
.st-star:disabled { opacity: .45; cursor: not-allowed; }
.st-star[aria-busy="true"] { cursor: progress; }
@media (hover: hover) and (pointer: fine) { .st-star:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--amber-edge); color: var(--amber); } }
.st-star.is-pop svg { animation: stPop .35s var(--st-ease); }
@keyframes stPop { 40% { transform: scale(1.35); } }
.st-pick { margin-top: var(--s-10); width: 100%; font-size: var(--fs-12); font-weight: 700; }
.st-pick[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--on-cyan); }
.st-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); padding-top: var(--s-4); }
.st-round[data-state="error"] .st-done { display: none; }
.st-done__l { margin: 0; }
.st-launch { box-shadow: 0 0 24px rgba(79, 227, 255, .35); animation: stRise .35s var(--st-ease) both; }
.st-launch .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.st-done__note { flex-basis: 100%; }

/* saved pitches (GET /api/studio/projects; the same list My devs reads) */
.st-saved { display: flex; flex-direction: column; gap: var(--s-14); min-block-size: 96px; }
.st-saved__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-8); }
.st-saved__head .label { letter-spacing: var(--track-label-wide); }
.st-saved__my { font: var(--fs-11) var(--font-mono); letter-spacing: var(--track-label-mid); color: var(--cyan); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.st-saved__my:hover { text-decoration: underline; }
.st-saved .empty-line { padding: var(--s-18) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-saved .empty-line .dvl-retry { margin-left: var(--s-8); }
.st-saved__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-10); }
.st-saved__list:empty { display: none; }
.st-saved__i { display: flex; align-items: center; gap: var(--s-10); padding: var(--s-8) var(--s-14) var(--s-8) var(--s-8); border: 1px solid var(--line-strong); border-radius: var(--radius-inner);
  background: var(--card); animation: stRise .35s var(--st-ease) both; --i: 0; }
.st-saved__i img, .st-saved__i i { width: 28px; height: 28px; border-radius: 6px; flex: none; object-fit: cover; background: radial-gradient(circle at 35% 30%, var(--a, var(--cyan)), var(--b, var(--cyan-line-dark))); }
.st-saved__i b { font-weight: 700; font-size: var(--fs-14); }
.st-saved__i .mono { font-size: var(--fs-11); color: var(--text-3); }

/* how a round works: four cards, a light runs along each top edge in turn */
.st-how { display: flex; flex-direction: column; gap: var(--s-20); }
.st-how__h { font-size: clamp(26px, 3vw, 40px); }
.st-how__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--st-how-w), 100%), 1fr)); gap: var(--s-14); }
.st-how__c { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-20); display: flex; flex-direction: column; gap: var(--s-10); overflow: hidden; }
.st-how__c::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--line); }
.st-how__run { position: absolute; top: 0; left: 0; height: 2px; width: 34%; background: linear-gradient(90deg, transparent, var(--c), transparent); transform: translateX(-100%);
  animation: stFlow 2.8s linear infinite; animation-delay: calc(var(--i) * .7s); }
.st-how__run--cyan { --c: var(--cyan); } .st-how__run--violet { --c: var(--violet-2); }
@keyframes stFlow { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.st-how__n { font: var(--fs-12) var(--font-mono); letter-spacing: var(--track-label-mid); }
.st-how__n.violet { color: var(--violet-2); }
.st-how__t { font-weight: 700; font-stretch: 108%; font-size: var(--fs-18); }

@media (prefers-reduced-motion: reduce) {
  .st-hero__beam, .st-hero__halo, .st-hero__tweet, .st-quota.is-flip, .st-card__img.is-in, .st-rise, .st-star.is-pop svg, .st-launch, .st-saved__i { animation: none; }
  .st-hero__card { animation: none; opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  .st-how__run { animation: none; transform: none; opacity: .6; }
  .st-card, .st-star, textarea.input.st-idea { transition: none; }
  .st-card[data-picked] { transform: none; }
}

/* ==========================================================================================================================================
   v3.5 (GH #80, 28 Oct 2026): agent faces, ITS TEAM, AI budget, Talk to the dev, My agents, the Studio launch team.
   Motion: a new message or request slides in (dlIn .4s), a working agent's face bobs (stBob), busy dots breathe (dlBreathe), the kit's L03 / L04 /
   L05 / L07 loaders. Every one of them stops under prefers-reduced-motion (block at the end).
   ========================================================================================================================================== */
@keyframes dlIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.body-14 { margin: 0; font-size: var(--fs-14); line-height: 1.55; color: var(--text-3); }
.ag-face { flex: none; width: 40px; height: 40px; --c: var(--cyan); }
.ag-face--36 { width: 36px; height: 36px; }
.ag-face--concept { --c: var(--cyan); } .ag-face--illustrator { --c: var(--violet-2); } .ag-face--copywriter { --c: var(--amber); }
.ag-face--callouts { --c: var(--ag-mint); } .ag-face--social { --c: var(--ag-blue); }
.ag-face__r { fill: var(--inset); stroke: var(--c); stroke-opacity: .6; }
.ag-face__e { fill: var(--c); }
.ag-face__m { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ag-face--bob { animation: stBob 1.4s ease-in-out infinite; transform-origin: center; }

/* ITS TEAM (token page) and the team rows of My agents */
.crew { display: flex; flex-direction: column; gap: var(--s-14); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-20); }
.crew__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-6) var(--s-16); }
.crew__h { margin: 0; display: inline-flex; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--track-label-wide); color: var(--text-3); }
.crew__sub { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); text-transform: uppercase; }
.crew__sub a { color: var(--cyan); }
.crew__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-12); }
.crew__r { display: flex; align-items: flex-start; gap: var(--s-12); min-width: 0; }
.crew__t { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.crew__n { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label-mid); color: var(--text); }
.crew__w { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label-mid); color: var(--text-4); text-transform: uppercase; }
.crew__w--busy { color: var(--violet-2); }
.crew__dot { position: relative; width: 6px; height: 6px; border-radius: 3px; flex: none; background: var(--asleep); }
.crew__dot--busy { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.crew__dot--busy::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--violet); animation: dlBreathe 1.6s ease-in-out infinite; }
.crew__l { font-size: var(--fs-14); line-height: 1.4; color: var(--text-2); text-decoration: none; overflow-wrap: anywhere; }
a.crew__l:hover { color: var(--cyan); text-decoration: underline; }
.crew__l--none { color: var(--text-3); }
.crew__list--rows { grid-template-columns: 1fr; gap: 0; }
.crew__list--rows .crew__r { align-items: center; padding: var(--s-12) 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.crew__list--rows .crew__r:first-child { border-top: 0; }
.crew__list--rows .crew__t { flex: 1 1 180px; }
.budget { display: flex; flex-direction: column; gap: var(--s-8); padding-top: var(--s-14); border-top: 1px dashed var(--line); }
.budget__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-6) var(--s-12); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); }
.budget__k { color: var(--text-3); }
.budget__v { color: var(--text); display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.budget__bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.budget__bar > span { display: block; height: 100%; width: var(--w); background: var(--violet); box-shadow: 0 0 8px rgba(176, 108, 255, .8); }
.budget__bar--none { background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px); }
.budget__note { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-4); max-width: 72ch; }

/* Talk to the dev */
.talk { display: flex; flex-direction: column; gap: var(--s-16); padding-top: var(--s-24); border-top: 1px dashed var(--line); }
.talk__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-12) var(--s-24); }
.d-talk { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-10); font-weight: 850; font-stretch: 125%; font-size: clamp(22px, 2.4vw, 32px); line-height: .95; text-transform: uppercase; }
.talk__lede { max-width: 620px; }
.talk__views { max-width: 560px; }
.talk__views [aria-current] { color: var(--sample); }
.talk__row { display: flex; flex-wrap: wrap; gap: var(--s-20); align-items: flex-start; }
.talk__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-14); }
.talk__side { flex: 1 1 280px; max-width: 420px; display: flex; flex-direction: column; gap: var(--s-14); min-width: 0; }
.talk__h4 { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--track-label-wide); color: var(--text-3); }
.talk__dl { margin: 0; display: flex; flex-direction: column; gap: var(--s-10); font-size: var(--fs-14); line-height: 1.5; }
.talk__dl dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--cyan); }
.talk__dl dd { margin: var(--s-2) 0 0; color: var(--text-2); }
.talk__side a { color: var(--cyan); }
/* the composer: every part is in the page, [data-talk-me] shows one (out | holder | notholder | checkfail | closed) */
.tc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-16); display: flex; flex-direction: column; gap: var(--s-12); }
.tc__part { display: none; flex-direction: column; gap: var(--s-12); }
.tc[data-talk-me="out"] .tc__part--out, .tc[data-talk-me="holder"] .tc__part--write, .tc[data-talk-me="notholder"] .tc__part--notholder,
.tc[data-talk-me="checkfail"] .tc__part--checkfail, .tc[data-talk-me="closed"] .tc__part--closed { display: flex; }
.tc__part--out .btn { align-self: flex-start; max-width: 100%; }
.tc__reply { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-3); }
.tc__reply b { color: var(--cyan); font-weight: 500; }
.tc__me { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-3); }
.tc__label { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--text-3); text-transform: uppercase; }
textarea.input.tc__draft { font-size: var(--fs-16); line-height: 1.5; }
textarea.input.tc__draft[aria-invalid="true"] { border-color: var(--amber); }
textarea.input.tc__draft:read-only { opacity: .6; }
.tc__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); }
.tc__count { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); font-variant-numeric: tabular-nums; }
.tc__count[data-tone="warn"] { color: var(--amber); }
.tc__count[data-tone="err"] { color: var(--error); }
.tc__say { margin: 0; min-height: 1.4em; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--cyan); }
.tc__say:empty { min-height: 0; }
.tc__say[data-err] { color: var(--amber); text-transform: none; font-family: var(--font-display); font-size: var(--fs-14); letter-spacing: 0; }
.tc__note { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-4); }
.tc__alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-12) var(--s-14); border-radius: var(--radius-inner);
  background: var(--amber-wash); border: 1px solid var(--amber-frame); }
.tc__alert--err { background: var(--error-tint); border-color: var(--error-line); }
.tc__alert-t { font-weight: 700; font-size: var(--fs-15); color: var(--text); }
.tc__alert--err .tc__alert-t { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--track-label-mid); color: var(--error); }
.tc__alert-p { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-3); }
.tc__alert--err .tc__alert-p { font-family: var(--font-display); font-size: var(--fs-14); letter-spacing: 0; color: var(--text-2); }
/* the thread */
.talk__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-10); }
.tm { min-width: 0; }
.tm--reply { margin-left: clamp(16px, 4vw, 40px); padding-left: var(--s-14); border-left: 2px solid var(--line); }
.tm--fresh { animation: dlIn .4s var(--ease-out) both; }
.tm__box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-14) var(--s-16); display: flex; flex-direction: column; gap: var(--s-10); min-width: 0; }
.tm__box--dev { background: var(--dev-answer); border-color: var(--cyan-line-dark); }
.tm__box--fresh { border-color: var(--cyan-edge); }
.tm__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6) var(--s-10); min-width: 0; }
.tm__av { width: 28px; height: 28px; border-radius: 6px; flex: none; --a: var(--cyan); background: linear-gradient(135deg, var(--a), var(--line)); }
.tm__av[style*="--h:1"] { --a: var(--violet); } .tm__av[style*="--h:2"] { --a: var(--amber); } .tm__av[style*="--h:3"] { --a: var(--ag-mint); }
.tm__av[style*="--h:4"] { --a: var(--ag-blue); } .tm__av[style*="--h:5"] { --a: #FF9E7A; }
.tm__dev { flex: none; }
.tm__dev--16 { width: 16px; height: 16px; }
.tm__dev-r { fill: var(--inset); stroke: var(--line-strong); } .tm__dev-c { fill: var(--cyan); } .tm__dev-i { fill: var(--cyan-4); } .tm__dev-s { fill: var(--cyan-2); }
.tm__who { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--text); overflow-wrap: anywhere; }
.tm__who--dev { font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: var(--fs-15); }
.tm__badge { font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label-mid); padding: 2px 6px; border-radius: var(--radius-control); color: var(--text-3); border: 1px solid var(--line-strong); }
.tm__badge--dev { color: var(--on-cyan); background: var(--cyan); border-color: var(--cyan); }
.tm__time { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.tm__orphan { font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label-mid); color: var(--text-4); }
.tm__text { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.tm__plan { margin: 0; align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--cyan); padding: var(--s-6) var(--s-10); border-radius: var(--radius-control); background: var(--cyan-tint); border: 1px solid var(--cyan-edge); }
.tm__vote { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-12) var(--s-14); border-radius: var(--radius-inner); border: 1px solid var(--violet-edge); background: var(--violet-tint); text-decoration: none; color: inherit; }
.tm__vote:hover { border-color: var(--violet-2); }
.tm__vote-t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--violet-2); }
.tm__vote-n { font-weight: 700; font-size: var(--fs-15); color: var(--text); }
.tm__vote-p { font-size: var(--fs-13); line-height: 1.5; color: var(--text-3); }
.tm__vote-a { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--violet-2); }
.tm__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-8); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); }
.tm__btn { min-height: 32px; min-width: 44px; padding: 0 var(--s-8); border-radius: var(--radius-control); border: 0; background: transparent; color: var(--text-4); font: inherit; letter-spacing: inherit; cursor: pointer; }
.tm__btn:hover { color: var(--text); }
.tm__btn[data-done] { color: var(--amber); cursor: default; }
.tm__btn:disabled { cursor: default; }
.tm__rep { color: var(--amber); }
.tm__rep[data-tone="review"] { color: var(--violet-2); padding: var(--s-4) 0; }
.tm__hidden { border: 1px dashed var(--line-strong); border-radius: 10px; padding: var(--s-14) var(--s-16); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.tm--skel { display: flex; gap: var(--s-12); padding: var(--s-14) var(--s-16); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.tm__skel-av { --w: 28px; --h: 28px; --r: 6px; flex: none; }
.tm__skel-b { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.talk__more .tm--skel { opacity: .6; }
.talk__older { align-self: center; }

/* My agents (My devs) */
.agents { display: flex; flex-direction: column; gap: var(--s-18); padding-top: var(--s-28); border-top: 1px solid var(--line); }
.agents__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-12); }
.agents__head .d-out { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-10); }
.agents__lede { max-width: 640px; }
.agents__tabs { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.agents__tab { display: inline-flex; align-items: center; gap: var(--s-8); min-height: var(--tap); padding: 0 var(--s-14); border-radius: var(--radius-control); border: 1px solid var(--line-strong);
  background: transparent; color: var(--text-3); font: var(--fs-12) var(--font-mono); letter-spacing: var(--track-label); cursor: pointer; }
.agents__tab:hover { color: var(--text); }
.agents__tab[aria-selected="true"] { border-color: var(--cyan); background: var(--cyan-tint); color: var(--text); }
.agents__sw { width: 18px; height: 18px; border-radius: 5px; flex: none; background: linear-gradient(135deg, #9BE15D, #2E7D5B); }
.agents__sw--pebble { background: linear-gradient(135deg, #FFB4A2, #B04A3A); }
.agents__panel { display: flex; flex-wrap: wrap; gap: var(--s-20); align-items: flex-start; }
.agents__team { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-14); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-20); }
.agents__th { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8) var(--s-16); }
.agents__side { flex: 1 1 300px; max-width: 440px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-16); }
.agents__planned { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.ask textarea.input { font-size: var(--fs-15); }
.ask__field { text-transform: none; }
.ask .btn { width: 100%; }
.reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-10); }
.req { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s-14); display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.req--fresh { border-color: var(--violet-edge); animation: dlIn .4s var(--ease-out) both; }
.req__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-6); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); }
.req__k { color: var(--text-4); }
.req__s { display: inline-flex; align-items: center; gap: var(--s-6); font-size: var(--fs-10); padding: 3px 7px; border-radius: var(--radius-control); border: 1px solid currentColor; }
.req__s--violet { color: var(--violet-2); } .req__s--cyan { color: var(--cyan); } .req__s--amber { color: var(--amber); }
.req__s--done { color: var(--on-cyan); background: var(--cyan); border-color: var(--cyan); }
.req__t { font-size: var(--fs-15); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.req__a { display: flex; gap: var(--s-8); align-items: flex-start; font-size: var(--fs-14); line-height: 1.5; color: var(--text-3); }
.req__a .tm__dev { margin-top: 3px; }

/* Studio: your launch team for $TICKER (v3.5) */
.st-team { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--s-16); padding-top: var(--s-20); border-top: 1px solid var(--line); animation: stRise .45s var(--st-ease) both; }
.st-team__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-14) var(--s-24); }
.st-team__h { margin: 0; font-weight: 800; font-stretch: 118%; font-size: var(--fs-22); line-height: 1.1; text-transform: uppercase; }
.st-team__lede { max-width: 640px; }
.st-team__hint:empty { display: none; }
.st-team__hint { color: var(--amber); }
.st-crew { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-12); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: start; }
.st-crew--fixed { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.st-fix { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-10) var(--s-12); border-radius: 10px; border: 1px solid var(--line); background: var(--inset); min-width: 0; }
.st-fix > .stack { flex: 1 1 auto; min-width: 0; }
.st-fix__n { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--track-label-mid); }
.st-fix__m { font-size: var(--fs-13); line-height: 1.4; color: var(--text-4); }
.st-chip { flex: none; font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label); padding: 3px 7px; border-radius: var(--radius-control); white-space: nowrap; color: var(--text-3); border: 1px solid var(--line-strong); }
.st-chip[data-tone="done"] { color: var(--cyan); border-color: var(--cyan-edge); }
.st-chip[data-tone="working"] { color: var(--violet-2); border-color: var(--violet-edge); }
.st-chip[data-tone="failed"] { color: var(--error); border-color: var(--error-line); }
.st-chip[data-tone="later"] { color: var(--later); }
.st-agent { background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-14); display: flex; flex-direction: column; gap: var(--s-12); min-width: 0;
  transition: border-color .25s ease, box-shadow .25s ease; }
.st-agent[data-state="working"] { border-color: var(--violet-line-dark); box-shadow: 0 0 0 1px rgba(176, 108, 255, .25), 0 10px 30px rgba(176, 108, 255, .12); }
.st-agent[data-state="done"] { border-color: rgba(79, 227, 255, .35); }
.st-agent[data-state="failed"] { border-color: var(--error-line); }
.st-agent__top { display: flex; gap: var(--s-12); align-items: flex-start; }
.st-agent__id { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; flex: 1 1 auto; }
.st-agent__nr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
.st-agent__n { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-13); letter-spacing: var(--track-label-mid); }
.st-agent__m { font-size: var(--fs-13); line-height: 1.45; color: var(--text-4); }
.st-agent__run { align-self: flex-start; }
.st-agent__think { display: flex; align-items: center; gap: var(--s-10); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--violet-2); }
.st-agent__count { color: var(--text-4); margin-left: auto; }
.st-agent__err { margin: 0; }
.st-out { display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-12); border-radius: var(--radius-inner); background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.st-out__l { font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label-mid); color: var(--text-4); }
.st-out__t { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; }
textarea.input.st-out__ed { font-size: var(--fs-14); line-height: 1.5; padding: var(--s-8) var(--s-10); border-color: var(--cyan); }
.st-out__err { margin: 0; font-size: var(--fs-13); color: var(--amber); }
.st-out__acts { display: flex; gap: var(--s-8); }
.st-mini { min-height: 32px; min-width: 44px; padding: 0 var(--s-10); border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  font: var(--fs-11) var(--font-mono); letter-spacing: var(--track-label); cursor: pointer; }
.st-mini:hover { border-color: var(--text-4); }
.st-mini[data-done], .st-mini[aria-pressed="true"] { border-color: var(--cyan); background: var(--cyan-tint); color: var(--cyan); }
.st-use { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s-8); min-height: 36px; padding: 0 var(--s-10); border-radius: var(--radius-control); border: 1px solid var(--line-strong);
  background: transparent; color: var(--text-3); font: var(--fs-11) var(--font-mono); letter-spacing: var(--track-label); cursor: pointer; }
.st-use[aria-checked="true"] { border-color: var(--cyan-edge); color: var(--text); }
.st-use__box { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid var(--later); }
.st-use[aria-checked="true"] .st-use__box { background: var(--cyan); border-color: var(--cyan); box-shadow: inset 0 0 0 3px var(--inset); }
.st-use__note { font-size: var(--fs-13); color: var(--text-4); }

@media (max-width: 420px) {
  .tm__time { margin-left: 0; }
  .tc__part--out .btn, .tc__bar .btn { width: 100%; }
  .tc__part--out .btn .dvl-btn__idle { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .pf__cover .pf__net, .pf__cover .pf__ping { animation: none; } .pf__cover .pf__ping { opacity: 0; } /* v3.6 profile cover: one class more than the base rules further down, so it wins (aegis F1) */
  .tm--fresh, .req--fresh, .st-team, .ag-face--bob, .crew__dot--busy::after { animation: none; }
  .st-agent { transition: none; }
}

/* ---------- legacy routes on the m3 skin (devless-legacy-reskin, pixel): /leaderboard /seasons /senate /chronicles /milestones /flywheel, 404 ---------- */
.lg-main { gap: var(--s-56); }
.lg-sec { display: flex; flex-direction: column; gap: var(--s-16); min-width: 0; }
.lg-sec__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-8) var(--s-16); border-top: 1px solid var(--line); padding-top: var(--s-20); }
.lg-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-10); letter-spacing: var(--track-label-wide); }
.lg-sub { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--text-4); text-transform: uppercase; }
.lg-lede { max-width: 640px; }
.lg-na { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); text-transform: uppercase; }
.page-head .eyebrow .chip { vertical-align: 1px; }
.lg-empty { max-width: 640px; }

/* leaderboard table: hv-table look, secondary columns drop under 760 px so the page never scrolls sideways */
.lg-table { border: 1px solid var(--line); border-radius: var(--radius-card); overflow-x: auto; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-15); }
.lg-table thead th { padding: var(--s-14) var(--s-16); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-11); letter-spacing: var(--track-label-wide); color: var(--text-4); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lg-table tbody th, .lg-table tbody td { padding: var(--s-12) var(--s-16); border-top: 1px solid var(--line); text-align: left; vertical-align: middle; font-weight: 400; }
.lg-table tbody tr:first-child th, .lg-table tbody tr:first-child td { border-top: 0; }
.lg-table tbody tr:hover { background: var(--inset); }
.lg-table .lg-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-table .lg-rank { width: 112px; white-space: nowrap; font-family: var(--font-mono); color: var(--cyan); font-variant-numeric: tabular-nums; }
.lg-tok a { display: flex; align-items: center; gap: var(--s-12); color: var(--text); text-decoration: none; min-width: 0; }
.lg-tok a:hover .lg-tok__name { color: var(--cyan); }
.lg-tok__n { display: flex; flex-direction: column; min-width: 0; }
.lg-tok__name { font-weight: 700; font-stretch: 108%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-tok__tk { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-4); }
.av--32 { width: 32px; height: 32px; border-radius: 8px; }
.lg-m { display: none; font-size: var(--fs-12); }
.lg-foot { margin: 0; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label); color: var(--text-4); text-transform: uppercase; }
.lg-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--s-12); }
@media (max-width: 760px) {
  .lg-table .lg-d { display: none; }
  .lg-m { display: block; }
  .lg-table table { table-layout: fixed; }
  .lg-table .lg-rank { width: 64px; }
  .lg-table thead .lg-num:not(.lg-d) { width: 108px; }
  .lg-table .lg-rank .lg-na { white-space: normal; }
  .lg-table tbody th, .lg-table tbody td, .lg-table thead th { padding-left: var(--s-12); padding-right: var(--s-12); }
}

/* record lists: chronicles moves, milestones, senate proposals, seasons */
.lg-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lg-row { display: grid; grid-template-columns: minmax(96px, 140px) 1fr; gap: var(--s-6) var(--s-20); align-items: baseline; padding: var(--s-14) 0; border-bottom: 1px solid var(--line); }
.lg-row--wide { grid-template-columns: minmax(0, 1fr) auto; }
.lg-row--wide:has(.lg-row__k) { grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) auto auto; }
.lg-row__k { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label); color: var(--cyan); text-transform: uppercase; }
.lg-row__k a { color: inherit; text-decoration: none; }
.lg-row__t { min-width: 0; font-size: var(--fs-16); line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.lg-row__t a { color: inherit; text-decoration: none; }
.lg-row__t a:hover, .lg-row__k a:hover, .lg-row__m a:hover { color: var(--cyan); text-decoration: underline; }
.lg-row__s { display: block; font-size: var(--fs-14); color: var(--text-3); }
.lg-row__m { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); text-transform: uppercase; white-space: nowrap; }
.lg-row__m a { color: var(--text-3); }
.lg-row .chip { justify-self: end; }
@media (max-width: 640px) {
  .lg-row, .lg-row--wide, .lg-row--wide:has(.lg-row__k) { grid-template-columns: 1fr auto; }
  .lg-row__t { grid-column: 1 / -1; }
  .lg-row__m { white-space: normal; }
}
.lg-opt { display: inline-flex; align-items: center; text-decoration: none; min-height: var(--tap); }
.lg-rules dt { flex-basis: 200px; }

/* flywheel: the fee split and the totals */
.lg-split { margin: 0; display: grid; grid-template-columns: 7fr 2fr 1fr; gap: var(--s-4); }
.lg-split__c { --c: var(--cyan); display: flex; flex-direction: column; gap: var(--s-10); border-top: 3px solid var(--c); padding-top: var(--s-14); min-width: 0; }
.lg-split__c--hive { --c: var(--violet-2); } .lg-split__c--you { --c: var(--text); }
.lg-split dt { font-weight: 850; font-stretch: 125%; font-size: clamp(32px, 4vw, 56px); line-height: 1; color: var(--c); }
.lg-split dt::after { content: "%"; font-size: .45em; margin-left: 2px; }
.lg-split dd { margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.lg-split .k { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--text-2); text-decoration: none; }
.lg-split a.k { color: var(--violet-2); }
.lg-split .v { font-size: var(--fs-14); line-height: 1.5; color: var(--text-3); }
@media (max-width: 860px) {
  .lg-split { grid-template-columns: 1fr; gap: var(--s-20); }
  .lg-split__c { flex-direction: row; align-items: flex-start; gap: var(--s-16); }
  .lg-split dt { flex: 0 0 96px; }
}
.lg-tiles { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-12); }
.lg-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-20); display: flex; flex-direction: column; gap: var(--s-10); }
.lg-tile dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-wide); color: var(--text-4); }
.lg-tile dd { margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.lg-tile__v { font-family: var(--font-mono); font-size: var(--fs-24); font-variant-numeric: tabular-nums; color: var(--text); }
.lg-tile__s { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); text-transform: uppercase; }

/* 404: where to go */
.lg-go { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s-12); }
.lg-go a { display: flex; flex-direction: column; gap: var(--s-6); height: 100%; padding: var(--s-18) var(--s-20); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); text-decoration: none; }
.lg-go a:hover { border-color: var(--cyan-edge); }
.lg-go a:hover .t-h17 { color: var(--cyan); }
.lg-verify { max-width: 720px; }
.page-head--rule + .lg-sec > .lg-sec__h:first-child { border-top: 0; padding-top: 0; }
.lg-side { display: flex; flex-direction: column; gap: var(--s-20); max-width: 440px; }
.lg-sec .hjobs:has(> li:only-child) { max-width: 520px; }
.lg-opt[aria-current="page"] { border-color: var(--cyan); background: var(--cyan-tint); color: var(--cyan); }

/* ---------- v3.6 token page as the dev's profile (DlToken): profile header, sticky tabs, the ALL timeline, the right column ---------- */
.tok-main { padding-top: var(--s-20); }
.pf { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); overflow: hidden; }
.pf__cover { position: relative; height: clamp(104px, 16vw, 168px); overflow: hidden;
  background: radial-gradient(circle at 20% 30%, rgba(232, 252, 255, .18), transparent 45%), linear-gradient(120deg, var(--a), var(--b) 70%, var(--bg)); }
.pf__net { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); animation: pf-drift 18s ease-in-out infinite; }
.pf__links path { fill: none; stroke: var(--cyan-2); stroke-opacity: .35; stroke-width: 1; }
.pf__dots circle { fill: var(--cyan-3); fill-opacity: .8; }
.pf__ping { fill: none; stroke: var(--cyan); stroke-width: 1.5; transform-origin: 430px 50px; animation: pf-ping 2.6s ease-out infinite; }
@keyframes pf-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 6px); } }
@keyframes pf-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
.pf__body { padding: 0 var(--s-24) var(--s-24); display: flex; flex-direction: column; gap: var(--s-14); }
.pf__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-12); margin-top: -44px; }
.pf__av { position: relative; flex: none; }
.pf__img { display: block; width: 96px; height: 96px; border-radius: 22px; border: 3px solid var(--card); background-color: var(--inset); }
.pf__node { position: absolute; right: -8px; bottom: -6px; width: 38px; height: 38px; border-radius: 50%; background: var(--card); display: inline-flex; align-items: center; justify-content: center; }
.pf__node .dvl-dev { width: 34px; height: 34px; }
.pf__acts { display: flex; flex-wrap: wrap; gap: var(--s-8); padding-bottom: var(--s-2); }
.pf__btn { min-height: var(--tap); font-size: var(--fs-12); letter-spacing: var(--track-label); }
.pf__btn--off { color: var(--text-4); cursor: default; }
.pf__btn--off:hover { border-color: var(--line-strong); }
.pf__ico { flex: none; }
.pf__ico path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pf__id { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.pf__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6) var(--s-14); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label);
  color: var(--text-3); text-transform: uppercase; }
.pf__meta a { color: var(--cyan); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.pf__meta a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pf__bio { margin: 0; max-width: 62ch; font-size: var(--fs-17); line-height: 1.55; color: var(--text); }
.pf__sleep { margin: 0; max-width: 62ch; font-size: var(--fs-14); line-height: 1.5; color: var(--text-3); }
.pf__age { color: var(--text-4); }
.pf__stats { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-28); padding-top: var(--s-14); border-top: 1px solid var(--line); }
.pf__stats div { display: flex; flex-direction: column-reverse; gap: var(--s-2); }
.pf__stats dd { margin: 0; font-weight: 800; font-stretch: 112%; font-size: var(--fs-22); font-variant-numeric: tabular-nums; min-height: 30px; display: flex; align-items: center; }
.pf__stats dd.violet { color: var(--violet-2); }
.pf__stats dd.na { color: var(--text-4); font-size: var(--fs-15); }
.pf__stats dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-wide); color: var(--text-4); }

.tk-grid { display: flex; flex-wrap: wrap; gap: var(--s-24); align-items: flex-start; }
.tk-center { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-16); }
.tk-rail { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-14); }
.tk-tabs { position: sticky; top: 0; z-index: 6; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line);
  margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); }
.tk-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 760px) { .tk-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }
.tk-tabs a { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 48px; padding: 0 var(--s-14); flex: none; white-space: nowrap; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--track-label); color: var(--text-3); border-bottom: 2px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
.tk-tabs a:hover { color: var(--white); }
.tk-tabs a[aria-selected="true"] { color: var(--white); border-bottom-color: var(--cyan); }
.tk-tabs a:focus-visible { outline-offset: -2px; }
.tk-tabs__n { font-size: var(--fs-10); color: var(--text-count); }
.tk-tabs a[aria-selected="true"] .tk-tabs__n { color: var(--cyan); }
.tk-panel { display: flex; flex-direction: column; gap: var(--s-16); min-width: 0; scroll-margin-top: 60px; }
.tk-panel:focus { outline: none; }
.tk-panel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.tk-panel > .talk, .tk-panel > section.talk { border-top: 0; padding-top: 0; }
.tk-ph { display: flex; flex-direction: column; gap: var(--s-8); }
.tk-ph__t { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-13); letter-spacing: var(--track-label-wide); color: var(--text-2); }
.tk-ph__p { margin: 0; max-width: 64ch; }
.tk-ph__p a, .tl__go, .tl__x { color: var(--cyan); }

.pin { border: 1px solid var(--violet-line-dark); border-radius: var(--radius-card); background: var(--card); padding: var(--s-16) var(--s-18); display: flex; flex-direction: column; gap: var(--s-10); }
.pin__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8); }
.pin__t { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--track-label-wide); color: var(--violet-2); }
.tls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-10); }
.tl { --tone: var(--cyan); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-16) var(--s-18); display: flex; gap: var(--s-12);
  align-items: flex-start; transition: border-color var(--dur-fast); }
.tl:hover { border-color: var(--line-strong); }
.tl--violet { --tone: var(--violet-2); } .tl--amber { --tone: var(--amber); } .tl--blue { --tone: var(--ag-blue); }
.tl__badge { width: 36px; height: 36px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--inset);
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); color: var(--tone); }
.tl__ico path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tl__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-8); }
.tl__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6) var(--s-10); }
.tl__who { font-weight: 700; font-stretch: 108%; font-size: var(--fs-15); }
.tl__chip { font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label-mid); padding: 2px 6px; border-radius: var(--radius-control); color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent); }
.tl__time { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.tl__title { margin: 0; font-weight: 700; font-size: var(--fs-16); line-height: 1.4; overflow-wrap: anywhere; }
.tl__text { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.tl__quote { display: flex; flex-direction: column; gap: var(--s-4); border-left: 2px solid var(--line-strong); padding: var(--s-2) 0 var(--s-2) var(--s-12); font-size: var(--fs-14); color: var(--text-3); overflow-wrap: anywhere; }
.tl__qwho { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.tl__why { margin: 0; display: grid; gap: var(--s-6); font-size: var(--fs-14); line-height: 1.5; }
.tl__why div { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-10); }
.tl__why dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); padding-top: 2px; }
.tl__why dt.why { color: var(--cyan); } .tl__why dt.rule { color: var(--violet-2); } .tl__why dt.res { color: var(--text-3); }
.tl__why dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.tl__thumb { position: relative; width: 100%; max-width: 460px; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--line); padding: 0; cursor: pointer; display: flex;
  align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 30% 25%, rgba(232, 252, 255, .35), transparent 40%), linear-gradient(135deg, var(--a), var(--b)); }
.tl__thumb .mtile__len { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--text); background: rgba(5, 7, 13, .7); padding: 2px 6px; border-radius: var(--radius-control); }
.tl__chips { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.tl__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-16); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.tl__foot:empty { display: none; }
.tl__go, .tl__x { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.tl__go:hover, .tl__x:hover { text-decoration: underline; text-underline-offset: 4px; }
.tl__x { margin-left: auto; }
.tl[hidden] { display: none; }

.props, .dtalks { display: flex; flex-direction: column; gap: var(--s-12); }
.prop, .dtalk { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-18) var(--s-20); display: flex; flex-direction: column; gap: var(--s-12); }
.prop__top, .dtalk__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6) var(--s-10); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.prop__n { color: var(--violet-2); }
.prop__t, .dtalk__t { margin: 0; font-weight: 800; font-stretch: 110%; font-size: var(--fs-18); line-height: 1.3; color: var(--text); font-family: var(--font-display); letter-spacing: 0; }
.dtalk__t { font-size: var(--fs-16); font-weight: 700; }
.prop__dl { margin: 0; display: grid; gap: var(--s-10); }
.prop__dl div { display: grid; grid-template-columns: minmax(0, 170px) 1fr; gap: var(--s-12); }
.prop__dl dt { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label-mid); color: var(--text-4); padding-top: 3px; }
.prop__dl dd { margin: 0; font-size: var(--fs-15); line-height: 1.5; color: var(--text-2); }
.prop__go { align-self: flex-start; }
.dtalk__time { margin-left: auto; }
.dtalk__av { display: inline-flex; }
.fav { display: inline-block; width: 24px; height: 24px; border-radius: 7px; flex: none; background: linear-gradient(135deg, var(--a), var(--b)); }
.dtalk__av .fav + .fav { margin-left: -8px; box-shadow: 0 0 0 2px var(--card); }
.fav--36 { width: 36px; height: 36px; border-radius: 10px; }
.dtalk__line { display: flex; flex-direction: column; gap: var(--s-4); border-left: 2px solid var(--line-strong); padding-left: var(--s-12); font-size: var(--fs-15); line-height: 1.5; color: var(--text-2); }
.dtalk__line--me { border-left-color: var(--cyan); }
.dtalk__who { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.dtalk__line--me .dtalk__who { color: var(--cyan); }
.dtalk__foot { margin: 0; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }

.mk .label { margin: 0; }
.mk__full { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--cyan); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.mk__full:hover { text-decoration: underline; text-underline-offset: 4px; }
.mk__full--off { color: var(--text-4); gap: var(--s-6); }
.mk__full--off:hover { text-decoration: none; }
.pf__plain { color: var(--text-3); }
.stats--rail { flex: none; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); }
.stats--rail dd { font-size: var(--fs-20); }
.mk .chart { height: 150px; }
.friends { display: flex; flex-direction: column; gap: var(--s-10); }
.friend { display: flex; align-items: center; gap: var(--s-12); }
.friend__t { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.friend__n { font-weight: 700; font-size: var(--fs-15); }
.friend__s { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.friends__go { align-self: flex-start; }
.mini .between h3 { margin: 0; }
.crew__tabs { display: inline-flex; gap: var(--s-6); }
.crew__tabs button { min-height: 32px; padding: 0 var(--s-8); border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-10); letter-spacing: var(--track-label); color: var(--text-3); }
.crew__tabs button[aria-selected="true"] { border-color: var(--cyan); background: var(--cyan-tint); color: var(--text); }
.crew__panel { display: flex; flex-direction: column; gap: var(--s-14); }
.crew__hp { margin: 0; font-size: var(--fs-14); line-height: 1.55; color: var(--text-2); }
.crew__job { border: 1px dashed var(--line-strong); border-radius: var(--radius-inner); padding: var(--s-14); display: flex; flex-direction: column; gap: var(--s-8); }
.crew__job-top { display: flex; justify-content: space-between; gap: var(--s-8); font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--track-label); color: var(--text-4); }
.crew__job-v { color: var(--cyan); }
.crew__job-t { font-weight: 700; font-size: var(--fs-15); }
.crew__job-s { font-size: var(--fs-13); color: var(--text-3); }
.crew__job .btn { align-self: flex-start; }
@media (max-width: 560px) {
  .pf__body { padding: 0 var(--s-16) var(--s-18); }
  .pf__top { margin-top: -36px; }
  .pf__img { width: 76px; height: 76px; border-radius: 18px; }
  .pf__acts { width: 100%; }
  .pf__acts .pf__btn { flex: 1 1 auto; padding: 0 var(--s-12); }
  .tl { padding: var(--s-14); gap: var(--s-10); }
  .tl__badge { width: 30px; height: 30px; border-radius: 8px; }
  .tl__why div { grid-template-columns: 1fr; gap: 0; }
  .prop__dl div { grid-template-columns: 1fr; gap: var(--s-2); }
  .prop, .dtalk { padding: var(--s-16); }
}

/* ---------- v3.6 /import, Take over a token (DlImport) ---------- */
.imp-main { gap: var(--s-36); }
.imp__head { align-items: flex-end; }
.imp__head .lede { max-width: 640px; }
.imp__state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-10); max-width: 380px; font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: var(--track-label); color: var(--text-3); text-transform: uppercase; line-height: 1.6; }
.imp__open { display: inline-flex; align-items: center; gap: var(--s-8); color: var(--cyan); }
.imp__grid { display: flex; flex-wrap: wrap; gap: var(--s-32); align-items: flex-start; }
.imp__main { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-40); }
.imp__side { flex: 1 1 340px; min-width: 0; }
.imp__h { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-13); letter-spacing: var(--track-label-wide); color: var(--text-2); text-transform: uppercase; }
.imp__dl { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.imp__dl div { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: var(--s-8) var(--s-24); padding: var(--s-16) 0; border-bottom: 1px solid var(--line); }
.imp__dl dt { font-weight: 700; font-size: var(--fs-16); display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; }
.imp__dl dd { margin: 0; font-size: var(--fs-15); line-height: 1.6; color: var(--text-2); }
.imp__dl dd p { margin: 0 0 var(--s-8); } .imp__dl dd p:last-child { margin: 0; }
.imp__dl ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--s-6); }
.imp__mu { color: var(--text-4); }
.imp__keep { display: flex; flex-direction: column; gap: var(--s-10); }
.imp__keep li { display: flex; gap: var(--s-12); align-items: flex-start; font-size: var(--fs-15); line-height: 1.55; color: var(--text-2); }
.imp__keep .ico { color: var(--cyan); width: 20px; height: 20px; margin-top: 2px; }
.imp__steps { display: flex; flex-direction: column; gap: var(--s-14); }
.imp__steps li { display: flex; gap: var(--s-14); align-items: flex-start; }
.imp__n { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--cyan-edge); color: var(--cyan); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-12); }
.imp__st { font-weight: 700; font-size: var(--fs-16); display: inline-flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.imp__steps p { margin: var(--s-4) 0 0; font-size: var(--fs-15); line-height: 1.55; color: var(--text-3); }
.imp__ft { margin: 0; font-weight: 850; font-stretch: 125%; font-size: var(--fs-26); text-transform: uppercase; }
.imp__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--s-12); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--s-32); font-family: var(--font-display); font-size: var(--fs-15); }
.imp__note { min-height: 96px; padding: var(--s-12) var(--s-14); font-family: var(--font-display); font-size: var(--fs-15); line-height: 1.5; resize: vertical; }
.imp__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.imp__done:focus { outline: none; }
.imp__ok { margin: 0; display: inline-flex; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: var(--track-label); color: var(--cyan); }
.imp__ok svg { width: 16px; height: 16px; }
.btn[aria-disabled="true"] { pointer-events: auto; }
@media (max-width: 560px) { .imp__dl div { grid-template-columns: 1fr; } }
/* owner 30 Oct: /hive with less scroll: a compact hero (smaller title, art beside it, no art on phones), the posts and media right under it,
   the plan cards as a swipe row on phones */
.hv-hero .d-hive { font-size: clamp(34px, 3.8vw, 56px); }
.hv-hero .hv-art { max-width: 240px; }
@media (max-width: 760px) {
  .hv-hero__art { display: none; }
  .hv-ctas { flex-wrap: nowrap; } .hv-ctas .btn--lg { min-height: 44px; padding: 0 var(--s-14); font-size: var(--fs-12); flex: 1 1 auto; }
  .hjobs--plan { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-6); }
  .hjobs--plan > li { flex: 0 0 min(78%, 280px); scroll-snap-align: start; }
}