/* Nest v4 — design tokens. Dark: dusk (navy sky, amber bird, coral sunset); light: warm sand. 4 px grid; tabular numbers. */
:root {
  --font: "Geist", ui-sans-serif, system-ui, sans-serif; --display: "Bricolage Grotesque", "Geist", ui-sans-serif, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace; --serif: "Instrument Serif", Georgia, serif;
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --max: 1180px; --ease: cubic-bezier(.2, .7, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
}
:root, [data-theme="dark"] {
  --bg: #0D0F22; --bg2: #11142B; --card: #161936; --card2: #1C2043; --line: rgba(255, 236, 210, .085); --line2: rgba(255, 236, 210, .16);
  --text: #F6F0E6; --muted: #AEB1D2; --faint: #777CA6; --gold: #FFB547; --gold2: #FFD08A; --gold-ink: #1E1206;
  --coral: #FF7A59; --green: #5FD39A; --glow: rgba(255, 181, 71, .15); --sky1: #1D2152; --sky2: rgba(255, 122, 89, .16);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 24px 48px -28px rgba(0, 0, 0, .75);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #FBF4E8; --bg2: #F4EAD8; --card: #FFFFFF; --card2: #FDF8EF; --line: rgba(27, 28, 58, .09); --line2: rgba(27, 28, 58, .17);
  --text: #1B1C3A; --muted: #55577A; --faint: #8A8CA8; --gold: #B5620A; --gold2: #F09A2E; --gold-ink: #FFFFFF;
  --coral: #D24A26; --green: #1F7A4D; --glow: rgba(240, 154, 46, .14); --sky1: #FFE3B8; --sky2: rgba(255, 122, 89, .14);
  --shadow: 0 1px 2px rgba(27, 28, 58, .05), 0 22px 44px -28px rgba(27, 28, 58, .3);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--gold-ink); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; font-weight: 700; font-family: var(--display); }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold); letter-spacing: -.01em; }
.kicker { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.lead { color: var(--muted); font-size: 18.5px; max-width: 34em; margin: 0; }
section { padding: 104px 0; }
.sec-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 720px; }
.sec-head p { margin: 0; color: var(--muted); font-size: 17px; }

/* ticker */
.ticker { border-bottom: 1px solid var(--line); background: var(--bg2); font: 500 12.5px var(--mono); color: var(--muted); }
.ticker .wrap { display: flex; gap: 28px; align-items: center; height: 36px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.ticker .wrap::-webkit-scrollbar { display: none; }
.ticker b { color: var(--text); font-weight: 500; margin-left: 6px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); margin-right: 8px; vertical-align: 1px; }
.dot.live { background: var(--green); animation: pulse 2s infinite; }
.dot.support { background: var(--coral); }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 20px var(--display); letter-spacing: -.02em; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav { display: flex; gap: 2px; margin-left: 24px; }
.nav a { padding: 8px 12px; border-radius: 999px; color: var(--muted); font-size: 14.5px; white-space: nowrap; transition: color .15s, background .15s; }
.nav a:hover, .nav a.on { color: var(--text); background: var(--card); }
.actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line2); background: transparent; cursor: pointer; color: var(--muted); transition: color .15s, border-color .15s; }
.icon-btn:hover { color: var(--text); border-color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
[data-theme="dark"] .i-sun, [data-theme="light"] .i-moon { display: none; }

/* progress, burger, mobile sheet */
.progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--gold2), var(--gold)); z-index: 40; }
.burger { display: none; }
.sheet { position: fixed; inset: 68px 0 0; z-index: 19; padding: 20px 24px 32px; background: var(--bg); border-top: 1px solid var(--line); overflow: auto;
  animation: sheet .28s var(--ease); }
.sheet nav { display: grid; }
.sheet nav a { padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.sheet-cta { display: grid; gap: 10px; margin-top: 24px; }
@keyframes sheet { from { opacity: 0; transform: translateY(-8px); } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font: 600 15px var(--font);
  border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), background .15s, box-shadow .2s, border-color .15s; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--gold); color: var(--gold-ink); box-shadow: 0 10px 26px -12px var(--gold); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px var(--gold); }
.btn.primary:active { transform: translateY(1px); }
.btn.ghost { background: transparent; border-color: var(--line2); color: var(--text); }
.btn.ghost:hover { border-color: var(--text); }
.btn.sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn.xs { height: 32px; padding: 0 12px; font-size: 13px; }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; padding: 6px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line2);
  box-shadow: var(--shadow); display: none; }
.menu.open .menu-list { display: block; animation: drop .18s var(--ease); }
.menu-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; }
.menu-list a:hover { background: var(--card2); }
.menu-list small { color: var(--faint); font: 500 12px var(--mono); }
.menu-list a[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* hero */
.hero { position: relative; padding: 76px 0 64px; overflow: hidden; isolation: isolate; }
.hero .wrap { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(48px, 6.6vw, 88px); line-height: 1; letter-spacing: -.04em; margin: 18px 0 22px; }
.lore { margin: 14px 0 0; color: var(--faint); font: italic 400 19px var(--serif); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 18px; }
.ca { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; border: 1px solid var(--line2); max-width: 540px; background: var(--card); }
.ca span { font: 500 11px var(--mono); color: var(--faint); letter-spacing: .1em; }
.ca code { flex: 1; min-width: 0; font: 500 13.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: 13.5px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 15px; height: 15px; color: var(--green); flex: none; }

/* nest card (hero interactive) */
.nest-card { position: relative; padding: 26px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; }
.nest-card::before { content: ""; position: absolute; width: 420px; height: 420px; left: calc(var(--mx, 50%) - 210px); top: calc(var(--my, 0%) - 210px);
  background: radial-gradient(closest-side, var(--glow), transparent); z-index: -1; transition: left .25s var(--ease), top .25s var(--ease); }
.nest-card.cracked .ring-fg { stroke: var(--coral); }
.sell-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; min-height: 32px; }
.sell-msg { font-size: 13px; color: var(--coral); }
@keyframes shake { 20% { transform: translateX(-5px) rotate(-6deg); } 40% { transform: translateX(5px) rotate(5deg); } 60% { transform: translateX(-3px) rotate(-3deg); } 80% { transform: translateX(2px); } }
.nest-card header { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13.5px; }
.chip { font: 500 11.5px var(--mono); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); }
.ring-wrap { position: relative; width: 236px; height: 236px; margin: 14px auto 6px; }
.ring-wrap .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { stroke: var(--line2); }
.ring-fg { stroke: url(#ringgrad); transition: stroke-dashoffset .4s var(--ease); }
.slider-row { display: grid; gap: 10px; }
.slider-row label { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.slider-row label b { color: var(--text); font: 500 14px var(--mono); }
.nest-card footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; color: var(--muted); }
.nest-card footer b { display: block; color: var(--text); font: 500 16px var(--mono); margin-top: 2px; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; outline: none;
  background: linear-gradient(90deg, var(--gold) var(--p, 50%), var(--line2) var(--p, 50%)); cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--text); border: 5px solid var(--card);
  box-shadow: 0 0 0 1px var(--line2), 0 4px 10px rgba(0, 0, 0, .25); transition: transform .15s; }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 4px solid var(--card); }

/* stats */
.stats { padding: 0 0 8px; }
.stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
.stat { padding: 22px 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat span { display: block; font-size: 13px; color: var(--muted); }
.stat b { display: block; font: 500 26px/1.3 var(--mono); margin-top: 6px; letter-spacing: -.02em; }
.stat small { color: var(--faint); font-size: 12.5px; }
.pending { color: var(--faint) !important; }

/* features */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { padding: 28px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .25s var(--ease); }
.feature:hover { border-color: var(--line2); transform: translateY(-3px); }
.feature .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--glow); color: var(--gold); margin-bottom: 18px; }
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { font-size: 19px; margin-bottom: 8px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }
.why { margin-top: 16px; display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-radius: var(--r); border: 1px dashed var(--line2); color: var(--muted); font-size: 15px; }
.why b { color: var(--text); }
.why svg { width: 22px; height: 22px; color: var(--green); flex: none; }

/* flow */
.flow { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: stretch; }
.flow-board { border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); padding: 18px; }
.flow-board svg { width: 100%; height: auto; display: block; }
.node rect { fill: var(--card2); stroke: var(--line2); stroke-width: 1; }
.node text { fill: var(--text); font: 600 14px var(--font); }
.node .sub { fill: var(--muted); font: 500 12px var(--mono); }
.node.gold rect { stroke: var(--gold); } .node.coral rect { stroke: var(--coral); }
.pipe { fill: none; stroke: var(--line2); stroke-width: 2; }
.run { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 3 11; stroke-linecap: round; animation: run 1.2s linear infinite; }
.run.coral { stroke: var(--coral); }
.pulse { fill: var(--gold2); filter: drop-shadow(0 0 8px var(--gold)); opacity: 0; }
.node.hit rect { fill: var(--glow); transition: fill .3s; }
.sim { display: grid; gap: 14px; }
.flow-side { display: grid; gap: 12px; align-content: start; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.seg button { height: 40px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.boxy { padding: 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.boxy b { color: var(--text); }
.bars { display: grid; gap: 14px; }
.bar { display: grid; gap: 7px; font-size: 13.5px; }
.bar div { display: flex; justify-content: space-between; color: var(--muted); }
.bar div b { color: var(--text); font: 500 13.5px var(--mono); }
.bar i { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--c, var(--gold)); border-radius: inherit; transition: width .5s var(--ease); }

/* calculator */
.calc { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; }
.panel { padding: 28px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.panel .slider-row + .slider-row { margin-top: 24px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.presets button { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--muted); font: 500 12.5px var(--mono); cursor: pointer; }
.presets button[aria-pressed="true"] { border-color: var(--gold); color: var(--text); background: var(--glow); }
.result-big { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.result-big div { padding: 18px; border-radius: var(--r); background: var(--card2); border: 1px solid var(--line); }
.result-big div.you { border-color: var(--gold); box-shadow: 0 0 0 4px var(--glow); }
.result-big span { font-size: 13px; color: var(--muted); }
.result-big b { display: block; font: 600 32px/1.15 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.result-big small { color: var(--faint); font: 500 12px var(--mono); }
.chart svg { width: 100%; height: 210px; display: block; overflow: visible; }
.chart .grid line { stroke: var(--line); }
.chart .you { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; }
.chart .flip { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 5 6; }
.chart text { fill: var(--faint); font: 500 11px var(--mono); }
.chart .tipdot { fill: var(--gold); stroke: var(--card); stroke-width: 3; }
.legend { display: flex; gap: 18px; color: var(--muted); font-size: 13px; margin-top: 10px; }
.legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--gold); margin-right: 6px; vertical-align: 3px; }
.legend i.f { background: var(--faint); }
.assume { color: var(--faint); font-size: 12.5px; margin: 16px 0 0; }

/* checker */
.checker { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; align-items: start; }
.field { display: flex; gap: 6px; padding: 6px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); transition: border-color .15s, box-shadow .15s; }
.field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--glow); }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font: 500 14px var(--mono); outline: none; }
.result { min-height: 280px; }
.result .empty { color: var(--faint); display: grid; place-items: center; gap: 8px; min-height: 230px; text-align: center; font-size: 14.5px; }
.result .empty svg { width: 34px; height: 34px; color: var(--line2); }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kv div { padding: 16px; border-radius: var(--r); background: var(--card2); border: 1px solid var(--line); }
.kv span { font-size: 12.5px; color: var(--muted); }
.kv b { display: block; font: 500 20px/1.3 var(--mono); margin-top: 4px; }
.ok { color: var(--green) !important; } .no { color: var(--coral) !important; }
.tip { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--glow); font-size: 14.5px; }
.res-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.note { color: var(--faint); font-size: 12.5px; margin: 12px 0 0; }
.skel { height: 72px; border-radius: var(--r); background: linear-gradient(90deg, var(--card2) 0%, var(--line) 50%, var(--card2) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }

/* buy guide, chart, feed */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.step { padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); counter-increment: s; }
.step::before { content: "0" counter(s); font: 500 12px var(--mono); color: var(--gold); }
.step h3 { font-size: 18px; margin: 10px 0 6px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }
.step .btn { margin-top: 14px; }
.duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 20px; }
.chart-box { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); overflow: hidden; min-height: 440px; display: grid; }
.chart-box iframe { width: 100%; height: 100%; min-height: 440px; border: 0; }
.wait { display: grid; place-items: center; align-content: center; gap: 10px; color: var(--faint); text-align: center; padding: 40px; font-size: 14.5px; }
.wait svg { width: 38px; height: 38px; color: var(--line2); }
.feed-box { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); padding: 18px; display: grid; align-content: start; gap: 10px; }
.feed-box h3 { font-size: 15px; display: flex; justify-content: space-between; }
.feed-box h3 small { color: var(--faint); font: 500 12px var(--mono); }
.feed { display: grid; gap: 6px; }
.feed a { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--card2); font-size: 13.5px; }
.feed a:hover { background: var(--line); }
.feed time, .feed code { font: 500 12px var(--mono); color: var(--muted); }

