/* Houjun family look (2026-10 redesign), shared by /lab/, /tools/, /voxstage/ and /iml/.
   This copy: Houjun Tools (/tools/) — same teal as Houjun Lab.
   Light only. Warm paper, ink outlines, Cherry Lab yellow for highlights, and this site's own
   product colour for links and buttons (set in the block below). Fonts are the company's
   self-hosted Fraunces and Figtree at /assets/fonts/ on houjun.dev (same origin, so the CSP
   allows them); if they are missing, the system fonts take over. No scripts, no inline styles. */

@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-var.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --paper:#fbf7ef;--card:#fffdf8;--ink:#1f2933;--muted:#535e68;--line:#e4dccd;
  --accent:#f8b500;                       /* yellow: highlights only, never text */
  --tint-blue:#e1e9f2;--tint-sand:#f2e8d6;--tint-sage:#e2eae0;--tint-blush:#f3e3dd;--dot:#c5d3e2;
  --r-s:12px;--r-m:20px;--r-l:28px;--stroke:1.5px;
  --font-head:"Fraunces",Georgia,serif;
  --font-body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --soft:"SOFT" 100,"WONK" 0;--soft-wonk:"SOFT" 100,"WONK" 1;
  --max:1120px;
  color-scheme:light;
  /* this site's own colour */
  --brand:#0f766e;--brand-deep:#0b4f4a;--tint-main:#dcebe7;--btn-shadow:#b9d8d1;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:450 19px/1.7 var(--font-body);overflow-wrap:break-word;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%;min-width:0}   /* some pages use <main class="wrap doc">: without this, auto margins let a wide table stretch the page */
