/* Bencho tokens, mapped onto shoud's own ink, ground and surface.
   --bg, --ink, --paper and --panel already live on :root.
   Anything this project does not name is set on the component
   root, so it does not leak onto the page.
   Channels ending -rgb are three bare numbers. */

.sld,
.gdock,
.gpane,
.gnav,
.crt-stage,
.bell-well {
  --card: #ffffff;
  --fill-on: #000000;
  --fill-on-rgb: 0, 0, 0;
  --fill-slab: #ffffff;
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ink: #000000;
  --ink-rgb: 0, 0, 0;
  --pane-edge: rgba(0, 0, 0, 0.2);
  --pane: rgba(255, 255, 255, 0.72);
  --board: #ffffff;
  --on-ink: #ffffff;
  --shadow-rgb: 0, 0, 0;
  --g-blur: 12px;
  --g-bright: 105%;
  --g-sat: 140%;
  --g-edge-hi: 0.9;
  --g-edge-lo: 0.14;
  --g-edge-far: 0.28;
  --g-spec: 0.72;
  --g-lift: 0.16;
  --slab-btn: #ffffff;
  --try-edge: rgba(0, 0, 0, 0.22);
}

/* The dark face from the source: a lifted dark body, eyes kept white.
   The light face is not used. */
.eyt,
.eyt-slot,
.eyt-host,
.eyt-slot[data-tone="light"],
.eyt-host[data-tone="light"],
.eyt-slot[data-tone="dark"],
.eyt-host[data-tone="dark"] {
  --card: #2b2c30;
  --fill-slab: #2b2c30;
  --fill-on: #fbfbfa;
  --fill-on-rgb: 251, 251, 250;
  --ink: #2b2c30;
  --ink-rgb: 43, 44, 48;
  --pane-edge: rgba(251, 251, 250, 0.2);
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bg: #fbfbfa;
}

/* ══ Eye tracker ═══════════════════════════════════════════
   See lab/Watcher.tsx. The frame holds the largest ball the
   Size knob allows, so the wall never rescales it. */
.eyt {
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
}

.eyt-ball {
  width: var(--eyt-size, 100px);
  height: var(--eyt-size, 100px);
  overflow: visible;
}

/* the ball is the Fill's own slab and the eyes its ink: white
   with dark eyes on a light fill, near-black with light eyes on
   a dark one */
.eyt-body { fill: var(--fill-slab, #ffffff); }

.eyt-eye { fill: var(--fill-on, #0b0b0d); }

.logo-test .eyt { width: auto; height: auto; }

.logo-test .eyt-body { fill: var(--ink); }

.logo-test .eyt-eye { fill: var(--bg); }

/* the circle and pill in dark mode match the hexagon: a lifted
   dark body with the eyes kept white */
[data-theme="dark"] .logo-test .eyt-body { fill: #2b2c30; }

[data-theme="dark"] .logo-test .eyt-eye { fill: #fbfbfa; }

.eyt-slot,
.eyt-host {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 56px;
  vertical-align: middle;
  flex: none;
}
.eyt-slot .eyt,
.eyt-host .eyt { width: auto; height: auto; }
.avatar .eyt-slot,
.avatar.small .eyt-slot { width: 32px; height: 32px; }
.sky-teammate .eyt-slot { width: 52px; height: 56px; }
.od-px .eyt-slot { width: 100%; height: 100%; }
.pet-toggle .eyt-slot,
.pet-chat-header .eyt-slot { width: 40px; height: 40px; }

/* ══ Slide to confirm ══════════════════════════════════════
   A handle crossing a track, and on commit the handle IS the
   confirmation — it unfurls leftward and fills what it crossed.
   See SlideConfirm.tsx for why the right edge stays put. */
.sld {
  --card: #ffffff;
  --fill-on: #000000;
  --fill-on-rgb: 0, 0, 0;
  --fill-slab: #ffffff;
  --font-ui: "JetBrains Mono", ui-monospace, monospace;
  --ink: #000000;
  --ink-rgb: 0, 0, 0;
  --pane-edge: rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  font-family: var(--font-ui);
  color: var(--fill-on, var(--ink));
  max-width: 100%;
}
.sld-track {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* ── the track is the SLAB, the handle is the INK ─────────
     It was the other way round — a translucent wash for the
     track on the reasoning that a groove is darker than what
     it is cut into. True, and it has nothing to be cut into:
     this track IS the whole block, so there is no surrounding
     surface and a 7% wash had no opaque ground under it. On a
     dark fill that left a near-invisible track with a dark
     circle sitting on it. Measured: track
     rgba(244,243,241,0.07) over a light stage.

     Slab and ink is the pair the liquid toggle uses and it
     inverts from one rule: white track with a near-black
     handle in light, near-black track with a light handle in
     dark. And on commit the handle fills the track, so the
     confirmed state is a solid ink pill in both. */
  background: var(--fill-slab, var(--card));
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
[data-stroke="on"] .sld-track { box-shadow: inset 0 0 0 1px var(--pane-edge); }
.sld-wash {
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  background: var(--fill-on, var(--ink));
  z-index: 1;
  pointer-events: none;
}
.sld-say {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.45);
  pointer-events: none;
  white-space: nowrap;
}
.sld-grip {
  position: absolute;
  left: 4px;
  top: 4px;
  height: 48px;
  padding: 0;
  border: 0;
  background: var(--fill-on, var(--ink));
  color: var(--fill-slab, var(--card));
  cursor: grab;
  pointer-events: auto;
  transform-origin: 0% 50%;
  transition: none;
  z-index: 2;
}
.sld-track[data-held] .sld-grip { cursor: grabbing; }
.sld-arrow,
.sld-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  white-space: nowrap;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sld-done { transition-duration: 1ms; }
}

/* ── glass navigation ──────────────────────────────────────
   Same recipe as .gcard: 60% white, 2px frost, refraction,
   lit inner edge. Shapes differ, the material does not. */
.gpane, .gnav, .gdock {
  position: relative;
  background: var(--pane);
  -webkit-backdrop-filter:
    blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%));
  backdrop-filter:
    blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%));
  isolation: isolate;
  color: var(--ink);
}
.gpane::before, .gnav::before, .gdock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 3;
}
.gdock {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 26px;
  touch-action: pan-y;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.gdock-item {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ink);
  opacity: 0.42;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity 220ms ease;
}
.gdock-glyph {
  display: grid;
  place-items: center;
  transform-origin: center bottom;
  transition: transform 320ms cubic-bezier(0.24, 1.2, 0.32, 1);
}
.gdock-item[data-near="1"] { opacity: 0.66; }
.gdock-item[data-near="0"] { opacity: 1; }
.gdock-item[data-active="true"] { opacity: 1; }
.gdock-item:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
.gdock-dot {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 240ms ease, transform 360ms cubic-bezier(0.28, 1.4, 0.36, 1);
}
.gdock-dot[data-on="true"] { opacity: 0.55; transform: scale(1); }
.gdock-tip {
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(0.28, 1.3, 0.36, 1);
}
.gdock-tip[data-on="true"] { opacity: 1; transform: translate(-50%, 0); }

