/* ============================================================
   Nabhak, portfolio v6: article pages (articles/*.html)
   Loads after site.css and only adds the reading layout. Tokens, nav,
   footer, buttons, tags, .hl, .sticker, .results, .post/.thumb and
   .strip all come from site.css.
   ============================================================ */

/* ---------- Reading progress (CSS scroll timeline; js/article.js sets --p where unsupported) ---------- */
.art-progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:3px;z-index:70;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0));pointer-events:none}
@supports (animation-timeline:scroll()){
  .art-progress{animation:artProgress linear both;animation-timeline:scroll(root)}
}
@keyframes artProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Head ---------- */
.art-head{position:relative;padding-bottom:var(--s-6)}
.art-head .link{margin-bottom:var(--s-6)}
.art-head .tags{align-items:center;margin-bottom:var(--s-5)}
.art-head .tag{background:transparent}
/* article number = .nsq (site.css) */
.art-head .h1{max-width:20ch}
.art-head .lead{margin-top:var(--s-5);max-width:58ch}
.art-by{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-6);font-size:var(--fs-body);color:var(--body)}
.art-by img{width:48px;height:48px;border-radius:var(--pill);object-fit:cover;background:var(--sun)}
.art-by b{display:block;color:var(--ink);font-weight:700}

.art-body{max-width:70ch;min-width:0}
.art-body>*+*{margin-top:var(--s-5)}
/* reading size: 16 on phones, 20 from 900px (both on the type scale); lists follow the paragraphs */
.art-body{--art-fs:var(--fs-body)}
@media(min-width:900px){.art-body{--art-fs:var(--fs-title)}}
.art-body p{font-size:var(--art-fs);line-height:var(--lh-body);color:var(--ink)}
.art-body h2{font-size:var(--fs-sub);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-display);margin-top:var(--s-9);max-width:24ch}
.art-body h2+*{margin-top:var(--s-4)}
.art-body h3{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-top:var(--s-7)}
.art-body h3+*{margin-top:var(--s-3)}
.art-body a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--sun)}
.art-body a:hover{text-decoration-color:var(--ink)}
.art-body strong{font-weight:700}
.art-body code{font-family:var(--mono);font-size:var(--fs-body);padding:.1em .45em;border-radius:var(--r-inner);background:var(--white);box-shadow:var(--edge);overflow-wrap:anywhere}

/* Bulleted list: small outlined squares, the site's bullet */
.art-body ul.list{display:flex;flex-direction:column;gap:var(--s-3)}
.art-body ul.list li{position:relative;padding-left:1.6em;font-size:var(--art-fs);line-height:var(--lh-body);color:var(--ink)}
.art-body ul.list li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:var(--pill);background:var(--sun)}  /* = .sqb */
.art-body ul.list li b{font-weight:700}

/* Numbered steps: outlined number squares (= .nsq at 36px; ::before cannot take the class) */
.steps-n{display:flex;flex-direction:column;counter-reset:st;border-top:1px solid var(--line-mid)}
.steps-n li{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--s-4);align-items:start;padding:var(--s-4) 0;border-bottom:1px solid var(--line-mid)}
.steps-n li::before{counter-increment:st;content:counter(st,decimal-leading-zero);grid-row:1 / span 2;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:var(--fill-soft);font-size:var(--fs-cap);font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}  /* = .nsq (v6 soft) */
.steps-n li>*{grid-column:2}
.steps-n li>b{display:block;font-weight:700;color:var(--ink);line-height:1.35}
.steps-n li>span{display:block;font-size:var(--fs-body);color:var(--body);line-height:1.5;margin-top:2px}
.steps-n li:hover::before{background:var(--sun)}

/* ---------- Two-column comparison (do / don't, before / after) ---------- */
.compare{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media(min-width:640px){.compare{grid-template-columns:repeat(2,minmax(0,1fr))}}
.compare>div{padding:var(--s-5);border-radius:var(--r-inner);background:var(--white);box-shadow:var(--edge);min-width:0}
.cmp-h{display:flex;align-items:center;gap:var(--s-2);font-weight:700;color:var(--ink);margin-bottom:var(--s-2)}
.cmp-h i{--sqb:12px;--sqb-bg:var(--mint)}  /* + .sqb */
.cmp-bad .cmp-h i{--sqb-bg:var(--tangerine)}
.compare ul li{font-size:var(--fs-body);line-height:1.5;color:var(--ink);padding:var(--s-2) 0;border-top:1px solid var(--line-soft)}
.compare ul li b{font-weight:700}
.compare ul li code,.art-body li code{white-space:nowrap}
.compare p{font-size:var(--fs-body)!important;color:var(--body)}

/* Three plugin cards / four state cards */
.cards-3{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media(min-width:720px){.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
@media(min-width:720px){.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mini{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);border-radius:var(--r-inner);background:var(--white);box-shadow:var(--edge);min-width:0}
.mini b{font-weight:700;font-size:var(--fs-body);letter-spacing:-.01em;line-height:1.25}
.mini p{font-size:var(--fs-body)!important;line-height:1.5!important;color:var(--body)}
.mini .big{display:block;font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}
.mini .big em{font-style:normal}
.mini .glyph{margin:0 0 var(--s-1);width:100%;height:40px}
.mini-sun{background:var(--sun-tint)}
.mini-teal{background:var(--teal-tint)}
.mini-tan{background:var(--tangerine-tint)}

/* Line-art glyphs for the four states */
.g-empty .x{left:0;top:6px;width:36px;height:28px;border:var(--stroke) dashed var(--tangerine);border-radius:6px}
.g-error .x{left:0;top:6px;width:36px;height:28px;border:1px solid var(--line-mid);border-radius:6px;background:var(--tangerine-tint)}
.g-error .x::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:var(--fs-body);color:var(--ink)}
.g-load .l{height:6px;border-radius:3px;background:var(--line-mid)}
.g-load .l1{left:0;top:8px;width:40px}.g-load .l2{left:0;top:20px;width:28px;background:var(--sun)}.g-load .l3{left:0;top:32px;width:34px}
.g-over .x{left:0;top:6px;width:36px;height:28px;border:1px solid var(--line-mid);border-radius:6px;background:var(--white)}
.g-over .l{height:5px;border-radius:3px;background:var(--teal);top:16px;left:6px;width:52px}

/* Layer panel before / after */
.layers{font-family:var(--mono);font-size:var(--fs-body);line-height:1.5}
.layers li{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1) 0;border-top:0!important;overflow-wrap:anywhere}
.layers li::before{content:"";width:8px;height:8px;border:1.5px solid var(--ink);flex:0 0 auto;background:var(--white)}
.layers li.d1{padding-left:var(--s-4)}
.layers li.d2{padding-left:var(--s-6)}
.cmp-bad .layers li{color:var(--muted)}
.cmp-bad .layers li::before{border-color:var(--muted)}
.cmp-good .layers li::before{background:var(--mint)}

/* Figma pages list */
.pages{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.pages li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);align-items:center;padding:var(--s-3) 0;border-bottom:1px solid var(--line-mid);font-size:var(--fs-body)}
.pages li b{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;color:var(--ink);min-width:9.5ch}
.pages li b i{--sqb-bg:transparent}  /* + .sqb */
.pages li:nth-child(1) b i{--sqb-bg:var(--sun)}
.pages li:nth-child(2) b i{--sqb-bg:var(--mint)}
.pages li:nth-child(3) b i{--sqb-bg:var(--tangerine)}
.pages li:nth-child(4) b i{--sqb-bg:var(--line-mid)}
.pages li span{font-size:var(--fs-body);color:var(--body)}

