:root {
  --model-bg: #0c111a;
  --model-panel: #141a25;
  --model-panel-2: #1a2230;
  --model-line: rgba(172, 187, 255, 0.17);
  --model-text: #f7f8ff;
  --model-muted: #aab2c8;
  --model-violet: #987dff;
  --model-blue: #72bdff;
  --model-green: #5adeac;
}

* { box-sizing: border-box; }

.model-showcase {
  margin: 0;
  background:
    radial-gradient(70rem 34rem at 76% -16%, rgba(111, 128, 222, 0.12), transparent 64%),
    linear-gradient(180deg, #0e131d 0%, #0c111a 54%, #0b1018 100%);
  color: var(--model-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.model-showcase button,
.model-showcase a { font: inherit; }
.model-showcase button { cursor: pointer; }

.model-skip {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  border-radius: 0.7rem;
  color: #070910;
  background: #fff;
}
.model-skip:focus { top: 1rem; }

.model-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 1.4rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.model-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  color: #fff;
  font-size: 1.24rem;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.model-brand-mark {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent url('/assets/brand/alki-mark-transparent-runtime-v13.48.webp') center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 11px rgba(79, 135, 255, 0.38));
  transition: filter 180ms ease;
}
.model-brand:where(:hover,:focus-visible) .model-brand-mark { filter: drop-shadow(0 4px 15px rgba(91, 150, 255, 0.55)) brightness(1.08); }

.model-nav {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
}
.model-nav a { color: var(--model-muted); font-size: 0.86rem; text-decoration: none; }
.model-nav a:hover,
.model-nav a:focus-visible { color: #fff; }

.model-header-cta,
.model-start a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.78rem;
  padding: 0.68rem 1.05rem;
  border: 1px solid rgba(194, 185, 255, 0.58);
  border-radius: 0.86rem;
  color: #fff;
  background: linear-gradient(132deg, #7959ec, #4e91ed);
  box-shadow: 0 12px 32px rgba(79, 69, 216, 0.25);
  font-weight: 760;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.model-header-cta:hover,
.model-start a:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 18px 38px rgba(79, 69, 216, 0.34); }

#modelApp {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 6.5rem) clamp(1rem, 4vw, 4rem) 5rem;
}
.model-loading { min-height: 50vh; display: grid; place-items: center; color: var(--model-muted); }

.model-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(3.2rem, 7vw, 6rem);
}

.model-kicker,
.model-section-head > div > span,
.live-controls > div > span,
.model-start span {
  display: block;
  color: #b9a9ff;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.model-hero h1 {
  max-width: 14ch;
  margin: 0.75rem 0 1.2rem;
  font-size: clamp(2.6rem, 5.4vw, 5.7rem);
  line-height: 0.97;
  letter-spacing: -0.072em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.model-hero p,
.model-section-head > p {
  max-width: 61ch;
  margin: 0;
  color: var(--model-muted);
  font-size: clamp(0.94rem, 1.3vw, 1.08rem);
  line-height: 1.66;
}

.model-hero-note {
  display: grid;
  gap: 0.72rem;
  padding: 1.45rem;
  border: 1px solid var(--model-line);
  border-radius: 1.25rem;
  background: linear-gradient(138deg, rgba(126, 92, 255, 0.2), rgba(17, 23, 36, 0.83));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 25px 60px rgba(0, 0, 0, 0.15);
}
.model-hero-note b { font-size: 1.38rem; letter-spacing: -0.04em; }
.model-hero-note span { color: var(--model-muted); font-size: 0.9rem; line-height: 1.55; }

.model-picker,
.model-showroom,
.model-plans {
  padding: clamp(3rem, 6vw, 5.2rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.model-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.85rem;
}
.model-section-head h2 {
  margin: 0.38rem 0 0;
  font-size: clamp(1.9rem, 3vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.058em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.model-section-head > p { max-width: 34rem; font-size: 0.94rem; }

.model-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.model-filter {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  min-height: 4.3rem;
  padding: .65rem .75rem;
  border: 1px solid var(--model-line);
  border-radius: .9rem;
  color: var(--model-text);
  background: rgba(255, 255, 255, .025);
  text-align: left;
  transition: transform 180ms cubic-bezier(.2,.75,.2,1), border-color 180ms cubic-bezier(.2,.75,.2,1), background-color 180ms cubic-bezier(.2,.75,.2,1);
}
.model-filter:hover,
.model-filter:focus-visible { transform: translateY(-2px); border-color: rgba(145, 129, 255, .58); background: rgba(255, 255, 255, .05); }
.model-filter.is-selected { border-color: rgba(153, 129, 255, .9); background: rgba(112, 79, 222, .19); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.model-filter > i { display: grid; flex: 0 0 auto; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .72rem; color: #e9e5ff; background: rgba(255,255,255,.055); }
.model-filter svg { width: 1.2rem; height: 1.2rem; }
.model-filter > span { display: grid; min-width: 0; gap: .15rem; }
.model-filter strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.model-filter small { color: var(--model-muted); font-size: .68rem; }

.model-type {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.32rem 0.78rem;
  min-height: 10.9rem;
  padding: 1.05rem;
  overflow: hidden;
  border: 1px solid var(--model-line);
  border-radius: 1.05rem;
  color: var(--model-text);
  background: linear-gradient(148deg, rgba(27, 31, 45, 0.88), rgba(11, 14, 22, 0.78));
  text-align: left;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.model-type:hover,
.model-type:focus-visible { transform: translateY(-3px); border-color: rgba(145, 129, 255, 0.62); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.23); }
.model-type.is-selected { border-color: rgba(148, 124, 255, 0.92); background: linear-gradient(148deg, rgba(99, 70, 209, 0.36), rgba(17, 21, 35, 0.92)); box-shadow: inset 0 1px 0 rgba(235, 230, 255, 0.2), 0 16px 38px rgba(80, 55, 210, 0.16); }
.model-type > i { grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(203, 202, 255, 0.25); border-radius: 0.78rem; color: #ebe8ff; background: rgba(255, 255, 255, 0.025); }
.model-type svg { width: 1.28rem; height: 1.28rem; }
.model-type strong { align-self: end; font-size: 1rem; }
.model-type small { align-self: start; color: var(--model-muted); font-size: 0.76rem; line-height: 1.4; }
.model-type em { grid-column: 1 / -1; align-self: end; color: var(--model-green); font-size: 0.75rem; font-style: normal; font-weight: 780; }

/* Real structural showroom cards */
.theme-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.theme-showcase-card {
  display: grid;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--model-line);
  border-radius: 1.18rem;
  color: var(--model-text);
  background: linear-gradient(160deg, rgba(22, 27, 40, 0.94), rgba(10, 13, 21, 0.92));
  text-align: left;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transition: transform 220ms cubic-bezier(.2,.75,.2,1), border-color 220ms cubic-bezier(.2,.75,.2,1), box-shadow 220ms cubic-bezier(.2,.75,.2,1);
}
.theme-showcase-card:hover,
.theme-showcase-card:focus-visible { transform: translateY(-3px); border-color: rgba(120, 190, 255, 0.64); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28); }
.theme-showcase-card.is-selected { border-color: rgba(155, 129, 255, 0.98); box-shadow: 0 0 0 1px rgba(155, 129, 255, 0.24), 0 24px 54px rgba(84, 60, 215, 0.22); }
.theme-showcase-card:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, .3fr); align-items: stretch; }
.theme-showcase-card:first-child .theme-card-copy { align-content: center; min-height: 0; }

.theme-card-copy {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.48rem 0.65rem;
  min-height: 8.4rem;
  padding: 1.05rem 1.1rem 1.12rem;
}
.theme-card-index { color: var(--model-blue); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.12em; }
.theme-card-copy > b { align-self: start; font-size: 1.02rem; letter-spacing: -0.025em; }
.theme-card-copy > small { grid-column: 1 / -1; color: var(--model-muted); font-size: 0.75rem; line-height: 1.48; }
.theme-header-spec { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.34rem; }
.theme-header-spec i { padding: 0.3rem 0.46rem; border: 1px solid rgba(157, 143, 255, 0.2); border-radius: 999px; color: #c9c2ef; background: rgba(121, 94, 218, 0.08); font-size: 0.75rem; font-style: normal; font-weight: 730; }
.theme-card-copy > em { grid-column: 1 / -1; align-self: end; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.09); color: #ddd7ff; font-size: 0.75rem; font-style: normal; font-weight: 720; }

.theme-mini {
  --mini-bg: #eef0f3;
  --mini-surface: #fff;
  --mini-ink: #1c1e24;
  --mini-accent: #7260e8;
  display: grid;
  grid-template-rows: 0.95rem 1.35rem minmax(6.3rem, 1fr) 3.5rem;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  color: var(--mini-ink);
  background: var(--mini-bg);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.theme-mini-editorial { --mini-bg: #f2ede4; --mini-surface: #faf7f0; --mini-ink: #171512; --mini-accent: #9d8265; }
.theme-mini-spatial { --mini-bg: #0b1020; --mini-surface: #161c31; --mini-ink: #f6f7ff; --mini-accent: #7e72ff; }
.theme-mini-system { --mini-bg: #f1f3f6; --mini-surface: #fff; --mini-ink: #131820; --mini-accent: #2264dc; }
.theme-mini-atelier { --mini-bg: #e9edef; --mini-surface: #f9faf9; --mini-ink: #202427; --mini-accent: #667b70; }
.theme-mini-signal { --mini-bg: #0e1118; --mini-surface: #191f2b; --mini-ink: #f7f8fb; --mini-accent: #5aa8ff; }

.theme-mini-browser {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.48rem;
  color: color-mix(in srgb, var(--mini-ink) 42%, transparent);
  background: color-mix(in srgb, var(--mini-surface) 78%, var(--mini-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--mini-ink) 8%, transparent);
}
.theme-mini-browser > i { width: 0.2rem; height: 0.2rem; border-radius: 50%; background: currentColor; }
.theme-mini-browser > b { width: 33%; height: 0.16rem; margin-left: auto; border-radius: 99px; background: currentColor; opacity: 0.45; }

.theme-mini-header {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0 0.5rem;
  background: color-mix(in srgb, var(--mini-surface) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--mini-ink) 12%, transparent);
}
.theme-mini-header > i { width: 1.25rem; height: 0.25rem; margin-right: auto; border-radius: 99px; background: var(--mini-ink); }
.theme-mini-header > b { width: 0.62rem; height: 0.16rem; border-radius: 99px; background: var(--mini-ink); opacity: 0.48; }
.theme-mini[data-mini-header="centered-logo"] .theme-mini-header > i { margin: 0 auto; transform: translateX(0.7rem); }
.theme-mini[data-mini-header="centered-logo"] .theme-mini-header > b:first-of-type { margin-left: auto; }
.theme-mini[data-mini-header="minimal"] .theme-mini-header > b:nth-of-type(-n + 2) { display: none; }
.theme-mini[data-mini-header="compact-floating"] { padding: 0.35rem 0.35rem 0; }
.theme-mini[data-mini-header="compact-floating"] .theme-mini-header { border: 1px solid color-mix(in srgb, var(--mini-ink) 13%, transparent); border-radius: 0.42rem; }
.theme-mini[data-mini-header-shape="square"] .theme-mini-header { border-radius: 0; }
.theme-mini[data-mini-header-shape="semi"] .theme-mini-header { border-radius: 0.24rem; }
.theme-mini[data-mini-header-shape="rounded"] .theme-mini-header { border-radius: 0.45rem; }
.theme-mini[data-mini-header-shape="pill"] .theme-mini-header { border-radius: 999px; margin-inline: 0.28rem; }
.theme-mini[data-mini-header="search-first"] .theme-mini-header > i { width: 0.8rem; }
.theme-mini[data-mini-header="search-first"] .theme-mini-header::after { content: ''; width: 2.4rem; height: 0.42rem; margin-left: 0.15rem; border-radius: 99px; background: color-mix(in srgb, var(--mini-ink) 9%, transparent); }

.theme-mini-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 0.4rem;
  align-items: center;
  padding: 0.6rem;
  overflow: hidden;
}
.theme-mini-copy { z-index: 1; display: grid; gap: 0.25rem; min-width: 0; }
.theme-mini-copy > i { width: 1.1rem; height: 0.14rem; background: var(--mini-accent); }
.theme-mini-copy > b { height: 0.29rem; border-radius: 99px; background: var(--mini-ink); }
.theme-mini-copy > b:nth-of-type(2) { width: 68%; }
.theme-mini-copy > em { width: 1.35rem; height: 0.45rem; margin-top: 0.1rem; border-radius: 0.14rem; background: var(--mini-accent); }
.theme-mini-media { align-self: stretch; min-height: 2.7rem; border-radius: 0.35rem; background: linear-gradient(145deg, color-mix(in srgb, var(--mini-accent) 46%, var(--mini-surface)), var(--mini-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mini-ink) 8%, transparent); }
.theme-mini[data-mini-hero="split-image-left"] .theme-mini-copy { grid-column: 2; }
.theme-mini[data-mini-hero="split-image-left"] .theme-mini-media { grid-row: 1; grid-column: 1; }
.theme-mini[data-mini-hero="centered-editorial"] .theme-mini-hero { grid-template-columns: 1fr; text-align: center; }
.theme-mini[data-mini-hero="centered-editorial"] .theme-mini-copy { width: 70%; margin: 0 auto; justify-items: center; }
.theme-mini[data-mini-hero="centered-editorial"] .theme-mini-copy > b:nth-of-type(2) { width: 78%; }
.theme-mini[data-mini-hero="centered-editorial"] .theme-mini-media { display: none; }
.theme-mini[data-mini-hero="full-bleed-photo"] .theme-mini-media { position: absolute; inset: 0.3rem; border-radius: 0.35rem; }
.theme-mini[data-mini-hero="full-bleed-photo"] .theme-mini-copy { align-self: end; width: 68%; padding: 0.35rem; color: #fff; }
.theme-mini[data-mini-hero="full-bleed-photo"] .theme-mini-copy > b { background: #fff; }
.theme-mini[data-mini-hero="featured-product"] .theme-mini-hero { grid-template-columns: 0.72fr 1.28fr; }
.theme-mini[data-mini-hero="featured-product"] .theme-mini-media { border-radius: 50% 0.35rem 0.35rem 50%; }

.theme-mini-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; padding: 0.35rem 0.5rem 0.5rem; background: var(--mini-surface); }
.theme-mini-module { display: grid; min-width: 0; min-height: 1.9rem; padding: 0.25rem; border: 1px solid color-mix(in srgb, var(--mini-ink) 10%, transparent); border-radius: 0.25rem; }
.theme-mini-module.is-grid { grid-template-columns: repeat(3, 1fr); gap: 0.15rem; }
.theme-mini-module.is-grid i { border-radius: 0.14rem; background: color-mix(in srgb, var(--mini-accent) 24%, var(--mini-bg)); }
.theme-mini-module.is-brands { grid-template-columns: repeat(4, 1fr); align-items: center; gap: 0.1rem; }
.theme-mini-module.is-brands i { height: 0.2rem; border-radius: 99px; background: var(--mini-ink); opacity: 0.38; }
.theme-mini-module.is-form { grid-template-columns: 1fr 0.5fr; align-items: center; gap: 0.18rem; }
.theme-mini-module.is-form i { height: 0.35rem; border: 1px solid color-mix(in srgb, var(--mini-ink) 22%, transparent); border-radius: 0.12rem; }
.theme-mini-module.is-form b { height: 0.35rem; border-radius: 0.12rem; background: var(--mini-accent); }
.theme-mini-module.is-quotes { grid-template-columns: repeat(2, 1fr); gap: 0.15rem; }
.theme-mini-module.is-quotes i { border-radius: 0.14rem; background: color-mix(in srgb, var(--mini-ink) 7%, transparent); }
.theme-mini-module.is-copy { align-content: center; gap: 0.14rem; }
.theme-mini-module.is-copy i { width: 42%; height: 0.14rem; background: var(--mini-accent); }
.theme-mini-module.is-copy b { height: 0.16rem; border-radius: 99px; background: var(--mini-ink); opacity: 0.32; }

/* Full responsive demo */
.live-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.6rem 0 0.9rem;
}
.live-controls b { display: block; margin-top: 0.25rem; font-size: 1rem; }
.live-controls small { display: block; margin-top: 0.25rem; color: var(--model-muted); font-size: 0.75rem; }
.live-control-actions { display: flex; align-items: center; gap: .6rem; }
.device-toggle { display: flex; padding: 0.24rem; border: 1px solid var(--model-line); border-radius: 0.8rem; background: rgba(13, 17, 26, 0.85); }
.device-toggle button { min-height: 2.75rem; padding: 0.42rem 0.78rem; border: 0; border-radius: 0.58rem; color: var(--model-muted); background: transparent; font-size: 0.77rem; }
.device-toggle button.is-active { color: #fff; background: rgba(126, 97, 239, 0.43); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13); }
.model-open-preview,
.model-preview-dialog-close {
  min-height: 2.75rem;
  padding: .52rem .8rem;
  border: 1px solid rgba(171, 155, 255, .34);
  border-radius: .72rem;
  color: #f7f5ff;
  background: rgba(118, 88, 226, .17);
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
  transition: transform 180ms cubic-bezier(.2,.75,.2,1), background-color 180ms cubic-bezier(.2,.75,.2,1), border-color 180ms cubic-bezier(.2,.75,.2,1);
}
.model-open-preview:hover,
.model-preview-dialog-close:hover { transform: translateY(-1px); border-color: rgba(187, 174, 255, .6); background: rgba(118, 88, 226, .28); }

.model-preview-dialog {
  width: min(96vw, 1540px);
  max-width: none;
  height: min(94vh, 1080px);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(188, 180, 255, .24);
  border-radius: 1rem;
  color: var(--model-text);
  background: #0e131d;
  box-shadow: 0 40px 120px rgba(0,0,0,.58);
}
.model-preview-dialog::backdrop { background: rgba(5, 7, 12, .82); backdrop-filter: blur(8px); }
.model-preview-dialog-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.model-preview-dialog-shell > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.model-preview-dialog-shell > header span { color: #b9a9ff; font-size: .66rem; font-weight: 850; letter-spacing: .13em; }
.model-preview-dialog-shell > header h2 { margin: .2rem 0 0; font-size: 1rem; letter-spacing: -.025em; }
.model-preview-dialog-actions { display: flex; align-items: center; gap: .6rem; }
.model-preview-dialog-stage { overflow: auto; padding: clamp(.75rem, 2vw, 1.5rem); }
.model-preview-dialog-stage .live-canvas { margin-inline: auto; }

.live-canvas {
  --demo-bg: #f2f3f4;
  --demo-surface: #fff;
  --demo-surface-2: #e5e8eb;
  --demo-ink: #17191e;
  --demo-muted: #646970;
  --demo-accent: #6258c8;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(181, 194, 255, 0.3);
  border-radius: calc(var(--live-radius) + 5px);
  color: var(--demo-ink);
  background: var(--demo-bg);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: live-enter 360ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
  transition: max-width 280ms ease, border-radius 280ms ease;
}
.live-theme-landing-aurora { --demo-bg: #090d19; --demo-surface: #12182a; --demo-surface-2: #1b2540; --demo-ink: #f8f8ff; --demo-muted: #aeb7cd; --demo-accent: #8174ff; }
.live-theme-landing-impacto { --demo-bg: #f3f5f7; --demo-surface: #fff; --demo-surface-2: #dfe6f2; --demo-ink: #10151c; --demo-muted: #5c6673; --demo-accent: #125fe3; }
.live-theme-landing-editorial { --demo-bg: #f2eee6; --demo-surface: #faf7f0; --demo-surface-2: #ded6c9; --demo-ink: #181512; --demo-muted: #6d655c; --demo-accent: #8d6e4d; }
.live-theme-landing-studio { --demo-bg: #e8edee; --demo-surface: #f8faf9; --demo-surface-2: #cbd6d2; --demo-ink: #1b2222; --demo-muted: #5f6b69; --demo-accent: #345f59; }
.live-theme-landing-minimal { --demo-bg: #f8f8f6; --demo-surface: #fff; --demo-surface-2: #ecece8; --demo-ink: #141516; --demo-muted: #707174; --demo-accent: #24262b; }
.live-family-spatial { box-shadow: 0 38px 100px rgba(0, 0, 0, 0.46), 0 0 70px rgba(94, 75, 235, 0.12); }
.live-card-editorial { border-radius: 3px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26); }

@keyframes live-enter { from { opacity: 0.45; transform: translateY(8px) scale(0.995); } to { opacity: 1; transform: none; } }

.live-site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.8rem;
  padding: 0 clamp(1rem, 3vw, 3.2rem);
  border-style: solid;
  border-color: color-mix(in srgb, var(--demo-ink) 12%, transparent);
  background: color-mix(in srgb, var(--demo-surface) 91%, transparent);
}
.live-logo { white-space: nowrap; font-size: 0.92rem; font-weight: 850; letter-spacing: -0.04em; }
.live-nav { display: flex; gap: 0.65rem; margin-left: auto; }
.live-nav span { color: var(--demo-muted); font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
.live-header-action { padding: 0.48rem 0.72rem; border-radius: calc(var(--live-radius) * 0.42); color: var(--demo-surface); background: var(--demo-ink); font-size: 0.65rem; font-weight: 760; }
.live-menu { display: none; margin-left: auto; font-size: 0.67rem; font-weight: 760; text-transform: uppercase; }
.live-search { width: min(28%, 15rem); margin-left: 1rem; padding: 0.48rem 0.75rem; border: 1px solid color-mix(in srgb, var(--demo-ink) 16%, transparent); border-radius: 99px; color: var(--demo-muted); font-size: 0.62rem; }
.live-header-centered-logo { display: grid; grid-template-columns: 1fr auto 1fr; }
.live-header-centered-logo .live-logo { grid-column: 2; }
.live-header-centered-logo .live-nav { grid-row: 1; grid-column: 1; margin: 0; }
.live-header-centered-logo .live-header-action { justify-self: end; }
.live-header-minimal .live-nav span:nth-child(-n + 2) { display: none; }
.live-header-minimal .live-header-action { color: var(--demo-ink); background: transparent; border-bottom: 1px solid currentColor; border-radius: 0; }
.live-header-compact-floating { width: calc(100% - clamp(1rem, 4vw, 4rem)); margin: 0.75rem auto 0; border: 1px solid color-mix(in srgb, var(--demo-ink) 13%, transparent); border-radius: min(var(--live-radius), 16px); box-shadow: 0 14px 30px color-mix(in srgb, var(--demo-ink) 9%, transparent); }
.live-header-search-first .live-search { flex: 1; width: auto; }
.live-header-scroll-flow { position: relative; top: auto; }
.live-header-scroll-sticky { position: sticky; top: 0; z-index: 5; }
.live-header-width-full { width: 100%; margin-inline: 0; }
.live-header-width-contained { width: calc(100% - clamp(1rem, 4vw, 4rem)); margin: 0.75rem auto 0; }
.live-header-shape-square { border-radius: 0; }
.live-header-shape-semi { border-radius: 0.7rem; }
.live-header-shape-rounded { border-radius: 1.15rem; }
.live-header-shape-pill { border-radius: 999px; }
.live-header-border-none { border-width: 0; }
.live-header-border-thin { border-width: 1px; }
.live-header-border-strong { border-width: 2px; }
.live-header-shadow-none { box-shadow: none; }
.live-header-shadow-soft { box-shadow: 0 12px 28px color-mix(in srgb, var(--demo-ink) 8%, transparent); }
.live-header-shadow-elevated { box-shadow: 0 18px 42px color-mix(in srgb, var(--demo-ink) 13%, transparent); }
.live-header-shadow-dramatic { box-shadow: 0 24px 56px color-mix(in srgb, var(--demo-ink) 20%, transparent); }

.live-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(15rem, 0.92fr);
  gap: clamp(1.4rem, 5vw, 5.5rem);
  align-items: center;
  min-height: 31rem;
  padding: clamp(2.2rem, 6vw, 6rem);
  overflow: hidden;
  background: var(--demo-bg);
}
.live-hero-copy { position: relative; z-index: 2; min-width: 0; }
.live-eyebrow,
.live-section-title > span,
.live-text > div > span,
.live-form > div > span,
.live-newsletter span {
  color: var(--demo-accent);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}
.live-hero h3 {
  max-width: 13ch;
  margin: 0.65rem 0 0.9rem;
  font-size: clamp(2.25rem, 5.5vw, 5.8rem);
  font-weight: 540;
  line-height: 0.98;
  letter-spacing: -0.068em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.live-hero p { max-width: 40rem; margin: 0 0 1.2rem; color: var(--demo-muted); font-size: clamp(0.78rem, 1.4vw, 1rem); line-height: 1.6; }
.live-actions { display: flex; align-items: center; gap: 0.9rem; }
.live-actions button { padding: 0.78rem 1rem; border: 0; border-radius: calc(var(--live-radius) * 0.42); color: var(--demo-surface); background: var(--demo-ink); font-size: 0.72rem; font-weight: 780; }
.live-actions > span { color: var(--demo-muted); font-size: 0.69rem; border-bottom: 1px solid currentColor; }
.live-proof { position: absolute; right: clamp(1rem, 3vw, 3rem); bottom: 1rem; z-index: 2; color: var(--demo-muted); font-size: 0.56rem; letter-spacing: 0.09em; }

.live-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 8rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--demo-ink) 13%, transparent);
  border-radius: calc(var(--live-radius) * 0.68);
  color: color-mix(in srgb, var(--demo-ink) 63%, transparent);
  background:
    radial-gradient(circle at 72% 26%, color-mix(in srgb, var(--demo-accent) 30%, transparent), transparent 25%),
    linear-gradient(145deg, color-mix(in srgb, var(--demo-surface-2) 86%, var(--demo-surface)), var(--demo-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), 0 16px 40px color-mix(in srgb, var(--demo-ink) 8%, transparent);
}
.live-media::before { content: ''; position: absolute; width: 55%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--demo-accent) 40%, transparent); border-radius: 50%; transform: translate(28%, 12%); }
.live-media > span { position: relative; z-index: 1; display: grid; gap: 0.13rem; max-width: calc(100% - 1rem); padding: 0.48rem 0.62rem; border-radius: 0.55rem; background: color-mix(in srgb, var(--demo-surface) 82%, transparent); font-size: 0.62rem; backdrop-filter: blur(12px); }
.live-media > span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-media > span small { color: var(--demo-muted); font-size: 0.48rem; font-weight: 650; }
.live-media.has-demo-media {
  place-items: end start;
  padding: 0.5rem;
  color: #fff;
  background-image:
    linear-gradient(180deg, rgba(4, 7, 12, 0.01) 45%, rgba(4, 7, 12, 0.64)),
    var(--live-media-image);
  background-position: center, var(--live-media-position, 50% 50%);
  background-repeat: no-repeat;
  background-size: cover, cover;
}
.live-media.has-demo-media::before { display: none; }
.live-media.has-demo-media > span { color: #fff; background: rgba(7, 10, 16, 0.68); }
.live-media.has-demo-media > span small { color: rgba(255, 255, 255, 0.72); }
.live-hero-media { align-self: stretch; min-height: 20rem; }

.live-hero-split-image-left .live-hero-copy { grid-column: 2; }
.live-hero-split-image-left .live-hero-media { grid-row: 1; grid-column: 1; }
.live-hero-centered-editorial { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 27rem; }
.live-hero-centered-editorial .live-hero-copy { width: min(100%, 55rem); }
.live-hero-centered-editorial h3 { max-width: 13ch; margin-right: auto; margin-left: auto; }
.live-hero-centered-editorial p { margin-right: auto; margin-left: auto; }
.live-hero-centered-editorial .live-actions { justify-content: center; }
.live-hero-centered-editorial .live-hero-media { width: min(100%, 64rem); min-height: 8rem; }
.live-hero-full-bleed-photo { grid-template-columns: 1fr; min-height: 40rem; align-items: end; color: #fff; }
.live-hero-full-bleed-photo .live-hero-media { position: absolute; inset: clamp(0.7rem, 2vw, 1.6rem); min-height: 0; border-radius: max(calc(var(--live-radius) * 0.8), 10px); background: radial-gradient(circle at 72% 24%, rgba(129, 116, 255, 0.75), transparent 24%), linear-gradient(130deg, #11182c, #222b47 48%, #0d1221); }
.live-hero-full-bleed-photo .live-hero-media.has-demo-media { background-image: linear-gradient(90deg, rgba(5, 8, 16, 0.14), rgba(5, 8, 16, 0.02)), var(--live-media-image); background-position: center, var(--live-media-position, 50% 50%); background-size: cover, cover; }
.live-hero-full-bleed-photo .live-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 16, 0.93), rgba(5, 8, 16, 0.28) 68%, rgba(5, 8, 16, 0.04)); }
.live-hero-full-bleed-photo .live-hero-media span { display: none; }
.live-hero-full-bleed-photo .live-hero-copy { width: min(62%, 49rem); padding-bottom: 1.5rem; }
.live-hero-full-bleed-photo p,
.live-hero-full-bleed-photo .live-actions > span { color: rgba(255, 255, 255, 0.72); }
.live-hero-full-bleed-photo .live-actions button { color: #151526; background: #fff; }
.live-hero-featured-product { grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr); }
.live-hero-featured-product .live-hero-copy { grid-column: 2; }
.live-hero-featured-product .live-hero-media { grid-row: 1; grid-column: 1; border-radius: 50% 20% 20% 50%; }

.live-block { padding: clamp(2.2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem); background: var(--demo-surface); border-top: 1px solid color-mix(in srgb, var(--demo-ink) 10%, transparent); }
.live-density-compact .live-block { padding-top: clamp(1.6rem, 3vw, 3rem); padding-bottom: clamp(1.6rem, 3vw, 3rem); }
.live-density-spacious .live-block { padding-top: clamp(3rem, 7vw, 7rem); padding-bottom: clamp(3rem, 7vw, 7rem); }
.live-section-title { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; align-items: end; margin-bottom: 1.4rem; }
.live-section-title > span { grid-column: 1 / -1; }
.live-section-title > b { font-size: clamp(1.5rem, 3vw, 3.1rem); font-weight: 560; line-height: 1.06; letter-spacing: -0.052em; }
.live-section-title > em { color: var(--demo-muted); font-size: 0.65rem; font-style: normal; border-bottom: 1px solid currentColor; }

.live-brands { display: flex; align-items: center; gap: 2rem; padding: 1.25rem clamp(1rem, 4vw, 4rem); border-top: 1px solid color-mix(in srgb, var(--demo-ink) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--demo-ink) 10%, transparent); background: var(--demo-surface); }
.live-brands > span { white-space: nowrap; color: var(--demo-muted); font-size: 0.62rem; }
.live-brands > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.6rem, 3vw, 3rem); width: 100%; }
.live-brands b { color: color-mix(in srgb, var(--demo-ink) 72%, transparent); font-size: 0.62rem; font-weight: 800; text-align: center; white-space: nowrap; }

.live-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--live-gap); }
.live-benefit-grid article { display: grid; gap: 0.65rem; min-height: 10rem; padding: 1.1rem; border: 1px solid color-mix(in srgb, var(--demo-ink) 11%, transparent); border-radius: calc(var(--live-radius) * 0.7); background: color-mix(in srgb, var(--demo-bg) 58%, var(--demo-surface)); }
.live-benefit-grid article > i { color: var(--demo-accent); font-size: 0.65rem; font-style: normal; }
.live-benefit-grid article > b { align-self: end; font-size: 0.9rem; }
.live-benefit-grid article > small { color: var(--demo-muted); font-size: 0.68rem; line-height: 1.45; }
.live-benefits-icons .live-benefit-grid article { border: 0; border-top: 1px solid color-mix(in srgb, var(--demo-ink) 18%, transparent); border-radius: 0; background: transparent; }

.live-text { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 7vw, 8rem); align-items: start; }
.live-text h4,
.live-form h4 { max-width: 13ch; margin: 0.55rem 0 0; font-size: clamp(1.8rem, 4vw, 4.2rem); font-weight: 520; line-height: 1.02; letter-spacing: -0.06em; }
.live-text p,
.live-form p { max-width: 38rem; margin: 0; color: var(--demo-muted); font-size: clamp(0.78rem, 1.3vw, 0.96rem); line-height: 1.65; }
.live-text-link { display: inline-block; margin-top: 1.3rem; color: var(--demo-ink); font-size: 0.68rem; border-bottom: 1px solid currentColor; }
.live-text-standard { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); }

.live-gallery-grid { display: grid; grid-template-columns: 1.35fr 0.65fr 0.65fr; grid-template-rows: repeat(2, minmax(8rem, 1fr)); gap: var(--live-gap); }
.live-gallery-grid .live-media { min-height: 10rem; }
.live-gallery-grid .is-featured { grid-row: 1 / 3; min-height: 22rem; }
.live-gallery-variant-carousel .live-gallery-grid { grid-template-columns: 1.35fr 0.8fr 0.8fr 0.2fr; grid-template-rows: 1fr; overflow: hidden; }
.live-gallery-variant-carousel .live-gallery-grid .is-featured { grid-row: auto; min-height: 18rem; }

.live-products { display: grid; grid-template-columns: repeat(var(--live-columns), minmax(0, 1fr)); gap: var(--live-gap); }
.live-product { min-width: 0; }
.live-product .live-media { aspect-ratio: 3 / 4; min-height: 0; margin-bottom: 0.75rem; }
.live-product-meta { display: block; color: var(--demo-accent); font-size: 0.55rem; letter-spacing: 0.09em; text-transform: uppercase; }
.live-product > b,
.live-product > small { display: block; }
.live-product > b { margin-top: 0.25rem; font-size: 0.78rem; }
.live-product > small { margin-top: 0.22rem; color: var(--demo-muted); font-size: 0.62rem; line-height: 1.4; }
.live-catalog-horizontal-collection .live-products { grid-auto-flow: column; grid-auto-columns: minmax(12rem, 27%); grid-template-columns: none; overflow: hidden; }
.live-catalog-horizontal-collection .live-product .live-media { aspect-ratio: 16 / 10; }
.live-catalog-high-volume-compact .live-products { gap: max(0.45rem, calc(var(--live-gap) * 0.55)); }
.live-catalog-high-volume-compact .live-product .live-media { aspect-ratio: 4 / 5; border-radius: min(var(--live-radius), 8px); }
.live-catalog-editorial-mixed .live-product:first-child { grid-column: span 2; }
.live-catalog-editorial-mixed .live-product:first-child .live-media { aspect-ratio: 16 / 9; }

.live-quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--live-gap); }
.live-quote-grid blockquote { display: grid; gap: 1rem; min-height: 10rem; margin: 0; padding: 1.1rem; border: 1px solid color-mix(in srgb, var(--demo-ink) 11%, transparent); border-radius: calc(var(--live-radius) * 0.7); background: color-mix(in srgb, var(--demo-bg) 48%, var(--demo-surface)); }
.live-quote-grid p { margin: 0; font-size: 0.76rem; line-height: 1.55; }
.live-quote-grid footer { align-self: end; color: var(--demo-muted); font-size: 0.62rem; }
.live-testimonials-carousel .live-quote-grid { grid-auto-flow: column; grid-auto-columns: 53%; grid-template-columns: none; overflow: hidden; }

.live-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr); gap: clamp(2rem, 8vw, 8rem); align-items: center; background: var(--demo-ink); color: var(--demo-surface); }
.live-form p { color: color-mix(in srgb, var(--demo-surface) 70%, transparent); }
.live-form-fields { display: grid; gap: 0.55rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--demo-surface) 18%, transparent); border-radius: calc(var(--live-radius) * 0.75); background: color-mix(in srgb, var(--demo-surface) 6%, transparent); }
.live-form-fields > i { height: 2.15rem; border: 1px solid color-mix(in srgb, var(--demo-surface) 19%, transparent); border-radius: calc(var(--live-radius) * 0.35); }
.live-form-fields > b { display: grid; place-items: center; min-height: 2.35rem; border-radius: calc(var(--live-radius) * 0.35); color: var(--demo-ink); background: var(--demo-surface); font-size: 0.67rem; }

