/* ==========================================================================
   NOCTIS — Modern Tech
   ==========================================================================
   The design is a fixed viewport frame: a ticker strip, a navigation rail
   that never scrolls, and one scrollable content column. The document itself
   does not scroll, which is why html and body are height-locked below.

   Three themes. data-theme is set on BOTH html and body — an element that
   inherits its colour rather than declaring one otherwise reads the wrong
   theme, which is a real bug and not a theoretical one.

   Every palette block is anchored with :where(:root), so only the document
   element can declare a theme. The wallet plugin marks its own connect
   container data-theme="dark" to pick a button style, and a bare attribute
   selector matched it: that div redefined the entire token set for its
   subtree, which rendered dark on a light page. :where() keeps the
   specificity identical to a bare attribute selector, so anchoring changes
   which elements match and nothing else about the cascade.

   Token roles, because several exist specifically to prevent mistakes:
     --blue     FILL only. On Dark it stays brand #2D3FFF, which is
                unreadable as text on a dark ground (2.91:1).
     --blue-t   accent TEXT. Every accent-coloured string uses this.
     --blue-d   kickers and secondary accent text.
     --on-blue  text sitting on a --blue fill.
     --c1..--c5 the five-hue cycle. Collapsed to one value on Light and
                Dark so cycling code can be written once and only express
                itself on Degen.
     --chip/-fg a filled status pill. Bright green reads 1.76:1 as text on
                paper but 10.53:1 as a chip, so green LABELS use the pair.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root,
:where(:root)[data-theme="light"] {
	--paper:#F6F6F3;   --surface:#FFFFFF;  --surface-2:#FAFAF7;
	--hover:#F1F1EC;   --desk:#E8E8E2;
	--rule:#E2E2DC;    --rule-2:#EFEFEA;   --rule-faint:#F0F0EB;  --rule-strong:#C9C9C2;
	--ink:#0B0D12;     --t2:#4A4F58;       --t3:#63676E;  --t4:#5F646D;  --t5:#666B74;
	--blue:#2D3FFF;    --blue-d:#2433D8;   --blue-h:#1E2ED6;      --blue-t:#2433D8;
	--panel:#F4F6FF;   --panel-2:#EFF1FB;  --panel-3:#EFF1F6;     --panel-rule:#D8DCEC;
	--panel-inset:#F2F4FF; --scan-track:#DDE1F5; --matrix-head:#E7EAFA;
	--green:#356A0F;   --green-2:#2F5F0D;  --amber:#745E0F;       --red:#B3121C;
	--chip:#7FD43A;    --chip-fg:#0B0D12;
	--track:#D6D6D0;   --bar-empty:#EFEFEA; --on-blue:#FFFFFF;
	--c1:#2D3FFF; --c2:#2D3FFF; --c3:#2D3FFF; --c4:#2D3FFF; --c5:#2D3FFF;
	--spear-glow:none; --mark-filter:none;
	--ring:rgba(60,66,76,.16);
	--glow:linear-gradient(0deg, rgba(45,63,255,.30) 0%, rgba(45,63,255,.16) 36%, rgba(45,63,255,.06) 66%, rgba(45,63,255,0) 100%);
}

/* System dark. Guarded so an explicit light choice still wins over a dark OS. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="degen"]) {
		--paper:#121212;   --surface:#1A1A1A;  --surface-2:#202020;
		--hover:#262626;   --desk:#0D0D0D;
		--rule:#2E2E2E;    --rule-2:#282828;   --rule-faint:#242424;  --rule-strong:#3F3F3F;
		--ink:#F2F2EF;     --t2:#C2C2C2;       --t3:#A6A6A6;  --t4:#9E9E9E;  --t5:#9A9A9A;
		--blue:#2D3FFF;    --blue-d:#8B96FF;   --blue-h:#4655FF;      --blue-t:#8B96FF;
		--panel:#15182B;   --panel-2:#141726;  --panel-3:#1B1B1B;     --panel-rule:#2E3350;
		--panel-inset:#1A1E36; --scan-track:#232840; --matrix-head:#1B2040;
		--green:#7FD43A;   --green-2:#7FD43A;  --amber:#D8B23F;       --red:#FF7B7F;
		--chip:#7FD43A;    --chip-fg:#121212;
		--track:#3A3A3A;   --bar-empty:#282828; --on-blue:#FFFFFF;
		--c1:#8B96FF; --c2:#8B96FF; --c3:#8B96FF; --c4:#8B96FF; --c5:#8B96FF;
		--spear-glow:0 0 22px rgba(45,63,255,.55); --mark-filter:invert(1);
		--ring:rgba(120,133,255,.16);
	}
}

/* Explicit choice. Repeated so the switcher wins in both directions. */
:where(:root)[data-theme="dark"] {
	--paper:#121212;   --surface:#1A1A1A;  --surface-2:#202020;
	--hover:#262626;   --desk:#0D0D0D;
	--rule:#2E2E2E;    --rule-2:#282828;   --rule-faint:#242424;  --rule-strong:#3F3F3F;
	--ink:#F2F2EF;     --t2:#C2C2C2;       --t3:#A6A6A6;  --t4:#9E9E9E;  --t5:#9A9A9A;
	--blue:#2D3FFF;    --blue-d:#8B96FF;   --blue-h:#4655FF;      --blue-t:#8B96FF;
	--panel:#15182B;   --panel-2:#141726;  --panel-3:#1B1B1B;     --panel-rule:#2E3350;
	--panel-inset:#1A1E36; --scan-track:#232840; --matrix-head:#1B2040;
	--green:#7FD43A;   --green-2:#7FD43A;  --amber:#D8B23F;       --red:#FF7B7F;
	--chip:#7FD43A;    --chip-fg:#121212;
	--track:#3A3A3A;   --bar-empty:#282828; --on-blue:#FFFFFF;
	--c1:#8B96FF; --c2:#8B96FF; --c3:#8B96FF; --c4:#8B96FF; --c5:#8B96FF;
	--spear-glow:0 0 22px rgba(45,63,255,.55); --mark-filter:invert(1);
	--ring:rgba(120,133,255,.16);
}

:where(:root)[data-theme="degen"] {
	--paper:#0B0E13;   --surface:#12161D;  --surface-2:#171C24;
	--hover:#1E242E;   --desk:#07090C;
	--rule:#242B35;    --rule-2:#1E242E;   --rule-faint:#1A1F27;  --rule-strong:#38414F;
	--ink:#F4F7FA;     --t2:#C7D0DC;       --t3:#A8B3C2;  --t4:#98A4B4;  --t5:#8E9AAB;
	--blue:#FF2FB0;    --blue-d:#FF8AD8;   --blue-h:#FF57C0;      --blue-t:#FF8AD8;
	--panel:#141A2B;   --panel-2:#111621;  --panel-3:#10141A;     --panel-rule:#2B3446;
	--panel-inset:#161C28; --scan-track:#232B38; --matrix-head:#16202E;
	--green:#00FFA3;   --green-2:#00FFA3;  --amber:#FFD400;       --red:#FF5C7A;
	--chip:#00FFA3;    --chip-fg:#07090C;
	--track:#2A3340;   --bar-empty:#161B22; --on-blue:#07090C;
	--c1:#FF2FB0; --c2:#00E5FF; --c3:#00FFA3; --c4:#FFD400; --c5:#FF7A1A;
	--mark-filter:invert(1); --spear-glow:0 0 26px rgba(255,47,176,.75);
	--ring:rgba(255,47,176,.20);
	--glow:linear-gradient(0deg, rgba(255,47,176,.34) 0%, rgba(122,43,255,.20) 34%, rgba(0,229,255,.10) 62%, rgba(0,255,163,0) 100%);
}

/* The retired theme's accent names, mapped onto the tokens at :root ---------
   create.css asks for --noctis-blue and its kin, and so does the Demo Mode
   plugin's connect button on every page. The theme used to PUBLISH these
   names itself, from three admin colour fields whose default was the retired
   blue (#0000FE) -- which is how the first screen a visitor saw stayed on the
   old palette after every page had moved. That emitter and those fields are
   gone; the names now resolve to the same tokens everything else reads, in
   all three themes, and there is no second place a colour can be set.

   An accent has two jobs and needs two values: the FILL is the brand colour,
   and the TEXT is that hue lifted or darkened until it reads on the ground it
   sits on. The -rgb triplets exist because a tint cannot be derived from a
   hex custom property in CSS, and create.css uses them inside rgba(). */
:root {
	--noctis-blue: var(--blue);
	--noctis-blue-text: var(--blue-t);
	--noctis-blue-rgb: 45, 63, 255;
	/* A legible foreground for the accent fill, and its hover. */
	--noctis-blue-fg: var(--on-blue);
	--noctis-blue-hover: var(--blue-h);
	--noctis-green: var(--green);
	/* The deeper of the two greens: the lighter one sits on its own 20% tint
	   in the verify badge, which lands at 4.26 against the 4.5 asked of it. */
	--noctis-green-text: var(--green-2);
	--noctis-green-rgb: 53, 106, 15;
	--noctis-red: var(--red);
	--noctis-red-text: var(--red);
	--noctis-red-rgb: 179, 18, 28;
	--noctis-yellow: var(--amber);

	/* Violet stays violet in every theme: it does not mean "accent", it means
	   Midnight Launch, and a launch type that changed colour with the reader's
	   theme would stop being recognisable. Darkened for the light ground. */
	--noctis-violet: #7B34C9;
	--noctis-violet-light: #5E2799;
	--noctis-violet-rgb: 123, 52, 201;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="degen"]) {
		--noctis-green-rgb: 127, 212, 58;
		--noctis-red-rgb: 255, 123, 127;
		--noctis-violet: #8844DD;
		--noctis-violet-light: #B07EE0;
		--noctis-violet-rgb: 136, 68, 221;
	}
}
:where(:root)[data-theme="dark"] {
	--noctis-green-rgb: 127, 212, 58;
	--noctis-red-rgb: 255, 123, 127;
	--noctis-violet: #8844DD;
	--noctis-violet-light: #B07EE0;
	--noctis-violet-rgb: 136, 68, 221;
}
:where(:root)[data-theme="degen"] {
	--noctis-blue-rgb: 255, 47, 176;
	--noctis-green-rgb: 0, 255, 163;
	--noctis-red-rgb: 255, 92, 122;
	--noctis-violet: #8844DD;
	--noctis-violet-light: #B07EE0;
	--noctis-violet-rgb: 136, 68, 221;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;                 /* the content column is the only scroller */
}

/* A visible scrollbar broke the rail and frame widths twice during design. */
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

body {
	background: var(--paper);
	color: var(--ink);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: Montserrat, system-ui, sans-serif;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-t); text-decoration: none; }
/* The pack sets a colour rather than an underline: an underline on every
   link fights the hairline aesthetic, and the ink shift is the whole signal. */
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: rgba(45,63,255,.18); }

.mt-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Any element given its own `display` outranks the hidden attribute, whose
   `display:none` comes from the UA stylesheet. The launch rows are grids, so
   filtering them set hidden and changed nothing visible while the count line
   correctly reported the smaller number. Restore the attribute's meaning. */
[hidden] { display: none !important; }

/* The mono/sans split is the core of the aesthetic: anything that is a label,
   a number or a machine value is mono. 9.5px is the floor — 8.5px labels
   failed contrast during design and were raised. */
.mt-mono,
.mt-kicker, .mt-label, .mt-pill, .mt-btn, .mt-stat-value, .mt-th, .mt-td {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	/* 1.4, not the body's 1.65: the specification's ramp for every mono role,
	   and what the pack's build draws (button 10/13, ticker 9.5/13.3, rail
	   number 9.5/13.3 -- measured). A table cell and a stat figure set their
	   own below. */
	line-height: 1.4;
}

.mt-kicker {
	font-size: 10px; font-weight: 600; letter-spacing: .18em;
	line-height: 1.4; color: var(--blue-d); text-transform: uppercase;
}
.mt-label {
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em;
	line-height: 1.4; color: var(--t4); text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Content measure
   --------------------------------------------------------------------------
   Header band and body share this EXACT rule. If they differ, the kicker
   visibly jogs sideways between pages. A fixed cap also left ~310px of dead
   space on the right at 2157px, which is why this tracks the viewport. */

.mt-measure {
	max-width: clamp(1180px, 92%, 2000px);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   4. Shell
   -------------------------------------------------------------------------- */

.mt-shell {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Ticker ------------------------------------------------------------------ */
.mt-ticker {
	line-height: 1.4;
	flex: none;
	height: 32px;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 22px;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--t3);
	white-space: nowrap;
	overflow: hidden;
}
.mt-ticker-status { display: inline-flex; align-items: center; gap: 6px; color: var(--green-2); flex: none; }
.mt-dot {
	width: 5px; height: 5px; border-radius: 50%;
	background: currentColor; flex: none;
	animation: mtBlink 2.2s ease-in-out infinite;
}
.mt-ticker-sep { width: 1px; height: 12px; background: var(--rule); flex: none; }
.mt-ticker-item--narrow { display: none; }

/* The phone header and tab bar --------------------------------------------
   Both are rendered on every page and neither is shown above 900px. Every
   value here was read off the pack's own mobile build rather than taken from
   the sentence describing it -- the specification says "header — 60px" and
   "tab bar — 44px + inset", which does not say what a tab's active state is
   drawn in or how tall an item really is.

   Note there is no scripting condition on any of this. The tab bar is six
   links and the header is a link, a select and a link; the navigation works
   with the stylesheet alone, which is why the rail can be dropped outright at
   this width rather than folded into something that needs a button to open. */
.mt-topbar {
	display: none;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* 60px of header ABOVE the rule, which is what the pack's build draws and
	   what "header -- 60px" means: a border-box 60px would spend one of those
	   pixels on the rule and leave 59 for the row. */
	height: 61px;
	padding: 0 18px;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}
/* The Design page's phone strip. Hidden HERE, outside the phone block, for
   the reason the sheet toggle taught: a rule inside a media query cannot hide
   a thing outside it, and the strip is in every page's DOM. */
.mt-doc-strip { display: none; }
.mt-topbar-mark { display: flex; align-items: center; }
.mt-topbar-mark img { display: block; height: 16px; width: auto; filter: var(--mark-filter); }
.mt-topbar-actions { display: flex; align-items: center; gap: 10px; }

/* Native, and left looking native. The one thing overridden is the type, so
   the closed control matches every other mono label on the page; the open
   list is the platform's and is not ours to style. */
.mt-theme-select {
	min-height: 44px;
	padding: 0 8px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface-2);
	color: var(--blue-t);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
	cursor: pointer;
}

/* The bar reserves the larger of the pack's own 30px and whatever safe area
   the device actually reports. The pack's build is a static mock: it draws a
   home indicator and leaves 30px under the labels for it, and env() reads 0
   in the browser that renders it. Adding the real inset on top of that 30px
   would double-count it -- 64px of dead space under the labels on any phone
   with a gesture bar -- so the two are taken as alternatives, not as a sum.
   A browser reporting no inset lands on 30px and matches the pack exactly. */
:root {
	--mt-tabbar-inset: max(30px, calc(8px + env(safe-area-inset-bottom, 0px)));
	/* One number for the height, because two things need it: the bar sets it,
	   and anything pinned above the bar offsets by it. 1px of rule, 8px of
	   padding and a 58px item, then the inset above. */
	--mt-tabbar-h: calc(67px + var(--mt-tabbar-inset));
}

.mt-tabbar {
	display: none;
	flex: none;
	gap: 2px;
	height: var(--mt-tabbar-h);
	padding: 8px 8px var(--mt-tabbar-inset);
	background: var(--panel-3);
	border-top: 1px solid var(--panel-rule);
}
/* 58px, not 44px: the pack's item is 44px of CONTENT inside 6px of padding
   and its 2px indicator, and a border-box 44px would put the padding and the
   indicator INSIDE the target rather than around it -- a smaller tap area
   than the reference, reading the specification's "44px minimum" as a
   maximum. The reference build is the design; its prose summarises it. */
.mt-tab {
	flex: 1 1 0; min-width: 0;
	display: flex; align-items: center; justify-content: center;
	min-height: 58px; padding: 6px 2px;
	border-top: 2px solid transparent;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.3;
	text-transform: uppercase;
	color: var(--t3); text-decoration: none;
	text-align: center;
}
.mt-tab:hover { text-decoration: none; }
/* The indicator is a top border rather than a bottom one: the bar is at the
   foot of the screen, so the edge nearest the content is the top. */
.mt-tab[aria-current="page"] {
	background: var(--surface);
	border-top-color: var(--blue);
	color: var(--blue-t);
}

/* Frame: rail + content --------------------------------------------------- */
.mt-frame { flex: 1; display: flex; min-height: 0; }

/* Rail -------------------------------------------------------------------- */
.mt-rail {
	width: 238px;
	flex: none;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-right: 1px solid var(--rule);
	overflow: hidden;                 /* must never scroll internally */
}

.mt-rail-top { flex: none; padding: 18px 16px 14px; border-bottom: 1px solid var(--rule); }
.mt-rail-mark { display: block; }
.mt-rail-mark img { height: 19px; width: auto; filter: var(--mark-filter); display: block; }

/* Two separate elements, not a <br> in a string. */
.mt-rail-sub {
	margin-top: 10px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 500; letter-spacing: .1em;
	line-height: 1.5; color: var(--t4);
}
.mt-rail-sub span { display: block; }

/* Ten rows expand on tall windows and compress on short ones. Verified
   520-1000px viewport height with every item visible. */
.mt-rail-nav { flex: 1; display: flex; flex-direction: column; padding: 8px; min-height: 0; }
.mt-rail-row {
	flex: 1 1 0; min-height: 22px; max-height: 44px;
	display: flex; align-items: center; gap: 10px;
	padding: 0 10px; border-radius: 4px;
	color: var(--t2); text-decoration: none;
}
.mt-rail-row:hover { background: var(--hover); text-decoration: none; }
.mt-rail-row[aria-current="page"] { background: var(--hover); color: var(--ink); }
.mt-rail-row[aria-current="page"] .mt-rail-num { color: var(--blue-t); }
.mt-rail-num {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.4;
	color: var(--t5); flex: none;
}
.mt-rail-label { font-size: 13.5px; font-weight: 500; line-height: 1.3; flex: 1; }
.mt-rail-count {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; color: var(--t4);
}

/* Row 07's label is the venue's WORDMARK, not a label.

   noctisswap.zone sets SWAP beside the Noctis mark in Montserrat 800 at the
   accent, and that lockup is how the venue is recognised. Setting it in the
   rail's own 13.5px/500 Inter would name the place correctly and still look
   like nothing -- a section of this site rather than a product with its own
   identity. So these six declarations are copied from .ns-brand-word, value
   for value.

   The colour is var(--blue-t) and NOT the pink it resolves to in Degen. Both
   sites define that token identically in all three themes -- #FF8AD8 Degen,
   #8B96FF dark, #2433D8 light -- so the token tracks the reader's theme on
   both sites at once, where a literal would be a magenta wordmark on a light
   page. */
.mt-rail-row--venue .mt-rail-label {
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--blue-t);
}

