/* HEX · Grimoire. Tokens from art/tokens.css (Visuals). Gold is the only accent, ember is for burns only,
   parchment cards carry the only shadow, lit runes the only glow. */
:root {
  --ink: #0B0A10; --midnight: #141B33; --midnight-2: #1C2444; --midnight-3: #26305A;
  --parchment: #EFE3C8; --parchment-2: #E2D2AC; --parchment-3: #CDB98C;
  --quill: #2A2118; --quill-soft: #6B5B46;
  --bone: #EFE3C8; --bone-soft: #A69C86;
  --gold: #D9A441; --gold-bright: #F3C96B; --gold-deep: #9C6F1E;
  --ember: #E2552B; --wax: #8E1D2B; --wax-deep: #5C0F19;
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Spectral', Georgia, serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --fs-hero: clamp(44px, 6vw, 84px); --fs-h2: clamp(32px, 4vw, 52px); --fs-h3: 24px; --fs-body: 17px; --fs-small: 14px; --fs-mono: 13px;
  --r-card: 6px; --r-chip: 999px;
  --rule-gold: 1px solid rgba(217,164,65,.45); --rule-gold-soft: 1px solid rgba(217,164,65,.18); --rule-ink: 1px solid rgba(42,33,24,.18);
  --shadow-card: 0 2px 0 var(--parchment-3), 0 12px 24px -12px rgba(0,0,0,.6);
  --glow-rune: 0 0 6px var(--gold-bright), 0 0 18px rgba(243,201,107,.45);
  --ease-ink: cubic-bezier(.2,.7,.2,1);
  --wrap: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--bone); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--ink); overflow-x: hidden; }
h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
p { margin: 0 0 12px; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }
button { font: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .02em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--ink); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.muted { color: var(--bone-soft); }
.gold { color: var(--gold); }
.ember { color: var(--ember); }
svg.rune { width: 24px; height: 24px; color: var(--gold); flex: none; }
.empty { color: var(--bone-soft); padding: 28px; text-align: center; border: var(--rule-gold-soft); border-radius: var(--r-card); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .05em; text-transform: uppercase;
  padding: 12px 22px; min-height: 46px; border-radius: var(--r-card); border: 1px solid var(--gold-deep); cursor: pointer; transition: transform .15s var(--ease-ink), background .15s, box-shadow .15s; text-decoration: none; }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 3px 0 var(--gold-deep); }
