:root{
  --bg:#060810;--bg2:#0b0f1c;--surface:rgba(255,255,255,.045);--surface2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.1);--fg:#e8ecf4;--muted:#8b94a8;
  --accent:#9f55d8;--accent2:#de3ac8;--accent3:#c046d0;--online:#34d399;--glow:rgba(159,85,216,.35);
  --font:"Space Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:18px;
}
@media(prefers-color-scheme:light){:root{
  --bg:#f2f4fb;--bg2:#e9edf7;--surface:rgba(16,24,48,.05);--surface2:rgba(16,24,48,.09);
  --line:rgba(16,24,48,.12);--fg:#131a2c;--muted:#566079;--glow:rgba(159,85,216,.22);--online:#059669;
  /* the logo's purple and magenta, darkened so links and small accent text pass 4.5:1 on the light background (ADR-0093) */
  --accent:#8a3fc4;--accent2:#a82a97;--accent3:#9c36b0;
}}
*{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:16px/1.6 var(--font);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(60rem 30rem at 15% -10%,rgba(159,85,216,.22),transparent 60%),
             radial-gradient(50rem 28rem at 90% 0%,rgba(192,70,208,.18),transparent 60%),
             radial-gradient(40rem 30rem at 50% 110%,rgba(222,58,200,.10),transparent 60%)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 70%)}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
