/* Flying Donkey site styles */
:root{padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none !important}

:root{
  /* Layout: a forge hall at night. One centered column of chamfered iron plates; embers and torchlight in the hero, a rune dial beside the headline, ledgers for lists. Single deliberate dark look. */
  color-scheme: dark;
  --bg:#0c0a09; --bg-2:#130f0c; --plate:#18130f; --plate-2:#1f1813;
  --line:#33281f; --line-2:#56422f;
  --fg:#ecdfc7; --fg-dim:#ab9b88; --fg-faint:#776959;
  --ember:#e2772e; --ember-hot:#ffb866; --ember-deep:#8a3712; --ink:#1a0d05;
  --blood:#a32424; --blood-hot:#e0574b; --frost:#8cc3d4; --aurora:#74d6a6; --twitch:#a970ff;
  --f-display:"Grenze Gotisch", "UnifrakturMaguntia", Georgia, serif;
  --f-body:"Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-rune:"Noto Sans Runic", "Segoe UI Historic", serif;
  --gut:clamp(16px, 4vw, 40px);
  --wrap:1200px;
  --step-1:1.3rem; --step-3:clamp(2.4rem, 5.4vw, 4rem); --step-4:clamp(2.7rem, 8.4vw, 7.2rem);
}
html{scroll-behavior:smooth}
body{background:radial-gradient(1100px 620px at 85% -8%, rgba(226,119,46,.07), transparent 62%), var(--bg); color:var(--fg); font-family:var(--f-body); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:45; background:var(--bg)}
::selection{background:var(--ember); color:var(--ink)}
a{color:var(--ember-hot)}
:focus-visible{outline:2px solid var(--ember-hot); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
#fd-root{position:relative; z-index:1}
.wrap{max-width:calc(var(--wrap) + 2 * var(--gut)); margin-inline:auto; padding-left:max(var(--gut), env(safe-area-inset-left, 0px)); padding-right:max(var(--gut), env(safe-area-inset-right, 0px)); box-sizing:border-box}
.fill{position:absolute; inset:0; width:100%; height:100%; display:block}
.rn,.r{font-family:var(--f-rune); font-weight:400; letter-spacing:0}
.lbl{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); margin:0}

/* atmosphere */
.torch{position:fixed; left:0; top:0; width:560px; height:560px; margin:-280px 0 0 -280px; border-radius:50%; background:radial-gradient(circle, rgba(226,119,46,.10), rgba(226,119,46,.03) 40%, transparent 65%); pointer-events:none; z-index:0; will-change:transform}
.fx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:80}
.grain{position:fixed; inset:0; pointer-events:none; z-index:79; opacity:.06; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* header */
.head{position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; background:rgba(12,10,9,.82); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--line)}
.head .wrap{display:flex; align-items:center; gap:20px; min-height:64px}
.brand{white-space:nowrap; display:inline-flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-family:var(--f-display); font-size:1.6rem; font-weight:700; line-height:1}
.logo{width:28px; height:38px; flex:none}
.logo .lg-shield{fill:var(--bg-2); stroke:var(--ember); stroke-width:5}
.logo .lg-rune{font-family:var(--f-rune); font-size:50px; fill:var(--ember-hot)}
.nav{display:flex; gap:2px; margin-left:auto; align-items:center}
.nav a{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); text-decoration:none; padding:10px 11px; position:relative; white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--fg)}
.nav a:not(.btn)::after{content:""; position:absolute; left:11px; right:11px; bottom:4px; height:1px; background:var(--ember); transform:scaleX(0); transform-origin:left; transition:transform .25s}
.nav a:not(.btn):hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav .btn{margin-left:10px}
.live-flag{white-space:nowrap; flex:none; display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg); text-decoration:none; padding:6px 10px; box-shadow:inset 0 0 0 1px var(--blood-hot); background:rgba(163,36,36,.18)}
.live-flag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--blood-hot); box-shadow:0 0 10px var(--blood-hot); animation:pulse 1.6s ease-in-out infinite}
.menu-btn{display:none; margin-left:auto; background:none; border:0; padding:10px; cursor:pointer; flex-direction:column; gap:5px}
.menu-btn span{display:block; width:22px; height:2px; background:var(--fg)}
.progress{position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; pointer-events:none}
.progress i{display:block; height:100%; background:linear-gradient(90deg, var(--ember-deep), var(--ember), var(--ember-hot)); transform-origin:left; transform:scaleX(0)}
@media (max-width:960px){
  .menu-btn{display:inline-flex}
  .nav{position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; background:var(--bg-2); border-bottom:1px solid var(--line); padding:8px max(var(--gut), env(safe-area-inset-right, 0px)) 18px max(var(--gut), env(safe-area-inset-left, 0px))}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:14px 4px; font-size:.8rem}
  .nav a:not(.btn)::after{left:4px; right:auto; width:40px}
  .nav .btn{margin:10px 0 0; justify-content:center}
  .head .live-flag{margin-left:auto}
  .head .live-flag + .menu-btn{margin-left:8px}
}

