/* Next Kopi · design tokens · rounds 1, 3–13 + round 14 · 2026-09-29
   Tokens only. Components reference these; never hard-code a colour. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
:root{
/* surfaces */
--paper:#F4EFE6;--paper-raised:#FBF8F2;--paper-sunk:#EAE3D6;--scrim:rgba(24,30,25,.38);--glass:rgba(251,248,242,.74);--glass-edge:rgba(44,58,46,.10);
/* ink */
--ink:#2C3A2E;--ink-2:#54605A;--ink-3:#8A918A;--on-ink:#F4EFE6;
/* lines */
--line:#DED6C7;--line-strong:#C8BDAA;
/* accent: kopi (new, carried by the mark's "next cup") */
--kopi:#8A4F2A;--kopi-soft:#F0E1D2;--on-kopi:#FFFFFF;--kopi-mark:#9C5A30;--mark-cup:#1C456E;--mark-coffee:#D9624A;
/* RSVP semantics */
--in:#3D6A46;--in-soft:#DCE7D9;--maybe:#86661C;--maybe-soft:#F2E7CA;--out:#6A625A;--out-soft:#E7E1D7;--danger:#A2392A;--danger-soft:#F4DDD6;
/* avatars (initials fallback) */
--av-1:#5E7461;--av-2:#8A5A3C;--av-3:#6B6A8E;--av-4:#9A7B3F;--av-5:#4F6F7A;--av-6:#8C5E6B;
/* type */
--font-display:"Fraunces",Georgia,"Times New Roman",serif;--font-body:"Source Sans 3",-apple-system,"Segoe UI",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--t-display:34px;--t-title:28px;--t-head:20px;--t-body:17px;--t-sub:15px;--t-cap:13px;--t-tab:11px;
/* space · radius · depth · motion */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;
--r-field:14px;--r-card:20px;--r-hero:24px;--r-sheet:28px;--r-pill:999px;
--tap:44px;--tabbar-h:64px;--tabbar-h-compact:52px;--col-desktop:640px;
--shadow-card:0 1px 2px rgba(44,58,46,.06);--shadow-float:0 10px 30px rgba(44,58,46,.16),0 1px 3px rgba(44,58,46,.10);--shadow-sheet:0 -8px 40px rgba(24,30,25,.18);
--ease-sheet:cubic-bezier(.32,.72,0,1); /* @kind other */
--dur-sheet:260ms; /* @kind other */
--dur-tap:120ms; /* @kind other */
}
[data-theme="dark"]{
--paper:#141A15;--paper-raised:#1D2520;--paper-sunk:#252E28;--scrim:rgba(0,0,0,.55);--glass:rgba(34,42,36,.72);--glass-edge:rgba(239,233,222,.10);
--ink:#EFE9DE;--ink-2:#B9B3A7;--ink-3:#858B84;--on-ink:#141A15;
--line:#2E3830;--line-strong:#3E4A41;
--kopi:#D39A6C;--kopi-soft:#3A2B20;--on-kopi:#1A120C;--kopi-mark:#D39A6C;--mark-cup:#8DB4DA;--mark-coffee:#F08A73;
--in:#8FC098;--in-soft:#23362A;--maybe:#D8B866;--maybe-soft:#3A3220;--out:#B0A89D;--out-soft:#2C2A26;--danger:#E58B79;--danger-soft:#3D231E;
--shadow-float:0 10px 30px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4);--shadow-sheet:0 -8px 40px rgba(0,0,0,.5);
}

/* ==== Round 3 · the helper (additions) ============================================
   Tokens first. Declared on :root and every [data-theme] so aliases re-resolve in dark. */
:root,[data-theme]{
--helper-spark:var(--kopi-mark);--helper-fill:var(--kopi-soft);--helper-fill-edge:var(--kopi);--helper-web:var(--maybe);
--toast-bg:var(--ink);--toast-ink:var(--on-ink);
--r-pop:18px;
}
:root{--toast-link:#F0C9A6}
[data-theme="dark"]{--toast-link:#8A4F2A}
:root{
--dur-fill:1000ms; /* @kind other */
--dur-helper:1800ms; /* @kind other */
--ease-helper:cubic-bezier(.45,0,.55,1); /* @kind other */
}
/* the mark as a control: header (44) and in-field (32, 44 hit area) */
.hb,.hin{transition:transform var(--dur-tap),background var(--dur-tap),border-color var(--dur-tap)}
.hb.pressed,.hb:active{background:var(--kopi-soft);border-color:var(--kopi);transform:scale(.94)}
.hb.off{background:transparent;border-style:dashed}
.hin{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;color:var(--ink);flex:none;position:relative;margin-right:-6px}
.hin:before{content:"";position:absolute;inset:-6px}
.hin.pressed,.hin:active{background:var(--kopi-soft)}
.inp.area .hin{align-self:flex-end;margin:0 -6px -6px 0}
.hm{display:block;flex:none;overflow:visible}
.hm.busy .sp{transform-box:fill-box;transform-origin:center;animation:hm-spark var(--dur-helper) var(--ease-helper) infinite}
.hm .tr{animation:hm-trace var(--dur-helper) linear infinite}
@keyframes hm-spark{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(45deg) scale(.7)}}
@keyframes hm-trace{to{stroke-dashoffset:-39.27}}
/* asking */
.hask{min-height:124px;position:relative;padding-right:52px}
.hask .hin{position:absolute;right:12px;bottom:8px;margin:0}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--kopi);vertical-align:-3px;margin-left:1px}
.modal .sh-h,.hpop .sh-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal .sh-h h3{font:500 24px/1.2 var(--font-display);flex:1;min-width:0}
.hpop .sh-h h3{font:600 16px/1.3 var(--font-body);flex:1}
/* drafting */
.sk.live{background-size:200% 100%;animation:sk-shim 1.6s linear infinite}
@keyframes sk-shim{from{background-position:100% 0}to{background-position:-100% 0}}
.hstat{display:flex;align-items:center;gap:8px;font-size:var(--t-sub);color:var(--ink-2);line-height:1.4}
/* the draft */
.hrows{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:baseline}
.hrow:first-child{border-top:0;padding-top:4px}
.hrow>dt{font:700 11px/1.6 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.hrow>dd{font-size:var(--t-body);line-height:1.4;color:var(--ink);display:flex;flex-direction:column;gap:4px;text-wrap:pretty}
.webv{text-decoration:underline dotted var(--helper-web);text-decoration-thickness:2px;text-underline-offset:4px}
.hsrc{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:var(--t-cap);color:var(--ink-2);line-height:1.35}
.hsrc .ic{width:14px;height:14px;color:var(--helper-web)}
.hsrc a{font-weight:600}
/* the fill: each changed field glows kopi, then settles */
.inp.filled{animation:hl-fill var(--dur-fill) ease-out 1}
.inp.filled.loop{animation:hl-loop 4s ease-out infinite}
.inp.filled.hold{background:var(--helper-fill);border-color:var(--helper-fill-edge);animation:none}
.inp.filled.mid{background:color-mix(in oklab,var(--helper-fill) 45%,var(--paper-sunk));border-color:color-mix(in oklab,var(--helper-fill-edge) 35%,transparent);animation:none}
.inp.filled.done{animation:none}
@keyframes hl-fill{0%{background:var(--helper-fill);border-color:var(--helper-fill-edge)}}
@keyframes hl-loop{0%,6%{background:var(--helper-fill);border-color:var(--helper-fill-edge)}30%,100%{background:var(--paper-sunk);border-color:transparent}}
/* single-field helper, attached under its field */
.hpop{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--r-pop);box-shadow:var(--shadow-float);padding:14px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:3}
.hpop:before{content:"";position:absolute;top:-7px;right:20px;width:12px;height:12px;background:var(--paper-raised);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
/* one-line confirmation */
.toast{position:absolute;left:16px;right:16px;bottom:36px;z-index:60;background:var(--toast-bg);color:var(--toast-ink);border-radius:16px;padding:4px 6px 4px 16px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow-float);font:500 15px/1.35 var(--font-body)}
.toast>button{height:44px;padding:0 12px;font-weight:700;color:var(--toast-link);flex:none}
@media (prefers-reduced-motion:reduce){.hm.busy .sp,.hm .tr,.sk.live,.inp.filled,.inp.filled.loop{animation:none}}

