/* Almoner: black and electric orange. Dark by default, light on request. */
:root, [data-theme="dark"] {
  --bg:#060606; --card:#101010; --card2:#0b0b0b; --ink:#f4f4f2; --muted:#9a9a96; --line:#242424;
  --accent:#ff6b1a; --accent-t:#ff7a30; --accent-ink:#1a0a00; --glow:rgba(255,107,26,.30); --glow2:rgba(255,255,255,.05);
  --ok:#ff7a30; --warn:#ffd23f; --bad:#ff4d6d; --info:#8fb4ff; --chip:#1a1a1a;
  --ok-bg:rgba(255,107,26,.15); --warn-bg:rgba(255,210,63,.13); --bad-bg:rgba(255,77,109,.14); --info-bg:rgba(143,180,255,.14);
  --term:#000; --term-ink:#e6e6e3; --term-accent:#ff8a3d; --term-dim:#8a8a86; --term-line:#222; --grid:rgba(255,255,255,.045); --shadow:0 30px 80px -40px rgba(0,0,0,.9);
}
[data-theme="light"] {
  --bg:#f5f3ef; --card:#ffffff; --card2:#faf8f5; --ink:#0c0c0c; --muted:#5d5a55; --line:#e2ded7;
  --accent:#ff6b1a; --accent-t:#c2410c; --accent-ink:#1a0a00; --glow:rgba(255,107,26,.34); --glow2:rgba(12,12,12,.04);
  --ok:#c2410c; --warn:#8a6a00; --bad:#c81e4a; --info:#2f5fe0; --chip:#ece8e1;
  --ok-bg:rgba(255,107,26,.13); --warn-bg:rgba(200,150,0,.14); --bad-bg:rgba(200,30,74,.10); --info-bg:rgba(47,95,224,.10);
  --term:#0c0c0c; --term-ink:#e6e6e3; --term-accent:#ff8a3d; --term-dim:#8a8a86; --term-line:#262626; --grid:rgba(12,12,12,.055); --shadow:0 30px 70px -40px rgba(60,30,10,.4);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; color-scheme:dark; } [data-theme="light"] { color-scheme:light; }
html, body { overflow-x:clip; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; transition:background .25s, color .25s; }
a { color:var(--accent-t); }
code, .mono { font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82em; }
.muted { color:var(--muted); font-weight:400; font-size:14px; }
h1, h2, h3, .brand, .stat .v, .btn { font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif; }
.skip { position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--bg); padding:8px 12px; border-radius:8px; z-index:20; } .skip:focus { left:8px; }
:focus-visible { outline:2px solid var(--accent-t); outline-offset:2px; border-radius:6px; }

/* backdrop: two soft glows over a faint grid, fading out down the page */
.backdrop { position:absolute; inset:0 0 auto 0; height:920px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px 380px at 78% 26%, var(--glow), transparent 70%),
    radial-gradient(520px 340px at 8% 4%, var(--glow2), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent); }

/* floating nav */
.top { position:sticky; top:12px; z-index:10; display:flex; align-items:center; gap:18px; max-width:1132px; margin:12px auto 0; padding:9px 10px 9px 18px;
  background:color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); }
.brand { font-weight:800; font-size:19px; color:var(--ink); text-decoration:none; white-space:nowrap; letter-spacing:-.01em; } .brand small { font-weight:500; color:var(--muted); font-size:13px; } .logo { color:var(--accent); width:26px; height:26px; vertical-align:-6px; margin-right:4px; } .logo .cut { fill:var(--accent-ink); }
.top nav { display:flex; gap:20px; margin-left:auto; } .top nav a { color:var(--muted); text-decoration:none; font-size:14.5px; } .top nav a:hover { color:var(--ink); }
.themebtn { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-size:16px; padding:0; line-height:1; }
[data-theme="dark"] .themebtn .moon, [data-theme="light"] .themebtn .sun { display:none; }
.btn { display:inline-block; padding:12px 20px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; font-weight:700; font-size:15.5px; transition:transform .15s, box-shadow .15s, border-color .15s; }
.btn:hover { transform:translateY(-1px); border-color:var(--accent-t); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 10px 30px -10px var(--glow), 0 0 0 1px var(--glow); }
.btn.small { padding:9px 16px; font-size:14px; }

