/* The screen kit: one component set for the whole product.
   Every colour, font, radius and shadow comes from custom properties a skin sets on the root element,
   or on one frame when several skins sit side by side. Spacing and type scale belong to the kit, so every
   skin keeps the same rhythm. Prefix k- for product parts. Nothing here knows which direction is wearing it. */

:root {
  /* skin tokens, neutral fallbacks so the kit draws before any skin loads */
  --k-bg: #17181b; --k-surface: #202125; --k-surface-2: #2a2b30; --k-ink: #eeece8; --k-muted: #a5a39f;
  --k-line: #33343a; --k-hero: #e9e6df; --k-hero-ink: #17181b; --k-focus: #e9e6df;
  --k-font-display: system-ui, sans-serif; --k-font-body: system-ui, sans-serif;
  --k-radius: 16px; --k-radius-sm: 10px; --k-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

/* the kit's own scale, shared by every skin */
.k-phone, .k-desk, .k-root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;
  --t-micro: 11.5px; --t-meta: 12.5px; --t-sub: 13.5px; --t-body: 15px; --t-row: 16px; --t-head: 18px;
  --t-card: 21px; --t-title: 26px; --t-greet: 30px; --t-big: 46px;
  --k-gutter: 16px;
  --k-hero-soft: color-mix(in srgb, var(--k-hero) 16%, transparent);
  --k-ink-soft: color-mix(in srgb, var(--k-ink) 8%, transparent);
  --k-scrim: color-mix(in srgb, var(--k-bg) 62%, rgba(0, 0, 0, .5));
  --k-warn: #e0a24a; --k-good: #7fbf8e;
  /* the five area colours from today's product, allowed only as small area tags */
  --a-social: #2bb39b; --a-ads: #4a90f0; --a-site: #f28a3c; --a-ai: #9a6bf0; --a-mail: #16a37f;
  font-family: var(--k-font-body); color: var(--k-ink); background: var(--k-bg);
  font-size: var(--t-body); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "tnum" 0;
}
[data-theme="light"] .k-phone, .k-phone[data-theme="light"], .k-desk[data-theme="light"] { --k-warn: #9a5d06; --k-good: #2f7a45; }
.k-phone *, .k-desk * { box-sizing: border-box; }
.k-phone img, .k-desk img { display: block; max-width: 100%; }
.k-phone :focus-visible, .k-desk :focus-visible { outline: 2px solid var(--k-focus); outline-offset: 2px; }

/* ---------- frames ---------- */
.k-phone {
  position: relative; width: min(390px, 100%); height: 844px; border-radius: 44px; overflow: hidden;
  border: 1px solid var(--k-line); box-shadow: 0 0 0 6px color-mix(in srgb, var(--k-ink) 5%, transparent), var(--k-shadow);
  display: flex; flex-direction: column; isolation: isolate;
}
.k-phone.is-full { height: auto; min-height: 844px; }
.k-sbar { flex: none; height: 46px; padding: 14px 26px 0 30px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.k-app { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.k-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-bottom: var(--s6); }
.k-scroll::-webkit-scrollbar { display: none; }
.is-full .k-scroll { overflow: visible; }
.k-pad { padding: 0 var(--k-gutter); }

.k-desk { position: relative; width: 1280px; height: 800px; border-radius: 14px; overflow: hidden; border: 1px solid var(--k-line); box-shadow: var(--k-shadow); display: flex; flex-direction: column; }
.k-desk-bar { flex: none; height: 40px; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); background: var(--k-surface); border-bottom: 1px solid var(--k-line); }
.k-desk-url { flex: 0 1 420px; height: 24px; margin: 0 auto; border-radius: 999px; background: var(--k-surface-2); }
.k-desk-body { flex: 1; min-height: 0; display: flex; }

/* Sample tag: on every frame, so invented figures never pass as real */
.k-sample { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--k-ink) 45%, transparent); font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em; color: var(--k-ink); background: var(--k-bg); }
/* claim marker inside a frame, for a Next or Later part of a Today screen. Book annotation, not product UI */
.k-claim { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; font-size: var(--t-micro); font-weight: 600; color: var(--k-ink); background: repeating-linear-gradient(135deg, var(--k-surface-2) 0 4px, transparent 4px 8px); border: 1px solid var(--k-line); vertical-align: middle; white-space: nowrap; }

/* ---------- top bar ---------- */
.k-top { flex: none; height: 56px; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--k-gutter); }
.k-top-title { flex: 1; min-width: 0; font-size: var(--t-row); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-spacer { flex: 1; }
.k-mark { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 650; font-size: var(--t-body); }
.k-mark-tile { flex: none; width: 30px; height: 30px; border-radius: 9px; overflow: hidden; background: var(--k-surface-2); display: grid; place-items: center; font-family: var(--k-font-display); font-size: 16px; font-weight: 600; }
.k-mark-tile img { width: 100%; height: 100%; object-fit: cover; }
.k-mark-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-mark-caret { width: 14px; height: 14px; color: var(--k-muted); }
.k-face { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 650; background: var(--k-surface-2); color: var(--k-ink); border: 1px solid var(--k-line); }
.k-face--sm { width: 26px; height: 26px; font-size: 11.5px; }
.k-face--lg { width: 40px; height: 40px; font-size: 15px; }
.k-face[data-tone="b"] { background: color-mix(in srgb, var(--a-ai) 22%, var(--k-surface)); }
.k-face[data-tone="c"] { background: color-mix(in srgb, var(--a-site) 22%, var(--k-surface)); }
.k-back { display: inline-flex; align-items: center; gap: 2px; height: 36px; margin-left: -8px; padding: 0 10px 0 4px; border-radius: var(--k-radius-sm); font-size: var(--t-body); font-weight: 550; color: var(--k-ink); background: none; border: 0; font-family: inherit; }
.k-back svg { width: 22px; height: 22px; }

/* the character, only ever in a named slot */
.k-char { flex: none; overflow: hidden; background: var(--k-char-plate, transparent); border-radius: 50%; box-sizing: border-box; padding: var(--k-char-pad, 0); display: inline-grid; place-items: center; width: var(--k-char, 48px); height: var(--k-char, 48px); }
.k-char img, .k-char svg { width: 100%; height: 100%; object-fit: contain; }

/* ---------- tabs and rail ---------- */
.k-tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 12px 26px; background: var(--k-bg); border-top: 1px solid var(--k-line); }
.k-tab { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 0 0; font-size: var(--t-micro); font-weight: 550; color: var(--k-muted); background: none; border: 0; font-family: inherit; }
.k-tab svg { width: 24px; height: 24px; }
.k-tab.is-on { color: var(--k-ink); font-weight: 650; }
.k-tab.is-on::before { content: ""; position: absolute; top: -7px; width: 20px; height: 2px; border-radius: 2px; background: var(--k-hero); }
.k-count { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--k-hero); color: var(--k-hero-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; }