/* The venue's own mark, row 07.

   The venue is a row like any other now, so it takes .mt-rail-row whole and
   nothing here restyles it -- which is the point: it is a destination a reader
   picks the same way they pick Staking, and noctisswap.zone draws its own Swap
   row exactly this way. Only the arrow is left, and it is the one thing in
   this rail that means "leaves noctis.zone".

   It sits in the slot a count sits in and is drawn like one, so adding it
   cannot change the row's geometry. */
.mt-rail-out {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; color: var(--t5);
	flex: none;
}
.mt-rail-row:hover .mt-rail-out { color: var(--blue-t); }

/* Eleven rows share the nav column, and at the short end of the supported
   range they need help: eleven at their 22px floor want 242px of the 229px the
   nav has at a 520px viewport. The rail is overflow:hidden, so the excess is
   not scrolled to -- it is clipped, invisibly.

   Below 620px tall everything in the nav gives a little at once, rather than
   the rows keeping a floor the column cannot honour. Eleven at 20px is 220px
   of content into 237px of space, so it fits with room to spare. */
@media (max-height: 620px) {
	.mt-rail-nav { padding: 4px 8px; }
	.mt-rail-row { min-height: 20px; }
}

.mt-rail-bottom { flex: none; padding: 10px 12px 14px; display: grid; gap: 10px; }

/* Theme switcher ---------------------------------------------------------- */
.mt-themes {
	display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
	padding: 3px; background: var(--surface-2);
	border: 1px solid var(--rule); border-radius: 4px;
}
.mt-theme-btn {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
	min-height: 32px; padding: 7px 4px; border-radius: 3px;
	color: var(--t3); text-align: center;
}
.mt-theme-btn:hover { color: var(--ink); }
.mt-theme-btn[aria-pressed="true"] { background: var(--surface); color: var(--blue-t); }
.mt-theme-btn--degen { grid-column: 1 / -1; font-weight: 700; }

/* Degen, when it is NOT the active theme, drifts a low-opacity rainbow: a
   deliberate invitation. When active it takes the CTA gradient with white
   text. Both loops are seamless — first and last stop share a colour and the
   travel distance is exactly one tile width. Break either and it snaps. */
.mt-theme-btn--degen:not([aria-pressed="true"]) {
	background-image: linear-gradient(90deg,
		rgba(255,47,176,.20), rgba(122,43,255,.20), rgba(0,229,255,.20),
		rgba(0,255,163,.20), rgba(255,212,0,.20), rgba(255,47,176,.20));
	background-size: 220% 100%;
	animation: dgShimmer 7s linear infinite;
}
:where(:root)[data-theme="degen"] .mt-theme-btn--degen[aria-pressed="true"] {
	background-image: linear-gradient(90deg,#FF2FB0,#7A2BFF 55%,#00FFA3);
	background-size: 100% 100%;
	color: #FFFFFF;
	opacity: 1;
	animation: none;
}

/* Buttons ----------------------------------------------------------------- */
.mt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px;
	font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	border-radius: 4px; text-decoration: none; text-align: center;
}
.mt-btn:hover { text-decoration: none; }
.mt-btn--primary { background: var(--blue); color: var(--on-blue); }
.mt-btn--primary:hover { background: var(--blue-h); }
.mt-btn--ghost { background: var(--surface); border: 1px solid var(--rule-strong); color: var(--ink); }
.mt-btn--ghost:hover { background: var(--hover); }
.mt-btn--rail { width: 100%; }
/* The phone header's CTA. Full height, tighter sides and a size down: it
   shares 402px with a wordmark and a theme control. */
.mt-btn--top { min-height: 44px; padding: 0 14px; font-size: 10px; white-space: nowrap; }
/* The action inside a data row: shorter than a standalone button, because the
   row itself is only 14px taller than this. */
.mt-btn--row { min-height: 34px; padding: 0 14px; font-size: 10px; }
.mt-btn--hero { min-height: 50px; min-width: 266px; }

/* These five stops are deliberately darkened: brighter versions failed
   contrast against white at 11px. Every stop here clears 4.5:1. */
:where(:root)[data-theme="degen"] .mt-btn--hero.mt-btn--primary {
	background-image: linear-gradient(90deg,#A83A80 0%,#6E42BC 20%,#2D6099 40%,#1C7460 60%,#7E6522 80%,#A83A80 100%);
	background-size: 300% 100%;
	color: #FFFFFF;
	animation: dgDrift 14s linear infinite;
}
/* The app header's CTA takes the same drift, a touch faster: the pack's nav
   CTA is this gradient at 12s in every theme's Degen. */
:where(:root)[data-theme="degen"] .mt-btn--top.mt-btn--primary {
	background-image: linear-gradient(90deg,#A83A80 0%,#6E42BC 20%,#2D6099 40%,#1C7460 60%,#7E6522 80%,#A83A80 100%);
	background-size: 300% 100%;
	color: #FFFFFF;
	animation: dgDrift 12s linear infinite;
}

/* Content column ---------------------------------------------------------- */
/* A column, so the footer can be pushed to the bottom of it.
   On a short page -- Guides with one section open, Samples, About -- the
   footer used to stop wherever the content stopped, leaving a band of bare
   --paper under it that read as the page having failed to finish loading.
   min-width:0 on the children because a flex item defaults to min-width:auto,
   which would let the widest table push the column open instead of scrolling
   inside its own wrapper. */
.mt-content {
	flex: 1; overflow-y: auto; overflow-x: hidden;
	background: var(--paper);
	display: flex; flex-direction: column;
}
.mt-content > * { min-width: 0; flex: none; }
.mt-content > .mt-footer { margin-top: auto; }
/* flex:none above is load-bearing, not tidiness. This column is a flex
   container, so its bands are flex items and shrink by default -- and a band
   that sets overflow:hidden loses the automatic min-height:auto that would
   otherwise stop it shrinking past its own content. The header band does set
   it. On desktop its min-height:268px happened to hold it open; the moment
   that floor was lifted for the phone the band collapsed to its padding, 57px,
   and clipped the wordmark, the headline, the lede and both calls to action
   while the stat band drew over the top of them. A band is its content's
   height at every width. */

/* --------------------------------------------------------------------------
   4b. The shell on a phone
   --------------------------------------------------------------------------
   Lives at the FOOT of this file, not here. The pack lays the phone out
   separately rather than reflowing the desktop, so its rules override
   components declared all the way down to the footer — and at equal
   specificity the later rule wins, which a block placed here would lose.
   Search for "13. The phone layout". */

/* --------------------------------------------------------------------------
   5. Page header band
   --------------------------------------------------------------------------
   Full-bleed, with its own horizontal padding. The inner column must be
   UNPADDED — if both are padded the percentage resolves against the wrong
   box and that page's header comes out ~185px wider than the others.

   align-items:flex-start matters: centring made the kicker's position depend
   on copy length, and headers drifted up to 20px apart. */

.mt-head {
	position: relative;
	min-height: 268px;
	display: flex;
	align-items: flex-start;
	padding: 56px 48px 48px;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
	overflow: hidden;
}
.mt-head--hero { padding: 72px 48px 64px; text-align: center; }

.mt-head-glow {
	position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
	background: var(--glow);
	filter: blur(46px);
	pointer-events: none;
}
/* Opacities differ per theme on purpose — equal alpha does not read as equal
   strength across a light and a dark ground. */
.mt-head-rings {
	position: absolute; inset: 0;
	background: repeating-radial-gradient(circle at 18% 42%, transparent 0 26px, var(--ring) 26px 27px);
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 88%);
	mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 88%);
	pointer-events: none;
}
.mt-head--hero .mt-head-rings {
	background: repeating-radial-gradient(circle at 50% 44%, transparent 0 26px, var(--ring) 26px 27px);
}
.mt-head-inner { position: relative; width: 100%; }

.mt-head h1 {
	font-size: clamp(28px, 3.2vw, 44px); font-weight: 700;
	line-height: 1.08; letter-spacing: -.03em; margin: 14px 0 0;
}
.mt-head--hero h1 { font-size: clamp(30px, 4vw, 54px); line-height: 1.06; }
/* The specification's "big figure" ramp, used where a page leads with a number
   instead of the wordmark. --t4 rather than --ink: it is the loudest thing on
   the band by size alone, and giving it full ink weight as well would put it
   ahead of the sentence that says what it means. */
.mt-head-figure {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: clamp(56px, 9vw, 120px); font-weight: 700;
	line-height: 1; letter-spacing: -.02em;
	color: var(--t4);
}
.mt-head-lede {
	margin: 16px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--t2);
}
.mt-head--hero .mt-head-lede { margin-inline: auto; font-size: 17px; line-height: 1.6; }

/* Hero wordmark with its CSS strike ---------------------------------------
   The asset has had its baked-in strike erased so the line can be coloured
   per theme. It is STATIC: the solid end points at the S and it tapers
   toward the N. */
.mt-hero-mark { position: relative; width: 100%; max-width: 640px; margin: 28px auto 0; }
.mt-hero-mark img { display: block; width: 100%; filter: var(--mark-filter); }
.mt-hero-strike {
	position: absolute; left: -9%; right: 0; top: 50%; height: 7px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, rgba(45,63,255,.05), rgba(45,63,255,.38) 46%, var(--blue) 82%, var(--blue));
	clip-path: polygon(0 50%, 2% 0, 98% 0, 100% 50%, 98% 100%, 2% 100%);
	box-shadow: var(--spear-glow);
	pointer-events: none;
}
/* The two soft stops are literals rather than tokens, so Degen needs its own
   rule: without it the strike ran BLUE into magenta on that theme, because
   only the last two stops read --blue. */
:where(:root)[data-theme="degen"] .mt-hero-strike {
	background: linear-gradient(90deg, rgba(255,47,176,.05), rgba(255,47,176,.38) 46%, var(--blue) 82%, var(--blue));
}

.mt-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* --------------------------------------------------------------------------
   6. Sections and shared blocks
   -------------------------------------------------------------------------- */

.mt-section { padding: 60px 48px; }
.mt-section--surface { background: var(--surface); border-bottom: 1px solid var(--rule); }
.mt-section h2 {
	font-size: clamp(23px, 2.5vw, 34px); font-weight: 700;
	line-height: 1.14; letter-spacing: -.025em; margin: 12px 0 0;
}
.mt-section-intro { margin: 14px 0 0; max-width: 70ch; color: var(--t2); }

/* Stat band — sits outside and below a header band, full width. */
.mt-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	background: var(--surface); border-bottom: 1px solid var(--rule);
}
.mt-stat { padding: 22px 24px; border-right: 1px solid var(--rule); }
.mt-stat:last-child { border-right: 0; }
.mt-stat-value {
	display: block; font-size: 25px; font-weight: 700;
	line-height: 1; letter-spacing: -.02em; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
/* One accented figure per stat band, on the number the page is really about.
   The reference uses it on the DarkVeil window and nowhere else. */
.mt-stat-value--accent { color: var(--blue-t); }
.mt-stat .mt-label { display: block; margin-top: 8px; }
/* A third line under the label, for a stat that needs a qualifier: what the
   figure counts, or why it is a dash. */
.mt-stat-sub { display: block; margin-top: 6px; font-size: 12px; color: var(--t3); }

/* Hairline grid — cards share a 1px rule rather than carrying shadows. */
.mt-grid {
	display: grid; gap: 1px; background: var(--rule);
	border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
.mt-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mt-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mt-grid--5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Fixed column counts, for a grid whose item count is known.
   auto-fit only collapses a track that is empty in EVERY row, so a six-item
   grid in a container wide enough for four columns fills the first row and
   leaves two tracks of bare container showing on the second — a solid block
   in the hairline colour, the size of a card. Where the item count is fixed
   in the template, the column count is fixed here to divide into it. */
.mt-grid--fixed-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-grid--fixed-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.mt-grid--fixed-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mt-grid--fixed-2 { grid-template-columns: minmax(0, 1fr); }
}
.mt-cell { background: var(--surface); padding: 24px; }
.mt-cell h3 { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 10px 0 0; }
.mt-cell p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--t2); }
.mt-cell-num {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--blue-t);
}

/* The hue cycle only expresses itself on Degen, because Light and Dark
   collapse c1..c5 to a single value. Written once, here. */
.mt-cell:nth-child(5n+1) .mt-cell-num { color: var(--c1); }
.mt-cell:nth-child(5n+2) .mt-cell-num { color: var(--c2); }
.mt-cell:nth-child(5n+3) .mt-cell-num { color: var(--c3); }
.mt-cell:nth-child(5n+4) .mt-cell-num { color: var(--c4); }
.mt-cell:nth-child(5n+5) .mt-cell-num { color: var(--c5); }

/* A whole cell that is a link. */
.mt-cell--link { display: block; color: inherit; text-decoration: none; }
.mt-cell--link:hover { background: var(--surface-2); text-decoration: none; }
.mt-cell--link h3 { color: var(--ink); }

/* Spec matrix -------------------------------------------------------------
   Replaced four near-identical stacked cards. A reader compares chains ACROSS
   a row, which is the entire reason it is a table and not cards. It keeps a
   min-width and scrolls inside its own container rather than letting the page
   scroll sideways. */

.mt-matrix {
	width: 100%; min-width: 760px;
	border-collapse: collapse;
	border: 1px solid var(--rule);
	border-radius: 4px;
	font-size: 12px;
}
.mt-matrix thead th {
	background: var(--panel-2); color: var(--ink);
	text-align: left; vertical-align: top;
	padding: 14px 16px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-weight: 600; letter-spacing: .06em;
	border-right: 1px solid var(--panel-rule);
}
/* The row-label column names itself, rather than being announced only to a
   screen reader: sighted readers need to know what the first column IS
   before the four beside it mean anything. */
.mt-matrix-spec {
	display: block; font-size: 9.5px; font-weight: 600;
	letter-spacing: .13em; text-transform: uppercase; color: var(--t4);
}
.mt-matrix thead th:last-child { border-right: 0; }
.mt-matrix-name { display: block; font-size: 12px; margin-bottom: 8px; }

.mt-matrix tbody th {
	text-align: left; font-weight: 500; color: var(--t2);
	padding: 11px 16px; background: var(--matrix-head);
	border-right: 1px solid var(--rule);
	font-size: 12px; white-space: nowrap;
}
.mt-matrix td {
	padding: 11px 16px; color: var(--t2);
	border-right: 1px solid var(--rule-2);
	font-size: 12px; font-weight: 500; line-height: 1.5;
	vertical-align: middle;
}
.mt-matrix td:last-child { border-right: 0; }
.mt-matrix tbody tr { border-top: 1px solid var(--rule-2); }
.mt-matrix td.is-primary { color: var(--ink); }
.mt-matrix tbody tr:hover td { background: var(--surface-2); }

.mt-btn--disabled {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 34px; padding: 0 14px; border-radius: 4px;
	border: 1px solid var(--rule); color: var(--t5);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	cursor: not-allowed;
}
.mt-matrix .mt-btn--primary { min-height: 34px; font-size: 9.5px; padding: 0 14px; }

/* Status pills ------------------------------------------------------------ */
.mt-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 8px; border-radius: 3px;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.mt-pill--chip { background: var(--chip); color: var(--chip-fg); }
.mt-pill--muted { background: none; color: var(--t5); }
/* A launch state that is neither live nor DarkVeil (graduated): the pack's
   fallthrough pill on both of its builds, the hover tint under --t3. Not the
   same pill as an unavailable column's ANNOUNCED, which the pack leaves
   unfilled -- that stays --muted. */
.mt-pill--done { background: var(--hover); color: var(--t3); }
/* A chain label, not a status. It was taking the green --chip pair, which is
   the same fill the LIVE status uses -- so on a card the chain and the state
   read as two facts of the same kind. Midnight takes the accent; Cardano
   stays outlined, the way the launch pages already badge a chain. */
.mt-pill--chain {
	background: none; color: var(--t2);
	border: 1px solid var(--rule-strong);
}
.mt-pill--chain-midnight {
	background: var(--blue); color: var(--on-blue);
	border-color: var(--blue);
}
.mt-pill--live { background: color-mix(in srgb, var(--green) 12%, var(--surface)); color: var(--green); }
.mt-pill--dv { background: color-mix(in srgb, var(--blue-d) 10%, var(--surface)); color: var(--blue-d); }
.mt-pill--warn { background: color-mix(in srgb, var(--amber) 12%, var(--surface)); color: var(--amber); }
.mt-pill--fail { background: color-mix(in srgb, var(--red) 10%, var(--surface)); color: var(--red); }

/* Wide content scrolls inside its own container; the page body never
   scrolls sideways. */
.mt-scroll-x { overflow-x: auto; }

/* Redaction bar — one gradient and one track token for all four surfaces
   that use it, so a change reaches every one. */
.mt-redact {
	height: 10px; border-radius: 2px;
	background-image: linear-gradient(100deg, var(--scan-track) 0%, var(--scan-track) 38%, var(--blue) 50%, var(--scan-track) 62%, var(--scan-track) 100%);
	background-size: 200% 100%;
	animation: mtScan 3.6s linear infinite;
}
:where(:root)[data-theme="degen"] .mt-redact {
	background-image: linear-gradient(100deg, var(--scan-track) 0%, var(--scan-track) 12%, #FF2FB0 22%, #FF7A1A 31%, #FFD400 40%, #00FFA3 49%, #00E5FF 58%, #7A2BFF 67%, #FF2FB0 76%, var(--scan-track) 88%, var(--scan-track) 100%);
}

/* Launches table ----------------------------------------------------------
   A grid rather than a table element, because the row is the hit area and a
   real <a> per row beats a JS click handler. It keeps a min-width and scrolls
   inside its own container; the page body never scrolls sideways. */

.mt-rows { min-width: 820px; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--surface); }
.mt-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr .9fr 1.1fr 1.1fr 130px;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--rule-2);
	color: inherit;
	text-decoration: none;
}
.mt-row:first-child { border-top: 0; }
.mt-rows a.mt-row:hover { background: var(--surface-2); text-decoration: none; }

.mt-row--head {
	background: var(--matrix-head);
	border-top: 0;
	padding-top: 11px; padding-bottom: 11px;
}
.mt-th {
	font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--t4);
}