[data-surface="glass"] .gpane::before,
[data-surface="glass"] .gnav::before,
[data-surface="glass"] .gdock::before {
  border-color: transparent;
  background:
    linear-gradient(
      142deg,
      rgba(255, 255, 255, var(--g-edge-hi, 0)) 0%,
      rgba(255, 255, 255, var(--g-edge-lo, 0)) 26%,
      rgba(255, 255, 255, var(--g-edge-lo, 0)) 62%,
      rgba(255, 255, 255, var(--g-edge-far, 0)) 100%
    ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
[data-surface="glass"] .gpane,
[data-surface="glass"] .gnav,
[data-surface="glass"] .gdock {
  box-shadow: var(--g-shadow,
    inset 0 1px 0 rgba(255, 255, 255, var(--g-spec, 0)),
    0 10px 40px rgba(var(--shadow-rgb), var(--g-lift, 0)));
}

/* ── 5 · create ──────────────────────────────────────────── */
[data-stroke="on"] .crt-body { box-shadow: 0 0 0 1px var(--pane-edge); }
.crt-stage {
  position: relative;
  width: 244px;
  height: 244px;
  --pill-w: 120px;
  --pill-h: 38px;
  --panel-w: 212px;
  --panel-h: 166px;
  --w: var(--pill-w);
  --h: var(--pill-h);
  --r: var(--crt-shut-r, 999px);
  --slab: var(--fill-slab, var(--board));
  --on-slab: var(--fill-on, var(--ink));
  --on-slab-rgb: var(--fill-on-rgb, var(--ink-rgb));
}
.crt-stage[data-open="true"] {
  --w: var(--panel-w);
  --h: var(--panel-h);
  --r: var(--crt-r, 28px);
}
.crt-blobs { position: absolute; inset: 0; pointer-events: none; }
.crt-body {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  background: var(--slab);
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  transition: scale 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.crt-stage[data-sink="true"] .crt-body,
.crt-stage[data-sink="true"] .crt-pill {
  scale: 0.94;
  transition: scale 120ms cubic-bezier(0.35, 0, 0.5, 1);
}
.crt-stage:not([data-open="true"]) .crt-body { transition: scale 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.crt-pill {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--pill-w);
  height: var(--pill-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: none;
  color: var(--on-slab);
  font-family: var(--font-ui);
  font-size: 13.5px;
  cursor: pointer;
  transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease, scale 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.crt-stage[data-open="true"] .crt-pill { opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.crt-stage[data-sink="true"] .crt-pill { opacity: 1; }
.crt-glyph { display: grid; place-items: center; }
.crt-say { display: block; overflow: hidden; white-space: nowrap; text-align: left; transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1); }
.crt-say > span { display: inline-block; }
.crt-panel {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--panel-w);
  height: var(--panel-h);
  padding: 11px 10px;
  color: var(--on-slab);
  pointer-events: none;
}
.crt-stage[data-open="true"] .crt-panel { pointer-events: auto; }
.crt-menu { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 2px; }
.crt-item {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.crt-stage[data-open="true"] .crt-item { opacity: 1; transform: none; }
.crt-item button {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--crt-row-r, 999px);
  background: none;
  color: rgba(var(--on-slab-rgb), 0.78);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  transition: color 200ms ease;
}
.crt-item button:hover { color: var(--on-slab); }
.crt-item button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(var(--on-slab-rgb), 0.08);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
@media (hover: hover) {
  .crt-item button:hover::before { opacity: 1; transition-duration: 140ms; }
}
.crt-item button:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .crt-body, .crt-pill, .crt-item, .crt-say { transition-duration: 1ms; }
  .crt-stage[data-sink="true"] .crt-body,
  .crt-stage[data-sink="true"] .crt-pill { scale: 1; }
}

/* ── 2 · notify ──────────────────────────────────────────── */
.bell-well {
  position: relative;
  width: 260px;
  height: 146px;
  display: grid;
  place-items: center;
}
.bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 19px;
  border: 0;
  border-radius: var(--bell-r, 999px);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.28, 1.3, 0.36, 1);
}
.bell-btn:active { transform: scale(0.96); }
.bell-glyph { display: grid; place-items: center; transform-origin: 50% 16%; }
.bell-say { position: relative; display: block; height: 18px; overflow: hidden; }
.bell-say[data-ready="true"] { transition: width 460ms cubic-bezier(0.24, 1.34, 0.38, 1); }
.bell-say i {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  white-space: nowrap;
  line-height: 18px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.bell-say i[data-show="true"] { opacity: 1; }
.bell-btn[data-on="true"] {
  background: var(--slab-btn, var(--board));
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bell-btn[data-on="true"]::before,
.bell-btn[data-on="true"]::after { opacity: 0; }
[data-stroke="on"] .bell-btn[data-on="true"] {
  box-shadow: 0 0 0 1px rgba(var(--fill-on-rgb, var(--ink-rgb)), 0.16);
}

/* Page placements */
.shader-frame.dock-slot {
  width: min(920px, calc(100% - 32px));
  height: 132px;
  margin: 18px auto 0;
}
.shader-frame.signup-slot {
  width: min(100%, 420px);
  height: 360px;
  margin: 28px auto;
}
html.sky .sky-wordmark-star {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html.sky .brand img,
.brand img { filter: grayscale(1) contrast(1.4) !important; }
html.sky body:not(.lg) :is(.readable-accent, .nav__cta, a[aria-current="page"]) {
  background: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html.sky body:not(.lg) button.menu,
html.sky body:not(.lg) button.menu * {
  background: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html.lq .lq-glow {
  background: radial-gradient(circle, rgba(17, 17, 17, 0.12), transparent 62%) !important;
}
html.sky :is(.proof-badge, .eyebrow, em) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
.confirm-slot { margin: 28px 0; display: flex; justify-content: center; }
.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin: 28px auto;
  padding: 12px 20px 36px;
}
.variant-board {
  max-width: 1100px;
  margin: 8px auto 36px;
  padding: 8px 20px 20px;
  color: #111;
}
.variant-board p {
  font: 500 12px/1.4 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.variant-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.variant-row figure { margin: 0; text-align: center; }
.variant-row figcaption {
  font: 500 10px/1.3 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.variant-row.light {
  background: #0a0a0a;
  color: #fff;
  border-radius: 20px;
  padding: 16px;
}
.variant-row.light figcaption { color: #fff; }
.variant-row.dark {
  background: #fff;
  border: 1px solid #11111122;
  border-radius: 20px;
  padding: 16px;
}
.variant-row .eyt-slot { width: 88px; height: 88px; }

.animated-top-dock-component { font-family: "JetBrains Mono", ui-monospace, monospace; }

@media (max-width: 720px) {
  .shader-frame.signup-slot { height: 300px; }
  .shader-frame.dock-slot { height: 112px; }
  .bell-well { width: 100%; }
  .crt-stage { transform: scale(0.92); transform-origin: center top; }
}

/* bencho pasted: magnifying dock, command bar, seek */

/* ── glass navigation ──────────────────────────────────────
   Same recipe as .gcard: 60% white, 2px frost, refraction,
   lit inner edge. Shapes differ, the material does not. */

/* The bare pane. Same recipe as .gnav and .gdock, with no
   layout of its own — for components that are just a surface
   and want to arrange themselves. A card with a title in one
   corner and a chip in the other is a house style, not a
   requirement, and most things do not need either. */
.gpane, .gnav, .gdock {
  position: relative;
  background: var(--pane);
  -webkit-backdrop-filter:
    blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%));
  backdrop-filter:
    blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%));
  isolation: isolate;
  color: var(--ink);}

.gpane::before, .gnav::before, .gdock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* transparent unless Stroke says otherwise — see the
     stroke block below */
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 3;}

/* dock */
.gdock {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 26px;
  /* sideways is the dock's, up and down stays the page's — a
     finger passing over this on the way down the wall is
     scrolling, not picking. See .tick-row. */
  touch-action: pan-y;}

/* no tile behind the icon: scaling a translucent rectangle over
   glass is what made this look cheap. The glyph scales instead,
   and SVG scales cleanly at any size. */
.gdock-item {
  position: relative;
  width: 44px; height: 44px;
  border: 0;
  background: none;
  color: var(--ink);
  opacity: 0.42;
  display: grid; place-items: center;
  cursor: pointer;
  transition: opacity 220ms ease;}

/* the magnification lives here, so the dot and the label keep
   their own size and their own distance from the bar */
.gdock-glyph {
  display: grid; place-items: center;
  transform-origin: center bottom;
  transition: transform 320ms cubic-bezier(0.24, 1.2, 0.32, 1);}

.gdock-item[data-near="1"] { opacity: 0.66; }

.gdock-item[data-near="0"] { opacity: 1; }

.gdock-item[data-active="true"] { opacity: 1; }

.gdock-item:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; border-radius: 10px; }

/* the running dot, the only persistent mark in the dock */
.gdock-dot {
  position: absolute;
  /* inside the item, not slung underneath it. The glyph is
     20px in a 44px box, so anything hung off the bottom edge
     lands 17px from the mark it belongs to. */
  left: 50%; bottom: 3px;
  width: 3px; height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 240ms ease, transform 360ms cubic-bezier(0.28, 1.4, 0.36, 1);}

.gdock-dot[data-on="true"] { opacity: 0.55; transform: scale(1); }

/* A 44px button around a 20px glyph leaves 12px of dead space
   at the top, so the offset is measured to clear the dock's
   own edge by 2px rather than the button's. */
.gdock-tip {
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--ink); color: var(--on-ink);
  font-family: var(--font-mono);
  font-size: 8px; line-height: 1.2;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(0.28, 1.3, 0.36, 1);}

.gdock-tip[data-on="true"] { opacity: 1; transform: translate(-50%, 0); }

/* ── flat panes ────────────────────────────────────────────
   Set data-surface="flat" on any ancestor and every glass
   surface under it becomes a solid fill with a hairline. The
   inner buttons already sit on rgba(var(--ink-rgb), 0.05)
   with no border, which is what flat wants anyway, so they
   need nothing.

   The frost is switched off at the element rather than through
   a token. A var() holding a url() filter cannot be validated
   at parse time, so the browser would treat it as invalid at
   computed-value time and drop the property outright — which
   breaks the two-declaration fallback the glass depends on. */
/* ══ stroke ═════════════════════════════════════════════════
   Whether a component draws a hairline round itself. OFF by
   default, which is the change: every glass surface carried
   one unconditionally, and a grey line round everything makes
   a wall of components look like a wall of boxes rather than
   a wall of things.

   The line is not load-bearing. A flat pane is a fill against
   a different fill and reads on its own; the ring was there
   to sharpen an edge that was already there.

   Placed ABOVE the glass rules on purpose. Glass draws its
   own lit rim, and that rim is the material rather than a
   stroke — it is what gives a pane thickness. So glass wins
   the border wherever the two meet, and Stroke governs the
   drawn line that flat surfaces would otherwise have. */
[data-stroke="on"] .lab::before,
[data-stroke="on"] .gcard::before,
[data-stroke="on"] .gpane::before,
[data-stroke="on"] .gnav::before,
[data-stroke="on"] .gdock::before,
/* the playful blocks. None of them is glass, so none has a
   lit rim for the stroke to lose to — the hairline is the
   only edge they can have, and it is the whole of what this
   control does for them. */
[data-stroke="on"] .esc-btn::before,
[data-stroke="on"] .slo-track::before,
[data-stroke="on"] .sek-skin::before {
  border-color: var(--pane-edge);}

/* ── the rim ─────────────────────────────────────────────────
   Every glass surface already drew a 1px ring in one flat
   colour. A flat rim is the single clearest tell that a thing
   is a rectangle with a border rather than a pane with
   thickness: real edges are lit unevenly, and evenly lit ones
   read as ink.

   So the ring becomes a gradient — bright at the corner
   facing the light, almost nothing along the sides that run
   edge-on to it, and a second weaker catch at the far corner
   where the light has come through the pane and out again.

   Painting a gradient in a border needs the border box filled
   and the padding box punched out of it, which is what the
   two masks do: one covers the whole element, one covers only
   the inside, and compositing them apart leaves the rim. It
   is the only way to get a gradient into a border without a
   second element to draw it on.

   Only under glass. Flat keeps its honest hairline, which is
   what a solid pane should have. */
[data-surface="glass"] .lab::before,
[data-surface="glass"] .gcard::before,
[data-surface="glass"] .cmd::before,
[data-surface="glass"] .gpane::before,
[data-surface="glass"] .gnav::before,
[data-surface="glass"] .gdock::before {
  border-color: transparent;
  background:
    linear-gradient(
      142deg,
      rgba(255, 255, 255, var(--g-edge-hi, 0)) 0%,
      rgba(255, 255, 255, var(--g-edge-lo, 0)) 26%,
      rgba(255, 255, 255, var(--g-edge-lo, 0)) 62%,
      rgba(255, 255, 255, var(--g-edge-far, 0)) 100%
    ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;}

/* ── thickness ───────────────────────────────────────────────
   Three marks, and between them they are the difference
   between a pane and a wash.

   The lit line along the top is where light enters the edge of
   a real sheet. The ring is the sheet's own thickness seen
   from straight on. The shadow underneath says the pane is
   ABOVE the page rather than painted onto it — which is the
   one thing a backdrop-filter alone can never say, because a
   filter has no depth.

   All three ride on --glass and are gone at zero, where the
   fallbacks take over and the surface is flat. */
[data-surface="glass"] .lab,
[data-surface="glass"] .gcard,
[data-surface="glass"] .cmd,
[data-surface="glass"] .gpane,
[data-surface="glass"] .gnav,
[data-surface="glass"] .gdock {
  box-shadow: var(--g-shadow,
    /* the top face, catching light through the thickness of
       the pane — inside the rim, not on it */
    inset 0 1px 0 rgba(255, 255, 255, var(--g-spec, 0)),
    /* And what it casts on the page below — wide and soft
       rather than tight and close. It is a different claim
       about how far the pane floats, and the softer one is
       what reads as a sheet resting above the page instead of
       a card stuck to it. */
    0 10px 40px rgba(var(--shadow-rgb), var(--g-lift, 0)));}

[data-surface="flat"] .lab,
[data-surface="flat"] .gcard,
[data-surface="flat"] .cmd,
[data-surface="flat"] .gnav,
[data-surface="flat"] .gdock {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;}

/* ── a flat rim, for comparison ──────────────────────────────
   Reverts the graded rim to one colour all the way round —
   which is what almost every published glass snippet does,
   Apple's own included. It is here so the two can be judged
   against each other on the same ground rather than taken on
   trust, and it applies only inside a test board. */
.gtry[data-rim="flat"] .lab::before,
.gtry[data-rim="flat"] .gcard::before,
.gtry[data-rim="flat"] .cmd::before,
.gtry[data-rim="flat"] .gpane::before,
.gtry[data-rim="flat"] .gnav::before,
.gtry[data-rim="flat"] .gdock::before {
  border-color: var(--try-edge, transparent);
  background: none;
  -webkit-mask: none;
  mask: none;}

.cmd-root {
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ink: #000000;
  --ink-rgb: 0, 0, 0;
  --ink-4: #6a6a6a;
  --ink-5: #9a9a9a;
  --fill-on: #000000;
  --fill-on-rgb: 0, 0, 0;
  --fill-slab: #ffffff;
  --board: #ffffff;
  --on-ink: #ffffff;
  --pane: #ffffff;
  --pane-edge: rgba(0, 0, 0, 0.16);
  --shadow-rgb: 0, 0, 0;
  --g-edge-hi: 0.9;
  --g-edge-lo: 0.14;
  --g-edge-far: 0.28;
  --g-spec: 0.72;
  --g-lift: 0.16;
  max-width: 100%;
}
.cmd input { font-size: 16px; }
/* D — command bar */
/* the group lays the two bodies out; the library moves them */
.cmd-goo {
  display: flex;
  align-items: center;
  gap: 8px;}

/* NO 1/k CORRECTION HERE. These are morph items, and morph
   positions its bodies with a CSS transform in layout pixels,
   which the card's own scale then handles correctly. The
   correction exists for `move`, which measures screen pixels —
   applying it to morph shrinks the silhouette below the
   element it belongs to. */
.cmd-slot { display: block; }

.cmd {
  position: relative;
  display: flex; align-items: center;
  gap: 6px;
/* ── THE BAR AND THE BUTTON TRADE ONE WIDTH ───────────────
     Both states add up to the same 320 the component sits in —
     274 + 8 + 38 at rest, 266 + 8 + 46 once the button opens
     out. Holding the total fixed is not tidiness: this is a
     card on the wall, and a box that changes size re-packs
     every column around it. So the bar gives up exactly what
     the button takes, and the outer box never moves. */
  width: 274px;
  transition: width 340ms cubic-bezier(0.24, 1.34, 0.38, 1);
  /* smaller: 54 was a bar you could have put two lines in */
  height: 56px;
  /* the right side is padded for the mic rather than for text */
  padding: 0 8px 0 20px;
  border-radius: var(--cmd-r, 28px);
  /* no background: <Liquid> paints the bar, and a fill here
     would lay a hard rectangle over the liquid edge exactly
     where the button is leaving it */
  background: none;
  isolation: isolate;}

.cmd[data-has="true"] { width: 266px; }

/* ── NOT THE STROKE'S ANY MORE, THE GLASS'S ─────────────────
   Stroke is gone from this component, so on a flat surface
   this border stays transparent and draws nothing. It is kept
   because the GLASS surface needs a box to paint its lit rim
   into — a gradient cannot go in a border without a second
   element to carry it, and this is that element. Delete it and
   the bar loses its rim under glass. */
.cmd::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;}

.cmd input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: none;
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--fill-on, var(--ink));}

