/*
 * Live Covenant Visual System v1
 * Source of truth: Visual Experience Standard v1 + retained Figma foundations.
 *
 * Architecture:
 * - Primitive tokens are implementation values.
 * - Semantic tokens are the only values feature UI should consume.
 * - Images 2.5 supplies cinematic scene/artifact assets; text and controls stay native.
 * - This file intentionally does not replace legacy Moonlit variables globally.
 */

:root {
  /* ============================================================
     PRIMITIVES — retained from the Figma token structure
     ============================================================ */
  --lc-ink-950: #090709;
  --lc-ink-900: #110d10;
  --lc-ink-850: #191216;
  --lc-ink-800: #22171c;

  --lc-burgundy-700: #3b111b;
  --lc-burgundy-600: #571724;
  --lc-burgundy-500: #741f31;
  --lc-burgundy-400: #96364c;

  --lc-parchment-100: #e8dcc7;
  --lc-parchment-200: #d4c3a8;
  --lc-parchment-300: #b9a487;

  --lc-ivory-100: #f5efe7;
  --lc-ivory-80: rgba(245, 239, 231, 0.82);
  --lc-ivory-64: rgba(245, 239, 231, 0.64);

  --lc-bronze-500: #a87542;
  --lc-bronze-400: #c2945f;
  --lc-rose-250: #b8a2a8;

  --lc-border-18: rgba(232, 220, 199, 0.18);
  --lc-border-28: rgba(232, 220, 199, 0.28);
  --lc-scrim-72: rgba(7, 5, 7, 0.72);
  --lc-scrim-46: rgba(7, 5, 7, 0.46);
  --lc-danger-500: #a93442;
  --lc-success-500: #5e8c72;

  --lc-space-4: 4px;
  --lc-space-8: 8px;
  --lc-space-12: 12px;
  --lc-space-16: 16px;
  --lc-space-20: 20px;
  --lc-space-24: 24px;
  --lc-space-32: 32px;
  --lc-space-40: 40px;
  --lc-space-48: 48px;
  --lc-space-64: 64px;

  --lc-radius-8: 8px;
  --lc-radius-12: 12px;
  --lc-radius-16: 16px;
  --lc-radius-24: 24px;
  --lc-radius-pill: 999px;

  /* ============================================================
     SEMANTIC TOKENS — feature UI should use these
     ============================================================ */
  --lc-surface-base: var(--lc-ink-950);
  --lc-surface-raised: var(--lc-ink-900);
  --lc-surface-inset: var(--lc-ink-850);
  --lc-surface-artifact: var(--lc-parchment-100);

  --lc-text-primary: var(--lc-ivory-100);
  --lc-text-secondary: var(--lc-ivory-80);
  --lc-text-muted: var(--lc-rose-250);
  --lc-text-on-artifact: var(--lc-ink-900);

  --lc-accent-primary: var(--lc-burgundy-500);
  --lc-accent-strong: var(--lc-burgundy-600);
  --lc-accent-quiet: var(--lc-burgundy-700);
  --lc-accent-decorative: var(--lc-bronze-500);

  --lc-artifact-primary: var(--lc-parchment-100);
  --lc-artifact-secondary: var(--lc-parchment-200);
  --lc-border-subtle: var(--lc-border-18);
  --lc-scrim-strong: var(--lc-scrim-72);
  --lc-scrim-soft: var(--lc-scrim-46);
  --lc-protego-danger: var(--lc-danger-500);
  --lc-state-success: var(--lc-success-500);

  --lc-space-screen-x: var(--lc-space-20);
  --lc-space-stack-xs: var(--lc-space-8);
  --lc-space-stack-sm: var(--lc-space-12);
  --lc-space-stack-md: var(--lc-space-16);
  --lc-space-stack-lg: var(--lc-space-24);
  --lc-space-section: var(--lc-space-32);

  --lc-radius-control: var(--lc-radius-16);
  --lc-radius-card: var(--lc-radius-24);
  --lc-radius-artifact: var(--lc-radius-12);
  --lc-radius-pill-token: var(--lc-radius-pill);

  /* ============================================================
     TYPOGRAPHY — mirrors the eight Figma text roles
     ============================================================ */
  --lc-font-narrative: 'Noto Serif SC', 'Songti SC', serif;
  --lc-font-ui: 'Noto Sans SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --lc-font-code: 'Inter', ui-monospace, SFMono-Regular, Menlo, monospace;
  --lc-font-decorative: 'Cormorant Garamond', 'Noto Serif SC', serif;

  /* ============================================================
     EFFECTS — mirrors Deep / Soft Lift / Artifact Glow
     ============================================================ */
  --lc-shadow-deep: 0 28px 76px rgba(0, 0, 0, 0.52);
  --lc-shadow-soft-lift: 0 14px 34px rgba(0, 0, 0, 0.28);
  --lc-glow-artifact: 0 0 36px rgba(168, 117, 66, 0.14);

  /* Art slots. Production Images 2.5 assets plug in here later. */
  --lc-c0-daddy-art: none;
  --lc-c0-puppy-art: none;
  --lc-c0-waiting-art: none;
  --lc-c0-convergence-art: none;
}

