:root { color-scheme: dark; --gold:#fccd17; --gold-hi:#ffe58a; --ink:#f4f4f7; --dim:#a9adb6; --faint:#74787f; }
* { box-sizing:border-box }
body { margin:0; background:#050506; color:var(--ink); padding:28px 20px 64px;
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased }
main { max-width:640px; margin:0 auto }
main.mid { max-width:420px; margin-top:14vh; text-align:center }
h1 { margin:0; font-size:34px; letter-spacing:-.035em; font-weight:600 }
h2 { margin:0 0 8px; font-size:19px; letter-spacing:-.02em; font-weight:600 }
header { margin-bottom:30px }
.sub { margin:6px 0 0; color:var(--dim); font-size:15px }
.bar { height:6px; border-radius:99px; background:rgba(255,255,255,.09); margin-top:12px; overflow:hidden }
.bar i { display:block; height:100%; background:var(--gold); border-radius:99px }
.item { padding:20px 20px 22px; margin-bottom:12px; border-radius:18px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07) }
.item.new { border-color:rgba(252,205,23,.34); background:rgba(252,205,23,.06) }
.item p { margin:0 0 10px; color:var(--dim); font-size:15.5px }
.from { color:var(--faint); font-size:13px; margin-bottom:0 }
.empty { color:var(--faint) }
.go { color:var(--gold) }
form { margin-top:14px }
input { width:100%; padding:16px; border-radius:14px; text-align:center;
  font:600 26px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14) }
input:focus { outline:2px solid var(--gold); outline-offset:2px }
button { margin-top:12px; width:100%; padding:15px; border:0; border-radius:999px;
  background:var(--gold); color:#16120a; font:600 16px/1 inherit; cursor:pointer }
button.small { width:auto; padding:9px 16px; font-size:13.5px;
  background:rgba(255,255,255,.09); color:var(--ink) }
.bad { color:#ff8a6b; font-size:15px }
.foot { margin-top:26px; color:var(--faint); font-size:13.5px }

/* nav + chrome */
.nav { display:flex; align-items:center; justify-content:space-between; max-width:760px;
  margin:0 auto 26px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08) }
.brand { display:flex; align-items:center; gap:9px; font-weight:600; letter-spacing:-.02em }
.brand svg { width:22px; height:22px; display:block }
.nav-links { display:flex; gap:16px }
.nav-links a { color:var(--faint); text-decoration:none; font-size:14.5px }
.nav-links a.on, .nav-links a:hover { color:var(--gold) }
.pagefoot { max-width:760px; margin:44px auto 0; color:var(--faint); font-size:13px; text-align:center }

/* landing hero */
.hero { max-width:640px; margin:6vh auto 0; text-align:center }
.mark-well { width:132px; height:132px; margin:0 auto 26px; border-radius:30px; display:grid;
  place-items:center; border:1px solid rgba(252,205,23,.25);
  background:radial-gradient(circle at 50% 40%, rgba(252,205,23,.22), rgba(255,255,255,.03) 70%) }
.mark-well svg { width:78px; height:78px }
.display { font-size:clamp(30px,6vw,46px); line-height:1.04; letter-spacing:-.04em; font-weight:600; margin:0 }
.lede { color:var(--dim); font-size:17px; margin:16px auto 0; max-width:30em }
.cta { margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:12px }
.btn-a { display:inline-block; padding:14px 26px; border-radius:999px; background:var(--gold);
  color:#16120a; font-weight:600; text-decoration:none }

/* panels, directory, card */
.panel { max-width:640px; margin:0 auto 16px; padding:22px; border-radius:20px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08) }
.panel h1 { font-size:24px; margin:0 0 4px }
.panel-k { display:flex; justify-content:space-between; color:var(--faint); font-size:12.5px;
  text-transform:uppercase; letter-spacing:.09em; margin:0 0 6px }
.hit { display:grid; grid-template-columns:auto 1fr auto; gap:2px 12px; align-items:baseline;
  padding:15px 0; border-top:1px solid rgba(255,255,255,.06) }
.hit .yes { color:var(--gold); font-weight:600 }
.hit b { font-size:16px }
.hit .meta { grid-column:2; color:var(--dim); font-size:14px }
.hit .tag { color:var(--faint); font-size:12.5px; font-family:ui-monospace,Menlo,monospace }
.kv { display:grid; grid-template-columns:132px 1fr; gap:12px 16px; margin:16px 0 0 }
.kv dt { color:var(--faint); font-size:14px }
.kv dd { margin:0; font-size:15px }
.did { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  word-break:break-all; color:var(--dim) }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chip { padding:5px 12px; border-radius:999px; background:rgba(252,205,23,.1);
  border:1px solid rgba(252,205,23,.28); color:var(--gold-hi); font-size:13px }
.stamp { display:inline-block; padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:600 }
.stamp.ok { background:rgba(252,205,23,.14); color:var(--gold) }
.stamp.stale { background:rgba(255,255,255,.08); color:var(--faint) }
.actions { margin-top:20px; display:flex; gap:16px; flex-wrap:wrap }
.actions a { color:var(--gold); text-decoration:none; font-size:14.5px }
.lead { color:var(--dim); font-size:15px; margin:0 0 14px }
.skill { padding:9px 0; border-top:1px solid rgba(255,255,255,.05) }
.skill:first-child { border-top:0 }
.skill b { display:block; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--gold-hi) }
.skill span { color:var(--dim); font-size:14px }
details summary { cursor:pointer; color:var(--gold); margin:16px 0 8px; font-size:14px }
.raw { background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:14px; overflow-x:auto; font-size:12px; line-height:1.5; color:var(--dim); white-space:pre }