/* Widget kit for guide sites: the base every widget in sites/<domain>/widgets/ links, after tokens.css. In a guide
   page build.py ties every selector here to .wgt, the element a widget is rendered into. Use the tokens, never raw hex.
   The first block is the base the first widgets were written on; its names stay as they are. Everything added since
   starts with k- so it cannot meet a class a widget names for itself. The hand-drawn layer, handwriting, frames, mock
   screens and napkin figures are in shared.css, which build.py adds after this file (the page uses those too). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body { font-family: var(--font); color: var(--ink); font-size: 15.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html.is-transparent, html.is-transparent body { background: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
code, kbd, pre, .mono { font-family: var(--mono); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.w { width: 100%; max-width: 1080px; margin: 0 auto; padding: 22px 16px 28px; }
html.is-embed .w { padding: 14px 8px 12px; }
.w-kicker { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
html.is-embed .w-kicker { display: none; }
.w-title { margin: 0; font-size: clamp(20px, 3.6vw, 25px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.w-lede { margin: 8px 0 0; font-size: 15.5px; color: var(--s700); }
.w-head { margin-bottom: 16px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 16px; }
.label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--s800); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.1; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.seg { display: inline-flex; padding: 3px; background: var(--s100); border-radius: var(--r-sm); border: 1px solid var(--line); gap: 2px; flex-wrap: wrap; }
.seg > button { border: 0; background: transparent; padding: 7px 12px; min-height: 36px; border-radius: 6px; font-weight: 600; font-size: 14px; color: var(--s700); }
.seg > button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.input, .select { width: 100%; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 16px; }
.input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; background: var(--s100); color: var(--s700); border: 1px solid var(--line); }
.fb { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-sm); font-size: 15px; line-height: 1.45; background: var(--accent-wash); }
.fb-good { background: var(--ok-soft); }
.fb-warn { background: var(--warn-soft); }

/* ---------- more of the kit: every name starts with k- ---------- */
.k-stage { position: relative; }
.k-foot { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.k-spacer { flex: 1; }
.k-grid-2, .k-grid-3 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .k-grid-2 { grid-template-columns: 1fr 1fr; } .k-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.k-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.k-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; }
.k-note { display: inline-block; background: var(--hi-soft); color: var(--ink); padding: 9px 12px; border-radius: 3px; font-family: var(--hand); font-weight: 700; font-size: 20px; line-height: 1.15; transform: rotate(-1deg); box-shadow: var(--shadow-sm); }
.k-hatch { background-image: repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--s400) 45%, transparent) 7px 8px); }

/* buttons beyond .btn and .btn-primary */
.k-btn { transition: transform .12s var(--ease), background .15s, box-shadow .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.k-btn:active { transform: translateY(1px); }
.k-btn[disabled] { opacity: .45; cursor: default; }
.k-btn-soft { background: var(--accent-wash); border-color: transparent; color: var(--accent-text); }
.k-btn-ghost { background: transparent; border-color: transparent; color: var(--s700); }
.k-btn-ghost:hover { background: var(--s100); }
.k-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13.5px; border-radius: var(--r-xs); }
.k-btn-icon { min-width: 42px; padding: 8px; }
.k-link { background: none; border: 0; padding: 6px 2px; color: var(--muted); font-weight: 500; font-size: 14px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.k-link:hover { color: var(--ink); }

/* chips: things to pick up, drop and reorder (KIT.dnd, KIT.sortable) */
.k-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--paper); border: 1.5px solid var(--line-2);
  font-size: 14.5px; font-weight: 550; line-height: 1.25; color: var(--ink); box-shadow: var(--shadow-sm); touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .15s var(--ease), box-shadow .15s, border-color .15s, background .15s, opacity .15s; }
