/* [project]/src/app/catalog/catalog.css [app-client] (css) */
.zc {
  --ink: var(--nc-ink);
  --ink-2: var(--nc-ink-2);
  --muted: var(--nc-muted);
  --faint: var(--nc-faint);
  --line: var(--nc-line);
  --line-2: var(--nc-line-strong);
  --ground: var(--nc-bg);
  --paper: var(--nc-surface);
  --paper-2: var(--nc-surface-2);
  --paper-3: var(--nc-surface-3);
  --hover: var(--nc-hover);
  --leaf: var(--nc-primary);
  --leaf-hover: var(--nc-primary-hover);
  --on-leaf: var(--nc-on-primary);
  --leaf-ink: var(--nc-accent-ink);
  --leaf-soft: var(--nc-accent-soft);
  --sun-ink: var(--nc-sun-ink);
  --sun-soft: var(--nc-sun-soft);
  --teal: #1a8f7d;
  --err: var(--nc-err);
  --err-bg: var(--nc-err-bg);
  --warn: var(--nc-warn);
  --warn-bg: var(--nc-warn-bg);
  --ok-bg: var(--nc-ok-bg);
  --tone-good: #3f9a2e;
  --tone-fair: #d4a020;
  --tone-weak: #e0782b;
  --tone-poor: #d0402f;
  --tone-idle: #17201221;
  --station: #141414;
  --station-ink: #ededed;
  --station-dim: #a1a1a1;
  --f-display: var(--nc-font-display);
  --f-ui: var(--nc-font-sans);
  --f-mono: var(--nc-font-mono);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --back: cubic-bezier(.2, 1.2, .35, 1);
  --top: 72px;
  color: var(--ink);
  font: 400 15px/1.5 var(--f-ui);
  letter-spacing: normal;
  word-spacing: normal;
}

html[data-theme="dark"] .zc {
  --teal: #3dd1bc;
  --tone-good: #8fd566;
  --tone-fair: #e8c04a;
  --tone-weak: #f0954a;
  --tone-poor: #ff7b72;
  --tone-idle: #ffffff24;
  --station: #1e1e21;
  --station-dim: #a6a6a6;
}

:is(.zr-app .zc, .zc.zc-layer) :where(h1, h2, h3, p) {
  font: inherit;
  letter-spacing: inherit;
  text-wrap: pretty;
  margin: 0;
}

:is(.zr-app .zc, .zc.zc-layer) :where(button, select, input, textarea) {
  min-height: 0;
  font: inherit;
  letter-spacing: normal;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
}