/* roadmap */
.road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.phase { position: relative; padding: 26px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.phase.now { border-color: var(--gold); box-shadow: 0 0 0 4px var(--glow); }
.phase .tag { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.phase.now .tag { color: var(--gold); }
.phase h3 { font-size: 20px; margin: 12px 0 10px; }
.phase ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; display: grid; gap: 6px; }
.road-note { margin-top: 16px; color: var(--muted); font-size: 14.5px; }

/* transparency, faq */
.wallets { display: grid; gap: 10px; }
.wl { display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.wl span { color: var(--muted); font-size: 14px; }
.wl code { font: 500 13.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl .ops { display: flex; gap: 6px; }
.policy { margin-top: 16px; padding: 18px 20px; border-radius: var(--r); border: 1px dashed var(--line2); color: var(--muted); font-size: 15px; }
.policy b { color: var(--text); }
.faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--font); color: var(--muted); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -8px 0 22px; color: var(--muted); max-width: 46em; }

.final { text-align: center; }
.final h2 { font-size: clamp(36px, 5vw, 60px); }
.final p { color: var(--muted); margin: 14px auto 28px; max-width: 34em; }
.final .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

footer { border-top: 1px solid var(--line); padding: 36px 0 52px; color: var(--faint); font-size: 13.5px; }
footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
footer .links { display: flex; gap: 18px; }
footer .links a:hover { color: var(--text); }
footer p { grid-column: 1 / -1; margin: 0; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg);
  font-size: 14px; font-weight: 500; transition: .25s var(--ease); pointer-events: none; z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(95, 192, 138, .5); } 70% { box-shadow: 0 0 0 8px rgba(95, 192, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 192, 138, 0); } }
@keyframes run { to { stroke-dashoffset: -28; } }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

@media (max-width: 1160px) { .nav { display: none; } .burger { display: grid; } }
@media (min-width: 1161px) { .sheet { display: none !important; } }
@media (max-width: 1000px) {
  .hero .wrap, .flow, .calc, .checker, .duo, .faq-grid { grid-template-columns: 1fr; }
  .stats .grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cards3, .steps, .road { grid-template-columns: 1fr; }
  .wl { grid-template-columns: 1fr auto; } .wl span { grid-column: 1 / -1; }
  section { padding: 76px 0; }
}
@media (max-width: 540px) {
  .wrap { padding: 0 16px; }
  .hero { padding-top: 40px; }
  .actions .menu .btn svg { display: none; }
  .ring-wrap { width: 220px; height: 220px; }
  .result-big, .kv { grid-template-columns: 1fr; }
  .feed a { grid-template-columns: 1fr auto; } .feed time { grid-column: 1 / -1; }
  .ca code { font-size: 12px; }
}

/* ===== v4 additions: dusk sky, bird scene, tiers, comparison, leaderboard, streak card, roadmap timeline ===== */
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 80% 0%, var(--sky1), transparent 60%), radial-gradient(70% 60% at 70% 100%, var(--sky2), transparent 70%); }
.sky .stars { position: absolute; inset: 0; opacity: .55;
  background-image: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 64%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 46% 14%, #fff, transparent), radial-gradient(1px 1px at 63% 38%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 84% 18%, #fff, transparent), radial-gradient(1px 1px at 92% 56%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 7% 80%, #fff, transparent), radial-gradient(1px 1px at 54% 86%, #fff, transparent);
  animation: twinkle 6s ease-in-out infinite alternate; }
[data-theme="light"] .sky .stars { display: none; }
.sky .glow { position: absolute; width: 520px; height: 520px; right: -120px; top: 60px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 181, 71, .22), transparent); filter: blur(10px); animation: breathe 9s ease-in-out infinite; }
@keyframes twinkle { from { opacity: .25; } to { opacity: .7; } }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .8; } }

.ring-wrap { display: grid; place-items: center; }
.scene { position: relative; width: 74%; height: 74%; overflow: visible; }
.bird { transform-box: view-box; transform-origin: 256px 330px; animation: bob 3.2s ease-in-out infinite; transition: transform .9s var(--ease), opacity .9s; }
.bird .eye { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
.bird .wing { transform-box: fill-box; transform-origin: 10% 40%; transition: transform .3s var(--spring); }
.nest-card:hover .bird .wing { transform: rotate(-14deg); }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.bird-fly { transform-box: view-box; transform-origin: 256px 300px; transition: opacity .3s; }
.nest-card.flown .bird-fly { opacity: 0; }
.nest-card.flying .bird { animation: none; }
.nest-card.flying .bird .wing { animation: flap .16s linear infinite; }
.nest-g { transform-box: view-box; transform-origin: 256px 400px; }
.egg-g { transform-box: view-box; transform-origin: 376px 332px; }
.feather { fill: #FFC56E; stroke: #E8862F; stroke-width: 1.5; }
.scene { cursor: pointer; outline: none; }
.scene:focus-visible { filter: drop-shadow(0 0 10px var(--gold)); }
.bubble { position: absolute; left: 50%; top: -6px; z-index: 2; max-width: 240px; width: max-content; padding: 9px 13px; border-radius: 14px;
  background: var(--text); color: var(--bg); font: 500 13px/1.35 var(--font); text-align: center; pointer-events: none;
  transform: translate(-50%, 6px) scale(.92); opacity: 0; transition: opacity .25s, transform .35s var(--spring); }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ring-wrap { position: relative; }
@keyframes flap { 50% { transform: rotate(-38deg); } }
.coin { fill: var(--gold2); stroke: #E8862F; stroke-width: 3; }
.coin-in { fill: none; stroke: #E8862F; stroke-width: 2.5; }
.mult-line { text-align: center; margin: 4px 0 18px; }
.mult-line b { display: block; font: 800 48px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; transition: color .3s; }
.mult-line small { color: var(--muted); font-size: 12.5px; }
.nest-card.flown .mult-line b, .nest-card.flown .chip { color: var(--coral); }
.nest-card.flown .ring-fg { stroke: var(--coral); }
.mult-line b.bump { animation: bump .35s var(--spring); }
@keyframes bump { 40% { transform: scale(1.12); } }

.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.tier { position: relative; padding: 16px 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: border-color .25s, transform .25s var(--ease); }
.tier::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(25% * (var(--n, 0) + 1)); background: linear-gradient(90deg, var(--gold2), var(--coral)); }
.tier[data-tier="0"] { --n: 0; } .tier[data-tier="1"] { --n: 1; } .tier[data-tier="2"] { --n: 2; } .tier[data-tier="3"] { --n: 3; }
.tier b { display: block; font: 700 17px var(--display); }
.tier span { color: var(--muted); font: 500 12.5px var(--mono); }
.tier.on { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 0 0 4px var(--glow); }

.compare { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); overflow: hidden; }
.crow { display: grid; grid-template-columns: 1.05fr 1.15fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.crow:last-child { border-bottom: 0; }
.crow > span { padding: 16px 18px; font-size: 14.5px; color: var(--muted); }
.crow > span[role="rowheader"] { color: var(--text); font-weight: 500; }
.crow.head > span { font: 600 13px var(--font); color: var(--muted); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.crow.head small { color: var(--faint); font-weight: 400; font-size: 12px; }
.crow.head .us { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; color: var(--text); font: 800 17px var(--display); }
.crow.head .us img { width: 26px; height: 26px; border-radius: 8px; }
.crow .us { background: var(--glow); color: var(--text); }
.crow .yes::before, .crow .no::before, .crow .mid::before { display: inline-block; width: 18px; font-weight: 700; }
.crow .yes::before { content: "✓"; color: var(--green); }
.crow .no::before { content: "✕"; color: var(--coral); }
.crow .mid::before { content: "~"; color: var(--faint); }
.crow:not(.head):hover > span { background: color-mix(in srgb, var(--card2) 70%, transparent); }
.crow:not(.head):hover > .us { background: var(--glow); }
.foot-note { color: var(--faint); font-size: 13.5px; margin: 14px 0 0; max-width: 60em; }

.board { padding: 22px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.seg.small { display: inline-grid; } .seg.small button { height: 34px; padding: 0 14px; font-size: 13px; }
.board-age { color: var(--faint); font: 500 12px var(--mono); }
.rows { display: grid; gap: 6px; }
.brow { display: grid; grid-template-columns: 40px 1fr auto 90px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--card2);
  border: 1px solid transparent; cursor: pointer; font-size: 14px; transition: border-color .15s, transform .2s var(--ease); animation: rowin .45s var(--ease) both; }
.brow:hover { border-color: var(--line2); transform: translateX(3px); }
.brow i { font: 600 13px var(--mono); font-style: normal; color: var(--faint); }
.brow:nth-child(1) i { color: var(--gold); } .brow:nth-child(2) i, .brow:nth-child(3) i { color: var(--gold2); }
.brow span { font: 500 13.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow span small { font-family: var(--font); color: var(--faint); margin-left: 8px; }
.brow b { font: 500 13.5px var(--mono); text-align: right; }
.brow em { font: 500 12.5px var(--mono); font-style: normal; color: var(--muted); text-align: right; }
.brow.ghost { cursor: default; opacity: .55; } .brow.ghost:hover { transform: none; border-color: transparent; }
.brow.label span { color: var(--faint); }
.brow.me { border-color: var(--gold); }
@keyframes rowin { from { opacity: 0; transform: translateY(6px); } }

.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--glow); color: var(--gold); font: 700 13px var(--display); }
.res-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.res-head .rank { color: var(--muted); font: 500 12.5px var(--mono); }
.card-prev { margin-top: 14px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.card-prev img { display: block; width: 100%; height: auto; }

.road { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.road-line { position: absolute; left: 0; right: 0; top: -18px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.road-line i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--rp, 0)); background: linear-gradient(90deg, var(--gold2), var(--coral)); transition: transform .2s linear; }
.phase .trigger { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); padding: 8px 10px; border-radius: 10px; background: var(--card2); }
.phase .trigger b { color: var(--text); }
.phase .see { margin: 12px 0 0; font-size: 13px; color: var(--faint); }
.phase:hover { border-color: var(--line2); }
.honest { margin-top: 16px; padding: 18px 20px; border-radius: var(--r); border: 1px dashed var(--line2); color: var(--muted); font-size: 15px; }
.honest b { color: var(--text); }

.final-mark { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 18px; display: block; animation: bob 3.2s ease-in-out infinite; box-shadow: 0 20px 50px -20px var(--gold); }
.reveal.in:nth-child(2) { transition-delay: .06s; } .reveal.in:nth-child(3) { transition-delay: .12s; } .reveal.in:nth-child(4) { transition-delay: .18s; }
.btn.primary { background: linear-gradient(135deg, var(--gold2), var(--gold)); }
[data-theme="light"] .btn.primary { background: linear-gradient(135deg, var(--gold2), var(--gold)); }

@media (max-width: 1000px) {
  .road { grid-template-columns: 1fr 1fr; } .road-line { display: none; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .compare { overflow-x: auto; } .crow { min-width: 720px; }
}
@media (max-width: 640px) {
  .road { grid-template-columns: 1fr; }
  .brow { grid-template-columns: 28px 1fr auto; } .brow em { display: none; }
  .compare { border-radius: var(--r); }
}

/* ===== v4.1 details ===== */
.nav a.on { color: var(--text); background: var(--card); box-shadow: inset 0 -2px 0 var(--gold); }
.buybar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: none; gap: 8px; padding: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow); transform: translateY(140%); transition: transform .4s var(--spring); }
.buybar .btn { flex: 1; }
.buybar.show { transform: none; }
@media (max-width: 760px) { .buybar { display: flex; } .toast { bottom: 84px; } }
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 29; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--card); color: var(--text); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .25s, transform .35s var(--spring); }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: var(--gold); }
.totop svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.totop path { transform: rotate(90deg); transform-origin: 20px 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tt-bg, .tt-fg { fill: none; stroke-width: 2.5; }
.tt-bg { stroke: var(--line2); } .tt-fg { stroke: var(--gold); stroke-dasharray: 106.8; stroke-dashoffset: 106.8; stroke-linecap: round; }
@media (max-width: 760px) { .totop { bottom: 80px; right: 14px; width: 42px; height: 42px; } }
.spark { position: fixed; z-index: 70; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 35%, #FFE3A6, var(--gold) 60%, #E8862F); }

.feature, .phase, .tier { transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; position: relative; }
.feature::before, .phase::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), var(--glow), transparent 70%); }
.feature:hover::before, .phase:hover::before { opacity: 1; }
.feature .ico { transition: transform .4s var(--spring); }
.feature:hover .ico { transform: rotate(-8deg) scale(1.1); }
.btn.primary { transition: transform .2s var(--ease), box-shadow .2s, filter .2s; }
.btn.primary:hover { filter: brightness(1.05); }
.btn:active { transform: scale(.97) !important; }
.icon-btn svg { transition: transform .5s var(--spring); }
.icon-btn#theme:hover svg { transform: rotate(40deg); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.faq details[open] p { animation: faqin .35s var(--ease); }
@keyframes faqin { from { opacity: 0; transform: translateY(-6px); } }
.ca code { transition: color .2s; } .ca:hover code { color: var(--gold); }
.ex-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--card2); font-size: 13.5px; color: var(--muted);
  border: 1px dashed var(--line2); animation: rowin .45s var(--ease) both; }
