/* AI Canvas marketing site — section layouts. */

/* ---------- Nav ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: 64px; padding: 0 clamp(16px, 3vw, 40px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-overlay) var(--ease-standard), border-color var(--dur-overlay), box-shadow var(--dur-overlay);
}
.site-nav.is-scrolled {
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--regular-glass) calc(100% - var(--glass-alpha-boost) * 100%), var(--solid-surface));
  box-shadow: inset 0 -1px rgba(91,118,151,.065), 0 8px 30px rgba(52,66,83,.04);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.25);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 610; font-size: 14px; letter-spacing: -.01em; min-height: 44px; }
.brand-mark { width: 28px; height: 28px; border-radius: 9px; box-shadow: 0 5px 14px rgba(42,70,101,.13); }
.brand-version { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--muted-slate); border: 1px solid var(--hairline); }
.nav-links { display: flex; gap: 2px; margin-inline: auto; }
.nav-links a { padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 560; color: var(--muted-slate); transition: color var(--dur-micro), background var(--dur-micro); }
.nav-links a:hover, .nav-links a.is-current { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.theme-cycle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 560; color: var(--muted-slate); border: 1px solid var(--hairline); }
.theme-cycle:hover { color: var(--ink); }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--pearl), var(--mist)); border: 1px solid var(--hairline); box-shadow: inset 0 0 0 2px var(--solid-surface); }
@media (max-width: 1100px) { .nav-links { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: clamp(120px, 16vh, 180px);
  padding-bottom: 0;
  display: grid;
  gap: clamp(40px, 6vh, 80px);
  overflow: clip;
}
.hero > * { max-width: 1440px; width: 100%; }
.hero-gl, .hero-fallback {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, #000 72%, transparent 100%);
  mask: linear-gradient(180deg, #000 72%, transparent 100%);
}
.hero-fallback {
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--iris) 14%, transparent), transparent 40%),
    radial-gradient(ellipse at 74% 36%, color-mix(in srgb, var(--cobalt) 10%, transparent), transparent 42%),
    radial-gradient(ellipse at 56% 84%, color-mix(in srgb, var(--champagne) 34%, transparent), transparent 46%);
  opacity: 1;
}
.hero.has-gl .hero-fallback { opacity: 0; transition: opacity 900ms ease; }
.hero-copy { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; }
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: -0.035em;
  display: grid;
}
.hero-line { display: block; }
.hero-title em {
  font-style: normal;
  background: linear-gradient(var(--spectrum-angle), var(--cobalt) 0%, var(--iris) 48%, color-mix(in srgb, var(--champagne) 70%, var(--ink)) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: spectrum-drift 9s ease-in-out infinite alternate;
}
.hero-sub { max-width: 640px; font-size: var(--text-xl); line-height: 1.55; color: var(--muted-slate); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { font-size: var(--text-sm); color: var(--faint-slate); }

.hero-stage { position: relative; z-index: 1; margin: 0 auto; perspective: 1800px; display: grid; gap: 18px; justify-items: center; padding-bottom: 60px; }
.hero-stage figcaption { font-size: var(--text-xs); color: var(--faint-slate); text-align: center; }
.device {
  position: relative;
  width: min(1240px, 100%);
  border-radius: 18px;
  padding: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--solid-surface) 92%, transparent), color-mix(in srgb, var(--mist) 80%, transparent));
  border: 1px solid color-mix(in srgb, var(--glass-specular) 80%, transparent);
  box-shadow: inset 0 1px var(--glass-specular), var(--shadow-thick);
  transform-origin: 50% 0%;
  transform: rotateX(var(--tilt, 14deg)) translateY(var(--rise, 40px)) scale(var(--zoom, .96));
  transition: transform 80ms linear;
  will-change: transform;
}
.device-screen { position: relative; border-radius: 10px; overflow: hidden; background: var(--mist); }
.device-screen img { width: 100%; aspect-ratio: 1440 / 900; object-fit: cover; }
/* Ghost outlines that pick out the three islands on the real screenshot as you scroll. */
.island-ghost {
  position: absolute; left: var(--gx); top: var(--gy); width: var(--gw); height: var(--gh);
  border-radius: 16px;
  border: 1.5px solid color-mix(in srgb, var(--cobalt) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 10%, transparent), 0 0 24px color-mix(in srgb, var(--iris) 24%, transparent);
  opacity: 0;
  scale: 1.04;
  transition: opacity var(--dur-overlay) var(--ease-standard), scale var(--dur-overlay) var(--ease-standard);
  transition-delay: calc(var(--gd) * 90ms);
  pointer-events: none;
}
.island-ghost::after {
  content: attr(data-ghost);
  position: absolute; left: 0; top: -22px;
  padding: 1px 7px; border-radius: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  color: var(--cobalt); background: color-mix(in srgb, var(--pearl) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--cobalt) 30%, transparent);
}
.hero-stage.is-flat .island-ghost { opacity: 1; scale: 1; }

