:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  interpolate-size: allow-keywords;
  line-height: 1.5;

  --onyx: #003d35;
  --graphite: #075e55;
  --verdigris: #4db6ac;
  --pearl-aqua: #80cbc4;
  --snow: #eafcfd;

  --page: #fff7f8;
  --text: #004d40;
  --surface: color-mix(in srgb, var(--accent) 10%, var(--page));
  --sidebar: color-mix(in srgb, var(--accent) 16%, var(--page));
  --sidebar-text: var(--text);
  --border: #4db6ac;
  --muted: #356d68;
  --accent: #26a69a;
  --accent-soft: color-mix(in srgb, var(--accent) 24%, var(--page));
  --accent-strong: #00796b;
  --accent-text: #002e29;
  --send-icon: #002e29;
  --error: #a8241a;
  --error-button: #a8241a;
  --error-surface: #ffe8e5;
  --warning: #875000;
  --warning-surface: #fff0cf;
  --hero-center: var(--page);
  --hero-mid: color-mix(in srgb, var(--accent) 30%, var(--page));
  --hero-text: var(--text);
}

* {
  box-sizing: border-box;
}

body {
  background: var(--page);
  color: var(--text);
  margin: 0;
}

a {
  color: var(--accent-strong);
  text-underline-offset: .18em;
}

button,
input,
textarea {
  font: inherit;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

button {
  background: transparent;
  border: 0;
  border-radius: .5rem;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  min-height: 3rem;
  padding-inline: 1.1rem;
  transition: background-color .15s ease;
}

button:disabled {
  cursor: wait;
  opacity: .55;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}

.btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 82%, var(--onyx));
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--surface) 82%, var(--onyx));
}

.btn-ghost {
  background: transparent;
  color: var(--text);
}

.btn-ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

textarea {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: .5rem;
  color: var(--text);
  font-size: 1rem;
  padding: .75rem;
}

input {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: .5rem;
  color: var(--text);
  padding: .65rem .75rem;
}

