:root{
  --paper:#FBFAF6; --ink:#1B1A16; --muted:#6F6C61; --line:#E6E3D8; --line-strong:#D6D2C4;
  --otblue:#0072B2; --otorange:#E69F00; --otteal:#009E73; --otpurple:#A85C86; --otgray:#5A5A5A;
  --grid:rgba(0,114,178,.05);
  --shadow:0 1px 0 var(--line-strong), 0 18px 40px -28px rgba(27,26,22,.45);
  --maxw:1180px; --gutter:28px;   /* single source of truth for the layout container */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; position:relative; min-height:100vh;
}
/* TikZ-style coordinate grid background */
.grid-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0,#000 40%,transparent 100%);
}
a{color:inherit}
code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.86em;
  background:#F1EFE6; padding:.08em .35em; border-radius:3px; border:1px solid var(--line)}

/* ---------- sticky nav bar ---------- */
.navbar{position:sticky; top:0; z-index:50; background:rgba(251,250,246,.86);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:11px var(--gutter);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.wordmark{display:inline-block; text-decoration:none; font-family:"Fraunces",serif;
  font-weight:900; font-size:26px; letter-spacing:-.02em; line-height:1}
.wordmark .tik{color:var(--otblue)}
.wordmark .caret{color:var(--otorange); animation:blink 1.2s steps(1) infinite; margin-left:.04em}
@keyframes blink{50%{opacity:0}}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap}
.nav-links a{font-family:"IBM Plex Sans",sans-serif; font-size:.92rem; color:var(--muted);
  text-decoration:none; padding:7px 11px; border-radius:7px; white-space:nowrap;
  transition:color .15s, background .15s}
.nav-links a:hover{color:var(--ink); background:#F1EFE6}
.nav-links a.active{color:var(--otblue)}
.nav-gh{color:var(--ink); font-weight:500}
.nav-gh .star{color:var(--otorange)}
/* hamburger toggle — hidden on desktop, shown at the mobile breakpoint */
.nav-toggle{display:none}
.nav-burger{display:none; width:42px; height:38px; flex:none; cursor:pointer; padding:0;
  border:1px solid var(--line); border-radius:9px; background:transparent;
  align-items:center; justify-content:center; flex-direction:column; gap:4px}
.nav-burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .2s ease, opacity .2s ease}

/* ---------- hero (elevated, centred search) ---------- */
.hero{max-width:760px; margin:0 auto; padding:54px 28px 12px; text-align:center}
.hero .eyebrow{margin:0 0 .4em; font-family:"IBM Plex Mono",monospace; font-size:.8rem;
  letter-spacing:.03em; color:var(--muted)}