.live-newsletter { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 1.5rem clamp(1rem, 4vw, 4rem); border-top: 1px solid color-mix(in srgb, var(--demo-ink) 10%, transparent); background: var(--demo-surface); }
.live-newsletter > div:first-child b { display: block; margin-top: 0.22rem; font-size: 0.87rem; }
.live-newsletter > div:last-child { display: grid; grid-template-columns: minmax(8rem, 1fr) auto; min-width: 18rem; border-bottom: 1px solid color-mix(in srgb, var(--demo-ink) 32%, transparent); }
.live-newsletter i { padding: 0.55rem 0; color: var(--demo-muted); font-size: 0.65rem; font-style: normal; }
.live-newsletter > div:last-child b { padding: 0.55rem 0; font-size: 0.65rem; }

.live-footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem clamp(1rem, 4vw, 4rem); color: #edf0f7; background: #141821; }
.live-footer > div { display: flex; gap: 1.2rem; align-items: center; }
.live-footer b { font-size: 0.88rem; }
.live-footer span { color: #aeb4c2; font-size: 0.62rem; }

.live-canvas.is-mobile { max-width: 24rem; margin-right: auto; margin-left: auto; border-radius: max(calc(var(--live-radius) * 0.72), 9px); }
.live-canvas.is-mobile .live-site-header { min-height: 3.3rem; padding: 0 0.85rem; }
.live-canvas.is-mobile .live-nav,
.live-canvas.is-mobile .live-header-action,
.live-canvas.is-mobile .live-search { display: none; }
.live-canvas.is-mobile .live-menu { display: block; }
.live-canvas.is-mobile .live-header-centered-logo { display: flex; }
.live-canvas.is-mobile .live-header-centered-logo .live-logo { order: 0; margin-right: auto; }
.live-canvas.is-mobile .live-hero { grid-template-columns: 1fr; gap: 1rem; min-height: 0; padding: 2rem 1rem 2.6rem; }
.live-canvas.is-mobile .live-hero h3 { font-size: 2.45rem; }
.live-canvas.is-mobile .live-hero-media { grid-row: auto; grid-column: auto; min-height: 11rem; }
.live-canvas.is-mobile .live-hero-split-image-left .live-hero-copy,
.live-canvas.is-mobile .live-hero-featured-product .live-hero-copy { grid-column: auto; }
.live-canvas.is-mobile .live-hero-split-image-left .live-hero-media,
.live-canvas.is-mobile .live-hero-featured-product .live-hero-media { grid-row: 1; }
.live-canvas.is-mobile .live-hero-full-bleed-photo { min-height: 31rem; }
.live-canvas.is-mobile .live-hero-full-bleed-photo .live-hero-copy { width: 100%; align-self: end; }
.live-canvas.is-mobile .live-hero-centered-editorial .live-hero-media { width: 100%; min-height: 7rem; }
.live-canvas.is-mobile .live-proof { right: 1rem; bottom: 0.75rem; }
.live-canvas.is-mobile .live-brands { align-items: start; flex-direction: column; gap: 0.8rem; padding: 1rem; }
.live-canvas.is-mobile .live-block { padding: 2.2rem 1rem; }
.live-canvas.is-mobile .live-section-title { display: grid; }
.live-canvas.is-mobile .live-section-title > b { font-size: 1.7rem; }
.live-canvas.is-mobile .live-benefit-grid,
.live-canvas.is-mobile .live-quote-grid { grid-template-columns: 1fr; }
.live-canvas.is-mobile .live-benefit-grid article,
.live-canvas.is-mobile .live-quote-grid blockquote { min-height: 7.5rem; }
.live-canvas.is-mobile .live-text,
.live-canvas.is-mobile .live-text-standard,
.live-canvas.is-mobile .live-form { grid-template-columns: 1fr; gap: 1.4rem; }
.live-canvas.is-mobile .live-text h4,
.live-canvas.is-mobile .live-form h4 { font-size: 2.2rem; }
.live-canvas.is-mobile .live-gallery-grid,
.live-canvas.is-mobile .live-gallery-variant-carousel .live-gallery-grid { grid-template-columns: 1.25fr 0.75fr; grid-template-rows: repeat(2, 8rem); gap: 0.45rem; overflow: hidden; }
.live-canvas.is-mobile .live-gallery-grid .is-featured,
.live-canvas.is-mobile .live-gallery-variant-carousel .live-gallery-grid .is-featured { grid-row: 1 / 3; min-height: 0; }
.live-canvas.is-mobile .live-gallery-grid .live-media:nth-child(n + 4) { display: none; }
.live-canvas.is-mobile .live-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.live-canvas.is-mobile .live-catalog-horizontal-collection .live-products { grid-auto-columns: 68%; grid-template-columns: none; }
.live-canvas.is-mobile .live-catalog-editorial-mixed .live-product:first-child { grid-column: 1 / -1; }
.live-canvas.is-mobile .live-testimonials-carousel .live-quote-grid { grid-auto-columns: 86%; grid-template-columns: none; }
.live-canvas.is-mobile .live-newsletter { grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem 1rem; }
.live-canvas.is-mobile .live-newsletter > div:last-child { min-width: 0; }
.live-canvas.is-mobile .live-footer { align-items: start; flex-direction: column; padding: 1.5rem 1rem; }

/* v13.27 — every declared theme variable is visible in the real showroom. */
.live-block { padding-block: clamp(2rem, var(--live-padding, 62px), 6rem); }
.live-block > :is(.live-section-title,.live-benefit-grid,.live-text,.live-gallery-grid,.live-products,.live-category-grid,.live-quote-grid,.live-form,.live-collection-tools) {
  width: min(100%, var(--live-container, 1320px));
  margin-inline: auto;
}
.live-shadow-none :is(.live-product,.live-category,.live-benefit-grid article,.live-quote-grid blockquote) { box-shadow: none; }
.live-shadow-soft :is(.live-product,.live-category,.live-benefit-grid article,.live-quote-grid blockquote) { box-shadow: 0 10px 26px color-mix(in srgb, var(--demo-ink) 7%, transparent); }
.live-shadow-elevated :is(.live-product,.live-category,.live-benefit-grid article,.live-quote-grid blockquote) { box-shadow: 0 18px 42px color-mix(in srgb, var(--demo-ink) 12%, transparent); }
.live-shadow-dramatic :is(.live-product,.live-category,.live-benefit-grid article,.live-quote-grid blockquote) { box-shadow: 0 28px 64px color-mix(in srgb, var(--demo-ink) 18%, transparent); }
.live-card-outline :is(.live-product,.live-category) { padding: .7rem; border: 1px solid color-mix(in srgb, var(--demo-ink) 14%, transparent); border-radius: var(--live-radius); }
.live-card-soft :is(.live-product,.live-category),
.live-card-elevated :is(.live-product,.live-category) { padding: .7rem; border-radius: var(--live-radius); background: color-mix(in srgb, var(--demo-bg) 56%, var(--demo-surface)); }
.live-card-editorial .live-product { padding-bottom: .8rem; border-bottom: 1px solid color-mix(in srgb, var(--demo-ink) 18%, transparent); }
.live-ratio-square .live-product .live-media { aspect-ratio: 1; }
.live-ratio-landscape .live-product .live-media { aspect-ratio: 4 / 3; }
.live-ratio-portrait .live-product .live-media { aspect-ratio: 3 / 4; }
.live-motion-calm :is(.live-product,.live-category,.live-benefit-grid article,.live-actions button) { transition: transform 420ms ease, box-shadow 420ms ease; }
.live-motion-fluid :is(.live-product,.live-category,.live-benefit-grid article,.live-actions button) { transition: transform 300ms cubic-bezier(.2,.75,.2,1), box-shadow 300ms ease; }
.live-motion-dynamic :is(.live-product,.live-category,.live-benefit-grid article,.live-actions button) { transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms ease; }
.live-motion-calm :is(.live-product,.live-category,.live-benefit-grid article):hover { transform: translateY(-1px); }
.live-motion-fluid :is(.live-product,.live-category,.live-benefit-grid article):hover { transform: translateY(-3px); }
.live-motion-dynamic :is(.live-product,.live-category,.live-benefit-grid article):hover { transform: translateY(-6px) scale(1.01); }

.live-category-grid { display: grid; grid-template-columns: repeat(var(--live-columns), minmax(0, 1fr)); gap: var(--live-gap); }
.live-category { position: relative; display: grid; align-content: end; gap: .3rem; min-height: 11rem; padding: 1rem; overflow: hidden; border-radius: var(--live-radius); color: var(--demo-ink); background: linear-gradient(145deg, color-mix(in srgb, var(--demo-accent) 18%, var(--demo-surface)), var(--demo-surface-2)); }
.live-category::before { content: ''; position: absolute; inset: auto -24% 42% 38%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--demo-accent) 38%, transparent); border-radius: 50%; }
.live-category > * { position: relative; }
.live-category > span { color: var(--demo-accent); font-size: .6rem; }
.live-category > b { font-size: .84rem; }
.live-category > small { color: var(--demo-muted); font-size: .6rem; }
.live-categories-compact-grid .live-category { min-height: 7rem; }
.live-categories-editorial-mosaic .live-category-grid { grid-auto-rows: 8rem; }
.live-categories-editorial-mosaic .live-category { min-height: 0; }
.live-categories-editorial-mosaic .live-category:first-child { grid-column: span 2; grid-row: span 2; }
.live-categories-horizontal-chips .live-category-grid { grid-auto-flow: column; grid-auto-columns: minmax(10rem, 24%); grid-template-columns: none; overflow: hidden; }
.live-categories-horizontal-chips .live-category { min-height: 6.5rem; border-radius: 999px; align-content: center; }
.live-categories-technical-list .live-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.live-categories-technical-list .live-category { grid-template-columns: 3rem 1fr; min-height: 5rem; align-content: center; }
.live-categories-technical-list .live-category > small { grid-column: 2; }