.ex-row time { font: 500 11px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.ex-row b { color: var(--text); font-weight: 600; }


/* ===================================================================================================
   v5 — editorial pass: fewer generated-looking tropes (serif accents, gradient pills, glow blobs, icon tiles),
   numbered sections with hairlines, hand notes, paper grain, the bird's moods, the Roost engine UI
   =================================================================================================== */
:root { --r-lg: 18px; --r: 14px; --hand: "Caveat", "Bradley Hand", cursive;
  --twig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 4 78 12 118 7 S 176 5 197 8 M150 6 l10 -5' fill='none' stroke='%23FFB547' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-theme="light"] { --twig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 4 78 12 118 7 S 176 5 197 8 M150 6 l10 -5' fill='none' stroke='%23B5620A' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
@view-transition { navigation: auto; }
body::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="light"] body::before { opacity: .07; mix-blend-mode: multiply; }

/* headings: one family, the accent is a drawn twig under the word, not an italic serif */
h1 em, h2 em, .final h2 em { font-family: var(--display); font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--gold);
  background: var(--twig) no-repeat 0 100% / 100% .3em; padding-bottom: .1em; }
.hero h1 { font-weight: 800; letter-spacing: -.045em; }
.lore { font: 600 26px/1.2 var(--hand); color: var(--muted); transform: rotate(-1.2deg); transform-origin: 0 50%; }

/* numbered sections with a hairline */
main { counter-reset: sec; }
.sec-head { max-width: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 48px; align-items: end; }
.sec-head .kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; text-transform: none; letter-spacing: 0; font: 500 13px var(--mono); color: var(--muted); }
.sec-head .kicker::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); color: var(--gold); }
.sec-head .kicker::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.sec-head p { max-width: 34em; }
.faq .sec-head, .final .sec-head { grid-template-columns: 1fr; }
.hero .kicker { font: 500 13px var(--mono); letter-spacing: .02em; text-transform: none; color: var(--muted); }
.hero .kicker::before { content: "\25CF"; color: var(--green); margin-right: 8px; font-size: 9px; vertical-align: 2px; }

/* buttons: solid, a little square, no glow */
.btn { border-radius: 12px; }
.btn.primary, [data-theme="light"] .btn.primary { background: var(--gold); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); }
.btn.primary:hover { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 0 4px var(--glow); }
.seg, .seg button, .presets button, .field, .ca, .chip, .badge { border-radius: 12px; }
.field { padding: 5px; } .field input { padding: 0 12px; }

/* features: a spec sheet, not floating tiles */
.cards3 { gap: 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.feature { border: 0; border-radius: 0; background: transparent; padding: 28px 28px 30px 0; }
.feature + .feature { border-left: 1px solid var(--line2); padding-left: 28px; }
.feature:hover { transform: none; }
.feature::before { display: none; }
.feature .ico { width: auto; height: auto; background: none; justify-content: start; margin-bottom: 14px; }
.feature .ico svg { width: 26px; height: 26px; }
.feature h3 { font-size: 21px; }
.stats .grid { background: transparent; border-left: 0; border-right: 0; border-radius: 0; border-color: var(--line2); }
.stat:first-child { padding-left: 0; }
.nest-card { overflow: visible; background: var(--card); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6); }
.nest-card::before { display: none; }
.phase.now, .result-big div.you { box-shadow: none; }
.phase::before { display: none; }