/* buttons */
.btn{--c:10px; display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:14px 22px; border:0; cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.2,1), filter .2s, color .2s, box-shadow .2s; white-space:nowrap}
.btn.primary{background:linear-gradient(180deg, var(--ember-hot), var(--ember)); color:var(--ink); clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c))}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{color:var(--fg); background:transparent; box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ember); color:var(--ember-hot)}
.btn.sm{padding:10px 14px; font-size:.68rem; --c:8px}
.btn.is-off,.btn.is-off:hover{background:transparent; clip-path:none; color:var(--fg-dim); box-shadow:inset 0 0 0 1px var(--line); cursor:default; filter:none; transform:none}
.btn .arr{font-family:var(--f-body); font-size:1rem; letter-spacing:0}
.btn.twitch{background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1px var(--twitch)}
.btn.twitch:hover{background:rgba(169,112,255,.14)}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* plates (cards) */
.plate{--c:16px; position:relative; background:var(--line); padding:1px; clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s; transform-style:preserve-3d}
.plate:hover,.plate:focus-within{background:linear-gradient(135deg, var(--ember), var(--line-2) 35%, var(--line) 65%, var(--ember-hot))}
.plate-in{position:relative; height:100%; box-sizing:border-box; background:var(--plate); clip-path:inherit; display:flex; flex-direction:column; overflow:hidden}
.plate-in::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255,184,102,.10), transparent 60%); opacity:0; transition:opacity .35s}
.plate:hover .plate-in::after{opacity:1}

/* hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 60% at 50% 115%, rgba(226,119,46,.2), transparent 70%), linear-gradient(180deg, transparent 70%, var(--bg))}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:40px; align-items:center; padding-block:clamp(64px, 10vw, 128px) clamp(56px, 8vw, 104px)}
.eyebrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim); margin:0}
.eyebrow .rn{color:var(--ember); font-size:1.05rem}
h1.display{font-family:var(--f-display); font-weight:700; font-size:var(--step-4); line-height:.9; margin:18px 0 26px; text-wrap:balance; min-height:1.8em}
h1 .line{display:block}
.hot{background:linear-gradient(180deg, var(--ember-hot) 10%, var(--ember) 55%, var(--ember-deep)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:var(--step-1); color:var(--fg-dim); max-width:38ch; line-height:1.5; margin:0}
.hero-art{justify-self:center; width:100%; max-width:440px; will-change:transform}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr); gap:8px} .hero-art{max-width:250px} h1.display{min-height:0}}
.sigil{width:100%; height:auto; display:block; overflow:visible}
.sg-line{fill:none; stroke:var(--line-2); stroke-width:1}
.sg-line.dim{stroke:var(--line)}
.sg-runes{font-family:var(--f-rune); font-size:17px; fill:var(--ember); opacity:.75}
.sg-tick{stroke:var(--line-2); stroke-width:1.2}
.sg-tick.maj{stroke:var(--ember); stroke-width:1.6}
.sg-spin{animation:spin 90s linear infinite; transform-origin:0 0}
.sg-rev{animation:spin 140s linear infinite reverse; transform-origin:0 0}
.sg-orbit{animation:spin 14s linear infinite; transform-origin:0 0}
.sg-dot{fill:var(--ember-hot); filter:drop-shadow(0 0 6px var(--ember))}
.sg-wing{fill:var(--plate-2); stroke:var(--ember); stroke-width:1.3}
.sg-wings{animation:flap 6s ease-in-out infinite; transform-origin:0 0}
.sg-shield{fill:var(--bg-2); stroke:url(#sg-metal); stroke-width:3.5}
.sg-shield-in{fill:none; stroke:var(--line-2); stroke-width:1}
.sg-mono{font-family:var(--f-rune); font-size:54px; fill:url(#sg-metal)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flap{0%,100%{transform:scale(1,1)} 50%{transform:scale(1.03,.97) translateY(-2px)}}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.8)}}

/* ticker */
.ticker{border-bottom:1px solid var(--line); background:var(--bg-2); overflow:hidden; position:relative}
.ticker-track{display:flex; width:max-content; animation:marquee 52s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{display:flex; list-style:none; margin:0; padding:0}
.ticker li{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); padding:15px 0 15px 26px; white-space:nowrap; display:flex; gap:26px; align-items:center}
.ticker li::after{content:"ᛟ"; font-family:var(--f-rune); color:var(--ember); letter-spacing:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:clamp(72px, 10vw, 128px); position:relative}
.sec + .sec{border-top:1px solid var(--line)}
[id]{scroll-margin-top:84px}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 56px; align-items:end; margin-bottom:48px}
.sec-head.stack{display:block; margin-bottom:28px}
.kicker{display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ember-hot); margin:0}
.kicker .rn{color:var(--ember); font-size:1rem}
h2.title{font-family:var(--f-display); font-weight:700; font-size:var(--step-3); line-height:.95; margin:12px 0 0; text-wrap:balance}
.sec-intro{color:var(--fg-dim); max-width:58ch; margin:0}
.sec-head.stack .sec-intro{margin-top:18px}
@media (max-width:860px){.sec-head{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .rise{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 55%}
    @keyframes rise{from{transform:translateY(34px) scale(.985); opacity:.55} to{transform:none; opacity:1}}
  }
}