.scroll-cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 2; width: 26px; height: 42px; border-radius: 13px; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); display: grid; justify-items: center; padding-top: 6px; }
.scroll-cue span { width: 3px; height: 8px; border-radius: 2px; background: var(--ink); opacity: .55; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { translate: 0 0; opacity: .55; } 50% { translate: 0 12px; opacity: .1; } }

/* ---------- Manifesto ---------- */
.manifesto { text-align: center; padding-block: clamp(80px, 12vh, 160px); }
.statement { display: grid; gap: 4px; font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 4.2vw, 5.2rem); font-weight: 540; letter-spacing: -.03em; line-height: 1.08; }
.statement-line { display: block; opacity: .18; translate: 0 6px; transition: opacity 600ms var(--ease-standard), translate 600ms var(--ease-standard), color 600ms; }
.statement-line.is-lit { opacity: 1; translate: 0 0; }
.statement-sub { max-width: 720px; margin: 32px auto 0; font-size: var(--text-lg); color: var(--muted-slate); line-height: 1.7; }

/* ---------- Scenes gallery (real screenshots, scroll-snap) ---------- */
.gallery { margin-top: 48px; display: grid; gap: 18px; }
.gallery-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 1180px);
  gap: 28px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  padding-block: 12px;
  outline-offset: 6px;
}
.gallery-track::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: start; display: grid; gap: 14px; opacity: .55; scale: .985; transition: opacity 500ms var(--ease-standard), scale 500ms var(--ease-standard); }
.slide.is-active { opacity: 1; scale: 1; }
.slide-frame {
  border-radius: 18px; padding: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--solid-surface) 92%, transparent), color-mix(in srgb, var(--mist) 80%, transparent));
  border: 1px solid color-mix(in srgb, var(--glass-specular) 80%, transparent);
  box-shadow: inset 0 1px var(--glass-specular), var(--shadow-thick);
}
.slide-frame img { border-radius: 11px; aspect-ratio: 1440 / 900; object-fit: cover; width: 100%; }
.slide figcaption { display: grid; gap: 4px; padding: 0 6px; }
.slide figcaption b { font-weight: 600; }
.slide figcaption span { font-size: var(--text-sm); color: var(--muted-slate); line-height: 1.6; }
.gallery-nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.gallery-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 70%, transparent); color: var(--muted-slate); font-size: 16px; transition: color var(--dur-micro), background var(--dur-micro); }
.gallery-arrow:hover { color: var(--ink); background: var(--solid-surface); }
.gallery-dots { display: flex; gap: 8px; }
.gallery-dots button { width: 28px; height: 28px; display: grid; place-items: center; }
.gallery-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: background var(--dur-micro), scale var(--dur-micro); }
.gallery-dots button[aria-current="true"]::before { background: var(--cobalt); scale: 1.25; }
.scenes .fine-print { text-align: center; max-width: none; }

/* ---------- Three focuses ---------- */
.focus-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(28px, 4vw, 64px); margin-top: 56px; align-items: start; }
.focus-sticky { position: sticky; top: 92px; }
.focus-stage {
  position: relative;
  aspect-ratio: 16 / 10.4;
  container-type: inline-size;
  background:
    radial-gradient(ellipse at 66% 18%, var(--ambient), transparent 31%),
    linear-gradient(136deg, var(--studio-a), var(--studio-b) 49%, var(--studio-c));
  transition: background var(--dur-overlay);
}
.mini-titlebar { position: absolute; inset: 0 0 auto; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 11px; color: var(--muted-slate); border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); z-index: 3; }
.mini-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.mini-brand img { width: 18px; height: 18px; border-radius: 6px; }
.mini-switcher { display: flex; padding: 3px; border-radius: 10px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 70%, transparent); gap: 2px; }
.mini-switcher button { min-width: 54px; height: 28px; border-radius: 7px; font-size: 11px; font-weight: 600; color: var(--muted-slate); transition: background var(--dur-micro), color var(--dur-micro); }
.mini-switcher button[aria-selected="true"] { color: var(--ink); background: var(--pale-ivory); box-shadow: 0 3px 11px rgba(48,60,75,.08), inset 0 1px var(--glass-specular); }
.mini-export { padding: 4px 9px; border-radius: 7px; color: #fff; background: var(--cobalt); font-weight: 600; }
[data-theme="obsidian"] .mini-export, [data-theme="dusk"] .mini-export { color: #172033; }

.mini-space { position: absolute; inset: 44px 0 0; }
/* Every element is absolutely positioned with per-view coordinates; the morph is a real shared-object transition. */
.mini-space > [data-el] {
  position: absolute;
  left: var(--ex); top: var(--ey); width: var(--ew); height: var(--eh);
  opacity: var(--eo, 1);
  transition:
    left var(--dur-overlay) var(--ease-morph), top var(--dur-overlay) var(--ease-morph),
    width var(--dur-overlay) var(--ease-morph), height var(--dur-overlay) var(--ease-morph),
    opacity var(--dur-morph) var(--ease-standard), scale var(--dur-overlay) var(--ease-morph);
}
.mini-space .poster { aspect-ratio: auto; }
.mini-space > [data-el="artwork"] { height: auto; aspect-ratio: 4 / 5; }
.mini-record { padding: 14px 16px; font-size: 10px; line-height: 1.45; color: var(--muted-slate); overflow: hidden; }
.mini-record-head { font-size: 9px; color: var(--faint-slate); margin-bottom: 8px; }
.mini-record-head strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; margin-top: 2px; }
.mini-you { font-size: 9px; font-weight: 600; color: var(--quiet-blue); margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.mini-msg { color: var(--ink); }
.mini-activity { margin-top: 8px; display: grid; gap: 4px; }
.mini-activity li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 70%, transparent); }
.mini-activity b { font-weight: 600; color: var(--ink); }
.mini-activity span { grid-column: 1; font-size: 9px; color: var(--faint-slate); }
.mini-activity em { grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 9px; color: var(--quiet-blue); }