/* hero card: the ring is drawn by script on every frame, so no CSS lag */
.ring-fg { transition: none !important; }
.ring-wrap { width: 252px; height: 252px; }
.scene { width: 80%; height: 80%; }
.coin { fill: #FFD27A; stroke: #C4621C; stroke-width: 2.5; }
.coin-in { stroke: #C4621C; stroke-width: 2.5; stroke-linecap: round; }
.piled { fill: #FFC24F; stroke: #A9561A; stroke-width: 1.5; }
.pupil { transition: transform .18s ease-out; }
.lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: lid 5.5s infinite; }
@keyframes lid { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.bird .eye { animation: none; }
[data-bird="asleep"] .lid { animation: none; transform: scaleY(1); transition: transform .6s; }
[data-bird="asleep"] .bird { animation-duration: 5s; }
.zzz text { font: 700 28px var(--display); fill: var(--muted); opacity: 0; }
[data-bird="asleep"] .zzz text { animation: zz 3s infinite; }
[data-bird="asleep"] .zzz text:nth-child(2) { animation-delay: 1s; } [data-bird="asleep"] .zzz text:nth-child(3) { animation-delay: 2s; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 8px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -18px); } }
[data-bird="flying"] .bird, [data-bird="landing"] .bird { animation: none; }
[data-bird="flying"] .bird .wing, [data-bird="landing"] .bird .wing { animation: flap .15s linear infinite; }
.nest-card[data-bird="away"] .bird-fly { opacity: 0; }
.nest-card[data-bird="away"] .mult-line b, .nest-card[data-bird="away"] .chip { color: var(--coral); }
.nest-card[data-bird="away"] .ring-fg { stroke: var(--coral); }
.mult-line b { font-variant-numeric: tabular-nums; }
.fed-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.fed-row b { margin-left: auto; font: 500 13px var(--mono); color: var(--text); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 2s infinite; }
.hand { position: absolute; z-index: 3; font: 600 22px/1 var(--hand); color: var(--gold); pointer-events: none; white-space: nowrap; }
.hand::after { content: ""; position: absolute; width: 46px; height: 30px; background: no-repeat center / contain; }
.hand-a { left: -96px; top: 120px; transform: rotate(-8deg); }
.hand-a::after { right: -44px; top: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M2 6 C 16 4 30 10 40 22 M40 22 l-9 -2 M40 22 l1 -9' fill='none' stroke='%23FFB547' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hand-b { right: -150px; bottom: 34px; transform: rotate(4deg); }
.hand-b::after { left: -46px; top: -6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M44 4 C 30 4 14 10 6 22 M6 22 l9 -1 M6 22 l-1 -9' fill='none' stroke='%23FFB547' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (max-width: 1320px) { .hand { display: none; } }

/* ticker: values flip in when they change */
[data-k].flip { animation: flipin .5s var(--ease); display: inline-block; }
@keyframes flipin { from { transform: rotateX(80deg); opacity: 0; } }
.brow em s { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--gold); width: var(--w); opacity: .7; text-decoration: none; }

/* the flock easter egg */
.flock { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.flock svg { position: absolute; left: 0; width: 34px; height: 17px; overflow: visible; }
.flock path { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; animation: wings .5s ease-in-out infinite alternate; transform-origin: 20px 11px; }
@keyframes wings { to { transform: scaleY(.45); } }

/* footer: the engine badge, the egg hint, a wordmark */
footer { position: relative; overflow: hidden; padding-bottom: 0; }
.engine { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.eng-badge, .egg-hint { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px 0 6px; border-radius: 10px; border: 1px solid var(--line2);
  background: transparent; color: var(--muted); font: 500 12.5px var(--mono); cursor: pointer; transition: color .15s, border-color .15s; }
.eng-badge:hover, .egg-hint:hover { color: var(--text); border-color: var(--text); }
.eng-badge small { color: var(--faint); font: inherit; }
.pb-mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--gold); color: var(--gold-ink); font: 800 13px var(--display); }
.egg-hint { padding-left: 12px; font-family: var(--hand); font-size: 18px; }
.wordmark { grid-column: 1 / -1; font: 800 clamp(120px, 26vw, 360px)/.8 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--line2);
  margin: 26px 0 -0.12em; user-select: none; text-align: center; }

/* Roost inspector */
#eng-panel { position: fixed; right: 16px; bottom: 16px; z-index: 95; width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow: auto;
  padding: 14px; border-radius: 14px; background: #0B0C1C; color: #E8E6F5; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  font: 500 12.5px/1.5 var(--mono); animation: drop .2s var(--ease); }
#eng-panel header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#eng-panel header b { font: 800 16px var(--display); color: #FFB547; } #eng-panel header span { color: #8A8CB0; }
#eng-panel header button { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: none; color: inherit; cursor: pointer; }
.pp-sum { display: flex; gap: 14px; color: #8A8CB0; margin-bottom: 10px; } .pp-sum b { color: #fff; }
.pp-tog { display: flex; gap: 8px; align-items: center; color: #B9BAD6; margin-bottom: 8px; cursor: pointer; }
.pp-h { margin: 10px 0 6px; color: #8A8CB0; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; }
.pp-sig div, .pp-comp div { display: grid; grid-template-columns: 1fr auto 34px; gap: 10px; padding: 4px 6px; border-radius: 6px; }
.pp-comp div { grid-template-columns: 1fr auto; }
.pp-sig code, .pp-comp code { color: #9FD0FF; } .pp-sig span { color: #fff; text-align: right; } .pp-sig i { color: #6E7099; font-style: normal; text-align: right; }
.pp-sig div.hot { animation: hot .6s; }
@keyframes hot { from { background: rgba(255, 181, 71, .28); } }
.pp-note { color: #8A8CB0; margin: 10px 0 0; font-family: var(--font); font-size: 12.5px; }
.eng-outline [data-c] { outline: 1px dashed #FFB547 !important; outline-offset: 4px; position: relative; }
.eng-outline [data-c]::after { content: "<" attr(data-c) ">"; position: absolute; left: 0; top: -22px; z-index: 96; padding: 2px 6px; border-radius: 4px; background: #FFB547; color: #15183D; font: 600 11px var(--mono); }
.eng-outline header[data-c]::after { top: auto; bottom: -22px; }

@media (max-width: 1000px) {
  .sec-head { grid-template-columns: 1fr; row-gap: 14px; }
  .cards3 { border-bottom: 0; }
  .feature { padding: 22px 0; border-bottom: 1px solid var(--line2); }
  .feature + .feature { border-left: 0; padding-left: 0; }
}
@media (max-width: 540px) { .ring-wrap { width: 230px; height: 230px; } .lore { font-size: 23px; } }

.crow .us, .crow:not(.head):hover > .us { background: color-mix(in srgb, var(--gold) 7%, transparent); }

/* docs page (moved from docs.html so page swaps keep it) */
.doc { max-width: 780px; margin: 0 auto; padding: 56px 24px 96px; }
.doc h1 { font-size: clamp(42px, 6vw, 68px); letter-spacing: -.04em; line-height: 1.02; margin: 14px 0 16px; }
.doc h2 { font-size: 26px; margin: 52px 0 12px; }
.doc p, .doc li { color: var(--muted); }
.doc b { color: var(--text); }
.doc .toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 8px; }
.doc .toc a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); font-size: 13.5px; }
.doc .toc a:hover { color: var(--text); border-color: var(--text); }
.doc table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.doc td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.doc tr:last-child td { border-bottom: 0; }
.doc td:last-child { font-family: var(--mono); text-align: right; color: var(--text); white-space: nowrap; }
.doc code { font-family: var(--mono); font-size: .92em; color: var(--text); }
.doc .wl { margin-top: 8px; }

/* ===================================================================================================
   v6 — the streak ladder, section bands and drawn dividers, word-by-word headings, docs in the shared shell
   =================================================================================================== */
.ladder { margin-top: 30px; padding: 22px 24px 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.ld-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ld-title { font: 500 13px var(--mono); color: var(--muted); }
.ld-now { font-size: 14.5px; color: var(--muted); } .ld-now b { color: var(--text); font-weight: 600; }
.ld-track { position: relative; height: 10px; margin: 46px 0 0; border-radius: 99px; background: var(--line2); }
.ld-track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(20% - 1px), var(--card) calc(20% - 1px) calc(20% + 1px), transparent calc(20% + 1px),
    transparent calc(40% - 1px), var(--card) calc(40% - 1px) calc(40% + 1px), transparent calc(40% + 1px),
    transparent calc(66.66% - 1px), var(--card) calc(66.66% - 1px) calc(66.66% + 1px), transparent calc(66.66% + 1px)); z-index: 1; }
.ld-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: inherit; background: linear-gradient(90deg, #FFD08A, var(--gold) 55%, var(--coral)); }
.ld-knob { position: absolute; top: -38px; left: 50%; z-index: 2; transform: translateX(-50%); padding: 4px 9px; border-radius: 9px; background: var(--text); color: var(--bg);
  font: 600 12.5px var(--mono); white-space: nowrap; }
.ld-knob::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.ld-knob::before { content: ""; position: absolute; left: 50%; top: 33px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); background: var(--card);
  border: 3px solid var(--gold); box-sizing: border-box; }
.ld-ticks { position: absolute; left: 0; right: 0; top: 16px; display: grid; grid-template-columns: repeat(15, 1fr); }
.ld-ticks i { height: 5px; border-left: 1px solid var(--line2); }
.ld-ticks i:nth-child(1), .ld-ticks i:nth-child(4), .ld-ticks i:nth-child(7), .ld-ticks i:nth-child(11) { height: 9px; border-color: var(--faint); }
.ld-steps { display: grid; grid-template-columns: 3fr 3fr 4fr 5fr; gap: 8px; margin-top: 26px; }
.ld-step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 14px 14px;
  border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font: inherit;
  transition: border-color .25s, background .25s, transform .25s var(--ease); }
.ld-step:hover { border-color: var(--line2); }
.ld-ico { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--faint); transition: color .3s, transform .45s var(--spring); }
.ld-name { font: 700 16px var(--display); }
.ld-meta { font: 500 12px var(--mono); color: var(--muted); }
.ld-step.past .ld-ico { color: var(--gold); }
.ld-step.past .ld-name { color: var(--muted); }
.ld-step.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.ld-step.on .ld-ico { color: var(--gold); transform: translateY(-2px) scale(1.12); animation: hopicon 2.4s var(--ease) infinite; }
@keyframes hopicon { 0%, 80%, 100% { transform: translateY(-2px) scale(1.12); } 88% { transform: translateY(-7px) scale(1.16); } }

/* bands and drawn dividers make the jump from one section to the next */
section.band { background: linear-gradient(180deg, transparent, var(--bg2) 160px, var(--bg2) calc(100% - 160px), transparent); }
.divider { max-width: var(--max); margin: -34px auto; padding: 0 24px; height: 40px; position: relative; z-index: 1; opacity: 1; transform: none; }
.divider svg { width: 100%; height: 40px; overflow: visible; }
.divider .tw { fill: none; stroke: var(--line2); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.divider .lf { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease) 1s, fill .6s 1.7s; }
.divider.in .tw, .divider.in .lf { stroke-dashoffset: 0; }
.divider.in .lf { fill: color-mix(in srgb, var(--gold) 30%, transparent); }

/* headings come in word by word; the twig under the accent word draws itself */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; transform: translateY(108%); transition: transform .85s var(--ease) calc(var(--i, 0) * 55ms); }
.reveal.in .w > span { transform: none; }
.w-em { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .6s calc(var(--i, 0) * 55ms), transform .85s var(--ease) calc(var(--i, 0) * 55ms), background-size .9s var(--ease) .55s;
  background-size: 0% .3em !important; }
.reveal.in .w-em { opacity: 1; transform: none; background-size: 100% .3em !important; }
.sec-head .kicker::after { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease) .1s; }
.sec-head.reveal.in .kicker::after { transform: scaleX(1); }
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* docs: the same shell as the home page */
.doc { padding-top: 64px; }
.doc .kicker { font: 500 13px var(--mono); color: var(--muted); text-transform: none; letter-spacing: 0; }
.doc .toc { position: sticky; top: 76px; z-index: 5; padding: 8px 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.doc .toc a { border-radius: 10px; }
.doc h2 { scroll-margin-top: 140px; }
.doc table { border-radius: 14px; }

@media (max-width: 760px) {
  .ld-steps { grid-template-columns: 1fr 1fr; }
  .ladder { padding: 18px 16px 18px; }
  .divider { margin: -24px auto; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .w > span, .w-em { transform: none !important; opacity: 1 !important; background-size: 100% .3em !important; } .divider .tw, .divider .lf { stroke-dashoffset: 0; } }

.divider .dl { position: absolute; inset: 0 24px; width: calc(100% - 48px); height: 40px; }
.divider .dc { position: absolute; left: 50%; top: 4px; width: 48px; height: 24px; transform: translateX(-50%) scale(.6); transition: transform .7s var(--spring) 1.2s; overflow: visible; }
.divider.in .dc { transform: translateX(-50%) scale(1); }
.divider .dc .lf { stroke-width: 1.4; }
.ld-step { grid-template-rows: auto auto auto; row-gap: 1px; }
.ld-ico { grid-row: 1 / 4; }
.ld-x { font: 600 12.5px var(--mono); color: var(--text); }
.ld-step.past .ld-x { color: var(--muted); }

/* ===================================================================================================
   v7 — one aura behind the page instead of section edges, the fee fan-out, keycaps + flock, the Roost devtools panel
   =================================================================================================== */
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #FFB547; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #FF7A59; }
@property --c3 { syntax: "<color>"; inherits: true; initial-value: #5B57D9; }
@property --x1 { syntax: "<percentage>"; inherits: true; initial-value: 84%; }
@property --y1 { syntax: "<percentage>"; inherits: true; initial-value: 8%; }
@property --x2 { syntax: "<percentage>"; inherits: true; initial-value: 70%; }
@property --y2 { syntax: "<percentage>"; inherits: true; initial-value: 62%; }
@property --x3 { syntax: "<percentage>"; inherits: true; initial-value: 8%; }
@property --y3 { syntax: "<percentage>"; inherits: true; initial-value: 18%; }
:root { transition: --c1 1.6s ease, --c2 1.6s ease, --c3 1.6s ease, --x1 2.2s var(--ease), --y1 2.2s var(--ease), --x2 2.2s var(--ease), --y2 2.2s var(--ease),
  --x3 2.2s var(--ease), --y3 2.2s var(--ease); --aura-a: .26; }
[data-theme="light"] { --aura-a: .2; }
html { background: var(--bg); }
body { background: transparent; }
.aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aura i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; transform: translate(-50%, -50%); filter: blur(40px); opacity: var(--aura-a);
  animation: drift 26s ease-in-out infinite alternate; }
.aura .a1 { left: var(--x1); top: var(--y1); background: radial-gradient(closest-side, var(--c1), transparent 72%); }
.aura .a2 { left: var(--x2); top: var(--y2); width: 60vmax; height: 60vmax; background: radial-gradient(closest-side, var(--c2), transparent 72%); animation-duration: 31s; animation-delay: -8s; }
.aura .a3 { left: var(--x3); top: var(--y3); width: 56vmax; height: 56vmax; background: radial-gradient(closest-side, var(--c3), transparent 72%); animation-duration: 37s; animation-delay: -15s; }
[data-theme="light"] .aura i { mix-blend-mode: multiply; }
@keyframes drift { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-46%, -54%) scale(1.08); } 100% { transform: translate(-54%, -47%) scale(.94); } }

