:root {
  color-scheme: light;
  --hz-porcelain: oklch(0.968 0.008 248);
  --hz-porcelain-inset: oklch(0.946 0.010 248);
  --hz-plate: oklch(0.992 0.003 248);
  --hz-steel: oklch(0.198 0.016 248);
  --hz-steel-deep: oklch(0.148 0.014 248);
  --hz-steel-lift: oklch(0.255 0.018 248);
  --hz-steel-edge: oklch(0.34 0.022 248);
  --hz-steel-mute: oklch(0.76 0.022 248);
  --hz-ink: oklch(0.22 0.018 248);
  --hz-slate: oklch(0.38 0.022 248);
  --hz-muted: oklch(0.42 0.020 248);
  --hz-rule: oklch(0.86 0.014 248);
  --hz-rule-strong: oklch(0.74 0.020 248);
  --hz-copper: oklch(0.47 0.140 54);
  --hz-copper-deep: oklch(0.38 0.126 48);
  --hz-copper-pale: oklch(0.82 0.062 58);
  --hz-copper-wash: oklch(0.964 0.022 58);
  --hz-enamel: oklch(0.50 0.128 255);
  --hz-enamel-pale: oklch(0.84 0.050 248);
  --hz-amber: oklch(0.48 0.110 68);
  --hz-amber-wash: oklch(0.96 0.028 78);
  --hz-danger: oklch(0.46 0.135 25);
  --hz-danger-wash: oklch(0.96 0.020 22);
  --hz-canvas: var(--hz-porcelain);
  --hz-paper: var(--hz-plate);
  --hz-rail: var(--hz-steel);
  --hz-line: var(--hz-rule);
  --hz-line-strong: var(--hz-rule-strong);
  --hz-blue: var(--hz-enamel);
  --hz-blue-deep: oklch(0.40 0.118 255);
  --hz-blue-pale: var(--hz-enamel-pale);
  --hz-blue-wash: oklch(0.96 0.018 248);
  --hz-shadow: none;
  --hz-font-sans: "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --hz-font-display: "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --hz-font-mono: "SFMono-Regular", "Roboto Mono", Consolas, monospace;
  --hz-text-xs: 12px;
  --hz-text-sm: 15px;
  --hz-text-md: 16px;
  --hz-text-lg: 20px;
  --hz-ease: cubic-bezier(.2, .8, .2, 1);
  --hz-z-sticky: 20;
  --hz-z-modal: 60;
  --hz-z-toast: 80;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--hz-canvas); }
body,
button,
input,
select,
textarea { font-family: var(--hz-font-sans); }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
}
button,
input,
select,
textarea { letter-spacing: 0; }
button,
a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled,
input:disabled { cursor: not-allowed; opacity: .46; }
:focus-visible { outline: 2px solid var(--hz-copper); outline-offset: 3px; }
::selection { background: var(--hz-copper-pale); color: var(--hz-ink); }
h1, h2, h3 { text-wrap: balance; }

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 2px;
  pointer-events: none;
}
.brand-mark::before {
  right: calc(100% + 6px);
  background: var(--hz-copper);
  transform-origin: right;
  animation: hz-close-left .7s var(--hz-ease) both;
}
.brand-mark::after {
  left: calc(100% + 6px);
  background: var(--hz-copper-pale);
  transform-origin: left;
  animation: hz-close-right .7s var(--hz-ease) both;
}

.product-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--hz-plate);
}
.product-label span { font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.product-label small {
  color: var(--hz-copper-pale);
  font-family: var(--hz-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
}

.page-heading h1 {
  margin: 0;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.02em;
}

.live-dot,
.dot,
.stage-status i,
.workspace-save-state i,
.workspace-index-note i {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 6px;
  border: 0;
  background: transparent;
}
.live-dot::before,
.live-dot::after,
.dot::before,
.dot::after,
.stage-status i::before,
.stage-status i::after,
.workspace-save-state i::before,
.workspace-save-state i::after,
.workspace-index-note i::before,
.workspace-index-note i::after {
  content: "";
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  background: var(--hz-copper);
}
.live-dot::before,
.dot::before,
.stage-status i::before,
.workspace-save-state i::before,
.workspace-index-note i::before {
  left: 0;
  animation: contact-in-left .7s var(--hz-ease) both;
}
.live-dot::after,
.dot::after,
.stage-status i::after,
.workspace-save-state i::after,
.workspace-index-note i::after {
  right: 0;
  background: var(--hz-copper-pale);
  animation: contact-in-right .7s var(--hz-ease) both;
}

@keyframes hz-close-left {
  from { transform: translateX(-10px) scaleX(0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes hz-close-right {
  from { transform: translateX(10px) scaleX(0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes contact-in-left {
  from { transform: translateX(-6px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes contact-in-right {
  from { transform: translateX(6px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .brand-mark::before,
  .brand-mark::after { background: CanvasText; }
}