/* Lasting Light — Claude Training. Matches lastinglight.ai tokens. */
:root {
  --bg: #000000;
  --surface: #0A0A0C;
  --surface-2: #111114;
  --surface-3: #18181C;
  --border: #16161A;
  --border-2: #24242A;
  --text: #FFFFFF;
  --text-2: #B4B4B0;
  --text-3: #67676A;
  --muted: #3D3D40;
  --blue: #1B3DE5;
  --blue-soft: #4D6BFF;
  --green: #4ADE80;
  --amber: #FBBF24;
  --font: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --max: 1280px;
  --gutter: 40px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  height: 68px; display: flex; align-items: center; gap: 28px;
}
.logo { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.logo-mark {
  width: 34px; height: 34px; background: var(--blue); border-radius: 6px;
  display: grid; place-items: center; flex: none;
}
.logo-mark svg { width: 18px; height: 18px; }
.logo-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  color: var(--blue-soft); border: 1px solid var(--border-2);
  padding: 4px 8px; border-radius: 3px; margin-left: 2px;
}
.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-2);
  padding: 8px 12px; border-radius: 5px; transition: color .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.active { color: var(--text); background: var(--surface-2); }
.nav-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-3); white-space: nowrap; }
.nav-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--border-2); color: var(--text); border-radius: 6px; padding: 8px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; cursor: pointer; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 110px 0 90px; border-bottom: 1px solid var(--border); overflow: hidden; }
.hero-glow {
  position: absolute; top: -340px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(27,61,229,.22), transparent 62%);
}
.kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em;
  color: var(--text-2); text-transform: uppercase; margin-bottom: 34px;
}
.kicker::before { content: ""; width: 8px; height: 8px; background: var(--blue); flex: none; }
.kicker .right { margin-left: auto; color: var(--text-3); letter-spacing: .18em; }
h1.display {
  font-size: clamp(56px, 9.5vw, 148px);
  font-weight: 800; line-height: .92; letter-spacing: -0.045em;
  max-width: 14ch;
}
h1.display .dim { color: var(--text-3); }
.hero-sub { max-width: 620px; margin-top: 36px; font-size: 19px; line-height: 1.6; color: var(--text-2); }
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-ctas { display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; padding: 16px 26px;
  border: 1px solid var(--border-2); transition: all .2s var(--ease);
}
.btn.primary { background: var(--blue); border-color: var(--blue); }
.btn.primary:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.btn.ghost:hover { border-color: var(--text-3); background: var(--surface-2); }
.btn .arr { font-family: var(--font-mono); }

/* ---------- ticker ---------- */
.ticker { border-bottom: 1px solid var(--border); overflow: hidden; padding: 16px 0; background: var(--surface); }
.ticker-track { display: flex; gap: 0; width: max-content; animation: tick 36s linear infinite; }
.ticker-track span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em;
  color: var(--text-3); white-space: nowrap; padding: 0 18px;
  display: flex; align-items: center; gap: 36px;
}
.ticker-track span::after { content: "◆"; color: var(--blue); font-size: 8px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- sections ---------- */
.section { padding: 96px 0; border-bottom: 1px solid var(--border); }
.sec-head {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em;
  color: var(--text-3); text-transform: uppercase; margin-bottom: 22px;
  display: flex; align-items: baseline; gap: 14px;
}
.sec-head b { color: var(--blue-soft); font-weight: 500; }
h2.sec-title {
  font-size: clamp(34px, 4.6vw, 60px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.02; max-width: 18ch; margin-bottom: 22px;
}
.sec-lede { font-size: 18px; color: var(--text-2); max-width: 640px; line-height: 1.65; }
.sec-lede strong, .sec-lede b { color: var(--text); }

/* ---------- big stats (studio-style) ---------- */
.bigstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-2); border: 1px solid var(--border-2); margin-top: 56px; }
.bigstat { background: var(--surface); padding: 40px 34px; }
.bigstat .num { font-size: clamp(44px, 5vw, 68px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.bigstat .num em { font-style: normal; color: var(--blue-soft); }
.bigstat .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--text-3); margin: 16px 0 10px; text-transform: uppercase; }
.bigstat p { font-size: 15px; color: var(--text-2); }