/* no hard section edges: the sky fades out, bands and dividers are gone */
.divider { display: none !important; }
section.band { background: none; }
.hero .sky { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); background: none; }
.stats .grid { border-top-color: transparent; border-image: linear-gradient(90deg, transparent, var(--line2) 12%, var(--line2) 88%, transparent) 1; }
.cards3 { border-image: linear-gradient(90deg, transparent, var(--line2) 10%, var(--line2) 90%, transparent) 1; }
.panel, .compare, .board, .ladder, .flow-board, .boxy, .nest-card, .phase, .chart-box, .feed-box, .wl, .devshare, .step, .seg {
  background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }

/* Follow one trade: the holders' share fans out to five wallets with the same bag */
.flow-board { display: grid; gap: 4px; align-content: start; }
.fan { border-top: 1px dashed var(--line2); margin-top: 8px; padding-top: 16px; }
.fan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.fan-head b { color: var(--gold); font: 600 14px var(--mono); }
.fan-head small { font: 500 12px var(--mono); color: var(--faint); }
.fan-rows { display: grid; gap: 6px; }
.fan-w { display: grid; grid-template-columns: 26px minmax(130px, 1.1fr) 44px 2fr 70px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px;
  transition: background .3s; }
.fan-w:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.fan-w .av { width: 26px; height: 26px; }
.fan-w .av circle { fill: color-mix(in srgb, var(--gold) 16%, transparent); stroke: none; }
.fan-w .av path { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fan-w[data-t="f"] .av circle { fill: color-mix(in srgb, var(--coral) 16%, transparent); } .fan-w[data-t="f"] .av path { stroke: var(--coral); }
.fan-w .who { font-weight: 600; font-size: 14px; display: grid; line-height: 1.25; } .fan-w .who small { font-weight: 400; color: var(--faint); font-size: 12px; }
.fan-w .mx { font: 600 13px var(--mono); color: var(--muted); }
.fan-w .bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.fan-w .bar s { display: block; height: 100%; width: 50%; border-radius: inherit; background: linear-gradient(90deg, var(--gold2), var(--gold)); text-decoration: none; transition: width .6s var(--ease); }
.fan-w[data-t="f"] .bar s { background: var(--coral); }
.fan-w b { font: 600 13.5px var(--mono); text-align: right; }
.fan-w.hit { animation: fanhit .9s var(--ease); }
.fan-w.hit .bar s { animation: fanbar .9s var(--ease); }
@keyframes fanhit { 30% { background: color-mix(in srgb, var(--gold) 14%, transparent); } }
@keyframes fanbar { from { transform: scaleX(0); transform-origin: 0 50%; } }
@media (max-width: 640px) { .fan-w { grid-template-columns: 24px 1fr 40px 62px; } .fan-w .bar { display: none; } }

/* the egg: keycaps while you type, then a flock with gold dust */
.keycaps { position: fixed; left: 50%; bottom: 88px; z-index: 92; display: flex; gap: 8px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .35s var(--spring); }
.keycaps.show { opacity: 1; transform: translate(-50%, 0); }
.keycaps kbd { display: grid; place-items: center; width: 46px; height: 50px; border-radius: 10px; font: 800 20px var(--display); color: var(--faint);
  background: var(--card); border: 1px solid var(--line2); box-shadow: 0 4px 0 var(--line2); transition: transform .2s var(--spring), color .2s, background .2s, box-shadow .2s; }
.keycaps kbd.on { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); box-shadow: 0 2px 0 #B5620A; transform: translateY(2px); animation: cappop .32s var(--spring); }
.keycaps kbd.bad { animation: capbad .35s; border-color: var(--coral); }
.keycaps.done kbd { animation: capfly .9s var(--ease) forwards; } .keycaps.done kbd:nth-child(2) { animation-delay: .06s; } .keycaps.done kbd:nth-child(3) { animation-delay: .12s; } .keycaps.done kbd:nth-child(4) { animation-delay: .18s; }
@keyframes cappop { 0% { transform: translateY(2px) scale(1); } 45% { transform: translateY(-8px) scale(1.12); } 100% { transform: translateY(2px) scale(1); } }
@keyframes capbad { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes capfly { to { transform: translate(120px, -160px) rotate(18deg) scale(.4); opacity: 0; } }
.flock svg { width: 40px; height: 40px; overflow: visible; }
.flock .bd { fill: var(--text); stroke: none; animation: none; }
.flock .wg { fill: var(--text); stroke: none; transform-origin: 11.5px 11.4px; animation: wingbeat .32s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.flock .lead .bd, .flock .lead .wg { fill: var(--gold); }
.flock path { stroke: none; }
@keyframes wingbeat { from { transform: rotate(0deg); } to { transform: rotate(-55deg) scaleY(.8); } }
.dust { position: fixed; z-index: 91; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); pointer-events: none; }

/* footer: modest */
.wordmark { display: none !important; }
footer { padding-bottom: 28px; }
.signoff { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 12.5px; }
.eng-badge .pb-mark { transition: transform .4s var(--spring); } .eng-badge:hover .pb-mark { transform: rotate(-12deg) scale(1.1); }

/* Roost devtools panel */
#eng-panel { width: min(400px, calc(100vw - 24px)); max-height: min(78vh, 680px); display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: rgba(11, 12, 30, .86); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: pp-in .28s var(--spring); }
#eng-panel.out { animation: pp-out .18s ease forwards; }
@keyframes pp-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes pp-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.pp-top { display: flex; align-items: center; gap: 9px; padding: 12px 14px; margin: 0 !important; cursor: grab; user-select: none; border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, rgba(255, 181, 71, .08), transparent); }
.pp-top:active { cursor: grabbing; }
.pp-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #FFB547; color: #15183D; font: 800 13px var(--display); }
.pp-top b { font: 800 16px var(--display); color: #fff !important; } .pp-ver { color: #8A8CB0; font-size: 12px; }
.pp-fps { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #8A8CB0; font-size: 11.5px; }
.pp-fps i { width: 7px; height: 7px; border-radius: 50%; background: #5FD39A; box-shadow: 0 0 8px #5FD39A; }
.pp-fps b { font: 600 12px var(--mono) !important; color: #fff !important; }
.pp-top button { margin-left: 4px !important; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); background: none; color: #E8E6F5; cursor: pointer; font-size: 16px; }
.pp-top button:hover { background: rgba(255, 255, 255, .08); }
.pp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 14px 4px; }
.pp-cards div { padding: 8px 8px 7px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); display: grid; }
.pp-cards b { font: 700 17px var(--display); color: #fff; } .pp-cards span { color: #8A8CB0; font-size: 10.5px; }
.pp-route { display: flex; gap: 8px; align-items: center; padding: 8px 14px; color: #8A8CB0; font-size: 11.5px; }
.pp-route code { color: #9FD0FF; } .pp-route span:last-child { margin-left: auto; }
.pp-tabs { display: flex; gap: 4px; padding: 4px 14px 8px; }
.pp-tabs button { flex: 1; height: 30px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .04); color: #B9BAD6; font: 600 12px var(--font); cursor: pointer; }
.pp-tabs button[aria-selected="true"] { background: #FFB547; color: #15183D; }
.pp-body { overflow: auto; padding: 2px 10px 10px; min-height: 120px; }
.pp-group { margin: 10px 4px 4px; color: #FFB547; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.pp-row { display: grid; grid-template-columns: 1fr 60px auto 30px; gap: 10px; align-items: center; padding: 5px 6px; border-radius: 7px; }
.pp-row code { color: #9FD0FF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-row .pp-v { color: #fff; text-align: right; } .pp-row i { color: #6E7099; font-style: normal; text-align: right; font-size: 11px; }
.pp-sp svg { width: 60px; height: 16px; display: block; } .pp-sp polyline { fill: none; stroke: #FFB547; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pp-row.hot { animation: hot .7s; }
.pp-comp { display: grid; grid-template-columns: 1fr 1fr 56px; gap: 10px; align-items: center; width: 100%; padding: 7px 6px; border: 0; border-radius: 7px; background: none; color: #B9BAD6; font: inherit; cursor: pointer; text-align: left; }
.pp-comp:hover { background: rgba(255, 255, 255, .05); } .pp-comp code { color: #9FD0FF; } .pp-comp span:last-child { text-align: right; }
.pp-bar { height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .06); overflow: hidden; } .pp-bar s { display: block; height: 100%; background: #7C6CFF; text-decoration: none; }
.pp-ev { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; padding: 4px 6px; border-bottom: 1px dashed rgba(255, 255, 255, .05); }
.pp-ev time { color: #6E7099; } .pp-ev code { color: #9FD0FF; } .pp-ev span { color: #fff; }
.pp-empty { color: #8A8CB0; padding: 14px 6px; margin: 0; }
.pp-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, .07); color: #8A8CB0; font-size: 11.5px; }
.pp-foot label { display: flex; align-items: center; gap: 6px; color: #B9BAD6; cursor: pointer; }
.eng-flash { animation: pflash 1.2s; }
@keyframes pflash { 0%, 60% { outline: 2px solid #FFB547; outline-offset: 6px; } 100% { outline: 2px solid transparent; outline-offset: 12px; } }
@media (prefers-reduced-motion: reduce) { .aura i { animation: none; } :root { transition: none; } }

/* v7b: tighter rhythm, a stronger aura, the chart placeholder is small and alive */
section { padding: 84px 0; }
.sec-head { margin-bottom: 36px; }
:root, [data-theme="dark"] { --aura-a: .36; }
[data-theme="light"] { --aura-a: .22; }
.chart-box:has(.wait-chart) { min-height: 0; }
.wait-chart { gap: 6px; padding: 28px 28px 30px; justify-items: center; }
.wait-chart b { color: var(--text); font: 700 17px var(--display); margin-top: 10px; }
.wait-chart span { color: var(--faint); font-size: 13.5px; }
.wc { width: 100%; height: 120px; }
.wc-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wc-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: .02 .02; vector-effect: non-scaling-stroke; opacity: .7; animation: wcdash 3s linear infinite; }
.wc-dot { fill: var(--gold); animation: wcdot 3s ease-in-out infinite; }
@keyframes wcdash { to { stroke-dashoffset: -.4; } }
@keyframes wcdot { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(400px); opacity: 0; } }
.duo { align-items: stretch; }
.feed-box { align-content: start; }

section { padding: 72px 0; }
.wait .wc { width: 100%; height: 120px; color: inherit; }
.ex-card { gap: 18px !important; }
.exc { position: relative; display: flex; align-items: center; gap: 18px; width: min(380px, 100%); padding: 18px 20px; border-radius: 14px; text-align: left;
  background: #15183D; color: #F6F0E6; border: 1px solid rgba(255, 255, 255, .08); transform: rotate(-1.5deg); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .5);
  animation: excfloat 6s ease-in-out infinite; }
.exc img { width: 74px; height: 74px; border-radius: 18px; order: 2; margin-left: auto; }
.exc small { display: block; color: #FFB547; font: 500 11px var(--mono); letter-spacing: .06em; }
.exc b { display: block; font: 800 40px/1 var(--display); letter-spacing: -.03em; margin: 4px 0 2px; }
.exc span { font: 600 14px var(--display); }
.exc i { display: block; width: 150px; height: 5px; margin-top: 10px; border-radius: 9px; background: rgba(255, 236, 210, .14); overflow: hidden; }
.exc i s { display: block; width: 70%; height: 100%; background: #FFB547; text-decoration: none; }
.exc-tag { position: absolute; top: -10px; left: 16px; padding: 2px 8px; border-radius: 6px; background: var(--coral); color: #fff; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
@keyframes excfloat { 50% { transform: rotate(-.5deg) translateY(-4px); } }

/* ===================================================================================================
   v8 — cards with a gradient hairline and a cursor spotlight, a livelier example wallet, a fresher hero
   =================================================================================================== */
:root, [data-theme="dark"] { --edge-a: rgba(255, 181, 71, .38); --edge-b: rgba(255, 255, 255, .05); --edge-c: rgba(124, 108, 255, .3); --card-g: color-mix(in srgb, var(--card) 80%, transparent); }
[data-theme="light"] { --edge-a: rgba(181, 98, 10, .32); --edge-b: rgba(27, 28, 58, .07); --edge-c: rgba(91, 87, 217, .22); --card-g: color-mix(in srgb, var(--card) 86%, transparent); }
.panel, .compare, .board, .ladder, .flow-board, .boxy, .nest-card, .phase, .chart-box, .feed-box, .wl, .step, .seg {
  border: 1px solid transparent !important; border-radius: 20px;
  background: linear-gradient(var(--card-g), var(--card-g)) padding-box,
    linear-gradient(155deg, var(--edge-a), var(--edge-b) 32%, var(--edge-b) 68%, var(--edge-c)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -34px rgba(0, 0, 0, .7); position: relative; }
.seg, .boxy, .wl { border-radius: 14px; }
.phase.now { background: linear-gradient(var(--card-g), var(--card-g)) padding-box, linear-gradient(155deg, var(--gold), var(--edge-b) 45%, var(--edge-c)) border-box !important; }
.result-big div.you { border-color: var(--gold); }
/* a soft spotlight that follows the cursor inside a card */
.spot { --mx: 50%; --my: 0%; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%); }
.spot:hover::after { opacity: 1; }
.phase, .step { transition: transform .35s var(--ease), box-shadow .35s; }
.phase:hover, .step:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -34px rgba(0, 0, 0, .75); }
.step::before { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* hero: the accent line glows from amber to coral, buttons get a light sweep */
.hero h1 em { background: var(--twig) no-repeat 0 100% / 100% .3em, linear-gradient(100deg, var(--gold2), var(--gold) 45%, var(--coral)); -webkit-background-clip: border-box, text; background-clip: border-box, text;
  -webkit-text-fill-color: transparent; color: transparent; }
.hero h1 em.w-em { background-size: 0% .3em, 100% 100% !important; }
.reveal.in .hero h1 em.w-em, .hero .reveal.in em.w-em, .hero h1.in em.w-em { background-size: 100% .3em, 100% 100% !important; }
.btn.primary { position: relative; overflow: hidden; isolation: isolate; }
.btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn.primary:hover::after { transform: translateX(120%); }
.ticker { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 8%, var(--bg2)), var(--bg2) 40%, var(--bg2) 60%, color-mix(in srgb, var(--violet, #7C6CFF) 8%, var(--bg2))); }
.sec-head .kicker::before { padding: 2px 7px; border-radius: 7px; background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* the example wallet in «Check your nest» */
.ex-card { width: 100%; justify-items: stretch !important; text-align: left; gap: 14px !important; padding: 6px 2px; color: var(--muted); }
.ex-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ex-tag { padding: 3px 9px; border-radius: 7px; background: color-mix(in srgb, var(--coral) 16%, transparent); color: var(--coral); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.ex-hint { font: 500 12px var(--mono); color: var(--faint); }
.exc { width: 100%; transform: none; animation: none; padding: 20px 22px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 122, 89, .28), transparent 55%), #15183D; justify-content: space-between; }
.exc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .08) 50%, transparent 65%); transform: translateX(-100%); animation: excshine 5.2s ease-in-out infinite; }
@keyframes excshine { 60%, 100% { transform: translateX(100%); } }
.exc img { width: 86px; height: 86px; animation: bob 3.2s ease-in-out infinite; }
.exc b { font-size: 48px; font-variant-numeric: tabular-nums; }
.exc i { width: 190px; }
.exc i s { transition: width .7s var(--ease); }
.exc span.swap { animation: swapin .5s var(--ease); }
@keyframes swapin { from { opacity: 0; transform: translateY(6px); } }
.exc-tag { display: none; }
.ex-kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ex-kv div { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--card2) 70%, transparent); border: 1px dashed var(--line2); }
.ex-kv span { display: block; font-size: 11.5px; color: var(--faint); } .ex-kv b { font: 600 14px var(--mono); color: var(--text); }
.ex-note { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 640px) { .ex-kv { grid-template-columns: 1fr 1fr; } .exc b { font-size: 40px; } .exc img { width: 64px; height: 64px; } }
.exc i s { transition: none !important; }

/* docs tables wrap on phones */
@media (max-width: 640px) { .doc td:last-child { white-space: normal; text-align: right; } .doc td { padding: 11px 12px; font-size: 14px; } .doc { padding-left: 16px; padding-right: 16px; } }
.fan-w .bar s { transform-origin: 0 50%; }

/* ===================================================================================================
   v9 — docs: a sticky «On this page» rail with a reading line on wide screens, a scrolling chip strip on phones
   =================================================================================================== */
.doc .toc { all: unset; display: block; }
.toc-label { display: block; font: 500 12px var(--mono); color: var(--faint); letter-spacing: .04em; margin-bottom: 12px; }
.toc-list { display: grid; gap: 2px; position: relative; }
.doc .toc .toc-list a { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 6px; padding: 8px 12px 8px 14px; border-radius: 10px; cursor: pointer;
  color: var(--muted); font-size: 14.5px; position: relative; transition: color .2s, background .2s; }
.doc .toc .toc-list a i { font: 500 11.5px var(--mono); font-style: normal; color: var(--faint); transition: color .2s; }
.doc .toc .toc-list a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line2); transition: background .25s, transform .3s var(--spring); }
.doc .toc .toc-list a:hover { color: var(--text); background: color-mix(in srgb, var(--card) 60%, transparent); }
.doc .toc .toc-list a.on { color: var(--text); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.doc .toc .toc-list a.on i { color: var(--gold); }
.doc .toc .toc-list a.on::before { background: var(--gold); transform: scaleY(1.15); }
.doc .toc .toc-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.toc-progress { display: block; height: 2px; margin-top: 16px; border-radius: 2px; background: var(--line); overflow: hidden; }
.toc-progress s { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold), var(--coral)); transform-origin: 0 50%; transform: scaleX(0); text-decoration: none; }

@media (min-width: 1100px) {
  .doc { max-width: 1120px; display: grid; grid-template-columns: 220px minmax(0, 780px); column-gap: 64px; justify-content: center; }
  .doc > * { grid-column: 2; }
  .doc > .toc { grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: 118px; padding-top: 4px; }
}
@media (max-width: 1099px) {
  .doc > .toc { position: sticky; top: 68px; z-index: 6; margin: 22px -24px 6px; padding: 10px 24px; background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border-bottom: 1px solid var(--line); }
  .toc-label { display: none; }
  .toc-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); padding: 0 16px; }
  .toc-list::-webkit-scrollbar { display: none; }
  .doc .toc .toc-list a { display: inline-flex; gap: 7px; flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); scroll-snap-align: center; font-size: 13.5px; white-space: nowrap; }
  .doc .toc .toc-list a::before { display: none; }
  .doc .toc .toc-list a.on { border-color: var(--gold); }
  .toc-progress { position: absolute; left: 0; right: 0; bottom: -1px; margin: 0; height: 2px; border-radius: 0; background: transparent; }
}
@media (max-width: 540px) { .doc > .toc { margin-left: -16px; margin-right: -16px; padding-left: 4px; padding-right: 4px; } }

/* docs headings: numbered like the rail, with a copy-link anchor on hover */
.doc h2 { display: flex; align-items: baseline; gap: 12px; position: relative; margin-top: 64px; }
.doc h2 .h-n { font: 500 13px var(--mono); color: var(--gold); padding: 2px 7px; border-radius: 7px; background: color-mix(in srgb, var(--gold) 13%, transparent); transform: translateY(-4px); }
.h-link { margin-left: 4px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line2); background: transparent; color: var(--faint); font: 600 14px var(--mono); cursor: pointer;
  opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s var(--ease), color .2s, border-color .2s; }
.doc h2:hover .h-link, .h-link:focus-visible { opacity: 1; transform: none; }
.h-link:hover { color: var(--gold); border-color: var(--gold); }
.h-link.done { animation: cappop .32s var(--spring); color: var(--green); border-color: var(--green); opacity: 1; }
@media (hover: none) { .h-link { opacity: .6; transform: none; } }
.doc h1 { margin-bottom: 18px; }
.doc > p:first-of-type { font-size: 17px; }
.doc table tr { transition: background .2s; }
.doc table tr:hover { background: color-mix(in srgb, var(--gold) 5%, transparent); }
.doc td:last-child { color: var(--gold); }
[data-theme="light"] .doc td:last-child { color: var(--gold); }
@media (min-width: 1100px) { .doc .toc .toc-list a { border: 0; } }
@media (max-width: 640px) { .doc td:last-child { min-width: 7.6em; text-wrap: balance; } .doc td:first-child { padding-right: 6px; } }

/* ===================================================================================================
   v10 — the problem and the answer, holder perks, a roadmap with goals, docs in the site's card style, a calmer aura
   =================================================================================================== */
:root, [data-theme="dark"] { --aura-a: .2; }
[data-theme="light"] { --aura-a: .12; }
.aura i { filter: blur(70px); }
.aura .a1 { animation-duration: 34s; } .aura .a2 { animation-duration: 40s; } .aura .a3 { animation-duration: 46s; }

/* one card recipe shared by every new block (same as .panel) */
.pr-row, .perks > div, .doc table, .doc-keys > div, .callout, .doc-end, .doc .wl {
  border: 1px solid transparent !important;
  background: linear-gradient(var(--card-g), var(--card-g)) padding-box,
    linear-gradient(155deg, var(--edge-a), var(--edge-b) 32%, var(--edge-b) 68%, var(--edge-c)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -34px rgba(0, 0, 0, .7);
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }

/* the problem → the answer */
.pr-head { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 0; margin-bottom: 10px; padding: 0 22px; font: 500 12.5px var(--mono); }
.pr-head span:first-child { color: var(--coral); } .pr-head span:last-child { color: var(--gold); }
.pr-grid { display: grid; gap: 12px; }
.pr-row { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; border-radius: 20px; padding: 6px; transition: transform .35s var(--ease); }
.pr-row:hover { transform: translateY(-2px); }
.pr-bad, .pr-good { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px; border-radius: 15px; }
.pr-good { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.pr-bad h3, .pr-good h3 { font-size: 17.5px; margin-bottom: 4px; }
.pr-bad p, .pr-good p { margin: 0; color: var(--muted); font-size: 14.5px; }
.pr-bad h3 { color: var(--muted); }
.pr-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.pr-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pr-bad .pr-ico { color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, transparent); }
.pr-good .pr-ico { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.pr-arrow { display: grid; place-items: center; color: var(--gold); }
.pr-arrow svg { width: 48px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease) .3s; }
.pr-row.in .pr-arrow path { stroke-dashoffset: 0; }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.perks > div { padding: 18px 20px; border-radius: 16px; display: grid; gap: 2px; }
.perks b { font: 800 26px/1.1 var(--display); letter-spacing: -.02em; color: var(--gold); }
.perks span { color: var(--muted); font-size: 14px; }
@media (max-width: 860px) {
  .pr-head { display: none; }
  .pr-row { grid-template-columns: 1fr; }
  .pr-arrow { transform: rotate(90deg); height: 34px; }
  .perks { grid-template-columns: 1fr 1fr; }
}

/* roadmap: a track of stages, then cards with one goal, a meter and what holders get */
.rm-track { position: relative; list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rm-track li { position: relative; z-index: 1; display: grid; justify-items: start; gap: 4px; }
.rm-node { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--faint);
  background: var(--card); border: 1px solid var(--line2); transition: color .3s, border-color .3s, box-shadow .3s; }
.rm-node svg { width: 24px; height: 24px; }
.rm-track b { font: 700 16px var(--display); margin-top: 6px; }
.rm-track small { font: 500 12px var(--mono); color: var(--faint); }
.rm-track li[data-state="now"] .rm-node, .rm-track li[data-state="done"] .rm-node { color: var(--gold); border-color: var(--gold); }
.rm-track li[data-state="now"] .rm-node { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 14%, transparent); animation: nodepulse 2.6s ease-in-out infinite; }
.rm-track li[data-state="next"] .rm-node { color: var(--text); border-color: var(--edge-a); }
.rm-track li[data-state="next"] small { color: var(--gold); }
@keyframes nodepulse { 50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--gold) 6%, transparent); } }
.rm-line { position: absolute; left: 23px; right: calc(25% - 23px + 16px * .25); top: 23px; height: 2px; background: var(--line2); border-radius: 2px; z-index: 0; }
.rm-line > i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold2), var(--gold)); transition: transform 1.4s var(--ease); }
.road { grid-template-columns: repeat(4, 1fr); }
.road .phase { display: flex; flex-direction: column; gap: 0; padding: 22px; }
.road .phase[data-state="later"] { opacity: .86; }
.road .phase .tag { color: var(--muted); }
.road .phase[data-state="next"] .tag, .road .phase[data-state="now"] .tag { color: var(--gold); }
.road .phase h3 { font-size: 20px; margin: 10px 0 14px; }
.goal { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--card2) 70%, transparent); border: 1px dashed var(--line2); }
.goal > span { display: block; font: 500 11px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .1em; }
.goal > b { display: block; font-size: 14.5px; margin: 3px 0 10px; line-height: 1.35; }
.meter i { display: block; height: 6px; border-radius: 9px; background: var(--line2); overflow: hidden; }
.meter i s { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold2), var(--gold)); text-decoration: none; transition: width 1.2s var(--ease); min-width: 0; }
.meter small { display: block; margin-top: 6px; font: 500 12px var(--mono); color: var(--faint); } .meter small b { color: var(--text); font-weight: 600; }
.meter.done-at-launch small { color: var(--gold); margin-top: 0; }
.for-holders { margin: 14px 0 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 9%, transparent); color: var(--text); font-size: 14.5px; line-height: 1.45; }
.for-holders span { display: block; font: 600 11px var(--mono); color: var(--gold); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px; }
.road .phase ul { font-size: 14px; }
.road .phase .see { margin-top: auto; padding-top: 12px; }
.phase .trigger { display: none; }
@media (max-width: 1000px) { .rm-track { grid-template-columns: repeat(4, 1fr); } .rm-track small { display: none; } .road { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .road { grid-template-columns: 1fr; } .rm-track b { font-size: 13px; } .rm-node { width: 40px; height: 40px; } .rm-line { top: 20px; left: 20px; } }

/* docs: the same voice and the same cards as the site */
.doc { padding-top: 56px; }
.doc-kicker { display: inline-flex !important; align-items: center; gap: 10px; }
.doc-kicker i { font-style: normal; padding: 2px 8px; border-radius: 7px; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
.doc h1 { font-size: clamp(44px, 6vw, 72px); }
.doc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 26px 0 8px; }
.doc-keys > div { padding: 16px 16px 14px; border-radius: 16px; display: grid; gap: 2px; }
.doc-keys b { font: 800 24px/1.1 var(--display); color: var(--gold); letter-spacing: -.02em; }
.doc-keys span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.doc table { border-radius: 18px !important; border-collapse: separate; overflow: hidden; }
.doc td { border-bottom-color: var(--line) !important; }
.callout { position: relative; margin: 16px 0; padding: 16px 18px 16px 52px; border-radius: 16px; color: var(--muted); }
.callout::before { content: "i"; position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); font: 700 13px var(--mono); }
.callout b { color: var(--text); }
.doc .wl { border-radius: 14px; }
.doc-end { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 56px 0 14px; padding: 24px 26px; border-radius: 20px; }
.doc-end h3 { font-size: 22px; margin-bottom: 4px; } .doc-end p { margin: 0; color: var(--muted); max-width: 30em; }
.doc-end .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-fine { color: var(--faint) !important; font-size: 13px; margin: 0; }
@media (max-width: 640px) { .doc-keys { grid-template-columns: 1fr 1fr; } .doc-end { padding: 20px; } }

