/* Landscape tokens never replace the ink used inside paper or glass surfaces. */
html[data-theme="qixi"] {
  --scene-shade-rgb: 13,25,26;
  --scene-caption-ink: var(--ink-2);
  --scene-caption-surface: var(--paper);
}
html[data-theme="qixi"][data-scene-tone="dark"] {
  --scene-ink: #fffaf0;
  --scene-ink-2: #f2f7f0;
  --scene-footer-ink: #fff;
  --scene-line: #eff7f0;
}
html[data-theme="ink"][data-scene-tone="dark"] {
  --scene-caption-ink: var(--ink-2);
  --scene-caption-surface: var(--paper);
}

.public-preferences { display: none; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
html[data-view="welcome"] .public-preferences { display: flex; }
.public-preferences > label { flex-shrink: 0; margin: 0; color: var(--ink-2); font-size: var(--text-xs); font-weight: 400; }
.public-preferences > select { width: auto; max-width: 100%; margin: 0; padding: 8px 12px; font-size: var(--text-sm); }
html[data-view="welcome"] .header > .user-meta { display: none; }
html[data-view="welcome"] .header,
html[data-theme="qixi"] .header { padding: 20px 24px; margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.account-menu-panel > .account-preference { display: grid; gap: 6px; cursor: default; }
.account-preference select { margin: 0; font-size: var(--text-sm); }
html[data-theme="qixi"] .scene-backdrop { display: block; }
/* Paint after the ripple canvas, below the content; keep the right window clear. */
html[data-theme="qixi"]:where([data-view="welcome"], [data-view="auth"]) body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(var(--scene-shade-rgb),1) 0%, rgba(var(--scene-shade-rgb),1) 35%, rgba(var(--scene-shade-rgb),0) 68%);
  opacity: var(--scene-veil, 0);
}
html[data-theme="qixi"] .auth-grid .auth-trial { position: relative; isolation: isolate; }
html[data-theme="qixi"] .auth-grid .auth-trial::before {
  content: "";
  position: absolute;
  inset: -6px -14px;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: rgba(var(--scene-shade-rgb),1);
  opacity: 0;
}
html[data-theme="qixi"][data-scene-tone="dark"] .auth-grid .auth-trial::before { opacity: .38; }
html[data-theme="qixi"] .cursor-fx-canvas { mix-blend-mode: soft-light; }
html[data-theme="qixi"] .intro .intro-copy { padding: 32px; }
html[data-theme="qixi"] .intro .intro-example::before { background: var(--soft); }
html[data-theme="qixi"] .page-heading { padding: 16px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
html[data-theme="qixi"] #new-page .form-section-progress { background: transparent; }
html[data-theme="qixi"] :is(.intro-copy, .intro-steps, .intro-difference, .auth-switch) { background: var(--paper); }
html[data-theme="qixi"] :is(.panel:not(.panel .panel), #cards, #detail) { background: var(--surface); }

@media (max-width: 599px) {
  html[data-theme="qixi"] #new-page .form-section-progress { border-radius: var(--radius-pill); background: var(--paper); }
  @supports (color: color-mix(in srgb, white, transparent)) {
    html[data-theme="qixi"] #new-page .form-section-progress {
      background: linear-gradient(to right, color-mix(in srgb, var(--paper) 96%, var(--paper-2)), color-mix(in srgb, var(--paper) 98%, var(--paper-2)), color-mix(in srgb, var(--paper) 96%, var(--paper-2)));
    }
  }
}

/* Touch and unsupported devices use the opaque surfaces above. */
@media (hover: hover) and (pointer: fine) {
  /* Raise open menus above sibling glass surfaces without changing closed-state painting. */
  html[data-theme="qixi"] .header:has(.account-menu[open]) { position: relative; z-index: 30; }
  @supports (backdrop-filter: blur(12px)) {
    html[data-theme="qixi"] :is(
      .page-heading,
      .intro-steps, .intro-difference, .auth-switch,
      .panel:not(.panel .panel), #cards, #detail
    ),
    html[data-theme="qixi"][data-view="auth"] .header {
      background: var(--glass-surface);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }
}
@media (max-width: 780px) {
  .public-preferences { gap: 6px; }
  html[data-view="welcome"] .header, html[data-theme="qixi"] .header { padding: 16px; }
  html[data-theme="qixi"] .intro .intro-copy { padding: 20px; }
}
@media (max-width: 700px) {
  html[data-view="welcome"] .header { flex-wrap: nowrap; align-items: center; gap: 6px; padding: 10px 8px; }
  html[data-view="welcome"] .brand { gap: 0; }
  html[data-view="welcome"] .brand-mark { display: none; }
  html[data-view="welcome"] .brand-copy h1 { font-size: 12px; letter-spacing: normal; white-space: nowrap; }
  html[data-view="welcome"] .brand-copy > p { display: none; }
  .public-preferences { flex-wrap: nowrap; gap: 6px; }
  .public-preferences > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .public-preferences > select { width: 78px; padding: 8px 4px; font-size: 11px; }
}
@media (max-width: 380px) {
  .public-preferences { margin-left: 0; }
  html[data-theme="qixi"] .intro .intro-copy { padding: 20px 16px; }
}

/* Qixi leaves the landscape around one example or review panel. */
html[data-theme="qixi"][data-view="welcome"] .header { padding: 20px 0; border: 0; background: transparent; }
html[data-theme="qixi"][data-view="welcome"] .brand-copy > p { display: none; }
html[data-theme="qixi"] .intro .intro-hero { grid-template-columns: minmax(0, 520px) minmax(0, 360px); gap: 80px; padding: 80px 0 120px; }
html[data-theme="qixi"] .intro .intro-hero .intro-copy { max-width: 520px; margin-top: 32px; padding: 0; border: 0; background: transparent; }
html[data-theme="qixi"] .intro .intro-copy > :is(.eyebrow, .intro-audience) { display: none; }
html[data-theme="qixi"] .intro #intro-title { font-size: clamp(36px, 4.1vw, 52px); line-height: 1.4; }
html[data-theme="qixi"] .intro .intro-lead { margin-top: 30px; }
html[data-theme="qixi"] .intro .intro-links { gap: 28px; margin-top: 40px; }
html[data-theme="qixi"] .intro .intro-example { margin-top: 128px; padding: 0; }
html[data-theme="qixi"] .intro .intro-example::before { display: none; }
html[data-theme="qixi"] .intro .sample-note { padding: 24px 24px 0; background: var(--surface); box-shadow: none; }
html[data-theme="qixi"] .intro .sample-bottomline { margin: 0 -24px; padding: 14px 24px; }
html[data-theme="qixi"][data-scene-tone="dark"] :is(#intro-title, .intro-lead, #auth-trial-start) { color: var(--scene-ink); }
html[data-theme="qixi"][data-scene-tone="dark"] :is(#trial-start, .intro-trial-note, .auth-heading a) { color: var(--scene-ink-2); }
html[data-theme="qixi"] .intro .intro-example figcaption {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
  color: var(--scene-caption-ink);
  background: var(--scene-caption-surface);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 4px var(--scene-caption-surface);
}
html[data-theme="ink"][data-scene-tone="dark"] .intro .intro-example figcaption { color: var(--scene-caption-ink); background: var(--scene-caption-surface); border-radius: var(--radius-xs); }
html[data-theme="ink"][data-scene-tone="dark"] .intro .intro-copy > .eyebrow { color: var(--accent-hover); }

html[data-theme="qixi"][data-scene-tone="dark"][data-view="welcome"] .header :is(.brand-copy h1, .brand-mark) { color: var(--scene-ink); }
html[data-theme="qixi"][data-scene-tone="dark"][data-view="welcome"] .header .public-preferences > label { color: var(--scene-ink-2); }
html[data-theme="qixi"][data-scene-tone="dark"][data-view="welcome"] .header :is(.brand-mark, .public-preferences > select, .scene-capsule) { border-color: var(--scene-line); }

/* Only rings outside a surface use the landscape line; menu items keep their ink ring. */
html[data-theme="qixi"][data-scene-tone="dark"][data-view="welcome"] .public-preferences > select:focus-visible,
html[data-theme="qixi"][data-scene-tone="dark"] :is(.intro-links > a, #trial-start, .auth-heading a, #auth-trial-start):focus-visible { outline-color: var(--scene-line); }

/* Match the scenery fade in both directions; static scenery never animates ink. */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-theme="qixi"] body::after,
  html[data-theme="qixi"] .auth-grid .auth-trial::before { transition: opacity 1200ms ease; }
  html[data-theme="qixi"][data-view="welcome"] .header :is(.brand-copy h1, .brand-mark, .public-preferences > label, .public-preferences > select, .scene-capsule),
  html[data-theme="qixi"] :is(#intro-title, .intro-lead, #trial-start, .intro-trial-note, .intro-example figcaption, .auth-heading a, #auth-trial-start),
  html[data-theme="ink"] .intro .intro-example figcaption { transition: color 1200ms ease, border-color 1200ms ease, outline-color 1200ms ease; }
}

@media (max-width: 720px), (hover: none), (pointer: coarse) {
  /* The single column keeps its veil above the example and review cards. */
  html[data-theme="qixi"] body::after {
    background: linear-gradient(to bottom, rgba(var(--scene-shade-rgb),1) 0px, rgba(var(--scene-shade-rgb),1) 430px, rgba(var(--scene-shade-rgb),0) 680px);
  }
  html[data-theme="qixi"][data-view="auth"] body::after {
    background: linear-gradient(to bottom, rgba(var(--scene-shade-rgb),1) 0px, rgba(var(--scene-shade-rgb),1) 520px, rgba(var(--scene-shade-rgb),0) 950px);
  }
}

@media (hover: hover) and (pointer: fine) {
  @supports (backdrop-filter: blur(12px)) {
    html[data-theme="qixi"][data-view="welcome"] .header,
    html[data-theme="qixi"] .intro .intro-hero .intro-copy { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html[data-theme="qixi"] .intro .sample-note { background: var(--glass-surface); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  }
}
@media (max-width: 1099px) {
  html[data-theme="qixi"] .intro .intro-hero { grid-template-columns: minmax(0, 1fr); }
  html[data-theme="qixi"] .intro .intro-example { margin-top: 0; }
}
@media (max-width: 700px) {
  html[data-theme="qixi"][data-view="welcome"] .header { padding: 10px 0; }
  html[data-theme="qixi"] .intro .intro-hero { gap: 72px; padding-top: 28px; }
  html[data-theme="qixi"] .intro .intro-hero .intro-copy { margin-top: 12px; }
  html[data-theme="qixi"] .intro #intro-title { font-size: 32px; }
  html[data-theme="qixi"] .intro .intro-lead { margin-top: 24px; }
  html[data-theme="qixi"] .intro .intro-links { gap: 24px; margin-top: 30px; }
}