/* ---------- stack rows / numbered rows ---------- */
.rows { margin-top: 56px; border-top: 1px solid var(--border-2); }
.row {
  display: grid; grid-template-columns: 90px 300px 1fr; gap: 28px;
  padding: 34px 0; border-bottom: 1px solid var(--border-2); align-items: start;
}
.row .n { font-family: var(--font-mono); font-size: 13px; color: var(--blue-soft); padding-top: 6px; }
.row h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.row h3 .sub { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; color: var(--text-3); margin-top: 8px; text-transform: uppercase; }
.row p { color: var(--text-2); font-size: 16px; max-width: 60ch; }
.row p + p { margin-top: 12px; }
.row p strong, .row p b { color: var(--text); }

/* ---------- department directory ---------- */
.dept-list { margin-top: 56px; border-top: 1px solid var(--border-2); }
a.dept {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 28px; align-items: center;
  padding: 34px 0; border-bottom: 1px solid var(--border-2);
  transition: background .2s var(--ease), padding-left .25s var(--ease);
}
a.dept:hover { background: var(--surface); padding-left: 14px; }
a.dept .n { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); }
a.dept:hover .n { color: var(--blue-soft); }
a.dept .name { font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
a.dept .desc { font-size: 15px; color: var(--text-2); margin-top: 8px; max-width: 62ch; }
a.dept .go { font-family: var(--font-mono); font-size: 20px; color: var(--text-3); transition: color .2s, transform .25s var(--ease); }
a.dept:hover .go { color: var(--blue-soft); transform: translateX(6px); }

/* ---------- skill blocks ---------- */
.skills { margin-top: 56px; display: grid; gap: 20px; }
.skill { border: 1px solid var(--border-2); background: var(--surface); }
.skill-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 22px 28px; border-bottom: 1px solid var(--border);
}
.slug {
  font-family: var(--font-mono); font-size: 13px; color: var(--blue-soft);
  background: rgba(27,61,229,.12); border: 1px solid rgba(77,107,255,.3);
  padding: 5px 10px; border-radius: 4px;
}
.skill-head .what { font-size: 16px; font-weight: 600; }
.pill {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  color: var(--text-3); border: 1px solid var(--border-2); padding: 4px 9px; border-radius: 20px;
  text-transform: uppercase; white-space: nowrap;
}
.pill.mcp { color: var(--green); border-color: rgba(74,222,128,.35); }
.skill-body { padding: 24px 28px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.skill-body .col p { font-size: 15px; color: var(--text-2); }
.skill-body .col p + p { margin-top: 10px; }
.skill-body .col p strong, .skill-body .col p b { color: var(--text); }
.col-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--text-3); text-transform: uppercase; margin-bottom: 12px; }

/* prompt blocks placed directly inside a .row grid span the content column */
.row > .prompt { grid-column: 3; }

/* ---------- prompt blocks ---------- */
.prompt {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7;
  background: #050507; border: 1px solid var(--border-2); border-left: 3px solid var(--blue);
  padding: 18px 20px; color: var(--text-2); overflow-x: auto;
}
.prompt .you { color: var(--green); user-select: none; }
.prompt { position: relative; padding-right: 74px; }
.copybtn {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 4px; padding: 4px 9px; cursor: pointer;
  transition: all .18s var(--ease);
}
.copybtn:hover { color: var(--text); border-color: var(--text-3); }
.copybtn.ok { color: var(--green); border-color: rgba(74,222,128,.4); }
.prompt + .prompt { margin-top: 12px; }
.prompt em { font-style: normal; color: var(--text); }

/* ---------- callouts ---------- */
.callout {
  margin-top: 56px; border: 1px solid rgba(77,107,255,.35); background: rgba(27,61,229,.06);
  padding: 36px 40px;
}
.callout .co-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; color: var(--blue-soft); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.callout .co-kicker::before { content: ""; width: 8px; height: 8px; background: var(--blue); }
.callout h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.callout p { color: var(--text-2); font-size: 16px; max-width: 72ch; }
.callout p + p { margin-top: 12px; }
.callout p strong, .callout p b { color: var(--text); }
.callout.green { border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.04); }
.callout.green .co-kicker { color: var(--green); }
.callout.green .co-kicker::before { background: var(--green); }