.mini-toolbar, .mini-inspector, .mini-composer, .mini-results {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--glass-specular) 80%, transparent);
  background: linear-gradient(145deg, var(--glass-top), var(--glass-bottom)), color-mix(in srgb, var(--regular-glass) calc(100% - var(--glass-alpha-boost) * 100%), var(--solid-surface));
  box-shadow: inset 0 1px var(--glass-specular), 0 10px 26px rgba(23,32,51,.1);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-saturate));
  backdrop-filter: blur(calc(var(--glass-blur) * .6)) saturate(var(--glass-saturate));
}
.mini-toolbar { display: grid; gap: 4px; padding: 6px; justify-items: center; align-content: start; }
.mini-toolbar .icon { width: 14px; height: 14px; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.mini-toolbar .icon:first-child { color: var(--quiet-blue); }
.mini-inspector { padding: 8px 10px; font-size: 10px; }
.mini-inspector-tabs { display: flex; gap: 10px; font-size: 10px; color: var(--faint-slate); margin-bottom: 6px; }
.mini-inspector-tabs b { color: var(--ink); font-weight: 600; }
.mini-inspector ul { display: grid; gap: 3px; }
.mini-inspector li { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 6px; color: var(--ink); }
.mini-inspector li:first-child { background: color-mix(in srgb, var(--cobalt) 11%, transparent); }
.mini-inspector i { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; font-style: normal; font-size: 8px; color: var(--muted-slate); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mini-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; align-content: start; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mini-result { display: grid; gap: 4px; font-size: 9px; color: var(--faint-slate); }
.mini-result b { font-weight: 600; }
.mini-result.is-current b { color: var(--quiet-blue); }
.poster-mini { display: block; aspect-ratio: 4 / 5; border-radius: 4px; background: linear-gradient(160deg, #eef3ee, #d3dbd3); box-shadow: 0 8px 20px rgba(23,32,51,.12); }
.poster-mini.v2 { background: linear-gradient(160deg, #f1efe6, #d7d2c3); }
.poster-mini.v3 { background: linear-gradient(160deg, #e8eef5, #c9d4e2); }
.mini-result.is-current .poster-mini { outline: 1.5px solid var(--cobalt); outline-offset: 2px; }
.mini-result-actions { grid-column: 1 / -1; display: flex; gap: 6px; }
.mini-result-actions span { padding: 3px 8px; border-radius: 6px; font-size: 9px; font-weight: 600; color: var(--quiet-blue); background: color-mix(in srgb, var(--cobalt) 9%, transparent); }
.mini-composer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 12px; }
.mini-composer-text { font-size: 11px; color: var(--faint-slate); }
.mini-composer-meta { grid-column: 1; font-size: 9px; color: var(--faint-slate); }
.mini-composer-meta b { padding: 1px 6px; border-radius: 5px; color: var(--quiet-blue); background: color-mix(in srgb, var(--cobalt) 10%, transparent); }
.mini-composer-send { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--cobalt); }
.mini-composer-send .icon { width: 14px; height: 14px; }

/* Per-view coordinates (percent of .mini-space; stage is 16:10.4 so a 4:5 poster is w ≈ 0.52 × h). */
.focus-stage[data-view="conversation"] {
  --artwork-x: 57%; --artwork-y: 14%; --artwork-w: 32%; --artwork-h: 62%;
  --record-x: 4%; --record-y: 4%; --record-w: 44%; --record-h: 76%;
  --toolbar-x: 1.5%; --toolbar-y: 14%; --toolbar-w: 7%; --toolbar-h: 66%;
  --inspector-x: 76%; --inspector-y: 6%; --inspector-w: 22%; --inspector-h: 62%;
  --results-x: 12%; --results-y: 12%; --results-w: 76%; --results-h: 56%;
  --composer-x: 4%; --composer-y: 82%; --composer-w: 44%; --composer-h: 14%;
}
.focus-stage[data-view="canvas"] {
  --artwork-x: 23%; --artwork-y: 5%; --artwork-w: 38%; --artwork-h: 76%;
  --record-x: 4%; --record-y: 4%; --record-w: 44%; --record-h: 76%;
  --toolbar-x: 1.5%; --toolbar-y: 14%; --toolbar-w: 7%; --toolbar-h: 66%;
  --inspector-x: 76%; --inspector-y: 6%; --inspector-w: 22%; --inspector-h: 62%;
  --results-x: 12%; --results-y: 12%; --results-w: 76%; --results-h: 56%;
  --composer-x: 24%; --composer-y: 82%; --composer-w: 50%; --composer-h: 14%;
}
.focus-stage[data-view="generate"] {
  --artwork-x: 13.2%; --artwork-y: 14.5%; --artwork-w: 22%; --artwork-h: 42%;
  --record-x: 4%; --record-y: 4%; --record-w: 44%; --record-h: 76%;
  --toolbar-x: 1.5%; --toolbar-y: 14%; --toolbar-w: 7%; --toolbar-h: 66%;
  --inspector-x: 76%; --inspector-y: 6%; --inspector-w: 22%; --inspector-h: 62%;
  --results-x: 12%; --results-y: 12%; --results-w: 76%; --results-h: 56%;
  --composer-x: 4%; --composer-y: 76%; --composer-w: 34%; --composer-h: 20%;
}
[data-el="artwork"] { --ex: var(--artwork-x); --ey: var(--artwork-y); --ew: var(--artwork-w); --eh: var(--artwork-h); z-index: 1; }
[data-el="record"] { --ex: var(--record-x); --ey: var(--record-y); --ew: var(--record-w); --eh: var(--record-h); }
[data-el="toolbar"] { --ex: var(--toolbar-x); --ey: var(--toolbar-y); --ew: var(--toolbar-w); --eh: var(--toolbar-h); z-index: 2; }
[data-el="inspector"] { --ex: var(--inspector-x); --ey: var(--inspector-y); --ew: var(--inspector-w); --eh: var(--inspector-h); z-index: 2; }
[data-el="results"] { --ex: var(--results-x); --ey: var(--results-y); --ew: var(--results-w); --eh: var(--results-h); }
[data-el="composer"] { --ex: var(--composer-x); --ey: var(--composer-y); --ew: var(--composer-w); --eh: var(--composer-h); z-index: 3; }

.focus-stage[data-view="conversation"] :is([data-el="toolbar"], [data-el="inspector"], [data-el="results"]) { --eo: 0; pointer-events: none; }
.focus-stage[data-view="canvas"] :is([data-el="record"], [data-el="results"]) { --eo: 0; pointer-events: none; }
.focus-stage[data-view="generate"] :is([data-el="record"], [data-el="toolbar"], [data-el="inspector"]) { --eo: 0; pointer-events: none; }
/* In the generate focus the real artwork morphs into the "current" result slot; the slot's own thumbnail yields to it. */
.focus-stage[data-view="generate"] .mini-result.is-current .poster-mini { visibility: hidden; }
.focus-stage[data-view="generate"] [data-el="artwork"] { outline: 1.5px solid var(--cobalt); outline-offset: 2px; }
[data-el="artwork"] { transform-origin: 0 0; outline: 1.5px solid transparent; outline-offset: 2px; transition-property: left, top, width, height, opacity, scale, outline-color; }

.focus-steps { display: grid; gap: clamp(140px, 40vh, 380px); padding-block: 12vh 30vh; }
.focus-step { opacity: .35; transition: opacity 400ms var(--ease-standard); }
.focus-step.is-active { opacity: 1; }
.step-index { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--quiet-blue); letter-spacing: .06em; }
.focus-step h3 { margin-top: 10px; font-size: var(--text-2xl); font-weight: 560; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.focus-step p:not(.step-index) { margin-top: 14px; color: var(--muted-slate); line-height: 1.7; }

@media (max-width: 900px) {
  .focus-layout { grid-template-columns: 1fr; }
  .focus-sticky { top: 72px; z-index: 2; }
  .focus-steps { gap: 40px; padding-block: 24px 0; }
  .focus-step { opacity: 1; }
}

/* ---------- Islands playground ---------- */
.playground-wrap { margin-top: 56px; }
.playground {
  position: relative;
  height: clamp(460px, 62vh, 640px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 66% 18%, var(--ambient), transparent 31%),
    radial-gradient(ellipse at 15% 86%, var(--warm), transparent 28%),
    linear-gradient(136deg, var(--studio-a), var(--studio-b) 49%, var(--studio-c));
  box-shadow: inset 0 1px var(--glass-specular), var(--shadow-soft);
  outline: none;
}
.playground-art { position: absolute; inset: 0; display: grid; place-items: center; }
.dock-preview {
  position: absolute; z-index: 4; pointer-events: none;
  border: 1px solid rgba(75,137,210,.35); border-radius: 22px;
  background: rgba(91,155,228,.085);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.56), 0 0 32px rgba(83,146,218,.13);
  animation: dock-preview-in 130ms ease both;
}
.dock-preview[hidden] { display: none; }
@keyframes dock-preview-in { from { opacity: 0; transform: scale(.985); } }
.playground-reset { position: absolute; right: 16px; bottom: 16px; z-index: 6; min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--muted-slate); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 80%, transparent); }
.playground-reset:hover { color: var(--ink); }
.playground-hint { position: absolute; left: 50%; top: 14px; translate: -50% 0; z-index: 6; margin: 0; padding: 6px 12px; border-radius: 9px; font-size: 12px; color: var(--muted-slate); background: color-mix(in srgb, var(--solid-surface) 80%, transparent); border: 1px solid var(--hairline); white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.island-composer .island-body { padding: 10px 12px; }

@media (max-width: 720px) {
  .playground { height: 520px; }
  .island[data-island="inspector"] { --w: 220px; }
  .island[data-island="composer"] { --w: min(420px, calc(100% - 32px)); --x: 16px; }
}

/* ---------- Prismatic trace ---------- */
.trace-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 0;
  margin-top: 56px;
  min-height: 560px;
  background:
    radial-gradient(ellipse at 66% 18%, var(--ambient), transparent 31%),
    linear-gradient(136deg, var(--studio-a), var(--studio-b) 49%, var(--studio-c));
}
.trace-canvas { position: relative; display: grid; place-items: center; padding: 40px 40px 190px; }
.trace-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.trace-path {
  fill: none;
  stroke: url(#spectrum);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: trace-draw 460ms var(--ease-morph) forwards, trace-fade 520ms ease forwards;
  animation-delay: var(--d1, 0ms), var(--d2, 1700ms);
}
.trace-endpoint { fill: var(--iris); opacity: 0; animation: trace-dot 340ms ease forwards, trace-fade 520ms ease forwards; animation-delay: var(--d1, 380ms), var(--d2, 1700ms); }
@keyframes trace-draw { to { stroke-dashoffset: 0; opacity: .7; } }
@keyframes trace-dot { to { opacity: .72; } }
@keyframes trace-fade { to { opacity: 0; } }
.poster [data-trace-el].is-touched { outline: 1px solid color-mix(in srgb, var(--cobalt) 60%, transparent); outline-offset: 3px; transition: outline-color var(--dur-morph); }

.trace-record { padding: 22px; border-left: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 55%, transparent); display: grid; align-content: start; gap: 12px; }
.trace-record-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ink); }
.trace-record-head span { font-weight: 500; color: var(--faint-slate); }
.trace-activities { display: grid; gap: 8px; }
.trace-activities li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 80%, transparent); font-size: 12px; animation: activity-in var(--dur-morph) var(--ease-standard) both; }
@keyframes activity-in { from { opacity: 0; translate: 0 6px; } }
.trace-activities b { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.trace-activities .state { margin-left: auto; padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; color: var(--muted-slate); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.trace-activities .state.is-running { color: var(--quiet-blue); background: color-mix(in srgb, var(--cobalt) 12%, transparent); }
.trace-activities .state.is-done { color: #2f7a4d; background: rgba(66,160,105,.12); }
[data-theme="obsidian"] .trace-activities .state.is-done, [data-theme="dusk"] .trace-activities .state.is-done { color: #8fd9a8; }
.trace-activities span { font-size: 11px; color: var(--faint-slate); }
.trace-activities em { font-style: normal; display: flex; gap: 8px; font-size: 11px; color: var(--quiet-blue); }
.trace-empty { font-size: 12px; color: var(--faint-slate); line-height: 1.6; }
.trace-empty[hidden] { display: none; }

.trace-composer { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; z-index: 5; width: min(520px, calc(100% - 48px)); padding: 12px 14px; display: grid; gap: 10px; }
.poster .poster-light.is-touched { outline: none; }
.trace-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.trace-presets button { padding: 5px 10px; border-radius: 8px; font-size: 11px; color: var(--muted-slate); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 60%, transparent); transition: background var(--dur-micro), color var(--dur-micro); }
.trace-presets button.is-active { color: var(--quiet-blue); border-color: color-mix(in srgb, var(--cobalt) 30%, transparent); background: color-mix(in srgb, var(--cobalt) 10%, transparent); }
.trace-composer-row { display: flex; align-items: center; gap: 10px; }
.trace-composer-text { flex: 1; font-size: 14px; color: var(--ink); }
.trace-run { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--cobalt); box-shadow: 0 8px 20px rgba(55,107,255,.3); transition: transform var(--dur-micro); }
.trace-run:hover { transform: translateY(-1px); }
.trace-run:disabled { opacity: .5; cursor: default; }
.trace-composer-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint-slate); }
.trace-composer-meta b { padding: 2px 7px; border-radius: 6px; color: var(--quiet-blue); background: color-mix(in srgb, var(--cobalt) 10%, transparent); font-weight: 600; }
.trace-composer-meta b.is-running { animation: state-pulse 1.1s ease-in-out infinite; }
@keyframes state-pulse { 50% { opacity: .55; } }