main { max-width:1180px; margin:0 auto; padding:0 24px 56px; }
section { scroll-margin-top:90px; }
.kicker { font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--accent-t); margin:72px 0 6px; }
h2 { font-size:clamp(26px,3.2vw,38px); line-height:1.1; margin:0 0 20px; letter-spacing:-.025em; font-weight:800; }
h3 { font-size:18px; margin:0 0 6px; letter-spacing:-.01em; }
main > section > h2:first-child { margin-top:56px; }

/* hero */
.hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:44px; align-items:center; padding:74px 0 40px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); border:1px solid var(--line); background:color-mix(in srgb, var(--card) 70%, transparent); border-radius:999px; padding:6px 13px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 var(--glow); animation:pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 var(--glow); } 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
h1 { font-size:clamp(40px,5.6vw,72px); line-height:.98; letter-spacing:-.045em; margin:20px 0 20px; font-weight:800; }
h1 mark { background:var(--accent); color:var(--accent-ink); padding:0 .18em .04em; border-radius:.22em; box-shadow:0 0 60px -6px var(--glow); display:inline-block; transform:rotate(-2deg); }
.sub { font-size:18.5px; color:var(--muted); max-width:560px; margin:0 0 28px; } .sub em { color:var(--ink); font-style:normal; font-weight:700; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
.ledger { position:relative; background:color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:20px; padding:6px 0 0; box-shadow:var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 90px -30px var(--glow); min-width:0; transform:rotate(1.2deg); }
.ledger-head { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; }
.ledger-head .mono { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#feed { list-style:none; margin:0; padding:0; } #feed li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); font-size:14px; }
#feed .what { min-width:0; } #feed .what b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #feed .what span { color:var(--muted); font-size:12.5px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#feed .amt { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--muted); font-size:13px; } #feed .amt small { display:block; text-align:right; font-size:11.5px; }
.toast { padding:12px 16px; background:var(--term); color:var(--term-ink); border-radius:0 0 19px 19px; font-size:13px; } .toast .p { color:var(--term-dim); } .toast .arrowr { color:var(--term-dim); } .toast b { color:var(--term-accent); }

/* stats */
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.stat { background:color-mix(in srgb, var(--card) 80%, transparent); border:1px solid var(--line); border-radius:18px; padding:18px 18px 16px; }
.stat .v { font-size:clamp(34px,4vw,48px); font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; color:var(--accent-t); } .stat .k { color:var(--muted); font-size:14px; margin-top:8px; }
.stat:nth-child(2) .v { color:var(--bad); } .stat:nth-child(3) .v { color:var(--warn); } .stat:nth-child(4) .v { color:var(--ink); }

/* steps + flow */
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .steps.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.step { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; transition:border-color .2s, transform .2s; } .step:hover { border-color:var(--accent-t); transform:translateY(-2px); }
.step p { margin:0; color:var(--muted); font-size:14.5px; }
.step > b { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-size:14px; margin-bottom:14px; font-family:"JetBrains Mono",ui-monospace,monospace; }
.flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.5fr) auto minmax(0,1fr); gap:10px; align-items:center; margin-top:16px; }
.node { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; text-align:center; } .node .who { display:block; font-weight:700; } .node .can { display:block; color:var(--muted); font-size:13.5px; }
.vaultnode { border-color:var(--accent-t); box-shadow:0 0 70px -28px var(--glow); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--card)), var(--card)); }
.asks { margin-top:10px; padding:9px; border:1px dashed color-mix(in srgb, var(--accent-t) 45%, var(--line)); border-radius:12px; background:var(--card2); }
.arrow { color:var(--muted); font-size:12.5px; text-align:center; white-space:nowrap; } .arrow::after { content:"→"; display:block; font-size:22px; line-height:1; color:var(--accent-t); }