/* ---------- Figures ---------- */
.fig{margin-block:var(--s-7)}
.fig figcaption{margin-top:var(--s-3);font-size:var(--fs-body);color:var(--body);line-height:1.5}
.fig figcaption b{color:var(--ink);font-weight:700}

/* ---------- Next note ---------- */
.art-next{padding-block:var(--section)}
.next-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media(min-width:900px){.next-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-9);align-items:center}}
.next-grid .section-head{margin:0}
.next-grid .post{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media(min-width:640px){.next-grid .post{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:var(--s-6)}}
.next-grid .post-body{padding:0}

/* ---------- Copyable prompt box (prompt_box() in the generator: 05's set-up prompt) + its Copy button ---------- */
.ai-prompt{margin-top:var(--s-4);padding:var(--s-4);border-radius:var(--r-inner);background:var(--cream);box-shadow:var(--edge)}
.ai-prompt-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-2);font-size:var(--fs-cap);font-weight:700;color:var(--muted)}
.ai-prompt pre{margin:0;font-family:var(--mono);font-size:var(--fs-body);line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.ai-copy{flex:none}  /* + .btn .btn-ghost .btn-sm */
.ai-copy svg{width:14px;height:14px}
.ai-copy.is-done{background:var(--sun);box-shadow:none}

/* hidden attribute must win over the display rules below */
.art-body [hidden]{display:none!important}

/* ---------- The article template (all 14 notes, owner pick 26 Oct 2026): one calm 640px column ---------- */
/* Owner pin, 7 Oct 2026: the header, the cover and every figure share the text column (400–1040 at 1440,
   the 16px gutters on phones). No contents list (owner, 26 Oct: "articles are short"). See docs/decisions.md. */
.art-v2,.art-v2-head{--col:640px}
.art-v2{padding-bottom:var(--section)}
.art-v2-head{padding-bottom:var(--s-5)}
.art-v2-head .art-col,.art-v2 .art-media,.art-body-v2{max-width:var(--col);margin-inline:auto}
.art-v2-head .kicker{margin-bottom:var(--s-3)}
.art-v2-head .h1{text-wrap:balance}
.art-body-v2{margin-top:var(--s-8)}
.art-body-v2>p+p{margin-top:var(--s-4)}
/* One quiet emphasis line mid-article: bigger bold ink + sun marker under the key phrase */
.art-body-v2>p.stress{margin-top:var(--s-6);font-size:var(--fs-title);font-weight:500;line-height:var(--lh-body);color:var(--ink)}
.art-body-v2 h2{margin-top:var(--s-9);text-wrap:balance}

/* the top cover = the Writing card's cover; 13's picture (shop card + clock, drawn for square cards) sits a little higher at 16:9 so the clock is not cut */
.art-media-cv .cv-pic:has(.pic-prod) .pic{translate:-50% calc(-50% - var(--u) * 38)}

/* Emoji list (base in site.css): drop the article list's square bullet and its indent */
.art-body ul.list-emoji li{padding-left:0}
.art-body ul.list-emoji li::before{display:none}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .art-progress{animation:none}
}

/* ============================================================
   Kit figures (.kf; tools/article_figures.py; owner pick 26 Oct 2026, docs/decisions.md "Article template"): the praised
   mood-board style. A neutral panel (the covers' base ground, white -> cream, no topic tint), a 640 x 400 stage in --u
   (= panel width / 640) so the picture scales as one, white boards with a soft neutral glow, the dotted sheet (.dot-back,
   site.css) behind, cream tiles, thin 1.5 glyphs, one font, labels never under 12px. Static.
   ============================================================ */
.fig .kf+figcaption{margin-top:var(--s-3)}
.kf{position:relative;container-type:inline-size;overflow:hidden;isolation:isolate;border-radius:var(--r-card);background:linear-gradient(160deg,var(--white),var(--cream));box-shadow:var(--edge);
  --cv-acc:color-mix(in srgb,var(--ink) 14%,var(--white));
  --kf-sh:0 0 40px -6px color-mix(in srgb,var(--cv-acc) 80%,transparent),var(--shadow-overlay);
  --kf-sh-s:0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent),0 10px 22px -12px color-mix(in srgb,var(--ink) 26%,transparent);
  --kf-line:color-mix(in srgb,var(--ink) 10%,transparent);--kf-soft:color-mix(in srgb,var(--ink) 55%,transparent)}