/* ---------- checklist ---------- */
.checklist { margin-top: 56px; display: grid; gap: 1px; background: var(--border-2); border: 1px solid var(--border-2); }
.check { background: var(--surface); padding: 30px 34px; display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; }
.check .cn {
  width: 40px; height: 40px; border: 1px solid var(--border-2); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--blue-soft);
}
.check h4 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.check p { font-size: 15px; color: var(--text-2); max-width: 78ch; }
.check p strong, .check p b { color: var(--text); }
.check .prompt { margin-top: 14px; }

/* ---------- do / don't ---------- */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.dd { border: 1px solid var(--border-2); background: var(--surface); padding: 32px 34px; }
.dd h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 22px; }
.dd.do h3 { color: var(--green); }
.dd.dont h3 { color: var(--amber); }
.dd ul { list-style: none; display: grid; gap: 14px; }
.dd li { padding-left: 26px; position: relative; font-size: 15px; color: var(--text-2); }
.dd li strong, .dd li b { color: var(--text); }
.dd.do li::before { content: "▸"; position: absolute; left: 0; color: var(--green); }
.dd.dont li::before { content: "▸"; position: absolute; left: 0; color: var(--amber); }

/* ---------- dept page hero ---------- */
.dept-hero { padding: 96px 0 72px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.dept-hero h1 { font-size: clamp(52px, 8vw, 120px); font-weight: 800; letter-spacing: -0.045em; line-height: .95; }
.dept-hero h1 .dim { color: var(--text-3); }
.dept-hero .hero-sub { margin-top: 30px; }

/* three-up points */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-2); border: 1px solid var(--border-2); margin-top: 56px; }
.point { background: var(--surface); padding: 34px 30px; }
.point .pn { font-family: var(--font-mono); font-size: 12px; color: var(--blue-soft); margin-bottom: 18px; }
.point h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; line-height: 1.2; }
.point p { font-size: 14.5px; color: var(--text-2); }