.btn-gold:hover { background: var(--gold-bright); color: var(--ink); }
.btn-gold:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-deep); }
.btn-ghost { background: transparent; color: var(--gold); border-color: rgba(217,164,65,.5); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn-sm { font-size: 15px; padding: 8px 14px; min-height: 38px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: transparent; border: var(--rule-gold-soft); color: var(--bone-soft); cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .waves { display: none; } .icon-btn[aria-pressed="true"] .waves { display: inline; } .icon-btn[aria-pressed="true"] .mute { display: none; }
.icon-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-chip); border: var(--rule-gold); color: var(--gold); white-space: nowrap; }
.chip-ember { color: var(--ember); border-color: rgba(226,85,43,.5); }
.chip-ink { color: var(--quill-soft); border-color: rgba(42,33,24,.3); }
.chip-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: var(--glow-rune); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* parchment card */
.card { background: var(--parchment); color: var(--quill); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 24px;
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.35), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(120,90,40,.12), transparent 50%); }
.card a { color: #6E4C10; text-decoration: underline; text-underline-offset: 2px; }
.card a.btn, .card a.coin-card { text-decoration: none; }
.card .muted { color: var(--quill-soft); }
.panel { background: var(--midnight); border: var(--rule-gold-soft); border-radius: var(--r-card); padding: 24px; }

/* sim banner */
.simbar { background: repeating-linear-gradient(135deg, #2b2210 0 14px, #251c0c 14px 28px); color: var(--gold-bright); text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; padding: 7px 16px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(11,10,16,.88); backdrop-filter: blur(10px); border-bottom: var(--rule-gold-soft); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 64px; width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--bone); font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .02em; }
.logo .mark { width: 24px; height: 24px; color: var(--gold); }
.logo:hover { color: var(--bone); }
.logo:hover .mark { animation: spinhex 1.2s var(--ease-ink); }
@keyframes spinhex { to { transform: rotate(360deg); } }
.links { display: flex; gap: 22px; margin-right: auto; }
.links a { color: var(--bone-soft); font-family: var(--font-display); font-size: 19px; font-weight: 600; padding: 4px 0; border-bottom: 1px solid transparent; }
.links a:hover, .links a.on { color: var(--bone); border-bottom-color: var(--gold); }
.nav-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.burger { display: none; width: 40px; height: 40px; background: none; border: var(--rule-gold-soft); border-radius: 6px; cursor: pointer; padding: 11px 9px; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 2px; background: var(--gold); border-radius: 2px; }

/* ticker */
.ticker { border-top: var(--rule-gold-soft); overflow: hidden; height: 34px; position: relative; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: flex; gap: 34px; align-items: center; height: 34px; white-space: nowrap; width: max-content; animation: tick 70s linear infinite; padding-left: 16px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.tk { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12.5px; color: var(--bone-soft); }
.tk b { color: var(--gold); font-weight: 500; }
.tk .rune { width: 15px; height: 15px; }
.tk.burn b, .tk.burn .rune { color: var(--ember); }
.tk.fresh { animation: slidein .6s var(--ease-ink); }
@keyframes slidein { from { opacity: 0; transform: translateY(-10px); } }

/* sections */
section { padding: 72px 0; }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-h h2 { font-size: var(--fs-h2); }
.sec-h p { color: var(--bone-soft); max-width: 560px; margin: 8px 0 0; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-ink), transform .8s var(--ease-ink); }
.reveal.in { opacity: 1; transform: none; }

/* official coin box */
.official { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding-top: 22px; }
.ca-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--midnight); border: var(--rule-gold); border-radius: var(--r-chip); padding: 6px 8px 6px 14px; font-family: var(--font-mono); font-size: 13px; color: var(--bone); max-width: 100%; }
.ca-pill .lbl { color: var(--gold); letter-spacing: .1em; font-size: 11px; }
.ca-pill .addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ca-pill button { background: var(--gold); color: var(--ink); border: 0; border-radius: var(--r-chip); padding: 4px 10px; font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.stat-pill { display: inline-flex; gap: 8px; align-items: baseline; border: var(--rule-gold-soft); border-radius: var(--r-chip); padding: 6px 14px; font-family: var(--font-mono); font-size: 13px; color: var(--bone-soft); }
.stat-pill b { color: var(--bone); font-weight: 500; }

/* hero */
.hero { position: relative; padding: 28px 0 56px; text-align: center; background: radial-gradient(ellipse 70% 55% at 50% 38%, var(--midnight) 0%, var(--ink) 72%); overflow: hidden; }
.hero .stars { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 10% 20%, var(--bone-soft), transparent), radial-gradient(1px 1px at 80% 30%, var(--bone-soft), transparent), radial-gradient(1px 1px at 30% 80%, var(--bone-soft), transparent), radial-gradient(1px 1px at 65% 70%, var(--gold), transparent), radial-gradient(1px 1px at 90% 85%, var(--bone-soft), transparent), radial-gradient(1px 1px at 45% 15%, var(--gold), transparent); }
.hero h1 { font-size: var(--fs-hero); margin: 14px 0 0; }
.hero h1 em { color: var(--gold); font-style: italic; display: block; }
.hero .sub { color: var(--bone-soft); max-width: 600px; margin: 18px auto 0; font-size: 18px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 24px; text-align: left; }
.trust { display: flex; justify-content: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 26px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-soft); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust span::before { content: '◈'; color: var(--gold); }

/* summoning circle */
.circle-wrap { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin-inline: auto; perspective: 900px; }
.circle-tilt { width: 100%; height: 100%; transition: transform .4s var(--ease-ink); transform-style: preserve-3d; }
svg.circle { width: 100%; height: 100%; overflow: visible; }
.circle .ring { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .55; }
.circle .ring.dash { stroke-dasharray: 3 5; opacity: .35; }
.circle .spin { transform-origin: 200px 200px; animation: spin 90s linear infinite; }
.circle .spin.rev { animation-direction: reverse; animation-duration: 140s; }
@keyframes spin { to { transform: rotate(360deg); } }
.circle .glyph-ring text { font-family: var(--font-mono); font-size: 9px; fill: var(--gold); opacity: .45; letter-spacing: .3em; }
.circle .slot { fill: var(--ink); stroke: var(--gold); stroke-width: 1; opacity: .5; transition: opacity .4s, stroke .3s; }
.circle .slot.on { opacity: 1; }
.circle .rune-el { color: var(--gold); opacity: 0; transition: opacity .5s, transform .25s var(--ease-ink); cursor: pointer; }
.circle .rune-el.on { opacity: 1; }
.circle .rune-el.hint { opacity: .45; }
.circle .rune-el.burn { color: var(--ember); }
.circle .rune-el:hover, .circle .rune-el:focus { transform: scale(1.22); color: var(--gold-bright); filter: drop-shadow(0 0 5px var(--gold-bright)); outline: none; }
.circle .rune-el.lit { color: var(--gold-bright); filter: drop-shadow(0 0 6px var(--gold-bright)); animation: pulse .9s var(--ease-ink); }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.circle .core { fill: var(--gold); opacity: .9; }
.circle .core.flash { animation: coreflash .8s var(--ease-ink); }
@keyframes coreflash { 40% { r: 11; fill: var(--gold-bright); } }
.circle .beam { stroke: var(--gold-bright); stroke-width: 1.2; opacity: 0; }
.circle .beam.on { animation: beam .9s var(--ease-ink) forwards; }
@keyframes beam { 0% { opacity: 0; stroke-dasharray: 0 400; } 30% { opacity: 1; } 100% { opacity: 0; stroke-dasharray: 400 0; } }
.fly { position: absolute; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--bone); pointer-events: none; z-index: 5; animation: fly 1.1s var(--ease-ink) forwards; }
@keyframes fly { 0% { opacity: 1; transform: translate(0,0) scale(1); } 60% { opacity: 1; color: var(--gold-bright); text-shadow: 0 0 8px var(--gold-bright); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); color: var(--gold); } }
.quill-perch { position: absolute; right: -2%; top: -4%; width: 32%; pointer-events: none; z-index: 3; }
.quill-perch svg { width: 100%; height: auto; overflow: visible; }
.q-body { animation: breathe 4s ease-in-out infinite; transform-origin: 100px 160px; }
@keyframes breathe { 50% { transform: scaleY(1.025); } }
.q-head { transform-origin: 118px 84px; transition: transform .25s var(--ease-ink); }
.q-eye-lid { transform-origin: 136px 66px; animation: blinklid 6s infinite; transform: scaleY(0); }
@keyframes blinklid { 0%, 95%, 100% { transform: scaleY(0); } 97% { transform: scaleY(1); } }
.q-feather { transform-origin: 72px 158px; transition: transform .3s var(--ease-ink); }
.q-feather.dip { animation: dip .5s var(--ease-ink); }
@keyframes dip { 50% { transform: rotate(-14deg) translateY(4px); } }