.k-chip.is-block { display: flex; width: 100%; border-radius: var(--r-sm); justify-content: flex-start; text-align: left; }
.k-chip.is-draggable { cursor: grab; }
.k-chip:hover { border-color: var(--s400); }
.k-chip.is-picked { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-md); transform: translateY(-1px); }
.k-chip.is-dragging { opacity: .35; }
.k-chip.is-ghost { z-index: 9999; pointer-events: none; opacity: .97; box-shadow: var(--shadow-xl); transform: rotate(-2deg) scale(1.03); cursor: grabbing; }
.k-chip.is-right { border-color: var(--accent); background: var(--accent-wash); }
.k-chip.is-wrong { border-color: var(--s500); background: var(--s100); color: var(--s700); }
.k-bin { position: relative; border-radius: var(--r); border: 2px dashed var(--line-2); background: var(--paper); padding: 12px; min-height: 96px; transition: border-color .15s, background .15s, box-shadow .15s; }
.k-bin-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 650; font-size: 15px; }
.k-bin-body { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; }
.k-bin.is-target { border-color: var(--s400); }
.k-bin.is-over { border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.k-pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.k-pool:empty::after { content: attr(data-empty); font-size: 14px; font-style: italic; color: var(--faint); padding: 8px 2px; }

/* feedback beyond .fb, .fb-good, .fb-warn */
.fb .k-fb-mark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; font-weight: 700; color: var(--accent-text); }
.k-fb-bad { background: var(--s100); }
.k-fb-bad .k-fb-mark { color: var(--ink); }

/* progress */
.k-meter { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--s100); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.k-meter > i { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; border-radius: inherit; background: var(--accent); transition: width .5s var(--ease); }
.k-meter.is-hi > i { background: var(--hi); }
.k-dots { display: inline-flex; gap: 6px; align-items: center; }
.k-dots > i { width: 8px; height: 8px; border-radius: 50%; background: var(--s200); display: block; transition: background .2s, transform .2s var(--ease-spring); }
.k-dots > i.is-on { background: var(--accent); transform: scale(1.2); }
.k-dots > i.is-done { background: var(--s500); }
.k-count { font-variant-numeric: tabular-nums; }

/* controls */
.k-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.k-tabs > button { border: 0; background: none; padding: 9px 12px; min-height: 40px; font-weight: 650; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.k-tabs > button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.k-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 550; font-size: 14.5px; user-select: none; -webkit-user-select: none; min-height: 32px; }
.k-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.k-switch > i { width: 42px; height: 24px; border-radius: 99px; background: var(--s300); position: relative; transition: background .2s; flex: none; }
.k-switch > i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-spring); }
.k-switch input:checked + i { background: var(--accent); }
.k-switch input:checked + i::after { transform: translateX(18px); }
.k-switch input:focus-visible + i { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.k-textarea { width: 100%; min-height: 88px; resize: vertical; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.4; }
.k-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.k-kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; font-family: var(--mono); font-size: 12px; background: var(--paper); }

/* log panel (KIT.log) */
.k-log { margin: 0; padding: 8px 0; list-style: none; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; max-height: 220px; overflow-y: auto; }
.k-log-line { display: flex; gap: 10px; align-items: baseline; padding: 3px 12px; }
.k-log-t { color: var(--faint); flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.k-log-msg { min-width: 0; overflow-wrap: anywhere; }
.k-log-line.is-new { animation: k-in .45s var(--ease); background: color-mix(in srgb, var(--hi) 16%, transparent); }
.k-log-line.is-err .k-log-msg { color: var(--warn); }
.k-log-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 650; color: var(--muted); }

