/* Dhia Boudjatit — portfolio
   Palette drawn from a circuit board: solder-mask green, copper, silkscreen white. */
:root{
  --mask:#12382c;        /* solder mask */
  --mask-deep:#0b281f;
  --mask-line:#25574a;   /* traces under mask */
  --copper:#d08a4c;      /* copper on green */
  --copper-ink:#8a4b1a;  /* copper for text on paper */
  --silk:#f1f4ee;        /* silkscreen */
  --paper:#eef1ec;
  --paper-2:#e3e8e2;
  --ink:#15221c;
  --muted:#52625a;
  --line:#c6cfc8;
  --fault:#b42b20;
  --ok:#2f7d52;
  --radius-s:4px;
  --radius-l:14px;
  --measure:68ch;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
svg text{font-family:var(--font)}
a{color:inherit}
p a,li a,.link{color:var(--copper-ink);text-decoration-thickness:1px;text-underline-offset:3px}
p a:hover,li a:hover,.link:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--silk);padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{line-height:1.08;margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-variation-settings:"wdth" 118;font-weight:750}
h3{font-size:1.35rem;font-variation-settings:"wdth" 108}
p{margin:0 0 1em;max-width:var(--measure)}
.lede{font-size:1.2rem;color:var(--muted);max-width:60ch}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--mask-deep) 94%,transparent);backdrop-filter:blur(8px);color:var(--silk);border-bottom:1px solid var(--mask-line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:1rem}
.nav .mark{font-weight:750;font-variation-settings:"wdth" 120;text-decoration:none;letter-spacing:.01em}
.nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;font-size:.95rem}
.nav ul a{text-decoration:none;opacity:.82;color:var(--silk)}
.nav ul a:hover,.nav ul a[aria-current]{opacity:1;color:var(--copper)}
@media (max-width:720px){.nav ul li.opt{display:none}.nav ul{gap:1rem}}

