/* No fonts, scripts or images from other sites: opening this page tells nobody but the host. */
/* Claude Code colours: ink, cream and Claude orange. Dark first, light when the system asks for it. */
:root {
	--bg: #201f1c; --surface: #2a2926; --raised: #34322e; --fg: #f3f1ea; --muted: #b5b1a7; --line: #46433d;
	--accent: #d97757; --accent-ink: #141413; --accent-soft: rgba(217, 119, 87, .14); --glow: rgba(217, 119, 87, .35); --hover: rgba(217, 119, 87, .14);
	--warn: #f0b47a; --warn-bg: #3a2a18; --ok: #8fd18f;
	--scan: rgba(255, 255, 255, .025);
	--c-shipper: #7ec488; --c-afk: #8fb8f0; --c-loot: #e8c35a; --c-token: #e58bd0; --c-balanced: #9ed9d0; --c-noob: #c9c4b8; --c-unhatched: #a8a49a;
	--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
	color-scheme: dark;
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--bg: #faf9f5; --surface: #ffffff; --raised: #f0eee6; --fg: #141413; --muted: #5e5b53; --line: #e3dfd3;
		--accent: #b05330; --accent-ink: #ffffff; --accent-soft: rgba(176, 83, 48, .1); --glow: rgba(176, 83, 48, .25); --hover: #fdf6f2;
		--warn: #8a4b0f; --warn-bg: #f7ead9; --ok: #2f7a3d;
		--scan: rgba(0, 0, 0, .018);
		--c-shipper: #2f7a3d; --c-afk: #2f5f9e; --c-loot: #8a6500; --c-token: #a23d8c; --c-balanced: #1f7268; --c-noob: #5e5b53; --c-unhatched: #6e6a60;
		color-scheme: light;
	}
}
:root[data-theme="light"] {
	--bg: #faf9f5; --surface: #ffffff; --raised: #f0eee6; --fg: #141413; --muted: #5e5b53; --line: #e3dfd3;
	--accent: #b05330; --accent-ink: #ffffff; --accent-soft: rgba(176, 83, 48, .1); --glow: rgba(176, 83, 48, .25); --hover: #fdf6f2;
	--warn: #8a4b0f; --warn-bg: #f7ead9; --ok: #2f7a3d;
	--scan: rgba(0, 0, 0, .018);
	--c-shipper: #2f7a3d; --c-afk: #2f5f9e; --c-loot: #8a6500; --c-token: #a23d8c; --c-balanced: #1f7268; --c-noob: #5e5b53; --c-unhatched: #6e6a60;
	color-scheme: light;
}

* { box-sizing: border-box; }
body { --page: 54rem; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 var(--mono); }
/* Faint CRT scanlines. */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10; background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--scan) 2px 3px); }
main { max-width: calc(var(--page) + 2rem); margin-inline: auto; padding-inline: 1rem; padding-block: 2.5rem 3rem; display: flex; flex-direction: column; gap: 2.5rem; }
p { margin: 0; max-width: 68ch; }
a { color: var(--accent); }
code { font-family: var(--mono); font-size: .92em; color: var(--accent); white-space: nowrap; }
pre { margin: 0; font-family: var(--mono); }
h2 { font: 600 .8rem/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); margin: 0; }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header */
.hero { display: flex; flex-direction: column; gap: .9rem; }
.prompt { font-size: .85rem; color: var(--muted); }
.prompt .path { color: var(--ok); }
.prompt .dollar { color: var(--accent); }
.cursor { color: var(--accent); margin-left: .15em; animation: blink 1.1s steps(1) infinite; }
h1 { font: 800 clamp(2.2rem, 9vw, 3.8rem)/1 var(--mono); letter-spacing: -.04em; margin: 0; text-wrap: balance; text-shadow: 3px 3px 0 var(--accent-soft), 6px 6px 0 var(--accent-soft); }
h1 .dot { color: var(--accent); }
.tagline { font-size: clamp(1.05rem, 3.6vw, 1.35rem); font-weight: 700; text-wrap: balance; }
.tagline em { font-style: normal; color: var(--accent); display: block; }
.lede { color: var(--muted); font-size: 1rem; }
.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.badges li { font-size: .85rem; font-weight: 700; padding: .4rem .85rem; border: 1px solid var(--accent); border-radius: 99px; background: var(--surface); color: var(--fg); box-shadow: 2px 2px 0 var(--accent-soft); }
.badges li::before { content: "✓ "; color: var(--ok); }
.badges a { color: var(--fg); text-decoration: none; }
.badges a:hover { text-decoration: underline; }
.lede em { font-style: normal; color: var(--fg); background: var(--accent-soft); padding-inline: .2em; border-radius: 3px; }
.meta { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* The six stages, same drawings as the /pet card. */
.evo { list-style: none; margin: .5rem 0 0; padding: 0 0 .5rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(7.5rem, 1fr); gap: .5rem; overflow-x: auto; }
.evo li { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem .4rem .55rem; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); position: relative; }
.evo li + li::before { content: "→"; position: absolute; left: -.5rem; top: 1.6rem; transform: translateX(-50%); color: var(--muted); font-size: .8rem; }
.evo pre { font-size: .8rem; line-height: 1.15; color: var(--accent); }
.evo b { font-size: .78rem; font-weight: 600; text-align: center; }
.evo span { font-size: .7rem; color: var(--muted); }
.evo li:hover pre { animation: bob .5s ease-in-out 2; }