.kf-in{--u:calc(100cqi / 640);position:relative;width:100%;aspect-ratio:16 / 10;color:var(--ink)}
.kf-in>*{position:absolute;box-sizing:border-box}
.kf-in *{box-sizing:border-box}
/* boards */
.kf-wrap{position:absolute}
.kf-wrap>.kf-b{position:absolute;inset:0}
.kf-wrap>.kf-pill{position:absolute}
.kf-b{overflow:hidden;border-radius:calc(var(--u) * 16);background:var(--white);box-shadow:var(--kf-sh)}
.kf .dot-back{left:calc(var(--u) * 24);top:calc(var(--u) * 24);right:calc(var(--u) * -16);bottom:calc(var(--u) * -16);border-radius:calc(var(--u) * 18)}
.kf-b.faded>*{opacity:.55}
.kf-pad{padding:calc(var(--u) * 14) calc(var(--u) * 18)}
.kf-stack{display:flex;flex-direction:column;gap:calc(var(--u) * 10)}
/* type: one label size, a small one for secondary words; never under 12px */
.kf-lab{font-size:max(12px,calc(var(--u) * 19));font-weight:600;line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
.kf-lab.small{font-size:max(12px,calc(var(--u) * 16))}
.kf-lab.big{font-size:max(12px,calc(var(--u) * 34));font-weight:700;letter-spacing:-.02em}
.kf-lab.wrap{white-space:normal}
.kf-gl{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* title row of a board */
.kf-hd{display:flex;align-items:center;gap:calc(var(--u) * 10);height:calc(var(--u) * 48);padding:0 calc(var(--u) * 18);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent);color:var(--kf-soft)}
.kf-hd>svg{flex:none;width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.kf-hd .kf-lab{color:var(--ink);font-size:max(12px,calc(var(--u) * 17))}
/* tick / cross badges */
.kf-ck{position:absolute;display:grid;place-items:center;width:calc(var(--u) * 34);height:calc(var(--u) * 34);border-radius:50%;background:var(--sun);color:var(--ink);box-shadow:0 4px 8px -4px color-mix(in srgb,var(--ink) 40%,transparent)}
.kf-ck svg{width:56%;height:56%}
.kf-ck.kf-no{background:var(--tangerine-tint);color:var(--tangerine)}
/* layer-panel rows */
.kf-list{display:flex;flex-direction:column;margin:0;padding:calc(var(--u) * 8) 0;list-style:none}
.kf-list li{display:flex;align-items:center;gap:calc(var(--u) * 14);height:calc(var(--u) * 52);padding:0 calc(var(--u) * 18)}
.kf-list li+li{box-shadow:0 -1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.kf-list li.on{margin:0 calc(var(--u) * 8);padding:0 calc(var(--u) * 10);border-radius:calc(var(--u) * 10);background:var(--sun-tint);box-shadow:none}
.kf-list li.on+li{box-shadow:none}
.kf-list li.off .kf-lab{color:color-mix(in srgb,var(--ink) 45%,transparent);text-decoration:line-through;text-decoration-thickness:1.5px}
.kf-list li.off .t{opacity:.55}
.kf-list .kf-lab{flex:1;min-width:0}
.kf-list .kf-ck{position:static;flex:none;width:calc(var(--u) * 28);height:calc(var(--u) * 28)}
.kf-list.tight li{height:calc(var(--u) * 44)}
.kf-list.plain li{height:auto;min-height:calc(var(--u) * 44);padding-block:calc(var(--u) * 6);gap:calc(var(--u) * 10)}
.kf-list.plain .kf-lab{white-space:normal}
.kf .t{display:grid;place-items:center;flex:none;width:calc(var(--u) * 34);height:calc(var(--u) * 34);border-radius:calc(var(--u) * 10);background:var(--cream);color:var(--kf-soft)}
.kf .t svg{width:58%;height:58%}
.kf .t.n{font-size:max(12px,calc(var(--u) * 15));font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.kf .t.sun{background:var(--sun);color:var(--ink)}
.kf .t.mark svg{fill:currentColor;color:var(--ink)}
.kf-ln{display:block;flex:1;height:calc(var(--u) * 10);border-radius:var(--pill);background:var(--kf-line)}
.kf-ln.s{flex:0 0 auto;width:58%}
.kf-ln.h{width:72%;flex:none;height:calc(var(--u) * 13);background:color-mix(in srgb,var(--ink) 70%,transparent)}
/* pills, arrows */
.kf-pill{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u) * 8);height:calc(var(--u) * 40);min-height:24px;padding:0 calc(var(--u) * 16);border-radius:var(--pill);background:var(--white);box-shadow:var(--kf-sh-s);white-space:nowrap}
.kf-pill.sun{background:var(--sun)}
.kf-pill>svg{flex:none;width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.kf-pill.teal{background:var(--teal-tint);color:var(--teal-text);box-shadow:none}
.kf-pill.tint{background:var(--cream);box-shadow:none}
.kf-pill.tint .t{width:auto;height:auto;background:none}
.kf-pill.tint .t svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}
.kf-pill.kf-step{padding:0 calc(var(--u) * 10)}
.kf-pill.note .kf-lab{font-size:max(12px,calc(var(--u) * 16))}
.kf-pill.src{height:calc(var(--u) * 52);background:var(--ink);color:var(--white)}
.kf-dot{display:grid;place-items:center;width:calc(var(--u) * 40);height:calc(var(--u) * 40);border-radius:50%;background:var(--ink);color:var(--white)}
.kf-dot svg{width:50%;height:50%}
.kf-op{display:grid;place-items:center;width:calc(var(--u) * 30);height:calc(var(--u) * 30);font-size:max(12px,calc(var(--u) * 26));font-weight:500;color:color-mix(in srgb,var(--ink) 40%,transparent)}
.kf-op svg{width:70%;height:70%}
.kf-wire{inset:0;width:100%;height:100%;overflow:visible}
.kf-wire path{fill:none;stroke:color-mix(in srgb,var(--ink) 26%,transparent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.kf-wire circle{fill:var(--ink)}
/* drawn mini screen (page, frame, phone): tile + lines + button */
.kf-scr{display:flex;flex-direction:column;gap:calc(var(--u) * 8);width:100%;height:100%}
.kf-pad>.kf-scr{height:calc(var(--u) * 150)}
.kf-scr .mb-ph{flex:0 0 46%;border-radius:calc(var(--u) * 8)}
.kf-scr i{display:block;height:calc(var(--u) * 9);border-radius:calc(var(--u) * 5);background:var(--kf-line)}
.kf-scr i.s{width:62%}
.kf-scr i.h{height:calc(var(--u) * 12);width:78%;background:color-mix(in srgb,var(--ink) 70%,transparent)}
.kf-scr b{display:block;margin-top:auto;height:calc(var(--u) * 26);border-radius:var(--pill);background:var(--ink)}
.kf .mb-ph.ph-teal{background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 30%,var(--white)),color-mix(in srgb,var(--mint) 30%,var(--white)))}
.kf .mb-ph.ph-tan{background:linear-gradient(180deg,color-mix(in srgb,var(--tangerine) 22%,var(--white)),color-mix(in srgb,var(--tangerine) 44%,var(--white)))}
.kf .mb-ph.ph-sun{background:linear-gradient(180deg,color-mix(in srgb,var(--sun) 30%,var(--white)),color-mix(in srgb,var(--sun) 60%,var(--white)))}
.kf .mb-ph.ph-slot{display:grid;place-items:center;background:var(--cream);color:var(--kf-soft)}  /* an empty image slot (12 template): drawn, no grain */
.kf .mb-ph.ph-slot::after{display:none}
.kf .mb-ph.ph-slot svg{position:static;width:calc(var(--u) * 30);height:calc(var(--u) * 30)}
.kf-frame{padding:calc(var(--u) * 14)}
.kf-frame-hd{display:flex;align-items:center;gap:calc(var(--u) * 8);height:calc(var(--u) * 26);margin-bottom:calc(var(--u) * 10);color:var(--kf-soft)}
.kf-frame-hd svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}
.kf-frame-hd .kf-lab{color:var(--ink)}
.kf-frame .kf-scr{height:calc(100% - var(--u) * 36);padding:calc(var(--u) * 10);border-radius:calc(var(--u) * 10);background:var(--cream)}
.kf-phone{padding:calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 16);border-radius:calc(var(--u) * 34)}
.kf-phone .kf-scr{padding-top:calc(var(--u) * 26);position:relative}
.kf-phone .kf-scr::before{content:"";position:absolute;left:50%;top:calc(var(--u) * 4);width:calc(var(--u) * 54);height:calc(var(--u) * 14);translate:-50% 0;border-radius:var(--pill);background:color-mix(in srgb,var(--ink) 12%,transparent)}
.kf-go{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 10)}
.kf-page .kf-scr{gap:calc(var(--u) * 7)}
.kf-note{display:flex;align-items:center;gap:calc(var(--u) * 10);padding:0 calc(var(--u) * 14);border-radius:calc(var(--u) * 10);background:var(--white);box-shadow:var(--kf-sh-s)}
.kf-note i{flex:none;width:calc(var(--u) * 14);height:calc(var(--u) * 14);border-radius:50%}
.kf-note .c-teal{background:var(--teal)}.kf-note .c-tan{background:var(--tangerine)}.kf-note .c-sun{background:var(--sun)}
/* 01: the Restart? card */
.kf-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u) * 16)}
.kf-q{display:flex;align-items:center;gap:calc(var(--u) * 10)}
/* 02: a Claude Code window body + its status line */
.kf-term{display:flex;flex-direction:column;gap:calc(var(--u) * 12);padding:calc(var(--u) * 14) calc(var(--u) * 16)}
.kf-term>.kf-ln{flex:none}
.kf-in-row{display:flex;align-items:center;gap:calc(var(--u) * 8);height:calc(var(--u) * 34);padding:0 calc(var(--u) * 10);border-radius:calc(var(--u) * 8);background:var(--cream);font-size:max(12px,calc(var(--u) * 15));font-weight:600}
.kf-in-row>b{color:var(--kf-soft)}
.kf-task{white-space:nowrap}
.kf-sl{display:flex;align-items:center;gap:calc(var(--u) * 10);height:calc(var(--u) * 26);width:62%;border-radius:calc(var(--u) * 6);background:var(--kf-line)}
.kf-sl:not(:empty){width:auto;background:none}
.kf-sl b{padding:0 calc(var(--u) * 10);height:100%;display:grid;place-items:center;border-radius:calc(var(--u) * 6);font-size:max(12px,calc(var(--u) * 14));font-weight:700;letter-spacing:.02em;white-space:nowrap}
.kf-sl.c1 b{background:var(--tangerine);color:var(--white)}
.kf-sl.c2 b{background:var(--sun);color:var(--ink)}
.kf-sl.c3 b{background:var(--ink);color:var(--white)}
.kf-sl em{font-style:normal;font-size:max(12px,calc(var(--u) * 14));font-weight:500;color:var(--kf-soft);white-space:nowrap}
@container (max-width:480px){.kf-sl em{display:none}}   /* phones: the 12px floor leaves no room for the branch after the name */
/* 04: a project card */
.kf-proj{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u) * 10);height:100%;padding:0 calc(var(--u) * 52) 0 calc(var(--u) * 18)}
.kf-proj .kf-ln{flex:none}
/* 05: hub (pilot 3) + the collapsed card */
.kf-ai{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:calc(var(--u) * 18)}
.kf-ai .t{width:calc(var(--u) * 44);height:calc(var(--u) * 44);border-radius:calc(var(--u) * 12);background:var(--sun);color:var(--ink)}
.kf-tool{display:flex;align-items:center;gap:calc(var(--u) * 14);padding:0 calc(var(--u) * 18);border-radius:calc(var(--u) * 14);background:var(--white);box-shadow:var(--kf-sh)}
.kf-tool .t{width:calc(var(--u) * 38);height:calc(var(--u) * 38);color:var(--ink)}
.kf-flat{display:flex;align-items:flex-start;gap:calc(var(--u) * 10);height:calc(var(--u) * 150);border-radius:calc(var(--u) * 8);border:1.5px dashed color-mix(in srgb,var(--ink) 16%,transparent);border-top:0}
.kf-flat i{display:block;flex:1;height:1.5px;background:color-mix(in srgb,var(--ink) 55%,transparent)}
.kf-flat .kf-lab{margin:calc(var(--u) * -9) calc(var(--u) * 8) 0 0;color:var(--kf-soft)}
/* 06: mood boards (pilot 1, .mb tiles from site.css) + the variable cards */
.kf-mb{display:grid;gap:calc(var(--u) * 6);width:100%;height:100%;padding:calc(var(--u) * 10)}
.kf-mb .mb-ti{border-radius:calc(var(--u) * 6)}
.kf-mb .mb-aa b{font-size:max(12px,calc(var(--u) * 28))}
.kf-mb .mb-sw{gap:calc(var(--u) * 3)}
.kf-mb .mb-sw i{border-radius:calc(var(--u) * 4)}
.kf-mb.calm{grid-template-columns:1fr 1fr 1fr .7fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"hero hero aa sw" "hero hero tex sw" "fog wd wd sw"}
.kf-mb.bold{grid-template-columns:.7fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"sw blob blob still" "sw blob blob aa" "sw hills wd wd"}
.kf .mb-calm{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 4%,var(--white)),color-mix(in srgb,var(--teal) 10%,var(--white)))}
.kf .mb-calm .mb-h1{fill:color-mix(in srgb,var(--ink) 10%,var(--white))}
.kf .mb-calm .mb-h2{fill:color-mix(in srgb,var(--teal) 30%,var(--white))}
.kf .mb-calm .mb-sun{fill:var(--white)}
.kf-mb .mb-aa.light b{font-weight:400}
.kf-mb .mb-wd{font-size:max(12px,calc(var(--u) * 15));padding:calc(var(--u) * 6)}
.kf-mb .mb-sw.calm .s1{background:color-mix(in srgb,var(--ink) 8%,var(--white))}
.kf-mb .mb-sw.calm .s2{background:color-mix(in srgb,var(--teal) 30%,var(--white))}
.kf-mb .mb-sw.calm .s3{background:color-mix(in srgb,var(--ink) 55%,var(--white))}
.kf-mb .mb-sw.bold .s1{background:var(--tangerine)}
.kf-mb .mb-sw.bold .s2{background:var(--sun)}
.kf-mb .mb-sw.bold .s3{background:var(--ink)}
.kf-mb .mb-wd.bold{background:var(--sun-tint);font-weight:700}
.kf-tk{display:flex;flex-direction:column;gap:calc(var(--u) * 10);padding:calc(var(--u) * 12)}
.kf-tk>span:first-child{display:grid;flex:1;place-items:center;border-radius:calc(var(--u) * 10);background:var(--cream)}
.kf-sw3{display:flex;width:70%;height:56%;border-radius:calc(var(--u) * 8);overflow:hidden}
.kf-sw3 i{flex:1}.kf-sw3 i:nth-child(1){background:var(--tangerine)}.kf-sw3 i:nth-child(2){background:var(--sun)}.kf-sw3 i:nth-child(3){background:var(--ink)}
.kf-aa{font-size:max(12px,calc(var(--u) * 34));font-weight:700;letter-spacing:-.02em}
.kf-gap{display:flex;flex-direction:column;gap:calc(var(--u) * 12);width:66%}
.kf-gap i{display:block;height:calc(var(--u) * 12);border-radius:calc(var(--u) * 4);background:color-mix(in srgb,var(--ink) 22%,transparent)}
.kf-rad{display:block;width:calc(var(--u) * 44);height:calc(var(--u) * 44);border-radius:calc(var(--u) * 20) calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6);background:var(--tangerine-hl)}
/* 07: screenshots, the meter, the pin, the message */
.kf-abs{position:absolute}
.kf-abs>*:not(.kf-hd){position:absolute}
.kf-th{display:flex;flex-direction:column;gap:calc(var(--u) * 6);padding:calc(var(--u) * 8);border-radius:calc(var(--u) * 8);background:var(--cream)}
.kf-th i{display:block;height:calc(var(--u) * 6);border-radius:var(--pill);background:var(--kf-line)}
.kf-th i.h{height:calc(var(--u) * 20);border-radius:calc(var(--u) * 4);background:color-mix(in srgb,var(--ink) 10%,var(--white))}
.kf-th i.s{width:60%}
.kf-th b{position:absolute;width:calc(var(--u) * 18);height:calc(var(--u) * 18);border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--tangerine)}
.kf-meter{display:flex;align-items:center;gap:calc(var(--u) * 12)}
.kf-meter .bar{flex:1;height:calc(var(--u) * 12);border-radius:var(--pill);background:var(--kf-line);overflow:hidden}
.kf-meter .bar i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--tangerine)}
.kf-page{display:flex;flex-direction:column;gap:calc(var(--u) * 10);padding:calc(var(--u) * 14) calc(var(--u) * 18)}  /* 07 page, 12 template + pages */
.kf-page>.kf-nav{display:block;height:calc(var(--u) * 10);width:40%;border-radius:var(--pill);background:var(--kf-line)}
.kf-page>.mb-ph{flex:none;height:calc(var(--u) * 70);border-radius:calc(var(--u) * 8)}
.kf-page>.kf-ln{flex:none}
.kf-page>.cta{position:relative;display:block;width:calc(var(--u) * 100);height:calc(var(--u) * 28);border-radius:var(--pill);background:var(--ink)}
.kf-pin{position:absolute;right:calc(var(--u) * -14);top:calc(var(--u) * -16);display:grid;place-items:center;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50% 50% 50% 0;background:var(--tangerine);color:var(--white);font-size:max(12px,calc(var(--u) * 15));font-weight:700}
.kf-note-b{display:flex;align-items:center;padding:0 calc(var(--u) * 16)}
.kf-msg{display:flex;align-items:center;gap:calc(var(--u) * 10)}
.kf-msg .av{flex:none;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50%;background:var(--sun)}
.kf-shot{position:relative;display:block;height:calc(var(--u) * 92)}
.kf-shot .mb-ph{position:absolute;inset:0;border-radius:calc(var(--u) * 8)}
.kf-shot .box{position:absolute;left:18%;top:22%;width:44%;height:46%;border-radius:calc(var(--u) * 6);box-shadow:inset 0 0 0 1.5px var(--tangerine);background:color-mix(in srgb,var(--tangerine) 10%,transparent)}
.kf-site{display:flex;flex-direction:column;gap:calc(var(--u) * 9);padding:calc(var(--u) * 14) calc(var(--u) * 18)}
.kf-site>.kf-nav{display:block;width:34%;height:calc(var(--u) * 10);border-radius:var(--pill);background:var(--kf-line)}
.kf-site>.kf-ln{flex:none}
.kf-site .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u) * 10);margin-top:calc(var(--u) * 12)}
.kf-site .c{display:flex;flex-direction:column;gap:calc(var(--u) * 7);padding:calc(var(--u) * 10);border-radius:calc(var(--u) * 10);background:var(--cream)}
.kf-site .c .kf-ln{flex:none;height:calc(var(--u) * 7)}
.kf-site .c .d{display:block;width:calc(var(--u) * 20);height:calc(var(--u) * 20);border-radius:50%;background:color-mix(in srgb,var(--ink) 14%,var(--white))}
.kf-site.mine .c:nth-child(1){background:var(--sun-tint)}.kf-site.mine .c:nth-child(2){background:var(--teal-tint)}.kf-site.mine .c:nth-child(3){background:var(--tangerine-tint)}
.kf-site.mine .c:nth-child(1) .d{background:var(--sun)}.kf-site.mine .c:nth-child(2) .d{background:var(--teal)}.kf-site.mine .c:nth-child(3) .d{background:var(--tangerine)}
.kf-area{position:absolute;border-radius:calc(var(--u) * 12);box-shadow:inset 0 0 0 1.5px var(--tangerine);background:color-mix(in srgb,var(--tangerine) 8%,transparent)}
.kf-area .kf-pin{right:auto;left:calc(var(--u) * -12)}
.kf-lab.kf-mute{color:var(--kf-soft)}
.kf-pill.down>svg{rotate:90deg}
.kf-share{display:flex;gap:calc(var(--u) * 12);padding:calc(var(--u) * 12);border-radius:calc(var(--u) * 12);background:var(--cream)}  /* the shared screen */
.kf-share>.kf-shot{flex:0 0 52%;height:auto}
.kf-share>.kf-page{flex:1;justify-content:center;padding:0 calc(var(--u) * 4)}
.kf-shot .box>.kf-pin{right:auto;left:calc(var(--u) * -12)}
.kf-crowd{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(var(--u) * 10)}
.kf-seat{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 10);padding-top:calc(var(--u) * 16);border-radius:calc(var(--u) * 12);background:var(--cream)}
.kf-seat .kf-who{width:calc(var(--u) * 40);height:calc(var(--u) * 40);background:color-mix(in srgb,var(--ink) 7%,var(--white));color:color-mix(in srgb,var(--ink) 20%,transparent)}
.kf-seat>.kf-ln{flex:none;width:44%;margin-top:calc(var(--u) * 6);height:calc(var(--u) * 8)}
.kf-seat.on{background:var(--sun-tint)}
.kf-seat.on .kf-who{background:var(--sun);color:var(--ink)}
.kf-bub.sun{padding:calc(var(--u) * 12) calc(var(--u) * 16);background:var(--sun)}
.kf-ink{position:absolute;overflow:visible;inset:0;width:100%;height:100%}
.kf-ink path{fill:none;stroke:var(--tangerine);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* 08: seats, the sheet, the review card */
.kf-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 20);height:100%;padding:0 calc(var(--u) * 28)}
.kf-row b[lang="th"]{font-size:max(12px,calc(var(--u) * 22))}
.kf-row.off .kf-stack{opacity:.55}
.kf-row.off .kf-lab.small{text-decoration:line-through;text-decoration-thickness:1.5px}
.kf-row .kf-stack{gap:calc(var(--u) * 6)}
.kf-seats{display:grid;grid-template-columns:repeat(6,calc(var(--u) * 28));gap:calc(var(--u) * 7)}
.kf-seats i{height:calc(var(--u) * 32);border-radius:calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 4) calc(var(--u) * 4);background:var(--kf-line)}
.kf-seats i.on{background:var(--tangerine)}
.kf-seats i.tk{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.kf-seats i.ok{background:var(--teal)}
.kf-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 14) calc(var(--u) * 14);padding:calc(var(--u) * 20) calc(var(--u) * 18)}
.kf-grid i{display:block;width:88%;height:calc(var(--u) * 10);border-radius:var(--pill);background:var(--kf-line)}
.kf-grid i.s{width:62%}
.kf-grid i.th{width:76%;background:color-mix(in srgb,var(--tangerine) 30%,transparent)}
.kf-grid i.th.s{width:54%}
.kf-line{display:flex;align-items:center;gap:calc(var(--u) * 8)}
.kf-line.kf-thai{gap:0;font-size:max(12px,calc(var(--u) * 24));font-weight:600;line-height:1.5}   /* 03 review card: the Thai line, the tapped word on sun */
.kf-thai .hit{padding:0 calc(var(--u) * 6);border-radius:calc(var(--u) * 6);background:var(--sun);font-weight:inherit}
.kf-box{display:flex;flex-direction:column;gap:calc(var(--u) * 10);padding:calc(var(--u) * 12) calc(var(--u) * 14);border-radius:calc(var(--u) * 10);background:var(--cream)}
.kf-box .kf-lab{color:var(--kf-soft)}
.kf-box .kf-ln{flex:none}
.kf-acts{display:flex;justify-content:flex-end}
.kf-pager{display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 10)}
.kf-pager b,.kf-pager i{display:grid;flex:none;place-items:center;width:max(20px,calc(var(--u) * 26));height:max(20px,calc(var(--u) * 26));border-radius:50%;background:var(--white);box-shadow:var(--kf-sh-s)}
.kf-pager b{background:var(--ink);color:var(--white);font-size:max(12px,calc(var(--u) * 13))}
.kf-pager .kf-lab{margin-left:calc(var(--u) * 6);color:var(--kf-soft)}
/* 09: chat bubbles, the question marks */
.kf-bub{display:flex;align-items:center;gap:calc(var(--u) * 12);padding:0 calc(var(--u) * 16);border-radius:calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 4);background:var(--white);box-shadow:var(--kf-sh-s)}
.kf-bub .av{display:grid;place-items:center;flex:none;width:calc(var(--u) * 36);height:calc(var(--u) * 36);border-radius:50%;background:var(--cream);color:var(--kf-soft)}
.kf-bub .av svg{width:60%;height:60%}
.kf-qm{display:grid;place-items:center;flex:none;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:50%;background:var(--tangerine-tint);color:var(--tangerine);font-style:normal;font-weight:700;font-size:max(12px,calc(var(--u) * 15))}
.kf-pad-s{display:flex;align-items:center;padding:0 calc(var(--u) * 14)}
/* lighter type scale for new figures (.kf-sa; owner 28 Oct "figure text too bold", font audit Scale A): 500 labels, 600 board titles, 400 secondary */
.kf-sa .kf-lab{font-weight:500}
.kf-sa .kf-hd .kf-lab{font-weight:600}
/* 06 checklist (kf_slashes): the Export section under a layer, and the folders it exports to */
.kf-xp{display:flex;flex-direction:column;gap:calc(var(--u) * 10);box-shadow:0 -1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.kf-xp-h{display:flex;align-items:center;justify-content:space-between}
.kf-sa .kf-xp-h .kf-lab{font-weight:400;color:var(--kf-soft)}
.kf-tree li+li{box-shadow:none}
.kf-tree li>svg{flex:none;width:calc(var(--u) * 22);height:calc(var(--u) * 22);margin-left:calc(var(--u) * 26 * var(--lv,0));color:var(--kf-soft)}
/* 10: post-its, the parking lot, the hand-off chain */
.kf-stk{display:flex;align-items:center;padding:0 calc(var(--u) * 18);border-radius:calc(var(--u) * 8);background:var(--white);box-shadow:var(--kf-sh-s)}
.kf-stk.sun{background:var(--sun-tint)}
.kf-lot{border-radius:calc(var(--u) * 18);background:radial-gradient(circle,color-mix(in srgb,var(--white) 75%,transparent) 1.2px,transparent 1.7px) 0 0/9px 9px,color-mix(in srgb,var(--pinpoint-blue) 18%,var(--white))}
.kf-list .price{flex:none;width:calc(var(--u) * 44)}
.kf-list .price.s{width:calc(var(--u) * 26)}
.kf-node{display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 10);padding:0 calc(var(--u) * 12);border-radius:calc(var(--u) * 14);background:var(--white);box-shadow:var(--kf-sh);text-align:center}
.kf-node .kf-lab{color:inherit;white-space:normal}
.kf-node.src{background:var(--sun)}
.kf-node.end{background:var(--ink);color:var(--white)}
.kf-node.app i:first-child{flex:none;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:calc(var(--u) * 9);background:var(--cream)}
.kf-node.app .kf-ln{flex:1}
.kf-who{display:grid;place-items:center;border-radius:50%;background:var(--tangerine-tint);color:var(--tangerine)}
.kf-who svg{width:60%;height:60%}
/* 05: three windows fanned (kf_same, kf_bars): the bottom bar sits at each window's foot; "oops" = a speech bubble */
/* .kf-fit (owner 27 Oct: "even space top, sides and bottom, smaller elements"): the same 640 x 400 drawing at 84%, centred; the
   drawing's own box runs y 14 -> 362, so it moves down 12. Phones keep 100%: the 12px label floor needs the room. */
