/* PrismLink — palette taken verbatim from the application shell (pages/shell.py:11) */
:root{
  --bg:#0f1115; --card:#1a1d24; --mut:#8b93a1; --acc:#4cc2ff;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --bd:#2a2f3a;
  --fg:#e7eaf0; --fg2:#cbd2dc;
  --spectrum:linear-gradient(90deg,#ef4444,#f59e0b,#facc15,#22c55e,#4cc2ff,#6366f1,#a855f7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- header ---- */
.top{
  position:sticky; top:0; z-index:20; background:#12141a;
  border-bottom:1px solid var(--bd);
}
.top .rule{height:2px; background:var(--spectrum)}
.topin{
  max-width:1060px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:34px; width:auto; display:block}
nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
nav a{
  color:var(--mut); padding:7px 13px; border-radius:7px; font-size:14.5px;
  border:1px solid transparent;
}
nav a:hover{color:var(--fg); background:#171b22; text-decoration:none}
nav a.on{color:var(--fg); background:var(--card); border-color:var(--bd)}

/* ---- layout ---- */
main{max-width:1060px; margin:0 auto; padding:52px 22px 90px}
.hero{padding:22px 0 44px; border-bottom:1px solid var(--bd); margin-bottom:44px}
.hero img.mark{height:104px; width:auto; margin:0 0 26px; display:block}
h1{font-size:40px; line-height:1.18; margin:0 0 18px; letter-spacing:-.4px; font-weight:650}
h1 .spec{
  background:var(--spectrum); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.lede{font-size:19px; color:var(--fg2); max-width:74ch; margin:0}
h2{
  font-size:23px; margin:46px 0 6px; font-weight:620; letter-spacing:-.2px;
  padding-left:13px; border-left:3px solid var(--acc);
}
h3{font-size:16.5px; margin:26px 0 6px; color:var(--fg); font-weight:620}
p{max-width:76ch; color:var(--fg2)}
p strong{color:var(--fg); font-weight:620}
ul{max-width:76ch; color:var(--fg2); padding-left:22px}
li{margin:7px 0}
li strong{color:var(--fg)}

/* ---- cards ---- */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); margin:24px 0}
.card{
  background:var(--card); border:1px solid var(--bd); border-radius:11px;
  padding:20px 21px; position:relative; overflow:hidden;
}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--spectrum); opacity:.85}
.card h3{margin:0 0 8px}
.card p{margin:0; font-size:14.6px; color:var(--mut)}
.card p strong{color:var(--fg2)}

/* ---- misc ---- */
.kv{display:grid; grid-template-columns:auto 1fr; gap:9px 26px; max-width:76ch; margin:20px 0; font-size:15px}
.kv dt{color:var(--mut)}
.kv dd{margin:0; color:var(--fg)}
code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px;
  background:#0d1015; border:1px solid var(--bd); border-radius:5px; padding:1.5px 6px; color:var(--fg2);
}
.note{
  background:#12161d; border:1px solid var(--bd); border-left:3px solid var(--acc);
  border-radius:8px; padding:15px 18px; margin:26px 0; max-width:76ch;
}
.note p{margin:0; font-size:15px}
.pill{
  display:inline-block; background:var(--card); border:1px solid var(--bd);
  border-radius:20px; padding:3px 13px; color:var(--mut); font-size:13px; margin:0 6px 6px 0;
}
.pill b{color:var(--fg)}
.mail{font-size:19px}

footer{
  border-top:1px solid var(--bd); margin-top:70px;
  color:var(--mut); font-size:13.5px;
}
.footin{
  max-width:1060px; margin:0 auto; padding:28px 22px 34px;
  display:flex; flex-direction:column; gap:12px;
}
footer a{color:var(--mut)}
.fbrand{color:var(--fg2)}
.fbrand strong{color:var(--fg); font-weight:620}
.fnav{display:flex; gap:18px; flex-wrap:wrap}
.fcopy{color:var(--mut); font-size:13px}

@media (max-width:640px){
  h1{font-size:30px}
  .lede{font-size:17px}
  main{padding:34px 18px 64px}
  .topin{padding:12px 16px; gap:14px}
  nav{margin-left:0; width:100%}
  .hero img.mark{height:74px}
}