@font-face { font-family: "bft Mono"; src: url("fonts/bftMono-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "bft Mono"; src: url("fonts/bftMono-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "bft Mono"; src: url("fonts/bftMono-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }
/* bft: tokens, grid, type and components. No build step. */

@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-wght-italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --k-u: 8px;
  --k-margin: clamp(16px, 2vw, 32px);
  --k-gutter: clamp(8px, 1vw, 16px);

  --k-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --k-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --k-serif: "Instrument Serif", Georgia, serif;
  --k-octa: "bft Mono", var(--k-mono);

  /* Two voices with nothing much between them: withdrawn or enormous. */
  --k-t-note: 0.75rem;
  --k-t-body: 0.9375rem;
  --k-t-lead: 1.5rem;
  --k-t-head: clamp(2rem, 4.5vw, 4rem);
  --k-t-shout: clamp(3.25rem, 13vw, 13rem);

  --k-hair: 1px;
  --k-cut: 10px; /* chamfer on .k-btn--cut */

  /* Softness. Every corner in the framework uses one of these. */
  --k-r-s: 4px;
  --k-r-m: 10px;
  --k-r-l: 20px;
  --k-r-full: 999px;
  --k-dur: 120ms;
  --k-ease: cubic-bezier(.2, .7, .2, 1);

  /* Button anatomy. The studio's button lab writes these. */
  --k-btn-h: 42px;
  --k-btn-px: 18px;
  --k-btn-r: var(--k-r-m);
  --k-btn-fs: var(--k-t-body);
  --k-btn-fw: 500;
  --k-btn-bw: var(--k-hair);
}

/* Signal: one per product. Used as a field, rarely as text. */
:root, [data-signal="amber"] { --k-signal: #ffb000; --k-on-signal: #000000; --k-signal-on-ink: #ffb000; --k-signal-on-paper: #7a4f00; --k-tone: #8f6300; }
[data-signal="vermilion"] { --k-signal: #ff2e00; --k-on-signal: #000000; --k-signal-on-ink: #ff5a33; --k-signal-on-paper: #b02000; --k-tone: #a81e00; }
[data-signal="acid"] { --k-signal: #c8ff00; --k-on-signal: #000000; --k-signal-on-ink: #c8ff00; --k-signal-on-paper: #4d6300; --k-tone: #92bb00; }
[data-signal="field"] { --k-signal: #27e000; --k-on-signal: #000000; --k-signal-on-ink: #27e000; --k-signal-on-paper: #126600; --k-tone: #7cf060; }
[data-signal="ultra"] { --k-signal: #0a2bff; --k-on-signal: #ffffff; --k-signal-on-ink: #8c9cff; --k-signal-on-paper: #0a2bff; --k-tone: #5a70ff; }

/* Theme: which ground the page sits on. */
:root, [data-theme="ink"] {
  --k-bg: #000000; --k-fg: #ffffff; --k-quiet: #a3a3a3; --k-rule: #4d4d4d;
  --k-signal-text: var(--k-signal-on-ink);
  color-scheme: dark;
}
[data-theme="paper"] {
  --k-bg: #e3e4e2; --k-fg: #000000; --k-quiet: #4f4f4f; --k-rule: #8c8c8a;
  --k-signal-text: var(--k-signal-on-paper);
  color-scheme: light;
}
[data-theme="stone"] {
  --k-bg: #ded6d3; --k-fg: #000000; --k-quiet: #514a47; --k-rule: #8f8784;
  --k-signal-text: var(--k-signal-on-paper);
  color-scheme: light;
}
[data-theme="signal"] {
  --k-bg: var(--k-signal); --k-fg: var(--k-on-signal); --k-quiet: var(--k-on-signal); --k-rule: var(--k-on-signal);
  --k-signal-text: var(--k-on-signal);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[data-theme] { background: var(--k-bg); color: var(--k-fg); }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--k-bg); color: var(--k-fg);
  font: 400 var(--k-t-body)/1.3 var(--k-sans);
  letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: 0.15em; text-decoration-thickness: var(--k-hair); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--k-signal); color: var(--k-on-signal); }
:focus-visible { outline: 2px solid var(--k-fg); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { display: block; }
k-display { display: block; }
k-display svg { width: 100%; height: auto; overflow: visible; }
k-display .k-construction { stroke: var(--k-signal-text); stroke-width: var(--k-hair); }
k-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
k-icon svg { width: 100%; height: 100%; }
k-pattern, k-strip { display: block; }
k-pattern svg { width: 100%; height: auto; }
k-strip svg { width: 100%; height: 14px; }

/* ---------- Layout ---------- */
.k-sheet { padding: var(--k-margin); }
.k-sheet--full { min-height: min(100svh, 1100px); display: flex; flex-direction: column; gap: calc(var(--k-u) * 3); }
.k-sheet--full > .k-push { margin-top: auto; }

/* Children take --c columns (and --s to start at a column). Below 720px they take --m of 12. */
.k-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--k-gutter); row-gap: calc(var(--k-u) * 2); }
.k-grid > * { grid-column: var(--s, auto) / span var(--c, 12); min-width: 0; }
@media (max-width: 720px) { .k-grid > * { grid-column: auto / span var(--m, 12); } }

/* Show the column as a rule, as on a specimen sheet. */
.k-ruled { border-inline-start: var(--k-hair) solid var(--k-rule); padding-inline-start: 6px; }
.k-rule { border: 0; border-top: var(--k-hair) solid var(--k-rule); margin: 0; }
.k-stack { display: flex; flex-direction: column; gap: var(--gap, calc(var(--k-u) * 2)); }
.k-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--k-u)); }
.k-apart { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--k-u) * 2); }