.k-rail { flex: none; width: 236px; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5) var(--s3); border-right: 1px solid var(--k-line); background: var(--k-bg); }
.k-rail .k-mark { padding: 0 var(--s2) var(--s5); }
.k-rail-item { position: relative; display: flex; align-items: center; gap: var(--s3); height: 42px; padding: 0 var(--s3); border-radius: var(--k-radius-sm); color: var(--k-muted); font-size: var(--t-body); font-weight: 550; }
.k-rail-item svg { width: 21px; height: 21px; }
.k-rail-item.is-on { background: var(--k-surface); color: var(--k-ink); font-weight: 650; }
.k-rail-item .k-count { position: static; margin-left: auto; }
.k-rail-foot { margin-top: auto; }

/* ---------- headings ---------- */
.k-h1 { margin: 0; font-family: var(--k-font-display); font-size: var(--t-title); line-height: 1.12; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.k-greet { display: flex; gap: var(--s3); align-items: flex-end; padding: var(--s2) var(--k-gutter) var(--s5); }
.k-greet-line { margin: 0; font-family: var(--k-font-display); font-size: var(--t-greet); line-height: 1.08; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.k-lede { margin: var(--s2) 0 0; color: var(--k-muted); font-size: var(--t-body); text-wrap: pretty; }
.k-sh { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s7) var(--k-gutter) 0; }
.k-sh h2, .k-sh h3 { margin: 0; font-family: var(--k-font-display); font-size: var(--t-head); line-height: 1.2; font-weight: 650; letter-spacing: -.005em; }
.k-sh .k-num { font-size: var(--t-sub); color: var(--k-muted); font-weight: 600; }
.k-sh .k-btn--link { margin-left: auto; }
.k-intro { margin: var(--s1) var(--k-gutter) var(--s4); color: var(--k-muted); font-size: var(--t-sub); }
.k-hr { height: 1px; background: var(--k-line); margin: var(--s6) var(--k-gutter); border: 0; }

/* ---------- buttons: main, quiet, link, icon ---------- */
.k-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 46px; padding: 0 var(--s5); border-radius: var(--k-radius-sm); border: 0; font-family: inherit; font-size: var(--t-body); font-weight: 650; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform .12s ease, filter .12s ease; }
.k-btn svg { width: 18px; height: 18px; flex: none; }
.k-btn:active { transform: scale(.98); }
.k-btn--main { background: var(--k-hero); color: var(--k-hero-ink); }
.k-btn--main:hover { filter: brightness(1.06); }
.k-btn--quiet { background: var(--k-surface-2); color: var(--k-ink); }
.k-btn--link { height: auto; padding: 4px 0; background: none; color: var(--k-ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--k-ink) 35%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.k-btn--icon { width: 46px; padding: 0; border-radius: 50%; background: transparent; color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line); }
.k-btn--icon svg { width: 21px; height: 21px; }
.k-btn--icon.is-on { color: var(--k-hero); box-shadow: inset 0 0 0 1px var(--k-hero); }
.k-btn--icon.is-on svg path { fill: currentColor; }
.k-btn--sm { height: 36px; padding: 0 var(--s4); font-size: var(--t-sub); }
.k-btn--icon.k-btn--sm { width: 36px; padding: 0; }
.k-btn--block { width: 100%; }
.k-btn[disabled], .k-btn.is-off { opacity: .38; cursor: default; }
.k-btn.is-busy { color: transparent; position: relative; }
.k-btn.is-busy::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--k-hero-ink); border-right-color: transparent; animation: k-spin .8s linear infinite; }
.k-btn--quiet.is-busy::after { border-color: var(--k-ink); border-right-color: transparent; }
@keyframes k-spin { to { transform: rotate(360deg); } }
.k-btns { display: flex; gap: var(--s2); align-items: center; }
.k-btns--stack { flex-direction: column; align-items: stretch; }

/* bottom bar with one main button */
.k-bar { flex: none; display: flex; gap: var(--s2); align-items: center; padding: var(--s3) var(--k-gutter) 28px; background: var(--k-bg); border-top: 1px solid var(--k-line); }
.k-bar .k-btn--main { flex: 1; }
.k-bar-note { flex: 1; font-size: var(--t-sub); color: var(--k-muted); }

/* ---------- tags and chips ---------- */
.k-area { display: inline-flex; flex-wrap: wrap; align-items: center; font-size: var(--t-meta); font-weight: 600; color: var(--k-ink); line-height: 1.35; }
.k-area svg { width: 11px; height: 11px; flex: none; margin-right: 7px; }
.k-area-src { color: var(--k-muted); font-weight: 500; margin-left: 5px; }
.k-src { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--k-surface-2); color: var(--k-muted); font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: 1px; text-decoration: none; }
.k-src svg { width: 11px; height: 11px; }
.k-src--none { background: none; box-shadow: inset 0 0 0 1px var(--k-line); }
.k-confirm { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px dashed var(--k-warn); color: var(--k-warn); font-size: 12px; font-weight: 650; white-space: nowrap; vertical-align: 1px; }
.k-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--s3); border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-ink); font-size: var(--t-sub); font-weight: 550; white-space: nowrap; border: 0; font-family: inherit; }
.k-chip svg { width: 11px; height: 11px; }
.k-chip.is-on { background: var(--k-ink); color: var(--k-bg); box-shadow: none; }
.k-chiprow { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding: 0 var(--k-gutter); }
.k-chiprow::-webkit-scrollbar { display: none; }
.k-chipwrap { display: flex; flex-wrap: wrap; gap: var(--s2); }
.k-mood { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--k-surface-2); }
.k-mood::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.k-mood--good { color: var(--k-good); }
.k-mood--mixed { color: var(--k-muted); }
.k-mood--sore { color: var(--k-warn); }
.k-role { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 650; background: var(--k-surface-2); color: var(--k-ink); }
.k-role--invited { background: none; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-muted); }