/* v10b: FAQ heading stays at the top of its column; the honest notes use the callout card */
.faq .sec-head { align-self: start; align-content: start; position: sticky; top: 120px; row-gap: 12px; margin-bottom: 0; }
@media (max-width: 1000px) { .faq .sec-head { position: static; } }
.honest, .policy { position: relative; padding: 16px 18px 16px 52px !important; border-radius: 16px; border: 1px solid transparent !important; color: var(--muted);
  background: linear-gradient(var(--card-g), var(--card-g)) padding-box, linear-gradient(155deg, var(--edge-a), var(--edge-b) 32%, var(--edge-b) 68%, var(--edge-c)) border-box !important; }
.honest::before, .policy::before { content: "!"; position: absolute; left: 16px; top: 15px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); font: 700 13px var(--mono); }
.policy::before { content: "§"; }

@media (max-width: 640px) { .perks b { font-size: 20px; } .perks > div { padding: 14px 14px; } }

/* ===================================================================================================
   v11 — no gaps: equal-height columns, the trade receipt, what a check reads; the comparison grid; shortcuts sheet
   =================================================================================================== */
/* columns end on the same line */
.flow, .checker, .calc, .duo { align-items: stretch; }
.flow-side { display: flex; flex-direction: column; gap: 12px; }
.flow-side > .receipt { flex: 1; }
.checker > .panel:first-child { display: flex; flex-direction: column; gap: 18px; }

