:root {
  color-scheme: dark light;
  --ink: #f3f1ec;
  --muted: #969897;
  --dim: #666a69;
  --black: #000000;
  --panel: #080808;
  --panel-strong: #101010;
  --line: rgba(243, 241, 236, 0.11);
  --line-strong: rgba(243, 241, 236, 0.2);
  --accent: #f3f1ec;
  --accent-strong: #ffffff;
  --accent-soft: rgba(243, 241, 236, 0.12);
  --progress: rgba(243, 241, 236, 0.82);
  --mint: var(--accent);
  --coral: var(--accent);
  --signal: var(--accent);
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --motion-feedback: 160ms;
  --motion-surface: 240ms;
  --system-bar-height: 64px;
  --surface-header-height: 78px;
  --surface-content-max: 1760px;
  --surface-dock-clearance: 84px;
  --activity-rail-width: 380px;
  --chrome: rgba(0, 0, 0, 0.96);
  --hover-surface: rgba(243, 241, 236, 0.06);
  --panel-overlay: rgba(8, 8, 8, 0.97);
  --surface-overlay: rgba(0, 0, 0, 0.9);
  --control-surface: #0c0c0c;
  --floating-shadow: rgba(0, 0, 0, 0.62);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--black); }
body { color: var(--ink); font-family: var(--sans); font-size: 16px; overflow: hidden; }
.os,
.os * {
  -webkit-user-select: none;
  user-select: none;
}
.os input,
.os textarea,
.os [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.os * { scrollbar-color: var(--dim) transparent; scrollbar-width: thin; }
.os *::-webkit-scrollbar { width: 8px; height: 8px; }
.os *::-webkit-scrollbar-track { background: transparent; }
.os *::-webkit-scrollbar-thumb { border: 2px solid var(--panel); border-radius: 999px; background: var(--dim); }
.os *::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.os {
  width: 100%;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  background: var(--black);
  color: var(--ink);
  isolation: isolate;
}

.os[data-theme="light"] {
  color-scheme: light;
  --ink: #101210;
  --muted: #5a5f5a;
  --dim: #747974;
  --black: #f7f7f4;
  --panel: #ffffff;
  --panel-strong: #eceeea;
  --line: rgba(16, 18, 16, 0.13);
  --line-strong: rgba(16, 18, 16, 0.25);
  --accent: #101210;
  --accent-strong: #000000;
  --accent-soft: rgba(16, 18, 16, 0.1);
  --progress: rgba(16, 18, 16, 0.82);
  --chrome: rgba(247, 247, 244, 0.97);
  --hover-surface: rgba(16, 18, 16, 0.06);
  --panel-overlay: rgba(255, 255, 255, 0.97);
  --surface-overlay: rgba(255, 255, 255, 0.92);
  --control-surface: #ffffff;
  --floating-shadow: rgba(16, 18, 16, 0.18);
}

.os[data-theme="light"] .mascot-art rect { fill: var(--ink); }
.os[data-theme="light"] .wordmark img,
.os[data-theme="light"] .dock-presence img { filter: invert(1); }

.system-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: var(--system-bar-height);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 28px;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-surface) var(--motion-ease-out), visibility 0s linear var(--motion-surface);
}

.os[data-scene="workspace"] .system-bar,
.os[data-scene="decision"] .system-bar,
.os[data-scene="complete"] .system-bar,
.os[data-scene="stopped"] .system-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.wordmark, .system-tools button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.wordmark {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.15em;
}

.wordmark img { width: 22px; height: 18px; object-fit: contain; }

.system-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font: 500 13px/1 var(--mono);
}

.system-tools button { padding: 8px 0; color: inherit; }
.persistent-media {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink) !important;
}
.persistent-media[hidden] { display: none; }
.persistent-media > span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persistent-media-mark { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 18px; height: 18px; border: 1px solid var(--line-strong); }
.persistent-media-mark b { display: block; width: 2px; height: 8px; background: currentColor; }
.persistent-media.is-paused .persistent-media-mark { padding-left: 2px; }
.persistent-media.is-paused .persistent-media-mark b:first-child { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid currentColor; background: transparent; }
.persistent-media.is-paused .persistent-media-mark b:last-child { display: none; }
.activity-toggle { display: inline-flex; align-items: center; gap: 8px; }
.activity-toggle > i { display: grid; gap: 3px; width: 16px; }
.activity-toggle > i b { display: block; height: 1px; background: currentColor; }
.activity-toggle > i b:nth-child(2) { width: 11px; }
.activity-badge { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; background: var(--ink); color: var(--black); font: 700 12px/1 var(--mono); }

.experience { position: relative; width: 100%; height: 100%; }
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-surface) var(--motion-ease-out), visibility 0s linear var(--motion-surface);
}

.os[data-capture="true"] .scene,
.os[data-capture="true"] .adaptive-surface,
.os[data-capture="true"] .intent-dock,
.os[data-capture="true"] .activity-rail {
  transition: none !important;
}
.os[data-capture="true"] *,
.os[data-capture="true"] *::before,
.os[data-capture="true"] *::after { animation: none !important; }