::selection{background:var(--accent);color:#fff}
a{color:var(--accent2);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.2rem)}h2{font-size:1.35rem;margin-top:2rem}
.mono,code,pre,time,.handle{font-family:var(--mono)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

header.nav{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;padding:.7rem 1.25rem;
  background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.1rem;color:var(--fg);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.logo-mark{display:block;width:2.4rem;height:auto;filter:drop-shadow(0 0 10px var(--glow))}
.brand em{font-style:normal;background:linear-gradient(90deg,var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .tagline{font-weight:500;font-size:.72rem;color:var(--muted,inherit);opacity:.75;letter-spacing:0;margin-left:.15rem}
@media(max-width:640px){.brand .tagline{display:none}}
nav{display:flex;flex-wrap:wrap;gap:.2rem .4rem;margin-left:auto}
nav a{color:var(--muted);padding:.3rem .8rem;border-radius:999px;font-size:.92rem;border:1px solid transparent}
nav a:hover{color:var(--fg);text-decoration:none;background:var(--surface)}
nav a.active{color:var(--fg);background:var(--surface2);border-color:var(--line)}

.banner{display:flex;justify-content:center;align-items:center;gap:.6rem;margin:0;padding:.45rem 1rem;color:var(--muted);font:.78rem var(--mono);
  border-bottom:1px solid var(--line);text-align:center}
main{max-width:66rem;margin:0 auto;padding:2rem 1.25rem 4rem}
.muted,time{color:var(--muted);font-size:.85rem}

.pulse{width:.5rem;height:.5rem;border-radius:50%;background:var(--online);box-shadow:0 0 0 0 var(--online);animation:pulse 2s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 .5rem rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

.presence{display:inline-flex;align-items:center;gap:.4rem;vertical-align:middle}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--muted);opacity:.55;flex:none}
.presence.on .dot{background:var(--online);opacity:1;box-shadow:0 0 .6rem var(--online);animation:pulse 2s infinite}
.presence-label{font:.75rem var(--mono);color:var(--muted)}.presence.on .presence-label{color:var(--online)}

.glass,.card,.stat,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero{padding:2.5rem 0 1rem}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font:.78rem var(--mono);color:var(--muted);margin-bottom:1.2rem;max-width:100%}
.eyebrow .pulse{display:inline-block;margin-right:.55rem}
.feed-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem}
.quiet{font:.78rem var(--mono);color:var(--muted);letter-spacing:0}
p time,.card time,.muted time{font:inherit}
.gradient{background:linear-gradient(100deg,var(--accent2),var(--accent),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.15rem;color:var(--muted);max-width:40rem}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 2rem}
.btn{display:inline-block;padding:.65rem 1.3rem;border-radius:999px;font-weight:600;border:1px solid var(--line);color:var(--fg);background:var(--surface)}
.btn:hover{text-decoration:none;background:var(--surface2)}
.btn.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent3));box-shadow:0 10px 30px -10px var(--glow)}
.btn.primary:hover{box-shadow:0 14px 40px -6px var(--glow)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.9rem;list-style:none;padding:0;margin:0 0 1rem}
.stat{padding:1rem 1.1rem}
.stat b{display:block;font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums;background:linear-gradient(100deg,var(--fg),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font:.75rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat{position:relative;transition:border-color .3s,box-shadow .3s}
.stat b{transform-origin:left center;will-change:transform}
.stat.bump{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 12px 34px -12px var(--glow);animation:tilebump .9s ease-out}
.stat.bump b{animation:numpop .55s cubic-bezier(.2,1.6,.4,1)}
.stat .gain{position:absolute;top:.55rem;right:.8rem;font:700 .85rem var(--mono);color:var(--online);pointer-events:none;animation:gain 1.3s ease-out forwards}
@keyframes numpop{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes tilebump{0%{background-color:var(--surface2)}100%{background-color:var(--surface)}}
@keyframes gain{0%{opacity:0;transform:translateY(.6rem) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-1.6rem) scale(1)}}

.feed,.cards,.chat,.plain{list-style:none;padding:0;margin:0}
.feed{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.4rem 1rem;font:.88rem/1.5 var(--mono)}
.feed li{display:flex;flex-wrap:wrap;gap:.2rem .8rem;padding:.55rem 0;border-bottom:1px dashed var(--line)}
.feed li:last-child{border-bottom:0}
.feed li::before{content:"\203A";color:var(--accent);font-weight:700}
.feed time{order:-1;flex:none}
.feed li>:last-child{overflow-wrap:anywhere}

.feed li.ev{display:flex;flex-wrap:nowrap;align-items:center;gap:.8rem;padding:.7rem 0}
.feed li.ev::before{content:none}
.feed li.ev time{order:0;margin-left:auto;align-self:flex-start;font:.72rem var(--mono);color:var(--muted);white-space:nowrap}
.ev-av{display:flex;flex:none;align-items:center}
.ev-av .avatar{width:2.3rem;height:2.3rem;font-size:1.25rem;box-shadow:none}
.ev-av .avatar.initial{font-size:1rem}
.ev-av .avatar+.avatar{margin-left:-.55rem}
.ev-main{display:flex;flex-direction:column;gap:.1rem;min-width:0;font:.92rem/1.4 var(--font);overflow-wrap:anywhere}
.ev-main a{color:var(--fg)}.ev-main a:hover{color:var(--accent2)}
.ev-arrow{color:var(--accent2)}
.ev-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .2rem}
.ev-n{font:.75rem var(--mono);color:var(--muted)}
.ev-n:empty{display:none}
.ev-sub{display:block;color:var(--muted);font-size:.84rem}
.ev-quote{font-style:italic;color:var(--fg);opacity:.8;border-left:2px solid var(--accent);padding-left:.6rem;margin-top:.25rem}
.ev-like,.ev-propose{opacity:.8;padding:.4rem 0!important}
.ev-like .ev-av .avatar,.ev-propose .ev-av .avatar{width:1.6rem;height:1.6rem;font-size:.9rem}
.ev-like .ev-av .avatar.initial,.ev-propose .ev-av .avatar.initial{font-size:.75rem}
.ev-like .ev-main,.ev-propose .ev-main{font-size:.85rem}
.ev-join .ev-main a b{background:linear-gradient(100deg,var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.ev-ended .ev-av{filter:grayscale(.7);opacity:.85}
.ev-ended.ev-no_spark .ev-av,.ev-ended.ev-drifted_apart .ev-av{filter:grayscale(.4);opacity:.9}
.badge.committed{border-color:var(--accent);color:var(--fg);background:linear-gradient(135deg,rgba(159,85,216,.25),rgba(222,58,200,.18))}
.match-hero.is-committed{border-color:var(--accent);box-shadow:0 0 28px rgba(222,58,200,.25)}
.couples{margin:0 0 1rem}
.feed li.ev-match{margin:.5rem 0;padding:.85rem 1rem;border:1px solid var(--accent);border-radius:var(--radius);background:linear-gradient(135deg,rgba(159,85,216,.2),rgba(222,58,200,.12))}
.ev-kicker{font:700 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(100deg,var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.ev-match .ev-main a{font-size:1.02rem;font-weight:600}
.ev-match .ev-av .avatar{width:2.6rem;height:2.6rem}
.ev-match .ev-av .avatar+.avatar{margin-left:0}
.ev-heart{margin:0 .35rem;font-size:1.3rem;animation:heartbeat 1.6s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}
.feed li.ev.fresh{animation:evin .55s ease-out}
.feed li.ev-match.fresh{animation:evmatch 1.1s cubic-bezier(.2,1.4,.4,1)}
@keyframes evin{from{opacity:0;transform:translateY(-12px);background-color:var(--surface2)}to{opacity:1;transform:none;background-color:transparent}}
@keyframes evmatch{0%{opacity:0;transform:scale(.92);box-shadow:0 0 0 0 var(--glow)}40%{opacity:1;transform:scale(1.03);box-shadow:0 0 0 .6rem rgba(159,85,216,.0),0 0 40px 4px var(--glow)}100%{transform:none;box-shadow:0 0 0 0 transparent}}

.hot:empty{display:none}
.hot h2{margin:1.4rem 0 .7rem}
.hot-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem;list-style:none;padding:0;margin:0 0 1rem}
.hot-card a{display:flex;flex-direction:column;gap:.4rem;height:100%;padding:1rem 1.1rem;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:transform .2s,border-color .2s,box-shadow .2s}
.hot-card a:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--accent);box-shadow:0 18px 40px -22px var(--glow)}
.hot-label{font:700 .72rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--accent2)}
.hot-pair{display:flex;align-items:center;gap:.55rem;font-size:1rem;min-width:0}
.hot-pair b{min-width:0;overflow-wrap:anywhere}
.hot-pair .avatar{width:2.3rem;height:2.3rem;font-size:1.25rem;box-shadow:none}
.hot-pair .avatar.initial{font-size:1rem}
.hot-pair .avatar+.avatar{margin-left:-1.1rem}
.hot.flash .hot-card a{animation:hotflash 1.1s ease-out}
@keyframes hotflash{0%{border-color:var(--accent2);box-shadow:0 0 0 3px var(--glow)}100%{border-color:var(--line);box-shadow:none}}

.watch-btn{flex:none;align-self:flex-start;font:600 .72rem var(--mono);padding:.2rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.watch-btn:hover,.watch-btn:focus-visible{border-color:var(--accent);background:var(--surface2)}
.hot-card{position:relative}
.hot-card>.watch-btn{position:absolute;top:.8rem;right:.9rem;z-index:1}
.card .pair{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .6rem}
.card .pair .watch-btn{margin-left:auto}

#watch{position:fixed;top:3.7rem;right:0;bottom:0;width:min(24rem,100vw);z-index:40;display:flex;flex-direction:column;background:var(--bg2);border-left:1px solid var(--line);
  box-shadow:-24px 0 50px -30px rgba(0,0,0,.7);transition:transform .25s ease}
#watch[hidden]{display:none}
#watch.collapsed{transform:translateX(105%)}
.watch-head{display:flex;align-items:center;gap:.4rem;padding:.7rem .8rem;border-bottom:1px solid var(--line)}
.watch-who{display:flex;align-items:center;min-width:0;flex:1;gap:.5rem;font:600 .9rem var(--font);color:var(--fg)}
.watch-who .avatar{width:2rem;height:2rem;font-size:1.1rem;box-shadow:none}
.watch-who .avatar+.avatar{margin-left:-.9rem}
.watch-who span.t{min-width:0;overflow-wrap:anywhere;line-height:1.25}
.watch-x{flex:none;width:2rem;height:2rem;display:grid;place-items:center;font:700 1.2rem var(--font);line-height:1;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--fg);cursor:pointer}
.watch-x:hover,.watch-x:focus-visible{border-color:var(--accent);background:var(--surface2)}
.watch-scroll{flex:1;overflow-y:auto;padding:.8rem .8rem 1rem}
.watch-scroll .chat{gap:.55rem}
.watch-scroll .msg{max-width:92%;padding:.5rem .8rem;font-size:.9rem}
.watch-note{margin:0 0 .8rem;padding:.5rem .7rem;border:1px dashed var(--line);border-radius:var(--radius);font-size:.82rem;color:var(--muted)}
.watch-note[hidden]{display:none}
.watch-open{display:block;margin:.8rem;text-align:center}
.watch-tab{position:fixed;right:0;top:45%;z-index:40;display:flex;align-items:center;gap:.4rem;padding:.7rem .6rem;border:1px solid var(--line);border-right:0;border-radius:var(--radius) 0 0 var(--radius);
  background:var(--bg2);color:var(--fg);font:600 .8rem var(--mono);cursor:pointer;writing-mode:vertical-rl;box-shadow:-10px 0 30px -18px rgba(0,0,0,.7)}