/* ---------- prev/next ---------- */
.pn-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-2); border-top: 1px solid var(--border-2); }
.pn-nav a { background: var(--bg); padding: 44px var(--gutter); transition: background .2s var(--ease); }
.pn-nav a:hover { background: var(--surface); }
.pn-nav .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--text-3); text-transform: uppercase; margin-bottom: 12px; }
.pn-nav .t { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.pn-nav a.next { text-align: right; }

/* ---------- footer ---------- */
.foot { padding: 72px 0 48px; }
.foot-grid { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.foot .big { font-size: clamp(30px, 4vw, 52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; max-width: 16ch; }
.foot-links { margin-left: auto; display: grid; gap: 10px; font-size: 14px; color: var(--text-2); text-align: right; }
.foot-links a:hover { color: var(--text); }
.foot-meta { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--text-3); }
.foot-meta .r { margin-left: auto; }

/* ---------- window mockups (illustrative screenshots) ---------- */
.shot {
  border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden;
  margin-top: 16px; max-width: 720px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
}
.shot-bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: var(--surface-3); border-bottom: 1px solid var(--border-2);
}
.shot-bar .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.dot.r { background: #FF5F57; } .dot.y { background: #FEBC2E; } .dot.g { background: #28C840; }
.shot-bar .title {
  margin: 0 auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-3); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot-bar .url {
  margin: 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 20px;
  padding: 4px 16px; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shot-body {
  background: #050507; padding: 18px 22px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.9;
  color: var(--text-2); overflow-x: auto;
}
.shot-body .grn { color: var(--green); }
.shot-body .blu { color: var(--blue-soft); }
.shot-body .wht { color: var(--text); }
.shot-body .dim { color: var(--text-3); }
.shot.ps .shot-body { background: #012456; color: #E8E6ED; }
.shot.ps .shot-body .dim { color: #8FA3C8; }
.shot.ps .shot-body .grn { color: #7CE38B; }

/* desktop-app window mock */
.appmock { background: #0D0D10; }
.appmock .chatline { padding: 20px 22px 6px; font-size: 14px; color: var(--text-3); font-family: var(--font); }
.appmock .menu {
  margin: 12px 22px 0; max-width: 460px;
  background: #17171B; border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.appmock .menu .m-head { padding: 10px 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--text-3); text-transform: uppercase; border-bottom: 1px solid var(--border); }
.appmock .menu .mi { padding: 13px 16px; display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text-2); border-bottom: 1px solid var(--border); font-family: var(--font); }
.appmock .menu .mi:last-child { border-bottom: none; }
.appmock .menu .mi.sel { background: rgba(27,61,229,.16); color: var(--text); }
.appmock .menu .mi .mk { color: var(--blue-soft); font-family: var(--font-mono); width: 14px; flex: none; }
.appmock .menu .mi .sub { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.appmock .menu .mi .rec { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--green); border: 1px solid rgba(74,222,128,.35); border-radius: 12px; padding: 2px 8px; margin-left: 8px; }
.appmock .menu .mi .tog { margin-left: auto; width: 34px; height: 19px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--border-2); position: relative; flex: none; }
.appmock .menu .mi .tog::after { content: ""; position: absolute; top: 2px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--text-3); }
.appmock .menu .mi .tog.onn { background: var(--blue); border-color: var(--blue); }
.appmock .menu .mi .tog.onn::after { left: auto; right: 3px; background: #fff; }
.appmock .inputbar {
  margin: 16px 22px 22px; border: 1px solid var(--border-2); border-radius: 12px;
  background: #101014; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 14px; color: var(--text-2); font-family: var(--font);
}
.appmock .inputbar .ph { color: var(--text-3); }
.appmock .chip {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: 14px; padding: 3px 11px; white-space: nowrap;
}
.appmock .chip.hot { color: var(--blue-soft); border-color: rgba(77,107,255,.4); }
.appmock .chip.grn { color: var(--green); border-color: rgba(74,222,128,.35); }
.appmock .spacer { flex: 1; }

/* spotlight / start-menu search mock */
.searchmock {
  background: var(--surface-2); padding: 26px;
  display: grid; gap: 12px;
}
.searchmock .bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 10px;
  padding: 13px 16px; font-size: 16px; color: var(--text);
}
.searchmock .bar .mag { color: var(--text-3); font-size: 15px; }
.searchmock .bar .caret { display: inline-block; width: 2px; height: 18px; background: var(--blue-soft); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.searchmock .result {
  display: flex; align-items: center; gap: 12px;
  background: rgba(27,61,229,.18); border: 1px solid rgba(77,107,255,.3); border-radius: 8px;
  padding: 11px 16px; font-size: 14.5px; color: var(--text);
}
.searchmock .result .ico {
  width: 30px; height: 30px; border-radius: 7px; background: var(--surface-3);
  border: 1px solid var(--border-2); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--text-2); flex: none;
}
.searchmock .result .sub { margin-left: auto; font-size: 12px; color: var(--text-3); }

/* browser sign-in mock */
.browsermock { background: var(--surface-2); padding: 40px 26px; text-align: center; }
.browsermock .logo-c {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%;
  background: #D97757; display: grid; place-items: center;
  font-size: 22px; color: #fff; font-weight: 700; font-family: var(--font);
}
.browsermock h6 { font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 6px; font-family: var(--font); }
.browsermock p { font-size: 13.5px; color: var(--text-3); margin-bottom: 18px; }
.browsermock .fakebtn {
  display: block; max-width: 320px; margin: 8px auto 0;
  background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 8px;
  padding: 12px; font-size: 14px; color: var(--text);
}
.browsermock .fakebtn.hot { background: var(--blue); border-color: var(--blue); }

/* step-by-step walkthrough */
.steps { margin-top: 34px; }
.step {
  display: grid; grid-template-columns: 52px 1fr; gap: 20px;
  padding: 30px 0; border-top: 1px solid var(--border-2); align-items: start;
}
.step .sn {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blue);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: #fff;
}
.step h5 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--text-2); max-width: 72ch; }
.step p + p { margin-top: 8px; }
.step p strong, .step p b { color: var(--text); }
.step .prompt { margin-top: 14px; max-width: 720px; }
.step .hint { font-size: 13.5px; color: var(--text-3); margin-top: 10px; }
.skill-body.one { grid-template-columns: 1fr; }

/* resource cards */
.resources { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
a.resource {
  border: 1px solid var(--border-2); background: var(--surface); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
a.resource:hover { border-color: var(--blue-soft); background: var(--surface-2); }
a.resource .r-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--blue-soft); text-transform: uppercase; }
a.resource h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
a.resource p { font-size: 14.5px; color: var(--text-2); flex: 1; }
a.resource .r-go { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
a.resource:hover .r-go { color: var(--blue-soft); }

/* ---------- minimal 2-link nav (wizard page) ---------- */
.nav-links-minimal { display: flex; margin-left: auto; align-items: center; gap: 2px; }
.nav-links-minimal a {
  font-size: 14px; font-weight: 500; color: var(--text-2);
  padding: 8px 12px; border-radius: 5px; white-space: nowrap; transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links-minimal a:hover { color: var(--text); background: var(--surface-2); }
.nav-links-minimal .short-lbl { display: none; }
@media (max-width: 480px) {
  #wizNav0 .logo-tag { display: none; }
  .nav-links-minimal a { padding: 8px 8px; font-size: 13px; }
  .nav-links-minimal .full-lbl { display: none; }
  .nav-links-minimal .short-lbl { display: inline; }
}

/* ---------- onboarding wizard ---------- */
.wiz-bar { position: sticky; top: 68px; z-index: 40; height: 3px; background: var(--surface-3); }
.wiz-bar .fill { height: 100%; width: 0%; background: var(--blue-soft); transition: width .4s var(--ease-out); }
.wiz { max-width: 880px; margin: 0 auto; padding: 64px var(--gutter) 120px; }
.wiz-screen { display: none; }
.wiz-screen.on { display: block; animation: wizin .45s var(--ease-out) backwards; }
@keyframes wizin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.wiz-step-lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; color: var(--blue-soft); text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.wiz-step-lbl::before { content: ""; width: 8px; height: 8px; background: var(--blue); }
.wiz h2 { font-size: clamp(30px, 4.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 18px; }
.wiz .lede { font-size: 17px; color: var(--text-2); line-height: 1.65; max-width: 62ch; }
.wiz .lede strong, .wiz .lede b { color: var(--text); }
.wiz .body { margin-top: 28px; }
.wiz .body p { font-size: 16px; color: var(--text-2); max-width: 68ch; }
.wiz .body p + p { margin-top: 10px; }
.wiz .body p strong, .wiz .body p b { color: var(--text); }
.wiz .hint { font-size: 13.5px; color: var(--text-3); margin-top: 12px; }
.wiz-nav { display: flex; gap: 14px; margin-top: 44px; align-items: center; }
.wiz-nav .spacer { flex: 1; }
.wiz-back { background: none; border: 1px solid var(--border-2); color: var(--text-2); font-family: var(--font); font-size: 15px; font-weight: 600; padding: 15px 24px; cursor: pointer; transition: all .2s var(--ease); }
.wiz-back:hover { border-color: var(--text-3); color: var(--text); }
.wiz-next { background: var(--blue); border: 1px solid var(--blue); color: #fff; font-family: var(--font); font-size: 15px; font-weight: 600; padding: 15px 30px; cursor: pointer; transition: all .2s var(--ease); }
.wiz-next:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.os-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.os-card { background: var(--surface); border: 1px solid var(--border-2); padding: 38px 32px; cursor: pointer; text-align: left; font-family: var(--font); color: var(--text); transition: all .2s var(--ease); }
.os-card:hover { border-color: var(--blue-soft); background: var(--surface-2); transform: translateY(-2px); }
.os-card .os-ico { font-size: 34px; margin-bottom: 14px; display: block; }
.os-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.os-card p { font-size: 14px; color: var(--text-3); }
.dept-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
.dept-btn { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border-2); padding: 24px 26px; color: var(--text); transition: all .2s var(--ease); }
.dept-btn:hover { border-color: var(--blue-soft); background: var(--surface-2); padding-left: 32px; }
.dept-btn .dn { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.dept-btn .dt { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.dept-btn .da { margin-left: auto; font-family: var(--font-mono); color: var(--text-3); }
.dept-btn:hover .da { color: var(--blue-soft); }
.wiz .shot, .wiz .prompt { max-width: 100%; }
[data-os="mac"] .win-only { display: none; }
[data-os="win"] .mac-only { display: none; }
.mini-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.mini-skill { border: 1px solid var(--border-2); background: var(--surface); padding: 16px 18px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.mini-skill .slug { display: inline-block; margin-bottom: 8px; }
.kbd {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
  background: var(--surface-3); border: 1px solid var(--border-2); border-bottom-width: 3px;
  border-radius: 6px; padding: 2px 9px; white-space: nowrap;
}
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.duo-card { border: 1px solid var(--border-2); background: var(--surface); padding: 24px 24px; }
.duo-card.hot { border-color: rgba(77,107,255,.4); background: rgba(27,61,229,.07); }
.duo-card h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.duo-card .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--blue-soft); text-transform: uppercase; display: block; margin-bottom: 12px; }
.duo-card p { font-size: 14px; color: var(--text-2); }
.duo-card p b { color: var(--text); }
@media (max-width: 680px) { .mini-skills, .duo { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .os-choice, .dept-pick { grid-template-columns: 1fr; }
  .wiz { padding-top: 40px; }
}

/* ---------- skill library ---------- */
.filterbar {
  position: sticky; top: 68px; z-index: 30;
  background: rgba(0,0,0,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.filterbar .frow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.frow + .frow { margin-top: 12px; }
.flbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--text-3); text-transform: uppercase; margin-right: 4px; white-space: nowrap; }
.fchip {
  font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 20px;
  padding: 7px 16px; cursor: pointer; transition: all .18s var(--ease); white-space: nowrap;
}
.fchip:hover { border-color: var(--text-3); color: var(--text); }
.fchip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.fsearch {
  margin-left: auto; min-width: 200px; flex: 0 1 260px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 20px;
  color: var(--text); font-family: var(--font); font-size: 13.5px;
  padding: 8px 16px; outline: none; transition: border-color .18s var(--ease);
}
.fsearch::placeholder { color: var(--text-3); }
.fsearch:focus { border-color: var(--blue-soft); }
.fcount { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--text-3); white-space: nowrap; }
.lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 56px 0 96px; }
.skill-card {
  background: var(--surface); border: 1px solid var(--border-2);
  padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.skill-card:hover { border-color: var(--blue-soft); transform: translateY(-2px); }
.skill-card .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skill-card .top .pill { margin-left: auto; }
.skill-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.skill-card .desc { font-size: 14px; color: var(--text-2); flex: 1; }
.skill-card .desc b { color: var(--text); }
.skill-card .prompt { font-size: 12.5px; padding: 12px 14px; }
.skill-card .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.skill-card .tags span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 4px; padding: 3px 8px;
}
.skill-card.hide { display: none; }
.lib-empty { grid-column: 1 / -1; text-align: center; padding: 80px 0; color: var(--text-3); font-size: 16px; }
@media (max-width: 1020px) { .lib { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .lib { grid-template-columns: 1fr; }
  .fsearch { margin-left: 0; flex: 1 1 100%; }
  .filterbar { position: static; }
}
@media (max-width: 1400px) { .nav-meta { display: none; } }

/* ---------- command palette ---------- */
.cmdk-trigger {
  display: flex; align-items: center; gap: 8px; margin-left: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 7px;
  padding: 7px 12px; cursor: pointer; transition: all .18s var(--ease); white-space: nowrap;
}
.cmdk-trigger:hover { color: var(--text); border-color: var(--text-3); }
.cmdk-trigger kbd { font-family: var(--font-mono); font-size: 10.5px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 6px; }
.nav-search-mobile {
  display: none; align-items: center; gap: 8px; width: 100%;
  background: none; border: 1px solid var(--border-2); border-radius: 6px;
  color: var(--text); font-family: var(--font); font-size: 16px; font-weight: 500;
  padding: 12px 14px; margin-bottom: 6px; cursor: pointer;
}
.nav-search-mobile .mag { color: var(--text-3); font-size: 15px; }
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; opacity: 0; pointer-events: none; transition: opacity .16s var(--ease);
}
.cmdk-overlay.open { opacity: 1; pointer-events: auto; }
.cmdk-box {
  width: min(600px, 92vw); background: #0D0D10; border: 1px solid var(--border-2); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6); overflow: hidden;
  transform: translateY(-10px); transition: transform .16s var(--ease);
}
.cmdk-overlay.open .cmdk-box { transform: none; }
.cmdk-input {
  width: 100%; background: none; border: none; outline: none; color: var(--text);
  font-family: var(--font); font-size: 17px; padding: 20px 22px; border-bottom: 1px solid var(--border);
}
.cmdk-input::placeholder { color: var(--text-3); }
.cmdk-results { max-height: 54vh; overflow-y: auto; padding: 8px; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px;
  cursor: pointer; color: var(--text-2);
}
.cmdk-item.sel { background: rgba(27,61,229,.16); color: var(--text); }
.cmdk-item .ct { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-soft); border: 1px solid rgba(77,107,255,.35); border-radius: 4px; padding: 3px 7px; flex: none; }
.cmdk-item .cn { font-size: 14.5px; font-weight: 600; color: var(--text); }
.cmdk-item .cd { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; padding-left: 12px; }
.cmdk-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 14px; }
.cmdk-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.cmdk-foot kbd { background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 6px; margin-right: 4px; }

/* ---------- welcome-back personalization ---------- */
.wb-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--blue-soft);
  border: 1px solid rgba(77,107,255,.35); background: rgba(27,61,229,.08);
  border-radius: 20px; padding: 8px 16px;
}

/* ---------- quiz ---------- */
.quiz-q { margin-top: 48px; }
.quiz-q .qn { font-family: var(--font-mono); font-size: 12px; color: var(--blue-soft); margin-bottom: 10px; }
.quiz-q h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 18px; }
.quiz-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quiz-opt {
  background: var(--surface); border: 1px solid var(--border-2); padding: 20px 18px;
  text-align: left; cursor: pointer; transition: all .18s var(--ease); color: var(--text);
}
.quiz-opt:hover { border-color: var(--text-3); }
.quiz-opt.on { border-color: var(--blue-soft); background: rgba(27,61,229,.1); }
.quiz-opt .qt { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.quiz-opt .qd { font-size: 12.5px; color: var(--text-3); }
.quiz-result { margin-top: 48px; }
@media (max-width: 780px) { .quiz-opts { grid-template-columns: 1fr; } }

/* ---------- faq accordion ---------- */
.faq-list { margin-top: 48px; border-top: 1px solid var(--border-2); }
.faq-item { border-bottom: 1px solid var(--border-2); }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  background: none; border: none; color: var(--text); font-family: var(--font);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; padding: 24px 4px; cursor: pointer;
}
.faq-q .plus { margin-left: auto; font-family: var(--font-mono); font-size: 18px; color: var(--text-3); transition: transform .2s var(--ease); flex: none; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); color: var(--blue-soft); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s var(--ease-out); }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 4px 26px; font-size: 15.5px; color: var(--text-2); max-width: 74ch; line-height: 1.6; }
.faq-a-inner b { color: var(--text); }
.faq-a-inner p + p { margin-top: 10px; }

