/* Hallmark · Signal identity · shared with oruk.ai · P5 H4 E4 S5 R5 V4 */
@font-face { font-family: "Geist"; src: url("assets/signal/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/signal/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/signal/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Spectrum identity: sampled directly from the supplied logo. */
:root {
  color-scheme: light;
  --brand-ivory: #f7f7ed;
  --brand-teal: #195a69;
  --brand-cyan: #0c91cc;
  --brand-navy: #302e69;
  --brand-violet: #6b2e74;
  --brand-rose: #b04857;
  --brand-orange: #ed772f;
  /* Match the existing 1120 × 158 SVG, including its centered letterboxing.
     All accents reveal a crop of this single viewport-anchored color field. */
  --brand-field-width: min(100vw, 1063.291139px); /* 150 × 1120 / 158 */
  --brand-field-left: calc((100vw - var(--brand-field-width)) / 2);
  --brand-stop-teal: calc(var(--brand-field-left) + var(--brand-field-width) * .15);
  --brand-stop-cyan: calc(var(--brand-field-left) + var(--brand-field-width) * .32);
  --brand-stop-navy: calc(var(--brand-field-left) + var(--brand-field-width) * .46);
  --brand-stop-violet: calc(var(--brand-field-left) + var(--brand-field-width) * .6);
  --brand-stop-rose: calc(var(--brand-field-left) + var(--brand-field-width) * .74);
  --brand-stop-orange: calc(var(--brand-field-left) + var(--brand-field-width) * .88);
  --brand-gradient: linear-gradient(90deg, var(--brand-teal) var(--brand-stop-teal), var(--brand-cyan) var(--brand-stop-cyan), var(--brand-navy) var(--brand-stop-navy), var(--brand-violet) var(--brand-stop-violet), var(--brand-rose) var(--brand-stop-rose), var(--brand-orange) var(--brand-stop-orange));
  --brand-gradient-ink: linear-gradient(90deg, var(--brand-teal) var(--brand-stop-teal), color-mix(in srgb, var(--brand-cyan) 74%, black) var(--brand-stop-cyan), var(--brand-navy) var(--brand-stop-navy), var(--brand-violet) var(--brand-stop-violet), var(--brand-rose) var(--brand-stop-rose), color-mix(in srgb, var(--brand-orange) 70%, black) var(--brand-stop-orange));
  --brand-gradient-control: linear-gradient(rgb(0 0 0 / 28%), rgb(0 0 0 / 28%)), var(--brand-gradient);
  --background: var(--brand-ivory);
  --foreground: #21353d;
  --card: #fdfdf7;
  --card-foreground: var(--foreground);
  --popover: #fdfdf7;
  --popover-foreground: var(--foreground);
  --primary: var(--brand-teal);
  --primary-foreground: var(--brand-ivory);
  --secondary: #edeee4;
  --secondary-foreground: var(--foreground);
  --muted: #edeee4;
  --muted-foreground: #5c6d72;
  --accent: #e4eeeb;
  --accent-foreground: var(--brand-teal);
  --destructive: var(--brand-rose);
  --border: #d6ded8;
  --input: #bdccc8;
  --ring: var(--brand-teal);
  --chart-1: var(--brand-teal);
  --chart-2: var(--brand-cyan);
  --chart-3: var(--brand-violet);
  --chart-4: var(--brand-rose);
  --chart-5: var(--brand-orange);
  --radius: 0.75rem;
  --radius-control: 0px;
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--brand-teal);
  --sidebar-primary-foreground: var(--brand-ivory);
  --sidebar-accent: var(--secondary);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--brand-teal);
  --warm: var(--brand-orange);
  --warm-foreground: #302e69;
}

@media (max-width: 639px) {
  :root {
    /* The mobile waveform extends 80 px past each edge, at 100 px high. */
    --brand-field-width: min(calc(100vw + 160px), 708.860759px);
  }
}


:root {
  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --border-strong: #bdccc8;
}
:root[data-theme="dark"] {
  --background: #17292f; --foreground: #f7f7ed; --card: #21353d;
  --muted: #29424b; --muted-foreground: #b4c7c9; --secondary: #29424b;
  --primary: #9bced4; --primary-foreground: #f7f7ed; --accent: #29424b;
  --border: #38515a; --border-strong: #54717a; --ring: #9bced4;
}
.brand { gap: 10px; }
.brand-mark { width: 28px; height: 28px; }
.brand-name { color: #000; font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.brand-sub { margin-left: 2px; font-size: 10px; letter-spacing: .08em; }
:root[data-theme="dark"] .brand-name { color: #fff; }
.empty-mark { width: 52px; height: 52px; object-fit: contain; }
h1, h2, h3, .pg-title, .pane-title { font-weight: 500; letter-spacing: -.035em; min-width: 0; overflow-wrap: anywhere; }
:root :is(button, input:not([type="range"]):not([type="radio"]), select, textarea, .signup-cta, .dev-cta, .convo, .pg-chip, .model-item-tag, .model-item-pill, .ref-chip, .style-chip, .feed-emo, .emo-tag, .shift-tag, .api-latency):not(.record-btn):not(.clip-play):not(.theme-track):not(.theme-thumb) { border-radius: 0; }
:root .pg-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
:root .pg-card, :root .pg-card[data-featured="true"] {
  background: var(--card); border-color: var(--border);
  color: var(--foreground); box-shadow: none; transform: none;
  transition: border-color 180ms, background-color 180ms;
}
:root .pg-card:hover { border-color: var(--primary); background: var(--muted); }
:root .pg-card h3 { color: var(--foreground); text-shadow: none; font-weight: 500; }
:root .pg-card p { color: var(--muted-foreground); text-shadow: none; }
:root .pg-card-icon { border-radius: 0; }
:root .pg-card-cta { color: var(--primary); font-size: .7rem; }
:root .pg-chip { color: var(--muted-foreground); border-color: var(--border-strong); }
:root :is(.signup-cta, .dev-cta, .pg-card-icon, .ex-btn.primary, .live-start:not([data-on="true"])) {
  background-color: var(--brand-teal); background-image: var(--brand-gradient-control);
  background-size: 100vw 100vh; background-position: 0 0; background-attachment: fixed;
  background-repeat: no-repeat; color: #fff; border-color: transparent;
  box-shadow: none; transform: none; filter: none;
}
:root :is(.signup-cta, .dev-cta):hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%); }
:root :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.record-glyph { transition: background-color 180ms, border-radius 180ms; }
@media (max-width: 767px) {
  :root :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  :root :is(.signup-cta, .dev-cta, .pg-card-icon, .ex-btn.primary, .live-start:not([data-on="true"])) { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}

/* Optional measurement uses the same quiet, square controls as the demo. */
.measurement-consent { position: fixed; z-index: 100; inset: auto 16px 16px auto; width: min(420px, calc(100vw - 32px)); padding: 20px; color: var(--foreground); background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 32px #0002; font-size: 14px; line-height: 1.5; }
.measurement-consent[hidden] { display: none; }
.measurement-consent p { margin: 0 0 12px; }
.measurement-consent a { color: inherit; text-decoration: underline; }
.measurement-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.measurement-choices button { padding: 8px 14px; border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; cursor: pointer; }
.measurement-choices button:first-child { background: var(--foreground); color: var(--card); }
.measurement-consent #measurementStatus:empty { display: none; }
.measurement-consent #measurementStatus { margin: 12px 0 0; }