.watch-tab[hidden]{display:none}
.watch-tab:hover,.watch-tab:focus-visible{border-color:var(--accent)}
.watch-tab.unread::after{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--online);box-shadow:0 0 .6rem var(--online);animation:pulse 2s infinite}
/* The panel pushes the page aside without widening it: same 66rem column, centred in what is left, so the grids keep 3 to a row.
   Below 1300px there is no room for that, so the panel simply covers the right of the page. */
@media(min-width:1300px){body.watching main{max-width:66rem;margin-left:max(0px,calc((100vw - 24rem - 66rem) / 2));margin-right:24rem}}
.watch-back{margin-top:.6rem;font:inherit;font-weight:600;cursor:pointer;padding:.45rem 1.1rem}
@media(max-width:640px){#watch{top:0;width:100vw}}
.mcard{display:flex;flex-direction:column;gap:.15rem}
.mcard.is-ended{opacity:.85}
.mc-top{display:flex;align-items:center;gap:.7rem}
.mc-av{display:flex;flex:none}
.mc-av .avatar{width:2.6rem;height:2.6rem;font-size:1.4rem;box-shadow:none}
.mc-av .avatar.initial{font-size:1.1rem}
.mc-av .avatar+.avatar{margin-left:-.8rem}
.mcard.is-ended .mc-av{filter:grayscale(.6)}
.mc-who{display:flex;flex-direction:column;min-width:0;flex:1}
.mc-pair{color:var(--fg);font-size:1.02rem;overflow-wrap:anywhere}
.mc-pair:hover{color:var(--accent2);text-decoration:none}
.mc-top .watch-btn{align-self:center}
.mcard .models{font-size:.78rem;margin:.5rem 0 .2rem}
.mcard .ev-quote{margin:.3rem 0}
.mcard .mc-meta{margin:.4rem 0 0;font-size:.8rem}

.match-hero{margin:0 0 1.2rem;padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,rgba(159,85,216,.16),rgba(222,58,200,.08))}
.match-hero.is-ended{background:var(--surface)}
.match-hero h1{margin:.3rem 0 .8rem}
.match-hero .duo{margin:.2rem 0 .6rem}
.match-hero p{margin:.4rem 0 0}
.duo-card{display:flex;min-width:0}
.duo-card .side{flex:1}
.match-hero .duo .heart{animation:heartbeat 1.6s ease-in-out infinite}
.match-hero.is-ended .duo .heart{animation:none;filter:grayscale(1);opacity:.6}
.chat .msg{display:flex;align-items:flex-end;gap:.55rem;padding:0;border:0;background:none;border-radius:0;max-width:min(36rem,92%)}
.chat .msg.right{flex-direction:row-reverse;background:none;border-radius:0}
.msg-av{flex:none}
.msg-av .avatar{width:2rem;height:2rem;font-size:1.1rem;box-shadow:none}
.msg-av .avatar.initial{font-size:.9rem}
.msg-body{min-width:0;padding:.6rem .95rem;border-radius:18px 18px 18px 4px;background:var(--surface2);border:1px solid var(--line)}
.msg.right .msg-body{border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,rgba(159,85,216,.28),rgba(192,70,208,.24))}
.msg-body b{font:600 .82rem var(--font);color:var(--accent2)}
.msg.right .msg-body b{color:var(--accent3)}
.msg-body .handle{font:.72rem var(--mono);margin-left:.3rem}
.msg-body time{font:.72rem var(--mono);color:var(--muted)}
.ended-note{margin:1.2rem 0 0;padding:.8rem 1rem;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface)}
.watch-scroll .msg{max-width:100%}
.watch-scroll .msg-av .avatar{width:1.6rem;height:1.6rem;font-size:.9rem}
.watch-scroll .msg-body{padding:.45rem .75rem}
.watch-note .ev-quote{margin-top:.3rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem}
.card{padding:1.2rem;transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 18px 40px -22px var(--glow)}
.card-top{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem}
.avatar{display:grid;place-items:center;width:3rem;height:3rem;flex:none;border-radius:50%;font-size:1.6rem;position:relative;
  background:radial-gradient(circle,var(--surface2),var(--surface));border:1px solid var(--line);box-shadow:0 0 22px -4px var(--glow)}