/* status chips: the dot fills as work moves. Idea, In the works, Handed off */
.k-status { display: inline-grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; font-size: var(--t-meta); font-weight: 650; white-space: nowrap; }
.k-status-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; }
.k-status[data-s="idea"] .k-status-dot { opacity: .7; }
.k-status[data-s="works"] .k-status-dot { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.k-status[data-s="handed"] .k-status-dot { background: currentColor; }
.k-status[data-s="later"] .k-status-dot { border-style: dotted; }
.k-status-sub { grid-column: 2; font-weight: 500; color: var(--k-muted); font-size: 12px; }
.k-status-sub.is-need { color: var(--k-warn); font-weight: 650; }
.k-conn { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--k-surface-2); color: var(--k-ink); white-space: nowrap; }
.k-conn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k-muted); }
.k-conn[data-c="ok"]::before { background: var(--k-good); }
.k-conn[data-c="need"], .k-conn[data-c="exp"] { color: var(--k-warn); }
.k-conn[data-c="need"]::before, .k-conn[data-c="exp"]::before { background: var(--k-warn); }
.k-conn[data-c="stale"]::before { background: none; box-shadow: inset 0 0 0 1.5px var(--k-muted); }

/* ---------- the closed pick card, section 10: area and source, the thing, 8 word headline, 12 word why, one button ---------- */
.k-pick { padding: 0 var(--k-gutter); margin: 0 0 var(--s8); }
.k-pick-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.k-rank { font-family: var(--k-font-display); font-size: var(--t-row); font-weight: 600; color: var(--k-muted); width: 16px; font-variant-numeric: tabular-nums; }
.k-thing { position: relative; display: block; border-radius: var(--k-radius); overflow: hidden; background: var(--k-surface-2); aspect-ratio: 1 / 1; }
.k-thing img { width: 100%; height: 100%; object-fit: cover; }
.k-thing--tall { aspect-ratio: 4 / 5; }
.k-thing--wide { aspect-ratio: 16 / 10; }
.k-pick-title { margin: var(--s4) 0 0; font-family: var(--k-font-display); font-size: var(--t-card); line-height: 1.16; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.k-why { margin: var(--s2) 0 0; color: var(--k-muted); font-size: var(--t-body); line-height: 1.5; text-wrap: pretty; }
.k-why .k-src, .k-why .k-confirm { margin-left: 4px; }
.k-pick-acts { display: flex; gap: var(--s2); margin-top: var(--s4); }
.k-pick-acts .k-btn--main { flex: 1; }
.k-pick.is-new .k-thing { box-shadow: 0 0 0 2px var(--k-hero); }
/* a figure with no picture: one big number and its source */
.k-figure { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s2); height: 100%; padding: var(--s6); background: var(--k-surface); }
.k-figure-n { font-family: var(--k-font-display); font-size: 64px; line-height: .95; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.k-figure-l { font-size: var(--t-row); font-weight: 550; }
.k-dots { display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; margin-bottom: var(--s3); }
.k-dots i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--k-line); }
.k-dots i.on { background: var(--k-ink); box-shadow: none; }

/* drafts drawn as the thing: the brand's copy set in HTML on the photo, never fake lettering */
.k-draft-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px var(--s5) var(--s5); background: linear-gradient(transparent, rgba(8, 9, 12, .72)); color: #fff; }
.k-draft-copy b { display: block; font-family: var(--k-font-display); font-size: 25px; line-height: 1.08; font-weight: 600; letter-spacing: -.01em; }
.k-draft-copy span { display: block; margin-top: 6px; font-size: 13.5px; opacity: .88; }
.k-draft-copy--sm b { font-size: 15px; }
.k-draft-copy--sm { padding: 36px var(--s3) var(--s3); }
.k-draft-copy--sm span { font-size: 12px; }

/* compact pick for See everything: the same card, smaller, no extra words */
.k-mini { display: grid; grid-template-columns: 84px 1fr; gap: var(--s3); padding: var(--s3) var(--k-gutter); align-items: start; }
.k-mini + .k-mini { border-top: 1px solid var(--k-line); }
.k-mini .k-thing { aspect-ratio: 1; border-radius: var(--k-radius-sm); }
.k-mini .k-figure { padding: 8px; }
.k-mini .k-figure-n { font-size: 20px; white-space: nowrap; }
.k-mini-title { margin: 4px 0 0; font-family: var(--k-font-display); font-size: var(--t-row); line-height: 1.2; font-weight: 600; }
.k-mini .k-why { font-size: var(--t-sub); margin-top: 4px; }
.k-mini-acts { display: flex; gap: var(--s2); margin-top: var(--s2); }

/* ---------- Need your yes ---------- */
.k-yes-list { margin: 0 var(--k-gutter); border-radius: var(--k-radius); background: var(--k-surface); overflow: hidden; }
.k-yes { padding: var(--s4); }
.k-yes + .k-yes { border-top: 1px solid var(--k-line); }
.k-yes-q { margin: 0; font-size: var(--t-row); font-weight: 650; line-height: 1.3; text-wrap: balance; }
.k-yes-what { margin: 6px 0 var(--s3); font-size: var(--t-sub); color: var(--k-muted); }
.k-yes-acts { display: flex; gap: var(--s2); }
.k-yes-acts .k-btn { flex: 1; height: 40px; }
.k-yes-from { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); font-size: var(--t-meta); color: var(--k-muted); }