.cmd input::placeholder { color: var(--ink-5); }

/* one slot, two faces, stacked so neither one moves the other */
/* Inside the bar, and it does not travel. Fading is the whole
   of what it does — see the note in the component. */
.cmd-mic {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 999px;
  background: none;
  color: var(--ink-4);
  cursor: pointer;
  /* it only fades. No scale, no travel — the one thing it does
     is stop being there. */
  opacity: 0;
  transition: opacity 150ms ease;}

.cmd-mic[data-show="true"] { opacity: 1; }

.cmd-mic:hover { color: var(--fill-on, var(--ink)); }

.cmd-go {
  position: relative;
  flex: none;
  width: 38px; height: 38px;
  border: 0; border-radius: 999px;
  /* NOTHING AT REST. Tucked inside the bar it is a body for
     the goo to split from and nothing more — no disc, and its
     glyph is hidden too, so what you see is one bar. */
  background: none;
  color: var(--fill-slab, var(--on-ink));
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0;
  transition:
    background 220ms ease, color 220ms ease, opacity 160ms ease,
    width 340ms cubic-bezier(0.24, 1.34, 0.38, 1),
    height 340ms cubic-bezier(0.24, 1.34, 0.38, 1),
    transform 320ms cubic-bezier(0.24, 1.34, 0.38, 1);}