/* spell box */
.spellbox { position: relative; }
.spellbox label { display: block; margin-bottom: 8px; }
.spell-in { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--parchment-3); color: var(--quill); font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.3; padding: 6px 0 12px; outline: none; resize: none; min-height: 72px; }
.spell-in::placeholder { color: var(--quill-soft); opacity: .8; }
.spellbox .btn { width: 100%; margin-top: 16px; }
.try { display: flex; gap: 10px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.try::-webkit-scrollbar { display: none; }
.try button { flex: none; background: transparent; border: var(--rule-gold); color: var(--bone); border-radius: var(--r-chip); padding: 8px 14px; font-family: var(--font-display); font-style: italic; font-size: 16px; cursor: pointer; white-space: nowrap; }
.try button:hover { border-color: var(--gold); color: var(--gold-bright); }
.alt-ways { margin-top: 14px; font-size: 15px; color: var(--bone-soft); }
.quill-says { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-style: italic; color: var(--quill-soft); font-size: 15px; min-height: 22px; }
.quill-says svg { width: 26px; height: 26px; flex: none; }

/* facts strip */
.facts { display: grid; grid-template-columns: repeat(5, 1fr); border: var(--rule-gold-soft); border-radius: var(--r-card); background: var(--midnight); overflow: hidden; }
.fact { padding: 20px 22px; border-right: var(--rule-gold-soft); min-width: 0; }
.fact:last-child { border-right: 0; }
.fact .v { font-family: var(--font-mono); font-size: 24px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact .k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-soft); margin-top: 4px; }
.burned { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; margin-top: 18px; padding: 22px 26px; border: var(--rule-gold-soft); border-radius: var(--r-card); }
.burned .v { font-family: var(--font-mono); font-size: 34px; color: var(--ember); }
.burned p { margin: 0; color: var(--bone-soft); }