/* ---------- story rings and the viewer ---------- */
.k-rings { display: flex; gap: var(--s4); padding: var(--s2) var(--k-gutter) 0; overflow-x: auto; scrollbar-width: none; }
.k-rings::-webkit-scrollbar { display: none; }
.k-ring { flex: none; display: grid; justify-items: center; gap: 6px; width: 66px; font-size: 12px; font-weight: 550; color: var(--k-ink); }
.k-ring-pic { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: var(--k-bg); box-shadow: 0 0 0 2px var(--k-hero); }
.k-ring-pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.k-ring.is-seen .k-ring-pic { box-shadow: 0 0 0 1.5px var(--k-line); }
.k-ring.is-seen { color: var(--k-muted); }
.k-ring-label { white-space: nowrap; }

.k-story { position: absolute; inset: 0; background: #0c0d10; color: #fff; display: flex; flex-direction: column; }
.k-story > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .45), transparent 22%, transparent 48%, rgba(0, 0, 0, .78)); }
.k-story > * { position: relative; z-index: 1; }
.k-story-bars { display: flex; gap: 4px; padding: var(--s3) var(--s3) 0; }
.k-story-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .32); }
.k-story-bars i.done { background: #fff; }
.k-story-bars i.now { background: linear-gradient(90deg, #fff 45%, rgba(255, 255, 255, .32) 45%); }
.k-story-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); font-size: var(--t-sub); font-weight: 650; }
.k-story-head .k-btn--icon { margin-left: auto; color: #fff; box-shadow: none; }
.k-story-fact { margin: auto var(--s5) var(--s4); font-family: var(--k-font-display); font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.k-story-src { margin: 0 var(--s5) var(--s5); display: flex; gap: var(--s2); align-items: center; font-size: var(--t-meta); opacity: .86; }
.k-story-src .k-src { background: rgba(255, 255, 255, .16); color: #fff; }
.k-story-act { padding: 0 var(--s5) 32px; }

/* ---------- the open pick ---------- */
.k-open-head { padding: 0 var(--k-gutter) var(--s4); }
.k-open-head .k-h1 { margin-top: var(--s2); }
.k-open-thing { margin: 0 var(--k-gutter); }
.k-open-tools { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--k-gutter) 0; }
.k-layer { padding: var(--s7) var(--k-gutter) 0; }
.k-layer > h3 { margin: 0 0 var(--s3); font-family: var(--k-font-display); font-size: var(--t-head); font-weight: 650; }
.k-whyrows { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.k-whyrows li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: start; font-size: var(--t-body); line-height: 1.45; padding-bottom: var(--s3); border-bottom: 1px solid var(--k-line); }
.k-whyrows li:last-child { border-bottom: 0; padding-bottom: 0; }
.k-whyrows .k-gloss { display: block; color: var(--k-muted); font-size: var(--t-sub); margin-top: 2px; }
.k-steps-plan { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 0; }
.k-steps-plan li { counter-increment: st; display: grid; grid-template-columns: 32px 1fr auto; gap: var(--s2); align-items: baseline; padding: var(--s3) 0; border-top: 1px solid var(--k-line); font-size: var(--t-body); }
.k-steps-plan li::before { content: counter(st); font-family: var(--k-font-display); font-weight: 600; font-size: var(--t-head); color: var(--k-muted); font-variant-numeric: tabular-nums; }
.k-post { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--k-radius-sm); box-shadow: inset 0 0 0 1px var(--k-line); }
.k-post + .k-post { margin-top: var(--s2); }
.k-post-shape { flex: none; width: 26px; display: grid; place-items: center; }
.k-post-shape i { display: block; border: 1.5px solid var(--k-muted); border-radius: 3px; }
.k-post b { font-weight: 600; font-size: var(--t-body); }
.k-post span { display: block; font-size: var(--t-meta); color: var(--k-muted); }

/* versions strip */
.k-vers { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.k-vers::-webkit-scrollbar { display: none; }
.k-ver { flex: none; display: grid; gap: 5px; justify-items: center; font-size: 12px; font-weight: 600; color: var(--k-muted); background: none; border: 0; padding: 0; font-family: inherit; }
.k-ver-pic { width: 52px; height: 64px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--k-line); }
.k-ver-pic img { width: 100%; height: 100%; object-fit: cover; }
.k-ver.is-on { color: var(--k-ink); }
.k-ver.is-on .k-ver-pic { box-shadow: 0 0 0 2px var(--k-bg), 0 0 0 4px var(--k-hero); }
.k-ver--add .k-ver-pic { display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-muted); }
.k-ver--add svg { width: 20px; height: 20px; }
.k-vergrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.k-vercell { display: grid; gap: var(--s2); font-size: var(--t-sub); font-weight: 600; }
.k-vercell .k-thing { aspect-ratio: 4 / 5; border-radius: var(--k-radius-sm); }
.k-vercell.is-on .k-thing { box-shadow: 0 0 0 2px var(--k-surface), 0 0 0 4px var(--k-hero); }
.k-vercell small { display: block; font-weight: 500; color: var(--k-muted); font-size: var(--t-meta); }

/* ---------- Make it: the thing, the chat, tools, composer ---------- */
.k-stage { padding: 0 var(--k-gutter); }
.k-stage .k-thing { border-radius: var(--k-radius); }
.k-stage-meta { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0 0; }
.k-stage-meta .k-vers { flex: 1; }
.k-chat { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5) var(--k-gutter) var(--s3); }
.k-msg { max-width: 84%; font-size: var(--t-body); line-height: 1.45; }
.k-msg-who { display: flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 650; color: var(--k-muted); margin-bottom: 4px; }
.k-msg-body { padding: 10px 14px; border-radius: 18px; }
.k-msg--you { align-self: flex-end; }
.k-msg--you .k-msg-body { background: var(--k-surface-2); border-bottom-right-radius: 6px; }
.k-msg--ai .k-msg-body { padding: 2px 0 0; }
.k-msg--ai { max-width: 92%; }
.k-msg--mate .k-msg-body { background: var(--k-surface); box-shadow: inset 0 0 0 1px var(--k-line); border-top-left-radius: 6px; }
.k-msg--sys { align-self: center; max-width: 100%; font-size: var(--t-meta); color: var(--k-muted); display: flex; align-items: center; gap: var(--s2); }
.k-msg--sys::before, .k-msg--sys::after { content: ""; width: 28px; height: 1px; background: var(--k-line); }
.k-msg-ver { display: inline-flex; margin-top: var(--s2); }
.k-tools { display: flex; gap: var(--s2); padding: 0 var(--k-gutter) var(--s2); overflow-x: auto; scrollbar-width: none; }
.k-tools::-webkit-scrollbar { display: none; }
.k-tool { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--k-surface); box-shadow: inset 0 0 0 1px var(--k-line); font-size: var(--t-sub); font-weight: 550; color: var(--k-ink); border: 0; font-family: inherit; }
.k-tool svg { width: 16px; height: 16px; color: var(--k-muted); }
.k-composer { flex: none; display: flex; align-items: center; gap: var(--s2); margin: 0 var(--k-gutter) var(--s3); padding: 6px 6px 6px var(--s4); border-radius: 26px; background: var(--k-surface); box-shadow: inset 0 0 0 1px var(--k-line); }
.k-composer input { flex: 1; min-width: 0; height: 36px; border: 0; background: none; color: var(--k-ink); font: inherit; font-size: var(--t-body); outline: none; }
.k-composer input::placeholder { color: var(--k-muted); }
.k-composer .k-btn--icon { width: 38px; height: 38px; box-shadow: none; }
.k-composer .k-send { background: var(--k-ink); color: var(--k-bg); }
.k-wait { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) var(--k-gutter) 0; padding: var(--s3) var(--s4) var(--s3) var(--s3); border-radius: var(--k-radius); background: var(--k-surface); }
.k-wait p { margin: 0; flex: 1; font-size: var(--t-body); font-weight: 550; line-height: 1.35; }
.k-dim { opacity: .42; filter: saturate(.5); }