/* ---------- Type ---------- */
.k-note { font-size: var(--k-t-note); line-height: 1.25; letter-spacing: 0; max-width: 34ch; }
.k-grid.k-note, .k-line.k-note, ul.k-note { max-width: none; }
.k-note p + p { text-indent: 4ch; }
.k-quiet { color: var(--k-quiet); }
.k-body { max-width: 62ch; }
.k-lead { font-size: var(--k-t-lead); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; max-width: 26ch; }
.k-head { font-size: var(--k-t-head); line-height: 0.98; letter-spacing: -0.035em; font-weight: 600; }
.k-shout { font-size: var(--k-t-shout); line-height: 0.88; letter-spacing: -0.05em; font-weight: 800; }
.k-serif { font-family: var(--k-serif); font-weight: 400; letter-spacing: -0.02em; }
.k-data { font-family: var(--k-mono); font-size: var(--k-t-note); line-height: 1.35; letter-spacing: -0.01em; font-feature-settings: normal; }
.k-octa { font-family: var(--k-octa); letter-spacing: 0; }
.k-num { font-variant-numeric: tabular-nums; }
.k-tone { color: var(--k-tone); }
[data-theme="signal"] .k-tone { color: var(--k-tone); }
.k-signal-text { color: var(--k-signal-text); }
.k-vertical { writing-mode: vertical-rl; }