/* forge */
.forge{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px}
.card.wide{grid-column:1 / -1}
.art{position:relative; aspect-ratio:16 / 9; background:var(--bg-2); border-bottom:1px solid var(--line); overflow:hidden; flex:none}
.art canvas,.art svg,.art img{position:absolute; inset:0; width:100%; height:100%; display:block}
.art img{object-fit:cover}
.card-body{padding:24px 26px 26px; display:flex; flex-direction:column; gap:14px; flex:1}
.card-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.card h3,.saga h3{font-family:var(--f-display); font-weight:700; font-size:2.15rem; line-height:1; margin:0}
.tag-line{font-size:1.14rem; color:var(--fg); margin:0; line-height:1.45}
.card-text{color:var(--fg-dim); margin:0}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:8px; color:var(--fg-dim)}
.ticks li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:6px}
.ticks li::before{content:"ᚲ"; font-family:var(--f-rune); color:var(--ember)}
.spec{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; color:var(--frost); border-top:1px dashed var(--line-2); padding-top:14px; margin:auto 0 0}
.card-foot{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.card-foot:empty{display:none}
.card.wide .plate-in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.card.wide .art{aspect-ratio:auto; min-height:320px; border-bottom:0; border-right:1px solid var(--line)}
.pill{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:6px 10px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.st-live{color:var(--ember-hot); box-shadow:inset 0 0 0 1px var(--ember)}
.st-live::before{box-shadow:0 0 10px var(--ember); animation:pulse 2s ease-in-out infinite}
.st-review{color:var(--frost); box-shadow:inset 0 0 0 1px rgba(140,195,212,.45)}
.st-soon{color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-2)}
.st-dev{color:var(--blood-hot); box-shadow:inset 0 0 0 1px rgba(224,87,75,.5)}
.anvil{margin:28px 0 0; display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center}
.anvil .lbl{margin-right:6px}
.anvil-item{font-family:var(--f-mono); font-size:.74rem; color:var(--fg); padding:7px 11px; box-shadow:inset 0 0 0 1px var(--line-2)}
@media (max-width:820px){
  .forge{grid-template-columns:minmax(0,1fr)}
  .card.wide .plate-in{grid-template-columns:minmax(0,1fr)}
  .card.wide .art{aspect-ratio:16 / 9; min-height:0; border-right:0; border-bottom:1px solid var(--line)}
}

/* svg art */
.svg-art .t-mono{font-family:var(--f-mono); font-size:7.5px; letter-spacing:.12em; fill:var(--fg-dim)}
.svg-art .dim{fill:var(--fg-faint)} .svg-art .hotf{fill:var(--ember-hot)} .svg-art .frostf{fill:var(--frost)}
.gas .dotf{fill:var(--line-2)}
.gas .links path{fill:none; stroke:var(--line-2); stroke-width:1.2}
.gas .pulses path{fill:none; stroke:var(--ember-hot); stroke-width:2; stroke-linecap:round; stroke-dasharray:10 100; stroke-dashoffset:110; animation:gpulse 3.2s linear infinite}
@keyframes gpulse{to{stroke-dashoffset:0}}
.gas .tn rect,.gas .tn polygon{fill:var(--plate-2); stroke:var(--line-2); stroke-width:1.4; animation:tglow 3.2s ease-in-out infinite; animation-delay:var(--d)}
@keyframes tglow{0%,100%{fill:var(--plate-2); stroke:var(--line-2)} 30%,60%{fill:var(--ember-deep); stroke:var(--ember-hot)}}
.gas .tlabels text{font-family:var(--f-mono); font-size:8px; fill:var(--fg); text-anchor:middle}
.gas .tiers text{font-family:var(--f-mono); font-size:6.5px; letter-spacing:.2em; fill:var(--fg-faint); text-anchor:middle}
.inv .slot{fill:var(--bg); stroke:var(--line-2); stroke-width:1}
.inv .ic{fill:var(--fg-dim)} .inv .ic.ore{fill:var(--ember)} .inv .ic.coin{fill:var(--ember-hot)} .inv .ic.flask{fill:var(--frost)}
.inv .ic.bow{fill:none; stroke:var(--fg-dim); stroke-width:1.6}
.inv .num{font-family:var(--f-mono); font-size:5.5px; fill:var(--fg-faint)}
.inv .cnt{font-family:var(--f-mono); font-size:6px; fill:var(--fg); text-anchor:end}
.inv .sel{fill:none; stroke:var(--ember-hot); stroke-width:1.6; animation:hsel 4.8s steps(1) infinite}
@keyframes hsel{0%{transform:translateX(0)} 33%{transform:translateX(33px)} 66%{transform:translateX(66px)}}
.ow .m1{fill:#132024} .ow .m2{fill:#070b0c} .ow .sea{fill:#0b1416} .ow .ship{fill:#020303}
.ow .aur{animation:aur 9s ease-in-out infinite alternate} .ow .a2{animation-duration:13s}
@keyframes aur{to{transform:translateX(-26px)}}
.ow .stars circle{fill:#ece4cf; opacity:.6}
.ow .glint{stroke:var(--aurora); stroke-width:1; opacity:.35}
.hs .moon{fill:#e6dfc8} .hs .isle{fill:#060908} .hs .asylum{fill:#020303} .hs .win{fill:#17170f}
.hs .win.lit{fill:var(--blood-hot); animation:flick 4s infinite} .hs .win.lit2{fill:var(--ember); animation:flick 6.5s infinite 1.2s}
.hs .fog{fill:#9fb0a6; opacity:.13; animation:fogd 14s ease-in-out infinite alternate} .hs .f2{animation-duration:19s; opacity:.09}
.hs .hsea{fill:#050807} .hs .crow{fill:none; stroke:#000; stroke-width:1.2}
@keyframes flick{0%,44%,52%,100%{opacity:1} 47%{opacity:.15} 70%{opacity:.6}}
@keyframes fogd{to{transform:translateX(-40px)}}

/* pipeline */
.pipe-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:40px; align-items:center}
.pipe-svg{width:100%; height:auto; display:block; overflow:visible}
.pipe-svg .lnk{fill:none; stroke:var(--line-2); stroke-width:1.5; stroke-dasharray:3 9; animation:flow 1.4s linear infinite; transition:stroke .3s, stroke-width .3s}
.pipe-svg .lnk.on{stroke:var(--ember); stroke-width:2.6}
@keyframes flow{to{stroke-dashoffset:-24}}
.pipe-svg .pkt{fill:var(--ember-hot)}
.pipe-svg .node{cursor:pointer; outline:none}
.pipe-svg .node path{fill:var(--plate); stroke:var(--line-2); stroke-width:1.2; transition:fill .3s, stroke .3s}
.pipe-svg .node text{fill:var(--fg-dim); font-family:var(--f-mono); font-size:14px; letter-spacing:.08em; text-anchor:middle; dominant-baseline:central; pointer-events:none; transition:fill .3s}
.pipe-svg .node.on path{fill:#2a1c12; stroke:var(--ember-hot)}
.pipe-svg .node.on text{fill:var(--ember-hot)}
.pipe-svg .node:focus-visible path{stroke:var(--fg); stroke-width:2}
.pipe-svg .core-disc{fill:var(--bg-2); stroke:var(--ember); stroke-width:1.5}
.pipe-svg .core-ring{fill:none; stroke:var(--line-2); stroke-dasharray:2 7; animation:spin 40s linear infinite; transform-box:fill-box; transform-origin:center}
.pipe-svg .core-title{font-family:var(--f-display); font-size:30px; font-weight:700; fill:var(--fg); text-anchor:middle}
.pipe-svg .core-sub{font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; fill:var(--ember-hot); text-anchor:middle}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; background:transparent; border:0; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--fg-dim); padding:9px 12px; cursor:pointer; transition:color .2s, box-shadow .2s}
.chip:hover{color:var(--fg)}
.chip[aria-pressed="true"]{color:var(--ember-hot); box-shadow:inset 0 0 0 1px var(--ember)}
.pipe-cap{margin-top:28px; min-height:15em}
.pipe-cap h3{font-family:var(--f-display); font-size:2.4rem; line-height:1; margin:10px 0 12px; font-weight:700}
.pipe-cap p{margin:0; color:var(--fg-dim)}
.pipe-cap .more{display:inline-block; margin-top:16px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none}
@media (max-width:900px){.pipe-grid{grid-template-columns:minmax(0,1fr)} .pipe-cap{min-height:0}}

/* engine room */
.engine{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px; align-items:start}
.points{display:grid; gap:24px; margin-top:34px}
.point{display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px}
.point .gl{font-family:var(--f-rune); font-size:1.7rem; color:var(--ember); width:48px; height:48px; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--line-2); transition:color .3s, box-shadow .3s, transform .4s}
.point:hover .gl{color:var(--ember-hot); box-shadow:inset 0 0 0 1px var(--ember); transform:rotate(-8deg) scale(1.06)}
.point h3{font-family:var(--f-display); font-size:1.6rem; margin:0 0 4px; font-weight:700; line-height:1.05}
.point p{margin:0; color:var(--fg-dim)}
.code .plate-in{background:#0a0807}
.code-bar{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:12px 16px}
.code-bar .rn{color:var(--ember); margin-right:6px}
.code{min-width:0}
.code pre{margin:0; padding:22px 20px; overflow-x:auto; font-family:var(--f-mono); font-size:.84rem; line-height:1.75; color:var(--fg); tab-size:4}
.code .k{color:var(--frost)} .code .s{color:var(--aurora)} .code .c{color:var(--fg-faint); font-style:italic} .code .t{color:var(--ember-hot)} .code .f{color:var(--fg); font-weight:600}
.caret{display:inline-block; width:.6em; height:1.1em; background:var(--ember); vertical-align:-.2em; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.code-stats{display:flex; flex-wrap:wrap; border-top:1px solid var(--line)}
.code-stats span{flex:1 1 auto; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; color:var(--frost); padding:12px 16px; border-right:1px solid var(--line)}
.code-stats span:last-child{border-right:0}
@media (max-width:960px){.engine{grid-template-columns:minmax(0,1fr)}}

/* sagas */
.sagas{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:22px}
.sagas > :first-child:nth-last-child(2){grid-column:auto}
.saga .art{aspect-ratio:2 / 1}

/* streams */
.streams-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap:22px}
.stream .plate-in{display:grid; grid-template-columns:96px minmax(0,1fr); gap:20px; padding:24px; align-items:center}
.avatar{width:96px; height:96px; position:relative}
.avatar img,.avatar .mono{width:100%; height:100%; display:grid; place-items:center; object-fit:cover; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background:var(--plate-2)}
.avatar .mono{font-family:var(--f-display); font-size:2.6rem; font-weight:700; color:var(--ember-hot)}
.avatar::after{content:""; position:absolute; inset:-5px; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 0 25%, 5% 27.5%, 5% 72.5%, 50% 95%, 95% 72.5%, 95% 27.5%, 50% 5%, 5% 27.5%, 0 25%); background:var(--line-2)}
.stream.is-live .avatar::after{background:var(--blood-hot); animation:pulse 1.8s ease-in-out infinite}
.stream h3{font-family:var(--f-display); font-size:1.9rem; line-height:1; margin:0}
.stream .handle{font-family:var(--f-mono); font-size:.74rem; color:var(--twitch); margin:6px 0 0}
.stream .about{color:var(--fg-dim); margin:10px 0 0}
.stream .row-top{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap}
.stream .card-foot{margin-top:14px}
.onair{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:5px 9px; display:inline-flex; gap:8px; align-items:center; color:var(--fg-faint); box-shadow:inset 0 0 0 1px var(--line-2)}
.onair::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.is-live .onair{color:var(--fg); background:rgba(163,36,36,.3); box-shadow:inset 0 0 0 1px var(--blood-hot)}
.is-live .onair::before{background:var(--blood-hot); box-shadow:0 0 10px var(--blood-hot); animation:pulse 1.6s ease-in-out infinite}
.setup-note{font-family:var(--f-mono); font-size:.72rem; color:var(--blood-hot); margin:10px 0 0}
.only-edit{display:none}
body.editing .only-edit{display:block}
@media (max-width:420px){.stream .plate-in{grid-template-columns:72px minmax(0,1fr); gap:14px; padding:18px} .avatar{width:72px; height:72px}}

/* armory */
.tabs{display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:6px}
.tab{background:none; border:0; color:var(--fg-dim); font-family:var(--f-display); font-size:1.7rem; font-weight:600; padding:10px 18px 14px; cursor:pointer; position:relative; display:inline-flex; gap:10px; align-items:baseline}
.tab .count{font-family:var(--f-mono); font-size:.7rem; color:var(--fg-faint)}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--fg)}
.tab[aria-selected="true"]::after{content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:2px; background:var(--ember)}
.ledger{list-style:none; margin:0; padding:0}
.ledger li{border-bottom:1px solid var(--line)}
.row{display:grid; grid-template-columns:minmax(0,16rem) 10rem minmax(0,1fr) 2rem; gap:20px; align-items:baseline; padding:20px 6px; color:inherit; text-decoration:none; transition:background .25s, padding .25s}
a.row:hover,a.row:focus-visible{background:linear-gradient(90deg, rgba(226,119,46,.08), transparent 70%); padding-left:18px}
.row .nm{font-family:var(--f-display); font-size:1.7rem; font-weight:700; line-height:1.05}
.row .gn{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--frost)}
.row .nt{color:var(--fg-dim)}
.row .ar{color:var(--ember); justify-self:end; font-size:1.1rem; transition:transform .25s}
a.row:hover .ar{transform:translate(3px,-3px)}
@media (max-width:760px){
  .row{grid-template-columns:minmax(0,1fr) auto; gap:4px 12px}
  .row .ar{grid-column:2; grid-row:1}
  .row .gn,.row .nt{grid-column:1 / -1}
}

