/* Atlas showcase chrome — tokens verbatim from the engine (engine/atlas.html :root). */
:root{
  --abyss:#04090C; --ink:#0B151A; --ink2:#0F1D24; --line:#16303A;
  --text:#C9DCE2; --dim:#6E8792; --faint:#3E5560;
  --live:#3DFFA8; --working:#35C9D4; --partial:#E8A33D; --inprog:#4DB8FF;
  --planned:#5F7189; --blocked:#B060FF; --broken:#FF4D5E; --killed:#3A4750; --unknown:#7A8B94;
  --mono:"Cascadia Code","SF Mono",Consolas,ui-monospace,monospace;
  --disp:"Segoe UI Variable Display","Segoe UI",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--abyss);color:var(--text);font-family:var(--disp);min-height:100vh;
  background-image:radial-gradient(ellipse at 50% 30%, #071118 0%, #04090C 70%)}
a{color:var(--working)}
header.site{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:10px 22px;
  background:linear-gradient(180deg,rgba(4,9,12,.96),rgba(4,9,12,.82));border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
header.site h1{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;gap:9px}
header.site h1 a{color:var(--text);text-decoration:none}
header.site h1 small{font-family:var(--mono);font-weight:400;font-size:9px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase}
.hnav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.hbtn{background:none;border:1px solid transparent;color:var(--dim);border-radius:999px;padding:6px 12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;cursor:pointer;text-decoration:none}
.hbtn:hover{color:var(--text);border-color:var(--line);background:rgba(11,21,26,.8)}
.hbtn.on{color:var(--working);border-color:var(--line)}
main{max-width:1160px;margin:0 auto;padding:30px 22px 90px}
.lede{max-width:68ch;color:var(--dim);font-size:13.5px;line-height:1.65;margin:6px 0 26px}
.lede b{color:var(--text)}
h2.sect{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  margin:38px 0 6px;display:flex;align-items:center;gap:10px}
h2.sect::after{content:"";flex:1;height:1px;background:var(--line)}
p.purpose{max-width:70ch;color:var(--dim);font-size:12.5px;line-height:1.6;margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.libcard{background:rgba(11,21,26,.88);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.libcard .demo{padding:18px;display:flex;align-items:center;justify-content:center;min-height:96px;
  background:radial-gradient(ellipse at 50% 0%, #081319 0%, #060e13 80%);border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap}
.libcap{padding:11px 14px 12px}
.libcap .t{font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px}
.libcap .d{color:var(--dim);font-size:11.5px;line-height:1.55;margin-top:4px}
.libcap .src{font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:7px}
.badge{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.badge.live{color:var(--live);border-color:rgba(61,255,168,.35)}
.badge.partial{color:var(--partial);border-color:rgba(232,163,61,.35)}
.badge.planned{color:var(--planned)}
.report{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--faint);text-decoration:none;border:1px solid transparent;border-radius:6px;padding:2px 7px}
.report:hover{color:var(--broken);border-color:var(--line)}
#filter{background:rgba(11,21,26,.8);border:1px solid var(--line);color:var(--text);border-radius:999px;
  padding:7px 16px;font-family:var(--mono);font-size:11.5px;width:min(340px,80vw);outline:none;margin:4px 0 10px}
#filter:focus{border-color:var(--working)}
.count{font-family:var(--mono);font-size:10px;color:var(--faint);margin-left:10px}
/* kanban */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;align-items:start}
.col{background:rgba(11,21,26,.7);border:1px solid var(--line);border-radius:12px;padding:12px}
.col h3{margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.col h3 .dot{width:8px;height:8px;border-radius:50%}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:9px}
.card .t{font-weight:700;font-size:12.5px}
.card .d{color:var(--dim);font-size:11px;line-height:1.5;margin-top:4px}
.card .m{font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:6px}
.card a{font-family:var(--mono);font-size:9.5px}
footer{max-width:1160px;margin:0 auto;padding:20px 22px 40px;color:var(--faint);font-family:var(--mono);font-size:10px;border-top:1px solid var(--line)}
/* engine-widget demo styles reused on cards */
.vital{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-family:var(--mono);font-size:10.5px;color:var(--dim);border:1px solid var(--line)}
.vital .dot{width:7px;height:7px;border-radius:50%}
.chip{font-family:var(--mono);font-size:10px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.chip.bug{border-color:rgba(255,77,94,.4);color:var(--broken)}
.chip.safe{border-color:rgba(61,255,168,.25);color:var(--live)}
@media (max-width:700px){ header.site{gap:10px} main{padding:20px 14px 70px} }