.hero .lede{font-size:clamp(1.15rem,2.6vw,1.6rem); margin:0 auto .95em; max-width:30ch;
  font-family:"Fraunces",serif; font-weight:400; color:#34322b}
.hero-search{position:relative; max-width:640px; margin:0 auto}
#search{width:100%; padding:16px 18px 16px 48px; font:inherit; font-size:1.05rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-strong); border-radius:13px; box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s}
#search::placeholder{color:#A6A294}
#search:focus{outline:none; border-color:var(--otblue); box-shadow:0 0 0 4px rgba(0,114,178,.14)}
.hero-search::before{content:"\2315"; position:absolute; left:17px; top:50%;
  transform:translateY(-50%) rotate(-12deg); color:#A6A294; font-size:1.3rem; pointer-events:none}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; justify-content:center}
.chip{font:500 .85rem/1 "IBM Plex Mono",monospace; padding:7px 13px; cursor:pointer;
  background:#fff; color:var(--muted); border:1.5px solid var(--line-strong);
  border-radius:999px; transition:.15s}
.chip:hover{border-color:var(--otblue); color:var(--ink)}
.chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.result-count{color:var(--muted); font-size:.82rem; margin:12px 0 0; text-align:center;
  font-family:"IBM Plex Mono",monospace}

/* ---------- gallery ---------- */
.grid{
  max-width:var(--maxw); margin:6px auto 0; padding:14px var(--gutter) 60px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:20px;
}
.card{
  display:flex; flex-direction:column; text-decoration:none; background:#fff;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, border-color .18s;
  animation:rise .5s both; animation-delay:calc(var(--i,0) * 32ms);
}
@keyframes rise{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.card:hover{transform:translateY(-4px); border-color:var(--line-strong);
  box-shadow:0 1px 0 var(--line-strong),0 26px 50px -26px rgba(27,26,22,.55)}
.canvas{
  aspect-ratio:4/3; display:grid; place-items:center; padding:20px;
  background:
    linear-gradient(rgba(0,0,0,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.028) 1px,transparent 1px) #fcfcfa;
  background-size:18px 18px; border-bottom:1px solid var(--line);
}
.canvas img{max-width:100%; max-height:150px; width:auto; height:auto}
.card-meta{padding:13px 15px 16px}
.card-meta h3{margin:.35em 0 .15em; font-family:"Fraunces",serif; font-weight:600;
  font-size:1.12rem; letter-spacing:-.01em}
.domains{margin:0; color:var(--muted); font-size:.8rem;
  font-family:"IBM Plex Mono",monospace}
.empty{max-width:1180px; margin:0 auto; padding:0 28px 80px; color:var(--muted)}

/* ---------- badges ---------- */
.badge{display:inline-block; font:500 .68rem/1 "IBM Plex Mono",monospace;
  text-transform:uppercase; letter-spacing:.06em; padding:5px 8px; border-radius:5px;
  border:1px solid currentColor}
.badge-icon{color:var(--otteal)}
.badge-template{color:var(--otblue)}
.badge-example{color:var(--otpurple)}
.badge-skill{color:var(--otorange)}

/* ---------- item page ---------- */
.item{max-width:var(--maxw); margin:0 auto; padding:8px var(--gutter) 70px}
.back{display:inline-block; margin:6px 0 22px; color:var(--muted);
  font-family:"IBM Plex Mono",monospace; font-size:.85rem; text-decoration:none}
.back:hover{color:var(--otblue)}
.item-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:34px; align-items:start}
.item-canvas{
  background:
    linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px) #fff;
  background-size:22px 22px; border:1px solid var(--line); border-radius:12px;
  padding:30px; display:grid; place-items:center; box-shadow:var(--shadow); min-height:240px;
}
.item-canvas img{max-width:100%; max-height:360px}
.item-head h1{font-family:"Fraunces",serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(1.8rem,4vw,2.6rem); margin:.3em 0 .15em; line-height:1.05}
.item-head .lede{font-family:"Fraunces",serif; color:#34322b; margin:.2em 0 1em}
.skill-note{background:#FFF8EC; border:1px solid #F0DDB6; border-left:3px solid var(--otorange);
  padding:11px 14px; border-radius:7px; font-size:.9rem; color:#5b5341}
.meta-table{width:100%; border-collapse:collapse; margin:14px 0 4px; font-size:.9rem}
.meta-table th{text-align:left; width:96px; padding:7px 10px 7px 0; color:var(--muted);
  font-weight:500; vertical-align:top; font-family:"IBM Plex Mono",monospace; font-size:.82rem}
.meta-table td{padding:7px 0; border-bottom:1px solid var(--line)}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0}
.tag{font:.74rem/1 "IBM Plex Mono",monospace; color:var(--muted);
  background:#F1EFE6; border:1px solid var(--line); border-radius:999px; padding:5px 9px}

/* ---------- downloads ---------- */
.downloads{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:18px 0 0}
.dl-label{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--muted); margin-right:2px}
.dl-btn{font:500 .82rem "IBM Plex Mono",monospace; cursor:pointer; text-decoration:none;
  color:var(--ink); background:#fff; border:1.5px solid var(--line-strong);
  border-radius:8px; padding:7px 13px; transition:.15s}
.dl-btn:hover{border-color:var(--otblue); color:var(--otblue)}

/* ---------- code block ---------- */
.code-block{margin:34px 0 0; border:1px solid var(--line-strong); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow); background:#1c1b1f}
.code-head{display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:#26242b; border-bottom:1px solid #34313b}
.filename{font-family:"IBM Plex Mono",monospace; font-size:.82rem; color:#cfc9d6}
.copy{font:500 .8rem "IBM Plex Mono",monospace; cursor:pointer; color:#1c1b1f;
  background:var(--otorange); border:none; padding:7px 13px; border-radius:6px; transition:.15s}
.copy:hover{filter:brightness(1.08)}
.copy.done{background:var(--otteal); color:#fff}
.code-block pre{margin:0; padding:18px 16px; overflow:auto; max-height:560px}
.code-block code{background:none; border:none; padding:0; color:#e9e6f0;
  font-family:"IBM Plex Mono",monospace; font-size:.82rem; line-height:1.65; white-space:pre}
.usage{margin:34px 0 0; max-width:70ch}
.usage h2{font-family:"Fraunces",serif; font-weight:600; font-size:1.4rem; margin:0 0 .4em}
.license-note{color:var(--muted); font-size:.92rem}

/* ---------- footer ---------- */
.site-footer{max-width:1180px; margin:40px auto 0; padding:24px 28px 50px;
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px;
  justify-content:space-between; color:var(--muted); font-size:.86rem}
.site-footer .fw{font-family:"Fraunces",serif; font-weight:600; color:var(--ink)}

/* ---------- homepage sections (Icons / Templates / Examples) ---------- */
.group{max-width:var(--maxw); margin:10px auto 0; padding:0 var(--gutter); scroll-margin-top:74px}
.group[hidden]{display:none}
.group-head{display:flex; align-items:baseline; gap:12px; padding:20px 0 10px;
  border-bottom:1px solid var(--line-strong)}
.group-head h2{margin:0; font-family:"Fraunces",serif; font-weight:600;
  font-size:1.55rem; letter-spacing:-.01em}
.group-count{font-family:"IBM Plex Mono",monospace; font-size:.82rem; color:var(--muted);
  background:#F1EFE6; border:1px solid var(--line); border-radius:999px; padding:3px 9px}
.group .grid{max-width:none; margin:0; padding:18px 0 6px}

/* ---------- edit contract (template pages) ---------- */
.skill{margin:36px 0 0}
.skill-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px}
.skill-head h2{margin:0; font-family:"Fraunces",serif; font-weight:600; font-size:1.4rem}
.skill-head h2 span{font-family:"IBM Plex Sans",sans-serif; font-weight:400;
  font-size:.82rem; color:var(--muted)}
.skill-link-inline{font:500 .82rem "IBM Plex Mono",monospace; color:var(--otblue);
  text-decoration:none; white-space:nowrap}
.skill-link-inline:hover{text-decoration:underline}
.contract-params{width:100%; border-collapse:collapse; margin:.4em 0 .2em; font-size:.9rem}
.contract-params td{padding:6px 10px 6px 0; border-bottom:1px solid var(--line); vertical-align:top}
.contract-params td:first-child{width:34%; white-space:nowrap}
.param-def{color:var(--muted); font-size:.86em}
.skill-body{background:#fff; border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:var(--shadow)}
.skill-body>summary{cursor:pointer; padding:14px 16px; list-style:none;
  font-family:"IBM Plex Mono",monospace; font-size:.86rem; color:var(--otblue)}
.skill-body>summary::-webkit-details-marker{display:none}
.skill-body>summary::before{content:"▸ "; color:var(--otorange)}
.skill-body[open]>summary{border-bottom:1px solid var(--line)}
.skill-body[open]>summary::before{content:"▾ "}
.md{padding:8px 22px 22px; max-width:74ch}
.md h2,.md h3,.md h4{font-family:"Fraunces",serif; font-weight:600; letter-spacing:-.01em;
  margin:1.1em 0 .35em}
.md h2{font-size:1.25rem} .md h3{font-size:1.08rem} .md h4{font-size:.98rem}
.md p{margin:.5em 0}
.md ul,.md ol{padding-left:1.3em; margin:.5em 0}
.md li{margin:.2em 0}
.md a{color:var(--otblue)}
.md blockquote{border-left:3px solid var(--otorange); background:#FFF8EC;
  margin:.8em 0; padding:9px 13px; border-radius:6px; color:#5b5341; font-size:.92rem}
.md pre.md-code{background:#1c1b1f; border-radius:8px; padding:13px 14px; overflow:auto; margin:.7em 0}
.md pre.md-code code{background:none; border:none; padding:0; color:#e9e6f0;
  font-family:"IBM Plex Mono",monospace; font-size:.8rem; line-height:1.6; white-space:pre}

/* ---------- Home / marketing surface ---------- */
.home{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}

/* figure-led, centred hero — the figure is the largest element */
.showcase{max-width:880px; margin:0 auto; padding:50px 0 42px; text-align:center}
.showcase h1{font-family:"Fraunces",serif; font-weight:900; letter-spacing:-.025em;
  font-size:clamp(2rem,4.6vw,3rem); line-height:1.04; margin:0 0 .25em}
.show-lede{font-family:"Fraunces",serif; font-weight:400; color:#34322b;
  font-size:clamp(1.05rem,2vw,1.3rem); max-width:48ch; margin:0 auto 1.5em}
.show-lede em{font-style:italic; color:var(--otblue)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:1.4em}
.btn{display:inline-block; text-decoration:none; font-weight:600; font-size:.98rem;
  padding:12px 20px; border-radius:10px; transition:.15s; border:1.5px solid transparent}
.btn-primary{background:var(--otblue); color:#fff; box-shadow:0 10px 24px -12px rgba(0,114,178,.7)}
.btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-strong); color:var(--ink)}
.btn-ghost:hover{border-color:var(--otblue); color:var(--otblue)}

.how,.cta-band{padding:42px 0; border-top:1px solid var(--line)}
.how h2{font-family:"Fraunces",serif; font-weight:600;
  font-size:1.7rem; margin:0 0 20px; letter-spacing:-.01em}

/* hero figure carousel (Home) — one featured figure per slide, click to zoom */
.hero-carousel{margin:0 auto 1.1em; width:min(100%,860px); outline:none}
.hero-carousel:focus-visible{box-shadow:0 0 0 3px rgba(0,114,178,.22); border-radius:16px}
.hero-slide{display:none}
.hero-slide.active{display:block; animation:fade .25s both}
.hero-fig{margin:0}
.hero-zoom{display:block; width:100%; cursor:zoom-in; position:relative; padding:30px 30px 24px;
  border:1px solid var(--line); border-radius:14px; background:
    linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px) #fff;
  background-size:24px 24px; transition:border-color .15s, box-shadow .15s}
.hero-zoom:hover{border-color:var(--line-strong); box-shadow:var(--shadow)}
.hero-zoom:focus-visible{outline:2px solid var(--otblue); outline-offset:2px}
.hero-zoom img{display:block; width:100%; height:360px; object-fit:contain; margin:0 auto}
.zoom-hint{position:absolute; top:12px; right:12px; font:500 .72rem "IBM Plex Mono",monospace;
  color:var(--ink); background:rgba(255,255,255,.92); border:1px solid var(--line-strong);
  border-radius:999px; padding:5px 11px; box-shadow:var(--shadow); transition:opacity .15s}
.hero-cap{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px}
.hero-cap a{font-family:"Fraunces",serif; font-weight:600; font-size:1.12rem; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none}
.hero-cap a:hover{color:var(--otblue); text-decoration:underline}
.hero-dots{margin-top:14px}
.hero-dot{width:10px; height:10px; padding:0; cursor:pointer; border-radius:50%;
  background:#fff; border:1.5px solid var(--line-strong); transition:.15s}
.hero-dot:hover{border-color:var(--otblue)}
.hero-dot.active{background:var(--ink); border-color:var(--ink)}

/* lightbox modal */
.lightbox{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:4vh 4vw}
.lightbox[hidden]{display:none}
.lb-backdrop{position:absolute; inset:0; background:rgba(20,19,15,.72);
  backdrop-filter:blur(4px); animation:lbfade .2s both}
.lb-panel{position:relative; z-index:1; display:flex; align-items:center; gap:14px;
  width:min(96vw,1200px); max-height:92vh; animation:lbpop .22s cubic-bezier(.2,.7,.2,1) both}
.lb-fig{flex:1; min-width:0; margin:0; background:#fff; border-radius:16px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8); padding:24px 24px 16px; display:flex;
  flex-direction:column; max-height:92vh}
.lb-fig img{display:block; width:100%; height:auto; max-height:78vh; object-fit:contain; margin:0 auto}
.lb-cap{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px}
.lb-cap a{font-family:"Fraunces",serif; font-weight:600; font-size:1.1rem; color:var(--ink);
  text-decoration:none}
.lb-cap a:hover{color:var(--otblue); text-decoration:underline}
.lb-nav{flex:none; width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:1.2rem;
  background:rgba(255,255,255,.94); border:1.5px solid var(--line-strong); color:var(--ink); transition:.15s}
.lb-nav:hover{border-color:var(--otblue); color:var(--otblue)}
.lb-close{position:absolute; top:-6px; right:-6px; width:40px; height:40px; border-radius:50%;
  cursor:pointer; font-size:1.4rem; line-height:1; background:#fff; border:1.5px solid var(--line-strong);
  color:var(--ink); box-shadow:var(--shadow); transition:.15s}
.lb-close:hover{border-color:var(--otorange); color:var(--otorange)}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
@keyframes lbpop{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
.lightbox.no-anim .lb-backdrop,.lightbox.no-anim .lb-panel{animation:none}
body.lb-open{overflow:hidden}
@media(prefers-reduced-motion: reduce){
  .lb-backdrop,.lb-panel,.hero-slide.active{animation:none}
}

/* how it works */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.steps li{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:24px 22px; box-shadow:var(--shadow)}
.step-n{display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--ink); color:var(--paper); font-family:"Fraunces",serif; font-weight:600; margin-bottom:12px}
.steps h3{font-family:"Fraunces",serif; font-weight:600; font-size:1.15rem; margin:0 0 .3em}
.steps p{margin:0; color:#4a473f; font-size:.95rem}
.cta-band{text-align:center; border-bottom:none}
.cta-band h2{font-family:"Fraunces",serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0 0 .6em}
.cta-sub{color:var(--muted); font-size:.85rem; margin:1.1em 0 0; font-family:"IBM Plex Mono",monospace}

/* skills-in-action carousel */
.skills-demo{padding:42px 0; border-top:1px solid var(--line); text-align:center}
.skills-demo h2{font-family:"Fraunces",serif; font-weight:600; font-size:1.7rem; margin:0 0 .2em; letter-spacing:-.01em}
.skills-sub{color:var(--muted); margin:0 auto 22px; font-size:.95rem}
.carousel{display:flex; align-items:center; gap:10px}
.car-track{flex:1; min-width:0}
.demo-slide{display:none}
.demo-slide.active{display:block; animation:fade .25s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.demo-head{display:flex; align-items:baseline; justify-content:center; gap:10px; margin-bottom:14px}
.demo-dim{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.8rem; color:#fff;
  background:var(--otblue); border-radius:999px; padding:4px 11px}
.demo-tmpl{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--muted)}
.demo-trip{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center}
.demo-fig{margin:0; border:1px solid var(--line); border-radius:12px; padding:18px; background:
    linear-gradient(rgba(0,0,0,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.028) 1px,transparent 1px) #fcfcfa; background-size:18px 18px}
.demo-fig img{display:block; width:100%; max-height:220px; object-fit:contain; margin:0 auto}
.demo-fig figcaption{font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--muted);
  margin-top:8px; text-transform:uppercase; letter-spacing:.06em}
.demo-prompt{position:relative; max-width:200px; margin:0 auto}
.demo-prompt-label{display:block; font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px}
.demo-prompt code{display:block; background:#FFF8EC; border:1px solid #F0DDB6; border-radius:8px;
  padding:10px 12px; color:#5b5341; font-size:.84rem; line-height:1.4}
.demo-prompt::before,.demo-prompt::after{content:"→"; position:absolute; top:50%;
  transform:translateY(-50%); color:var(--otorange); font-size:1.1rem}
.demo-prompt::before{left:-15px} .demo-prompt::after{right:-15px}
.demo-changed{color:var(--muted); font-size:.85rem; margin:16px auto 0; max-width:62ch}
.car-nav{flex:none; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1.05rem;
  background:#fff; border:1.5px solid var(--line-strong); color:var(--ink); transition:.15s}
.car-nav:hover{border-color:var(--otblue); color:var(--otblue)}
.car-dots{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:20px}
.demo-dot{cursor:pointer; font:500 .76rem "IBM Plex Mono",monospace; color:var(--muted);
  background:#fff; border:1.5px solid var(--line-strong); border-radius:999px; padding:5px 11px; transition:.15s}
.demo-dot:hover{border-color:var(--otblue)}
.demo-dot.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* roadmap teaser */
.roadmap{padding:42px 0; border-top:1px solid var(--line)}
.roadmap h2{font-family:"Fraunces",serif; font-weight:600; font-size:1.4rem; margin:0 0 16px;
  letter-spacing:-.01em; color:var(--muted)}
.roadmap-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px}
.rm-card{border:1.5px dashed var(--line-strong); border-radius:14px; padding:20px 22px; background:rgba(255,255,255,.5)}
.rm-tag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--otorange); background:#FFF8EC; border:1px solid #F0DDB6;
  border-radius:999px; padding:4px 10px; margin-bottom:10px}
.rm-card h3{font-family:"Fraunces",serif; font-weight:600; font-size:1.2rem; margin:0 0 .3em}
.rm-card h3 span{font-family:"IBM Plex Mono",monospace; font-weight:400; font-size:.8rem; color:var(--muted); margin-left:6px}
.rm-card p{margin:0; color:#4a473f; font-size:.93rem}

/* ---------- skills page ---------- */
.skills-page{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.skills-intro{max-width:680px; margin:0 auto; padding:46px 0 8px; text-align:center}
.skills-intro h1{font-family:"Fraunces",serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(2rem,4.5vw,2.8rem); margin:0 0 .25em}
.skills-intro .lede{font-family:"Fraunces",serif; font-weight:400; color:#34322b;
  font-size:clamp(1.02rem,1.8vw,1.2rem); margin:0 auto}
.skills-intro .lede code{font-family:"IBM Plex Mono",monospace; font-size:.9em}
.skills-libwide,.skills-how,.skills-why{padding:36px 0; border-top:1px solid var(--line)}
.skills-libwide h2,.skills-how h2,.skills-why h2{font-family:"Fraunces",serif; font-weight:600;
  font-size:1.5rem; margin:0 0 6px; letter-spacing:-.01em}
.skills-index-sub{color:var(--muted); margin:0 0 20px; font-size:.92rem; max-width:620px}
.skills-steps{margin:0; padding:0; list-style:none; counter-reset:step;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.skills-steps li{counter-increment:step; position:relative; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:18px 20px 18px 54px;
  box-shadow:var(--shadow); color:#4a473f; font-size:.9rem; line-height:1.5}
.skills-steps li::before{content:counter(step); position:absolute; left:18px; top:16px;
  width:26px; height:26px; border-radius:50%; background:var(--otblue); color:#fff;
  font:600 .9rem "IBM Plex Sans",sans-serif; display:flex; align-items:center; justify-content:center}
.skills-steps strong{color:var(--ink)}
.skill-links{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.skill-link{display:block; text-decoration:none; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:18px 20px; box-shadow:var(--shadow);
  transition:transform .16s, border-color .16s, box-shadow .16s}
.skill-link:hover{transform:translateY(-3px); border-color:var(--line-strong)}
.skill-link h3{margin:0 0 .3em; font-family:"Fraunces",serif; font-weight:600; font-size:1.12rem;
  color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:8px}
.skill-link h3 span{color:var(--otblue); font-family:"IBM Plex Sans",sans-serif; font-weight:600}
.skill-link p{margin:0; color:#4a473f; font-size:.9rem}

/* Browse tool-surface header */
.hero-browse{padding-top:40px}
.browse-title{font-family:"Fraunces",serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(1.7rem,4vw,2.4rem); margin:0 0 .5em}

@media(max-width:980px){
  .lb-panel{flex-wrap:wrap; justify-content:center}
  .lb-nav{order:2}
}
@media(max-width:720px){
  :root{--gutter:18px}            /* one place sets the mobile gutter for every container */
  .item-top{grid-template-columns:1fr; gap:22px}
  /* navbar collapses to a hamburger; links become an overlay dropdown */
  .nav-inner{padding:10px var(--gutter); gap:10px; flex-wrap:nowrap; position:relative}
  .nav-burger{display:flex; position:absolute; right:var(--gutter); top:50%;
    transform:translateY(-50%)}
  .nav-links{position:absolute; top:calc(100% + 1px); left:0; right:0; margin:0;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0;
    background:rgba(251,250,246,.98); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line); box-shadow:0 14px 30px rgba(27,26,22,.09);
    max-height:0; overflow-y:hidden; transition:max-height .26s ease; padding:0 var(--gutter)}
  .nav-toggle:checked ~ .nav-links{max-height:80vh; overflow-y:auto; padding:4px var(--gutter) 10px}
  .nav-links a{padding:13px 6px; font-size:1rem; border-radius:0;
    border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:0}
  /* burger → X when open */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .hero{padding:34px 20px 8px}
  .showcase{padding:32px 0 26px}
  .steps{grid-template-columns:1fr}
  .hero-zoom{padding:18px}
  .hero-zoom img{height:240px}
  .zoom-hint{font-size:.66rem; padding:4px 8px}
  .lightbox{padding:2vh 3vw}
  .lb-fig{padding:14px}
  .lb-nav{width:40px; height:40px}
  .demo-trip{grid-template-columns:1fr; gap:12px}
  .demo-prompt{max-width:none}
  .demo-prompt::before,.demo-prompt::after{display:none}
  .carousel{gap:6px}
  .car-nav{width:34px; height:34px}
}