@media (max-width: 860px) {
  .trace-stage { grid-template-columns: 1fr; }
  .trace-record { border-left: 0; border-top: 1px solid var(--hairline); }
  .trace-canvas { padding-bottom: 200px; }
}

/* ---------- Reference compiler pipeline ---------- */
.pipeline-pin { height: 300vh; margin-top: 56px; }
.pipeline-sticky { position: sticky; top: 84px; height: calc(100vh - 100px); display: grid; align-content: center; gap: 20px; overflow: clip; }
.pipeline-progress { height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.pipeline-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; scale: var(--p, 0) 1; background: linear-gradient(90deg, var(--cobalt), var(--iris), var(--champagne)); }
.pipeline-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 78vw); gap: 28px; translate: var(--tx, 0) 0; will-change: translate; }
.pipeline-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.stage {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--solid-surface) 72%, transparent);
  box-shadow: inset 0 1px var(--glass-specular), var(--shadow-soft);
  opacity: .45; scale: .96;
  transition: opacity 400ms var(--ease-standard), scale 400ms var(--ease-standard), border-color 400ms;
}
.stage.is-active { opacity: 1; scale: 1; border-color: color-mix(in srgb, var(--cobalt) 35%, transparent); }
.stage-index { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--quiet-blue); letter-spacing: .08em; }
.stage h3 { margin-top: 8px; font-size: var(--text-2xl); font-weight: 560; letter-spacing: -.02em; }
.stage-desc { margin-top: 10px; color: var(--muted-slate); line-height: 1.65; font-size: var(--text-sm); }
.stage-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.stage-fields code { padding: 3px 8px; border-radius: 7px; font-size: 12px; color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--hairline); opacity: 0; translate: 0 4px; transition: opacity 300ms var(--ease-standard), translate 300ms var(--ease-standard); transition-delay: calc(var(--fi, 0) * 40ms); }
.stage.is-active .stage-fields code { opacity: 1; translate: 0 0; }