/* ---------- sheet, menu, toast ---------- */
.k-scrim { position: absolute; inset: 0; z-index: 20; background: var(--k-scrim); }
.k-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 88%; display: flex; flex-direction: column; background: var(--k-surface); border-radius: calc(var(--k-radius) + 8px) calc(var(--k-radius) + 8px) 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .28); padding: 10px var(--k-gutter) 30px; }
.k-sheet::before { content: ""; align-self: center; width: 38px; height: 4px; border-radius: 4px; background: var(--k-line); margin-bottom: var(--s4); }
.k-sheet-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.k-sheet-head h2 { margin: 0; flex: 1; font-family: var(--k-font-display); font-size: 22px; line-height: 1.15; font-weight: 650; letter-spacing: -.01em; }
.k-sheet-body { overflow-y: auto; scrollbar-width: none; padding-bottom: var(--s4); }
.k-sheet-body > p { margin: 0 0 var(--s3); color: var(--k-muted); }
.k-sheet-acts { display: grid; gap: var(--s2); }
.k-price { display: flex; align-items: baseline; gap: var(--s2); margin: var(--s2) 0 var(--s4); }
.k-price b { font-family: var(--k-font-display); font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.k-price span { color: var(--k-muted); font-size: var(--t-sub); }
.k-facts { margin: 0 0 var(--s4); padding: 0; list-style: none; display: grid; gap: var(--s2); }
.k-facts li { display: flex; gap: var(--s3); font-size: var(--t-body); }
.k-facts svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--k-muted); }

.k-menu { position: absolute; z-index: 21; min-width: 240px; padding: 6px; border-radius: var(--k-radius-sm); background: var(--k-surface); box-shadow: var(--k-shadow), inset 0 0 0 1px var(--k-line); }
.k-menu-item { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px; padding: 0 var(--s3); border-radius: 7px; font-size: var(--t-body); font-weight: 550; color: var(--k-ink); background: none; border: 0; text-align: left; font-family: inherit; }
.k-menu-item svg { width: 18px; height: 18px; color: var(--k-muted); }
.k-menu-item.is-on { background: var(--k-surface-2); }
.k-menu-item small { display: block; color: var(--k-muted); font-weight: 500; font-size: var(--t-meta); }
.k-menu-item .k-tick { margin-left: auto; color: var(--k-hero); }
.k-menu-sep { height: 1px; background: var(--k-line); margin: 6px 0; }
.k-menu-label { padding: 8px var(--s3) 4px; font-size: var(--t-meta); color: var(--k-muted); font-weight: 600; }

.k-toast { position: absolute; z-index: 22; left: var(--k-gutter); right: var(--k-gutter); bottom: 96px; display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--k-ink); color: var(--k-bg); box-shadow: var(--k-shadow); font-size: var(--t-body); font-weight: 600; }
.k-toast p { flex: 1; margin: 0; line-height: 1.3; }
.k-toast .k-btn--link { color: var(--k-bg); padding: 0 8px; text-decoration-color: color-mix(in srgb, var(--k-bg) 50%, transparent); }

/* ---------- fields, switches, choices, tabs ---------- */
.k-field { display: grid; gap: 6px; }
.k-field > span { font-size: var(--t-sub); font-weight: 600; }
.k-input { width: 100%; height: 48px; padding: 0 var(--s4); border-radius: var(--k-radius-sm); border: 1px solid var(--k-line); background: var(--k-surface); color: var(--k-ink); font: inherit; font-size: var(--t-row); outline: none; }
.k-input::placeholder { color: var(--k-muted); }
.k-input.is-focus { border-color: var(--k-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-focus) 22%, transparent); }
.k-input.is-warn { border-color: var(--k-warn); }
.k-hint { display: flex; gap: 6px; font-size: var(--t-sub); color: var(--k-muted); }
.k-hint.is-warn { color: var(--k-warn); font-weight: 550; }
.k-hint svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.k-paste { display: grid; gap: var(--s3); }
.k-paste .k-input { height: 60px; font-size: 18px; border-radius: var(--k-radius); padding: 0 var(--s5); }
.k-paste .k-btn { height: 54px; border-radius: var(--k-radius); font-size: var(--t-row); }
.k-area-in { min-height: 96px; padding: var(--s3) var(--s4); resize: none; line-height: 1.45; }