.live-collection-tools { display: flex; gap: .45rem; margin-bottom: 1rem; overflow: hidden; }
.live-collection-tools span { flex: 0 0 auto; padding: .48rem .7rem; border: 1px solid color-mix(in srgb, var(--demo-ink) 14%, transparent); border-radius: 999px; color: var(--demo-muted); font-size: .62rem; }
.live-collection-filter-sidebar { display: grid; grid-template-columns: minmax(8rem, .22fr) minmax(0, 1fr); column-gap: 1.2rem; }
.live-collection-filter-sidebar .live-section-title { grid-column: 1 / -1; width: 100%; }
.live-collection-filter-sidebar .live-collection-tools { grid-column: 1; display: grid; align-content: start; width: 100%; margin: 0; }
.live-collection-filter-sidebar .live-products { grid-column: 2; width: 100%; }
.live-collection-quick-filter-chips .live-collection-tools span:first-child { color: var(--demo-surface); border-color: var(--demo-accent); background: var(--demo-accent); }
.live-collection-filter-drawer .live-collection-tools::before { content: 'Filtros'; padding: .48rem .8rem; border-radius: .5rem; color: var(--demo-surface); background: var(--demo-ink); font-size: .62rem; font-weight: 780; }
.live-catalog-carousel .live-products,
.live-collection-no-filter .live-products { grid-auto-flow: column; grid-auto-columns: minmax(12rem, 30%); grid-template-columns: none; overflow: hidden; }