/* compare */
.tablewrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:18px; }
table { width:100%; border-collapse:collapse; font-size:14px; } th,td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; } tr:last-child td { border-bottom:0; }
th { color:var(--muted); font-weight:500; white-space:nowrap; } .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.compare td, table.compare th { padding:14px 16px; font-size:15px; } table.compare td:first-child { font-weight:700; width:26%; }
table.compare th:last-child { color:var(--accent-t); font-weight:800; font-size:16px; } table.compare td:last-child, table.compare th:last-child { background:color-mix(in srgb, var(--accent) 7%, transparent); }
td.no { color:var(--muted); } td.no::before { content:"✕ "; color:var(--bad); font-weight:700; } td.yes::before { content:"✓ "; color:var(--ok); font-weight:700; }

/* break it */
.break { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:32px; align-items:center; margin-top:72px; padding:34px; border:1px solid color-mix(in srgb, var(--accent-t) 40%, var(--line)); border-radius:26px;
  background:radial-gradient(520px 300px at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--card); box-shadow:0 0 110px -50px var(--glow); }
.break .kicker { margin-top:0; } .break h2 { font-size:clamp(34px,4.4vw,56px); } .break p { color:var(--muted); margin:0 0 16px; font-size:16.5px; }
.challenge { font-size:14.5px; } .challenge .chip { margin-top:12px; font-size:13px; padding:4px 11px; }
.termwrap { min-width:0; border-radius:16px; overflow:hidden; background:var(--term); border:1px solid var(--term-line); box-shadow:var(--shadow); }
.termbar { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; color:var(--term-dim); font-size:12.5px; border-bottom:1px solid var(--term-line); }
.copy { background:transparent; color:var(--term-ink); border:1px solid var(--term-line); border-radius:8px; padding:3px 10px; font-size:12.5px; cursor:pointer; }
.term { margin:0; background:var(--term); color:var(--term-ink); padding:16px 18px; overflow-x:auto; font-size:13.5px; line-height:1.7; } .term code { font-size:inherit; }
.term.out { border-top:1px solid var(--term-line); font-size:12.5px; line-height:1.55; color:var(--term-ink); } .term .g { color:var(--term-accent); font-weight:600; } .term .c { color:var(--term-dim); }

/* live vault */
.live-head { display:flex; justify-content:space-between; align-items:end; gap:12px; flex-wrap:wrap; }
form { display:flex; gap:6px; margin-bottom:20px; } input { padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); min-width:250px; font:inherit; font-size:14px; }
button { font:inherit; } #pick button, .filters button { padding:8px 13px; border-radius:10px; border:1px solid var(--line); background:var(--ink); color:var(--bg); font-size:14px; cursor:pointer; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; min-width:0; }
.card .k { color:var(--muted); font-size:13px; } .card .v { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; word-break:break-all; }
main > section > h2:only-of-type { margin-top:48px; }
.task { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:10px; overflow-wrap:anywhere; }
.task dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:8px 0 0; font-size:14px; } .task dt { color:var(--muted); } .task dd { margin:0; min-width:0; overflow-wrap:anywhere; }
td.item { max-width:260px; word-break:break-all; } td.why { min-width:260px; color:var(--muted); }
.chip { display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; background:var(--chip); white-space:nowrap; }
.ok { color:var(--ok); } .warn { color:var(--warn); } .bad { color:var(--bad); } .info { color:var(--info); }
.chip.ok { background:var(--ok-bg); } .chip.warn { background:var(--warn-bg); } .chip.bad { background:var(--bad-bg); } .chip.info { background:var(--info-bg); }
.filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; } .filters button { background:var(--card); color:var(--ink); padding:5px 11px; font-size:13px; border-radius:999px; } .filters button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.bar { height:8px; background:var(--chip); border-radius:4px; overflow:hidden; margin:10px 0 6px; } .bar > span { display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--ok)); border-radius:4px; }

