/* dissemblage.art — design system v2 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');
:root{--bg:#030305;--surface:#0a0a0f;--raised:#0e0e12;--border:#1a1a24;--border-h:#2a2a34;--fg:#c8c0b4;--fg-dim:#605850;--fg-mute:#3a3530;--gold:#c9a87c;--green:#7cb896;--blue:#7ca8c9;--purple:#9c8cc9;--red:#c97c7c;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--t-xs:9px;--t-sm:10px;--t-md:11px;--t-lg:14px;--t-xl:20px;--t-2xl:28px;--t-3xl:clamp(2rem,6vw,3.5rem);--r-sm:3px;--r-md:6px;--r-lg:12px;--mono:'JetBrains Mono',ui-monospace,'Cascadia Code','Fira Code',monospace}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--mono);background:var(--bg);color:var(--fg);font-size:var(--t-md);line-height:1.6;min-height:100vh}
h1,h2,h3,h4{font-weight:700;color:var(--fg)}
h1{font-size:var(--t-3xl);letter-spacing:.02em;margin-bottom:var(--sp-2)}
h2{font-size:var(--t-lg);margin-bottom:var(--sp-3)}
h3{font-size:var(--t-md);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-dim);margin-bottom:var(--sp-2)}
p{margin-bottom:var(--sp-3);color:var(--fg-dim)}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:var(--t-sm);background:var(--raised);padding:1px 5px;border-radius:var(--r-sm);color:var(--green)}
.shell{max-width:1100px;margin:0 auto;padding:var(--sp-4)}
@media(max-width:700px){{.shell{padding:var(--sp-3)}}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
@media(max-width:700px){{.grid-2,.grid-3{grid-template-columns:1fr}}}
.topbar{position:sticky;top:0;z-index:100;background:rgba(3,3,5,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.topbar .brand{font-size:var(--t-sm);font-weight:700;background:linear-gradient(135deg,var(--gold),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.08em;text-transform:uppercase;margin-right:var(--sp-4)}
.topbar .brand:hover{-webkit-text-fill-color:var(--gold);text-decoration:none}
.topbar .nav-link{font-size:var(--t-xs);color:var(--fg-mute);padding:3px 8px;border:1px solid var(--border);border-radius:var(--r-sm);letter-spacing:.04em;transition:all .2s}
.topbar .nav-link:hover{border-color:var(--blue);color:var(--fg);text-decoration:none}
.topbar .nav-link.live{color:var(--green);border-color:rgba(124,184,150,.3)}
.topbar .nav-link.live:hover{border-color:var(--green)}
.topbar .spacer{flex:1}
@media(max-width:700px){{.topbar{gap:var(--sp-2);padding:var(--sp-2) var(--sp-3)}.topbar .brand{width:100%;margin-bottom:var(--sp-1)}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-3);transition:border-color .2s}
.card:hover{border-color:var(--border-h)}
.card h2{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:var(--sp-3);border-bottom:1px solid var(--border);padding-bottom:var(--sp-2)}
.card h2 a{color:inherit}.card h2 a:hover{color:var(--fg)}
.metric{display:flex;justify-content:space-between;padding:var(--sp-1) 0;border-bottom:1px solid rgba(26,26,36,.5);font-size:var(--t-sm)}
.metric:last-child{border:none}
.metric .k{color:var(--fg-mute)}
.metric .v{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.metric .v.ok{color:var(--green)}.metric .v.warn{color:var(--gold)}.metric .v.bad{color:var(--red)}
.tag{display:inline-block;font-family:var(--mono);font-size:var(--t-xs);padding:2px 7px;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--gold);margin-right:var(--sp-1);vertical-align:middle;letter-spacing:.04em}
.tag.ok{color:var(--green);border-color:rgba(124,184,150,.3)}
.tag.warn{color:var(--gold);border-color:rgba(201,168,124,.3)}
.tag.bad{color:var(--red);border-color:rgba(201,124,124,.3)}
.tag.blue{color:var(--blue);border-color:rgba(124,168,201,.3)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);margin:var(--sp-3) 0}
th,td{padding:var(--sp-2) var(--sp-3);text-align:left;border-bottom:1px solid var(--border)}
th{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--fg-mute);font-weight:400;background:var(--bg);position:sticky;top:0}
td{color:var(--fg-dim);font-variant-numeric:tabular-nums}
td.num{text-align:right}
tr:hover td{background:rgba(26,26,36,.3)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:var(--sp-1);vertical-align:middle}
.dot.ok{background:var(--green);box-shadow:0 0 4px var(--green)}
.dot.warn{background:var(--gold);box-shadow:0 0 4px var(--gold)}
.dot.bad{background:var(--red);box-shadow:0 0 4px var(--red)}
.dot.off{background:var(--fg-mute)}
.spark{font-size:var(--t-md);letter-spacing:1px;line-height:1;color:var(--green)}
.footer{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--border);text-align:center;font-size:var(--t-xs);color:var(--fg-mute);letter-spacing:.08em}
.footer .hebrew{direction:rtl}
.mono{font-family:var(--mono)}.dim{color:var(--fg-mute)}.small{font-size:var(--t-xs)}.right{text-align:right}