/* lazy-senior-dev: one look for every persona site. Dark by default, light on toggle. */
:root {
  --bg: #0a0f1e; --bg-2: #0f1730; --panel: #121c38; --panel-2: #172247; --line: #223058;
  --text: #e8ecf5; --muted: #93a0bd; --faint: #5f6d8f;
  --accent: #5eb1ff; --accent-2: #8b7cff; --block: #ff8a65; --ok: #7fd88f; --warn: #ffd166;
  --grad: linear-gradient(90deg, #f4f7ff 0%, #b8c8ff 45%, #5eb1ff 100%);
  --cta: linear-gradient(135deg, #8b7cff, #5eb1ff);
  --ink: #e8ecf5;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --radius: 14px;
}
[data-theme="light"] {
  /* warm paper: the sticky-note yellow of a code review that is not going well */
  --bg: #fff6d6; --bg-2: #ffefb8; --panel: #fffdf5; --panel-2: #fff4cc; --line: #eddba0;
  --text: #1b1a17; --muted: #5a5238; --faint: #9a8f66;
  --accent: #b86e00; --accent-2: #e08a00; --block: #d9480f; --ok: #2f8f46; --warn: #e6a700;
  --grad: linear-gradient(90deg, #1b1a17 0%, #7a4b00 50%, #e08a00 100%);
  --cta: linear-gradient(135deg, #ffb703, #fb8500);
  --ink: #1b1a17;
}
[data-theme="light"] body::before { opacity: .45; }
[data-theme="light"] .btn.primary { color: #1b1a17; box-shadow: 0 10px 30px -10px rgba(251,133,0,.6); }
[data-theme="light"] .pill i { background: #2f8f46; }
[data-theme="light"] .stat b { color: #b86e00; }
[data-theme="light"] .term, [data-theme="light"] .cmd { background: #1b1a17; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .25; mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, pre, kbd { font-family: var(--mono); font-size: .9em; }
code { background: var(--panel-2); border: 1px solid var(--line); padding: .05em .4em; border-radius: 6px; }
pre { margin: 0; overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

/* header */
.top { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 1rem; height: 64px; }
.back { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.back:hover { color: var(--text); text-decoration: none; border-color: var(--accent); }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--cta); display: grid; place-items: center; color: #fff; font: 700 .8rem var(--mono); }
.nav { display: flex; gap: .25rem; margin-left: .5rem; }
.nav a { padding: .45rem .7rem; border-radius: 8px; color: var(--muted); font-size: .95rem; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--panel-2); text-decoration: none; }
.top .right { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.iconbtn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); display: grid; place-items: center; cursor: pointer; font-size: 1rem; }
.iconbtn:hover { border-color: var(--accent); }
.ghbtn { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 600; white-space: nowrap; }
.ghbtn:hover { border-color: var(--accent); text-decoration: none; }
.menubtn { display: none; }
@media (max-width: 900px) { .nav { display: none; } .top.open .nav { display: flex; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem 1rem 1rem; } .menubtn { display: grid; } .back span { display: none; } }

/* hero */
.hero { padding: 4.5rem 0 3rem; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font: 500 .85rem var(--mono); }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(127,216,143,.6); animation: pulse 2s infinite; }
h1.display { margin: 1.2rem 0 .8rem; font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: 1.05; letter-spacing: -.02em; font-weight: 800; }
h1.display .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { max-width: 46em; margin: 0 auto 1.6rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted); }
.ctas { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: 12px; font-weight: 700; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.btn:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.btn.primary { background: var(--cta); color: #fff; border: 0; box-shadow: 0 10px 30px -10px rgba(94,177,255,.7); }
.btn, .card, .stat { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }

/* sketch */
.sketch { display: inline-block; color: var(--ink); animation: floaty 6s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.sketch svg { width: clamp(200px, 28vw, 300px); height: auto; display: block; }
.sketch.dim { opacity: .55; }
.sketch .eye-closed { opacity: 0; animation: blinkClosed 5.2s infinite; }
.sketch .eye-open { animation: blinkOpen 5.2s infinite; }
.sketch .steam path { animation: steam 2.4s ease-in-out infinite; transform-origin: bottom; }
.sketch .steam path:nth-child(2) { animation-delay: .5s; }
.sketch .steam path:nth-child(3) { animation-delay: 1s; }
.sketch .led { animation: led 1.6s steps(1) infinite; }
.sketch .glint { animation: glint 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes blinkClosed { 0%, 94%, 100% { opacity: 0; } 95%, 98% { opacity: 1; } }
@keyframes blinkOpen { 0%, 94%, 100% { opacity: 1; } 95%, 98% { opacity: 0; } }
@keyframes steam { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes led { 0%, 45% { opacity: 1; } 50%, 100% { opacity: .15; } }
.sketch .brow { transform-origin: center; animation: furrow 7s ease-in-out infinite; }
.sketch .brow-r { animation-delay: .12s; }
.sketch .beat { transform-origin: center; animation: beat 2.2s ease-in-out infinite; }
.sketch .page { animation: turnPage 9s ease-in-out infinite; }
@keyframes furrow { 0%, 62%, 100% { transform: translateY(0) } 68%, 78% { transform: translateY(3px) } }
@keyframes beat { 0%, 70%, 100% { transform: scale(1) } 78% { transform: scale(1.12) } 86% { transform: scale(1) } }
@keyframes turnPage { 0%, 88%, 100% { opacity: 1 } 92%, 96% { opacity: .25 } }
@keyframes glint { 0%, 80%, 100% { opacity: 0; } 85% { opacity: .9; } 90% { opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(127,216,143,.55); } 70% { box-shadow: 0 0 0 10px rgba(127,216,143,0); } 100% { box-shadow: 0 0 0 0 rgba(127,216,143,0); } }

/* sections */
section { padding: 3.5rem 0; }
.eyebrow { font: 600 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: .8rem; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.01em; margin: 0 0 .6rem; }
.sub { color: var(--muted); max-width: 48em; margin: 0 0 1.6rem; }
.grid { display: grid; gap: 1rem; }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
a.card, a.card:hover { text-decoration: none; color: inherit; }
a.card h3 { color: var(--accent); }
.card h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.card p { margin: 0; color: var(--muted); }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; text-align: center; }
.stat b { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--accent); letter-spacing: -.02em; line-height: 1.1; }
.stat span { display: block; margin-top: .35rem; color: var(--muted); font: 500 .78rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* pipeline */
.pipe { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: .5rem 0 1rem; }
.pipe .node { flex: 1 1 150px; min-width: 150px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; position: relative; }
.pipe .node + .node { margin-left: 22px; }
.pipe .node + .node::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; height: 1px; background: var(--line); }
.pipe .node small { display: block; font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .25rem; }
.pipe .node b { display: block; font-size: 1rem; }
.pipe .node em { display: block; font-style: normal; color: var(--muted); font-size: .82rem; font-family: var(--mono); }
.pipe .node.hot { border-color: var(--block); box-shadow: 0 0 0 3px rgba(255,138,101,.12); }
.pipe .node.ok { border-color: var(--ok); }
.pipe-note { text-align: center; color: var(--faint); font: 500 .78rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* terminal and commands */
.term { background: #0b0f1c; border: 1px solid var(--line); color: #e6e9f2; border-radius: 14px; padding: 1rem 1.2rem; font-family: var(--mono); font-size: .9rem; line-height: 1.55; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
[data-theme="light"] .term { background: #121a30; }
.term .bar { display: flex; gap: 6px; margin-bottom: .8rem; }
.term .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a4466; display: block; }
.term pre { white-space: pre-wrap; word-break: break-word; }
.term .dim { color: #8a93ad; } .term .block { color: var(--block); font-weight: 700; } .term .ok { color: var(--ok); font-weight: 700; } .term .warn { color: var(--warn); }
.cursor::after { content: "▍"; animation: blinkc 1s steps(1) infinite; }
@keyframes blinkc { 50% { opacity: 0; } }
.cmd { background: #0b0f1c; border: 1px solid var(--line); color: #e6e9f2; border-radius: 12px; padding: .9rem 1rem; display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: start; }
[data-theme="light"] .cmd { background: #121a30; }
.cmd .label { grid-column: 1 / -1; color: #8a93ad; font: 600 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cmd pre { font-size: .85rem; white-space: pre-wrap; word-break: break-word; }
.cmd button { background: #1b2445; color: #e6e9f2; border: 1px solid #2c3866; border-radius: 8px; padding: .35rem .6rem; font: 600 .75rem var(--sans); cursor: pointer; }
.cmd button:hover { border-color: var(--accent); }

/* checklist */
ol.check { counter-reset: q; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem 1.4rem; }
ol.check li { counter-increment: q; padding-left: 2.6rem; position: relative; color: var(--muted); }
ol.check li strong { color: var(--text); }
ol.check li::before { content: counter(q); position: absolute; left: 0; top: .1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--cta); color: #fff; font: 700 .85rem/1.8rem var(--mono); text-align: center; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--panel); }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }

/* promise band */
.band { background: linear-gradient(135deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: 18px; padding: 2rem 2.2rem; }

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3.5rem; color: var(--muted); font-size: .95rem; }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
footer h4 { margin: 0 0 .5rem; color: var(--text); font-size: .95rem; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: .25rem 0; }
footer .by { border-top: 1px solid var(--line); padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
footer .by strong { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* recordings gallery */
.recs { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); margin-top: 1.4rem; }
.rec { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.08); transition: transform .25s ease, box-shadow .25s ease; }
.rec:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.rec img { display: block; width: 100%; height: auto; }
.rec figcaption { padding: .8rem .9rem; font-size: .9rem; border-top: 1px solid var(--line); }
.rec figcaption strong { display: block; margin-bottom: .45rem; }
.rec dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .35rem .8rem; }
.rec dl div { display: flex; flex-direction: column; }
.rec dt { color: var(--faint); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.rec dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.rec dd:first-line { font-weight: 600; }

/* what the recording cards mean */
.legend { display: grid; gap: .5rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 1.4rem; padding: .9rem 1rem; border: 1px dashed var(--line); border-radius: 12px; background: var(--panel); }
.legend div { display: flex; gap: .5rem; align-items: baseline; }
.legend dt { flex: 0 0 auto; font: 600 .72rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.legend dd { margin: 0; font-size: .88rem; color: var(--muted); }

/* the comparison */
.compare th:first-child { text-align: left; color: var(--muted); font-weight: 600; white-space: nowrap; }
.compare thead th { text-align: left; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.compare thead th:last-child { color: var(--accent); }
.compare td { vertical-align: top; color: var(--muted); }
.compare td.yes { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---------- animated hero art ----------
   The SVG has an intrinsic 880px width, so without this it forces the page wider than a phone
   and the right-hand panel is simply cut off. */
.hero-art,.flow-art{display:block;width:100%;max-width:880px;height:auto;margin:clamp(18px,3vw,28px) auto}
.hero-art img,.flow-art img{display:block;width:100%;height:auto;border-radius:16px}
.flows{display:grid;gap:clamp(20px,3vw,34px)}
.flow{text-align:center}
.flow h3{margin:0 0 .15rem;font-size:1.05rem}
.flow p{margin:0;color:var(--dim,#5a6b8c);font-size:.92rem}
.flow a{text-decoration:none;color:inherit;display:block}
.flow a:hover .flow-art img{transform:translateY(-3px);transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){.flow a:hover .flow-art img{transform:none}}

/* On a narrow phone the back link, the wordmark and three controls do not fit on one 64px row, so
   the header pushed the whole document about 30px wider than the viewport and every centred block
   below it read as cut off. Shed the least useful parts first: the back link's label, then the
   GitHub button, which the menu already links to. */
@media (max-width: 560px) {
  .top .wrap { gap: .55rem; }
  .top .back span { display: none; }
  .top .right { gap: .35rem; }
  .ghbtn { padding: .5rem .62rem; }
}
@media (max-width: 430px) {
  .ghbtn { display: none; }
  .brand { font-size: .98rem; }
}