:where(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

input[type="radio"] {
  accent-color: var(--accent-strong);
}

.action-icon {
  fill: none;
  height: 1.4rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
  width: 1.4rem;
}

.more-icon {
  fill: currentColor;
  stroke: none;
}

.visually-hidden:where(:not(:focus-within, :active)) {
  border: 0 !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.skip-link {
  background: var(--page);
  color: var(--text);
  left: 1rem;
  padding: .75rem;
  position: fixed;
  top: 1rem;
  transform: translateY(-200%);
  z-index: 10;
}

.skip-link:focus {
  transform: none;
}

.landing {
  background: radial-gradient(circle at 50% 45%, var(--hero-center) 30%, var(--hero-mid) 38%, var(--page) 46%);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 1rem;
  width: 100%;
}

.landing-hero {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin-inline: auto;
  max-width: 54rem;
  text-align: center;
  width: 100%;
}

.landing-hero>header {
  color: var(--hero-text);
  max-width: 34rem;
}

.landing h1 {
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-block: .35rem 1rem;
  text-wrap: balance;
}

.landing-hero>header>p:last-child {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 62ch;
}

.eyebrow {
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0;
}

.topic-picker {
  margin-block: 2rem;
  width: min(32rem, 90%);
}

.topic-options {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.topic-option input {
  display: block;
  height: 0;
  margin: 0;
  opacity: 0;
  width: 0;
}

.topic-option label {
  background: color-mix(in srgb, var(--page) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  border-radius: 999px;
  box-shadow: 0 .35rem 1rem rgb(32 39 34 / .08);
  cursor: pointer;
  display: block;
  min-height: 100%;
  padding: 0.5rem;
  font-size: 1.2rem;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.topic-option label:hover {
  background: var(--page);
  border-color: var(--accent-strong);
  transform: translateY(-2px);
}

.topic-option input:focus-visible+label {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.topic-option input:checked+label {
  background: var(--surface);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 2px var(--accent-strong);
}

.site-footer {
  align-items: start;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.landing>.site-footer {
  margin-inline: auto;
  max-width: 54rem;
  width: 100%;
}

.site-footer nav {
  display: flex;
  gap: 1rem;
  margin-left: auto;
}

.disclaimer {
  color: var(--muted);
  flex: 1 1 30rem;
  font-size: .9rem;
  margin: 0;
  max-width: 62ch;
}

.info-page {
  margin-inline: auto;
  max-width: 46rem;
  padding: clamp(2rem, 8vw, 6rem) 1rem;
}

.info-page h1 {
  font-size: clamp(2rem, 7vw, 3.5rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-block: 2rem;
}

.contact-form {
  display: grid;
  gap: .5rem;
  margin-block: 2rem;
}

.contact-form label {
  font-weight: 700;
}

.contact-form :is(input, textarea) {
  margin-bottom: .5rem;
  width: 100%;
}

.contact-form button {
  justify-self: start;
}

.contact-success {
  margin-top: 2rem;
}

.contact-success h2 {
  margin-bottom: .5rem;
}

.contact-success p {
  margin-top: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns .2s ease;
}

.app-shell:has(.sidebar-disclosure:not([open])) {
  grid-template-columns: 3.25rem minmax(0, 1fr);
}

.app-shell:not(:has(.sidebar)) {
  display: block;
}

.sidebar {
  background: var(--sidebar);
  color: var(--sidebar-text);
  font-size: .9375rem;
  overflow: hidden;
  padding: .5rem;
}

.sidebar a {
  color: var(--sidebar-text);
}

.sidebar-disclosure {
  min-width: 0;
}

.sidebar-disclosure::details-content {
  block-size: 0;
  opacity: 0;
  overflow: clip;
  transition: block-size .2s ease, content-visibility .2s allow-discrete, opacity .15s ease;
}

.sidebar-disclosure[open]::details-content {
  block-size: auto;
  opacity: 1;
  overflow: visible;
}

.sidebar-toggle {
  align-items: center;
  border-radius: .5rem;
  cursor: pointer;
  display: flex;
  height: 2.75rem;
  justify-content: center;
  list-style: none;
  width: 2.25rem;
}

.sidebar-toggle:hover {
  background: color-mix(in srgb, var(--snow) 10%, transparent);
}

.sidebar-toggle:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}

.sidebar-toggle::-webkit-details-marker {
  display: none;
}

.menu-icon {
  display: block;
  height: 1rem;
  position: relative;
  width: 1.25rem;
}

.menu-icon>span {
  background: currentColor;
  border-radius: 1px;
  height: 2px;
  inset-inline: 0;
  position: absolute;
  transition: opacity .15s ease, transform .2s ease;
}

.menu-icon>span:nth-child(1) {
  top: .1rem;
}

.menu-icon>span:nth-child(2) {
  top: .45rem;
}

.menu-icon>span:nth-child(3) {
  top: .8rem;
}

.sidebar-disclosure[open] .menu-icon>span:nth-child(1) {
  transform: translateY(.35rem) rotate(45deg);
}

.sidebar-disclosure[open] .menu-icon>span:nth-child(2) {
  opacity: 0;
}

.sidebar-disclosure[open] .menu-icon>span:nth-child(3) {
  transform: translateY(-.35rem) rotate(-45deg);
}

.sidebar-content {
  min-width: 15rem;
  padding: .25rem 0;
}

.new-conversation {
  align-items: center;
  background: transparent;
  border-radius: .5rem;
  color: var(--sidebar-text);
  display: flex;
  font-weight: 700;
  gap: .5rem;
  margin-block-end: .5rem;
  min-height: 2.5rem;
  padding: .45rem .3rem;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  width: 100%;
}

.new-conversation:hover {
  background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

.sidebar nav ul {
  display: grid;
  gap: .1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar nav li {
  min-width: 0;
}

.sidebar nav a {
  border-radius: .5rem;
  display: block;
  overflow: hidden;
  padding: .6rem .75rem;
  text-decoration: none;
  transition: background-color .15s ease;
  user-select: none;
  width: 100%;
}

.sidebar nav a:hover {
  background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

.sidebar nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent-soft) 32%, transparent);
  font-weight: 600;
  text-decoration: none;
}

.sidebar-conversation {
  position: relative;
}

.sidebar-conversation-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: padding-right .15s ease;
  white-space: nowrap;
}

.sidebar-conversation:hover .sidebar-conversation-title,
.sidebar-conversation:focus-within .sidebar-conversation-title {
  padding-right: 2.75rem;
}

.action-menu-toggle.sidebar-conversation-menu-toggle {
  height: auto;
  inset: 0 0 0 auto;
  min-height: 0;
  opacity: 0;
  padding: .4rem;
  position: absolute;
  transition: background-color .15s ease, opacity .15s ease;
  width: 2.5rem;
}

.sidebar-conversation:hover .sidebar-conversation-menu-toggle,
.sidebar-conversation:focus-within .sidebar-conversation-menu-toggle {
  opacity: 1;
}

.sidebar-conversation-menu {
  top: calc(anchor(bottom) + .15rem);
}

.conversation-actions {
  inset: .25rem .25rem auto auto;
  position: fixed;
  z-index: 10;
}

.action-menu-toggle {
  align-items: center;
  border-radius: .5rem;
  cursor: pointer;
  display: flex;
  height: 2.75rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  width: 2.75rem;
}

.action-menu-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.action-menu-items {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: .65rem;
  box-shadow: 0 .6rem 1.5rem rgb(0 0 0 / .18);
  display: none;
  font-size: .9375rem;
  inset: auto;
  margin: 0;
  min-width: 13rem;
  overflow: hidden;
  padding: 0;
  position: fixed;
  position-try-fallbacks: flip-block;
  right: anchor(right);
  top: calc(anchor(bottom) + .25rem);
}

.action-menu-items:popover-open,
.action-menu-items.\:popover-open {
  display: grid;
}

.action-menu-items form {
  margin: 0;
}

.action-menu-items button,
.action-menu-items a {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text);
  display: flex;
  font-weight: 600;
  gap: .65rem;
  justify-content: flex-start;
  min-height: 2.75rem;
  padding: .6rem .8rem;
  text-decoration: none;
  width: 100%;
}

.action-menu-items button:hover,
.action-menu-items a:hover {
  background: var(--surface);
}

.action-menu-items .danger-action {
  color: var(--error);
}

.conversation-dialog {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: .75rem;
  color: var(--text);
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 1.25rem;
  width: 100%;
}

/* Browsers without <dialog> would otherwise render every dialog inline. */
.conversation-dialog:not([open]) {
  display: none;
}

.conversation-dialog::backdrop {
  background: rgb(0 0 0 / .45);
}

.conversation-dialog h2 {
  margin-top: 0;
}

.conversation-dialog label {
  display: block;
  font-weight: 700;
  margin-bottom: .35rem;
}

.conversation-dialog input {
  width: 100%;
}

.dialog-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.danger-button {
  background: var(--error-button);
  color: white;
}

.danger-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error-button) 85%, black);
}

.chat {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  height: 100dvh;
  min-width: 0;
}

.messages {
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 1.5rem max(1rem, calc((100% - 48rem) / 2));
  scrollbar-gutter: stable;
}

.no-script-actions {
  border-top: 1px solid var(--border);
  padding: .5rem max(1rem, calc((100% - 48rem) / 2));
}

.no-script-actions summary {
  cursor: pointer;
  font-weight: 700;
}

.no-script-action-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding-top: .5rem;
}

.no-script-action-list form {
  align-items: center;
  display: flex;
  gap: .5rem;
  margin: 0;
}

.no-script-action-list input {
  max-width: 14rem;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.scroll-fade,
.messages,
.message table {
  --fade-axis: block;
  --fade-size: 1.25rem;
  --fade-to: to bottom;
  -webkit-mask-image: linear-gradient(var(--fade-to), transparent, black var(--fade-size), black calc(100% - var(--fade-size)), transparent);
  mask-image: linear-gradient(var(--fade-to), transparent, black var(--fade-size), black calc(100% - var(--fade-size)), transparent);
}

@supports (animation-timeline: scroll()) {

  .scroll-fade,
  .messages,
  .message table {
    -webkit-mask-image: none;
    animation-duration: auto;
    animation-fill-mode: both;
    animation-name: scroll-fade;
    animation-timeline: scroll(self var(--fade-axis));
    animation-timing-function: linear;
    mask-image: none;
  }

  /* Four stops in every frame, so the gradients interpolate instead of jumping. */
  @keyframes scroll-fade {
    0% {
      mask-image: linear-gradient(var(--fade-to), black 0%, black 0%, black calc(100% - var(--fade-size)), transparent 100%);
    }

    10%,
    90% {
      mask-image: linear-gradient(var(--fade-to), transparent 0%, black var(--fade-size), black calc(100% - var(--fade-size)), transparent 100%);
    }

    100% {
      mask-image: linear-gradient(var(--fade-to), transparent 0%, black var(--fade-size), black 100%, black 100%);
    }
  }
}

.message {
  margin-bottom: 1.5rem;
  overflow-wrap: anywhere;
}

.message article {
  max-width: 75ch;
}

.message[data-role="user"] {
  margin-inline-start: auto;
  max-width: 80%;
  width: fit-content;
}

.message[data-role="user"] article {
  background: var(--surface);
  border-radius: .8rem;
  padding: .65rem .85rem;
}

.message :first-child {
  margin-top: 0;
}

.message :last-child {
  margin-bottom: 0;
}

.message pre {
  background: var(--surface);
  border-radius: .5rem;
  overflow-x: auto;
  padding: .75rem;
}

.message :not(pre)>code {
  background: var(--surface);
  border-radius: .2rem;
  padding: .08em .25em;
}

.message table {
  --fade-axis: inline;
  --fade-to: to right;
  border-collapse: collapse;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  width: max-content;
}

.message :is(th, td) {
  border: 1px solid var(--border);
  min-width: 10rem;
  overflow-wrap: normal;
  padding: .45rem .65rem;
  text-align: left;
}

.message th {
  background: var(--surface);
}

.thinking {
  color: var(--muted);
}

.generation-notice {
  border-left: .25rem solid currentColor;
  border-radius: .25rem;
  padding: .65rem .75rem;
}

.generation-notice--warning {
  background: var(--warning-surface);
  color: var(--warning);
}

.generation-notice--error {
  background: var(--error-surface);
  color: var(--error);
}

.message form button {
  min-height: 2.25rem;
}

.composer {
  padding: .75rem max(1rem, calc((100% - 48rem) / 2));
}

.composer-controls {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  display: flex;
  gap: .4rem;
  padding: .4rem;
}

.composer-controls:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.composer textarea {
  background: transparent;
  border: 0;
  field-sizing: content;
  flex: 1;
  max-height: 10rem;
  min-height: 2.5rem;
  overflow-y: auto;
  padding: .45rem .65rem;
  resize: none;
}

.composer textarea:focus-visible {
  outline: 0;
}

.send-button {
  align-items: center;
  border-radius: 50%;
  color: var(--send-icon);
  display: inline-flex;
  flex: 0 0 2.25rem;
  font-size: 1.25rem;
  height: 2.25rem;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0;
  width: 2.25rem;
}

.composer textarea.is-expanded+.send-button {
  align-self: flex-end;
}

/* Hiding on the empty state (rather than showing on the filled one) keeps the
   button reachable in browsers that do not support :placeholder-shown — without
   JS, the button is the only way to submit. */
.composer textarea:placeholder-shown+.send-button {
  display: none;
}

.shared-chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
}

.shared-header {
  border-bottom: 1px solid var(--border);
  padding: 1rem max(1rem, calc((100% - 48rem) / 2));
}

.shared-header h1 {
  font-size: 1.25rem;
  margin: .15rem 0;
}

.shared-header p {
  color: var(--muted);
  margin: 0;
}

.shared-messages {
  min-height: 0;
  width: 100%;
}

.global-indicator {
  align-items: center;
  background: var(--graphite);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--snow);
  display: flex;
  font-size: .875rem;
  gap: .5rem;
  inset: 1rem 1rem auto auto;
  opacity: 0;
  padding: .45rem .75rem;
  pointer-events: none;
  position: fixed;
  transition: opacity .1s ease, visibility 0s linear .1s;
  visibility: hidden;
  z-index: 20;
}