:is(.zr-app .zc, .zc.zc-layer) :where(button) {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

:is(.zr-app .zc, .zc.zc-layer) :where(button:disabled, [aria-disabled="true"]) {
  opacity: 1;
  cursor: not-allowed;
}

:is(.zr-app .zc, .zc.zc-layer) :where(select, textarea) {
  max-width: 100%;
  box-shadow: none;
  font-size: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.zr-app .zc input:not([type="checkbox"]):not([type="radio"]), .zc.zc-layer input:not([type="checkbox"]):not([type="radio"]) {
  max-width: 100%;
  min-height: 0;
  box-shadow: none;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.zr-app .zc input:is([type="checkbox"], [type="radio"]), .zc.zc-layer input:is([type="checkbox"], [type="radio"]) {
  width: 16px;
  height: 16px;
  min-height: 16px;
  accent-color: var(--leaf);
  flex: none;
  margin: 0;
}

:is(.zr-app .zc, .zc.zc-layer) :where(small) {
  font-size: inherit;
  color: inherit;
}

.zc code {
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.zc :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zc svg {
  flex: none;
}

.zc :focus-visible {
  outline: 2px solid var(--nc-focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

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

.zc:not(.zc-layer) {
  max-width: 1360px;
  margin: 0 auto;
  padding: 26px clamp(16px, 3vw, 40px) 140px;
}

.zc-stage {
  view-transition-name: zc-stage;
}

.zc .zc-title {
  font: 400 clamp(48px, 6.4vw, 104px)/.95 var(--f-display);
  letter-spacing: -.05em;
  text-wrap: balance;
}

.zc .zc-lead {
  max-width: 60ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.zc .zc-stats {
  color: var(--ink-2);
  font: 400 14.5px/1.3 var(--f-ui);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  display: flex;
}

.zc-stats span {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zc .zc-h2 {
  font: 500 28px/1.15 var(--f-display);
  letter-spacing: -.025em;
  margin-bottom: 16px;
}

.zc .zc-inline-link, .zc .zc-aside-link a {
  color: var(--leaf);
  font-weight: 500;
  text-decoration: none;
}

.zc .zc-inline-link:hover, .zc .zc-aside-link a:hover {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.zc .zc-aside-link {
  text-align: center;
  margin-top: 34px;
  font-size: 15px;
}

.zc-level {
  display: grid;
}

.zc-crumbs {
  view-transition-name: zc-crumbs;
  margin-bottom: 6px;
}

.zc-crumbs ol {
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  list-style: none;
  display: flex;
}

.zc-crumbs li {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.zc-crumbs a {
  color: var(--ink-2);
  border-radius: 6px;
  text-decoration: none;
}

.zc-crumbs a:hover {
  color: var(--leaf);
}

.zc-crumbs svg {
  width: 14px;
  height: 14px;
  color: var(--faint);
}

.zc-crumbs [aria-current] {
  color: var(--faint);
}

.zc-keybar {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 18px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 12px;
  display: flex;
}

.zc-keybar-gap {
  flex: 1;
}

.zc .zc-keybar-out {
  color: var(--muted);
  align-items: center;
  gap: 10px;
  padding-left: 4px;
  font-size: 14px;
  display: flex;
}

.zc-keybar-out svg, .zc-keysel > svg {
  width: 18px;
  height: 18px;
  color: var(--leaf);
}

.zc-keysel {
  background: var(--paper-3);
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 6px 0 12px;
  display: inline-flex;
}

.zr-app .zc-keysel select {
  cursor: pointer;
  min-width: 160px;
  height: 40px;
  padding-right: 8px;
  font-weight: 500;
}

.zc-keysel small {
  background: var(--leaf-soft);
  color: var(--leaf-ink);
  font: 500 12px/1.3 var(--f-ui);
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 9px;
}

.zc .zc-btn b {
  background: var(--err-bg);
  font: 600 12px/1.6 var(--f-mono);
  border-radius: 999px;
  margin-left: 2px;
  padding: 0 7px;
}

.zc .zc-waiting {
  background: var(--leaf-soft);
  color: var(--ink-2);
  border-radius: 16px;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
}

html[data-theme="dark"] .zc .zc-waiting {
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.zc-dot {
  background: var(--leaf);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px var(--leaf-soft);
  border-radius: 50%;
  flex: none;
  margin-top: 6px;
}

.zc .zc-btn {
  min-height: 40px;
  font: 500 14px/1 var(--f-ui);
  white-space: nowrap;
  color: var(--ink);
  transition: background-color .25s, box-shadow .25s, color .25s, transform .3s var(--back);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  text-decoration: none;
  display: inline-flex;
}

.zc .zc-btn svg {
  width: 16px;
  height: 16px;
}

.zc .zc-btn:active:not(:disabled) {
  transform: scale(.97);
}

.zc .zc-btn:disabled {
  opacity: .5;
}

.zc .zc-btn-sm {
  min-height: 34px;
  padding: 0 13px;
  font-size: 13px;
}

.zc .zc-btn-primary {
  background: var(--leaf);
  color: var(--on-leaf);
}

.zc .zc-btn-primary:hover:not(:disabled) {
  background: var(--leaf-hover);
}

.zc .zc-btn-line {
  box-shadow: inset 0 0 0 1px var(--line-2);
  background: none;
}

.zc .zc-btn-line:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.zc .zc-btn-ghost {
  color: var(--muted);
  background: none;
}

.zc .zc-btn-ghost:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.zc .zc-btn-danger, .zc .zc-danger {
  color: var(--err);
}

.zc .zc-icon {
  width: 36px;
  height: 36px;
  color: var(--muted);
  border-radius: 50%;
  place-items: center;
  transition: background-color .2s, color .2s;
  display: inline-grid;
}

.zc .zc-icon:hover {
  background: var(--hover);
  color: var(--ink);
}

.zc .zc-icon svg {
  width: 17px;
  height: 17px;
}

.zc .zc-icon-sm {
  width: 26px;
  height: 26px;
}

.zc .zc-icon-sm svg {
  width: 14px;
  height: 14px;
}

.zc .zc-icon[data-busy] svg {
  animation: 1s linear infinite zc-spin;
}

.zc .zc-link {
  color: var(--ink);
  text-align: left;
  font-weight: 500;
  text-decoration: none;
}

.zc .zc-link:hover {
  color: var(--leaf);
}

.zc .zc-small {
  font-size: 13px;
}

.zc .zc-faint {
  color: var(--faint);
}

.zc .zc-label {
  color: var(--muted);
  font-size: 13px;
}

.zc .zc-note {
  background: var(--paper-3);
  color: var(--ink-2);
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

.zc-seg {
  background: var(--paper-3);
  border-radius: 999px;
  padding: 3px;
  display: inline-flex;
}

.zc .zc-seg button {
  min-height: 30px;
  color: var(--muted);
  border-radius: 999px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 500;
  transition: background-color .25s, color .25s;
}

.zc .zc-seg button[aria-checked="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--nc-shadow-1);
}

.zc .zc-seg button:disabled {
  opacity: .45;
}

.zc-badge {
  background: var(--paper-3);
  color: var(--ink-2);
  font: 500 11.5px/1.5 var(--f-ui);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  display: inline-flex;
}

.zc-badge svg {
  width: 12px;
  height: 12px;
}

.zc-badge-ok, .zc-tag-stable, .zc-verify-verified {
  background: var(--ok-bg);
  color: var(--leaf-ink);
}

.zc-badge-warn, .zc-verify-pending {
  background: var(--warn-bg);
  color: var(--warn);
}

.zc-badge-err, .zc-verify-failed {
  background: var(--err-bg);
  color: var(--err);
}

.zc-badge-sun, .zc-tag-trusted {
  background: var(--sun-soft);
  color: var(--sun-ink);
}

.zc-tag-cheap {
  color: var(--teal);
  background: #3dd1bc24;
}

.zc-tag-fast {
  color: #4f62a3;
  background: #5a6fae1f;
}

html[data-theme="dark"] .zc-tag-fast {
  color: #9fb0ef;
}

.zc-tag-quality {
  background: var(--leaf-soft);
  color: var(--leaf-ink);
}

.zc-tag-observing {
  background: var(--paper-3);
  color: var(--muted);
}

.zc-facet {
  gap: 10px;
  display: grid;
}

.zc .zc-facet h2 {
  color: var(--muted);
  font: 500 13px/1.3 var(--f-ui);
}

.zc-pmark {
  background: var(--paper);
  width: 24px;
  height: 24px;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 7px;
  place-items: center;
  display: grid;
}

.zc-pmark-all {
  box-shadow: none;
  opacity: .85;
  background: conic-gradient(from 210deg, #2f7a1f, #8fd566, #3dd1bc, #2f7a1f);
}

.zc-chips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.zc .zc-chips button {
  min-height: 30px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  font-size: 13px;
  transition: background-color .2s, box-shadow .2s;
  display: inline-flex;
}

.zc .zc-chips button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.zc-chips small {
  color: var(--faint);
  font: 400 11.5px/1 var(--f-mono);
}

.zc-chips button[aria-pressed="true"] small {
  color: inherit;
  opacity: .7;
}

.zc-switch {
  cursor: pointer;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  display: flex;
}

.zc-switch input {
  margin-top: 3px !important;
}

.zc-switch small {
  color: var(--faint);
  font: 400 11.5px/1 var(--f-mono);
  margin-left: 6px;
}

.zc-switch[data-disabled], .zc .zc-chips button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.zc-flap {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
}

.zc-flap > span[aria-hidden] {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}

.zc-flap i {
  transform-origin: 50% 55%;
  font-style: normal;
  display: inline-block;
}

.zc-flap i.fl {
  animation: zc-flap .14s var(--ease);
}

.zc-off {
  font: 500 13px/1.4 var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-flex;
}

.zc-off-save {
  background: var(--sun-soft);
  color: var(--sun-ink);
}

.zc-off-over {
  background: var(--paper-3);
  color: var(--muted);
}

.zc-off-none {
  color: var(--faint);
}

.zc :is(.zc-gsearch-field, .zc-field, .zc-osearch) input:focus-visible {
  outline: none;
}

.zc-seal {
  width: 72px;
  height: 72px;
  color: var(--ink);
  box-shadow: inset 0 1px 0 #fffffff2, inset 0 -12px 22px -14px color-mix(in srgb, var(--hue, #8fd566) 75%, transparent), 0 0 0 1px #1720120d, 0 18px 32px -18px #1720126b;
  transition: transform .6s var(--back);
  background: linear-gradient(145deg, #fffffffa, #ffffffc7 60%, #ffffffe6);
  border-radius: 30%;
  flex: none;
  place-items: center;
  display: grid;
  position: relative;
  transform: rotate(-6deg);
}

html[data-theme="dark"] .zc-seal {
  box-shadow: inset 0 1px 0 #ffffff38, inset 0 0 0 1px #ffffff0d, inset 0 -12px 22px -14px color-mix(in srgb, var(--hue, #8fd566) 65%, transparent), 0 18px 34px -16px #000000d9;
  background: linear-gradient(145deg, #ffffff2b, #ffffff0d 60%, #ffffff1c);
}

.zc-seal > svg, .zc-seal > img, .zc-seal > span {
  filter: drop-shadow(0 1px 1px #0000001a);
}

html[data-theme="dark"] .zc :is(.zc-seal, .zc-pmark) img[src$="/providers/moonshot.svg"] {
  filter: invert();
}

.zc-seal-lg {
  width: 112px;
  height: 112px;
  transform: rotate(-4deg);
}

.zc-seal-sm {
  border-radius: 30%;
  width: 40px;
  height: 40px;
  transform: none;
}

.zc-pmark {
  color: var(--ink);
}

.zc-hero {
  gap: 20px;
  max-width: 1000px;
  padding: 26px 0 30px;
  display: grid;
}

.zc-hero .zc-lead {
  margin-top: -4px;
}

.zc-gsearch {
  z-index: 30;
  max-width: 780px;
  margin-top: 6px;
  position: relative;
}

.zc-gsearch-field {
  background: var(--paper);
  height: 64px;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 22px 44px -32px #17201273;
  border-radius: 22px;
  align-items: center;
  gap: 14px;
  padding: 0 14px 0 22px;
  transition: box-shadow .25s;
  display: flex;
}

.zc-gsearch-field:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--leaf), 0 24px 52px -30px color-mix(in srgb, var(--leaf) 55%, transparent);
}

.zc-gsearch-field > svg {
  width: 22px;
  height: 22px;
  color: var(--muted);
}

.zr-app .zc-gsearch-field input {
  flex: 1;
  min-width: 0;
  height: 62px !important;
  font-size: 18px !important;
}

.zc-gsearch-field input::placeholder {
  color: var(--faint);
}

.zc-gsearch-field input::-webkit-search-cancel-button {
  display: none;
}

.zc-gsearch-field kbd {
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--faint);
  font: 400 13px/1.5 var(--f-mono);
  border-radius: 7px;
  padding: 2px 9px;
}

.zc-gsearch-list {
  overscroll-behavior: contain;
  background: var(--paper);
  max-height: min(62vh, 520px);
  box-shadow: inset 0 0 0 1px var(--line), var(--nc-shadow-2);
  animation: zc-pop .2s var(--ease);
  border-radius: 20px;
  padding: 8px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  overflow: auto;
}

.zc .zc-gsearch-group {
  color: var(--faint);
  padding: 10px 12px 4px;
  font-size: 12px;
}

.zc .zc-gsearch-none {
  color: var(--muted);
  padding: 14px 12px;
  font-size: 14.5px;
}

.zc-gsearch-opt {
  cursor: pointer;
  border-radius: 12px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 12px;
  font-size: 15px;
  display: grid;
}

.zc-gsearch-opt[aria-selected="true"] {
  background: var(--leaf-soft);
}

.zc-gsearch-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.zc-gsearch-opt code {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  color: var(--faint);
  overflow: hidden;
  font: 400 12px/1 var(--f-mono) !important;
}

.zc-kinds {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.zc-kind-group {
  flex-wrap: wrap;
  gap: 6px;
  display: inline-flex;
}

.zc .zc-kind-group button, .zc .zc-kind-toggle {
  min-height: 38px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-2);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  font-size: 14px;
  transition: background-color .25s, color .25s, box-shadow .25s;
  display: inline-flex;
}

.zc .zc-kind-group button:hover, .zc .zc-kind-toggle:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.zc .zc-kind-group button[aria-checked="true"], .zc .zc-kind-toggle[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.zc-kind-group small, .zc-kind-toggle small {
  font: 400 11.5px/1 var(--f-mono);
  opacity: .6;
}

.zc .zc-kind-group-sm button, .zc .zc-kind-toggle-sm {
  min-height: 34px;
  padding: 0 13px;
  font-size: 13.5px;
}

.zc .zc-tiles {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 292px), 1fr));
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.zc-tile {
  --hue: #8fd566;
  min-width: 0;
}

.zc-tile[data-intro] {
  animation: zc-tile-in var(--nc-slow, .32s) var(--back) calc(min(var(--i), 7) * var(--nc-stagger, 35ms)) both;
}

.zc .zc-tile-link {
  isolation: isolate;
  background: var(--paper);
  height: 100%;
  min-height: 250px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px #1720120a;
  transition: transform .55s var(--back), box-shadow .45s var(--ease);
  border-radius: 28px;
  grid-template-rows: auto 1fr;
  gap: 26px;
  padding: 22px 22px 24px;
  text-decoration: none;
  display: grid;
  position: relative;
  overflow: hidden;
}

.zc-tile-link:before {
  content: "";
  z-index: -1;
  background: radial-gradient(75% 65% at 14% 10%, color-mix(in srgb, var(--hue) 20%, transparent), transparent 72%);
  transition: opacity .45s;
  position: absolute;
  inset: 0;
}

.zc-tile-link:after {
  content: "";
  z-index: -1;
  background: radial-gradient(280px circle at var(--mx, 30%) var(--my, 20%), color-mix(in srgb, var(--hue) 15%, transparent), transparent 66%);
  opacity: 0;
  transition: opacity .35s;
  position: absolute;
  inset: 0;
}

.zc .zc-tile-link:hover {
  box-shadow: inset 0 0 0 1px var(--line-2), 0 28px 54px -32px color-mix(in srgb, var(--hue) 60%, #1720128c);
  transform: translateY(-4px);
}

.zc-tile-link:hover:after {
  opacity: 1;
}

.zc-tile-link:hover .zc-seal {
  transform: rotate(0) scale(1.05);
}

.zc-tile-body {
  align-content: end;
  gap: 9px;
  min-width: 0;
  display: grid;
}

.zc-tile-name {
  font: 500 28px/1.05 var(--f-display);
  letter-spacing: -.03em;
}

.zc-tile-meta {
  color: var(--ink-2);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 14px;
  display: flex;
}

.zc-tile-list {
  -webkit-line-clamp: 2;
  color: var(--faint);
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.zc-tile-skel {
  height: 250px;
}

.zc-tile-skel .zc-skeleton {
  border-radius: 28px;
  height: 100%;
}

.zc-phead {
  align-items: center;
  gap: 30px;
  padding: 18px 0 26px;
  display: flex;
}

.zc-phead-text {
  gap: 14px;
  min-width: 0;
  display: grid;
}

.zc .zc-title-l2 {
  font-size: clamp(44px, 5.4vw, 84px);
}

.zc-ftools {
  top: var(--top);
  z-index: 14;
  background: linear-gradient(var(--ground) 78%, color-mix(in srgb, var(--ground) 0%, transparent));
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 -8px;
  padding: 12px 8px;
  display: flex;
  position: sticky;
}

.zc-ftools-gap {
  flex: 1;
}

.zc-field {
  background: var(--paper);
  min-width: 300px;
  height: 42px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 14px;
  transition: box-shadow .2s;
  display: flex;
}

.zc-field:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--leaf);
}

.zc-field > svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.zr-app .zc-field input {
  flex: 1;
  min-width: 0;
  height: 40px !important;
  font-size: 14.5px !important;
}

.zc-field input::-webkit-search-cancel-button {
  display: none;
}

.zc-select {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: inline-flex;
}

.zr-app .zc-select select, .zc.zc-layer .zc-select-plain, .zr-app .zc .zc-select-plain {
  background: var(--paper);
  height: 38px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 14px;
}

.zc .zc-seg button svg {
  width: 16px;
  height: 16px;
}

.zc .zc-seg button {
  place-items: center;
  display: inline-grid;
}

.zc .zc-fgrid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.zc-fcard {
  min-width: 0;
  animation: zc-card-in var(--nc-slow, .32s) var(--ease) calc(min(var(--i), 7) * var(--nc-stagger, 35ms)) both;
}

.zc .zc-fcard-link {
  background: var(--paper);
  width: 100%;
  height: 100%;
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .5s var(--back), box-shadow .35s var(--ease);
  border-radius: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head ctx"
                       "kinds kinds"
                       "desc desc"
                       "off sell"
                       "rel rel";
  align-content: start;
  gap: 12px 16px;
  padding: 22px;
  text-decoration: none;
  display: grid;
  position: relative;
}

.zc .zc-fcard-link:hover {
  box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 46px -32px #17201280;
  transform: translateY(-3px);
}

.zc-fcard-head {
  grid-area: head;
  gap: 5px;
  min-width: 0;
  display: grid;
}

.zc-fcard-name {
  font: 500 22px/1.15 var(--f-display);
  letter-spacing: -.025em;
}

.zc .zc-fcard-id {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--faint);
  font: 400 12px/1.3 var(--f-mono);
  overflow: hidden;
}

.zc-fcard-ctx {
  grid-area: ctx;
  align-content: start;
  justify-items: end;
  gap: 2px;
  display: grid;
}

.zc-fcard-ctx b {
  font: 500 19px/1 var(--f-mono);
  letter-spacing: -.02em;
}

.zc-fcard-ctx small {
  color: var(--faint);
  font-size: 11.5px;
}

.zc-fgrid:not([data-layout="list"]) .zc-fcard-ctx > .zc-faint {
  visibility: hidden;
}

.zc-fcard-kinds {
  flex-wrap: wrap;
  grid-area: kinds;
  gap: 6px;
  display: flex;
}

.zc-fcard-desc {
  -webkit-line-clamp: 2;
  color: var(--muted);
  -webkit-box-orient: vertical;
  grid-area: desc;
  font-size: 13.5px;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.zc-fcard-official, .zc-fcard-sellers, .zc-fcard-rel {
  border-top: 1px solid var(--line);
  align-content: start;
  gap: 4px;
  padding-top: 14px;
  font-size: 14px;
  display: grid;
}

.zc-fcard-official {
  grid-area: off;
}

.zc-fcard-sellers {
  text-align: right;
  grid-area: sell;
  justify-items: end;
}

.zc-fcard-rel {
  font-family: var(--f-mono);
  grid-area: rel;
}

.zc-fcard-official small, .zc-fcard-sellers small, .zc-fcard-rel small {
  color: var(--faint);
  font: 400 12px/1.2 var(--f-ui);
}

.zc-pair {
  font: 500 15px/1.2 var(--f-mono);
  gap: 5px;
  display: inline-flex;
}

.zc-pair i {
  color: var(--faint);
  font-style: normal;
  font-weight: 400;
}

.zc-sellers {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 8px;
  display: inline-flex;
}

.zc-kind {
  background: var(--paper-3);
  color: var(--ink-2);
  font: 500 12px/1.35 var(--f-ui);
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 10px;
}

.zc-kind-text {
  background: var(--leaf-soft);
  color: var(--leaf-ink);
}

.zc-kind-image {
  color: var(--teal);
  background: #3dd1bc26;
}

.zc-kind-video {
  color: #4f62a3;
  background: #5a6fae21;
}

.zc-kind-audio {
  color: #b45a1c;
  background: #e0782b21;
}

html[data-theme="dark"] .zc-kind-video {
  color: #9fb0ef;
}

html[data-theme="dark"] .zc-kind-audio {
  color: #f0a26a;
}

.zc-series[data-open] {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-2);
  border-radius: 24px;
  grid-column: 1 / -1;
  align-content: start;
  display: grid;
}

.zc .zc-series[data-open] > .zc-fcard-link {
  height: auto;
  box-shadow: none;
  background: none;
  transform: none;
}

.zc-series-more {
  width: 30px;
  height: 30px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 400 17px/1 var(--f-mono);
  color: var(--muted);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 18px;
  right: 18px;
}

.zc-series .zc-fcard-ctx {
  visibility: hidden;
}

.zc .zc-series-list {
  animation: zc-open .35s var(--ease);
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 22px 22px;
  list-style: none;
  display: flex;
}

.zc-series-list a {
  background: var(--paper);
  min-height: 36px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  font: 400 13.5px/1 var(--f-mono);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  text-decoration: none;
  transition: box-shadow .2s, background-color .2s;
  display: inline-flex;
}

.zc-series-list a:hover {
  box-shadow: inset 0 0 0 1px var(--leaf);
  background: var(--leaf-soft);
}

.zc-series-list small {
  color: var(--faint);
  font: 400 12px/1 var(--f-ui);
}

.zc-fgrid[data-layout="list"] {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 22px;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.zc-fgrid[data-layout="list"] .zc-fcard {
  border-top: 1px solid var(--line);
  animation: none;
}

.zc-fgrid[data-layout="list"] .zc-fcard:nth-child(2) {
  border-top: 0;
}

.zc-fgrid[data-layout="list"] .zc-fcard-link, .zc-fhead {
  box-shadow: none;
  border-radius: 0;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) 86px minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .9fr);
  grid-template-areas: "head kinds ctx off sell rel";
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
}

.zc-fgrid[data-layout="list"] .zc-fcard-link:hover {
  background: var(--paper-2);
  box-shadow: none;
  transform: none;
}

.zc-fgrid[data-layout="list"] :is(.zc-fcard-official, .zc-fcard-sellers, .zc-fcard-rel) {
  border-top: 0;
  padding-top: 0;
}

.zc-fgrid[data-layout="list"] :is(.zc-fcard-official, .zc-fcard-sellers, .zc-fcard-rel) small, .zc-fgrid[data-layout="list"] .zc-fcard-desc {
  display: none;
}

.zc-fgrid[data-layout="list"] .zc-fcard-name {
  font-size: 17px;
}

.zc-fgrid[data-layout="list"] .zc-fcard-ctx {
  justify-items: end;
}

.zc-fgrid[data-layout="list"] .zc-fcard-ctx b {
  font-size: 15px;
}

.zc-fgrid[data-layout="list"] .zc-series-more {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.zc-fhead {
  color: var(--faint);
  background: var(--paper-2);
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 12px;
  display: grid;
}

.zc-fhead span:nth-child(3), .zc-fhead span:nth-child(5) {
  text-align: right;
}

.zc-pass {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
  align-items: start;
  gap: 28px 52px;
  padding: 14px 0 34px;
  display: grid;
}

.zc-pass-main {
  min-width: 0;
}

.zc .zc-pass-provider {
  color: var(--ink-2);
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.zc .zc-pass-provider:hover {
  color: var(--leaf);
}

.zc .zc-title-l3 {
  margin-top: 16px;
  font-size: clamp(40px, 5vw, 78px);
}

.zc .zc-pass-id {
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.zc-pass-id code {
  color: var(--muted);
  font: 400 14px/1.3 var(--f-mono) !important;
}

.zc-pass-kinds {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  display: flex;
}

.zc .zc-pass-desc {
  max-width: 64ch;
  color: var(--ink-2);
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.6;
}

.zc-alias {
  margin-right: 8px;
  font: 400 12.5px/1 var(--f-mono) !important;
}

.zc-pass-facts {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 24px;
  gap: 16px;
  padding: 22px;
  display: grid;
}

.zc-pass-dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0;
  display: grid;
}

.zc-pass-dl div {
  gap: 3px;
  display: grid;
}

.zc-pass-dl dt {
  color: var(--faint);
  font-size: 12px;
}

.zc-pass-dl dd {
  font: 500 16px/1.3 var(--f-mono);
  margin: 0;
}

.zc .zc-pass-noprice {
  border-top: 1px solid var(--line);
  color: var(--muted);
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  font-size: 14px;
  display: flex;
}

.zc-pass-noprice b {
  color: var(--faint);
  font-weight: 500;
}

.zc-pass-facts .zc-official {
  box-shadow: none;
  border-top: 1px solid var(--line);
  background: none;
  border-radius: 0;
  padding: 14px 0 0;
}

.zc-summary {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 20px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 34px;
  display: grid;
}

.zc-summary div {
  border-left: 1px solid var(--line);
  gap: 4px;
  padding: 16px 20px;
  display: grid;
}

.zc-summary div:first-child {
  border-left: 0;
}

.zc-summary dt {
  color: var(--faint);
  font-size: 12px;
}

.zc-summary dd {
  font: 500 20px/1.2 var(--f-mono);
  letter-spacing: -.01em;
  margin: 0;
}

.zc-official {
  gap: 10px;
  display: grid;
}

.zc-official code {
  font: 400 12px/1 var(--f-mono) !important;
}

.zc-official-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  display: grid;
}

.zc-official-grid div {
  gap: 2px;
  display: grid;
}

.zc-official-grid dt {
  color: var(--faint);
  font-size: 12px;
}

.zc-official-grid dd {
  font: 500 15px/1.2 var(--f-mono);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.zc-official p {
  font-size: 12px;
}

.zc-official a {
  color: inherit;
}

.zc-variants {
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 12px;
  display: grid;
  overflow: hidden;
}

.zc-variant {
  border-top: 1px solid var(--line);
  font: 400 13px/1.3 var(--f-mono);
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 9px 14px;
  display: grid;
}

.zc-variant > :not(:first-child) {
  text-align: right;
}

.zc-variant-head {
  background: var(--paper-3);
  color: var(--muted);
  font: 400 12px/1.3 var(--f-ui);
  border-top: 0;
}

.zc-osec {
  gap: 12px;
  display: grid;
}

.zc-otools {
  top: var(--top);
  z-index: 14;
  background: linear-gradient(var(--ground) 84%, color-mix(in srgb, var(--ground) 0%, transparent));
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  margin: 0 -8px;
  padding: 10px 8px 12px;
  display: grid;
  position: sticky;
}

.zc-osearch {
  background: var(--paper);
  height: 46px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  transition: box-shadow .2s;
  display: flex;
}

.zc-osearch:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--leaf);
}

.zc-osearch > svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.zr-app .zc-osearch input {
  flex: 1;
  min-width: 0;
  height: 44px !important;
  font-size: 14.5px !important;
}

.zc-osearch input::-webkit-search-cancel-button {
  display: none;
}

.zr-app .zc .zc-scope {
  background: var(--paper-3);
  cursor: pointer;
  border-radius: 9px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
}

.zc-otools-btns {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.zc-otools .zc-sorts, .zc-active {
  grid-column: 1 / -1;
}

.zc-sorts {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.zc .zc-sorts > button, .zc .zc-more > button {
  min-height: 32px;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  font-size: 13.5px;
  transition: background-color .25s, color .25s, box-shadow .25s;
  display: inline-flex;
}

.zc .zc-sorts > button:hover, .zc .zc-more > button:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.zc .zc-sorts > button[aria-checked="true"], .zc .zc-more > button[data-active] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.zc-more {
  position: relative;
}

.zc-otime {
  color: var(--faint);
  font: 400 12px/1 var(--f-mono);
  margin-left: auto;
}

.zc-active {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.zc-chip {
  background: var(--leaf-soft);
  height: 30px;
  color: var(--leaf-ink);
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  padding: 0 3px 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.zc .zc-reset {
  color: var(--leaf);
  font-size: 13.5px;
  font-weight: 500;
}

.zc-pop {
  position: relative;
}

.zc-popover {
  z-index: 50;
  background: var(--paper);
  width: min(340px, 100vw - 32px);
  box-shadow: inset 0 0 0 1px var(--line), var(--nc-shadow-2);
  animation: zc-pop .2s var(--ease);
  border-radius: 18px;
  gap: 18px;
  padding: 18px;
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

.zc .zc-popover h3 {
  color: var(--muted);
  font: 500 13px/1.3 var(--f-ui);
  align-items: center;
  gap: 6px;
  display: flex;
}

.zc .zc-btn .zc-count {
  background: var(--ink);
  color: var(--paper);
  font: 600 11.5px/1.6 var(--f-mono);
  border-radius: 999px;
  margin-left: 2px;
  padding: 0 7px;
}

.zc-otable {
  scrollbar-width: thin;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 20px;
  display: grid;
  overflow-x: auto;
}

.zc-otable[aria-busy] {
  opacity: .6;
  transition: opacity .2s;
}

.zc-otable > .zc-offer:not(.zc-offer-head) {
  animation: zc-card-in var(--nc-base, .22s) var(--ease) both;
  animation-delay: calc(7 * var(--nc-stagger, 35ms));
}

.zc-otable > .zc-offer:nth-child(2) {
  animation-delay: 0s;
}

.zc-otable > .zc-offer:nth-child(3) {
  animation-delay: calc(1 * var(--nc-stagger, 35ms));
}

.zc-otable > .zc-offer:nth-child(4) {
  animation-delay: calc(2 * var(--nc-stagger, 35ms));
}

.zc-otable > .zc-offer:nth-child(5) {
  animation-delay: calc(3 * var(--nc-stagger, 35ms));
}

.zc-otable > .zc-offer:nth-child(6) {
  animation-delay: calc(4 * var(--nc-stagger, 35ms));
}

.zc-otable > .zc-offer:nth-child(7) {
  animation-delay: calc(5 * var(--nc-stagger, 35ms));
}

.zc-otable > .zc-offer:nth-child(8) {
  animation-delay: calc(6 * var(--nc-stagger, 35ms));
}

.zc-osec-wrap {
  display: grid;
}

.zc-ghost {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 24px;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.7fr);
  display: grid;
  overflow: hidden;
}

.zc-ghost-text {
  border-right: 1px solid var(--line);
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: 30px;
  display: grid;
}

.zc .zc-ghost-text h3 {
  font: 500 24px/1.2 var(--f-display);
  letter-spacing: -.02em;
}

.zc .zc-ghost-text p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.zc-ghost-table {
  padding: 4px 0;
  position: relative;
  overflow: hidden;
}

.zc-ghost-table:after {
  content: "";
  background: linear-gradient(90deg, transparent 55%, var(--paper)), linear-gradient(transparent 45%, var(--paper));
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.zc .zc-ghost-row {
  cursor: default;
}

.zc .zc-ghost-row:hover {
  background: none;
}

.zc-ghost-row span {
  gap: 6px;
  display: grid;
}

.zc-ghost-row i {
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px);
  border-radius: 6px;
  height: 10px;
  display: block;
}

.zc-ghost-row span:nth-child(2) i:last-child {
  width: 60%;
}

.zc-offer {
  border-top: 1px solid var(--line);
  cursor: pointer;
  align-items: center;
  gap: 12px;
  min-width: 860px;
  padding: 12px 14px;
  transition: background-color .2s;
  display: grid;
}

.zc-offer:hover {
  background: var(--paper-2);
}

.zc-offer[data-picked] {
  background: var(--leaf-soft);
}

.zc-offer[data-state] {
  opacity: .7;
}

.zc-offer-head {
  color: var(--faint);
  font: 400 12px/1.3 var(--f-ui);
  cursor: default;
  border-top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.zc-offer-head:hover {
  background: none;
}

.zc-offer-head small {
  color: var(--faint);
}

.zc-offer-head > span {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.zc-o-seller {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.zc-o-model {
  color: var(--muted);
  font: 400 12.5px/1.3 var(--f-mono);
  align-items: center;
  gap: 6px;
  display: flex;
}

.zc-o-name {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  display: flex;
}

.zc-o-name .zc-link {
  font-size: 14.5px;
}

.zc-o-desc {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
}

.zc-o-tags {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.zc-rating {
  color: var(--ink-2);
  font: 500 12.5px/1 var(--f-mono);
  align-items: center;
  gap: 3px;
  display: inline-flex;
}

.zc-rating svg {
  width: 13px;
  height: 13px;
  fill: var(--nc-sun);
  color: var(--nc-sun);
}

.zc-rating small {
  color: var(--faint);
  font-weight: 400;
}

.zc-rating-none {
  color: var(--faint);
  font: 400 12px/1 var(--f-ui);
}

.zc-price {
  font-variant-numeric: tabular-nums;
  gap: 3px;
  display: grid;
}

.zc-price strong {
  font: 500 14px/1.25 var(--f-mono);
  flex-wrap: wrap;
  gap: 0 5px;
  display: flex;
}

.zc-price strong i {
  color: var(--faint);
  font-style: normal;
  font-weight: 400;
}

.zc-price small {
  color: var(--faint);
  font: 400 12px/1.2 var(--f-mono);
}

.zc-num {
  font-variant-numeric: tabular-nums;
}

.zc-o-lat, .zc-o-speed, .zc-o-blocks, .zc-o-cache {
  font: 400 13.5px/1.2 var(--f-mono);
  white-space: nowrap;
  gap: 3px;
  display: grid;
}

.zc-o-lat strong, .zc-o-speed strong, .zc-o-blocks strong, .zc-o-cache strong {
  font-weight: 500;
}

.zc-o-lat small, .zc-o-speed small, .zc-o-blocks small {
  color: var(--faint);
  font-size: 12px;
}

.zc-o-last {
  color: var(--muted);
  font-size: 13px;
}

.zc-bar {
  background: var(--paper-3);
  border-radius: 4px;
  width: 72px;
  height: 4px;
  display: block;
  overflow: hidden;
}

.zc-bar b {
  background: var(--teal);
  border-radius: 4px;
  height: 100%;
  display: block;
}

.zc-o-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  display: inline-flex;
  position: relative;
}

.zc-strips {
  gap: 4px;
  display: grid;
  position: relative;
}

.zc-strip {
  grid-template-columns: 38px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
  display: grid;
}

.zc-strip-l {
  color: var(--faint);
  font: 400 11px/1 var(--f-ui);
  white-space: nowrap;
}

.zc-cells {
  gap: 2px;
  min-width: 0;
  display: flex;
}

.zc-cells > * {
  background: var(--tone-idle);
  min-width: 3px;
  max-width: 12px;
  height: 10px;
  transition: transform .2s var(--back);
  border-radius: 3px;
  flex: 1 1 0;
}

.zc-cells > [data-tone="good"] {
  background: var(--tone-good);
}

.zc-cells > [data-tone="fair"] {
  background: var(--tone-fair);
}

.zc-cells > [data-tone="weak"] {
  background: var(--tone-weak);
}

.zc-cells > [data-tone="poor"] {
  background: var(--tone-poor);
}

.zc-cells > :hover, .zc-cells > :focus-visible {
  transform: scaleY(1.35);
}

.zc-cells-none {
  opacity: .6;
  max-width: none !important;
}

.zc .zc-cells button {
  height: 14px;
  padding: 0;
}

.zc-strip-v {
  font: 500 12px/1 var(--f-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.zc-strip-v[data-tone="good"] {
  color: var(--tone-good);
}

.zc-strip-v[data-tone="fair"] {
  color: var(--tone-fair);
}

.zc-strip-v[data-tone="weak"] {
  color: var(--tone-weak);
}

.zc-strip-v[data-tone="poor"] {
  color: var(--tone-poor);
}

.zc-tip {
  z-index: 500;
  background: var(--station);
  min-width: 230px;
  color: var(--station-ink);
  box-shadow: var(--nc-shadow-2);
  pointer-events: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  position: fixed;
  transform: translate(-50%, calc(-100% - 10px));
}

.zc-tip strong {
  font: 500 13px/1.2 var(--f-mono);
  margin-bottom: 8px;
  display: block;
}

.zc-tip dl {
  gap: 5px;
  margin: 0;
  display: grid;
}

.zc-tip dl div {
  justify-content: space-between;
  gap: 18px;
  display: flex;
}

.zc-tip dt {
  color: var(--station-dim);
}

.zc-tip dd {
  font-family: var(--f-mono);
  margin: 0;
}

.zc-hint {
  width: 15px;
  height: 15px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--faint);
  font: 500 10px/1 var(--f-ui);
  cursor: help;
  border-radius: 50%;
  place-items: center;
  display: inline-grid;
  position: relative;
}

.zc-hint-pop {
  z-index: 40;
  background: var(--station);
  width: 260px;
  color: var(--station-ink);
  font: 400 12.5px/1.45 var(--f-ui);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  border-radius: 10px;
  padding: 10px 12px;
  transition: opacity .2s, transform .2s, visibility .2s;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}

.zc-hint:hover .zc-hint-pop, .zc-hint:focus .zc-hint-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

.zc-menu {
  z-index: 50;
  background: var(--paper);
  min-width: 230px;
  box-shadow: inset 0 0 0 1px var(--line), var(--nc-shadow-2);
  animation: zc-pop .2s var(--ease);
  border-radius: 14px;
  padding: 6px;
  display: grid;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
}

.zc-more .zc-menu {
  left: 0;
  right: auto;
}

.zc-menu.zc-menu-fixed {
  z-index: 55;
  position: fixed;
  top: 0;
  right: auto;
}

.zc .zc-menu button {
  text-align: left;
  white-space: nowrap;
  border-radius: 9px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 14px;
  display: flex;
}

.zc .zc-menu button:hover, .zc .zc-menu button[aria-checked="true"] {
  background: var(--hover);
}

.zc .zc-menu .zc-menu-danger {
  color: var(--err);
}

.zc-pager {
  border-top: 1px solid var(--line);
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 18px;
  font-size: 13.5px;
  display: flex;
}

.zc-pager-nav {
  align-items: center;
  gap: 6px;
  margin-left: auto;
  display: inline-flex;
}

.zc-size {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.zr-app .zc-size select {
  height: 32px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
  border-radius: 8px;
  padding: 0 8px;
}

.zc-empty {
  justify-items: start;
  gap: 6px;
  padding: 40px 22px 44px;
  display: grid;
}

.zc-empty strong {
  font: 500 17px/1.3 var(--f-ui);
}

.zc-empty span {
  color: var(--muted);
  font-size: 14.5px;
}

.zc-empty .zc-btn {
  margin-top: 8px;
}

.zc-tray {
  z-index: 60;
  background: var(--station);
  color: var(--station-ink);
  box-shadow: var(--nc-shadow-2);
  animation: zc-rise var(--nc-base, .22s) var(--nc-spring, var(--back));
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  font-size: 14px;
  display: flex;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.zc .zc-tray .zc-btn-ghost {
  color: var(--station-dim);
}

.zc-toast {
  z-index: 70;
  background: var(--station);
  max-width: min(460px, 100vw - 40px);
  color: var(--station-ink);
  box-shadow: var(--nc-shadow-2);
  animation: zc-rise var(--nc-base, .22s) var(--nc-spring, var(--back));
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  display: flex;
  position: fixed;
  bottom: 20px;
  left: 20px;
}

.zc-toast a {
  color: #8fd566;
  white-space: nowrap;
  font-weight: 500;
}

.zc-skeleton {
  background: linear-gradient(90deg, var(--paper-3) 0%, var(--paper-2) 50%, var(--paper-3) 100%);
  background-size: 200% 100%;
  border-radius: 10px;
  width: 100%;
  animation: 1.4s linear infinite zc-shimmer;
  display: block;
}

.zc.zc-layer {
  z-index: 400;
  position: fixed;
  inset: 0;
}

.zc-backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: zc-fade .25s var(--ease);
  background: #0a0a0a61;
  position: absolute;
  inset: 0;
}

.zc-sheet {
  background: var(--paper);
  width: min(560px, 100vw - 24px);
  box-shadow: var(--nc-shadow-2);
  animation: zc-slide var(--nc-slow, .32s) var(--ease);
  border-radius: 22px;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 12px;
  overflow: hidden;
}

.zc-layer[data-leaving] .zc-sheet {
  animation: zc-sheet-leave var(--nc-fast, .15s) var(--nc-ease-in, ease-in) forwards;
}

.zc-layer[data-leaving] .zc-backdrop {
  animation: zc-fade var(--nc-fast, .15s) var(--nc-ease-in, ease-in) reverse forwards;
}

@keyframes zc-sheet-leave {
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

.zc-sheet-sm {
  width: min(420px, 100vw - 24px);
}

.zc-sheet-lg {
  width: min(720px, 100vw - 24px);
}

.zc-sheet-head {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 14px 24px;
  display: flex;
}

.zc .zc-sheet-head h2 {
  font: 500 22px/1.2 var(--f-display);
  letter-spacing: -.02em;
}

.zc-sheet-title {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.zc-sheet-sub {
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: 13.5px;
  display: flex;
}

.zc-sheet-sub code {
  color: var(--faint);
  font: 400 12px/1 var(--f-mono) !important;
}

.zc-sheet-body {
  overscroll-behavior: contain;
  flex: 1;
  align-content: start;
  gap: 22px;
  padding: 18px 24px 28px;
  display: grid;
  overflow: auto;
}

.zc-sheet-foot {
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  display: flex;
}

.zc-sheet-badges {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.zc .zc-sheet-desc {
  color: var(--ink-2);
  font-size: 14.5px;
}

.zc-sheet-sec {
  gap: 12px;
  display: grid;
}

.zc .zc-sheet-sec h3 {
  font: 500 15px/1.3 var(--f-ui);
}

.zc-sheet-sec .zc-strips {
  gap: 8px;
}

.zc-sheet-sec .zc-strip {
  grid-template-columns: 52px minmax(0, 1fr) 56px;
}

.zc-sheet-sec .zc-cells > * {
  max-width: none;
  height: 16px;
}

.zc-table-wrap {
  overflow-x: auto;
}

.zc-ptable, .zc-ctable {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}

.zc-ptable th, .zc-ptable td, .zc-ctable th, .zc-ctable td {
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding: 9px 10px;
}

.zc-ptable :is(th, td):first-child, .zc-ctable :is(th, td):first-child {
  text-align: left;
}

.zc-ptable thead th, .zc-ctable thead th {
  color: var(--faint);
  font-size: 12px;
  font-weight: 400;
}

.zc-ptable td, .zc-ctable td {
  font-family: var(--f-mono);
}

.zc-ptable tbody th, .zc-ctable tbody th {
  color: var(--muted);
  font-weight: 400;
}

.zc-ctable thead th {
  vertical-align: top;
}

.zc-ctable thead th span {
  color: var(--ink);
  font: 500 14px/1.3 var(--f-ui);
  display: block;
}

.zc-ctable thead th small {
  color: var(--faint);
  display: block;
}

.zc-ctable td[data-best] {
  color: var(--leaf-ink);
  font-weight: 600;
}

.zc .zc-big-price {
  font: 500 26px/1.2 var(--f-mono);
}

.zc .zc-big-price small {
  color: var(--faint);
  font: 400 14px/1 var(--f-ui);
}

.zc-facts {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px 18px;
  margin: 0;
  display: grid;
}

.zc-facts div {
  gap: 2px;
  display: grid;
}

.zc-facts dt {
  color: var(--faint);
  font-size: 12px;
}

.zc-facts dd {
  font: 500 14px/1.3 var(--f-mono);
  margin: 0;
}

.zc .zc-seller-line {
  align-items: center;
  gap: 10px;
  display: flex;
}

.zc-seller-more {
  gap: 6px;
  margin: 14px 0 4px;
  display: grid;
}

.zc-seller-more ul {
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.zc-seller-more li {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  display: flex;
}

.zc-seller-more li:last-child {
  border-bottom: 0;
}

.zc-seller-more .zc-num {
  color: var(--ink-2);
  font: 500 13px/1.3 var(--f-mono);
  flex: none;
}

.zc-seller-more i {
  color: var(--faint);
  font-style: normal;
}

.zc-row-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.zc-reviews {
  display: grid;
}

.zc-review {
  border-bottom: 1px solid var(--line);
  gap: 6px;
  padding: 14px 0;
  font-size: 14px;
  display: grid;
}

.zc-reviews .zc-review:last-child {
  border-bottom: 0;
}

.zc .zc-review-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 12.5px;
  display: flex;
}

.zc-review-who {
  color: var(--ink-2);
  font-weight: 500;
}

.zc-verified {
  color: var(--leaf-ink);
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.zc-verified svg {
  width: 14px;
  height: 14px;
}

.zc .zc-review-model {
  color: var(--muted);
  font: 400 12.5px/1.3 var(--f-mono);
}

.zc .zc-review-text {
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.zc .zc-review-reply {
  border-left: 2px solid var(--leaf);
  background: var(--paper-2);
  color: var(--ink-2);
  border-radius: 0 10px 10px 0;
  gap: 4px;
  margin-top: 4px;
  padding: 8px 12px;
  display: grid;
}

.zc .zc-review-reply .zc-review-text {
  color: var(--ink-2);
}

.zc .zc-review-reply-head {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 12.5px;
  display: flex;
}

.zc .zc-review-report {
  color: var(--muted);
  justify-self: start;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 400;
  display: inline-flex;
}

.zc .zc-review-report svg {
  width: 13px;
  height: 13px;
}

.zc .zc-review-done {
  color: var(--muted);
  font-size: 12.5px;
}

.zc .zc-rev-summary {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 14px;
  display: flex;
}

.zc-rev-summary svg {
  width: 20px;
  height: 20px;
  color: var(--nc-sun);
  fill: var(--nc-sun);
}

.zc-rev-summary strong {
  font: 600 22px/1 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

.zc .zc-elig {
  background: var(--paper-3);
  color: var(--ink-2);
  border-radius: 12px;
  gap: 6px;
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  list-style: none;
  display: grid;
}

.zc .zc-review-problem {
  color: var(--ink-2);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 14px;
  display: flex;
}

.zc .zc-review-pager {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  display: flex;
}

.zc-review-own {
  display: grid;
}

.zc-review-own .zc-review {
  border-bottom: 0;
}

.zc-review-own .zc-note {
  margin-top: 0;
}

.zc-stars, .zc-stars-pick {
  gap: 2px;
  display: inline-flex;
}

.zc-stars svg, .zc-stars-pick svg {
  width: 15px;
  height: 15px;
  color: var(--line-2);
}

.zc-stars [data-on], .zc-stars-pick [data-on] svg {
  color: var(--nc-sun);
  fill: var(--nc-sun);
}

.zc .zc-stars-pick button {
  width: 38px;
  height: 38px;
  transition: transform .2s var(--back);
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.zc .zc-stars-pick button:hover {
  transform: scale(1.08);
}

.zc-stars-pick svg {
  width: 26px;
  height: 26px;
}

.zc-review-form {
  box-shadow: inset 0 0 0 1px var(--line-2);
  border-radius: 16px;
  gap: 14px;
  padding: 14px 16px;
  display: grid;
}

.zc-field-block {
  gap: 4px;
  display: grid;
}

.zc-textfield {
  color: var(--muted);
  gap: 6px;
  font-size: 13px;
  display: grid;
}

.zc .zc-textfield textarea {
  background: var(--paper-3);
  width: 100%;
  color: var(--ink);
  resize: vertical;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
}

.zc .zc-textfield textarea::placeholder {
  color: var(--faint);
}

.zc-textfield small {
  color: var(--faint);
  font: 400 12px/1.2 var(--f-mono);
  justify-self: end;
}

.zc-textfield small[data-over] {
  color: var(--err);
  font-family: var(--f-ui);
}

.zc-confirm {
  gap: 12px;
  display: grid;
}

.zc .zc-confirm-title {
  font-weight: 500;
}

.zc-review-preview {
  background: var(--paper-2);
  border-bottom: 0;
  border-radius: 12px;
  padding: 10px 14px;
}

.zc .zc-confirm-warn {
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
  color: var(--ink);
  border-radius: 0 10px 10px 0;
  padding: 10px 12px;
  font-size: 14px;
}

.zc-report {
  background: var(--paper-2);
  border-radius: 12px;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 14px;
  display: grid;
}

.zc-report fieldset {
  border: 0;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.zc-report legend {
  color: var(--muted);
  margin-bottom: 6px;
  padding: 0;
  font-size: 13px;
}

.zc-report .zc-textfield textarea {
  background: var(--paper);
}

.zc-seller-reviews {
  justify-items: start;
  gap: 10px;
  margin-bottom: 12px;
  display: grid;
}

.zc-seller-review-list {
  justify-self: stretch;
  gap: 8px;
  display: grid;
}

.zc-test {
  justify-items: start;
  gap: 10px;
  display: grid;
}

.zc .zc-pool-list {
  gap: 6px;
  display: grid;
}

.zc-pool-model {
  color: var(--ink-2);
  gap: 6px;
  margin: 0 0 14px;
  font-size: 13px;
  display: grid;
}

.zc-pool-list li, .zc-blocks li {
  background: var(--paper-2);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.zc .zc-blocks {
  gap: 6px;
  display: grid;
}

.zc-blocks span {
  display: grid;
}

.zc-blocks small {
  color: var(--faint);
  font-size: 12.5px;
}

.zc-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  display: grid;
}

.zc-check {
  cursor: pointer;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  display: flex;
}

html[data-zc-nav]::view-transition-old(root) {
  animation: none;
}

html[data-zc-nav]::view-transition-new(root) {
  animation: none;
}

html[data-zc-nav]::view-transition-group(*) {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

html[data-zc-nav]::view-transition-group(zc-stage) {
  animation: none;
}

html[data-zc-nav="forward"]::view-transition-old(zc-stage) {
  animation: zc-vt-out .26s var(--ease, ease) both;
  --vx: -28px;
}

html[data-zc-nav="forward"]::view-transition-new(zc-stage) {
  --vx: 36px;
  animation: .5s cubic-bezier(.2, .8, .2, 1) 60ms both zc-vt-in;
}

html[data-zc-nav="back"]::view-transition-old(zc-stage) {
  --vx: 28px;
  animation: .26s both zc-vt-out;
}

html[data-zc-nav="back"]::view-transition-new(zc-stage) {
  --vx: -36px;
  animation: .5s cubic-bezier(.2, .8, .2, 1) 60ms both zc-vt-in;
}

html[data-zc-nav]::view-transition-old(zc-crumbs) {
  animation-duration: .3s;
}

html[data-zc-nav]::view-transition-new(zc-crumbs) {
  animation-duration: .3s;
}

@keyframes zc-vt-out {
  to {
    opacity: 0;
    transform: translateX(var(--vx));
  }
}

@keyframes zc-vt-in {
  from {
    opacity: 0;
    transform: translateX(var(--vx));
  }
}

@keyframes zc-tile-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
  }
}

@keyframes zc-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes zc-flap {
  0% {
    opacity: .4;
    transform: rotateX(80deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes zc-blink {
  50% {
    opacity: .35;
  }
}

@keyframes zc-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes zc-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes zc-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
}

@keyframes zc-rise {
  from {
    opacity: 0;
    transform: translate(var(--tx, 0), 14px);
  }
}

@keyframes zc-fade {
  from {
    opacity: 0;
  }
}

@keyframes zc-slide {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}

@keyframes zc-shimmer {
  to {
    background-position: -200% 0;
  }
}

.zc-tray {
  --tx: -50%;
}

@media (prefers-reduced-motion: reduce) {
  .zc *, .zc :before, .zc :after, .zc.zc-layer * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }

  .zc-seal {
    transform: none;
  }
}

@media (max-width: 1100px) {
  .zc-pass {
    grid-template-columns: minmax(0, 1fr);
  }

  .zc-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zc-summary div:nth-child(4) {
    border-left: 0;
  }

  .zc-summary div:nth-child(n+4) {
    border-top: 1px solid var(--line);
  }

  .zc-ghost {
    grid-template-columns: minmax(0, 1fr);
  }

  .zc-ghost-text {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .zc-fgrid[data-layout="list"] .zc-fcard-link, .zc-fhead {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 70px minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas: "head kinds ctx off sell";
  }

  .zc-fgrid[data-layout="list"] .zc-fcard-rel, .zc-fhead span:nth-child(6) {
    display: none;
  }
}

@media (max-width: 720px) {
  .zc:not(.zc-layer) {
    padding: 14px 12px 120px;
  }

  .zc .zc-title {
    font-size: 46px;
  }

  .zc .zc-lead {
    font-size: 16px;
  }

  .zc-hero {
    gap: 16px;
    padding: 18px 0 22px;
  }

  .zc-gsearch-field {
    border-radius: 18px;
    height: 56px;
    padding: 0 10px 0 16px;
  }

  .zr-app .zc-gsearch-field input {
    height: 54px !important;
    font-size: 16px !important;
  }

  .zc-gsearch-field kbd {
    display: none;
  }

  .zc-kinds {
    scrollbar-width: none;
    flex-wrap: nowrap;
    margin: 0 -12px;
    padding: 0 12px 2px;
    overflow-x: auto;
  }

  .zc-kinds::-webkit-scrollbar {
    display: none;
  }

  .zc-kind-group {
    flex-wrap: nowrap;
  }

  .zc .zc-kind-group button, .zc .zc-kind-toggle {
    flex: none;
  }

  .zc .zc-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .zc .zc-tile-link {
    border-radius: 22px;
    gap: 18px;
    min-height: 176px;
    padding: 16px;
  }

  .zc-tile .zc-seal {
    width: 52px;
    height: 52px;
  }

  .zc-tile .zc-seal svg, .zc-tile .zc-seal img {
    width: 26px !important;
    height: 26px !important;
  }

  .zc-tile-name {
    font-size: 20px;
  }

  .zc-tile-meta {
    gap: 4px 8px;
    font-size: 12.5px;
  }

  .zc-tile-list {
    display: none;
  }

  .zc-phead {
    gap: 18px;
    padding: 12px 0 18px;
  }

  .zc-seal-lg {
    width: 76px;
    height: 76px;
  }

  .zc-seal-lg svg, .zc-seal-lg img {
    width: 32px !important;
    height: 32px !important;
  }

  .zc .zc-title-l2 {
    font-size: 40px;
  }

  .zc {
    --top: 68px;
  }

  .zc-ftools {
    background: none;
    margin: 0;
    padding: 8px 0;
    position: static;
  }

  .zc-field {
    flex: 100%;
    min-width: 0;
  }

  .zc-ftools-gap {
    display: none;
  }

  .zc .zc-fgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .zc-fgrid[data-layout="list"] .zc-fcard-link {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head ctx"
                         "kinds kinds"
                         "off sell";
    padding: 14px 16px;
  }

  .zc-fgrid[data-layout="list"] .zc-fhead {
    display: none;
  }

  .zc .zc-title-l3 {
    font-size: 38px;
  }

  .zc-pass {
    gap: 20px;
    padding-bottom: 24px;
  }

  .zc-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zc-summary div {
    border-top: 1px solid var(--line);
    border-left: 0 !important;
  }

  .zc-summary div:nth-child(-n+2) {
    border-top: 0;
  }

  .zc-summary div:nth-child(2n) {
    border-left: 1px solid var(--line) !important;
  }

  .zc-official-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zc-otools {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0 -12px;
    padding: 8px 12px 10px;
  }

  .zc-otools .zc-osearch {
    min-width: 0;
  }

  .zr-app .zc .zc-otools .zc-scope {
    max-width: 92px;
    font-size: 12.5px;
  }

  .zc .zc-otools-btns .zc-btn {
    padding: 0 10px;
  }

  .zc-otools-btns .zc-btn-label {
    display: none;
  }

  .zc-otools-btns {
    justify-content: flex-end;
    gap: 0;
  }

  .zc-sorts {
    scrollbar-width: none;
    flex-wrap: nowrap;
    margin: 0 -12px;
    padding: 0 12px 2px;
    overflow-x: auto;
  }

  .zc-sorts::-webkit-scrollbar {
    display: none;
  }

  .zc .zc-sorts > button, .zc .zc-more > button {
    flex: none;
  }

  .zc-more .zc-menu, .zc-popover {
    width: auto;
    position: fixed;
    inset: auto 12px 12px;
  }

  .zc-otable {
    box-shadow: none;
    background: none;
    gap: 10px;
    overflow: visible;
  }

  .zc-otable .zc-offer-head {
    display: none;
  }

  .zc-otable .zc-offer, .zc-ghost-table .zc-offer {
    background: var(--paper);
    min-width: 0;
    box-shadow: inset 0 0 0 1px var(--line);
    border-top: 0;
    border-radius: 18px;
    grid-template-areas: "pick seller seller"
                         "price price vs"
                         "rel rel rel"
                         "lat cache cache"
                         "act act act";
    gap: 10px 12px;
    padding: 14px 12px;
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
  }

  .zc-ghost-table {
    display: none;
  }

  .zc-o-pick {
    grid-area: pick;
    align-self: start;
    padding-top: 2px;
  }

  .zc-o-seller {
    grid-area: seller;
  }

  .zc-o-price {
    grid-area: price;
  }

  .zc-o-vs {
    grid-area: vs;
    justify-self: end;
  }

  .zc-o-rel {
    grid-area: rel;
  }

  .zc-o-lat {
    grid-area: lat;
  }

  .zc-o-cache {
    grid-area: cache;
    justify-self: end;
  }

  .zc-o-speed, .zc-o-blocks, .zc-o-last {
    display: none;
  }

  .zc-o-actions {
    grid-area: act;
    justify-content: stretch;
  }

  .zc .zc-o-actions > .zc-btn {
    flex: 1;
  }

  .zc-pager {
    border-top: 0;
    justify-content: center;
  }

  .zc-keybar {
    padding: 10px;
  }

  .zc-keysel {
    flex: 100%;
  }

  .zr-app .zc-keysel select {
    flex: 1;
    min-width: 0;
  }

  .zc-sheet, .zc-sheet-sm, .zc-sheet-lg {
    width: auto;
    max-height: 92vh;
    animation: zc-up .4s var(--ease);
    border-radius: 22px 22px 0 0;
    inset: auto 0 0;
  }

  .zc-sheet-body {
    padding: 16px 16px 24px;
  }

  .zc-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .zc-tray {
    --tx: 0;
    justify-content: space-between;
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: none;
  }

  .zc-toast {
    max-width: none;
    bottom: 76px;
    left: 12px;
    right: 12px;
  }
}

@keyframes zc-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}

/* [project]/src/app/catalog/catalog-lk.css [app-client] (css) */
.lk.zc-lk {
  min-height: 0;
}

.zc-lk {
  background: none;
  min-height: 0;
}

.zc-lk > .zc {
  z-index: 1;
  position: relative;
}

:is(.zc-lk .zc, .zc-layer-lk) {
  --ink: var(--lk-ink);
  --ink-2: var(--lk-ink-2);
  --muted: var(--lk-ink-2);
  --faint: var(--lk-ink-3);
  --line: var(--lk-line);
  --line-2: var(--lk-line-2);
  --ground: var(--lk-bg);
  --paper: var(--lk-bg);
  --paper-2: var(--lk-side);
  --paper-3: var(--lk-hover);
  --hover: var(--lk-hover);
  --leaf: var(--lk-brand);
  --leaf-hover: var(--lk-brand);
  --on-leaf: var(--lk-on-brand);
  --f-display: var(--lk-font);
  --f-ui: var(--lk-font);
  --f-mono: var(--lk-font);
  --ease: var(--lk-ease);
  --back: var(--lk-ease);
  --top: 64px;
  font-feature-settings: "tnum" 1;
  font-size: 14px;
}

:is(.zc-lk .zc, .zc-layer-lk) :is(code, kbd, .zc-fcard-id, .zc-o-model, .zc-alias, .zc-review-model, .zc-series-list a, .zc-gsearch-opt code) {
  letter-spacing: -.01em;
  font-family: var(--lk-mono) !important;
}

:is(.zc-lk .zc, .zc-layer-lk) :focus-visible {
  outline-color: var(--lk-brand);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-title {
  font: 700 calc(30px + 10px * var(--nc-vib-vivid))/calc(1.2 - .05 * var(--nc-vib-vivid)) var(--nc-vib-title);
  letter-spacing: calc(-.025em - .01em * var(--nc-vib-vivid));
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-title-l2, :is(.zc-lk .zc, .zc-layer-lk) .zc-title-l3 {
  font-size: 26px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-lead {
  max-width: 72ch;
  color: var(--lk-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-h2 {
  font: 600 15px/1.3 var(--lk-font);
  letter-spacing: 0;
  margin-bottom: 12px;
}

:is(.zc-lk, .zc-layer-lk) .zc-crumbs ol {
  font-size: 12.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-crumbs a:hover {
  color: var(--lk-ink);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-aside-link a {
  color: var(--lk-ink-2);
  text-underline-offset: 3px;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--lk-line-2);
  text-decoration-color: var(--lk-line-2);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-aside-link a:hover {
  color: var(--lk-ink);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-aside-link {
  margin-top: 24px;
  font-size: 13px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-btn {
  min-height: 32px;
  font: 500 13.5px/1 var(--lk-font);
  transition: background-color var(--lk-d1) var(--lk-ease), box-shadow var(--lk-d2) var(--lk-ease), transform var(--lk-d1) var(--lk-ease);
  border-radius: 6px;
  padding: 0 12px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-btn-sm {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-btn-primary {
  background: linear-gradient(135deg, var(--lk-cta-1), var(--lk-cta-2));
  color: var(--lk-on-cta);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--lk-cta-1) calc(80% * var(--nc-vib-accent)), transparent), inset 0 1px 0 rgb(255 255 255 / calc(.25 * var(--nc-vib-accent))), 0 0 0 1px color-mix(in srgb, var(--lk-brand) calc(30% * (1 - var(--nc-vib-accent))), transparent), 0 6px 22px -8px color-mix(in srgb, var(--lk-glow) calc(100% * (1 - var(--nc-vib-accent))), transparent);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--lk-cta-1), var(--lk-cta-2));
  filter: brightness(1.06);
  box-shadow: 0 10px 26px -8px var(--lk-glow), inset 0 1px 0 rgb(255 255 255 / calc(.3 * var(--nc-vib-accent))), 0 0 0 1px color-mix(in srgb, var(--lk-brand) calc(45% * (1 - var(--nc-vib-accent))), transparent);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-btn-line {
  background: var(--lk-raise);
  box-shadow: inset 0 0 0 1px var(--lk-line-2);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-btn-line:hover:not(:disabled) {
  background: var(--lk-hover);
  box-shadow: inset 0 0 0 1px var(--lk-line-2);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-icon {
  border-radius: 6px;
  width: 32px;
  height: 32px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-icon-sm {
  width: 24px;
  height: 24px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-link:hover {
  color: var(--lk-ink);
  text-underline-offset: 3px;
  text-decoration: underline;
}

:is(.zc-lk, .zc-layer-lk) .zc-seg {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 7px;
  padding: 2px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-seg button {
  border-radius: 5px;
  min-height: 24px;
  padding: 0 9px;
  font-size: 12.5px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-seg button[aria-checked="true"] {
  background: var(--lk-sel);
  box-shadow: none;
}

:is(.zc-lk, .zc-layer-lk) .zc-badge, :is(.zc-lk, .zc-layer-lk) .zc-kind {
  border-radius: 4px;
  font-size: 11.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-pmark {
  border-radius: 6px;
  width: 22px;
  height: 22px;
}

:is(.zc-lk, .zc-layer-lk) .zc-off {
  font: 500 12.5px/1.4 var(--lk-font);
  border-radius: 4px;
  padding: 1px 6px;
}

:is(.zc-lk, .zc-layer-lk) .zc-off-save, :is(.zc-lk, .zc-layer-lk) .zc-save {
  color: var(--lk-ok);
  background: color-mix(in srgb, var(--lk-ok) 12%, transparent);
}

:is(.zc-lk, .zc-layer-lk) .zc-save {
  border-radius: 4px;
  padding: 0 6px;
  font-size: 18px;
  line-height: 28px;
  display: inline-flex;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-kind-group button, :is(.zc-lk .zc, .zc-layer-lk) .zc-kind-toggle, :is(.zc-lk .zc, .zc-layer-lk) .zc-sorts > button, :is(.zc-lk .zc, .zc-layer-lk) .zc-more > button, :is(.zc-lk .zc, .zc-layer-lk) .zc-chips button {
  min-height: 28px;
  box-shadow: none;
  border: 1px dashed var(--lk-line-2);
  color: var(--lk-ink-2);
  transition: border-color var(--lk-d1), color var(--lk-d1), background-color var(--lk-d1);
  background: none;
  border-radius: 99px;
  padding: 0 10px;
  font-size: 12.5px;
}

:is(.zc-lk .zc, .zc-layer-lk) :is(.zc-kind-group button, .zc-kind-toggle, .zc-sorts > button, .zc-more > button, .zc-chips button):hover {
  box-shadow: none;
  color: var(--lk-ink);
  background: var(--lk-hover);
}

:is(.zc-lk .zc, .zc-layer-lk) :is(.zc-kind-group button[aria-checked="true"], .zc-kind-toggle[aria-pressed="true"], .zc-sorts > button[aria-checked="true"], .zc-more > button[data-active], .zc-chips button[aria-pressed="true"]) {
  border-style: solid;
  border-color: var(--lk-ink-3);
  background: var(--lk-sel);
  color: var(--lk-ink);
  box-shadow: none;
}

:is(.zc-lk, .zc-layer-lk) .zc-kind-group small, :is(.zc-lk, .zc-layer-lk) .zc-kind-toggle small, :is(.zc-lk, .zc-layer-lk) .zc-chips small {
  font: 400 11px/1 var(--lk-font);
  opacity: .7;
}

:is(.zc-lk, .zc-layer-lk) .zc-chip {
  background: var(--lk-sel);
  height: 28px;
  color: var(--lk-ink);
  border-radius: 99px;
  font-size: 12.5px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-reset {
  color: var(--lk-ink-2);
  font-size: 12.5px;
}

:is(.zc-lk .zc, .zc-layer-lk) :is(.zc-gsearch-field, .zc-field, .zc-osearch) {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line-2);
  transition: box-shadow var(--lk-d2) var(--lk-ease);
  border-radius: 6px;
}

:is(.zc-lk .zc, .zc-layer-lk) :is(.zc-gsearch-field, .zc-field, .zc-osearch):focus-within {
  box-shadow: inset 0 0 0 1px var(--lk-brand), 0 0 0 3px var(--lk-glow-2), 0 0 18px -4px var(--lk-glow);
}

:is(.zc-lk, .zc-layer-lk) .zc-gsearch-field kbd {
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 4px;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 1;
}

.zr-app :is(.zc-lk, .zc-layer-lk) .zc-select select, .zr-app :is(.zc-lk .zc, .zc-layer-lk) .zc-select-plain {
  border-radius: 6px;
  height: 32px;
  font-size: 13px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-waiting {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line);
  color: var(--lk-ink-2);
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
}

:is(.zc-lk, .zc-layer-lk) .zc-dot {
  background: var(--lk-ok);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-ok) 20%, transparent);
  animation: zc-lk-breathe 2.4s var(--lk-ease) infinite;
  margin-top: 0;
}

@keyframes zc-lk-breathe {
  50% {
    box-shadow: 0 0 0 6px #0000;
  }
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-note {
  background: var(--lk-side);
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 8px;
  font-size: 13px;
}

:is(.zc-lk, .zc-layer-lk) .zc-keybar {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 8px;
}

:is(.zc-lk, .zc-layer-lk) .zc-keysel {
  background: var(--lk-hover);
  border-radius: 6px;
  height: 32px;
}

.zr-app :is(.zc-lk, .zc-layer-lk) .zc-keysel select {
  height: 32px;
}

:is(.zc-lk, .zc-layer-lk) .zc-keysel small {
  background: color-mix(in srgb, var(--lk-ok) 12%, transparent);
  color: var(--lk-ok);
  border-radius: 4px;
}

:is(.zc-lk, .zc-layer-lk) .zc-tray {
  background: var(--lk-raise);
  color: var(--lk-ink);
  box-shadow: var(--lk-shadow);
  border-radius: 10px;
  font-size: 13.5px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-tray .zc-btn-ghost {
  color: var(--lk-ink-2);
}

:is(.zc-lk, .zc-layer-lk) .zc-toast {
  background: var(--lk-raise);
  color: var(--lk-ink);
  box-shadow: var(--lk-shadow);
  border-radius: 10px;
  font-size: 13.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-toast a {
  color: var(--lk-ink);
  text-underline-offset: 3px;
  text-decoration: underline;
}

:is(.zc-lk, .zc-layer-lk) .zc-skeleton {
  background: linear-gradient(90deg, var(--lk-hover), var(--lk-sel), var(--lk-hover));
  background-size: 200% 100%;
  border-radius: 4px;
}

:is(.zc-lk, .zc-layer-lk) .zc-menu, :is(.zc-lk, .zc-layer-lk) .zc-popover, :is(.zc-lk, .zc-layer-lk) .zc-gsearch-list {
  background: var(--lk-raise);
  box-shadow: var(--lk-shadow);
  border-radius: 10px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-menu button {
  border-radius: 6px;
  min-height: 34px;
  font-size: 13.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-tip, :is(.zc-lk, .zc-layer-lk) .zc-hint-pop {
  background: var(--lk-ink);
  color: var(--lk-bg);
  border-radius: 6px;
}

:is(.zc-lk, .zc-layer-lk) .zc-tip dt {
  color: color-mix(in srgb, var(--lk-bg) 65%, transparent);
}

.zc-topline {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  display: flex;
}

.zc-topline .zc-crumbs {
  margin-bottom: 0;
}

.zc-lk .zc-pal-open {
  color: var(--lk-ink-3);
}

.zc-lk .zc-pal-open .lk-kbd {
  margin-left: 6px;
}

.zc-pal-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.lk .lk-pal li[role="option"] .zc-pmark {
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 5px;
  flex: none;
  place-items: center;
  display: grid;
}

.lk .lk-pal li[role="option"] small.lk-mono {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45%;
  overflow: hidden;
}

.lk .zc-pal-esc {
  cursor: pointer;
}

.zc-lk .zc:not(.zc-layer) {
  max-width: 1320px;
  padding-top: 24px;
}

.zc-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 20px;
  display: grid;
}

.zc-head .zc-lead {
  grid-column: 1 / -1;
}

.zc-head-acts {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

:is(.zc-lk, .zc-layer-lk) .zc-home .lk-stats {
  margin-bottom: 16px;
}

.zc-fbar {
  top: var(--top);
  z-index: 20;
  background: linear-gradient(var(--lk-bg) 82%, transparent);
  gap: 10px;
  margin: 0 -8px;
  padding: 10px 8px;
  display: grid;
  position: sticky;
}

:is(.zc-lk, .zc-layer-lk) .zc-gsearch {
  max-width: none;
  margin: 0;
}

:is(.zc-lk, .zc-layer-lk) .zc-gsearch-field {
  gap: 10px;
  height: 40px;
  padding: 0 8px 0 12px;
}

:is(.zc-lk, .zc-layer-lk) .zc-gsearch-field > svg {
  width: 16px;
  height: 16px;
  color: var(--lk-ink-3);
}

.zr-app :is(.zc-lk, .zc-layer-lk) .zc-gsearch-field input {
  height: 38px !important;
  font-size: 14px !important;
}

:is(.zc-lk, .zc-layer-lk) .zc-gsearch-list {
  padding: 6px;
  top: calc(100% + 6px);
}

:is(.zc-lk, .zc-layer-lk) .zc-gsearch-opt {
  border-radius: 6px;
  min-height: 38px;
  font-size: 13.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-gsearch-opt[aria-selected="true"] {
  background: var(--lk-sel);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-gsearch-group {
  padding: 8px 10px 4px;
  font-size: 11.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-kinds {
  gap: 6px;
}

.zc-fbar-gap {
  flex: 1;
}

.zc-fbar .lk-seg button {
  place-items: center;
  min-width: 30px;
  display: inline-grid;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-tiles {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 12px;
  margin-top: 8px;
}

:is(.zc-lk, .zc-layer-lk) .zc-tile[data-intro] {
  animation: lk-rise var(--lk-d3) var(--lk-ease) calc(var(--i) * 25ms) both;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-tile-link {
  background: var(--lk-bg);
  min-height: 150px;
  box-shadow: inset 0 0 0 1px var(--lk-line);
  transition: box-shadow var(--lk-d2) var(--lk-ease), transform var(--lk-d2) var(--lk-ease);
  border-radius: 10px;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 14px;
  display: grid;
}

:is(.zc-lk, .zc-layer-lk) .zc-tile-link:before {
  background: radial-gradient(70% 60% at 0% 0%, color-mix(in srgb, var(--hue) 10%, transparent), transparent 70%);
}

:is(.zc-lk, .zc-layer-lk) .zc-tile-link:after {
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, -300px) var(--my, -300px), var(--lk-glow), transparent 70%);
  -webkit-mask-composite: xor;
  transition: opacity var(--lk-d2);
  padding: 1px;
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-tile-link:hover {
  box-shadow: inset 0 0 0 1px var(--lk-line-2), 0 16px 32px -24px color-mix(in srgb, var(--hue) 50%, #00000080);
  transform: translateY(-2px);
}

:is(.zc-lk, .zc-layer-lk) .zc-tile-top {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

:is(.zc-lk, .zc-layer-lk) .zc-tile .zc-seal-sm {
  border-radius: 9px;
  width: 36px;
  height: 36px;
  transform: none;
}

:is(.zc-lk, .zc-layer-lk) .zc-tile-link:hover .zc-seal {
  transform: scale(1.06);
}

:is(.zc-lk, .zc-layer-lk) .zc-tile-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font: 600 15px/1.25 var(--lk-font);
  letter-spacing: -.01em;
  overflow: hidden;
}

.zc-tile-go {
  color: var(--lk-ink-3);
  opacity: 0;
  transition: opacity var(--lk-d2), transform var(--lk-d2) var(--lk-ease);
  margin-left: auto;
  transform: translate(-4px, 4px);
}

.zc-tile-link:hover .zc-tile-go, .zc-tile-link:focus-visible .zc-tile-go {
  opacity: 1;
  transform: none;
}

:is(.zc-lk, .zc-layer-lk) .zc-tile-list {
  color: var(--lk-ink-3);
  align-self: start;
  font-size: 12.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-tile-meta {
  border-top: 1px solid var(--lk-line);
  color: var(--lk-ink-2);
  gap: 4px 10px;
  padding-top: 10px;
  font-size: 12.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-tile-skel {
  height: 150px;
}

:is(.zc-lk, .zc-layer-lk) .zc-tile-skel .lk-skel {
  border-radius: 10px;
  height: 100%;
}

.zc-list-wrap {
  border-radius: 8px;
  margin-top: 8px;
  overflow-x: auto;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-th {
  color: inherit;
  font: inherit;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-th[data-on] {
  color: var(--lk-ink);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-prow {
  color: var(--lk-ink);
  align-items: center;
  gap: 10px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

:is(.zc-lk, .zc-layer-lk) .lk-table td.zc-prow-top {
  max-width: 360px;
}

:is(.zc-lk, .zc-layer-lk) .zc-phead {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 0 14px;
  display: grid;
}

.zc-plogo {
  width: 30px;
  height: 30px;
  box-shadow: inset 0 0 0 1px var(--lk-line);
  background: var(--lk-bg);
  border-radius: 7px;
  place-items: center;
  display: grid;
}

html[data-theme="dark"] .zc-plogo img[src$="/providers/moonshot.svg"] {
  filter: invert();
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-title-l2 {
  font-size: 22px;
  line-height: 30px;
}

.zc-phead-link {
  grid-area: 1 / 3;
}

.zc-pmeta {
  color: var(--lk-ink-3);
  flex-wrap: wrap;
  grid-column: 2 / -1;
  align-items: center;
  gap: 2px 0;
  font-size: 12.5px;
  display: flex;
}

.zc-pmeta > span:not(:last-child):not(.zc-off):after {
  content: "·";
  color: var(--lk-line-2);
  margin: 0 8px;
}

.zc-pmeta .zc-off {
  margin-left: 8px;
}

:is(.zc-lk, .zc-layer-lk) .zc-ftools {
  top: var(--top);
  z-index: 20;
  background: linear-gradient(var(--lk-bg) 82%, transparent);
  gap: 8px;
  margin: 0 -8px 4px;
  padding: 10px 8px;
}

:is(.zc-lk, .zc-layer-lk) .zc-field {
  min-width: 260px;
  height: 32px;
  padding: 0 6px 0 10px;
}

:is(.zc-lk, .zc-layer-lk) .zc-field > svg {
  width: 15px;
  height: 15px;
  color: var(--lk-ink-3);
}

.zr-app :is(.zc-lk, .zc-layer-lk) .zc-field input {
  height: 30px !important;
  font-size: 13.5px !important;
}

:is(.zc-lk, .zc-layer-lk) .zc-ftools .lk-seg button {
  place-items: center;
  min-width: 30px;
  display: inline-grid;
}

.zc-ftable-wrap {
  border-radius: 8px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ftable {
  table-layout: auto;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ftable thead th {
  top: calc(var(--top) + 52px);
  z-index: 3;
  position: sticky;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ftable td {
  max-width: none;
  height: 48px;
  padding-top: 6px;
  padding-bottom: 6px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ftable tbody tr {
  transition: background-color var(--lk-d1);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ftable tbody tr:hover td {
  background: var(--lk-hover);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ftable tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--lk-brand);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-th {
  min-height: 0;
  color: inherit;
  font: inherit;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-th:hover, :is(.zc-lk .zc, .zc-layer-lk) .zc-th[data-on] {
  color: var(--lk-ink);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-th svg.lk-i {
  width: 12px;
  height: 12px;
}

.zc-th-idle {
  opacity: 0;
  transition: opacity var(--lk-d1);
}

.zc-th:hover .zc-th-idle, .zc-th:focus-visible .zc-th-idle {
  opacity: .6;
}

.zc-c-name {
  width: 40%;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-mname {
  color: var(--lk-ink);
  text-align: left;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-mname:hover {
  text-underline-offset: 3px;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--lk-line-2);
  text-decoration-color: var(--lk-line-2);
}

.zc-mid {
  min-width: 0;
  color: var(--lk-ink-3);
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  font-size: 11.5px;
  display: flex;
}

.zc-mid code {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 11.5px !important;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-copy {
  width: 20px;
  height: 20px;
  min-height: 0;
  color: var(--lk-ink-3);
  opacity: 0;
  transition: opacity var(--lk-d1), background-color var(--lk-d1);
  border-radius: 4px;
  place-items: center;
  display: inline-grid;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-copy svg.lk-i {
  width: 12px;
  height: 12px;
}

.zc-ftable tr:hover .zc-copy, .zc-copy:focus-visible {
  opacity: 1;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-copy:hover {
  background: var(--lk-sel);
  color: var(--lk-ink);
}

.zc-c-kind {
  white-space: nowrap;
}

.zc-c-kind .zc-kind + .zc-kind {
  margin-left: 4px;
}

:is(.zc-lk, .zc-layer-lk) .zc-kind {
  background: var(--lk-hover);
  color: var(--lk-ink-2);
  padding: 1px 6px;
}

:is(.zc-lk, .zc-layer-lk) .zc-kind-text {
  color: var(--lk-ink-2);
  background: var(--lk-hover);
}

.zc-best {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.zc-caret {
  transition: transform var(--lk-d2) var(--lk-ease);
  color: var(--lk-ink-3);
}

.zc-caret[data-open] {
  transform: rotate(90deg);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-series-btn {
  min-height: 0;
  margin-left: -4px;
  padding: 0;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ftable tr[data-child] td {
  background: var(--lk-side);
  animation: lk-fadein var(--lk-d2) var(--lk-ease) both;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ftable tr[data-child] .zc-c-name {
  padding-left: 32px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-mgrid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.zc-mcard {
  min-width: 0;
  animation: lk-rise var(--lk-d3) var(--lk-ease) calc(var(--i) * 15ms) both;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-mcard-link {
  background: var(--lk-bg);
  min-height: 96px;
  box-shadow: inset 0 0 0 1px var(--lk-line);
  color: var(--lk-ink);
  transition: box-shadow var(--lk-d1), background-color var(--lk-d1);
  border-radius: 8px;
  gap: 4px;
  padding: 10px 12px;
  text-decoration: none;
  display: grid;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-mcard-link:hover {
  background: var(--lk-hover);
  box-shadow: inset 0 0 0 1px var(--lk-line-2);
}

.zc-mcard-top {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.zc-mcard-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-mcard-id {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--lk-ink-3);
  overflow: hidden;
  font-size: 11.5px !important;
}

.zc-mcard-foot {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  display: flex;
}

.zc-mcard-price {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

:is(.zc-lk, .zc-layer-lk) .zc-pair {
  font: 500 13px/1.25 var(--lk-font);
}

.zc-ahead {
  gap: 4px;
  padding: 4px 0 16px;
  display: grid;
}

.zc-ahead .zc-pmeta {
  grid-column: auto;
}

.zc-ahead .zc-lead {
  margin-top: 6px;
}

:is(.zc-lk, .zc-layer-lk) .zc-pass {
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: 20px 32px;
  padding: 4px 0 20px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-pass-provider {
  color: var(--lk-ink-2);
  gap: 8px;
  font-size: 13px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-pass-provider:hover {
  color: var(--lk-ink);
}

.zc-plogo-sm {
  border-radius: 5px;
  width: 22px;
  height: 22px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-title-l3 {
  margin-top: 10px;
  font-size: 22px;
  line-height: 30px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-pass-id {
  margin-top: 4px;
}

:is(.zc-lk, .zc-layer-lk) .zc-pass-id code {
  color: var(--lk-ink-3);
  font-size: 12px !important;
}

:is(.zc-lk, .zc-layer-lk) .zc-pass-kinds {
  gap: 4px;
  margin-top: 12px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-pass-desc {
  color: var(--lk-ink-2);
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
}

:is(.zc-lk, .zc-layer-lk) .zc-pass-facts {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 8px;
  gap: 12px;
  padding: 14px 16px;
}

:is(.zc-lk, .zc-layer-lk) .zc-pass-dl {
  gap: 10px 16px;
}

:is(.zc-lk, .zc-layer-lk) .zc-pass-dl dt, :is(.zc-lk, .zc-layer-lk) .zc-official-grid dt {
  color: var(--lk-ink-3);
  font-size: 11.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-pass-dl dd {
  font: 500 14px/1.3 var(--lk-font);
}

:is(.zc-lk, .zc-layer-lk) .zc-official-grid dd {
  font: 500 14px/1.2 var(--lk-font);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-pass-noprice {
  font-size: 13px;
}

:is(.zc-lk, .zc-layer-lk) .zc-variants {
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 6px;
}

:is(.zc-lk, .zc-layer-lk) .zc-variant {
  font: 400 12.5px/1.3 var(--lk-font);
  padding: 7px 12px;
}

:is(.zc-lk, .zc-layer-lk) .zc-variant code {
  font-size: 12px !important;
}

:is(.zc-lk, .zc-layer-lk) .zc-variant-head {
  background: var(--lk-side);
  color: var(--lk-ink-2);
}

:is(.zc-lk, .zc-layer-lk) .zc-summary {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 8px;
  margin: 0 0 24px;
}

:is(.zc-lk, .zc-layer-lk) .zc-summary div {
  padding: 12px 16px;
}

:is(.zc-lk, .zc-layer-lk) .zc-summary dt {
  color: var(--lk-ink-2);
  font-size: 12.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-summary dd {
  font: 500 20px/1.3 var(--lk-font);
  letter-spacing: -.02em;
}

:is(.zc-lk, .zc-layer-lk) .zc-osec {
  gap: 10px;
}

:is(.zc-lk, .zc-layer-lk) .zc-osec-wrap > .zc-h2 {
  margin-bottom: 10px;
}

:is(.zc-lk, .zc-layer-lk) .zc-otools {
  z-index: auto;
  background: none;
  gap: 8px 10px;
  margin: 0;
  padding: 0 0 10px;
  position: static;
}

html body :is(.zc-lk, .zc-layer-lk) .zc-otools[data-idle] {
  display: none;
}

html body :is(.zc-lk, .zc-layer-lk) .zc-otools[data-solo] {
  grid-template-columns: minmax(0, 1fr) auto;
}

html body :is(.zc-lk, .zc-layer-lk) .zc-otools[data-solo] .zc-otrust {
  grid-area: 1 / 1;
}

html body :is(.zc-lk, .zc-layer-lk) .zc-otools[data-solo] .zc-sorts {
  grid-area: 2 / 1 / auto / -1;
  min-width: 0;
  margin: 0;
}

html body :is(.zc-lk, .zc-layer-lk) .zc-otools[data-solo] .zc-otools-btns {
  grid-area: 1 / 2;
  justify-content: flex-end;
}

:is(.zc-lk, .zc-layer-lk) .zc-otrust {
  justify-self: start;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-otools-btns {
  gap: 6px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-btn[data-busy] svg {
  animation: 1s linear infinite zc-spin;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-seg {
  background: color-mix(in srgb, var(--lk-side) 85%, transparent);
  max-width: 100%;
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 9px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-seg button {
  min-height: 28px;
  color: var(--lk-ink-2);
  font: 500 13px/1 var(--lk-font);
  white-space: nowrap;
  transition: background-color var(--lk-d1), color var(--lk-d1), box-shadow var(--lk-d1);
  border-radius: 6px;
  flex: none;
  padding: 0 12px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-seg button:hover:not(:disabled) {
  color: var(--lk-ink);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-seg button[aria-checked="true"] {
  background: color-mix(in srgb, var(--lk-brand) calc(14% * var(--nc-vib-accent)), var(--lk-raise));
  color: var(--lk-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-brand) calc(40% * var(--nc-vib-accent)), var(--lk-line-2)), 0 1px 2px #14280a1a;
}

html[data-theme="dark"] :is(.zc-lk .zc, .zc-layer-lk) .zc-seg button[aria-checked="true"] {
  background: color-mix(in srgb, var(--lk-brand) calc(18% * var(--nc-vib-accent)), var(--lk-sel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lk-brand) calc(40% * var(--nc-vib-accent)), var(--lk-line-2));
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-seg button:disabled {
  opacity: .45;
  cursor: default;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-seg button:focus-visible {
  outline: 2px solid var(--lk-brand);
  outline-offset: 1px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-scope {
  border-radius: 7px;
  width: 100%;
  padding: 2px;
  display: flex;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-scope button {
  text-overflow: ellipsis;
  border-radius: 5px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 24px;
  padding: 0 6px;
  font-size: 12px;
  overflow: hidden;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-oscope {
  box-shadow: none;
  border-radius: 6px;
  flex: none;
  padding: 2px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-oscope button {
  border-radius: 5px;
  min-height: 26px;
  padding: 0 9px;
  font-size: 12.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-osearch {
  height: 36px;
  padding: 0 6px;
}

.zr-app :is(.zc-lk, .zc-layer-lk) .zc-osearch input {
  height: 34px !important;
  font-size: 13.5px !important;
}

:is(.zc-lk, .zc-layer-lk) .zc-osearch > svg {
  width: 15px;
  height: 15px;
  color: var(--lk-ink-3);
}

.zr-app :is(.zc-lk .zc, .zc-layer-lk) .zc-scope {
  background: var(--lk-hover);
  border-radius: 5px;
  height: 26px;
  font-size: 12.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-otime {
  font: 400 11.5px/1 var(--lk-font);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-btn .zc-count {
  background: var(--lk-ink);
  color: var(--lk-bg);
  font: 600 11px/1.6 var(--lk-font);
}

:is(.zc-lk, .zc-layer-lk) .zc-otable {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 8px;
}

:is(.zc-lk, .zc-layer-lk) .zc-offer {
  border-top: 1px solid var(--lk-line);
  transition: background-color var(--lk-d1);
  gap: 12px;
  padding: 10px 12px;
}

:is(.zc-lk, .zc-layer-lk) .zc-offer:hover {
  background: var(--lk-hover);
  box-shadow: inset 2px 0 0 var(--lk-brand);
}

:is(.zc-lk, .zc-layer-lk) .zc-offer[data-picked] {
  background: var(--lk-sel);
  box-shadow: inset 2px 0 0 var(--lk-brand);
}

:is(.zc-lk, .zc-layer-lk) .zc-offer-head {
  background: var(--lk-side);
  min-height: 34px;
  color: var(--lk-ink-2);
  font: 500 12px/1.3 var(--lk-font);
  border-radius: 8px 8px 0 0;
  padding-top: 0;
  padding-bottom: 0;
}

:is(.zc-lk, .zc-layer-lk) .zc-offer-head:hover {
  background: var(--lk-side);
  box-shadow: none;
}

:is(.zc-lk, .zc-layer-lk) .zc-o-name .zc-link {
  font-size: 13.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-price strong {
  font: 500 13.5px/1.25 var(--lk-font);
}

:is(.zc-lk, .zc-layer-lk) .zc-price small, .zc-lk :is(.zc-o-lat, .zc-o-speed, .zc-o-blocks, .zc-o-cache) small {
  font-size: 11.5px;
}

:is(.zc-lk, .zc-layer-lk) :is(.zc-o-lat, .zc-o-speed, .zc-o-blocks, .zc-o-cache) {
  font: 400 13px/1.25 var(--lk-font);
}

:is(.zc-lk, .zc-layer-lk) .zc-strip-l {
  font-size: 10.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-strip-v {
  font: 500 11.5px/1 var(--lk-font);
}

:is(.zc-lk, .zc-layer-lk) .zc-cells > * {
  border-radius: 2px;
}

:is(.zc-lk, .zc-layer-lk) .zc-bar {
  background: var(--lk-line);
  border-radius: 2px;
}

:is(.zc-lk, .zc-layer-lk) .zc-bar b {
  background: var(--lk-brand);
  border-radius: 2px;
}

:is(.zc-lk, .zc-layer-lk) .zc-o-tags .zc-badge {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  padding: 1px 6px;
}

:is(.zc-lk, .zc-layer-lk) :is(.zc-tag-stable, .zc-tag-cheap, .zc-tag-fast, .zc-tag-quality, .zc-tag-trusted, .zc-tag-observing, .zc-verify-verified) {
  background: var(--lk-hover);
  color: var(--lk-ink-2);
}

:is(.zc-lk, .zc-layer-lk) .zc-tag-stable:before, :is(.zc-lk, .zc-layer-lk) .zc-tag-cheap:before, :is(.zc-lk, .zc-layer-lk) .zc-tag-fast:before, :is(.zc-lk, .zc-layer-lk) .zc-tag-quality:before, :is(.zc-lk, .zc-layer-lk) .zc-tag-trusted:before {
  content: "";
  background: var(--c);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

:is(.zc-lk, .zc-layer-lk) .zc-tag-stable {
  --c: var(--lk-ok);
}

:is(.zc-lk, .zc-layer-lk) .zc-tag-cheap {
  --c: var(--lk-brand-2);
}

:is(.zc-lk, .zc-layer-lk) .zc-tag-fast {
  --c: #6f86d6;
}

:is(.zc-lk, .zc-layer-lk) .zc-tag-quality {
  --c: var(--lk-brand);
}

:is(.zc-lk, .zc-layer-lk) .zc-tag-trusted {
  --c: var(--lk-warn);
}

:is(.zc-lk, .zc-layer-lk) .zc-rating svg {
  fill: var(--lk-warn);
  color: var(--lk-warn);
}

:is(.zc-lk, .zc-layer-lk) .zc-pager {
  padding: 10px 12px;
  font-size: 12.5px;
}

.zr-app :is(.zc-lk, .zc-layer-lk) .zc-size select {
  border-radius: 6px;
  height: 28px;
}

.zc-o-line {
  display: none;
}

.zc-o-line .lk-st[data-tone="ok"] {
  --c: var(--lk-ok);
}

.zc-o-line .lk-st[data-tone="warn"] {
  --c: var(--lk-warn);
}

.zc-o-line .lk-st[data-tone="err"] {
  --c: var(--lk-err);
}

.zc-o-line-state {
  color: var(--lk-err);
}

:is(.zc-lk, .zc-layer-lk) .zc-ghost {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border: 0;
  border-radius: 8px;
}

:is(.zc-lk, .zc-layer-lk) .zc-ghost-text {
  gap: 10px;
  padding: 20px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ghost-text h3 {
  font: 600 16px/1.3 var(--lk-font);
  letter-spacing: 0;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-ghost-text p {
  font-size: 13px;
}

.lk.zc-layer-lk {
  background: none;
  min-height: 0;
  font-size: 13.5px;
}

.zc-layer-lk .zc-backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: lk-fadein var(--lk-d2) var(--lk-ease) both;
  background: #00000047;
}

html[data-theme="dark"] .zc-layer-lk .zc-backdrop {
  background: #0009;
}

.zc-layer-lk .zc-sheet {
  background: var(--lk-raise);
  box-shadow: var(--lk-shadow);
  animation: lk-slide var(--lk-d3) var(--lk-ease) both;
  border-radius: 12px;
  top: 8px;
  bottom: 8px;
  right: 8px;
}

.zc-layer-lk .zc-sheet-head {
  border-bottom: 1px solid var(--lk-line);
  align-items: center;
  padding: 14px 14px 12px 18px;
}

.zc-layer-lk .zc .zc-sheet-head h2, .zc-layer-lk.zc .zc-sheet-head h2 {
  font: 600 16px/1.3 var(--lk-font);
  letter-spacing: -.01em;
}

.zc-layer-lk .zc-sheet-sub {
  margin-top: 4px;
  font-size: 12.5px;
}

.zc-layer-lk .zc-sheet-body {
  gap: 18px;
  padding: 14px 18px 22px;
}

.zc-layer-lk .zc-sheet-foot {
  border-top: 1px solid var(--lk-line);
  background: var(--lk-side);
  border-radius: 0 0 12px 12px;
  gap: 8px;
  padding: 10px 14px;
}

.zc-layer-lk .zc-sheet-sec {
  gap: 8px;
}

.zc-layer-lk .zc-sheet-sec h3 {
  font: 600 13px/1.3 var(--lk-font);
  color: var(--lk-ink);
}

.zc-layer-lk .zc-sheet-desc {
  font-size: 13.5px;
}

.zc-layer-lk .zc-big-price {
  font: 600 22px/1.2 var(--lk-font);
  letter-spacing: -.02em;
}

.zc-layer-lk .zc-big-price small {
  font-size: 12.5px;
}

.zc-layer-lk .zc-facts {
  gap: 10px 16px;
}

.zc-layer-lk .zc-facts dt {
  color: var(--lk-ink-3);
  font-size: 11.5px;
}

.zc-layer-lk .zc-facts dd {
  font: 500 13.5px/1.3 var(--lk-font);
}

.zc-layer-lk :is(.zc-ptable, .zc-ctable) {
  font-size: 13px;
}

.zc-layer-lk :is(.zc-ptable, .zc-ctable) :is(th, td) {
  border-bottom: 1px solid var(--lk-line);
  font-family: var(--lk-font);
  padding: 8px 10px;
}

.zc-layer-lk :is(.zc-ptable, .zc-ctable) thead th {
  background: var(--lk-side);
  color: var(--lk-ink-2);
  font-weight: 500;
}

.zc-layer-lk .zc-ctable td[data-best] {
  color: var(--lk-ok);
  background: color-mix(in srgb, var(--lk-ok) 8%, transparent);
}

.zc-layer-lk .zc-table-wrap {
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 8px;
}

.zc-layer-lk :is(.zc-pool-list li, .zc-blocks li) {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line);
  border-radius: 6px;
}

.zc-layer-lk .zc-seller-more li {
  font-size: 13px;
}

.zc-layer-lk .zc-seller-more .zc-num {
  font: 500 13px/1.3 var(--lk-font);
}

.zc-layer-lk .zc-sheet-sec .zc-cells > * {
  border-radius: 2px;
  height: 14px;
}

.zc-layer-lk .zc-check, .zc-layer-lk .zc-switch {
  font-size: 13.5px;
}

.zc-layer-lk .zc-review-form, .zc-layer-lk .zc-report, .zc-layer-lk .zc-elig {
  border-radius: 8px;
}

.zc-layer-lk .zc-textfield textarea {
  background: var(--lk-bg);
  box-shadow: inset 0 0 0 1px var(--lk-line-2);
  border-radius: 6px;
}

.zc-layer-lk .zc-textfield textarea:focus {
  box-shadow: inset 0 0 0 1px var(--lk-brand), 0 0 0 3px var(--lk-glow-2);
  outline: none;
}

.zc-layer-lk .zc-review-reply {
  border-left-color: var(--lk-line-2);
  background: var(--lk-side);
  border-radius: 0 6px 6px 0;
}

.zc-layer-lk .zc-verified {
  color: var(--lk-ok);
}

.zc-layer-lk .zc-stars [data-on], .zc-layer-lk .zc-stars-pick [data-on] svg, .zc-layer-lk .zc-rev-summary svg {
  color: var(--lk-warn);
  fill: var(--lk-warn);
}

@media (max-width: 1100px) {
  :is(.zc-lk .zc, .zc-layer-lk) .zc-title {
    font-size: calc(26px + 4px * var(--nc-vib-vivid));
  }
}

@media (max-width: 767px) {
  :is(.zc-lk .zc, .zc-layer-lk) {
    --top: 60px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-title {
    font-size: 22px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-lead {
    font-size: 13.5px;
  }

  .zc-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .zc-head-acts {
    width: 100%;
  }

  .zc-head-acts .lk-btn {
    flex: 1;
    min-height: 44px;
  }

  .zc-fbar {
    margin: 0 -12px;
    padding: 8px 12px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-gsearch-field {
    height: 44px;
  }

  .zr-app :is(.zc-lk, .zc-layer-lk) .zc-gsearch-field input {
    height: 42px !important;
    font-size: 16px !important;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-kinds {
    scrollbar-width: none;
    flex-wrap: nowrap;
    margin: 0 -12px;
    padding: 0 12px 2px;
    overflow-x: auto;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-kind-group button, :is(.zc-lk .zc, .zc-layer-lk) .zc-kind-toggle {
    min-height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }

  .zc-fbar-gap {
    display: none;
  }

  .zc-fbar .lk-seg {
    flex: none;
  }

  .zc-fbar .lk-seg button {
    min-width: 40px;
    min-height: 36px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-tile-link {
    gap: 8px;
    min-height: 120px;
    padding: 12px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-tile .zc-seal-sm {
    width: 30px;
    height: 30px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-tile .zc-seal svg, :is(.zc-lk, .zc-layer-lk) .zc-tile .zc-seal img {
    width: 18px !important;
    height: 18px !important;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-tile-name {
    font-size: 14px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-tile-list, :is(.zc-lk, .zc-layer-lk) .zc-tile-go {
    display: none;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-tile-skel {
    height: 120px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-phead {
    grid-template-columns: auto minmax(0, 1fr);
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-title-l2 {
    font-size: 20px;
  }

  .zc-pmeta {
    grid-column: 1 / -1;
  }

  .zc-phead-link {
    grid-area: auto / 1 / auto / -1;
    justify-self: start;
    min-height: 40px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-ftools {
    margin: 0 0 4px;
    padding: 8px 0;
    position: static;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-field {
    flex: 100%;
    min-width: 0;
    height: 44px;
  }

  .zr-app :is(.zc-lk, .zc-layer-lk) .zc-field input {
    height: 42px !important;
    font-size: 16px !important;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-ftools .lk-seg button {
    min-width: 44px;
    min-height: 36px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable, :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable tbody {
    background: none;
    border: 0;
    display: block;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable thead {
    display: none;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable tr {
    border-bottom: 1px solid var(--lk-line);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name best"
                         "name price";
    align-items: center;
    gap: 0 10px;
    min-height: 52px;
    padding: 8px 2px;
    display: grid;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable td {
    border: 0;
    height: auto;
    padding: 0;
    display: block;
    box-shadow: none !important;
    background: none !important;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable .zc-c-name {
    grid-area: name;
    width: auto;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable .zc-c-price {
    color: var(--lk-ink-2);
    grid-area: price;
    font-size: 12.5px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable .zc-c-best {
    grid-area: best;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable :is(.zc-c-kind, .zc-c-ctx, .zc-c-offers) {
    display: none;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable tr:not(:has(.zc-c-best)) {
    grid-template-areas: "name price";
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-copy {
    opacity: .7;
    width: 28px;
    height: 28px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-ftable tr[data-child] .zc-c-name {
    padding-left: 18px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-pass {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otools {
    margin: 0;
    padding: 8px 0;
    position: static;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-osearch {
    height: 44px;
  }

  .zr-app :is(.zc-lk, .zc-layer-lk) .zc-osearch input {
    height: 42px !important;
    font-size: 16px !important;
  }

  .zr-app :is(.zc-lk .zc, .zc-layer-lk) .zc-scope {
    height: 36px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-icon {
    width: 40px;
    height: 40px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-icon-sm {
    width: 36px;
    height: 36px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) :is(.zc-sorts > button, .zc-more > button, .zc-chips button) {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable {
    box-shadow: none;
    background: none;
    gap: 6px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable .zc-offer {
    background: var(--lk-bg);
    box-shadow: inset 0 0 0 1px var(--lk-line);
    border-radius: 8px;
    grid-template-areas: "pick seller vs"
                         "pick price price"
                         "pick line line";
    gap: 4px 10px;
    padding: 10px 12px;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable :is(.zc-o-rel, .zc-o-lat, .zc-o-cache, .zc-o-speed, .zc-o-blocks, .zc-o-last, .zc-o-actions, .zc-o-desc, .zc-o-tags) {
    display: none;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable .zc-o-seller {
    gap: 2px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable .zc-o-price .zc-price {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    display: flex;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-o-line {
    color: var(--lk-ink-2);
    flex-wrap: wrap;
    grid-area: line;
    align-items: center;
    gap: 2px 12px;
    font-size: 12px;
    display: flex;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-o-line .zc-badge {
    font-size: 11px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-summary {
    margin-bottom: 16px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-o-pick {
    align-self: center;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -12px 0 -12px -12px;
    display: grid;
  }

  .zr-app :is(.zc-lk, .zc-layer-lk) .zc-size select {
    height: 36px;
  }

  .zc-layer-lk :is(.zc-sheet-md, .zc-sheet-lg) {
    width: auto;
    max-height: none;
    animation: lk-up var(--lk-d3) var(--lk-ease) both;
    border-radius: 0;
    inset: 0;
  }

  .zc-layer-lk :is(.zc-sheet-md, .zc-sheet-lg) .zc-sheet-head {
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  .zc-layer-lk :is(.zc-sheet-md, .zc-sheet-lg) .zc-sheet-foot {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .zc-layer-lk .zc-sheet-sm {
    border-radius: 14px 14px 0 0;
    width: auto;
    inset: auto 0 0;
  }

  .zc-layer-lk .zc-sheet-body {
    padding: 12px 14px calc(20px + env(safe-area-inset-bottom));
  }

  .zc-layer-lk .zc-sheet-foot .zc-btn {
    flex: 1;
  }

  .zc-lk .zc-pal-open .t, .zc-lk .zc-pal-open .lk-kbd {
    display: none;
  }

  .zc-lk .zc-pal-open {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .lk .zc-pal-esc {
    min-height: 36px;
    padding: 0 10px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-btn {
    min-height: 40px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-btn-sm {
    min-height: 36px;
  }
}

@media (pointer: coarse) {
  html body :is(.zc-lk .zc, .zc-layer-lk) :is(.zc-btn, .lk-btn) {
    min-height: 40px;
  }

  html body :is(.zc-lk .zc, .zc-layer-lk) :is(.zc-kind-group button, .zc-kind-toggle, .zc-sorts > button, .zc-more > button, .zc-chips button) {
    min-height: 36px;
    padding: 0 12px;
  }

  html body :is(.zc-lk .zc, .zc-layer-lk) .zc-icon {
    width: 40px;
    height: 40px;
  }

  html body :is(.zc-lk .zc, .zc-layer-lk) .zc-icon-sm {
    width: 36px;
    height: 36px;
  }

  html body :is(.zc-lk, .zc-layer-lk) :is(.zc-field, .zc-osearch) {
    height: 44px;
  }

  html body .zr-app :is(.zc-lk, .zc-layer-lk) :is(.zc-field, .zc-osearch) input {
    height: 42px !important;
    font-size: 16px !important;
  }

  html body .zr-app :is(.zc-lk, .zc-layer-lk) .zc .zc-scope {
    height: 36px;
  }

  html body :is(.zc-lk, .zc-layer-lk) .lk-seg button {
    min-width: 40px;
    min-height: 36px;
  }

  html body :is(.zc-lk .zc, .zc-layer-lk) .zc-copy {
    opacity: .7;
    width: 32px;
    height: 32px;
  }

  html body :is(.zc-lk, .zc-layer-lk) .zc-o-pick {
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    display: grid;
  }
}

@media (min-width: 1920px) {
  .zc-lk .zc:not(.zc-layer) {
    max-width: 1440px;
  }
}

@media (min-width: 2400px) {
  .zc-lk .zc:not(.zc-layer) {
    max-width: 1560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.zc-lk, .zc-layer-lk) .zc-dot {
    animation: none;
  }
}

.zc-lk .zc[data-rail]:not(.zc-layer) {
  --zc-gut: clamp(12px, 1.6vw, 24px);
  --zc-end: 48px;
  max-width: none;
  padding-top: 0;
  padding-inline: 0 var(--zc-gut);
  padding-bottom: var(--zc-end);
}

.zc-split {
  min-height: calc(100vh - var(--top));
  min-height: calc(100dvh - var(--top));
  grid-template-columns: 252px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  display: grid;
}

.zc-col {
  min-width: 0;
  padding: 24px 0 0 28px;
}

@media (min-width: 901px) {
  .zc-lk .zc[data-rail]:not(.zc-layer) {
    padding-bottom: 0;
  }

  .zc-split {
    background: linear-gradient(90deg, color-mix(in srgb, var(--lk-bg) 50%, transparent) 0 251px, var(--lk-line-2) 251px 252px, transparent 252px);
  }

  .zc-col {
    padding-bottom: var(--zc-end);
  }

  .zc-lk:has( > .zc[data-rail]) + .zr-site-footer {
    margin-top: 0;
  }
}

.zc-rail {
  top: var(--top);
  height: calc(100vh - var(--top));
  height: calc(100dvh - var(--top));
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  border-right: 1px solid #0000;
  position: sticky;
  overflow-y: auto;
}

.zc-rail:is(:hover, :focus-within) {
  scrollbar-color: var(--lk-line-2) transparent;
}

.zc-rail-body {
  gap: 8px;
  padding: 8px;
  display: grid;
}

.zc-rail .zc-rail-body {
  padding: 14px 0 18px 12px;
}

.zc-rail :is(.zc-rail-search, .zc-rail-scope, .zc-rail-kinds) {
  margin-right: 12px;
}

.zc-rail-search {
  border: 1px solid var(--lk-line-2);
  background: var(--lk-bg);
  min-height: 32px;
  color: var(--lk-ink-3);
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  display: flex;
}

.zc-rail-search:focus-within {
  border-color: var(--lk-brand);
  box-shadow: 0 0 0 3px var(--lk-glow-2);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-search input {
  width: 0;
  min-width: 0;
  height: 30px;
  color: var(--lk-ink);
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 13px;
}

.zc-rail-search input::-webkit-search-cancel-button {
  display: none;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-body {
  grid-template-columns: minmax(0, 1fr);
}

.zc-rail-kinds {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-kinds button {
  border: 1px solid var(--lk-line-2);
  min-height: 24px;
  color: var(--lk-ink-2);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-kinds button[aria-pressed="true"] {
  border-color: var(--lk-ink);
  background: var(--lk-ink);
  color: var(--lk-bg);
}

.zc-rail-list {
  gap: 1px;
  display: grid;
}

.zc-rail-prov {
  align-items: center;
  display: flex;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-caret {
  width: 22px;
  height: 30px;
  color: var(--lk-ink-3);
  border-radius: 6px;
  flex: none;
  place-items: center;
  display: grid;
}

.zc-rail-caret:hover {
  color: var(--lk-ink);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-pname, :is(.zc-lk .zc, .zc-layer-lk) .zc-rail-fam {
  min-width: 0;
  min-height: 32px;
  color: var(--lk-ink-2);
  transition: background-color var(--lk-d1), box-shadow var(--lk-d1);
  border-radius: 7px;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  text-decoration: none;
  display: flex;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-pname {
  color: var(--lk-ink);
  font-weight: 600;
}

.zc-rail-pname:hover, .zc-rail-fam:hover {
  background: color-mix(in srgb, var(--lk-brand) 8%, transparent);
  color: var(--lk-ink);
}

:is(.zc-lk .zc, .zc-layer-lk) :is(.zc-rail-pname, .zc-rail-fam)[aria-current="page"] {
  background: var(--lk-raise);
  color: var(--lk-ink);
  box-shadow: inset 0 0 0 1px var(--lk-line-2), inset 3px 0 0 var(--lk-brand);
  font-weight: 600;
}

html[data-theme="dark"] :is(.zc-lk .zc, .zc-layer-lk) :is(.zc-rail-pname, .zc-rail-fam)[aria-current="page"] {
  background: var(--lk-sel);
}

:is(.zc-lk .zc) .zc-rail :is(.zc-rail-pname, .zc-rail-fam)[aria-current="page"] {
  box-shadow: inset 0 1px 0 var(--lk-line-2), inset 0 -1px 0 var(--lk-line-2), inset 3px 0 0 var(--lk-brand);
  border-radius: 7px 0 0 7px;
}

html:not([data-theme="dark"]) :is(.zc-lk .zc) .zc-rail :is(.zc-rail-pname, .zc-rail-fam)[aria-current="page"] {
  background: var(--lk-bg);
}

.zc-rail .zc-rail-group + .zc-rail-group {
  border-top: 1px solid color-mix(in srgb, var(--lk-line) 70%, transparent);
}

.zc-rail-logo {
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--pc, var(--lk-brand)) 40%, transparent) var(--nc-vib-accent-mix), var(--lk-line-2));
  background: color-mix(in srgb, var(--pc, var(--lk-brand)) calc(15% * var(--nc-vib-accent)), var(--lk-raise));
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  display: inline-grid;
  box-shadow: inset 0 1px #ffffffb3;
}

html[data-theme="dark"] .zc-rail-logo {
  box-shadow: none;
}

:is(.zc-rail-group, .zc-picker)[data-provider="anthropic"] {
  --pc: #d97757;
}

:is(.zc-rail-group, .zc-picker)[data-provider="openai"] {
  --pc: #10a37f;
}

:is(.zc-rail-group, .zc-picker)[data-provider="google"] {
  --pc: #4285f4;
}

:is(.zc-rail-group, .zc-picker)[data-provider="deepseek"] {
  --pc: #4d6bfe;
}

:is(.zc-rail-group, .zc-picker)[data-provider="qwen"] {
  --pc: #615ced;
}

:is(.zc-rail-group, .zc-picker)[data-provider="moonshot-ai"] {
  --pc: #1783ff;
}

:is(.zc-rail-group, .zc-picker)[data-provider="z-ai"] {
  --pc: #6d7cff;
}

:is(.zc-rail-group, .zc-picker)[data-provider="minimax"] {
  --pc: #f14e64;
}

:is(.zc-rail-group, .zc-picker)[data-provider="xiaomi"] {
  --pc: #ff6900;
}

:is(.zc-rail-group, .zc-picker)[data-provider="perplexity"] {
  --pc: #20808d;
}

:is(.zc-rail-group, .zc-picker)[data-provider="bytedance"] {
  --pc: #00c8d2;
}

:is(.zc-rail-group, .zc-picker)[data-provider="wan"] {
  --pc: #ff7a45;
}

:is(.zc-rail-group, .zc-picker)[data-provider="kling"] {
  --pc: #00c27a;
}

:is(.zc-rail-group, .zc-picker)[data-provider="suno"] {
  --pc: #f7a600;
}

:is(.zc-rail-group, .zc-picker)[data-provider="mistral"] {
  --pc: #fa500f;
}

:is(.zc-rail-group, .zc-picker)[data-provider="tencent"] {
  --pc: #1e88ff;
}

:is(.zc-rail-group, .zc-picker)[data-provider="recraft"] {
  --pc: #ff5a36;
}

:is(.zc-rail-group, .zc-picker)[data-provider="pixverse"] {
  --pc: #7b61ff;
}

:is(.zc-rail-group, .zc-picker)[data-provider="topaz"], :is(.zc-rail-group, .zc-picker)[data-provider="baai"] {
  --pc: #2f6fd6;
}

:is(.zc-rail-group, .zc-picker)[data-provider="infinitetalk"] {
  --pc: #10a38f;
}

:is(.zc-rail-group, .zc-picker):is([data-provider="xai"], [data-provider="black-forest-labs"], [data-provider="elevenlabs"], [data-provider="ideogram"], [data-provider="runway"]) {
  --pc: #8a8f98;
}

.zc-rail-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.zc-rail-n {
  min-width: 28px;
  color: var(--lk-ink-3);
  font: 500 11px/1 var(--nc-font-mono, ui-monospace, monospace);
  letter-spacing: -.01em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.zc-rail .zc-rail-n {
  padding-right: 12px;
}

html[data-theme="dark"] .zc-rail-n {
  color: var(--lk-ink-2);
}

.zc-rail :is(.zc-rail-pname, .zc-rail-fam, .zc-rail-caret):focus-visible {
  outline-offset: -2px;
}

.zc-rail-fams {
  border-left: 1px solid var(--lk-line);
  gap: 1px;
  margin: 2px 0 6px 18px;
  padding-left: 4px;
  display: grid;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-fam {
  min-height: 29px;
  font-size: 13px;
}

.zc-rail-fam[data-none] {
  color: var(--lk-ink-3);
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-series {
  color: var(--lk-ink-3);
  letter-spacing: .02em;
  padding: 6px 8px 2px;
  font-size: 11px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-rail-empty {
  color: var(--lk-ink-3);
  padding: 10px 8px;
}

.zc-picker {
  display: none;
}

@media (max-width: 900px) {
  .zc-lk .zc[data-rail]:not(.zc-layer) {
    padding-inline: var(--zc-gut);
  }

  .zc-split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .zc-col {
    padding: 0;
  }

  .zc-rail {
    display: none;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-picker {
    top: var(--top);
    z-index: 20;
    width: calc(100% + 2 * var(--zc-gut, 12px));
    min-height: 52px;
    margin: 0 calc(-1 * var(--zc-gut, 12px)) 12px;
    padding: 0 var(--zc-gut, 12px);
    border: 0;
    border-bottom: 1px solid var(--lk-line);
    background: var(--lk-side);
    color: var(--lk-ink);
    text-align: left;
    border-radius: 0;
    align-items: center;
    gap: 10px;
    display: flex;
    position: sticky;
    box-shadow: 0 6px 18px -14px #0006;
  }

  .zc-picker > svg {
    color: var(--lk-ink-3);
    margin-left: auto;
  }

  .zc-picker-t {
    min-width: 0;
    display: grid;
  }

  .zc-picker-t b {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    overflow: hidden;
  }

  .zc-picker-t small {
    color: var(--lk-ink-3);
    font-size: 12px;
  }
}

.zc.zc-layer.zc-picker-sheet {
  z-index: 400;
  overscroll-behavior: contain;
  padding: 0 10px calc(20px + env(safe-area-inset-bottom));
  background: var(--lk-bg);
  animation: lk-up var(--lk-d3) var(--lk-ease) both;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.zc-picker-head {
  z-index: 1;
  background: var(--lk-bg);
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  font-size: 16px;
  display: flex;
  position: sticky;
  top: 0;
}

.zc-picker-head .lk-btn {
  width: 44px;
  min-height: 44px;
  padding: 0;
}

.zc-layer-lk.zc-picker-sheet .zc-rail-body {
  padding: 0;
}

.zc-layer-lk.zc-picker-sheet :is(.zc-rail-pname, .zc-rail-fam, .zc-rail-caret) {
  min-height: 44px;
}

.zc-layer-lk.zc-picker-sheet .zc-rail-caret {
  width: 36px;
}

.zc-layer-lk.zc-picker-sheet .zc-rail-search {
  min-height: 44px;
}

.zc-layer-lk.zc-picker-sheet .zc-rail-search input {
  height: 42px;
  font-size: 16px;
}

.zc-layer-lk.zc-picker-sheet .zc-rail-kinds button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.zc-fh {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  padding: 6px 0 14px;
  display: grid;
}

.zc-fh-logo {
  grid-row: 1 / span 2;
  border-radius: 10px !important;
  width: 40px !important;
  height: 40px !important;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-fh-title {
  font: 600 24px/1.2 var(--lk-font);
  letter-spacing: -.02em;
}

.zc-fh-nav {
  align-items: center;
  gap: 6px;
  display: flex;
}

.zc-fh-pos {
  color: var(--lk-ink-3);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
  font-size: 12.5px;
}

.zc-fh-nav .lk-btn {
  width: 32px;
  padding: 0;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-fh-meta {
  color: var(--lk-ink-3);
  flex-wrap: wrap;
  grid-column: 2 / -1;
  align-items: center;
  gap: 6px 10px;
  display: flex;
}

.zc-fh-meta code {
  color: var(--lk-ink-2);
  font-size: 12.5px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-fh-prov {
  color: var(--lk-ink-2);
  text-decoration: none;
}

.zc-fh-prov:hover {
  color: var(--lk-ink);
  text-underline-offset: 3px;
  text-decoration: underline;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-facts {
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  border-radius: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 12px;
  display: grid;
}

.zc-facts > div {
  border-left: 1px solid var(--lk-line);
  gap: 2px;
  min-width: 0;
  padding: 10px 14px;
  display: grid;
}

.zc-facts > div:first-child {
  border-left: 0;
}

.zc-facts dt {
  color: var(--lk-ink-3);
  font-size: 12px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-facts dd {
  font: 600 17px/1.3 var(--lk-font);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  overflow: hidden;
}

.zc-facts dd small {
  color: var(--lk-ink-3);
  font-size: 12.5px;
  font-weight: 400;
}

.zc-fdetails {
  margin: 0 0 18px;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-fdetails > summary {
  min-height: 28px;
  color: var(--lk-ink-2);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  list-style: none;
  display: inline-flex;
}

.zc-fdetails > summary::-webkit-details-marker {
  display: none;
}

.zc-fdetails > summary:before {
  content: "›";
  transition: transform var(--lk-d1);
  display: inline-block;
}

.zc-fdetails[open] > summary:before {
  transform: rotate(90deg);
}

.zc-fdetails-body {
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  border-radius: 8px;
  gap: 14px;
  margin-top: 8px;
  padding: 14px 16px;
  display: grid;
}

.zc-fdetails-body .zc-official {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

@media (max-width: 1200px) {
  :is(.zc-lk .zc, .zc-layer-lk) .zc-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zc-facts > div:nth-child(4) {
    border-left: 0;
  }

  .zc-facts > div:nth-child(n+4) {
    border-top: 1px solid var(--lk-line);
  }
}

@media (max-width: 720px) {
  .zc-fh {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .zc-fh-logo {
    grid-row: auto;
    width: 32px !important;
    height: 32px !important;
  }

  .zc-fh-nav {
    grid-area: 3 / 1 / auto / -1;
  }

  .zc-fh-nav .lk-btn {
    width: 44px;
    min-height: 40px;
  }

  .zc-fh-meta {
    grid-column: 1 / -1 !important;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-fh-title {
    font-size: 20px;
  }

  :is(.zc-lk .zc, .zc-layer-lk) .zc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zc-facts > div {
    border-top: 1px solid var(--lk-line);
    border-left: 0 !important;
  }

  .zc-facts > div:nth-child(-n+2) {
    border-top: 0;
  }

  .zc-facts > div:nth-child(2n) {
    border-left: 1px solid var(--lk-line) !important;
  }

  .zc-facts > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .zc-lk .zc .zc-otools {
    grid-template-columns: minmax(0, 1fr);
  }

  html body :is(.zc-lk, .zc-layer-lk) .zc-otools[data-solo] .zc-otrust {
    grid-column: 1 / -1;
  }

  html body :is(.zc-lk, .zc-layer-lk) .zc-otools[data-solo] .zc-sorts {
    grid-column: 1;
  }

  html body :is(.zc-lk, .zc-layer-lk) .zc-otools[data-solo] .zc-otools-btns {
    grid-row: 2;
  }

  .zc-lk .zc .zc-otrust {
    scrollbar-width: none;
    overflow-x: auto;
  }

  .zc-lk .zc .zc-otrust button {
    min-height: 34px;
  }

  .zc-lk .zc .zc-osearch {
    flex-wrap: wrap;
    height: auto;
    padding: 6px;
  }

  .zc-lk .zc .zc-oscope {
    flex: 100%;
  }

  .zc-lk .zc .zc-oscope button {
    flex: 1 1 0;
    min-height: 32px;
  }

  .zc-lk .zc .zc-otools .zc-scope {
    flex: none;
    max-width: none;
  }

  .zc-lk .zc .zc-otools-btns {
    justify-content: flex-start;
  }
}

:is(.zc-lk, .zc-layer-lk) .zc-otable .zc-offer {
  gap: 8px;
}

:is(.zc-lk, .zc-layer-lk) .zc-o-seller {
  gap: 3px;
  min-width: 0;
  display: grid;
}

:is(.zc-lk, .zc-layer-lk) .zc-o-model {
  min-width: 0;
  color: var(--lk-ink);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: flex;
}

.zc-o-model b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

:is(.zc-lk, .zc-layer-lk) .zc-o-name {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  display: flex;
}

:is(.zc-lk, .zc-layer-lk) .zc-o-name .zc-o-desc {
  color: var(--lk-ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 12.5px;
  overflow: hidden;
}

.zc-o-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  display: flex;
}

.zc-o-no {
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--lk-line-2);
  max-width: 128px;
  color: var(--lk-ink-2);
  font: 400 11.5px/18px var(--lk-mono);
  border-radius: 5px;
  padding: 0 6px;
  overflow: hidden;
}

.zc-ostars {
  color: var(--lk-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: inline-flex;
}

.zc-ostars-row {
  gap: 1px;
  display: inline-flex;
}

.zc-ostars-row i {
  color: var(--lk-line-2);
  display: inline-grid;
}

.zc-ostars-row svg {
  fill: none;
  width: 12px;
  height: 12px;
}

:is(.zc-lk, .zc-layer-lk) .zc-ostars-row i[data-fill] {
  color: #d9a400;
}

:is(.zc-lk, .zc-layer-lk) .zc-ostars-row i[data-fill="full"] svg {
  fill: currentColor;
  stroke: currentColor;
}

:is(.zc-lk, .zc-layer-lk) .zc-ostars-row i[data-fill="half"] svg {
  fill: color-mix(in srgb, currentColor 45%, transparent);
  stroke: currentColor;
}

.zc-ostars-v small {
  color: var(--lk-ink-3);
}

.zc-check-tag[data-tone="warn"] {
  color: var(--lk-warn);
}

:is(.zc-lk, .zc-layer-lk) .zc-price-a6 {
  justify-items: start;
  gap: 3px;
  display: grid;
}

.zc-price-in small {
  color: var(--lk-ink-3);
  font-size: 12px;
}

:is(.zc-lk, .zc-layer-lk) .zc-price-in strong {
  font-size: 14px;
  font-weight: 600;
}

:is(.zc-lk, .zc-layer-lk) .zc-price-a6 .zc-off {
  white-space: nowrap;
  font-size: 11.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-otable .zc-cells {
  gap: 3px;
}

:is(.zc-lk, .zc-layer-lk) .zc-otable .zc-cells > * {
  border-radius: 999px;
  max-width: 9px;
  height: 11px;
}

:is(.zc-lk, .zc-layer-lk) .zc-o-err {
  font: 400 13px/1.25 var(--lk-font);
  gap: 2px;
  display: grid;
}

.zc-o-err strong[data-tone="good"] {
  color: var(--lk-ink);
  font-weight: 500;
}

.zc-o-err strong[data-tone="fair"] {
  color: var(--lk-warn);
}

.zc-o-err strong[data-tone="poor"] {
  color: var(--lk-err);
}

.zc-o-err small {
  color: var(--lk-ink-3);
  font-size: 11.5px;
}

@media (min-width: 768px) {
  :is(.zc-lk, .zc-layer-lk) .zc-otable .zc-o-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    display: grid;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable .zc-o-actions > .zc-btn {
    grid-column: 1;
    justify-content: center;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable .zc-o-actions > .zc-badge {
    grid-column: 1;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable .zc-o-actions > .zc-icon {
    grid-area: 1 / 2 / span 2;
  }
}

@media (max-width: 767px) {
  :is(.zc-lk, .zc-layer-lk) .zc-otable :is(.zc-o-err, .zc-o-no), :is(.zc-lk, .zc-layer-lk) .zc-otable:not([data-models]) .zc-o-model {
    display: none;
  }
}

:is(.zc-lk, .zc-layer-lk) .zc-otable .zc-o-actions > .zc-btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
}

:is(.zc-lk, .zc-layer-lk) .zc-otable {
  box-shadow: inset 0 0 0 1px var(--lk-line), inset 0 1px 0 #ffffffd9;
  border-radius: 14px;
}

html[data-theme="dark"] :is(.zc-lk, .zc-layer-lk) .zc-otable {
  box-shadow: inset 0 0 0 1px var(--lk-line), inset 0 1px 0 #ffffff0a;
}

:is(.zc-lk, .zc-layer-lk) .zc-offer {
  border-top: 0;
}

:is(.zc-lk, .zc-layer-lk) .zc-otable > .zc-offer:nth-child(odd):not(:first-child) {
  background: color-mix(in srgb, var(--lk-ink) 2.5%, transparent);
}

:is(.zc-lk, .zc-layer-lk) .zc-otable > .zc-offer:not(.zc-offer-head):hover {
  background: color-mix(in srgb, var(--lk-brand) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--lk-brand);
}

:is(.zc-lk, .zc-layer-lk) .zc-offer[data-picked] {
  box-shadow: inset 3px 0 0 var(--lk-brand);
}

:is(.zc-lk, .zc-layer-lk) .zc-offer-head {
  border-bottom: 1.5px solid var(--lk-line-2);
  background: color-mix(in srgb, var(--lk-side) 70%, transparent);
  min-height: 36px;
  font: 600 12px/1.3 var(--lk-font);
  border-radius: 14px 14px 0 0;
}

@media (max-width: 767px) {
  :is(.zc-lk, .zc-layer-lk) .zc-otable {
    box-shadow: none;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable .zc-offer {
    border-radius: 14px;
  }

  :is(.zc-lk, .zc-layer-lk) .zc-otable > .zc-offer:nth-child(odd):not(:first-child) {
    background: var(--lk-bg);
  }
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-facts {
  border-radius: 14px;
  box-shadow: inset 0 1px #ffffffd9;
}

html[data-theme="dark"] :is(.zc-lk .zc, .zc-layer-lk) .zc-facts {
  box-shadow: none;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-facts dt {
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

:is(.zc-lk .zc, .zc-layer-lk) .zc-facts dd {
  font-family: var(--nc-font-mono, ui-monospace, monospace);
  letter-spacing: -.01em;
  font-weight: 600;
}

/* [project]/src/components/lk/lk.css [app-client] (css) */
.lk {
  --lk-bg: #f7f9f3;
  --lk-side: #eef2e8;
  --lk-raise: #fff;
  --lk-panel: #fff;
  --lk-panel-shadow: 0 1px 0 #14280a0d, 0 1px 2px #14280a14, 0 10px 26px -16px #143c0a38;
  --lk-hover: #e9eee2;
  --lk-sel: #dfe8d4;
  --lk-line: #dbe2d1;
  --lk-line-2: #c5cfb8;
  --lk-ink: #0e1309;
  --lk-ink-2: #353d2e;
  --lk-ink-3: #4d5744;
  --lk-brand: #1f7d0c;
  --lk-brand-2: #0f9e8c;
  --lk-on-brand: #fff;
  --lk-ok: #18763a;
  --lk-warn: #8a5a00;
  --lk-err: #bf1f2a;
  --lk-bar: color-mix(in srgb, var(--lk-brand) 48%, var(--lk-bg));
  --lk-acc-1: #2f9a17;
  --lk-acc-2: #10a38f;
  --lk-acc-3: #c98a00;
  --lk-acc-4: #2f6fd6;
  --lk-cta-1: color-mix(in srgb, #1f7d0c var(--nc-vib-accent-mix), var(--lk-ink));
  --lk-cta-2: color-mix(in srgb, #0a7a6c var(--nc-vib-accent-mix), var(--lk-ink));
  --lk-on-cta: color-mix(in srgb, #fff var(--nc-vib-accent-mix), var(--lk-bg));
  --lk-glow: #1f7d0c61;
  --lk-glow-2: #1f7d0c24;
  --lk-glow-cursor: #1f7d0c24;
  --lk-shadow: 0 8px 30px #00000014, 0 0 0 1px #0000000f;
  --lk-font: var(--nc-font-sans);
  --lk-mono: var(--nc-font-mono);
  --lk-ease: var(--nc-ease, cubic-bezier(.2, .8, .2, 1));
  --lk-d1: var(--nc-fast, .15s);
  --lk-d2: var(--nc-base, .22s);
  --lk-d3: var(--nc-slow, .32s);
  --lk-side-w: 240px;
  --lk-top: 64px;
  background: var(--lk-bg);
  min-height: 100svh;
  color: var(--lk-ink);
  font: 400 13.5px/1.45 var(--lk-font);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

html[data-theme="dark"] .lk {
  --lk-bg: color-mix(in srgb, #050706 var(--nc-vib-vivid-mix), #0a0a0a);
  --lk-side: color-mix(in srgb, #050706 var(--nc-vib-vivid-mix), #0a0a0a);
  --lk-raise: color-mix(in srgb, #0d120e var(--nc-vib-vivid-mix), #111);
  --lk-panel: color-mix(in srgb, #0a0e0b var(--nc-vib-vivid-mix), #0d0d0d);
  --lk-panel-shadow: 0 0 0 1px rgb(157 224 114 / calc(.14 * var(--nc-vib-vivid))), 0 0 36px -14px rgb(157 224 114 / calc(.5 * var(--nc-vib-vivid))), 0 0 60px -30px rgb(61 209 188 / calc(.5 * var(--nc-vib-vivid)));
  --lk-brand-2: #3dd1bc;
  --lk-bar: color-mix(in srgb, var(--lk-brand) 34%, var(--lk-bg));
  --lk-acc-1: #9de072;
  --lk-acc-2: #3dd1bc;
  --lk-acc-3: #f5c83b;
  --lk-acc-4: #7aa7ff;
  --lk-cta-1: color-mix(in srgb, #9de072 var(--nc-vib-accent-mix), var(--lk-ink));
  --lk-cta-2: color-mix(in srgb, #3dd1bc var(--nc-vib-accent-mix), var(--lk-ink));
  --lk-on-cta: color-mix(in srgb, #06210f var(--nc-vib-accent-mix), var(--lk-bg));
  --lk-hover: color-mix(in srgb, #101811 var(--nc-vib-vivid-mix), #151515);
  --lk-sel: color-mix(in srgb, #142017 var(--nc-vib-vivid-mix), #1c1c1c);
  --lk-line: color-mix(in srgb, #1f2c21 var(--nc-vib-vivid-mix), #262925);
  --lk-line-2: color-mix(in srgb, #2c3f2e var(--nc-vib-vivid-mix), #363b34);
  --lk-ink: #f5f6f3;
  --lk-ink-2: #c8cdc2;
  --lk-ink-3: #aab1a2;
  --lk-brand: #9de072;
  --lk-on-brand: #0a0a0a;
  --lk-ok: #3fb950;
  --lk-warn: #d29922;
  --lk-err: #f85149;
  --lk-glow: #9de07299;
  --lk-glow-2: #9de07233;
  --lk-glow-cursor: #9de0724d;
  --lk-shadow: 0 12px 40px #0009, 0 0 0 1px #2b2b2b;
}

.lk[data-section$="money"] {
  --lk-brand: #1f7a3a;
  --lk-glow: #1f7a3a66;
  --lk-glow-2: #1f7a3a24;
}

html[data-theme="dark"] .lk[data-section$="money"] {
  --lk-brand: #4cc77a;
  --lk-on-brand: #04140a;
  --lk-glow: #4cc77a99;
  --lk-glow-2: #4cc77a33;
}

html:root body:has(.lk) {
  padding-bottom: 0;
  background-color: var(--nc-bg) !important;
}

.lk :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) {
  margin: 0;
}

.lk :where(h1, h2, h3, h4) {
  font-family: var(--lk-font);
  letter-spacing: normal;
}

.lk :where(a:not(.nc-btn):not(.nc-icon-btn)) {
  color: inherit;
  text-decoration: none;
}

.lk :where(button:not(.nc-btn):not(.nc-icon-btn):not(.nc-switch):not(.nc-chip)) {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.lk :where(p, li, td, th, label, dd, dt, span) {
  letter-spacing: normal;
}

.lk :where(:focus-visible) {
  outline: 2px solid var(--lk-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.lk .lk-mono {
  font-family: var(--lk-mono);
  letter-spacing: -.01em;
  font-size: 12px;
}

.lk .lk-muted {
  color: var(--lk-ink-2);
}

.lk .lk-faint {
  color: var(--lk-ink-3);
}

.lk .lk-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lk svg.lk-i {
  flex: none;
  width: 16px;
  height: 16px;
}

.lk-body {
  grid-template-columns: var(--lk-side-w) minmax(0, 1fr);
  min-height: calc(100svh - var(--lk-top));
  display: grid;
}

.lk-side {
  top: var(--lk-top);
  height: calc(100svh - var(--lk-top));
  border-right: 1px solid var(--lk-line);
  background: var(--lk-side);
  z-index: 3;
  flex-direction: column;
  align-self: start;
  gap: 2px;
  padding: 10px 8px 12px;
  display: flex;
  position: sticky;
  overflow-y: auto;
}

.lk-acct {
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 8px;
  display: flex;
}

.lk-acct:hover {
  background: var(--lk-hover);
}

.lk-ava {
  background: var(--lk-ink);
  width: 22px;
  height: 22px;
  color: var(--lk-bg);
  border-radius: 6px;
  flex: none;
  place-items: center;
  font-size: 11.5px;
  font-weight: 600;
  display: grid;
}

.lk-acct .who {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
}

.lk-acct .bal {
  color: var(--lk-ink-2);
  margin-left: auto;
  font-size: 12.5px;
}

.lk-searchbtn {
  width: 100%;
  height: 32px;
  transition: border-color var(--lk-d1) var(--lk-ease);
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  margin: 6px 0 8px;
  padding: 0 8px;
  display: flex;
  border: 1px solid var(--lk-line) !important;
  background: var(--lk-bg) !important;
  color: var(--lk-ink-3) !important;
}

.lk-searchbtn .t {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  min-width: 0;
  overflow: hidden;
}

.lk-searchbtn:is(:hover, :focus-visible) {
  border-color: var(--lk-line-2) !important;
  color: var(--lk-ink-2) !important;
}

.lk-kbd {
  border: 1px solid var(--lk-line);
  color: var(--lk-ink-3);
  font: 500 11px/1 var(--lk-font);
  border-radius: 4px;
  flex: none;
  margin-left: auto;
  padding: 3px 5px;
}

.lk-group {
  color: var(--lk-ink-2);
  letter-spacing: .02em;
  margin: 14px 8px 4px;
  font-size: 11.5px;
  font-weight: 600;
}

.lk-navlist {
  gap: 1px;
  display: grid;
  position: relative;
}

.lk-nav {
  z-index: 1;
  min-height: 32px;
  color: var(--lk-ink-2);
  transition: color var(--lk-d1) var(--lk-ease), background-color var(--lk-d1) var(--lk-ease);
  border-radius: 6px;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  display: flex;
  position: relative;
}

.lk-nav:hover {
  color: var(--lk-ink);
  background: var(--lk-hover);
}

.lk-nav[aria-current="page"] {
  color: var(--lk-ink);
  font-weight: 650;
}

.lk-nav[aria-current="page"]:not(:has(.cnt, .dot, .ext)):after {
  content: "";
  background: var(--lk-brand);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-brand) 22%, transparent);
  scale: var(--nc-vib-accent);
  border-radius: 50%;
  flex: none;
  margin-left: auto;
}

.lk-nav[aria-current="page"] .hk {
  display: none;
}

.lk-nav .cnt {
  color: var(--lk-ink-3);
  margin-left: auto;
  font-size: 11.5px;
}

.lk-nav .dot {
  background: var(--lk-brand);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-left: auto;
}

.lk-nav .hk {
  color: var(--lk-ink-3);
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity var(--lk-d1);
  margin-left: auto;
  font-size: 10.5px;
}

.lk-nav:hover .hk {
  opacity: 1;
}

.lk-nav .ext {
  color: var(--lk-ink-3);
  margin-left: auto;
}

.lk-navbar {
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--lk-brand) 20%, transparent) var(--nc-vib-accent-mix), var(--lk-glow-2)), transparent 85%), var(--lk-sel);
  box-shadow: inset calc(2px + 1px * var(--nc-vib-accent)) 0 0 var(--lk-brand), -6px 0 14px -6px var(--lk-glow);
  transition: transform var(--lk-d3) var(--lk-ease), height var(--lk-d3) var(--lk-ease), opacity var(--lk-d2);
  border-radius: 6px;
  position: absolute;
  left: 0;
  right: 0;
}

.lk-side-foot {
  color: var(--lk-ink-3);
  gap: 8px;
  margin-top: auto;
  padding: 10px 8px 0;
  font-size: 12px;
  display: grid;
}

.lk-side-foot .lk-btn {
  justify-content: center;
}

.lk-main {
  isolation: isolate;
  min-width: 0;
  position: relative;
}

.lk-page {
  z-index: 1;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 40px) 64px;
  position: relative;
}

.lk-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-height: 32px;
  margin-bottom: 20px;
  display: flex;
}

.lk-head h1 {
  font: 700 calc(22px + 8px * var(--nc-vib-vivid))/calc(30px + 8px * var(--nc-vib-vivid)) var(--nc-vib-title);
  letter-spacing: calc(-.02em - .015em * var(--nc-vib-vivid));
}

.lk-head .sub {
  color: var(--lk-ink-2);
}

.lk-head .acts {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.lk-head .lead {
  max-width: none;
  color: var(--lk-ink-2);
  flex: 1 0 100%;
  padding-right: max(0px, 100% - 72ch);
}

.lk-crumb {
  color: var(--lk-ink-3);
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12.5px;
  display: flex;
}

.lk-crumb a:hover {
  color: var(--lk-ink);
}

.lk-sec {
  margin-top: 34px;
}

.lk-sec > h2, .lk-h2 {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 650;
  display: flex;
}

.lk-sec > h2:before, .lk-h2:before {
  content: "";
  width: clamp(0px, var(--nc-vib-vivid) * 400px, 4px);
  height: 15px;
  margin-right: calc(clamp(0px, var(--nc-vib-vivid) * 800px, 8px) - 8px);
  background: linear-gradient(var(--lk-acc-1), var(--lk-acc-2));
  opacity: calc(.35 + .65 * var(--nc-vib-vivid));
  border-radius: 2px;
  flex: none;
}

.lk-sec > h2 .more, .lk-h2 .more {
  color: var(--lk-ink-2);
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 400;
}

.lk-cols {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px;
  display: grid;
}

.lk .lk-btn {
  border: 1px solid var(--lk-line-2);
  background: var(--lk-raise);
  min-height: 32px;
  color: var(--lk-ink);
  white-space: nowrap;
  transition: background-color var(--lk-d1) var(--lk-ease), box-shadow var(--lk-d2) var(--lk-ease), transform var(--lk-d1) var(--lk-ease);
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-weight: 500;
  display: inline-flex;
}

.lk .lk-btn:hover {
  background: var(--lk-hover);
}

.lk .lk-btn:active {
  transform: scale(.97);
}

.lk .lk-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.lk .lk-btn.primary {
  background: linear-gradient(135deg, var(--lk-cta-1), var(--lk-cta-2));
  color: var(--lk-on-cta);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--lk-cta-1) calc(80% * var(--nc-vib-accent)), transparent), inset 0 1px 0 rgb(255 255 255 / calc(.25 * var(--nc-vib-accent))), 0 0 0 1px color-mix(in srgb, var(--lk-brand) calc(30% * (1 - var(--nc-vib-accent))), transparent), 0 6px 22px -8px color-mix(in srgb, var(--lk-glow) calc(100% * (1 - var(--nc-vib-accent))), transparent);
  border-color: #0000;
}

.lk .lk-btn.primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 10px 26px -8px var(--lk-glow), inset 0 1px 0 rgb(255 255 255 / calc(.3 * var(--nc-vib-accent))), 0 0 0 1px color-mix(in srgb, var(--lk-brand) calc(45% * (1 - var(--nc-vib-accent))), transparent);
}

.lk[data-section$="money"] .lk-btn.primary {
  background: var(--lk-brand);
  border-color: var(--lk-brand);
  color: var(--lk-on-brand);
}

.lk .lk-btn.sm {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
}

.lk .lk-btn.ghost {
  background: none;
  border-color: #0000;
}

.lk .lk-btn.ghost:hover {
  background: var(--lk-hover);
}

.lk .lk-btn.danger {
  color: var(--lk-err);
}

.lk .lk-btn.icon {
  width: 32px;
  padding: 0;
}

.lk .lk-input, .lk .lk-field {
  border: 1px solid var(--lk-line-2);
  background: var(--lk-bg);
  min-height: 32px;
  color: var(--lk-ink);
  font: inherit;
  transition: border-color var(--lk-d1), box-shadow var(--lk-d2) var(--lk-ease);
  border-radius: 6px;
  padding: 0 10px;
}

.lk .lk-input::placeholder, .lk .lk-field::placeholder {
  color: var(--lk-ink-3);
}

.lk :is(.lk-input, .lk-field):focus {
  border-color: var(--lk-brand);
  box-shadow: 0 0 0 3px var(--lk-glow-2), 0 0 18px -4px var(--lk-glow);
  outline: none;
}

.lk-chips {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  display: flex;
}

.lk .lk-chip {
  border: 1px dashed var(--lk-line-2);
  min-height: 28px;
  color: var(--lk-ink-2);
  transition: border-color var(--lk-d1), color var(--lk-d1);
  border-radius: 99px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 12.5px;
  display: inline-flex;
}

.lk .lk-chip[aria-pressed="true"], .lk .lk-chip.on {
  color: var(--lk-ink);
  border-style: solid;
}

.lk .lk-chip b {
  color: var(--lk-ink);
  font-weight: 500;
}

.lk-seg {
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  border-radius: 7px;
  padding: 2px;
  display: inline-flex;
  position: relative;
}

.lk-seg button {
  z-index: 1;
  min-height: 24px;
  color: var(--lk-ink-2);
  white-space: nowrap;
  transition: color var(--lk-d1);
  border-radius: 5px;
  padding: 0 9px;
  font-size: 12.5px;
  position: relative;
}

.lk-seg button[aria-pressed="true"] {
  color: var(--lk-ink);
}

.lk-seg .ind {
  z-index: 0;
  background: color-mix(in srgb, color-mix(in srgb, var(--lk-brand) 18%, var(--lk-panel)) var(--nc-vib-accent-mix), var(--lk-sel));
  transition: transform var(--lk-d3) var(--lk-ease), width var(--lk-d3) var(--lk-ease);
  border-radius: 5px;
  position: absolute;
  top: 2px;
  bottom: 2px;
}

.lk-switch {
  background: var(--lk-line-2);
  vertical-align: middle;
  width: 30px;
  height: 18px;
  transition: background-color var(--lk-d2) var(--lk-ease);
  border-radius: 99px;
  flex: none;
  display: inline-block;
  position: relative;
}

.lk-switch:after {
  content: "";
  background: var(--lk-bg);
  width: 14px;
  height: 14px;
  transition: transform var(--lk-d2) var(--lk-ease);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}

.lk-switch[aria-checked="true"] {
  background: var(--lk-ink);
}

.lk-switch[aria-checked="true"]:after {
  transform: translateX(12px);
}

.lk-stats {
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  border-radius: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  display: grid;
}

.lk-stat {
  border-left: 1px solid var(--lk-line);
  min-width: 0;
  padding: 14px 16px;
  position: relative;
}

.lk-stat:first-child {
  border-left: 0;
  border-radius: 8px 0 0 8px;
}

.lk-stat:last-child {
  border-radius: 0 8px 8px 0;
}

.lk-stat .k {
  color: var(--lk-ink-2);
  font-size: 12.5px;
}

.lk-stat .v {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  display: flex;
}

.lk-stat .d {
  color: var(--lk-ink-3);
  font-size: 12px;
}

.lk-stat {
  --acc: var(--lk-acc-1);
}

.lk-stat:nth-child(4n+2) {
  --acc: var(--lk-acc-2);
}

.lk-stat:nth-child(4n+3) {
  --acc: var(--lk-acc-3);
}

.lk-stat:nth-child(4n+4) {
  --acc: var(--lk-acc-4);
}

.lk-stat:before {
  content: "";
  height: calc(3px * var(--nc-vib-accent));
  background: var(--acc);
  border-radius: 0 0 3px 3px;
  position: absolute;
  top: -1px;
  left: 14px;
  right: 14px;
}

.lk-stat .v {
  color: color-mix(in srgb, var(--acc) calc(58% * var(--nc-vib-accent)), var(--lk-ink));
}

.lk-stat .lk-spark {
  color: color-mix(in srgb, var(--acc) var(--nc-vib-accent-mix), var(--lk-brand));
}

.lk-delta {
  letter-spacing: 0;
  border-radius: 99px;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
}

.lk-delta.good {
  color: color-mix(in srgb, var(--lk-ok) 62%, var(--lk-ink));
  background: color-mix(in srgb, var(--lk-ok) 16%, transparent);
}

.lk-delta.bad {
  color: color-mix(in srgb, var(--lk-err) 62%, var(--lk-ink));
  background: color-mix(in srgb, var(--lk-err) 15%, transparent);
}

.lk-delta.flat {
  color: var(--lk-ink-3);
  background: var(--lk-hover);
}

.lk-spark {
  width: 100%;
  height: 26px;
  color: var(--lk-brand);
  margin-top: 8px;
  display: block;
  overflow: visible;
}

.lk-spark .f {
  fill: currentColor;
  opacity: calc(.08 + .06 * var(--nc-vib-accent));
}

.lk-spark .l {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3px;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: lk-draw .7s var(--lk-ease) both;
}

.lk-spark .p {
  fill: none;
  stroke: var(--lk-ink-3);
  stroke-width: 1px;
  stroke-dasharray: 2 2;
  opacity: .7;
}

@keyframes lk-draw {
  from {
    stroke-dashoffset: 1px;
  }
}

.lk-chart {
  border-bottom: 1px solid var(--lk-line-2);
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding-top: 8px;
  display: flex;
  position: relative;
}

.lk-chart > .col {
  flex: 1;
  min-width: 2px;
  height: 100%;
  position: relative;
}

.lk-chart > .col > i {
  background: var(--lk-bar);
  transform-origin: bottom;
  animation: lk-grow var(--lk-d3) var(--lk-ease) both;
  animation-delay: calc(var(--n, 0) * 8ms);
  border-radius: 1px 1px 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.lk-chart > .col:last-of-type > i, .lk-chart > .col:hover > i, .lk-chart > .col > i[data-on] {
  background: var(--lk-brand);
}

.lk-chart > .col > i.err {
  background: var(--lk-err);
}

.lk-chart > .col > b {
  border: 1px dashed var(--lk-ink-3);
  opacity: .7;
  pointer-events: none;
  border-bottom: 0;
  border-radius: 1px 1px 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.lk-chart .limit {
  border-top: 1px dashed var(--lk-warn);
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
}

.lk-chart .limit span {
  color: var(--lk-warn);
  font-size: 11px;
  position: absolute;
  top: -18px;
  right: 0;
}

@keyframes lk-grow {
  from {
    transform: scaleY(0);
  }
}

.lk-axis {
  color: var(--lk-ink-3);
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  display: flex;
}

.lk-meter {
  background: var(--lk-line);
  border-radius: 3px;
  height: 6px;
  margin-top: 6px;
  position: relative;
}

.lk-meter > i {
  background: linear-gradient(90deg, var(--lk-brand), var(--lk-brand-2));
  transform-origin: 0;
  animation: lk-fill .6s var(--lk-ease) both;
  border-radius: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.lk[data-section$="money"] .lk-meter > i {
  background: var(--lk-brand);
}

.lk-meter > i.warn {
  background: var(--lk-warn);
}

.lk-meter > i.err {
  background: var(--lk-err);
}

.lk-meter > s {
  background: var(--lk-ink-3);
  width: 1px;
  position: absolute;
  top: -3px;
  bottom: -3px;
}

.lk-meter.thin {
  height: 4px;
}

.lk-meter-l {
  color: var(--lk-ink-3);
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 11.5px;
  display: flex;
}

@keyframes lk-fill {
  from {
    transform: scaleX(0);
  }
}

.lk-heat {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  display: grid;
}

.lk-heat-days {
  color: var(--lk-ink-3);
  grid-template-rows: 14px repeat(7, 1fr);
  align-items: center;
  gap: 3px;
  font-size: 10px;
  line-height: 1;
  display: grid;
}

.lk-heat-wrap {
  scrollbar-width: thin;
  padding-top: 2px;
  overflow: auto visible;
}

.lk-heat-months {
  grid-template-columns: repeat(var(--weeks, 53), minmax(10px, 1fr));
  height: 14px;
  min-width: calc(var(--weeks, 53) * 13px);
  color: var(--lk-ink-3);
  gap: 3px;
  font-size: 10px;
  display: grid;
}

.lk-heat-grid {
  min-width: calc(var(--weeks, 53) * 13px);
  grid-template-rows: repeat(7, auto);
  grid-auto-columns: minmax(10px, 1fr);
  grid-auto-flow: column;
  gap: 3px;
  display: grid;
}

.lk-heat-grid > i {
  aspect-ratio: 1;
  background: var(--lk-hover);
  outline: 1px solid color-mix(in srgb, var(--lk-ink) 5%, transparent);
  outline-offset: -1px;
  animation: lk-pop var(--lk-d3) var(--lk-ease) both;
  animation-delay: calc(var(--c, 0) * 6ms);
  border-radius: 2px;
  position: relative;
}

.lk-heat-grid > i[data-l="1"] {
  background: color-mix(in srgb, var(--lk-brand) 25%, var(--lk-bg));
}

.lk-heat-grid > i[data-l="2"] {
  background: color-mix(in srgb, var(--lk-brand) 48%, var(--lk-bg));
}

.lk-heat-grid > i[data-l="3"] {
  background: color-mix(in srgb, var(--lk-brand) 72%, var(--lk-bg));
}

.lk-heat-grid > i[data-l="4"] {
  background: var(--lk-brand);
}

.lk-heat-grid > i[data-l="x"] {
  outline: 1px dashed var(--lk-line-2);
  background: none;
}

.lk-heat-grid > i[data-l="f"] {
  visibility: hidden;
}

.lk-heat-grid > i:hover, .lk-heat-grid > i[data-on] {
  z-index: 2;
  box-shadow: 0 0 0 1px var(--lk-brand), 0 0 10px 1px var(--lk-glow);
}

@keyframes lk-pop {
  from {
    opacity: 0;
    transform: scale(.6);
  }
}

.lk-heat-tip {
  z-index: 300;
  background: var(--lk-ink);
  color: var(--lk-bg);
  white-space: nowrap;
  pointer-events: none;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11.5px;
  position: fixed;
  transform: translate(-50%, calc(-100% - 8px));
}

.lk-heat-foot {
  color: var(--lk-ink-3);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
  font-size: 11.5px;
  display: flex;
}

.lk-heat-foot .leg {
  align-items: center;
  gap: 3px;
  margin-left: auto;
  display: inline-flex;
}

.lk-heat-foot .leg i {
  border-radius: 2px;
  width: 10px;
  height: 10px;
}

.lk .lk-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  border-radius: 8px;
  width: 100%;
}

.lk .lk-table th {
  border-bottom: 1px solid var(--lk-line);
  background: var(--lk-side);
  height: 34px;
  color: var(--lk-ink-2);
  text-align: left;
  white-space: nowrap;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
}

.lk .lk-table td {
  border-bottom: 1px solid var(--lk-line);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 280px;
  height: 40px;
  transition: background-color var(--lk-d1);
  padding: 0 12px;
  overflow: hidden;
}

.lk .lk-table tr:last-child td {
  border-bottom: 0;
}

.lk .lk-table tbody tr[data-click] {
  cursor: pointer;
}

.lk .lk-table :is(th, td).r {
  text-align: right;
}

.lk .lk-table tr.new td {
  animation: 1.6s ease-out both lk-arrive;
}

.lk .lk-table tr.new td:first-child {
  box-shadow: inset 2px 0 0 var(--lk-brand);
}

@keyframes lk-arrive {
  from {
    background: var(--lk-glow-2);
  }
}

.lk-scroll {
  border-radius: 8px;
  overflow-x: auto;
}

.lk-scroll > .lk-table th:first-child, .lk-scroll > .lk-table td:first-child {
  z-index: 1;
  background: var(--lk-bg);
  position: sticky;
  left: 0;
}

.lk-scroll > .lk-table th:first-child {
  background: var(--lk-side);
}

.lk-st {
  padding: calc(2px * var(--nc-vib-accent)) calc(9px * var(--nc-vib-accent)) calc(2px * var(--nc-vib-accent)) calc(7px * var(--nc-vib-accent));
  background: color-mix(in srgb, var(--c, var(--lk-ink-3)) calc(15% * var(--nc-vib-accent)), transparent);
  color: color-mix(in srgb, var(--c, var(--lk-ink-3)) calc(62% * var(--nc-vib-accent)), var(--lk-ink));
  font-weight: calc(400 + 150 * var(--nc-vib-accent));
  border-radius: 99px;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.lk-st:before {
  content: "";
  background: var(--c, var(--lk-ink-3));
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.lk-st.ok {
  --c: var(--lk-ok);
}

.lk-st.warn {
  --c: var(--lk-warn);
}

.lk-st.err {
  --c: var(--lk-err);
}

.lk-st.off {
  --c: var(--lk-ink-3);
}

.lk-code {
  background: var(--lk-hover);
  min-height: 20px;
  font: 12px var(--lk-mono);
  border-radius: 4px;
  align-items: center;
  padding: 0 6px;
  display: inline-flex;
}

.lk-model {
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
}

.lk-model img {
  flex: none;
  width: 14px;
  height: 14px;
}

html[data-theme="dark"] .lk-model img[data-mono] {
  filter: invert();
}

.lk-model span {
  text-overflow: ellipsis;
  overflow: hidden;
}

.lk-split {
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) 360px;
  display: grid;
}

.lk-split > :first-child {
  min-width: 0;
  overflow-x: auto;
}

.lk-split .lk-table {
  border: 0;
  border-radius: 0;
}

.lk-peek {
  border-left: 1px solid var(--lk-line);
  background: var(--lk-bg);
  min-width: 0;
  animation: lk-slide var(--lk-d2) var(--lk-ease) both;
  padding: 16px;
  position: relative;
}

.lk-peek-head {
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.lk-peek-head h3 {
  font-size: 14px;
  font-weight: 600;
}

.lk-peek-head .lk-btn {
  margin-left: auto;
}

@keyframes lk-slide {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}

.lk-panel {
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

.lk-panel + .lk-panel {
  margin-top: 16px;
}

.lk-rows {
  display: grid;
}

.lk-row {
  border-bottom: 1px solid var(--lk-line);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  display: grid;
}

.lk-row:last-child {
  border-bottom: 0;
}

.lk-form {
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  border-radius: 8px;
  grid-template-columns: 220px minmax(0, 1fr);
  display: grid;
  position: relative;
}

.lk-form > .lab, .lk-form > .ctl {
  border-bottom: 1px solid var(--lk-line);
  padding: 16px;
}

.lk-form > .lab {
  font-weight: 500;
}

.lk-form > .lab p {
  color: var(--lk-ink-3);
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
}

.lk-form > .foot {
  background: var(--lk-side);
  border-radius: 0 0 8px 8px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  display: flex;
}

.lk-form:not(:has( > .foot)) > :nth-last-child(-n+2) {
  border-bottom: 0;
}

.lk-note {
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  color: var(--lk-ink-2);
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.lk-note .lk-btn {
  margin-left: auto;
}

.lk-alert {
  border: 1px solid color-mix(in srgb, var(--lk-err) 40%, var(--lk-line));
  background: var(--lk-bg);
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.lk-alert:before {
  content: "";
  background: var(--lk-err);
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.lk-alert[data-tone="ok"] {
  border-color: color-mix(in srgb, var(--lk-ok) 40%, var(--lk-line));
}

.lk-alert[data-tone="ok"]:before {
  background: var(--lk-ok);
}

.lk-alert[data-tone="warn"] {
  border-color: color-mix(in srgb, var(--lk-warn) 40%, var(--lk-line));
}

.lk-alert[data-tone="warn"]:before {
  background: var(--lk-warn);
}

.lk-alert .lk-btn {
  margin-left: auto;
}

.lk-pre {
  border: 1px solid var(--lk-line);
  background: var(--lk-side);
  font: 12px/1.6 var(--lk-mono);
  white-space: pre;
  border-radius: 8px;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
}

.lk-empty {
  border: 1px dashed var(--lk-line-2);
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 10px;
  padding: 36px 24px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.lk-empty h3 {
  font-size: 15px;
  font-weight: 600;
}

.lk-empty p {
  color: var(--lk-ink-2);
  max-width: 60ch;
}

.lk-empty > :not(.lk-art) {
  z-index: 1;
  position: relative;
}

@media (min-width: 900px) {
  :is(.lk-page > .lk-enter, .lk-sec:not(.lk-cols .lk-sec)) > .lk-empty:not(:has(.lk-art)) {
    padding-right: calc(24px + 176px * var(--nc-vib-accent));
  }

  :is(.lk-page > .lk-enter, .lk-sec:not(.lk-cols .lk-sec)) > .lk-empty:not(:has(.lk-art)):after {
    content: "";
    pointer-events: none;
    width: 156px;
    height: 96px;
    opacity: var(--nc-vib-accent);
    background: url("/zooroute/home/v3/cart/cap-claude-color.webp") 0 70% / 54px no-repeat, url("/zooroute/home/v3/cart/cap-openai.webp") 50% 0 / 60px no-repeat, url("/zooroute/home/v3/cart/cap-google-color.webp") 100% 85% / 50px no-repeat;
    position: absolute;
    top: 50%;
    right: 24px;
    translate: 0 -50%;
  }
}

.lk-art {
  opacity: .9;
  pointer-events: none;
  background: url("/zooroute/auth/auth-keys-light-800.webp") 70% / cover;
  width: 42%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 60%);
  mask-image: linear-gradient(90deg, #0000, #000 60%);
}

html[data-theme="dark"] .lk-art {
  background-image: url("/zooroute/auth/auth-routing-dark-800.webp");
}

.lk-snip {
  border: 1px solid var(--lk-line);
  background: var(--lk-side);
  width: 100%;
  max-width: 640px;
  min-height: 36px;
  font: 12px var(--lk-mono);
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 0 4px 0 12px;
  display: flex;
}

.lk-snip span {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.lk-skel {
  background: linear-gradient(90deg, var(--lk-hover), var(--lk-sel), var(--lk-hover));
  background-size: 200% 100%;
  border-radius: 4px;
  height: 12px;
  animation: 1.4s linear infinite lk-shimmer;
  display: block;
}

@keyframes lk-shimmer {
  to {
    background-position: -200% 0;
  }
}

.lk .lk-status {
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--c, var(--lk-ok)) 40%, transparent) var(--nc-vib-accent-mix), var(--lk-line));
  background: color-mix(in srgb, color-mix(in srgb, var(--c, var(--lk-ok)) 13%, var(--lk-panel)) var(--nc-vib-accent-mix), var(--lk-bg));
  min-height: 26px;
  color: color-mix(in srgb, var(--lk-ink) var(--nc-vib-accent-mix), var(--lk-ink-2));
  font-size: 12px;
  font-weight: calc(400 + 150 * var(--nc-vib-accent));
  white-space: nowrap;
  border-radius: 99px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  display: inline-flex;
}

.lk-status:before {
  content: "";
  background: var(--c, var(--lk-ok));
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--lk-ok)) 20%, transparent);
  border-radius: 50%;
}

.lk-status[data-tone="warn"] {
  --c: var(--lk-warn);
}

.lk-status[data-tone="err"] {
  --c: var(--lk-err);
}

.lk-status[data-tone="unknown"] {
  --c: var(--lk-ink-3);
}

.lk .lk-status:hover {
  color: var(--lk-ink);
}

.lk-bg {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.lk-bg-pool {
  position: fixed;
}

.lk-pool, .lk-pool > div {
  position: absolute;
  inset: 0;
}

.lk-pool-fallback {
  background: linear-gradient(#e3f1ea, #cfe7de 45%, #b7d9cb);
}

html[data-theme="dark"] .lk-pool-fallback {
  background: linear-gradient(#11302c, #0a1d1c 45%, #050f0e);
}

.lk-pool-gl {
  transition: opacity .6s;
}

.lk-pool-gl canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.lk-pool-depth {
  background: linear-gradient(#ffffff47 0, #0000 260px, #143c321a 70%, #143c3233 100%);
}

html[data-theme="dark"] .lk-pool-depth {
  background: linear-gradient(#96ebc812 0, #0000 280px, #00080659 70%, #00050499 100%);
}

.lk-pool-tone {
  background: var(--lk-bg);
  opacity: 0;
  transition: opacity .4s;
}

.lk-pool[data-dense] .lk-pool-tone {
  opacity: .6;
}

@keyframes lk-run {
  from {
    transform: translateX(-200px);
  }

  to {
    transform: translateX(1800px);
  }
}

@keyframes lk-fall {
  from {
    opacity: 0;
    transform: translateY(-160px);
  }

  15% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(520px);
  }
}

.lk-glow {
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--lk-d2);
  position: absolute;
  inset: -1px;
}

.lk-glow:after {
  content: "";
  border-radius: inherit;
  background: radial-gradient(100px circle at var(--gx, -300px) var(--gy, -300px), var(--lk-glow-cursor), transparent 70%);
  -webkit-mask-composite: xor;
  padding: 1px;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

:is(.lk-stat, .lk-panel, .lk-table, .lk-split, .lk-form, .lk-pre, .lk-radio):hover > .lk-glow {
  opacity: 1;
}

@media (hover: none) {
  .lk-glow {
    display: none;
  }
}

.lk-enter {
  animation: lk-rise var(--lk-d3) var(--lk-ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.lk-stagger > * {
  animation: lk-rise var(--lk-d3) var(--lk-ease) both;
}

.lk-stagger > :nth-child(2) {
  animation-delay: 30ms;
}

.lk-stagger > :nth-child(3) {
  animation-delay: 60ms;
}

.lk-stagger > :nth-child(4) {
  animation-delay: 90ms;
}

.lk-stagger > :nth-child(5) {
  animation-delay: .12s;
}

.lk-stagger > :nth-child(n+6) {
  animation-delay: .15s;
}

@keyframes lk-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.lk-fade {
  animation: lk-fadein var(--lk-d2) var(--lk-ease) both;
}

.lk-main[data-entering] .lk-table tbody tr:nth-child(-n+12) {
  animation: lk-rise var(--lk-d2) var(--lk-ease) both;
  animation-delay: calc(7 * var(--nc-stagger, 35ms));
}

.lk-main[data-entering] .lk-table tbody tr:first-child {
  animation-delay: 0s;
}

.lk-main[data-entering] .lk-table tbody tr:nth-child(2) {
  animation-delay: calc(1 * var(--nc-stagger, 35ms));
}

.lk-main[data-entering] .lk-table tbody tr:nth-child(3) {
  animation-delay: calc(2 * var(--nc-stagger, 35ms));
}

.lk-main[data-entering] .lk-table tbody tr:nth-child(4) {
  animation-delay: calc(3 * var(--nc-stagger, 35ms));
}

.lk-main[data-entering] .lk-table tbody tr:nth-child(5) {
  animation-delay: calc(4 * var(--nc-stagger, 35ms));
}

.lk-main[data-entering] .lk-table tbody tr:nth-child(6) {
  animation-delay: calc(5 * var(--nc-stagger, 35ms));
}

.lk-main[data-entering] .lk-table tbody tr:nth-child(7) {
  animation-delay: calc(6 * var(--nc-stagger, 35ms));
}

@keyframes lk-fadein {
  from {
    opacity: 0;
  }
}

.lk-pal-back {
  z-index: 400;
  animation: lk-fadein var(--lk-d2) var(--lk-ease) both;
  background: #00000047;
  place-items: start center;
  padding: 12vh 16px 16px;
  display: grid;
  position: fixed;
  inset: 0;
}

html[data-theme="dark"] .lk-pal-back {
  background: #0009;
}

.lk-pal {
  background: var(--lk-raise);
  width: min(640px, 100%);
  box-shadow: var(--lk-shadow);
  animation: lk-zoom var(--lk-d2) var(--lk-ease) both;
  border-radius: 12px;
  overflow: hidden;
}

@keyframes lk-zoom {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }
}

.lk-pal-field {
  border-bottom: 1px solid var(--lk-line);
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
}

.lk-pal-field svg {
  width: 18px;
  height: 18px;
  color: var(--lk-ink-3);
}

.lk .lk-pal-field input {
  min-width: 0;
  min-height: 52px;
  color: var(--lk-ink);
  font: 15px var(--lk-font);
  outline: none;
  flex: 1;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

.lk-pal ul {
  max-height: min(56svh, 440px);
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
}

.lk-pal li[role="option"] {
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px;
  display: flex;
}

.lk-pal li[role="option"] svg {
  width: 16px;
  height: 16px;
  color: var(--lk-ink-3);
  flex: none;
}

.lk-pal li[role="option"] small {
  color: var(--lk-ink-3);
  margin-left: auto;
  font-size: 12px;
}

.lk-pal li[aria-selected="true"] {
  background: var(--lk-sel);
}

.lk-pal .grp {
  color: var(--lk-ink-3);
  padding: 10px 10px 4px;
  font-size: 11.5px;
}

.lk-pal .empty {
  color: var(--lk-ink-2);
  padding: 16px;
}

.lk-pal-foot {
  border-top: 1px solid var(--lk-line);
  color: var(--lk-ink-3);
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 16px;
  font-size: 11.5px;
  display: flex;
}

.lk-toasts {
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 350;
  gap: 8px;
  width: min(380px, 100vw - 24px);
  display: grid;
  position: fixed;
}

.lk-toast {
  background: var(--lk-raise);
  min-height: 44px;
  color: var(--lk-ink);
  box-shadow: var(--lk-shadow);
  animation: lk-toast var(--lk-d3) var(--lk-ease) both;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 12px 14px;
  display: flex;
  position: relative;
}

.lk-toast[data-tone="error"] {
  box-shadow: var(--lk-shadow), inset 3px 0 0 var(--lk-err);
}

.lk-toast > span {
  flex: 1;
  min-width: 0;
}

.lk-toast .bar {
  background: var(--lk-line);
  border-radius: 1px;
  height: 2px;
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  overflow: hidden;
}

.lk-toast .bar i {
  background: var(--lk-ink-3);
  transform-origin: 0;
  height: 100%;
  animation: lk-countdown var(--t, 5s) linear both;
  display: block;
}

@keyframes lk-toast {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
}

.lk-toast.m-leave-side {
  animation: m-leave-side var(--lk-d1) var(--nc-ease-in, ease-in) forwards;
}

@keyframes lk-countdown {
  to {
    transform: scaleX(0);
  }
}

.lk-pop {
  position: relative;
}

.lk-menu {
  z-index: 20;
  background: var(--lk-raise);
  box-shadow: var(--lk-shadow);
  animation: lk-zoom var(--lk-d2) var(--lk-ease) both;
  border-radius: 10px;
  gap: 1px;
  padding: 6px;
  display: grid;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
}

.lk-menu > :is(a, button) {
  min-height: 34px;
  color: var(--lk-ink-2);
  text-align: left;
  border-radius: 6px;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  display: flex;
}

.lk-menu > :is(a, button):hover {
  background: var(--lk-hover);
  color: var(--lk-ink);
}

.lk-mbar {
  display: none;
}

.lk-sheet-back {
  z-index: 380;
  animation: lk-fadein var(--lk-d2) var(--lk-ease) both;
  background: #00000052;
  position: fixed;
  inset: 0;
}

.lk-sheet {
  z-index: 381;
  max-height: 86svh;
  padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
  background: var(--lk-raise);
  box-shadow: var(--lk-shadow);
  animation: lk-up var(--lk-d3) var(--lk-ease) both;
  border-radius: 16px 16px 0 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
}

.lk-sheet:before {
  content: "";
  background: var(--lk-line-2);
  border-radius: 2px;
  width: 36px;
  height: 4px;
  margin: 2px auto 10px;
  display: block;
}

.lk-sheet .lk-nav {
  min-height: 46px;
  font-size: 15px;
}

@keyframes lk-up {
  from {
    transform: translateY(100%);
  }
}

@media (min-width: 1920px) {
  .lk-page {
    width: min(1440px, 100%);
  }
}

@media (min-width: 2400px) {
  .lk {
    --lk-side-w: 260px;
  }

  .lk-page {
    width: min(1560px, 100%);
  }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .lk {
    --lk-side-w: 60px;
  }

  .lk-side {
    padding: 10px 8px;
  }

  .lk-side :is(.lk-acct .who, .lk-acct .bal, .lk-searchbtn .t, .lk-searchbtn .lk-kbd, .lk-nav .t, .lk-nav .cnt, .lk-nav .hk, .lk-nav .ext, .lk-group, .lk-side-foot .t) {
    display: none;
  }

  .lk-nav, .lk-acct, .lk-searchbtn {
    justify-content: center;
    min-height: 40px;
    padding: 0;
  }

  .lk-nav .dot, .lk-nav[aria-current="page"]:after {
    margin: 0;
    position: absolute;
    top: 8px;
    right: 8px;
  }

  .lk-side-foot .lk-status {
    justify-content: center;
    width: 100%;
    padding: 0;
    font-size: 0;
  }

  .lk-cols, .lk-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .lk-peek {
    border-left: 0;
    border-top: 1px solid var(--lk-line);
  }
}

@media (max-width: 767px) {
  .lk-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .lk-side {
    display: none;
  }

  .lk-mbar {
    top: var(--lk-top);
    z-index: 30;
    border-bottom: 1px solid var(--lk-line);
    background: var(--lk-bg);
    align-items: center;
    gap: 6px;
    min-height: 52px;
    padding: 0 8px 0 12px;
    display: flex;
    position: sticky;
  }

  .lk-mbar:before {
    content: "";
    height: var(--lk-top);
    background: var(--lk-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
  }

  html:has(.nc-header[data-scrolled]) .lk-mbar:before {
    opacity: 1;
  }

  .lk-mbar .cur {
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    font-weight: 600;
    display: inline-flex;
  }

  .lk-mbar .end {
    align-items: center;
    gap: 4px;
    margin-left: auto;
    display: flex;
  }

  .lk-mbar .lk-btn {
    min-height: 40px;
  }

  .lk-mbar .lk-btn.icon {
    width: 44px;
  }

  .lk-page {
    padding: 16px 12px calc(40px + env(safe-area-inset-bottom));
  }

  .lk-head {
    margin-bottom: 14px;
  }

  .lk-head h1 {
    font-size: calc(19px + 7px * var(--nc-vib-vivid));
    line-height: calc(30px + 2px * var(--nc-vib-vivid));
  }

  .lk-head .acts {
    width: 100%;
    margin-left: 0;
  }

  .lk-head .acts > .lk-btn {
    flex: 1;
  }

  .lk .lk-btn {
    min-height: 40px;
  }

  .lk .lk-btn.sm, .lk .lk-chip {
    min-height: 36px;
  }

  .lk .lk-input, .lk .lk-field {
    min-height: 44px;
    font-size: 16px;
  }

  .lk-seg button {
    min-height: 34px;
  }

  .lk-stats {
    grid-template-columns: 1fr 1fr;
  }

  .lk-stat {
    border-left: 0;
    border-top: 1px solid var(--lk-line);
  }

  .lk-stat:nth-child(2n) {
    border-left: 1px solid var(--lk-line);
  }

  .lk-stat:nth-child(-n+2) {
    border-top: 0;
  }

  .lk-stat, .lk-stat:first-child, .lk-stat:last-child {
    border-radius: 0;
  }

  .lk-stat .v {
    font-size: 18px;
  }

  .lk-cols, .lk-split, .lk-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .lk-form > .lab {
    border-bottom: 0;
    padding-bottom: 4px;
  }

  .lk .lk-table td {
    max-width: 200px;
    height: 46px;
  }

  .lk-peek {
    z-index: 390;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
    animation: lk-up var(--lk-d3) var(--lk-ease) both;
    border: 0;
    position: fixed;
    inset: 0;
    overflow-y: auto;
  }

  .lk-pal-back {
    align-items: stretch;
    padding: 0;
  }

  .lk-pal {
    border-radius: 0;
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .lk-pal ul {
    flex: 1;
    max-height: none;
  }

  .lk-pal li[role="option"] {
    min-height: 46px;
  }

  .lk-toasts {
    width: auto;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .lk-heat-months, .lk-heat-grid {
    min-width: calc(var(--weeks, 53) * 12px);
  }

  .lk-sticky-act {
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 5;
    position: sticky;
  }

  .lk .lk-table.lk-cards, .lk .lk-table.lk-cards tbody {
    background: none;
    border: 0;
    display: block;
  }

  .lk .lk-table.lk-cards thead {
    display: none;
  }

  .lk .lk-table.lk-cards tr {
    border: 1px solid var(--lk-line);
    background: var(--lk-bg);
    border-radius: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    margin-bottom: 8px;
    padding: 10px 12px;
    display: grid;
  }

  .lk .lk-table.lk-cards td {
    white-space: normal;
    border: 0;
    max-width: none;
    height: auto;
    padding: 0;
  }

  .lk .lk-table.lk-cards td[data-card="hide"] {
    display: none;
  }

  .lk .lk-table.lk-cards td[data-card="end"] {
    grid-area: 1 / 2;
    justify-self: end;
  }

  .lk .lk-table.lk-cards td[data-card="sub"] {
    color: var(--lk-ink-3);
    grid-column: 1 / -1;
    font-size: 12.5px;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .lk-sheet {
    max-height: 92svh;
  }

  .lk-peek {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk *, .lk :before, .lk :after, .lk-pal-back, .lk-pal, .lk-sheet, .lk-sheet-back, .lk-toast {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }

  .lk-bg:after, .lk-bg i {
    animation: none !important;
  }

  .lk-toast .bar i {
    animation-duration: var(--t, 5s) !important;
  }
}

.lk .nc-balance {
  border: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: inline;
}

.lk .nc-balance strong {
  font: inherit;
  letter-spacing: 0;
  font-weight: 500;
}

.lk .nc-balance small {
  display: none;
}

.lk-side-bell {
  min-height: 32px;
  color: var(--lk-ink-2);
  transition: background-color var(--lk-d1) var(--lk-ease), color var(--lk-d1) var(--lk-ease);
  border-radius: 6px;
  align-items: center;
  gap: 2px;
  padding-right: 8px;
  display: flex;
  position: relative;
}

.lk-side-bell:hover {
  background: var(--lk-hover);
  color: var(--lk-ink);
}

.lk-side-bell:has(.nc-inbox-trigger:focus-visible) {
  background: var(--lk-hover);
  color: var(--lk-ink);
}

.lk-side-bell:has(.nc-inbox-trigger:focus-visible) {
  outline: 2px solid var(--lk-brand);
  outline-offset: 2px;
}

.lk-side-bell .nc-ws-popover, .lk-side-bell .nc-inbox-trigger {
  position: static;
}

.lk-side-bell .nc-inbox-trigger {
  width: 32px;
  height: 32px;
  color: inherit;
  outline: none;
  background: none !important;
}

.lk-side-bell .nc-inbox-trigger:after {
  content: "";
  border-radius: 6px;
  position: absolute;
  inset: 0;
}

.lk .nc-icon-btn {
  color: var(--lk-ink-2);
}

@media (max-width: 1100px) and (min-width: 768px) {
  .lk-side-bell {
    justify-content: center;
    padding-right: 0;
  }

  .lk-side-foot .lk-btn.primary {
    padding: 0;
  }
}

.lk-heat-grid > i[data-in] {
  box-shadow: inset 0 0 0 1.5px var(--lk-ink);
}

.lk-stat.has-art {
  overflow: hidden;
}

.lk-stat.has-art > :not(.lk-art):not(.lk-glow) {
  z-index: 1;
  position: relative;
}

.lk-stat .lk-art {
  width: 46%;
}

.lk-avatar {
  object-fit: cover;
  border-radius: 7px;
  flex: none;
  display: block;
}

.lk-side-foot .lk-pop {
  margin: 0 -2px;
}

.lk-side-foot .lk-acct {
  width: 100%;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .lk-side-foot .lk-acct {
    justify-content: center;
  }
}

.lk-side-foot .lk-menu {
  width: max-content;
  min-width: 100%;
  right: auto;
}

.lk .nc-sheet {
  border: 1px solid var(--lk-line);
  background: var(--lk-raise);
  color: var(--lk-ink);
  box-shadow: var(--lk-shadow);
  font: 13.5px/1.45 var(--lk-font);
  border-radius: 12px;
}

.lk .nc-sheet::backdrop {
  background: #00000052;
}

html[data-theme="dark"] .lk .nc-sheet::backdrop {
  background: #0009;
}

.lk .nc-sheet :is(.nc-h3, h2) {
  font: 600 16px/1.3 var(--lk-font);
  letter-spacing: -.01em;
}

.lk .nc-sheet .nc-muted {
  color: var(--lk-ink-2);
}

.lk .nc-sheet :is(.nc-input, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border: 1px solid var(--lk-line-2);
  background: var(--lk-bg);
  color: var(--lk-ink);
  box-shadow: none;
  border-radius: 6px;
}

.lk .nc-sheet :is(.nc-input, input, select, textarea):focus {
  border-color: var(--lk-brand);
  box-shadow: 0 0 0 3px var(--lk-glow-2), 0 0 18px -4px var(--lk-glow);
  outline: none;
}

.lk .nc-sheet .nc-btn {
  border: 1px solid var(--lk-line-2);
  background: var(--lk-raise);
  min-height: 32px;
  color: var(--lk-ink);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  border-radius: 6px;
  font-weight: 500;
}

.lk .nc-sheet .nc-btn-primary {
  border-color: var(--lk-ink);
  background: var(--lk-ink);
  color: var(--lk-bg);
  box-shadow: 0 6px 22px -8px var(--lk-glow);
}

.lk .nc-sheet :is(.nc-btn-danger, .nc-btn-danger-solid) {
  color: var(--lk-err);
  background: var(--lk-raise);
  border-color: color-mix(in srgb, var(--lk-err) 40%, var(--lk-line));
}

.lk .nc-sheet .nc-switch[aria-checked="true"] {
  background: var(--lk-ink);
}

.lk .nc-sheet .nc-chip, .lk .nc-sheet .nc-seg button {
  border-radius: 99px;
}

.lk-keys .lk-table td {
  max-width: none;
}

.lk-keys .lk-table code[data-full] {
  text-overflow: ellipsis;
  max-width: 260px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .lk-connect {
    grid-template-columns: minmax(0, 1fr);
  }

  .lk-connect .lk-stat {
    border-top: 1px solid var(--lk-line);
    border-left: 0 !important;
  }

  .lk-connect .lk-stat:first-child {
    border-top: 0;
  }

  .lk-keys .lk-chips > .lk-input {
    flex-basis: 100% !important;
    max-width: none !important;
  }

  .lk-keys .lk-chips > .lk-btn.primary {
    order: -1;
    width: 100%;
    margin-left: 0 !important;
  }
}

.lk-radio {
  border: 1px solid var(--lk-line);
  background: var(--lk-bg);
  border-radius: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  display: grid;
  overflow: hidden;
}

.lk-radio label {
  border-left: 1px solid var(--lk-line);
  cursor: pointer;
  min-height: 64px;
  transition: background-color var(--lk-d1) var(--lk-ease);
  align-content: start;
  gap: 2px;
  padding: 12px 14px;
  display: grid;
  position: relative;
}

.lk-radio label:first-child {
  border-left: 0;
}

.lk-radio label:hover {
  background: var(--lk-hover);
}

.lk-radio label[data-on] {
  background: var(--lk-sel);
  box-shadow: inset 0 -2px 0 var(--lk-brand);
}

.lk-radio input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.lk-radio label:has(input:focus-visible) {
  outline: 2px solid var(--lk-brand);
  outline-offset: -2px;
}

.lk-radio b {
  font-weight: 500;
}

.lk-radio span {
  color: var(--lk-ink-3);
  font-size: 12px;
}

.lk-radio small {
  display: none;
}

@media (max-width: 767px) {
  .lk-radio {
    grid-template-columns: minmax(0, 1fr);
  }

  .lk-radio label {
    border-left: 0;
    border-top: 1px solid var(--lk-line);
    min-height: 56px;
  }

  .lk-radio label:first-child {
    border-top: 0;
  }

  .lk-radio small {
    color: var(--lk-ink-2);
    margin-top: 2px;
    font-size: 12px;
    display: block;
  }
}

.lk-routes-cards [class*="__catalogHeading"] h2 {
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
}

.lk-routes-cards [class*="__search"] input {
  outline: none;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

.lk-routes-cards [class*="__search"]:focus-within {
  border-color: var(--lk-brand);
  box-shadow: 0 0 0 3px var(--lk-glow-2);
}

.lk-routes-cards [class*="__toolbar"] {
  background: var(--lk-bg);
}

@media (pointer: coarse) {
  .lk .lk-btn, .lk .lk-btn.sm {
    min-height: 44px;
  }

  .lk .lk-btn.icon, .lk .lk-btn.sm.icon {
    width: auto;
    min-width: 44px;
  }

  .lk .lk-chip {
    min-height: 44px;
    padding: 0 14px;
  }

  .lk-seg {
    align-items: stretch;
    padding: 2px;
  }

  .lk-seg button {
    min-height: 44px;
    padding: 0 12px;
  }

  .lk-seg .ind {
    top: 2px;
    bottom: 2px;
  }

  .lk-routes-cards button {
    min-height: 44px;
  }

  .lk-radio input {
    width: 100%;
    height: 100%;
    margin: 0;
    inset: 0;
  }

  .lk .lk-input, .lk .lk-field, .lk .lk-pal-field input {
    min-height: 44px;
    font-size: 16px;
  }

  .lk-nav, .lk-acct, .lk-searchbtn, .lk-menu > :is(a, button), .lk-pal li[role="option"] {
    min-height: 44px;
  }

  .lk-switch {
    position: relative;
  }

  .lk-switch:before {
    content: "";
    position: absolute;
    inset: -13px -8px;
  }

  .lk .nc-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .lk .lk-status {
    min-height: 44px;
    padding: 0 14px;
  }

  .lk-snip {
    min-height: 44px;
  }

  .lk-crumb a {
    align-items: center;
    min-height: 44px;
    display: inline-flex;
  }

  .lk-heat-grid > i {
    min-width: 12px;
  }

  .lk-radio label {
    min-height: 56px;
  }

  .lk .lk-table td a, .lk-sec > h2 a, .lk-rows a, .lk-sec > h2 .more a {
    align-items: center;
    min-height: 44px;
    display: inline-flex;
  }
}

.lk-mini td:first-child {
  max-width: 0;
}

.lk-mini :is(th, td):nth-child(n+2) {
  width: 60px;
}

.lk-mini :is(th, td):nth-child(2) {
  width: 76px;
}

.lk-password {
  align-items: center;
  gap: 4px;
  width: 100%;
  display: flex;
}

.lk-password .lk-field {
  flex: 1;
  min-width: 0;
}

.lk-auth {
  min-height: calc(100svh - var(--lk-top));
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  place-items: center;
  display: grid;
  overflow: hidden;
}

.lk-auth-card {
  z-index: 1;
  width: min(440px, 100%);
  box-shadow: var(--lk-shadow);
  gap: 14px;
  padding: 24px;
  display: grid;
  position: relative;
}

.lk-auth-card:has(.lk-form) {
  width: min(680px, 100%);
}

.lk .lk-auth-card h1 {
  font: 600 20px/28px var(--lk-font);
  letter-spacing: -.015em;
  margin: 0;
}

.lk-auth-form {
  gap: 6px;
  display: grid;
}

.lk-auth-form > label {
  color: var(--lk-ink-2);
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
}

.lk-auth-form > .lk-btn {
  margin-top: 10px;
}

.lk-auth-form > .lk-btn.ghost {
  margin-top: 0;
}

.lk-auth .nc-input {
  border: 1px solid var(--lk-line-2);
  background: var(--lk-bg);
  min-height: 32px;
  color: var(--lk-ink);
  font: inherit;
  letter-spacing: .14em;
  border-radius: 6px;
  padding: 0 10px;
}

.lk-auth .nc-input:focus {
  border-color: var(--lk-brand);
  box-shadow: 0 0 0 3px var(--lk-glow-2);
  outline: none;
}

@media (max-width: 767px), (pointer: coarse) {
  .lk-auth .nc-input {
    min-height: 44px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .lk-auth {
    place-items: start center;
  }

  .lk-auth-card {
    padding: 18px;
  }
}

.lk-alert {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.lk-alert:before {
  margin-top: 6px;
}

.lk-alert > span {
  flex: 1;
  min-width: 0;
}

@media (max-width: 767px) {
  .lk-alert:has( > .lk-btn,  > span + span) {
    flex-wrap: wrap;
  }
}

.lk :is(.lk-stats, .lk-panel, .lk-form, .lk-radio, .lk-note, .lk-split), .lk .lk-table {
  background: var(--lk-panel);
  box-shadow: var(--lk-panel-shadow);
}

html[data-theme="dark"] .lk .lk-empty {
  box-shadow: var(--lk-panel-shadow);
}

html[data-theme="dark"] .lk .lk-btn.primary {
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--lk-glow) var(--nc-vib-vivid-mix), transparent), 0 8px 22px -10px color-mix(in srgb, var(--lk-cta-1) calc(80% * var(--nc-vib-accent) * (1 - var(--nc-vib-vivid))), transparent), inset 0 1px 0 rgb(255 255 255 / calc(.3 * var(--nc-vib-accent))), 0 0 0 1px color-mix(in srgb, var(--lk-brand) calc(30% * (1 - var(--nc-vib-accent))), transparent), 0 6px 22px -8px color-mix(in srgb, var(--lk-glow) calc(100% * (1 - var(--nc-vib-accent))), transparent);
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .lk-stat {
    transition: transform .25s var(--lk-ease), box-shadow .25s var(--lk-ease);
  }

  .lk-stat:hover {
    z-index: 2;
    transform: translateY(calc(-3px * var(--nc-vib-vivid)));
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--acc) calc(70% * var(--nc-vib-vivid)), transparent);
  }

  .lk .lk-btn.primary:hover:not(:disabled):not(:active) {
    transform: translateY(calc(-1px * var(--nc-vib-vivid)));
  }

  .lk-nav {
    transition-property: color, background-color, transform;
  }

  .lk-nav:hover {
    transform: translateX(calc(2px * var(--nc-vib-vivid)));
  }
}

.lk .lk-split .lk-table, .lk .lk-table.lk-cards {
  box-shadow: none;
}

.lk .lk-peek, .lk-scroll > .lk-table td:first-child, .lk .lk-alert {
  background: var(--lk-panel);
}

@media (max-width: 767px) {
  .lk .lk-table.lk-cards tr {
    background: var(--lk-panel);
    box-shadow: var(--lk-panel-shadow);
  }
}

html[data-theme="dark"] .lk[data-section="seller"] {
  --lk-panel-shadow: 0 0 #0000;
  --lk-bg: #121310;
  --lk-side: #0f100d;
  --lk-raise: #1c1d19;
  --lk-panel: #191a16;
  --lk-hover: #1f201c;
  --lk-sel: #262722;
  --lk-line: #2a2b26;
  --lk-line-2: #383932;
  --lk-ink: #f3f2ec;
  --lk-ink-2: #dedcd2;
  --lk-ink-3: #b9b7ac;
}

html[data-theme="dark"] .lk[data-section="seller"] :is(.lk-head, .zc-head) :is(h1, .sub, .lead, .zc-title, .zc-lead) {
  text-shadow: 0 0 2px #121310, 0 0 14px #121310d9;
}

.lk :is(.lk-stats, .lk-panel, .lk-table, .lk-split, .lk-form) {
  border-radius: 14px;
  box-shadow: inset 0 1px #ffffffd9;
}

html[data-theme="dark"] .lk :is(.lk-stats, .lk-panel, .lk-table, .lk-split, .lk-form) {
  box-shadow: inset 0 1px 0 #ffffff0a, var(--lk-panel-shadow);
}

html[data-theme="dark"] .lk :is(.lk-split .lk-table, .lk-table.lk-cards) {
  box-shadow: none;
}

html[data-theme="dark"] .lk .lk-scroll:not(.lk-split .lk-scroll):has( > .lk-table:not(.lk-cards)) {
  box-shadow: var(--lk-panel-shadow);
  border-radius: 14px;
}

.lk .lk-split .lk-table {
  box-shadow: none;
  border-radius: 0;
}

.lk .lk-stat:first-child {
  border-radius: 14px 0 0 14px;
}

.lk .lk-stat:last-child {
  border-radius: 0 14px 14px 0;
}

.lk .lk-stat .k {
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11.5px;
  font-weight: 600;
}

.lk .lk-stat .v {
  font-family: var(--nc-font-mono, ui-monospace, monospace);
  letter-spacing: -.02em;
  font-size: 21px;
  font-weight: 600;
}

.lk .lk-sec > h2, .lk .lk-h2 {
  color: var(--lk-ink-2);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 12.5px;
}

.lk .lk-sec > h2 .more, .lk .lk-h2 .more {
  letter-spacing: normal;
  text-transform: none;
}

.lk .lk-table th {
  border-bottom: 1.5px solid var(--lk-line-2);
  background: color-mix(in srgb, var(--lk-side) 70%, transparent);
  letter-spacing: .06em;
  text-transform: uppercase;
  height: 36px;
  font-size: 11.5px;
  font-weight: 600;
}

.lk .lk-table th:first-child {
  border-top-left-radius: 14px;
}

.lk .lk-table th:last-child {
  border-top-right-radius: 14px;
}

.lk .lk-table td {
  border-bottom: 0;
}

.lk .lk-table tbody tr:nth-child(2n) td {
  background: color-mix(in srgb, var(--lk-ink) 2.5%, transparent);
}

.lk .lk-table tbody tr:hover td {
  background: color-mix(in srgb, var(--lk-brand) 9%, transparent);
}

.lk .lk-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--lk-brand);
}

.lk .lk-table tbody tr[aria-selected="true"] td {
  background: var(--lk-sel);
}

.lk .lk-table td.r, .lk .lk-table td.num {
  font-family: var(--nc-font-mono, ui-monospace, monospace);
  font-size: 13px;
}

.lk .lk-form > .foot {
  border-radius: 0 0 14px 14px;
}

@media (max-width: 767px) {
  .lk .lk-table.lk-cards tr {
    border-radius: 14px;
  }

  .lk .lk-table.lk-cards tbody tr:nth-child(2n) td, .lk .lk-table.lk-cards tbody tr:hover td {
    box-shadow: none;
    background: none;
  }
}

/* [project]/src/app/prototype/prototype.css [app-client] (css) */
body:has(.zr-app) {
  background: #f3f7f4;
  margin: 0;
  padding: 0;
}

.zr-app {
  --zr-bg: #f3f7f4;
  --zr-surface: #fff;
  --zr-ink: #20352c;
  --zr-muted: #607269;
  --zr-line: #dce6df;
  --zr-accent: #147452;
  --zr-soft: #e8f3ec;
  --zr-hover: #f6f9f7;
  min-height: 100dvh;
  color: var(--zr-ink);
  background: var(--zr-bg);
  font-family: var(--font-inter), sans-serif;
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  font-size: 14px;
  line-height: 1.5;
}

.zr-app[data-zr-theme="dark"] {
  --zr-bg: #17221c;
  --zr-surface: #202f26;
  --zr-ink: #edf5ef;
  --zr-muted: #a9beb0;
  --zr-line: #3b4c40;
  --zr-accent: #92d5b0;
  --zr-soft: #2d4336;
  --zr-hover: #27392e;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

.zr-app * {
  box-sizing: border-box;
}

.zr-app button, .zr-app input, .zr-app select {
  font: inherit;
}

.zr-app button {
  cursor: pointer;
  color: inherit;
  background: none;
  border: 0;
}

.zr-app button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.zr-app button, .zr-app select, .zr-app input {
  min-height: 44px;
}

.zr-app button, .zr-app a, .zr-app input, .zr-app select {
  -webkit-tap-highlight-color: transparent;
}

.zr-app :focus-visible {
  outline: 3px solid var(--zr-accent);
  outline-offset: 3px;
}

.zr-app ::selection {
  color: #183728;
  background: #bfdac8;
}

.zr-app input {
  caret-color: var(--zr-accent);
}

.zr-app input::placeholder {
  color: var(--zr-muted);
  opacity: 1;
}

.zr-app svg {
  flex-shrink: 0;
}

.zr-app h1, .zr-app h2, .zr-app h3, .zr-app p {
  margin: 0;
}

.zr-app h1 {
  letter-spacing: -.035em;
  text-wrap: balance;
  font-size: 32px;
  font-weight: 650;
  line-height: 1.2;
}

.zr-app h2 {
  letter-spacing: -.025em;
  font-size: 19px;
  font-weight: 600;
}

.zr-app h3 {
  font-size: 16px;
  font-weight: 600;
}

.zr-app small {
  color: var(--zr-muted);
  font-size: 12px;
}

.zr-skip {
  z-index: 100;
  background: var(--zr-surface);
  padding: 12px;
  position: fixed;
  top: -100px;
  left: 20px;
}

.zr-skip:focus {
  top: 10px;
}

.zr-header {
  background: color-mix(in srgb, var(--zr-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--zr-line);
  z-index: 20;
  align-items: center;
  gap: 36px;
  min-height: 88px;
  padding: 8px max(28px, 50vw - 660px);
  display: flex;
  position: sticky;
  top: 0;
}

.zr-logo {
  border-radius: 10px;
  flex-shrink: 0;
  width: 190px;
  overflow: hidden;
  background: #fff !important;
}

.zr-logo img {
  object-fit: contain;
  width: 100%;
  height: 64px;
  display: block;
}

.zr-header nav {
  flex: 1;
  gap: 8px;
  display: flex;
}

.zr-header nav button {
  white-space: nowrap;
  color: var(--zr-muted);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 550;
}

.zr-header nav button:hover, .zr-header nav button[aria-current] {
  background: var(--zr-soft);
  color: var(--zr-accent);
}

.zr-header-actions {
  align-items: center;
  gap: 12px;
  display: flex;
}

.zr-demo {
  border: 1px solid var(--zr-line);
  white-space: nowrap;
  color: var(--zr-muted);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11px;
}

.zr-icon {
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
}

.zr-icon:hover {
  background: var(--zr-soft);
  color: var(--zr-accent);
}

.zr-avatar {
  border-radius: 50%;
  width: 40px;
  background: var(--zr-soft) !important;
  border: 1px solid var(--zr-line) !important;
  font-weight: 650 !important;
}

.zr-main {
  max-width: 1376px;
  margin: 0 auto;
  padding: 24px 28px 0;
}

.zr-demo-note {
  color: var(--zr-muted);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.zr-demo-note > svg {
  color: var(--zr-accent);
}

.zr-demo-note button {
  text-underline-offset: 4px;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  text-decoration: underline;
  display: flex;
}

.zr-help {
  background: var(--zr-soft);
  border-radius: 10px;
  max-width: 80ch;
  margin-top: 8px;
  padding: 18px 22px;
}

.zr-title-row {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 32px 0 28px;
  display: flex;
}

.zr-title-row p {
  color: var(--zr-muted);
  margin-top: 10px;
}

.zr-button {
  white-space: nowrap;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  transition: background .16s, border-color .16s;
  display: inline-flex;
  border: 1px solid var(--zr-line) !important;
  background: var(--zr-surface) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.zr-button:hover {
  background: var(--zr-soft) !important;
  border-color: var(--zr-accent) !important;
}

.zr-button.primary {
  color: #fff;
}

.zr-button.selected {
  color: var(--zr-accent);
  background: var(--zr-soft) !important;
  border-color: #0000 !important;
}

.zr-modality {
  border-bottom: 1px solid var(--zr-line);
  gap: 22px;
  margin-bottom: 22px;
  display: flex;
}

.zr-modality button {
  color: var(--zr-muted);
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 8px;
  padding: 8px 3px 14px;
  font-weight: 550;
  display: flex;
}

.zr-modality button[aria-pressed="true"] {
  color: var(--zr-accent);
  border-bottom-color: var(--zr-accent);
}

.zr-catalog {
  background: var(--zr-surface);
  border: 1px solid var(--zr-line);
  border-radius: 14px;
  padding: 18px 20px 0;
}

.zr-families {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 17px;
  display: grid;
}

.zr-family {
  text-align: left;
  background: var(--zr-hover);
  border: 1px solid #0000;
  border-radius: 9px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  display: flex;
}

.zr-family[aria-pressed="true"] {
  border-color: var(--zr-accent);
  background: var(--zr-soft);
}

.zr-family > span:nth-child(2) {
  flex: 1;
}

.zr-family strong {
  font-size: 12px;
  display: block;
}

.zr-family small {
  margin-top: 2px;
  font-size: 11px;
  display: block;
}

.zr-brand {
  text-align: center;
  width: 27px;
  font-size: 23px;
  font-weight: 750;
}

.zr-brand.green {
  color: #228768;
}

.zr-brand.clay {
  color: #bc755e;
}

.zr-brand.blue {
  color: #4b7bc0;
}

.zr-brand.violet {
  color: #8a69bc;
}

.zr-models {
  border-top: 1px solid var(--zr-line);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  display: flex;
}

.zr-models > span {
  color: var(--zr-muted);
  margin-right: 15px;
  font-size: 12px;
}

.zr-models button {
  border-radius: 7px;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 12px;
  display: flex;
}

.zr-models button[aria-pressed="true"] {
  background: var(--zr-soft);
  color: var(--zr-accent);
  font-weight: 600;
}

.zr-market-heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 32px 0 18px;
  display: flex;
}

.zr-market-heading > div {
  align-items: baseline;
  gap: 15px;
  display: flex;
}

.zr-market-heading span, .zr-label {
  color: var(--zr-muted);
  font-size: 12px;
}

.zr-toolbar {
  background: var(--zr-surface);
  border: 1px solid var(--zr-line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  display: flex;
}

.zr-search {
  align-items: center;
  gap: 8px;
  width: 220px;
  display: flex;
}

.zr-search input {
  width: 100%;
  min-width: 0;
  background: none !important;
  border: 0 !important;
}

.zr-select {
  align-items: center;
  gap: 7px;
  display: flex;
}

.zr-select > span {
  color: var(--zr-muted);
  font-size: 11px;
}

.zr-app select, .zr-app input:not([type="checkbox"]):not([type="radio"]) {
  background: var(--zr-surface);
  border: 1px solid var(--zr-line);
  color: var(--zr-ink);
  border-radius: 7px;
  max-width: 100%;
  padding: 9px 10px;
  font-size: 12px;
}

.zr-checkbox {
  cursor: pointer;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 12px;
  display: flex;
}

.zr-app input[type="checkbox"], .zr-app input[type="radio"] {
  accent-color: #147452;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  min-height: 17px;
}

.zr-key-select {
  align-items: center;
  gap: 7px;
  margin-left: auto;
  display: flex;
}

.zr-market-table {
  background: var(--zr-surface);
  border: 1px solid var(--zr-line);
  border-radius: 0 0 12px 12px;
}

.zr-table-head, .zr-seller-row {
  grid-template-columns: minmax(235px, 2.2fr) minmax(110px, 1fr) minmax(160px, 1.35fr) minmax(90px, .7fr) minmax(55px, .5fr) 171px;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  display: grid;
}

.zr-table-head {
  min-height: 43px;
  color: var(--zr-muted);
  background: var(--zr-hover);
  border-bottom: 1px solid var(--zr-line);
  font-size: 11px;
}

.zr-seller + .zr-seller {
  border-top: 1px solid var(--zr-line);
}

.zr-seller-row {
  min-height: 88px;
}

.zr-seller:hover {
  background: var(--zr-hover);
}

.zr-seller.is-banned .zr-seller-name {
  opacity: .55;
}

.zr-seller-name {
  text-align: left;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  display: flex;
}

.zr-seller-name > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.zr-seller-name strong {
  align-items: center;
  gap: 6px;
  font-size: 13px;
  display: flex;
}

.zr-seller-name strong svg {
  color: var(--zr-accent);
}

.zr-seller-name small {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.5;
  display: block;
}

.zr-seller-avatar {
  background: var(--zr-soft);
  width: 34px;
  height: 38px;
  color: var(--zr-accent);
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  font-size: 16px;
  font-weight: 650;
  display: grid;
}

.zr-seller-avatar.clay {
  color: #945a43;
  background: #f4e8df;
}

.zr-seller-avatar.blue {
  color: #456693;
  background: #e6eef8;
}

.zr-seller-avatar.violet {
  color: #785f9c;
  background: #eee8f7;
}

.zr-price, .zr-uptime, .zr-latency, .zr-cache {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.zr-price strong {
  font-weight: 600;
}

.zr-price strong > span {
  color: var(--zr-muted);
  font-weight: 400;
}

.zr-price small {
  margin-top: 4px;
  font-size: 10px;
  display: block;
}

.zr-uptime strong {
  color: var(--zr-accent);
  font-weight: 550;
}

.zr-cache strong {
  color: var(--zr-accent);
  font-weight: 500;
}

.zr-latency strong {
  font-weight: 500;
}

.zr-bars {
  gap: 3px;
  margin-top: 5px;
  display: flex;
}

.zr-bars i {
  background: #80b898;
  border-radius: 2px;
  width: 5px;
  height: 12px;
  display: block;
}

.zr-bars i.warn {
  background: #d8ac69;
}

.zr-row-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  display: flex;
}

.zr-row-actions .zr-button {
  min-width: 121px;
  padding: 8px;
}

.zr-row-actions .zr-icon {
  color: var(--zr-muted);
}

.zr-mobile-label {
  display: none;
}

.zr-seller-detail {
  border-top: 1px solid var(--zr-line);
  background: var(--zr-hover);
  grid-template-columns: 1.4fr 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 24px;
  display: grid;
}

.zr-seller-detail p {
  color: var(--zr-muted);
  max-width: 60ch;
  margin-top: 5px;
  font-size: 12px;
}

.zr-tags {
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
  display: flex;
}

.zr-tags span, .zr-tags button {
  border: 1px solid var(--zr-line);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
}

.zr-tags button {
  align-items: center;
  gap: 6px;
  display: flex;
}

.zr-market-foot {
  color: var(--zr-muted);
  justify-content: space-between;
  gap: 15px;
  padding: 14px 2px;
  font-size: 10px;
  display: flex;
}

.zr-market-foot span:first-child {
  align-items: center;
  gap: 5px;
  display: flex;
}

.zr-route-strip {
  background: var(--zr-soft);
  border-radius: 12px;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 25px 28px;
  display: flex;
}

.zr-route-strip p {
  color: var(--zr-muted);
  margin-top: 5px;
  font-size: 12px;
}

.zr-route-emblem {
  color: var(--zr-accent);
}

.zr-route-mode {
  color: var(--zr-accent);
  margin-left: auto;
  font-size: 11px;
}

.zr-footer {
  color: var(--zr-muted);
  align-items: center;
  gap: 22px;
  margin-top: 22px;
  padding: 30px 2px;
  font-size: 11px;
  display: flex;
}

.zr-footer span:first-child {
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
  display: flex;
}

.zr-footer span:last-child {
  margin-left: auto;
}

.zr-empty {
  text-align: center;
  padding: 55px 24px;
}

.zr-empty svg {
  color: var(--zr-muted);
  margin: 0 auto 10px;
}

.zr-empty p {
  color: var(--zr-muted);
  margin: 8px 0 20px;
}

.zr-back {
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  display: flex;
  color: var(--zr-muted) !important;
  font-size: 12px !important;
}

.zr-back + .zr-title-row {
  margin-top: 14px;
}

.zr-editor-grid {
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 28px;
  max-width: 1120px;
  display: grid;
}

.zr-editor-main {
  background: var(--zr-surface);
  border: 1px solid var(--zr-line);
  border-radius: 14px;
}

.zr-editor-section {
  padding: 26px 28px;
}

.zr-editor-section + .zr-editor-section {
  border-top: 1px solid var(--zr-line);
}

.zr-section-title {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.zr-text-button {
  align-items: center;
  gap: 5px;
  display: flex;
  color: var(--zr-accent) !important;
  font-size: 12px !important;
}

.zr-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.zr-fields label, .zr-field, .zr-key-list label {
  color: var(--zr-muted);
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  display: flex;
}

.zr-field {
  margin-top: 16px;
}

.zr-hint {
  color: var(--zr-muted);
  max-width: 70ch;
  font-size: 12px;
  margin-top: 9px !important;
}

.zr-mode-options {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
  display: grid;
}

.zr-mode-options button {
  text-align: left;
  border: 1px solid var(--zr-line);
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 18px;
  display: flex;
  position: relative;
}

.zr-mode-options button > svg:last-child:not(:first-child) {
  position: absolute;
  top: 15px;
  right: 15px;
}

.zr-mode-options button strong {
  font-size: 13px;
}

.zr-mode-options button span {
  color: var(--zr-muted);
  font-size: 12px;
}

.zr-mode-options button[aria-pressed="true"] {
  border-color: var(--zr-accent);
  background: var(--zr-soft);
  color: var(--zr-accent);
}

.zr-pool {
  margin-top: 18px;
}

.zr-pool p {
  color: var(--zr-muted);
  margin-bottom: 10px;
  font-size: 12px;
}

.zr-pool label {
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 13px;
  display: flex;
}

.zr-pool small {
  margin-left: auto;
}

.zr-strategies {
  margin-top: 17px;
}

.zr-strategies label {
  border-bottom: 1px solid var(--zr-line);
  cursor: pointer;
  align-items: center;
  gap: 13px;
  padding: 13px 10px;
  display: flex;
}

.zr-strategies label:last-child {
  border-bottom: 0;
}

.zr-strategies strong {
  font-size: 13px;
  font-weight: 550;
  display: block;
}

.zr-strategies small {
  margin-top: 3px;
  display: block;
}

.zr-strategies .chosen {
  background: var(--zr-hover);
  border-radius: 7px;
}

.zr-toggle-row {
  cursor: pointer;
  align-items: center;
  gap: 25px;
  min-height: 82px;
  display: flex;
}

.zr-toggle-row > span {
  flex: 1;
}

.zr-toggle-row strong {
  font-size: 13px;
  font-weight: 550;
  display: block;
}

.zr-toggle-row small {
  margin-top: 4px;
  display: block;
}

.zr-toggle-row input {
  width: 22px !important;
  height: 22px !important;
}

.zr-info {
  color: var(--zr-accent);
  background: var(--zr-soft);
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  display: flex;
}

.zr-info p {
  font-size: 12px;
}

.zr-summary {
  background: var(--zr-soft);
  border-radius: 14px;
  padding: 26px;
  position: sticky;
  top: 112px;
}

.zr-summary-icon {
  color: var(--zr-accent);
  margin-bottom: 15px;
}

.zr-summary h2 {
  font-size: 18px;
}

.zr-summary ol {
  counter-reset: route;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.zr-summary li {
  counter-increment: route;
  padding: 0 0 23px 35px;
  position: relative;
}

.zr-summary li:before {
  content: counter(route);
  border: 1px solid var(--zr-accent);
  width: 23px;
  height: 23px;
  color: var(--zr-accent);
  border-radius: 50%;
  place-items: center;
  font-size: 10px;
  display: grid;
  position: absolute;
  top: 2px;
  left: 0;
}

.zr-summary li:after {
  content: "";
  background: var(--zr-line);
  width: 1px;
  height: 21px;
  position: absolute;
  top: 30px;
  left: 11px;
}

.zr-summary li:last-child {
  padding-bottom: 0;
}

.zr-summary li:last-child:after {
  display: none;
}

.zr-summary li span {
  color: var(--zr-muted);
  font-size: 11px;
  display: block;
}

.zr-summary li strong {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 550;
  display: block;
}

.zr-summary > p {
  color: var(--zr-muted);
  border-top: 1px solid var(--zr-line);
  padding-top: 16px;
  font-size: 12px;
}

.zr-summary > .zr-button {
  width: 100%;
  margin-top: 20px;
}

.zr-summary > small {
  text-align: center;
  margin-top: 9px;
  font-size: 10px;
  display: block;
}

.zr-create-key {
  background: var(--zr-surface);
  border: 1px solid var(--zr-line);
  border-radius: 12px;
  margin-bottom: 22px;
  padding: 24px;
}

.zr-create-key .zr-fields {
  grid-template-columns: 1fr 1fr 1fr;
}

.zr-actions {
  gap: 10px;
  margin-top: 20px;
  display: flex;
}

.zr-key-list {
  border: 1px solid var(--zr-line);
  background: var(--zr-surface);
  border-radius: 12px;
}

.zr-key-list article {
  align-items: center;
  gap: 24px;
  padding: 24px;
  display: flex;
}

.zr-key-list article + article {
  border-top: 1px solid var(--zr-line);
}

.zr-key-title {
  flex: 1;
}

.zr-key-title h2 {
  font-size: 16px;
}

.zr-key-symbol {
  color: var(--zr-accent);
}

.zr-key-list input {
  width: 110px;
}

.zr-code-help {
  background: var(--zr-soft);
  border-radius: 12px;
  align-items: center;
  gap: 25px;
  margin-top: 28px;
  padding: 24px;
  display: flex;
}

.zr-code-help p {
  color: var(--zr-muted);
  max-width: 65ch;
  margin-top: 6px;
  font-size: 12px;
}

.zr-code-help code {
  white-space: pre-wrap;
  font-size: 12px;
}

.zr-toast {
  z-index: 50;
  background: var(--zr-ink);
  width: max-content;
  max-width: calc(100% - 32px);
  color: var(--zr-surface);
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 18px;
  font-size: 13px;
  display: flex;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 8px 30px #0002;
}

.zr-toast .zr-icon {
  color: inherit;
}

@media (max-width: 1200px) {
  .zr-header {
    gap: 16px;
    padding-inline: 24px;
  }

  .zr-header nav button {
    padding-inline: 11px;
  }

  .zr-demo {
    display: none;
  }

  .zr-families {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zr-table-head, .zr-seller-row {
    grid-template-columns: minmax(210px, 1.7fr) 110px 145px 80px 50px 160px;
    gap: 12px;
    padding-inline: 16px;
  }

  .zr-bars {
    gap: 2px;
  }

  .zr-bars i {
    width: 4px;
  }

  .zr-select > span {
    display: none;
  }
}

@media (max-width: 1000px) {
  .zr-table-head {
    display: none;
  }

  .zr-market-table {
    background: none;
    border: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
    display: grid;
  }

  .zr-seller, .zr-seller + .zr-seller {
    border: 1px solid var(--zr-line);
    background: var(--zr-surface);
    border-radius: 12px;
    overflow: hidden;
  }

  .zr-seller-row {
    grid-template-columns: 1fr 1fr;
    gap: 17px;
    padding: 18px;
  }

  .zr-seller-name, .zr-row-actions {
    grid-column: 1 / -1;
  }

  .zr-row-actions {
    border-top: 1px solid var(--zr-line);
    justify-content: flex-end;
    padding-top: 10px;
  }

  .zr-seller-name small {
    font-size: 11px;
  }

  .zr-mobile-label {
    color: var(--zr-muted);
    margin-bottom: 4px;
    font-size: 10px;
    display: block;
  }

  .zr-price strong, .zr-uptime strong {
    font-size: 14px;
  }

  .zr-seller-detail {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 18px;
  }

  .zr-toolbar {
    border: 1px solid var(--zr-line);
    border-radius: 10px;
    flex-wrap: wrap;
  }

  .zr-key-select {
    margin-left: 0;
  }

  .zr-search {
    flex: 1;
    min-width: 160px;
  }

  .zr-editor-grid {
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 18px;
  }

  .zr-editor-section {
    padding: 23px 20px;
  }

  .zr-summary {
    padding: 22px;
  }

  .zr-market-foot {
    align-items: flex-start;
  }

  .zr-key-list article {
    flex-wrap: wrap;
  }

  .zr-key-title {
    flex-basis: 60%;
  }
}

@media (max-width: 760px) {
  .zr-header {
    flex-wrap: wrap;
    gap: 0;
    min-height: 110px;
    padding: 8px 20px 0;
  }

  .zr-logo {
    width: 153px;
  }

  .zr-logo img {
    height: 51px;
  }

  .zr-header-actions {
    gap: 5px;
    margin-left: auto;
  }

  .zr-header nav {
    flex: 0 0 100%;
    order: 3;
    justify-content: space-between;
    gap: 0;
    padding: 5px 0 7px;
  }

  .zr-header nav button {
    padding: 8px;
    font-size: 12px;
  }

  .zr-main {
    padding: 15px 20px 0;
  }

  .zr-demo-note {
    align-items: flex-start;
    font-size: 10px;
  }

  .zr-demo-note button {
    min-width: 32px;
    min-height: 24px;
    font-size: 0;
  }

  .zr-demo-note > svg {
    margin-top: 2px;
  }

  .zr-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
    margin: 24px 0;
  }

  .zr-app h1 {
    font-size: 27px;
  }

  .zr-title-row p {
    font-size: 12px;
  }

  .zr-modality {
    gap: 17px;
    margin-bottom: 16px;
    overflow-x: auto;
  }

  .zr-modality button {
    white-space: nowrap;
    gap: 5px;
    font-size: 12px;
  }

  .zr-modality svg {
    width: 15px;
  }

  .zr-catalog {
    padding: 13px 13px 0;
  }

  .zr-families {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .zr-family {
    gap: 8px;
    padding: 9px;
  }

  .zr-brand {
    width: 23px;
    font-size: 20px;
  }

  .zr-models {
    gap: 3px;
  }

  .zr-models > span {
    width: 100%;
    padding: 5px;
    font-size: 10px;
  }

  .zr-models button {
    gap: 7px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .zr-market-heading {
    flex-direction: column;
    gap: 6px;
    margin: 23px 0 13px;
  }

  .zr-market-heading > div {
    flex-wrap: wrap;
    gap: 8px;
  }

  .zr-market-heading span {
    font-size: 10px;
  }

  .zr-market-table {
    grid-template-columns: 1fr;
  }

  .zr-toolbar {
    gap: 10px;
    padding: 11px;
  }

  .zr-search {
    border-bottom: 1px solid var(--zr-line);
    flex: 0 0 100%;
  }

  .zr-select {
    flex: 1;
  }

  .zr-select select {
    width: 100%;
  }

  .zr-checkbox {
    font-size: 11px;
  }

  .zr-key-select {
    border-top: 1px solid var(--zr-line);
    flex: 0 0 100%;
    padding-top: 8px;
  }

  .zr-key-select select {
    flex: 1;
  }

  .zr-seller-row {
    grid-template-columns: 1fr 1fr;
  }

  .zr-seller-name strong {
    font-size: 14px;
  }

  .zr-market-foot {
    flex-direction: column;
    gap: 8px;
  }

  .zr-route-strip {
    flex-wrap: wrap;
    gap: 13px;
    padding: 21px;
  }

  .zr-route-strip > div:nth-child(2) {
    flex: 1;
  }

  .zr-route-mode {
    margin-left: 0;
  }

  .zr-route-strip > .zr-button {
    margin-left: auto;
  }

  .zr-route-strip h3 {
    font-size: 14px;
  }

  .zr-editor-grid {
    grid-template-columns: 1fr;
  }

  .zr-summary {
    position: static;
  }

  .zr-mode-options {
    gap: 10px;
  }

  .zr-mode-options button {
    padding: 14px;
  }

  .zr-fields, .zr-create-key .zr-fields {
    grid-template-columns: 1fr;
  }

  .zr-key-list article {
    gap: 15px;
    padding: 18px;
  }

  .zr-key-title {
    flex-basis: 70%;
  }

  .zr-key-list label {
    flex: 1;
    min-width: 110px;
  }

  .zr-code-help {
    flex-wrap: wrap;
    gap: 16px;
    padding: 21px;
  }

  .zr-code-help code {
    flex: 1;
  }

  .zr-footer {
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  .zr-footer span:last-child {
    flex: 0 0 100%;
    margin-left: 0;
  }

  .zr-toast {
    font-size: 12px;
    bottom: 12px;
  }

  .zr-toast > span {
    max-width: 65ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zr-app *, .zr-app :before, .zr-app :after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* [project]/src/app/prototype/mac-glass.css [app-client] (css) */
html:has(.zr-app) {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  background: #f3f6ef !important;
}

html:has(.zr-app) body {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  background: #f3f6ef !important;
}

html:has(.zr-app[data-zr-theme="dark"]) {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  background: #111713 !important;
}

html:has(.zr-app[data-zr-theme="dark"]) body {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  background: #111713 !important;
}

html:has(.zr-app) body:before {
  content: none !important;
  display: none !important;
}

html:has(.zr-app) body:after {
  content: none !important;
  display: none !important;
}

html:has(.zr-app) {
  scrollbar-color: #8fa899 #f3f6ef;
  scroll-padding-top: 100px;
}

html:has(.zr-app[data-zr-theme="dark"]) {
  scrollbar-color: #68766b #111713;
}

body:has(.zr-app) {
  letter-spacing: normal;
  word-spacing: normal;
}

.zr-app {
  --zr-bg: #f3f6ef;
  --zr-surface: #fbfcf8;
  --zr-panel: #ffffff68;
  --zr-ink: #20382b;
  --zr-muted: #5d7062;
  --zr-accent: #226848;
  --zr-line: #dae2d7;
  --zr-soft: #e4ecdf;
  --zr-hover: #e4ecdf;
  --zr-row: #82977508;
  --zr-selected: #9fc6ac32;
  --zr-glass: linear-gradient(145deg,#fff5,#ffffff0d 55%,#fff3);
  --zr-button-glass: linear-gradient(135deg,#ffffff75,#ffffff18 55%,#ffffff45);
  --zr-rim: inset 0 1px 1px #ffffffea,inset 1px 0 1px #ffffff70,inset 0 -1px 1px #29452f28,0 3px 9px #1422180b;
  font-family: var(--font-zoo),sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
}

.zr-app[data-zr-theme="dark"] {
  --zr-bg: #111713;
  --zr-surface: #1d241f;
  --zr-panel: #ffffff07;
  --zr-ink: #e9eee6;
  --zr-muted: #adb7a9;
  --zr-accent: #aac3a9;
  --zr-line: #343e34;
  --zr-soft: #29332a;
  --zr-hover: #2b352c;
  --zr-row: #ffffff03;
  --zr-selected: #b5cbaa1d;
  --zr-glass: linear-gradient(145deg,#ffffff13,#ffffff05 55%,#ffffff09);
  --zr-button-glass: linear-gradient(135deg,#ffffff20,#ffffff08 55%,#ffffff14);
  --zr-rim: inset 0 1px 1px #ffffff65,inset 1px 0 1px #ffffff12,inset 0 -1px 1px #0005,0 4px 10px #0002;
}

.zr-app * {
  scrollbar-width: thin;
  scrollbar-color: #91a18b transparent;
}

.zr-app[data-zr-theme="dark"] * {
  scrollbar-color: #6a7b63 transparent;
}

body:has(.zr-app)::-webkit-scrollbar {
  width: 8px;
}

.zr-app ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body:has(.zr-app)::-webkit-scrollbar-track {
  background: #f3f6ef;
}

.zr-app ::-webkit-scrollbar-track {
  background: #f3f6ef;
}

body:has(.zr-app[data-zr-theme="dark"])::-webkit-scrollbar-track {
  background: #111713;
}

body:has(.zr-app)::-webkit-scrollbar-thumb {
  background: #91a18b;
  border: 0;
  border-radius: 8px;
}

.zr-app ::-webkit-scrollbar-thumb {
  background: #91a18b;
  border: 0;
  border-radius: 8px;
}

.zr-app ::selection {
  color: #173023;
  background: #b4d3bb;
}

.zr-app[data-zr-theme="dark"] ::selection {
  color: #fff;
  background: #52664f;
}

.zr-app .zr-header-v2 {
  background: var(--zr-glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.05);
  width: calc(100% - 64px);
  max-width: 1400px;
  height: 62px;
  min-height: 62px;
  box-shadow: var(--zr-rim),0 8px 25px #13201608;
  z-index: 100;
  border-radius: 22px;
  margin: 14px auto 0;
  padding: 8px 18px;
  top: 14px;
}

.zr-app .zr-header-v2 nav {
  gap: 5px;
}

.zr-app .zr-header-v2 nav a {
  border-radius: 12px;
  min-height: 40px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 550;
}

.zr-app .zr-header-v2 nav [aria-current] {
  background: var(--zr-selected);
  box-shadow: none;
}

.zr-app .zr-header-v2 nav a:hover {
  background: var(--zr-button-glass);
}

.zr-app .zr-header-v2 .zr-logo {
  align-items: center;
  width: 144px;
  min-width: 144px;
  min-height: 40px;
  display: flex;
}

.zr-app .zr-brand-clean {
  aspect-ratio: auto;
  width: auto;
  font-family: var(--font-zoo),sans-serif;
  letter-spacing: -.055em;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  align-items: baseline;
  font-size: 29px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  position: static;
  overflow: visible;
}

.zr-app .zr-brand-clean img {
  width: 138px;
  height: auto;
  display: block;
}

.zr-brand-clean > span:first-child {
  color: #327757;
}

.zr-brand-clean > span:last-child {
  color: #5e9375;
}

.zr-app[data-zr-theme="dark"] .zr-brand-clean > span:first-child {
  color: #b6d2b1;
}

.zr-app[data-zr-theme="dark"] .zr-brand-clean > span:last-child {
  color: #e3edde;
}

.zr-app .zr-header-actions {
  gap: 9px;
}

.zr-app .zr-header-v2 .zr-account {
  background: var(--zr-button-glass);
  width: 40px;
  height: 40px;
  min-height: 40px;
  box-shadow: var(--zr-rim);
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: grid !important;
}

.zr-app .zr-theme-switch {
  background: #68776013;
  border-radius: 20px;
  justify-content: space-around;
  align-items: center;
  width: 70px;
  height: 36px;
  min-height: 36px;
  display: flex;
  position: relative;
  box-shadow: inset 0 1px 2px #26382815;
}

.zr-theme-switch > svg {
  z-index: 1;
  color: var(--zr-muted);
  transition: color .3s, transform .5s;
  position: relative;
}

.zr-app .zr-theme-thumb {
  background: var(--zr-button-glass);
  width: 29px;
  height: 29px;
  box-shadow: var(--zr-rim);
  border-radius: 50%;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  top: 3.5px;
  left: 3px;
}

.zr-theme-switch[aria-checked="true"] .zr-theme-thumb {
  transform: translateX(35px);
}

.zr-theme-switch[aria-checked="false"] > svg:first-of-type, .zr-theme-switch[aria-checked="true"] > svg:last-of-type {
  color: var(--zr-ink);
  transform: rotate(12deg);
}

.zr-control-center {
  position: relative;
}

.zr-app .zr-language-trigger {
  background: none;
  border-radius: 13px;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px;
  font-size: 11px;
  display: flex;
}

.zr-app .zr-language-trigger:hover {
  background: var(--zr-selected);
}

.zr-language-menu {
  min-width: 174px;
  box-shadow: var(--zr-rim),0 12px 35px #1b271522;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: #f4f7eff0;
  border-radius: 15px;
  padding: 7px;
  position: absolute;
  top: 49px;
  right: 0;
}

.zr-app[data-zr-theme="dark"] .zr-language-menu {
  background: #252c23f5;
}

.zr-app .zr-language-menu button {
  text-align: left;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 12px;
  display: flex;
}

.zr-app .zr-language-menu button:hover, .zr-app .zr-language-menu button[aria-pressed="true"] {
  background: var(--zr-selected);
}

.zr-app .zr-button, .zr-app .zr-pin {
  color: var(--zr-ink);
  box-shadow: var(--zr-rim);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  border-radius: 15px;
  transition: transform .25s, box-shadow .25s, background .25s;
  position: relative;
  background: var(--zr-button-glass) !important;
}

.zr-app .zr-button.primary {
  color: var(--zr-ink);
  box-shadow: var(--zr-rim),0 5px 15px #2445210a;
  background: linear-gradient(135deg, #ffffff60, #93baa23d 48%, #effbe945) !important;
}

.zr-app[data-zr-theme="dark"] .zr-button.primary {
  color: var(--zr-ink);
  background: linear-gradient(135deg, #d5e3c92b, #bdcdbf0e 60%, #c2d7bf25) !important;
}

.zr-app .zr-button:hover, .zr-app .zr-pin:hover {
  box-shadow: var(--zr-rim),0 6px 16px #172a1720;
  transform: translateY(-1px);
  background: var(--zr-button-glass) !important;
}

.zr-app .zr-button:active {
  transform: scale(.98);
}

.zr-app .zr-button:disabled {
  transform: none;
}

.zr-app .zr-demo-note > .zr-button {
  color: var(--zr-ink);
  background: var(--zr-button-glass) !important;
}

.zr-app .zr-discovery, .zr-app .zr-toolbar {
  -webkit-backdrop-filter: blur(22px) saturate(.9);
  backdrop-filter: blur(22px) saturate(.9);
}

.zr-app[data-zr-theme="dark"] .zr-discovery {
  background: #1c231ada;
}

.zr-app[data-zr-theme="dark"] .zr-toolbar {
  background: #ffffff04;
}

.zr-app[data-zr-theme="dark"] .zr-family, .zr-app[data-zr-theme="dark"] .zr-models button {
  background: #ffffff05;
  box-shadow: inset 0 1px 1px #ffffff14;
}

.zr-app[data-zr-theme="dark"] .zr-family[aria-pressed="true"], .zr-app[data-zr-theme="dark"] .zr-models button[aria-pressed="true"] {
  background: var(--zr-selected);
  color: var(--zr-ink);
}

.zr-app[data-zr-theme="dark"] .zr-market-table, .zr-app[data-zr-theme="dark"] .zr-pagination {
  background: #1b231bf5;
}

.zr-app[data-zr-theme="dark"] .zr-demo-note {
  background: #242e23d9;
}

.zr-app[data-zr-theme="dark"] .zr-landscape {
  filter: brightness(.32) saturate(.35);
}

.zr-app .zr-family img, .zr-app .zr-seller-avatar img {
  box-sizing: border-box;
  object-fit: contain;
  background: none;
  border-radius: 0;
  padding: 0;
}

.zr-app .zr-family img {
  width: 28px;
  height: 28px;
}

.zr-app .zr-seller-avatar img {
  width: 27px;
  height: 27px;
}

.zr-app[data-zr-theme="dark"] .zr-family img, .zr-app[data-zr-theme="dark"] .zr-seller-avatar img {
  filter: none;
}

.zr-app[data-zr-theme="dark"] img[src$="openai.svg"], .zr-app[data-zr-theme="dark"] img[src$="anthropic.svg"], .zr-app[data-zr-theme="dark"] img[src$="xai.svg"], .zr-app[data-zr-theme="dark"] img[src$="moonshot.svg"] {
  filter: brightness(0) invert();
}

.zr-floating-provider, .zr-closing-glass, .zr-glass-pebble {
  -webkit-backdrop-filter: blur(2px) saturate(.8);
  backdrop-filter: blur(2px) saturate(.8);
  background: linear-gradient(145deg, #ffffff38, #ffffff06 60%, #ffffff26);
  box-shadow: inset 1px 1px 1px #ffffffc0, inset -1px -1px 2px #ffffff28, 0 8px 20px #14241814;
}

.zr-app[data-zr-theme="dark"] .zr-floating-provider, .zr-app[data-zr-theme="dark"] .zr-closing-glass {
  background: linear-gradient(145deg, #ffffff27, #ffffff06 60%, #ffffff12);
  box-shadow: inset 1px 1px 1px #ffffff82, inset -1px -1px 1px #fff2, 0 8px 20px #0002;
}

.zr-drifter {
  background: var(--zr-glass);
  width: 140px;
  height: 140px;
  box-shadow: var(--zr-rim);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  border-radius: 40px;
  place-items: center;
  animation: 28s ease-in-out infinite paused zr-short-flight;
  display: grid;
  position: absolute;
  top: 380px;
  right: -30px;
}

.zr-drifter img {
  object-fit: contain;
  width: 70px;
  height: 70px;
}

.zr-drifter[data-side="left"] {
  top: 490px;
  left: -45px;
  right: auto;
}

.zr-liquid-scene[data-motion-state="running"] .zr-drifter {
  animation-play-state: running;
}

@keyframes zr-short-flight {
  0%, 15%, 85%, 100% {
    opacity: 0;
    transform: translate(0, 40px) rotate(-15deg) scale(.85);
  }

  30%, 65% {
    opacity: .6;
  }

  75% {
    opacity: 0;
    transform: translate(-65px, -85px) rotate(18deg) scale(1);
  }
}

.zr-app .zr-closing-scene {
  background: var(--zr-bg);
  align-items: end;
  height: clamp(150px, 19vw, 280px);
}

.zr-app .zr-closing-objects {
  display: none;
}

.zr-app .zr-closing-scene > .zr-glass-wordmark {
  font-family: var(--font-zoo),sans-serif;
  letter-spacing: -.055em;
  color: #48785820;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  filter: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  background: none;
  margin-bottom: -.16em;
  padding: 0;
  font-size: clamp(85px, 20.5vw, 310px);
  font-weight: 650;
  line-height: 1;
}

.zr-app[data-zr-theme="dark"] .zr-closing-scene {
  background: var(--zr-bg);
}

.zr-app[data-zr-theme="dark"] .zr-closing-scene > .zr-glass-wordmark {
  color: #d4e0cd15;
  filter: none;
  -webkit-text-stroke: 0;
  background: none;
}

.zr-metric-tooltip[data-zr-theme="dark"] {
  background: #242d22f5;
}

.zr-site-footer {
  width: 86%;
  max-width: 1240px;
  color: var(--zr-muted);
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin: 20px auto 0;
  padding: 60px 0 15px;
  display: grid;
}

.zr-site-footer a {
  color: inherit;
  font-size: 12px;
  text-decoration: none;
}

.zr-site-footer a:hover {
  color: var(--zr-ink);
}

.zr-site-footer-brand > a:first-child {
  display: inline-block;
}

.zr-app .zr-site-footer-brand .zr-brand-clean {
  font-size: 27px;
}

.zr-app .zr-site-footer-brand p {
  max-width: 230px;
  margin: 20px 0;
  font-size: 13px;
  line-height: 1.8;
}

.zr-footer-status {
  background: var(--zr-panel);
  box-shadow: var(--zr-rim);
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  display: inline-flex;
}

.zr-app .zr-site-footer-group h3 {
  color: var(--zr-ink);
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
}

.zr-site-footer-group a {
  align-items: center;
  min-height: 34px;
  display: flex;
}

.zr-site-footer-bottom {
  grid-column: 1 / -1;
  justify-content: space-between;
  padding-top: 30px;
  font-size: 10px;
  display: flex;
}

@media (max-width: 1050px) {
  .zr-app .zr-header-v2 {
    width: calc(100% - 32px);
    padding-inline: 12px;
  }

  .zr-app .zr-header-v2 .zr-logo {
    width: 125px;
    min-width: 125px;
  }

  .zr-app .zr-header-v2 nav a {
    padding-inline: 9px;
    font-size: 11px;
  }

  .zr-app .zr-brand-clean {
    font-size: 26px;
  }

  .zr-app .zr-header-actions {
    gap: 4px;
  }
}

@media (max-width: 760px) {
  .zr-app .zr-header-v2 {
    border-radius: 19px;
    flex-wrap: wrap;
    gap: 0;
    width: calc(100% - 24px);
    height: auto;
    min-height: 94px;
    margin-top: 8px;
    padding: 5px 10px;
    display: flex;
    top: 8px;
  }

  .zr-app .zr-header-v2 .zr-logo {
    min-height: 40px;
  }

  .zr-app .zr-header-v2 .zr-header-actions {
    gap: 4px;
    margin-left: auto;
  }

  .zr-app .zr-header-v2 nav {
    order: 3;
    justify-content: center;
    gap: 2px;
    width: 100%;
    display: flex;
  }

  .zr-app .zr-header-v2 nav a {
    min-height: 34px;
    padding: 8px 10px;
    font-size: 10px;
  }

  .zr-app .zr-header-v2 nav a:last-child {
    display: flex;
  }

  .zr-app .zr-header-v2 .zr-account {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .zr-app .zr-theme-switch {
    width: 62px;
    height: 32px;
    min-height: 32px;
  }

  .zr-app .zr-theme-thumb {
    width: 25px;
    height: 25px;
  }

  .zr-theme-switch[aria-checked="true"] .zr-theme-thumb {
    transform: translateX(31px);
  }

  .zr-language-trigger > svg:first-child {
    display: none;
  }

  .zr-app .zr-language-trigger {
    gap: 4px;
    padding: 6px;
  }

  .zr-language-menu {
    right: -35px;
  }

  .zr-site-footer {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 15px;
    width: 86%;
    padding-top: 35px;
  }

  .zr-site-footer-brand {
    grid-column: 1 / -1;
  }

  .zr-app .zr-site-footer-group h3 {
    font-size: 11px;
  }

  .zr-site-footer-group a {
    min-height: 40px;
    font-size: 10px;
    line-height: 1.4;
  }

  .zr-site-footer-bottom {
    gap: 20px;
    font-size: 9px;
  }

  .zr-site-footer-bottom > span:last-child {
    text-align: right;
  }

  .zr-drifter {
    width: 95px;
    height: 95px;
  }

  .zr-drifter img {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zr-drifter {
    display: none;
  }

  .zr-language-menu {
    animation: none;
  }

  .zr-theme-thumb {
    transition: none;
  }
}

/* [project]/src/app/home/glass-playground.css [app-client] (css) */
.zg-scene {
  --zg-ink: #143e2c;
  --zg-muted: #456553;
  --zg-line: #1e4a312e;
  isolation: isolate;
  min-height: 100svh;
  color: var(--zg-ink);
  font-family: var(--font-zoo),sans-serif;
  background: #e3eee4;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  overflow: clip;
}

.zg-scene[data-theme="dark"] {
  --zg-ink: #f1f5ed;
  --zg-muted: #c0cec2;
  --zg-line: #daefdf3b;
  background: #111e19;
}

.zg-scene * {
  box-sizing: border-box;
}

.zg-scene ::selection {
  color: #123c2a;
  background: #aacfb7;
}

.zg-scene :focus-visible {
  outline-offset: 5px;
  outline: 2px solid;
}

.zg-scene button, .zg-scene select, .zg-scene input {
  font: inherit;
  color: inherit;
}

.zg-scene button, .zg-scene a, .zg-scene select {
  -webkit-tap-highlight-color: transparent;
}

.zg-scene button, .zg-scene select {
  cursor: pointer;
}

.zg-scene a {
  color: inherit;
  text-decoration: none;
}

.zg-backdrop, .zg-canvas {
  pointer-events: none;
  z-index: -2;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
}

.zg-backdrop {
  background: linear-gradient(#f0f7f021,#f0f7f021),var(--zg-background) center/cover no-repeat;
}

.zg-scene[data-theme="dark"] .zg-backdrop {
  background-image: linear-gradient(#07130d2e,#07130d2e),var(--zg-background);
}

.zg-canvas {
  opacity: 0;
  z-index: -1;
}

.zg-scene[data-glass="gpu"] .zg-canvas {
  opacity: 1;
}

.zg-playground {
  max-width: 1800px;
  margin: auto;
  padding: 24px 4vw 36px;
}

.zg-skip {
  z-index: 5;
  background: #fff;
  padding: 12px;
  position: absolute;
  top: -100px;
}

.zg-skip:focus {
  top: 0;
}

.zg-surface {
  -webkit-backdrop-filter: blur(10px);
  background: #f5faf457;
  position: relative;
  box-shadow: inset 0 1px #ffffff9e, 0 8px 24px #0c241714;
}

.zg-scene[data-theme="dark"] .zg-surface {
  background: #111e1899;
  box-shadow: inset 0 1px #ebf9f054, 0 8px 24px #00000021;
}

.zg-scene[data-glass="gpu"] .zg-surface {
  -webkit-backdrop-filter: none;
  background: none;
}

.zg-scene .zg-jade {
  color: #fff;
  background: #175a3fe0;
}

.zg-scene[data-glass="fallback"] .zg-frost {
  -webkit-backdrop-filter: blur(18px);
  background: #eff7ebbd;
}

.zg-scene[data-glass="fallback"][data-theme="dark"] .zg-frost {
  background: #111e18c7;
}

.zg-scene[data-glass="fallback"] .zg-jade {
  color: #fff;
  background: #175a3fe0;
}

.zg-header-wrap {
  z-index: 3;
  border-radius: 28px;
  max-width: 1240px;
  margin: 0 auto;
}

.zg-header-preview {
  max-width: 1240px;
  margin: 12px auto 0;
}

.zg-header-preview > summary {
  cursor: pointer;
  background: #e8f4e88c;
  border-radius: 12px;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12px;
  display: inline-flex;
}

.zg-header-preview[open] > .zg-header-wrap {
  margin-top: 10px;
}

.zg-header {
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  min-height: 70px;
  padding: 12px 24px;
  display: flex;
}

.zg-brand {
  letter-spacing: -.04em;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.zg-brand span {
  font-weight: 500;
}

.zg-header nav {
  align-items: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 650;
  display: flex;
}

.zg-header a:hover {
  opacity: .7;
}

.zg-header-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.zg-icon {
  background: none;
  border: 0;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
}

.zg-icon:hover {
  background: #809b8626;
}

.zg-header select {
  background: none;
  border: 0;
  padding: 8px 2px;
  font-size: 12px;
}

.zg-scene option {
  color: #173c29;
  background: #eef4ec;
}

.zg-header-1 {
  border-radius: 20px;
  max-width: 1050px;
}

.zg-header-1 .zg-header {
  min-height: 80px;
}

.zg-header-2 {
  border-radius: 8px 8px 32px 32px;
  max-width: none;
}

.zg-header-2 .zg-header {
  min-height: 60px;
}

.zg-header-2 nav {
  margin-left: 34px;
  margin-right: auto;
}

.zg-workspace {
  max-width: 1180px;
  margin: clamp(45px, 7vh, 95px) auto 0;
  position: relative;
}

.zg-intro {
  max-width: 500px;
  margin-bottom: 28px;
}

.zg-intro h1 {
  letter-spacing: -.04em;
  text-wrap: balance;
  margin: 0 0 15px;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 650;
  line-height: 1.14;
}

.zg-intro p {
  color: var(--zg-muted);
  white-space: pre-line;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.zg-controls {
  border-radius: 22px;
  width: 410px;
  max-width: 100%;
  padding: 22px 25px;
}

.zg-control-group h2 {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 700;
}

.zg-segments {
  background: #76957d1f;
  border-radius: 10px;
  gap: 3px;
  padding: 3px;
  display: flex;
}

.zg-segments button {
  background: none;
  border: 0;
  border-radius: 7px;
  flex: 1;
  padding: 7px 4px;
  font-size: 12px;
  transition: background .2s;
}

.zg-segments button[aria-pressed="true"] {
  color: #143e2c;
  background: #ffffffad;
  box-shadow: 0 2px 7px #132b1912;
}

.zg-sliders {
  gap: 10px;
  display: grid;
}

.zg-sliders label {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  display: flex;
}

.zg-sliders input {
  accent-color: #39845d;
  cursor: pointer;
  width: 52%;
}

.zg-object-controls {
  gap: 8px;
  display: flex;
}

.zg-object-controls select, .zg-object-controls button {
  background: #809b8621;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

.zg-object-controls select {
  flex: 1;
  min-width: 0;
}

.zg-object-controls button {
  align-items: center;
  gap: 7px;
  display: flex;
}

.zg-object-controls button:disabled {
  opacity: .4;
  cursor: default;
}

.zg-control-bottom {
  border-top: 1px solid var(--zg-line);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 12px;
  font-size: 11px;
  display: flex;
}

.zg-control-bottom label {
  align-items: center;
  gap: 6px;
  display: flex;
}

.zg-control-bottom input {
  accent-color: #39845d;
}

.zg-control-bottom select {
  background: none;
  border: 0;
  max-width: 125px;
  font-size: 11px;
}

.zg-button-study {
  flex-wrap: wrap;
  gap: 22px;
  margin: 30px 0 0;
  display: flex;
}

.zg-button-study > div > span {
  color: var(--zg-muted);
  margin: 9px 0 0 14px;
  font-size: 11px;
  display: block;
}

.zg-button-surface {
  transform-origin: center;
  border-radius: 999px;
  display: inline-flex;
}

.zg-demo-button {
  border-radius: inherit;
  align-items: center;
  gap: 20px;
  min-height: 48px;
  padding: 12px 21px;
  font-size: 13px;
  font-weight: 650;
  transition: filter .15s;
  display: flex;
}

.zg-demo-button:active {
  filter: brightness(.9);
}

@media (min-width: 1600px) {
  .zg-workspace {
    margin-top: 10vh;
  }

  .zg-controls {
    width: 450px;
  }
}

@media (max-width: 800px) {
  .zg-playground {
    padding: 14px 18px 26px;
  }

  .zg-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
  }

  .zg-header .zg-brand {
    font-size: 26px;
  }

  .zg-header nav {
    order: 3;
    justify-content: center;
    gap: 25px;
    width: 100%;
    font-size: 12px;
  }

  .zg-header-2 nav {
    margin: 0;
  }

  .zg-header-actions {
    margin-left: auto;
  }

  .zg-header-1 .zg-header {
    min-height: 70px;
  }

  .zg-workspace {
    margin-top: 42px;
  }

  .zg-controls {
    width: 380px;
  }

  .zg-intro p {
    font-size: 14px;
  }

  .zg-button-study {
    gap: 18px 12px;
  }

  .zg-demo-button {
    gap: 10px;
    padding: 12px 17px;
  }

  .zg-backdrop {
    background-position: 57%;
  }
}

@media (max-width: 420px) {
  .zg-controls {
    padding: 19px;
  }

  .zg-header nav {
    gap: 18px;
  }

  .zg-button-study > div:last-child {
    margin-right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zg-scene * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.zg-engine-stage {
  z-index: -1;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.zg-engine-stage > canvas, .zg-engine-stage iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.zg-engine-stage + .zg-canvas {
  z-index: 0;
}

.zg-playground {
  z-index: 1;
  position: relative;
}

.zg-mode-options {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.zg-mode-options button {
  background: #809b861f;
  border: 1px solid #0000;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 650;
}

.zg-mode-options button[aria-pressed="true"] {
  background: #9bbb9e3d;
  border-color: currentColor;
}

.zg-effect-select {
  background: #809b8621;
  border: 0;
  border-radius: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px !important;
}

.zg-burst {
  border: 1px solid var(--zg-line);
  background: #809b8621;
  border-radius: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 8px;
  font-size: 12px !important;
}

.zg-render-error {
  color: #20432e;
  background: #f1f7ed;
  border-radius: 12px;
  max-width: 260px;
  padding: 16px;
  font-size: 13px;
  position: fixed;
  bottom: 4vh;
  right: 6vw;
}

.zg-engine-stage canvas {
  touch-action: pan-y;
}

.zg-scene {
  --zg-panel-base: #f5faf4;
  --zg-panel-tint: #9cd1ad;
}

.zg-scene[data-theme="dark"] {
  --zg-panel-base: #192620;
  --zg-panel-tint: #14402b;
}

.zg-scene[data-glass="fallback"] .zg-surface[data-custom-material] {
  background: var(--zg-custom-fill);
  -webkit-backdrop-filter: blur(var(--zg-custom-blur));
}

.zg-background-options {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
  display: grid;
}

.zg-background-options button {
  border: 1px solid var(--zg-line);
  text-align: left;
  background: none;
  border-radius: 8px;
  padding: 9px 7px;
  font-size: 11px;
}

.zg-background-options button[aria-pressed="true"] {
  background: #9bbb9e4d;
  border-color: currentColor;
}

.zg-surface-sliders {
  margin-top: 14px;
}

.zg-surface-sliders output {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.zg-interface-study {
  gap: 24px;
  width: calc(100% - 475px);
  display: grid;
  position: absolute;
  top: 135px;
  right: 0;
}

.zg-section-sample, .zg-table-sample {
  border-radius: 24px;
  padding: 30px;
  overflow: hidden;
}

.zg-section-sample h2 {
  letter-spacing: -.025em;
  max-width: 330px;
  margin: 0 0 18px;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
}

.zg-section-sample p {
  max-width: 440px;
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.7;
}

.zg-section-sample a {
  align-items: center;
  gap: 12px;
  font-weight: 650;
  display: inline-flex;
}

.zg-sample-title {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
  display: flex;
}

.zg-sample-title h2 {
  margin: 0;
  font-size: 18px;
}

.zg-sample-title span {
  font-size: 11px;
}

.zg-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: #6d9680 transparent;
  max-height: 230px;
  overflow: auto;
}

.zg-table-sample table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  font-size: 12px;
}

.zg-table-sample th {
  font-weight: 500;
}

.zg-table-sample td, .zg-table-sample th {
  border-bottom: 1px solid var(--zg-line);
  white-space: nowrap;
  padding: 13px 8px;
}

.zg-table-sample td:first-child {
  font-weight: 650;
}

.zg-table-sample tbody tr:hover {
  background: #82af9226;
}

.zg-controls {
  padding: 20px 23px;
}

.zg-control-group + .zg-control-group {
  margin-top: 16px;
}

.zg-controls label.zg-control-group {
  display: block;
}

@media (max-width: 1050px) {
  .zg-interface-study {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-top: 28px;
    position: static;
  }

  .zg-section-sample, .zg-table-sample {
    padding: 24px;
  }
}

@media (max-width: 650px) {
  .zg-interface-study {
    grid-template-columns: 1fr;
  }

  .zg-header nav {
    gap: 15px;
  }

  .zg-table-sample {
    padding: 22px 16px;
  }
}

.zg-table-sample table, .zg-table-sample thead, .zg-table-sample tbody, .zg-table-sample tr, .zg-table-sample th, .zg-table-sample td {
  color: inherit;
  background-color: #0000;
}

.zg-sliders input[type="range"] {
  box-shadow: none;
  background: none;
  border: 0;
  min-height: 0;
  padding: 0;
}

/*# sourceMappingURL=src_13jjo2n2-su5b._.css.map*/