/* hall */
.hall{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:start}
.hall p{max-width:62ch; color:var(--fg-dim)}
.hall p.big{font-size:var(--step-1); color:var(--fg); line-height:1.5}
.tally{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line)}
.tally div{background:var(--bg); padding:28px 24px; transition:background .3s}
.tally div:hover{background:var(--bg-2)}
.tally div:last-child:nth-child(odd){grid-column:1 / -1}
.tally b{display:block; font-family:var(--f-display); font-size:clamp(3rem, 6vw, 4.6rem); line-height:.9; font-weight:800; color:var(--ember-hot); font-variant-numeric:tabular-nums}
.tally span{display:block; margin-top:10px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim)}
@media (max-width:860px){.hall{grid-template-columns:minmax(0,1fr); gap:36px}}

/* footer */
.foot{border-top:1px solid var(--line); background:var(--bg-2); padding-block:56px calc(40px + env(safe-area-inset-bottom, 0px))}
.foot-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px 40px; align-items:end}
.foot .brand{font-size:2.4rem}
.foot .logo{width:38px; height:52px}
.motto{margin:12px 0 0; font-family:var(--f-display); font-size:1.5rem; color:var(--ember-hot)}
.foot-links{display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:flex-end}
.foot-links a{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); text-decoration:none}
.foot-links a:hover{color:var(--ember-hot)}
.legal{grid-column:1 / -1; color:var(--fg-faint); font-size:.8rem; border-top:1px solid var(--line); padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr)} .foot-links{justify-content:flex-start}}