/* ---------- Actions ---------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-u);
  min-height: var(--k-btn-h); padding: 0 var(--k-btn-px);
  background: transparent; color: var(--k-fg);
  border: var(--k-btn-bw) solid var(--k-fg); border-radius: var(--k-btn-r);
  font-size: var(--k-btn-fs); font-weight: var(--k-btn-fw); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease), transform var(--k-dur) var(--k-ease);
}
.k-btn:active { transform: scale(.98); }
.k-btn:hover { background: var(--k-fg); color: var(--k-bg); }
.k-btn--solid { background: var(--k-fg); color: var(--k-bg); }
.k-btn--solid:hover { background: transparent; color: var(--k-fg); }
.k-btn--signal { background: var(--k-signal); color: var(--k-on-signal); border-color: var(--k-signal); }
.k-btn--signal:hover { background: var(--k-fg); color: var(--k-bg); border-color: var(--k-fg); }
.k-btn--bare { border-color: transparent; padding-inline: var(--k-u); }
.k-btn--icon { width: var(--k-btn-h); padding: 0; }
.k-btn--cut {
  border: 0; border-radius: 0; background: var(--k-fg); color: var(--k-bg);
  clip-path: polygon(var(--k-cut) 0, calc(100% - var(--k-cut)) 0, 100% var(--k-cut), 100% calc(100% - var(--k-cut)), calc(100% - var(--k-cut)) 100%, var(--k-cut) 100%, 0 calc(100% - var(--k-cut)), 0 var(--k-cut));
}
.k-btn--cut:hover { background: var(--k-signal); color: var(--k-on-signal); }
.k-btn--cut:focus-visible { outline: 2px solid var(--k-bg); outline-offset: -5px; }
.k-btn:disabled { border-style: dashed; background: transparent; color: var(--k-quiet); border-color: var(--k-quiet); cursor: not-allowed; }

.k-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: var(--k-hair) solid var(--k-fg); }
.k-tab { appearance: none; background: none; border: 0; border-radius: var(--k-r-s) var(--k-r-s) 0 0; padding: 6px 10px; min-height: 32px; cursor: pointer; font-size: var(--k-t-note); }
.k-tab:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.k-tab[aria-selected="true"], .k-tab[aria-current="true"] { background: var(--k-fg); color: var(--k-bg); }

/* ---------- Forms ---------- */
.k-field { display: flex; flex-direction: column; gap: 2px; font-size: var(--k-t-note); }
.k-input, .k-select, .k-textarea {
  appearance: none; width: 100%; min-height: 40px; padding: 6px 12px; background: transparent;
  border: var(--k-hair) solid var(--k-rule); border-radius: var(--k-r-s); font-size: var(--k-t-body);
}
.k-input:hover, .k-select:hover, .k-textarea:hover { border-color: var(--k-fg); }
.k-input::placeholder, .k-textarea::placeholder { color: var(--k-quiet); opacity: 1; }
.k-input:focus-visible, .k-select:focus-visible, .k-textarea:focus-visible { outline: 2px solid var(--k-fg); outline-offset: -1px; border-color: transparent; }
.k-field [aria-invalid="true"] { border-color: var(--k-signal-text); outline: 1px solid var(--k-signal-text); outline-offset: -2px; }
.k-field .k-error { color: var(--k-signal-text); }
.k-select { padding-right: 28px; background: linear-gradient(var(--k-fg), var(--k-fg)) right 12px center / 8px 2px no-repeat; }
.k-check { display: inline-flex; gap: var(--k-u); align-items: center; cursor: pointer; }
.k-check input { appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: var(--k-hair) solid var(--k-fg); border-radius: var(--k-r-s); cursor: pointer; }
.k-check input:checked { background: var(--k-fg); box-shadow: inset 0 0 0 3px var(--k-bg); }
.k-range { appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: ew-resize; }
.k-range::-webkit-slider-runnable-track { height: 2px; border-radius: var(--k-r-full); background: var(--k-rule); }
.k-range::-moz-range-track { height: 2px; border-radius: var(--k-r-full); background: var(--k-rule); }
.k-range::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -7px; background: var(--k-fg); border: 0; border-radius: var(--k-r-full); }
.k-range::-moz-range-thumb { width: 16px; height: 16px; background: var(--k-fg); border: 0; border-radius: var(--k-r-full); }

/* ---------- Data ---------- */
.k-tag { display: inline-block; padding: 1px 8px; border-radius: var(--k-r-full); border: var(--k-hair) solid currentColor; font-size: var(--k-t-note); line-height: 1.3; white-space: nowrap; }
.k-tag--on { background: var(--k-signal); color: var(--k-on-signal); border-color: var(--k-signal); }

.k-table { width: 100%; border-collapse: collapse; font-size: var(--k-t-note); font-variant-numeric: tabular-nums; }
.k-table th { text-align: left; font-weight: 400; color: var(--k-quiet); padding: 4px 8px; border-bottom: var(--k-hair) solid var(--k-fg); }
.k-table td { padding: 8px 8px 8px 8px; border-bottom: var(--k-hair) solid var(--k-rule); vertical-align: baseline; }
.k-table .k-end { text-align: right; }
.k-table tbody tr[tabindex] td:first-child { border-radius: var(--k-r-s) 0 0 var(--k-r-s); }
.k-table tbody tr[tabindex] td:last-child { border-radius: 0 var(--k-r-s) var(--k-r-s) 0; }
.k-table tbody tr[tabindex] { cursor: pointer; }
.k-table tbody tr[tabindex]:hover, .k-table tbody tr[aria-selected="true"] { background: var(--k-fg); color: var(--k-bg); }
.k-table tbody tr[tabindex]:focus-visible { outline-offset: -2px; }

.k-scroll { overflow-x: auto; }
.k-scroll > .k-table { min-width: 560px; }
.k-meter { height: var(--k-u); border: var(--k-hair) solid var(--k-fg); border-radius: var(--k-r-full); overflow: hidden; }
.k-meter > i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: var(--k-fg); }