/* it arrives at full size, into the room the bar just made */
.cmd-go[data-on="true"] { opacity: 1; width: 46px; height: 46px; }

/* ── THE SAME MATERIAL AS THE BAR ───────────────────────────
   It was an ink disc with a light glyph, which made the thing
   that splits off a different object from the thing it split
   FROM — and the goo's whole claim is that they are one body
   separating. Same fill as the field, ink glyph, and the seam
   between them while they neck is now continuous. */
.cmd-go[data-on="true"] {
  background: var(--fill-slab, var(--board));
  color: var(--fill-on, var(--ink));}

/* ── TWO STATES, AND NEITHER HAS AN EDGE ────────────────────
   Focused with an empty field, the button is the same material
   as the bar it just split out of: present and offered, asking
   for nothing. The first character makes it the thing you are
   about to press, and it says so by filling — the only solid
   object in the component, which is what a primary action is.

   Filled, not outlined, in both: the only edge either state
   can ever have is the hairline the Stroke switch draws
   below. */
.cmd-go[data-armed="true"] {
  background: var(--fill-on, var(--ink));
  color: var(--fill-slab, var(--on-ink));}

.cmd-go:active { transform: scale(0.92); }

/* ── the rim ─────────────────────────────────────────────────
   Every glass surface already drew a 1px ring in one flat
   colour. A flat rim is the single clearest tell that a thing
   is a rectangle with a border rather than a pane with
   thickness: real edges are lit unevenly, and evenly lit ones
   read as ink.

   So the ring becomes a gradient — bright at the corner
   facing the light, almost nothing along the sides that run
   edge-on to it, and a second weaker catch at the far corner
   where the light has come through the pane and out again.

   Painting a gradient in a border needs the border box filled
   and the padding box punched out of it, which is what the
   two masks do: one covers the whole element, one covers only
   the inside, and compositing them apart leaves the rim. It
   is the only way to get a gradient into a border without a
   second element to draw it on.

   Only under glass. Flat keeps its honest hairline, which is
   what a solid pane should have. */