/* the finish (KIT.done) */
.k-done { position: relative; margin-top: 18px; padding: 16px 18px 16px 58px; border-radius: var(--r); background: var(--hi-soft); border: 1px solid var(--hi-line); box-shadow: var(--shadow-md); animation: k-in .5s var(--ease); }
.k-done .k-done-mark { position: absolute; left: 16px; top: 15px; width: 30px; height: 30px; }
.k-done .k-done-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.k-done p { margin: 0; color: var(--s800); }
.k-done .k-done-next { margin-top: 8px; font-size: 14px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* What a widget and the page's own components both use: the hand-drawn layer, handwriting, napkin figures, mock
   screens, tips and the small motion classes. build.py reads this file twice: once for the page (every selector kept out
   of widgets, like the rest of the site's css) and once for widgets (every selector tied to .wgt, like widget.css).
   So: no width @media here (it would mean the window in one copy and the widget in the other). A part that has to know
   its own width names a container and asks it: `container: mk / inline-size` and `@container mk (max-width: 520px)`.
   Colors are tokens. Class names start with k-, nk-, mk-, ink- or rk-, so they never meet a widget's own names. */

/* ---------- small hand-drawn glyphs, as masks (tools/pen-glyphs.cjs draws them) ---------- */
:root {
  --pen-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8 C5.6 14.2, 6 15.6, 9.6 18.2 M4.5 12.8 C6.6 14.8, 8.4 16.7, 9.6 18.2 M9.6 18.2 C13.7 14.1, 16.3 7.4, 20 5.6 M9.6 18.2 C11.9 14.6, 15.1 11.8, 20 5.6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pen-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 5.5 C9.4 9.8, 11.3 9.5, 18.5 18.5 M5.5 5.5 C9 9.2, 13 13.7, 18.5 18.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.5 5.5 C15.7 8.7, 14.4 9.3, 5.5 18.5 M18.5 5.5 C15.1 9.6, 12 11.9, 5.5 18.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pen-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M3.2 13.2 C5.1 12.8, 9.2 11.3, 13.4 11.2 C17.5 11.2, 25.9 12.8, 28.4 12.9 M2.2 12.7 C4.5 12.5, 10.8 9.9, 15.1 9.7 C19.4 9.5, 25.7 11.1, 28 11.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20.5 5.5 C21.8 6.7, 23.7 8.4, 28.5 12 M28.5 12 C26.7 13.7, 24.6 14.8, 20.5 18.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pen-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9.6 3.2 C11.8 2.5, 16.5 3.9, 18.7 4.7 C20.8 5.5, 21.8 6.1, 22.6 8 C23.4 9.9, 23.5 13.8, 23.3 16.1 C23.1 18.3, 23 20, 21.5 21.5 C20 23, 16.6 24.8, 14.4 25 C12.1 25.1, 9.8 24, 8.1 22.4 C6.4 20.7, 4.5 17.3, 4.1 15.1 C3.7 12.9, 4.6 11.4, 5.9 9.3 C7.2 7.3, 10.9 3.8, 12 2.9 C13 1.9, 12.1 3.2, 12.2 3.4 M16.2 3.7 C18.4 3.9, 21.1 4.2, 22.7 5.5 C24.2 6.8, 25.6 9.2, 25.6 11.6 C25.5 14.1, 24 18.1, 22.3 20 C20.7 21.8, 17.8 21.6, 15.6 22.5 C13.4 23.4, 10.5 26, 9 25.2 C7.5 24.5, 7.5 20.5, 6.5 18.1 C5.6 15.7, 3.2 13.1, 3.3 10.8 C3.5 8.5, 5.1 5.5, 7.2 4.5 C9.4 3.5, 15.1 4.8, 16.1 4.7 C17.2 4.6, 13.9 4, 13.4 4' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pen-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M1 4.4 C7.1 4.2, 23.8 5, 37 5.4 C50.2 5.9, 66.6 7.4, 80.1 7.1 C93.6 6.7, 111.8 3.5, 117.9 3.2 M3.6 7.1 C10.3 6.5, 27.6 3, 40.1 3.3 C52.7 3.6, 66.1 8.8, 79.1 8.9 C92.1 9, 111.5 4.5, 118.2 4.1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pen-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6.3 3 C6.7 2.8, 7.4 3.1, 7.7 3.6 C7.9 4.1, 7.8 5.4, 7.9 6 C7.9 6.5, 8.2 6.6, 8 6.9 C7.7 7.3, 6.9 8.1, 6.5 8.2 C6.1 8.3, 6.2 7.8, 5.7 7.6 C5.2 7.5, 3.8 7.5, 3.5 7.1 C3.2 6.7, 3.9 5.7, 4 5.1 C4.2 4.5, 4.1 4.1, 4.5 3.7 C4.9 3.4, 6.2 3, 6.6 3 C6.9 3, 6.3 3.8, 6.4 3.8 M5.9 3.4 C6.3 3.2, 7 3.4, 7.3 3.7 C7.6 4, 7.8 4.6, 7.8 5.1 C7.8 5.5, 7.6 5.9, 7.3 6.4 C7 6.9, 6.8 7.8, 6.2 8 C5.7 8.2, 4.2 7.7, 4 7.6 C3.8 7.4, 4.8 7.3, 4.9 6.9 C5 6.6, 4.5 5.9, 4.7 5.2 C4.8 4.6, 5.4 3.2, 5.7 3.1 C6.1 3, 6.5 4.4, 6.7 4.6 C6.9 4.8, 7 4.5, 7.1 4.3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- handwriting ---------- */
.k-hand { font-family: var(--hand); font-weight: 700; font-size: 1.38em; line-height: 1.05; letter-spacing: .005em; color: var(--pen-ink); }

/* ---------- the hand-drawn layer (KIT.ink draws into these) ---------- */
.ink-host { position: relative; isolation: isolate; }
.ink-inline { display: inline-block; }
svg.ink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; overflow: visible; z-index: 2; }
svg.ink.ink-under { z-index: -1; }
svg.ink-overlay { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; overflow: visible; z-index: 5; }
svg.ink path, svg.ink-overlay path, .rk path { stroke-linecap: round; stroke-linejoin: round; }

/* ---------- small motion classes (KIT.shake, KIT.pop) ---------- */
@keyframes k-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes k-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes k-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes k-typing { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes k-show { to { opacity: 1; } }
.k-in { animation: k-in .45s var(--ease) both; }
.k-pop { animation: k-pop .35s var(--ease-spring); }
.k-shake { animation: k-shake .4s ease; }

/* ---------- icons from KIT.icon and the build ---------- */
.k-ico { flex: none; display: inline-block; vertical-align: -0.18em; }

/* ---------- tooltip ([data-tip]; the kit adds it to the page) ---------- */
.k-tip { position: absolute; z-index: 60; max-width: 260px; padding: 8px 11px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); font-family: var(--font); font-size: 13px; line-height: 1.4; box-shadow: var(--shadow-lg); pointer-events: none; animation: k-in .2s var(--ease); }

/* ---------- frames: a window, a browser, a phone, a terminal. Clean and flat, drawn in the site's own style ---------- */
.k-window, .k-browser { background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; }
.k-window-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; background: var(--s100); border-bottom: 1px solid var(--line); }
.k-lights { display: flex; gap: 6px; flex: none; }
.k-lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--s300); display: block; }
.k-window-title { flex: 1; min-width: 0; margin-right: 39px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-window-body, .k-browser-body { position: relative; }
.k-browser-bar { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--s100); border-bottom: 1px solid var(--line); }
.k-browser-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--s700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-phone { position: relative; width: 100%; max-width: 286px; margin: 0 auto; padding: 9px; border-radius: 40px; background: var(--code-bg); box-shadow: var(--shadow-xl), 0 0 0 1px var(--line-2); }
.k-phone-screen { position: relative; border-radius: 31px; overflow: hidden; background: var(--paper); min-height: 420px; display: flex; flex-direction: column; }
.k-phone-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 4px; font-size: 12px; font-weight: 650; color: var(--ink); }
.k-phone-status::after { content: ""; width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid var(--s500); background: linear-gradient(var(--s500), var(--s500)) left / 70% 100% no-repeat; }
.k-term { background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-line); border-radius: var(--r); padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; box-shadow: var(--shadow-md); overflow-x: auto; text-align: left; }
.k-term .k-term-prompt { color: var(--hi); }
.k-term .k-term-dim { opacity: .62; }