.os[data-scene="arrival"] [data-view="arrival"],
.os[data-scene="boot"] [data-view="boot"],
.os[data-scene="theme"] [data-view="theme"],
.os[data-scene="briefing"] [data-view="briefing"],
.os[data-scene="workspace"] [data-view="workspace"],
.os[data-scene="decision"] [data-view="workspace"],
.os[data-scene="complete"] [data-view="workspace"],
.os[data-scene="stopped"] [data-view="workspace"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.boot-scene { display: grid; place-items: center; }
.boot-presence { display: grid; justify-items: center; text-align: center; }
.boot-presence .mascot-field { width: 620px; height: 450px; }
.boot-presence .mascot-art { width: 360px; height: 290px; perspective: 900px; }
.boot-presence > p { margin: 8px 0 14px; color: var(--ink); font: 750 16px/1 var(--mono); letter-spacing: 0.2em; }
.boot-presence > strong { min-height: 22px; color: var(--muted); font-size: 15px; font-weight: 500; }
.boot-progress { width: 320px; height: 2px; margin-top: 24px; overflow: hidden; background: var(--line); }
.boot-progress i { display: block; width: 100%; height: 100%; background: var(--progress); transform: scaleX(0.06); transform-origin: left center; transition: transform 700ms var(--motion-ease-out); will-change: transform; }
.mascot-field[data-motion="shaping"] .mascot-art svg { animation: none; transform-style: preserve-3d; }

.eyebrow {
  margin: 0;
  color: var(--muted);
  font: 700 13px/1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.button {
  min-height: 46px;
  border-radius: 2px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  font: 650 14px/1 var(--sans);
  transition: background-color var(--motion-feedback) ease, color var(--motion-feedback) ease, border-color var(--motion-feedback) ease;
}

.button:hover { border-color: var(--ink); }
.button-primary { color: var(--black); background: var(--ink); border-color: var(--ink); }
.button-primary:hover { color: #ffffff; background: #000000; border-color: #ffffff; }
.button-quiet { color: var(--ink); background: transparent; }
.button-quiet:hover { background: var(--hover-surface); }
.primary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* First contact */
.arrival-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 54px max(32px, calc((100vw - 1200px) / 2));
  text-align: center;
}

.arrival-presence { display: grid; place-items: center; min-width: 0; }
.arrival-presence .mascot-field { width: 320px; height: 230px; }
.arrival-presence .mascot-art { width: 190px; height: 154px; }
.arrival-copy { max-width: 1040px; }
.arrival-copy h1 {
  max-width: 1040px;
  margin: 18px 0 24px;
  font-size: 54px;
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 650;
}

.arrival-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: 0 auto 34px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.arrival-copy .primary-actions { justify-content: center; }

.sound-mark { display: inline-flex; align-items: center; gap: 2px; margin-right: 9px; height: 15px; }
.sound-mark i { display: block; width: 2px; background: currentColor; }
.sound-mark i:nth-child(1) { height: 5px; }
.sound-mark i:nth-child(2) { height: 13px; }
.sound-mark i:nth-child(3) { height: 8px; }

/* Theme selection */
.theme-scene {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(520px, 1.22fr);
  align-items: center;
  gap: clamp(48px, 6vw, 112px);
  padding: 48px max(64px, calc((100vw - 1500px) / 2));
}

.theme-presence { display: grid; place-items: center; min-width: 0; }
.theme-presence .mascot-field { width: 390px; height: 310px; }
.theme-copy { width: min(100%, 720px); }
.theme-copy h2 {
  max-width: 680px;
  margin: 18px 0 18px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 620;
  text-wrap: balance;
}
.theme-copy > p:not(.eyebrow) { max-width: 62ch; margin: 0 0 30px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.theme-choices { border-top: 1px solid var(--line-strong); }
.theme-choice {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 17px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-feedback) ease, background-color var(--motion-feedback) ease;
}
.theme-choice:hover { color: var(--ink); background: var(--hover-surface); }
.theme-choice.is-selected { color: var(--ink); }
.theme-choice.is-selected::before {
  content: "";
  width: 8px;
  height: 8px;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  border-radius: 50%;
  background: var(--accent);
}
.theme-choice span { grid-column: 1; grid-row: 1; font-size: 18px; font-weight: 620; }
.theme-choice small { grid-column: 1; grid-row: 2; color: var(--muted); font: 500 13px/1.4 var(--mono); }
.theme-choice.is-selected small { color: currentColor; }
/* Shared living mascot */
.mascot-field {
  position: relative;
  width: 440px;
  height: 340px;
  display: grid;
  place-items: center;
  contain: layout paint;
}

.mascot-art { position: relative; z-index: 2; width: 270px; height: 218px; }
.mascot-art svg, .mascot-art img { width: 100%; height: 100%; overflow: visible; }
.mascot-art svg { animation: none; }
.mascot-art rect {
  transform-box: fill-box;
  transform-origin: center;
  will-change: opacity, transform;
  animation-play-state: running;
}

.mascot-field[data-motion="breathing"] .mascot-art rect {
  animation: idle-pixel-wave 7.2s var(--motion-ease-in-out) infinite;
  animation-delay: var(--pixel-delay-idle, 0s);
}

.mascot-field[data-motion="listening"] .mascot-art rect {
  animation: listening-pixel-wave 3.8s var(--motion-ease-in-out) infinite;
  animation-delay: var(--pixel-delay-x, 0s);
}

.mascot-field[data-motion="speaking"] .mascot-art rect {
  animation: speaking-pixel-wave 1.35s var(--motion-ease-in-out) infinite;
  animation-delay: var(--pixel-delay-y, 0s);
}

.mascot-field[data-motion="working"] .mascot-art rect {
  animation: working-pixel-wave 3.4s var(--motion-ease-in-out) infinite;
  animation-delay: var(--pixel-delay-diagonal, 0s);
}

/* Narrated context */
.briefing-scene {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(620px, 1.2fr);
  align-items: center;
  gap: clamp(48px, 6vw, 112px);
  padding: 48px max(64px, calc((100vw - 1660px) / 2)) 84px;
}

.briefing-presence { display: grid; place-items: center; align-content: center; }
.briefing-presence .mascot-field { width: 390px; height: 310px; }
.voice-label { margin: 0; color: var(--muted); font: 500 13px/1 var(--mono); }
.briefing-story { max-width: 920px; }
.briefing-story h2 {
  max-width: 880px;
  margin: 19px 0 34px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 600;
}

.context-sequence { list-style: none; margin: 0 0 30px; padding: 0; }
.context-sequence li {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 130px;
  gap: 18px;
  align-items: center;
  min-height: 58px;
  border-top: 1px solid var(--line);
  opacity: 0.25;
  transition: opacity var(--motion-surface) var(--motion-ease-out);
}
.context-sequence li:last-child { border-bottom: 1px solid var(--line); }
.context-sequence li.is-visible { opacity: 1; }
.context-sequence span, .context-sequence small { color: var(--dim); font: 500 13px/1.4 var(--mono); }
.context-sequence strong { font-size: 16px; font-weight: 550; }
.context-sequence small { text-align: right; }
.briefing-choice { opacity: 0; transition: opacity var(--motion-surface) var(--motion-ease-out); }
.briefing-choice.is-visible { opacity: 1; }
.briefing-choice > p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.caption {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: min(760px, calc(100vw - 48px));
  min-height: 22px;
  transform: translateX(-50%);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Focused OS workspace */
.workspace-scene {
  inset: 64px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.workspace-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 34px 48px 160px;
  overflow: hidden;
}

.workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.workspace-heading h2 { margin: 10px 0 0; font-size: 28px; line-height: 1.1; font-weight: 580; }
.detail-toggle {
  display: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  padding: 5px 0;
  color: var(--muted);
  cursor: pointer;
  font: 500 14px/1 var(--mono);
}

.task-stage {
  align-self: stretch;
  width: min(1060px, 100%);
  margin: 0 auto;
  padding: 24px 0;
  min-height: 0;
  display: grid;
  align-content: center;
  overflow: hidden auto;
}

.os[data-scene="decision"] .workspace-heading,
.os[data-scene="complete"] .workspace-heading { display: none; }
.os[data-scene="decision"] .task-stage,
.os[data-scene="complete"] .task-stage { align-content: start; padding-top: 36px; }
.os[data-scene="complete"] .task-stage {
  grid-template-rows: minmax(0, 1fr);
  width: min(var(--surface-content-max), 100%);
  overflow: hidden;
}

.task-presence { display: flex; align-items: center; gap: 24px; }
.task-presence .mascot-field { flex: 0 0 auto; width: 190px; height: 148px; }
.task-presence .mascot-art { width: 126px; height: 102px; }
.task-presence span { display: block; margin-bottom: 9px; color: var(--muted); font: 700 14px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.task-presence strong { display: block; max-width: 900px; font-size: 42px; line-height: 1.04; font-weight: 580; }

.task-progress { display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: center; gap: 18px; margin: 24px 0 22px; }
.progress-track { height: 2px; background: var(--line); overflow: hidden; }
.progress-track i { display: block; width: 100%; height: 100%; background: var(--progress); transform: scaleX(0.12); transform-origin: left center; transition: transform 700ms var(--motion-ease-out); will-change: transform; }
.task-progress span { color: var(--muted); font: 600 13px/1 var(--mono); text-align: right; }
.live-reason { padding-left: 24px; border-left: 2px solid var(--line-strong); }
.live-reason p { margin: 0 0 7px; font-size: 17px; line-height: 1.45; }
.live-reason small { color: var(--muted); font-size: 13px; line-height: 1.5; }

.decision, .completion { display: none; margin-top: 26px; padding: 26px 0 0 24px; border-left: 2px solid var(--line-strong); }
.decision[aria-hidden="false"] { display: block; animation: reveal var(--motion-surface) var(--motion-ease-out) both; }
.completion[aria-hidden="false"] { display: block; animation: none; }
.decision h3, .completion h3 { max-width: 760px; margin: 12px 0; font-size: 32px; line-height: 1.1; font-weight: 590; }
.decision > p:not(.eyebrow), .completion > p:not(.eyebrow) { max-width: 680px; margin: 0 0 22px; color: var(--muted); line-height: 1.55; }
.completion {
  position: relative;
  min-height: 0;
  max-height: 100%;
  border-left: 0;
  padding-left: 0;
  padding-right: 12px;
  padding-bottom: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.os[data-scene="complete"] .task-presence,
.os[data-scene="complete"] .task-progress { display: none; }
.receipt-button {
  border: 0;
  border-radius: 5px;
  background: var(--hover-surface);
  padding: 10px 12px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 140ms var(--motion-ease-out);
}
.receipt-button:hover,
.receipt-button:focus-visible { background: var(--panel-strong); }
.receipt-button span { margin-left: 10px; color: var(--muted); font: 500 13px/1 var(--mono); }

.capability-launcher {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 28px;
}
.capability-launcher button {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "icon category"
    "icon title"
    "icon description";
  column-gap: 14px;
  align-content: start;
  min-width: 0;
  min-height: 112px;
  border: 0;
  border-radius: 6px;
  padding: 18px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--motion-feedback) var(--motion-ease-out), color var(--motion-feedback) var(--motion-ease-out), transform var(--motion-feedback) var(--motion-ease-out);
}
.capability-launcher button:hover,
.capability-launcher button:focus-visible { background: var(--ink); color: var(--black); transform: translate(0, -2px); }
.capability-launcher button:active { transform: translate(0, 0); }
.capability-launcher button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.capability-launcher strong, .capability-launcher span { display: block; }
.capability-launcher small {
  grid-area: category;
  display: block;
  margin-bottom: 7px;
  color: var(--dim);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.capability-launcher strong { grid-area: title; font-size: 17px; line-height: 1.22; font-weight: 620; }
.capability-launcher span { grid-area: description; max-width: 250px; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.38; }
.capability-icon {
  grid-area: icon;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 5px;
  background: var(--hover-surface);
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background-color 140ms var(--motion-ease-out), color 140ms var(--motion-ease-out);
}
.capability-launcher button:hover .capability-icon,
.capability-launcher button:focus-visible .capability-icon {
  background: var(--black);
  color: var(--ink);
}
.capability-launcher button:hover :is(small, span),
.capability-launcher button:focus-visible :is(small, span) { color: var(--black); }

.activity-rail {
  position: fixed;
  z-index: 34;
  top: var(--system-bar-height);
  right: 0;
  width: var(--activity-rail-width);
  min-width: 0;
  display: block;
  padding: 30px 28px 20px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  height: calc(100dvh - var(--system-bar-height));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(243, 241, 236, 0.26) transparent;
  scrollbar-width: thin;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--motion-surface) var(--motion-ease-out), opacity var(--motion-surface) var(--motion-ease-out), visibility 0s linear var(--motion-surface);
}
.activity-rail::-webkit-scrollbar { width: 7px; }
.activity-rail::-webkit-scrollbar-track { background: transparent; }
.activity-rail::-webkit-scrollbar-thumb { background: var(--dim); border: 2px solid var(--panel); border-radius: 999px; }
.activity-rail::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.os[data-activity-open="true"] .activity-rail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition-delay: 0s;
}
.activity-rail > header { position: sticky; z-index: 2; top: -30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: -30px -28px 10px; padding: 30px 28px 18px; background: var(--panel-overlay); }
.activity-rail h2 { margin: 8px 0 0; font-size: 22px; line-height: 1.1; font-weight: 580; }
.activity-rail > header > span { color: var(--muted); font: 500 13px/1 var(--mono); }
.activity-list { list-style: none; display: grid; gap: 8px; min-height: 0; margin: 0; padding: 0 0 8px; }
.activity-list li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 94px; padding: 13px 0; }
.activity-list img { width: 30px; height: 30px; object-fit: contain; }
.activity-list li > div { min-width: 0; }
.activity-list li > div > span { display: block; margin-bottom: 6px; color: var(--dim); font: 500 12px/1 var(--mono); }
.activity-list strong { display: block; overflow: hidden; font-size: 16px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
.activity-list p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.system-readout { margin-top: 12px; border-top: 1px solid var(--line); }
.system-readout summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0; cursor: pointer; list-style: none; }
.system-readout summary::-webkit-details-marker { display: none; }
.system-readout summary > span { font-size: 15px; font-weight: 570; }
.system-readout summary > small { color: var(--dim); font: 500 12px/1.2 var(--mono); text-align: right; }
.system-readout summary::after { content: "+"; flex: 0 0 auto; color: var(--muted); font: 500 18px/1 var(--mono); }
.system-readout[open] summary::after { content: "−"; }
.system-readout-body { padding: 5px 0 18px; }
.readout-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.readout-heading > span { color: var(--dim); font: 500 13px/1 var(--mono); }
.telemetry-stack { display: grid; gap: 17px; margin-top: 22px; }
.telemetry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.telemetry-row > span { color: var(--muted); font-size: 15px; }
.telemetry-row > strong { font: 600 13px/1 var(--mono); }
.telemetry-row > div {
  position: relative;
  grid-column: 1 / -1;
  height: 22px;
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--line-strong);
}
.telemetry-trace > i { position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--ink); opacity: 0.82; }
.telemetry-trace > b { height: 18px; display: flex; align-items: end; gap: 4px; opacity: 0.55; }
.telemetry-trace > b span { display: block; background: var(--ink); transform-origin: center bottom; }