[data-surface="glass"] .lab::before,
[data-surface="glass"] .gcard::before,
[data-surface="glass"] .cmd::before,
[data-surface="glass"] .gpane::before,
[data-surface="glass"] .gnav::before,
[data-surface="glass"] .gdock::before {
  border-color: transparent;
  background:
    linear-gradient(
      142deg,
      rgba(255, 255, 255, var(--g-edge-hi, 0)) 0%,
      rgba(255, 255, 255, var(--g-edge-lo, 0)) 26%,
      rgba(255, 255, 255, var(--g-edge-lo, 0)) 62%,
      rgba(255, 255, 255, var(--g-edge-far, 0)) 100%
    ) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;}

/* ── thickness ───────────────────────────────────────────────
   Three marks, and between them they are the difference
   between a pane and a wash.

   The lit line along the top is where light enters the edge of
   a real sheet. The ring is the sheet's own thickness seen
   from straight on. The shadow underneath says the pane is
   ABOVE the page rather than painted onto it — which is the
   one thing a backdrop-filter alone can never say, because a
   filter has no depth.

   All three ride on --glass and are gone at zero, where the
   fallbacks take over and the surface is flat. */
[data-surface="glass"] .lab,
[data-surface="glass"] .gcard,
[data-surface="glass"] .cmd,
[data-surface="glass"] .gpane,
[data-surface="glass"] .gnav,
[data-surface="glass"] .gdock {
  box-shadow: var(--g-shadow,
    /* the top face, catching light through the thickness of
       the pane — inside the rim, not on it */
    inset 0 1px 0 rgba(255, 255, 255, var(--g-spec, 0)),
    /* And what it casts on the page below — wide and soft
       rather than tight and close. It is a different claim
       about how far the pane floats, and the softer one is
       what reads as a sheet resting above the page instead of
       a card stuck to it. */
    0 10px 40px rgba(var(--shadow-rgb), var(--g-lift, 0)));}