.kf-fit{inset:0;margin:auto;width:84%;height:84%;translate:0 calc(var(--u) * 12);--u:calc(100cqi / 640 * .84)}
.kf-fit>*{position:absolute;box-sizing:border-box}
@container (max-width:480px){.kf-fit{width:100%;height:100%;--u:calc(100cqi / 640)}}
.kf-fan>.kf-term{height:calc(100% - var(--u) * 48)}
.kf-fan .kf-sl{margin-top:auto}
.kf-fan .kf-term{padding:calc(var(--u) * 14) calc(var(--u) * 12)}
.kf-fan .kf-sl{flex:none;min-height:18px}
/* owner PinPoint 27 Oct: "the cards look bland, try black": the windows are dark, like the terminal they are */
.kf-b.kf-fan{background:var(--ink);color:var(--white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 12%,transparent),0 2px 4px color-mix(in srgb,var(--ink) 20%,transparent),0 22px 40px -14px color-mix(in srgb,var(--ink) 55%,transparent)}   /* a dark drop shadow (the kit glow reads as a white halo on black) + a faint inner edge so the stacked windows stay apart */
.kf-fan .kf-hd{color:color-mix(in srgb,var(--white) 55%,transparent);box-shadow:0 1px 0 color-mix(in srgb,var(--white) 10%,transparent)}
.kf-fan .kf-hd .kf-lab{color:var(--white)}
.kf-fan .kf-ln{background:color-mix(in srgb,var(--white) 18%,transparent)}
.kf-fan .kf-in-row{background:color-mix(in srgb,var(--white) 9%,transparent)}
.kf-fan .kf-in-row>b{color:color-mix(in srgb,var(--white) 55%,transparent)}
.kf-fan .kf-sl:empty{background:color-mix(in srgb,var(--white) 14%,transparent)}
.kf-fan .kf-sl.c3 b{background:var(--white);color:var(--ink)}
.kf-fan .kf-sl em{color:color-mix(in srgb,var(--white) 55%,transparent)}
.kf-say{position:absolute;padding:calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 14) calc(var(--u) * 12)}
.kf-say .av{background:var(--white);color:var(--ink)}
/* 04: Ghostty drawn like the real window, quiet (kf_tabs; owner PinPoint 27 Oct: "a terminal, not a list", then "too many colours"):
   grey window dots and tab dots, a dark screen; + the real Momo Hop clip as a figure (.kf-clip, kf_hop) */