/* Each trace carries the visual grammar of the resource it measures. */
.telemetry-gpu .telemetry-trace > b { gap: 3px; }
.telemetry-gpu .telemetry-trace > b span { width: 2px; height: 46%; animation: telemetry-gpu 840ms steps(4, end) infinite; }
.telemetry-gpu .telemetry-trace > b span:nth-child(2) { height: 78%; animation-delay: -720ms; }
.telemetry-gpu .telemetry-trace > b span:nth-child(3) { height: 38%; animation-delay: -600ms; }
.telemetry-gpu .telemetry-trace > b span:nth-child(4) { height: 94%; animation-delay: -480ms; }
.telemetry-gpu .telemetry-trace > b span:nth-child(5) { height: 62%; animation-delay: -360ms; }
.telemetry-gpu .telemetry-trace > b span:nth-child(6) { height: 30%; animation-delay: -240ms; }
.telemetry-gpu .telemetry-trace > b span:nth-child(7) { height: 82%; animation-delay: -120ms; }
.telemetry-gpu .telemetry-trace > b span:nth-child(8) { height: 52%; }

.telemetry-memory .telemetry-trace > b { height: 7px; align-self: end; gap: 2px; }
.telemetry-memory .telemetry-trace > b span { width: 15px; height: 100%; opacity: 0.28; animation: telemetry-memory 3.6s ease-in-out infinite; }
.telemetry-memory .telemetry-trace > b span:nth-child(-n+5) { opacity: 0.78; }
.telemetry-memory .telemetry-trace > b span:nth-child(6) { animation-delay: -2.4s; }
.telemetry-memory .telemetry-trace > b span:nth-child(7) { animation-delay: -1.2s; }
.telemetry-memory .telemetry-trace > b span:nth-child(8) { animation-delay: -0.4s; }

.telemetry-temperature .telemetry-trace > b { gap: 2px; }
.telemetry-temperature .telemetry-trace > b span { width: 5px; animation: telemetry-temperature 4.8s var(--motion-ease-in-out) infinite; }
.telemetry-temperature .telemetry-trace > b span:nth-child(1),
.telemetry-temperature .telemetry-trace > b span:nth-child(8) { height: 28%; }
.telemetry-temperature .telemetry-trace > b span:nth-child(2),
.telemetry-temperature .telemetry-trace > b span:nth-child(7) { height: 42%; animation-delay: -600ms; }
.telemetry-temperature .telemetry-trace > b span:nth-child(3),
.telemetry-temperature .telemetry-trace > b span:nth-child(6) { height: 58%; animation-delay: -1.2s; }
.telemetry-temperature .telemetry-trace > b span:nth-child(4),
.telemetry-temperature .telemetry-trace > b span:nth-child(5) { height: 72%; animation-delay: -1.8s; }

.telemetry-context .telemetry-trace > b { gap: 2px; }
.telemetry-context .telemetry-trace > b span { width: 10px; animation: telemetry-context 3.2s linear infinite; }
.telemetry-context .telemetry-trace > b span:nth-child(1) { height: 18%; }
.telemetry-context .telemetry-trace > b span:nth-child(2) { height: 28%; }
.telemetry-context .telemetry-trace > b span:nth-child(3) { height: 38%; }
.telemetry-context .telemetry-trace > b span:nth-child(4) { height: 48%; }
.telemetry-context .telemetry-trace > b span:nth-child(5) { height: 58%; }
.telemetry-context .telemetry-trace > b span:nth-child(6) { height: 68%; }
.telemetry-context .telemetry-trace > b span:nth-child(7) { height: 78%; }
.telemetry-context .telemetry-trace > b span:nth-child(8) { height: 88%; }
.system-readout .runtime-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 0; }
.system-readout .runtime-facts div { min-width: 0; padding: 12px 10px 4px 0; }
.system-readout dt { margin-bottom: 7px; color: var(--dim); font: 500 13px/1 var(--mono); }
.system-readout dd { margin: 0; color: var(--ink); font-size: 14px; }

@keyframes telemetry-gpu {
  0%, 100% { transform: scaleY(0.36); opacity: 0.35; }
  50% { transform: scaleY(1); opacity: 0.95; }
}
@keyframes telemetry-memory {
  0%, 72%, 100% { transform: scaleX(1); opacity: 0.3; }
  82% { transform: scaleX(0.72); opacity: 0.8; }
}
@keyframes telemetry-temperature {
  0%, 100% { transform: scaleY(0.88); opacity: 0.42; }
  50% { transform: scaleY(1.08); opacity: 0.72; }
}
@keyframes telemetry-context {
  0%, 88% { opacity: 0.3; }
  94% { opacity: 0.9; }
  100% { opacity: 0.3; }
}

.rail-media {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.rail-media[hidden] { display: none; }
.rail-media > div { min-width: 0; }
.rail-media strong, .rail-media > div > span { display: block; }
.rail-media strong { margin-top: 8px; font-size: 17px; font-weight: 600; }
.rail-media > div > span { margin-top: 5px; color: var(--muted); font-size: 14px; }
.rail-media button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  padding: 8px 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 600 13px/1 var(--mono);
}
.rail-media.is-paused .persistent-media-mark { padding-left: 2px; }
.rail-media.is-paused .persistent-media-mark b:first-child { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid currentColor; background: transparent; }
.rail-media.is-paused .persistent-media-mark b:last-child { display: none; }

/* Generated surfaces replace the workspace. They are not windows or cards. */
.adaptive-surface {
  position: fixed;
  z-index: 20;
  inset: var(--system-bar-height) 0 0;
  container-name: adaptive-surface;
  container-type: inline-size;
  overflow: hidden;
  background: var(--black);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* V-05: `right` is layout-affecting (like width/height/top/left, already
     banned from transitions elsewhere in this codebase) and was
     transitioning here by oversight -- the analogous .intent-dock
     left/width shift when the activity rail opens (below) has never
     animated, it snaps. Matching that established, working convention
     rather than inventing a new transform-based approach for this one
     case. */
  transition: opacity var(--motion-surface) var(--motion-ease-out), visibility 0s linear var(--motion-surface);
}
.adaptive-surface.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
/* A-01: an open surface visually covers the active scene but does not
   remove it from the DOM, and the active .scene[data-view] match keeps it
   visibility:visible on its own. Without this, a scene's own heading
   ("Choose what to do.") stays exposed in the accessibility tree at the
   same time as the open surface's headings -- confirmed via a real
   Playwright accessibility-tree snapshot, not just source reading. Source
   order places this after the .os[data-scene="x"] [data-view="x"] rules
   above so it wins the specificity tie without needing !important. */
.os[data-surface] .scene {
  visibility: hidden;
}
/* Command Field reveal grammar (Direction B): a conditional zone forms by
   clip-path growing from the edge it is anchored to, instead of only fading
   in, matching "surface formation" in the six-frame golden-journey
   storyboard. The persistent anchors (system bar, dock) never use this
   rule — only conditional zones that fully appear and dissolve do. Applied
   at three sites sharing the same --motion-surface/--motion-ease-out
   tokens and open/close triad (opacity, visibility, clip-path,
   transition-delay: 0s on open only): the Meeting surface (grows from the
   dock, upward), the command palette (below, grows from the dock, upward),
   and the Activity rail (below, grows from its right screen edge). Reduced
   motion already collapses every transition to 120ms via the global
   @media rule below, so no separate override is needed at any site. */
.adaptive-surface[data-surface="meeting"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--motion-surface) var(--motion-ease-out), opacity var(--motion-surface) var(--motion-ease-out), visibility 0s linear var(--motion-surface);
}
.adaptive-surface[data-surface="meeting"].is-open {
  clip-path: inset(0 0 0 0);
}
.adaptive-header {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  min-height: var(--surface-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--black);
}
.adaptive-header strong { display: block; margin-top: 7px; font-size: 16px; font-weight: 580; }
.adaptive-header button {
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 7px 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 600 13px/1 var(--mono);
}
.adaptive-header button:hover { color: var(--ink); }
.surface-view {
  position: absolute;
  inset: var(--surface-header-height) 0 0;
  display: none;
  min-height: 0;
  overflow: hidden auto;
}
.adaptive-surface[data-surface="music"] [data-surface-view="music"],
.adaptive-surface[data-surface="media"] [data-surface-view="media"],
.adaptive-surface[data-surface="memory"] [data-surface-view="memory"],
.adaptive-surface[data-surface="work"] [data-surface-view="work"],
.adaptive-surface[data-surface="files"] [data-surface-view="files"],
.adaptive-surface[data-surface="inbox"] [data-surface-view="inbox"],
.adaptive-surface[data-surface="connections"] [data-surface-view="connections"],
.adaptive-surface[data-surface="car"] [data-surface-view="car"],
.adaptive-surface[data-surface="image"] [data-surface-view="image"],
.adaptive-surface[data-surface="access"] [data-surface-view="access"] { display: grid; }