/* faq + footer */
details { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:0 18px; margin-bottom:8px; } details[open] { border-color:var(--accent-t); }
summary { cursor:pointer; font-weight:700; padding:16px 0; font-size:16.5px; } details p { margin:0 0 16px; color:var(--muted); max-width:780px; }
footer { text-align:center; color:var(--muted); font-size:13px; padding:26px 16px 36px; border-top:1px solid var(--line); margin-top:30px; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:44px; gap:30px; } .ledger { transform:none; } .steps, .steps.three { grid-template-columns:repeat(2,minmax(0,1fr)); } .break { grid-template-columns:1fr; }
  .top nav { display:none; } .themebtn { margin-left:auto; } .flow { grid-template-columns:1fr; } .arrow::after { content:"↓"; } .top { margin:12px 16px 0; }
}
@media (max-width:700px) {
  table.compare thead { display:none; } table.compare, table.compare tbody, table.compare tr, table.compare td { display:block; width:auto; }
  table.compare tr { padding:14px 16px; border-bottom:1px solid var(--line); } table.compare tr:last-child { border-bottom:0; }
  table.compare td { padding:3px 0; border:0; background:none !important; } table.compare td:first-child { width:auto; margin-bottom:4px; }
  td.no::before { content:"✕ Spending cap: "; } td.yes::before { content:"✓ Almoner: "; }
}
@media (max-width:600px) {
  main { padding:0 16px 36px; } .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .steps, .steps.three { grid-template-columns:1fr; }
  .task dl { grid-template-columns:1fr; } .task dt { margin-top:6px; } input { min-width:0; flex:1; } form { width:100%; } .break { padding:22px 18px; } .actions .btn { width:100%; text-align:center; }
  .brand small { display:none; } .kicker { margin-top:52px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .dot { animation:none; } .btn, .step { transition:none; } }
.nowrap { white-space:nowrap; }
main > section > .kicker + h2, .live-head h2 { margin-top:0; }

/* landing extras */
.fine { color:var(--muted); font-size:13.5px; margin:12px 0 0; }
.cta { text-align:center; margin-top:80px; padding:54px 24px; border:1px solid var(--line); border-radius:26px; background:radial-gradient(600px 260px at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--card); }
.cta h2 { font-size:clamp(32px,4.6vw,58px); margin:0 0 12px; } .cta p { color:var(--muted); max-width:620px; margin:0 auto 24px; font-size:17px; } .cta .actions { justify-content:center; }
.break .actions { margin-bottom:14px; }

/* try it page */
.tryhead { padding:64px 0 26px; max-width:860px; } .h1s { font-size:clamp(34px,4.8vw,60px); }
.keycard { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 0 90px -40px var(--glow); }
.kv { background:var(--card); padding:14px 16px; min-width:0; } .kv.wide { grid-column:1 / -1; order:3; background:var(--term); color:var(--term-ink); }
.kv .k { display:block; color:var(--muted); font-size:12.5px; margin-bottom:3px; } .kv.wide .k { color:var(--term-dim); } .kv .v { display:block; font-weight:700; font-size:17px; overflow-wrap:anywhere; } .kv .v.mono { font-size:13.5px; font-weight:600; } .kv.wide .v { color:var(--term-accent); }
.attacks { display:grid; gap:10px; }
.attack { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; transition:border-color .2s; }
.attack .n { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--chip); font-size:13px; font-weight:600; }
.attack .t b { display:block; font-size:16.5px; } .attack .t > span { color:var(--muted); font-size:14px; } .attack .res { margin-top:8px; font-size:14px; overflow-wrap:anywhere; } .attack .res:empty { display:none; }
.attack.running { border-color:var(--info); } .attack.stopped { border-color:color-mix(in srgb, var(--ok) 55%, var(--line)); } .attack.stopped .n { background:var(--accent); color:var(--accent-ink); } .attack.through { border-color:var(--bad); }
.custom { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:10px; } .custom label { display:grid; gap:4px; font-size:12.5px; color:var(--muted); min-width:0; } .custom label.grow { flex:1 1 260px; } .custom input:not([type=checkbox]) { min-width:0; width:100%; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13px; }
.custom label.check { display:flex; align-items:center; gap:6px; padding-bottom:9px; } .custom button { cursor:pointer; }
.term.result { border-radius:14px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; min-height:54px; }
button.btn { cursor:pointer; }
@media (max-width:700px) { .keycard { grid-template-columns:1fr; } .attack { grid-template-columns:auto minmax(0,1fr); } .attack > button { grid-column:1 / -1; } .custom label { flex:1 1 100%; } }
input[type=checkbox] { min-width:0; width:auto; padding:0; accent-color:var(--accent); }