/* the receipt of the trade */
.receipt { display: flex; flex-direction: column; gap: 10px; }
.rc-head { display: flex; justify-content: space-between; align-items: baseline; }
.rc-head span { font: 700 15px var(--display); color: var(--text); }
.rc-head small { font: 500 12px var(--mono); color: var(--faint); }
.receipt dl { margin: 0; display: grid; gap: 7px; }
.receipt dl div { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.receipt dt { color: var(--muted); white-space: nowrap; }
.receipt dl div::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--line2); transform: translateY(-3px); }
.receipt dd { order: 2; margin: 0; font: 600 13.5px var(--mono); color: var(--text); }
.receipt dl div:nth-child(3) dd { color: var(--gold); } .receipt dl div:nth-child(4) dd { color: var(--coral); }
.rc-total { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px dashed var(--line2); }
.rc-total span { font-size: 13.5px; color: var(--muted); } .rc-total b { font: 700 20px var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.receipt.hit { animation: rchit .8s var(--ease); }
@keyframes rchit { 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent), 0 24px 48px -34px rgba(0, 0, 0, .7); } }

/* what a check reads */
.ck-how { display: grid; gap: 12px; }
.ck-label { font: 500 12px var(--mono); color: var(--faint); }
.ck-how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ck; }
.ck-how li { counter-increment: ck; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 2px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--card2) 70%, transparent); border: 1px solid var(--line); }
.ck-how li::before { content: counter(ck, decimal-leading-zero); grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); font: 600 12px var(--mono); }
.ck-how li b { font-size: 14.5px; } .ck-how li span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.ck-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed var(--line2); }
.ck-lock { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ck-lock svg, .ck-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ck-lock svg { color: var(--green); }
.ck-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--gold); }
.ck-link svg { transition: transform .25s var(--ease); } .ck-link:hover svg { transform: translateX(3px); }
.checker .panel.result { display: flex; }
.checker .panel.result > .ex-card { flex: 1; align-content: space-between; }

/* Why Nest: a comparison grid with a raised Nest column and a score */
.vs { position: relative; display: grid; grid-template-columns: minmax(180px, 1.05fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); border-radius: 22px;
  padding: 10px; border: 1px solid transparent;
  background: linear-gradient(var(--card-g), var(--card-g)) padding-box, linear-gradient(155deg, var(--edge-a), var(--edge-b) 32%, var(--edge-b) 68%, var(--edge-c)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -34px rgba(0, 0, 0, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.vs-hl { grid-column: 2; grid-row: 1 / span 8; border-radius: 16px; z-index: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, transparent), color-mix(in srgb, var(--gold) 6%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), 0 24px 50px -30px color-mix(in srgb, var(--gold) 60%, transparent); }
.vs > *:not(.vs-hl) { position: relative; z-index: 1; }
.vs-h { padding: 16px 16px 14px; display: flex; align-items: center; gap: 10px; }
.vs-h b { display: block; font: 700 15px var(--display); color: var(--text); } .vs-h small { display: block; font-size: 12px; color: var(--faint); }
.vs-h.us b { font-size: 19px; } .vs-h.us small { color: var(--gold); }
.vs-h img { width: 34px; height: 34px; border-radius: 10px; }
.vs-l, .vs-c { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; font-size: 14.5px; min-height: 58px; }
.vs-l { color: var(--text); font-weight: 500; }
.vs-l svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--faint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vs-c { color: var(--muted); }
.vs-c.us { color: var(--text); border-top-color: color-mix(in srgb, var(--gold) 22%, transparent); }
.vs-c i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; }
.vs-c i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vs-c.yes i { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); }
.vs-c.us.yes i { color: var(--gold-ink); background: var(--gold); }
.vs-c.mid i { color: var(--faint); background: color-mix(in srgb, var(--faint) 14%, transparent); }
.vs-c.no i { color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, transparent); }
.vs-score-l { color: var(--faint) !important; font: 500 12.5px var(--mono) !important; }
.vs-score { padding: 14px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vs-score b { font: 800 20px var(--display); color: var(--muted); } .vs-score.us b { color: var(--gold); }
.vs-dots { display: flex; gap: 4px; } .vs-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); }
.vs-dots i.on { background: var(--muted); } .vs-score.us .vs-dots i.on { background: var(--gold); }
.vs > div:nth-last-child(-n+4) { border-bottom: 0; }
@media (max-width: 900px) {
  .vs { overflow-x: auto; grid-template-columns: 170px 220px 190px 190px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}

/* footer: the shortcuts button; the shortcuts sheet */
.eng-keys { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 10px; border: 1px solid var(--line2); background: transparent;
  color: var(--muted); font: 500 12.5px var(--mono); cursor: pointer; transition: color .15s, border-color .15s; }
.eng-keys:hover { color: var(--text); border-color: var(--text); }
.eng-keys kbd, #eng-help kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--card2);
  border: 1px solid var(--line2); box-shadow: 0 2px 0 var(--line2); font: 600 12px var(--mono); color: var(--text); }