[data-surface="flat"] .lab,
[data-surface="flat"] .gcard,
[data-surface="flat"] .cmd,
[data-surface="flat"] .gnav,
[data-surface="flat"] .gdock {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;}

/* ── a flat rim, for comparison ──────────────────────────────
   Reverts the graded rim to one colour all the way round —
   which is what almost every published glass snippet does,
   Apple's own included. It is here so the two can be judged
   against each other on the same ground rather than taken on
   trust, and it applies only inside a test board. */
.gtry[data-rim="flat"] .lab::before,
.gtry[data-rim="flat"] .gcard::before,
.gtry[data-rim="flat"] .cmd::before,
.gtry[data-rim="flat"] .gpane::before,
.gtry[data-rim="flat"] .gnav::before,
.gtry[data-rim="flat"] .gdock::before {
  border-color: var(--try-edge, transparent);
  background: none;
  -webkit-mask: none;
  mask: none;}

/* ── flat panes ────────────────────────────────────────────
   Set data-surface="flat" on any ancestor and every glass
   surface under it becomes a solid fill with a hairline. The
   inner buttons already sit on rgba(var(--ink-rgb), 0.05)
   with no border, which is what flat wants anyway, so they
   need nothing.

   The frost is switched off at the element rather than through
   a token. A var() holding a url() filter cannot be validated
   at parse time, so the browser would treat it as invalid at
   computed-value time and drop the property outright — which
   breaks the two-declaration fallback the glass depends on. */
/* ══ stroke ═════════════════════════════════════════════════
   Whether a component draws a hairline round itself. OFF by
   default, which is the change: every glass surface carried
   one unconditionally, and a grey line round everything makes
   a wall of components look like a wall of boxes rather than
   a wall of things.

   The line is not load-bearing. A flat pane is a fill against
   a different fill and reads on its own; the ring was there
   to sharpen an edge that was already there.

   Placed ABOVE the glass rules on purpose. Glass draws its
   own lit rim, and that rim is the material rather than a
   stroke — it is what gives a pane thickness. So glass wins
   the border wherever the two meet, and Stroke governs the
   drawn line that flat surfaces would otherwise have. */
[data-stroke="on"] .lab::before,
[data-stroke="on"] .gcard::before,
[data-stroke="on"] .gpane::before,
[data-stroke="on"] .gnav::before,
[data-stroke="on"] .gdock::before,
/* the playful blocks. None of them is glass, so none has a
   lit rim for the stroke to lose to — the hairline is the
   only edge they can have, and it is the whole of what this
   control does for them. */