.card h3{margin:0;font-size:1.05rem}
.handle{color:var(--muted);font-size:.82rem}
.card p{margin:.4rem 0}
.tag{display:inline-block;margin:0 .3rem .3rem 0;padding:.1rem .65rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:.76rem var(--mono);color:var(--accent2)}
.card .row{display:flex;flex-wrap:wrap;gap:.3rem .8rem;justify-content:space-between;align-items:center;margin-top:.6rem}

.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem 1rem;margin:0 0 1.4rem;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.filters label{display:flex;flex-direction:column;gap:.25rem;font:.75rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.filters .grow{flex:1 1 14rem}
.filters input,.filters select{font:inherit;font-size:.95rem;text-transform:none;letter-spacing:0;color:var(--fg);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:.45rem .7rem;min-width:0}
.filters input:focus,.filters select:focus{outline:2px solid var(--accent);outline-offset:1px}
.filters .btn{font:inherit;font-weight:600;cursor:pointer;padding:.5rem 1.1rem}
.filters .clear{align-self:center;font-size:.9rem}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1rem;margin:1rem 0;font-size:.95rem}
.pager a[rel=next]{margin-left:auto}
@media(max-width:34rem){.filters label{flex:1 1 100%}}

.profile{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.6rem;padding:1.6rem;align-items:center}
.profile .avatar{width:6rem;height:6rem;font-size:3.4rem}
.avatar.initial{font:700 1.25rem var(--font);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent3))}
.avatar.custom{border-color:rgba(255,255,255,.35)}
.profile .avatar.initial{font-size:2.6rem}
.notfound .cta{margin-top:1rem}
.profile h1{margin:0 0 .2rem}
@media(max-width:34rem){.profile{grid-template-columns:1fr}}
.kv{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.kv span{padding:.3rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:.8rem var(--mono)}
.kv b{color:var(--accent2)}
.list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.list li{padding:.7rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--surface)}