.k-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 var(--k-gutter); font-size: var(--k-t-note); }
.k-dl > dt, .k-dl > dd { padding: 4px 0; border-top: var(--k-hair) solid var(--k-rule); }
.k-dl > dt { color: var(--k-quiet); }

/* ---------- More controls ---------- */
.k-switch { display: inline-flex; align-items: center; gap: var(--k-u); cursor: pointer; }
.k-switch input { appearance: none; margin: 0; width: 36px; height: 20px; flex: none; border: var(--k-hair) solid var(--k-fg); border-radius: var(--k-r-full); position: relative; cursor: pointer; transition: background-color var(--k-dur) var(--k-ease); }
.k-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: var(--k-r-full); background: var(--k-fg); transition: transform var(--k-dur) var(--k-ease); }
.k-switch input:checked { background: var(--k-fg); }
.k-switch input:checked::after { background: var(--k-bg); transform: translateX(16px); }

.k-seg { display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px; border: var(--k-hair) solid var(--k-rule); border-radius: var(--k-r-m); }
.k-seg button, .k-seg label { appearance: none; background: none; border: 0; padding: 5px 12px; border-radius: var(--k-r-s); font-size: var(--k-t-note); cursor: pointer; }
.k-seg input { position: absolute; opacity: 0; pointer-events: none; }
.k-seg button[aria-pressed="true"], .k-seg label:has(input:checked) { background: var(--k-fg); color: var(--k-bg); }
.k-seg label:has(input:focus-visible) { outline: 2px solid var(--k-fg); outline-offset: 2px; }

.k-card { padding: calc(var(--k-u) * 2); border: var(--k-hair) solid var(--k-rule); border-radius: var(--k-r-l); }
.k-card--fill { border-color: transparent; background: var(--k-signal); color: var(--k-on-signal); }
.k-stat { display: flex; flex-direction: column; gap: 4px; }
.k-stat > b { font-size: var(--k-t-head); font-weight: 600; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }

.k-menu { position: relative; display: inline-block; }
.k-menu > summary { list-style: none; cursor: pointer; }
.k-menu > summary::-webkit-details-marker { display: none; }
.k-menu > ul { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; min-width: 180px; padding: 4px; background: var(--k-bg); border: var(--k-hair) solid var(--k-fg); border-radius: var(--k-r-m); }
.k-menu > ul a, .k-menu > ul button { display: block; width: 100%; padding: 6px 10px; background: none; border: 0; border-radius: var(--k-r-s); text-align: left; text-decoration: none; font-size: var(--k-t-note); cursor: pointer; }
.k-menu > ul a:hover, .k-menu > ul button:hover { background: var(--k-fg); color: var(--k-bg); }

[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 10; padding: 3px 8px; border-radius: var(--k-r-s); background: var(--k-fg); color: var(--k-bg); font-size: var(--k-t-note); font-weight: 400; white-space: nowrap; pointer-events: none; }

/* ---------- Surfaces ---------- */
.k-dialog {
  width: min(560px, calc(100vw - 32px)); padding: calc(var(--k-u) * 2);
  background: var(--k-bg); color: var(--k-fg); border: var(--k-hair) solid var(--k-fg); border-radius: var(--k-r-l);
}
.k-dialog::backdrop { background: var(--k-signal); opacity: 0.92; }
.k-toast {
  position: fixed; right: var(--k-margin); bottom: var(--k-margin); z-index: 20;
  padding: 8px 14px; border-radius: var(--k-r-full); background: var(--k-fg); color: var(--k-bg); font-size: var(--k-t-note);
}
.k-bleed { display: block; border-radius: var(--k-r-l); width: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }

/* App frame: a rail, a work area and an optional inspector. */
.k-app { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(280px, 26vw); height: 100dvh; }
.k-app > * { min-width: 0; overflow: auto; padding: var(--k-margin); }
.k-app > * + * { border-inline-start: var(--k-hair) solid var(--k-rule); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 960px) {
  .k-app { display: block; height: auto; }
  .k-app > * { overflow: visible; }
  .k-app > * + * { border-inline-start: 0; border-top: var(--k-hair) solid var(--k-rule); }
}