/* ---------- hero (the board) ---------- */
.hero{background:var(--mask);color:var(--silk);position:relative;overflow:hidden;padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem)}
.hero .traces{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.traces path{fill:none;stroke:var(--mask-line);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.traces path.cu{stroke:var(--copper);opacity:.85;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:route 1.8s .35s cubic-bezier(.6,.1,.2,1) forwards}
.traces circle{fill:var(--mask);stroke:var(--mask-line);stroke-width:2.2}
.traces circle.cu{stroke:var(--copper);opacity:0;animation:pad .3s 1.9s forwards}
@keyframes route{to{stroke-dashoffset:0}}
@keyframes pad{to{opacity:.9}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(3rem,8.4vw,6.6rem);font-variation-settings:"wdth" 125;font-weight:800;letter-spacing:-.025em;line-height:.92}
.hero h1 span{display:block;font-variation-settings:"wdth" 62;font-weight:300;letter-spacing:0;font-size:.42em;margin-top:.5rem;color:color-mix(in srgb,var(--silk) 78%,var(--mask))}
.hero .pitch{font-size:clamp(1.15rem,1.8vw,1.35rem);max-width:34ch;margin:1.6rem 0 1.4rem;line-height:1.45}
.avail{display:flex;gap:.7rem;align-items:flex-start;max-width:44ch;font-size:.98rem;color:color-mix(in srgb,var(--silk) 86%,var(--mask));margin-bottom:2rem}
.led{flex:none;width:10px;height:10px;border-radius:50%;background:#5fd38d;margin-top:.45em;box-shadow:0 0 0 3px rgba(95,211,141,.18),0 0 10px rgba(95,211,141,.6)}
.actions{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.15rem;border-radius:var(--radius-s);font-weight:600;text-decoration:none;font-size:.98rem;border:1.5px solid transparent;cursor:pointer;font-family:inherit;background:transparent}
.btn-cu{background:var(--copper);color:var(--mask-deep)}
.btn-cu:hover{background:#e09a5b}
.btn-ghost{border-color:color-mix(in srgb,var(--silk) 45%,transparent);color:var(--silk)}
.btn-ghost:hover{border-color:var(--silk)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.portrait{justify-self:center;position:relative;width:min(330px,80%)}
.portrait .pad{border-radius:50%;padding:12px;background:var(--mask);box-shadow:0 0 0 2.5px var(--copper),0 0 0 14px var(--mask),0 0 0 15.5px var(--mask-line)}
.portrait img{border-radius:50%;aspect-ratio:1;object-fit:cover;width:100%}
.portrait figcaption{position:absolute;right:-8%;bottom:6%;font-family:var(--mono);font-size:.72rem;color:var(--copper);letter-spacing:.04em}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.portrait{order:-1;justify-self:start;width:150px}.portrait figcaption{display:none}}

/* ---------- sections ---------- */
section{padding:clamp(3.5rem,7vw,6rem) 0}
.sec-head{display:grid;grid-template-columns:1fr 1.25fr;gap:2rem;align-items:end;margin-bottom:2.8rem}
.sec-head p{color:var(--muted);margin:0}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;gap:.8rem}}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* featured work: alternating wide rows */
.work{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
.work-row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.work-row:nth-child(even) .work-vis{order:2}
@media (max-width:860px){.work-row{grid-template-columns:1fr}.work-row:nth-child(even) .work-vis{order:0}}
.work-vis{background:var(--mask);border-radius:var(--radius-l);aspect-ratio:16/10;position:relative;overflow:hidden;display:grid;place-items:center;color:var(--silk);text-decoration:none}
.work-vis svg{width:88%;height:auto}
.work-vis img{width:100%;height:100%;object-fit:contain;background:#000}
.work-vis.light{background:var(--paper-2)}
.work-meta{font-size:.92rem;color:var(--muted);margin-bottom:.7rem;display:flex;flex-wrap:wrap;gap:.35rem 1rem}
.work-row h3{font-size:clamp(1.45rem,2.4vw,1.85rem);margin-bottom:.8rem}
.work-row h3 a{text-decoration:none}
.work-row h3 a:hover{color:var(--copper-ink)}
.status{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:600;padding:.18rem .6rem;border-radius:999px;border:1px solid currentColor}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-done{color:var(--ok)}
.s-prog{color:#a0620f}
.s-design{color:#3b5f9a}
.role{border-left:3px solid var(--copper);padding:.1rem 0 .1rem .9rem;margin:1rem 0 1.2rem;font-size:.98rem}
.role b{font-weight:650}
.readmore{font-weight:650;color:var(--copper-ink);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.readmore:hover{color:var(--ink)}

/* experience list */
.xp{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.xp li{display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.xp time{color:var(--muted);font-size:.95rem;font-variant-numeric:tabular-nums}
.xp h3{font-size:1.15rem;margin-bottom:.2rem}
.xp .org{color:var(--muted);margin:0 0 .5rem}
.xp p:last-child{margin-bottom:0}
@media (max-width:640px){.xp li{grid-template-columns:1fr;gap:.3rem}}

/* products (darker band) */
.band{background:var(--mask-deep);color:var(--silk)}
.band .sec-head p{color:color-mix(in srgb,var(--silk) 75%,var(--mask))}
.band a{color:var(--copper)}
.ventures{display:grid;grid-template-columns:1.35fr 1fr;gap:1.2rem}
.venture{border:1px solid var(--mask-line);border-radius:var(--radius-l);padding:1.8rem;background:var(--mask)}
.venture.big{grid-row:span 2}
.venture h3{margin-bottom:.3rem}
.venture .org{color:color-mix(in srgb,var(--silk) 70%,var(--mask));font-size:.95rem;margin-bottom:1rem}
.venture p{font-size:1rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0;padding:1rem 0;border-block:1px solid var(--mask-line)}
.split h4{margin:0 0 .4rem;font-size:.9rem;font-weight:650;color:var(--copper)}
.split ul{margin:0;padding-left:1.1rem;font-size:.95rem}
.split li{margin-bottom:.25rem}
.award{display:inline-block;background:var(--copper);color:var(--mask-deep);font-weight:700;font-size:.84rem;padding:.2rem .65rem;border-radius:999px;margin-bottom:.8rem}
@media (max-width:860px){.ventures{grid-template-columns:1fr}.venture.big{grid-row:auto}.split{grid-template-columns:1fr}}

/* smaller builds */
.builds{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.build{padding:1.6rem 1.6rem 1.6rem 0;border-bottom:1px solid var(--line)}
.build + .build{padding-left:1.6rem;border-left:1px solid var(--line)}
.build h3{font-size:1.12rem;margin-bottom:.4rem}
.build .when{color:var(--muted);font-size:.9rem;margin-bottom:.7rem}
.build p{font-size:.98rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem;padding:0;list-style:none}
.tags li{font-size:.8rem;padding:.12rem .5rem;border-radius:var(--radius-s);background:var(--paper-2);color:var(--muted)}
@media (max-width:900px){.builds{grid-template-columns:1fr}.build,.build + .build{padding:1.4rem 0;border-left:0}}

/* skills → evidence */
.skills{width:100%;border-collapse:collapse;font-size:.98rem}
.skills th,.skills td{text-align:left;vertical-align:top;padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--line)}
.skills th{width:24%;font-weight:650}
.skills td:last-child{color:var(--muted);width:30%}
.skills td:last-child a{color:var(--copper-ink)}
@media (max-width:700px){.skills,.skills tbody,.skills tr,.skills th,.skills td{display:block;width:auto!important}.skills th{border:0;padding-bottom:.2rem}.skills td{padding:.2rem 0}.skills tr{border-bottom:1px solid var(--line);padding:.8rem 0}.skills td{border:0}}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.about figure{margin:0;position:sticky;top:90px}
.about figure img{border-radius:var(--radius-l)}
.about figcaption{font-size:.9rem;color:var(--muted);margin-top:.7rem;max-width:52ch}
.about h3{margin:1.8rem 0 .6rem}
.facts{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;font-size:.98rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* footer / contact */
.contact{background:var(--mask);color:var(--silk);padding:clamp(3.5rem,7vw,5.5rem) 0 2rem}
.contact h2{font-variation-settings:"wdth" 125;font-size:clamp(2.2rem,5vw,3.6rem);max-width:16ch;margin-bottom:1.2rem}
.contact p{color:color-mix(in srgb,var(--silk) 80%,var(--mask))}
.contact .addr{font-size:1.15rem;margin:1.6rem 0;color:var(--silk)}
.contact .fine{margin-top:4rem;font-size:.85rem;opacity:.65;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* ---------- case study pages ---------- */
.cs-hero{background:var(--mask);color:var(--silk);padding:clamp(3rem,6vw,4.8rem) 0 clamp(2.5rem,5vw,3.6rem)}
.back{display:inline-block;margin-bottom:1.6rem;color:color-mix(in srgb,var(--silk) 80%,var(--mask));text-decoration:none;font-size:.95rem}
.back:hover{color:var(--copper)}
.cs-hero h1{font-size:clamp(2.2rem,5.2vw,4rem);font-variation-settings:"wdth" 118;font-weight:780;max-width:20ch;margin-bottom:1.1rem}
.cs-hero .lede{color:color-mix(in srgb,var(--silk) 82%,var(--mask))}
.factstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:2.2rem;border-top:1px solid var(--mask-line)}
.factstrip div{padding:1rem 1rem 0 0}
.factstrip dt{font-size:.85rem;color:var(--copper);margin-bottom:.2rem}
.factstrip dd{margin:0;font-size:.98rem}
@media (max-width:760px){.factstrip{grid-template-columns:1fr 1fr}}
.cs-body{display:grid;grid-template-columns:13rem 1fr;gap:3rem;padding:clamp(2.5rem,5vw,4rem) 0}
.toc{position:sticky;top:80px;align-self:start;font-size:.92rem}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;padding:.35rem 0 .35rem .9rem;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--muted)}
.toc a:hover,.toc a.on{color:var(--ink);border-left-color:var(--copper)}
@media (max-width:900px){.cs-body{grid-template-columns:1fr}.toc{display:none}}
.cs-body article{min-width:0}
.cs-body article > section{padding:0 0 3rem}
.cs-body article h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin-bottom:1rem;scroll-margin-top:80px}
.cs-body article ul,.cs-body article ol{max-width:var(--measure);padding-left:1.2rem}
.cs-body article li{margin-bottom:.4rem}
.callout{background:var(--paper-2);border-radius:var(--radius-s);padding:1.1rem 1.3rem;max-width:var(--measure);margin:1.2rem 0;font-size:.98rem}
.callout b{font-weight:650}
.callout.honest{border-left:4px solid #3b5f9a}
.callout.learn{border-left:4px solid var(--copper)}
.mine{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:var(--measure)}
.mine > div{border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem 1.2rem}
.mine h3{font-size:1rem;margin-bottom:.5rem}
.mine ul{margin:0;font-size:.96rem}
@media (max-width:640px){.mine{grid-template-columns:1fr}}
figure.fig{margin:1.5rem 0;max-width:820px}
figure.fig img{border-radius:var(--radius-s);border:1px solid var(--line)}
figure.fig figcaption{font-size:.9rem;color:var(--muted);margin-top:.6rem;max-width:var(--measure)}
pre{background:#10231c;color:#dfe7e1;border-radius:var(--radius-s);padding:1.1rem 1.3rem;overflow:auto;font-family:var(--mono);font-size:.84rem;line-height:1.55;max-width:820px}
pre .c{color:#7f9a8c}
pre .k{color:#e3a36a}
code{font-family:var(--mono);font-size:.88em}
p code,li code{background:var(--paper-2);padding:.05rem .3rem;border-radius:3px}
.next-proj{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.5rem}

/* ---------- interactive diagrams ---------- */
.diagram{background:var(--mask);border-radius:var(--radius-l);padding:clamp(1rem,3vw,2rem);color:var(--silk);max-width:900px;margin:1.5rem 0}
.diagram svg{width:100%;height:auto;display:block}
.diagram .hint{font-size:.9rem;color:color-mix(in srgb,var(--silk) 72%,var(--mask));margin:0 0 1rem}
.node{cursor:pointer}
.node rect{fill:var(--mask-deep);stroke:var(--mask-line);stroke-width:2;transition:stroke .15s,fill .15s}
.node text{fill:var(--silk);font-family:var(--font);font-size:15px;font-weight:600;pointer-events:none}
.node text.sub{font-family:var(--mono);font-size:11.5px;font-weight:400;fill:#a9bdb3}
.node:hover rect,.node:focus rect{stroke:var(--copper)}
.node:focus{outline:none}
.node:focus-visible rect{stroke:var(--copper);stroke-width:3.5}
.node.on rect{stroke:var(--copper);fill:#1b4a3b}
.node.fault rect{stroke:var(--fault)}
.node.fault.on rect{fill:#4a1f1a}
.node.todo rect{stroke-dasharray:6 5}
.wire{fill:none;stroke:var(--copper);stroke-width:2.2}
.wire.todo{stroke-dasharray:6 6;opacity:.55}
.wire.bad{stroke:var(--fault)}
.panel{margin-top:1.2rem;border-top:1px solid var(--mask-line);padding-top:1rem;min-height:7.5rem}
.panel h3{font-size:1.1rem;margin-bottom:.4rem;color:var(--copper)}
.panel p{font-size:.98rem;margin-bottom:.5rem;color:var(--silk)}
.diagram .controls{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.diagram .btn{font-size:.9rem;padding:.5rem .9rem}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.85rem;color:color-mix(in srgb,var(--silk) 75%,var(--mask));margin-top:.8rem}
.legend span::before{content:"";display:inline-block;width:22px;height:0;border-top:2.2px solid var(--copper);vertical-align:middle;margin-right:.45rem}
.legend span.todo::before{border-top-style:dashed;opacity:.6}
.legend span.bad::before{border-color:var(--fault)}

/* traffic light sim */
.tlc{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.lights{display:flex;gap:1.6rem}
.light{display:grid;gap:.5rem;justify-items:center;font-size:.85rem;color:#a9bdb3}
.housing{background:#081c15;border-radius:14px;padding:.6rem;display:grid;gap:.5rem;border:1.5px solid var(--mask-line)}
.lamp{width:30px;height:30px;border-radius:50%;background:#1d2c26;transition:background .2s,box-shadow .2s}
.lamp.r.on{background:#ff4d3d;box-shadow:0 0 14px #ff4d3d}
.lamp.y.on{background:#ffc53d;box-shadow:0 0 14px #ffc53d}
.lamp.g.on{background:#4ee08a;box-shadow:0 0 14px #4ee08a}
.fsm .st circle{fill:var(--mask-deep);stroke:var(--mask-line);stroke-width:2;transition:all .2s}
.fsm .st.on circle{stroke:var(--copper);fill:#1b4a3b;stroke-width:3}
.fsm text{fill:var(--silk);font-family:var(--font);font-size:14px;text-anchor:middle}
.fsm text.s{font-weight:700;font-size:16px}
.fsm text.o{font-size:11px;fill:#a9bdb3}
.fsm .arc{fill:none;stroke:var(--mask-line);stroke-width:1.8}
.fsm .arc.hot{stroke:var(--copper)}
.toggle{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.95rem}
.toggle input{width:42px;height:24px;appearance:none;background:var(--mask-line);border-radius:99px;position:relative;cursor:pointer;margin:0}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--silk);transition:left .15s}
.toggle input:checked{background:var(--copper)}
.toggle input:checked::after{left:21px}
@media (max-width:700px){.tlc{grid-template-columns:1fr}}

/* channel bars (gowell) */
.bars rect{fill:var(--mask-line)}
.bars rect.sat{fill:var(--fault)}

@media (max-width:820px){.traces path.cu,.traces circle.cu{display:none}.hero .traces{opacity:.5}}

/* =========================================================
   v2: hub, category pages, icons
   ========================================================= */
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
.ic.fill-dots circle.d{fill:currentColor;stroke:none}

/* loader */
.loader{position:fixed;inset:0;z-index:50;background:var(--mask-deep);display:grid;place-items:center;transition:opacity .45s ease,visibility .45s}
.loader.done{opacity:0;visibility:hidden}
.loader svg{width:min(560px,86vw)}
.loader .lt{fill:none;stroke:var(--copper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:route 1.1s .1s cubic-bezier(.6,.1,.2,1) forwards}
.loader .lp{fill:var(--mask-deep);stroke:var(--copper);stroke-width:3;opacity:0;animation:pad .2s 1.15s forwards}
.loader .lg{fill:#5fd38d;opacity:0;animation:glow .5s 1.25s forwards}
.loader .ln{fill:var(--silk);font-family:var(--font);font-size:44px;font-weight:800;font-variation-settings:"wdth" 125;opacity:0;animation:pad .5s 1.3s forwards}
.loader .ls{fill:#a9bdb3;font-family:var(--font);font-size:16px;opacity:0;animation:pad .5s 1.5s forwards}
@keyframes glow{0%{opacity:0}50%{opacity:1}100%{opacity:.9}}
.loader .skip-btn{position:absolute;bottom:2rem;right:2rem;background:none;border:1px solid var(--mask-line);color:#a9bdb3;border-radius:999px;padding:.45rem 1rem;font:inherit;font-size:.9rem;cursor:pointer}
.loader .skip-btn:hover{color:var(--silk);border-color:var(--silk)}

/* hub */
.hub{min-height:100svh;background:var(--mask);color:var(--silk);position:relative;overflow:hidden;display:flex;flex-direction:column}
.hub-board{flex:1;display:grid;grid-template-columns:1fr minmax(300px,1.3fr) 1fr;grid-template-rows:1fr 1fr;gap:2.2rem 3rem;align-items:center;width:min(1200px,100% - 2.5rem);margin:0 auto;padding:5.5rem 0 2rem;position:relative}
.hub-center{grid-column:2;grid-row:1 / span 2;text-align:center;display:grid;justify-items:center;gap:.9rem;position:relative;z-index:2}
.hub-center .portrait{width:190px;justify-self:center}
.hub-center h1{white-space:nowrap;font-size:clamp(2.1rem,3.9vw,3.3rem);font-variation-settings:"wdth" 122;font-weight:800;letter-spacing:-.02em;margin-top:.6rem}
.hub-center .who{font-size:1.08rem;color:color-mix(in srgb,var(--silk) 82%,var(--mask));max-width:30ch;margin:0}
.hub-center .avail{justify-content:center;margin:0;text-align:left;font-size:.93rem}
.hub-prompt{font-size:.95rem;color:var(--copper);margin:.4rem 0 0}
.tile{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;align-items:center;padding:1.3rem 1.4rem;border-radius:var(--radius-l);background:var(--mask-deep);border:1.5px solid var(--mask-line);text-decoration:none;color:var(--silk);transition:border-color .2s,transform .2s,background .2s}
.tile .tic{grid-row:span 2;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--mask);border:1.5px solid var(--mask-line);color:var(--copper);transition:all .2s}
.tile .tic .ic{width:26px;height:26px}
.tile b{font-size:1.25rem;font-variation-settings:"wdth" 112;font-weight:700}
.tile span{font-size:.93rem;color:#a9bdb3}
.tile .go{position:absolute;right:1.1rem;top:1.1rem;color:var(--mask-line);transition:all .2s}
.tile:hover,.tile:focus-visible,.tile.lit{border-color:var(--copper);transform:translateY(-3px);background:#0f3428}
.tile:hover .tic,.tile:focus-visible .tic,.tile.lit .tic{background:var(--copper);color:var(--mask-deep);border-color:var(--copper)}
.tile:hover .go,.tile:focus-visible .go{color:var(--copper);transform:translateX(3px)}
.t-about{grid-column:1;grid-row:1}.t-exp{grid-column:1;grid-row:2}.t-proj{grid-column:3;grid-row:1}.t-start{grid-column:3;grid-row:2}
.hub-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hub-wires path{fill:none;stroke:var(--mask-line);stroke-width:2.2;stroke-linejoin:round;transition:stroke .2s}
.hub-wires path.lit{stroke:var(--copper)}
.hub-wires circle{fill:var(--copper);opacity:0}
.hub-wires circle.run{opacity:1}
.hub-foot{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;padding:0 1rem 2rem;position:relative;z-index:2}
@media (max-width:900px){
  .hub-board{grid-template-columns:1fr;grid-template-rows:auto;gap:.9rem;padding-top:5rem}
  .hub-center{grid-column:1;grid-row:auto;margin-bottom:1.2rem}
  .hub-center .portrait{width:130px}
  .t-about,.t-exp,.t-proj,.t-start{grid-column:1;grid-row:auto}
  .hub-wires{display:none}
}
.hub .nav{position:absolute;inset:0 0 auto 0;background:transparent;border:0}

/* page header (category pages) */
.page-head{background:var(--mask);color:var(--silk);padding:clamp(2.8rem,6vw,4.2rem) 0 clamp(2.4rem,5vw,3.4rem);position:relative;overflow:hidden}
.page-head .crumb{display:inline-flex;align-items:center;gap:.4rem;color:#a9bdb3;text-decoration:none;font-size:.93rem;margin-bottom:1.3rem}
.page-head .crumb:hover{color:var(--copper)}
.page-head h1{font-size:clamp(2.3rem,5vw,3.8rem);font-variation-settings:"wdth" 120;font-weight:800;letter-spacing:-.02em;margin-bottom:.8rem;display:flex;align-items:center;gap:1rem}
.page-head h1 .tic{width:58px;height:58px;border-radius:14px;background:var(--copper);color:var(--mask-deep);display:grid;place-items:center;flex:none}
.page-head h1 .tic .ic{width:30px;height:30px}
.page-head p{color:color-mix(in srgb,var(--silk) 82%,var(--mask));font-size:1.12rem;max-width:56ch;margin:0}
.cat-switch{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.8rem}
.cat-switch a{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:999px;border:1px solid var(--mask-line);color:#c9d6cf;text-decoration:none;font-size:.9rem}
.cat-switch a:hover{border-color:var(--copper);color:var(--silk)}
.cat-switch a[aria-current]{background:var(--copper);border-color:var(--copper);color:var(--mask-deep);font-weight:600}
.block{padding:clamp(2.6rem,5vw,4rem) 0}
.block-title{font-size:clamp(1.5rem,2.6vw,2rem);font-variation-settings:"wdth" 115;margin-bottom:1.4rem;display:flex;align-items:center;gap:.6rem}
.block-title .ic{color:var(--copper-ink)}

/* about */
.intro-row{display:grid;grid-template-columns:auto 1fr;gap:2.2rem;align-items:center}
.intro-row .portrait{width:150px;justify-self:start}
@media (max-width:640px){.intro-row{grid-template-columns:1fr}.intro-row .portrait{width:110px}}
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.journey::before{content:"";position:absolute;left:12.5%;right:12.5%;top:27px;border-top:2.5px dashed var(--copper)}
.journey li{text-align:center;position:relative;padding:0 .6rem}
.journey .dot{width:56px;height:56px;border-radius:50%;background:var(--mask);color:var(--copper);display:grid;place-items:center;margin:0 auto .8rem;border:3px solid var(--paper);position:relative}
.journey .dot .ic{width:24px;height:24px}
.journey b{display:block;font-size:1.05rem}
.journey span{font-size:.92rem;color:var(--muted)}
@media (max-width:700px){.journey{grid-template-columns:1fr 1fr;row-gap:1.6rem}.journey::before{display:none}}
.bento{display:grid;grid-template-columns:.75fr 1.25fr;gap:1rem}
.bento figure{height:min(520px,70vw)}
.bento figure{margin:0;position:relative;border-radius:var(--radius-l);overflow:hidden;background:var(--paper-2)}
.bento img{width:100%;height:100%;object-fit:cover}
.bento .tall{grid-row:span 2}
.bento figcaption{position:absolute;left:.8rem;bottom:.8rem;background:rgba(11,40,31,.82);color:var(--silk);padding:.35rem .75rem;border-radius:999px;font-size:.88rem;display:flex;align-items:center;gap:.45rem;backdrop-filter:blur(4px)}
@media (max-width:700px){.bento{grid-template-columns:1fr}.bento .tall{grid-row:auto}}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.chips li{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.98rem}
.chips li .ic{color:var(--copper-ink)}
.story{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;background:var(--mask);color:var(--silk);border-radius:var(--radius-l);overflow:hidden}
.story img{width:100%;height:100%;object-fit:cover;min-height:280px}
.story > div{padding:2rem 2rem 2rem 0}
.story h3{font-size:1.5rem;margin-bottom:1rem;font-variation-settings:"wdth" 115}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:.8rem;align-items:start;font-size:.98rem;color:#d5dfd9}
.steps li .n{width:34px;height:34px;border-radius:50%;background:var(--mask-deep);border:1.5px solid var(--copper);color:var(--copper);display:grid;place-items:center}
.steps li .n .ic{width:17px;height:17px}
@media (max-width:800px){.story{grid-template-columns:1fr}.story > div{padding:0 1.5rem 1.8rem}}

/* projects grid */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.filters button{font:inherit;font-size:.92rem;padding:.45rem .95rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;gap:.45rem;align-items:center}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.pcard:hover,.pcard:focus-visible{border-color:var(--copper);transform:translateY(-3px)}
.pcard .vis{background:var(--mask);aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.pcard .vis svg{width:86%}
.pcard .vis img{width:100%;height:100%;object-fit:contain;background:#000}
.pcard .body{padding:1.2rem 1.3rem 1.3rem;display:grid;gap:.55rem;flex:1;align-content:start}
.pcard .top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.88rem;color:var(--muted)}
.pcard h3{font-size:1.2rem;display:flex;gap:.55rem;align-items:center}
.pcard h3 .ic{color:var(--copper-ink)}
.pcard p{margin:0;font-size:.97rem;color:var(--muted)}
.pcard .more{margin-top:.3rem;font-weight:650;color:var(--copper-ink);display:inline-flex;gap:.35rem;align-items:center;font-size:.95rem}
.pcard.hide,.mini.hide{display:none}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mini{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:1.2rem 1.3rem}
.mini .mic{width:44px;height:44px;border-radius:11px;background:var(--mask);color:var(--copper);display:grid;place-items:center;margin-bottom:.8rem}
.mini .mic .ic{width:22px;height:22px}
.mini h3{font-size:1.08rem;margin-bottom:.25rem}
.mini .when{font-size:.86rem;color:var(--muted);margin-bottom:.6rem}
.mini p{font-size:.95rem;color:var(--muted);margin:0 0 .5rem}
.mini details summary{cursor:pointer;color:var(--copper-ink);font-weight:600;font-size:.93rem;list-style:none;display:inline-flex;gap:.3rem;align-items:center}
.mini details summary::-webkit-details-marker{display:none}
.mini details[open] summary .ic{transform:rotate(90deg)}
.mini details p{margin-top:.6rem}
@media (max-width:900px){.pgrid,.minis{grid-template-columns:1fr}}

/* experience timeline */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:27px;top:10px;bottom:10px;border-left:2.5px solid var(--line)}
.tl > li{display:grid;grid-template-columns:56px 1fr;gap:1.4rem;padding-bottom:2.2rem;position:relative}
.tl .node-ic{width:56px;height:56px;border-radius:50%;background:var(--mask);color:var(--copper);display:grid;place-items:center;border:4px solid var(--paper);z-index:1}
.tl .node-ic .ic{width:24px;height:24px}
.tl .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:1.3rem 1.5rem}
.tl .meta{display:flex;flex-wrap:wrap;gap:.3rem 1rem;color:var(--muted);font-size:.9rem;margin-bottom:.35rem}
.tl .meta span{display:inline-flex;gap:.35rem;align-items:center}
.tl h3{font-size:1.25rem;margin-bottom:.15rem}
.tl .org{color:var(--copper-ink);font-weight:600;margin:0 0 .8rem}
.ticks{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.45rem}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:.55rem;font-size:.97rem}
.ticks li .ic{color:var(--ok);width:18px;height:18px;margin-top:.2em}
.linkrow{display:inline-flex;gap:.35rem;align-items:center;font-weight:650;color:var(--copper-ink);text-decoration:none;font-size:.95rem}
.linkrow:hover{color:var(--ink)}

/* startups */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.stat{border-top:2px solid var(--copper);padding-top:.8rem}
.stat b{display:block;font-size:clamp(1.6rem,3vw,2.2rem);font-variation-settings:"wdth" 120;font-weight:800;color:var(--silk)}
.stat span{font-size:.9rem;color:#a9bdb3}
.footnote{font-size:.85rem;color:#a9bdb3;margin-top:1rem}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.apps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.app{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:1.3rem;display:grid;gap:.4rem}
.app .mic{width:44px;height:44px;border-radius:11px;background:var(--mask);color:var(--copper);display:grid;place-items:center}
.app b{font-size:1.08rem}
.app span{font-size:.94rem;color:var(--muted)}
@media (max-width:760px){.apps3{grid-template-columns:1fr}}
.showcase > *{min-width:0}
.showcase{display:grid;grid-template-columns:270px 1fr;gap:2rem;align-items:start;background:var(--mask);border-radius:var(--radius-l);padding:clamp(1.2rem,3vw,2.2rem);color:var(--silk)}
.feat-tabs{display:grid;gap:.5rem}
.feat-tabs button{font:inherit;text-align:left;display:grid;grid-template-columns:38px 1fr;gap:.75rem;align-items:center;padding:.75rem .85rem;border-radius:10px;border:1.5px solid var(--mask-line);background:var(--mask-deep);color:var(--silk);cursor:pointer;transition:all .15s}
.feat-tabs button .mic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--mask);color:var(--copper)}
.feat-tabs button b{font-size:.98rem;font-weight:650;display:block}
.feat-tabs button small{color:#a9bdb3;font-size:.82rem}
.feat-tabs button[aria-selected="true"]{border-color:var(--copper);background:#16443a}
.feat-tabs button[aria-selected="true"] .mic{background:var(--copper);color:var(--mask-deep)}
.phones{display:flex;gap:1.2rem;justify-content:center;flex-wrap:nowrap;overflow-x:auto;padding:.3rem .2rem 1rem;scroll-snap-type:x mandatory}
.phone{flex:none;width:min(230px,62vw);aspect-ratio:9/19.3;border-radius:30px;background:#06140f;padding:8px;box-shadow:0 0 0 1.5px var(--mask-line);scroll-snap-align:center}
.phone .screen{width:100%;height:100%;border-radius:23px;overflow-y:auto;background:#fff;scrollbar-width:none}
.phone .screen::-webkit-scrollbar{display:none}
.phone img{width:100%;height:auto;display:block}
.feat-cap{margin-top:.6rem;border-top:1px solid var(--mask-line);padding-top:1rem}
.feat-cap h3{color:var(--copper);font-size:1.1rem;margin-bottom:.35rem}
.feat-cap p{margin:0;font-size:.98rem;color:#d5dfd9}
.feat-cap .scrollhint{font-size:.85rem;color:#a9bdb3;margin-top:.4rem}
@media (max-width:860px){.showcase{grid-template-columns:1fr}.feat-tabs{grid-template-columns:1fr 1fr}.phones{justify-content:flex-start}}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.roles div{display:flex;gap:.7rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;font-size:.97rem}
.roles .ic{color:var(--copper-ink);width:22px;height:22px}
@media (max-width:760px){.roles{grid-template-columns:1fr}}
.outcome{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.outcome div{border-radius:var(--radius-l);padding:1.1rem 1.2rem;background:var(--paper-2);font-size:.96rem}
.outcome b{display:flex;gap:.5rem;align-items:center;margin-bottom:.3rem}
.outcome .ok{color:var(--ok)} .outcome .no{color:#a0620f}
@media (max-width:760px){.outcome{grid-template-columns:1fr}}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.vcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.vcard .mic{width:48px;height:48px;border-radius:12px;background:var(--mask);color:var(--copper);display:grid;place-items:center}
.vcard .mic .ic{width:24px;height:24px}
.vcard h3{font-size:1.2rem}
.vcard .sub{font-size:.88rem;color:var(--muted);margin:0}
.vcard p{font-size:.96rem;margin:0}
.vcard .mine-line{margin-top:auto;border-top:1px solid var(--line);padding-top:.7rem;font-size:.92rem;color:var(--muted)}
.vcard .mine-line b{color:var(--ink)}
.award2{align-self:flex-start;display:inline-flex;gap:.4rem;align-items:center;background:var(--copper);color:var(--mask-deep);font-weight:700;font-size:.82rem;padding:.25rem .7rem;border-radius:999px}
@media (max-width:900px){.vgrid{grid-template-columns:1fr}}

@media (max-width:700px){.bento figure{height:auto}.bento figure img{height:auto}}

/* AggieAsk */
.showcase.light{background:#fff;border:1px solid var(--line);color:var(--ink)}
.showcase.light .feat-tabs button{background:var(--paper);border-color:var(--line);color:var(--ink)}
.showcase.light .feat-tabs button small{color:var(--muted)}
.showcase.light .feat-tabs button .mic{background:var(--mask);color:var(--copper)}
.showcase.light .feat-tabs button[aria-selected="true"]{border-color:#500000;background:#fbf1f1}
.showcase.light .feat-tabs button[aria-selected="true"] .mic{background:#500000;color:#fff}
.showcase.light .feat-cap{border-top-color:var(--line)}
.showcase.light .feat-cap h3{color:#500000}
.showcase.light .feat-cap p{color:var(--muted)}
.shot{max-width:100%;max-height:480px;width:auto;height:auto;margin:0 auto}
.aa-head{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:end;margin-bottom:2rem}
.aa-head .kicker{color:#500000;font-weight:600;margin-bottom:.4rem}
.aa-head h2{font-size:clamp(2rem,4.5vw,3.2rem);font-variation-settings:"wdth" 122;font-weight:800}
.aa-head p{color:var(--muted);font-size:1.1rem;max-width:58ch;margin:.7rem 0 0}
.backed{display:flex;gap:.8rem;align-items:center;background:#fbf1f1;border:1px solid #e9cfcf;border-radius:var(--radius-l);padding:1rem 1.2rem;max-width:340px}
.backed .mic{width:44px;height:44px;border-radius:11px;background:#500000;color:#fff;display:grid;place-items:center;flex:none}
.backed b{display:block;font-size:.98rem}
.backed span{font-size:.88rem;color:var(--muted)}
.pvs{display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:stretch;margin-bottom:2.4rem}
.pvs > div{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:1.3rem 1.4rem}
.pvs h3{font-size:1.05rem;display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}
.pvs p{margin:0;color:var(--muted);font-size:.97rem}
.pvs .arrowc{display:grid;place-items:center;color:#500000;background:none;border:0;padding:0}
.pvs .arrowc .ic{width:30px;height:30px}
@media (max-width:760px){.pvs{grid-template-columns:1fr}.pvs .arrowc{transform:rotate(90deg)}.aa-head{grid-template-columns:1fr}}
.featrow{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;margin:2.2rem 0}
.featrow div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem .8rem;text-align:center;font-size:.9rem}
.featrow .ic{width:26px;height:26px;color:#500000;display:block;margin:0 auto .5rem}
@media (max-width:900px){.featrow{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.featrow{grid-template-columns:repeat(2,1fr)}}
.road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.road::before{content:"";position:absolute;left:10%;right:10%;top:23px;border-top:2.5px solid #d9b3b3}
.road li{text-align:center;padding:0 .5rem;position:relative}
.road .dot{width:48px;height:48px;border-radius:50%;background:#500000;color:#fff;display:grid;place-items:center;margin:0 auto .7rem;border:3px solid var(--paper-2)}
.road .dot .ic{width:22px;height:22px}
.road b{display:block;font-size:.98rem;margin-bottom:.2rem}
.road span{font-size:.88rem;color:var(--muted);display:block}
@media (max-width:820px){.road{grid-template-columns:1fr;gap:1rem}.road::before{display:none}.road li{display:grid;grid-template-columns:48px 1fr;gap:.9rem;text-align:left;align-items:center}.road .dot{margin:0}}
.vgrid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.vgrid.two{grid-template-columns:1fr}}

.pcard .vis.photo img{object-fit:cover;background:none}
.pcard .vis.white{background:#fff}
.pcard .vis.white img{object-fit:contain;background:#fff;padding:1rem}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:900px;margin:1.5rem 0}
.photo-pair figure{margin:0}
.photo-pair img{border-radius:var(--radius-s);border:1px solid var(--line);width:100%;aspect-ratio:16/9;object-fit:cover}
.photo-pair figcaption{font-size:.88rem;color:var(--muted);margin-top:.5rem}
@media (max-width:700px){.photo-pair{grid-template-columns:1fr}}
.side-photo{float:right;width:min(280px,42%);margin:0 0 1rem 1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:.8rem}
.side-photo figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}
@media (max-width:600px){.side-photo{float:none;width:100%;margin:0 0 1rem}}

/* category badges */
.pcard{position:relative}
.cat-badge{position:absolute;top:.9rem;left:.9rem;z-index:2;display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:999px;font-weight:700;font-size:.9rem;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.cat-badge .ic{width:17px;height:17px}
.cat-badge.inline{position:static;box-shadow:none;font-size:.82rem;padding:.3rem .7rem;margin-bottom:.8rem}
.c-debug{background:#a3342a}.c-emb{background:#8a4b1a}.c-pcb{background:#1f5f8b}.c-dig{background:#5b3f8c}
.pcard .go-ic{position:absolute;right:1.1rem;bottom:1.1rem;color:var(--copper-ink);transition:transform .2s}
.pcard:hover .go-ic{transform:translateX(4px)}
.pcard .body{padding-right:3rem}
.mini{display:flex;flex-direction:column;align-items:flex-start}
.mini .mic{display:none}

.factstrip.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.factstrip.three{grid-template-columns:1fr 1fr}}

/* Puck Monitor */
.demo-vid{width:100%;max-width:820px;border-radius:var(--radius-l);background:#000;display:block;aspect-ratio:16/9}
.pflow{display:flex;align-items:stretch;gap:.6rem;flex-wrap:wrap;margin:1rem 0 1.5rem}
.pstep{flex:1 1 150px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem;display:grid;gap:.3rem;justify-items:start}
.pstep .mic{width:40px;height:40px;border-radius:10px;background:var(--mask);color:var(--copper);display:grid;place-items:center}
.pstep b{font-size:1rem}.pstep span:last-child{font-size:.9rem;color:var(--muted)}
.parrow{display:grid;place-items:center;color:var(--copper-ink)}
@media (max-width:700px){.parrow{display:none}}
.roles div{align-items:flex-start}
.roles div .ic{flex:none;margin-top:.15rem}
.showcase .shot{max-height:430px;border-radius:10px}
.win{display:grid;grid-template-columns:1fr 1.1fr;gap:0;background:var(--mask-deep);color:var(--silk);border-radius:var(--radius-l);overflow:hidden;margin-bottom:2.6rem;text-decoration:none;border:1.5px solid var(--copper)}
.win .wimg{position:relative;min-height:300px}
.win .wimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.win .wbody{padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:.8rem;align-content:center}
.win h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-variation-settings:"wdth" 115;line-height:1.1}
.win p{margin:0;color:#c9d6cf}
.win .wfacts{display:flex;flex-wrap:wrap;gap:.5rem}
.win .wfacts span{display:inline-flex;gap:.4rem;align-items:center;font-size:.88rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--mask-line);color:#c9d6cf}
.win .wfacts .ic{color:var(--copper)}
.win .wgo{display:inline-flex;gap:.4rem;align-items:center;color:var(--copper);font-weight:650}
.win:hover{border-color:#e09a5b}
.win:hover .wgo .ic{transform:translateX(4px)}
@media (max-width:820px){.win{grid-template-columns:1fr}.win .wimg{min-height:240px}}
.hub-win{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .95rem;border-radius:999px;background:var(--copper);color:var(--mask-deep);font-weight:700;font-size:.9rem;text-decoration:none}
.hub-win:hover{background:#e09a5b}
.vgrid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.vgrid.three{grid-template-columns:1fr}}
@media (max-width:860px){.feat-tabs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.feat-tabs button{min-width:0;grid-template-columns:32px 1fr;gap:.55rem;padding:.6rem}.feat-tabs button .mic{width:32px;height:32px}}

/* sticky sub-navigation + separated panels (startups page) */
.subnav{position:sticky;top:58px;z-index:4;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(15,35,28,.06)}
.subnav .wrap{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem 0;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;border:1.5px solid var(--line);background:var(--paper)}
.subnav a:hover{border-color:var(--copper)}
.subnav a[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.subnav a[aria-current="true"] .ic{color:var(--copper)}
.js-tabs .vpanel{display:none}
.js-tabs .vpanel.on{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.vpanel{scroll-margin-top:120px}
.vpanel + .vpanel{border-top:6px solid var(--copper)}
.js-tabs .vpanel + .vpanel{border-top:0}
.panel-next{display:flex;justify-content:flex-end;padding:1.5rem 0 3rem}
.panel-next .btn{display:inline-flex;gap:.5rem;align-items:center}

/* Puck Pal: navy + cyan */
.pp-hero{background:#0c1828;color:#eaf2f8;padding:clamp(2.6rem,6vw,4.2rem) 0}
.pp-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:2.5rem;align-items:center}
.pp-kicker{display:inline-flex;align-items:center;gap:.5rem;color:#5ee0f0;font-weight:650;margin:0 0 .6rem}
.pp-hero h2{font-size:clamp(2.6rem,6vw,4.4rem);font-variation-settings:"wdth" 122;font-weight:800;letter-spacing:-.02em}
.pp-sub{font-size:1.25rem;color:#b9c9d8;margin:.3rem 0 1.2rem}
.pp-awards{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.pp-awards li{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .9rem;border-radius:999px;font-weight:700;font-size:.92rem;background:#13283f;border:1.5px solid #2a4a6b}
.pp-awards li:first-child{background:#22d3ee;color:#062030;border-color:#22d3ee}
.pp-awards .ic{color:#5ee0f0}.pp-awards li:first-child .ic{color:#062030}
.pp-lede{font-size:1.12rem;color:#dbe6ef;max-width:46ch;margin:0 0 .8rem}
.pp-fine{font-size:.85rem;color:#8ea3b8;margin:0}
.pp-photo{margin:0}.pp-photo img{border-radius:var(--radius-l);border:2px solid #22d3ee}
@media (max-width:860px){.pp-hero-grid{grid-template-columns:1fr}}
.pp-block{background:#f2f6f9}
.pp-h{font-size:clamp(1.35rem,2.3vw,1.7rem);font-variation-settings:"wdth" 112;display:flex;align-items:center;gap:.6rem;margin:3rem 0 1.1rem}
.pp-h .ic{color:#0e7490}
.pp-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pp-quick > div,.pp-tile,.bug{background:#fff;border:1px solid #d5e0e8;border-radius:var(--radius-l);padding:1.1rem 1.2rem}
.pp-quick .mic,.pp-tile .mic,.bug .mic{width:40px;height:40px;border-radius:10px;background:#0c1828;color:#22d3ee;display:grid;place-items:center;margin-bottom:.6rem;flex:none}
.pp-quick b{display:block;margin-bottom:.3rem}.pp-quick p{margin:0;font-size:.95rem;color:var(--muted)}
@media (max-width:900px){.pp-quick{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pp-quick{grid-template-columns:1fr}}
.pp-demo{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;align-items:start}
.pp-demo p{font-size:.98rem;color:var(--muted)}
.pp-node{margin:0;max-width:240px}.pp-node img{border-radius:var(--radius-s);border:1px solid #d5e0e8}.pp-node figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}
@media (max-width:860px){.pp-demo{grid-template-columns:1fr}}
.pp-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
.pp-tile{display:grid;gap:.25rem;align-content:start}.pp-tile b{font-size:.98rem}.pp-tile span:last-child{font-size:.88rem;color:var(--muted)}
@media (max-width:1000px){.pp-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pp-tiles{grid-template-columns:1fr}}
.pp-attr{font-size:.9rem;color:var(--muted);margin-top:.9rem;max-width:80ch}
.pp-diag{background:#0c1828;max-width:none}
.pp-diag .node rect{fill:#0a1422;stroke:#2a4a6b}
.pp-diag .node text.sub{fill:#9fb3c8}
.pp-diag .wire{stroke:#22d3ee}
.pp-diag .node.on rect,.pp-diag .node:hover rect{stroke:#22d3ee;fill:#12304a}
.pp-diag .panel{border-top-color:#2a4a6b}.pp-diag .panel h3{color:#5ee0f0}
.pp-diag .hint{color:#9fb3c8}
.tele{background:#0c1828;color:#eaf2f8;border-radius:var(--radius-l);padding:1.4rem}
.tele-line{display:block;font-family:var(--mono);font-size:clamp(.85rem,2.2vw,1.25rem);background:#06101c;padding:1rem 1.2rem;border-radius:10px;overflow-x:auto;white-space:nowrap;color:#6b7f94}
.tele-line span{padding:.1rem .25rem;border-radius:4px;font-weight:500}
.t0{color:#c4b5fd}.t1{color:#fcd34d}.t2{color:#5ee0f0}.t3{color:#94a3b8;background:#1e293b}.t4{color:#86efac}
.tele-key{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem 1.2rem;font-size:.92rem;color:#c9d6e2}
.tele-key li{display:flex;gap:.55rem;align-items:baseline}
.tele-key .sw{width:12px;height:12px;border-radius:3px;flex:none;background:currentColor;transform:translateY(1px)}
.tele-key .sw.t3{background:#94a3b8}
.tele-key b{font-family:var(--mono);font-weight:500;margin-right:.2rem}
.tele-note{margin:1rem 0 0;font-size:.92rem;color:#9fb3c8}
.bugs{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.bug{display:flex;gap:.9rem;align-items:flex-start}
.bug .mic{margin:0}.bug b{display:block;margin-bottom:.2rem}.bug p{margin:0;font-size:.94rem;color:var(--muted)}
@media (max-width:760px){.bugs{grid-template-columns:1fr}}
.pp-block .showcase{background:#0c1828}
.pp-block .feat-tabs button{background:#0a1422;border-color:#2a4a6b}
.pp-block .feat-tabs button .mic{background:#13283f;color:#22d3ee}
.pp-block .feat-tabs button[aria-selected="true"]{border-color:#22d3ee;background:#12304a}
.pp-block .feat-tabs button[aria-selected="true"] .mic{background:#22d3ee;color:#062030}
.pp-block .feat-cap{border-top-color:#2a4a6b}.pp-block .feat-cap h3{color:#5ee0f0}
.pp-concept{margin-top:3rem;border:1.5px dashed #7aa7c7;border-radius:var(--radius-l);background:#fff}
.pp-concept summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.3rem}
.pp-concept summary::-webkit-details-marker{display:none}
.pp-concept summary > span{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.pp-concept summary .ic{color:#0e7490}
.pp-concept summary small{font-size:.8rem;font-weight:700;color:#0e7490;background:#e0f5f9;padding:.2rem .6rem;border-radius:999px}
.pp-concept[open] summary > .ic{transform:rotate(90deg)}
.pp-concept-body{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;padding:0 1.3rem 1.3rem}
.pp-concept h4{margin:0 0 .6rem;font-size:1rem}
.pp-comp{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.93rem}
.pp-comp li{display:flex;gap:.55rem;align-items:flex-start}.pp-comp .ic{color:#0e7490;margin-top:.15rem}
.pp-deploy{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.93rem}
.pp-deploy li{display:flex;gap:.6rem;align-items:center}
.pp-deploy .n{width:26px;height:26px;border-radius:50%;background:#0c1828;color:#22d3ee;display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:none}
@media (max-width:860px){.pp-concept-body{grid-template-columns:1fr}}
.pp-take{margin-top:3rem;background:#0c1828;color:#eaf2f8;border-radius:var(--radius-l);padding:1.6rem 1.8rem}
.pp-take .pp-h .ic{color:#22d3ee}
.pp-take ul{margin:0;padding-left:1.1rem;display:grid;gap:.5rem;color:#c9d6e2}
.pp-take b{color:#fff}

.diagram .panel code{background:#13283f;color:#5ee0f0;padding:.05rem .3rem;border-radius:3px}
.tele-key{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}