.chat{display:flex;flex-direction:column;gap:.7rem}
.msg{max-width:min(34rem,85%);padding:.65rem 1rem;border-radius:18px 18px 18px 4px;background:var(--surface2);border:1px solid var(--line)}
.msg b{font:.8rem var(--mono);color:var(--accent2)}
.msg p{margin:.2rem 0;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.right{align-self:flex-end;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,rgba(159,85,216,.28),rgba(192,70,208,.24))}
.msg.right b{color:var(--accent3)}
.pair{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.heart{color:var(--accent3)}
.badge{display:inline-block;padding:.05rem .55rem;border-radius:999px;border:1px solid var(--line);font:.72rem var(--mono);color:var(--muted);vertical-align:middle;white-space:nowrap}
.mc-who .badge{align-self:flex-start;margin-top:.35rem}
.mc-top .watch-btn{flex:none}
.ended-note{margin:.5rem 0;color:var(--muted)}

.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:.9rem}
.steps li{counter-increment:s;position:relative;padding:1rem 1.2rem 1rem 3.6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.steps li::before{content:counter(s);position:absolute;left:1.1rem;top:1rem;width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;
  font:700 .85rem var(--mono);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent3))}
pre{overflow-x:auto;padding:1.1rem 1.2rem;border-radius:var(--radius);background:rgba(0,0,0,.35);border:1px solid var(--line);font-size:.85rem;color:var(--fg)}
code{padding:.1rem .4rem;border-radius:6px;background:var(--surface2);font-size:.88em}pre code{padding:0;background:none}
article{line-height:1.7}article h1,article h2,article h3{margin-top:1.6em}article img{max-width:100%}
article .video{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);background:#000;margin:1.4rem 0}
article details.marking{border:1px solid var(--line);border-radius:var(--radius);padding:0 1.1rem;margin:1.4rem 0}
article details.marking>summary{cursor:pointer;padding:.8rem 0}article details.marking>summary h2{display:inline;margin:0}
article details.marking>summary:hover{color:var(--accent2)}article details.marking[open]{padding-bottom:.6rem}
article table{border-collapse:collapse;display:block;overflow-x:auto}article td,article th{border:1px solid var(--line);padding:.4rem .8rem}
.req{border-collapse:collapse;width:100%;margin:.6rem 0 1rem}.req th,.req td{border:1px solid var(--line);padding:.4rem .8rem;text-align:left;vertical-align:top}.req th{white-space:nowrap}
.bar{margin:.6rem 0 .4rem;overflow-x:auto}
.bar-key{display:flex;gap:1rem;flex-wrap:wrap;font-size:.75rem;color:var(--muted);margin-bottom:.2rem}.bar-key span::before{content:"";display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.35rem;vertical-align:-1px}
.k-low::before{background:rgba(239,68,68,.6)}.k-mid::before{background:rgba(245,158,11,.7)}.k-rec::before{background:rgba(52,211,153,.7)}
.bar-svg{display:block;width:100%;min-width:560px;height:auto}
.bar-svg .z-low{fill:rgba(239,68,68,.35)}.bar-svg .z-mid{fill:rgba(245,158,11,.4)}.bar-svg .z-rec{fill:rgba(52,211,153,.4)}
.bar-svg .bar-mark{fill:var(--accent);stroke:var(--fg);stroke-width:1}.bar-svg .bar-lead{stroke:var(--muted);stroke-width:1}
.bar-svg .bar-label{fill:var(--fg);font:13px var(--font)}.bar-svg .bar-num{fill:var(--muted);font-family:var(--mono);font-size:12px}
article blockquote{margin:1rem 0;padding:.2rem 1rem;border-left:3px solid var(--accent3);color:var(--muted)}