.k-overlay {
  position: fixed; inset: 0 var(--k-margin); z-index: 99; pointer-events: none;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--k-gutter);
}
.k-overlay > div { background: var(--k-signal); opacity: 0.22; }
@media print { .k-overlay { display: none; } }

/* Theme for bft. Generated by the studio from system.json. */
:root, [data-signal] { --k-signal: #dd7a2b; --k-on-signal: #000000; --k-signal-on-ink: #dd7a2b; --k-signal-on-paper: #dd7a2b; --k-tone: #904f1c; }
:root { --k-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --k-mono: "DM Mono", ui-monospace, Menlo, monospace; --k-serif: "Instrument Serif", Georgia, serif; --k-t-note: 0.75rem; --k-t-body: 0.9375rem; --k-r-s: 3px; --k-r-m: 6px; --k-r-l: 10px; --k-dur: 120ms; --k-btn-h: 42px; --k-btn-px: 18px; --k-btn-r: 6px; --k-btn-fs: 15px; --k-btn-fw: 400; --k-btn-bw: 1px; }
:root, [data-theme="ink"] { --k-bg: #222524; --k-fg: #e0d8c8; --k-quiet: #b5ae9f; --k-rule: #5c5a53; --k-signal-text: #dd7a2b; }
[data-theme="paper"], [data-theme="stone"] { --k-bg: #222524; --k-fg: #e0d8c8; --k-quiet: #b5ae9f; --k-rule: #5c5a53; --k-signal-text: #dd7a2b; }
.k-btn--primary { --k-btn-h: 42px; --k-btn-px: 18px; --k-btn-r: 6px; --k-btn-fs: 15px; --k-btn-fw: 400; --k-btn-bw: 1px; background: var(--k-fg); color: var(--k-bg); border-color: var(--k-fg); }
.k-btn--primary:hover { background: transparent; color: var(--k-fg); border-color: var(--k-fg); }
.k-btn--quiet { --k-btn-h: 42px; --k-btn-px: 18px; --k-btn-r: 6px; --k-btn-fs: 15px; --k-btn-fw: 400; --k-btn-bw: 1px; background: transparent; color: var(--k-fg); border-color: var(--k-fg); }
.k-btn--quiet:hover { background: var(--k-fg); color: var(--k-bg); border-color: var(--k-fg); }
.k-btn--action { --k-btn-h: 42px; --k-btn-px: 18px; --k-btn-r: 6px; --k-btn-fs: 15px; --k-btn-fw: 400; --k-btn-bw: 1px; background: var(--k-signal); color: var(--k-on-signal); border-color: var(--k-signal); }
.k-btn--action:hover { background: var(--k-fg); color: var(--k-bg); border-color: var(--k-fg); }

/* Instrument: fine type and thin lines. */
:root { --k-tone: var(--k-fg); }
.k-sheet + .k-sheet, section + section { border-top: var(--k-hair) solid var(--k-rule); }
.k-shout, .k-head { font-weight: 300; letter-spacing: 0.1em; line-height: 1.12; text-transform: uppercase; font-size: clamp(1.75rem, 5vw, 4.5rem); }
.k-serif { font-family: var(--k-sans); font-weight: 300; }
.k-lead { font-weight: 300; letter-spacing: 0.01em; line-height: 1.25; }
.k-tone, [data-theme="signal"] .k-tone { color: var(--k-fg); }
.k-stat > b { font-weight: 300; letter-spacing: 0.04em; }
.k-note { font-family: var(--k-mono); letter-spacing: 0.02em; line-height: 1.45; }
.k-field, .k-table th, .k-tab, .k-tag, .k-seg button, .k-btn { font-family: var(--k-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.k-input, .k-select, .k-textarea { font-family: var(--k-sans); letter-spacing: 0.02em; text-transform: none; }
.k-table { font-family: var(--k-mono); }
.k-scroll > .k-table { min-width: 0; }
.k-card { border-color: var(--k-fg); }
.k-card--fill { background: transparent; color: var(--k-fg); border-color: var(--k-fg); }
.k-meter { height: 6px; }
.k-meter > i, .k-tag--on { background: var(--k-signal); color: var(--k-on-signal); }
.k-tag--on { border-color: var(--k-signal); }
.k-check input { border-radius: var(--k-r-full); }
.k-check input:checked { box-shadow: inset 0 0 0 4px var(--k-bg); }
k-strip { color: var(--k-rule); }