/* Token cell: a letter avatar until a real logo exists. */
.mt-token { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mt-avatar {
	width: 34px; height: 34px; flex: none; border-radius: 4px;
	background: var(--panel); border: 1px solid var(--panel-rule);
	display: flex; align-items: center; justify-content: center;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px; font-weight: 700; color: var(--blue-t);
	overflow: hidden;
}
.mt-avatar img { width: 100%; height: 100%; object-fit: fill; display: block; }
.mt-token-name { font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; }
.mt-token-ticker {
	display: block; font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; color: var(--t4); margin-top: 2px;
}
/* The chain after the ticker is a phone-only reading of the Chain column;
   hidden here so the table never says a chain twice. */
.mt-token-chain { display: none; }

.mt-td { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--t2); font-variant-numeric: tabular-nums; }

/* Curve cell: the figure above its own track. */
.mt-track {
	display: block; height: 4px; margin-top: 1px;
	border-radius: 2px; background: var(--bar-empty);
	border: 1px solid var(--rule);
	overflow: hidden;
}
.mt-track-fill { display: block; height: 100%; background: var(--blue); max-width: 100%; }

.mt-curve-pct {
	display: block; font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 600; color: var(--t2); margin-bottom: 5px;
	font-variant-numeric: tabular-nums;
}

/* Filters ----------------------------------------------------------------- */
.mt-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mt-chip {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px;
	/* No ground of its own: the pack's chip is a rule around the page's
	   ground, so on paper it is paper and on the surface it is the surface. */
	color: var(--t3); background: transparent;
}
.mt-chip:hover { color: var(--ink); border-color: var(--rule-strong); }
.mt-chip[aria-pressed="true"] {
	background: color-mix(in srgb, var(--blue) 8%, var(--paper));
	color: var(--blue-t);
	border-color: var(--blue);
}
/* A chain nobody can filter by yet. The chip stays in the row so a reader
   sees the chain exists, carries the same mark the Create Wizard's cards
   use, and does nothing. */
.mt-chip--later {
	display: inline-flex; align-items: center; gap: 8px;
	opacity: .55; cursor: default;
}
.mt-chip--later:hover { color: var(--t3); border-color: var(--rule); }
.mt-chip--later .build-status-badge { padding: 2px 6px; font-size: 8.5px; }
/* A chain nobody can filter by yet. The chip stays in the row so a reader
   sees the chain exists, carries the same mark the Create Wizard's cards
   use, and does nothing. */
.mt-chip--later {
	display: inline-flex; align-items: center; gap: 8px;
	opacity: .55; cursor: default;
}
.mt-chip--later:hover { color: var(--t3); border-color: var(--rule); }
.mt-chip--later .build-status-badge { padding: 2px 6px; font-size: 8.5px; }
/* A chain nobody can filter by yet. The chip stays in the row so a reader
   sees the chain exists, carries the same mark the Create Wizard's cards
   use, and does nothing. */
.mt-chip--later {
	display: inline-flex; align-items: center; gap: 8px;
	opacity: .55; cursor: default;
}
.mt-chip--later:hover { color: var(--t3); border-color: var(--rule); }
.mt-chip--later .build-status-badge { padding: 2px 6px; font-size: 8.5px; }
.mt-filters-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-top: 24px; }

/* Degen cycles the five hues down a list -- the pack's chips and its row
   actions both do, on the desktop and the phone alike. A chip wears its hue
   as an outline and fills with it when pressed; an action fills with its.
   Both are keyed on position, so the same launch keeps its colour when a
   filter hides its neighbours. The row list starts at the head row, which is
   why the action cycle is offset by one. */
:where(:root)[data-theme="degen"] .mt-filters .mt-chip:nth-child(5n+1) { --dg-hue: var(--c1); }
:where(:root)[data-theme="degen"] .mt-filters .mt-chip:nth-child(5n+2) { --dg-hue: var(--c2); }
:where(:root)[data-theme="degen"] .mt-filters .mt-chip:nth-child(5n+3) { --dg-hue: var(--c3); }
:where(:root)[data-theme="degen"] .mt-filters .mt-chip:nth-child(5n+4) { --dg-hue: var(--c4); }
:where(:root)[data-theme="degen"] .mt-filters .mt-chip:nth-child(5n+5) { --dg-hue: var(--c5); }
:where(:root)[data-theme="degen"] .mt-filters .mt-chip { color: var(--dg-hue); border-color: var(--dg-hue); background: transparent; }
:where(:root)[data-theme="degen"] .mt-filters .mt-chip[aria-pressed="true"] { background: var(--dg-hue); color: #07090C; }
:where(:root)[data-theme="degen"] .mt-rows > .mt-row:nth-child(5n+2) .mt-btn--row { --dg-hue: var(--c1); }
:where(:root)[data-theme="degen"] .mt-rows > .mt-row:nth-child(5n+3) .mt-btn--row { --dg-hue: var(--c2); }
:where(:root)[data-theme="degen"] .mt-rows > .mt-row:nth-child(5n+4) .mt-btn--row { --dg-hue: var(--c3); }
:where(:root)[data-theme="degen"] .mt-rows > .mt-row:nth-child(5n+5) .mt-btn--row { --dg-hue: var(--c4); }
:where(:root)[data-theme="degen"] .mt-rows > .mt-row:nth-child(5n+6) .mt-btn--row { --dg-hue: var(--c5); }
:where(:root)[data-theme="degen"] .mt-rows > .mt-row .mt-btn--row { background: var(--dg-hue, var(--blue)); color: #07090C; }

/* Empty state ------------------------------------------------------------- */
.mt-empty {
	border: 1px solid var(--rule); border-radius: 4px; background: var(--surface);
	padding: 48px 32px; text-align: center;
}
.mt-empty h3 { font-size: 17px; font-weight: 600; }
.mt-empty p { margin: 10px auto 0; max-width: 52ch; color: var(--t3); font-size: 13.5px; }

/* ZK certificate panel ----------------------------------------------------
   Two halves that must read differently: the left is checkable, the right is
   permanently hidden. The redaction bars are the point of the right half. */
.mt-cert { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.mt-cert-half { padding: 24px 26px; background: var(--surface); }
.mt-cert-half--private { background: var(--panel); }
.mt-cert-half h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
/* Was an inline style on the element, which no media query can reach: an
   inline declaration outranks every stylesheet rule short of !important, so
   the phone's own type scale could not raise it. */
.mt-cert-lede { margin: 0; font-size: 13px; color: var(--t3); }
.mt-cert-half--public h3 { color: var(--green); }
.mt-cert-list { display: grid; gap: 12px; margin-top: 18px; }
.mt-cert-item { display: grid; gap: 6px; }
.mt-cert-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12.5px; font-weight: 600; color: var(--ink);
	font-variant-numeric: tabular-nums; word-break: break-all;
}

/* The launch types, as cards ----------------------------------------------
   The phone shape of the spec matrix: the table's columns, stood up as cards
   in a rail you swipe, with each row read down one instead of across four.
   Hidden above the breakpoint, where the table is the better instrument --
   comparing chains ACROSS a row is the whole reason the matrix exists, and a
   card cannot do that.

   Sizes are the pack's own: a 196px card inside a 1px border, a 14px head, a
   6px/14px/14px body, rows at 8px 0 with a 10px gap. The head names the chain
   in a 12px mono cap (CARDANO), not the table's sentence-case launch name, and
   a value is a --t2 figure at 500, with three tones the data file assigns:
   ink for the fee, green for DarkVeil, the accent for Midnight's privacy. */
.mt-chain-rail { display: none; }

.mt-chain-card {
	flex: none;
	width: 196px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 4px;
	overflow: hidden;
}
/* The one chain a creator can actually pick today wears the accent, on its
   border and on its head. The others are present and plainly not selectable,
   which is the same thing the table's status pill says in its own row. */
.mt-chain-card--live { border-color: var(--blue); }

.mt-chain-head {
	padding: 14px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--rule);
}
.mt-chain-card--live .mt-chain-head {
	background: var(--matrix-head);
	border-bottom-color: var(--blue);
}
.mt-chain-name {
	display: block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .05em;
	text-transform: uppercase; color: var(--ink);
}
.mt-chain-status {
	display: block; margin-top: 5px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase; color: var(--t4);
}
.mt-chain-card--live .mt-chain-status { color: var(--green); }

.mt-chain-body { padding: 6px 14px 14px; }
/* Label left, figure right, and the figure keeps the right edge however many
   lines it takes -- these values are read down the card and compared with the
   card beside it, so they have to start from the same place. */
.mt-chain-row {
	display: flex; gap: 10px; justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--rule-2);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; line-height: 1.5;
}
.mt-chain-row:last-of-type { border-bottom: 0; }
.mt-chain-label { flex: none; font-weight: 500; color: var(--t4); }
.mt-chain-value { text-align: right; font-weight: 500; color: var(--t2); }
.mt-chain-value--ink { color: var(--ink); }
.mt-chain-value--green { color: var(--green); }
.mt-chain-value--accent { color: var(--blue-t); }
.mt-chain-cta { width: 100%; margin-top: 14px; }

/* --------------------------------------------------------------------------
   Document pages: Design and Guides
   --------------------------------------------------------------------------
   Both are a sticky numbered sidebar beside an article column. Built once
   here so the two cannot drift apart, since a reader moving between them
   should feel one page with different content rather than two designs. */

.mt-doc {
	display: grid;
	grid-template-columns: minmax(190px, 230px) 1fr;
	gap: 40px;
	align-items: start;
}
.mt-doc-nav { position: sticky; top: 24px; display: grid; gap: 2px; }
/* The rows in their own box. On a wide screen this changes nothing -- both
   the nav and the list are 2px grids, so the note still sits 2px under the
   last row. It exists so the phone can turn the LIST into a strip without
   the note being dealt into the same row. */
.mt-doc-list { display: grid; gap: 2px; }
.mt-doc-link {
	display: flex; align-items: baseline; gap: 10px;
	padding: 9px 12px; border-radius: 4px;
	color: var(--t2); text-decoration: none; font-size: 13px; line-height: 1.35;
}
.mt-doc-link:hover { background: var(--hover); text-decoration: none; }
.mt-doc-link.is-active {
	background: color-mix(in srgb, var(--blue) 8%, var(--paper));
	color: var(--blue-d);
}
.mt-doc-link.is-active .mt-doc-num { color: var(--blue-t); }
.mt-doc-num {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
	color: var(--t5); flex: none;
}

.mt-doc-body { min-width: 0; }

/* Guides: category heads and accordions ---------------------------------- */
.hg-cat { scroll-margin-top: 24px; }
/* Sections a selection-driven sidebar has switched away from, on Guides and
   on Design. `hidden` alone is only a UA default and loses to any rule that
   sets display, so it is stated for both. */
.hg-cat[hidden],
.mt-doc-section[hidden] { display: none; }
/* The way out of the page, below whichever guide is open. */
.hg-cta-section { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); }
.hg-cta-section h2 { margin: 0; }
.hg-cat + .hg-cat { margin-top: 48px; }
.hg-cat-head { margin-bottom: 18px; }
.hg-cat-title {
	font-family: Montserrat, sans-serif;
	font-size: clamp(21px, 2.2vw, 30px); font-weight: 700;
	line-height: 1.15; letter-spacing: -.025em; margin: 0;
}
.hg-cat-desc { margin: 10px 0 0; color: var(--t2); font-size: 14px; }

.hg-guide {
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface); margin-top: 10px; overflow: hidden;
}
.hg-guide-head {
	display: flex; align-items: center; gap: 14px;
	min-height: 56px; padding: 0 18px;
	cursor: pointer; list-style: none;
}
.hg-guide-head::-webkit-details-marker { display: none; }
.hg-guide[open] .hg-guide-head { background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.hg-guide-title { flex: 1; font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 600; }
.hg-guide-tag {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	padding: 4px 8px; border-radius: 3px;
	/* Accent text on the accent panel, as the pack draws it (its screen 7, measured);
	   9.5px kept where the build has 8.5, which is under the floor the
	   specification itself sets. */
	background: var(--panel); color: var(--blue-t); white-space: nowrap;
}
/* The marker is generated, so the open and closed states cannot disagree. */
.hg-guide-head::after {
	content: "+";
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 15px; font-weight: 500; color: var(--t4); flex: none;
}
.hg-guide[open] .hg-guide-head::after { content: "\2212"; }

.hg-guide-body { padding: 20px 18px 22px; }
.hg-guide-body > p { color: var(--t2); font-size: 13.5px; line-height: 1.7; }

.hg-steps { list-style: none; counter-reset: hg; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
/* The number sits in a gutter, and the step is one sentence.
   NOT a two-column grid, which is what this was: a grid container makes a
   separate item of every child AND of every run of bare text between them, so
   "wallet such as <strong>Eternl</strong> or <strong>Lace</strong> and set
   it" became five items dealt alternately into a 26px column and a wide one --
   the sentence came out as a staircase, at every width, with the emphasised
   words squeezed into the number's gutter. Absolute positioning keeps the
   gutter and leaves the text a single inline flow. */
.hg-steps li {
	counter-increment: hg;
	position: relative;
	padding-left: 30px;
	font-size: 13.5px; line-height: 1.7; color: var(--t2);
}
.hg-steps li::before {
	content: counter( hg, decimal-leading-zero );
	position: absolute; left: 0; top: 4px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; color: var(--blue-t);
}
.hg-steps li strong { color: var(--ink); font-weight: 600; }

.hg-note {
	margin-top: 16px; padding: 12px 14px;
	border-left: 2px solid var(--green);
	background: var(--surface-2);
	font-size: 13px; line-height: 1.65; color: var(--t2);
}

.hg-list { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.7; color: var(--t2); }
.hg-list strong { color: var(--ink); font-weight: 600; }

/* Design page -------------------------------------------------------------
   Its sections render one of a few shapes — a numbered list, a card grid, the
   CTO diagram, the fee bar — so the families below are styled as those shapes
   rather than one rule per class. The markup is the page's own, restyled; the
   words are unchanged. */

.mt-doc-body > section { scroll-margin-top: 24px; }
.mt-doc-body > section + section { margin-top: 48px; }
/* The old measure. The article column already constrains width, so this only
   needs to stop imposing a second one. */
.mt-doc-body .container { max-width: none; width: 100%; padding: 0; margin: 0; }

.design-section-title,
.mt-doc-body .section-title {
	font-family: Montserrat, sans-serif;
	font-size: clamp(21px, 2.2vw, 30px); font-weight: 700;
	line-height: 1.15; letter-spacing: -.025em;
	margin: 0 0 6px; color: var(--ink);
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.mt-doc-body .section-tag {
	display: inline-block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 600; letter-spacing: .18em;
	text-transform: uppercase; color: var(--blue-d); margin-bottom: 8px;
}
.mt-doc-body .section-sub,
.design-curve-note,
.design-lc-intro { color: var(--t2); font-size: 13.5px; line-height: 1.7; margin: 8px 0 0; max-width: 72ch; }
.mt-doc-body .section-header { margin-bottom: 18px; }

/* Small state badges that ride alongside a heading. */
.design-lc-solo-badge,
.build-status-badge,
.design-tier-buildstatus {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	padding: 4px 8px; border-radius: 3px;
	background: var(--hover); color: var(--t3); white-space: nowrap;
}

/* CTO flow: a rail of selectable stages beside a detail panel. */
.design-ctoflow { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 20px 24px; margin-top: 20px; align-items: start; }
@media (max-width: 820px) { .design-ctoflow { grid-template-columns: 1fr; } }

/* Three children, not two: the heading row comes before the rail and the
   panel, so without this it takes the rail's column and pushes everything
   one cell round. */
.design-ctoflow-head {
	grid-column: 1 / -1;
	display: flex; flex-wrap: wrap; gap: 8px 16px;
	justify-content: space-between; align-items: baseline;
}
.design-ctoflow-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 600; letter-spacing: .18em;
	text-transform: uppercase; color: var(--blue-d);
}
.design-ctoflow-src { font-size: 12.5px; margin-left: 10px; }
.design-ctoflow-hint {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--t4);
}
.design-ctoflow-rail { display: grid; gap: 2px; }
.design-ctoflow-node {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; border-radius: 4px;
	font-size: 13px; color: var(--t2); text-align: left; width: 100%;
}
.design-ctoflow-node:hover { background: var(--hover); }
.design-ctoflow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); flex: none; }
.design-ctoflow-conn { display: none; }

.design-ctoflow-panel {
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface); padding: 24px 26px;
	display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
}
.design-ctoflow-badge {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 15px; font-weight: 700; color: var(--blue-t);
	border: 1px solid var(--rule); border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	height: 44px; background: var(--panel);
}
.design-ctoflow-eyebrow {
	display: block; font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--t4);
}
.design-ctoflow-title { font-family: Montserrat, sans-serif; font-size: 17px; font-weight: 700; margin: 8px 0 0; }
.design-ctoflow-desc { margin: 10px 0 0; color: var(--t2); font-size: 13.5px; line-height: 1.7; }
.design-ctoflow-meta { margin-top: 14px; font-size: 12.5px; color: var(--t3); }

/* Progress bar ------------------------------------------------------------
   display:block is load-bearing, not tidiness: these are spans inside a grid
   cell, and height does not apply to an inline box — the track rendered as
   nothing at all until this was set. */
.mt-track { display: block; height: 5px; border-radius: 2px; background: var(--bar-empty); overflow: hidden; }
.mt-track-fill { display: block; height: 100%; background: var(--blue); }


/* Terms: legal prose ------------------------------------------------------
   The article column of a terms page is plain prose, so it is the one place
   in this stylesheet that styles bare elements rather than classes. Scoped
   under .mt-legal so it cannot reach the Design or Guides bodies, which
   style their own families and would otherwise inherit this measure.

   The lede and the notice are raised by a two-class selector rather than by
   !important, so anything later still has somewhere to go. */
.mt-legal { max-width: 74ch; }
.mt-legal > section { scroll-margin-top: 24px; }
.mt-legal > section + section { margin-top: 40px; }

.mt-legal h2 {
	display: flex; align-items: baseline; gap: 12px;
	font-family: Montserrat, sans-serif;
	font-size: clamp(18px, 1.7vw, 23px); font-weight: 700;
	line-height: 1.2; letter-spacing: -.02em;
	margin: 0 0 12px;
}
/* The clause number, matching the sidebar row that points here. */
.mt-legal .mt-legal-num {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 600; letter-spacing: .06em;
	color: var(--blue-t); flex: none;
}