.k-switch { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--k-surface-2); box-shadow: inset 0 0 0 1px var(--k-line); }
.k-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--k-muted); transition: transform .18s ease; }
.k-switch.is-on { background: var(--k-hero); box-shadow: none; }
.k-switch.is-on::after { transform: translateX(18px); background: var(--k-hero-ink); }
.k-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: calc(var(--k-radius-sm) + 2px); background: var(--k-surface-2); }
.k-seg button { height: 34px; border: 0; border-radius: var(--k-radius-sm); background: none; color: var(--k-muted); font: inherit; font-size: var(--t-sub); font-weight: 600; }
.k-seg button.is-on { background: var(--k-surface); color: var(--k-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.k-ptabs { display: flex; gap: var(--s5); padding: 0 var(--k-gutter); border-bottom: 1px solid var(--k-line); }
.k-ptab { position: relative; height: 40px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-body); font-weight: 600; color: var(--k-muted); white-space: nowrap; }
.k-ptab.is-on { color: var(--k-ink); }
.k-ptab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--k-ink); }
.k-ptab small { font-size: 12px; color: var(--k-muted); font-weight: 600; }

/* ---------- rows, tiles, meters ---------- */
.k-rows { margin: 0 var(--k-gutter); border-radius: var(--k-radius); background: var(--k-surface); overflow: hidden; }
.k-row { display: flex; align-items: center; gap: var(--s3); min-height: 58px; padding: var(--s3) var(--s4); }
.k-row + .k-row { box-shadow: inset 0 1px 0 var(--k-line); }
.k-row-main { flex: 1; min-width: 0; }
.k-row-t { display: block; font-size: var(--t-row); font-weight: 600; line-height: 1.3; }
.k-row-s { display: block; margin-top: 2px; font-size: var(--t-sub); color: var(--k-muted); line-height: 1.35; }
.k-row-end { flex: none; display: flex; align-items: center; gap: var(--s2); color: var(--k-muted); font-size: var(--t-sub); }
.k-row-end > svg { width: 18px; height: 18px; }
.k-row-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--k-surface-2); color: var(--k-ink); }
.k-row-ic svg { width: 19px; height: 19px; }
.k-row-pic { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--k-surface-2); }
.k-row-pic img { width: 100%; height: 100%; object-fit: cover; }
.k-row.is-danger .k-row-t { color: var(--k-warn); }
.k-count-n { font-family: var(--k-font-display); font-size: var(--t-head); font-weight: 600; color: var(--k-ink); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.k-new-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-hero); flex: none; }

.k-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.k-tile { position: relative; display: grid; align-content: space-between; gap: var(--s4); min-height: 92px; padding: var(--s3) var(--s4) var(--s4); border-radius: var(--k-radius-sm); background: var(--k-surface); box-shadow: inset 0 0 0 1px var(--k-line); text-align: left; font: inherit; color: var(--k-ink); border: 0; }
.k-tile svg.k-tile-shape { width: 14px; height: 14px; }
.k-tile b { font-size: var(--t-body); font-weight: 650; line-height: 1.2; }
.k-tile small { display: block; margin-top: 2px; font-size: var(--t-meta); color: var(--k-muted); font-weight: 500; }
.k-tile.is-on { box-shadow: inset 0 0 0 2px var(--k-hero); }
.k-tile-tick { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--k-line); }
.k-tile.is-on .k-tile-tick { background: var(--k-hero); color: var(--k-hero-ink); box-shadow: none; }
.k-tile-tick svg { width: 14px; height: 14px; }
.k-tile--wide { grid-column: span 2; min-height: 64px; }

.k-meters { display: grid; gap: var(--s4); margin: 0 var(--k-gutter); padding: var(--s4); border-radius: var(--k-radius); background: var(--k-surface); }
.k-meter-top { display: flex; align-items: baseline; gap: var(--s2); }
.k-meter-top b { font-size: var(--t-body); font-weight: 650; }
.k-meter-top .k-claim { margin-left: auto; }
.k-meter-n { margin-left: auto; font-family: var(--k-font-display); font-size: var(--t-head); font-weight: 600; font-variant-numeric: tabular-nums; }
.k-meter-n small { font-family: var(--k-font-body); font-size: var(--t-meta); color: var(--k-muted); font-weight: 500; }
.k-track { height: 6px; margin: 6px 0; border-radius: 6px; background: var(--k-surface-2); overflow: hidden; }
.k-track i { display: block; height: 100%; border-radius: 6px; background: var(--k-ink); }
.k-meter-fix { font-size: var(--t-sub); color: var(--k-muted); }

/* ---------- Work board ---------- */
.k-new { margin: 0 var(--k-gutter); }
.k-board { display: grid; gap: var(--s6); padding: 0 var(--k-gutter); }
.k-lane-head { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--k-line); }
.k-lane-head b { font-size: var(--t-body); font-weight: 650; }
.k-lane-head span { color: var(--k-muted); font-size: var(--t-sub); font-weight: 600; }
.k-lane-head .k-claim { margin-left: auto; }
.k-wrow { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0; }
.k-wrow + .k-wrow { border-top: 1px solid var(--k-line); }
.k-wrow .k-row-pic { width: 48px; height: 60px; border-radius: 8px; }
.k-wrow-t { display: block; font-size: var(--t-body); font-weight: 600; line-height: 1.3; }
.k-wrow-m { display: flex; flex-wrap: wrap; gap: 4px var(--s3); margin-top: 4px; align-items: center; font-size: var(--t-meta); color: var(--k-muted); }

/* ---------- Your store ---------- */
.k-theme { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s3); align-items: center; padding: var(--s3) var(--s4); }
.k-theme + .k-theme { box-shadow: inset 0 1px 0 var(--k-line); }
.k-theme-meta { grid-column: 1 / -1; display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.k-rival { margin: 0 var(--k-gutter) var(--s4); border-radius: var(--k-radius); background: var(--k-surface); overflow: hidden; }
.k-rival-ad { position: relative; min-height: 190px; padding: var(--s5); display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--k-ink) 9%, transparent), transparent 60%), var(--k-surface-2); }
.k-rival-ad q { font-family: var(--k-font-display); font-size: 24px; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; quotes: "\201C" "\201D"; }
.k-rival-ad small { margin-top: var(--s2); color: var(--k-muted); font-size: var(--t-meta); }
.k-rival-days { position: absolute; top: var(--s4); left: var(--s4); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--k-bg); font-size: 12px; font-weight: 700; }
.k-rival-foot { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); }
.k-rival-foot b { display: block; font-size: var(--t-body); }
.k-rival-foot span { display: block; font-size: var(--t-meta); color: var(--k-muted); }
.k-rival-foot .k-btn { margin-left: auto; }
.k-ans { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s3); padding: var(--s3) var(--s4); }
.k-ans + .k-ans { box-shadow: inset 0 1px 0 var(--k-line); }
.k-ans q { font-size: var(--t-body); font-weight: 600; quotes: "\201C" "\201D"; }
.k-ans-who { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.k-ans-who span { height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-muted); }
.k-ans-who span.on { box-shadow: none; background: var(--k-ink); color: var(--k-bg); }
.k-plan-group { padding: var(--s6) var(--k-gutter) 0; }
.k-plan-group h3 { margin: 0 0 var(--s1); font-family: var(--k-font-display); font-size: var(--t-card); font-weight: 600; letter-spacing: -.01em; }
.k-plan-group > p { margin: 0 0 var(--s3); color: var(--k-muted); font-size: var(--t-sub); }

