/* Curio website adapter. Source: kitchensbycurio.com/styles.css, 2026-10-31.
   Scoped to this application; domain interactions and swatch imagery stay intact. */
:root {
  --bg: #e5e5e7; --surface: #fff; --surface-2: #e4e0e9;
  --ink: #313131; --muted: #55545a; --line: #b4a9c4;
  --brand: #6f54a2; --brand-ink: #fff; --green: #6f54a2;
  --accent: #6f54a2; --control: #6f54a2; --control-ink: #fff;
  --focus: #6f54a2; --edge: rgba(255,255,255,.82);
  --glass: rgba(255,255,255,.72); --glass-solid: #f5f4f7;
  --heading: Georgia, 'Times New Roman', serif;
  --body: 'Helvetica Neue', Arial, sans-serif;
  --radius: 6px; --radius-sm: 6px;
  --shadow: 0 12px 40px #00000014, inset 0 1px 0 #ffffff24;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #211b29; --surface: #281f33; --surface-2: #372c45;
    --ink: #f5eefc; --muted: #c8bdd5; --line: #857391;
    --brand: #9475c8; --green: #9475c8; --control: #6f54a2;
    --accent: #c7aae9; --focus: #c7aae9; --edge: rgba(225,210,247,.3);
    --glass: rgba(40,31,51,.82); --glass-solid: #281f33;
    --shadow: 0 12px 40px #00000030, inset 0 1px 0 #ffffff18;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #211b29; --surface: #281f33; --surface-2: #372c45;
  --ink: #f5eefc; --muted: #c8bdd5; --line: #857391;
  --brand: #9475c8; --green: #9475c8; --control: #6f54a2;
  --accent: #c7aae9; --focus: #c7aae9; --edge: rgba(225,210,247,.3);
  --glass: rgba(40,31,51,.82); --glass-solid: #281f33;
  --shadow: 0 12px 40px #00000030, inset 0 1px 0 #ffffff18;
  color-scheme: dark;
}
body { background: var(--bg) url('/curio-scene.svg') repeat fixed; font: 17px/1.65 var(--body); }
h1, h2, h3 { font-family: var(--heading); font-weight: 400; letter-spacing: -.04em; line-height: 1.08; }
h1 { font-size: clamp(2.25rem, 3.4vw, 3.7rem); max-width: 21ch; margin-bottom: .45em; }
h2 { font-size: clamp(1.5rem, 2.1vw, 2rem); }
a { text-underline-offset: 5px; }
.site-header {
  width: min(1400px, calc(100% - 48px)); margin: 24px auto 0;
  padding: 10px 18px; gap: 20px; border: 1px solid rgba(255,255,255,.38);
  border-radius: 18px; background: rgba(111,84,162,.94); color: #fff;
  box-shadow: var(--shadow); position: relative; isolation: isolate;
}
.site-header .brand { gap: 18px; font: 400 1.1rem/1.3 var(--heading); }
.site-header .brand img { width: 100px; height: auto; flex: none; }
.site-header .brand span { white-space: normal; overflow: visible; }
.site-header .back { min-height: 44px; display: flex; align-items: center; text-align: center; }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; border-color: #ffffff66; border-radius: 8px; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.site-header :focus-visible { outline-color: #fff; }
.layout { padding: 24px; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); }
.pane { background: var(--glass-solid); border-color: var(--edge); border-radius: 6px; box-shadow: var(--shadow); }
.stage { padding: clamp(20px, 3vw, 40px); }
.intro > .muted { max-width: 65ch; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.step { margin-top: 28px; padding-top: 24px; }
.step h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.num { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--line); border-radius: 6px; color: var(--accent); font: 400 1rem var(--heading); }
.button { border-radius: 6px; padding: 13px 22px; min-height: 48px; font-size: 15px; font-weight: 400; line-height: 1.25; text-align: center; }
.button.primary, .segmented button[aria-checked="true"], .chip[aria-pressed="true"], .tabs button[aria-selected="true"] { background: var(--control); color: var(--control-ink); border-color: var(--control); }
/* The site's dark purple button needs a darker control shade for small white labels. */
:root { --control: #6f54a2; }
.surface, .sample, .swatch, .gallery-pick, .compare, .overlay-canvas, .chat-input, .bubble { border-radius: 6px; }
.surface { background: var(--surface); }
.surface.active, .surface:has(.surface-pick[aria-pressed="true"]) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.surface-pick { min-height: 56px; }
.surface-text { overflow-wrap: anywhere; }
.icon-mini { width: 44px; height: 44px; border-radius: 6px; }
.segmented { border-radius: 6px; max-width: 100%; flex-wrap: wrap; }
.segmented button { min-height: 44px; padding: 10px 16px; }
.chip { border-radius: 6px; min-height: 44px; }
.gallery-pick[aria-pressed="true"], .swatch[aria-pressed="true"] { outline-color: var(--accent); }
.chat { top: 24px; height: calc(100dvh - 48px); min-height: 440px; }
.chat-head { padding: 24px 22px 18px; }
.chat-head h2 { font-size: 1.75rem; }
.chat-head p { font-size: .9rem; line-height: 1.55; margin-top: 10px; }
.bubble.user { background: var(--control); color: var(--control-ink); }
.chat-form { background: var(--surface); }
.cta { border: 1px solid var(--edge); background: #281f33; color: #f5eefc; padding: 24px; border-radius: 6px; }
.cta h2 { font-size: 2rem; }
.cta .button.primary { background: #6f54a2; border-color: #b5a1d0; color: #fff; }
.site-footer { margin-top: 12px; padding: 32px 24px; background: #281f33; color: #c8bdd5; border-top: 1px solid #ffffff30; }
.site-footer a { color: #f5eefc; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pane { background: linear-gradient(135deg, #ffffff10, #ffffff02 45%, #00000009), var(--glass); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); }
  .site-header { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
}
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover { filter: brightness(1.08); box-shadow: 0 5px 18px #0002; }
  .chip:not([aria-pressed="true"]):hover, .surface-pick:hover, .gallery-pick:hover, .swatch:hover { background-color: var(--surface-2); }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .chip, .segmented button, .surface { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .layout { gap: 16px; grid-template-columns: minmax(0, 1fr) 300px; }
  .stage { padding: 24px; }
}
@media (max-width: 900px) {
  .site-header { width: calc(100% - 32px); margin-top: 16px; gap: 12px; padding: 10px 12px; }
  .site-header .brand { gap: 12px; font-size: .95rem; }
  .site-header .brand img { width: 76px; }
  .site-header .back { font-size: .8rem; }
  .layout { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .tabs { margin: 16px 16px 0; padding: 8px; border: 1px solid var(--edge); border-radius: 10px; background: var(--glass-solid); box-shadow: var(--shadow); }
  .tabs button { min-height: 44px; border-radius: 6px; font-size: 14px; padding: 10px 8px; }
  .chat { position: static; height: calc(100dvh - 130px); min-height: 420px; }
}
@media (max-width: 420px) {
  .site-header { flex-wrap: wrap; }
  .site-header .brand { flex: 1 1 calc(100% - 60px); }
  .site-header .spacer { display: none; }
  .site-header .back { order: 3; flex-basis: 100%; justify-content: center; min-height: 36px; }
  h1 { font-size: 2.2rem; }
  .stage { padding: 20px 16px; }
  .button { padding-inline: 16px; }
  .surfaces { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .pane, .site-header, .cta, .tabs { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .site-header img { background: #6f54a2; }
  .surface.active, .surface:has(.surface-pick[aria-pressed="true"]) { outline: 2px solid Highlight; }
}