/* Memory is a canvas-backed projection of source records, not a DOM node cloud. */
.memory-surface {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px;
  padding: 28px 34px 22px;
  overflow: hidden;
}
.memory-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
}
.memory-intro h2 { margin: 8px 0 6px; font-size: clamp(30px, 2.3vw, 44px); line-height: 1; font-weight: 620; }
.memory-intro > div > p:last-child { max-width: 680px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.memory-counts { display: flex; gap: clamp(26px, 3vw, 58px); margin: 0; }
.memory-counts div { min-width: 74px; }
.memory-counts dt { color: var(--dim); font: 600 12px/1.2 var(--mono); text-transform: uppercase; }
.memory-counts dd { margin: 7px 0 0; color: var(--ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.memory-workbench {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 22vw);
  grid-template-rows: auto minmax(0, 1fr);
}
.memory-controls {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  background: var(--panel);
}
.memory-search { width: min(330px, 28vw); min-height: 42px; display: flex; align-items: center; gap: 10px; border-radius: 4px; padding: 0 13px; background: var(--panel-strong); }
.memory-search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--dim); }
.memory-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.memory-search input::placeholder { color: var(--dim); }
.memory-filter-list { min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.memory-filter-list::-webkit-scrollbar { display: none; }
.memory-filter-list button,
.memory-fit {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 9px 11px;
  color: var(--dim);
  cursor: pointer;
  font: 600 12px/1 var(--mono);
}
.memory-filter-list button:hover,
.memory-filter-list button:focus-visible,
.memory-filter-list button.is-active,
.memory-fit:hover,
.memory-fit:focus-visible { color: var(--ink); }
.memory-filter-list button.is-active { border-radius: 4px; background: var(--panel-strong); }
.memory-fit { margin-left: auto; border-radius: 4px; background: var(--panel-strong); }
.memory-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--black); }
.memory-canvas { position: absolute; inset: 0; min-height: 420px; cursor: grab; }
.memory-canvas:active { cursor: grabbing; }
.memory-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); font: 600 13px/1 var(--mono); }
.memory-loading i { width: 34px; height: 34px; border: 1px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%; animation: memory-load 800ms linear infinite; }
.memory-loading strong { color: var(--ink); font: 620 18px/1.2 var(--sans); }
.memory-legend {
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  max-width: calc(100% - 36px);
  pointer-events: none;
}
.memory-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--dim); font: 600 12px/1 var(--mono); text-transform: uppercase; }
.memory-legend i { width: 5px; height: 5px; display: block; border-radius: 50%; background: var(--muted); }
.memory-time { position: absolute; z-index: 2; right: 18px; bottom: 17px; width: min(300px, calc(100% - 36px)); padding: 11px 14px; background: var(--panel-overlay); backdrop-filter: blur(10px); }
.memory-time div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: var(--dim); font: 600 12px/1 var(--mono); }
.memory-time strong { color: var(--muted); text-align: center; font-weight: 600; }
.memory-time input { width: 100%; height: 18px; margin-top: 7px; appearance: none; background: transparent; cursor: pointer; }
.memory-time input::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); }
.memory-time input::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; appearance: none; border: 0; border-radius: 50%; background: var(--ink); }
.memory-time input::-moz-range-track { height: 1px; background: var(--line-strong); }
.memory-time input::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--ink); }
.memory-inspector { min-width: 0; overflow: hidden auto; padding: 28px 26px 34px; background: var(--panel); scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.memory-inspector-empty { min-height: 100%; display: grid; align-content: center; }
.memory-inspector-empty h3 { max-width: 280px; margin: 12px 0 14px; font-size: 27px; line-height: 1.08; }
.memory-inspector-empty > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.memory-inspector-record > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.memory-inspector-record > header div { display: flex; flex-direction: column; gap: 6px; }
.memory-inspector-record > header span { color: var(--ink); font: 650 12px/1 var(--mono); text-transform: uppercase; }
.memory-inspector-record > header small { color: var(--dim); font: 600 12px/1 var(--mono); }
.memory-inspector-record > header button { border: 0; border-radius: 4px; background: var(--panel-strong); padding: 8px 10px; color: var(--dim); cursor: pointer; font: 600 12px/1 var(--mono); }
.memory-inspector-record h3 { margin: 24px 0 14px; font-size: clamp(24px, 1.9vw, 34px); line-height: 1.08; }
.memory-inspector-record > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.memory-inspector-record dl { display: grid; gap: 6px; margin: 26px 0 0; }
.memory-inspector-record dl div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 11px 12px; border-radius: 4px; background: var(--panel-strong); }
.memory-inspector-record dt { color: var(--dim); font: 600 12px/1.4 var(--mono); text-transform: uppercase; }
.memory-inspector-record dd { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.memory-inspector-record > section { margin-top: 28px; }
.memory-inspector-record ol { display: grid; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; }
.memory-inspector-record li { border-radius: 4px; background: var(--panel-strong); }
.memory-inspector-record li button { width: 100%; border: 0; border-radius: inherit; background: transparent; padding: 11px 12px; color: inherit; cursor: pointer; text-align: left; }
.memory-inspector-record li span,
.memory-inspector-record li strong { display: block; }
.memory-inspector-record li span { color: var(--dim); font: 600 12px/1 var(--mono); text-transform: uppercase; }
.memory-inspector-record li strong { margin-top: 5px; font-size: 12px; font-weight: 570; }
.memory-focus { width: 100%; margin-top: 18px; border: 0; border-radius: 4px; background: #e7e8e4; padding: 12px 14px; color: #050605; cursor: pointer; font: 620 12px/1 var(--mono); }
.memory-focus:hover,
.memory-focus:focus-visible { background: #fff; }

.os[data-theme="light"] .memory-focus { background: var(--ink); color: var(--black); }
.os[data-theme="light"] .memory-focus:hover,
.os[data-theme="light"] .memory-focus:focus-visible { background: #000000; }

@keyframes memory-load { to { transform: rotate(360deg); } }

.work-surface {
  grid-template-columns: minmax(360px, 0.55fr) minmax(680px, 1.45fr);
  align-items: stretch;
  gap: clamp(48px, 6vw, 110px);
  padding: 58px max(64px, calc((100vw - 1760px) / 2)) 112px;
}
.work-intent { align-self: center; max-width: 640px; }
.work-intent h2 { margin: 16px 0 22px; font-size: 46px; line-height: 1.02; font-weight: 620; }
.work-intent > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.work-inputs { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.work-inputs span { color: var(--muted); font: 600 13px/1.4 var(--mono); }
.sheet-workspace { align-self: center; min-width: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.sheet-workspace > header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; border-bottom: 1px solid var(--line); }
.sheet-workspace > header span, .sheet-workspace > header strong { display: block; }
.sheet-workspace > header span { color: var(--dim); font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.sheet-workspace > header strong { margin-top: 7px; font-size: 18px; font-weight: 610; }
.sheet-workspace > header p { margin: 0; color: var(--muted); font-size: 14px; }
.sheet-table-wrap { overflow-x: auto; }
.sheet-workspace table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sheet-workspace th, .sheet-workspace td { min-width: 130px; padding: 18px 16px; border-bottom: 1px solid var(--line); text-align: right; font-size: 17px; }
.sheet-workspace th:first-child, .sheet-workspace td:first-child { padding-left: 0; text-align: left; }
.sheet-workspace thead th { color: var(--dim); font: 600 13px/1 var(--mono); text-transform: uppercase; }
.sheet-workspace tbody th { color: var(--ink); font-weight: 580; }
.sheet-workspace .variance { color: var(--ink); font-weight: 650; }
.work-finding { padding: 28px 0 30px; }
.work-finding h3 { max-width: 780px; margin: 12px 0 12px; font-size: 28px; line-height: 1.12; font-weight: 600; }
.work-finding > p:not(.eyebrow) { max-width: 760px; margin: 0 0 20px; color: var(--muted); font-size: 16px; line-height: 1.55; }

.files-surface {
  grid-template-columns: minmax(320px, 0.65fr) minmax(520px, 1.05fr) minmax(300px, 0.7fr);
  align-items: center;
  gap: clamp(36px, 4vw, 78px);
  padding: 52px max(56px, calc((100vw - 1760px) / 2)) 116px;
}
.files-intro h2 { max-width: 520px; margin: 16px 0 20px; font-size: 46px; line-height: 1.03; font-weight: 620; }
.files-intro > p:not(.eyebrow) { max-width: 500px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.files-current { min-width: 0; }
.files-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.files-section-heading h3 { margin: 8px 0 0; font-size: 27px; font-weight: 610; }
.files-section-heading > span { color: var(--dim); font: 500 12px/1 var(--mono); }
.context-files { list-style: none; margin: 0; padding: 0; }
.context-files li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 92px; padding: 14px 0; border-top: 1px solid var(--line); }
.context-files li:last-child { border-bottom: 1px solid var(--line); }
.context-files img { width: 28px; height: 28px; object-fit: contain; }
.context-files strong, .context-files span { display: block; }
.context-files strong { font-size: 16px; font-weight: 610; }
.context-files span { margin-top: 6px; color: var(--dim); font: 500 12px/1.35 var(--mono); }
.context-files li > p { max-width: 150px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; text-align: right; }
.files-memory { align-self: center; padding-left: 28px; border-left: 1px solid var(--line-strong); }
.files-memory h3 { margin: 14px 0 18px; font-size: 29px; line-height: 1.13; font-weight: 610; }
.files-memory > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.files-memory dl { margin: 30px 0 0; }
.files-memory dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 11px 0; }
.files-memory dt { color: var(--dim); font: 500 12px/1.4 var(--mono); }
.files-memory dd { margin: 0; font-size: 14px; }

.inbox-surface,
.connections-surface {
  grid-template-columns: minmax(270px, 0.62fr) minmax(390px, 0.86fr) minmax(390px, 1fr);
  align-items: center;
  gap: clamp(34px, 4vw, 78px);
  padding: 44px max(52px, calc((100vw - 1760px) / 2)) 126px;
}
.inbox-intro h2,
.connections-intro h2 { max-width: 460px; margin: 16px 0 20px; font-size: 44px; line-height: 1.04; font-weight: 620; }
.inbox-intro > p:not(.eyebrow),
.connections-intro > p:not(.eyebrow) { max-width: 470px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.inbox-count { display: flex; align-items: baseline; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.inbox-count strong { font-size: 34px; font-weight: 590; }
.inbox-count span { color: var(--muted); font: 600 13px/1 var(--mono); }
.message-list { min-width: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.message-list button {
  position: relative;
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 15px 18px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.message-list button:last-child { border-bottom: 0; }
.message-list button::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: transparent; }
.message-list button:hover { background: var(--hover-surface); }
.message-list button.is-selected { background: var(--panel-strong); }
.message-list button.is-selected::before { background: var(--accent); }
.sender-avatar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--ink); font: 650 12px/1 var(--mono); }
.sender-avatar-system { color: var(--accent); }
.message-list button > span:last-child { min-width: 0; }
.message-list small,
.message-list strong,
.message-list em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-list small { color: var(--dim); font: 500 12px/1 var(--mono); }
.message-list strong { margin-top: 7px; font-size: 16px; font-weight: 610; }
.message-list em { margin-top: 7px; color: var(--muted); font-size: 14px; font-style: normal; }
.message-brief,
.connection-detail { min-width: 0; padding-left: 30px; border-left: 1px solid var(--line-strong); }
.message-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.message-heading h3,
.connection-detail h3 { margin: 10px 0 0; font-size: 29px; line-height: 1.12; font-weight: 610; }
.message-heading > span { flex: 0 0 auto; color: var(--dim); font: 500 12px/1 var(--mono); }
.message-summary,
.connection-detail > p { margin: 22px 0 27px; color: var(--muted); font-size: 16px; line-height: 1.58; }
.message-context { padding-top: 20px; border-top: 1px solid var(--line); }
.message-context ul,
.connection-detail ul { list-style: none; margin: 16px 0 0; padding: 0; }
.message-context li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 56px; }
.message-context img { width: 25px; height: 25px; object-fit: contain; }
.message-context strong,
.message-context small { display: block; }
.message-context strong { font-size: 14px; font-weight: 590; }
.message-context small { margin-top: 5px; color: var(--dim); font: 500 12px/1 var(--mono); }
.message-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.draft-safety { margin: 16px 0 0; color: var(--dim); font-size: 13px; line-height: 1.45; }
.draft-preview { margin-top: 22px; padding: 20px 0 4px; border-top: 1px solid var(--line-strong); }
.draft-preview[hidden] { display: none; }
.draft-preview > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.draft-preview > div > span { color: var(--dim); font: 500 12px/1 var(--mono); }
.draft-preview > p { margin: 16px 0; font-size: 15px; line-height: 1.58; }
.draft-preview > button { border: 0; border-bottom: 1px solid var(--line-strong); padding: 5px 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }

.connection-summary { display: grid; grid-template-columns: 1fr 1fr; max-width: 300px; margin: 34px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.connection-summary > div { padding: 17px 0; }
.connection-summary dt { color: var(--dim); font: 500 12px/1 var(--mono); }
.connection-summary dd { margin: 8px 0 0; font-size: 24px; font-weight: 590; }
.catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; color: var(--muted); font: 600 13px/1 var(--mono); }
.catalog-heading small { color: var(--dim); font: inherit; }
.connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.connection-grid button {
  position: relative;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 13px 15px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.connection-grid button:nth-child(2n) { border-right: 0; }
.connection-grid button:nth-last-child(-n + 2) { border-bottom: 0; }
.connection-grid button:hover,
.connection-grid button.is-selected { background: var(--hover-surface); }
.connection-grid img,
.connector-detail-heading img,
.message-context img,
.context-files img { filter: none; }
.os[data-theme="light"] :is(.connection-grid, .connector-detail-heading, .message-context, .context-files) img[src$="/notion.svg"],
.os[data-theme="light"] :is(.connection-grid, .connector-detail-heading, .message-context, .context-files) img[src$="/linear.svg"],
.os[data-theme="light"] :is(.connection-grid, .connector-detail-heading, .message-context, .context-files) img[src$="/openai.svg"] { filter: invert(1); }
.connection-grid button.is-selected::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent); }
.connection-grid img,
.connector-wordmark { width: 28px; height: 28px; object-fit: contain; }
.connector-wordmark { display: grid; place-items: center; border: 1px solid currentColor; color: var(--muted); font: 650 12px/1 var(--mono); }
.connection-grid button > span:nth-child(2) { min-width: 0; }
.connection-grid strong,
.connection-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-grid strong { font-size: 14px; font-weight: 610; }
.connection-grid small { margin-top: 6px; color: var(--dim); font-size: 12px; }
.connection-grid i { position: absolute; top: 9px; right: 10px; color: var(--dim); font: 500 12px/1 var(--mono); font-style: normal; }
.connection-detail-heading { display: flex; align-items: center; gap: 17px; }
.connection-detail-heading > img,
.connector-detail-wordmark { width: 42px; height: 42px; object-fit: contain; }
.connector-detail-wordmark { place-items: center; border: 1px solid currentColor; color: var(--muted); font: 650 13px/1 var(--mono); }
.connector-detail-wordmark:not([hidden]) { display: grid; }
.connection-detail section { padding-top: 21px; border-top: 1px solid var(--line); }
.connection-detail li { position: relative; margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.connection-detail li::before { content: ""; position: absolute; left: 0; top: 0.56em; width: 5px; height: 5px; background: var(--accent); }
.connection-policy { margin: 24px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.connection-policy span,
.connection-policy strong { display: block; }
.connection-policy span { color: var(--dim); font: 500 12px/1 var(--mono); }
.connection-policy strong { margin-top: 9px; font-size: 14px; line-height: 1.45; font-weight: 580; }

.music-surface {
  grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr);
  align-items: center;
  gap: 7vw;
  padding: 54px max(64px, calc((100vw - 1680px) / 2)) 116px;
}
.music-presence { display: grid; justify-items: center; min-width: 0; }
.music-presence .mascot-field { width: min(620px, 100%); height: 450px; }
.music-presence .mascot-art { width: 300px; height: 242px; }
.music-presence > p { margin: 0; color: var(--muted); font-size: 15px; }
.music-now { max-width: 780px; }
.music-now h2 { margin: 18px 0 6px; font-size: 62px; line-height: 0.98; font-weight: 630; }
.music-now > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 19px; }
.music-progress { height: 3px; margin-top: 58px; overflow: hidden; background: var(--line); }
.music-progress i { display: block; width: 100%; height: 100%; background: var(--progress); transform: scaleX(0.42); transform-origin: left center; transition: transform 250ms linear; will-change: transform; }
.music-time { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); font: 500 13px/1 var(--mono); }
.transport-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 17px;
}
.transport-button svg { width: 38px; height: 38px; padding: 9px; border: 1px solid var(--line-strong); fill: currentColor; }
.music-now small { display: block; max-width: 620px; margin-top: 28px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.music-now small a { color: var(--muted); text-underline-offset: 3px; }

.media-surface {
  grid-template-columns: minmax(640px, 1.45fr) minmax(320px, 0.55fr);
  align-items: center;
  gap: clamp(38px, 5vw, 88px);
  padding: 46px max(56px, calc((100vw - 1760px) / 2)) 132px;
}
.media-player-shell {
  width: auto;
  height: min(64dvh, 640px);
  max-width: 100%;
  aspect-ratio: 16 / 9;
  justify-self: end;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #020202;
}
.media-player-shell > .plyr,
.media-player-shell > #media-player { width: 100%; height: 100%; }
.media-player-shell .plyr { --plyr-color-main: var(--accent); --plyr-video-background: #000; --plyr-menu-background: #090909; --plyr-menu-color: var(--ink); }
.media-player-shell .plyr__control--overlaid { width: 70px; height: 70px; border-radius: 50%; background: rgba(0, 0, 0, 0.84); color: var(--ink); }
.media-player-shell .plyr__control:is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--accent); color: var(--black); }
.media-player-shell .plyr__controls { background: rgba(0, 0, 0, 0.88); }
.media-player-shell .plyr__progress__buffer { color: rgba(243, 241, 236, 0.2); }
.media-player-shell iframe:not([src]) { display: none; }
.media-placeholder { display: grid; min-height: 360px; place-content: center; gap: 12px; padding: 32px; background: var(--black); text-align: center; }
.media-placeholder span { color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.media-placeholder strong { font-size: 20px; font-weight: 560; }
.media-placeholder[hidden] { display: none; }
.media-context { max-width: 520px; }
.media-context h2 { margin: 16px 0 20px; font-size: 44px; line-height: 1.04; font-weight: 620; }
.media-context > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.media-context dl { margin: 30px 0 26px; }
.media-context dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); }
.media-context dl div:last-child { border-bottom: 1px solid var(--line); }
.media-context dt { color: var(--muted); font: 500 12px/1.4 var(--mono); text-transform: uppercase; }
.media-context dd { margin: 0; font-size: 15px; }
.media-source { display: inline-block; border-bottom: 1px solid var(--line-strong); padding-bottom: 5px; color: var(--ink); text-decoration: none; font-size: 14px; }
.media-source:hover { border-color: var(--accent); }

.car-surface {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  padding: 0 0 92px;
}
.drive-context { z-index: 3; grid-area: 1 / 1; align-self: start; width: min(520px, calc(100% - 80px)); margin: 42px; padding: 26px 28px 28px; background: var(--surface-overlay); }
.drive-context { width: min(440px, calc(100% - 72px)); margin: 36px; padding: 24px 26px 26px; }
.drive-context h2 { max-width: 390px; margin: 13px 0 17px; font-size: 38px; line-height: 1.04; font-weight: 620; }
.drive-context > p:not(.eyebrow) { max-width: 430px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.location-button { margin-top: 30px; border: 0; border-bottom: 1px solid var(--accent); padding: 7px 0; background: transparent; color: var(--ink); cursor: pointer; font-weight: 620; }
.location-status { margin-top: 14px !important; color: var(--dim) !important; font: 500 13px/1.45 var(--mono) !important; }
.drive-map-wrap { position: relative; z-index: 1; grid-area: 1 / 1; align-self: stretch; min-height: 0; overflow: hidden; background: var(--black); }
.drive-map { position: absolute; inset: 0; }
.drive-map .maplibregl-canvas { outline: 0; }
.drive-map .maplibregl-ctrl-bottom-left, .drive-map .maplibregl-ctrl-bottom-right { opacity: 0.55; }
.drive-map .maplibregl-ctrl-attrib { background: var(--surface-overlay); color: var(--muted); font-size: 13px; }
.drive-map .maplibregl-ctrl-attrib a { color: var(--muted); }
.drive-map .maplibregl-ctrl-group { border-radius: 0; box-shadow: none; background: var(--panel); }
.drive-map .maplibregl-ctrl button { border-radius: 0; }
.drive-primary { position: absolute; z-index: 2; right: 36px; top: 36px; width: min(230px, calc(100% - 72px)); padding: 18px; background: var(--surface-overlay); border-left: 2px solid var(--line-strong); }
.drive-primary > span { color: var(--muted); font-size: 18px; }
.drive-primary > strong { display: block; margin: 10px 0 3px; font-size: 58px; line-height: 0.92; font-weight: 600; }
.drive-primary > p { margin: 0; color: var(--muted); font-size: 16px; }
.drive-briefing { display: none; }
.drive-briefing strong, .drive-briefing span { display: block; }
.drive-briefing strong { margin: 11px 0 8px; font-size: 22px; font-weight: 580; }
.drive-briefing span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.drive-presence { z-index: 3; grid-area: 1 / 1; align-self: end; justify-self: end; display: grid; justify-items: center; margin: 0 36px 144px 0; }
.drive-presence .mascot-field { width: 170px; height: 132px; }
.drive-presence .mascot-art { width: 118px; height: 96px; }
.drive-presence > p { margin: 0; color: var(--muted); font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; }

.image-surface {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-items: stretch;
  gap: 0;
  padding-bottom: 152px;
}
.generated-image { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #030303; }
.generated-image img { width: 100%; height: 100%; object-fit: cover; }
.generated-image figcaption { position: absolute; left: 24px; bottom: 20px; padding: 9px 12px; background: rgba(0, 0, 0, 0.88); color: var(--muted); font: 600 13px/1 var(--mono); }
.image-result { min-width: 0; align-self: center; padding: 38px 52px; overflow: hidden auto; }
.image-result h2 { max-width: 560px; margin: 18px 0 22px; font-size: 46px; line-height: 1.02; font-weight: 620; }
.image-prompt { max-width: 560px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.image-result dl { max-width: 560px; margin: 28px 0 26px; }
.image-result dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.image-result dl div:last-child { border-bottom: 1px solid var(--line); }
.image-result dt { color: var(--dim); font: 500 13px/1.4 var(--mono); text-transform: uppercase; }
.image-result dd { margin: 0; font-size: 15px; }

.access-surface {
  grid-template-columns: minmax(460px, 1fr) minmax(480px, 0.85fr);
  align-items: center;
  gap: 8vw;
  padding: 54px max(64px, calc((100vw - 1600px) / 2)) 116px;
}
.access-copy h2 { max-width: 690px; margin: 18px 0 24px; font-size: 50px; line-height: 1.03; font-weight: 620; }
.access-copy > p:not(.eyebrow) { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.access-presence { width: 360px; height: 190px; margin-top: 14px; overflow: hidden; }
.access-presence .mascot-field { width: 360px; height: 240px; }
.access-presence .mascot-art { width: 170px; height: 138px; }
.native-access-form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 16px; width: min(660px, 100%); align-self: center; }
.entry-signup-intro { display: none; grid-column: 1 / -1; margin-bottom: 18px; }
.entry-signup-intro > p:first-child { margin: 0 0 15px; color: var(--muted); font: 700 13px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.entry-signup-intro h2 { max-width: 620px; margin: 0 0 16px; font-size: 42px; line-height: 1.04; font-weight: 620; text-wrap: balance; }
.entry-signup-intro > p:last-child { max-width: 58ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.native-access-form > label:not(.native-consent) { align-self: end; color: var(--muted); font: 600 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
.native-access-form > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.native-access-form > input {
  min-width: 0;
  height: 58px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  outline: 0;
  padding: 0 16px;
  background: var(--panel);
  color: var(--ink);
  font-size: 16px;
}
.native-access-form > input:focus { border-color: var(--accent); }
.native-access-form > input:nth-of-type(2) { grid-column: 2; }
.native-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.native-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.native-consent a { color: var(--ink); text-underline-offset: 3px; }
.native-turnstile { grid-column: 1 / -1; min-height: 1px; overflow: hidden; }
.native-access-form > .button { grid-column: 1 / -1; width: 100%; min-height: 56px; }
.form-status { grid-column: 1 / -1; min-height: 22px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.form-status.is-success { color: var(--accent); }
.form-status.is-error { color: var(--ink); }

/* The public entry currently leads to one focused conversion surface. */
.os[data-entry-signup="true"] :is(.system-bar, .adaptive-header, .intent-dock, .dock-suggestions, .activity-rail) { display: none; }
.os[data-entry-signup="true"] .adaptive-surface { z-index: 50; inset: 0; }
.os[data-entry-signup="true"] .surface-view { inset: 0; }
.os[data-entry-signup="true"] .access-surface {
  grid-template-columns: minmax(0, 660px);
  justify-content: center;
  align-content: center;
  gap: 0;
  padding: clamp(32px, 7vh, 80px) 24px;
}
.os[data-entry-signup="true"] .access-copy { display: none; }
.os[data-entry-signup="true"] .entry-signup-intro { display: block; grid-row: 1; }
.os[data-entry-signup="true"] .native-access-form { align-self: auto; }
.os[data-entry-signup="true"] .native-access-form > label:first-of-type { grid-column: 1; grid-row: 2; }
.os[data-entry-signup="true"] .native-access-form > label:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.os[data-entry-signup="true"] .native-access-form > input:first-of-type { grid-column: 1; grid-row: 3; }
.os[data-entry-signup="true"] .native-access-form > input:nth-of-type(2) { grid-column: 2; grid-row: 3; }

/* OS input */
.intent-dock {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 18px;
  width: min(var(--surface-content-max), calc(100vw - 96px));
  display: flex;
  flex-direction: column;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-surface) var(--motion-ease-out), visibility 0s linear var(--motion-surface);
}
.os[data-scene="workspace"] .intent-dock,
.os[data-scene="decision"] .intent-dock,
.os[data-scene="complete"] .intent-dock,
.os[data-scene="stopped"] .intent-dock {
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.intent-dock form { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; min-height: 54px; background: var(--control-surface); border: 1px solid var(--line-strong); }
.intent-dock input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); padding: 0 13px; font-size: 16px; }
.intent-dock input::placeholder { color: var(--dim); }
.mic-button, .run-button { border: 0; background: transparent; cursor: pointer; }
.mic-button { height: 42px; border-right: 1px solid var(--line); }
.mic-button { color: var(--muted); }
.mic-button svg { display: block; width: 19px; height: 19px; margin: auto; }
.mic-button:hover, .mic-button.is-listening { color: var(--accent); }
.run-button { align-self: stretch; padding: 0 16px; color: var(--muted); font: 500 13px/1 var(--mono); }
.dock-presence { display: none; }
.dock-suggestions {
  position: fixed;
  z-index: 31;
  left: 50%;
  bottom: 84px;
  width: min(var(--surface-content-max), calc(100vw - 96px));
  max-height: min(460px, calc(100dvh - 160px));
  display: grid;
  align-content: start;
  justify-items: stretch;
  padding: 18px;
  overflow-y: auto;
  scrollbar-color: var(--dim) transparent;
  scrollbar-width: thin;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  box-shadow: 0 24px 80px var(--floating-shadow);
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--motion-surface) var(--motion-ease-out), opacity var(--motion-surface) var(--motion-ease-out), visibility 0s linear var(--motion-surface);
}
.dock-suggestions::-webkit-scrollbar { width: 8px; }
.dock-suggestions::-webkit-scrollbar-track { background: transparent; }
.dock-suggestions::-webkit-scrollbar-thumb { border: 2px solid var(--panel); border-radius: 999px; background: var(--dim); }
.dock-suggestions::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.os[data-palette-open="true"] .dock-suggestions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
  transition-delay: 0s;
}
.dock-suggestions > header { width: 100%; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.dock-suggestions > header > div > span { color: var(--ink); font-size: 22px; font-weight: 620; }
.dock-suggestions > header p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.dock-suggestions > header small { color: var(--dim); font: 500 12px/1 var(--mono); }
.dock-suggestions kbd { min-width: 20px; display: inline-grid; place-items: center; padding: 3px 5px; border: 1px solid var(--line); color: var(--muted); font: inherit; }
.command-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.dock-suggestions button {
  min-width: 0;
  min-height: 84px;
  border: 1px solid var(--line);
  background: transparent;
  padding: 15px 17px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font: 560 13px/1.25 var(--sans);
}
.dock-suggestions button strong, .dock-suggestions button span { display: block; }
.dock-suggestions button strong { color: var(--ink); font-size: 16px; font-weight: 620; }
.dock-suggestions button span { max-width: 270px; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.os[data-surface] .intent-dock { width: min(var(--surface-content-max), calc(100vw - 96px)); }
.os[data-surface] .intent-dock form { min-height: 50px; background: var(--panel-overlay); }
@media (min-width: 761px) {
  .os[data-activity-open="true"] .intent-dock {
    left: calc(50% - var(--activity-rail-width) / 2);
    width: min(var(--surface-content-max), calc(100vw - var(--activity-rail-width) - 96px));
  }
}
.os[data-surface] .dock-suggestions button { background: var(--panel-overlay); }
.dock-suggestions button:hover, .dock-suggestions button:focus-visible, .dock-suggestions button.is-active { border-color: var(--ink); color: var(--ink); background: var(--panel-strong); }

/* Activity and commands are overlays. They never replace or reset the active workspace. */
.os[data-activity-open="true"] .adaptive-surface.is-open { visibility: visible; opacity: 1; }

@media (min-width: 761px) {
  .os[data-activity-open="true"] .adaptive-surface.is-open {
    right: var(--activity-rail-width);
  }
}

/* Explanation and receipt */
.explanation-layer, .receipt-layer {
  position: fixed;
  z-index: 60;
  inset: 64px 0 0;
  display: grid;
  align-content: center;
  grid-template-columns: minmax(380px, 0.85fr) minmax(500px, 1.15fr);
  gap: 7vw;
  padding: 60px max(64px, calc((100vw - 1600px) / 2));
  background: var(--black);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-surface) var(--motion-ease-out), visibility 0s linear var(--motion-surface);
}
.explanation-layer.is-open, .receipt-layer.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.layer-close { position: absolute; top: 24px; right: 32px; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--muted); padding: 5px 0; cursor: pointer; font: 500 13px/1 var(--mono); }
.explanation-copy h2, .receipt-layer h2 { max-width: 660px; margin: 18px 0 24px; font-size: 54px; line-height: 1.04; font-weight: 600; }
.explanation-copy > p:last-child { max-width: 630px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.explanation-sequence { list-style: none; margin: 0; padding: 0; }
.explanation-sequence li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.explanation-sequence li:last-child { border-bottom: 1px solid var(--line); }
.explanation-sequence span { grid-row: 1 / span 2; color: var(--muted); font: 600 13px/1 var(--mono); }
.explanation-sequence strong { font-size: 17px; font-weight: 580; }
.explanation-sequence p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.explanation-layer > .button { position: absolute; right: max(64px, calc((100vw - 1600px) / 2)); bottom: 50px; }

.receipt-layer { display: block; overflow: auto; }
.receipt-layer > .eyebrow { margin-top: 8vh; }
.receipt-layer dl { max-width: 1100px; margin: 42px 0 0; }
.receipt-layer dl div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 30px; padding: 18px 0; border-top: 1px solid var(--line); }
.receipt-layer dl div:last-child { border-bottom: 1px solid var(--line); }
.receipt-layer dt { color: var(--dim); font: 500 13px/1.4 var(--mono); text-transform: uppercase; }
.receipt-layer dd { margin: 0; font-size: 16px; }

.toast { position: fixed; z-index: 80; top: 84px; left: 50%; max-width: min(560px, calc(100vw - 40px)); transform: translateX(-50%); padding: 11px 15px; background: var(--ink); color: var(--black); opacity: 0; pointer-events: none; font: 600 13px/1.4 var(--mono); transition: opacity 180ms var(--motion-ease-out); }
.toast.is-visible { opacity: 1; }

@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes status-blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes idle-pixel-wave {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes listening-pixel-wave {
  0%, 100% { opacity: 0.46; transform: scaleX(0.86); }
  48% { opacity: 1; transform: scaleX(1.14); }
  62% { opacity: 0.74; transform: scaleX(1); }
}
@keyframes speaking-pixel-wave {
  0%, 100% { opacity: 0.42; transform: scaleY(0.84); }
  50% { opacity: 1; transform: scaleY(1.16); }
}
@keyframes working-pixel-wave {
  0%, 100% { opacity: 0.44; transform: scale(0.88); }
  42% { opacity: 1; transform: scale(1.12); }
  68% { opacity: 0.68; transform: scale(0.98); }
}

@media (min-width: 1700px) {
  :root { --activity-rail-width: 400px; }
  .arrival-presence .mascot-field { width: 450px; height: 322px; }
  .arrival-presence .mascot-art { width: 286px; height: 232px; }
  .arrival-copy { max-width: 920px; }
  .arrival-copy h1 { font-size: 70px; }
  .arrival-copy > p:not(.eyebrow) { max-width: 760px; font-size: 18px; }
  .arrival-copy .button { min-height: 52px; padding-inline: 22px; font-size: 15px; }
  .briefing-story { max-width: 820px; }
  .briefing-story h2 { max-width: 760px; font-size: 43px; }
  .task-stage { width: min(1080px, 100%); }
}

@media (min-width: 1200px) and (max-height: 900px) {
  .workspace-main { padding-top: 24px; padding-bottom: 148px; }
  .workspace-heading h2 { margin-top: 7px; font-size: 26px; }
  .task-stage { padding: 12px 0; }
  .os[data-scene="decision"] .task-stage,
  .os[data-scene="complete"] .task-stage { padding-top: 20px; }
  .task-presence .mascot-field { width: 146px; height: 112px; }
  .task-presence .mascot-art { width: 102px; height: 82px; }
  .task-presence strong { font-size: 40px; }
  .task-progress { margin: 16px 0; }
  .decision, .completion { margin-top: 18px; padding-top: 20px; }
  .decision h3, .completion h3 { font-size: 32px; }
  .os[data-scene="complete"] .completion { margin-top: 10px; padding-top: 14px; }
  .os[data-scene="complete"] .completion h3 { margin: 7px 0; }
  .os[data-scene="complete"] .completion > p:not(.eyebrow) { margin-bottom: 9px; font-size: 14px; line-height: 1.4; }
  .capability-launcher { margin-top: 18px; gap: 8px; }
  .capability-launcher button { min-height: 96px; padding: 14px; }
  .capability-launcher small { margin-bottom: 6px; font-size: 12px; }
  .capability-launcher strong { font-size: 15px; }
  .capability-launcher span { margin-top: 5px; font-size: 12px; line-height: 1.3; }
  .activity-rail { padding-top: 24px; padding-bottom: 16px; }
  .activity-rail > header { margin-bottom: 12px; }
  .activity-list li { min-height: 84px; padding: 12px 0; }
  .activity-list p { margin-top: 4px; }
  .system-readout { margin-top: 10px; }
  .telemetry-stack { gap: 9px; margin-top: 12px; }
  .system-readout .runtime-facts { margin-top: 12px; }
  .system-readout .runtime-facts div { padding-top: 9px; padding-bottom: 9px; }
  .image-surface { padding-bottom: 138px; }
  .image-result { padding: 26px 40px; }
  .image-result h2 { font-size: 46px; }
  .image-result dl { margin: 20px 0; }
  .inbox-surface,
  .connections-surface { align-items: start; padding-top: 30px; padding-bottom: 118px; }
  .inbox-intro h2,
  .connections-intro h2 { font-size: 38px; }
  .message-list button { min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
  .message-list em { margin-top: 5px; }
  .message-summary,
  .connection-detail > p { margin-top: 16px; margin-bottom: 18px; }
  .message-context li { min-height: 47px; }
  .connection-grid button { min-height: 68px; }
}

@media (max-width: 1399px) {
  .files-surface {
    grid-template-columns: minmax(280px, 0.72fr) minmax(430px, 1.28fr);
    align-items: start;
    gap: 38px;
    padding: 42px 40px 120px;
  }
  .files-memory {
    grid-column: 1 / -1;
    padding: 26px 0 0;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }
  .files-memory dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .inbox-surface,
  .connections-surface {
    grid-template-columns: minmax(260px, 0.65fr) minmax(430px, 1.05fr);
    align-items: start;
    gap: 34px;
    padding: 38px 34px 124px;
  }
  .message-brief,
  .connection-detail { grid-column: 1 / -1; padding: 25px 0 0; border-top: 1px solid var(--line-strong); border-left: 0; }
  .message-context ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .connection-detail { display: grid; grid-template-columns: minmax(250px, 0.7fr) minmax(360px, 1fr); gap: 0 38px; }
  .connection-detail-heading,
  .connection-detail > p { grid-column: 1; }
  .connection-detail > section,
  .connection-policy,
  .connection-detail > .button { grid-column: 2; }
  .connection-detail > section { grid-row: 1 / span 2; }
}

@media (max-width: 1120px) {
  .briefing-scene, .theme-scene {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 16px;
    padding: 38px 38px 68px;
    overflow: auto;
  }
  .briefing-presence, .theme-presence { min-height: 190px; }
  .briefing-presence .mascot-field, .theme-presence .mascot-field { width: 280px; height: 190px; }
  .briefing-presence .mascot-art, .theme-presence .mascot-art { width: 154px; height: 125px; }
  .briefing-story, .theme-copy { width: min(100%, 760px); margin: 0 auto; }
  .arrival-copy h1 { font-size: 50px; }
  .mascot-field { width: 320px; height: 250px; }
  .mascot-art { width: 190px; height: 154px; }
  .briefing-story h2, .theme-copy h2 { font-size: 42px; }
  .workspace-main { padding-left: 32px; padding-right: 32px; }
  .task-presence strong { font-size: 31px; }
  .capability-launcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .music-surface, .access-surface { grid-template-columns: 1fr 1fr; gap: 40px; padding-left: 38px; padding-right: 38px; }
  .media-surface { grid-template-columns: 1fr; align-content: start; gap: 28px; padding: 36px 32px 124px; }
  .media-player-shell { width: 100%; height: auto; justify-self: stretch; }
  .media-context { max-width: 760px; }
  .music-now h2 { font-size: 66px; }
  .drive-map-wrap { min-height: 0; }
  .image-surface { grid-template-columns: minmax(480px, 1.2fr) minmax(360px, 0.8fr); }
  .work-surface { grid-template-columns: minmax(320px, 0.7fr) minmax(560px, 1.3fr); gap: 38px; padding-left: 38px; padding-right: 38px; }
  .files-surface { grid-template-columns: 1fr; align-content: start; gap: 30px; padding: 38px 32px 120px; }
  .files-memory { grid-column: auto; }
  .files-memory dl { grid-template-columns: 1fr; }
  .access-copy h2, .drive-context h2 { font-size: 50px; }
  .inbox-surface,
  .connections-surface { grid-template-columns: 1fr; align-content: start; padding: 34px 32px 124px; }
  .message-brief,
  .connection-detail { grid-column: auto; }
  .connection-detail { display: block; }
  .message-context ul { grid-template-columns: 1fr; }
  .memory-surface { gap: 16px; padding: 24px 26px 18px; }
  .memory-intro { align-items: start; gap: 28px; }
  .memory-intro > div > p:last-child { max-width: 560px; }
  .memory-workbench { grid-template-columns: minmax(0, 1fr) 300px; }
  .memory-search { width: min(280px, 32vw); }
  .memory-inspector { padding: 24px 20px 30px; }
}

@media (max-width: 760px) {
  :root {
    --system-bar-height: 54px;
    --surface-header-height: 68px;
    --surface-dock-clearance: 130px;
  }
  body { overflow: auto; }
  .os { min-height: 100dvh; height: auto; overflow: hidden; }
  .system-bar { grid-template-columns: 1fr auto; padding: 0 18px; }
  .system-tools { gap: 12px; }
  .scene { inset: 0; min-height: 100dvh; overflow: auto; }
  .workspace-scene { inset: var(--system-bar-height) 0 0; min-height: calc(100dvh - var(--system-bar-height)); }
  .arrival-scene, .briefing-scene, .theme-scene { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 24px 24px 62px; }
  .boot-presence .mascot-field { width: min(380px, calc(100vw - 24px)); height: 310px; }
  .boot-presence .mascot-art { width: 230px; height: 185px; }
  .boot-progress { width: min(280px, calc(100vw - 80px)); }
  .arrival-presence, .briefing-presence, .theme-presence { min-height: 180px; }
  .mascot-field, .briefing-presence .mascot-field, .theme-presence .mascot-field { width: min(290px, 100%); height: 198px; margin: 0 auto; }
  .mascot-art { width: 164px; height: 133px; }
  .arrival-presence .mascot-art { width: 170px; height: 138px; }
  .arrival-copy { text-align: center; }
  .arrival-copy h1 { margin: 12px auto 16px; font-size: 39px; line-height: 1.04; }
  .arrival-copy > p:not(.eyebrow) { margin-bottom: 24px; font-size: 16px; }
  .primary-actions { align-items: stretch; }
  .primary-actions .button { flex: 1 1 100%; }
  .briefing-presence { display: flex; flex-direction: column; }
  .briefing-story h2 { margin: 14px 0 22px; font-size: 33px; line-height: 1.08; }
  .theme-copy { width: 100%; }
  .theme-copy h2 { margin: 12px 0 14px; font-size: 33px; line-height: 1.08; }
  .theme-copy > p:not(.eyebrow) { margin-bottom: 20px; }
  .theme-choice { min-height: 74px; }
  .context-sequence li { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
  .context-sequence small { display: none; }
  .caption { position: static; width: auto; transform: none; padding: 18px 0 0; text-align: left; }

  .workspace-scene { display: block; padding-bottom: 172px; overflow: auto; }
  .workspace-main { display: block; min-height: calc(100dvh - var(--system-bar-height)); padding: 25px 20px 32px; }
  .workspace-heading h2 { font-size: 22px; }
  .detail-toggle { display: none; }
  .task-stage { margin-top: 52px; padding: 0; }
  .task-presence { align-items: flex-start; gap: 15px; }
  .task-presence .mascot-field { width: 92px; height: 76px; margin: 0; }
  .task-presence .mascot-art { width: 70px; height: 57px; }
  .task-presence strong { font-size: 27px; }
  .live-reason { padding-left: 16px; }
  .decision, .completion { padding-left: 18px; }
  .decision h3, .completion h3 { font-size: 29px; }
  .completion { padding-left: 0; padding-top: 0; }
  .activity-rail { display: block; width: min(390px, 100vw); padding: 28px 20px 34px; overflow: auto; }
  .activity-list { display: grid; grid-template-columns: 1fr; }
  .activity-list li { min-height: 96px; padding: 14px 0; }

  .adaptive-surface { overflow: auto; padding-bottom: 150px; }
  .adaptive-header { position: sticky; top: 0; padding: 14px 20px; }
  .adaptive-header .eyebrow { display: none; }
  .adaptive-header strong { margin: 0; font-size: 14px; }
  .surface-view { position: static; min-height: calc(100dvh - var(--system-bar-height) - var(--surface-header-height)); overflow: visible; }
  .work-surface, .files-surface, .inbox-surface, .connections-surface, .music-surface, .media-surface, .car-surface, .image-surface, .access-surface { display: none; grid-template-columns: 1fr; grid-template-rows: auto; align-content: center; gap: 28px; padding: 28px 22px 56px; }
  .adaptive-surface[data-surface="music"] [data-surface-view="music"],
  .adaptive-surface[data-surface="media"] [data-surface-view="media"],
  .adaptive-surface[data-surface="memory"] [data-surface-view="memory"],
  .adaptive-surface[data-surface="work"] [data-surface-view="work"],
  .adaptive-surface[data-surface="files"] [data-surface-view="files"],
  .adaptive-surface[data-surface="inbox"] [data-surface-view="inbox"],
  .adaptive-surface[data-surface="connections"] [data-surface-view="connections"],
  .adaptive-surface[data-surface="car"] [data-surface-view="car"],
  .adaptive-surface[data-surface="image"] [data-surface-view="image"],
  .adaptive-surface[data-surface="access"] [data-surface-view="access"] { display: grid; }
  .memory-surface {
    grid-template-rows: auto auto;
    gap: 22px;
    padding: 26px 18px 70px;
    overflow: visible;
  }
  .memory-intro { display: grid; gap: 20px; }
  .memory-intro h2 { font-size: 34px; }
  .memory-intro > div > p:last-child { font-size: 15px; }
  .memory-counts { gap: 32px; }
  .memory-counts dd { font-size: 22px; }
  .memory-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(430px, 58dvh) auto;
    min-height: 0;
  }
  .memory-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 12px 0;
  }
  .memory-search { grid-column: 1 / -1; width: 100%; border-right: 0; padding: 3px 4px 11px; }
  .memory-filter-list { grid-column: 1; }
  .memory-filter-list button,
  .memory-fit { min-height: 40px; padding: 10px 12px; }
  .memory-fit { grid-column: 2; margin: 0; padding-left: 14px; }
  .memory-stage { min-height: 430px; }
  .memory-canvas { min-height: 430px; }
  .memory-legend { top: 14px; left: 14px; gap: 8px 12px; max-width: calc(100% - 28px); }
  .memory-legend span { font-size: 12px; }
  .memory-time { right: 12px; bottom: 12px; width: calc(100% - 24px); }
  .memory-inspector { min-height: 330px; overflow: visible; border-top: 0; border-left: 0; padding: 24px 2px 12px; }
  .memory-inspector-empty { min-height: 230px; }
  .memory-inspector-record h3 { font-size: 28px; }
  .work-surface { align-content: start; }
  .work-intent h2 { font-size: 45px; }
  .work-intent > p:not(.eyebrow) { font-size: 16px; }
  .sheet-workspace > header { align-items: flex-start; padding: 16px 0; }
  .sheet-workspace > header p { max-width: 120px; text-align: right; }
  .sheet-workspace th, .sheet-workspace td { min-width: 118px; padding: 15px 12px; font-size: 15px; }
  .work-finding h3 { font-size: 29px; }
  .files-surface { align-content: start; }
  .files-intro h2 { font-size: 39px; }
  .files-memory { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .context-files li { grid-template-columns: 32px minmax(0, 1fr); }
  .context-files li > p { grid-column: 2; max-width: none; margin-top: -5px; text-align: left; }
  .inbox-surface,
  .connections-surface { align-content: start; }
  .inbox-intro h2,
  .connections-intro h2 { font-size: 38px; }
  .message-list button { min-height: 90px; padding-left: 13px; padding-right: 13px; }
  .message-brief,
  .connection-detail { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .message-heading h3,
  .connection-detail h3 { font-size: 26px; }
  .message-context ul { display: block; }
  .connection-grid { grid-template-columns: 1fr; }
  .connection-grid button { min-height: 76px; border-right: 0; }
  .connection-grid button:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .connection-grid button:last-child { border-bottom: 0; }
  .music-presence { order: 2; }
  .music-presence .mascot-field { width: min(320px, 100%); height: 200px; }
  .music-presence .mascot-art { width: 150px; height: 122px; }
  .music-presence > p { font-size: 13px; }
  .music-now h2 { margin-top: 14px; font-size: 54px; }
  .music-now > p:not(.eyebrow) { font-size: 18px; }
  .music-progress { margin-top: 34px; }
  .media-surface { align-content: start; padding-bottom: 150px; }
  .media-context h2 { font-size: 38px; }
  .media-context > p:not(.eyebrow) { font-size: 16px; }
  .media-player-shell .plyr__control--overlaid { width: 58px; height: 58px; }
  .media-player-shell .plyr__controls .plyr__control { min-width: 44px; min-height: 44px; }
  .media-placeholder { min-height: 220px; }
  .car-surface { min-height: calc(100dvh - 122px); padding: 0 0 70px; }
  .drive-context h2, .access-copy h2 { margin-top: 14px; font-size: 42px; }
  .drive-context > p:not(.eyebrow), .access-copy > p:not(.eyebrow) { font-size: 16px; }
  .drive-map-wrap { min-height: calc(100dvh - 192px); }
  .drive-context { width: calc(100% - 32px); margin: 16px; padding: 20px; }
  .drive-context h2 { font-size: 36px; }
  .drive-primary { right: 16px; top: auto; bottom: 16px; width: 170px; }
  .drive-primary > strong { font-size: 42px; }
  .drive-briefing { display: none; }
  .drive-presence { display: none; }
  .generated-image { min-height: 310px; }
  .image-result { padding: 0; }
  .image-result h2 { font-size: 43px; }
  .image-prompt { font-size: 16px; }
  .access-presence { display: none; }
  .native-access-form { grid-template-columns: 1fr; }
  .entry-signup-intro h2 { font-size: 34px; }
  .os[data-entry-signup="true"] .entry-signup-intro,
  .os[data-entry-signup="true"] .native-access-form > label:first-of-type,
  .os[data-entry-signup="true"] .native-access-form > label:nth-of-type(2),
  .os[data-entry-signup="true"] .native-access-form > input:first-of-type,
  .os[data-entry-signup="true"] .native-access-form > input:nth-of-type(2) { grid-column: 1; grid-row: auto; }
  .native-access-form > label:nth-of-type(2),
  .native-access-form > input:nth-of-type(2) { grid-column: 1; grid-row: auto; }
  .native-turnstile { max-width: 100%; }
  .capability-launcher { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .capability-launcher button { min-height: 104px; padding: 16px; }
  .capability-launcher span { max-width: none; font-size: 14px; }

  .intent-dock { bottom: 10px; width: calc(100vw - 20px); }
  .os[data-activity-open="true"] .intent-dock { z-index: 35; }
  .dock-suggestions { left: 10px; right: 10px; bottom: 72px; width: auto; max-height: calc(100dvh - 140px); padding: 18px; transform: none; }
  .dock-suggestions > header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .dock-suggestions > header > div > span { font-size: 23px; }
  .dock-suggestions > header p { font-size: 14px; line-height: 1.45; }
  .command-grid { grid-template-columns: 1fr; gap: 10px; }
.dock-suggestions button { min-height: 84px; padding: 16px; }
  .explanation-layer, .receipt-layer { inset: 54px 0 0; display: block; padding: 72px 24px 40px; overflow: auto; }
  .explanation-copy h2, .receipt-layer h2 { font-size: 38px; }
  .explanation-copy > p:last-child { font-size: 15px; }
  .explanation-sequence { margin-top: 35px; }
  .explanation-layer > .button { position: static; width: 100%; margin-top: 30px; }
  .receipt-layer > .eyebrow { margin-top: 0; }
  .receipt-layer dl div { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 420px) {
  .wordmark span { display: none; }
  .system-tools button { font-size: 13px; }
  .arrival-copy h1 { font-size: 36px; }
  .arrival-presence, .briefing-presence, .theme-presence { min-height: 196px; }
  .mascot-field, .briefing-presence .mascot-field, .theme-presence .mascot-field { height: 202px; }
  .briefing-story h2, .theme-copy h2 { font-size: 29px; }
  .activity-list li { min-height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }
  .mascot-field .mascot-art rect { animation: none !important; }
}