/* World readouts: three counts in one strip, the world totals on a line beneath, then the list */
.world { display: flex; flex-direction: column; gap: 1rem; }
.world-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.stamp { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.readout { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.readout dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.readout dl > div { padding: .9rem 1.1rem; display: flex; flex-direction: column; justify-content: space-between; gap: .2rem; min-width: 0; }
.readout dl > div + div { border-left: 1px dashed var(--line); }
.readout dt { font-size: .75rem; color: var(--muted); }
.readout dd { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.totals { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .65rem 1.1rem; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--muted); }
.totals b { color: var(--fg); font-variant-numeric: tabular-nums; }
.totals .meter { flex: 1 1 8rem; }
.meter { display: block; height: .55rem; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; background: var(--raised); }
.meter > span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 8px); }

/* Class wars and badge rarity */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .75rem; }
.game { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.game h3 { font: 700 .95rem/1.4 var(--mono); letter-spacing: .02em; color: var(--fg); margin: 0; }
.game h3 .slash { color: var(--accent); }
.game .lead { font-size: .85rem; color: var(--muted); margin: 0; }
.game .lead b { color: var(--fg); }
.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.bars li { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .82rem; }
.bars .label { overflow-wrap: anywhere; }
.bars .value { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.bars .meter > span { animation: grow .6s ease-out both; transform-origin: left; }
.bars .meter[data-class="Shipper"] > span { background: var(--c-shipper); }
.bars .meter[data-class="AFK Farmer"] > span { background: var(--c-afk); }
.bars .meter[data-class="Loot Goblin"] > span { background: var(--c-loot); }
.bars .meter[data-class="Tokenmaxxer"] > span { background: var(--c-token); }
.bars .meter[data-class="Perfectly Balanced"] > span { background: var(--c-balanced); }
.bars .meter[data-class="Noob"] > span { background: var(--c-noob); }
.bars .meter[data-class="Unhatched"] > span { background: var(--c-unhatched); }
@keyframes grow { from { transform: scaleX(0); } }

/* Controls: a two-way switch on the left, the class filter on the right */
.controls { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; padding-top: .5rem; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tabs button { font: inherit; font-size: .85rem; border: 0; background: transparent; color: var(--muted); padding: .35rem 1rem; border-radius: 7px; cursor: pointer; transition: background-color .15s, color .15s; }
.tabs button:hover { color: var(--fg); background: var(--raised); }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
label { font-size: .85rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; }
select { font: inherit; font-size: .85rem; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; cursor: pointer; }
select:hover { border-color: var(--muted); }

/* The landing page: a wider page and more air between sections than the guide pages. */
body.landing { --page: 66rem; }
.landing main { gap: 7rem; padding-block: 2rem 4rem; }
.landing .hero.split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem 4rem; padding-block: 3.5rem 0; }
.landing .hero-text { gap: 1.4rem; }
.landing .hero.split h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.landing .hero.split .tagline { font-size: clamp(1.1rem, 2.6vw, 1.45rem); }
.landing .tagline span { white-space: nowrap; }
.landing .lede { max-width: 54ch; text-wrap: pretty; line-height: 1.75; }
.landing .ctas { margin-top: .6rem; gap: .8rem; }
.landing .btn { padding: .8rem 1.4rem; }
.landing .evolve { padding: 3.75rem 2rem 2.75rem; gap: 1.25rem; }
.landing .evolve pre { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.landing .evolve figcaption { font-size: 1rem; }
/* The checks run as one line under the whole hero. */
.landing .checks { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px dashed var(--line); gap: .4rem 2rem; font-size: .85rem; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; font-size: .8rem; color: var(--muted); }
.checks li::before { content: "✓ "; color: var(--ok); }
.checks a { color: inherit; text-decoration: none; }
.checks a:hover { color: var(--fg); text-decoration: underline; }

/* The one install line, in its own terminal window. Long, so it wraps only between its two halves. */
.get { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; text-align: center; scroll-margin-top: 5rem; }
.term { width: 100%; max-width: 46rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; text-align: left; box-shadow: 0 30px 70px -40px var(--glow); transition: border-color .15s; }
.term:hover { border-color: var(--accent); }
.term-bar { display: flex; align-items: center; gap: .4rem; padding: .65rem 1rem; border-bottom: 1px dashed var(--line); }
.term-bar span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); }
.term-bar b { margin-left: .6rem; font-size: .72rem; font-weight: 500; color: var(--muted); }
.term-line { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.25rem 1.5rem 1.5rem; }
.term-line code { flex: 1; min-width: 0; font-size: 1rem; color: var(--fg); white-space: normal; padding-left: 2ch; text-indent: -2ch; }
.term-line code::before { content: "$ "; color: var(--accent); }
.term-line code span { white-space: nowrap; }
.term-line .copy { font-size: .8rem; padding: .3rem .8rem; }
.get .note { max-width: 46rem; }

/* Section headings on the landing page: big, with the comment slashes in orange */
.landing main > section > h2, .landing .world-head h2 { font: 800 clamp(1.6rem, 3.6vw, 2.4rem)/1.15 var(--mono); letter-spacing: -.03em; color: var(--fg); }
.landing h2 .slash { color: var(--accent); }
.landing .world-head { align-items: flex-end; }
.landing .world { gap: 1.5rem; }
.landing .faq h2 { margin-bottom: 1.25rem; }

/* What you get */
.what { display: flex; flex-direction: column; gap: 1.75rem; }
.landing .tiles { gap: 1rem; }
.landing .tiles article { padding: 1.6rem 1.5rem 1.4rem; gap: .6rem; }

/* Podium */
#panel { display: flex; flex-direction: column; gap: 1.25rem; }
.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.podium li { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 1rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; animation: rise .4s ease-out both; }
.podium li.p1 { order: 2; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 28px var(--glow); padding-block: 1.4rem; }
.podium li.p2 { order: 1; animation-delay: .08s; }
.podium li.p3 { order: 3; animation-delay: .16s; }
.podium .place { font-size: .8rem; font-weight: 700; color: var(--muted); }
.podium .p1 .place { color: var(--accent); }
.podium pre { font-size: .95rem; line-height: 1.15; color: var(--accent); }
.podium .p1 pre { animation: bob 1.6s ease-in-out infinite; }
.podium .who { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.podium .xp { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.podium .xp small { font-size: .7rem; font-weight: 500; color: var(--muted); }
.podium .sub { font-size: .75rem; color: var(--muted); }
.podium .tags { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }

/* Table */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .5rem .8rem .5rem 0; border-bottom: 1px dashed var(--line); white-space: nowrap; vertical-align: middle; }
tbody tr { animation: fade .3s ease-out both; }
tbody tr:hover { background: var(--hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.rank { color: var(--muted); font-variant-numeric: tabular-nums; width: 3rem; }
td.name { font-weight: 600; }
.creature { display: flex; align-items: center; gap: .7rem; }
.mini { font-size: .42rem; line-height: 1.1; color: var(--accent); flex: none; }
.bar { display: block; height: 3px; margin-top: .25rem; margin-left: auto; background: var(--accent); border-radius: 2px; min-width: 2px; }

/* Class chips and tags */
.chip { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border: 1px solid currentColor; border-radius: 99px; white-space: nowrap; color: var(--muted); }
.chip[data-class="Shipper"] { color: var(--c-shipper); }
.chip[data-class="AFK Farmer"] { color: var(--c-afk); }
.chip[data-class="Loot Goblin"] { color: var(--c-loot); }
.chip[data-class="Tokenmaxxer"] { color: var(--c-token); }
.chip[data-class="Perfectly Balanced"] { color: var(--c-balanced); }
.chip[data-class="Noob"] { color: var(--c-noob); }
.chip[data-class="Unhatched"] { color: var(--c-unhatched); }
.stage { font-size: .75rem; color: var(--muted); margin-right: .4rem; }
.sus { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--warn); background: var(--warn-bg); border-radius: 4px; padding: 0 .35rem; vertical-align: .1em; }
.gh { font-size: .75rem; font-weight: 500; color: var(--ok); text-decoration: none; white-space: nowrap; }
.gh:hover { text-decoration: underline; }

/* Empty, error and loading states */
.state { border: 1px dashed var(--line); border-radius: 12px; padding: 1.5rem; color: var(--muted); display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.state b { color: var(--fg); }
.state.empty { align-items: center; text-align: center; padding-block: 2.25rem; }
.state .egg { font-size: 1.3rem; line-height: 1.15; color: var(--accent); animation: wobble 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.cmds { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 30rem; }
.cmds li { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: .45rem .5rem .45rem .8rem; text-align: left; }
/* Reset what the guide page's .step sections would add. */
.cmds .step { display: inline; padding: 0; border: 0; color: var(--muted); font-size: .75rem; flex: none; }
.cmds code { flex: 1; min-width: 0; overflow-x: auto; color: var(--fg); }
.cmds code::before { content: "> "; color: var(--accent); }
.copy { font: inherit; font-size: .75rem; color: var(--accent); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .15rem .55rem; cursor: pointer; flex: none; }
.copy:hover { border-color: var(--accent); }

.more { align-self: flex-start; font: inherit; font-size: .88rem; color: var(--accent); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .4rem 1rem; cursor: pointer; }
.more:hover { border-color: var(--accent); }
.bands { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Site nav, on every page */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; background: var(--bg); border-bottom: 1px dashed var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .6rem max(1rem, calc((100% - var(--page)) / 2)); }
.brand { font-weight: 800; font-size: 1rem; color: var(--fg); text-decoration: none; letter-spacing: -.02em; }
.brand .dot, .brand .hl { color: var(--accent); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.nav ul a { display: block; font-size: .82rem; color: var(--muted); text-decoration: none; padding: .3rem .6rem; border-radius: 6px; }
.nav ul a:hover { color: var(--fg); background: var(--surface); }
.nav ul a[aria-current="page"] { color: var(--fg); background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }

/* Landing hero: words on the left, the evolving creature on the right */
.hero.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding-block: 1rem; }
.hero-text { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.hero.split h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); line-height: 1.05; }
h1 .hl { color: var(--accent); }
.hero.split .tagline { font-size: clamp(1.1rem, 3.4vw, 1.4rem); }
.eyebrow { align-self: flex-start; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: .25rem .65rem; border-radius: 4px; transform: rotate(-1.5deg); }
.ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn { display: inline-flex; align-items: center; font-weight: 700; font-size: .92rem; color: var(--fg); text-decoration: none; padding: .6rem 1.1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 4px 4px 0 var(--accent-soft); }
.btn.primary:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--accent-soft); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.evolve { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 2rem 1rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 50% 40%, var(--glow), transparent 65%), var(--surface); min-width: 0; }
.evolve pre { font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.15; color: var(--fg); min-height: 4.6em; display: flex; align-items: center; }
.evolve pre.pop { animation: pop .35s ease-out; }
.evolve figcaption { display: flex; gap: .7rem; align-items: baseline; font-size: .9rem; }
.evolve figcaption span { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4.5ch; }
.xpbar { display: block; width: 80%; height: .5rem; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; background: var(--raised); }
.xpbar > span { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 8px); }

/* Three tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.tiles article { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.tiles article:hover { border-color: var(--accent); }
.tiles .tile-num { font-size: .75rem; font-weight: 800; color: var(--accent); }
.tiles h3 { margin: 0; font-size: 1.05rem; }
.tiles p { font-size: .85rem; color: var(--muted); flex: 1; }
.tiles .tag { align-self: flex-start; font-size: .72rem; font-weight: 600; color: var(--ok); }
.tiles .tag::before { content: "✓ "; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: .5rem; }

/* The guide page */
.hero-plain { display: flex; flex-direction: column; gap: .9rem; }
.toc { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: block; font-size: .8rem; color: var(--fg); text-decoration: none; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
.toc a::before { content: "0" counter(toc) " "; color: var(--accent); font-weight: 700; }
.toc a:hover { border-color: var(--accent); }
.step { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.5rem; border-top: 1px dashed var(--line); scroll-margin-top: 4rem; }
/* Wide children (the card, tables, the stage strip) scroll inside themselves, never the page. */
main > *, .step > * { min-width: 0; max-width: 100%; }
.step p code, .flow code, details p code { white-space: normal; overflow-wrap: anywhere; }
.step-num { font-size: .8rem; font-weight: 800; color: var(--accent); }
.step h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); color: var(--fg); letter-spacing: -.02em; }
.step > p { font-size: .92rem; }
.note { font-size: .82rem; color: var(--muted); }
.flow { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; }
.flow li::marker { color: var(--accent); font-weight: 700; }
.card-demo { font-size: .78rem; line-height: 1.4; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow-x: auto; white-space: pre; }
.cheat { min-width: 0; }
.cheat td { white-space: normal; }
.cheat td:first-child { white-space: nowrap; }
.ctas.end { justify-content: center; padding-top: 1rem; }