/* coin cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.coin-card { position: relative; display: flex; flex-direction: column; gap: 10px; color: var(--quill); padding: 22px; transition: transform .25s var(--ease-ink); min-width: 0; }
.coin-card:hover { transform: translateY(-3px); color: var(--quill); }
.coin-card .top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.coin-card .ava { width: 46px; height: 46px; border-radius: 50%; flex: none; object-fit: cover; background: var(--midnight); border: 1px solid var(--parchment-3); }
.coin-card h3 { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-card .tick { font-family: var(--font-mono); font-size: 12px; color: var(--quill-soft); }
.coin-card .spell-q { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--quill); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.coin-card .did { font-size: 14px; color: var(--quill-soft); margin: 0; }
.coin-card .meta { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--quill-soft); margin-top: auto; padding-top: 8px; border-top: var(--rule-ink); flex-wrap: wrap; }
.coin-card .meta b { color: var(--quill); font-weight: 500; }
.coin-card .tab { position: absolute; top: -11px; right: 16px; background: var(--gold); color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-chip); box-shadow: 0 2px 0 var(--gold-deep); }
.coin-card .tab.pop { animation: tabpop .7s var(--ease-ink); }
@keyframes tabpop { 30% { transform: translateY(-6px) scale(1.12); background: var(--gold-bright); } }
.rune-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rune-row .rune { width: 22px; height: 22px; color: var(--quill); }
.rune-row .rune.burn { color: var(--ember); }
.rune-row .rune.lit { color: var(--gold-deep); filter: drop-shadow(0 0 6px var(--gold-bright)); animation: pulse .9s var(--ease-ink); }
.rune-row .arrow { color: var(--quill-soft); font-size: 13px; }
.rune-row .sep { width: 1px; height: 16px; background: var(--parchment-3); margin: 0 4px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badges .chip { font-size: 10.5px; padding: 2px 8px; }
.r-hover { cursor: help; transition: transform .2s var(--ease-ink), filter .2s; }
.r-hover:hover, .r-hover:focus { transform: translateY(-2px) scale(1.15); filter: drop-shadow(0 0 4px var(--gold-bright)); outline: none; }

/* tooltip */
.tip { position: fixed; z-index: 60; max-width: 260px; background: var(--parchment); color: var(--quill); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 10px 12px; font-size: 14px; line-height: 1.4; pointer-events: none; }
.tip b { font-family: var(--font-display); font-size: 17px; display: block; }
.tip small { display: block; margin-top: 4px; color: var(--quill-soft); font-family: var(--font-mono); font-size: 11px; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.step { padding: 26px; border: var(--rule-gold-soft); border-radius: var(--r-card); background: linear-gradient(180deg, var(--midnight), transparent); min-width: 0; }
.step .num { font-family: var(--font-display); font-size: 44px; color: var(--gold); line-height: 1; }
.step h3 { font-size: 30px; margin: 8px 0 8px; }
.step p { color: var(--bone-soft); margin: 0; }
.step .demo { margin-top: 18px; }
.step blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--bone); border-left: 2px solid var(--gold); padding-left: 12px; }
.mini-runes { display: grid; gap: 8px; }
.mini-rune { display: flex; gap: 10px; align-items: center; background: var(--parchment); color: var(--quill); padding: 8px 10px; border-radius: var(--r-card); font-size: 14px; box-shadow: var(--shadow-card); }
.mini-rune .rune { color: var(--quill); width: 20px; height: 20px; }
.mini-rune .rune.burn { color: var(--ember); }
.live-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; }
.live-list li { display: flex; gap: 8px; align-items: center; color: var(--bone); }
.live-list li::before { content: '✓'; color: var(--gold); }
.nowsoon { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.nowsoon .panel h3 { font-size: 26px; margin-bottom: 12px; }
.nowsoon ul { margin: 0; padding-left: 18px; color: var(--bone-soft); }
.nowsoon li { margin-bottom: 6px; }
.nowsoon li b { color: var(--bone); font-weight: 500; }

/* rune grid */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rcell { padding: 22px; border: var(--rule-gold-soft); border-radius: var(--r-card); display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; cursor: pointer; transition: border-color .2s, background .2s; text-align: left; background: transparent; color: var(--bone); }
.rcell:hover, .rcell:focus-visible { border-color: var(--gold); background: rgba(20,27,51,.6); }
.rcell svg.rune { width: 52px; height: 52px; }
.rcell svg.rune.burn { color: var(--ember); }
.rcell h3 { font-size: 24px; margin-bottom: 4px; }
.rcell p { color: var(--bone-soft); margin: 0; font-size: 15px; }
.rcell .draw use { stroke-dasharray: 90; stroke-dashoffset: 90; }
.rcell.in .draw use { animation: draw 1.4s var(--ease-ink) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* sealed / flywheel */
.sealed { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.sealed .card { position: relative; }
.sealed h2 { font-size: var(--fs-h2); margin-bottom: 14px; }
.lock-list { display: grid; gap: 8px; margin: 14px 0 0; }
.lock-list div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: var(--rule-ink); border-radius: var(--r-card); font-family: var(--font-display); font-size: 18px; }
.lock-list svg { width: 22px; height: 22px; color: var(--quill); flex: none; }
.seal { position: absolute; right: -18px; bottom: -28px; width: 150px; height: 150px; transform: rotate(-10deg); }
.seal.stamp { animation: stamp .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stamp { 0% { transform: rotate(-10deg) scale(2.2); opacity: 0; } 45% { opacity: 1; } 70% { transform: rotate(-10deg) scale(.94); } 100% { transform: rotate(-10deg) scale(1); } }
.shake { animation: shake .4s .3s; }
@keyframes shake { 20% { transform: translate(1px,1px); } 40% { transform: translate(-1px,0); } 60% { transform: translate(1px,-1px); } 80% { transform: translate(0,1px); } }
.flywheel { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 30px; border: var(--rule-gold); border-radius: var(--r-card); background: radial-gradient(ellipse at 0% 0%, rgba(217,164,65,.08), transparent 60%); }
.flywheel h2 { font-size: 40px; margin: 6px 0 10px; }
.flywheel p { color: var(--bone-soft); margin: 0; max-width: 640px; }
.cta { text-align: center; padding: 64px 24px; border: var(--rule-gold-soft); border-radius: var(--r-card); }
.cta h2 { font-size: var(--fs-h2); margin-bottom: 20px; }

/* footer */
.foot { border-top: var(--rule-gold-soft); margin-top: 40px; padding: 44px 0 24px; }
.foot-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.foot-brand p { color: var(--bone-soft); font-size: 14px; max-width: 420px; margin-top: 12px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.foot-cols h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 400; margin-bottom: 10px; }
.foot-cols a { display: block; color: var(--bone-soft); font-size: 15px; padding: 3px 0; }
.foot-cols a:hover { color: var(--bone); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: min(var(--wrap), 100% - 32px); margin: 32px auto 0; padding-top: 16px; border-top: var(--rule-gold-soft); font-family: var(--font-mono); font-size: 12px; color: var(--bone-soft); }
.ca-foot { overflow-wrap: anywhere; }

/* page header */
.page-h { padding: 48px 0 8px; }
.page-h h1 { font-size: clamp(40px, 5.5vw, 72px); }
.page-h p { color: var(--bone-soft); max-width: 640px; margin-top: 12px; font-size: 18px; }

/* cast page */
.cast { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; align-items: start; padding: 24px 0 72px; }
.tabs { display: flex; gap: 4px; border-bottom: var(--rule-gold-soft); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--bone-soft); font-family: var(--font-display); font-size: 20px; font-weight: 600; padding: 10px 14px; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--bone); border-bottom-color: var(--gold); }
.recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.recipe { text-align: left; cursor: pointer; border: 0; font: inherit; padding: 18px; }
.recipe h3 { font-size: 22px; margin-bottom: 6px; }
.recipe p { font-family: var(--font-display); font-style: italic; font-size: 17px; margin: 8px 0 0; }
.recipe:hover { transform: translateY(-2px); }
.recipe[aria-pressed="true"] { outline: 2px solid var(--gold); }

/* rune builder */
.builder { display: grid; gap: 16px; }
.rune-block { position: relative; background: var(--parchment); color: var(--quill); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 0; overflow: hidden; }
.rb-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--parchment-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--quill-soft); }
.rb-head .x { margin-left: auto; }
.rb-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: var(--rule-ink); }
.rb-row.when { background: rgba(217,164,65,.12); }
.rb-row .rune { color: var(--quill); width: 26px; height: 26px; }
.rb-row .rune.burn { color: var(--ember); }
.rb-row.flash { animation: rowflash 1s var(--ease-ink); }
@keyframes rowflash { 30% { background: rgba(243,201,107,.5); } }
.rb-fields { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-family: var(--font-display); font-size: 18px; min-width: 0; }
.rb-fields select, .rb-fields input { font-family: var(--font-mono); font-size: 13px; background: #fff8e8; border: 1px solid var(--parchment-3); color: var(--quill); border-radius: var(--r-chip); padding: 5px 10px; min-height: 32px; max-width: 100%; }
.rb-fields input[type=number] { width: 92px; }
.rb-fields input.wide { width: 100%; min-width: 0; }
.x { background: none; border: 0; color: var(--quill-soft); cursor: pointer; font-size: 18px; width: 32px; height: 32px; border-radius: 50%; }
.x:hover { background: rgba(42,33,24,.08); color: var(--wax); }
.rb-add { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-top: var(--rule-ink); }
.rb-add button, .add-rune { background: transparent; border: 1px dashed var(--quill-soft); color: var(--quill-soft); border-radius: var(--r-chip); padding: 5px 12px; font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.add-rune { border-color: var(--gold); color: var(--gold); padding: 10px; border-radius: var(--r-card); width: 100%; }
.rb-add button:hover { color: var(--quill); border-color: var(--quill); }

/* preview + launch */
.side { position: sticky; top: 120px; display: grid; gap: 18px; }
.preview h3 { font-size: 26px; margin-bottom: 10px; }
.preview ol { margin: 0; padding-left: 20px; font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.4; }
.preview ol li { margin-bottom: 8px; }
.hash { font-family: var(--font-mono); font-size: 11.5px; color: var(--quill-soft); overflow-wrap: anywhere; margin-top: 12px; }
.err { color: var(--wax); font-size: 15px; margin-top: 10px; }
.panel .err { color: #ff8f7a; }
.ok-src { font-family: var(--font-mono); font-size: 11px; color: var(--quill-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.field input, .field textarea { background: var(--ink); border: var(--rule-gold-soft); color: var(--bone); border-radius: var(--r-card); padding: 10px 12px; font-family: var(--font-body); font-size: 16px; width: 100%; }
.field input:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.img-drop { display: flex; gap: 12px; align-items: center; border: 1px dashed rgba(217,164,65,.5); border-radius: var(--r-card); padding: 10px; cursor: pointer; }
.img-drop img, .img-drop .ph { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: var(--midnight-2); flex: none; display: grid; place-items: center; color: var(--gold); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--bone); margin: 14px 0 0; }
.check input { margin-top: 5px; accent-color: var(--gold); width: 18px; height: 18px; flex: none; }
.costs { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 14px; }
.costs td { padding: 6px 0; border-bottom: var(--rule-gold-soft); color: var(--bone-soft); }
.costs td:last-child { text-align: right; font-family: var(--font-mono); color: var(--bone); }
.launch-box { position: relative; }
.launch-box .seal { right: 8px; bottom: auto; top: -30px; width: 120px; height: 120px; opacity: 0; pointer-events: none; }
.launch-box .seal.stamp { opacity: 1; }
.progress { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 15px; }
.progress li { color: var(--bone-soft); display: flex; gap: 8px; align-items: center; }
.progress li::before { content: '○'; color: var(--bone-soft); width: 14px; }
.progress li.doing { color: var(--bone); } .progress li.doing::before { content: '◌'; color: var(--gold); animation: spinhex 1s linear infinite; display: inline-block; }
.progress li.done { color: var(--bone); } .progress li.done::before { content: '✓'; color: var(--gold); }
.progress li.fail { color: #ff8f7a; } .progress li.fail::before { content: '✕'; color: #ff8f7a; }

/* explore */
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.filters input[type=search] { background: var(--midnight); border: var(--rule-gold-soft); color: var(--bone); border-radius: var(--r-chip); padding: 9px 16px; font-family: var(--font-body); font-size: 15px; min-width: 220px; flex: 1 1 220px; max-width: 360px; }
.filters .chip { cursor: pointer; background: transparent; padding: 7px 12px; }
.filters .chip[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.filters select { background: var(--midnight); border: var(--rule-gold-soft); color: var(--bone); border-radius: var(--r-chip); padding: 8px 12px; font-family: var(--font-mono); font-size: 12px; }

/* coin page */
.coin-h { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 40px 0 20px; }
.coin-h .ava { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold); background: var(--midnight); }
.coin-h h1 { font-size: clamp(36px, 5vw, 60px); }
.coin-h .sub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: var(--rule-gold-soft); border-radius: var(--r-card); background: var(--midnight); margin-bottom: 26px; }
.kv > div { padding: 16px 18px; border-right: var(--rule-gold-soft); min-width: 0; }
.kv > div:last-child { border-right: 0; }
.kv .v { font-family: var(--font-mono); font-size: 20px; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-soft); }
.coin-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 26px; align-items: start; padding-bottom: 60px; }
.spell-card { position: relative; }
.spell-card h2 { font-size: 30px; margin-bottom: 14px; padding-right: 96px; }
.proof { margin-top: 16px; display: grid; gap: 6px; font-size: 14px; }
.proof div { display: flex; justify-content: space-between; gap: 12px; border-bottom: var(--rule-ink); padding-bottom: 6px; min-width: 0; }
.proof span:last-child { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; text-align: right; min-width: 0; }
.spell-card .seal { position: absolute; right: -10px; top: -34px; bottom: auto; width: 110px; height: 110px; }
.runs { display: grid; gap: 12px; }
.run { border: var(--rule-gold-soft); border-radius: var(--r-card); padding: 14px 16px; background: var(--midnight); }
.run.fresh { animation: runin .8s var(--ease-ink); }
@keyframes runin { from { background: var(--midnight-3); } }
.run-h { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--bone-soft); flex-wrap: wrap; }
.run-h b { color: var(--bone); font-weight: 500; }
.st { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 8px; border-radius: var(--r-chip); border: 1px solid; }
.st.done { color: var(--gold); } .st.partial { color: var(--gold-bright); } .st.skipped { color: var(--bone-soft); } .st.failed { color: #ff8f7a; }
.steps-l { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.steps-l li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 14.5px; color: var(--bone); }
.steps-l li .rune { width: 18px; height: 18px; }
.steps-l .note { display: block; color: var(--bone-soft); font-size: 13px; }
.steps-l .txs a { font-family: var(--font-mono); font-size: 11.5px; margin-right: 8px; }
.trades { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.trades td { padding: 6px 4px; border-bottom: var(--rule-gold-soft); color: var(--bone-soft); }
.trades .b { color: var(--gold); } .trades .s { color: var(--bone); }

/* docs */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 24px 0 72px; }
.toc { position: sticky; top: 120px; align-self: start; display: grid; gap: 4px; }
.toc a { color: var(--bone-soft); font-size: 15px; padding: 4px 0 4px 12px; border-left: 1px solid rgba(217,164,65,.2); }
.toc a:hover { color: var(--bone); border-left-color: var(--gold); }
.doc h2 { font-size: 38px; margin: 48px 0 14px; scroll-margin-top: 120px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 24px; margin: 24px 0 8px; }
.doc p, .doc li { color: var(--bone-soft); }
.doc p b, .doc li b { color: var(--bone); font-weight: 500; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 15px; }
.doc th { text-align: left; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 400; padding: 8px; border-bottom: var(--rule-gold); }
.doc td { padding: 9px 8px; border-bottom: var(--rule-gold-soft); color: var(--bone-soft); vertical-align: top; }
.doc td:first-child { color: var(--bone); }
.doc code { font-family: var(--font-mono); font-size: 13px; color: var(--gold-bright); overflow-wrap: anywhere; }
.doc details { border: var(--rule-gold-soft); border-radius: var(--r-card); padding: 12px 16px; margin-bottom: 10px; }
.doc summary { cursor: pointer; font-family: var(--font-display); font-size: 20px; color: var(--bone); }
.doc details p { margin: 10px 0 0; }
.callout { border-left: 2px solid var(--gold); padding: 10px 16px; background: rgba(20,27,51,.6); border-radius: 0 var(--r-card) var(--r-card) 0; margin: 14px 0; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; background: var(--parchment); color: var(--quill); padding: 10px 16px; border-radius: var(--r-card); box-shadow: var(--shadow-card); font-size: 15px; z-index: 70; transition: all .3s var(--ease-ink); pointer-events: none; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* responsive */
@media (max-width: 980px) {
  .hero-grid, .cast, .coin-grid, .sealed { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .cards, .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .fact:nth-child(3) { border-right: 0; }
  .fact:nth-child(n+4) { border-top: var(--rule-gold-soft); }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--ink); border-bottom: var(--rule-gold-soft); padding: 8px 16px; }
  .links.open { display: flex; }
  .links a { padding: 12px 0; font-size: 22px; border-bottom: var(--rule-gold-soft); }
  .burger { display: flex; }
  .nav-r .btn { display: none; }
  .nav-in { gap: 12px; }
  section { padding: 52px 0; }
  .cards, .rgrid, .steps, .recipes, .nowsoon { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact { border-right: var(--rule-gold-soft) !important; border-top: var(--rule-gold-soft); }
  .fact:nth-child(-n+2) { border-top: 0; }
  .fact:nth-child(2n) { border-right: 0 !important; }
  .fact:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0 !important; }
  .fact .v { font-size: 20px; }
  .burned { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .flywheel { grid-template-columns: minmax(0, 1fr); }
  .coin-h { grid-template-columns: auto minmax(0, 1fr); }
  .coin-h > :last-child { grid-column: 1 / -1; }
  .coin-h .ava { width: 64px; height: 64px; }
  .kv { grid-template-columns: 1fr 1fr; }
  .kv > div:nth-child(2) { border-right: 0; }
  .kv > div:nth-child(n+3) { border-top: var(--rule-gold-soft); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .circle-wrap { width: min(300px, 82vw); }
  .hero { padding-top: 26px; }
  .hero .sub { font-size: 16px; }
  .spell-in { font-size: 20px; }
  .seal { width: 110px; height: 110px; right: -6px; bottom: -22px; }
  .rb-row { grid-template-columns: 26px minmax(0, 1fr) auto; padding: 10px; }
  .toc { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ticker-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}