a{color:var(--brand);text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{color:var(--brand-deep)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.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}
h1,h2,h3{font-family:var(--font-head);color:var(--ink);font-variation-settings:var(--soft);text-wrap:balance}
strong{font-weight:700}

/* header */
.top{border-bottom:var(--stroke) solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:8px 18px;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;font:650 24px/1 var(--font-head);font-variation-settings:var(--soft);letter-spacing:-.005em;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand small{font:500 16px/1 var(--font-body);color:var(--muted)}
.mark{width:34px;height:34px;display:block;border-radius:9px}
span.mark{display:grid;place-items:center;background:var(--brand);color:#fff;border:var(--stroke) solid var(--ink);font:italic 650 22px/1 var(--font-head);font-variation-settings:var(--soft)}
.top nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;font-size:17px;font-weight:600}
.top nav a{text-decoration:none;color:var(--ink);padding:6px 12px;border-radius:999px;border:var(--stroke) solid transparent}
.top nav a:hover{background:var(--tint-main);border-color:var(--ink);color:var(--ink)}
.top nav a[aria-current=page]{background:var(--tint-main)}
/* "Houjun" drop-down: the whole family. "Houjun" links to the home page. With a mouse the menu opens
   on hover; on touch screens and from the keyboard the arrow beside it (a <details>) opens it. No scripts. */
.top .wrap{position:relative}
.top nav{order:1}
.drop{order:2;display:inline-flex;align-items:center;border-radius:999px;border:var(--stroke) solid var(--ink);background:var(--card);font-size:17px;font-weight:700}
.drop>a,.drop>a:hover{padding:6px 2px 6px 14px;color:var(--ink);text-decoration:none}
.drop details{display:flex}
.drop summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:6px 14px 6px 6px;min-height:34px;border-radius:0 999px 999px 0;color:var(--ink)}
.drop summary::-webkit-details-marker{display:none}
.drop summary{position:relative}
.drop summary::before{content:"";position:absolute;inset:-6px -4px}
.drop summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.drop:has(details[open]) summary::after{transform:translateY(2px) rotate(-135deg)}
.drop:has(details[open]){background:var(--tint-main)}
.drop .panel{position:absolute;z-index:20;top:calc(100% - 4px);left:20px;right:20px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 24px;padding:20px 24px 18px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r-m);box-shadow:6px 6px 0 var(--tint-main);font-size:17px;font-weight:400;visibility:hidden;opacity:0;transition:opacity .12s ease,visibility 0s linear .12s}
.drop:has(details[open]) .panel{visibility:visible;opacity:1;transition-delay:0s}
.drop .panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px}
@media (hover:hover) and (pointer:fine){
  .drop summary{pointer-events:none}
  .drop:hover{background:var(--tint-main)}
  .drop:hover summary::after{transform:translateY(2px) rotate(-135deg)}
  .drop:hover .panel{visibility:visible;opacity:1;transition-delay:0s}
  .drop .panel{transition:opacity .12s ease .1s,visibility 0s linear .22s}
}
.drop .ph{margin:0 0 6px;font:650 15px/1.3 var(--font-head);font-variation-settings:var(--soft);color:var(--muted)}
.drop .panel a{display:block;padding:4px 0;color:var(--ink);font-weight:600;text-decoration:none}
.drop .panel a:hover{color:var(--brand);text-decoration:underline}
.drop .panel .row{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 22px;margin:4px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.drop .panel .row a{color:var(--brand)}
@media (max-width:860px){.drop .panel{grid-template-columns:repeat(3,minmax(0,1fr))}}
.crumbs{font-size:16px;color:var(--muted);padding-top:24px}
.crumbs a{color:var(--muted);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

/* hero */
.hero{padding:60px 0 40px}
.crumbs+.hero{padding-top:30px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:13px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);background:var(--card);border:var(--stroke) solid var(--ink);border-radius:16px;padding:6px 14px}
.eyebrow::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent);border:var(--stroke) solid var(--ink)}
h1{font-size:clamp(40px,5.6vw,66px);line-height:1.08;letter-spacing:-.02em;font-weight:760;font-variation-settings:var(--soft-wonk);margin:22px 0 20px}
h1 em{font-style:normal;padding:0 .06em;background:url("marker.svg") no-repeat 0 92%/100% .42em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{font-size:clamp(20px,2.2vw,23px);color:var(--muted);max-width:760px;margin:0 0 28px}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* buttons: colours swap on hover (filled ↔ white), light shadow, yellow on hover */
.button{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;border:2px solid var(--brand);background:var(--brand);color:#fff;box-shadow:3px 3px 0 var(--btn-shadow);text-decoration:none;font-weight:700;font-size:18px;line-height:1.3;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease}
.button:hover{color:var(--brand);background:var(--card);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--accent)}
.button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--btn-shadow)}
.button.ghost{background:var(--card);color:var(--brand)}
.button.ghost:hover{background:var(--brand);color:#fff}
.note{font-size:16px;color:var(--muted)}

/* sections */
section{padding:46px 0}
h2{font-size:clamp(32px,4.2vw,44px);letter-spacing:-.02em;line-height:1.2;margin:0 0 14px;font-weight:760;font-variation-settings:var(--soft-wonk)}
h2::after{content:"";display:block;width:72px;height:12px;margin-top:10px;background:var(--brand);-webkit-mask:url("squiggle.svg") no-repeat left center/contain;mask:url("squiggle.svg") no-repeat left center/contain}
h3{font-size:23px;margin:0 0 6px;letter-spacing:-.005em;line-height:1.35;font-weight:650}
.sub{color:var(--muted);max-width:760px;margin:0 0 30px;font-size:20px}
.spaced{margin-top:28px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border:var(--stroke) solid var(--ink);border-radius:var(--r-m);padding:20px 20px 22px;box-shadow:4px 4px 0 var(--tint-main)}
.card p{margin:0;color:var(--muted);font-size:18px}
.card p+p{margin-top:10px}
.card.placeholder{background:transparent;border-style:dashed;box-shadow:none}
a.card,.project{display:block;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
a.card:hover,.project:hover{color:inherit;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent)}
.project h3{margin-top:8px;font-size:25px}
.project .more{display:inline-block;margin-top:14px;color:var(--brand);font-weight:700;font-size:17px}
.project:hover .more{text-decoration:underline}
.tag{display:inline-block;font-size:14px;line-height:1.5;padding:2px 11px;margin:0 6px 6px 0;border-radius:999px;border:var(--stroke) solid var(--ink);background:var(--tint-main);color:var(--ink);font-weight:700;vertical-align:1px}
.tag.live{background:var(--tint-sand)}

/* numbered steps: stickers on muted tints */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:22px;counter-reset:step;padding:0;margin:0}
.steps li{list-style:none;border:var(--stroke) solid var(--ink);border-radius:var(--r-m);padding:20px;background:var(--tint-main);color:var(--ink)}
.steps li:nth-child(4n+2){background:var(--tint-sand)}
.steps li:nth-child(4n+3){background:var(--tint-blue)}
.steps li:nth-child(4n){background:var(--tint-blush)}
.steps li::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:50%;border:var(--stroke) solid var(--ink);background:var(--accent);font:650 19px/1 var(--font-head);font-variation-settings:var(--soft);color:var(--ink)}
.steps li p{margin:6px 0 0;font-size:18px}

/* lists: yellow dots */
.limits,.plain{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:10px;max-width:820px}
.limits li,.plain li{position:relative;padding-left:28px;color:var(--muted)}
.limits li::before,.plain li::before{content:"";position:absolute;left:3px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--accent);border:var(--stroke) solid var(--ink)}
.limits li strong,.plain li strong{color:var(--ink)}

/* progress list on project pages */
.progress{list-style:none;padding:0;margin:0 0 0 9px;max-width:860px;border-left:2px dashed var(--ink)}
.progress li{position:relative;padding:0 0 22px 30px;color:var(--muted)}
.progress li:last-child{padding-bottom:0}
.progress li::before{content:"";position:absolute;left:-11px;top:7px;width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--ink)}
.progress li.done::before{background:var(--brand)}
.progress li.now::before{background:var(--accent)}
.progress strong{color:var(--ink)}