.kf-win{display:flex;flex-direction:column}
.kf-tbar{display:flex;flex:none;align-items:center;gap:calc(var(--u) * 12);height:calc(var(--u) * 40);padding:0 calc(var(--u) * 14);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.kf-tbar .kf-lab{color:var(--kf-soft)}
.kf-lights{display:flex;flex:none;gap:calc(var(--u) * 6)}
.kf-lights i{width:calc(var(--u) * 11);height:calc(var(--u) * 11);border-radius:50%;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.kf-tstrip{display:flex;flex:none;gap:calc(var(--u) * 4);padding:calc(var(--u) * 6) calc(var(--u) * 8) 0;background:var(--cream)}
.kf-tstrip span{display:flex;flex:1;min-width:0;align-items:center;gap:calc(var(--u) * 7);height:calc(var(--u) * 32);padding:0 calc(var(--u) * 10);border-radius:calc(var(--u) * 8) calc(var(--u) * 8) 0 0}
.kf-tstrip i:first-child{flex:none;width:calc(var(--u) * 8);height:calc(var(--u) * 8);border-radius:50%;background:color-mix(in srgb,var(--ink) 28%,transparent)}
.kf-tstrip .kf-ln{height:calc(var(--u) * 7)}
.kf-tstrip span.on{background:var(--ink)}
.kf-tstrip .on i{background:color-mix(in srgb,var(--white) 30%,transparent)}
.kf-tty{display:flex;flex:1;flex-direction:column;gap:calc(var(--u) * 12);padding:calc(var(--u) * 18) calc(var(--u) * 16);background:var(--ink);color:var(--white)}
.kf-tty>.kf-ln{flex:none;height:calc(var(--u) * 8);background:color-mix(in srgb,var(--white) 22%,transparent)}
.kf-tty .kf-lab{color:inherit}   /* .small (site.css) greys small text */
.kf-tty .kf-lab b{color:color-mix(in srgb,var(--white) 55%,transparent)}
.kf-prompt{display:flex;flex:none;align-items:center;gap:calc(var(--u) * 8);height:calc(var(--u) * 34);margin-top:auto;padding:0 calc(var(--u) * 10);border-radius:calc(var(--u) * 8);background:color-mix(in srgb,var(--white) 9%,transparent);font-weight:600;font-size:max(12px,calc(var(--u) * 16))}
.kf-prompt b{color:color-mix(in srgb,var(--white) 55%,transparent)}
.kf-prompt i{width:calc(var(--u) * 9);height:calc(var(--u) * 18);border-radius:calc(var(--u) * 2);background:color-mix(in srgb,var(--white) 80%,transparent)}
.kf-clip video{display:block;width:100%;height:auto}
/* 10: what I'd fix, one app (kf_oneapp): two phones, the printed box label, the checks */
.kf-ph{display:flex;flex-direction:column;gap:calc(var(--u) * 8);padding:calc(var(--u) * 30) calc(var(--u) * 12) calc(var(--u) * 12);border-radius:calc(var(--u) * 26);background:var(--cream)}
.kf-ph::before{content:"";position:absolute;left:50%;top:calc(var(--u) * 11);width:calc(var(--u) * 44);height:calc(var(--u) * 9);translate:-50% 0;border-radius:var(--pill);background:color-mix(in srgb,var(--ink) 12%,transparent)}
.kf-ph>.kf-pill{flex:none;margin-top:auto;width:100%;padding:0 calc(var(--u) * 6);box-shadow:none}
.kf-ord{display:flex;flex-direction:column;gap:calc(var(--u) * 9);padding:calc(var(--u) * 12);border-radius:calc(var(--u) * 12);background:var(--white)}
.kf-ord>.kf-ln,.kf-scan>.kf-ln{flex:none}
.kf-lbl{border-radius:calc(var(--u) * 12);background:var(--white);box-shadow:var(--kf-sh-s)}
.kf-price{display:inline-flex;align-self:flex-start;align-items:center;gap:calc(var(--u) * 8);height:calc(var(--u) * 34);min-height:20px;padding:0 calc(var(--u) * 12) 0 calc(var(--u) * 10);border-radius:var(--pill) calc(var(--u) * 6) calc(var(--u) * 6) var(--pill);background:var(--tangerine-tint)}
.kf-price>i{flex:none;width:calc(var(--u) * 8);height:calc(var(--u) * 8);border-radius:50%;background:var(--white)}
.kf-sq{display:block;flex:none;width:calc(var(--u) * 14);height:calc(var(--u) * 14);border-radius:calc(var(--u) * 4);background:var(--cream)}
.kf-scan{position:relative;display:flex;flex:none;flex-direction:column;justify-content:center;gap:calc(var(--u) * 8);height:calc(var(--u) * 52);padding:0 calc(var(--u) * 18);border-radius:calc(var(--u) * 10);background:var(--white)}
.kf-scan svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--kf-soft);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kf-scan path{vector-effect:non-scaling-stroke}
.kf-scan .ln{stroke:var(--tangerine)}
.kf-chk{display:flex;flex-direction:column;gap:calc(var(--u) * 5)}
.kf-chk>span{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 6);height:calc(var(--u) * 28);padding:0 calc(var(--u) * 4) 0 calc(var(--u) * 8);border-radius:calc(var(--u) * 8);background:var(--white)}
.kf-chk .kf-ck{position:static;flex:none;width:calc(var(--u) * 20);height:calc(var(--u) * 20);background:var(--teal-tint);color:var(--teal-text);box-shadow:none}
/* 11: app icon tiles, real windows */
.kf-tile-app{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u) * 16);height:100%;padding:0 calc(var(--u) * 12);text-align:center}
.kf-app{display:block;width:calc(var(--u) * 92);height:calc(var(--u) * 92);border-radius:24%;overflow:hidden;box-shadow:var(--kf-sh-s)}
.kf-app-row{display:flex;align-items:center;gap:calc(var(--u) * 16);height:100%;padding:0 calc(var(--u) * 20)}
.kf-app-row .kf-app{flex:none;width:calc(var(--u) * 64);height:calc(var(--u) * 64)}
.kf-tabs{display:flex;gap:calc(var(--u) * 8)}
.kf-tabs .kf-pill{height:calc(var(--u) * 34)}
/* 13: shop card, flips vs stays (pilot 2), start / end */
.kf-shop{display:flex;flex-direction:column;gap:calc(var(--u) * 14);height:100%;padding:calc(var(--u) * 18)}
.kf-shop.flip{scale:-1 1}
.kf-shop .top{display:flex;align-items:center;justify-content:space-between}
.kf-shop .top svg{width:calc(var(--u) * 22);height:calc(var(--u) * 22);fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.kf-shop .logo{display:block;width:calc(var(--u) * 54);height:calc(var(--u) * 16);border-radius:var(--pill);background:var(--sun)}
.kf-shop .row{display:flex;align-items:center;gap:calc(var(--u) * 14)}
.kf-shop .row .kf-stack{flex:1}
.kf-shop .row .kf-ln{flex:none}
.kf-shop .lamp{display:grid;flex:none;place-items:center;width:calc(var(--u) * 80);height:calc(var(--u) * 80);border-radius:calc(var(--u) * 14);background:var(--tangerine-tint)}
.kf-shop .lamp svg{width:74%;height:74%}
.kf-shop .lamp .sh{fill:var(--tangerine)}.kf-shop .lamp .st{fill:var(--ink)}
.kf-shop .clk{align-self:flex-end;margin-top:auto;padding:calc(var(--u) * 8) calc(var(--u) * 14);border-radius:calc(var(--u) * 10);background:var(--cream);font-size:max(12px,calc(var(--u) * 24));font-weight:700;font-variant-numeric:tabular-nums}
.kf-col{display:flex;flex-direction:column;gap:calc(var(--u) * 10);padding:calc(var(--u) * 16)}
.kf-col>.kf-lab{padding:calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 4)}
.kf-tile{display:flex;align-items:center;justify-content:center;flex:1;border-radius:calc(var(--u) * 12);background:var(--cream);color:var(--ink)}
.kf-tile svg{height:calc(var(--u) * 30);width:auto}
.kf-tile .bar{position:relative;width:62%;height:calc(var(--u) * 10);border-radius:var(--pill);background:var(--kf-line);overflow:hidden}
.kf-tile .bar i{position:absolute;right:0;top:0;bottom:0;width:62%;border-radius:inherit;background:var(--tangerine)}
.kf-tile .clk{font-size:max(12px,calc(var(--u) * 26));font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kf-tile.flip{background:var(--tangerine-tint)}
.kf-tile .ar{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kf-tile .fl{fill:currentColor}
.kf-dir{display:flex;flex-direction:column;gap:calc(var(--u) * 18);padding:calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 18)}
.kf-dir.rtl{direction:rtl}   /* the same markup, laid out right to left: start and end swap sides on their own */
.kf-read{display:flex;align-items:center;gap:calc(var(--u) * 10)}
.kf-read .ar{display:flex;align-items:center;flex:1;color:color-mix(in srgb,var(--ink) 40%,transparent)}
.kf-read .ar b{flex:1;height:2px;margin-inline-end:calc(var(--u) * -11);border-radius:var(--pill);background:currentColor}
.kf-read .ar svg{flex:none;width:calc(var(--u) * 24);height:calc(var(--u) * 24)}
.kf-dir.rtl .kf-read .ar svg{scale:-1 1}
.kf-read>.kf-lab{color:var(--kf-soft)}
.kf-txt{display:flex;flex-direction:column;gap:calc(var(--u) * 12);padding-inline-start:calc(var(--u) * 14);border-inline-start:calc(var(--u) * 4) solid var(--sun)}
.kf-txt>.kf-ln{flex:none}
.kf-txt>.kf-ln.h{width:72%}
.kf-txt>.cta{display:block;width:calc(var(--u) * 90);height:calc(var(--u) * 28);border-radius:var(--pill);background:var(--ink)}
/* 14: one card, two gaps */
.kf-gapcard{display:flex;flex-direction:column;height:100%;padding:calc(var(--u) * 22)}
.kf-gapcard .blk{display:block;height:calc(var(--u) * 52);border-radius:calc(var(--u) * 10);background:color-mix(in srgb,var(--ink) 8%,var(--white))}
.kf-gapcard .blk.s{width:60%}
.kf-gapcard.g10 .blk{background:color-mix(in srgb,var(--ink) 20%,var(--white))}
.kf-gapcard .gp{display:flex;align-items:center;gap:calc(var(--u) * 10);height:calc(var(--u) * 26)}
.kf-gapcard.g10 .gp{height:calc(var(--u) * 34)}
.kf-gapcard .gp i{display:block;flex:1;height:100%;border-radius:calc(var(--u) * 4);background:color-mix(in srgb,var(--tangerine) 40%,var(--white))}
.kf-gapcard .gp .kf-lab{flex:none;color:var(--tangerine)}
.kf-crop{position:relative}
.kf-crop img{position:absolute;left:-151%;top:-27.7%;width:251%;max-width:none;height:auto}  /* the Colors card of the 1200 x 488 sheet (x 722, y 62, 478 x 224) */
/* Client case figures (tools/case_figures.py; owner picks 28 Oct 2026): image boards = crops of the
   real artifacts (--op = object-position), a bottom fade, a thin white phone frame. Big numbers 600 in Scale A */
.kf-imgb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,left top)}
.kf-fade-b img{-webkit-mask-image:linear-gradient(180deg,var(--ink) 70%,transparent 98%);mask-image:linear-gradient(180deg,var(--ink) 70%,transparent 98%)}
.kf-sa .kf-lab.big{font-weight:600}
.kf-phf{padding:calc(var(--u) * 6);border-radius:calc(var(--u) * 28)}
.kf-phf img{position:static;display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--u) * 22)}