#eng-help { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 20px; background: rgba(8, 9, 22, .55); backdrop-filter: blur(6px); animation: pp-in .2s ease; }
#eng-help.out { animation: pp-out .16s ease forwards; }
.eh-card { width: min(420px, 100%); padding: 18px 20px 20px; border-radius: 18px; border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(155deg, var(--edge-a), var(--edge-b) 40%, var(--edge-c)) border-box; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.eh-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .eh-card header b { font: 800 18px var(--display); }
.eh-card header button { margin-left: auto; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line2); background: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.eh-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.eh-card li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.eh-card li:last-child { border-bottom: 0; }
.eh-card kbd { min-width: 34px !important; }

/* the highlight is positioned over its column and takes no cell (abspos grid child) */
.vs-hl { position: absolute; inset: 0; grid-column: 2; grid-row: 1 / span 8; }
/* calculator: the left panel ends with the 14-day sum */
.calc > .panel:first-child { display: flex; flex-direction: column; }
.c-sum { margin-top: auto; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 9%, transparent); display: grid; gap: 2px; }
.c-sum span { font: 500 12px var(--mono); color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.c-sum b { font: 700 16px var(--display); color: var(--text); } .c-sum b em { font-style: normal; color: var(--gold); }
.calc .assume { margin-bottom: 16px; }
.vs-hl { grid-column: 2 / 3; grid-row: 1 / 9; }

/* v11c: example ranks, transparency in two columns, FAQ help card */
.checker .panel.result > .ex-card { align-content: start; gap: 16px !important; }
.ex-ranks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ex-ranks span { text-align: center; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); font: 600 12.5px var(--display); color: var(--faint);
  transition: color .3s, border-color .3s, background .3s; }
.ex-ranks span.on { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.ex-note { margin-top: auto !important; text-align: center; }
.open-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; align-items: stretch; }
.open-grid .wallets { align-content: start; }
.verify { padding: 20px 22px; border-radius: 20px; border: 1px solid transparent; display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(var(--card-g), var(--card-g)) padding-box, linear-gradient(155deg, var(--edge-a), var(--edge-b) 32%, var(--edge-b) 68%, var(--edge-c)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -34px rgba(0, 0, 0, .7); }
.verify h3 { font-size: 18px; }
.verify ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: vf; }
.verify li { counter-increment: vf; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; }
.verify li::before { content: counter(vf); grid-row: 1 / 3; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); font: 600 12px var(--mono); }
.verify li b { font-size: 14.5px; } .verify li span { font-size: 13.5px; color: var(--muted); }
.verify .ck-link { margin-top: auto; }
.open-grid .wl { grid-template-columns: 140px 1fr auto; }
@media (max-width: 1000px) { .open-grid { grid-template-columns: 1fr; } }
.faq-more { margin-top: 8px; padding: 16px 18px; border-radius: 16px; display: grid; gap: 4px; border: 1px solid transparent;
  background: linear-gradient(var(--card-g), var(--card-g)) padding-box, linear-gradient(155deg, var(--edge-a), var(--edge-b) 40%, var(--edge-c)) border-box; }
.faq-more b { font: 700 16px var(--display); } .faq-more > span { color: var(--muted); font-size: 14px; }
.faq-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.checker .panel.result > .ex-card { display: flex !important; flex-direction: column; align-items: stretch; }
.ex-paid { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line2); background: color-mix(in srgb, var(--card2) 60%, transparent); }
.ep-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--faint); }
.ep-top b { font: 600 12.5px var(--mono); color: var(--text); }
.ep-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 46px; margin-top: 10px; }
.ep-bars i { display: block; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 35%, transparent));
  transform-origin: 50% 100%; animation: epgrow .9s var(--ease) both; }
.ep-bars i:nth-child(2) { animation-delay: .05s; } .ep-bars i:nth-child(3) { animation-delay: .1s; } .ep-bars i:nth-child(4) { animation-delay: .15s; }
.ep-bars i:nth-child(5) { animation-delay: .2s; } .ep-bars i:nth-child(6) { animation-delay: .25s; } .ep-bars i:nth-child(7) { animation-delay: .3s; }
@keyframes epgrow { from { transform: scaleY(.1); opacity: .3; } }
.ep-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 6px; text-align: center; font: 500 10.5px var(--mono); color: var(--faint); }

.open-grid .wallets { display: grid; grid-auto-rows: 1fr; gap: 10px; }
.open-grid .wl code { color: var(--text); }
.checker > .panel, .ex-card > * { min-width: 0; } .ex-ranks { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 540px) { .ex-ranks span { font-size: 11px; padding: 7px 2px; } .ep-top { flex-direction: column; gap: 2px; } .ck-foot { flex-direction: column; align-items: flex-start; } }

/* phones: the comparison becomes one card per question, every answer labelled with its column */
@media (max-width: 700px) {
  .vs { display: block; overflow: visible; padding: 8px; -webkit-mask-image: none; mask-image: none; }
  .vs-hl, .vs-h { display: none; }
  .vs-l { border-top: 0; min-height: 0; padding: 16px 10px 8px; font: 700 16px var(--display); }
  .vs-l:not(:first-of-type) { margin-top: 6px; border-top: 1px solid var(--line); }
  .vs-c, .vs-score { min-height: 0; padding: 8px 10px; border-top: 0; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
  .vs-c::before, .vs-score::before { content: attr(data-col); grid-column: 2; grid-row: 1; font: 500 11px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
  .vs-c > i { grid-row: 1 / 3; margin-top: 2px; } .vs-c > span { grid-column: 2; }
  .vs-c.us { border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
  .vs-c.us::before { color: var(--gold); }
  .vs-score { grid-template-columns: 1fr auto; align-items: center; }
  .vs-score::before { grid-column: 1; }
  .vs-score > b { grid-row: 1; grid-column: 2; font-size: 17px; } .vs-score .vs-dots { display: none; }
  .vs-score.us { border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, transparent); }
}

/* header nav: a sliding pill under the active link instead of per-link backgrounds */
.nav { position: relative; }
.nav a { position: relative; z-index: 1; background: none !important; box-shadow: none !important; transition: color .2s; }
.nav a.on { color: var(--text); }
.nav-ind { position: absolute; left: 0; top: 50%; height: 34px; margin-top: -17px; border-radius: 999px; pointer-events: none; z-index: 0; opacity: 0;
  background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: inset 0 0 0 1px var(--line2), inset 0 -2px 0 var(--gold);
  transition: transform .45s var(--spring), width .45s var(--spring), opacity .2s; }

/* ===================================================================================================
   v12 — the accent underline: one hairline that stops short, and a small egg at its end (the nest's mark, quietly)
   =================================================================================================== */
:root { --ul-line: linear-gradient(90deg, color-mix(in srgb, var(--gold) 35%, transparent), var(--gold) 30%);
  --ul-egg: radial-gradient(closest-side, var(--gold2) 86%, transparent 100%); }
h1 em, h2 em, .final h2 em {
  background: var(--ul-line) no-repeat 0 calc(100% - .04em) / calc(100% - .38em) .06em, var(--ul-egg) no-repeat 100% 100% / .2em .25em !important;
  padding-bottom: .14em; padding-right: .02em; }
.w-em { background-size: 0% .06em, 0 0 !important; transition: opacity .6s calc(var(--i, 0) * 55ms), transform .85s var(--ease) calc(var(--i, 0) * 55ms), background-size .9s var(--ease) .5s !important; }
.reveal.in .w-em { background-size: calc(100% - .38em) .06em, .2em .25em !important; }
.hero h1 em { background: var(--ul-line) no-repeat 0 calc(100% - .04em) / calc(100% - .38em) .06em, var(--ul-egg) no-repeat 100% 100% / .2em .25em,
  linear-gradient(100deg, var(--gold2), var(--gold) 45%, var(--coral)) !important;
  -webkit-background-clip: border-box, border-box, text !important; background-clip: border-box, border-box, text !important; }
@media (prefers-reduced-motion: reduce) { .w-em { background-size: calc(100% - .38em) .06em, .2em .25em !important; } }
:root { --ul-egg: radial-gradient(closest-side, var(--gold2) 86%, transparent 100%); } h1 em, h2 em, .final h2 em { background-size: calc(100% - .34em) .06em, .16em .2em !important; } .reveal.in .w-em { background-size: calc(100% - .34em) .06em, .16em .2em !important; } .hero h1 em { background-size: calc(100% - .34em) .06em, .16em .2em, 100% 100% !important; }

/* v12b — the accent underline is a soft amber glow under the word that fades out at both ends; nothing else */
:root { --ul-soft: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 42%, transparent) 14%, color-mix(in srgb, var(--coral) 34%, transparent) 86%, transparent); }
[data-theme="light"] { --ul-soft: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 30%, transparent) 14%, color-mix(in srgb, var(--coral) 24%, transparent) 86%, transparent); }
h1 em, h2 em, .final h2 em { background: var(--ul-soft) no-repeat 0 88% / 100% .2em !important; padding: 0 .04em .02em !important; border-radius: .1em; }
.w-em { background-size: 0% .2em !important; }
.reveal.in .w-em { background-size: 100% .2em !important; }
.hero h1 em { background: var(--ul-soft) no-repeat 0 88% / 100% .2em, linear-gradient(100deg, var(--gold2), var(--gold) 45%, var(--coral)) !important;
  background-size: 100% .2em, 100% 100% !important; -webkit-background-clip: border-box, text !important; background-clip: border-box, text !important; }
@media (prefers-reduced-motion: reduce) { .w-em { background-size: 100% .2em !important; } }

/* the engine chart (pfgp/site_engine/chart.js) in the site's colours */
.chart-box.live { display: flex; flex-direction: column; min-height: 460px; padding: 0; }
.ec { display: flex; flex-direction: column; }
.ec-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ec-tfs, .ec-sw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--card2) 70%, transparent); border: 1px solid var(--line); }
.ec-sw { margin-left: 0; } .ec-tfs { margin-right: auto; }
.ec-bar button { height: 28px; min-width: 32px; padding: 0 9px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 12px var(--mono); cursor: pointer; display: grid; place-items: center; }
.ec-bar button:hover { color: var(--text); }
.ec-bar button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
.ec-bar button:disabled { opacity: .35; cursor: default; }
.ec-bar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ec-stage { position: relative; flex: 1; min-height: 380px; }
.ec-stage canvas { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.ec-legend { position: absolute; left: 12px; top: 10px; display: flex; gap: 12px; flex-wrap: wrap; font: 500 12px var(--mono); color: var(--faint); pointer-events: none; padding-right: 80px; }
.ec-legend b { color: var(--text); font-family: var(--display); } .ec-legend i { font-style: normal; color: var(--text); }
.ec-legend .up { color: var(--green); } .ec-legend .dn { color: var(--coral); }
.ec-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 14px; pointer-events: none; }
@media (max-width: 640px) { .chart-box.live { min-height: 400px; } .ec-stage { min-height: 320px; } .ec-legend { font-size: 11px; gap: 8px; } }

.ec-msg[hidden] { display: none; }
.ec-src { font: 500 11px var(--mono); color: var(--faint); margin-left: 4px; }
.ec-stage canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 640px) { .ec-src { display: none; } }