.mt-legal p { margin: 0 0 12px; color: var(--t2); font-size: 14px; line-height: 1.75; }
.mt-legal p:last-child { margin-bottom: 0; }
.mt-legal strong { color: var(--ink); font-weight: 600; }
.mt-legal a { color: var(--blue-t); }

.mt-legal .mt-legal-lede {
	font-size: 15px; color: var(--ink); margin-bottom: 40px;
}

.mt-legal-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.mt-legal-list li {
	position: relative; padding-left: 18px;
	color: var(--t2); font-size: 14px; line-height: 1.75;
}
.mt-legal-list li::before {
	content: ""; position: absolute; left: 0; top: 10px;
	width: 5px; height: 5px; border-radius: 50%; background: var(--t5);
}

/* The draft warning, and the two clauses that still need legal review. Both
   are marked rather than merely italic: a reader has to be able to tell a
   placeholder from a term that binds them. */
.mt-legal .mt-legal-notice {
	border: 1px solid var(--rule);
	border-left: 2px solid var(--amber);
	background: var(--surface);
	border-radius: 4px; padding: 14px 16px;
	font-size: 13px; line-height: 1.65; color: var(--t2);
	margin: 0 0 28px;
}
.mt-legal-todo {
	display: inline-block;
	font-style: normal;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; color: var(--t3);
	background: var(--hover); border-radius: 3px; padding: 2px 7px;
}


/* Form controls -----------------------------------------------------------
   A select and a search field, sized to sit on the same row as the filter
   chips without any of the three looking taller than the others. */
.mt-select,
.mt-search {
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 12px;
	line-height: 1;
}
.mt-search { min-width: 210px; }
.mt-select { padding-right: 26px; }
.mt-select:focus-visible,
.mt-search:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
}
.mt-search::placeholder { color: var(--t5); }

/* Staking -----------------------------------------------------------------
   The classes here are shared with assets/js/staking-page.js, which writes
   the portfolio rows itself — see the contract note in staking-content.php.
   .stk-my-row and .stk-mine-gate-note exist only in that script's output,
   which is why nothing in the templates renders them. */
.stk-mine-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; margin-bottom: 14px;
}
.stk-mine-head .mt-kicker { margin: 0; }

.stk-gate { display: grid; justify-items: center; gap: 6px; }
.stk-gate .stk-connect-mount { margin-top: 14px; }

.stk-my-list { display: grid; gap: 8px; margin-top: 20px; }
.stk-mine-gate-note { margin: 0; color: var(--t3); font-size: 13px; }

/* One portfolio row: who, how much, what is owed, and a way in. */
.stk-my-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr .9fr auto;
	align-items: center; gap: 18px;
	padding: 14px 16px;
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface);
	color: inherit; text-decoration: none;
}
.stk-my-row:hover { background: var(--hover); text-decoration: none; }
@media (max-width: 760px) {
	.stk-my-row { grid-template-columns: 1fr 1fr; row-gap: 10px; }
}

.stk-my-row-id { display: grid; gap: 2px; min-width: 0; }
.stk-my-row-name { font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 600; }
.stk-my-row-ticker,
.stk-my-row-status,
.stk-my-row-earned-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--t4);
}
.stk-my-row-meta,
.stk-my-row-rewards { display: grid; gap: 2px; min-width: 0; }
.stk-my-row-staked { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--t2); }
.stk-my-row-earned {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 15px; font-weight: 600; color: var(--blue-t);
}
.stk-my-row-cta {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--t3); white-space: nowrap;
}
.stk-my-row:hover .stk-my-row-cta { color: var(--blue-t); }

/* The filter tabs are .mt-chip, but the script marks the current one with
   .active rather than aria-pressed, so that state is matched here too. */
/* Same treatment as every other active filter chip on the site. It used the
   bright-green chip pair, which is reserved for STATUS labels — a filter tab
   is not a status, and Staking was the only page whose active filter was
   green while Launches and Samples were blue. */
.mt-chip.stk-filter-tab.active,
.mt-chip.stk-filter-tab[aria-selected="true"] {
	background: color-mix(in srgb, var(--blue) 8%, var(--paper));
	color: var(--blue-t);
	border-color: var(--blue);
}

.stk-grid { margin-top: 24px; }
.stk-noresults { margin-top: 24px; }

.stk-card {
	display: flex; flex-direction: column; gap: 14px;
	padding: 18px;
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface);
}
.stk-card-top { display: flex; align-items: center; gap: 12px; }
.stk-card-id { display: grid; gap: 1px; min-width: 0; flex: 1; }
.stk-card-state { margin: 0; }

.stk-card-figures {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 12px; margin: 0;
	padding-top: 14px; border-top: 1px solid var(--rule-faint);
}
.stk-card-figures dt {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase; color: var(--t4);
}
.stk-card-figures dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.stk-card-cta { margin-top: auto; justify-content: center; }

/* Samples -----------------------------------------------------------------
   A gallery of states rather than a table of figures. The banner is first
   and stays first: everything below it is illustration, and that has to be
   read before the cards are, not after. */
.smp-banner {
	border: 1px solid var(--rule);
	border-left: 2px solid var(--amber);
	background: var(--surface);
	border-radius: 4px;
	padding: 13px 16px; margin: 0 0 22px;
	font-size: 13px; line-height: 1.6; color: var(--t2);
}
.smp-banner strong { color: var(--ink); }

.smp-grid { margin-top: 24px; }
.smp-count { margin-top: 14px; }

.smp-card {
	display: flex; flex-direction: column; gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface);
	color: inherit; text-decoration: none;
}
.smp-card:hover { background: var(--hover); border-color: var(--rule-strong); text-decoration: none; }
.smp-card-top { display: flex; align-items: center; gap: 12px; }
.smp-card-id { display: grid; gap: 1px; min-width: 0; flex: 1; }
.smp-card-state { display: block; }

.smp-card-figures {
	display: flex; gap: 28px;
	margin-top: auto;
	padding-top: 14px; border-top: 1px solid var(--rule-faint);
}
.smp-card-figures > span { display: grid; gap: 3px; }
.smp-card-figure { font-size: 14px; font-weight: 600; }

/* Folds -------------------------------------------------------------------
   A <details>, so it opens with no JavaScript and a keyboard reaches it for
   free. Bigger than the Guides accordion because these are page sections
   rather than single answers, and the count on the right is the reason to
   open one — an empty section says so before it is opened. */
.mt-fold {
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface); margin-top: 10px; overflow: hidden;
}
.mt-fold-head {
	display: flex; align-items: center; gap: 14px;
	min-height: 62px; padding: 0 20px;
	cursor: pointer; list-style: none;
}
.mt-fold-head::-webkit-details-marker { display: none; }
.mt-fold[open] .mt-fold-head { background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.mt-fold-title {
	flex: 1;
	font-family: Montserrat, sans-serif; font-size: 16px; font-weight: 600;
}
.mt-fold-count {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 600;
	min-width: 26px; padding: 3px 8px; border-radius: 3px; text-align: center;
	background: var(--hover); color: var(--t3);
}
.mt-fold-head::after {
	content: "+";
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 16px; font-weight: 500; color: var(--t4); flex: none;
}
.mt-fold[open] .mt-fold-head::after { content: "\2212"; }
.mt-fold-body { padding: 20px; }
.mt-fold-body > p { margin: 0 0 16px; color: var(--t2); font-size: 13.5px; line-height: 1.75; }
.mt-fold-body code {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12.5px; background: var(--hover); border-radius: 3px; padding: 1px 5px;
}

/* Transparency ------------------------------------------------------------ */
.trn-stats { margin-top: 18px; }
.trn-stat-sub { display: block; margin-top: 4px; font-size: 11.5px; color: var(--t4); line-height: 1.5; }

/* One wallet per row: what it is for, then the address itself. The note is
   the reason the address matters, so it is not hidden behind a tooltip. */
.trn-wallets { margin-top: 22px; }
.trn-wallet {
	display: grid; grid-template-columns: 1fr auto;
	align-items: start; gap: 20px;
	padding: 14px 16px;
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface);
}
@media (max-width: 760px) {
	.trn-wallet { grid-template-columns: 1fr; }
}
.trn-wallet-id { display: grid; gap: 4px; min-width: 0; }
.trn-wallet-label { font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 600; }
.trn-wallet-note { color: var(--t3); font-size: 12.5px; line-height: 1.6; max-width: 62ch; }
.trn-wallet-addr { font-size: 12.5px; color: var(--blue-t); white-space: nowrap; }
.trn-wallet-addr--none { color: var(--t5); }

.trn-cert {
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--panel); padding: 16px; margin-top: 10px;
}
.trn-cert-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.trn-cert-fields {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px; margin: 16px 0 0;
	padding-top: 14px; border-top: 1px solid var(--rule-faint);
}
.trn-cert-fields dt {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase; color: var(--t4);
}
.trn-cert-fields dd { margin: 5px 0 0; font-size: 13px; }
.trn-cert-fields a { color: var(--blue-t); }

.trn-line {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	padding: 13px 16px;
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface);
}
.trn-line .mt-token-name { flex: 1; }
.trn-line-note { font-size: 12.5px; color: var(--t3); }

.trn-dust {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px; margin: 0 0 18px;
	padding: 16px; border: 1px solid var(--rule-faint); border-radius: 4px;
	background: var(--panel);
}
.trn-dust dt {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase; color: var(--t4);
}
.trn-dust dd { margin: 5px 0 0; font-size: 13.5px; font-weight: 600; }

.trn-note { margin: 18px 0 0; font-size: 12.5px; color: var(--t3); line-height: 1.7; }

/* Create: the wizard's token bridge -----------------------------------------
   The launch wizard is an application, not a document: 1,600 lines of layout
   and a script that owns most of the DOM. Rewriting that layout to say the
   same thing in new class names would risk the one page on the site that
   builds and submits a real transaction, for no visual gain.

   It does not need rewriting, because create.css takes every colour, radius
   and family through a custom property. Redefining those names HERE, on the
   wizard's own wrapper, re-skins all of it — and makes it theme-aware for
   free, since each one now resolves through a Modern Tech token that already
   changes with the theme.

   Scoped to .create-page deliberately. Declared at :root these names would
   leak into every rebuilt page, and the two designs would share a namespace
   again — which is the thing the migration exists to undo.

   Only the rgb() TRIPLES have to be repeated per theme. A triple cannot be
   derived from a hex custom property in CSS, and create.css uses them inside
   rgba() for its tints. Everything else follows its token automatically. */
.create-page {
	/* Grounds and rules */
	--bg: var(--paper);
	--lg-surface: var(--surface);
	--lg-surface-2: var(--surface-2);
	--lg-surface-3: var(--hover);
	--border: var(--rule);
	--border-2: var(--rule-2);
	--border-3: var(--rule-strong);

	/* Text. --white was the old theme's PRIMARY text colour, not the colour
	   white, so it maps to ink rather than to a literal. */
	--white: var(--ink);
	--silver: var(--t2);
	--grey-light: var(--t3);
	--grey-mid: var(--t4);
	--text-2: var(--t2);
	--text-3: var(--t3);

	/* Accents.
	 *
	 * An accent has two jobs and they need two values: the FILL is the true
	 * brand colour, and the TEXT is that hue lifted or darkened until it is
	 * readable on the ground it sits on. main.css always drew this
	 * distinction; create.css only ever used the fill, which is fine on one
	 * fixed dark ground and not fine on three. Its colour: declarations now
	 * ask for the -text name, its backgrounds and borders still ask for the
	 * fill, and the two resolve differently per theme.
	 */
	/* The accent names (--noctis-blue and kin) are mapped at :root, above:
	   they are read outside this page too. */

	/* Type and metrics */
	--font-head: Montserrat, sans-serif;
	--font-body: Inter, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--radius-xs: 2px;
	--radius-sm: 3px;
	--radius: 4px;
	/* The design's radius scale is 4 / 3 / 2 and stops there. The wizard's own
	   large step was 6px, which is the one size the scale does not have. */
	--radius-lg: 4px;

	/* There is no top nav in this shell — the rail is down the left — so the
	   offset create.css reserves for one is zero. */
	--nav-h: 0px;
}


/* The wizard already sits inside the shell's own scrolling column, which
   fills the frame, so it does not need to reserve a viewport height of its
   own — asking for one adds the ticker's height to the bottom of every step. */
.create-page .cw-wizard { min-height: 0; }

/* create.css asks for a bare `monospace` on its data readouts, which resolves
   to whatever the browser happens to have. The design has exactly one mono
   face, and a wallet address in a different one is conspicuous. */
.create-page [class*="addr"],
.create-page [class*="-id-val"],
.create-page [class*="-tokens"],
.create-page code,
.create-page pre,
.create-page kbd {
	font-family: var(--font-mono);
}

/* The five classes the wizard borrows from the retiring stylesheet. They are
   defined here rather than swapped in the markup so create.css and the
   wizard template stay a matched pair that can be lifted or replaced whole. */
.create-page .container {
	max-width: clamp(1180px, 92%, 2000px);
	margin-inline: auto;
	padding: 0;
}
.create-page .section-tag {
	display: inline-block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 600; letter-spacing: .18em;
	text-transform: uppercase; color: var(--blue-d); margin-bottom: 8px;
}
.create-page .btn-primary,
.create-page .btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px;
	font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	border-radius: 4px; text-decoration: none; text-align: center;
	cursor: pointer;
}
.create-page .btn-primary { background: var(--blue); color: var(--on-blue); border: 0; }
.create-page .btn-primary:hover { background: var(--blue-h); }
.create-page .btn-ghost { border: 1px solid var(--rule-strong); color: var(--ink); background: transparent; }
.create-page .btn-ghost:hover { background: var(--hover); }
/* About: the founder ------------------------------------------------------
   A portrait beside prose. The photo column is fixed rather than fractional
   so the text measure does not stretch with the viewport on a wide screen,
   which is the whole reason this page is not just a full-width paragraph. */
.mt-bio {
	display: grid;
	grid-template-columns: 260px minmax(0, 76ch);
	gap: 40px;
	align-items: start;
	margin-top: 22px;
}
@media (max-width: 820px) {
	.mt-bio { grid-template-columns: 1fr; gap: 24px; }
	.mt-bio-photo { max-width: 220px; }
}

/* A block frame in the accent, which is the blue on Light and Dark and the
   pink on Degen because all three read --blue. Square corners: the frame is
   the point, and a radius would soften it into a card. */
.mt-bio-photo {
	margin: 0;
	border: 5px solid var(--blue);
	border-radius: 0;
	overflow: hidden;
	background: var(--surface);
	line-height: 0;
}
.mt-bio-photo img { display: block; width: 100%; height: auto; }

.mt-bio-name {
	font-family: Montserrat, sans-serif;
	font-size: clamp(22px, 2.2vw, 30px); font-weight: 700;
	line-height: 1.1; letter-spacing: -.025em; margin: 0;
}
/* Selected through .mt-bio-text on purpose. The role line is a <p> inside it,
   so the prose rule below -- one class and one type -- outranked a bare
   .mt-bio-role, and the size this rule used to ask for never once reached the
   page. The body size is the one that has actually been on screen and is the
   one wanted, so it is written down here rather than left to an accident of
   source order. Leading and margins are still the prose rule's, deliberately:
   this line sits in the same column and keeps its rhythm.

   It is the column that was made wide enough to hold the three roles on one
   line -- not the type that was made small enough to fit. */
.mt-bio-text .mt-bio-role {
	display: flex; flex-wrap: wrap; gap: 8px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 14px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--t3);
}
.mt-bio-sep { color: var(--blue-t); }

.mt-bio-text p { margin: 0 0 14px; color: var(--t2); font-size: 14px; line-height: 1.75; }
.mt-bio-text strong { color: var(--ink); font-weight: 600; }
/* The role line is already 600, so a <strong> inside it inherited the same
   weight and read as no emphasis at all. VIN takes the ink colour as well as
   the heavier weight, because at 10.5px uppercase mono a weight step alone is
   almost invisible. */
.mt-bio-role strong { font-weight: 700; color: var(--ink); }
.mt-bio-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* Design page: sections, steps and the fee split -------------------------
   The doc shell above is shared with Guides. What follows is the Design
   page's own vocabulary: a numbered stage list, a set of explanatory cards,
   and the fee split drawn to scale.

   The sidebar labels are set in mono uppercase here rather than written that
   way in the template, so the row and the section heading can stay one string
   in PHP without shouting in the source. */

.mt-doc-link > span:last-child {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}

/* The qualifier under the sidebar list. An accent rule rather than a box:
   it is an aside to the list, not another row in it. */
.mt-doc-note-aside {
	margin: 18px 0 0; padding: 12px 0 12px 14px;
	border-left: 2px solid var(--blue);
	font-size: 12px; line-height: 1.6; color: var(--t3);
}

.mt-doc-section { scroll-margin-top: 24px; }
.mt-doc-section + .mt-doc-section { margin-top: 52px; padding-top: 48px; border-top: 1px solid var(--rule); }
.mt-doc-section > h2 {
	font-family: Montserrat, sans-serif;
	font-size: clamp(21px, 2.2vw, 30px); font-weight: 700;
	line-height: 1.15; letter-spacing: -.025em; margin: 0;
}
.mt-doc-lede { margin: 12px 0 0; max-width: 74ch; font-size: 14px; line-height: 1.7; color: var(--t2); }

/* Numbered stages. A real <ol>: these are a sequence, each waiting on the one
   above, which is the only reason they carry numbers. */
.mt-steps {
	list-style: none; margin: 26px 0 0; padding: 0;
	border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
	background: var(--surface);
}
.mt-step {
	display: grid; grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px; padding: 18px 20px;
	border-top: 1px solid var(--rule-2);
}
.mt-step:first-child { border-top: 0; }
.mt-step-num {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 700; letter-spacing: .06em;
	color: var(--blue-t); padding-top: 2px;
}
.mt-step-body h3 { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; }
.mt-step-body p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--t2); }

.mt-doc-more,
.mt-doc-sub { display: block; }
.mt-doc-more {
	margin-top: 18px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--blue-t);
}
.mt-doc-sub {
	font-family: Montserrat, sans-serif;
	font-size: 17px; font-weight: 600; color: var(--ink);
	margin: 34px 0 16px;
}
.mt-doc-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--t3); }

/* A one-line verdict at the foot of a card. Neutral by default; the good
   variant is the only place a positive is coloured on this page. */
.mt-doc-flag {
	margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-2);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--t4);
}
.mt-doc-flag--good { color: var(--green); }

.mt-doc-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* The fee split, drawn to scale. The segments are sized by their own basis
   points, so the picture cannot disagree with the figures printed on it. */