/* ==== Round 4 · the key wizard (additions) ========================================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark. */
:root,[data-theme]{
--wz-tile:var(--paper-sunk);--wz-tile-ink:var(--ink);--wz-tile-edge:var(--line);
--wz-best:var(--kopi);--wz-best-soft:var(--kopi-soft);--wz-ring:var(--kopi);
--wz-ok:var(--in);--wz-ok-soft:var(--in-soft);--wz-stop:var(--maybe);--wz-stop-soft:var(--maybe-soft);
--wz-schem:var(--paper);--wz-schem-bar:var(--line);--wz-schem-btn:var(--ink-2);
--r-tile:14px;--paste-h:76px;
}
:root{--os-callout:#1C1C1E;--os-callout-ink:#FFFFFF}
:root{
--dur-spin:900ms; /* @kind other */
}
/* service monogram: a neutral tile, never a borrowed logo */
.mono{width:48px;height:48px;border-radius:var(--r-tile);background:var(--wz-tile);color:var(--wz-tile-ink);border:1px solid var(--wz-tile-edge);display:grid;place-items:center;font:500 19px/1 var(--font-display);flex:none}
.mono.sm{width:36px;height:36px;border-radius:10px;font-size:15px}
.mono.lg{width:64px;height:64px;border-radius:18px;font-size:26px}
/* choose a service */
.svcs{display:flex;flex-direction:column;gap:8px}
.svc{display:grid;grid-template-columns:48px minmax(0,1fr) 20px;gap:12px;align-items:center;padding:12px;border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--paper-raised);text-align:left;width:100%;color:var(--ink)}
.svc .n{font:600 17px/1.3 var(--font-body);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.svc .n small{font:400 17px var(--font-body);color:var(--ink-2)}
.svc .d{font-size:var(--t-sub);line-height:1.4}
.svc .c{font-size:var(--t-cap);line-height:1.4;color:var(--ink-2)}
.svc>.ic{color:var(--ink-3)}
.svc.best{border-color:var(--wz-best);background:var(--wz-best-soft)}
.svc.best .mono{background:var(--paper-raised)}
.tag.best{background:var(--wz-best);color:var(--on-kopi)}
/* step cards: now (open), done (collapsed, ticked), next (dashed) */
.wz{display:flex;flex-direction:column;gap:10px}
.wzs{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-raised);padding:16px;display:flex;flex-direction:column;gap:14px}
.wzs>.h{display:flex;align-items:center;gap:12px}
.wzs .no{width:28px;height:28px;border-radius:14px;border:1.5px solid var(--line-strong);display:grid;place-items:center;font:600 14px var(--font-body);color:var(--ink-2);flex:none}
.wzs .no .ic{width:16px;height:16px}
.wzs .ttl{font:600 17px/1.3 var(--font-body);flex:1;min-width:0}
.wzs.now{border:1.5px solid var(--kopi)}
.wzs.now .no{background:var(--kopi);border-color:var(--kopi);color:var(--on-kopi)}
.wzs.done,.wzs.next{padding:10px 16px;background:transparent}
.wzs.done .no{background:var(--wz-ok-soft);border-color:transparent;color:var(--wz-ok)}
.wzs.done .ttl{font-weight:500;color:var(--ink-2)}
.wzs.done a{font-size:var(--t-sub);font-weight:600}
.wzs.next{border-style:dashed}
.wzs.next .ttl{font-weight:500;color:var(--ink-3)}
.wb{display:flex;align-items:center;gap:8px;font-size:var(--t-sub);line-height:1.4;color:var(--ink)}
.wb:before{content:"";width:8px;height:8px;border-radius:4px;background:var(--kopi);flex:none}
/* schematic of the service's own page: drawn, not a screenshot */
.schem{border:1px solid var(--line-strong);border-radius:12px;background:var(--wz-schem);overflow:hidden;position:relative}
.schem .u{height:24px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid var(--line);font:500 10px var(--font-mono);color:var(--ink-3);white-space:nowrap}
.schem .u i{width:6px;height:6px;border-radius:3px;background:var(--line-strong);flex:none}
.schem .u span{margin-left:6px;overflow:hidden;text-overflow:ellipsis}
.schem .bd{padding:14px 20px 18px;display:flex;flex-direction:column;gap:9px}
.schem .br{height:7px;border-radius:4px;background:var(--wz-schem-bar);display:block}
.schem .br.hd{height:10px;background:var(--line-strong)}
.schem .sbtn{height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--line-strong);font:600 11px var(--font-body);color:var(--ink);display:inline-flex;align-items:center;gap:4px;background:var(--paper-raised);white-space:nowrap;flex:none}
.schem .sbtn.solid{background:var(--wz-schem-btn);color:var(--paper-raised);border-color:transparent}
.schem .sfld{height:28px;border:1px solid var(--line-strong);border-radius:7px;background:var(--paper-raised);display:flex;align-items:center;padding:0 8px;font:500 12px var(--font-body);color:var(--ink);gap:6px}
.schem .sfld code{font:500 11px var(--font-mono);color:var(--ink-2);flex:1;min-width:0;overflow:hidden}
.schem .cap{position:absolute;right:10px;bottom:6px;font:500 9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ring{position:relative}
.ring:after{content:"";position:absolute;inset:-7px -9px;border:2.5px solid var(--wz-ring);border-radius:var(--r-pill);transform:rotate(-4deg);pointer-events:none}
/* paste */
.paste{height:var(--paste-h);border-radius:var(--r-card);background:var(--kopi);color:var(--on-kopi);font:600 20px var(--font-body);display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.paste .ic{width:26px;height:26px}
.paste.ready{box-shadow:0 0 0 5px var(--kopi-soft)}
.or{display:flex;align-items:center;gap:10px;font-size:var(--t-cap);color:var(--ink-2)}
.or:before,.or:after{content:"";height:1px;flex:1;background:var(--line)}
.osb{position:absolute;left:50%;top:-50px;transform:translateX(-50%);height:38px;padding:0 16px;border-radius:10px;background:var(--os-callout);color:var(--os-callout-ink);font:500 16px -apple-system,system-ui,sans-serif;display:flex;align-items:center;box-shadow:var(--shadow-float);z-index:5}
.osb:after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--os-callout);transform:translateX(-50%) rotate(45deg)}
/* the key, masked */
.keyv{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-field);background:var(--paper-sunk)}
.keyv code{font:500 16px var(--font-mono);color:var(--ink)}
/* checking */
.ckl{display:flex;flex-direction:column}
.ckl>div{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:var(--t-body);line-height:1.35;border-top:1px solid var(--line)}
.ckl>div:first-child{border-top:0}
.ckl .st{width:24px;height:24px;display:grid;place-items:center;flex:none;color:var(--wz-ok)}
.ckl .wait{color:var(--ink-3)}
.ckl .wait .st{color:var(--ink-3)}
.ckl .no{width:24px;height:24px;border-radius:12px;border:1.5px solid var(--line-strong);display:grid;place-items:center;font:600 13px var(--font-body);color:var(--ink-2)}
.spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--kopi);animation:wz-spin var(--dur-spin) linear infinite}
@keyframes wz-spin{to{transform:rotate(360deg)}}
/* results */
.res{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:8px 0 4px}
.res h4{font:500 28px/1.2 var(--font-display);text-wrap:balance}
.res p{text-wrap:pretty}
.flour{width:112px;height:112px;border-radius:56px;background:var(--kopi-soft);display:grid;place-items:center;position:relative}
.flour .sk2{position:absolute}
.stop{width:64px;height:64px;border-radius:32px;display:grid;place-items:center;background:var(--wz-stop-soft);color:var(--wz-stop)}
.stop .ic{width:28px;height:28px}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--line-strong)}}

/* ==== Round 5 · covers made with ✦ (additions) ====================================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark. */
:root,[data-theme]{
--cv-group:var(--paper-raised);--cv-group-head:var(--paper);--cv-group-edge:var(--line);
--cv-on:var(--kopi-soft);--cv-sel:var(--kopi);--cv-off:var(--ink-3);
--cv-chip:var(--glass);--cv-mark:var(--helper-spark);
--r-cover:16px;
}
:root{--on-cover:#FBF8F2;--cover-shade:rgba(20,24,20,.62);--cv-grid:rgba(251,248,242,.55)}
[data-theme="dark"]{--on-cover:#FBF8F2;--cover-shade:rgba(0,0,0,.66);--cv-grid:rgba(251,248,242,.4)}
/* the 3:2 frame: every cover, option, wait and crop uses it */
.frame32{aspect-ratio:3/2;width:100%;border-radius:var(--r-cover);overflow:hidden;position:relative;display:block;flex:none;padding:0;text-align:left}
.frame32>.img{position:absolute;inset:0;height:auto}
.frame32>.sk{position:absolute;inset:0;border-radius:0}
.frame32>.mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:600 17px var(--font-body);color:var(--ink-2)}
/* picker: two paths, reusing .svc; the "needs OpenRouter" path is dashed, not hidden */
.svc.need{background:transparent;border-style:dashed;cursor:default}
.svc.need .n{color:var(--ink-2)}
.svc.need .d{color:var(--ink)}
/* the list: one closed group, headed by our mark */
.picked{border:1px solid var(--cv-group-edge);border-radius:var(--r-card);background:var(--cv-group);overflow:hidden}
.picked-h{display:flex;align-items:center;gap:8px;padding:10px 14px;font:600 14px/1.2 var(--font-body);color:var(--ink);background:var(--cv-group-head);border-bottom:1px solid var(--cv-group-edge)}
.mdl{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;width:100%;min-height:var(--tap);text-align:left;color:var(--ink);border-top:1px solid var(--cv-group-edge)}
.picked-h+.mdl{border-top:0}
.mdl .n{font:600 16px/1.3 var(--font-body);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.mdl .d{font-size:var(--t-sub);color:var(--ink-2);line-height:1.4;display:flex;gap:6px;align-items:flex-start}
.mdl .d .ic{margin-top:1px}
.mdl.on{background:var(--cv-on)}
.mdl.off{color:var(--cv-off);cursor:default}
.mdl.off .n{color:var(--cv-off)}
.mdl.off .radio{border-style:dashed}
.mdl.off .tag{opacity:.55}
/* two options */
.opts{display:grid;gap:12px}
.opts.side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.opt{outline:3px solid transparent;outline-offset:3px;transition:outline-color var(--dur-tap)}
.opt.on{outline-color:var(--cv-sel)}
.opt .optn,.opt .ck{position:absolute;top:10px;z-index:2;height:28px;min-width:28px;border-radius:14px;display:grid;place-items:center}
.opt .optn{left:10px;padding:0 9px;background:var(--cv-chip);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-edge);font:700 13px var(--font-body);color:var(--ink)}
.opt .ck{right:10px;background:var(--cv-sel);color:var(--on-kopi)}
/* crop preview: thirds grid, the name as it will sit */
.crop:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent calc(33.33% - .5px),var(--cv-grid) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),var(--cv-grid) 0 calc(66.66% + .5px),transparent 0),linear-gradient(0deg,transparent calc(33.33% - .5px),var(--cv-grid) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),var(--cv-grid) 0 calc(66.66% + .5px),transparent 0)}
.crop:after{content:"";position:absolute;inset:38% 0 0;z-index:1;background:linear-gradient(transparent,var(--cover-shade));pointer-events:none}
.cvname{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:var(--on-cover);display:flex;flex-direction:column;gap:2px}
.cvname b{font:500 28px/1.1 var(--font-display);letter-spacing:-.01em}
.cvname span{font:500 14px/1.3 var(--font-body)}
/* the made-with-✦ corner mark (settings only, never the invite) */
.cvmark{position:absolute;right:10px;bottom:10px;z-index:2;width:30px;height:30px;border-radius:15px;background:var(--cv-chip);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-edge);display:grid;place-items:center;color:var(--cv-mark)}
.cvmark:before{content:"";position:absolute;inset:-7px}
.cvmark.pressed{background:var(--paper-raised)}
/* admin: order number beside each model */
.ordn{width:26px;height:26px;border-radius:13px;border:1.5px solid var(--line-strong);display:grid;place-items:center;font:600 13px var(--font-body);color:var(--ink-2);flex:none}
.li.dim .a,.li.dim .ordn{color:var(--ink-3)}