/* ---------- chat bubbles (a plain agent session; the product screens below build on the same look) ---------- */
.k-chat { display: flex; flex-direction: column; gap: 10px; }
.k-msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; }
.k-msg.is-you { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 5px; }
.k-msg.is-agent { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.k-msg.is-tool { align-self: stretch; max-width: none; background: var(--s50); border: 1px dashed var(--line-2); font-family: var(--mono); font-size: 12.5px; color: var(--s700); border-radius: var(--r-sm); }
.k-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.k-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--s400); animation: k-typing 1s infinite ease-in-out; display: block; }
.k-typing i:nth-child(2) { animation-delay: .15s; }
.k-typing i:nth-child(3) { animation-delay: .3s; }

/* ---------- mock product screens (:::screen, and the same markup written by hand in a widget) ----------
   .mk is the stage: it sets the type and names the container the screens ask about their own width. */
.mk { container: mk / inline-size; font-family: var(--font); font-size: 14.5px; line-height: 1.45; color: var(--ink); text-align: left; -webkit-font-smoothing: antialiased; }
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk code { font-family: var(--mono); font-size: .88em; background: var(--s100); color: inherit; padding: .08em .34em; border-radius: 5px; }
.mk a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mk-narrow { max-width: 460px; margin-left: auto; margin-right: auto; }