/* tables */
.table-wrap{overflow-x:auto;margin:20px 0;background:var(--card);border:var(--stroke) solid var(--ink);border-radius:var(--r-m);box-shadow:4px 4px 0 var(--tint-main)}
table{border-collapse:collapse;width:100%;font-size:17px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{color:var(--ink);font-weight:700;font-size:15px;background:var(--tint-sand)}
.table-wrap table{min-width:560px}

/* screenshots and figures */
figure{margin:0}
figcaption{font-size:16px;color:var(--muted);margin-top:12px}
.shot{border:2px solid var(--ink);border-radius:var(--r-m);overflow:hidden;box-shadow:6px 6px 0 var(--tint-main);background:var(--card)}
.shot img{width:100%}
figure.shot{margin:0}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;align-items:start}
.demos{display:grid;gap:40px}
.demos h3{margin-top:4px}
.demos p{margin:0 0 14px;color:var(--muted);font-size:18px;max-width:780px}

/* speech-bubble callout (tail at the bottom left) */
.callout{position:relative;background:var(--card);border:var(--stroke) solid var(--ink);border-radius:22px;padding:16px 22px;margin:26px 0 34px;max-width:820px;box-shadow:4px 4px 0 var(--tint-sand)}
.callout::before,.callout::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.callout::before{left:30px;bottom:-15px;border-width:15px 13px 0 0;border-color:var(--ink) transparent transparent transparent}
.callout::after{left:31.6px;bottom:-11.6px;border-width:12px 10px 0 0;border-color:var(--card) transparent transparent transparent}
.callout p{margin:0}
.callout p+p{margin-top:10px}
.callout.warn{background:#fff6dc}
.callout.warn::after{border-top-color:#fff6dc}

/* code */
code{font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--tint-main);padding:1px 6px;border-radius:6px}
.code{display:block;overflow:auto;font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;background:var(--card);border:var(--stroke) solid var(--ink);border-radius:var(--r-s);padding:14px 16px}
pre{margin:16px 0}
pre code{background:none;padding:0}

/* long-form pages */
.doc{max-width:820px;padding:56px 20px 40px}            /* the pages use class="wrap doc": keep the side padding */
.doc h1{font-size:clamp(36px,5vw,52px)}
.doc h2{font-size:28px;margin:40px 0 10px}
.doc h2::after{width:50px;height:9px;margin-top:6px}
.doc h3{margin-top:26px;font-size:21px}
.doc p,.doc li{color:var(--ink)}
.doc .updated{color:var(--muted);font-size:16px}
.doc ul,.doc ol{padding-left:24px}
.doc li::marker{color:var(--brand)}

/* footer */
footer{border-top:var(--stroke) solid var(--ink);background:var(--tint-sand);padding:30px 0 40px;margin-top:40px;font-size:17px;color:var(--muted)}
footer .wrap{display:flex;gap:10px 24px;flex-wrap:wrap;align-items:baseline}
footer nav{display:flex;gap:6px 18px;flex-wrap:wrap}
footer a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
footer a:hover{color:var(--brand);text-decoration-color:currentColor}
footer .legal{margin-left:auto}

@media (max-width:720px){.grid.two{grid-template-columns:1fr}}
@media (max-width:640px){
  body{font-size:18px}
  .top nav{margin-left:-8px;width:calc(100% + 8px);gap:0;font-size:15.5px;letter-spacing:-.01em}
  .top nav a{padding:5px 7px}
  .drop{order:1;margin-left:auto}
  .top nav{order:2}
  .drop{font-size:16px}
  .drop>a,.drop>a:hover{padding:4px 2px 4px 12px}
  .drop summary{padding:4px 11px 4px 5px;min-height:32px}
  .drop .panel{left:12px;right:12px;grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 18px;font-size:16px}
  .hero{padding-top:40px}
  footer .legal{margin-left:0}
  .pair{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.button,a.card,.project{transition:none}}

/* tool pages */
.toolhead{display:flex;align-items:center;gap:16px;margin-top:22px}
.toolhead img{width:72px;height:72px;border-radius:18px;border:var(--stroke) solid var(--ink);box-shadow:3px 3px 0 var(--tint-main)}
.toolhead h1{margin:0}
.url{display:block;margin-top:8px;word-break:break-all}
.card .icon{width:56px;height:56px;margin:0 0 10px}
.tool-icon{width:64px;height:64px;border-radius:16px;border:var(--stroke) solid var(--ink);box-shadow:3px 3px 0 var(--tint-main);margin:0 0 14px}
.diagram{margin:0 0 30px;padding:20px 22px;max-width:880px;background:var(--card);border:var(--stroke) solid var(--ink);border-radius:var(--r-m);box-shadow:4px 4px 0 var(--tint-main)}
.diagram img{width:100%}
.thumb-img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:var(--r-s);border:var(--stroke) solid var(--line);margin:0 0 14px}