/* oathwake view */
.ow-hero{position:relative; overflow:hidden; min-height:clamp(560px, 84vh, 880px); display:flex; align-items:flex-end; border-bottom:1px solid var(--line); background:#05070a}
.ow-hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(12,10,9,.75) 85%, var(--bg))}
.ow-hero-in{position:relative; z-index:1; width:100%; padding-block:130px 72px}
.ow-hero .eyebrow .rn{color:var(--aurora)}
.ow-title{font-family:var(--f-display); font-size:clamp(4.2rem, 15vw, 12rem); line-height:.82; font-weight:800; margin:14px 0 22px; color:var(--fg); text-shadow:0 0 50px rgba(116,214,166,.22), 0 2px 0 #000}
.ow-lead{font-size:var(--step-1); max-width:44ch; color:var(--fg); margin:0; line-height:1.5}
.ow-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.ow-meta .pill{background:rgba(12,10,9,.55)}
.scroll-cue{position:absolute; z-index:2; left:50%; bottom:22px; width:22px; height:36px; margin-left:-11px; box-shadow:inset 0 0 0 1px var(--line-2); border-radius:12px}
.scroll-cue span{position:absolute; left:50%; top:7px; width:2px; height:8px; margin-left:-1px; background:var(--aurora); animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0); opacity:1} 70%{transform:translateY(12px); opacity:0} 100%{opacity:0}}
.pillars{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px}
.pillar .plate-in{padding:28px 24px 30px; gap:10px}
.pl-rune{font-family:var(--f-rune); font-size:2.8rem; line-height:1; color:var(--aurora); text-shadow:0 0 22px rgba(116,214,166,.45); transition:transform .5s}
.pillar:hover .pl-rune{transform:translateY(-4px) scale(1.08)}
.pillar h3{font-family:var(--f-display); font-size:1.8rem; line-height:1.02; margin:6px 0 0; font-weight:700}
.pillar p{margin:0; color:var(--fg-dim)}
.pillar .lbl{color:var(--frost)}
@media (max-width:1040px){.pillars{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:560px){.pillars{grid-template-columns:minmax(0,1fr)}}
.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:16px}
.gallery figure{margin:0}
.gallery button{display:block; width:100%; padding:0; border:0; background:var(--bg-2); cursor:zoom-in; aspect-ratio:16 / 9; overflow:hidden}
.gallery img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s}
.gallery button:hover img{transform:scale(1.04)}
.gallery figcaption{font-family:var(--f-mono); font-size:.72rem; color:var(--fg-dim); margin-top:8px}
.lb{position:fixed; inset:0; z-index:90; background:rgba(5,4,3,.94); display:grid; place-items:center; padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); cursor:zoom-out}
.lb img{max-width:min(1500px, 100%); max-height:88vh; box-shadow:0 0 0 1px var(--line-2)}
.road{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0,1fr)); position:relative}
.road::before{content:""; position:absolute; left:0; right:0; top:22px; height:1px; background:linear-gradient(90deg, var(--ember), var(--line-2) 40%, var(--line))}
.road li{position:relative; padding:58px 24px 0 0}
.road .dot{position:absolute; top:14px; left:0; width:17px; height:17px; transform:rotate(45deg); background:var(--bg); box-shadow:inset 0 0 0 2px var(--line-2)}
.road li.now .dot{background:var(--ember); box-shadow:0 0 18px var(--ember); animation:pulse 2.2s ease-in-out infinite}
.road .when{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember-hot); margin:0}
.road h3{font-family:var(--f-display); font-size:1.9rem; line-height:1; margin:10px 0 8px; font-weight:700}
.road p{color:var(--fg-dim); margin:0}
@media (max-width:860px){
  .road{grid-template-columns:minmax(0,1fr); gap:30px}
  .road::before{left:8px; right:auto; top:0; bottom:0; width:1px; height:auto; background:linear-gradient(180deg, var(--ember), var(--line-2) 40%, var(--line))}
  .road li{padding:0 0 0 44px}
  .road .dot{top:6px}
}
.cta .plate-in{padding:clamp(28px, 5vw, 56px)}
.cta-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px 48px; align-items:center}
.cta .actions{margin-top:0}
@media (max-width:860px){.cta-in{grid-template-columns:minmax(0,1fr)}}