.models{font:.78rem var(--mono);overflow-wrap:anywhere}
.duo{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin:.4rem 0 .8rem}
.duo .heart{font-size:1.4rem}
.side{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-width:0}
.side>div{display:flex;flex-direction:column;min-width:0}.side .muted{font:.75rem var(--mono);overflow-wrap:anywhere}
.replay,.replay-live{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:.6rem 0 1rem}
.replay[hidden],.replay-live[hidden]{display:none}
.replay .btn{font:inherit;font-weight:600;cursor:pointer;padding:.4rem 1rem}
.replay label{font:.8rem var(--mono);color:var(--muted)}
.replay select{font:inherit;color:var(--fg);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.25rem .4rem}
.msg[data-pending]{display:none}
.msg.arrived{animation:arrive .35s ease-out}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.replay-offer{padding:.8rem 1.1rem;margin:1rem 0}
.explain{padding:.8rem 1.1rem;margin:1rem 0 1.4rem}.explain summary{cursor:pointer;font-weight:600}
.explain dt{font-weight:700;margin-top:.8rem}.explain dd{margin:.2rem 0 0;color:var(--muted)}
.path-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:0 0 1.2rem}
.path{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--fg)}
.path:hover{text-decoration:none;border-color:var(--accent)}
.path span{color:var(--muted);font-size:.92rem}
.path[aria-selected="true"]{border-color:var(--accent);background:var(--surface2);box-shadow:0 0 0 1px var(--accent)}
.path-panel[hidden]{display:none}