.global-indicator.htmx-request {
  opacity: 1;
  transition: opacity .15s ease .45s, visibility 0s linear .45s;
  visibility: visible;
}

.loading-dot {
  animation: loading-pulse .8s ease-in-out infinite alternate;
  background: var(--pearl-aqua);
  border-radius: 50%;
  height: .55rem;
  width: .55rem;
}

.toast {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: .75rem;
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / .2);
  display: none;
  gap: .75rem;
  inset: 1rem 1rem auto auto;
  margin: 0;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: .75rem;
}

.toast:popover-open,
.toast.\:popover-open {
  animation: toast-in .18s ease-out;
  display: flex;
}

.toast--error {
  background: var(--error-surface);
  color: var(--error);
}

.toast--success {
  background: var(--surface);
  color: var(--text);
}

.toast-icon {
  align-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 1.5rem;
  font-weight: 800;
  height: 1.5rem;
  justify-content: center;
}

.toast-close {
  background: transparent;
  border: 0;
  color: currentColor;
  font-size: 1.35rem;
  margin-inline-start: auto;
  min-height: 2.25rem;
  padding: 0;
  width: 2.25rem;
}

.about-people-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.about-heading {
  text-align: center;
}

.about-people-card {
  display: flex;
  flex: 1 1 15rem;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 20rem;
  width: 100%;
}

