:root { color-scheme: dark; --bg:#090d14; --card:#111824; --line:#263144; --text:#edf3ff; --muted:#91a0b8; --blue:#67a7ff; --cyan:#64e6d2; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--text); background:radial-gradient(circle at 15% 0,#17243a 0,transparent 34rem),var(--bg); }
main { width:min(880px,calc(100% - 32px)); margin:0 auto; padding:72px 0 36px; }
header { margin-bottom:36px; }
.eyebrow { color:var(--cyan); font-size:12px; font-weight:800; letter-spacing:.18em; }
h1 { margin:10px 0 8px; font-size:clamp(42px,8vw,72px); line-height:1; letter-spacing:-.055em; }
.lead { color:var(--muted); font-size:18px; }
.card { margin:18px 0; padding:24px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--card) 92%,transparent); box-shadow:0 18px 60px #0004; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
h2 { margin:0; font-size:17px; }
.status,#artifact-count { color:var(--muted); font-size:12px; }
.status i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#43dc8c; box-shadow:0 0 12px #43dc8c; }
.copy-row { display:flex; gap:10px; }
code { font-family:"Cascadia Code","SFMono-Regular",Consolas,monospace; }
.copy-row code { flex:1; overflow:auto; padding:13px 15px; border-radius:9px; color:var(--blue); background:#080c13; white-space:nowrap; }
button { border:1px solid var(--line); border-radius:9px; padding:0 16px; color:var(--text); background:#182234; cursor:pointer; font-weight:650; }
button:hover { border-color:var(--blue); }
.tabs { display:flex; gap:6px; margin-bottom:14px; }
.tab { padding:9px 13px; color:var(--muted); background:transparent; }
.tab.active { color:var(--text); background:#1b2940; border-color:#38537b; }
.snippet { display:none; position:relative; }
.snippet.active { display:block; }
pre { overflow:auto; min-height:112px; margin:0; padding:18px; border-radius:10px; color:#bdd5f8; background:#080c13; line-height:1.6; }
.snippet > button { position:absolute; top:10px; right:10px; height:34px; font-size:12px; }
.artifact { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.artifact:first-child { border-top:0; }.artifact-name { color:var(--blue); }.artifact-version { color:var(--muted); }
.empty { margin:8px 0; color:var(--muted); }
footer { padding:24px; color:#66758c; text-align:center; font-size:12px; }
@media (max-width:600px) { main{padding-top:44px}.card{padding:18px}.copy-row{flex-direction:column}.copy-row button{height:40px}.tabs{overflow:auto}.tab{white-space:nowrap} }