/* Slightly brighter than the first concept image, per visual review. */
@media (prefers-contrast: no-preference) {
  :root {
    --lc-text-secondary: rgba(245, 239, 231, 0.86);
    --lc-text-muted: #c2adb2;
  }
}

/* Typography utilities */
.lc-type-narrative-display {
  font-family: var(--lc-font-narrative);
  font-size: clamp(2.05rem, 7.5vw, 3.35rem);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.lc-type-narrative-title {
  font-family: var(--lc-font-narrative);
  font-size: clamp(1.55rem, 5.5vw, 2.35rem);
  line-height: 1.28;
  font-weight: 600;
}

.lc-type-narrative-body {
  font-family: var(--lc-font-narrative);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: 0.012em;
}

.lc-type-ui-body {
  font-family: var(--lc-font-ui);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 400;
}

.lc-type-ui-label {
  font-family: var(--lc-font-ui);
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.012em;
}

.lc-type-ui-caption {
  font-family: var(--lc-font-ui);
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.025em;
}

.lc-type-utility-code {
  font-family: var(--lc-font-code);
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.lc-type-decorative-eyebrow {
  font-family: var(--lc-font-decorative);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Core native controls. Never bake labels into generated art. */
.lc-action-primary,
.lc-action-secondary,
.lc-action-text,
.lc-action-protego {
  min-height: 48px;
  font-family: var(--lc-font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lc-action-primary {
  padding: 12px 18px;
  border: 1px solid rgba(194, 148, 95, 0.42);
  border-radius: var(--lc-radius-control);
  color: var(--lc-text-primary);
  background: linear-gradient(180deg, #81283c 0%, var(--lc-accent-strong) 100%);
  box-shadow: var(--lc-shadow-soft-lift), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.lc-action-primary:hover,
.lc-action-primary:focus-visible {
  background: linear-gradient(180deg, #913149 0%, #651b2a 100%);
  border-color: rgba(194, 148, 95, 0.64);
  outline: none;
}

.lc-action-secondary {
  padding: 12px 18px;
  border: 1px solid var(--lc-border-subtle);
  border-radius: var(--lc-radius-control);
  color: var(--lc-text-primary);
  background: rgba(245, 239, 231, 0.045);
}

.lc-action-secondary:hover,
.lc-action-secondary:focus-visible {
  border-color: var(--lc-border-28);
  background: rgba(245, 239, 231, 0.075);
  outline: none;
}

.lc-action-text {
  min-height: 40px;
  padding: 8px 0;
  border: 0;
  color: var(--lc-text-secondary);
  background: transparent;
}

.lc-action-protego {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(169, 52, 66, 0.44);
  border-radius: var(--lc-radius-pill-token);
  color: #f1c7cd;
  background: rgba(169, 52, 66, 0.08);
}

.lc-action-primary:active,
.lc-action-secondary:active,
.lc-action-protego:active {
  transform: translateY(1px) scale(0.99);
}

/* Artifact surfaces: generated visual object + native content layer. */
.lc-artifact-surface {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(90, 65, 46, 0.22);
  border-radius: var(--lc-radius-artifact);
  color: var(--lc-text-on-artifact);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.24), transparent 30%),
    linear-gradient(135deg, #eee3cf 0%, var(--lc-artifact-primary) 48%, #d6c5aa 100%);
  box-shadow: var(--lc-shadow-soft-lift), var(--lc-glow-artifact);
}

.lc-artifact-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(3deg, rgba(82, 59, 40, 0.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(91deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.lc-quiet-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lc-text-muted);
  font: 500 0.75rem/1.4 var(--lc-font-ui);
  letter-spacing: 0.03em;
}

.lc-quiet-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lc-accent-decorative);
  box-shadow: 0 0 12px rgba(168, 117, 66, 0.38);
}

/* ============================================================
   STORY C0 — cinematic artifact UI override
   Higher specificity intentionally wins over the legacy inline C0 style.
   Story actions/state remain untouched.
   ============================================================ */
#storyLayerV1Overlay[data-c0v2-active="1"] {
  background: var(--lc-surface-base) !important;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell {
  --c0-accent: var(--lc-accent-primary);
  --c0-accent-rgb: 116, 31, 49;
  color: var(--lc-text-primary);
  font-family: var(--lc-font-ui);
  background-color: var(--lc-surface-base);
  background-image:
    var(--lc-c0-daddy-art),
    radial-gradient(circle at 76% 18%, rgba(150, 54, 76, 0.16), transparent 30%),
    radial-gradient(circle at 16% 76%, rgba(168, 117, 66, 0.08), transparent 26%),
    linear-gradient(155deg, #0b080a 0%, #171014 52%, #0a0809 100%);
  background-size: cover, auto, auto, auto;
  background-position: center, center, center, center;
  background-attachment: fixed;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="elowyn"] {
  --c0-accent: #88425a;
  --c0-accent-rgb: 136, 66, 90;
  background-image:
    var(--lc-c0-puppy-art),
    radial-gradient(circle at 18% 18%, rgba(150, 54, 76, 0.15), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(194, 148, 95, 0.07), transparent 26%),
    linear-gradient(160deg, #0b080a 0%, #1b1117 54%, #0a0809 100%);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell::before {
  opacity: 0.34;
  background:
    linear-gradient(90deg, rgba(6, 4, 5, 0.68) 0%, rgba(6, 4, 5, 0.28) 42%, rgba(6, 4, 5, 0.58) 100%),
    linear-gradient(180deg, rgba(255, 247, 235, 0.018), transparent 24%, rgba(0, 0, 0, 0.18));
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-top {
  min-height: 58px;
  padding: 10px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--lc-border-subtle);
  background: rgba(9, 7, 9, 0.76);
  backdrop-filter: blur(18px) saturate(108%);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-sigil {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  transform: none;
  background: var(--lc-accent-decorative);
  box-shadow: 0 0 16px rgba(168, 117, 66, 0.35);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-story {
  font-family: var(--lc-font-narrative);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--lc-text-secondary);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-role {
  margin-top: 2px;
  font: 500 0.64rem/1.35 var(--lc-font-code);
  letter-spacing: 0.08em;
  color: var(--lc-text-muted);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--lc-border-subtle);
  border-radius: 50%;
  background: rgba(245, 239, 231, 0.035);
  color: var(--lc-text-secondary);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-progress {
  max-width: 1080px;
  gap: 8px;
  margin-top: 14px;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-progress span {
  height: 2px;
  background: rgba(232, 220, 199, 0.10);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-progress span::after {
  background: linear-gradient(90deg, var(--lc-accent-primary), var(--lc-accent-decorative));
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-main {
  width: min(1080px, 100%);
  padding: clamp(18px, 3vw, 34px) max(18px, var(--lc-space-screen-x)) 54px;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
  gap: clamp(30px, 6vw, 78px);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-copy {
  padding-top: 28px;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-eyebrow {
  font-family: var(--lc-font-decorative);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--lc-accent-decorative);
  text-transform: uppercase;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-title {
  max-width: 13ch;
  margin: 12px 0 20px;
  color: var(--lc-text-primary);
  font-family: var(--lc-font-narrative);
  font-size: clamp(2.05rem, 5.2vw, 3.35rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-body {
  max-width: 36rem;
  color: var(--lc-text-secondary);
  font-family: var(--lc-font-narrative);
  font-size: clamp(0.96rem, 1.45vw, 1.06rem);
  line-height: 1.78;
  letter-spacing: 0.008em;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-note {
  margin-top: 22px;
  padding: 12px 0 12px 15px;
  border-left: 1px solid rgba(168, 117, 66, 0.72);
  background: transparent;
  color: var(--lc-text-muted);
  font: 400 0.76rem/1.65 var(--lc-font-ui);
}

/* Daddy: the interaction surface reads as a physical record, not a dashboard card. */
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-stage {
  min-height: 510px;
  border: 1px solid rgba(89, 63, 44, 0.32);
  border-radius: var(--lc-radius-artifact);
  color: var(--lc-text-on-artifact);
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.30), transparent 28%),
    linear-gradient(135deg, #f0e5d1 0%, #e5d7bf 49%, #cfbda0 100%);
  box-shadow: var(--lc-shadow-deep), var(--lc-glow-artifact);
  transform: rotate(-0.35deg);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-stage::before {
  background:
    repeating-linear-gradient(2deg, rgba(76, 52, 35, 0.035) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 84% 88%, rgba(113, 70, 47, 0.09), transparent 24%);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-stage-label,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-stage-copy,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-scale,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-choice-copy,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-holdmeta,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-rubhint {
  color: rgba(35, 25, 27, 0.58);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-stage-title,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-choice-label,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-hiddenphrase {
  color: #24191c;
  font-family: var(--lc-font-narrative);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-fact,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-choicebox,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-rub {
  border-color: rgba(76, 52, 35, 0.16);
  background: rgba(255, 252, 245, 0.18);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-fact.on,
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-choice input:checked + .c0v2-choicebox {
  color: #211619;
  border-color: rgba(116, 31, 49, 0.48);
  background: rgba(116, 31, 49, 0.08);
}

/* Puppy: smoked glass / residual touch trace, still native and readable. */
#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="elowyn"] .c0v2-stage {
  min-height: 510px;
  border: 1px solid rgba(232, 220, 199, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(245, 239, 231, 0.055), rgba(78, 30, 47, 0.12)),
    rgba(13, 9, 12, 0.66);
  box-shadow: var(--lc-shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px) saturate(108%);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="elowyn"] .c0v2-stage::before {
  background:
    radial-gradient(circle at 38% 24%, rgba(168, 117, 66, 0.09), transparent 32%),
    linear-gradient(115deg, transparent 0 46%, rgba(255, 255, 255, 0.024) 50%, transparent 54%);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stageinner {
  min-height: 510px;
  padding: clamp(22px, 4.6vw, 42px);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stage-label {
  font: 500 0.66rem/1.4 var(--lc-font-code);
  letter-spacing: 0.09em;
  color: var(--lc-text-muted);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stage-title {
  margin-top: 10px;
  color: var(--lc-text-primary);
  font-family: var(--lc-font-narrative);
  font-size: 1.16rem;
  font-weight: 600;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stage-copy {
  margin-top: 8px;
  color: var(--lc-text-muted);
  font: 400 0.76rem/1.6 var(--lc-font-ui);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-advance {
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid rgba(194, 148, 95, 0.42);
  border-radius: var(--lc-radius-control);
  color: var(--lc-text-primary);
  background: linear-gradient(180deg, #81283c 0%, var(--lc-accent-strong) 100%);
  box-shadow: var(--lc-shadow-soft-lift), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  font: 600 0.9rem/1.35 var(--lc-font-ui);
  letter-spacing: 0.01em;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-advance {
  color: #fff9f1;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-rub {
  border-radius: 22px;
  min-height: 220px;
  background:
    radial-gradient(circle at 50% 45%, rgba(142, 66, 90, 0.10), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-hiddenphrase {
  font-family: var(--lc-font-narrative);
  color: var(--lc-text-primary);
  text-shadow: 0 0 24px rgba(194, 148, 95, 0.10);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-choicebox {
  border-radius: var(--lc-radius-control);
  border-color: var(--lc-border-subtle);
  background: rgba(245, 239, 231, 0.025);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-choicebox::before {
  border-color: rgba(194, 148, 95, 0.62);
  border-radius: 2px;
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-choice input:checked + .c0v2-choicebox {
  border-color: rgba(194, 148, 95, 0.48);
  background: rgba(116, 31, 49, 0.14);
  transform: translateX(2px);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-choice input:checked + .c0v2-choicebox::before {
  background: var(--lc-accent-decorative);
  box-shadow: inset 0 0 0 3px var(--lc-surface-raised);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-hold {
  width: 176px;
  height: 176px;
  border-color: rgba(194, 148, 95, 0.32);
  background: conic-gradient(var(--lc-accent-decorative) calc(var(--hold) * 1%), rgba(232, 220, 199, 0.08) 0);
  box-shadow: var(--lc-glow-artifact);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-hold::before {
  background: var(--lc-surface-raised);
  border-color: var(--lc-border-subtle);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-hold span {
  color: var(--lc-text-primary);
  font-family: var(--lc-font-ui);
}

#storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-readonly {
  border-color: var(--lc-border-subtle);
  border-radius: var(--lc-radius-pill-token);
  background: rgba(9, 7, 9, 0.78);
  color: var(--lc-text-muted);
  font-family: var(--lc-font-code);
}

@media (max-width: 760px) {
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell {
    background-attachment: scroll;
    background-position: center top, center, center, center;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-main {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 10px 16px calc(38px + env(safe-area-inset-bottom));
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-copy {
    padding-top: 10px;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-title {
    max-width: 14ch;
    font-size: clamp(1.92rem, 9.3vw, 2.48rem);
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-body {
    font-size: 0.96rem;
    line-height: 1.74;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stage,
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-stage,
  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="elowyn"] .c0v2-stage {
    min-height: 420px;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-stageinner {
    min-height: 420px;
    padding: 22px 18px;
  }

  #storyLayerV1Overlay[data-c0v2-active="1"] .c0v2-shell[data-role="daddy"] .c0v2-stage {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-action-primary,
  .lc-action-secondary,
  .lc-action-text,
  .lc-action-protego {
    transition: none;
  }
}