/* the conversation */
.mk-thread { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px; background: var(--surface); min-width: 0; }
.mk-row { display: flex; align-items: flex-end; gap: 9px; max-width: 86%; min-width: 0; }
.mk-row.is-you { align-self: flex-end; flex-direction: row-reverse; max-width: 78%; }
.mk-av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.mk-av::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); }
.mk-bubble { position: relative; min-width: 0; padding: 10px 14px 11px; border-radius: 16px; overflow-wrap: anywhere; }
.mk-row.is-agent .mk-bubble { background: var(--paper); border: 1px solid var(--line-2); border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); }
.mk-row.is-you .mk-bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 5px; }
.mk-row.is-you .mk-bubble code { background: color-mix(in srgb, var(--on-accent) 18%, transparent); }
.mk-tool { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-left: 35px; padding: 5px 11px 5px 9px; border-radius: var(--r-pill); border: 1px dashed var(--line-2); background: var(--s50); font-family: var(--mono); font-size: 12px; color: var(--s700); max-width: calc(100% - 35px); }
.mk-tool .k-ico { color: var(--muted); }
.mk-status { position: relative; align-self: center; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding: 2px 10px; }
.mk-approval { position: relative; align-self: flex-start; width: min(100%, 340px); margin-left: 35px; padding: 13px 14px 14px; border-radius: 14px; background: var(--paper); border: 1.5px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-wash), var(--shadow-sm); }
.mk-approval-k { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); }
.mk-approval-t { font-weight: 650; font-size: 15px; line-height: 1.3; }
.mk-approval-d { margin-top: 3px; font-size: 13.5px; color: var(--s700); }
.mk-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.mk-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 5px 14px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); font-size: 13.5px; font-weight: 650; line-height: 1.1; white-space: nowrap; }
.mk-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mk-card { position: relative; align-self: flex-start; width: min(100%, 340px); margin-left: 35px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.mk-card-t { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14.5px; }
.mk-card-t .k-ico { color: var(--accent-text); }
.mk-card-d { margin-top: 3px; font-size: 13.5px; color: var(--s700); }
.mk-composer { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 9px 9px 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--paper); font-size: 14px; color: var(--faint); }
.mk-thread + .mk-composer { margin-top: -4px; }
.mk-composer > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-send { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.mk-main { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.mk-main > .mk-thread { flex: 1; }

/* the assistant app: a sidebar, the conversation, a side panel */
.mk-app-body, .mk-team-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.mk-app-body.has-panel { grid-template-columns: 158px minmax(0, 1fr) 190px; }
.mk-side { padding: 12px 8px 14px; background: var(--s50); border-right: 1px solid var(--line); min-width: 0; }
.mk-side-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; font-size: 13.5px; color: var(--s800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-side-item .k-ico { color: var(--muted); }
.mk-side-item.is-on { background: var(--accent-wash); color: var(--accent-text); font-weight: 650; }
.mk-side-item.is-on .k-ico { color: inherit; }
.mk-side-group { padding: 12px 9px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.mk-side-group:first-child { padding-top: 2px; }
.mk-panel { padding: 14px 13px 16px; background: var(--paper); border-left: 1px solid var(--line); min-width: 0; }
.mk-panel-title { margin-bottom: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.mk-panel-row { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.mk-panel-row:first-of-type { border-top: 0; }
.mk-panel-row > span:first-child { min-width: 0; }
.mk-val { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mk-val.is-ok { color: var(--ok); }
.mk-val.is-wait { color: var(--warn); }
@container mk (max-width: 600px) {
  .mk-app-body.has-panel { grid-template-columns: 150px minmax(0, 1fr); }
  .mk-app-body.has-panel > .mk-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@container mk (max-width: 460px) {
  .mk-app-body, .mk-app-body.has-panel, .mk-team-body { grid-template-columns: minmax(0, 1fr); }
  .mk-side { display: flex; gap: 6px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); overflow: hidden; }
  .mk-side-item { flex: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); font-size: 12.5px; }
  .mk-side-item.is-on { border-color: transparent; }
  .mk-side-group { display: none; }
  .mk-thread { padding: 14px 12px 16px; }
  .mk-row { max-width: 94%; }
  .mk-row.is-you { max-width: 86%; }
  .mk-tool, .mk-approval, .mk-card { margin-left: 0; }
  .mk-tool { max-width: 100%; }
}

/* settings: a list with switches and values */
.mk-set { padding: 6px 18px 12px; background: var(--surface); }
.mk-set-title { padding: 12px 0 2px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.mk-set-group { padding: 14px 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.mk-set-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.mk-set-title + .mk-set-row, .mk-set-group + .mk-set-row { border-top: 0; }
.mk-set-text { min-width: 0; }
.mk-set-label { display: block; font-weight: 600; }
.mk-set-desc { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); }
.mk-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--s300); }
.mk-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-sm); }
.mk-switch.is-on { background: var(--accent); }
.mk-switch.is-on::after { left: 19px; }
.mk-pick { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--paper); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mk-pick .k-ico { color: var(--muted); }

/* a call on a phone */
.mk-call .k-phone-screen { background: var(--surface); }
.mk-call-who { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px 8px; text-align: center; }
.mk-av-lg { width: 72px; height: 72px; margin-bottom: 8px; box-shadow: 0 0 0 7px var(--accent-wash); }
.mk-av-lg::after { width: 22px; height: 22px; }
.mk-call-name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.mk-call-status { position: relative; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mk-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; margin: 6px 0 2px; }
.mk-wave i { display: block; width: 4px; border-radius: 2px; background: var(--accent); opacity: .85; }
.mk-captions { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 8px 16px 12px; }
.mk-cap { position: relative; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; background: var(--paper); border: 1px solid var(--line); }
.mk-cap.is-you { align-self: flex-end; max-width: 88%; background: var(--accent-wash); border-color: transparent; }
.mk-cap.is-agent { align-self: flex-start; max-width: 92%; }
.mk-cap-who { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mk-call-btns { display: flex; justify-content: center; gap: 12px; padding: 10px 12px 20px; }
.mk-call-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--s700); }
.mk-call-btn > i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--s100); color: var(--ink); font-style: normal; }
.mk-call-btn.is-end > i { background: var(--warn); color: var(--bg); }
.mk-call-btn.is-on > i { background: var(--ink); color: var(--bg); }