.mt-split { margin-top: 24px; }
.mt-split-bar {
	display: flex; margin-top: 10px;
	border-radius: 4px; overflow: hidden;
	border: 1px solid var(--rule);
}
.mt-split-seg {
	padding: 12px 14px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-split-seg--creator { background: var(--panel); color: var(--blue-d); }
.mt-split-seg--platform { background: var(--blue); color: var(--on-blue); }

/* The CTO flow diagram keeps its own names because a script binds to them. */
.design-ctoflow {
	margin-top: 26px;
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface); overflow: hidden;
}
.design-ctoflow-head {
	display: flex; flex-wrap: wrap; gap: 10px 16px;
	align-items: baseline; justify-content: space-between;
	padding: 16px 18px; border-bottom: 1px solid var(--rule-2);
}
.design-ctoflow-headings { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; }
.design-ctoflow-label,
.design-ctoflow-hint,
.design-ctoflow-src {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.design-ctoflow-label { color: var(--t3); }
.design-ctoflow-hint { color: var(--t4); }
.design-ctoflow-src { color: var(--blue-t); }

.design-ctoflow-rail {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
	padding: 16px 18px;
}
.design-ctoflow-node {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 11px; border-radius: 4px;
	border: 1px solid var(--rule);
	background: var(--surface);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
	color: var(--t3); white-space: nowrap;
}
.design-ctoflow-node:hover { border-color: var(--rule-strong); color: var(--ink); }
.design-ctoflow-node.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.design-ctoflow-node.is-active .design-ctoflow-dot { background: var(--paper); }
.design-ctoflow-node--fail { border-style: dashed; }
.design-ctoflow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t4); flex: none; }
.design-ctoflow-node[data-tone="blue"] .design-ctoflow-dot { background: var(--blue); }
.design-ctoflow-node[data-tone="red"] .design-ctoflow-dot { background: var(--red); }
.design-ctoflow-node[data-tone="green"] .design-ctoflow-dot { background: var(--green); }
.design-ctoflow-node[data-tone="yellow"] .design-ctoflow-dot { background: var(--amber); }
.design-ctoflow-sub { font-size: 9.5px; opacity: .75; margin-left: 4px; }
.design-ctoflow-conn { width: 10px; height: 1px; background: var(--rule-strong); flex: none; }

.design-ctoflow-panel {
	display: grid; grid-template-columns: auto minmax(0, 1fr);
	gap: 16px; padding: 18px;
	border-top: 1px solid var(--rule-2);
	background: var(--surface-2);
}
.design-ctoflow-badge {
	width: 34px; height: 34px; border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	background: var(--panel); border: 1px solid var(--panel-rule);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 700; color: var(--blue-t);
}
.design-ctoflow-eyebrow {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .12em; color: var(--t4);
}
.design-ctoflow-title { font-size: 16px; font-weight: 600; margin: 6px 0 0; }
.design-ctoflow-desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--t2); }
.design-ctoflow-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; }
.design-ctoflow-meta-item { display: grid; gap: 3px; }
.design-ctoflow-meta-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .12em; color: var(--t4);
}
.design-ctoflow-meta-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; font-weight: 600; color: var(--ink);
}

@media (max-width: 620px) {
	.mt-step { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
	.design-ctoflow-panel { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   DarkVeil guide
   --------------------------------------------------------------------------
   Mostly built from the shared blocks above — the stat band, the hairline
   grid, the certificate pair and the redaction bar all appear here unchanged,
   because a reader arriving from the Overview should recognise them.

   What is specific to this page is the clock. DarkVeil is a window, and every
   question about it is a question about when, so the six steps run down one
   rail with the offset from T stated on each. The rail is drawn on the list
   rather than per item, which is what keeps it continuous.
   -------------------------------------------------------------------------- */

.dv-clock {
	position: relative;
	list-style: none;
	margin: 30px 0 0;
	padding: 0 0 0 4px;
}
/* One line down the whole list, stopping at the last marker rather than
   running past it — the sequence ends at step six, and a rail that carries on
   into white space says it does not. */
.dv-clock::before {
	content: "";
	position: absolute;
	left: 17px; top: 12px; bottom: 42px;
	width: 1px;
	background: var(--rule-strong);
}

.dv-step {
	position: relative;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 18px;
	padding-bottom: 26px;
}
.dv-step:last-child { padding-bottom: 0; }

.dv-step-rail { position: relative; }
.dv-step-num {
	position: relative;
	z-index: 1;
	display: flex; align-items: center; justify-content: center;
	width: 27px; height: 27px;
	/* 4px, not a circle. The radius scale is 4/3/2 and 50% belongs to status
	   dots alone — the reference timeline does not round these either. */
	border-radius: 4px;
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
	color: var(--t3);
}
.mt-section--surface .dv-step-num { background: var(--surface); }

.dv-step-body { min-width: 0; padding-top: 1px; }
.dv-step-at {
	display: inline-block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--blue-d);
}
.dv-step-title {
	font-size: 16px; font-weight: 600; line-height: 1.3;
	margin: 6px 0 0; color: var(--ink);
}
.dv-step-desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--t2); max-width: 74ch; }
.dv-step-desc strong { color: var(--ink); font-weight: 600; }

.dv-step-note {
	display: grid; grid-template-columns: 54px minmax(0, 1fr);
	gap: 12px; align-items: center;
	margin: 12px 0 0; padding: 11px 14px;
	border: 1px solid var(--panel-rule); border-radius: 4px;
	background: var(--panel);
	font-size: 12px; line-height: 1.6; color: var(--t2);
}

.dv-step-fact {
	display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
	margin-top: 12px; padding-top: 10px;
	border-top: 1px solid var(--rule-2);
}
.dv-step-fact-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
	color: var(--t4);
}
.dv-step-fact-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12.5px; font-weight: 600; color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* Certificate lists — the public half is checkable, the private half is a
   row of redaction bars, which is the whole point of setting them together. */
.dv-cert-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.dv-cert-list li { font-size: 13px; line-height: 1.6; color: var(--t2); }
.mt-cert-half--public .dv-cert-list li { padding-left: 20px; position: relative; }
.mt-cert-half--public .dv-cert-list li::before {
	content: "\2713";
	position: absolute; left: 0; top: 0;
	color: var(--green); font-weight: 700;
}
.dv-cert-list--private li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; }

/* The bond formula. Set apart from the prose because it is the one line on
   the page a reader may want to apply to their own numbers. */
.dv-formula {
	display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
	margin: 24px 0 0; padding: 16px 18px;
	border: 1px solid var(--panel-rule); border-radius: 4px;
	background: var(--panel);
}
.dv-formula-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
	color: var(--t4);
}
.dv-formula-expr {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13.5px; font-weight: 600; color: var(--ink);
}

/* Bond outcomes. The percentage leads, because it is what a reader is
   matching themselves against. */
.dv-outcome-pct {
	display: block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 26px; font-weight: 700; line-height: 1;
	color: var(--t3); font-variant-numeric: tabular-nums;
}
.dv-outcome--good .dv-outcome-pct { color: var(--green); }
.dv-outcome--part .dv-outcome-pct { color: var(--amber); }
.dv-outcome--bad  .dv-outcome-pct { color: var(--red); }

/* Worked example: a figure over its label, and the label above it because
   the reader is scanning for the label first. */
.dv-param .mt-label { display: block; }
.dv-param-value {
	display: block; margin-top: 8px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 19px; font-weight: 700; line-height: 1.15;
	color: var(--ink); font-variant-numeric: tabular-nums;
}
.dv-param p { margin-top: 6px; font-size: 11.5px; color: var(--t4); }
.dv-param .mt-redact { width: 92px; }

.dv-sub {
	font-size: 15px; font-weight: 600; color: var(--ink);
	margin: 34px 0 16px;
}

.dv-wallet-head {
	display: flex; flex-wrap: wrap; gap: 8px;
	align-items: baseline; justify-content: space-between;
	padding-bottom: 12px; border-bottom: 1px solid var(--rule-2);
}
.dv-wallet-name { font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 600; }
.dv-wallet-tag {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	padding: 3px 7px; border-radius: 3px;
	background: var(--hover); color: var(--t3);
}
.dv-wallet--good .dv-wallet-tag { background: color-mix(in srgb, var(--green) 14%, var(--surface)); color: var(--green); }
.dv-wallet--part .dv-wallet-tag { background: color-mix(in srgb, var(--amber) 16%, var(--surface)); color: var(--amber); }
.dv-wallet--bad  .dv-wallet-tag { background: color-mix(in srgb, var(--red) 12%, var(--surface)); color: var(--red); }

.dv-wallet-rows { margin: 0; display: grid; }
.dv-wallet-rows > div {
	display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
	padding: 9px 0; border-top: 1px solid var(--rule-2);
}
.dv-wallet-rows > div:first-child { border-top: 0; }
.dv-wallet-rows dt { font-size: 12.5px; color: var(--t2); }
.dv-wallet-rows dd {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12.5px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.dv-wallet-row--result { border-top-color: var(--rule) !important; }
.dv-good { color: var(--green); }
.dv-bad  { color: var(--red); }
.dv-dim  { color: var(--t4); }

@media (max-width: 620px) {
	.dv-step { grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
	.dv-clock::before { left: 15px; }
	.dv-step-num { width: 23px; height: 23px; font-size: 9px; }
	.dv-step-note, .dv-cert-list--private li { grid-template-columns: 40px minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Launch pages
   --------------------------------------------------------------------------
   One template renders twelve different pages: two curve shapes, three
   DarkVeil stages, a claim, a graduation and a failure, across three chains.
   They share a vocabulary rather than a stylesheet each — a band, a panel, a
   figure-over-label stat, a numbered step and a countdown — so a reader who
   has understood one launch page has understood all of them.

   The class names are the ones the markup already carried. They are load
   bearing: six scripts bind to ids and classes in here, including the two
   that build and submit real transactions, so this is a restyle of markup
   that stays put rather than a rewrite of markup that would have to be
   re-proven against every one of them.

   THE PAGE IS ONE NUMBER. Per cent to graduation decides what a visitor
   does next, so it gets the widest element on the page and the only track
   with a marked end. Everything else is arranged around it.
   -------------------------------------------------------------------------- */

.launch-page {
	font-size: 13.5px;
}

/* P subscript-zero appears in running copy on four of the twelve states.
   Left to the browser it inherits the surrounding size and opens a visible
   gap before the next word — "flat P 0 ." rather than "flat P0." */
.launch-page sub, .launch-page sup {
	font-size: .72em; line-height: 0; position: relative; vertical-align: baseline;
}
.launch-page sub { bottom: -.22em; }
.launch-page sup { top: -.45em; }

/* Bands ------------------------------------------------------------------ */
.lp-header {
	position: relative;
	overflow: hidden;
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}
/* Same two decorative layers every other page header uses, so a token page
   sits in the same room as the rest of the site. The banner band is opaque
   and covers the top of the field on purpose: the creator's own artwork is
   the one thing here that must not have anything drawn over it. */
.lp-header > .mt-head-glow,
.lp-header > .mt-head-rings { z-index: 0; }
.lp-header > .lp-identity,
.lp-header > .lp-progress-banner { position: relative; z-index: 1; }

.lp-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 312px;
	gap: 24px;
	align-items: start;
	padding: 30px 48px;
}
/* A state with no sidebar still wants the same gutters, not a full-bleed
   column of its own. */
.lp-body--single,
.lp-body:not(:has(.lp-sidebar)) { grid-template-columns: minmax(0, 1fr); }
.lp-main { display: grid; gap: 20px; min-width: 0; }
.lp-sidebar { display: grid; gap: 20px; position: sticky; top: 0; }

.lp-trades-wrap,
.lp-bottom-wrap { padding: 0 48px 30px; }

@media (max-width: 1100px) {
	.lp-body { grid-template-columns: minmax(0, 1fr); }
	.lp-sidebar { position: static; }
}

/* Header: identity -------------------------------------------------------- */
.lp-identity {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	padding: 52px 48px 0;
	align-items: start;
}
.lp-logo-wrap {
	width: 68px; height: 68px; flex: none;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--panel);
	overflow: hidden;
}
/* fill, not cover: a token logo is authored square and cropping one loses
   the mark rather than the margin. */
.lp-logo { width: 100%; height: 100%; object-fit: fill; display: block; }

.lp-meta { min-width: 0; }
.lp-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.lp-title {
	margin: 10px 0 0;
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 700; line-height: 1.08; letter-spacing: -.03em;
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
}
.lp-ticker {
	font-size: inherit; font-weight: 700; letter-spacing: -.02em; color: var(--t4);
}
.lp-desc { margin: 8px 0 0; max-width: 68ch; color: var(--t2); line-height: 1.65; }
.lp-creator {
	display: block; margin-top: 10px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; color: var(--t4);
}
.lp-socials { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.lp-social-link,
.lp-profile-link,
.lp-back-link {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--blue-t);
}
.lp-back-link { display: inline-block; margin-bottom: 12px; }
.lp-back-link:hover { color: var(--ink); }
.lp-profile-link { display: inline-block; margin-top: 12px; }

/* Badges ------------------------------------------------------------------
   Three kinds sit in one row and must be told apart at a glance: the chain
   is an outline, the state is filled, and anything provisional is dimmed. */
.tier-badge,
.state-badge,
.build-status-badge,
.lp-network-badge {
	display: inline-flex; align-items: center;
	padding: 4px 8px; border-radius: 3px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	white-space: nowrap;
}
.tier-badge { background: var(--surface); border: 1px solid var(--rule-strong); color: var(--t2); }
.tier-badge-b { border-color: var(--blue); color: var(--blue-t); }
.tier-badge-c { border-color: #7B34C9; color: #7B34C9; }
:where(:root)[data-theme="dark"] .tier-badge-c,
:where(:root)[data-theme="degen"] .tier-badge-c { border-color: #B98BEA; color: #B98BEA; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="degen"]) .tier-badge-c {
		border-color: #B98BEA; color: #B98BEA;
	}
}

.build-status-badge,
.lp-network-badge { background: var(--hover); color: var(--t3); }

.state-badge { background: var(--hover); color: var(--t3); }
.state-badge-live { background: var(--chip); color: var(--chip-fg); }
.state-badge-dv { background: color-mix(in srgb, var(--blue-d) 12%, var(--surface)); color: var(--blue-d); }
.state-badge-upcoming { background: color-mix(in srgb, var(--amber) 14%, var(--surface)); color: var(--amber); }
.state-badge-failed { background: color-mix(in srgb, var(--red) 12%, var(--surface)); color: var(--red); }
.state-badge-graduated { background: var(--ink); color: var(--paper); }

/* Header: the progress spine ---------------------------------------------
   The end of the track is graduation and nothing else, so it is marked. A
   bar that simply runs out at the right edge reads as "full" at 100% of
   nothing in particular. */
.lp-progress-banner { padding: 20px 48px 22px; }
.lp-progress-track {
	position: relative;
	height: 6px; border-radius: 3px;
	background: var(--bar-empty);
	border: 1px solid var(--rule);
}
.lp-progress-fill {
	height: 100%; border-radius: 2px;
	background: var(--blue);
	max-width: 100%;
}
.lp-progress-track::after {
	content: "";
	position: absolute; right: -1px; top: -4px; bottom: -4px;
	width: 2px; background: var(--rule-strong);
}

.lp-progress-stats {
	display: flex; flex-wrap: wrap; gap: 14px 40px;
	margin-top: 18px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; letter-spacing: .1em; color: var(--t4);
}
.lp-progress-stat { display: flex; flex-direction: column; gap: 5px; }
.lp-stat-value {
	font-size: 25px; font-weight: 700; line-height: 1; color: var(--ink);
	letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.lp-stat-label { font-weight: 600; text-transform: uppercase; }
.lp-progress-stat-mcap .lp-stat-value { color: var(--blue-t); }
.lp-midnight-tag { color: #7B34C9; }
:where(:root)[data-theme="dark"] .lp-midnight-tag,
:where(:root)[data-theme="degen"] .lp-midnight-tag { color: #B98BEA; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="degen"]) .lp-midnight-tag { color: #B98BEA; }
}

/* Panels -----------------------------------------------------------------
   One panel, used everywhere. Hairline and square-shouldered, no shadow —
   the same construction as every card on the rebuilt pages. */
.lp-panel,
.lp-buy-panel,
.lp-fdv-panel,
.lp-chart-wrap,
.lp-trades,
.lp-escrow-panel,
.lp-graduation-panel,
.lp-grad-summary,
.lp-grad-lp-panel,
.lp-grad-vesting-panel,
.lp-dv-reg-eligibility,
.lp-dv-reg-stats,
.lp-dv-redacted-panel,
.lp-dv-active-public,
.lp-dv-next,
.lp-zk-cert-panel,
.lp-dash-wrap,
.lp-profile-wrap,
.lp-failed-notice,
.lp-failed-outcome {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: 20px 22px;
}

.lp-panel-title,
.lp-section-title,
.lp-dash-panel-title,
.lp-dv-next-title,
.lp-zk-proof-section-title {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
	color: var(--t3);
	margin: 0 0 14px;
}
.lp-panel-title-row {
	display: flex; flex-wrap: wrap; gap: 10px;
	align-items: center; justify-content: space-between;
	margin-bottom: 14px;
}
.lp-panel-title-row .lp-panel-title,
.lp-panel-title-row .lp-dash-panel-title { margin: 0; }

/* Sidebar: supply --------------------------------------------------------
   The bar and its legend take their colours from ONE place. They used to be
   set separately — the bar from a class, the legend from an inline style —
   and named different colours for the same share. */
.lp-supply-bar {
	display: flex; height: 8px; border-radius: 2px; overflow: hidden;
	background: var(--bar-empty); margin-bottom: 14px;
}
.sb-seg { height: 100%; }
.sb-seg-curve,   .lp-legend-row--curve   .lp-legend-dot { background: var(--ink); }
.sb-seg-lp,      .lp-legend-row--lp      .lp-legend-dot { background: var(--t3); }
.sb-seg-creator, .lp-legend-row--creator .lp-legend-dot { background: var(--rule-strong); }
.sb-seg-dv,      .lp-legend-row--dv      .lp-legend-dot { background: var(--blue); }
.sb-seg-other,   .lp-legend-row--other   .lp-legend-dot { background: var(--track); }

.lp-supply-legend { display: grid; gap: 9px; }
.lp-legend-row {
	display: grid;
	grid-template-columns: 8px minmax(0, 1fr) auto;
	gap: 9px; align-items: baseline;
	font-size: 12px;
}
.lp-legend-dot { width: 8px; height: 8px; border-radius: 2px; align-self: center; }
.lp-legend-label { color: var(--t2); }
.lp-legend-pct {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.lp-legend-tokens {
	grid-column: 2 / -1;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; color: var(--t4); font-variant-numeric: tabular-nums;
	margin-top: -4px;
}

/* Sidebar: label/value rows ---------------------------------------------- */
.lp-vesting-info, .lp-fee-rows, .lp-grad-lp-stats { display: grid; gap: 0; }
.lp-vesting-row, .lp-fee-row, .lp-fee-total, .lp-grad-lp-stat, .lp-dash-stat-row {
	display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
	padding: 9px 0;
	border-top: 1px solid var(--rule-2);
	font-size: 12.5px;
}
.lp-vesting-row:first-child, .lp-fee-row:first-child,
.lp-grad-lp-stat:first-child, .lp-dash-stat-row:first-child { border-top: 0; }

.lp-vt-label, .lp-fee-label, .lp-grad-lp-label, .lp-dash-stat-label { color: var(--t2); }
.lp-vt-value, .lp-fee-pct, .lp-grad-lp-value, .lp-dash-stat-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; font-weight: 600; color: var(--ink);
	font-variant-numeric: tabular-nums; text-align: right;
}
.lp-vt-none { color: var(--t4); }
.lp-dash-stat-value--highlight { color: var(--blue-t); }

.lp-fee-left { display: grid; gap: 2px; min-width: 0; }
.lp-fee-note { font-size: 11px; color: var(--t4); line-height: 1.45; }
.lp-fee-total { border-top: 1px solid var(--rule-strong); }
.lp-fee-total .lp-fee-label { color: var(--ink); font-weight: 600; }

.lp-grad-lp-note, .lp-dash-panel-note, .lp-dash-note, .lp-escrow-distinction,
.lp-dv-reg-intro, .lp-dv-slot-note, .lp-dv-redacted-note,
.lp-section-note, .lp-empty-note, .lp-dv-reg-cta-note, .lp-profile-field-note {
	margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: var(--t3);
}
.lp-grad-lp-note code {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; color: var(--ink);
	background: var(--hover); padding: 1px 5px; border-radius: 3px;
}

/* Chart ------------------------------------------------------------------- */
.lp-chart-wrap { padding: 16px 18px 18px; }
.lp-chart-header {
	display: flex; flex-wrap: wrap; gap: 12px;
	align-items: baseline; justify-content: space-between;
}
.lp-chart-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; letter-spacing: .13em; color: var(--t3);
}
.lp-current-price {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 16px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.lp-chart-timeframes { display: flex; gap: 5px; margin: 14px 0 12px; }
.lp-tf-btn {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .08em;
	padding: 6px 10px; border-radius: 3px;
	border: 1px solid var(--rule); background: var(--surface); color: var(--t3);
}
.lp-tf-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.lp-tf-btn--active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lp-chart-wrap--empty .lp-empty-note { margin-top: 12px; }
.lp-chart-scroll { overflow-x: auto; }
.lp-chart-canvas { min-width: 420px; height: 300px; }

/* Buy panel --------------------------------------------------------------- */
.lp-buy-header {
	display: flex; flex-wrap: wrap; gap: 10px;
	align-items: baseline; justify-content: space-between;
	padding-bottom: 14px; border-bottom: 1px solid var(--rule-2);
}
/* The sheet's own control, added by script and shown only where the sheet
   exists. Hidden HERE rather than inside the phone block: a rule that only
   hides something below 900px does not hide it above 900px, and the first
   version of this put a stray Buy button in the panel header on every desktop
   launch page. */
.lp-sheet-toggle {
	display: none;
	flex: none;
	min-width: 44px; min-height: 44px;
	/* Vertical only. A negative RIGHT margin put the button 6px past the
	   header box and made the header itself a sideways scroller. */
	margin-block: -10px;
	align-items: center; justify-content: center;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--blue-t);
}
.lp-buy-title {
	font-family: Montserrat, sans-serif;
	font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.lp-buy-cap {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; letter-spacing: .06em; color: var(--t4);
}

.lp-buy-form { margin-top: 16px; }
.lp-input-wrap {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 8px; align-items: center;
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface-2);
	padding: 4px 10px 4px 4px;
}
.lp-input-wrap:focus-within { border-color: var(--blue); }
.lp-ada-input, .lp-dash-input {
	width: 100%; min-width: 0;
	border: 0; background: none; color: var(--ink);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
	padding: 10px;
}
.lp-ada-input:focus, .lp-dash-input:focus { outline: none; }
.lp-input-currency {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--t4);
}
.lp-max-btn {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
	padding: 6px 9px; border-radius: 3px;
	border: 1px solid var(--rule-strong); color: var(--t2);
}
.lp-max-btn:hover { background: var(--hover); color: var(--ink); }

.lp-buy-arrow { text-align: center; margin: 8px 0; color: var(--t4); font-size: 13px; }
.lp-output-wrap {
	border: 1px dashed var(--rule); border-radius: 4px;
	padding: 14px; background: var(--surface-2);
}
.lp-tokens-out {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 17px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums; word-break: break-all;
}
.lp-buy-meta {
	display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
	margin-top: 12px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; letter-spacing: .04em; color: var(--t4);
}

/* Wallet cap: the one bar that is a LIMIT rather than progress, so it fills
   toward a ceiling and is coloured as a warning, not as an achievement. */
.lp-wallet-cap { margin-top: 18px; }
.lp-wcap-label {
	display: flex; gap: 12px; justify-content: space-between;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; letter-spacing: .04em; color: var(--t4);
	margin-bottom: 6px;
}
.lp-wcap-track { height: 5px; border-radius: 3px; background: var(--bar-empty); border: 1px solid var(--rule); }
.lp-wcap-fill { height: 100%; border-radius: 2px; background: var(--amber); max-width: 100%; }

.lp-buy-panel .weldpress-connect,
.lp-dash-wrap .weldpress-connect,
.lp-profile-wrap .weldpress-connect { display: block; margin-top: 16px; }

.lp-buy-btn, .lp-dv-reg-btn, .lp-dash-btn, .lp-dex-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 42px; padding: 0 18px; width: 100%;
	margin-top: 12px;
	border-radius: 4px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	background: var(--blue); color: var(--on-blue);
	text-decoration: none; text-align: center;
}
.lp-buy-btn:hover, .lp-dv-reg-btn:hover, .lp-dash-btn:hover, .lp-dex-link:hover {
	background: var(--blue-h); text-decoration: none;
}
.lp-buy-btn[disabled], .lp-dv-reg-btn[disabled], .lp-dash-btn[disabled] {
	background: var(--hover); color: var(--t4); cursor: not-allowed;
}
.lp-dv-reg-btn--ghost, .lp-dash-btn:not(.lp-dash-btn--primary) {
	background: none; border: 1px solid var(--rule-strong); color: var(--ink);
}
.lp-dv-reg-btn--ghost:hover, .lp-dash-btn:not(.lp-dash-btn--primary):hover {
	background: var(--hover);
}

.lp-buy-status, .lp-dash-status, .dv-widget-status {
	margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--t2);
}