.live-canvas.is-tablet { max-width: 48rem; margin-inline: auto; }
.live-canvas.is-tablet .live-hero { grid-template-columns: 1fr 1fr; gap: 1.5rem; min-height: 25rem; padding: clamp(2rem, var(--live-padding), 4rem) 2rem; }
.live-canvas.is-tablet .live-block { padding-inline: 2rem; }
.live-canvas.is-tablet .live-products,
.live-canvas.is-tablet .live-category-grid { --live-columns: min(3, var(--live-columns)); }
.live-canvas.is-tablet .live-collection-filter-sidebar { display: block; }
.live-canvas.is-tablet .live-collection-filter-sidebar .live-collection-tools { display: flex; margin-bottom: 1rem; }
.live-canvas.is-mobile .live-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.live-canvas.is-mobile .live-categories-editorial-mosaic .live-category-grid { grid-auto-rows: 6.4rem; }
.live-canvas.is-mobile .live-categories-horizontal-chips .live-category-grid { grid-auto-columns: 70%; grid-template-columns: none; }
.live-canvas.is-mobile .live-categories-technical-list .live-category-grid { grid-template-columns: 1fr; }
.live-canvas.is-mobile .live-collection-filter-sidebar { display: block; }
.live-canvas.is-mobile .live-collection-filter-sidebar .live-collection-tools { display: flex; margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .live-canvas,
  .live-canvas :is(.live-product,.live-category,.live-benefit-grid article,.live-actions button) { animation: none; transition: none; }
  .live-canvas :is(.live-product,.live-category,.live-benefit-grid article):hover { transform: none; }
}