/* How it works */
.how { display: flex; flex-direction: column; gap: 1rem; }
.steps { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .9rem; font-size: .9rem; min-width: 0; }
.steps li::marker { color: var(--accent); font-weight: 700; }
.steps .cmds { margin-top: .5rem; }
.steps .cmds { max-width: 44rem; }
.cmds code.wrap { white-space: normal; overflow-wrap: anywhere; }
.payload { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 1rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.payload h3 { margin: 0; font-size: .8rem; font-weight: 700; color: var(--accent); }
.payload pre { font-size: .78rem; line-height: 1.45; color: var(--fg); background: var(--raised); border-radius: 8px; padding: .75rem; overflow-x: auto; }
.payload p { font-size: .82rem; color: var(--muted); }
.payload p b { color: var(--fg); }

/* Fine print */
.rules { display: flex; flex-direction: column; gap: .5rem; }
details { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
summary { cursor: pointer; padding: .65rem .9rem; font-size: .9rem; font-weight: 600; list-style: none; display: flex; align-items: center; gap: .5rem; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; color: var(--accent); font-weight: 800; width: 1ch; }
details[open] summary::before { content: "-"; }
details p { padding: 0 .9rem .85rem 2.4rem; color: var(--muted); font-size: .85rem; }

footer { color: var(--muted); font-size: .8rem; display: flex; flex-direction: column; gap: .5rem; border-top: 1px dashed var(--line); padding-top: 1.25rem; }
.eof { color: var(--muted); letter-spacing: .1em; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.85); opacity: .4; } }

@media (max-width: 720px) {
	.hero.split, .landing .hero.split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 1.5rem; }
	.landing main { gap: 4.5rem; }
}
@media (max-width: 560px) {
	.podium { grid-template-columns: minmax(0, 1fr); }
	.podium li.p1, .podium li.p2, .podium li.p3 { order: 0; }
	.podium li { flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: left; }
}
@media (max-width: 420px) {
	.term-line code span { white-space: normal; }
	.term-line { padding: 1.1rem .9rem 1.1rem 1rem; }
	.term-line code { font-size: .9rem; }
	.readout dl > div { padding-inline: .75rem; }
	.readout dd { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}