/* ==== Round 6 · paying, the bill, moments (additions) =============================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule: no dashboards. Nothing here draws a total, a meter, a chart or a number badge. */
:root,[data-theme]{
--qr-edge:var(--line);--pay-tag:var(--ink-2);--pay-tag-edge:var(--line-strong);
--st-paid:var(--in);--st-says:var(--maybe);--st-wait:var(--ink-2);--st-off:var(--ink-3);
--ln-flag:var(--danger);--ln-open:var(--maybe-soft);--ln-open-ink:var(--maybe);--ln-mine:var(--kopi-soft);--face-ring:var(--kopi);
--mo-part:var(--ink-2);--mo-wait:var(--paper-sunk);
--r-qr:16px;--qr-quiet:28px;--r-moment:14px;--modal-wide:760px;
}
/* the QR tile stays light in both themes: dark modules on a light ground, with a quiet zone, is what scans */
:root{--qr-tile:#FFFFFF;--qr-ink:#141A15}
[data-theme="dark"]{--qr-tile:#F4EFE6;--qr-ink:#141A15}
/* camera, viewer and receipt paper are photos or OS surfaces: the same in both themes */
:root,[data-theme]{--cam-bg:#0C0E0D;--cam-ink:#F4EFE6;--cam-ink-2:#B9B3A7;--cam-soft:rgba(244,239,230,.14);--rcpt-paper:#F7F3EA;--rcpt-rule:#E2DACB;--rcpt-ink:#54605A;--os-lock:#1B211C;--os-note:rgba(244,239,230,.88);--os-note-ink:#1B211C;--os-note-2:#5E655F}
/* the QR card: whose, for what, how much, then the code */
.qrc{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;width:100%}
.qrc-h{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.qrc-to{font:600 17px/1.25 var(--font-body);color:var(--ink)}
.pn{height:22px;padding:0 8px;border:1px solid var(--pay-tag-edge);border-radius:6px;font:700 11px var(--font-body);letter-spacing:.05em;color:var(--pay-tag);display:inline-flex;align-items:center;margin-left:auto;flex:none}
.qrc-for{font-size:var(--t-sub);color:var(--ink-2);line-height:1.35;margin-bottom:-6px}
.qrc-amt{font:500 48px/1 var(--font-display);letter-spacing:-.02em;color:var(--ink);display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.qrc-amt small{font:600 20px var(--font-body);color:var(--ink-2);letter-spacing:0}
.qrc-tile{background:var(--qr-tile);border-radius:var(--r-qr);padding:var(--qr-quiet);box-shadow:0 0 0 1px var(--qr-edge);display:flex;flex-direction:column;align-items:center;gap:8px}
.qrc-tile svg{display:block}
.qrc-tile .nm{font:600 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--qr-ink);white-space:nowrap}
.qrc-ref{font-size:var(--t-cap);color:var(--ink-2);line-height:1.45;text-wrap:pretty}
.qrc-ref b{font:500 13px var(--font-mono);color:var(--ink)}
.qrc-act{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.qrc-act .btn{height:44px;padding:0 6px;font-size:14px;white-space:normal;line-height:1.15;border-radius:12px;gap:5px}
.qrc-act .btn .ic{width:16px;height:16px}
.qrc.sm{padding:14px;gap:10px}.qrc.sm .qrc-amt{font-size:34px}
/* the bill: four choices as sentences, and the sentence the host reads after */
.choice{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:14px 16px;border-top:1px solid var(--line);width:100%;text-align:left;align-items:start;color:var(--ink)}
.choice .n{font:600 17px/1.3 var(--font-body)}.choice .d{font-size:var(--t-sub);color:var(--ink-2);line-height:1.4}
.choice.on{background:var(--cv-on)}
.bsent{font:500 21px/1.35 var(--font-display);color:var(--ink);text-wrap:pretty}
.result{font:600 19px/1.3 var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
/* faces: who pays, who had what */
.faces{display:flex;flex-wrap:wrap;gap:14px 8px}
.face{display:flex;flex-direction:column;align-items:center;gap:5px;width:50px;font:600 12px/1.1 var(--font-body);color:var(--ink);position:relative;flex:none}
.face .av{box-shadow:0 0 0 2px var(--paper-raised),0 0 0 4px transparent;transition:box-shadow var(--dur-tap)}
.face.on .av{box-shadow:0 0 0 2px var(--paper-raised),0 0 0 4.5px var(--face-ring)}
.face.off{color:var(--ink-3)}.face.off .av{opacity:.35;filter:grayscale(1)}
.face .x{position:absolute;right:0;top:-4px;width:20px;height:20px;border-radius:10px;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;box-shadow:0 0 0 2px var(--paper-raised)}
.face .x .ic{width:12px;height:12px}
.face.all .av{background:var(--paper-sunk)!important;color:var(--ink);border:1.5px solid var(--line-strong);font-size:11px}
/* the receipt: a locked photo, drawn on paper that stays light */
.rcpt{background:repeating-linear-gradient(0deg,var(--rcpt-paper) 0 13px,var(--rcpt-rule) 13px 14px);color:var(--rcpt-ink);border-radius:4px;display:flex;align-items:flex-end;padding:10px;font:500 10px/1.4 var(--font-mono);flex:none;position:relative}
.cam{position:absolute;inset:0;background:var(--cam-bg);color:var(--cam-ink);z-index:4;display:flex;flex-direction:column}
.cn{position:absolute;width:26px;height:26px;border:3px solid var(--kopi-mark)}
.cn.a{left:-6px;top:-6px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}.cn.b{right:-6px;top:-6px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}.cn.c{left:-6px;bottom:-6px;border-right:0;border-top:0;border-radius:0 0 0 8px}.cn.d{right:-6px;bottom:-6px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.shutter{width:74px;height:74px;border-radius:37px;border:4px solid var(--cam-ink);display:grid;place-items:center}
.shutter:after{content:"";width:58px;height:58px;border-radius:29px;background:var(--cam-ink)}
.campill{height:34px;padding:0 14px;border-radius:17px;background:var(--cam-soft);font:600 14px var(--font-body);display:inline-flex;align-items:center;gap:6px;color:var(--cam-ink)}
/* the draft lines */
.rl{display:grid;grid-template-columns:44px minmax(0,1fr) 76px;gap:8px;align-items:center;padding:6px 0}
.mi{height:40px;border-radius:10px;background:var(--paper-sunk);border:1.5px solid transparent;padding:0 10px;display:flex;align-items:center;font:500 16px var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums;min-width:0;white-space:nowrap;overflow:hidden}
.rl .mi.q{justify-content:center;padding:0}.rl .mi.p{justify-content:flex-end}
.mi.bad{border-color:var(--ln-flag);background:var(--paper-raised)}
.dot6{color:var(--ln-flag);font-size:12px;margin-right:4px}
.rl.x .mi{background:transparent;color:var(--ink-2)}
.rl.tot .mi{background:transparent;font-weight:700;color:var(--ink)}
.rlh{display:grid;grid-template-columns:44px minmax(0,1fr) 76px;gap:8px;font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.rlh span:last-child{text-align:right}
/* assigning: pick a face, then tap the lines */
.al{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:9px 16px;border-top:1px solid var(--line);align-items:center;width:100%;text-align:left;color:var(--ink)}
.al .n{font:600 16px/1.3 var(--font-body)}.al .p{font:500 15px var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.al .who{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);min-height:24px}
.al .who .stk .av{box-shadow:0 0 0 2px var(--paper-raised)}
.al.mine{background:var(--ln-mine)}.al.mine .stk .av{box-shadow:0 0 0 2px var(--ln-mine)}
.al.open{background:var(--ln-open)}.al.open .who{color:var(--ln-open-ink);font-weight:600}
.al.exp{background:var(--paper-raised);box-shadow:inset 0 0 0 1.5px var(--kopi);border-radius:14px;margin:4px 0}
.al.exp .faces{grid-column:1/-1;padding:8px 0 4px;gap:10px 4px}
.tray{position:absolute;left:0;right:0;bottom:0;background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-top:1px solid var(--glass-edge);padding:12px 10px 34px;display:flex;flex-direction:column;gap:10px;z-index:20}
.tray .faces{flex-wrap:nowrap;justify-content:space-between;gap:0}
.tray .face .av{box-shadow:0 0 0 2px var(--paper),0 0 0 4px transparent}.tray .face.on .av{box-shadow:0 0 0 2px var(--paper),0 0 0 4.5px var(--face-ring)}
.tray .say{font-size:var(--t-sub);line-height:1.35;color:var(--ink);padding:0 6px;text-wrap:pretty}
/* check: one sentence per person */
.pr{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.pr:first-child{border-top:0}
.pr .s{font:600 17px/1.3 var(--font-body);font-variant-numeric:tabular-nums}.pr .l{font-size:var(--t-sub);color:var(--ink-2);line-height:1.4}
.match{display:flex;gap:8px;align-items:center;font:600 15px/1.35 var(--font-body);color:var(--st-paid)}
/* the host's people: a word for each state, never a number badge */
.who6{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.who6 .a{font:600 17px/1.3 var(--font-body)}.who6 .b{font-size:var(--t-sub);color:var(--ink-2);line-height:1.35}
.who6 .acts{grid-column:2/-1;display:flex;gap:8px;flex-wrap:wrap}
.stw{font:600 14px var(--font-body);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.stw:before{content:"";width:8px;height:8px;border-radius:4px;background:currentColor}
.stw.paid{color:var(--st-paid)}.stw.says{color:var(--st-says)}.stw.wait{color:var(--st-wait)}.stw.wait:before{background:transparent;border:1.5px solid currentColor;width:6px;height:6px}.stw.off{color:var(--st-off)}.stw.off:before{display:none}
.cant{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-cap);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.cant .ic{width:16px;height:16px;margin-top:1px;color:var(--ink-3)}
/* lock screen and notifications (OS surfaces, drawn as schematics) */
.lk{position:absolute;inset:0;background:var(--os-lock);color:var(--cam-ink);display:flex;flex-direction:column;gap:8px;padding-top:54px}
.lk .dte{text-align:center;font:500 18px -apple-system,system-ui,sans-serif;margin-top:18px;opacity:.85}
.lk .tme{text-align:center;font:200 88px/1 -apple-system,system-ui,sans-serif;margin-bottom:28px}
.push{margin:0 10px;background:var(--os-note);color:var(--os-note-ink);border-radius:22px;padding:12px 14px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);text-align:left}
.push .app{width:38px;height:38px;border-radius:9px;background:var(--rcpt-paper);display:grid;place-items:center}
.push .t{font:600 15px/1.25 -apple-system,system-ui,sans-serif;display:flex;justify-content:space-between;gap:8px}
.push .t small{font-weight:400;font-size:13px;color:var(--os-note-2)}
.push .b{font:400 15px/1.3 -apple-system,system-ui,sans-serif}
.push-acts{margin:0 10px;display:flex;flex-direction:column;gap:1px;border-radius:16px;overflow:hidden}
.push-acts button{height:50px;background:var(--os-note);color:var(--os-note-ink);font:500 16px -apple-system,system-ui,sans-serif;text-align:left;padding:0 16px}
/* email (drawn plainly, as a mail app would show it) */
.mail6{max-width:600px;margin:0 auto;padding:32px 0;display:flex;flex-direction:column;gap:16px;font-size:17px;line-height:1.5;color:var(--ink)}
.mail6 .hdr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:15px;color:var(--ink-2);padding-bottom:16px;border-bottom:1px solid var(--line)}
.mail6 .hdr b{color:var(--ink);font-weight:600}
/* moments: a few keepsakes, in time order */
.mstrip{display:flex;gap:10px;padding:0 20px;overflow:hidden}
.mgrp{display:flex;flex-direction:column;gap:6px;flex:none}
.mpart{font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--mo-part);white-space:nowrap}
.mrow{display:flex;gap:6px}
.mth{width:84px;height:112px;border-radius:var(--r-moment);overflow:hidden;position:relative;flex:none;padding:0;display:block}
.mth>.img{position:absolute;inset:0;height:auto;font-size:9px;padding:6px;line-height:1.3;align-items:flex-start}
.mth .tm{position:absolute;left:6px;bottom:6px;height:22px;padding:0 7px;border-radius:11px;background:var(--cv-chip);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-edge);font:600 11px var(--font-body);color:var(--ink);display:flex;align-items:center}
.mth.wait{background:var(--mo-wait);border:1.5px dashed var(--line-strong);display:grid;place-items:center;color:var(--ink-3)}
.mth.add{background:transparent;border:1.5px dashed var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--kopi);font:600 13px/1.2 var(--font-body);text-align:center;padding:0 8px}
.mth.sm{width:56px;height:56px;border-radius:12px}
.frame34{aspect-ratio:3/4;width:100%;border-radius:var(--r-cover);overflow:hidden;position:relative;flex:none}
.frame34>.img{position:absolute;inset:0;height:auto;align-items:flex-start}
.lockw{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:var(--mo-wait);color:var(--ink-2);font-size:var(--t-sub);line-height:1.4;text-wrap:balance}
.lockw .ic{color:var(--ink-3)}
.mv{position:absolute;inset:0;background:var(--cam-bg);color:var(--cam-ink);display:flex;flex-direction:column;z-index:4}
.mv .t-sub,.mv .t-cap{color:var(--cam-ink-2)}
.mv .iconbtn{color:var(--cam-ink);background:var(--cam-soft)}
.mv .btn.sec{background:var(--cam-soft);color:var(--cam-ink)}
.mv .btn.ghost{color:var(--cam-ink)}
.ticks{display:flex;gap:5px;justify-content:center}.ticks i{width:6px;height:6px;border-radius:3px;background:var(--cam-soft)}.ticks i.on{background:var(--cam-ink)}
.modal.wide{width:var(--modal-wide)}
.camph .sb{color:var(--cam-ink)}.camph .hi{background:var(--cam-ink)}
.fr6{width:390px;background:var(--paper);color:var(--ink);font-family:var(--font-body);padding:20px;border-radius:28px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ts{display:inline-flex;align-items:center;gap:6px;font:600 15px var(--font-body);color:var(--ink);font-variant-numeric:tabular-nums}
.eyebrow6{font:600 13px var(--font-body);color:var(--kopi);text-transform:uppercase;letter-spacing:.07em}
/* board chrome: the theme switch for every frame */
.thm{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:12px;padding:10px 48px;background:rgba(230,226,218,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #D2CABB;font:600 14px var(--font-body);color:#54605A}
.thm .seg{width:300px;background:#DCD6CB}.thm .seg button{height:34px;font-size:14px}.thm .seg button.on{background:#2C3A2E;color:#F4EFE6}
@media (prefers-reduced-motion:reduce){.face .av{transition:none}}

/* ==== Round 7 · the S$1 by PayNow, how we'll pay, order photos, ✦ matching (additions) ====
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule: no dashboards. Badges are words. Nothing here draws a total, a meter, a counter or a number badge. */
:root,[data-theme]{
--hp-own-edge:var(--line-strong);--hp-own-ink:var(--ink-2);
--hp-treat:var(--kopi-soft);--hp-treat-ink:var(--kopi);
--hp-even:var(--paper-sunk);--hp-even-ink:var(--ink);--hp-even-edge:var(--line-strong);
--hp-items-edge:var(--kopi);--hp-items-ink:var(--ink);
--sug:var(--helper-spark);--sug-soft:var(--helper-fill);
--ord-edge:var(--line-strong);--ord-wait:var(--paper-sunk);
--fee-flag:var(--maybe-soft);--fee-flag-ink:var(--maybe);
--r-hp:8px;--r-order:10px;--ord-th:72px;
}
/* how we'll pay: four word badges. Shape carries the difference (outline · filled warm · filled plain · dashed); colour only helps */
.hp{height:26px;padding:0 10px 0 8px;border-radius:var(--r-hp);display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--font-body);white-space:nowrap;flex:none;border:1.5px solid transparent;letter-spacing:0}
.hp .ic{width:15px;height:15px;flex:none}
.hp.own{border-color:var(--hp-own-edge);color:var(--hp-own-ink)}
.hp.treat{background:var(--hp-treat);color:var(--hp-treat-ink)}
.hp.even{background:var(--hp-even);color:var(--hp-even-ink);border-color:var(--hp-even-edge)}
.hp.items{border-style:dashed;border-color:var(--hp-items-edge);color:var(--hp-items-ink)}
.hp.lg{height:32px;font-size:15px;padding:0 12px 0 10px;border-radius:10px}.hp.lg .ic{width:17px;height:17px}
.hpx{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.hpx .t-sub{text-wrap:pretty}
.snap7{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1.5px dashed var(--hp-items-edge);font-size:15px;line-height:1.4;color:var(--ink)}
.snap7 .ic{flex:none;margin-top:1px;color:var(--kopi)}
/* the S$1 sheet: the owner's QR card, three steps, one honest button */
.nkav{width:40px;height:40px;border-radius:20px;background:var(--paper-sunk);display:grid;place-items:center;flex:none}
.st7{display:flex;flex-direction:column;gap:6px;counter-reset:s;padding:0;margin:0;list-style:none}
.st7 li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center;font-size:var(--t-sub);color:var(--ink);line-height:1.35}
.st7 li:before{counter-increment:s;content:counter(s);width:24px;height:24px;border-radius:12px;background:var(--paper-sunk);display:grid;place-items:center;font:700 12px var(--font-body);color:var(--ink)}
.alt7{align-self:center;height:44px;padding:0 8px;font:600 15px var(--font-body);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.flag7{background:var(--fee-flag);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.flag7 b{font-weight:600}
/* /admin → Fees: a list to tick off, not a ledger */
.fee{display:grid;grid-template-columns:40px minmax(0,1.5fr) 72px 104px minmax(0,1fr) 220px;gap:14px;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
.fee .n{font:600 16px/1.3 var(--font-body);color:var(--ink)}.fee .s{font-size:var(--t-cap);color:var(--ink-2);line-height:1.35}
.fee .amt{font:600 16px var(--font-body);font-variant-numeric:tabular-nums}.fee .ref{font:500 14px var(--font-mono);color:var(--ink)}.fee .w{font-size:14px;color:var(--ink-2)}
.fee .acts{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.fee .note7{grid-column:2/-1;font-size:14px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.fee.flag{background:var(--fee-flag)}
/* order photos: square, edged, in their own card. Moments are 3:4 and live in the strip */
.ord .orow{display:flex;gap:8px;flex-wrap:wrap}
.oth{width:var(--ord-th);height:var(--ord-th);border-radius:var(--r-order);overflow:hidden;position:relative;flex:none;padding:0;display:block;box-shadow:0 0 0 1px var(--ord-edge)}
.oth>.img{position:absolute;inset:0;height:auto;font-size:8.5px;padding:5px;line-height:1.25;align-items:flex-start}
.oth.add{box-shadow:none;border:1.5px dashed var(--line-strong);display:grid;place-items:center;color:var(--kopi)}
.oth.wait{box-shadow:none;background:var(--ord-wait);border:1.5px dashed var(--line-strong);display:grid;place-items:center;color:var(--ink-3)}
.oth.sm{--ord-th:40px;border-radius:8px}.oth.sm>.img{font-size:0;padding:0}
.plab{height:20px;padding:0 7px;border-radius:6px;background:var(--paper-sunk);font:500 11px/20px var(--font-mono);color:var(--ink);white-space:nowrap}
.mgrid{display:flex;gap:8px;flex-wrap:wrap}
/* ✦ matching: a guess is marked, a decision isn't */
.sg{color:var(--sug);font-size:14px;line-height:1;flex:none}
.al .who.sug .stk .av{outline:1.5px dashed var(--sug);outline-offset:1px}
.al .why{grid-column:1/-1;display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--ink);text-wrap:pretty}
.pick2{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;padding:2px 0 4px}
.pick2 button{height:40px;padding:0 12px 0 5px;border-radius:20px;background:var(--paper-raised);border:1px solid var(--line-strong);display:inline-flex;align-items:center;gap:7px;font:600 14px var(--font-body);color:var(--ink)}
.pick2 button.else{padding-left:12px}
.tray .ostrip{display:flex;align-items:center;gap:6px;padding:0 6px}
.tray .ostrip .l{font:600 13px var(--font-body);color:var(--ink-2);margin-right:auto}
.tray .ostrip a{font:600 13px var(--font-body);padding:0 4px}
.btn.q7{background:transparent;border:1.5px solid var(--line);color:var(--ink-3)}
.pr .sg{font-size:12px;margin-left:2px}
/* share preview and the chat line (drawn plainly) */
.share7{background:var(--paper-sunk);border-radius:18px 18px 18px 6px;padding:12px 14px;font-size:16px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.share7 a{font-weight:600}
@media (prefers-reduced-motion:reduce){.hp{transition:none}}

/* ==== Round 8 · treating some of it, here now, near me (additions) ====================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule: no dashboards. The treat badge is words with a leaf or cup cue. Money is said in sentences. */
:root,[data-theme]{
--ts-fill:var(--hp-treat);--ts-ink:var(--hp-treat-ink);--r-ts:var(--r-pill);
--cov-mark:var(--in);--unc-mark:var(--ink-2);--unsure:var(--ln-open);--unsure-ink:var(--ln-open-ink);
--knows:var(--in);
--near-edge:var(--line);--dist:var(--ink-2);--osm:var(--ink-2);--join-edge:var(--kopi);
--r-code:12px;
}
/* the treat badge: round 7's warm "treats" fill, but a full pill, and it always names what. It may wrap; it never shortens */
.hp.some{background:var(--ts-fill);color:var(--ts-ink);border-radius:var(--r-ts);height:auto;min-height:26px;padding:4px 12px 4px 8px;white-space:normal;line-height:1.25;text-align:left;flex:0 1 auto}
.hp.some.lg{min-height:34px;padding:6px 14px 6px 10px}
/* the composer: what are you treating */
.tsbox8{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;margin:0 12px 12px}
.tsbox8 .chip{height:44px;border-radius:22px}
.cap8{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-body);color:var(--ink)}
.cap8>span{white-space:nowrap}.cap8 .inp{min-height:44px;width:86px;padding:0 12px;font-weight:600;font-variant-numeric:tabular-nums}
.sees8{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.sees8 q{font-size:var(--t-sub);line-height:1.4;color:var(--ink);text-wrap:pretty}
/* the one-time acknowledgement: one sentence, large, then one line */
.ack8{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start}
.ack8 .g{width:48px;height:48px;border-radius:24px;background:var(--ts-fill);color:var(--ts-ink);display:grid;place-items:center}
.ack8 .s{font:500 23px/1.3 var(--font-display);color:var(--ink);text-wrap:pretty}
.knows8{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--font-body);color:var(--knows);white-space:nowrap}
.knows8 .ic{width:14px;height:14px}
/* at the table: Ordering? */
.ord8{margin:0 16px;background:var(--ts-fill);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:12px}
.ord8 p{font:500 20px/1.35 var(--font-display);color:var(--ink);text-wrap:pretty}
.ord8 .btn{background:var(--paper-raised);color:var(--ink)}
/* the bill: lines on the host, and lines on whoever had them. Mark shape, not colour: filled tick · open ring · dashed ring */
.tlh8{display:block;padding:14px 16px 6px;font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.tls8{padding:0 16px 12px;font-size:var(--t-sub);line-height:1.4;color:var(--ink);text-wrap:pretty}
.tl8{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 16px;border-top:1px solid var(--line);width:100%;text-align:left;color:var(--ink);min-height:48px}
.tl8 .n{font:600 16px/1.3 var(--font-body);display:flex;gap:6px;align-items:center;min-width:0}
.tl8 .p{font:500 15px var(--font-body);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.mk8{width:22px;height:22px;border-radius:11px;display:grid;place-items:center;border:1.5px solid var(--unc-mark);color:transparent;flex:none}
.mk8 .ic{width:14px;height:14px}
.tl8.on .mk8{background:var(--cov-mark);border-color:var(--cov-mark);color:var(--paper-raised)}
.tl8.q{background:var(--unsure)}
.tl8.q .mk8{border-style:dashed;border-color:var(--unsure-ink);color:var(--unsure-ink);font:700 12px/1 var(--font-body)}
.tl8 .why{grid-column:2/-1;display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--ink);text-wrap:pretty}
.tl8 .pick2{grid-column:2/-1}
.tl8 .who{grid-column:2/-1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);min-height:24px}
.tl8 .who.sug .stk .av{outline:1.5px dashed var(--sug);outline-offset:1px}
/* near me: a card that says only enough to recognise the table */
.near8{margin:0;background:var(--paper-raised);border:1px solid var(--near-edge);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.near8 .h{font:600 18px/1.25 var(--font-body);color:var(--ink)}
.near8 .m{font-size:var(--t-sub);line-height:1.35;color:var(--ink-2)}
.near8 .btn{margin-top:6px}
.dist8{font:600 14px var(--font-body);color:var(--dist);white-space:nowrap;font-variant-numeric:tabular-nums}
.nearb8{height:44px;padding:0 16px 0 12px;border-radius:22px;border:1px solid var(--line-strong);display:inline-flex;align-items:center;gap:6px;font:600 15px var(--font-body);color:var(--ink);background:var(--paper-raised)}
.nearb8 .ic{color:var(--kopi)}
.osm8{font-size:12px;line-height:1.4;color:var(--osm);text-align:center}
.grp8{font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:4px}
/* the host's join request */
.join8{margin:0 16px;background:var(--paper-raised);border:1.5px solid var(--join-edge);border-radius:var(--r-card);padding:14px 16px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:start}
.join8 .a{font:600 16px/1.35 var(--font-body);color:var(--ink);text-wrap:pretty}.join8 .b{font-size:13px;line-height:1.4;color:var(--ink-2)}
.join8 .acts{grid-column:2/-1;display:flex;gap:8px;padding-top:8px}
/* sign in: the line, the code */
.hello8{font:500 34px/1.15 var(--font-display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.or8{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
.or8:before,.or8:after{content:"";flex:1;height:1px;background:var(--line)}
.code8{display:flex;gap:8px;justify-content:center}
.code8 span{width:44px;height:56px;border-radius:var(--r-code);background:var(--paper-sunk);border:1.5px solid transparent;display:grid;place-items:center;font:500 24px var(--font-mono);color:var(--ink)}
.code8 span.cur{border-color:var(--kopi);background:var(--paper-raised)}
/* the phone's own location prompt, drawn as a schematic (an OS surface: same in both themes) */
.perm8{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:280px;background:var(--os-note);color:var(--os-note-ink);border-radius:16px;z-index:60;text-align:center;overflow:hidden;font-family:-apple-system,system-ui,sans-serif;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.perm8 .t{padding:18px 16px 14px;font:600 16px/1.3 -apple-system,system-ui,sans-serif}
.perm8 .t small{display:block;font:400 13px/1.35 -apple-system,system-ui,sans-serif;color:var(--os-note-2);margin-top:6px}
.perm8 button{display:block;width:100%;height:46px;border-top:1px solid rgba(27,33,28,.14);font:500 16px -apple-system,system-ui,sans-serif;color:#2A5DB0}
.perm8 .cp{display:block;padding:6px;font:500 9px var(--font-mono);color:var(--os-note-2);border-top:1px solid rgba(27,33,28,.14)}

/* ==== Round 9 · start and end a sitting, and the group chat (additions) =================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule: no dashboards. "here" is a word by a name; "3 new" is words by a heading. No counters, no red dots. */
:root,[data-theme]{
--live:var(--in);--start-fill:var(--paper-raised);--start-edge:var(--in);
--here:var(--in);--notyet:var(--ink-2);
--wa-dot:var(--in);--wa-edge:var(--line-strong);
--talk-fill:var(--paper-raised);--talk-them:var(--paper-sunk);--talk-me:var(--kopi-soft);--talk-sys:var(--ink-2);--talk-new:var(--kopi);--r-bub:18px;
--gone-fill:var(--paper-sunk);--d3-flag:var(--maybe-soft);--d3-flag-ink:var(--maybe);
--wa-schem:var(--paper-sunk);--wa-schem-in:var(--paper-raised);--wa-schem-out:var(--in-soft);
}
/* Start: one big card in the page, only from an hour before, only for hosts */
.start9{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;width:100%;min-height:84px;padding:16px;border-radius:var(--r-card);border:1.5px solid var(--start-edge);background:var(--start-fill);color:var(--ink);text-align:left}
.start9 .g{width:48px;height:48px;border-radius:24px;background:var(--live);color:var(--paper-raised);display:grid;place-items:center}
.start9 .n{font:600 19px/1.25 var(--font-body)}.start9 .d{font-size:var(--t-sub);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.soon9{display:flex;gap:8px;align-items:center;min-height:44px;font-size:var(--t-sub);line-height:1.4;color:var(--ink-2)}
/* here: the person's own word, by their name */
.hw9{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--here)}
.hw9:before{content:"";width:8px;height:8px;border-radius:4px;background:currentColor;flex:none}
.hw9.not{font-weight:400;color:var(--notyet)}
.hw9.not:before{background:transparent;border:1.5px solid currentColor;width:5px;height:5px}
.here9{display:flex;gap:8px;align-items:center;min-height:50px;font:600 16px var(--font-body);color:var(--here)}
/* End: at the foot of the page, quiet, and it always asks */
.end9{margin:8px 16px 0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.end9 .t-cap{text-align:center;text-wrap:pretty}
/* Table talk */
.tkh9{display:flex;align-items:baseline;gap:10px;padding:8px 20px 0}
.tkh9 h3{font:500 var(--t-head)/1.2 var(--font-display)}
.tkh9 a{margin-left:auto;font:600 15px var(--font-body);color:var(--kopi)}
.new9{font:600 14px var(--font-body);color:var(--talk-new);white-space:nowrap}
.tks9{padding:2px 20px 0;font-size:13px;line-height:1.4;color:var(--ink-2)}
.talk9{margin:0 16px;background:var(--talk-fill);border:1px solid var(--line);border-radius:var(--r-card);padding:12px;display:flex;flex-direction:column;gap:8px}
.talk9.empty{align-items:flex-start;gap:12px;padding:16px}
.talk9.empty p{font:500 18px/1.35 var(--font-display);color:var(--ink)}
.bub9{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:end;max-width:88%}
.bub9 .av{width:28px;height:28px;font-size:11px}
.bub9 .b{background:var(--talk-them);border-radius:var(--r-bub) var(--r-bub) var(--r-bub) 6px;padding:8px 12px;font-size:15px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.bub9 .w{display:block;font:600 12px var(--font-body);color:var(--ink-2);margin-bottom:1px}
.bub9 small{display:block;font-size:11px;color:var(--ink-2);margin-top:2px;text-align:right}
.bub9.me{align-self:flex-end;grid-template-columns:minmax(0,1fr)}
.bub9.me .b{background:var(--talk-me);border-radius:var(--r-bub) var(--r-bub) 6px var(--r-bub)}
.g9{font-weight:400;color:var(--ink-2)}
.sys9{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.3;color:var(--talk-sys);white-space:nowrap;padding:2px 0}
.sys9:before,.sys9:after{content:"";flex:1;height:1px;background:var(--line)}
.say9{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center}
.say9 .inp{min-height:44px}
.say9 .go,.was9 .go{width:44px;height:44px;border-radius:22px;background:var(--kopi);color:var(--on-kopi);display:grid;place-items:center;flex:none}
.quick9{display:flex;gap:6px;flex-wrap:wrap}.quick9 .chip{height:40px;border-radius:20px}
.mute9{font-size:var(--t-sub);line-height:1.4;color:var(--ink-2);text-align:center;padding:4px 0 8px}
.gone9{margin:0 16px;display:flex;gap:10px;align-items:center;padding:16px;border-radius:var(--r-card);background:var(--gone-fill);font-size:var(--t-sub);line-height:1.4;color:var(--ink)}
.gone9 .ic{color:var(--ink-3);flex:none}
/* the circle's WhatsApp group: one outlined row, said by what it's for. A green dot, never WhatsApp's logo */
.wadot9{width:10px;height:10px;border-radius:5px;background:var(--wa-dot);flex:none;display:inline-block}
.wa9{margin:0 16px;display:grid;grid-template-columns:10px minmax(0,1fr) 20px;gap:12px;align-items:center;min-height:64px;padding:10px 16px;border:1px solid var(--wa-edge);border-radius:var(--r-card);background:transparent;text-align:left;color:var(--ink)}
.wa9 b{display:block;font:600 16px/1.3 var(--font-body)}.wa9 .d{display:block;font-size:13px;line-height:1.35;color:var(--ink-2)}
.wa9>.ic{color:var(--ink-3)}
.wab9{height:44px;padding:0 16px 0 14px;border-radius:22px;border:1px solid var(--wa-edge);display:inline-flex;align-items:center;gap:8px;font:600 15px var(--font-body);color:var(--ink);background:var(--paper-raised)}
/* WhatsApp's own screens, drawn as schematics (never its logo or colours) */
.was9{position:absolute;inset:54px 0 0;display:flex;flex-direction:column;background:var(--wa-schem)}
.was9 .top{height:56px;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--paper-raised);border-bottom:1px solid var(--line);font:600 17px var(--font-body);color:var(--ink);flex:none}
.was9 .top small{display:block;font:400 12px var(--font-body);color:var(--ink-2)}
.was9 .bd{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;min-height:0}
.was9 .cp{align-self:center;margin-bottom:auto;font:500 10px var(--font-mono);letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}
.was9 .in,.was9 .out{max-width:82%;padding:8px 12px;border-radius:14px;font-size:15px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.was9 .in{align-self:flex-start;background:var(--wa-schem-in)}.was9 .in b{display:block;font-size:12px;color:var(--ink-2)}
.was9 .out{align-self:flex-end;background:var(--wa-schem-out)}
.was9 .cmp9{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:end;padding:8px 10px 34px;background:var(--paper-raised);border-top:1px solid var(--line)}
.was9 .cmp9 .tx{border:1px solid var(--line-strong);border-radius:20px;padding:10px 14px;font-size:15px;line-height:1.4;background:var(--paper);color:var(--ink)}
.was9 .ph9{width:36px;height:36px;border-radius:18px;background:var(--line-strong);flex:none}
/* D-3, drawn once to compare: flagged as the option not recommended */
.d3flag9{margin:0 16px;background:var(--d3-flag);color:var(--d3-flag-ink);border-radius:16px;padding:12px 14px;font:600 14px/1.4 var(--font-body);text-wrap:pretty}

/* ==== Round 10 · a guest from the link, and the recovery-code reminder (additions) ====
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule: no dashboards. "Guest" is a word by the name, never a count. Money is said in sentences.
   Builds on Round 9: .wadot9, .talk9/.bub9/.sys9/.say9/.quick9, .here9, .hw9 and the .was9 schematic are reused. */
:root,[data-theme]{
--wa-fill:var(--paper-raised);
--pair-fill:var(--paper-raised);--pair-edge:var(--line-strong);--pair-on:var(--kopi);--pair-on-fill:var(--kopi-soft);
--guest-ink:var(--ink-2);--guest-edge:var(--line-strong);
--keep-fill:var(--paper-sunk);--ready-fill:var(--kopi-soft);
--nudge-fill:var(--paper-raised);--nudge-edge:var(--kopi);
--rc-tile:var(--paper-sunk);--rm-fill:var(--danger-soft);--rm-ink:var(--danger);
}
/* the link page: one welcome. The circle, then the WhatsApp question, then the sitting, on one scroll */
.wel10{display:flex;flex-direction:column;gap:14px}
.wel10 .cv{margin:0 16px;border-radius:var(--r-card);overflow:hidden}
.wel10 h1{font:500 40px/1.05 var(--font-display);letter-spacing:-.015em;color:var(--ink)}
.wa10{margin:0 16px;background:var(--wa-fill);border:1px solid var(--wa-edge);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:12px}
.wa10 .h{display:flex;align-items:center;gap:8px;width:100%;font:600 15px var(--font-body);color:var(--ink)}.wa10 .h span:last-child{flex:1;min-width:0;white-space:normal}
.wa10 .q{font:500 22px/1.25 var(--font-display);color:var(--ink)}
.wa10.done{flex-direction:row;align-items:center;gap:10px;padding:4px 6px 4px 16px;min-height:56px}
.wa10.done .t{flex:1;min-width:0;font-size:var(--t-sub);line-height:1.35;color:var(--ink)}
.wa10.done .btn{height:44px}
/* join, or come as a guest: two equal choices, each saying what it asks for */
.join10{padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.join10 .q{font:500 22px/1.25 var(--font-display);color:var(--ink);text-wrap:pretty}
.pair10{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.pair10 button{min-height:68px;border-radius:var(--r-field);border:1.5px solid var(--pair-edge);background:var(--pair-fill);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 10px;color:var(--ink);text-align:center}
.pair10 .n{font:600 17px/1.2 var(--font-body)}
.pair10 .d{font-size:13px;line-height:1.3;color:var(--ink-2)}
.pair10 button.on{border-color:var(--pair-on);background:var(--pair-on-fill)}
.next10{background:var(--paper-sunk);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.next10 p{font:500 18px/1.35 var(--font-display);color:var(--ink);text-wrap:pretty}
/* who you are on this phone */
.who10{display:flex;align-items:center;gap:10px;font-size:var(--t-sub);line-height:1.35;color:var(--ink)}
.who10 .av{width:28px;height:28px;font-size:11px}
.who10 .g,.g10t{font-weight:400;color:var(--guest-ink)}
.keepl10{display:inline-flex;align-items:center;gap:2px;min-height:44px;font:600 15px var(--font-body);color:var(--kopi);align-self:flex-start}
.tag.guest{background:transparent;border:1px solid var(--guest-edge);color:var(--guest-ink)}
.g10{width:32px;height:32px;border-radius:16px;background:var(--pair-on-fill);color:var(--kopi);display:grid;place-items:center;flex:none}
/* the host's check: one line under the guest, and Send it */
.send10{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:4px 4px 4px 12px;min-height:48px;border-radius:12px;background:var(--paper-sunk);font:600 14px/1.3 var(--font-body);color:var(--ink)}
.send10>span{display:inline-flex;align-items:center;gap:6px}
.btn.rm10{background:var(--rm-fill);color:var(--rm-ink)}
/* more of WhatsApp's own screens (on the round-9 .was9 schematic): the chat picker, and Join group */
.was9 .pk{display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:60px;font:500 16px var(--font-body);color:var(--ink)}
.was9 .pk.on{background:var(--wa-schem-in)}
.was9 .jg{margin:auto 20px;background:var(--wa-schem-in);border-radius:16px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.was9 .jg .ph9{width:72px;height:72px;border-radius:36px}
.was9 .jg b{font:600 20px var(--font-body);color:var(--ink)}
.was9 .jg .sbtn{height:44px;width:100%;border-radius:10px;border:1.5px solid var(--ink);display:grid;place-items:center;font:600 15px var(--font-body);color:var(--ink);margin-top:8px}
/* warm cards: your share is ready, you paid the stall */
.ready10{background:var(--ready-fill);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.ready10 p{font:500 20px/1.3 var(--font-display);color:var(--ink);text-wrap:pretty}
/* Keep my things: offered once, quiet */
.keep10{margin:0 16px;background:var(--keep-fill);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.keep10 b{font:600 17px/1.3 var(--font-body);color:var(--ink)}
.keep10 p{font-size:var(--t-sub);line-height:1.45;color:var(--ink);text-wrap:pretty}
/* R · the one Home card, and the code shown once */
.nudge10{margin:0 16px 16px;background:var(--nudge-fill);border:1.5px solid var(--nudge-edge);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.nudge10 .e{font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--kopi)}
.nudge10 p{font:500 19px/1.35 var(--font-display);color:var(--ink);text-wrap:pretty}
.rc10{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--rc-tile);border-radius:16px;padding:12px}
.rc10 span{font:500 20px/1 var(--font-mono);letter-spacing:.1em;text-align:center;padding:12px 0;color:var(--ink);background:var(--paper-raised);border-radius:10px}
.tick10{display:flex;align-items:center;gap:12px;min-height:48px;font:600 16px var(--font-body);color:var(--ink);text-align:left;width:100%}
.box10{width:24px;height:24px;border-radius:7px;border:2px solid var(--line-strong);display:grid;place-items:center;flex:none;color:transparent}
.box10.on{background:var(--in);border-color:var(--in);color:var(--paper-raised)}

/* ==== Round 11 · offline, with your data on your phone (additions) =====================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule: no dashboards. Offline is one quiet line under the title. Waiting is words by the thing itself.
   No counters, badges, spinners, red or banners. The hollow ring means "on this phone, not sent yet". */
:root,[data-theme]{
--off-ink:var(--ink-2);--off-ring:var(--ink-3);
--wait-ink:var(--ink-2);--wait-ring:var(--ink-3);--wait-chip:var(--cv-chip);
--nc-fill:var(--paper-sunk);--nc-ink:var(--ink);
--one-ink:var(--ink);
--chg-fill:var(--maybe-soft);--chg-ink:var(--ink);
--keep11-fill:var(--paper-raised);--keep11-edge:var(--line-strong);
--out11-fill:var(--in-soft);--out11-ink:var(--ink);
}
/* the hollow ring: on this phone, not sent yet */
.ring11{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--off-ring);flex:none;display:inline-block;box-sizing:border-box}
/* offline: one quiet line under the title */
.off11{display:flex;align-items:center;gap:8px;min-height:24px;font:500 14px/1.35 var(--font-body);color:var(--off-ink)}
/* waiting to send: done on the phone (the tick stays), on its way (the words) */
.wt11{display:flex;align-items:center;gap:8px;font-size:var(--t-sub);line-height:1.4;color:var(--ink)}
.wt11 .ring11{border-color:var(--wait-ring)}.wt11 .w{color:var(--wait-ink)}
.wt11.i{display:inline-flex;font-size:inherit;gap:6px}
.wb11{display:inline-flex;align-items:center;gap:5px;color:var(--wait-ink);white-space:nowrap}.wb11 .ring11{width:7px;height:7px}
.mth .tm11{position:absolute;left:4px;right:4px;bottom:4px;min-height:22px;padding:2px 6px;border-radius:11px;background:var(--wait-chip);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-edge);font:600 10px/1.2 var(--font-body);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:4px;text-align:center}
.mth .tm11 .ring11{width:7px;height:7px;border-color:var(--ink-2)}
.ordw11{display:flex;align-items:center;gap:12px;min-height:56px}
.ordw11 .th{width:56px;height:56px;border-radius:12px;overflow:hidden;flex:none}
.ordw11 b{font:600 15px/1.3 var(--font-body);color:var(--ink)}
.note11{background:var(--paper-sunk);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.note11 .l{font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.note11 p{font-size:var(--t-body);line-height:1.4;color:var(--ink);text-wrap:pretty}
/* needs a connection: one line, right under what was tapped */
.nc11{background:var(--nc-fill);border-radius:14px;padding:12px 14px;font-size:var(--t-sub);line-height:1.4;color:var(--nc-ink);text-wrap:pretty}
.nci11{color:var(--nc-ink);font-weight:600}
/* back online: the one-line sheet, and a host's change said once */
.one11{display:flex;flex-direction:column;gap:10px;padding:10px 0 4px}
.one11 p{font:500 22px/1.3 var(--font-display);color:var(--one-ink);text-wrap:pretty}
.chg11{background:var(--chg-fill);color:var(--chg-ink);border-radius:14px;padding:12px 14px;font:600 15px/1.4 var(--font-body);text-wrap:pretty}
/* K · keep it on this phone (iPhone), once */
.keep11{margin:0 16px 16px;background:var(--keep11-fill);border:1px solid var(--keep11-edge);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.keep11 h3{font:500 21px/1.25 var(--font-display);color:var(--ink)}
.keep11 p{font-size:var(--t-sub);line-height:1.45;color:var(--ink);text-wrap:pretty}
.out11{background:var(--out11-fill);color:var(--out11-ink);border-radius:14px;padding:12px 14px;display:flex;gap:8px;align-items:flex-start;font:600 15px/1.4 var(--font-body);text-wrap:pretty}
.out11 .ic{flex:none;margin-top:2px}
.tick10 .col .help{font:400 13px/1.4 var(--font-body);color:var(--ink-2)}
.pth11{width:48px;height:48px;border-radius:12px;overflow:hidden;flex:none;display:block}

/* ==== Round 12 · the landing page, the free tier and ✦ packs, buy us a kopi (additions) ====
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule, landing page included: no dashboards. No counters, charts or tick grids. One centred column. */
:root,[data-theme]{
--lp12-bg:var(--paper);--lp12-rule:var(--line);--lp12-lede:var(--ink-2);--lp12-next:var(--kopi);
--lp12-num:var(--kopi-soft);--lp12-num-ink:var(--kopi);--lp12-crop:var(--paper);
--lp12-card:var(--paper-raised);--lp12-free-edge:var(--ink);--lp12-plus-edge:var(--line-strong);
--lp12-wa:var(--wa-schem);--lp12-wa-out:var(--wa-schem-out);
--sp12-fill:var(--helper-fill);--sp12-ink:var(--ink);
--k12-edge:var(--line);--k12-cup:var(--kopi);--k12-thx:var(--kopi-soft);
--adm12-off:var(--ink-2);
}
:root{--lp12-bezel:#16191A;--lp12-col:640px;--lp12-crop-w:360px;--t-lp-hero:44px;--t-lp-h2:30px;--t-lp-body:19px;--t-lp-lede:21px}
@media (min-width:900px){:root{--t-lp-hero:64px;--t-lp-h2:38px;--t-lp-body:20px;--t-lp-lede:23px}}
/* L · the page */
body.lp12{background:var(--lp12-bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
.lp12-w{max-width:calc(var(--lp12-col) + 48px);margin:0 auto;padding:0 24px}
.lp12-top{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp12-top .si{height:44px;display:inline-flex;align-items:center;gap:2px;font:600 16px var(--font-body);color:var(--ink)}
.lp12-top .si .ic{color:var(--ink-3)}
.lp12-hero{padding-top:36px;display:flex;flex-direction:column;gap:22px}
.lp12-h{font:500 var(--t-lp-hero)/1.04 var(--font-display);letter-spacing:-.022em;text-wrap:balance}
.lp12-h span{display:block;color:var(--lp12-next)}
.lp12-lede{font-size:var(--t-lp-lede);line-height:1.5;color:var(--lp12-lede);text-wrap:pretty;max-width:30em}
.lp12-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:6px}
.btn.lp12-go{height:56px;padding:0 26px;border-radius:16px;font-size:18px}
.lp12-time{font-size:15px;color:var(--ink-2)}
.lp12-dev{display:flex;justify-content:center;height:520px;overflow:hidden;padding-top:44px;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.lp12-dev .ph{zoom:.82}
.lp12-s{margin-top:64px;padding-top:56px;border-top:1px solid var(--lp12-rule);display:flex;flex-direction:column;gap:22px}
.lp12-s:first-of-type{border-top:0;margin-top:24px}
.lp12-s h2{font:500 var(--t-lp-h2)/1.12 var(--font-display);letter-spacing:-.012em;text-wrap:balance}
.lp12-s p{font-size:var(--t-lp-body);line-height:1.62;text-wrap:pretty;max-width:34em}
.lp12-s p b{font-weight:600}
.lp12-s em{font-style:italic}
.lp12-pull{font:500 26px/1.3 var(--font-display)!important;letter-spacing:-.01em;color:var(--ink)}
.lp12-quiet{color:var(--ink-2)}
/* four steps, each with a crop of the real screen */
.lp12-steps{list-style:none;display:flex;flex-direction:column;gap:44px;padding-top:8px}
.lp12-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px 16px}
.lp12-n{width:40px;height:40px;border-radius:20px;background:var(--lp12-num);color:var(--lp12-num-ink);display:grid;place-items:center;font:500 20px/1 var(--font-display)}
.lp12-step h3{font:600 21px/1.3 var(--font-body);padding-top:6px}
.lp12-step>p,.lp12-step>.lp12-crop{grid-column:2}
@media (max-width:560px){.lp12-step>.lp12-crop{grid-column:1/-1}}
.lp12-crop{margin-top:14px;width:100%;max-width:var(--lp12-crop-w);height:236px;overflow:hidden;position:relative;background:var(--lp12-crop);border:7px solid var(--lp12-bezel);border-bottom:0;border-radius:36px 36px 0 0;padding:20px 16px 0;display:flex;flex-direction:column;gap:12px;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.lp12-crop.c{align-self:center;grid-column:auto}
.lp12-crop .card{margin:0}
.lp12-crop.wa{background:var(--lp12-wa);justify-content:flex-start}
.lp12-bub{align-self:flex-end;max-width:92%;background:var(--lp12-wa-out);color:var(--ink);border-radius:14px 14px 4px 14px;padding:9px 12px;font-size:15px;line-height:1.42;text-wrap:pretty}
.lp12-bub small{display:block;text-align:right;font-size:11px;color:var(--ink-2);margin-top:2px}
.lp12-bub.in{align-self:flex-start;background:var(--paper-raised);border-radius:14px 14px 14px 4px}
.lp12-dates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lp12-dates .db{width:auto}
.lp12-dates .db.on{background:var(--kopi);border-color:var(--kopi);color:var(--on-kopi)}
.lp12-dates .db.on .m,.lp12-dates .db.on .w{color:var(--on-kopi)}
/* sentences with a bold lead */
.lp12-pts{display:flex;flex-direction:column;gap:18px}
.lp12-who{display:flex;flex-direction:column;gap:26px}
.lp12-who>div{display:flex;flex-direction:column;gap:10px}
/* what it costs: two short cards, never a matrix */
.lp12-price{display:grid;gap:16px;padding-top:4px}
@media (min-width:900px){.lp12-price{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.lp12-pc{background:var(--lp12-card);border:1.5px solid var(--lp12-plus-edge);border-radius:var(--r-hero);padding:24px 22px;display:flex;flex-direction:column;gap:14px}
.lp12-pc.free{border:2px solid var(--lp12-free-edge)}
.lp12-pc .nm{display:flex;align-items:center;gap:8px;font:700 12px var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--kopi)}
.lp12-pc .amt{font:500 46px/1 var(--font-display);letter-spacing:-.02em}
.lp12-pc .amt small{font:400 17px var(--font-body);letter-spacing:0;color:var(--ink-2);margin-left:6px}
.lp12-pc p{font-size:17px!important;line-height:1.55!important}
.lp12-packs{display:flex;flex-direction:column}
.lp12-packs>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--line)}
.lp12-packs b{font:600 16px var(--font-body)}.lp12-packs span{font-size:14px;color:var(--ink-2);grid-column:1}.lp12-packs i{font:600 16px var(--font-body);font-style:normal;grid-row:1;grid-column:2;font-variant-numeric:tabular-nums}
.lp12-fine{font-size:16px!important;color:var(--ink-2)}
.lp12-ps{font-size:17px!important;color:var(--ink-2)}
.lp12-ps b{color:var(--ink)}
.lp12-ft{margin-top:88px;padding:28px 0 56px;border-top:1px solid var(--lp12-rule);display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:15px;color:var(--ink-2)}
.lp12-ft a{color:var(--ink-2)}.lp12-ft .mk{margin-right:-12px}
/* the og card for nextkopi.com, 1200×630 */
.og12{width:1200px;height:630px;background:var(--paper);color:var(--ink);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:72px 80px;font-family:var(--font-body)}
.og12 .big{position:absolute;right:-96px;top:-96px}
.og12 h1{font:500 76px/1.04 var(--font-display);letter-spacing:-.02em;max-width:820px;position:relative;text-wrap:balance}
.og12 p{font:400 34px/1.3 var(--font-body);color:var(--ink-2);position:relative}
/* F · the ✦ sheet for a free host */
.sp12{display:inline-flex;vertical-align:-3px;margin:0 1px}
.sp12-left{background:var(--sp12-fill);color:var(--sp12-ink);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.sp12-left b{font:600 17px/1.35 var(--font-body)}
.sp12-own{align-self:center;height:44px;display:inline-flex;align-items:center;gap:2px;font:600 15px var(--font-body);color:var(--kopi)}
.sp12-cap{display:flex;gap:8px;align-items:center;font-size:var(--t-cap);color:var(--ink-2);line-height:1.4}
/* K · buy us a kopi */
.k12{margin:0 16px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px 12px;padding:14px 16px;border:1px solid var(--k12-edge);border-radius:var(--r-card);background:var(--paper)}
.k12>.ic{color:var(--k12-cup);margin-top:1px}
.k12 p{font-size:var(--t-sub);line-height:1.45;color:var(--ink);text-wrap:pretty}
.k12 .acts{grid-column:2;display:flex;gap:4px;align-items:center;padding-top:4px}
.tr12{display:inline-flex;align-items:center;gap:2px;font:600 15px var(--font-body);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tr12 .ic{color:var(--ink-3)}
.thx12{width:88px;height:88px;border-radius:44px;background:var(--k12-thx);color:var(--k12-cup);display:grid;place-items:center}
.thx12 .ic{width:40px;height:40px}
.adm12{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center}
.adm12 .inp{width:160px}
.adm12.off .t-head,.adm12.off .t-sub{color:var(--adm12-off)}
.fee.k12r{grid-template-columns:40px minmax(0,1.5fr) 72px 104px minmax(0,1fr) 220px}
.kp12{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.kp12 .n{font:600 16px/1.3 var(--font-body)}.kp12 .s{font-size:var(--t-cap);color:var(--ink-2);line-height:1.35}
.kp12 .amt{font:600 16px var(--font-body);font-variant-numeric:tabular-nums}
.kp12 .acts{grid-column:2/-1;display:flex;gap:8px;align-items:center}
.kp12 .note7{grid-column:2/-1;font-size:14px;line-height:1.4;text-wrap:pretty}
.kp12.flag{background:var(--fee-flag)}
.seg.four12{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ==== Round 13 · start the WhatsApp group from Next Kopi (additions) ======================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark.
   Hard rule: no dashboards. No "joined" counters: Next Kopi can't see who joined, and doesn't pretend to. */
:root,[data-theme]{
--wg13-now:var(--kopi);--wg13-now-ink:var(--on-kopi);--wg13-done:var(--in-soft);--wg13-done-ink:var(--in);
--wg13-next:var(--paper-sunk);--wg13-next-ink:var(--ink-3);--wg13-back:var(--kopi-soft);--wg13-found:var(--in);
--wg13-name:var(--paper-sunk);--wg13-os-btn:var(--ink);--wg13-os-btn-ink:var(--on-ink);--wg13-tick:var(--in);
}
/* who's in the circle: faces, then first names in a sentence */
.fc13{display:flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1.35 var(--font-body);color:var(--ink);text-wrap:pretty}
.nudge10 .fc13,.fc13.l{justify-content:flex-start}
/* one sheet, three steps: now (open), done (ticked, one line), next (title only) */
.s13{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px 12px;padding:14px 0;border-top:1px solid var(--line);align-items:center}
.s13.first{border-top:0;padding-top:4px}
.s13 .n{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;font:700 14px var(--font-body);background:var(--wg13-next);color:var(--wg13-next-ink)}
.s13 .n .ic{width:18px;height:18px}
.s13 h4{font:600 17px/1.3 var(--font-body);color:var(--ink)}
.s13 .b{grid-column:2;display:flex;flex-direction:column;gap:10px}
.s13.now .n{background:var(--wg13-now);color:var(--wg13-now-ink)}
.s13.done .n{background:var(--wg13-done);color:var(--wg13-done-ink)}
.s13.done h4{font-weight:500;color:var(--ink-2)}
.s13.next h4{font-weight:500;color:var(--wg13-next-ink)}
.nm13{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 5px 0 14px;border-radius:var(--r-field);background:var(--wg13-name);font:600 17px var(--font-body);color:var(--ink)}
.nm13 span{flex:1;min-width:0}
.nowa13{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-cap);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.nowa13 .ic{width:16px;height:16px;margin-top:1px;color:var(--ink-3)}
.found13{display:inline-flex;gap:6px;align-items:center;font-weight:600;color:var(--wg13-found)}
.found13 .ic{width:16px;height:16px}
.back13{display:flex;gap:10px;align-items:center;background:var(--wg13-back);border-radius:14px;padding:10px 14px;font:600 15px/1.35 var(--font-body);color:var(--ink);text-wrap:pretty}
.back13 .ic{color:var(--kopi)}
/* the phone's and WhatsApp's own screens, drawn as schematics inside .was9 */
.ct13{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:12px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line)}
.ct13 b{display:block;font:600 16px/1.3 var(--font-body);color:var(--ink)}.ct13 small{font-size:13px;color:var(--ink-2)}
.ct13 .tk{width:24px;height:24px;border-radius:12px;display:grid;place-items:center;background:var(--wg13-tick);color:var(--paper-raised)}
.ct13 .tk .ic{width:14px;height:14px}
.ob13{align-self:stretch;height:48px;border-radius:12px;background:var(--wg13-os-btn);color:var(--wg13-os-btn-ink);display:grid;place-items:center;font:600 16px var(--font-body);flex:none}
.os13{align-self:stretch;height:40px;border-radius:10px;border:1px solid var(--line-strong);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:15px;color:var(--ink);background:var(--paper-raised)}
.orow13{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);font:500 16px var(--font-body);color:var(--ink)}
.orow13.hi13{background:var(--wg13-back);border-radius:10px;border-bottom:0}

/* ==== Round 14 · 中文 and Tiếng Việt, and the demo walk-through (additions) ================
   Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark. No new hex values.
   Hard rule: no dashboards. The walk-through is one sentence at a time: no step counts, dots, bars or ticks.
   Chinese faces load by <link> only on pages that show Chinese (index.html, landing-zh.html); the stacks fall back to the OS. */
:root,[data-theme]{
--tour14-veil:color-mix(in srgb,var(--scrim) 62%,transparent);--tour14-ring:var(--kopi);--tour14-gap:var(--paper);
--tour14-card:var(--ink);--tour14-card-ink:var(--on-ink);--tour14-next:var(--paper);--tour14-next-ink:var(--ink);
--demo14-line:var(--maybe-soft);--demo14-line-ink:var(--ink);--demo14-leave:var(--kopi);
--demo14-qr:var(--paper-sunk);--demo14-would:var(--line-strong);
--lang14-on:var(--ink);--lang14-off:var(--ink-2);--lang14-rule:var(--kopi);--offer14:var(--paper-sunk);
}
:root{
--font-zh-display:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
--font-zh-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
--lh14-zh-body:1.7;--lh14-zh-head:1.3;--lh14-vi-head:1.2;
}
/* T · type. Latin first in every stack, so S$, PayNow, names, digits and dates stay in Fraunces / Source Sans 3; Chinese falls through */
:lang(zh){--font-display:"Fraunces",var(--font-zh-display);--font-body:"Source Sans 3",var(--font-zh-body);line-break:strict}
:lang(zh) :is(.lt,.t-title,.t-head,.sh-h h3,.sh h3,.lp12-h,.lp12-s h2,.lp12-pull,.wel10 h1,.bsent,.tour14 p,.nudge10 p){letter-spacing:0;line-height:var(--lh14-zh-head)}
:lang(zh) :is(.eyebrow6,.tag,.grp,.grp8,.db .m,.db .w,.nudge10 .e,.lp12-pc .nm,.pn){letter-spacing:.02em}
:lang(zh) :is(.t-body,.lp12-s p,.lp12-lede,.mail6 p,.would14,.demo14 p){line-height:var(--lh14-zh-body)}
:lang(zh) :is(em,i,.quote){font-style:normal}
:lang(zh) :is(.db .m,.db .w),:lang(vi) :is(.db .m,.db .w){white-space:nowrap;letter-spacing:0}
:lang(vi) :is(.lt,.t-title,.lp12-h,.lp12-s h2,.lp12-pull,.wel10 h1){line-height:var(--lh14-vi-head)}
:lang(vi) :is(.eyebrow6,.grp,.grp8,.tag,.nudge10 .e){line-height:1.3}
/* Vietnamese runs about a third longer: buttons wrap to two lines rather than cut a word */
:lang(vi) .btn{white-space:normal;height:auto;min-height:50px;padding-top:11px;padding-bottom:11px;line-height:1.25;text-align:center}
:lang(vi) .btn.sm{min-height:40px;padding-top:8px;padding-bottom:8px}
:lang(vi) .btn.lp12-go{min-height:56px}
/* T · the language switch: each language named in its own script; the current one underlined */
.lsw14{display:flex;align-items:center;gap:2px;margin-left:auto}
.lsw14 a{min-width:40px;height:44px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font:600 15px var(--font-body);color:var(--lang14-off)}
.lsw14 a:hover{text-decoration:none;color:var(--lang14-on)}
.lsw14 a.on{color:var(--lang14-on);text-decoration:underline;text-decoration-color:var(--lang14-rule);text-decoration-thickness:2px;text-underline-offset:6px}
.lsw14 i{font-style:normal;color:var(--ink-3)}
.lsw14.nar{display:none}
@media (max-width:560px){.lsw14.wide{display:none}.lsw14.nar{display:flex}.lp12-top .wm{font-size:19px!important}}
.lsw14.force{display:flex}
.lp14-top{gap:6px}
.lp14-foot{display:flex;flex-direction:column;gap:6px;width:100%;padding-top:10px}
.lp14-draft{font-size:13px;line-height:1.45;color:var(--ink-3)}
/* the page offered once in the reader's language, when the browser asks for it */
.offer14{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 14px;border-radius:12px;background:var(--offer14);font:500 15px/1.35 var(--font-body);color:var(--ink)}
.offer14 span{flex:1;min-width:0}
.offer14 a{font-weight:600;white-space:nowrap}
.offer14 .iconbtn{width:40px;height:40px;color:var(--ink-2)}
.lp14-demo{display:inline-flex;align-items:center;gap:2px;min-height:44px;font:600 17px var(--font-body);color:var(--kopi)}
.lp14-in{--t-lp-hero:40px;--t-lp-h2:28px;--t-lp-body:17px;--t-lp-lede:18px;padding:0 20px}
.lp14-in .lp12-dev{height:440px;padding-top:28px}
.lp14-in .lp12-price{grid-template-columns:minmax(0,1fr)}
:lang(zh) .lp12-pc .amt small,:lang(vi) .lp12-pc .amt small{display:block;margin:8px 0 0;line-height:1.4}
.lsw14 a,.lp12-top .si,.lp14-demo{white-space:nowrap}
/* Profile → Language: three rows, each in its own script */
.lrow14{display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:60px;border-top:1px solid var(--line);width:100%;text-align:left}
.lrow14:first-child{border-top:0}
.lrow14 .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lrow14 .a{font:600 18px/1.3 var(--font-body);color:var(--ink)}.lrow14 .b{font-size:var(--t-cap);color:var(--ink-2)}
.lnote14{padding:12px 20px 0;font-size:var(--t-sub);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
/* D · the one line that stays while in the demo */
.demo14{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;margin:0 12px 6px;padding:6px 6px 6px 14px;border-radius:14px;background:var(--demo14-line);color:var(--demo14-line-ink)}
.demo14 p{flex:1 1 180px;min-width:0;font:500 14px/1.35 var(--font-body);text-wrap:pretty}
.demo14 a{min-height:40px;display:inline-flex;align-items:center;gap:1px;font:600 14px var(--font-body);color:var(--demo14-leave);white-space:nowrap;margin-left:auto}
/* D · the thing the card is about, gently lit: a ring and a light veil, drawn over the live screen, never covering it */
.spot14{position:absolute;z-index:45;pointer-events:none;border-radius:16px;box-shadow:0 0 0 3px var(--tour14-gap),0 0 0 5px var(--tour14-ring),0 0 0 2400px var(--tour14-veil);transition:all var(--dur-sheet) var(--ease-sheet)}
/* D · the card: one sentence, Next, Skip the tour. Nothing else */
.tour14{position:absolute;left:12px;right:12px;bottom:24px;z-index:46;background:var(--tour14-card);color:var(--tour14-card-ink);border-radius:22px;padding:18px 16px 10px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-float)}
.tour14 p{font:500 21px/1.35 var(--font-display);text-wrap:pretty}
.tour14 .acts{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tour14 .skip,.tour14 .next,.tab span{white-space:nowrap}
.tour14 .skip{min-height:44px;padding:0 4px;font:600 15px var(--font-body);color:var(--tour14-card-ink)}
.tour14 .next{min-height:48px;padding:0 22px;border-radius:14px;background:var(--tour14-next);color:var(--tour14-next-ink);font:600 17px var(--font-body)}
.tour14.last .acts{flex-direction:column;align-items:stretch;gap:2px}
.tour14.last .next{width:100%}
.tour14.up{bottom:108px}
.tour14 .nib{position:absolute;bottom:-7px;right:38px;width:16px;height:16px;border-radius:3px;background:var(--tour14-card);transform:rotate(45deg)}
/* D · what the demo can't do: the line that would have gone, drawn dashed */
.would14{border:1.5px dashed var(--demo14-would);border-radius:16px;padding:12px 14px;font-size:16px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.qrd14{width:136px;height:136px;border-radius:12px;background:repeating-linear-gradient(45deg,var(--demo14-qr) 0 8px,var(--paper-raised) 8px 16px);border:1.5px dashed var(--demo14-would);display:grid;place-items:center;padding:16px;text-align:center;font:500 12px/1.4 var(--font-mono);color:var(--ink-2)}
/* the 480 column on a computer */
.dc14{width:480px;height:100%;margin:0 auto;position:relative;overflow:hidden;background:var(--paper);border-left:1px solid var(--line);border-right:1px solid var(--line);padding-top:12px}
.dt .dc14 .nav{bottom:24px}
/* T · the Chinese pairing, as a specimen */
.spec14{width:880px;background:var(--paper);color:var(--ink);border-radius:20px;padding:36px 40px;display:grid;grid-template-columns:180px minmax(0,1fr);gap:26px 32px;font-family:var(--font-body)}
.spec14 .k{font:500 12px/1.5 var(--font-mono);color:var(--ink-2);letter-spacing:.03em;padding-top:6px}
.spec14 .k b{display:block;color:var(--ink);font-weight:500}
.spec14 .v{display:flex;flex-direction:column;gap:8px;min-width:0}
.spec14 .rule{font-size:13px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.spec14 hr{grid-column:1/-1;border:0;border-top:1px solid var(--line)}

/* Round 16 · T2: /privacy and /terms, in the landing's column and type */
.lg16{max-width:640px;margin:0 auto;padding:28px 0 40px;display:flex;flex-direction:column;gap:22px;color:var(--ink)}
.lg16 h1{font:500 44px/1.1 var(--font-display);letter-spacing:-.015em}
.lg16 .lede{font:400 21px/1.5 var(--font-body);color:var(--ink-2);text-wrap:pretty}
.lg16 section{display:flex;flex-direction:column;gap:6px;padding-top:18px;border-top:1px solid var(--line)}
.lg16 h2{font:500 22px/1.25 var(--font-display)}.lg16 section p{font-size:17px;line-height:1.6;text-wrap:pretty}
.lg16 .upd{font-size:14px;color:var(--ink-3)}
.lg16.ph16{padding:0 0 40px;gap:16px}.lg16.ph16 h1{font-size:32px}.lg16.ph16 .lede{font-size:18px}.lg16.ph16 section{padding-top:12px}.lg16.ph16 section p{font-size:16px;line-height:1.5}
.lg16 .pks15{display:flex;gap:8px;align-items:center;font-size:15px}.lg16 .pks15 a{color:var(--ink-2);text-decoration:none}.lg16 .pks15 a.on{color:var(--ink);text-decoration:underline;text-underline-offset:6px}.lg16 .pks15 i{color:var(--ink-3);font-style:normal}

/* round 24 · C — the Learning section's drawing (manual art, inline); colours from manual.css, scoped */
.lp24-art{margin:8px 0}.lp24-art svg{display:block;width:100%;height:auto}.lp24-art .m-br{fill:var(--paper-raised,#FBF8F2)}.lp24-art .m-bs{fill:var(--paper-sunk,#EAE3D6)}.lp24-art .m-bks{fill:var(--kopi-soft,#F0E1D2)}.lp24-art .m-bkm{fill:var(--kopi-mark,#9C5A30)}.lp24-art .m-bi{fill:var(--ink,#2C3A2E)}.lp24-art .m-bq{fill:var(--qr-tile,#fff)}.lp24-art .m-bL{fill:var(--line-strong,#C8BDAA)}.lp24-art .m-sl{stroke:var(--line,#DED6C7)}.lp24-art .m-sL{stroke:var(--line-strong,#C8BDAA)}.lp24-art .m-sk{stroke:var(--kopi,#8A4F2A)}