[data-stroke="on"] .esc-btn::before,
[data-stroke="on"] .slo-track::before,
[data-stroke="on"] .sek-skin::before {
  border-color: var(--pane-edge);}

/* ══ Seek ═══════════════════════════════════════════════════
   A search icon that becomes a search field, as one object.

   Everything below is width and radius. There is no crossfade
   between two components, no second element to keep in sync,
   and nothing that animates on a clock of its own — the box
   is sprung in JS and every other value here is derived from
   how far through that spring it is. That is the whole reason
   the transformation reads as continuous: there is only one
   number, so nothing can arrive at the wrong time relative to
   anything else. */
.sek {
  --bg: #ffffff;
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --g-blur: 12px;
  --g-sat: 140%;
  --g-bright: 105%;
  --ink: #000000;
  --ink-2: #2b2c30;
  --ink-3: #3a3a3a;
  --ink-4: #6a6a6a;
  --ink-5: #9a9a9a;
  --ink-rgb: 0, 0, 0;
  --pane: #ffffff;
  --pane-edge: rgba(0, 0, 0, 0.16);
  /* the frame is the composition. It never moves, which is
     what gives the magnet a stable home to measure from and
     keeps the object centred at every width. */
  position: relative;
  display: grid;
  place-items: center;
  /* ── THE FRAME IS `--frame`, and it was not ──────────────
     Seek.tsx computes `--frame` and `--frameh` from the width
     that is actually set — its note explains why at length:
     the wall fits a card by the BOUNDING BOX, so a frame sized
     for the widest the knob goes makes every smaller setting
     draw smaller. It has been publishing those two numbers to
     a stylesheet that ignored them and used a hard 380 x 96.

     Measured on a phone card: the frame reserved 380 for a
     field set to 320, the wall fitted 380 into 260, and the
     shut button — the only thing drawn at rest — came out at
     44px. The 36px of nothing was being paid for in the one
     part of the object you are looking at.

     With the variables wired up the knob does what its own
     comment says it does, and the frame is tight to what is
     set on every screen. */
  width: var(--frame, 380px);
  height: var(--frameh, 96px);
  font-family: var(--font-ui);}

/* ── the object ─────────────────────────────────────────────
   Width is the state. Height is fixed, so the radius can be
   derived from the width rather than animated beside it —
   at 44 the corner is 22 and the shape IS a circle, and there
   is no frame where the two disagree.

   The surface is the quietest thing that still reads as an
   object: a low-alpha ink fill and a hairline. No shadow, no
   glass, no gradient — at this size any of them would be the
   loudest thing on an otherwise empty page. */
.sek-skin {
  position: relative;
  width: var(--w);
  /* --shut, NOT a number. The component sets the closed width
     and the height from one constant precisely so they cannot
     drift, and its own comment says so: "the skin's height and
     the closed width are the same number by definition, and
     two places holding it is two places to get it wrong."
     Hard-coded here at 44 against a --shut of 64, the closed
     state was a 64x44 lozenge — a circle that is not round is
     the one shape everybody notices. */
  height: var(--shut);
  /* ── ONE SHAPE RULE ─────────────────────────────────────
     Fully round, at every width. The radius used to
     interpolate 22 → 13, which was a second thing to keep in
     agreement with the first; a stadium corner needs no
     agreement at all. At --shut wide it is a circle and at 320
     a pill, and those are the same rule rather than two ends
     of a tween. Height is fixed, so it cannot be anything
     else. */
  /* the Corner knob's, and ::before and .sek-hit inherit it */
  border-radius: var(--sek-r, 999px);
  /* ── FLAT, and glass only if asked ──────────────────────
     `--pane` is the bench's own material token, so this
     follows the Glass dial rather than deciding for itself:
     at 0 it resolves to a solid board and at 100 to the
     frosted pane. It was a translucent ink wash with an inset
     hairline, which is glass by every visual measure while
     answering to no control — the worst of both, since it
     could not be turned off.

     And it picks up Fill for free. Flat resolves --pane to
     --board, and Fill redeclares --board, so a dark fill
     gives a dark pill without this rule naming a colour. */
  background: var(--pane);
  -webkit-backdrop-filter:
    blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%));
  backdrop-filter:
    blur(var(--g-blur, 2px)) saturate(var(--g-sat, 150%)) brightness(var(--g-bright, 100%));
  isolation: isolate;
  /* the magnet, and the press, on one transform — two
     transforms on one element is one of them winning */
  transform: translate(var(--lx), var(--ly)) scale(var(--sk, 1));
  transition:
    transform 260ms cubic-bezier(0.22, 0.9, 0.28, 1),
    background 220ms ease;
  /* the field is inside from the first frame; this is what
     keeps it from spilling out of a 44px circle */
  overflow: hidden;}

/* the edge, and NOTHING until Stroke asks for it. A hairline
   nobody switched on is a hairline the control cannot remove,
   which is the same bug the background had. */
.sek-skin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 2;}

/* Hover: it comes up a hair and lifts off the ground. Both
   are small enough to be felt rather than seen, which is the
   point — a hover state you notice is a hover state that has
   said too much. */
.sek:not([data-open="true"]) .sek-skin:hover {
  --sk: 1.045;
  /* the surface answers, without drawing an edge it was not
     given — brightness rather than an outline */
  --g-bright: 104%;}

/* pressed: it yields before it moves. A thing that gives
   under a click reads as having been pushed; a thing that
   only expands reads as having been triggered. */