.compiler-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 40px; margin-top: 40px; align-items: start; }
.code-figure figcaption { font-size: var(--text-xs); color: var(--faint-slate); margin-bottom: 10px; font-family: var(--font-mono); }
.compiler-notes { display: grid; gap: 18px; color: var(--muted-slate); line-height: 1.7; }
.compiler-notes b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .compiler-detail { grid-template-columns: 1fr; } .pipeline-pin { height: auto; } .pipeline-sticky { position: static; height: auto; } .pipeline-track { grid-auto-flow: row; grid-auto-columns: auto; translate: 0 0 !important; } .stage { opacity: 1; scale: 1; } .stage .stage-fields code { opacity: 1; translate: 0; } .pipeline-links, .pipeline-progress { display: none; } }

/* ---------- Execution contract ---------- */
.contract-stage { margin-top: 56px; padding: 40px; background: color-mix(in srgb, var(--solid-surface) 60%, transparent); }
.contract-nodes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cnode { position: relative; padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 90%, transparent); box-shadow: inset 0 1px var(--glass-specular); transition: border-color var(--dur-morph), box-shadow var(--dur-morph), background var(--dur-morph); }
.cnode.is-active { border-color: color-mix(in srgb, var(--cobalt) 45%, transparent); box-shadow: inset 0 1px var(--glass-specular), 0 0 0 4px color-mix(in srgb, var(--cobalt) 10%, transparent); }
.cnode.is-rejected { border-color: rgba(214,92,92,.6); box-shadow: 0 0 0 4px rgba(214,92,92,.12); }
.cnode.is-ok { border-color: rgba(66,160,105,.6); box-shadow: 0 0 0 4px rgba(66,160,105,.12); }
.cnode-k { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--quiet-blue); letter-spacing: .06em; }
.cnode h3 { margin-top: 6px; font-size: var(--text-base); font-weight: 600; }
.cnode p:not(.cnode-k) { margin-top: 6px; font-size: 12px; color: var(--faint-slate); line-height: 1.5; }
.cnode-rev, .cnode p b { font-family: var(--font-mono); color: var(--ink); }
.cnode-verdict { font-weight: 600 !important; color: var(--muted-slate) !important; }
.cnode-reject { grid-column: 3; margin-top: 12px; border-style: dashed; opacity: .55; }
.cnode-reject.is-rejected { opacity: 1; }
.contract-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.contract-links path { fill: none; stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 1.5; stroke-dasharray: 4 6; }
.contract-links path.is-lit { stroke: var(--cobalt); stroke-dasharray: none; }
.contract-links path.is-reject { stroke: rgba(214,92,92,.8); stroke-dasharray: none; }
.contract-packet { position: absolute; z-index: 2; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--cobalt)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 18%, transparent), 0 4px 12px rgba(55,107,255,.4); opacity: 0; translate: -50% -50%; pointer-events: none; }
.contract-packet.is-reject { background: radial-gradient(circle at 35% 30%, #fff, #d65c5c); box-shadow: 0 0 0 4px rgba(214,92,92,.18); }
.contract-controls { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.contract-log { font-family: var(--font-mono); font-size: 12px; color: var(--muted-slate); }
@media (max-width: 900px) { .contract-nodes { grid-template-columns: 1fr 1fr; } .cnode-reject { grid-column: auto; } .contract-links { display: none; } }

/* ---------- Runtime ---------- */
.runtime-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 32px; margin-top: 56px; align-items: start; }
.runtime-tree { padding: 24px; background: color-mix(in srgb, var(--solid-surface) 60%, transparent); display: grid; gap: 18px; }
.tree-svg { width: 100%; height: auto; font-family: var(--font-mono); font-size: 13px; }
.tree-links path { stroke: color-mix(in srgb, var(--ink) 20%, transparent); stroke-width: 1.5; stroke-dasharray: 4 6; transition: stroke var(--dur-morph); }
.tree-links path.is-lit { stroke: var(--cobalt); stroke-dasharray: 220; stroke-dashoffset: 220; animation: link-draw 600ms var(--ease-standard) forwards; }
.tree-links path.is-stop { stroke: #d65c5c; }
@keyframes link-draw { to { stroke-dashoffset: 0; } }
.tree-nodes rect { fill: color-mix(in srgb, var(--solid-surface) 95%, transparent); stroke: var(--hairline); stroke-width: 1; transition: stroke var(--dur-morph), fill var(--dur-morph); }
.tree-nodes text { fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }
.tree-nodes .t-small { font-size: 10px; fill: var(--faint-slate); }
.tree-nodes g.is-lit rect { stroke: var(--cobalt); fill: color-mix(in srgb, var(--cobalt) 10%, var(--solid-surface)); }
.tree-nodes g.is-dim { opacity: .35; }
.tree-nodes g.node-stop.is-lit rect { stroke: #d65c5c; fill: rgba(214,92,92,.12); }
.tree-nodes g.node-stop text { font-weight: 700; letter-spacing: .06em; }
.runtime-tree figcaption { display: grid; gap: 12px; }
.runtime-tree figcaption p { font-size: 13px; color: var(--muted-slate); line-height: 1.6; }
.runtime-notes { display: grid; gap: 16px; }
@media (max-width: 900px) { .runtime-layout { grid-template-columns: 1fr; } }

/* ---------- Themes ---------- */
.themes-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 40px; margin-top: 56px; align-items: start; }
.token-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11px; }
.token-readout div { display: flex; justify-content: space-between; gap: 8px; }
.token-readout dt { color: var(--faint-slate); }
.token-readout dd { margin: 0; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.token-readout dd::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--swatch, transparent); border: 1px solid var(--hairline); }
.token-readout dd.no-swatch::before { display: none; }

.theme-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  overflow: hidden;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  container-type: inline-size;
  transition: background var(--dur-overlay), color var(--dur-overlay);
}
.studio-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 66% 18%, var(--ambient), transparent 31%), radial-gradient(ellipse at 15% 86%, var(--warm), transparent 28%), linear-gradient(136deg, var(--studio-a), var(--studio-b) 49%, var(--studio-c)); transition: background var(--dur-overlay); }
.theme-frame .poster { position: absolute; left: 50%; top: 46%; translate: -50% -50%; --p-w: 34cqw; }
.island-static { position: absolute; }
.island-static-toolbar { left: 4cqw; top: 9.6cqw; }
.island-static-inspector { left: auto; right: 4cqw; top: 6.9cqw; width: 32cqw; }
.island-static-composer { left: 50%; top: auto; translate: -50% 0; bottom: 2.75cqw; width: 52cqw; grid-template-rows: auto; }
.island-static .island-grip { cursor: default; }
@media (max-width: 900px) { .themes-layout { grid-template-columns: 1fr; } }
.cap-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- Boundary ---------- */
.layers { display: grid; gap: 14px; margin-top: 56px; }
.layer { position: relative; max-width: 980px; padding: 20px 24px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 65%, transparent); box-shadow: inset 0 1px var(--glass-specular); }
.layer-k { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--quiet-blue); margin-bottom: 12px; }
.layer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.layer-row + .layer-row { margin-top: 12px; }
.layer-row > span { display: grid; gap: 2px; padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: var(--text-sm); border: 1px solid var(--hairline); background: color-mix(in srgb, var(--pale-ivory) 100%, transparent); }
.layer-row > span small { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--faint-slate); }
.layer-row i { font-style: normal; color: var(--faint-slate); }
.layer-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.layer-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--faint-slate); line-height: 1.5; }
.ipc-chip, .compiler-chip { font-family: var(--font-mono) !important; font-weight: 500 !important; color: var(--quiet-blue); border-color: color-mix(in srgb, var(--cobalt) 30%, transparent) !important; background: color-mix(in srgb, var(--cobalt) 8%, var(--solid-surface)) !important; }
.layer-main { border-color: color-mix(in srgb, var(--cobalt) 30%, transparent); background: color-mix(in srgb, var(--cobalt) 4%, var(--solid-surface)); }
.layer-external { margin-left: min(8%, 80px); border-style: dashed; }
.layer-external .layer-row > span { font-family: var(--font-mono); font-weight: 500; }
.invariants { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 40px; }
.invariants li { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radius-md); border: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--muted-slate); line-height: 1.6; background: color-mix(in srgb, var(--solid-surface) 55%, transparent); }
.invariants .icon { color: var(--quiet-blue); margin-top: 2px; }
@media (max-width: 720px) { .layer-row-3 { grid-template-columns: 1fr; } }