/* ---------- reading your store: stepper and question tiles ---------- */
.k-read-hero { display: grid; justify-items: center; text-align: center; padding: var(--s4) var(--s6) var(--s5); gap: var(--s3); }
.k-read-hero p { margin: 0; font-size: var(--t-row); font-weight: 550; line-height: 1.35; max-width: 28ch; text-wrap: balance; }
.k-progress { width: 100%; height: 4px; border-radius: 4px; background: var(--k-surface-2); overflow: hidden; }
.k-progress i { display: block; height: 100%; background: var(--k-hero); border-radius: 4px; }
.k-steps { margin: 0 var(--k-gutter); padding: 0; list-style: none; }
.k-step { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); align-items: start; padding: 9px 0; }
.k-step-dot { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--k-line); }
.k-step-dot svg { width: 13px; height: 13px; }
.k-step.is-done .k-step-dot { background: var(--k-ink); color: var(--k-bg); box-shadow: none; }
.k-step.is-now .k-step-dot { box-shadow: inset 0 0 0 2px var(--k-hero); }
.k-step.is-now .k-step-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k-hero); }
.k-step b { display: block; font-size: var(--t-body); font-weight: 650; }
.k-step-sub { display: block; font-size: var(--t-sub); color: var(--k-muted); }
.k-step.is-todo b { color: var(--k-muted); font-weight: 550; }
.k-step.is-todo .k-step-sub { display: none; }
.k-finding { margin: var(--s4) var(--k-gutter) 0; padding: var(--s4); border-radius: var(--k-radius); background: var(--k-surface); display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); align-items: center; }
.k-finding .k-thing { aspect-ratio: 1; border-radius: var(--k-radius-sm); }
.k-finding b { display: block; font-size: var(--t-body); line-height: 1.35; font-weight: 600; }
.k-finding small { display: flex; gap: 6px; align-items: center; margin-top: 6px; color: var(--k-muted); font-size: var(--t-meta); }
.k-q { margin: var(--s4) var(--k-gutter) 0; padding: var(--s4); border-radius: var(--k-radius); box-shadow: inset 0 0 0 1px var(--k-line); }
.k-q-top { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); font-size: var(--t-meta); color: var(--k-muted); font-weight: 600; }
.k-q-top .k-claim { margin-left: auto; }
.k-q h3 { margin: 0 0 var(--s3); font-size: var(--t-row); font-weight: 650; line-height: 1.3; }

/* the reveal: one shareable finding */
.k-reveal { margin: 0 var(--k-gutter); border-radius: calc(var(--k-radius) + 4px); overflow: hidden; background: var(--k-surface); box-shadow: var(--k-shadow); }
.k-reveal .k-thing { border-radius: 0; aspect-ratio: 5 / 4; }
.k-reveal-body { padding: var(--s5); }
.k-reveal-n { font-family: var(--k-font-display); font-size: 58px; line-height: .95; font-weight: 600; letter-spacing: -.03em; }
.k-reveal-l { margin: var(--s2) 0 var(--s3); font-size: var(--t-head); font-weight: 600; line-height: 1.25; text-wrap: balance; }

/* ---------- empty and error states: never the same look ---------- */
.k-empty { display: grid; justify-items: center; text-align: center; gap: var(--s4); padding: var(--s9) var(--s7); }
.k-empty p { margin: 0; font-family: var(--k-font-display); font-size: 22px; line-height: 1.2; font-weight: 600; max-width: 22ch; text-wrap: balance; }
.k-empty small { display: block; color: var(--k-muted); font-size: var(--t-body); max-width: 30ch; margin-top: calc(var(--s2) * -1); }
.k-error { display: grid; gap: var(--s4); margin: var(--s4) var(--k-gutter); padding: var(--s6) var(--s5); border-radius: var(--k-radius); background: var(--k-surface); box-shadow: inset 3px 0 0 var(--k-warn); }
.k-error-top { display: flex; align-items: center; gap: var(--s4); }
.k-error p { margin: 0; font-size: var(--t-head); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.k-error small { display: block; color: var(--k-muted); font-size: var(--t-sub); }
.k-error--page { margin-top: var(--s8); }
.k-celebrate { display: grid; justify-items: center; text-align: center; gap: var(--s3); padding: var(--s8) var(--s6) var(--s5); }
.k-celebrate h1 { margin: 0; font-family: var(--k-font-display); font-size: var(--t-title); line-height: 1.12; font-weight: 600; letter-spacing: -.012em; max-width: 18ch; text-wrap: balance; }
.k-celebrate > p { margin: 0; color: var(--k-muted); max-width: 30ch; }

/* first win bar */
.k-win { margin: var(--s5) var(--k-gutter) 0; padding: var(--s3) var(--s4) var(--s4); border-radius: var(--k-radius); background: var(--k-surface); }
.k-win-top { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sub); font-weight: 650; margin-bottom: var(--s3); }
.k-win-top .k-claim { margin-left: auto; }
.k-win-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.k-win-steps span { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--k-muted); }
.k-win-steps span::before { content: ""; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--k-ink) 16%, transparent); }
.k-win-steps span.done { color: var(--k-ink); }
.k-win-steps span.done::before { background: var(--k-hero); }
.k-win-line { margin: var(--s3) 0 0; font-size: var(--t-sub); }