.sek[data-press="true"] .sek-skin {
  --sk: 0.93;
  transition: transform 90ms cubic-bezier(0.4, 0, 0.6, 1);}

/* the field is a text target, and the object is a button */
.sek[data-open="true"] .sek-skin { cursor: text; }

/* ── the lens ───────────────────────────────────────────────
   Fixed to the box's left inset and never animated. At the
   shut width that inset centres it; at the open width it is
   the field's padding. The lens crossing the page is the box
   growing around a mark that stayed still. */
.sek-lens {
  position: absolute;
  left: var(--inset);
  top: 50%;
  width: var(--lens);
  height: var(--lens);
  margin-top: calc(var(--lens) / -2);
  fill: none;
  stroke: var(--ink-3);
  /* 1.5, AND THE NUMBER CANNOT BE COMPARED TO LUCIDE'S.
     Every lucide glyph is drawn on a 24-unit grid; this one is
     drawn on 18. A stroke-width of u paints at u/viewBox of
     the icon's size, so lucide's 2-on-24 is 0.0833 and a 2
     here would be 0.1111 — the same number, a third heavier.
     1.5/18 is 0.0833 exactly, which is the radial menu's
     weight and the nav's.

     The value that stood here was 1.6 (0.0889). That was very
     nearly right; it was changed to 2 on the assumption that
     the two viewBoxes matched, and they never did. */
  stroke-width: 1.5;
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke 200ms ease, stroke-width 200ms ease;}

.sek-skin:hover .sek-lens { stroke: var(--ink); }

.sek[data-open="true"] .sek-lens { stroke: var(--ink-4); }

/* typing: the lens thickens a hair and darkens. One beat per
   burst, not one per keystroke — a mark that flickers at the
   rate of your typing is noise wearing the costume of
   feedback. */
/* still "a hair", and still the same proportion of the base it
   always was — 1.9 was to 1.6 as 1.8 is to 1.5 */
.sek[data-busy="true"] .sek-lens { stroke: var(--ink-2); stroke-width: 1.8; }

/* ── the field ──────────────────────────────────────────────
   Present from the first frame and revealed by --say, which
   is the last third of the width's own progress. It slides a
   few pixels as it arrives, from the left, so it reads as
   having come out of the lens rather than as having faded up
   where it stood. */
.sek-field {
  position: absolute;
  left: calc(var(--inset) + var(--lens) + 11px);
  right: 14px;
  top: 0;
  height: 100%;
  border: 0;
  background: none;
  font: inherit;
  /* 14 is the NAV's size, and the nav's field is 44px tall.
     This pill is --shut, 64, and carrying header type in it
     left the words looking like a caption inside the object
     rather than its content. 18 restores roughly the
     proportion the bar has — 0.28 of the height against the
     bar's 0.32 — on a control that is the whole component
     rather than one item in a row of them. */
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink);
  outline: none;
  opacity: var(--say);
  transform: translateX(calc((1 - var(--say)) * -6px));
  /* until it is most of the way open it is not a target, and
     a caret that can be placed in a 44px circle is a caret in
     the wrong place */
  pointer-events: var(--say-hit, none);}

.sek[data-open="true"] .sek-field { --say-hit: auto; }

.sek-field::placeholder { color: var(--ink-5); }

/* the way in, while there is one */
.sek-hit {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;}

.sek-hit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--ink-rgb), 0.4);}


/* Tokens live on the component root. -rgb values are three bare numbers.
   Nothing here is added to :root. */
.gdock,
.gpane {
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --g-blur: 12px;
  --g-bright: 100%;
  --g-edge-far: 0.28;
  --g-edge-hi: 0.9;
  --g-edge-lo: 0.14;
  --g-lift: 0.16;
  --g-sat: 100%;
  --g-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 40px rgba(0, 0, 0, 0.16);
  --g-spec: 0.72;
  --ink: #000000;
  --ink-rgb: 0, 0, 0;
  --on-ink: #ffffff;
  --pane: #ffffff;
  --pane-edge: rgba(0, 0, 0, 0.2);
  --shadow-rgb: 0, 0, 0;
  --try-edge: rgba(0, 0, 0, 0.22);
  font-family: var(--font-mono);
  color: var(--ink);
}

.cmd-host > div {
  --board: #ffffff;
  --fill-on: #000000;
  --fill-slab: #ffffff;
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --g-edge-far: 0.28;
  --g-edge-hi: 0.9;
  --g-edge-lo: 0.14;
  --g-lift: 0.16;
  --g-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 40px rgba(0, 0, 0, 0.16);
  --g-spec: 0.72;
  --ink: #000000;
  --ink-4: rgba(0, 0, 0, 0.42);
  --ink-5: rgba(0, 0, 0, 0.32);
  --on-ink: #ffffff;
  --shadow-rgb: 0, 0, 0;
  --try-edge: rgba(0, 0, 0, 0.22);
  font-family: var(--font-ui);
  color: var(--ink);
}

.sek {
  --bg: #ffffff;
  --font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --g-blur: 12px;
  --g-bright: 100%;
  --g-sat: 100%;
  --ink: #000000;
  --ink-2: rgba(0, 0, 0, 0.72);
  --ink-3: rgba(0, 0, 0, 0.55);
  --ink-4: rgba(0, 0, 0, 0.42);
  --ink-5: rgba(0, 0, 0, 0.32);
  --ink-rgb: 0, 0, 0;
  --pane: #ffffff;
  --pane-edge: rgba(0, 0, 0, 0.2);
  color: var(--ink);
  font-family: var(--font-ui);
}