/* Houjun Lab site — deep teal, mint and a warm amber spark (the flask mark's palette).
   Layout modelled on the VoxStage and Image MLX Lab sites. One stylesheet shared by the
   lab pages and every project page. No web fonts, no third-party anything; the pages
   must work with scripts switched off. */
:root{
  --ink:#152625;--muted:#4f6463;--faint:#7a8c8b;--line:#d8e3e1;--paper:#f3f7f6;--card:#ffffff;
  --brand:#0f766e;--brand-dark:#0d3b3c;--tint:#e3f2ef;--accent:#0f9d8a;--warm:#d9741f;
  --max:1080px;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#e3eeec;--muted:#a9bcba;--faint:#83979a;--line:#243a3a;--paper:#0a1716;--card:#102221;
        --brand:#7fe0cd;--brand-dark:#b5f0e3;--tint:#14302d;--accent:#7fe0cd;--warm:#f5a65b}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
a{color:var(--brand)}
a:hover{color:var(--brand-dark)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--card);padding:8px 12px;border-radius:8px;z-index:9}

/* header */
.top{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:21px;letter-spacing:-.6px;text-decoration:none;color:var(--ink)}
.brand small{font-weight:500;color:var(--faint);font-size:15px;letter-spacing:0}
.mark{width:32px;height:32px;border-radius:8px;display:block}
.top nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.top nav a{text-decoration:none;color:var(--muted)}
.top nav a:hover,.top nav a[aria-current=page]{color:var(--ink)}
.crumbs{font-size:13px;color:var(--faint);padding-top:22px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* hero */
.hero{padding:72px 0 40px}
.crumbs+.hero{padding-top:40px}
.eyebrow{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint);font-weight:600}
h1{font-size:clamp(36px,6vw,58px);line-height:1.12;letter-spacing:-1.6px;font-weight:600;margin:14px 0 18px}
h1 em{font-style:normal;color:var(--accent)}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:740px;margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.button{display:inline-block;padding:11px 18px;border-radius:10px;background:#0d3b3c;color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.button:hover{background:#062022;color:#fff}
.button.ghost{background:transparent;color:var(--brand);border:1px solid var(--line)}
.note{font-size:13px;color:var(--faint)}

/* sections */
section{padding:44px 0}
section+section{border-top:1px solid var(--line)}
h2{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.8px;line-height:1.25;margin:0 0 12px;font-weight:600}
h3{font-size:18px;margin:0 0 6px;letter-spacing:-.2px}
.sub{color:var(--muted);max-width:760px;margin:0 0 26px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:step;padding:0;margin:0}
.steps li{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.steps li::before{counter-increment:step;content:"0" counter(step);display:block;font:600 12px/1 monospace;color:var(--warm);margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}
.card p{margin:0;color:var(--muted);font-size:15px}
.card.placeholder{background:transparent;border-style:dashed}
.limits li,.plain li{margin:6px 0;color:var(--muted)}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--tint);color:var(--brand);margin-right:6px;vertical-align:1px;font-weight:600;letter-spacing:.3px}
.tag.live{background:color-mix(in srgb,var(--warm) 16%,transparent);color:var(--warm)}

/* project cards on the lab home page: the whole card is the link */
.project{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
.project:hover{border-color:var(--accent);color:inherit}
.project h3{margin-top:10px;font-size:21px}
.project .more{display:inline-block;margin-top:12px;color:var(--brand);font-weight:600;font-size:14px}

/* progress list on project pages */
.progress{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
.progress li{position:relative;padding:0 0 18px 22px;color:var(--muted)}
.progress li::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.progress li.done::before{background:var(--accent);border-color:var(--accent)}
.progress li.now::before{background:var(--warm);border-color:var(--warm)}
.progress strong{color:var(--ink)}

table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--faint);font-weight:600;font-size:13px}
.table-wrap{overflow-x:auto;margin:18px 0}

/* long-form pages */
.doc{max-width:760px;padding:56px 0 40px}
.doc h1{font-size:clamp(32px,5vw,44px)}
.doc h2{font-size:22px;margin-top:34px}
.doc p,.doc li{color:var(--ink)}
.doc .updated{color:var(--faint);font-size:13px}
.callout{background:var(--tint);border-left:3px solid var(--accent);padding:14px 18px;border-radius:0 10px 10px 0;margin:20px 0}
.callout.warn{border-left-color:var(--warm)}
code{font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--tint);padding:1px 5px;border-radius:5px}

/* footer */
footer{border-top:1px solid var(--line);padding:30px 0 50px;margin-top:30px;font-size:14px;color:var(--faint)}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .legal{margin-left:auto}
.spaced{margin-top:28px}
@media (max-width:720px){.grid.two{grid-template-columns:1fr}}
@media (max-width:640px){.top nav{margin-left:0;width:100%;padding-bottom:10px}.hero{padding-top:44px}footer .legal{margin-left:0}}