/* calc-kit: keypad calculators. Two themes as CSS variable sets: cream-gold, black-gold.
   A site can override any --ck-* token. Fonts: set --ck-font-num to a Libre Caslon Text Bold stack (Lustre does). */

.ck {
  --ck-font-num: var(--head, 'Libre Caslon Text', 'Lustre Caslon', 'Iowan Old Style', Georgia, serif);
  --ck-font-ui: var(--ui, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --ck-font-key: var(--ck-ui-key, 'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif);
  --ck-live: #2fbf71;
  --ck-accent-text: #1c160a;
  --ck-gold-grad: linear-gradient(180deg, #d3bb8a 0%, #bd9d63 100%);
  --ck-gold-edge: #9c7f4a;
  --ck-gold-ink: #1c160a;
  --ck-key-radius: 13px;
  --ck-win-bg: linear-gradient(180deg, #fbf6e8, #f3ebd6);
  --ck-win-ink: #0e0e0e;
  --ck-win-label: #6d665a;
  --ck-radius: 22px;
  container-type: inline-size;
  color: var(--ck-text);
  font-family: var(--ck-font-ui);
  -webkit-tap-highlight-color: transparent;
  max-width: 1040px;
  margin-inline: auto;
}
.ck-grid { display: grid; gap: 14px; }

/* ---------------------------------------------------------------- themes */
.ck, .ck[data-ck-theme='cream-gold'], html[data-ck-user-theme='cream-gold'] .ck[data-ck-follow] {
  --ck-text: #111;
  --ck-muted: #6d665a;
  --ck-surface: linear-gradient(180deg, #fcf9f1, #f4ecda);
  --ck-surface-border: rgba(184, 155, 94, 0.38);
  --ck-surface-shadow: 0 1px 0 #fff inset, 0 18px 40px -22px rgba(110, 86, 40, 0.45), 0 2px 6px rgba(110, 86, 40, 0.1);
  --ck-well: linear-gradient(180deg, #ece3cf, #f3ecdb);
  --ck-well-shadow: 0 2px 5px rgba(120, 95, 50, 0.22) inset, 0 1px 0 #fff;
  --ck-key: linear-gradient(180deg, #ffffff, #fbf9f4);
  --ck-key-fn: linear-gradient(180deg, #f3efe5, #ece7da);
  --ck-key-ink: #111;
  --ck-key-edge: rgba(120, 100, 60, 0.2);
  --ck-key-shadow: 0 1px 0 #fff inset, 0 2px 0 rgba(120, 100, 60, 0.18), 0 4px 7px -2px rgba(80, 60, 20, 0.2);
  --ck-key-shadow-down: 0 1px 3px rgba(80, 60, 20, 0.22) inset, 0 0 0 rgba(0,0,0,0);
  --ck-chip-on-ink: #1d170a;
  --ck-page: transparent;
  --ck-hero-ink: #0c0c0c;
  --ck-hero-bg: linear-gradient(#0c0c0c, #0c0c0c);
  --ck-line: rgba(184, 155, 94, 0.55);
  --ck-action-bg: #fffdf8;
  --ck-action-ink: #111;
  --ck-action-edge: rgba(184, 155, 94, 0.6);
  --ck-track: #efe4cb;
  --ck-sticky-bg: rgba(251, 248, 241, 0.96);
}
.ck[data-ck-theme='black-gold'], html[data-ck-user-theme='black-gold'] .ck[data-ck-follow] {
  --ck-text: #f2f0ea;
  --ck-muted: #b2a88f;
  --ck-surface: linear-gradient(180deg, #1c1c1e, #151516);
  --ck-surface-border: rgba(216, 188, 122, 0.3);
  --ck-surface-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 22px 44px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.6);
  --ck-well: #0f0f10;
  --ck-well-shadow: 0 3px 7px rgba(0, 0, 0, 0.7) inset, 0 1px 0 rgba(255, 255, 255, 0.05);
  --ck-key: linear-gradient(180deg, #3a3a3d, #333336);
  --ck-key-fn: linear-gradient(180deg, #4b4b4f, #444448);
  --ck-key-ink: #fff;
  --ck-key-edge: rgba(0, 0, 0, 0.55);
  --ck-key-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 2px 0 #090909, 0 4px 8px -2px rgba(0, 0, 0, 0.6);
  --ck-key-shadow-down: 0 2px 5px rgba(0, 0, 0, 0.6) inset;
  --ck-chip-on-ink: #1d170a;
  --ck-hero-ink: #f6f1e6;
  --ck-hero-bg: linear-gradient(#f6f1e6, #f6f1e6); /* cream, never gold text */
  --ck-line: rgba(216, 188, 122, 0.45);
  --ck-action-bg: transparent;
  --ck-action-ink: #f4ead1;
  --ck-action-edge: rgba(216, 188, 122, 0.5);
  --ck-track: #26231c;
  --ck-sticky-bg: rgba(18, 17, 14, 0.96);
  --ck-win-bg: linear-gradient(180deg, #faf3e0, #efe4c8);
}
@media (prefers-color-scheme: no-preference) { .ck { color-scheme: normal; } }

/* ---------------------------------------------------------------- header */
.ck-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-title { font-family: var(--ck-font-num); font-weight: 700; font-size: clamp(30px, 8vw, 44px); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
.ck-theme {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--ck-text); border: 1px solid var(--ck-surface-border); font: 600 12px/1 var(--ck-font-ui); letter-spacing: 0.04em;
}
.ck-theme svg { width: 18px; height: 18px; color: var(--ck-gold-edge); }
.ck-theme:focus-visible, .ck-key:focus-visible, .ck-chip:focus-visible, .ck-field:focus-visible, .ck-action:focus-visible, .ck-how summary:focus-visible, .ck-sticky__btn:focus-visible, .ck-fallback input:focus-visible, .ck-fallback select:focus-visible {
  outline: 3px solid var(--ck-gold-edge); outline-offset: 2px;
}

.ck-badge {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 18px; min-height: 52px; border-radius: 18px;
  background: var(--ck-surface); border: 1px solid var(--ck-surface-border); box-shadow: var(--ck-surface-shadow);
}
.ck-badge__live { display: inline-flex; align-items: center; gap: 8px; font: 600 16px var(--ck-font-ui); }
.ck-badge__live i { width: 11px; height: 11px; border-radius: 50%; background: var(--ck-live); box-shadow: 0 0 0 3px rgba(47, 191, 113, 0.2); }
.ck-badge__live[data-live='0'] i { background: #c9a24f; box-shadow: 0 0 0 3px rgba(201, 162, 79, 0.2); }
.ck-badge__live[data-live='0'] { font-size: 13px; color: var(--ck-muted); font-weight: 500; }
.ck-badge__sep { width: 1px; align-self: stretch; background: var(--ck-line); opacity: 0.6; }
.ck-badge__spot { font-family: var(--ck-font-num); font-weight: 700; font-size: 22px; white-space: nowrap; }
.ck-badge__spot b { font-weight: 700; }
.ck-badge__spot i { font-style: italic; font-weight: 400; margin-left: 3px; font-size: 18px; color: var(--ck-muted); }

/* ---------------------------------------------------------------- device */
.ck-device {
  display: grid; gap: 12px; padding: 14px; border-radius: var(--ck-radius);
  background: var(--ck-surface); border: 1px solid var(--ck-surface-border); box-shadow: var(--ck-surface-shadow);
}
.ck-display {
  display: grid; gap: 2px; padding: 12px 20px 10px; border-radius: 14px; min-height: 108px; align-content: center;
  background: var(--ck-win-bg); color: var(--ck-win-ink);
  box-shadow: 0 3px 8px rgba(80, 60, 20, 0.28) inset, 0 -1px 0 rgba(255, 255, 255, 0.7) inset, 0 0 0 1px rgba(184, 155, 94, 0.55);
}
.ck-display__label { font: 600 11px/1 var(--ck-font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ck-win-label); }
.ck-display__row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ck-display__num, .ck-display__prefix {
  font-family: var(--ck-font-num); font-weight: 700; font-size: 72px; line-height: 1.02; letter-spacing: -0.02em; font-variant-numeric: lining-nums;
  min-width: 0; overflow-wrap: anywhere;
}
.ck-display[data-len='m'] .ck-display__num, .ck-display[data-len='m'] .ck-display__prefix { font-size: 62px; }
.ck-display[data-len='l'] .ck-display__num, .ck-display[data-len='l'] .ck-display__prefix { font-size: 50px; }
.ck-display[data-len='xl'] .ck-display__num, .ck-display[data-len='xl'] .ck-display__prefix { font-size: 40px; }
.ck-display__suffix { margin-left: auto; padding-left: 14px; border-left: 1px solid rgba(184, 155, 94, 0.55); font-family: var(--ck-font-num); font-weight: 700; font-size: 30px; align-self: center; white-space: nowrap; }
.ck-display__suffix:empty { display: none; }
.ck-display__prefix:empty { display: none; }

.ck-fields { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ck-fields::-webkit-scrollbar { display: none; }
.ck-field {
  flex: 1 0 auto; min-height: 52px; padding: 6px 14px; border-radius: 14px; cursor: pointer; text-align: left; display: grid; gap: 2px;
  background: var(--ck-well); box-shadow: var(--ck-well-shadow); color: var(--ck-text); border: 1px solid transparent; font-family: var(--ck-font-ui);
}
.ck-field__label { font-size: 11px; letter-spacing: 0.06em; color: var(--ck-muted); white-space: nowrap; }
.ck-field__val { font-family: var(--ck-font-num); font-size: 18px; font-weight: 700; }
.ck-field[aria-selected='true'] { border-color: var(--ck-gold-edge); box-shadow: var(--ck-well-shadow), 0 0 0 1px var(--ck-gold-edge); }

/* chips and the unit switch */
.ck-group { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--ck-well); box-shadow: var(--ck-well-shadow); overflow-x: auto; scrollbar-width: none; }
.ck-group::-webkit-scrollbar { display: none; }
.ck-chip {
  flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 0; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--ck-text); font-family: var(--ck-font-key); font-weight: 500; font-size: 16px; position: relative;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.ck-group--unit .ck-chip { min-height: 46px; font-size: 17px; }
.ck-group--purity, .ck-group--chips { flex-wrap: wrap; overflow: visible; }
.ck-group--purity .ck-chip, .ck-group--chips .ck-chip { flex: 1 0 auto; padding: 0 8px; font-size: 16px; }
.ck-group--coin { padding: 5px; flex-wrap: wrap; overflow: visible; border-radius: 14px; }
.ck-group--coin .ck-chip { flex: 1 0 auto; padding: 0 16px; }
.ck-chip + .ck-chip::before { content: ''; position: absolute; left: -1px; top: 28%; height: 44%; width: 1px; background: var(--ck-line); opacity: 0.5; }
.ck-chip[aria-checked='true'] {
  background: var(--ck-chip-on-bg, var(--ck-gold-grad)); color: var(--ck-chip-on-ink); font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 0 0 1px var(--ck-chip-on-edge, var(--ck-gold-edge)), 0 2px 5px rgba(0, 0, 0, 0.18);
}
.ck-chip[aria-checked='true']::before, .ck-chip[aria-checked='true'] + .ck-chip::before { display: none; }

/* keypad */
.ck-pad { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 12px; padding: 2px 2px 4px; }
.ck-key {
  position: relative; min-height: 60px; border-radius: var(--ck-key-radius); border: 1px solid var(--ck-key-edge); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  background: var(--ck-key); color: var(--ck-key-ink); box-shadow: var(--ck-key-shadow);
  font-family: var(--ck-font-key); font-weight: 500; font-size: 26px; line-height: 1; display: grid; place-items: center; font-variant-numeric: tabular-nums;
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out;
}
.ck-key svg { width: 24px; height: 24px; }
.ck-key--fn { background: var(--ck-key-fn, var(--ck-key)); font-size: 22px; font-weight: 500; }
.ck-key--zero { grid-column: 1 / span 2; grid-row: 4; }
.ck-key--dot { grid-column: 3; grid-row: 4; }
.ck-key--go { grid-column: 4; grid-row: 3 / span 2; min-height: 0; background: var(--ck-go-bg, var(--ck-gold-grad)); color: var(--ck-go-ink, var(--ck-gold-ink)); border-color: var(--ck-go-edge, var(--ck-gold-edge)); font-size: 34px; font-weight: 400; box-shadow: var(--ck-go-shadow, var(--ck-key-shadow)); }
.ck-key.is-down, .ck-key:active { transform: translateY(2px); box-shadow: var(--ck-key-shadow-down); }
.ck-key--go.is-down, .ck-key--go:active { box-shadow: var(--ck-key-shadow-down); }
.ck-pad { padding-bottom: 6px; }

/* ---------------------------------------------------------------- result */
.ck-result {
  display: grid; gap: 10px; padding: 18px 20px 16px; border-radius: var(--ck-radius);
  background: var(--ck-surface); border: 1px solid var(--ck-surface-border); box-shadow: var(--ck-surface-shadow);
}
.ck-result__label { margin: 0; font: 600 12px/1 var(--ck-font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ck-muted); }
.ck-result__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-hero {
  --hc: 8;
  font-family: var(--ck-font-num); font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; font-variant-numeric: lining-nums tabular-nums;
  font-size: min(clamp(40px, 15vw, 76px), calc((100cqi - 44px) / (var(--hc) * 0.6)));
  white-space: nowrap; max-width: 100%; color: var(--ck-hero-ink);
}
.ck-hero { background: var(--ck-hero-bg); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ck-result__note { margin: 0; color: var(--ck-muted); font-size: 15px; font-family: var(--ck-font-num); }
.ck-result__note:empty { display: none; }
.ck-result.is-flash { animation: ck-flash 0.7s ease-out; }
@keyframes ck-flash { 0% { box-shadow: 0 0 0 0 rgba(216, 188, 122, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(216, 188, 122, 0); } }

.ck-range { border-top: 1px solid var(--ck-line); padding-top: 10px; display: grid; gap: 8px; }
.ck-range__title { margin: 0; font-family: var(--ck-font-num); font-size: clamp(16px, 4.6vw, 19px); font-weight: 700; }
.ck-range__track { position: relative; height: 8px; border-radius: 4px; background: var(--ck-track); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset; margin: 6px 7px; }
.ck-range__fill { position: absolute; top: 0; bottom: 0; border-radius: 12px; background: var(--ck-gold-grad); }
.ck-range__track b { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ck-gold-grad); box-shadow: 0 0 0 2px var(--ck-gold-edge), 0 2px 4px rgba(0, 0, 0, 0.35); }
.ck-range__labels { display: flex; justify-content: space-between; font-family: var(--ck-font-num); font-weight: 700; font-size: 16px; color: var(--ck-muted); }
.ck-range__note { margin: 0; font-size: 13px; color: var(--ck-muted); line-height: 1.4; }

.ck-lines { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--ck-line); }
.ck-lines:empty { display: none; }
.ck-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--ck-line) 45%, transparent); font-size: 15px; }
.ck-lines dt { color: var(--ck-muted); }
.ck-lines dd { margin: 0; font-family: var(--ck-font-num); font-weight: 700; text-align: right; }

.ck-how { border-top: 1px solid var(--ck-line); padding-top: 4px; }
.ck-how summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 12px var(--ck-font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ck-muted); list-style: none; }
.ck-how summary::-webkit-details-marker { display: none; }
.ck-how summary::after { content: '+'; margin-left: auto; font-size: 20px; letter-spacing: 0; }
.ck-how[open] summary::after { content: '\2212'; }
.ck-how ol { margin: 0 0 6px; padding-left: 20px; display: grid; gap: 7px; font-size: 15px; line-height: 1.45; }

.ck-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ck-actions[data-n='2'] { grid-template-columns: repeat(2, 1fr); }
.ck-actions[data-n='1'] { grid-template-columns: 1fr; }
.ck-action {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 52px; padding: 6px 8px; border-radius: 14px; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--ck-action-bg); color: var(--ck-action-ink); border: 1px solid var(--ck-action-edge); font-family: var(--ck-font-num); font-weight: 700; font-size: 13px; line-height: 1.15;
}
.ck-action svg { width: 20px; height: 20px; flex: none; }
.ck-action:active { transform: translateY(1px); }
.ck-note { margin: 0; min-height: 0; font-size: 13px; color: var(--ck-muted); }
.ck-note:empty { display: none; }

.ck-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* sticky result bar: mobile only, shown by script when the result is off screen */
.ck-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ck-sticky-bg); border-top: 1px solid var(--ck-surface-border); backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform 0.22s ease-out; color: var(--ck-text);
}
.ck-sticky > div { display: grid; min-width: 0; }
.ck-sticky__label { font: 600 10px var(--ck-font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ck-muted); }
.ck-sticky strong { font-family: var(--ck-font-num); font-size: 26px; line-height: 1.1; }
.ck-sticky__btn { min-height: 44px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--ck-gold-edge); background: var(--ck-gold-grad); color: var(--ck-gold-ink); font: 700 16px var(--ck-font-num); cursor: pointer; }
@media (max-width: 759px) { .ck-sticky { display: flex; } .ck-sticky.is-on { transform: translateY(0); } }

/* no-JS fallback form */
.ck-fallback { display: none; gap: 10px; padding: 16px; border-radius: var(--ck-radius); background: var(--ck-surface); border: 1px solid var(--ck-surface-border); }
.ck-fallback label { display: grid; gap: 4px; font-size: 14px; }
.ck-fallback input, .ck-fallback select { min-height: 44px; font-size: 18px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ck-action-edge); }
.ck-fallback__go { min-height: 48px; border-radius: 12px; border: 1px solid var(--ck-gold-edge); background: var(--ck-gold-grad); font: 700 18px var(--ck-font-num); color: var(--ck-gold-ink); }
.ck--js .ck-fallback { display: none !important; }

/* wide layout: device left, result right (container query, so it also works in a narrow column) */
@container (min-width: 760px) {
  .ck-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); grid-template-areas: 'top top' 'badge badge' 'device result'; align-items: start; column-gap: 28px; }
  .ck-top { grid-area: top; }
  .ck-badge { grid-area: badge; justify-self: start; }
  .ck-device { grid-area: device; }
  .ck-grid > [data-ck-resultbox] { grid-area: result; }
  .ck-fallback { grid-column: 1 / -1; }
  .ck-hero { font-size: min(clamp(56px, 7vw, 84px), calc((48cqi - 44px) / (var(--hc) * 0.6))); }
  .ck-display__num, .ck-display__prefix { font-size: 84px; }
  .ck-display[data-len='m'] .ck-display__num, .ck-display[data-len='m'] .ck-display__prefix { font-size: 70px; }
  .ck-display[data-len='l'] .ck-display__num, .ck-display[data-len='l'] .ck-display__prefix { font-size: 56px; }
  .ck-display[data-len='xl'] .ck-display__num, .ck-display[data-len='xl'] .ck-display__prefix { font-size: 44px; }
  .ck-actions { grid-template-columns: 1fr; gap: 10px; }
  .ck-action { min-height: 56px; border-radius: 12px; font-size: 18px; }
  .ck-action:first-child { background: var(--ck-gold-grad); color: var(--ck-gold-ink); border-color: var(--ck-gold-edge); }
  .ck-title { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .ck *, .ck { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .ck-key.is-down, .ck-key:active { transform: none; }
}
@media (forced-colors: active) { .ck-chip[aria-checked='true'], .ck-field[aria-selected='true'] { outline: 2px solid Highlight; } }

/* ---------------------------------------------------------------- key/accent variants (data-ck-variant on .ck)
   a: Apple-like, flat fills, minimal sheen. b: Braun-like, flat, one non-gold accent (deep green), gold numbers.
   c: brushed metal accent, very subtle. Default (no attribute) = a. */
:is(.ck[data-ck-theme='cream-gold'], html[data-ck-user-theme='cream-gold'] .ck[data-ck-follow]) {
  --ck-accent-bronze: #9a7a48;
}
/* A */
.ck[data-ck-variant='a'] { --ck-key-radius: 13px; }
:is(.ck[data-ck-variant='a'][data-ck-theme='black-gold']) {
  --ck-key: #3a3a3c; --ck-key-fn: #505053; --ck-key-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 2px 0 #0b0b0b, 0 3px 5px -1px rgba(0,0,0,.5);
  --ck-go-bg: #c8ab73; --ck-go-ink: #1a1408; --ck-go-edge: #a98c57; --ck-chip-on-bg: #c8ab73;
}
:is(.ck[data-ck-variant='a'][data-ck-theme='cream-gold']) {
  --ck-key: #fff; --ck-key-fn: #efebe0; --ck-key-shadow: 0 1px 0 #fff inset, 0 2px 0 rgba(120,100,60,.16), 0 3px 5px -1px rgba(80,60,20,.15);
  --ck-go-bg: #b99a60; --ck-go-ink: #fffaf0; --ck-go-edge: #9a7d47; --ck-chip-on-bg: #b99a60; --ck-chip-on-ink: #fffaf0;
}
/* B: flat, hairline, one accent. Accent deep green; gold stays on the big numbers only. */
.ck[data-ck-variant='b'] { --ck-key-radius: 8px; --ck-accent: #2f5a45; }
:is(.ck[data-ck-variant='b'][data-ck-theme='black-gold']) {
  --ck-key: #262628; --ck-key-fn: #1c1c1e; --ck-key-edge: #3a3a3d; --ck-key-shadow: 0 2px 0 #0a0a0a; --ck-key-shadow-down: 0 0 0 #000 inset;
  --ck-go-bg: #3f7a5c; --ck-go-ink: #fff; --ck-go-edge: #3f7a5c; --ck-go-shadow: 0 2px 0 #0f2a1e; --ck-chip-on-bg: #3f7a5c; --ck-chip-on-ink: #fff; --ck-chip-on-edge: #3f7a5c;
}
:is(.ck[data-ck-variant='b'][data-ck-theme='cream-gold']) {
  --ck-key: #fff; --ck-key-fn: #ece8dc; --ck-key-edge: #d7d0bd; --ck-key-shadow: 0 2px 0 #cfc7b2; --ck-key-shadow-down: 0 0 0 #000 inset;
  --ck-go-bg: #2f5a45; --ck-go-ink: #fff; --ck-go-edge: #2f5a45; --ck-go-shadow: 0 2px 0 #1b3a2b; --ck-chip-on-bg: #2f5a45; --ck-chip-on-ink: #fff; --ck-chip-on-edge: #2f5a45;
}
.ck[data-ck-variant='b'] .ck-key--go.is-down, .ck[data-ck-variant='b'] .ck-key--go:active, .ck[data-ck-variant='b'] .ck-key.is-down, .ck[data-ck-variant='b'] .ck-key:active { transform: translateY(2px); box-shadow: none; }
.ck[data-ck-variant='b'] .ck-action:first-child { background: var(--ck-go-bg); border-color: var(--ck-go-bg); color: #fff; }
/* C: brushed metal on the accent surfaces only */
.ck[data-ck-variant='c'] { --ck-key-radius: 12px; --ck-brush: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 2px); }
.ck[data-ck-variant='c'] .ck-key--go, .ck[data-ck-variant='c'] .ck-chip[aria-checked='true'], .ck[data-ck-variant='c'] .ck-action:first-child {
  background: var(--ck-brush), linear-gradient(115deg, #b69a64 0%, #dcc79a 38%, #b4975f 62%, #cdb67f 100%);
  color: #1c160a; border-color: #8f7542;
}
:is(.ck[data-ck-variant='c'][data-ck-theme='black-gold']) { --ck-key: #333335; --ck-key-fn: #444447; --ck-key-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 2px 0 #0b0b0b, 0 3px 5px -1px rgba(0,0,0,.5); }
:is(.ck[data-ck-variant='c'][data-ck-theme='cream-gold']) { --ck-key: #fff; --ck-key-fn: #f0ecdf; }

/* ---------------------------------------------------------------- D: black brushed metal keys (default)
   Machined gunmetal-to-black keys with a fine horizontal brush, thin bright top bevel, soft shadow, 2px press.
   Champagne is only a thin ring/label on "=", the selected chip and Save. Same keys on graphite and on ivory. */
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) {
  --d-brush: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0.07) 1px 2px);
  --d-metal: var(--d-brush), linear-gradient(180deg, #3d3f43 0%, #2a2c2f 46%, #1a1b1e 100%);
  --d-metal-fn: var(--d-brush), linear-gradient(180deg, #4a4d52 0%, #34363a 46%, #232427 100%);
  --d-edge: #09090a;
  --d-bevel: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 -1px 0 rgba(0, 0, 0, 0.5) inset;
  --d-drop: 0 2px 0 #050505, 0 6px 9px -3px rgba(0, 0, 0, 0.6);
  --d-champagne: #d3b97e;
  --ck-key-radius: 12px;
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key {
  background: var(--d-metal); color: #f4f4f2; border: 1px solid var(--d-edge); box-shadow: var(--d-bevel), var(--d-drop);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--fn { background: var(--d-metal-fn); color: #d9d9d6; }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--go {
  background: var(--d-metal); color: var(--d-champagne); border-color: var(--d-edge);
  box-shadow: var(--d-bevel), 0 0 0 1px rgba(211, 185, 126, 0.75) inset, var(--d-drop); text-shadow: none;
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key.is-down,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 1px 0 #050505, 0 2px 4px -1px rgba(0, 0, 0, 0.6); filter: brightness(0.94); }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--go.is-down,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--go:active { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 0 0 1px rgba(211, 185, 126, 0.75) inset, 0 1px 0 #050505; }
/* selected chip and unit: black metal with a thin champagne ring */
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-chip[aria-checked='true'] {
  background: var(--d-metal); color: var(--d-champagne); font-weight: 600;
  box-shadow: var(--d-bevel), 0 0 0 1px rgba(211, 185, 126, 0.8), 0 2px 4px rgba(0, 0, 0, 0.45);
}
/* Save: black metal, champagne label. Other actions stay outlined. */
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-action:first-child,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-sticky__btn {
  background: var(--d-metal); color: var(--d-champagne); border: 1px solid var(--d-edge); box-shadow: var(--d-bevel), 0 0 0 1px rgba(211, 185, 126, 0.55) inset, 0 2px 0 #050505;
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-range__fill { background: linear-gradient(180deg, #d3b97e, #b99c63); }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-range__track b { background: #d3b97e; box-shadow: 0 0 0 2px #8f7647, 0 2px 4px rgba(0, 0, 0, 0.35); }

/* ---- D, glossy pass: polished black chrome / piano lacquer. Specular band on the top of each key, sharp bevel, barely-there brush, sheen sweep on press. */
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) {
  --d-brush: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(0, 0, 0, 0.02) 1px 2px);
  --d-metal: var(--d-brush), linear-gradient(180deg, #3b3d42 0%, #1f2024 46%, #07070a 50%, #111215 78%, #1b1c20 100%);
  --d-metal-fn: var(--d-brush), linear-gradient(180deg, #4a4c52 0%, #2a2b30 46%, #0c0c0f 50%, #17181b 78%, #222328 100%);
  --d-gloss-flat: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0 48%, rgba(255, 255, 255, 0) 48%);
  --d-bevel: 0 1px 0 rgba(255, 255, 255, 0.62) inset, 0 -1px 0 rgba(0, 0, 0, 0.75) inset, 1px 0 0 rgba(255, 255, 255, 0.12) inset, -1px 0 0 rgba(255, 255, 255, 0.06) inset;
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key { isolation: isolate; overflow: hidden; color: #fff; }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key::before {
  content: ''; position: absolute; z-index: -1; left: 2px; right: 2px; top: 2px; height: 46%; pointer-events: none;
  border-radius: 10px 10px 60% 60% / 10px 10px 26% 26%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.03) 100%);
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--go::before { height: 30%; }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key::after {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 48%, transparent 64%); transform: translateX(-110%);
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key.is-down::after,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key:active::after { animation: ck-sheen 0.38s ease-out; }
@keyframes ck-sheen { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 0; transform: translateX(110%); } }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key.is-down,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key:active { filter: brightness(1.06); }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-chip[aria-checked='true'],
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-action:first-child,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-sticky__btn { background: var(--d-gloss-flat), var(--d-metal); }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--go { color: var(--d-champagne); }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-chip[aria-checked='true'],
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-action:first-child,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-sticky__btn { --d-gloss-flat: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0 48%, rgba(255, 255, 255, 0) 48%); color: #e6cd93; }

/* ---- WebGL key surface (src/ui/shader.ts). The canvas draws the key bodies; DOM keys keep labels, focus and ARIA. */
.ck-pad { position: relative; }
.ck-gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ck-pad--gl .ck-key { z-index: 1; background: none !important; border-color: transparent !important; box-shadow: none !important; overflow: visible; filter: none !important; transform: none !important; color: #fff; }
.ck-pad--gl .ck-key::before, .ck-pad--gl .ck-key::after { display: none !important; }
.ck-pad--gl .ck-key--go { color: var(--d-champagne, #d3b97e); }
.ck-pad--gl .ck-key:focus-visible { outline-offset: 0; }

/* ---- D, tile pass: matte-to-satin black keys as thick 3D tiles (mahjong / deep keycap).
   No specular band, no sheen sweep. A solid darker side wall is extruded below the top face; pressing drops the face and the wall shrinks. */
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) {
  --d-face: linear-gradient(180deg, #303134 0%, #26272a 100%);
  --d-face-fn: linear-gradient(180deg, #38393d 0%, #2d2e32 100%);
  --d-wall: 0 1px 0 #131315, 0 2px 0 #111113, 0 3px 0 #0f0f11, 0 4px 0 #0d0d0e, 0 5px 0 #0a0a0b, 0 6px 0 #070708;
  --d-contact: 0 11px 11px -5px rgba(0, 0, 0, 0.55), 0 3px 4px rgba(0, 0, 0, 0.3);
  --d-top: 0 1px 0 rgba(255, 255, 255, 0.13) inset, 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-pad { row-gap: 16px; padding-bottom: 10px; }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key {
  background: var(--d-face); color: #fff; border: 0; border-radius: 12px; text-shadow: none; overflow: visible;
  box-shadow: var(--d-top), var(--d-wall), var(--d-contact);
  transition: transform 0.07s ease-out, box-shadow 0.07s ease-out;
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--fn { background: var(--d-face-fn); color: #e4e4e2; }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key::before,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key::after { display: none !important; animation: none !important; }
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--go {
  background: var(--d-face); color: var(--d-champagne);
  box-shadow: var(--d-top), 0 0 0 1px rgba(211, 185, 126, 0.75) inset, var(--d-wall), var(--d-contact);
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key.is-down,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key:active {
  transform: translateY(5px); filter: none;
  box-shadow: var(--d-top), 0 1px 0 #0a0a0b, 0 3px 4px -1px rgba(0, 0, 0, 0.5);
}
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--go.is-down,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-key--go:active {
  box-shadow: var(--d-top), 0 0 0 1px rgba(211, 185, 126, 0.75) inset, 0 1px 0 #0a0a0b, 0 3px 4px -1px rgba(0, 0, 0, 0.5);
}
/* selected chip and Save: same tile, a shallower 2px wall */
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-chip[aria-checked='true'],
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-action:first-child,
:is(.ck:not([data-ck-variant]), .ck[data-ck-variant='d']) .ck-sticky__btn {
  background: var(--d-face); color: #e6cd93; border: 0; font-weight: 600;
  box-shadow: var(--d-top), 0 0 0 1px rgba(211, 185, 126, 0.75) inset, 0 1px 0 #101012, 0 2px 0 #0b0b0c, 0 5px 6px -2px rgba(0, 0, 0, 0.5);
}

/* ================================================================ E: "R1 soft dial"
   Off-white matte keys, wide diffuse shadows, thin white top rim, mono digits. Warm orange glow only on "=", selected chips and Save,
   bleeding out from under the bottom edge. Pressed: sinks, shadow tightens, glow brightens. No hover. */
.ck[data-ck-variant='e'] {
  --ck-font-key: var(--ck-font-mono, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace);
  --e-glow: 255, 150, 50;
  --e-key: linear-gradient(180deg, #f6f3ee 0%, #eeeae3 100%);
  --e-ink: #2a2825;
  --e-charcoal: linear-gradient(180deg, #353436 0%, #262527 100%);
  --ck-key-radius: 14px;
}
.ck[data-ck-variant='e'][data-ck-theme='cream-gold'] .ck-device { background: linear-gradient(180deg, #ebe8e1, #e3dfd7); border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0 #fff inset, 0 28px 50px -26px rgba(70, 58, 40, 0.4), 0 3px 8px rgba(70, 58, 40, 0.08); }
.ck[data-ck-variant='e'] .ck-group { background: transparent; box-shadow: none; padding: 0; gap: 8px; overflow: visible; }
.ck[data-ck-variant='e'] .ck-chip + .ck-chip::before { display: none; }
.ck[data-ck-variant='e'] .ck-key, .ck[data-ck-variant='e'] .ck-chip, .ck[data-ck-variant='e'] .ck-action {
  background: var(--e-key); color: var(--e-ink); border: 0; border-radius: 14px; text-shadow: none; font-family: var(--ck-font-key); font-weight: 500;
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(255, 255, 255, 0.55) inset, 0 12px 22px -8px rgba(76, 62, 44, 0.32), 0 2px 5px rgba(76, 62, 44, 0.12);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}
.ck[data-ck-variant='e'][data-ck-theme='black-gold'] .ck-key, .ck[data-ck-variant='e'][data-ck-theme='black-gold'] .ck-chip:not([aria-checked='true']), .ck[data-ck-variant='e'][data-ck-theme='black-gold'] .ck-action:not(:first-child) {
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 12px 22px -8px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.35);
}
.ck[data-ck-variant='e'] .ck-key { min-height: 62px; font-size: 24px; }
.ck[data-ck-variant='e'] .ck-key--fn { font-size: 20px; }
.ck[data-ck-variant='e'] .ck-chip { font-size: 15px; border-radius: 14px; flex: 1 1 0; }
.ck[data-ck-variant='e'] .ck-group--unit .ck-chip { border-radius: 16px; }
.ck[data-ck-variant='e'] .ck-pad { gap: 14px; padding-bottom: 12px; }
.ck[data-ck-variant='e'] .ck-key::before, .ck[data-ck-variant='e'] .ck-key::after { display: none; }
/* glow edge: "=" (off-white, light leaks from under it) */
.ck[data-ck-variant='e'] .ck-key--go {
  color: var(--e-ink);
  box-shadow: 0 1px 0 #fff inset, 0 -2px 0 rgba(var(--e-glow), 0.0) inset, 0 3px 0 rgb(255, 168, 84), 0 8px 16px -2px rgba(var(--e-glow), 0.55), 0 14px 22px -8px rgba(76, 62, 44, 0.3);
}
/* selected chips and Save: charcoal with the same under-glow */
.ck[data-ck-variant='e'] .ck-chip[aria-checked='true'], .ck[data-ck-variant='e'] .ck-action:first-child, .ck[data-ck-variant='e'] .ck-sticky__btn {
  background: var(--e-charcoal); color: #f6f1e7; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 3px 0 rgb(255, 168, 84), 0 7px 14px -3px rgba(var(--e-glow), 0.5);
}
.ck[data-ck-variant='e'] .ck-key.is-down, .ck[data-ck-variant='e'] .ck-key:active { transform: translateY(3px); box-shadow: 0 1px 0 #fff inset, 0 3px 6px -2px rgba(76, 62, 44, 0.3); }
.ck[data-ck-variant='e'] .ck-key--go.is-down, .ck[data-ck-variant='e'] .ck-key--go:active { box-shadow: 0 1px 0 #fff inset, 0 1px 0 rgb(255, 190, 120), 0 5px 18px 1px rgba(var(--e-glow), 0.85); }
.ck[data-ck-variant='e'] .ck-chip[aria-checked='true']:active, .ck[data-ck-variant='e'] .ck-action:first-child:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 1px 0 rgb(255, 190, 120), 0 4px 16px 0 rgba(var(--e-glow), 0.8); }
.ck[data-ck-variant='e'] .ck-display { box-shadow: 0 0 0 1px rgba(255, 170, 90, 0.5) inset, 0 2px 6px rgba(80, 60, 20, 0.12) inset; }
.ck[data-ck-variant='e'] :is(.ck-key, .ck-chip, .ck-action, .ck-field):focus-visible { outline: 3px solid rgb(255, 150, 50); outline-offset: 3px; }
.ck[data-ck-variant='e'] .ck-range__fill { background: rgb(255, 160, 70); } .ck[data-ck-variant='e'] .ck-range__track b { background: #fff; box-shadow: 0 0 0 2px rgb(255, 160, 70); }

/* ================================================================ F: "charcoal debossed slab"
   The keypad is one matte charcoal slab with the keys carved into it: soft inner shadow top-left, faint highlight bottom-right.
   Warm glow leaks from inside the slot of "=" and the selected chips. Pressed: deeper, stronger inner shadow, brighter glow. No shine, no hover. */
.ck[data-ck-variant='f'] {
  --e-glow: 255, 140, 45;
  --f-slab: #29292c; --f-slot: #1f1f22; --f-ink: #eeebe5;
}
.ck[data-ck-variant='f'][data-ck-theme='black-gold'] { --f-slab: #2b2b2f; --f-slot: #202023; }
.ck[data-ck-variant='f'] .ck-pad { background: var(--f-slab); border-radius: 18px; padding: 12px; gap: 11px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 30px -18px rgba(0, 0, 0, 0.7); }
.ck[data-ck-variant='f'] .ck-key {
  background: var(--f-slot); color: var(--f-ink); border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 11px; text-shadow: none; font-weight: 500; font-size: 26px;
  box-shadow: 3px 4px 7px rgba(0, 0, 0, 0.6) inset, -1px -1px 1px rgba(255, 255, 255, 0.07) inset, 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: box-shadow 0.08s ease-out, background 0.08s ease-out;
}
.ck[data-ck-variant='f'] .ck-key::before, .ck[data-ck-variant='f'] .ck-key::after { display: none; }
.ck[data-ck-variant='f'] .ck-key--fn { color: #cfccc6; }
.ck[data-ck-variant='f'] .ck-key--go { color: #f6ead5; box-shadow: 3px 4px 7px rgba(0, 0, 0, 0.6) inset, 0 -9px 14px -6px rgba(var(--e-glow), 0.5) inset, 0 0 0 1px rgba(var(--e-glow), 0.55) inset, 0 0 12px rgba(var(--e-glow), 0.16), 0 1px 0 rgba(255, 255, 255, 0.07); }
.ck[data-ck-variant='f'] .ck-key.is-down, .ck[data-ck-variant='f'] .ck-key:active { background: #19191b; box-shadow: 5px 7px 11px rgba(0, 0, 0, 0.85) inset, -1px -1px 1px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.05); transform: none; }
.ck[data-ck-variant='f'] .ck-key--go.is-down, .ck[data-ck-variant='f'] .ck-key--go:active { box-shadow: 5px 7px 11px rgba(0, 0, 0, 0.85) inset, 0 -12px 18px -6px rgba(var(--e-glow), 0.85) inset, 0 0 0 1px rgba(var(--e-glow), 0.85) inset, 0 0 20px rgba(var(--e-glow), 0.35); }
/* chips and unit switch: hairline outlines, carved charcoal for the selected one */
.ck[data-ck-variant='f'] .ck-group { background: transparent; box-shadow: none; padding: 0; gap: 8px; overflow: visible; }
.ck[data-ck-variant='f'] .ck-chip + .ck-chip::before { display: none; }
.ck[data-ck-variant='f'] .ck-chip { border-radius: 11px; box-shadow: 0 0 0 1px var(--ck-line); color: var(--ck-text); font-size: 15px; }
.ck[data-ck-variant='f'] .ck-chip[aria-checked='true'] {
  background: var(--f-slot); color: #f6ead5; font-weight: 600;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.65) inset, 0 -7px 11px -5px rgba(var(--e-glow), 0.55) inset, 0 0 0 1px rgba(var(--e-glow), 0.6) inset, 0 0 10px rgba(var(--e-glow), 0.14);
}
.ck[data-ck-variant='f'] .ck-chip[aria-checked='true']:active { box-shadow: 4px 5px 9px rgba(0, 0, 0, 0.85) inset, 0 -9px 14px -5px rgba(var(--e-glow), 0.85) inset, 0 0 0 1px rgba(var(--e-glow), 0.85) inset; }
.ck[data-ck-variant='f'] .ck-action { border-radius: 12px; font-family: var(--ck-font-key); font-weight: 600; font-size: 14px; }
.ck[data-ck-variant='f'] .ck-action:first-child { background: var(--f-slab); color: #f6ead5; border-color: rgba(var(--e-glow), 0.6); box-shadow: 0 -7px 11px -6px rgba(var(--e-glow), 0.45) inset; }
.ck[data-ck-variant='f'] .ck-display { box-shadow: 0 2px 6px rgba(80, 60, 20, 0.28) inset, 0 0 0 1px rgba(184, 155, 94, 0.45) inset; }
.ck[data-ck-variant='f'] :is(.ck-key, .ck-chip, .ck-action, .ck-field):focus-visible { outline: 3px solid rgb(255, 150, 50); outline-offset: 3px; }
.ck[data-ck-variant='f'] .ck-range__fill { background: rgb(255, 150, 60); } .ck[data-ck-variant='f'] .ck-range__track b { background: #fff; box-shadow: 0 0 0 2px rgb(255, 150, 60); }

/* ================================================================ G: "R1 soft dial", rendered
   Key, chip, body and window surfaces are Blender renders (art/keys.py -> art/compose.py -> src/css/art/*.webp), drawn as
   9-slice border-images with the shadow and glow in an outset margin. Labels, focus and ARIA stay on the DOM buttons.
   Slice numbers below mirror art/specs.py: key m16 slice33 @3x, chip m12 slice32 @3x (box exactly 40px tall),
   body m36 slice70 @2x, window m6 slice23 @3x. The device stays cream on both page themes: it is an object, not a theme surface.
   --g-lift: how far the rendered key face sits above its box centre (camera tilt x cap height), so labels sit on the face. */
.ck[data-ck-variant='g'] {
  --ck-font-key: var(--ck-font-mono, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace);
  --g-body: #e8e5df;   /* = the ground colour the key sprites were un-mixed against (art/specs.py GB) */
  --g-ink: #262522;
  --g-glow: 255, 150, 60;
}
.ck[data-ck-variant='g'] .ck-device {
  position: relative; gap: 18px; padding: 24px 20px 22px; background: none; border: 0 solid transparent; box-shadow: none; border-radius: 26px; color: var(--g-ink);
  border-image: url('art/g-body.webp') 140 fill / 70px / 36px stretch;
}
/* display window */
.ck[data-ck-variant='g'] .ck-display {
  min-height: 117px; padding: 14px 16px 12px; justify-items: center; background: none; border: 0 solid transparent; box-shadow: none; border-radius: 14px; color: #121110;
  border-image: url('art/g-window.webp') 69 fill / 23px / 6px stretch;
}
.ck[data-ck-variant='g'] .ck-display__label { font: 400 12px/1 var(--ck-font-key); letter-spacing: 0.14em; color: #7b766d; }
.ck[data-ck-variant='g'] .ck-display__num { font-size: 60px; }
.ck[data-ck-variant='g'] .ck-display__row { justify-content: center; gap: 0; }
.ck[data-ck-variant='g'] .ck-display__suffix { margin-left: 0; padding-left: 20px; border-left: 0; font-size: 30px; align-self: baseline; }
/* chips: raised cream pills; the selected one is charcoal with orange light under its front edge */
.ck[data-ck-variant='g'] .ck-group { background: none; box-shadow: none; padding: 0; gap: 9px; overflow: visible; flex-wrap: nowrap; }
.ck[data-ck-variant='g'] .ck-group--unit { gap: 14px; justify-content: center; }
.ck[data-ck-variant='g'] .ck-chip + .ck-chip::before { display: none; }
.ck[data-ck-variant='g'] .ck-chip {
  --g-lift: 1.15px;
  flex: 1 1 0; min-width: 0; height: 40px; min-height: 40px; padding: 0 0 calc(2 * var(--g-lift)); border: 0 solid transparent; border-radius: 20px; background: none; box-shadow: none;
  color: #34322e; font: 400 15px/1 var(--ck-font-key); letter-spacing: -0.02em;
  border-image: url('art/g-chip.webp') 96 fill / 32px / 12px stretch;
}
.ck[data-ck-variant='g'] .ck-group--unit .ck-chip { max-width: 88px; height: 40px; font-size: 17px; }
.ck[data-ck-variant='g'] .ck-group--purity { gap: 7px; }
.ck[data-ck-variant='g'] .ck-chip[aria-checked='true'] {
  --g-lift: 2.85px; color: #f4f1ea; font-weight: 400; background: none; box-shadow: none;
  border-image-source: url('art/g-chip-on.webp');
}
/* keypad */
.ck[data-ck-variant='g'] .ck-pad { gap: 10px 9px; padding: 0; }
.ck[data-ck-variant='g'] .ck-key {
  --g-lift: 1.8px;
  min-height: 0; aspect-ratio: 112 / 92; border: 0 solid transparent; border-radius: 13px; background: none; box-shadow: none; text-shadow: none; filter: none;
  color: var(--g-ink); font: 400 23px/1 var(--ck-font-key); padding: 0 0 calc(2 * var(--g-lift));
  border-image: url('art/g-key.webp') 99 fill / 33px / 16px stretch;
  transition: none;
}
.ck[data-ck-variant='g'] .ck-key svg { width: 25px; height: 25px; }
.ck[data-ck-variant='g'] .ck-key::before, .ck[data-ck-variant='g'] .ck-key::after { display: none; }
.ck[data-ck-variant='g'] .ck-key--fn { font-size: 23px; }
.ck[data-ck-variant='g'] .ck-key--zero, .ck[data-ck-variant='g'] .ck-key--go { aspect-ratio: auto; }
.ck[data-ck-variant='g'] .ck-key--go { --g-lift: 3.6px; color: var(--g-ink); font-size: 30px; border-image-source: url('art/g-go.webp'); }
/* pressed: the cap drops below the body surface (sprite), the label follows it down; glow brightens at the front edge */
.ck[data-ck-variant='g'] .ck-key.is-down, .ck[data-ck-variant='g'] .ck-key:active {
  transform: none; box-shadow: none; filter: none; padding: calc(2 * 0.85px) 0 0; border-image-source: url('art/g-key-down.webp');
}
.ck[data-ck-variant='g'] .ck-key--go.is-down, .ck[data-ck-variant='g'] .ck-key--go:active { border-image-source: url('art/g-go-down.webp'); }
.ck[data-ck-variant='g'] .ck-chip:active { transform: none; }
.ck[data-ck-variant='g'] :is(.ck-key, .ck-chip, .ck-action, .ck-field):focus-visible { outline: 2px solid rgb(240, 130, 40); outline-offset: 3px; }
/* the rest of the card picks up the same orange */
.ck[data-ck-variant='g'] .ck-chip[aria-checked='true']:focus-visible { outline-offset: 4px; }
.ck[data-ck-variant='g'] .ck-action:first-child, .ck[data-ck-variant='g'] .ck-sticky__btn { background: linear-gradient(180deg, #343336, #232225); color: #f6f1e7; border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 3px 0 rgb(255, 160, 80), 0 7px 14px -4px rgba(var(--g-glow), 0.55); }
.ck[data-ck-variant='g'] .ck-range__fill { background: rgb(255, 160, 70); }
.ck[data-ck-variant='g'] .ck-range__track b { background: #fff; box-shadow: 0 0 0 2px rgb(255, 160, 70); }
.ck[data-ck-variant='g'] .ck-field { background: rgba(255, 255, 255, 0.45); box-shadow: 0 1px 3px rgba(80, 60, 30, 0.18) inset; color: var(--g-ink); }
.ck[data-ck-variant='g'] .ck-field__label { color: #7b766d; }
.ck[data-ck-variant='g'] .ck-field[aria-selected='true'] { border-color: rgb(240, 150, 70); }
@media (forced-colors: active) { .ck[data-ck-variant='g'] :is(.ck-key, .ck-chip, .ck-device, .ck-display) { border-image: none; border: 1px solid CanvasText; } }

/* ================================================================ H: "charcoal debossed slab", rendered (same pipeline as G)
   Charcoal body; the keypad is a recessed slab and every key is a tile set in its own slot. "=" and the selected chip get
   orange light coming up through the slot (a glowing outline); pressed tiles drop below the slab and darken.
   Slices: key m16 slice33 @3x, chip m12 slice32 @3x (40px tall), body m36 slice70 @2x, slab/window m6 slice23 @3x. */
.ck[data-ck-variant='h'] {
  --ck-font-key: var(--ck-font-mono, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace);
  --h-ink: #ecebe7;
  --h-glow: 255, 140, 50;
}
.ck[data-ck-variant='h'] .ck-device {
  gap: 18px; padding: 24px 20px 22px; background: none; border: 0 solid transparent; box-shadow: none; border-radius: 26px; color: var(--h-ink);
  border-image: url('art/h-body.webp') 140 fill / 70px / 36px stretch;
}
.ck[data-ck-variant='h'] .ck-display {
  min-height: 117px; padding: 14px 16px 12px; justify-items: center; background: none; border: 0 solid transparent; box-shadow: none; border-radius: 14px; color: #f4efe4;
  border-image: url('art/h-window.webp') 69 fill / 23px / 6px stretch;
}
.ck[data-ck-variant='h'] .ck-display__label { font: 400 12px/1 var(--ck-font-key); letter-spacing: 0.14em; color: #8d8a84; }
.ck[data-ck-variant='h'] .ck-display__row { justify-content: center; gap: 0; }
.ck[data-ck-variant='h'] .ck-display__num { font-size: 60px; }
.ck[data-ck-variant='h'] .ck-display__suffix { margin-left: 0; padding-left: 20px; border-left: 0; font-size: 30px; align-self: baseline; color: #bdb8ae; }
.ck[data-ck-variant='h'] .ck-group { background: none; box-shadow: none; padding: 0; gap: 7px; overflow: visible; flex-wrap: nowrap; }
.ck[data-ck-variant='h'] .ck-group--unit { gap: 14px; justify-content: center; }
.ck[data-ck-variant='h'] .ck-chip + .ck-chip::before { display: none; }
.ck[data-ck-variant='h'] .ck-chip {
  flex: 1 1 0; min-width: 0; height: 40px; min-height: 40px; padding: 0 0 2px; border: 0 solid transparent; border-radius: 20px; background: none; box-shadow: none;
  color: #c9c6c0; font: 400 15px/1 var(--ck-font-key); letter-spacing: -0.02em;
  border-image: url('art/h-chip.webp') 96 fill / 32px / 12px stretch;
}
.ck[data-ck-variant='h'] .ck-group--unit .ck-chip { max-width: 88px; font-size: 17px; }
.ck[data-ck-variant='h'] .ck-chip[aria-checked='true'] { color: #fff; font-weight: 400; background: none; box-shadow: none; padding: 0 0 1px; border-image-source: url('art/h-chip-on.webp'); }
.ck[data-ck-variant='h'] .ck-pad { gap: 10px 9px; padding: 10px; border: 0 solid transparent; border-radius: 18px; border-image: url('art/h-slab.webp') 69 fill / 23px / 6px stretch; }
.ck[data-ck-variant='h'] .ck-key {
  min-height: 0; aspect-ratio: 112 / 92; border: 0 solid transparent; border-radius: 12px; background: none; box-shadow: none; text-shadow: none; filter: none;
  color: var(--h-ink); font: 400 23px/1 var(--ck-font-key); padding: 0 0 0.5px;
  border-image: url('art/h-key.webp') 99 fill / 33px / 16px stretch;
  transition: none;
}
.ck[data-ck-variant='h'] .ck-key svg { width: 25px; height: 25px; }
.ck[data-ck-variant='h'] .ck-key::before, .ck[data-ck-variant='h'] .ck-key::after { display: none; }
.ck[data-ck-variant='h'] .ck-key--fn { font-size: 23px; color: #d9d7d2; }
.ck[data-ck-variant='h'] .ck-key--zero, .ck[data-ck-variant='h'] .ck-key--go { aspect-ratio: auto; }
.ck[data-ck-variant='h'] .ck-key--go { color: #fff; font-size: 30px; border-image-source: url('art/h-go.webp'); }
.ck[data-ck-variant='h'] .ck-key.is-down, .ck[data-ck-variant='h'] .ck-key:active { transform: none; box-shadow: none; filter: none; padding: 1px 0 0; color: #d6d4cf; border-image-source: url('art/h-key-down.webp'); }
.ck[data-ck-variant='h'] .ck-key--go.is-down, .ck[data-ck-variant='h'] .ck-key--go:active { color: #fff; border-image-source: url('art/h-go-down.webp'); }
.ck[data-ck-variant='h'] .ck-chip:active { transform: none; }
.ck[data-ck-variant='h'] :is(.ck-key, .ck-chip, .ck-action, .ck-field):focus-visible { outline: 2px solid rgb(255, 150, 60); outline-offset: 3px; }
.ck[data-ck-variant='h'] .ck-action:first-child, .ck[data-ck-variant='h'] .ck-sticky__btn { background: #232325; color: #f6f1e7; border-color: rgba(var(--h-glow), 0.75); box-shadow: 0 0 12px rgba(var(--h-glow), 0.25), 0 0 0 1px rgba(var(--h-glow), 0.4) inset; }
.ck[data-ck-variant='h'] .ck-range__fill { background: rgb(255, 150, 60); }
.ck[data-ck-variant='h'] .ck-range__track b { background: #fff; box-shadow: 0 0 0 2px rgb(255, 150, 60); }
.ck[data-ck-variant='h'] .ck-field { background: #1c1c1e; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset; color: var(--h-ink); }
.ck[data-ck-variant='h'] .ck-field__label { color: #8d8a84; }
.ck[data-ck-variant='h'] .ck-field[aria-selected='true'] { border-color: rgb(255, 150, 60); }
@media (forced-colors: active) { .ck[data-ck-variant='h'] :is(.ck-key, .ck-chip, .ck-device, .ck-display, .ck-pad) { border-image: none; border: 1px solid CanvasText; } }
/* G/H are phone-sized objects: on a wide layout keep the device at the mockup's proportions instead of stretching keys to 120px */
@container (min-width: 760px) {
  .ck:is([data-ck-variant='g'], [data-ck-variant='h']) .ck-device { width: 100%; max-width: 420px; justify-self: center; }
}