@font-face {
  font-family: "Space Mono";
  src: url("/space-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "X Typewriter";
  src: url("/x-typewriter.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --text: #f7f7f5;
  --accent: #00f3fd;
  --accent-secondary: #2563ff;
  --black: var(--bg);
  --white: var(--text);
  --blue: var(--accent);
  --blue-halo: color-mix(in srgb, var(--accent) 18%, transparent);
  --quiet: #6c6c70;
  --recall-quiet: #85858a;
  --line: #29292c;
  --option: #55555b;
  --option-active: #77777d;
  --placeholder: #66666c;
  --placeholder-focus: #5a5a60;
  --panel: #101012;
  --quote: #b8b8bb;
  --command-bg-start: rgba(10, 10, 10, 0.94);
  --command-bg-end: rgba(10, 10, 10, 0.72);
  --field-glow: color-mix(in srgb, var(--accent) 5.2%, transparent);
  --field-wide: color-mix(in srgb, var(--accent-secondary) 2.5%, transparent);
  --drift-glow: color-mix(in srgb, var(--accent) 8%, transparent);
  --horizon-edge: color-mix(in srgb, var(--accent) 4%, transparent);
  --horizon-mid: color-mix(in srgb, var(--accent) 19%, transparent);
  --horizon-near: color-mix(in srgb, var(--accent) 68%, transparent);
  --ambient-opacity: 0.42;
  --drift-one-duration: 24s;
  --drift-two-duration: 31s;
  --interface-font: "X Typewriter", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-family: var(--interface-font);
  color: var(--white);
  background: var(--black);
  font-synthesis: none;
}

html[data-color="green"] {
  --accent: #00ff88;
  --accent-secondary: #00bd68;
  --line: #25302a;
  --panel: #0d120f;
}

html[data-color="amber"] {
  --accent: #ffb84d;
  --accent-secondary: #ff782e;
  --line: #302a22;
  --panel: #12100d;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f6f6;
  --text: #111a1c;
  --accent: #006d80;
  --accent-secondary: #00659e;
  --blue-halo: color-mix(in srgb, var(--accent) 23%, transparent);
  --quiet: #4f5e62;
  --recall-quiet: #445458;
  --line: #bdcdcf;
  --option: #536367;
  --option-active: #1f3034;
  --placeholder: #536367;
  --placeholder-focus: #2b3d41;
  --panel: #e3ecec;
  --quote: #34484c;
  --command-bg-start: rgba(242, 246, 246, 0.98);
  --command-bg-end: rgba(242, 246, 246, 0.86);
  --field-glow: color-mix(in srgb, var(--accent) 16%, transparent);
  --field-wide: color-mix(in srgb, var(--accent-secondary) 8.5%, transparent);
  --drift-glow: color-mix(in srgb, var(--accent) 14%, transparent);
  --horizon-edge: color-mix(in srgb, var(--accent) 10%, transparent);
  --horizon-mid: color-mix(in srgb, var(--accent) 30%, transparent);
  --horizon-near: color-mix(in srgb, var(--accent) 78%, transparent);
  --ambient-opacity: 0.48;
}

html[data-theme="light"][data-color="green"] {
  --bg: #f2f7f3;
  --text: #111b16;
  --accent: #007a46;
  --accent-secondary: #008b62;
  --quiet: #4c5e53;
  --recall-quiet: #415248;
  --line: #bccdc1;
  --option: #516358;
  --option-active: #1d3125;
  --placeholder: #52655a;
  --placeholder-focus: #283c30;
  --panel: #e2ece5;
  --quote: #32493b;
  --command-bg-start: rgba(242, 247, 243, 0.98);
  --command-bg-end: rgba(242, 247, 243, 0.86);
}

html[data-theme="light"][data-color="amber"] {
  --bg: #f8f5ef;
  --text: #211a12;
  --accent: #855000;
  --accent-secondary: #a34412;
  --quiet: #62564a;
  --recall-quiet: #55493e;
  --line: #d3c6b6;
  --option: #685c4f;
  --option-active: #35281b;
  --placeholder: #6a5d50;
  --placeholder-focus: #3f3124;
  --panel: #eee7dc;
  --quote: #554437;
  --command-bg-start: rgba(248, 245, 239, 0.98);
  --command-bg-end: rgba(248, 245, 239, 0.86);
}

html[data-presence="dawn"] {
  --drift-one-duration: 29s;
  --drift-two-duration: 35s;
}

html[data-presence="day"] {
  --drift-one-duration: 24s;
  --drift-two-duration: 31s;
}

html[data-presence="dusk"] {
  --drift-one-duration: 27s;
  --drift-two-duration: 33s;
}

html[data-presence="night"] {
  --drift-one-duration: 34s;
  --drift-two-duration: 41s;
}

html[data-font="typewriter"] {
  --interface-font: "X Typewriter", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

html[data-font="space"] {
  --interface-font: "Space Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

html[data-size="small"] {
  font-size: 17px;
}

html[data-size="med"] {
  font-size: 19px;
}

html[data-size="large"] {
  font-size: 21px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--black);
  transition: background-color 560ms ease, color 420ms ease;
}

.view,
.command-preview,
.markdown pre,
.composer textarea,
.composer textarea::placeholder {
  transition-property: color, background-color, border-color, opacity, transform, filter;
  transition-duration: 420ms;
  transition-timing-function: ease;
}

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transition: background-color 560ms ease, color 420ms ease, font-size 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  --field-opacity: 0.76;
  --field-scale: 0.96;
  --horizon-opacity: 0.22;
  --horizon-scale: 0.34;
  --response-typing-field: 0.52;
  --response-rest-field: 0.34;
  --response-field-scale: 1;
  --response-horizon-scale: 0.82;
  --response-horizon-opacity: 0.055;
  --response-light-horizon-opacity: 0.16;
  --thinking-horizon-scale: 0.54;
  position: relative;
  isolation: isolate;
  height: 100dvh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  position: fixed;
  z-index: 0;
  content: "";
  pointer-events: none;
}

body::before {
  inset: -12vmax;
  background:
    radial-gradient(ellipse 31rem 19rem at 50% 50%, var(--field-glow), transparent 70%),
    radial-gradient(ellipse 64rem 34rem at 50% 50%, var(--field-wide), transparent 72%);
  opacity: var(--field-opacity);
  transform: scale(var(--field-scale));
  transition: opacity 1.25s ease, transform 1.8s cubic-bezier(0.16, 1, 0.3, 1), background 560ms ease;
}

body::after {
  top: 50%;
  left: 50%;
  width: min(76vw, 48rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--horizon-edge) 16%,
    var(--horizon-mid) 39%,
    var(--horizon-near) 50%,
    var(--horizon-mid) 61%,
    var(--horizon-edge) 84%,
    transparent
  );
  opacity: var(--horizon-opacity);
  transform: translate(-50%, -50%) scaleX(var(--horizon-scale));
  box-shadow: 0 0 0.8rem color-mix(in srgb, var(--blue) 22%, transparent);
  transition: opacity 1.1s ease, transform 1.65s cubic-bezier(0.16, 1, 0.3, 1), background 560ms ease, box-shadow 560ms ease;
}

body[data-mode="thinking"],
body[data-mode="opening"] {
  --field-opacity: 1;
  --field-scale: 1.025;
  --horizon-opacity: 0.46;
  --horizon-scale: var(--thinking-horizon-scale);
}

body[data-mode="typing"] {
  --field-opacity: var(--response-typing-field);
  --field-scale: var(--response-field-scale);
  --horizon-opacity: var(--response-horizon-opacity);
  --horizon-scale: var(--response-horizon-scale);
}

body[data-mode="followup"] {
  --field-opacity: var(--response-rest-field);
  --field-scale: calc(var(--response-field-scale) - 0.015);
  --horizon-opacity: calc(var(--response-horizon-opacity) * 0.64);
  --horizon-scale: calc(var(--response-horizon-scale) * 0.88);
}

body[data-mode="recall"] {
  --field-opacity: 0.42;
  --field-scale: 0.975;
  --horizon-opacity: 0.12;
  --horizon-scale: 0.92;
}

html[data-theme="light"] body[data-mode="thinking"],
html[data-theme="light"] body[data-mode="opening"] {
  --field-opacity: 0.94;
  --horizon-opacity: 0.58;
}

html[data-theme="light"] body[data-mode="typing"] {
  --field-opacity: calc(var(--response-typing-field) + 0.14);
  --horizon-opacity: var(--response-light-horizon-opacity);
}

html[data-theme="light"] body[data-mode="followup"] {
  --field-opacity: calc(var(--response-rest-field) + 0.22);
  --horizon-opacity: calc(var(--response-light-horizon-opacity) * 0.68);
}

html[data-theme="light"] body[data-mode="recall"] {
  --field-opacity: 0.6;
  --horizon-opacity: 0.2;
}

.ambience {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  opacity: 1;
  transition: opacity 560ms ease;
}

.ambient-drift {
  position: absolute;
  display: block;
  width: min(66vmax, 52rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--ambient-opacity);
  background: radial-gradient(circle, var(--drift-glow), transparent 68%);
  will-change: transform;
  filter: brightness(1);
  transition: opacity 1.2s ease, background 560ms ease, filter 1.1s ease;
}

.ambient-drift-one {
  top: -48vmax;
  left: -28vmax;
  animation: ambient-drift-one var(--drift-one-duration) ease-in-out infinite alternate;
}

.ambient-drift-two {
  right: -34vmax;
  bottom: -52vmax;
  animation: ambient-drift-two var(--drift-two-duration) ease-in-out infinite alternate;
}

html[data-theme="light"] .ambient-drift-one {
  top: -30vmax;
  left: -20vmax;
}

html[data-theme="light"] .ambient-drift-two {
  right: -24vmax;
  bottom: -35vmax;
}

body[data-mode="thinking"] .ambient-drift,
body[data-mode="opening"] .ambient-drift {
  opacity: calc(var(--ambient-opacity) * 1.28);
  animation-duration: 13s;
}

body[data-mode="followup"] .ambient-drift {
  opacity: calc(var(--ambient-opacity) * 0.72);
}

body[data-mode="recall"] .ambient-drift {
  opacity: calc(var(--ambient-opacity) * 0.58);
  animation-duration: 38s;
}

body[data-gesture="recognize"] .ambient-drift {
  filter: brightness(1.18);
}

body[data-gesture="complete"]::after {
  animation: horizon-complete 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-gesture="error"] .ambient-drift {
  opacity: calc(var(--ambient-opacity) * 0.46);
}

body[data-gesture="share"]::after {
  animation: horizon-share 1.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes horizon-complete {
  0% {
    opacity: calc(var(--horizon-opacity) * 0.6);
    transform: translate(-50%, -50%) scaleX(calc(var(--horizon-scale) * 0.88));
    filter: blur(0.04rem);
  }
  42% {
    opacity: calc(var(--horizon-opacity) * 1.9 + 0.035);
    transform: translate(-50%, -50%) scaleX(calc(var(--horizon-scale) * 1.06));
    filter: blur(0);
  }
  100% {
    opacity: var(--horizon-opacity);
    transform: translate(-50%, -50%) scaleX(var(--horizon-scale));
    filter: blur(0);
  }
}

@keyframes horizon-share {
  0%, 100% { opacity: var(--horizon-opacity); transform: translate(-50%, -50%) scaleX(var(--horizon-scale)); }
  46% { opacity: calc(var(--horizon-opacity) * 1.7 + 0.03); transform: translate(-50%, -50%) scaleX(calc(var(--horizon-scale) * 0.72)); }
}

html.theme-shifting .ambience,
html.color-shifting .ambience {
  opacity: 0.24;
}

html.font-shifting .view {
  opacity: 0.08;
  transform: translateY(0.12rem) scale(0.995);
  filter: blur(0.12rem);
}

@keyframes ambient-drift-one {
  from { transform: translate3d(-2%, -1%, 0) scale(0.96); }
  to { transform: translate3d(11%, 8%, 0) scale(1.08); }
}

@keyframes ambient-drift-two {
  from { transform: translate3d(3%, 2%, 0) scale(1.04); }
  to { transform: translate3d(-10%, -7%, 0) scale(0.94); }
}

::selection {
  color: var(--black);
  background: var(--blue);
}

button,
input,
textarea {
  color: inherit;
  font: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.answer-scroll:focus-visible {
  outline: 1px solid var(--blue);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.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;
}

.blue {
  color: var(--blue);
  text-shadow: 0 0 1.2rem color-mix(in srgb, var(--blue) 17%, transparent);
}

.view {
  width: min(100%, 34rem);
  font-size: clamp(0.88rem, 2.4vw, 1rem);
  line-height: 1.65;
}

.prompt-view,
.thinking {
  width: min(100%, 30rem);
}

.prompt {
  color: var(--blue);
}

.shell {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  padding: max(1.5rem, env(safe-area-inset-top)) clamp(1.25rem, 5vw, 4rem) max(1.25rem, env(safe-area-inset-bottom));
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.view {
  grid-area: 1 / 1;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 280ms ease,
    transform 440ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 320ms ease;
}

.view.is-entering {
  opacity: 0;
  transform: translateY(0.48rem) scale(0.995);
  filter: blur(0.24rem);
}

.view.is-leaving {
  opacity: 0;
  transform: translateY(-0.2rem) scale(0.998);
  filter: blur(0.16rem);
  pointer-events: none;
}

.composer {
  position: relative;
  width: min(100%, var(--composer-width, 12rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  opacity: 1;
  transform: translateY(0);
  transition:
    width 380ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.phrase-anchor {
  position: absolute;
  z-index: 7;
  left: 1.55rem;
  bottom: calc(100% + 0.58rem);
  width: min(26rem, calc(100vw - 4.5rem));
  overflow: hidden;
  color: color-mix(in srgb, var(--white) 74%, var(--blue));
  font-size: 0.7rem;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  filter: blur(0.09rem);
  transform: translateY(0.28rem);
  pointer-events: none;
  transition: opacity 280ms ease, color 360ms ease, filter 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.phrase-anchor::before {
  display: inline-block;
  width: 0.72rem;
  height: 1px;
  margin-right: 0.58rem;
  vertical-align: 0.25em;
  background: linear-gradient(90deg, var(--blue), transparent);
  content: "";
  opacity: 0.62;
}

.phrase-anchor.is-present {
  opacity: 0.78;
  filter: blur(0);
  transform: translateY(0);
}

.phrase-anchor.is-releasing {
  opacity: 0;
  filter: blur(0.08rem);
  transform: translateY(-0.12rem);
}

.command-preview {
  position: absolute;
  z-index: 8;
  top: calc(100% + 0.62rem);
  left: 1.55rem;
  width: min(22rem, calc(100% - 1.55rem));
  padding: 0.42rem 0 0.2rem;
  opacity: 0;
  filter: blur(0.12rem);
  transform: translateY(-0.2rem);
  pointer-events: none;
  background: linear-gradient(90deg, var(--command-bg-start), var(--command-bg-end) 76%, transparent);
  transition: opacity 180ms ease, filter 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.command-preview.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
}

.command-option {
  width: 100%;
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.2rem 0;
  color: var(--option);
  font-size: 0.74rem;
  line-height: 1.55;
  text-align: left;
  opacity: 0;
  filter: blur(0.08rem);
  animation: command-arrive 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: color 180ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.command-option:nth-child(2) { animation-delay: 24ms; }
.command-option:nth-child(3) { animation-delay: 48ms; }
.command-option:nth-child(4) { animation-delay: 72ms; }
.command-option:nth-child(5) { animation-delay: 96ms; }
.command-option:nth-child(6) { animation-delay: 120ms; }
.command-option:nth-child(7) { animation-delay: 144ms; }
.command-option:nth-child(8) { animation-delay: 168ms; }
.command-option:nth-child(9) { animation-delay: 192ms; }
.command-option:nth-child(10) { animation-delay: 216ms; }

.command-option:hover,
.command-option:focus-visible,
.command-option.is-selected {
  color: var(--option-active);
  transform: translateX(0.08rem);
}

.command-name {
  color: inherit;
  transition: color 180ms ease, text-shadow 220ms ease;
}

.command-option:hover .command-name,
.command-option:focus-visible .command-name,
.command-option.is-selected .command-name {
  color: var(--blue);
  text-shadow: 0 0 0.62rem color-mix(in srgb, var(--blue) 32%, transparent);
}

.command-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes command-arrive {
  to { opacity: 1; filter: blur(0); }
}

.prompt {
  color: var(--blue);
  line-height: 1.65rem;
}

.prompt {
  transform: translateX(0);
  text-shadow: 0 0 0 transparent;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), text-shadow 360ms ease;
}

.composer:focus-within .prompt {
  transform: translateX(0.08rem);
  text-shadow: 0 0 0.72rem color-mix(in srgb, var(--blue) 58%, transparent);
}

.composer textarea {
  width: 100%;
  max-height: 10rem;
  resize: none;
  overflow-y: auto;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  line-height: 1.65rem;
  caret-color: var(--blue);
  transition: color 260ms ease;
}

.composer textarea::placeholder {
  color: var(--placeholder);
  opacity: 0.88;
  transition: color 280ms ease, opacity 280ms ease;
}

.composer textarea:focus::placeholder {
  color: var(--placeholder-focus);
  opacity: 0.82;
}

.thinking {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.thinking p {
  align-self: center;
  margin: 0;
}

.thinking-composer-slot {
  min-height: 1.65rem;
}

.thinking .composer {
  opacity: 0.74;
}

.thinking .composer .prompt {
  color: color-mix(in srgb, var(--blue) 48%, var(--quiet));
  text-shadow: none;
}

.thinking .composer textarea {
  color: var(--placeholder);
  -webkit-text-fill-color: var(--placeholder);
  animation: listening-prompt 4.8s ease-in-out infinite alternate;
}

.memory-resonance {
  width: min(100%, 24rem);
  display: flex;
  overflow: hidden;
  gap: 1.1rem;
  justify-content: center;
  color: color-mix(in srgb, var(--white) 90%, var(--blue));
  font-size: 0.72rem;
  line-height: 1.55;
  text-align: center;
  opacity: 0;
}

.memory-resonance.is-present {
  animation: resonance-pass 6.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.memory-word {
  display: inline-block;
  white-space: nowrap;
}

.memory-resonance.is-present .memory-word {
  animation: recognition-word 3.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.memory-word-1 { animation-delay: 110ms !important; }
.memory-word-2 { animation-delay: 220ms !important; }
.memory-word-3 { animation-delay: 330ms !important; }

@keyframes recognition-word {
  0% { visibility: hidden; opacity: 1; transform: translateY(0.24rem); filter: blur(0.14rem); }
  7%, 68% { visibility: visible; opacity: 1; transform: translateY(0); filter: blur(0); }
  99% { visibility: visible; opacity: 1; transform: translateY(-0.06rem); filter: blur(0.08rem); }
  100% { visibility: hidden; opacity: 1; }
}

@keyframes listening-prompt {
  from { opacity: 0.72; }
  to { opacity: 0.94; }
}

@keyframes resonance-pass {
  0% { visibility: hidden; opacity: 0.78; filter: blur(0.14rem); }
  7%, 68% { visibility: visible; opacity: 0.78; filter: blur(0); }
  99% { visibility: visible; opacity: 0.78; filter: blur(0.08rem); }
  100% { visibility: hidden; opacity: 0.78; }
}

.thinking-orb {
  display: block;
  width: 20px;
  height: 20px;
  opacity: 0.82;
}

.answer-view {
  --response-width: 46rem;
  position: relative;
  width: min(100%, var(--response-width));
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: width 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease, transform 440ms cubic-bezier(0.16, 1, 0.3, 1), filter 320ms ease;
}

.answer-view[data-shape="whisper"] { --response-width: 30rem; }
.answer-view[data-shape="thought"] { --response-width: 38rem; }
.answer-view[data-shape="field"] { --response-width: 46rem; }
.answer-view[data-shape="artifact"] { --response-width: 52rem; }

.memory-trace {
  position: absolute;
  z-index: 2;
  top: -1.45rem;
  left: 50%;
  display: flex;
  width: min(100%, 28rem);
  gap: clamp(0.8rem, 4vw, 1.8rem);
  justify-content: center;
  color: color-mix(in srgb, var(--white) 90%, var(--blue));
  font-size: 0.66rem;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
}

.memory-trace .memory-word {
  opacity: 0;
}

.memory-trace.is-present .memory-word {
  animation: memory-fold 5.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes memory-fold {
  0% { visibility: hidden; opacity: 0.78; transform: translateY(-0.34rem); filter: blur(0.14rem); }
  7%, 42% { visibility: visible; opacity: 0.78; transform: translateY(0); filter: blur(0); }
  76% { visibility: visible; opacity: 0.78; transform: translateY(0.42rem); filter: blur(0.055rem); }
  99% { visibility: visible; opacity: 0.78; transform: translateY(0.82rem); filter: blur(0.12rem); }
  100% { visibility: hidden; opacity: 0.78; }
}

.answer-scroll {
  width: 100%;
  min-height: 0;
  flex: 0 1 auto;
  max-height: min(64dvh, 40rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transform-origin: center;
  transition: max-height 520ms ease, opacity 360ms ease, filter 420ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.answer-scroll.can-scroll-down:not(.can-scroll-up) {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 2.8rem), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 2.8rem), transparent 100%);
}

.answer-scroll.can-scroll-up:not(.can-scroll-down) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.35rem, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.35rem, #000 100%);
}

.answer-scroll.can-scroll-up.can-scroll-down {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.35rem, #000 calc(100% - 2.8rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.35rem, #000 calc(100% - 2.8rem), transparent 100%);
}

.answer-scroll[class*="can-scroll-"] {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.answer-view.is-sharing .answer-scroll {
  opacity: 0.3;
  filter: blur(0.08rem);
  transform: scale(0.982);
}

.answer-scroll,
.composer textarea,
.markdown pre,
.markdown table {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.answer-scroll::-webkit-scrollbar,
.composer textarea::-webkit-scrollbar,
.markdown pre::-webkit-scrollbar,
.markdown table::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.markdown-frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  min-height: 1.76em;
}

.markdown {
  overflow-wrap: anywhere;
  font-size: clamp(0.94rem, 2vw, 1rem);
  line-height: 1.76;
  text-align: left;
  text-transform: lowercase;
  text-wrap: pretty;
}

.markdown pre,
.markdown code,
.markdown kbd,
.markdown samp {
  text-transform: none;
}

.markdown-measure {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.markdown-typed {
  position: absolute;
  inset: 0 0 auto;
}

.answer-view.typing .markdown-typed {
  cursor: pointer;
}

.markdown > :first-child {
  margin-top: 0;
}

.markdown > :last-child {
  margin-bottom: 0;
}

.markdown p,
.markdown ul,
.markdown ol,
.markdown pre,
.markdown blockquote,
.markdown table {
  margin: 0 0 1em;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  margin: 1.5em 0 0.62em;
  color: var(--white);
  font: inherit;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.markdown h1 { font-size: 1.2em; }
.markdown h2 { font-size: 1.1em; }
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 { font-size: 1em; }

.markdown ul,
.markdown ol {
  padding-left: 1.55em;
}

.markdown li {
  padding-left: 0.2em;
  margin: 0.28em 0;
}

.markdown li::marker {
  color: var(--blue);
}

.markdown a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--blue) 42%, transparent);
  text-underline-offset: 0.22em;
}

.markdown a:hover,
.markdown a:focus-visible {
  text-decoration-color: var(--blue);
}

.markdown strong {
  color: var(--blue);
  font-weight: 400;
  text-shadow: 0 0 0.62rem color-mix(in srgb, var(--blue) 22%, transparent);
}

.answer-view.typed .markdown strong {
  animation: semantic-breathe 8.6s 1.1s ease-in-out infinite alternate;
}

@keyframes semantic-breathe {
  from {
    color: color-mix(in srgb, var(--blue) 84%, var(--white));
    text-shadow: 0 0 0.24rem color-mix(in srgb, var(--blue) 10%, transparent);
  }
  to {
    color: var(--blue);
    text-shadow: 0 0 0.78rem color-mix(in srgb, var(--blue) 32%, transparent);
  }
}

.markdown :not(pre) > code {
  color: var(--blue);
  font: inherit;
  font-size: 0.92em;
}

.markdown pre {
  padding: 0.9em 1em;
  overflow-x: auto;
  border-left: 1px solid color-mix(in srgb, var(--blue) 58%, transparent);
  background: var(--panel);
}

.markdown pre code {
  font: inherit;
  font-size: 0.86em;
  line-height: 1.65;
  white-space: pre;
}

.markdown blockquote {
  padding-left: 1em;
  border-left: 1px solid var(--blue);
  color: var(--quote);
}

.markdown blockquote > :last-child {
  margin-bottom: 0;
}

.markdown table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.86em;
}

.markdown th,
.markdown td {
  padding: 0.45em 0.8em 0.45em 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.markdown th {
  color: var(--blue);
  font-weight: 400;
}

.markdown hr {
  margin: 1.2em 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.markdown img {
  max-width: 100%;
  height: auto;
}

.markdown-typed .markdown-pending {
  visibility: hidden;
}

.markdown-typed .markdown-revealed {
  visibility: visible;
  animation: block-arrive 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: left center;
}

@keyframes block-arrive {
  from {
    opacity: 0;
    transform: translateY(0.24rem) scale(0.997);
    filter: blur(0.12rem);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.typing-run {
  white-space: pre-wrap;
}

.typed-glyph {
  will-change: opacity, filter, text-shadow;
}

.typed-character {
  position: relative;
  top: 0;
  animation: glyph-arrive 580ms linear both;
  will-change: top, opacity, filter, text-shadow;
}

.typed-phrase,
.typed-artifact {
  animation: phrase-arrive 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes glyph-arrive {
  0% {
    color: var(--blue);
    opacity: 0;
    filter: blur(0.16rem);
    top: 0.28em;
    text-shadow: 0 0 0.8rem color-mix(in srgb, var(--blue) 66%, transparent);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  48% {
    opacity: 1;
    filter: blur(0);
    top: -0.055em;
    text-shadow: 0 0 0.42rem color-mix(in srgb, var(--blue) 36%, transparent);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  72% {
    color: color-mix(in srgb, var(--blue) 20%, var(--white));
    top: 0.018em;
    text-shadow: none;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  100% {
    color: var(--white);
    opacity: 1;
    filter: blur(0);
    top: 0;
    text-shadow: none;
  }
}

@keyframes phrase-arrive {
  0% {
    color: color-mix(in srgb, var(--blue) 76%, var(--white));
    opacity: 0;
    filter: blur(0.15rem);
    text-shadow: 0 0 0.72rem color-mix(in srgb, var(--blue) 30%, transparent);
  }
  100% {
    color: var(--white);
    opacity: 1;
    filter: blur(0);
    text-shadow: none;
  }
}

.type-caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1.08em;
  vertical-align: -0.18em;
  animation: caret-live 620ms ease-in-out infinite alternate;
  text-decoration: none !important;
}

.type-caret::after {
  position: absolute;
  bottom: 0;
  left: 0.1em;
  width: 0.42em;
  height: 100%;
  background: var(--blue);
  box-shadow: 0 0 0.45rem color-mix(in srgb, var(--blue) 76%, transparent), 0 0 1.1rem color-mix(in srgb, var(--blue) 38%, transparent);
  content: "";
}

@keyframes caret-live {
  from { opacity: 0.34; transform: scaleY(0.76); }
  to { opacity: 1; transform: scaleY(1); }
}

.answer-view.typed .type-caret {
  animation: caret-finish 680ms 220ms ease-out forwards;
}

.resting-word {
  display: inline;
}

.answer-view.typed :is(.resting-word, .resting-line) {
  animation: word-breathe 7.2s ease-in-out infinite alternate;
}

.answer-view.typed :is(.resting-word, .resting-line).is-anchored {
  color: color-mix(in srgb, var(--blue) 72%, var(--white));
  text-shadow: 0 0 0.6rem color-mix(in srgb, var(--blue) 20%, transparent);
  animation: anchored-breathe 3.8s ease-in-out infinite alternate;
}

@keyframes anchored-breathe {
  from {
    color: color-mix(in srgb, var(--blue) 54%, var(--white));
    text-shadow: 0 0 0.18rem color-mix(in srgb, var(--blue) 8%, transparent);
  }
  to {
    color: color-mix(in srgb, var(--blue) 86%, var(--white));
    text-shadow: 0 0 0.72rem color-mix(in srgb, var(--blue) 28%, transparent);
  }
}

@keyframes word-breathe {
  from {
    opacity: 0.86;
  }
  to {
    opacity: 1;
  }
}

@keyframes line-breathe {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 1;
  }
}

.answer-view.typed .resting-line {
  animation-name: line-breathe;
}

.response-punctuation {
  animation: punctuation-settle 1.25s 120ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.closing-word {
  display: inline-block;
}

@keyframes punctuation-settle {
  0% {
    color: var(--blue);
    opacity: 0.2;
    text-shadow: 0 0 1rem var(--blue);
  }
  56% {
    color: var(--blue);
    opacity: 1;
    text-shadow: 0 0 0.56rem color-mix(in srgb, var(--blue) 54%, transparent);
  }
  100% {
    color: inherit;
    opacity: 1;
    text-shadow: none;
  }
}

.recall-view {
  width: min(100%, 36rem);
}

.recall-field {
  width: min(100%, 31rem);
  margin-inline: auto;
  padding: 1.5rem 0;
  cursor: pointer;
  outline: none;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 180ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), filter 240ms ease;
  touch-action: pan-y;
}

.recall-field:focus-visible {
  outline: none;
}

.recall-field.is-changing {
  opacity: 0;
  transform: translateY(0.18rem) scale(0.996);
  filter: blur(0.1rem);
}

.recall-fragment,
.recall-answer,
.recall-nav {
  margin: 0;
}

.recall-fragment {
  color: var(--white);
  font-size: clamp(1rem, 2.7vw, 1.16rem);
  line-height: 1.72;
  text-wrap: pretty;
}

.recall-fragment::before {
  content: "›";
  margin-right: 0.78rem;
  color: var(--blue);
  text-shadow: 0 0 0.72rem color-mix(in srgb, var(--blue) 34%, transparent);
}

.recall-answer {
  max-width: 27rem;
  margin: 1.25rem auto 0;
  color: var(--recall-quiet);
  font-size: 0.79rem;
  line-height: 1.68;
  text-align: left;
  text-wrap: pretty;
}

.recall-nav {
  display: flex;
  width: 4.8rem;
  margin: 1.55rem auto 0;
  align-items: center;
  justify-content: space-between;
  color: var(--option);
  font-size: 0.8rem;
}

.recall-nav i {
  width: 1.45rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity: 0.54;
}

.breath-phase-0 { animation-delay: 0s !important; }
.breath-phase-1 { animation-delay: -0.52s !important; }
.breath-phase-2 { animation-delay: -1.04s !important; }
.breath-phase-3 { animation-delay: -1.56s !important; }
.breath-phase-4 { animation-delay: -2.08s !important; }
.breath-phase-5 { animation-delay: -2.6s !important; }
.breath-phase-6 { animation-delay: -3.12s !important; }
.breath-phase-7 { animation-delay: -3.64s !important; }
.breath-phase-8 { animation-delay: -4.16s !important; }
.breath-phase-9 { animation-delay: -4.68s !important; }
.breath-phase-10 { animation-delay: -5.2s !important; }
.breath-phase-11 { animation-delay: -5.72s !important; }

@keyframes caret-finish {
  0%, 28% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.5); }
}

.answer-composer-slot {
  width: min(100%, 30rem);
  align-self: center;
  min-height: 5.9rem;
  padding-top: 4.25rem;
  padding-bottom: 0;
  transition: padding-bottom 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.answer-composer-slot:has(.command-preview.is-visible) {
  padding-bottom: calc(var(--command-space, 0px) + 5rem);
}

.answer-composer-slot .command-preview {
  top: calc(100% + 0.62rem);
  bottom: auto;
}

.answer-composer-slot .composer {
  margin-block: 0;
  margin-inline: auto;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    width 380ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 280ms ease 110ms,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}

.answer-view.typing .answer-composer-slot .composer {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 70ms;
}

.answer-view.typed .composer textarea::placeholder {
  animation: context-rest 10.5s ease-in-out 1.4s infinite;
}

@keyframes context-rest {
  0%, 100% { opacity: 0.76; }
  50% { opacity: 0.9; }
}

@media (max-width: 600px) {
  .shell {
    padding: max(1.1rem, env(safe-area-inset-top)) max(1.15rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1.15rem, env(safe-area-inset-left));
  }

  .view {
    font-size: 1rem;
  }

  .prompt-view,
  .thinking {
    width: min(100%, 26rem);
  }

  .answer-view {
    width: 100%;
  }

  .answer-scroll {
    max-height: min(64dvh, calc(100dvh - 8rem));
  }

  .answer-composer-slot {
    width: min(100%, 26rem);
    padding-top: 3.5rem;
  }

  .recall-field {
    width: min(100%, 27rem);
  }

  .command-preview {
    left: 50%;
    width: min(22rem, calc(100vw - 2.3rem));
    translate: -50% 0;
    transform: translateY(-0.2rem);
  }

  .command-preview.is-visible {
    transform: translateY(0);
  }

  .command-option {
    min-height: 31px;
    align-items: center;
    padding: 3px 0;
  }
}

@media (max-height: 520px) {
  .shell {
    padding-top: max(0.7rem, env(safe-area-inset-top));
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  }

  .answer-scroll {
    max-height: calc(100dvh - 5.4rem);
  }

  .answer-composer-slot {
    min-height: 2.25rem;
    padding-top: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  html,
  .view,
  .ambient-drift {
    animation: none;
    transition: none;
  }

  .typed-glyph {
    animation: none;
  }

  .answer-view.typed :is(.resting-word, .resting-line),
  .answer-view.typed .composer textarea::placeholder,
  .answer-view.typed .markdown strong,
  .response-punctuation,
  .memory-resonance.is-present,
  .memory-resonance.is-present .memory-word,
  .memory-trace.is-present .memory-word,
  .thinking .composer textarea {
    animation: none;
  }

  .answer-view.typed :is(.resting-word, .resting-line) {
    opacity: 1;
  }

  .markdown-typed .markdown-revealed {
    animation: none;
  }

  .type-caret {
    animation: none;
    opacity: 0;
  }

  .answer-composer-slot .composer {
    transition: none;
  }

  .answer-scroll {
    transition: none;
  }

  .answer-composer-slot {
    transition: none;
  }

  .composer,
  .phrase-anchor,
  .command-preview,
  .command-option,
  .prompt,
  .composer textarea,
  .composer textarea::placeholder {
    transition: none;
  }

  .command-option {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}