/* ---------- contribute form ---------- */
.cform { margin-top: 40px; display: grid; gap: 18px; max-width: 640px; }
.cform .frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--text-3); text-transform: uppercase; margin-bottom: 8px; }
.cform input, .cform select, .cform textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px;
  color: var(--text); font-family: var(--font); font-size: 15px; padding: 12px 14px; outline: none;
  transition: border-color .18s var(--ease);
}
.cform input:focus, .cform select:focus, .cform textarea:focus { border-color: var(--blue-soft); }
.cform textarea { resize: vertical; min-height: 100px; }
.cform .csubmit {
  justify-self: start; background: var(--blue); border: 1px solid var(--blue); color: #fff;
  font-family: var(--font); font-size: 15px; font-weight: 600; padding: 14px 28px; cursor: pointer;
  transition: all .2s var(--ease);
}
.cform .csubmit:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.cform .csubmit:disabled { opacity: .5; cursor: default; }
.cform-success { display: none; margin-top: 40px; padding: 30px 34px; border: 1px solid rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.cform-success.show { display: block; }
.cform-success h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.cform-success p { color: var(--text-2); font-size: 15px; }
.cform-error { display: none; color: #FF8080; font-size: 13.5px; margin-top: -6px; }
.cform-error.show { display: block; }
@media (max-width: 680px) { .cform .frow2 { grid-template-columns: 1fr; } }

/* ---------- MCP/API connector cards ---------- */
.conn-cat { margin-top: 56px; }
.conn-cat:first-child { margin-top: 40px; }
.conn-cat-lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--blue-soft);
  text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.conn-cat-lbl::before { content: ""; width: 7px; height: 7px; background: var(--blue); flex: none; }
.conn-grid { display: grid; gap: 14px; }
.conn-card { border: 1px solid var(--border-2); background: var(--surface); padding: 22px 26px; }
.conn-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.conn-top h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.conn-badge {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 4px; padding: 3px 8px; flex: none;
}
.conn-badge.official { color: var(--green); border: 1px solid rgba(74,222,128,.35); background: rgba(74,222,128,.06); }
.conn-badge.community { color: var(--blue-soft); border: 1px solid rgba(77,107,255,.35); background: rgba(27,61,229,.06); }
.conn-badge.diy { color: var(--text-3); border: 1px solid var(--border-2); }
.conn-desc { font-size: 14.5px; color: var(--text-2); margin-bottom: 14px; }
.conn-desc b { color: var(--text); }
.conn-card .prompt { font-size: 12.5px; margin-bottom: 10px; }
.conn-auth { font-size: 12.5px; color: var(--text-3); }
.conn-auth b { color: var(--text-2); }
@media (max-width: 680px) { .conn-card { padding: 20px 20px; } }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* CSS grid items default to min-width:auto, which respects a child's
   intrinsic content width (e.g. a long unbroken command in .prompt) and
   stretches the whole track past the viewport even though .prompt itself
   has overflow-x:auto to scroll that content internally. Force every grid
   item that can host a .prompt (or is one) back down to the track's actual
   width so that internal scrolling — not page-level overflow — is what
   handles a long command on narrow screens. */
.skill-body .col,
.conn-card,
.duo-card,
.check,
.point,
.row > .prompt,
.row > p {
  min-width: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .row { grid-template-columns: 60px 1fr; }
  .row p { grid-column: 2; }
  .row > .prompt { grid-column: 2; }
  .skill-body { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  :root { --gutter: 22px; }
  body { font-size: 16px; }
  .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: rgba(0,0,0,.97); border-bottom: 1px solid var(--border-2); flex-direction: column; align-items: stretch; padding: 12px var(--gutter) 20px; gap: 2px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 10px; font-size: 16px; }
  .nav-meta { display: none; }
  .nav-burger { display: block; }
  .cmdk-trigger { display: none; }
  .nav-search-mobile { display: flex !important; }
  .hero { padding: 72px 0 64px; }
  .section { padding: 68px 0; }
  .bigstats, .points, .dodont, .resources { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  a.dept { grid-template-columns: 1fr auto; }
  a.dept .n { display: none; }
  .row { grid-template-columns: 1fr; gap: 12px; }
  .row .n { padding-top: 0; }
  .row p { grid-column: auto; }
  .row > .prompt { grid-column: auto; }
  .check { grid-template-columns: 1fr; gap: 14px; }
  .pn-nav { grid-template-columns: 1fr; }
  .pn-nav a.next { text-align: left; }
  .foot-links { margin-left: 0; text-align: left; }
  .skill-head { padding: 18px 20px; }
  .skill-body { padding: 20px; }
  .callout { padding: 26px 24px; }
}