.lp-my-orders { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.lp-my-orders-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.lp-my-orders-list li {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; color: var(--t2);
	padding: 9px 10px; border: 1px solid var(--rule); border-radius: 3px;
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center;
}

/* FDV pair ---------------------------------------------------------------
   Two figures that are constantly mistaken for each other, so they are set
   side by side with a rule between them and each keeps its own sentence
   saying what it is. Never render one of these without the other. */
.lp-fdv-panel { padding: 0; }
.lp-fdv-inner { display: grid; grid-template-columns: 1fr 1px 1fr; }
.lp-fdv-item { padding: 18px 22px; display: grid; gap: 5px; align-content: start; }
.lp-fdv-divider { background: var(--rule); }
.lp-fdv-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; color: var(--t4);
}
.lp-fdv-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 19px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.lp-fdv-note { font-size: 11px; color: var(--t4); line-height: 1.5; }

@media (max-width: 620px) {
	.lp-fdv-inner { grid-template-columns: 1fr; }
	.lp-fdv-divider { height: 1px; }
}

/* Inline notices ---------------------------------------------------------- */
.lp-midnight-note, .lp-dv-done-banner, .lp-midnight-notice,
.lp-dv-privacy-banner, .lp-failed-night-return, .lp-zk-private-notice, .lp-notice {
	display: flex; gap: 12px; align-items: flex-start;
	padding: 14px 16px; border-radius: 4px;
	border: 1px solid var(--rule);
	background: var(--surface-2);
	font-size: 12.5px; line-height: 1.6; color: var(--t2);
}
.lp-midnight-note, .lp-midnight-notice, .lp-dv-privacy-banner {
	background: var(--panel); border-color: var(--panel-rule);
}
.lp-dv-done-banner, .lp-failed-night-return {
	background: color-mix(in srgb, var(--green) 8%, var(--surface));
	border-color: color-mix(in srgb, var(--green) 30%, var(--rule));
}
.lp-dv-done-check, .lp-failed-night-check { color: var(--green); font-weight: 700; flex: none; }
.lp-midnight-note strong, .lp-midnight-notice strong,
.lp-dv-done-banner strong, .lp-failed-night-return strong { color: var(--ink); font-weight: 600; }
.lp-failed-night-return p { margin: 4px 0 0; }
.lp-midnight-notice-icon { color: #7B34C9; font-size: 15px; line-height: 1.3; flex: none; }
:where(:root)[data-theme="dark"] .lp-midnight-notice-icon,
:where(:root)[data-theme="degen"] .lp-midnight-notice-icon { color: #B98BEA; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="degen"]) .lp-midnight-notice-icon { color: #B98BEA; }
}

/* A live private phase is the one place a pulse earns itself: it says the
   window is open right now, which is the only thing the panel can report. */
.lp-midnight-note-dot, .lp-dv-privacy-dot {
	width: 7px; height: 7px; border-radius: 50%; flex: none;
	background: var(--blue); margin-top: 6px;
	animation: mtBlink 2.2s ease-in-out infinite;
}
.lp-zk-private-notice { background: var(--panel); border-color: var(--panel-rule); margin-top: 18px; }
.lp-zk-private-icon { color: var(--blue-d); flex: none; }
.lp-zk-private-notice strong { color: var(--ink); font-weight: 600; }

.lp-notice { border-color: color-mix(in srgb, var(--amber) 40%, var(--rule)); background: color-mix(in srgb, var(--amber) 8%, var(--surface)); }
.lp-notice code {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	background: var(--hover); padding: 1px 5px; border-radius: 3px; color: var(--ink);
}

/* Demo banner ------------------------------------------------------------
   Says the page is not real. It is not marked for Degen and it is not
   dimmed: the whole point is that it is read. */
.lp-demo-banner {
	padding: 10px 48px;
	background: var(--ink);
	color: var(--paper);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}

/* Trades ------------------------------------------------------------------ */
.lp-trades { padding: 20px 22px; }
.lp-section-header {
	display: flex; flex-wrap: wrap; gap: 4px 16px;
	align-items: baseline; justify-content: space-between;
	margin-bottom: 14px;
}
.lp-section-header .lp-section-title { margin: 0; }
.lp-section-header .lp-section-note { margin: 0; }
.lp-trades-scroll { overflow-x: auto; }
.lp-trades-table {
	width: 100%; min-width: 720px;
	border-collapse: collapse;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px;
}
.lp-trades-table th {
	text-align: left; padding: 10px 12px;
	background: var(--matrix-head); color: var(--t4);
	font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
	white-space: nowrap;
}
.lp-trades-table td {
	padding: 10px 12px;
	border-top: 1px solid var(--rule-2);
	color: var(--t2); font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.lp-trades-table tbody tr:hover td { background: var(--surface-2); }

/* Bottom pair -------------------------------------------------------------
   The two creator income streams are permanently confused for each other, so
   the escrow panel names what it is NOT in its own badge. */
.lp-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.lp-escrow-badge, .lp-grad-target, .lp-grad-lp-badge, .lp-dash-badge {
	display: inline-flex; align-items: center;
	padding: 4px 8px; border-radius: 3px;
	background: var(--hover); color: var(--t3);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	white-space: nowrap;
}
.lp-grad-lp-badge { background: var(--ink); color: var(--paper); }
.lp-dash-badge { background: var(--blue); color: var(--on-blue); }

/* CTO Completed Successfully: earned once, shown on the graduated panel. */
.lp-cto-badge-wrap { display: grid; gap: 6px; margin: 14px 0 4px; }
.lp-cto-badge {
	display: inline-flex; align-items: center; width: fit-content;
	padding: 5px 9px; border-radius: 3px;
	background: var(--green); color: var(--paper);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	white-space: nowrap;
}
.lp-cto-badge-note { margin: 0; font-size: 12.5px; color: var(--t2); }

/* DarkVeil claim record: the buyer's own proof, offered to save and load. */
.dv-claim-record { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); }
.dv-claim-record-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-dv-reg-btn--quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.lp-dv-reg-btn--quiet:hover { background: var(--hover); }
.dv-claim-load { cursor: pointer; position: relative; overflow: hidden; }
.dv-claim-load input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dv-claim-record-note { margin: 0; font-size: 12.5px; color: var(--t2); }
.lp-cto-vote { display: grid; gap: 14px; }
.lp-cto-vote-intro { margin: 0; font-size: 13.5px; color: var(--t2); }
.lp-cto-vote-wallets { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.lp-cto-vote-label { display: grid; gap: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); }
.lp-cto-vote-identity { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.lp-cto-vote-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); align-self: center; }
.lp-cto-vote-mono { font-family: var(--mono, monospace); font-size: 12.5px; word-break: break-all; }
.lp-cto-vote-proposals { display: grid; gap: 10px; }
.lp-cto-vote-empty { margin: 0; font-size: 13px; color: var(--t2); }
.lp-cto-proposal { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); }
.lp-cto-proposal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lp-cto-proposal-type { font-weight: 600; }
.lp-cto-proposal-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.lp-cto-proposal-note { font-size: 12.5px; color: var(--t2); align-self: center; }


.lp-escrow-amount {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 30px; font-weight: 700; color: var(--ink);
	line-height: 1; font-variant-numeric: tabular-nums;
}
.lp-escrow-currency { font-size: 15px; color: var(--t4); }
.lp-escrow-sub { margin-top: 8px; font-size: 12px; color: var(--t3); }
.lp-escrow-rules { display: grid; gap: 7px; margin-top: 16px; }
.lp-rule-row { display: flex; gap: 9px; align-items: baseline; font-size: 12px; color: var(--t2); }
.lp-rule-icon { color: var(--blue-t); flex: none; font-size: 9px; }
.lp-rule-close .lp-rule-icon { color: var(--amber); }
.lp-escrow-distinction { padding-top: 14px; border-top: 1px solid var(--rule-2); }
.lp-escrow-distinction strong { color: var(--ink); font-weight: 600; }

/* Numbered steps ---------------------------------------------------------
   Used by the graduation plan, the DarkVeil next-steps and the eligibility
   list. The numbers are real sequence — each step waits on the one above —
   which is the only reason they are numbered. */
.lp-grad-steps, .lp-dv-next-steps { display: grid; gap: 12px; }
.lp-grad-step, .lp-dv-next-step {
	display: grid; grid-template-columns: 22px minmax(0, 1fr);
	gap: 12px; align-items: baseline;
	font-size: 12.5px; line-height: 1.6; color: var(--t2);
}
.lp-grad-num, .lp-dv-next-num, .lp-elig-num {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--blue-t);
}

/* Graduated --------------------------------------------------------------- */
.lp-grad-wrap { display: grid; gap: 20px; }
.lp-grad-summary-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px; background: var(--rule);
	border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
.lp-grad-summary-item { background: var(--surface); padding: 16px 18px; display: grid; gap: 6px; }
.lp-grad-summary-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; color: var(--t4);
}
.lp-grad-summary-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 17px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.lp-grad-summary-value--date { font-size: 13px; font-weight: 600; color: var(--t2); }
.lp-dex-link { width: auto; margin-top: 18px; }

.lp-grad-vest-bar-wrap { display: flex; gap: 14px; align-items: center; }
.lp-grad-vest-bar {
	flex: 1; height: 6px; border-radius: 3px;
	background: var(--bar-empty); border: 1px solid var(--rule);
}
.lp-grad-vest-fill { height: 100%; border-radius: 2px; background: var(--blue); max-width: 100%; }
.lp-grad-vest-pct {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lp-grad-vest-stats {
	display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
	margin-top: 10px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; letter-spacing: .04em; color: var(--t4);
}

/* Failed ------------------------------------------------------------------
   Nothing here is red for drama. The threshold figure is, because it is the
   number the launch missed and the only one worth colouring. */
.lp-failed-wrap { display: grid; gap: 20px; }
.lp-failed-title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.lp-failed-reason { margin: 10px 0 0; color: var(--t2); line-height: 1.7; max-width: 72ch; }
.lp-failed-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1px; background: var(--rule);
	border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
.lp-failed-stat { background: var(--surface); padding: 18px 20px; display: grid; gap: 6px; }
.lp-failed-stat-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 22px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums; line-height: 1;
}
.lp-failed-stat-value--threshold { color: var(--red); }
.lp-failed-stat-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; color: var(--t4);
}
.lp-failed-outcome { color: var(--t2); }
.lp-failed-outcome p { margin: 0; line-height: 1.7; }

/* DarkVeil: registration and claim ---------------------------------------- */
.lp-dv-reg-wrap, .lp-dv-active-wrap { display: grid; gap: 20px; }

.lp-eligibility-list { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.lp-eligibility-item {
	display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
	gap: 12px; align-items: start;
	background: var(--surface); padding: 14px 16px;
}
.lp-elig-body { display: grid; gap: 4px; min-width: 0; }
.lp-elig-label { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.lp-elig-note { font-size: 11.5px; color: var(--t3); line-height: 1.55; }
.lp-elig-status {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 700;
	min-width: 22px; text-align: center; color: var(--t4);
}
.lp-elig-pass { color: var(--green); }
.lp-elig-fail { color: var(--red); }

.dv-widget-wrap { display: grid; gap: 12px; margin-top: 18px; }
.dv-widget-field { display: grid; gap: 6px; }
.dv-widget-field label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--t4);
}
.dv-widget-field input, .dv-widget-field textarea {
	width: 100%;
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface-2); color: var(--ink);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12.5px; padding: 11px 12px;
}
.dv-widget-field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.dv-widget-field input:focus, .dv-widget-field textarea:focus {
	outline: none; border-color: var(--blue);
}
.dv-widget-field input::placeholder, .dv-widget-field textarea::placeholder { color: var(--t4); }
.dv-widget-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.dv-widget-actions .lp-dv-reg-btn { margin-top: 0; }
.dv-widget-note { margin: 0; font-size: 12px; color: var(--t3); line-height: 1.6; }
.dv-wallet-picker { display: grid; gap: 8px; }