/* a team chat channel */
.mk-chan-head { display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px; background: var(--paper); }
.mk-chan-head span { font-weight: 500; font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.mk-msgs { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 18px; background: var(--paper); }
.mk-post { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.mk-face { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 14px; font-weight: 700; background: var(--s200); color: var(--s800); }
.mk-face.is-1 { background: var(--hi-soft); color: var(--hi-ink); }
.mk-face.is-2 { background: var(--ok-soft); color: var(--ok); }
.mk-face.is-3 { background: var(--warn-soft); color: var(--warn); }
.mk-face.is-agent { background: var(--accent); color: var(--on-accent); }
.mk-face.is-agent::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--on-accent); }
.mk-face.is-you { background: var(--ink); color: var(--bg); }
.mk-post-body { min-width: 0; flex: 1; }
.mk-post-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; font-size: 14px; }
.mk-post-meta b { font-weight: 700; }
.mk-badge { align-self: center; padding: 1px 5px; border-radius: 4px; background: var(--s100); border: 1px solid var(--line); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mk-time { font-size: 11.5px; color: var(--faint); }
.mk-post-text { margin-top: 1px; overflow-wrap: anywhere; }
.mk-mention { padding: 0 3px; border-radius: 4px; background: var(--accent-wash); color: var(--accent-text); font-weight: 600; }
.mk-replies { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12.5px; font-weight: 650; color: var(--accent-text); }
.mk-post .mk-approval, .mk-post .mk-card { margin: 8px 0 0; }
.mk-team .mk-composer { margin: 0 14px 14px; border-radius: 10px; }
.mk-msgs + .mk-composer { margin-top: -2px; }

/* notes and pins a writer hangs on a part of a mock screen */
.mk-pin, .shot-pin { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--font); font-size: 12.5px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2.5px var(--bg), 0 2px 6px rgba(0, 0, 0, .22); text-decoration: none; }
.mk-pin { position: absolute; z-index: 4; top: -11px; right: -9px; }
.mk .is-marked { position: relative; }
.mk-note { display: block; align-self: flex-end; margin: -2px 8px 4px 44px; font-family: var(--hand); font-weight: 700; font-size: 22px; line-height: 1.02; color: var(--pen-ink); transform: rotate(-2deg); text-align: right; }
.mk-note::before { content: "\2191\00a0"; font-family: var(--font); font-size: 15px; font-weight: 600; }
.mk-note.is-drawn::before { content: none; }
.mk-set .mk-note, .mk-panel .mk-note, .mk-side .mk-note { margin: 0 0 8px 30px; }
.mk-msgs .mk-note { margin: -6px 6px 0 44px; }
.mk-call .mk-note { margin: -10px 14px 14px; text-align: center; }

