/* Cook HUD, recreated as a static illustration from the glasses web app's
   styles.css (v11). Same sizes, colours and fixed-region grid, 600 x 600. */
.ck {
  --ink: #ffffff; --ink-2: #d8d8de; --ink-3: #b4b4bd;
  --accent: #ff7a35; --accent-soft: #ffb894; --go: #5ce68a; --rail: #3a3a40;
  width: 600px; height: 600px; background: #000; color: var(--ink);
  font-family: -apple-system, "SF Pro Display", "Segoe UI", Roboto, Helvetica, sans-serif;
  padding: 18px 28px 16px;
  display: grid; grid-template-rows: 6px 44px 1fr 136px; row-gap: 12px;
  text-rendering: optimizeLegibility; user-select: none;
  line-height: 1.2; letter-spacing: 0;
}
.ck * { box-sizing: border-box; }
.ck .rail { height: 6px; display: flex; gap: 3px; }
.ck .rail i { flex: 1 1 0; height: 100%; border-radius: 3px; background: var(--rail); }
.ck .rail i.on { background: var(--accent); }
.ck .head { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ck .headl { display: flex; align-items: baseline; gap: 14px; }
.ck .brand { font-size: 22px; font-weight: 800; letter-spacing: 0.2em; color: var(--accent); }
.ck .count { font-size: 24px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ck .mic { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: 0.16em; color: var(--go); align-self: center; }
.ck .mic::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--go); }
.ck .ver { font-size: 24px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; padding: 5px 10px; opacity: 0.16; }
.ck .body { min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.ck .body.center { align-items: center; text-align: center; }
.ck .dish { font-size: 24px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck .instruction { font-size: 54px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.12; color: var(--ink); }
.ck .ings { margin-top: 12px; font-size: 22px; font-weight: 650; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck .next { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ck .nextlab { font-size: 20px; font-weight: 800; letter-spacing: 0.16em; color: var(--accent); }
.ck .nexttxt { font-size: 24px; font-weight: 650; color: var(--accent-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck .eyebrow { font-size: 24px; font-weight: 800; letter-spacing: 0.22em; color: var(--ink-3); }
.ck .clock { margin-top: 14px; font-size: 168px; font-weight: 800; letter-spacing: -8px; line-height: 1.14; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck .tbar { margin-top: 18px; width: 420px; height: 10px; border-radius: 5px; background: var(--rail); overflow: hidden; }
.ck .tbar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.ck .sub { margin-top: 14px; font-size: 24px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); }
.ck .foot { height: 136px; display: flex; flex-direction: column; row-gap: 14px; }
.ck .keys { height: 66px; display: flex; gap: 16px; }
.ck .key { flex: 1 1 0; text-align: center; }
.ck .kw { font-size: 28px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; }
.ck .key.mid .kw { color: var(--accent); }
.ck .kc { margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-3); white-space: nowrap; }
.ck .slot { height: 56px; display: flex; align-items: center; justify-content: center; }
.ck .badge { font-size: 26px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; padding: 9px 14px; white-space: nowrap; }