/* Plans */
.model-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.model-plan { position: relative; display: flex; flex-direction: column; min-height: 30rem; padding: 1.4rem; border: 1px solid var(--model-line); border-radius: 1.22rem; background: linear-gradient(158deg, rgba(25, 29, 43, 0.9), rgba(10, 13, 21, 0.89)); transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.model-plan:hover { transform: translateY(-4px); }
.model-plan.is-selected { border-color: rgba(150, 124, 255, 0.9); box-shadow: 0 24px 52px rgba(85, 61, 215, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.model-plan-badge { align-self: flex-start; padding: 0.37rem 0.58rem; border: 1px solid rgba(198, 181, 255, 0.32); border-radius: 99px; color: #dad2ff; background: rgba(121, 88, 228, 0.16); font-size: 0.75rem; font-weight: 820; letter-spacing: 0.08em; }
.model-plan h3 { margin: 1.05rem 0 0.35rem; font-size: 1.28rem; letter-spacing: -0.04em; }
.model-plan > p { min-height: 2.7rem; margin: 0; color: var(--model-muted); font-size: 0.82rem; line-height: 1.45; }
.model-plan dl { display: grid; gap: 0.55rem; margin: 1.25rem 0 0.9rem; }
.model-plan dl div { display: flex; justify-content: space-between; gap: 0.8rem; color: var(--model-muted); font-size: 0.76rem; }
.model-plan dd { margin: 0; color: #ecebf5; text-align: right; }
.model-plan-total { padding: 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.model-plan-total small { display: block; color: var(--model-muted); font-size: 0.75rem; }
.model-plan-total strong { display: block; margin-top: 0.12rem; font-size: 1.82rem; letter-spacing: -0.05em; }
.model-plan-total strong span { font-size: 0.78rem; font-weight: 500; letter-spacing: 0; }
.model-plan ul { display: grid; gap: 0.52rem; margin: 1.05rem 0; padding: 0; list-style: none; color: #d4d6e1; font-size: 0.76rem; line-height: 1.38; }
.model-plan li::before { content: '✓'; margin-right: 0.5rem; color: var(--model-green); }
.model-plan button { width: 100%; min-height: 2.75rem; margin-top: auto; border: 1px solid rgba(158, 148, 255, 0.52); border-radius: 0.77rem; color: #fff; background: rgba(111, 83, 229, 0.27); font-size: 0.8rem; font-weight: 760; }
.model-plan.is-selected button { background: linear-gradient(135deg, #8061e8, #558eea); }

.model-start { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1.25rem 1.4rem; border: 1px solid rgba(108, 194, 255, 0.3); border-radius: 1.05rem; background: linear-gradient(136deg, rgba(54, 100, 176, 0.2), rgba(112, 69, 218, 0.17)); }
.model-start span { color: #88c9ff; }
.model-start b { display: block; margin-top: 0.38rem; font-size: 0.9rem; line-height: 1.45; }
.model-start a { white-space: nowrap; }

@media (max-width: 1180px) {
  .theme-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-showcase-card:first-child { grid-template-columns: minmax(0, 1.45fr) minmax(15rem, .55fr); }
  .live-products { --live-columns: 4; }
}

@media (max-width: 760px) {
  .model-header { gap: 0.75rem; padding: 1rem; }
  .model-nav { display: none; }
  .model-header-cta { margin-left: auto; min-height: 2.75rem; padding: 0.56rem 0.72rem; font-size: 0.75rem; }
  #modelApp { padding: 2.7rem 1rem 3.5rem; }
  .model-hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .model-hero h1 { font-size: clamp(2.35rem, 12vw, 3.9rem); }
  .model-section-head { display: grid; gap: 0.75rem; align-items: start; }
  .model-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .model-filter { min-height: 3.8rem; padding: .55rem; }
  .theme-showcase-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .theme-showcase-card:first-child { grid-column: auto; grid-template-columns: 1fr; }
  .theme-card-copy { min-height: 0; padding: 0.95rem 1rem 1.05rem; }
  .live-controls { align-items: start; flex-direction: column; }
  .live-control-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .device-toggle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .model-open-preview { width: 100%; }
  .model-preview-dialog { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
  .model-preview-dialog-shell > header { align-items: stretch; flex-direction: column; }
  .model-preview-dialog-actions { align-items: stretch; flex-direction: column; }
  .model-preview-dialog-close { width: 100%; }
  .model-plan-grid { grid-template-columns: 1fr; }
  .model-plan { min-height: 0; }
  .model-start { align-items: stretch; flex-direction: column; }
  .model-start a { white-space: normal; }
  .live-canvas:not(.is-mobile) .live-nav,
  .live-canvas:not(.is-mobile) .live-header-action,
  .live-canvas:not(.is-mobile) .live-search { display: none; }
  .live-canvas:not(.is-mobile) .live-menu { display: block; }
  .live-canvas:not(.is-mobile) .live-hero { grid-template-columns: 1fr; min-height: 0; padding: 2.5rem 1rem 3rem; }
  .live-canvas:not(.is-mobile) .live-hero-copy { grid-column: auto; }
  .live-canvas:not(.is-mobile) .live-hero-media { grid-row: auto; grid-column: auto; min-height: 12rem; }
  .live-canvas:not(.is-mobile) .live-block { padding: 2.5rem 1rem; }
  .live-canvas:not(.is-mobile) .live-benefit-grid,
  .live-canvas:not(.is-mobile) .live-quote-grid { grid-template-columns: 1fr; }
  .live-canvas:not(.is-mobile) .live-text,
  .live-canvas:not(.is-mobile) .live-form { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 520px) {
  .theme-showcase-card { grid-template-columns: 1fr; }
  .theme-mini { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .theme-card-copy { min-height: 0; }
  .model-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-filter > i { width: 2.25rem; height: 2.25rem; }
  .model-filter strong { font-size: .76rem; }
}

@media (max-width: 390px) {
  .model-header-cta { font-size: 0.75rem; }
  .model-hero h1 { font-size: 2.42rem; }
  .theme-card-copy { min-height: 0; }
  .theme-card-copy > b { font-size: 0.95rem; }
  .live-actions { align-items: start; flex-direction: column; }
}

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