/* the numbered legend under a screenshot or a mock screen: what each pin is */
.shot-legend { list-style: none; margin: 13px 0 0; padding: 0; display: grid; gap: 4px; font-family: var(--font); text-align: left; }
.shot-legend li { display: flex; align-items: baseline; gap: 11px; margin: 0 -8px; padding: 3px 8px; border-radius: 9px; font-size: 15px; line-height: 1.45; color: var(--ink); transition: background .2s; }
.shot-legend li.is-lit { background: var(--accent-wash); }
.shot-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- napkin figures: a drawing in pen on the page's paper (:::napkin, KIT.napkin) ----------
   build.py writes plain shapes (data-rough) and the labels as svg text; the kit goes over the shapes by hand. */
.nk { container: nk / inline-size; }
.nk-svg { display: none; width: 100%; height: auto; max-width: none; overflow: visible; font-family: var(--font); }
.nk-svg.nk-narrow, .nk-svg.nk-one { display: block; }
@container nk (min-width: 540px) {
  .nk-svg.nk-wide { display: block; }
  .nk-svg.nk-narrow { display: none; }
}
.nk-svg [data-rough] { fill: var(--nk-fill, none); stroke: var(--nk-stroke, var(--pen)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nk-svg [data-rough="done"] { display: none; }
.rk .rk-stroke { fill: none; stroke: var(--nk-stroke, var(--pen)); }
.rk .rk-fill { stroke: none; fill: var(--nk-fill, none); }
.rk .rk-hatch { fill: none; stroke: var(--nk-fill, var(--pencil)); }
.nk-node { --nk-stroke: var(--pen); --nk-fill: none; }
.nk-node.is-hi { --nk-fill: var(--marker); }
.nk-node.is-fill { --nk-fill: var(--accent-wash); }
.nk-node.is-ink, .nk-edge.is-ink, .nk-frame.is-ink { --nk-stroke: var(--ink); }
.nk-node.is-muted, .nk-edge.is-muted, .nk-frame.is-muted { --nk-stroke: var(--pencil); }
.nk-node.is-muted .nk-lbl { fill: var(--muted); }
.nk-node.is-hatch { --nk-fill: var(--s300); }
.nk-edge { --nk-stroke: var(--pen); }
.nk-node, .nk-edge, .nk-frame { transition: opacity .25s; }
.nk-node.is-on { --nk-fill: var(--marker); }
.nk-node.is-on .rk-stroke, .nk-edge.is-on .rk-stroke { stroke-width: 3.2px; }
.nk .is-dim { opacity: .28; }
.nk-frame { --nk-stroke: var(--pencil); }
.nk-lbl { font-family: var(--font); font-weight: 650; font-size: 16px; fill: var(--ink); letter-spacing: -.005em; }
.nk-lbl.is-out { paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.nk-hand { font-family: var(--hand); font-weight: 700; font-size: 23px; fill: var(--pen-ink); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.nk-hand.is-muted { fill: var(--s700); }
.nk-ico { color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nk-node.is-muted .nk-ico { color: var(--muted); }
.nk-token { fill: var(--hi); stroke: var(--ink); stroke-width: 1.5; }
.nk [data-step] { transition: opacity .3s; }
.nk .is-off { opacity: 0; visibility: hidden; }
/* with script on, the pen draws the figure the first time it is in view. If the kit never starts, the plain drawing shows */
html.js .nk:not(.is-in) .nk-svg [data-rough], html.js .nk:not(.is-in) .rk { opacity: 0; }
html.js .nk:not(.is-live) .nk-svg [data-rough] { animation: k-show 1ms linear 2.5s forwards; }
.nk-steps { list-style: none; margin: 0; padding: 0; counter-reset: nk; }
.nk-steps > li { counter-increment: nk; margin: 0; }

/* ---------- the bar under a stepped figure or a walkthrough: back, next, play, dots ---------- */
.k-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-family: var(--font); }
.k-bar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; min-width: 40px; padding: 0 15px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 650 14.5px/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s, transform .12s var(--ease); }
.k-bar-btn:hover { border-color: var(--s500); }
.k-bar-btn:active { transform: scale(.97); }
.k-bar-btn[disabled] { opacity: .4; cursor: default; }
.k-bar-btn.is-go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.k-bar-btn.is-go:hover { background: var(--accent-2); border-color: var(--accent-2); }
.k-bar-btn.is-icon { padding: 0; }
.k-bar-dots { display: flex; align-items: center; gap: 2px; margin: 0 2px; }
.k-bar-dot { display: grid; place-items: center; width: 22px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.k-bar-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s300); transition: background .2s, transform .2s var(--ease-spring); }
.k-bar-dot.is-done::before { background: var(--s500); }
.k-bar-dot[aria-current="step"]::before { background: var(--accent); transform: scale(1.35); }
.k-bar-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media print {
  .nk .nk-svg [data-rough], .nk .rk { opacity: 1 !important; }
  .nk .is-off { opacity: 1 !important; visibility: visible !important; }
  .k-bar, .k-tip { display: none !important; }
}