/* DarkVeil: stat grids ---------------------------------------------------- */
.lp-dv-stat-grid, .lp-dv-redacted-grid, .lp-dv-active-stat-row, .stk-pool-grid,
.lp-venue-pool-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px; background: var(--rule);
	border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
.lp-dv-stat, .lp-dv-redacted-item, .lp-dv-active-stat, .stk-pool-stat,
.lp-venue-pool-stat {
	background: var(--surface); padding: 15px 16px; display: grid; gap: 6px; align-content: start;
}
.lp-dv-stat-value, .lp-dv-active-stat-value, .stk-pool-stat-value,
.lp-venue-pool-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 19px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums; line-height: 1.1;
}
.lp-dv-stat-value--est { color: var(--blue-t); }
.lp-dv-stat-label, .lp-dv-active-stat-label, .lp-dv-redacted-label,
.stk-pool-stat-label, .lp-venue-pool-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
	color: var(--t4); line-height: 1.4;
}
.stk-pool-stat-sub, .lp-venue-pool-sub { font-size: 11px; color: var(--t4); line-height: 1.45; }

/* A hidden figure is set in the same slot a real one would occupy, so the
   reader can see exactly what is being withheld and that it is not missing. */
.lp-dv-redacted-value {
	display: grid; gap: 7px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--blue-d);
}
/* The site already has one device for a value nobody will ever see. Using it
   here rather than four block characters means the redaction reads the same
   on a launch as it does on the listing it was reached from. */
.lp-dv-redacted-value .mt-redact { width: 100%; }

.lp-dv-active-public { display: grid; gap: 18px; }

/* Countdown --------------------------------------------------------------- */
.lp-dv-countdown-box, .lp-dv-price-box {
	display: grid; gap: 6px;
	margin-top: 18px; padding: 16px 18px;
	border: 1px solid var(--panel-rule); border-radius: 4px;
	background: var(--panel);
}
.lp-dv-countdown-label, .lp-dv-price-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
	color: var(--t4);
}
.lp-dv-countdown-value, .lp-dv-price-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 23px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums; line-height: 1.1;
}
.lp-dv-countdown-sub, .lp-dv-price-note { font-size: 11.5px; color: var(--t3); line-height: 1.55; }
.lp-dv-countdown-box--active { border-color: var(--blue); }

/* ZK certificate ---------------------------------------------------------- */
.lp-zk-cert-panel { display: grid; gap: 20px; }
.lp-zk-cert-header { display: grid; gap: 8px; }
.lp-zk-cert-badge {
	display: inline-flex; align-self: start; align-items: center;
	padding: 6px 10px; border-radius: 3px;
	background: var(--chip); color: var(--chip-fg);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; letter-spacing: .1em;
}
.lp-zk-cert-intro { margin: 0; font-size: 12.5px; color: var(--t3); line-height: 1.6; }
.lp-zk-proof-list { display: grid; gap: 9px; }
.lp-zk-proof-item { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; color: var(--t2); line-height: 1.6; }
.lp-zk-proof-check { color: var(--green); font-weight: 700; flex: none; }
.lp-zk-proof-text strong { color: var(--ink); font-weight: 600; }
/* Five totals, so five columns: an auto-fit track count that does not divide
   into five leaves bare container showing where the row runs out. */
.lp-zk-totals-grid {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px; background: var(--rule);
	border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
@media (max-width: 1000px) {
	.lp-zk-totals-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.lp-zk-total-item { background: var(--surface); padding: 14px 16px; display: grid; gap: 5px; }
.lp-zk-total-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; color: var(--t4);
}
.lp-zk-total-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.lp-zk-cert-timestamps { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.lp-zk-ts-item { display: grid; gap: 4px; }
.lp-zk-ts-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; color: var(--t4);
}
.lp-zk-ts-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12.5px; font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums;
}
.lp-zk-cert-hash { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--rule-2); }
.lp-zk-cert-hash-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; color: var(--t4);
}
.lp-zk-cert-hash-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11.5px; color: var(--ink); word-break: break-all; line-height: 1.6;
}

/* Creator dashboard, staking and profile ---------------------------------- */
.lp-dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin-top: 18px; }
.lp-dash-panel { background: var(--surface); padding: 18px 20px; }
.lp-dash-gate-note { margin: 14px 0 0; font-size: 12.5px; color: var(--t3); line-height: 1.65; }
.lp-dash-form { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.lp-dash-form .lp-dash-input {
	flex: 1; min-width: 0;
	border: 1px solid var(--rule); border-radius: 4px;
	background: var(--surface-2); font-size: 14px; padding: 10px 12px;
}
.lp-dash-form .lp-dash-btn { margin-top: 0; width: auto; }
.lp-dash-btn--primary { background: var(--blue); color: var(--on-blue); border: 0; }

.stk-pool-overview { display: grid; gap: 12px; }
.lp-profile-wrap { display: grid; gap: 18px; }
.lp-profile-wrap .lp-panel { padding: 18px 20px; }
.lp-profile-back { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.lp-profile-field-note { display: block; }
.lp-profile-wrap input[type="file"] {
	display: block; width: 100%; margin-top: 10px;
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px;
	color: var(--t2);
}

@media (max-width: 760px) {
	.lp-identity { grid-template-columns: 1fr; padding-inline: 24px; }
	.lp-progress-banner, .lp-demo-banner { padding-inline: 24px; }
	.lp-body, .lp-trades-wrap, .lp-bottom-wrap { padding-inline: 24px; }
}

/* Footer ------------------------------------------------------------------ */
.mt-footer {
	padding: 26px 48px; background: var(--surface);
	border-top: 1px solid var(--rule);
}
.mt-footer-inner {
	display: flex; flex-wrap: wrap; gap: 20px 40px;
	align-items: center; justify-content: space-between;
}
/* Mark and tagline sit on ONE line -- the tagline is the mark's caption, not
   a second block under it. */
.mt-footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.mt-footer-mark img { height: 22px; width: auto; filter: var(--mark-filter); display: block; }
.mt-footer-tag { margin: 0; font-size: 12px; color: var(--t4); }
.mt-footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.mt-footer-links a {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
	color: var(--t3);
}
.mt-footer-links a:hover { color: var(--ink); }
.mt-footer-legal { margin: 18px 0 0; font-size: 11px; color: var(--t5); }

/* DarkVeil bond simulator ---------------------------------------------------
   Panel and parameter list side by side, the panel taking the room because it
   is the thing being operated. The list is a reference the reader checks the
   panel against, so it stays quiet. */
.dv-sim {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 264px;
	gap: 0;
	margin-top: 28px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: var(--surface);
}
.dv-sim-panel { padding: 22px 24px; min-width: 0; }
.dv-sim-params { padding: 22px 24px; border-left: 1px solid var(--rule); }

.dv-sim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.dv-sim-pct {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* The track is the page's own empty-bar colour and the thumb is the accent,
   so the control belongs to the same set as every other bar on the site.
   Styled for both engines: WebKit and Firefox do not share a pseudo-element,
   and a selector either browser cannot parse invalidates the whole rule, so
   they are never combined into one list. */
.dv-sim-range {
	-webkit-appearance: none; appearance: none;
	display: block; width: 100%; height: 22px;
	margin: 14px 0 0; padding: 0; background: none; cursor: pointer;
}
.dv-sim-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dv-sim-range::-webkit-slider-runnable-track {
	height: 4px; border-radius: 2px;
	background: var(--bar-empty); border: 1px solid var(--rule);
}
.dv-sim-range::-moz-range-track {
	height: 4px; border-radius: 2px;
	background: var(--bar-empty); border: 1px solid var(--rule);
}
.dv-sim-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 14px; height: 14px; margin-top: -6px;
	border: 0; border-radius: 3px; background: var(--blue);
}
.dv-sim-range::-moz-range-thumb {
	width: 14px; height: 14px;
	border: 0; border-radius: 3px; background: var(--blue);
}

.dv-sim-ends {
	display: flex; justify-content: space-between; gap: 16px; margin-top: 6px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--t4);
}

.dv-sim-figures {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
	margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule-2);
}
.dv-sim-figure { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dv-sim-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
/* Returned and forfeited are the two halves of the same bond, so they are the
   one pair here that carries meaning in its colour. */
.dv-sim-value--good { color: var(--green); }
.dv-sim-value--bad { color: var(--red); }

.dv-sim-note {
	margin: 20px 0 0; padding: 12px 14px;
	border-left: 2px solid var(--blue);
	background: var(--panel);
	color: var(--t2); font-size: 13px; line-height: 1.6;
}

.dv-sim-params dl { margin: 14px 0 0; display: grid; gap: 0; }
.dv-sim-params dl > div {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	padding: 8px 0; border-bottom: 1px solid var(--rule-2);
}
.dv-sim-params dl > div:last-child { border-bottom: 0; }
.dv-sim-params dt { color: var(--t2); font-size: 12.5px; }
.dv-sim-params dd {
	margin: 0; text-align: right;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* NoctisSwap trading panel ------------------------------------------------
   The panel's whole job is to keep two numbers apart. `guaranteed` is the
   floor the order is bound to and is the only promise the venue makes;
   `expected` is an estimate of a pool state that has already passed by the
   time anybody signs. So they are not two rows of one table: the promise gets
   its own block, its own weight and the accent, and the estimate sits in the
   detail list below with everything else that is indicative. */
.lp-venue-badge {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
	color: var(--on-blue); background: var(--blue);
	padding: 4px 8px; border-radius: 3px; white-space: nowrap;
}
.lp-venue-intro {
	margin: 0 0 16px; font-size: 12.5px; color: var(--t3); line-height: 1.65;
}
.lp-venue-pool { margin-bottom: 18px; }

.lp-venue-panels {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1px; background: var(--rule);
	border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
	margin-top: 16px;
}

/* Direction ------------------------------------------------------------- */
.lp-venue-side {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	background: var(--rule); border: 1px solid var(--rule);
	border-radius: 4px; overflow: hidden; margin-bottom: 16px;
}
.lp-venue-side-btn {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
	min-height: 40px; padding: 0 10px; border: 0; cursor: pointer;
	background: var(--surface); color: var(--t3);
	transition: background .12s ease, color .12s ease;
}
.lp-venue-side-btn:hover { background: var(--hover); color: var(--ink); }
.lp-venue-side-btn.is-active { background: var(--blue); color: var(--on-blue); }

/* Fields ----------------------------------------------------------------- */
.lp-venue-field { margin-bottom: 14px; }
.lp-venue-label {
	display: block; margin-bottom: 6px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
	color: var(--t4);
}
.lp-venue-input-row {
	display: flex; align-items: stretch;
	border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
	background: var(--surface-2);
}
.lp-venue-input-row:focus-within { border-color: var(--blue); }
.lp-venue-input {
	flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
	padding: 11px 12px; color: var(--ink);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 15px; font-variant-numeric: tabular-nums;
}
.lp-venue-input:focus { outline: none; }
.lp-venue-unit {
	display: flex; align-items: center; padding: 0 12px;
	border-left: 1px solid var(--rule); background: var(--surface);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
	color: var(--t3); white-space: nowrap;
}

/* A hint is a real control: it has to be reachable by keyboard, not only
   hoverable, or the explanation exists for mouse users alone. */
.lp-venue-hint {
	display: inline-flex; align-items: center; justify-content: center;
	width: 13px; height: 13px; margin-left: 4px; vertical-align: middle;
	border: 1px solid var(--rule-strong); border-radius: 50%;
	font-size: 9px; font-weight: 700; color: var(--t4);
	cursor: help; font-family: system-ui, sans-serif; letter-spacing: 0;
	text-transform: none;
}

.lp-venue-quote-btn, .lp-venue-place-btn { width: 100%; margin-top: 4px; }
.lp-venue-place-btn { margin-top: 12px; }

/* The quote -------------------------------------------------------------- */
.lp-venue-quote {
	margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 16px;
}
.lp-venue-guaranteed {
	display: grid; gap: 5px;
	background: var(--panel); border: 1px solid var(--panel-rule);
	border-radius: 4px; padding: 14px 16px;
}
.lp-venue-guaranteed-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
	color: var(--blue-t);
}
.lp-venue-guaranteed-value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 22px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums; line-height: 1.15;
	overflow-wrap: anywhere;
}
.lp-venue-guaranteed-note {
	font-size: 11.5px; color: var(--t3); line-height: 1.55;
}