/* ---------- Providers ---------- */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 48px; }
.provider-card { padding: 26px; background: color-mix(in srgb, var(--solid-surface) 70%, transparent); }
.provider-k { font-size: var(--text-sm); font-weight: 600; color: var(--quiet-blue); }
.provider-card ul { display: grid; gap: 8px; margin-top: 14px; }
.provider-card li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hairline); font-size: var(--text-sm); }
.provider-card li span { color: var(--muted-slate); }
.provider-note { margin-top: 16px; font-size: var(--text-sm); color: var(--faint-slate); line-height: 1.6; }
.providers .fine-print { margin-top: 24px; }

/* ---------- Stack ---------- */
.marquee { margin-top: 40px; max-width: none !important; margin-inline: calc(-1 * var(--gutter)) !important; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track span { padding: 10px 18px; border-radius: 12px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--solid-surface) 65%, transparent); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
@keyframes marquee { to { translate: -50% 0; } }
.gates { margin-top: 32px; padding: 22px; border-radius: var(--radius-md); border: 1px solid var(--hairline); }
.gates-k { font-size: var(--text-sm); font-weight: 600; color: var(--quiet-blue); }

/* ---------- Honest ---------- */
.honest-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 44px; }
.honest-list li { display: flex; gap: 12px; padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--muted-slate); line-height: 1.65; }
.honest-list .icon { color: var(--faint-slate); margin-top: 3px; width: 14px; height: 14px; }