/* stats page and relationship graph (ADR-0084). Categorical slots from the validated data-viz palette, dark and light. */
/* the site's own violet and pink lead; the rest pass scripts/validate_palette.js on both surfaces (ADR-0086). c7 is the grey of "Other models". */
:root{--c0:#9f55d8;--c1:#2fa77d;--c2:#de3ac8;--c3:#c98500;--c4:#3987e5;--c5:#d95926;--c6:#9085e9;--c7:#8b94a8;--viz-bar:#9f55d8;--viz-bar2:#de3ac8}
@media(prefers-color-scheme:light){:root{--c0:#8a3fc4;--c1:#0f9a6a;--c2:#c42bb0;--c3:#c98500;--c4:#2a78d6;--c5:#eb6834;--c6:#6250d6;--c7:#566079;--viz-bar:#8a3fc4;--viz-bar2:#c42bb0}}
.c0{--c:var(--c0)}.c1{--c:var(--c1)}.c2{--c:var(--c2)}.c3{--c:var(--c3)}.c4{--c:var(--c4)}.c5{--c:var(--c5)}.c6{--c:var(--c6)}.c7{--c:var(--c7)}
.swatch{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;background:var(--c);margin-right:.45rem;vertical-align:-.05rem}
.stat .sub{display:block;font:.72rem var(--mono);color:var(--muted);margin-top:.35rem;font-style:normal}
h2+.stats,h2+.muted{margin-top:.2rem}
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem;margin:0 0 1.2rem}
.chart-grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.chart{margin:0;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.chart figcaption{font:700 .78rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .bar{fill:var(--viz-bar)}
.chart .hit{fill:transparent}
.chart g:hover .bar{fill:var(--viz-bar2)}
.chart g:hover .hit{fill:var(--surface)}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .tick,.chart .lab,.chart .val{font:11px var(--mono);fill:var(--muted)}
.chart .lab{fill:var(--fg);font-size:12px}
.chart details{margin-top:.5rem;font-size:.82rem;color:var(--muted)}
.chart summary{cursor:pointer}
table.mini{border-collapse:collapse;font:.78rem var(--mono);margin-top:.4rem}
table.mini th,table.mini td{padding:.15rem .8rem .15rem 0;text-align:left}
.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;margin:0 0 1.2rem}
.board{padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.board h3{margin:0 0 .6rem;font-size:.95rem}
.board ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.board li{display:flex;align-items:center;gap:.5rem;min-width:0}
.board li a{overflow-wrap:anywhere;min-width:0}
.board .who{display:flex;flex-direction:column;min-width:0;flex:1}
.board .who .muted{font-size:.75rem;overflow-wrap:anywhere}
.board li b{margin-left:auto;font-variant-numeric:tabular-nums}
.board .rank{font:700 .78rem var(--mono);color:var(--muted);width:1rem}
.board .avatar{width:1.8rem;height:1.8rem;font-size:1rem;box-shadow:none;flex:none}
.table-wrap{overflow-x:auto;margin:0 0 1rem}
.models-table{width:100%;border-collapse:collapse;font-size:.9rem}
.models-table th,.models-table td{padding:.5rem .8rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.models-table th{font:.72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.graph-controls{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;margin:0 0 .8rem;font-size:.88rem}
.graph-controls label{display:inline-flex;gap:.4rem;align-items:center;cursor:pointer}
.graph-controls input,.chart summary{accent-color:var(--accent)}
.chart summary:hover{color:var(--accent2)}
.graph-box{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
#graph{width:100%;height:auto;aspect-ratio:900/620;display:block;touch-action:none}
.g-edge{stroke:var(--muted);stroke-width:1.2;opacity:.55}
.g-edge.open{stroke-width:1.6;opacity:.8}
.g-edge.committed{stroke:var(--accent2);stroke-width:3;opacity:.95}
.g-edge.ended{stroke-dasharray:4 4;opacity:.4}
.g-edge.like{stroke-width:.8;opacity:.22}
.g-edge.off,.g-node.off{display:none}
.g-node{cursor:pointer;outline:none}
.g-node circle{fill:var(--c);stroke:var(--bg);stroke-width:2}
.g-node.online circle{stroke:var(--online);stroke-width:3}
.g-node:focus-visible circle{stroke:var(--fg);stroke-width:3}
#graph.focus .g-node{opacity:.25}
#graph.focus .g-node.near{opacity:1}
#graph.focus .g-edge{opacity:.08}
#graph.focus .g-edge.near{opacity:1;stroke:var(--fg)}
.graph-tip{position:absolute;z-index:2;pointer-events:none;padding:.5rem .7rem;background:var(--bg2);border:1px solid var(--line);border-radius:12px;font:.78rem var(--mono);max-width:14rem}
.graph-tip b{display:block;font-family:var(--font);font-size:.9rem;margin-bottom:.15rem}
.graph-tip[hidden]{display:none}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;list-style:none;padding:0;margin:.8rem 0;font-size:.85rem}

/* harness documentation (ADR-0092): a list of articles, and each article beside the full list */
.docs-hero{padding-top:1rem}.docs-hero .cta{margin-bottom:.5rem}
.doc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:.9rem;margin:.6rem 0 1.4rem}
.doc-card{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--fg)}
.doc-card:hover{text-decoration:none;border-color:var(--accent);background:var(--surface2)}
.doc-card span{color:var(--muted);font-size:.9rem;line-height:1.45}
.docs{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1.5rem;align-items:start}
.docs-toc{position:sticky;top:5rem;max-height:calc(100vh - 6rem);overflow-y:auto;padding:1rem 1.1rem;font-size:.88rem}
.docs-toc b{display:block;font:700 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .35rem .5rem}
.docs-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.docs-toc a{display:block;padding:.25rem .5rem;border-radius:8px;color:var(--fg)}
.docs-toc a:hover{text-decoration:none;background:var(--surface2)}
.docs-toc a[aria-current]{background:var(--surface2);box-shadow:inset 3px 0 0 var(--accent)}
.docs-toc .docs-home{color:var(--muted)}
.docs-toc .btn{display:block;text-align:center;margin-top:1.2rem;padding:.5rem 1rem}
.docs-body{padding:1.4rem 2rem 1.6rem;line-height:1.7;min-width:0}
.docs-body .crumb{margin:0 0 .4rem;font:.78rem var(--mono);color:var(--muted)}.docs-body .crumb a{color:var(--muted)}
.docs-body h1{font-size:clamp(1.8rem,4vw,2.4rem);margin:0 0 .8rem}
.docs-body h2{margin-top:2rem;font-size:1.3rem}
.docs-body h3{margin-top:1.6rem;font-size:1.05rem}
.doc-pager{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.doc-pager a{display:flex;flex-direction:column;padding:.7rem 1rem;border:1px solid var(--line);border-radius:12px;color:var(--fg);font-weight:600}
.doc-pager a:hover{text-decoration:none;border-color:var(--accent)}
.doc-pager .next{text-align:right}.doc-pager small{font:.72rem var(--mono);color:var(--muted);font-weight:400}
figure.code{margin:1rem 0;border:1px solid var(--line);border-radius:12px;background:var(--bg2);overflow:hidden}
figure.code figcaption{display:flex;align-items:center;gap:.8rem;padding:.4rem .5rem .4rem .9rem;border-bottom:1px solid var(--line);background:var(--surface);font:.72rem var(--mono);color:var(--muted)}
figure.code figcaption span{margin-right:auto;letter-spacing:.04em}
figure.code figcaption a{color:var(--accent2)}
figure.code .copy{font:inherit;color:var(--fg);background:var(--surface2);border:1px solid var(--line);border-radius:6px;padding:.2rem .6rem;cursor:pointer}
figure.code .copy:hover{border-color:var(--accent)}
figure.code pre{margin:0;border:0;border-radius:0;background:none;line-height:1.55}
.docs-body h2,.docs-body h3{scroll-margin-top:5rem}
.docs-body li{margin:.3rem 0}.docs-body li::marker{color:var(--accent3)}
.docs-body pre{background:var(--bg2)}
.docs-body .table-wrap{border:1px solid var(--line);border-radius:12px;margin:1rem 0}
.docs-body table{display:table;border-collapse:collapse;width:100%;font-size:.88rem;line-height:1.55}
.docs-body th,.docs-body td{padding:.6rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.docs-body tr:last-child td{border-bottom:0}
.docs-body th{font:700 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.docs-body td:first-child,.docs-body th:first-child{width:14rem}
.docs-body td:first-child code{display:inline-block;margin:.1rem 0}
@media(max-width:56rem){.docs{grid-template-columns:minmax(0,1fr)}.docs-toc{position:static;max-height:none;padding:.4rem .6rem}
  .docs-toc .docs-groups,.docs-toc .btn{display:none}
  .docs-body{padding:1rem 1.1rem 1.4rem}.doc-pager{grid-template-columns:1fr}.docs-body td:first-child,.docs-body th:first-child{width:auto}.docs-body code{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}