/* end of feed sign off */
.k-signoff { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) var(--k-gutter) 0; padding: var(--s4); border-radius: var(--k-radius); box-shadow: inset 0 0 0 1px var(--k-line); }
.k-signoff p { margin: 0; flex: 1; font-size: var(--t-sub); color: var(--k-muted); }
.k-signoff b { display: block; color: var(--k-ink); font-size: var(--t-body); }

/* ---------- brief page ---------- */
.k-brief { padding: var(--s2) var(--k-gutter) var(--s6); }
.k-brief-head { position: relative; padding: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--k-line); }
.k-brief-head small { display: block; color: var(--k-muted); font-size: var(--t-meta); font-weight: 600; margin-bottom: var(--s2); }
.k-stamp { position: absolute; right: 0; top: var(--s2); transform: rotate(-4deg); display: grid; justify-items: center; gap: 1px; padding: 6px 10px; border-radius: 6px; border: 2px solid var(--k-ink); box-shadow: inset 0 0 0 2px var(--k-bg), inset 0 0 0 3px var(--k-ink); font-weight: 750; font-size: 13px; line-height: 1.1; }
.k-stamp small { font-size: 11px; font-weight: 600; margin: 0; color: var(--k-ink); opacity: .8; }
.k-brief-list { margin: 0; padding: 0; list-style: none; counter-reset: br; }
.k-brief-list li { counter-increment: br; display: grid; grid-template-columns: 34px 1fr; gap: var(--s2); padding: var(--s4) 0; border-bottom: 1px solid var(--k-line); }
.k-brief-list li::before { content: counter(br); font-family: var(--k-font-display); font-size: var(--t-card); font-weight: 600; line-height: 1.1; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.k-brief-list b { display: block; font-size: var(--t-meta); color: var(--k-muted); font-weight: 650; margin-bottom: 3px; }
.k-brief-list p { margin: 0; font-size: var(--t-body); line-height: 1.45; }
.k-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.k-file { display: grid; gap: 5px; font-size: 12px; color: var(--k-muted); font-weight: 550; }
.k-file .k-thing { aspect-ratio: 4 / 5; border-radius: 8px; }
.k-brief-sign { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s6) 0 0; color: var(--k-muted); font-size: var(--t-sub); }

/* ---------- email ---------- */
.k-mailhead { padding: var(--s2) var(--k-gutter) var(--s4); border-bottom: 1px solid var(--k-line); }
.k-mailhead h1 { margin: 0 0 var(--s3); font-size: var(--t-head); font-weight: 650; line-height: 1.3; }
.k-mailfrom { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sub); }
.k-mailfrom b { display: block; font-weight: 650; }
.k-mailfrom span { color: var(--k-muted); }
.k-mail { margin: var(--s4) var(--s3); padding: var(--s5) var(--s4); border-radius: var(--k-radius-sm); background: var(--k-surface); }
.k-mail-mark { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s5); }
.k-mail-slot { width: 96px; height: 22px; border-radius: 5px; border: 1px dashed var(--k-line); }
.k-mail h2 { margin: 0 0 var(--s4); font-family: var(--k-font-display); font-size: 23px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.k-mail-pick { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--k-line); }
.k-mail-pick .k-thing { aspect-ratio: 1; border-radius: 8px; }
.k-mail-pick .k-figure { padding: 6px; }
.k-mail-pick .k-figure-n { font-size: 12.5px; white-space: nowrap; letter-spacing: -.01em; }
.k-mail-pick b { display: block; font-size: var(--t-body); font-weight: 600; line-height: 1.3; }
.k-mail-pick span { display: block; font-size: var(--t-meta); color: var(--k-muted); margin-top: 2px; }
.k-mail .k-btn { margin-top: var(--s5); }
.k-mail-foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--k-line); font-size: var(--t-meta); color: var(--k-muted); }

/* ---------- Shopify host chrome for f1s ---------- */
.k-host { display: flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--k-gutter); background: var(--k-surface-2); font-size: var(--t-meta); color: var(--k-muted); font-weight: 600; }
.k-host i { width: 18px; height: 18px; border-radius: 5px; background: color-mix(in srgb, var(--k-ink) 22%, transparent); }

/* ---------- desktop layouts ---------- */
.k-desk-main { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: none; }
.k-desk-main::-webkit-scrollbar { display: none; }
.k-desk-top { display: flex; align-items: center; gap: var(--s3); height: 64px; padding: 0 var(--s7); }
.k-d1 { display: grid; grid-template-columns: minmax(0, 520px) 340px; gap: var(--s8); padding: 0 var(--s7) var(--s8); justify-content: center; }
.k-d1 .k-pick, .k-d1 .k-sh, .k-d1 .k-intro, .k-d1 .k-greet, .k-d1 .k-rings { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
.k-d1 .k-yes-list { margin: 0; }
.k-d1-side { position: sticky; top: 0; align-self: start; }
.k-d1 .k-thing { aspect-ratio: 16 / 11; }
.k-d2 { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 420px; }
.k-d2-thing { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--k-line); }
.k-d2-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: var(--s6); background: color-mix(in srgb, var(--k-surface) 55%, var(--k-bg)); }
.k-d2-stage .k-thing { height: 100%; max-height: 520px; aspect-ratio: 4 / 5; width: auto; box-shadow: var(--k-shadow); }
.k-d2-strip { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s6); border-top: 1px solid var(--k-line); }
.k-d2-chat { display: flex; flex-direction: column; min-height: 0; }
.k-d2-chat .k-chat { flex: 1; overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
  .k-phone *, .k-desk *, .k-phone *::before, .k-phone *::after, .k-desk *::before, .k-desk *::after { animation: none !important; transition: none !important; }
}

/* full bleed frames such as the story viewer: the status bar sits over the picture */
.k-phone.is-immersive .k-sbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: #fff; }
.k-phone.is-immersive .k-sample { background: rgba(0, 0, 0, .25); color: #fff; border-color: rgba(255, 255, 255, .6); }
.k-desk-fit { width: 100%; min-width: 0; overflow: hidden; }
.k-desk-fit > .k-desk { transform-origin: 0 0; }