.about-people-card>* {
  margin: 0;
}

.about-people-card img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  border-radius: 0.5rem;
}

.about-person-description> :first-child {
  margin-top: 0;
}

.about-person-description> :last-child {
  margin-bottom: 0;
}

@keyframes loading-pulse {
  to {
    opacity: .35;
    transform: scale(.75);
  }
}

@keyframes thinking-shimmer {
  to {
    background-position: -200% 0;
  }
}

@keyframes initial-message-in {
  from {
    opacity: 0;
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-.75rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .messages--new>.message:first-child[data-role="assistant"] .content>p {
    animation: initial-message-in .35s ease-out both;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(2) {
    animation-delay: .1s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(3) {
    animation-delay: .2s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(4) {
    animation-delay: .3s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(5) {
    animation-delay: .4s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(6) {
    animation-delay: .5s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(7) {
    animation-delay: .6s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(8) {
    animation-delay: .7s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(9) {
    animation-delay: .8s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(10) {
    animation-delay: .9s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(11) {
    animation-delay: 1s;
  }

  .messages--new>.message:first-child[data-role="assistant"] .content>p:nth-child(12) {
    animation-delay: 1.1s;
  }

  .thinking em {
    animation: thinking-shimmer 2s linear infinite;
    background: linear-gradient(90deg, var(--muted) 30%, var(--text) 50%, var(--muted) 70%);
    background-clip: text;
    background-position: 200% 0;
    background-size: 200% 100%;
    color: transparent;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #062f2b;
    --text: #d8f4f1;
    --surface: #104942;
    --sidebar: #0b3b37;
    --border: #3e8f86;
    --muted: #a4cbc6;
    --accent: #4db6ac;
    --accent-soft: #1f5e57;
    --accent-strong: #80cbc4;
    --accent-text: #002e29;
    --send-icon: #002e29;
    --error: #ffb4ab;
    --error-button: #9f3028;
    --error-surface: #451b18;
    --warning: #ffd18a;
    --warning-surface: #3d290a;
    --hero-center: #041f1c;
    --hero-mid: #104942;
    --hero-text: var(--snow);
  }
}

@media (max-width: 42rem) {
  .landing {
    background: radial-gradient(circle at 50% 45%, var(--hero-center) 48%, var(--hero-mid) 56%, var(--page) 64%)
  }

  .landing h1 {
    margin-top: 3rem;
    margin-bottom: 0;
  }

  .topic-options {
    grid-template-columns: 1fr;
  }

  .app-shell,
  .app-shell:has(.sidebar-disclosure:not([open])) {
    display: block;
  }

  .sidebar {
    background: transparent;
    border: 0;
    inset: .25rem auto auto .25rem;
    overflow: visible;
    padding: 0;
    position: fixed;
    z-index: 10;
  }

  .sidebar-disclosure::details-content {
    block-size: auto;
    overflow: visible;
    transition: content-visibility .2s allow-discrete;
  }

  .sidebar-toggle {
    background: transparent;
    color: var(--sidebar-text);
    position: relative;
    z-index: 2;
  }

  .sidebar-content {
    background: var(--sidebar);
    box-shadow: .5rem 0 1.5rem rgb(0 0 0 / .25);
    height: 100svh;
    inset: 0 auto 0 0;
    min-width: 0;
    opacity: 0;
    overflow-y: auto;
    padding: 4rem .5rem 1rem;
    position: fixed;
    transform: translateX(-100%);
    transition: opacity .15s ease, transform .2s ease, visibility .2s;
    visibility: hidden;
    width: min(18rem, 85vw);
    z-index: 1;
  }

  .sidebar-disclosure[open] .sidebar-content {
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .sidebar-conversation {
    display: grid;
    gap: .25rem;
    grid-template-columns: minmax(0, 1fr) 2.5rem;
  }

  .sidebar-conversation:hover .sidebar-conversation-title,
  .sidebar-conversation:focus-within .sidebar-conversation-title {
    padding-right: 0;
  }

  .action-menu-toggle.sidebar-conversation-menu-toggle {
    inset: auto;
    opacity: 1;
    position: static;
  }

  .chat {
    height: 100dvh;
    min-height: 0;
  }

  .messages {
    min-height: 0;
    padding-top: 4rem;
  }

  .message[data-role="user"] {
    max-width: 90%;
  }

  @starting-style {
    .sidebar-disclosure[open] .sidebar-content {
      opacity: 0;
      transform: translateX(-100%);
    }
  }
}

@media (prefers-reduced-motion: reduce) {

  .app-shell,
  button,
  .new-conversation,
  .sidebar-conversation-menu-toggle,
  .sidebar-disclosure::details-content,
  .sidebar-content,
  .global-indicator,
  .menu-icon>span {
    transition: none;
  }

  .loading-dot,
  .toast:popover-open,
  .toast.\:popover-open {
    animation: none;
  }
}