.lp-venue-quote-rows { margin: 14px 0 0; display: grid; gap: 9px; }
.lp-venue-quote-row {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.lp-venue-quote-row dt { font-size: 12px; color: var(--t3); }
.lp-venue-quote-row dd {
	margin: 0; text-align: right;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.lp-venue-partial-note {
	margin: 14px 0 0; font-size: 11.5px; color: var(--t4); line-height: 1.6;
}
.lp-venue-status {
	margin: 12px 0 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere;
}
.lp-venue-status:empty { display: none; }
.lp-venue-status--ok    { color: var(--green-2); }
.lp-venue-status--error { color: var(--red); }

/* Resting orders ---------------------------------------------------------
   The state chip carries the tone. `waiting` is deliberately neutral rather
   than a warning colour: an order waiting for its price is a limit order
   doing its job, and tinting it amber would tell people to cancel something
   that is working. */
.lp-venue-order {
	border: 1px solid var(--rule); border-radius: 4px;
	padding: 12px 14px; margin-bottom: 10px; background: var(--surface-2);
}
.lp-venue-order:last-of-type { margin-bottom: 0; }
.lp-venue-order-head {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px;
}
.lp-venue-order-side {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
	color: var(--t4);
}
.lp-venue-order-amount {
	flex: 1 1 auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.lp-venue-order-state {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
	padding: 3px 7px; border-radius: 3px; border: 1px solid currentColor;
	white-space: nowrap;
}
.lp-venue-order-state--ok      { color: var(--green-2); }
.lp-venue-order-state--neutral { color: var(--t4); }
.lp-venue-order-state--warn    { color: var(--amber); }
.lp-venue-order-reason {
	margin: 0; font-size: 11.5px; color: var(--t3); line-height: 1.55;
}
.lp-venue-order-ref {
	margin: 6px 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px; color: var(--t4);
}
.lp-venue-resting-note {
	margin: 14px 0 0; font-size: 11.5px; color: var(--t4); line-height: 1.6;
}
.lp-venue-tidy-btn { font-size: 9.5px; }

@media (max-width: 900px) {
	.lp-venue-panels { grid-template-columns: minmax(0, 1fr); }
}


@media (max-width: 1100px) {
	.dv-sim { grid-template-columns: minmax(0, 1fr); }
	.dv-sim-params { border-left: 0; border-top: 1px solid var(--rule); }
	.dv-sim-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   7. Animations — the complete set. There are four, and there is no
   page-load or entrance animation anywhere; those were removed deliberately.
   -------------------------------------------------------------------------- */

@keyframes mtBlink   { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes mtScan    { 0% { background-position: 0% 0; }   100% { background-position: -200% 0; } }
@keyframes dgDrift   { 0% { background-position: 0% 50%; } 100% { background-position: -300% 50%; } }
@keyframes dgShimmer { 0% { background-position: 0% 50%; } 100% { background-position: -220% 50%; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Editor content, for the two templates that render markup nobody here wrote:
   a page created in the admin, and the archive fallback. Deliberately small --
   it covers the tags the editor actually emits and nothing else, so it cannot
   quietly become a second styling system competing with the components. */
.mt-prose { font-size: 15px; line-height: 1.7; color: var(--t2); }
.mt-prose > :first-child { margin-top: 0; }
.mt-prose > :last-child { margin-bottom: 0; }
.mt-prose h2 { margin: 32px 0 12px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.mt-prose h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 600; color: var(--ink); }
.mt-prose p, .mt-prose ul, .mt-prose ol { margin: 0 0 16px; }
.mt-prose ul, .mt-prose ol { padding-left: 22px; }
.mt-prose li { margin: 0 0 6px; }
.mt-prose a { color: var(--blue-t); }
.mt-prose strong { color: var(--ink); font-weight: 600; }
.mt-prose img { max-width: 100%; height: auto; border-radius: 4px; }
.mt-prose blockquote {
	margin: 0 0 16px; padding: 12px 16px;
	border-left: 1px solid var(--rule-strong);
	background: var(--surface-2);
}
.mt-prose code {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px; color: var(--ink);
}

/* --------------------------------------------------------------------------
   13. The phone layout
   --------------------------------------------------------------------------
   Not the desktop shell reflowed. The design pack lays the phone out
   separately -- eleven screens at 402 x 874 -- and this is that layout:

       ticker    26px   the Overview only
       header    60px   wordmark, theme select, CTA
       content          the only thing that scrolls
       tab bar   44px   six destinations, plus the home-indicator inset

   The 238px rail is not narrowed here, it is REPLACED. A rail is a column of
   ten rows that must never scroll, which is a shape that only exists on a
   screen with a spare 238px; the six things a phone reader actually needs go
   in a bar across the bottom instead, where a thumb already is.

   900px is not a new number: it is the line the doc pages already drop their
   nav column at, so the shell and the widest thing inside it fold together
   rather than at two widths a reader would notice separately. */

@media (max-width: 900px) {

	/* dvh, with vh underneath it for anything that does not know the unit. A
	   phone browser's own chrome moves, and 100vh is measured against the
	   state where it is hidden -- so a shell sized in vh keeps its last 30-odd
	   pixels under the toolbar for the whole visit, which here would be the
	   tab bar. */
	.mt-shell { height: 100vh; height: 100dvh; }

	.mt-topbar { display: flex; }
	.mt-tabbar { display: flex; }
	.mt-rail { display: none; }

	/* The constants strip is the Overview's own furniture in the pack, not
	   the shell's: it introduces the platform on the screen that introduces
	   the platform, and everywhere else it is 26px spent on something the
	   reader has already read. */
	.mt-ticker { display: none; }
	.home .mt-ticker { display: flex; height: 26px; padding: 0 14px; gap: 12px; background: var(--panel-3); }
	.mt-ticker-item--wide, .mt-ticker-sep { display: none; }
	.mt-ticker-item--narrow { display: inline; }

	/* 18px is the pack's phone padding, and 96px was the desktop's: on a
	   402px screen that left 306px of column. */
	.mt-head { min-height: 0; padding: 26px 18px 30px; }
	.mt-head--hero { padding: 26px 18px 30px; }
	.mt-section { padding: 26px 18px; }

	/* Deliberately LARGER body copy than desktop, which is the pack's call
	   and the opposite of the usual instinct: reading distance is shorter and
	   the column is narrower, so 14px that is comfortable at arm's length is
	   not comfortable here. */
	.mt-head h1 { font-size: 26px; line-height: 1.12; }
	.mt-head--hero h1 { font-size: 27px; line-height: 1.1; }
	.mt-head-lede,
	.mt-head--hero .mt-head-lede { font-size: 16px; line-height: 1.6; }
	.mt-section h2 { font-size: 21px; line-height: 1.15; }
	.mt-section-intro { font-size: 16px; line-height: 1.6; }
	.mt-cell h3 { font-size: 15px; }
	.mt-cell p { font-size: 14px; line-height: 1.6; }

	/* 14px is the floor for Inter on a phone, and these are every place the
	   desktop scale went under it. They are listed rather than swept up by a
	   descendant selector because each one is a deliberate size at desktop
	   width -- a note, an aside, a caption -- and raising them by category
	   would also raise things that are not body copy at all. */
	.mt-empty p,
	.mt-cert-lede,
	.smp-banner,
	.dv-step-desc,
	.dv-sim-note,
	.dv-cert-list li,
	.hg-list,
	.mt-doc-note,
	.mt-doc-note-aside,
	.stk-mine-gate-note,
	.dv-step-note,
	.lp-empty-note,
	.lp-escrow-distinction,
	.lp-dv-redacted-note,
	.lp-grad-lp-note,
	.lp-zk-cert-intro,
	.lp-dv-reg-intro,
	.lp-dv-reg-cta-note,
	.lp-dv-slot-note,
	.dv-widget-note,
	.lp-dv-privacy-banner,
	.lp-failed-night-return,
	.lp-zk-private-notice,
	.lp-notice,
	.mt-legal .mt-legal-notice,
	.cw-tier-c-requirement,
	.lp-dash-gate-note, .lp-dash-panel-note { font-size: 14px; }

	/* Everything below is one rule applied repeatedly: 44px is the floor for
	   anything tapped, and a control sized to its own text is smaller than a
	   fingertip however well it reads. The type inside is untouched -- these
	   grow the BOX, not the label. */
	.mt-btn--row { min-height: 44px; }
	.mt-matrix .mt-btn--primary { min-height: 44px; }
	.mt-chip { min-height: 44px; display: inline-flex; align-items: center; }
	.mt-doc-link { min-height: 44px; }
	.mt-doc-more { min-height: 44px; display: inline-flex; align-items: center; }
	.mt-search { min-height: 44px; }
	/* The slider is dragged, not tapped, but it is still the control -- and a
	   22px band is hard to catch with a thumb even when you know where it is.
	   The track and thumb inside keep their own sizes. */
	.dv-sim-range { height: 44px; }

	/* The buy panel as a bottom sheet ----------------------------------
	   The pack's transformation for the trading widget. On this page it
	   earns its keep for a measured reason: the panel starts 916px down a
	   3572px page in a 731px viewport, so a reader who has gone to look at
	   the trades, the supply split or the certificate has left the only
	   control that does anything two screens behind them.

	   Collapsed it is the header alone -- the ticker and the wallet cap --
	   pinned directly above the tab bar. Opened it is the real panel, capped
	   at the viewport and scrolling inside itself.

	   THE WHOLE THING IS GATED ON [data-lp-sheet], WHICH ONLY SCRIPT WRITES,
	   and that is the same rule the rail follows: a control that collapses
	   must not exist where the thing that reopens it does not. With no
	   script the panel stays exactly where the server put it, in the flow,
	   fully open. Nothing is moved in the DOM either -- the panel is
	   repositioned, not relocated -- so the wallet code bound to the inputs
	   inside it neither knows nor cares. */
	:root[data-lp-sheet] .lp-buy-panel {
		position: fixed; z-index: 40;
		left: 0; right: 0; bottom: var(--mt-tabbar-h);
		margin: 0;
		max-height: calc(100dvh - 61px - var(--mt-tabbar-h));
		overflow-y: auto;
		border-radius: 0;
		border-left: 0; border-right: 0; border-bottom: 0;
	}
	:root[data-lp-sheet="closed"] .lp-buy-panel > :not(.lp-buy-header) { display: none; }

	/* The sheet is out of flow, so the page has to be told to stop short of
	   it -- otherwise the footer's last line sits under the collapsed bar. */
	:root[data-lp-sheet] .mt-content { padding-bottom: 64px; }

	.lp-buy-header { align-items: center; }
	:root[data-lp-sheet] .lp-sheet-toggle { display: inline-flex; }

	/* The launch page's own controls. Same floor, same reason. */
	.lp-back-link,
	.lp-social-link { min-height: 44px; display: inline-flex; align-items: center; }
	/* Controls only a REAL launch renders -- the profile link on the creator's
	   own launch, the chart's timeframe buttons, and the trade table's
	   transaction links -- which no sample launch had ever put on a phone.
	   Found the day live's four launches were copied here. */
	.lp-profile-link { min-height: 44px; display: inline-flex; align-items: center; }
	.lp-tf-btn { min-height: 44px; min-width: 44px; }
	.lp-trades-table a { min-height: 44px; display: inline-flex; align-items: center; }
	/* The chart's 420px floor was the one thing on a real launch page wider
	   than the phone's column: it propagated up through the wrap -- a grid
	   item with no min-width of its own -- and put the whole page 80px into
	   a sideways scroll. The chart autosizes to its container, so at phone
	   width the container is simply the column. */
	.lp-chart-wrap { min-width: 0; }
	.lp-chart-canvas { min-width: 0; }
	/* The chart library's own attribution link -- an empty block anchor in
	   the table it draws, 35x19 -- kept, as its licence asks, and given a
	   target a thumb can hit. */
	.lp-chart-canvas td > a { min-width: 44px; min-height: 44px; display: flex; align-items: center; }
	.lp-ada-input,
	.lp-max-btn,
	.lp-dv-reg-btn,
	.lp-dex-link { min-height: 44px; }
	.lp-input-wrap input,
	.dv-widget-field input,
	.dv-widget-field textarea { min-height: 44px; }
	.mt-topbar-mark,
	.mt-footer-mark { min-height: 44px; display: flex; align-items: center; }
	.mt-footer-links a { min-height: 44px; display: inline-flex; align-items: center; }

	.mt-footer { padding: 26px 18px; }
	.mt-footer-tag,
	.mt-footer-legal { font-size: 14px; }

	/* Two 320px halves cannot sit side by side in a 366px column, and the
	   track floor was holding one of them open past the screen. */
	.mt-cert { grid-template-columns: minmax(0, 1fr); }

	/* The matrix stands its columns up as cards.

	   The rail scrolls inside the content column rather than being pulled
	   full-bleed to the screen edges. Bleeding it meant a box 36px wider than
	   its own parent, and a parent whose content sticks out is the exact
	   shape the specification warns about under decorative glows: scrollWidth
	   grows even where overflow is hidden, and the phantom scroll range that
	   produces is a bug this build has already had once. The cost is 18px of
	   trailing gutter; the gain is that every box on the page contains what
	   it says it contains. */
	.mt-matrix-wrap { display: none; }
	.mt-chain-rail {
		display: flex; gap: 10px;
		margin-top: 28px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
	}
	.mt-chain-card { scroll-snap-align: start; }

	/* The doc sidebar becomes a strip -----------------------------------
	   A 230px column of rows beside an article is a shape that needs two
	   columns. With one, the pack runs the sections as a scrolling strip
	   across the top instead, and the article underneath it -- so choosing a
	   section stays one tap and never costs a screenful of list first.

	   It scrolls away with the article rather than pinning, which is what the
	   pack's Guides screen does with the same strip. Pinning it was tried and
	   is not available here: a sticky element is held inside its own
	   containing block, and this strip's is the nav -- about a hundred pixels
	   tall -- so it unpins the moment the article scrolls past that, and what
	   a reader sees is a strip sliding half off the top edge. Pinning it
	   properly means lifting it out of the document and into the shell, which
	   is a structural change for one page. */

	/* One column, and the sidebar does not stick. This pair used to sit next
	   to .mt-doc, ABOVE the rule that makes the nav sticky, so the half that
	   unsticks it lost on source order and had never once applied: on a
	   narrow window the whole sidebar stayed pinned at top:24px while the
	   article scrolled underneath, with its note drawn straight through the
	   section heading. */
	.mt-doc { grid-template-columns: 1fr; }
	.mt-doc-nav { position: static; }

	.mt-doc-list {
		display: flex; gap: 0;
		margin-bottom: 18px;
		padding: 0;
		overflow-x: auto;
		border-bottom: 1px solid var(--rule);
	}
	.mt-doc-link {
		flex: none;
		min-height: 48px; padding: 0 12px;
		align-items: center;
		border-radius: 0;
		border-bottom: 2px solid transparent;
		font-family: "JetBrains Mono", ui-monospace, monospace;
		font-size: 9.5px; font-weight: 600; letter-spacing: .09em;
		text-transform: uppercase;
		color: var(--t4); white-space: nowrap;
	}
	/* The number is the sidebar's ordering device. A strip is already in
	   order, left to right, and 9.5px of label plus 9.5px of digit in a 48px
	   row reads as two words rather than one. */
	.mt-doc-num { display: none; }
	.mt-doc-link.is-active {
		background: none;
		border-bottom-color: var(--blue);
		color: var(--ink);
	}

	/* A Cardano address is over a hundred characters and this one was set
	   nowrap, which on a phone is a single 784px line inside a 366px column --
	   the widest thing on the site at this width by a factor of two. It wraps
	   mid-string here, the same treatment the certificate's own values
	   already take, because an address has no word boundaries to wrap at. */
	.trn-wallet { grid-template-columns: minmax(0, 1fr); }
	.trn-wallet-addr {
		white-space: normal; word-break: break-all;
		min-height: 44px; display: flex; align-items: center;
	}
	.trn-wallet-note { font-size: 14px; }
	.mt-fold-body { padding: 18px; }
	.mt-fold-body > p { font-size: 14px; }

	/* The six-column table becomes stacked rows -------------------------
	   The pack's own transformation, and the reason it is a transformation
	   rather than a scroll: a data table has a header, and a header 402px
	   wide with 820px of columns under it can only be read by dragging the
	   body out from under its own labels. Stacked, each row is a card and
	   each figure carries its own label down with it.

	   The 820px floor goes with the table shape. It was there to stop six
	   columns crushing; there are two here. */
	.mt-rows { min-width: 0; }
	.mt-row--head { display: none; }
	.mt-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
		padding: 16px;
	}
	.mt-row > .mt-token { grid-column: 1; }
	.mt-row > :nth-child(2) { grid-column: 2; justify-self: end; }
	.mt-row > :nth-child(5),
	.mt-row > :nth-child(6) { grid-column: 1 / -1; }

	/* The heading the header row used to carry, now standing with its own
	   figure. Set from the same tokens as .mt-label so the two cannot drift. */
	.mt-row [data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 3px;
		font-family: "JetBrains Mono", ui-monospace, monospace;
		font-size: 9.5px; font-weight: 600; letter-spacing: .13em;
		line-height: 1.4; text-transform: uppercase; color: var(--t4);
	}

	/* Rings tighten from 26px to 22px. The specification asks for this and the
	   reason is geometric: at 402px an arc drawn on a 26px pitch crosses the
	   band in so few steps that it reads as a straight diagonal rather than a
	   curve. The 1px stroke and the downward mask are unchanged. */
	.mt-head-rings {
		background: repeating-radial-gradient(circle at 18% 42%, transparent 0 22px, var(--ring) 22px 23px);
	}
	.mt-head--hero .mt-head-rings {
		background: repeating-radial-gradient(circle at 50% 44%, transparent 0 22px, var(--ring) 22px 23px);
	}

	/* Editor content joins the 14px floor with everything else. */
	.mt-prose { font-size: 14px; }

	/* The stat figure at the phone scale: 24px in the pack's build and in the
	   specification's 3.2 table (23-24), against 25px on the desktop. */
	.mt-stat-value { font-size: 24px; }
	/* Stat tiles inset 18px on the phone (the pack's screen 8), against 22px 24px on the desktop. */
	.mt-stat { padding: 18px; }

	/* A fold's head on the phone is a tinted 40px row (the pack's screen 6: 13px 16px on
	   --surface-2), open or shut; 44px here is the tap floor. */
	.mt-fold-head { min-height: 44px; padding: 13px 16px; background: var(--surface-2); }

	/* The simulator band is tinted on the phone (the pack's screen 3: --panel-2 behind the
	   whole block), where the desktop keeps it on the surface. */
	.mt-section--surface:has(.dv-sim) { background: var(--panel-2); }

	/* A guide is a 16px-inset block on the phone (the pack's screen 7), its head and body
	   sharing that one inset rather than each carrying 18px of their own. */
	.hg-guide { padding: 16px; }
	.hg-guide-head { min-height: 44px; padding: 0; }
	.hg-guide-body { padding: 14px 0 0; }

	/* Samples on the phone are ONE bordered list, hairline-separated (the pack's screen 9), not
	   a stack of separate cards: the card's own frame moves to the grid, and
	   each card keeps only its inset and the rule above it. */
	.smp-grid { gap: 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); overflow: hidden; }
	.smp-card { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 16px; }
	.smp-card:first-child { border-top: 0; }

	/* The Terms contents is a vertical card of 45px Inter rows on the phone
	   (the pack's screen 11), not the mono strip the section navs become: a reader picks a
	   clause from a list, and ten clauses do not fit a strip. The number
	   stays, as the pack's does. */
	.mt-doc--toc .mt-doc-nav {
		display: grid; gap: 0; margin-bottom: 18px;
		border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); overflow: hidden;
	}
	.mt-doc--toc .mt-doc-link {
		display: flex; align-items: center; gap: 12px;
		min-height: 45px; padding: 0 16px;
		border: 0; border-top: 1px solid var(--rule-2); border-radius: 0;
		font-family: "Inter", system-ui, sans-serif; font-size: 14.5px; font-weight: 400;
		letter-spacing: 0; text-transform: none; color: var(--t2);
	}
	.mt-doc--toc .mt-doc-link:first-child { border-top: 0; }
	.mt-doc--toc .mt-doc-num { display: inline; }
	.mt-doc--toc .mt-doc-link.is-active { color: var(--ink); background: var(--surface-2); border-bottom: 0; }

	/* Design's strip sits under the app header, above the title band (the pack's screen 4);
	   the in-section list is hidden there because the strip IS that list. */
	.mt-doc-strip {
		display: flex; flex: none; gap: 0; height: 49px; padding: 0 18px;
		overflow-x: auto; scrollbar-width: none;
		background: var(--surface); border-bottom: 1px solid var(--rule);
		/* Under the title band in the flow, then stuck to the top of the
		   column once the page scrolls past it, so a section is one tap away
		   from anywhere in the article rather than a scroll back to the top.
		   It is a direct child of the content column, which is the scroller,
		   so sticky resolves against that column and not the document; its
		   own opaque ground is what the article slides under. */
		position: sticky; top: 0; z-index: 5;
	}
	.mt-doc-strip::-webkit-scrollbar { display: none; }
	.mt-doc--strip-top .mt-doc-list { display: none; }

	/* The title band keeps its rings and glow on every page -----------------
	   The pack's phone screens set a secondary page's kicker, title and lede
	   on the bare ground (screens 2, 6 and 9 draw no band), and the Overview
	   alone keeps the tinted hero. This build keeps the band on every page
	   BY DECISION (2026-09-04): the rings and the hue are what make a page
	   read as this site's at a glance, in all three themes, and the parity
	   check records the pack's plain head as a noted exception. */

	/* Filters are ONE row you can drag --------------------------------------
	   The pack's Launches screen puts every chip on a single 44px line with
	   an 18px inset and no wrapping; a second row of chips would push the
	   list it filters below the fold. Both groups sit on that one line. The
	   row scrolls inside the column rather than bleeding to the screen's
	   edge: a bled row widens the column's scroll range, and a column that
	   can be dragged sideways is a bug this build has already had once. */
	.mt-filters-row {
		flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
		overflow-x: auto; scrollbar-width: none;
	}
	.mt-filters-row::-webkit-scrollbar { display: none; }
	.mt-filters-row .mt-filters { flex: none; flex-wrap: nowrap; }
	.mt-filters-row .mt-chip { padding: 0 15px; white-space: nowrap; }

	/* A launch row is the pack's stacked card --------------------------------
	   Head: avatar, name over "$TICKER · Chain", the state pill at the right.
	   Then RAISED with its figure on one line, CURVE with its percentage over
	   the bar, and the action as a full-width 44px button. The Chain column
	   is gone: it is in the ticker line now. Margins are the pack's own:
	   14px to RAISED, 12px to the bar block, 14px to the button. */
	.mt-row { gap: 0 12px; }
	.mt-row > :nth-child(2) { align-self: start; }
	.mt-row > :nth-child(2) .mt-pill { padding: 5px 8px; }
	.mt-row > :nth-child(3) { display: none; }
	.mt-row > :nth-child(4) { grid-column: 1 / -1; }
	.mt-token { gap: 11px; }
	.mt-token-name { font-size: 15px; line-height: 1.2; }
	.mt-token-ticker { font-size: 11.5px; font-weight: 500; line-height: 1.3; margin-top: 3px; }
	.mt-token-chain { display: inline; }
	.mt-avatar {
		width: 36px; height: 36px;
		background: var(--paper); border-color: var(--rule);
	}

	.mt-row > [data-label="Raised"] {
		display: flex; justify-content: space-between; gap: 12px;
		margin-top: 14px;
		font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink);
	}
	.mt-row > [data-label="Raised"]::before {
		display: inline; margin: 0;
		font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.5;
		color: var(--t4);
	}

	.mt-row > [data-label="Curve"] {
		display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: end;
		margin-top: 12px;
	}
	.mt-row > [data-label="Curve"]::before {
		margin: 0 0 6px;
		font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.4;
	}
	.mt-row > [data-label="Curve"] .mt-curve-pct {
		margin: 0 0 6px;
		font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--ink);
	}
	.mt-row > [data-label="Curve"] .mt-track {
		grid-column: 1 / -1;
		height: 5px; margin: 0; border: 0; border-radius: 2px;
		background: var(--rule-2);
	}

	.mt-row > :nth-child(6) { margin-top: 14px; }
	.mt-row .mt-btn--row {
		display: flex; width: 100%; min-height: 44px;
		font-size: 10px; letter-spacing: .09em;
	}
}