/* ---------- Download ---------- */
.download-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 40px; padding: clamp(28px, 4vw, 56px); background: color-mix(in srgb, var(--solid-surface) 78%, transparent); }
.download-card::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--iris) 16%, transparent), transparent 60%); filter: blur(30px); pointer-events: none; }
.download-copy { display: grid; gap: 22px; align-content: start; position: relative; }
.download-copy .h2 { margin-top: 0; }
.download-copy .lede { margin-top: 0; }
.download-build { position: relative; display: grid; gap: 12px; align-content: start; }
.build-k { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--faint-slate); }
@media (max-width: 900px) { .download-card { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: 1; padding: 60px var(--gutter) 40px; border-top: 1px solid var(--hairline); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; max-width: 1440px; margin-inline: auto; font-size: var(--text-sm); color: var(--muted-slate); line-height: 1.7; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 610; color: var(--ink); }
.footer-brand img { border-radius: 7px; }
.footer-tag { color: var(--faint-slate); }
.footer-k { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; color: var(--faint-slate); margin-bottom: 6px; }
.footer-grid b { color: var(--ink); font-weight: 600; }
.footer-fine { font-size: var(--text-xs); color: var(--faint-slate); margin-top: 6px; }
.footer-line { max-width: 1440px; margin: 40px auto 0; font-size: var(--text-xs); color: var(--faint-slate); }