/* haunted shores view */
#view-haunted{--ember:#b8433a; --ember-hot:#e8705f; --ember-deep:#5c1712; --frost:#9fc2b2; --aurora:#9fc2b2; --line:#232c28; --line-2:#3a4741; --plate:#111513; --plate-2:#172019; background:#080b0a}
body[data-view="haunted"] .torch{background:radial-gradient(circle, rgba(159,194,178,.07), rgba(159,194,178,.02) 40%, transparent 65%)}
.hs-hero{position:relative; overflow:hidden; min-height:clamp(560px, 86vh, 900px); display:flex; align-items:flex-end; border-bottom:1px solid var(--line); background:#030504}
.hs-dark{position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle 320px at var(--fx, 66%) var(--fy, 48%), rgba(0,0,0,0) 0, rgba(0,0,0,.24) 42%, rgba(0,0,0,.74) 100%)}
.hs-hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(8,11,10,.8) 85%, #080b0a)}
.hs-hero-in{position:relative; z-index:2; width:100%; padding-block:130px 72px}
.hs-hero .eyebrow .rn{color:var(--ember-hot)}
.hs-hero .scroll-cue{z-index:3}
.hs-title{font-family:var(--f-display); font-size:clamp(3.3rem, 12.5vw, 10.5rem); line-height:.86; font-weight:800; margin:14px 0 22px; color:#e9e2d0; text-shadow:0 0 34px rgba(184,67,58,.42), 0 2px 0 #000; animation:hsflick 7s infinite}
@keyframes hsflick{0%,40%,44%,76%,80%,100%{opacity:1; transform:none} 41%{opacity:.3} 42%{opacity:1} 43%{opacity:.55} 77%{transform:translateX(3px) skewX(-3deg); opacity:.8} 78%{transform:translateX(-2px)}}
.hs-lead{font-size:var(--step-1); max-width:42ch; margin:0; line-height:1.5; color:#e9e2d0}
.why-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; align-items:start}
.stamp{display:inline-block; margin-top:28px; font-family:var(--f-mono); font-size:.74rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ember-hot); box-shadow:inset 0 0 0 2px var(--ember); padding:8px 12px; transform:rotate(-5deg); opacity:.9}
.case .plate-in{background:#0d110f}
.case-bar{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 22px; border-bottom:1px dashed var(--line-2)}
.case-bar .lbl:first-child{color:var(--ember-hot)}
.case-body{padding:clamp(22px, 4vw, 40px); display:grid; gap:18px}
.case-body p{margin:0; max-width:64ch; color:var(--fg); font-size:1.12rem; line-height:1.65}
.case-body p:first-child::first-letter{font-family:var(--f-display); font-size:3.4em; float:left; line-height:.8; margin:.06em .08em 0 0; color:var(--ember-hot)}
.case-body .signoff{font-family:var(--f-display); font-size:1.6rem; color:var(--ember-hot); margin-top:6px}
.feat-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.feat .plate-in{padding:26px 24px 28px; gap:10px}
.feat .gl{font-family:var(--f-rune); font-size:2.2rem; color:var(--ember-hot); line-height:1; text-shadow:0 0 18px rgba(232,112,95,.45); transition:transform .5s}
.feat:hover .gl{transform:translateY(-4px) rotate(-6deg)}
.feat h3{font-family:var(--f-display); font-size:1.75rem; line-height:1.02; margin:4px 0 0; font-weight:700}
.feat p{margin:0; color:var(--fg-dim)}
.pledges{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px; border-top:1px solid var(--line)}
.pledge{display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:26px 0; border-bottom:1px solid var(--line)}
.pledge .mk{font-family:var(--f-rune); font-size:1.8rem; color:var(--ember-hot); line-height:1}
.pledge h3{font-family:var(--f-display); font-size:1.75rem; margin:0 0 6px; line-height:1.05; font-weight:700}
.pledge p{margin:0; color:var(--fg-dim)}
@media (max-width:1000px){.feat-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:900px){.why-grid{grid-template-columns:minmax(0,1fr); gap:24px} .stamp{margin-top:18px}}
@media (max-width:760px){.pledges{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.feat-grid{grid-template-columns:minmax(0,1fr)}}

/* editor */
.ed-fab{position:fixed; right:max(18px, env(safe-area-inset-right, 0px)); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:95; display:inline-flex; gap:10px; align-items:center; font-family:var(--f-mono); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:linear-gradient(180deg, var(--ember-hot), var(--ember)); border:0; padding:13px 18px; cursor:pointer; clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.ed-fab .rn{font-size:1rem}
.ed-fab.has-draft::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--blood)}
.ed{position:fixed; top:0; right:0; bottom:0; width:min(440px, 100%); z-index:100; background:var(--bg-2); border-left:1px solid var(--line-2); display:flex; flex-direction:column; box-sizing:border-box; padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) 0; box-shadow:-30px 0 60px rgba(0,0,0,.55); font-size:15px; color:var(--fg)}
.ed-head{display:flex; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); align-items:center; flex-wrap:wrap}
.ed-status{margin:4px 0 0; font-size:.9rem; color:var(--fg)}
.ed-actions{display:flex; gap:8px; align-items:center}
.ed-x{background:none; border:0; color:var(--fg-dim); font-size:1.1rem; cursor:pointer; padding:6px 8px}
.ed-tabs{display:flex; gap:6px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--line)}
.ed-tab{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; background:none; border:0; box-shadow:inset 0 0 0 1px var(--line); color:var(--fg-dim); padding:7px 9px; cursor:pointer}
.ed-tab[aria-current="true"]{color:var(--ember-hot); box-shadow:inset 0 0 0 1px var(--ember)}
.ed-body{flex:1; overflow-y:auto; padding:16px; display:grid; gap:14px; align-content:start}
.ed-obj{display:grid; gap:14px}
.ed-field{display:grid; gap:6px}
.ed-label{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim)}
.ed-input{width:100%; box-sizing:border-box; background:var(--bg); color:var(--fg); border:1px solid var(--line-2); padding:9px 10px; font-family:var(--f-body); font-size:.95rem}
textarea.ed-input{resize:vertical; line-height:1.45}
textarea.ed-input.mono{font-family:var(--f-mono); font-size:.8rem}
.ed-input:focus{outline:none; border-color:var(--ember)}
.ed-check{grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px}
.ed-check input{width:18px; height:18px; accent-color:var(--ember)}
.ed-check .ed-label{font-size:.72rem}
.ed-check .ed-hint{grid-column:1 / -1}
.ed-hint{margin:0; font-size:.8rem; color:var(--fg-faint)}
.ed-list{display:grid; gap:8px; padding:12px; box-shadow:inset 0 0 0 1px var(--line)}
.ed-list-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.ed-item{background:var(--plate); box-shadow:inset 0 0 0 1px var(--line)}
.ed-item > summary{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; list-style:none}
.ed-item > summary::-webkit-details-marker{display:none}
.ed-item[open] > summary{border-bottom:1px solid var(--line)}
.ed-item > .ed-obj{padding:12px}
.ed-item-title{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.ed-ctrl{display:flex; gap:4px; flex:none}
.ed-mini{background:var(--bg); border:0; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--fg-dim); width:28px; height:28px; cursor:pointer; font-size:.8rem}
.ed-mini:hover:not(:disabled){color:var(--ember-hot)}
.ed-mini:disabled{opacity:.35; cursor:default}
.ed-item-simple{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center}
.ed-img{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ed-img-prev{width:96px; height:54px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; font-size:.75rem; color:var(--fg-faint); overflow:hidden}
.ed-img-prev img{width:100%; height:100%; object-fit:cover}
.ed-draft{margin:12px 16px 0; padding:12px; box-shadow:inset 0 0 0 1px var(--blood-hot); display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.ed-draft p{margin:0; flex-basis:100%}
.ed-foot{margin:0; padding:10px 16px; border-top:1px solid var(--line); font-size:.8rem; color:var(--fg-faint)}
@media (min-width:1200px){body.editing #fd-root{margin-right:440px}}

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

/* live details on streamer cards */
.stream .live-meta{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--fg); margin:10px 0 0}

/* login page */
.noscript{padding:24px; color:var(--fg); font-family:var(--f-body)}
.admin-body{min-height:100vh; display:grid; place-items:center; box-sizing:border-box; padding:24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px))}
.admin-card{width:min(420px, 100%); box-sizing:border-box; background:var(--plate); box-shadow:inset 0 0 0 1px var(--line-2); padding:34px 28px; display:grid; gap:10px; clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px)}
.admin-brand{display:inline-flex; gap:12px; align-items:center; font-family:var(--f-display); font-size:1.7rem; font-weight:700; color:var(--fg); text-decoration:none}
.admin-card h1{font-family:var(--f-display); font-size:2.5rem; line-height:1; margin:12px 0 0}
.admin-sub{margin:0 0 8px; color:var(--fg-dim)}
#login{display:grid; gap:8px}
#login label{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); margin-top:6px}
#login input{background:var(--bg); color:var(--fg); border:1px solid var(--line-2); padding:12px; font-family:var(--f-body); font-size:1rem}
#login input:focus{outline:none; border-color:var(--ember)}
#login .btn{margin-top:8px; justify-content:center}
.admin-msg{min-height:1.4em; margin:6px 0 0; color:var(--blood-hot); font-size:.95rem}
.admin-back{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); text-decoration:none; margin-top:12px}
.admin-back:hover{color:var(--ember-hot)}

/* editor: media previews, guide upload, video thumbnails */
.ed-img-prev video{max-width:100%; max-height:120px; display:block}
.ed-yt{margin-top:8px}
.ed-yt img{max-width:160px; display:block}
.ed-guide{margin-top:18px; padding:14px 16px; box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:12px}
.ed-guide .ed-actions{display:flex; flex-wrap:wrap; gap:8px}
.ed-progress:empty{display:none}
.ed-fails{display:grid; gap:8px}

.lb figure{margin:0; display:grid; gap:12px; justify-items:center; max-width:min(1500px, 100%)}
.lb figcaption{font-family:var(--f-mono); font-size:.74rem; color:var(--fg-dim); text-align:center; max-width:70ch}