/* Portfolio v2: "A, but not a template". Warm paper, ink, one bottle-green accent, hairline and 2px rules instead of cards.
   Colour has jobs: green guides the eye, red means failed or not done, amber means caution, node colours say what a box is. See DESIGN.md. */
:root{
  --bg:#F6F2E9;--bg-2:#EEE8DA;--card:#FBF8F1;
  --ink:#1B1714;--ink-2:#463F37;--ink-3:#655C51;
  --line:#CFC5B3;--line-2:#DDD5C4;
  --accent:#1E5A44;--accent-bg:#1E5A44;--accent-hover:#154534;--accent-soft:#E2EADF;--on-accent:#FBF8F1;
  --bad:#A3231A;--bad-soft:#F3DFDA;
  --warn:#7A4A00;--warn-soft:#F1E6CB;
  --contact-bg:#1E5A44;--contact-ink:#FBF8F1;
  --frame:#1B1714;
  /* drawings: fill and stroke per kind of box */
  --k-plain-s:#6F6556;
  --k-client-f:#ECE6D6;--k-client-s:#6F6556;
  --k-edge-f:#F3E4BC;--k-edge-s:#8A6200;
  --k-service-f:#DDE9DA;--k-service-s:#1E5A44;
  --k-worker-f:#D2E7E3;--k-worker-s:#1D6A66;
  --k-store-f:#E9DDE8;--k-store-s:#6F3F6A;
  --k-external-f:#F1DFD2;--k-external-s:#8B4A2A;
  --k-ci-f:#E5E9C8;--k-ci-s:#5D6A12;
  --k-device-f:#1B1714;--k-device-t:#F6F2E9;
  --k-file-f:#FBF8F1;--k-file-s:#7A6F60;
  --k-logic-f:#E2EADF;--k-logic-s:#1E5A44;
  --edge:#5E5549;--zone-f:#F2ECDF;--zone-s:#BFB4A0;--hatch:#8A806F;
  --dim:none;
  --serif:"Hahmlet","Nanum Myeongjo",Batang,Georgia,"Times New Roman",serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,"Pretendard Variable",Pretendard,monospace;
  --label:var(--mono);
  --pad:clamp(20px,4vw,48px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16130F;--bg-2:#1E1A15;--card:#1B1813;
  --ink:#EFE9DD;--ink-2:#CDC5B6;--ink-3:#A39A8B;
  --line:#41392F;--line-2:#2D2822;
  --accent:#8FCBAE;--accent-bg:#8FCBAE;--accent-hover:#ABDCC4;--accent-soft:#22352B;--on-accent:#0F1F18;
  --bad:#F08A7C;--bad-soft:#3A1F1B;
  --warn:#E5AE55;--warn-soft:#352810;
  --contact-bg:#1F3A2E;--contact-ink:#EFE9DD;
  --frame:#5A5144;
  --k-plain-s:#A39A8B;
  --k-client-f:#2A251E;--k-client-s:#A39A8B;
  --k-edge-f:#3A2F12;--k-edge-s:#E0B94D;
  --k-service-f:#1F3A2E;--k-service-s:#8FCBAE;
  --k-worker-f:#173A38;--k-worker-s:#6FC4BC;
  --k-store-f:#35263A;--k-store-s:#CFA0CA;
  --k-external-f:#3B281D;--k-external-s:#E39A74;
  --k-ci-f:#2D3315;--k-ci-s:#BFCB62;
  --k-device-f:#EFE9DD;--k-device-t:#16130F;
  --k-file-f:#1B1813;--k-file-s:#8B8272;
  --k-logic-f:#22352B;--k-logic-s:#8FCBAE;
  --edge:#A39A8B;--zone-f:#211D17;--zone-s:#4A4236;--hatch:#7B7262;
  --dim:brightness(.9);color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#16130F;--bg-2:#1E1A15;--card:#1B1813;
  --ink:#EFE9DD;--ink-2:#CDC5B6;--ink-3:#A39A8B;
  --line:#41392F;--line-2:#2D2822;
  --accent:#8FCBAE;--accent-bg:#8FCBAE;--accent-hover:#ABDCC4;--accent-soft:#22352B;--on-accent:#0F1F18;
  --bad:#F08A7C;--bad-soft:#3A1F1B;
  --warn:#E5AE55;--warn-soft:#352810;
  --contact-bg:#1F3A2E;--contact-ink:#EFE9DD;
  --frame:#5A5144;
  --k-plain-s:#A39A8B;
  --k-client-f:#2A251E;--k-client-s:#A39A8B;
  --k-edge-f:#3A2F12;--k-edge-s:#E0B94D;
  --k-service-f:#1F3A2E;--k-service-s:#8FCBAE;
  --k-worker-f:#173A38;--k-worker-s:#6FC4BC;
  --k-store-f:#35263A;--k-store-s:#CFA0CA;
  --k-external-f:#3B281D;--k-external-s:#E39A74;
  --k-ci-f:#2D3315;--k-ci-s:#BFCB62;
  --k-device-f:#EFE9DD;--k-device-t:#16130F;
  --k-file-f:#1B1813;--k-file-s:#8B8272;
  --k-logic-f:#22352B;--k-logic-s:#8FCBAE;
  --edge:#A39A8B;--zone-f:#211D17;--zone-s:#4A4236;--hatch:#7B7262;
  --dim:brightness(.9);color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
/* The offset lives on targets inside main, so focus moving through the sticky header never scrolls the page. */
main,main [id],main a,main button,main summary,main details,main .node{scroll-margin-top:84px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.75 var(--sans);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(ko){word-break:keep-all;overflow-wrap:break-word;line-break:strict}
:lang(ko) body{letter-spacing:-.012em}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1.5px}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
b,strong{font-weight:700}
main:focus{outline:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:1px}
.wrap{max-width:calc(1240px + 2*var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.wrap.wide{max-width:calc(1360px + 2*var(--pad))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.eyebrow{font:500 13.5px/1.4 var(--label);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.h2{font:700 clamp(28px,3.1vw,42px)/1.2 var(--serif);letter-spacing:-.02em;text-wrap:balance}
/* block heading inside a project: Screens, How it was trained, Key settings */
.bh{display:flex;align-items:center;gap:14px;font:700 clamp(21px,1.9vw,25px)/1.3 var(--serif);letter-spacing:-.015em}
.bh::before{content:"";flex:none;width:24px;height:2px;background:var(--accent)}
.skip{position:absolute;left:12px;top:-80px;z-index:40;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:2px;font-size:15px;font-weight:700}
.skip:focus{top:10px}
.go{display:inline-flex;align-items:center;gap:8px;font:700 15.5px/1.3 var(--sans);color:var(--accent);text-decoration:none;padding-block:8px}
.go::after{content:"→";transition:transform .16s}
.go:hover::after{transform:translateX(4px)}
.go:hover{text-decoration:underline}

:root:lang(ko){--label:var(--sans)}
:lang(ko) .eyebrow,:lang(ko) .lbl,:lang(ko) .cs h3,:lang(ko) .toc,:lang(ko) .pn .eyebrow,:lang(ko) .crumb,:lang(ko) .contact .k,:lang(ko) .nums th,:lang(ko) .by,:lang(ko) .filter .k,:lang(ko) .evk{letter-spacing:0;text-transform:none;font-weight:600}
:lang(ko) .eyebrow,:lang(ko) .lbl,:lang(ko) .cs h3,:lang(ko) .nums th{font-size:14.5px}
:lang(ko) .tbl dt,:lang(ko) .foot,:lang(ko) .cred,:lang(ko) .demo{letter-spacing:0}

/* Header */
.bar{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:24px;height:64px}
.brand{font:700 21px/1 var(--serif);letter-spacing:-.02em;text-decoration:none;white-space:nowrap;padding:8px 0}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{font-size:15.5px;font-weight:600;line-height:1;color:var(--ink-2);text-decoration:none;padding:12px 11px;white-space:nowrap;background:linear-gradient(var(--accent),var(--accent)) no-repeat 11px calc(100% - 7px)/0 2px;transition:background-size .18s}
.nav a:hover{color:var(--ink);background-size:calc(100% - 22px) 2px}
.ctl{display:flex;align-items:center;gap:8px;margin-left:auto}
.seg{display:flex;border:1px solid var(--ink-3);border-radius:2px}
.seg button{padding:0 12px;font-size:14px;font-weight:700;line-height:1;color:var(--ink-2);min-height:34px}
.seg button+button{border-left:1px solid var(--ink-3)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg button:hover:not([aria-pressed="true"]){background:var(--accent-soft);color:var(--ink)}
.icon{width:36px;height:36px;border:1px solid var(--ink-3);border-radius:2px;display:grid;place-items:center;color:var(--ink-2)}
.icon:hover{background:var(--accent-soft);color:var(--ink)}
.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.icon .fill{fill:currentColor;stroke:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:1.5px solid var(--ink);border-radius:2px;font:700 16px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;background:transparent;color:var(--ink);transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.primary{background:var(--accent-bg);border-color:var(--accent-bg);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn.primary span:not(.ar,.sr){font:500 13px/1 var(--mono);padding:4px 6px;border:1px solid currentColor;border-radius:2px;opacity:.9}
.btn .ar{font-size:1.1em;line-height:1;transition:transform .16s}
.btn:hover .ar{transform:translateX(4px)}
.btn.sm{min-height:36px;padding:0 14px;font-size:14.5px}

/* First screen: who, what he builds, three checked numbers, where to click */
.hero{padding-block:clamp(36px,6vh,72px) clamp(40px,6vh,64px)}
.hero-g{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(36px,5vw,88px);align-items:start}
.role{display:flex;align-items:center;gap:12px;font:500 14px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-wrap:balance}
.role::before{content:"";flex:none;width:32px;height:2px;background:var(--accent)}
h1{font:700 clamp(54px,7.2vw,104px)/1.02 var(--serif);letter-spacing:-.035em;margin-top:22px}
:lang(en) h1{font-size:clamp(46px,5.5vw,78px)}
:lang(en) .headline{font-size:clamp(22px,2.1vw,30px)}
.alt-name{display:block;font:500 clamp(18px,1.6vw,22px)/1.3 var(--serif);letter-spacing:0;color:var(--ink-3);margin-top:12px}
.headline{font:500 clamp(23px,2.3vw,33px)/1.5 var(--serif);letter-spacing:-.015em;margin-top:30px;max-width:21em;text-wrap:pretty}
.headline mark{background:linear-gradient(transparent 60%,var(--accent-soft) 60%);color:inherit;font-weight:700;padding:0 .08em}
.lede{font-size:clamp(17.5px,1.4vw,19.5px);line-height:1.8;color:var(--ink-2);margin-top:18px;max-width:31em;text-wrap:pretty}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.cred{font:500 13.5px/1.5 var(--label);color:var(--ink-3);margin-top:20px}
.proof{border-top:2px solid var(--ink);padding-top:14px}
.proofs{margin-top:8px;display:grid;grid-template-columns:22px max-content minmax(0,1fr);column-gap:22px}
.proof-r{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.proof-r:first-child{border-top:0}
.proof-r .n{font:500 14px/1 var(--mono);color:var(--ink-3);align-self:start;padding-top:10px}
.num{font:500 clamp(40px,4vw,60px)/1 var(--mono);letter-spacing:-.05em;word-spacing:-.3em;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.what p{font-size:16.5px;line-height:1.55;font-weight:500;text-wrap:pretty}
.what b{font-weight:700}
.src{font-size:14.5px!important;line-height:1.5!important;font-weight:400!important;color:var(--ink-3);margin-top:4px}
.src a{font-weight:700;color:var(--accent);text-decoration:none;margin-right:8px}
.src a:hover{text-decoration:underline}
.src a::after{content:" ·";font-weight:400;color:var(--ink-3)}
.proof .go{margin-top:6px}
.notes{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:20px clamp(36px,5vw,88px);margin-top:clamp(40px,6vh,64px);border-top:1px solid var(--line);padding-top:24px}
.notes p{font-size:17px;line-height:1.75;margin-top:6px;max-width:36em;text-wrap:pretty;color:var(--ink-2)}
.notes b{font-weight:700;color:var(--ink)}

/* Index: two ruled lists, one row per project */
.index{background:var(--bg-2);padding-block:clamp(44px,6vw,80px);border-block:1px solid var(--line)}
.index-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 24px;margin-bottom:clamp(24px,3vw,40px)}
.index-h p{grid-column:1;font-size:16.5px;color:var(--ink-2)}
.filter{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;justify-content:flex-end}
.filter .k{font:500 13.5px/1 var(--label);color:var(--ink-3);margin-right:8px}
.filter button{padding:0 10px;min-height:36px;font-size:15px;font-weight:600;line-height:1;color:var(--ink-2);background:linear-gradient(var(--ink),var(--ink)) no-repeat 10px calc(100% - 4px)/0 2px;transition:background-size .15s}
.filter button:hover{color:var(--ink)}
.filter button[aria-pressed="true"]{color:var(--ink);font-weight:700;background-size:calc(100% - 20px) 2px}
.ix-cols{display:grid;gap:clamp(36px,4vw,56px)}
.ix-g.also{margin-top:clamp(36px,4vw,56px)}
.ix-h{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--ink);padding-top:12px;font:700 clamp(20px,1.8vw,24px)/1.3 var(--serif);letter-spacing:-.01em}
.ix-h .rng{font:500 15px/1 var(--mono);color:var(--ink-3);letter-spacing:0}
.ixl{margin-top:8px}
.ix{display:grid;grid-template-columns:44px minmax(0,1.25fr) minmax(0,1.5fr) minmax(0,1fr) 136px;gap:0 24px;align-items:center;padding:18px 10px;border-top:1px solid var(--line);text-decoration:none;transition:background .15s}
.ixl li:first-child .ix{border-top-color:transparent}
.ixl li:last-child .ix{border-bottom:1px solid var(--line)}
.ix:hover{background:var(--accent-soft)}
.ix-n{font:600 15px/1 var(--mono);color:var(--accent)}
.ix-name{display:flex;flex-direction:column;gap:3px}
.ix-name b{font:700 clamp(20px,1.7vw,24px)/1.25 var(--serif);letter-spacing:-.015em;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/0 2px;transition:background-size .2s;align-self:flex-start}
.ix:hover .ix-name b{background-size:100% 2px}
.ix-name span{font-size:15px;line-height:1.45;color:var(--ink-2)}
.ix-stat{display:grid;grid-template-columns:clamp(112px,9.4vw,132px) minmax(0,1fr);gap:0 14px;align-items:center}
.ix-stat strong{font:500 clamp(23px,2vw,28px)/1.1 var(--mono);letter-spacing:-.04em;color:var(--accent);white-space:nowrap}
.ix-stat span{font-size:14.5px;line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ix-stat b{font-weight:700;color:var(--ink)}
.ix-stat strong.neg,.num.neg{color:var(--bad)}
.ix.more .ix-stat{grid-column:3/5;display:block}
.ix.more .ix-stat span{-webkit-line-clamp:2}
.ix.more .ix-n{font-size:18px;color:var(--ink-3)}
.ix-per{font:500 14px/1.3 var(--mono);color:var(--ink-2);text-align:right;white-space:nowrap;letter-spacing:-.02em}
.ix-per:last-child{grid-column:5}
/* A filtered-out row stays readable and clickable; it only steps back. */
.ixl li.off .ix{color:var(--ink-3)}
.ixl li.off .ix-n,.ixl li.off .ix-stat strong{color:var(--ink-3)}
.ixl li.off .ix-name span,.ixl li.off .ix-stat span,.ixl li.off .ix-per{color:var(--ink-3)}

/* Status: a small mark and the words. Never a pill. */
.st{display:inline-flex;align-items:center;gap:8px;font:600 14.5px/1.35 var(--sans);color:var(--ink-2);text-wrap:balance}
.st svg{width:15px;height:15px;flex:none}
.st .f{fill:currentColor}.st .s{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.st .b{stroke-width:2.4}.st .d{stroke-dasharray:2.2 2.2}
.st-run,.st-done{color:var(--accent)}
.st-pause{color:var(--warn)}
.st-beta{color:var(--accent)}
.ixl li.off .st{color:var(--ink-3)}

/* Sections */
.sec{padding-top:clamp(72px,9vw,128px)}
.sec-h{display:flex;align-items:baseline;gap:20px;border-top:2px solid var(--ink);padding-top:14px;margin-bottom:clamp(28px,3.4vw,48px)}
.sn{font:500 clamp(15px,1.3vw,17px)/1 var(--mono);color:var(--accent);letter-spacing:.02em}
.grp .sec-h{margin-bottom:0}

/* A project in summary on the home page: meta row, name (a link), claim, stack, button, and the numbers beside it */
.proj{padding-top:clamp(32px,3.6vw,48px);margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
.grp .sec-h+.proj{border-top:0;margin-top:0}
.sum{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"main side" "go side";grid-template-rows:auto 1fr;gap:26px clamp(36px,5vw,88px);align-items:start}
.sum-main{grid-area:main;min-width:0}
.sum-side{grid-area:side;padding-top:6px;min-width:0}
.sum-go{grid-area:go}
.p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.p-n{font:600 17px/1 var(--mono);color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:5px}
.p-tag{font-size:15.5px;font-weight:600;line-height:1.4;color:var(--ink-2);margin-right:auto}
.per{font:500 14.5px/1.3 var(--mono);color:var(--ink-2);white-space:nowrap;letter-spacing:-.02em}
.sum h3{font:700 clamp(34px,3.7vw,52px)/1.08 var(--serif);letter-spacing:-.03em;margin-top:20px;text-wrap:balance}
.plink{text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/100% 2px;background-size:0 2px;padding-bottom:3px;transition:background-size .2s}
.plink:hover,.plink:focus-visible{background-size:100% 2px;color:var(--accent)}
.hl{font:500 clamp(21px,2.1vw,29px)/1.5 var(--serif);letter-spacing:-.01em;color:var(--accent);margin-top:14px;max-width:26em;text-wrap:pretty}
.line{font-size:17.5px;line-height:1.85;max-width:34em;text-wrap:pretty;margin-top:16px}
.hl+.line{margin-top:14px}
.stk{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.stk li{font:500 14px/1 var(--mono);letter-spacing:-.01em;color:var(--ink-2);border:1px solid var(--line);padding:6px 8px;border-radius:2px;white-space:nowrap}
.stk li.rest{border-style:dashed;color:var(--ink-3)}
.stats{border-top:2px solid var(--ink);display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:24px}
.stats li{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.stats li:first-child{border-top:0}
.sum .stats .num{font-size:clamp(30px,3vw,44px)}
.stats .num.neg{color:var(--bad)}
.stats span{font-size:15.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.stats b,.what b{color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,64px)}
.facts li{font-size:17px;line-height:1.75;padding:14px 0 14px;border-top:1px solid var(--line);text-wrap:pretty}
.facts li:nth-last-child(-n+2):nth-child(odd):last-child{grid-column:1}
.facts b,.steps b,.ml-note b,.stats b,.band b{font-weight:700;background:linear-gradient(transparent 58%,var(--accent-soft) 58%);padding:0 .1em;margin-inline:-.1em}

/* Screens: real captures in a plain frame */
.screens{margin-top:clamp(28px,3vw,40px)}
.screens ul{display:grid;gap:clamp(20px,2.4vw,32px);margin-top:18px;align-items:start}
.screens.g1 ul{grid-template-columns:minmax(0,680px)}
.screens.g2 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.screens.g3 ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.screens.flex ul{display:flex;flex-wrap:wrap}
.screens.flex .browser{flex:1 1 320px;max-width:560px}
.shot .frame{display:block;text-decoration:none;overflow:hidden;background:var(--card);transition:border-color .15s}
.shot.browser .frame{border:1px solid var(--ink-3);border-radius:4px}
.shot.browser .frame:hover{border-color:var(--accent)}
.bar i{display:inline-block}
.shot .bar{display:flex;gap:5px;align-items:center;height:24px;padding-inline:10px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.shot .bar i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-3)}
.shot img{width:100%;height:auto;filter:var(--dim)}
.shot.phone{flex:0 0 clamp(170px,17vw,214px)}
.shot.phone .frame{border:5px solid var(--frame);border-radius:20px;background:var(--frame)}
.shot.phone img{border-radius:14px}
.cap{font-size:15px;line-height:1.5;color:var(--ink-2);margin-top:10px}
.demo{display:block;font:500 13px/1.4 var(--label);color:var(--ink-3);margin-top:3px}
.demo::before{content:"○ "}

/* How it was trained */
.by-key{display:flex;gap:20px;margin-bottom:22px}
.by{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 var(--label);letter-spacing:.03em}
.by::before{content:"";width:26px;height:10px;border:1px solid var(--accent);background:var(--accent)}
.by.team{color:var(--ink-2)}
.by.team::before{border-color:var(--ink-3);background:repeating-linear-gradient(135deg,var(--hatch) 0 1.4px,transparent 1.4px 5px)}
.by.me{color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0 clamp(18px,2.4vw,32px)}
.stg{position:relative;padding:26px 14px 26px;border-top:10px solid var(--accent)}
.refs{margin-top:clamp(18px,2vw,26px);font-size:16px;line-height:1.7;max-width:46em}
.refs a.ref{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.refs a.ref:hover{text-decoration-thickness:2px}
.stg.shared{border-top-color:var(--ink-3)}  /* chatbot strip: designed together, so neither mine nor theirs */
.llm-intro{max-width:44em;font-size:17.5px;line-height:1.8;margin-bottom:clamp(20px,2.4vw,30px);text-wrap:pretty}
.stg.team{border-top:10px solid transparent;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 9px)}
.stg.team::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;border:1px solid var(--ink-3);background:repeating-linear-gradient(135deg,var(--hatch) 0 1.4px,transparent 1.4px 5px)}
.stg .sn{display:block;font:500 34px/1 var(--mono);letter-spacing:-.05em;color:var(--ink)}
.stg h3{font:700 clamp(19px,1.6vw,21px)/1.35 var(--serif);letter-spacing:-.01em;margin-top:12px;text-wrap:balance}
.stg p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin-top:8px;text-wrap:pretty}
.stg p b{color:var(--ink)}
.stg .sev{display:flex;gap:8px;align-items:baseline;font-size:14px;line-height:1.5;color:var(--ink-2)}
.stg .sev{margin-top:10px}
.stg .evk{flex:none}
.params{margin-top:clamp(28px,3vw,40px)}
.params dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 clamp(24px,3vw,40px);margin-top:14px}
.params dl>div{border-top:1px solid var(--line);padding:12px 0 14px}
.params dt{font-size:14.5px;line-height:1.45;color:var(--ink-3)}
.params dd{font:500 21px/1.35 var(--mono);letter-spacing:-.03em;margin-top:2px;overflow-wrap:anywhere}
.ml-note{margin-top:clamp(24px,3vw,36px);border-left:3px solid var(--warn);padding:2px 0 2px 18px;font-size:17px;line-height:1.75;max-width:42em;text-wrap:pretty}

/* The drawing: a framed plate, with the note for the selected part beside it */
.fig-grid{display:grid;grid-template-columns:minmax(0,660px) minmax(0,1fr);gap:0 clamp(28px,4vw,60px);align-items:stretch}
.fig{align-self:start;border:1px solid var(--ink-3);border-radius:2px;background:var(--card);min-width:0}
.canvas{padding:clamp(12px,2vw,26px)}
.drawing{position:relative;max-width:640px;margin-inline:auto}
.used{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px clamp(12px,2vw,26px);border-top:1px solid var(--line)}
.used:empty{display:none}
.used li{display:flex;gap:7px;align-items:center;font-size:14px;line-height:1.4;color:var(--ink-2)}
.sw{width:26px;height:16px;flex:none;overflow:visible}
.sw .sh{fill:var(--kf,var(--card));stroke:var(--ks,var(--k-plain-s));stroke-width:1.6}
.sw-key .sh{fill:var(--accent-bg);stroke:var(--accent-bg)}
.sw-callout .sh{fill:var(--card);stroke:var(--accent)}
.sw-team .sh{fill:url(#hatch-team);stroke:var(--ink-3)}
.sw-dash .sh{fill:var(--card);stroke:var(--ink-3);stroke-dasharray:4 3}
.fig-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;border-top:1px solid var(--line);padding:2px clamp(12px,2vw,26px)}
.motion{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:6px 0;font-size:14px;color:var(--ink-3)}
.replay{padding:0 12px;min-height:34px;border:1px solid var(--ink-3);border-radius:2px;font-size:14px;font-weight:700;color:var(--ink)}
.replay:hover{background:var(--accent-soft)}
@media (prefers-reduced-motion:reduce){.motion{display:none}}
.alt[open]{flex-basis:100%;order:2}
.alt summary{padding:10px 0;font-size:14.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.alt summary:hover{color:var(--accent)}
.alt ol{padding:2px 4px 14px 24px;list-style:decimal;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.alt li{padding:4px 0}
.alt li strong{color:var(--ink)}
.fig-side{min-width:0}
.dg figcaption{font:500 clamp(18px,1.55vw,21px)/1.7 var(--serif);letter-spacing:-.01em;text-wrap:pretty}
.dg figcaption .eyebrow{display:block;margin-bottom:8px;font-family:var(--mono);font-size:13.5px}
.insp{position:sticky;top:88px;margin-top:28px;background:var(--card);border:1px solid var(--line);border-top:2px solid var(--accent);padding:16px 22px 22px;min-width:0}
.insp-bar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pos{font:500 14px/1 var(--mono);color:var(--ink-3)}
.stp{display:flex;gap:6px}
.stp button{width:40px;height:40px;border:1px solid var(--ink-3);border-radius:2px;font-size:17px;font-weight:700;line-height:1}
.stp button:hover{background:var(--accent-soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:26px}
.kd{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--sans);padding:6px 9px;border:1px solid var(--line);border-radius:2px;color:var(--ink-2)}
.kd i{width:16px;height:10px;border:1.5px solid var(--ks,var(--ink-3));background:var(--kf,transparent);border-radius:1px}
.kd.key{background:var(--accent-bg);border-color:var(--accent-bg);color:var(--on-accent)}
.kd.team i{background:repeating-linear-gradient(135deg,var(--hatch) 0 1.4px,transparent 1.4px 4px);border-color:var(--ink-3)}
.kd.dash i{border-style:dashed;border-color:var(--ink-3)}
.insp h3,.sheet h3{font:700 23px/1.35 var(--serif);letter-spacing:-.015em;margin-top:12px;text-wrap:balance}
.do{font-size:17px;line-height:1.75;margin-top:6px;text-wrap:pretty}
.lbl{font:500 13.5px/1.4 var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:18px}
.ev{margin-top:2px}
.ev li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;font-size:15px;line-height:1.65;padding:10px 0;border-top:1px solid var(--line);text-wrap:pretty}
.ev li:first-child{border-top:0}
.evk{display:inline-block;font:600 13px/1 var(--label);padding:5px 7px;border-radius:2px;white-space:nowrap;background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.ev li.ci .evk,.evk.ci,.ev li.run .evk,.evk.run{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.ev li.gap .evk,.evk.gap{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.sheet{display:none;position:fixed;inset:auto 0 0 0;z-index:30;max-width:720px;margin-inline:auto;background:var(--card);border-top:2px solid var(--accent);border-inline:1px solid var(--line);padding:14px 20px calc(18px + env(safe-area-inset-bottom));max-height:52vh;overflow-y:auto}
.sheet.show{display:block}
.sheet .close{width:auto;padding:0 14px;font-size:14.5px}

/* Drawings. Geometry and classes come from the engine; everything visual is here. */
svg.plate{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans);letter-spacing:0}
svg.plate text{fill:var(--ink);font-size:14px}
svg.plate .main{font-weight:650;font-size:15px}
svg.plate .sub{font-size:14px;fill:var(--ink-2)}
svg.plate .code{font-family:var(--mono);font-size:14px}
svg.plate .main.code{font-size:14.5px}
svg.plate .main.code.disp{font-size:20px}
svg.plate .disp{font-family:var(--mono);font-weight:600;font-size:20px;letter-spacing:-.01em}
svg.plate .main.disp:not(.code){font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.01em}
svg.plate .sub.r,svg.plate .note.r{fill:var(--bad)}
svg.plate .note{font-size:14px;fill:var(--ink-2)}
svg.plate .note.b{font-weight:700;fill:var(--ink)}
svg.plate .note.b.r{fill:var(--bad)}
/* zones: where things run */
g.zone .zone-bg,.frame rect{fill:var(--zone-f);stroke:var(--zone-s);stroke-width:1.3}
g.zone[data-zone*="ext"] .zone-bg,g.zone[data-zone*="third"] .zone-bg{stroke-dasharray:6 4}
svg.plate .zone-lab,svg.plate .frame text{font:600 14px var(--label);fill:var(--ink-3);letter-spacing:.01em}
/* callouts: logic that belongs to the component that runs it */
g.callout rect{fill:var(--card);stroke:var(--accent);stroke-width:1.6}
g.callout line,g.callout polyline,g.callout path{stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linejoin:round}
g.callout circle{fill:var(--accent);stroke:none}
svg.plate g.callout text{font-size:14px;font-weight:600;fill:var(--ink)}
/* the key callout is the one mechanism the drawing turns on: solid accent */
g.callout.key rect{fill:var(--accent-bg);stroke:var(--accent-bg)}
g.callout.key line,g.callout.key polyline,g.callout.key path{stroke:var(--accent-bg);stroke-width:2.4}
g.callout.key circle{fill:var(--accent-bg)}
svg.plate g.callout.key text,svg.plate g.callout.key tspan{fill:var(--on-accent)}
.wall{fill:var(--edge);stroke:none}
.lane{stroke:var(--edge);stroke-width:1.7}
.xm{stroke:var(--ink);stroke-width:2.8;fill:none;stroke-linecap:round}
.xm.red{stroke:var(--bad)}
/* arrows and their labels */
.edge path{fill:none;stroke:var(--edge);stroke-width:1.7;stroke-linejoin:round}
.edge polygon{fill:var(--edge)}
.edge.dashed path{stroke-dasharray:5 4}
.edge.hot path{stroke:var(--accent);stroke-width:3}
.edge.hot polygon{fill:var(--accent);stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round}
svg.plate text.elab{font-size:14px;font-weight:600;fill:var(--ink-2);paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
/* numbered steps follow one real request */
svg.plate .mk circle,svg.plate circle.step{fill:var(--ink);stroke:var(--card);stroke-width:2}
svg.plate .mk text,svg.plate text.step{font:700 14px var(--sans);fill:var(--bg);text-anchor:middle}
svg.plate .mk,svg.plate .pl,svg.plate .pt,svg.plate .pw,svg.plate .pd,svg.plate .pz,svg.plate text.step,svg.plate text.elab,svg.plate .zone-lab,svg.plate g.callout{pointer-events:none}
/* node kinds: colour and shape together */
[data-kind="client"]{--kf:var(--k-client-f);--ks:var(--k-client-s)}
[data-kind="edge"]{--kf:var(--k-edge-f);--ks:var(--k-edge-s)}
[data-kind="service"]{--kf:var(--k-service-f);--ks:var(--k-service-s)}
[data-kind="worker"]{--kf:var(--k-worker-f);--ks:var(--k-worker-s)}
[data-kind="store"]{--kf:var(--k-store-f);--ks:var(--k-store-s)}
[data-kind="external"]{--kf:var(--k-external-f);--ks:var(--k-external-s)}
[data-kind="ci"]{--kf:var(--k-ci-f);--ks:var(--k-ci-s)}
[data-kind="device"]{--kf:var(--k-device-f);--ks:var(--k-device-f);--kt:var(--k-device-t)}
[data-kind="file"],[data-kind="data"]{--kf:var(--k-file-f);--ks:var(--k-file-s)}
[data-kind="logic"]{--kf:var(--k-logic-f);--ks:var(--k-logic-s)}
svg.plate .node{cursor:pointer;outline:none}
.node .hit{fill:transparent}
.node .sh{fill:var(--kf,var(--card));stroke:var(--ks,var(--k-plain-s));stroke-width:1.8;stroke-linejoin:round;transition:stroke-width .12s}
.node rect.sh{rx:3px}
.node .sh2{fill:none;stroke:var(--ks,var(--k-plain-s));stroke-width:1.5}
.node .sh.none{fill:transparent;stroke:none}
svg.plate .node[data-kind="device"] text,svg.plate .node[data-kind="device"] tspan{fill:var(--kt)}
.node[data-kind="file"] .sh{stroke-width:1.5}
.node[data-kind="logic"] .sh{stroke-width:2.2}
.node:hover .sh:not(.none){stroke-width:2.8}
/* planned, disabled or unverified: dashed outline */
.node.dash .sh,.node.dash .sh2{stroke-dasharray:5 4;fill:var(--card)}
svg.plate .node.dash text,svg.plate .node.dash tspan{fill:var(--ink)}
svg.plate .node.dash[data-kind="device"] text,svg.plate .node.dash[data-kind="device"] tspan{fill:var(--ink)}
/* built by teammates: hatched */
.node[data-by="team"] .sh,.node.team .sh{fill:url(#hatch-team)}
.node .hatch{display:none}
svg.plate .node[data-by="team"] text,svg.plate .node.team text{paint-order:stroke;stroke:var(--card);stroke-width:5px;stroke-linejoin:round}
svg.plate .node[data-by="team"][data-kind="device"] text,svg.plate .node[data-by="team"][data-kind="device"] tspan{fill:var(--ink)}
pattern .hb{fill:var(--card)}
pattern .hl{stroke:var(--hatch);stroke-width:1.2;opacity:.8}
svg.defs{position:absolute;width:0;height:0;overflow:hidden}
/* the key mechanism: the one solid accent shape in each drawing */
.node.key .sh,.node.hinge .sh{fill:var(--accent-bg);stroke:var(--accent-bg)}
.node.key .sh2,.node.hinge .sh2{stroke:var(--on-accent);opacity:.55}
svg.plate .node.key text,svg.plate .node.key tspan,svg.plate .node.hinge text,svg.plate .node.hinge tspan{fill:var(--on-accent);stroke:none}
svg.plate .node.key.k-cells text,svg.plate .node.key.k-cells tspan,svg.plate .node.hinge.k-cells text,svg.plate .node.hinge.k-cells tspan{fill:var(--ink)}
svg.plate .in{stroke:var(--on-accent);stroke-width:1.5;fill:none;opacity:.8}
svg.plate .in-t{fill:var(--on-accent);font-size:14px}
.in-t2{stroke:var(--k-file-s);stroke-width:1.5}
.fun{stroke:var(--ink-3);stroke-width:.7;opacity:.5}
.in-r{stroke:var(--k-file-s);stroke-width:1.6;opacity:.8}
.c9{fill:var(--ks,var(--line));opacity:.4}.c9.s{opacity:.75}.c9.m{fill:var(--ink);opacity:1}.c9.o{fill:none;stroke:var(--ink);stroke-width:1.3;opacity:1}
.u{fill:var(--accent-bg)}.u.r{fill:var(--bad)}.u.o{fill:none;stroke:var(--ink-3);stroke-width:1}
.flip{opacity:0;font-weight:800;font-size:17px!important}
.node[data-flip] .lab{opacity:0}
.node[data-flip="fail"] .sh{fill:var(--bad);stroke:var(--bad)}
.node[data-flip="fail"] .flip.f,.node[data-flip="pass"] .flip.p{opacity:1}
/* selected by the visitor: an accent ring, so the box keeps the colour of its kind */
.node .foc{fill:none;stroke:none;rx:5px}
.node.on .foc{stroke:var(--accent);stroke-width:3}
.node.on .sh:not(.none){stroke-width:2.8}
.node.key.on .sh,.node.hinge.on .sh{stroke:var(--ink)}
.node:focus-visible .foc{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:4 3}
.node:focus-visible .sh:not(.none){stroke-width:3}
.node.k-plotbox .sh{fill:transparent;stroke:var(--zone-s)}
svg.plate .pl{font-size:14px;fill:var(--ink)}
svg.plate .pt{font:500 14px var(--mono);fill:var(--ink-2)}
svg.plate .plabel{font-weight:700}
svg.plate .pw{stroke:var(--bad);stroke-width:2.2}
svg.plate .pd{fill:var(--bad)}
svg.plate .pz{stroke:var(--ink);stroke-width:1.3}
.exit path{fill:none;stroke:var(--ink-3);stroke-width:1.6}
.exit polygon{fill:var(--ink-3)}
.tok{opacity:0;fill:var(--accent-bg);stroke:var(--card);stroke-width:2.4;pointer-events:none}

/* Case study: fully open on the detail page */
.cs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,3.4vw,44px) clamp(28px,4vw,64px)}
.cs h3{font:500 13.5px/1.4 var(--label);letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.cs p,.cs li{font-size:17.5px;line-height:1.8;text-wrap:pretty}
.cs ul li{padding:11px 0;border-top:1px solid var(--line)}
.cs ul li:first-child{border-top:0;padding-top:0}
.c-role,.c-prob{grid-column:1/-1}  /* stacked: role on top, problem below */
.c-role p{font:500 clamp(19px,1.7vw,22px)/1.7 var(--serif);letter-spacing:-.01em;max-width:44em}
.c-prob p{max-width:44em}
.c-appr{grid-column:1/-1}
.keyed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);counter-reset:s}
.keyed li{counter-increment:s;position:relative;padding:14px 0 14px 46px;border-top:1px solid var(--line)}
.keyed li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:15px;font:600 15px/1.8 var(--mono);color:var(--accent)}
.c-res,.c-hard{grid-column:1/-1}
.c-res ul,.c-hard ul{max-width:52em}
.c-lim{grid-column:1/-1;border-left:4px solid var(--warn);background:var(--warn-soft);padding:20px 26px}
.cs .c-lim h3{color:var(--warn)}
.c-lim ul{columns:2;column-gap:48px}
.cs .c-lim li,.cs .c-lim li:first-child{border-top:0;padding:6px 0 6px 18px;position:relative;break-inside:avoid}
.c-lim li::before{content:"";position:absolute;left:2px;top:1.15em;width:7px;height:2px;background:var(--warn)}

/* Detail page */
.dp{padding-bottom:clamp(8px,2vw,24px)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding-top:22px;font:500 14.5px/1.4 var(--label);color:var(--ink-3)}
.crumb a{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--accent);text-decoration:none;padding:10px 0}
.crumb a:hover{text-decoration:underline}
.crumb .sep{color:var(--line)}
.crumb [aria-current]{color:var(--ink-2);font-weight:600}
.d-head{padding-top:clamp(14px,2vw,26px)}
.d-name{font:700 clamp(46px,6.4vw,92px)/1.04 var(--serif);letter-spacing:-.035em;margin-top:22px;text-wrap:balance}
:lang(en) .d-name{font-size:clamp(42px,5.4vw,82px)}
.d-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px clamp(36px,5vw,88px);margin-top:clamp(20px,2.4vw,32px);align-items:start}
.d-intro .hl{margin-top:0;font-size:clamp(23px,2.4vw,34px);max-width:20em}
.d-text .line{margin-top:4px}
.d-text .stk{margin-top:20px}
.band{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-top:2px solid var(--ink);margin-top:clamp(32px,4vw,52px)}
.band li{padding:22px clamp(16px,2.4vw,36px) 4px 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.band li+li{padding-left:clamp(16px,2.4vw,36px);border-left:1px solid var(--line)}
.band .num{font-size:clamp(46px,5.6vw,84px)}
.band .num.neg{color:var(--bad)}
.band span{font-size:16px;line-height:1.65;color:var(--ink-2);text-wrap:pretty;max-width:26em}
.d-g{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:clamp(40px,5vw,64px)}
.d-main{min-width:0}
.dsec{padding-top:clamp(40px,5vw,72px)}
.dsec:first-child{padding-top:0}
.dsec .sec-h{margin-bottom:clamp(24px,3vw,36px)}
.anc{margin-left:auto;align-self:center;font:500 18px/1 var(--mono);color:var(--ink-3);text-decoration:none;padding:10px 6px}
.anc:hover{color:var(--accent)}
.toc{margin-bottom:clamp(28px,4vw,40px);padding-bottom:20px;border-bottom:1px solid var(--line)}
.toc .eyebrow{margin-bottom:10px}
.toc ol{display:flex;flex-wrap:wrap;gap:2px 6px}
.toc li li{display:inline}
.toc ol ol{display:contents}
.toc a{display:inline-block;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink-2);text-decoration:none;padding:9px 12px;border:1px solid var(--line);border-radius:2px}
.toc a:hover{background:var(--accent-soft);color:var(--ink)}
.toc a.on{border-color:var(--accent);color:var(--accent)}
.pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,104px);border-top:2px solid var(--ink)}
.pn a{display:flex;flex-direction:column;gap:6px;padding:22px 4px 26px;text-decoration:none;border-bottom:1px solid var(--line);transition:background .15s}
.pn a:hover{background:var(--accent-soft)}
.pn .eyebrow{color:var(--accent);font-weight:700}
.pn b{font:700 clamp(24px,2.4vw,32px)/1.25 var(--serif);letter-spacing:-.02em}
.pn b i{font:600 15px/1 var(--mono);font-style:normal;color:var(--accent);margin-right:12px;letter-spacing:0;vertical-align:.2em}
.pn .t{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.pn-n{text-align:right;align-items:flex-end}
.nf{padding-block:clamp(48px,8vw,96px) 0}
.nf .line{margin-top:20px}
.nf-go{margin-top:28px}
.nf-l{margin-top:clamp(40px,5vw,64px);border-top:2px solid var(--ink)}
.nf-l a{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.nf-l a:hover{background:var(--accent-soft)}
.nf-l b{font:700 21px/1.3 var(--serif)}
.nf-l span{font-size:15.5px;color:var(--ink-2)}

/* Also built: the same summary block, smaller. Items without a page show their line and any screenshot. */
.more-l{display:grid}
.sum.also{padding-block:30px;margin-top:0;gap:20px clamp(32px,5vw,80px)}
.sum.also:first-child{border-top:0;padding-top:4px}
.sum.also h3{font-size:clamp(26px,2.6vw,34px);margin-top:10px}
.sum.also .line{margin-top:10px;font-size:17px;color:var(--ink-2)}
.sum.also .hl{font-size:clamp(19px,1.7vw,22px)}
.sum.also:not(:has(.sum-side)){grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "go"}
.sum.also .screens{margin-top:0}
.sum.also .screens.g1 ul{grid-template-columns:minmax(0,440px)}
.sum.also .shot.phone{flex-basis:150px}
.sum.also .cap{font-size:14.5px}

/* Numbers with their sources */
.nums table{width:100%;border-collapse:collapse}
.nums thead tr{border-bottom:2px solid var(--ink)}
.nums th{font:500 13.5px/1.3 var(--label);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 16px 10px 0}
.nums td{padding:22px 16px 22px 0;vertical-align:middle;font-size:17px;line-height:1.65;border-top:1px solid var(--line)}
.nums tbody tr:first-child td{border-top:0}
.nums td.v{font:500 clamp(34px,3.4vw,52px)/1 var(--mono);letter-spacing:-.05em;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums;width:210px}
.nums td.v.neg{color:var(--bad)}
.nums .viz{width:150px}
.nums .viz svg{display:block;width:132px;height:42px;overflow:visible}
.viz .i{fill:var(--accent-bg)}.viz .o{fill:none;stroke:var(--ink-3);stroke-width:1}.viz .r{fill:var(--bad);stroke:none}.viz .ro{fill:none;stroke:var(--bad);stroke-width:1}
.viz .t{font:600 9.4px var(--mono);fill:var(--ink-3)}.viz .t.c{text-anchor:middle}.viz .z{stroke:var(--ink-3);stroke-width:1}.viz .rl{stroke:var(--bad);stroke-width:1.8}
.nums td.c{text-wrap:pretty;max-width:30em}
.nums td.c b{font-weight:700}
.nums td.p{width:170px}
.nums td.p a{display:inline-block;padding-block:4px;font-weight:700;color:var(--accent);text-decoration:none}
.nums td.p a:hover{text-decoration:underline}
.nums td.w{width:230px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.nums .lb{display:none}

/* How I work, stack and roles, about */
.str{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,56px)}
.str li{padding:22px 0 26px;border-top:1px solid var(--line)}
.s-n{font:600 15px/1 var(--mono);color:var(--accent)}
.str h3{font:700 clamp(19px,1.7vw,22px)/1.4 var(--serif);letter-spacing:-.01em;margin-top:10px;text-wrap:balance}
.str p{font-size:16.5px;line-height:1.75;margin-top:8px;color:var(--ink-2);text-wrap:pretty}
.stack-g>div{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:8px 32px;padding:18px 0;border-top:1px solid var(--line)}
.stack-g dt{font:700 19px/1.5 var(--serif);letter-spacing:-.01em}
.stack-g .stk{margin-top:0}
.fit-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,56px);margin-top:clamp(40px,5vw,64px)}
.fit-g>div{border-top:2px solid var(--accent);padding-top:14px}
.fit-g dt{font:700 clamp(19px,1.7vw,22px)/1.4 var(--serif);letter-spacing:-.01em}
.fit-g li{font-size:16.5px;line-height:1.7;padding:11px 0;border-top:1px solid var(--line);color:var(--ink-2);text-wrap:pretty}
.fit-g li:first-child{border-top:0;padding-top:8px}
.abt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px clamp(36px,5vw,88px);align-items:start}
.lead{font:500 clamp(18px,1.55vw,21px)/1.95 var(--serif);letter-spacing:-.005em;max-width:32em;text-wrap:pretty}
.tbl div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.tbl div:first-child{border-top:2px solid var(--ink)}
.tbl dt{font:500 14px/1.8 var(--label);color:var(--ink-3)}
.tbl dd{font-size:16.5px;line-height:1.7;text-wrap:pretty}

/* Contact */
.contact{padding-bottom:clamp(24px,4vw,48px)}
.contact-g{background:var(--contact-bg);color:var(--contact-ink);border-radius:2px;padding:clamp(24px,4.6vw,64px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px clamp(32px,5vw,72px)}
.open-to{font:500 clamp(20px,1.8vw,25px)/1.6 var(--serif);text-wrap:balance}
.contact .k{font:500 13.5px/1.4 var(--label);letter-spacing:.06em;text-transform:uppercase;color:inherit;opacity:.85}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:16px 0;border-bottom:1px solid color-mix(in srgb,var(--contact-ink) 28%,transparent)}
.row .k{width:104px;flex:none}
.row .v{font:500 16px/1.4 var(--mono);overflow-wrap:anywhere;min-width:0;padding-block:8px}
.mail-row{padding-top:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.mail-row .k{grid-column:1/-1;width:auto}
.mail{font:700 clamp(20px,3.1vw,40px)/1.25 var(--serif);letter-spacing:-.02em;white-space:nowrap;min-width:0;display:inline-block;padding:10px 0}  /* a link now: tall enough to tap */
.contact .btn{background:transparent;color:var(--contact-ink);border-color:var(--contact-ink);min-height:46px;font-size:15.5px;padding:0 18px}
.contact .btn:hover{background:var(--contact-ink);color:var(--contact-bg)}
.contact :focus-visible{outline-color:var(--contact-ink)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px 40px;font:500 14px/1.5 var(--label);color:var(--ink-3)}
.foot a{font-weight:600;padding:8px 0}
p.none{margin-top:48px;font-size:17px}

/* Desktop: the table of contents sits in its own sticky column; the drawing gets the wide part of the page */
@media (min-width:1100px){
  .dp .fig-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .dp .drawing{max-width:none}
  .dp .insp{max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:1280px){
  .d-g{grid-template-columns:clamp(150px,12vw,176px) minmax(0,1fr);gap:0 clamp(28px,3.2vw,56px);align-items:start}
  .toc{position:sticky;top:92px;margin:0;padding:0;border:0;max-height:calc(100vh - 112px);overflow-y:auto}
  .toc ol{display:block}
  .toc li li{display:block}
  .toc ol ol{display:block;margin:2px 0 6px 14px;border-left:1px solid var(--line)}
  .toc a{display:block;border:0;border-left:2px solid transparent;border-radius:0;padding:7px 10px 7px 12px;margin-left:-2px;font-size:15px}
  .toc ol ol a{font-weight:500;font-size:14.5px;padding-block:5px}
  .toc a:hover{background:none;color:var(--accent)}
  .toc a.on{border-left-color:var(--accent);color:var(--accent);font-weight:700;background:var(--accent-soft)}
}
/* Below desktop width: one column, the drawing above its note */
@media (max-width:1099px){
  .hero-g,.notes{grid-template-columns:minmax(0,1fr)}
  .hero-g{gap:44px}
  .ix{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 136px;gap:4px 20px;align-items:start}
  .ix-name{grid-column:2}
  .ix-stat{grid-column:3;grid-row:1/3;grid-template-columns:minmax(0,1fr);gap:2px}
  .ix-st{grid-column:2;grid-row:2;margin-top:4px}
  .ix-per,.ix-per:last-child{grid-column:4;grid-row:1}
  .ix.more .ix-stat{grid-column:3;grid-row:1}
  .sum:has(.sum-side){grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "side" "go";grid-template-rows:none}
  .d-intro{grid-template-columns:minmax(0,1fr)}
  .sum-side{padding-top:0}
  .facts{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* claim first, then the drawing, then the note for the selected part */
  .fig-grid{display:flex;flex-direction:column;gap:22px}
  .fig-side{display:contents}
  .dg figcaption{order:-1}
  .insp{position:static;margin-top:0}
  .screens.g3 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs{grid-template-columns:minmax(0,1fr)}  /* 12 columns with 28px gaps need 308px and overflow a 320px phone */
  .c-role,.c-prob,.c-res,.c-hard{grid-column:1/-1}
  .c-lim ul,.keyed{columns:1;grid-template-columns:minmax(0,1fr)}
  .str,.fit-g{grid-template-columns:minmax(0,1fr)}
  .abt,.contact-g{grid-template-columns:minmax(0,1fr)}
  .nums thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .nums table,.nums tbody{display:block}
  .nums tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 24px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
  .nums tbody tr:first-child{border-top:0}
  .nums td,.nums tbody tr:first-child td{display:block;padding:0;border:0;width:auto}
  .nums .viz{justify-self:end}
  .nums td.c{grid-column:1/-1;max-width:none}
  .nums td.w{text-align:left}
  .nums .lb{display:inline}
  .nums .lb::after{content:": "}
}
/* The header nav and Resume button need about 880px in English; below that the hero and the index carry the same links. */
@media (max-width:899px){.nav,.bar-cv{display:none}}
/* Phones */
@media (max-width:719px){
  body{font-size:16px}
  main,main [id],main a,main button,main summary,main details,main .node{scroll-margin-top:68px}
  .bar-in{height:56px;gap:10px}
  .brand{padding-block:14px;font-size:20px}
  .hero{padding-top:28px}
  .role{font-size:13px}
  h1{margin-top:16px;font-size:clamp(52px,17vw,68px)}
  .headline{margin-top:22px;font-size:clamp(22px,6vw,26px)}
  .lede{font-size:16.5px}
  .btns{margin-top:24px;gap:8px}
  .btn{padding:0 16px;font-size:15.5px}
  .btns .btn.primary{flex:1 1 100%}
  .btns .btn:not(.primary){flex:1}
  .proofs{grid-template-columns:max-content minmax(0,1fr);column-gap:18px}
  .proof-r{padding:18px 0}
  .proof-r .n{display:none}
  .num{font-size:34px}
  .index-h{grid-template-columns:minmax(0,1fr)}
  .filter{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:10px;margin-left:-10px}
  .filter .k{display:none}
  .filter button{min-height:44px}
  .ix{grid-template-columns:34px minmax(0,1fr) auto;gap:6px 12px;padding:16px 4px}
  .ix-stat{grid-column:2/-1;grid-row:2;grid-template-columns:108px minmax(0,1fr);gap:0 12px;align-items:baseline}
  .ix-name{grid-column:2/-1}
  .ix-st{grid-column:2;grid-row:3;margin-top:2px}
  .ix-per,.ix-per:last-child{grid-column:3;grid-row:3;align-self:center}
  .ix.more .ix-stat{grid-column:2/-1;grid-row:2}
  .ix.more .ix-per{grid-row:3}
  .sec{padding-top:64px}
  .p-tag{flex-basis:100%;order:3}
  .p-meta{gap:8px 16px}
  .sum h3{font-size:clamp(36px,11vw,46px)}
  .sum.also h3{font-size:clamp(28px,8.5vw,34px)}
  .d-name,:lang(en) .d-name{font-size:clamp(38px,12vw,50px)}
  .stats{column-gap:16px}
  .stats .num,.sum .stats .num{font-size:34px}
  .sum-go .btn{width:100%}
  .band{grid-template-columns:minmax(0,1fr)}
  .band li,.band li+li{padding:20px 0;border-left:0;border-top:1px solid var(--line)}
  .band li:first-child{border-top:0;padding-top:20px}
  .band .num{font-size:52px}
  .pn{grid-template-columns:minmax(0,1fr)}
  .pn-n{text-align:left;align-items:flex-start}
  .toc{display:none}
  .anc{display:none}
  .steps{grid-template-columns:minmax(0,1fr)}
  .stg{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:20px 0}
  .stg>.sn{grid-row:1/4;font-size:28px}
  .stg>*:not(.sn){grid-column:2}
  .stg .by{margin-top:0}
  .stg .sev{flex-direction:column;align-items:flex-start;gap:6px}  /* label above the line: beside it the text had about 15 Korean characters per row */
  .stg h5{margin-top:6px}
  .screens.g2 ul,.screens.g3 ul{grid-template-columns:minmax(0,1fr)}
  .shot.phone{flex-basis:46%;max-width:210px}
  .fig{margin-inline:calc(var(--pad)*-1);border-inline:0;border-radius:0}
  .canvas{padding:12px 8px 8px}
  .used,.fig-foot{padding-inline:var(--pad)}
  .insp{padding:14px 16px 18px}
  .cs{gap:28px}
  .c-lim{padding:16px 18px}
  .params dl{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense}
  .params dl>div.wide{grid-column:1/-1}  /* a value of 13+ monospace characters does not fit half a phone */
  .nums tr{grid-template-columns:minmax(0,1fr) auto}
  .nums td.v{font-size:36px}
  .nums td.p,.nums td.w{grid-column:1/-1}
  .stack-g>div{grid-template-columns:minmax(0,1fr)}
  .tbl div{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .lead{font-size:17px}
  .row .k{width:100%}
  .row .v{font-size:clamp(13px,3.7vw,16px)}
  .mail-row{grid-template-columns:minmax(0,1fr)}
  .mail-row .btn{justify-self:start}
  /* Touch targets for the controls used most on a phone. */
  .seg button{min-height:40px;min-width:44px}
  .icon{width:44px;height:44px}
  .stp button,.replay{min-height:44px}
  .stp button{width:44px}
  .alt summary{padding-block:12px}
  .nums td.p a{padding-block:10px;margin-block:-6px}
}
@media (max-width:360px){
  .seg button{padding:0 8px}
  .proofs,.stats{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}
@media print{.bar,.stp,.motion,.skip,.sheet,.toc,.pn,.anc{display:none}.contact-g{background:none;color:inherit}.insp{position:static}}