:root {
  color-scheme: light;
  --ink: #171717;
  --muted: #5c5c5c;
  --line: #cfcfcf;
  --paper: #fff;
  --accent: #c9f4ef;
  --accent-ink: #317c75;
  --rolodex-active-dot: #ff694a;
  --rolodex-active-glow: rgb(255 105 74 / 68%);
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Geist", Arial, sans-serif;
  --composer-height: 102px;
  --side-sheet-width: min(340px, calc(100vw - 86px));
  --content-width: 820px;
  --page-gutter: clamp(20px, 5vw, 72px);
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-bottom: calc(var(--composer-height) + 20px);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.conversation-active {
  overscroll-behavior-y: contain;
}

button,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

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

.menu-toggle {
  position: fixed;
  z-index: 30;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  display: grid;
  place-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 23px;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition:
    width 220ms ease,
    transform 220ms ease;
}

.menu-toggle span:last-child {
  width: 17px;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  width: 22px;
  transform: translateY(3.75px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  width: 22px;
  transform: translateY(-3.75px) rotate(-45deg);
}

.site-menu {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--side-sheet-width);
  padding: 118px 32px 42px;
  overflow-y: auto;
  background: var(--paper);
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 350ms;
}

.site-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.menu-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.dictionary-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 4px 0;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}

.entry-word {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.entry-pronunciation {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.page {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  transition:
    width 350ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 350ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.menu-open {
  overflow-x: hidden;
}

body.menu-open .page {
  width: calc(100% - 280px);
  margin-left: 280px;
}

.conversation {
  display: flex;
  flex-direction: column;
  width: min(100%, calc(var(--content-width) + 2 * var(--page-gutter)));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(120px, 18vh, 190px) var(--page-gutter) max(32px, env(safe-area-inset-bottom));
}

.headline {
  position: relative;
  width: 100%;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(38px, 4.35vw, 58px);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  line-height: 1.22;
  letter-spacing: -0.015em;
  transition:
    font-size 500ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.headline-reserve {
  visibility: hidden;
  white-space: pre-wrap;
}

.headline-typed {
  position: absolute;
  inset: 0;
  white-space: pre-wrap;
  transform: translateX(50%);
  will-change: transform;
}

.headline-typed.cursor-to-start {
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.headline-typed.is-complete {
  transform: translateX(0);
  transition: none;
  will-change: auto;
}

.start-onboarding {
  align-self: flex-start;
  width: min(100%, 620px);
  margin-top: clamp(24px, 4.5vh, 44px);
  padding: 15px 18px;
  border-radius: 17px;
  background: #f5f5f3;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.52;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.start-onboarding[hidden] {
  display: none;
}

.start-onboarding.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.start-onboarding p {
  margin: 0;
}

body.conversation-active .start-onboarding {
  display: none;
}

.type-char {
  position: relative;
  visibility: hidden;
}

.type-char.is-visible {
  visibility: visible;
}

.headline-typed.cursor-at-start::before,
.type-char.cursor-anchor::after {
  content: "";
  position: absolute;
  width: 1.5px;
  height: 0.9em;
  background: currentColor;
  animation: type-cursor-blink 1s steps(1, end) infinite;
}

.headline-typed.cursor-at-start::before {
  top: 0.12em;
  left: 0;
}

.type-char.cursor-anchor::after {
  top: 0.08em;
  right: -0.09em;
}

@keyframes type-cursor-blink {
  0%,
  40% {
    opacity: 0;
  }
  49%,
  100% {
    opacity: 1;
  }
}

.blinking-question {
  animation: question-blink 1.3s ease-in-out infinite;
}

@keyframes question-blink {
  0%,
  42%,
  100% {
    opacity: 1;
  }
  62% {
    opacity: 0.32;
  }
}

.composer-shell {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: clamp(34px, 7vh, 72px);
  padding: 1px 0;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 322ms ease,
    transform 322ms ease;
}

.composer-shell.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.composer {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  min-height: 66px;
  padding: 9px 9px 9px 20px;
  border: 0;
  border-radius: 19px;
  background: var(--paper);
  box-shadow:
    0 13px 34px rgb(0 0 0 / 7%),
    0 2px 7px rgb(0 0 0 / 4%);
  transition:
    box-shadow 160ms ease;
}

.composer:focus-within {
  box-shadow:
    0 15px 38px rgb(0 0 0 / 9%),
    0 2px 8px rgb(0 0 0 / 5%),
    0 0 0 1px rgb(0 0 0 / 7%);
}

.composer textarea {
  position: relative;
  z-index: 1;
  display: block;
  flex: 1;
  min-width: 0;
  height: 46px;
  max-height: 160px;
  padding: 12px 0 9px;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  font-weight: 280;
  line-height: 1.45;
}

.rotating-placeholder {
  position: absolute;
  z-index: 2;
  top: 21px;
  left: 20px;
  max-width: calc(100% - 94px);
  overflow: hidden;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #858585;
  font-family: inherit;
  font-size: 17px;
  font-weight: 280;
  line-height: 1.45;
  text-align: left;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-color: rgb(0 0 0 / 16%);
  text-underline-offset: 3px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  cursor: pointer;
  transition: opacity 140ms ease-in-out, color 160ms ease, text-decoration-color 160ms ease;
}

.composer-shell.is-visible .rotating-placeholder {
  pointer-events: auto;
}

.rotating-placeholder:hover,
.rotating-placeholder:focus-visible {
  color: var(--accent-ink);
  text-decoration-color: var(--accent-ink);
  outline: 0;
}

.rotating-placeholder.is-fading,
.composer.has-value .rotating-placeholder {
  opacity: 0;
  pointer-events: none;
}

.composer textarea:disabled {
  opacity: 0.55;
}

.send-button {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.send-button:hover:not(:disabled) {
  background: #cfe9e7;
}

.send-button:disabled {
  cursor: default;
  background: #ddf8f5;
  color: #6daaa5;
  opacity: 1;
}

.send-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.transcript {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6vh, 58px);
  width: 100%;
  margin-top: 0;
  scroll-padding-bottom: calc(var(--composer-height) + 20px);
}

.message {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  scroll-margin-bottom: calc(var(--composer-height) + 20px);
}

.message-user {
  align-self: flex-end;
  max-width: min(82%, 620px);
  padding: 13px 17px;
  border-radius: 15px;
  background: #f1f1f1;
  font-size: 16px;
  line-height: 1.5;
}

.message-assistant {
  align-self: stretch;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  animation: answer-in 420ms ease both;
  scroll-margin-top: 96px;
}

.message-assistant a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.assistant-turn {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  scroll-margin-bottom: calc(var(--composer-height) + 20px);
}

.message-tools {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 28px;
  color: #888;
}

.message-tool {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: color 160ms ease;
}

.message-tool:hover,
.message-tool[aria-pressed="true"] {
  color: var(--ink);
}

.message-tool svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-time {
  margin-left: 7px;
  color: #999;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

@keyframes answer-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.waiting {
  display: block;
  align-self: flex-start;
  width: 15px;
  height: 15px;
  scroll-margin-bottom: calc(var(--composer-height) + 20px);
}

.waiting span {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--rolodex-active-dot);
  animation: waiting-pulse 1.3s ease-in-out infinite;
}

@keyframes waiting-pulse {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.78);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.identity-mark {
  position: fixed;
  z-index: 18;
  top: calc(max(20px, env(safe-area-inset-top)) + 17px);
  right: calc(max(20px, env(safe-area-inset-right)) + 12.5px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--ink);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.3em;
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 1.6s ease,
    transform 1.6s ease;
}

.identity-name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.identity-mark.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.error-message {
  align-self: flex-start;
  max-width: 620px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.retry-button {
  margin-top: 10px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
}

body.conversation-active .conversation {
  padding-top: clamp(100px, 13vh, 138px);
  padding-bottom: 0;
}

body.conversation-active .transcript {
  padding-bottom: calc(var(--composer-height) + 20px);
}

body.conversation-active::before {
  content: "";
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 100px;
  background: linear-gradient(
    to bottom,
    var(--paper) 0%,
    var(--paper) 68%,
    rgb(255 255 255 / 0%) 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}

body.conversation-active .headline {
  margin-bottom: clamp(48px, 8vh, 80px);
  font-size: clamp(24px, 2.65vw, 34px);
  line-height: 1.25;
}

body.conversation-active .composer-shell {
  position: sticky;
  bottom: 0;
  margin-top: clamp(38px, 7vh, 70px);
  padding: 20px 0 max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--paper) 24px);
}

.noscript-message {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: 20px;
  margin: 0;
  text-align: center;
  font-size: 14px;
}

@media (max-width: 1100px) {
  :root {
    --content-width: 720px;
  }

  body.conversation-active::before {
    opacity: 1;
  }

  .message,
  .assistant-turn {
    scroll-margin-top: 108px;
  }
}

@media (max-width: 820px) {
  :root {
    --content-width: 640px;
  }
}

@media (max-width: 680px) {
  :root {
    --page-gutter: 36px;
  }

  .site-menu {
    width: var(--side-sheet-width);
    padding: 112px 24px 36px;
  }

  body.menu-open .page {
    width: 100%;
    margin-left: 0;
    transform: translateX(var(--side-sheet-width));
  }

  .conversation {
    padding-top: clamp(142px, 20vh, 178px);
  }

  .headline {
    width: calc(100% - 16px);
    max-height: 360px;
    margin-left: 16px;
    overflow: hidden;
    font-size: clamp(25px, 6.8vw, 34px);
    line-height: 1.24;
    letter-spacing: -0.035em;
    transition:
      max-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
      margin 360ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms ease,
      transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .composer-shell {
    margin-top: auto;
    padding-top: clamp(44px, 8vh, 72px);
  }

  .composer {
    min-height: 60px;
    padding: 6px 6px 6px 16px;
    border-radius: 17px;
  }

  .composer textarea {
    height: 46px;
    font-size: 16px;
  }

  .rotating-placeholder {
    top: 18px;
    left: 16px;
    max-width: calc(100% - 84px);
    font-size: 16px;
  }

  .send-button {
    flex-basis: 46px;
  }

  body.conversation-active .conversation {
    padding-top: calc(max(88px, env(safe-area-inset-top) + 68px));
  }

  body.conversation-active .headline {
    max-height: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
  }

  .message-assistant,
  .message-tools,
  .waiting,
  .error-message {
    width: calc(100% - 16px);
    margin-left: 16px;
  }

  body.conversation-active::before {
    height: calc(max(88px, env(safe-area-inset-top) + 68px));
    background: linear-gradient(
      to bottom,
      var(--paper) 0%,
      var(--paper) 74%,
      rgb(255 255 255 / 0%) 100%
    );
  }

  body.conversation-active .composer-shell {
    position: sticky;
    z-index: 20;
    bottom: 0;
    align-self: stretch;
    margin-top: 28px;
    padding: 12px 0 max(10px, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent, var(--paper) 14px);
  }

  body.conversation-active .transcript {
    flex: 0 1 auto;
    gap: clamp(24px, 4vh, 36px);
    padding-bottom: 0;
    overflow: visible;
  }

  body.conversation-active .conversation {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  .message-user {
    max-width: 88%;
  }

  .message-assistant {
    font-size: 16px;
  }

  .identity-mark {
    top: calc(max(20px, env(safe-area-inset-top)) + 17px);
    right: calc(max(20px, env(safe-area-inset-right)) + 12.5px);
    font-size: 9px;
  }

  body.conversation-active .chat-mode-header {
    z-index: 31;
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-height: 690px) and (max-width: 680px) {
  .conversation {
    padding-top: 108px;
  }

  .headline {
    font-size: clamp(24px, 6.7vw, 31px);
  }

  body:not(.conversation-active) .composer-shell {
    margin-top: auto;
    padding-top: 30px;
  }
}

/* Rolodex navigation — Prototype V1 */
:root {
  --rolodex-active-inset: 34px;
  /* Zieht den aktiven Text um den gemessenen Betrag zurück, der ihn exakt
     auf die Kurve setzt, auf der auch die Textenden der Nachbar-Einträge
     liegen (ohne diesen Versatz steht der aktive Text sichtbar weiter außen
     als seine direkten Nachbarn — nachgemessen, nicht geschätzt). */
  --rolodex-active-outward-offset: 0.75em;
  --rolodex-active-dot-gap: 0.58em;
}

.rolodex {
  position: fixed;
  z-index: 16;
  inset: 0 0 0 auto;
  width: 100vw;
  overflow: visible;
  pointer-events: none;
}

.rolodex-edge {
  position: absolute;
  z-index: 2;
  top: var(--circle-center-y, 50%);
  right: calc(8px + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 28px;
  min-height: 44px;
  padding: 8px 0 8px 12px;
  border: 0;
  background: transparent;
  color: var(--rolodex-active-dot);
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
  touch-action: pan-y;
}

.rolodex-edge-mark {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  filter: drop-shadow(0 0 1px var(--rolodex-active-glow));
  transform: rotate(45deg);
  transition: transform 260ms ease;
}

.rolodex-edge-mark--echo {
  margin-right: -2px;
  opacity: 0.3;
}

.rolodex:not(.has-been-opened):not(.is-open) .rolodex-edge-mark--echo {
  animation: rolodex-edge-invitation-inner 1.8s ease-in-out infinite;
}

.rolodex:not(.has-been-opened):not(.is-open) .rolodex-edge-mark:not(.rolodex-edge-mark--echo) {
  animation: rolodex-edge-invitation-outer 1.8s ease-in-out infinite;
}

.rolodex.has-been-opened .rolodex-edge-mark--echo,
.rolodex.is-open .rolodex-edge-mark--echo {
  display: none;
}

@keyframes rolodex-edge-invitation-inner {
  0%,
  20%,
  100% {
    opacity: 0.25;
  }
  36% {
    opacity: 0.5;
  }
  56% { opacity: 0.3; }
}

@keyframes rolodex-edge-invitation-outer {
  0%, 36%, 100% { opacity: 0.82; }
  54% { opacity: 1; }
  72% { opacity: 0.86; }
}

@media (prefers-reduced-motion: reduce) {
  .rolodex:not(.has-been-opened):not(.is-open) .rolodex-edge-mark {
    animation: none;
  }
}

.rolodex-edge:focus {
  outline: 0;
}

.rolodex-edge-copy {
  position: absolute;
  right: 13px;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.065em;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 650ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rolodex-edge-copy,
.rolodex-modes {
  display: none;
}

.rolodex.is-discovering:not(.is-open) .rolodex-edge {
  opacity: 0.58;
  transform: translate(-82px, -50%);
}

.rolodex.is-discovering:not(.is-open) .rolodex-edge-copy {
  opacity: 0.72;
  transform: translateX(0);
}

.rolodex.is-open .rolodex-edge {
  opacity: 1;
  pointer-events: auto;
}

.rolodex.is-open .rolodex-edge-mark {
  transform: rotate(-135deg);
}

.rolodex-item,
.rolodex-modes button {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.rolodex-modes {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.055em;
  opacity: 0.58;
}

.rolodex-modes button {
  padding: 6px 2px;
  font-size: inherit;
  letter-spacing: inherit;
}

.rolodex-modes button[aria-pressed="true"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rolodex .rolodex-modes {
  display: none;
}

.rolodex-wheel {
  position: fixed;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity 340ms ease;
  transform: none;
}

.rolodex-backdrop-disc {
  position: fixed;
  z-index: 0;
  top: var(--circle-center-y, 50%);
  left: var(--circle-center-x, 100%);
  /* A restrained outer radius gives the label field room without turning
     the page into a soft white field. The final 14% is the short fade. */
  width: calc((var(--circle-radius, 250px) + 315px) * 2);
  aspect-ratio: 1;
  background: radial-gradient(
    circle closest-side,
    rgb(255 255 255 / 100%) 0%,
    rgb(255 255 255 / 100%) 76%,
    rgb(255 255 255 / 75%) 84%,
    rgb(255 255 255 / 50%) 91%,
    rgb(255 255 255 / 20%) 96.5%,
    rgb(255 255 255 / 0%) 100%
  );
  background-repeat: no-repeat;
  display: none;
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: none;
}

.rolodex-gesture {
  position: fixed;
  z-index: 1;
  top: var(--rolodex-gesture-top, 18%);
  right: 0;
  bottom: var(--rolodex-gesture-bottom, 24%);
  width: var(--rolodex-gesture-width, min(62vw, 270px));
  pointer-events: none;
  touch-action: none;
}

@media (max-width: 767px) {
  .rolodex.is-open .rolodex-backdrop-disc {
    display: block;
  }
}

.rolodex.is-open .rolodex-gesture {
  pointer-events: auto;
}

.rolodex.is-open .rolodex-wheel {
  opacity: 1;
  transform: none;
  pointer-events: none;
}

.rolodex-rail {
  position: absolute;
  z-index: 2;
  inset: 0;
  outline: 0;
  pointer-events: none;
}

/* Schutzfläche zwischen Gesprächstext und Kreisnavigation (Audit, Punkt 6).
   Labels, die über die rechte Kante der Textspalte hinausragen würden, laufen
   vorher weich aus, statt über Hero oder Chat zu liegen. Nur auf dem Desktop –
   auf Mobil liegt der Kreis bewusst über der Seite. */
@media (min-width: 768px) {
  .rolodex-rail {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      transparent var(--rolodex-safe-left, 0px),
      #000 calc(var(--rolodex-safe-left, 0px) + 24px),
      #000 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      transparent var(--rolodex-safe-left, 0px),
      #000 calc(var(--rolodex-safe-left, 0px) + 24px),
      #000 100%
    );
  }
}

.rolodex#rolodex:not(.is-open) .rolodex-item {
  pointer-events: none;
}

.rolodex-item {
  --fade: 0;
  position: absolute;
  top: var(--anchor-y);
  left: var(--anchor-x);
  display: block;
  width: auto;
  max-width: min(76vw, 430px);
  min-height: 44px;
  padding: 10px 18px 10px 12px;
  font-family: var(--font-sans);
  color: #707070;
  font-size: var(--inactive-size);
  font-weight: 400;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  opacity: var(--fade);
  transform-origin: 100% 50%;
  transform: translate(-100%, -50%) rotate(var(--angle));
  /* Die Deckkraft wird in jedem Frame neu gesetzt – eine Transition darauf
     würde die Bewegung nur verschmieren. Farbe und Größe wechseln dagegen nur
     beim Einrasten und dürfen weich überblenden. */
  transition: color 200ms linear, font-size 220ms cubic-bezier(0.22, 1, 0.36, 1),
    font-weight 200ms linear, padding-right 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}

.rolodex:not(.is-spinning) .rolodex-item[aria-selected="true"] {
  padding-right: 0;
  color: var(--ink);
  font-size: var(--active-size);
  font-weight: 500;
  opacity: 1;
  transform-origin: 100% 50%;
  transform: translate(-100%, -50%) rotate(var(--angle));
}

.rolodex-item-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rolodex:not(.is-spinning) .rolodex-item[aria-selected="true"] .rolodex-item-label {
  transform: translateX(calc(0px - var(--rolodex-active-outward-offset)));
}

/* Der Punkt liegt bewusst außerhalb des Textflusses (position: absolute) und
   wird nicht mehr an- und abgehängt, sondern nur ein- und ausgeblendet. So
   ändert er nie die Breite des Labels — auch nicht während der Drehung — und
   kann deshalb, anders als Schriftgröße/Gewicht/Farbe, durchgehend dem
   aktiven Eintrag folgen, auch während sich das Rad noch dreht. */
.rolodex-item-dot {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-left: var(--rolodex-active-dot-gap);
  border-radius: 50%;
  background: var(--rolodex-active-dot);
  box-shadow: 0 0 2px rgb(255 105 74 / 52%);
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  transition: opacity 110ms linear, transform 110ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.rolodex-item[aria-selected="true"] .rolodex-item-dot {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.rolodex:not(.is-spinning)[data-orientation="horizontal"] .rolodex-item[aria-selected="true"] {
  margin-top: var(--active-axis-offset);
}

.rolodex:not(.is-spinning)[data-orientation="vertical"] .rolodex-item[aria-selected="true"] {
  margin-left: var(--active-axis-offset);
}

.rolodex-item:focus-visible {
  outline: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

body:has(.rolodex.is-open) .menu-toggle,
body:has(.rolodex.is-open) .identity-mark {
  opacity: 0.82;
}

.page,
.menu-toggle,
.identity-mark {
  transition-property: opacity, width, margin-left, transform;
}

@media (max-width: 680px) {
  .rolodex {
    width: 100vw;
  }

  .rolodex-item {
    width: auto;
    max-width: min(82vw, 320px);
  }

  .composer-shell {
    z-index: 20;
    isolation: isolate;
  }

}

@media (prefers-reduced-motion: reduce) {
  .rolodex-edge,
  .rolodex-wheel,
  .rolodex-item {
    transition-duration: 0.01ms !important;
  }
}

/* B1.5 — Radical Quiet */
.menu-backdrop {
  position: fixed;
  z-index: 38;
  inset: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

body.menu-open .menu-backdrop {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.site-menu {
  z-index: 40;
  inset: 0 auto 0 0;
  width: var(--side-sheet-width);
  flex-direction: column;
  padding: clamp(104px, 14vh, 138px) 34px 30px;
  border: 0;
  border-right: 1px solid rgb(23 23 23 / 7%);
  border-radius: 0;
  box-shadow: 16px 0 44px rgb(0 0 0 / 4%);
  transform: translateX(calc(-100% - 16px));
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 360ms;
}

.site-menu.is-open {
  transform: translateX(0);
}

.menu-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 clamp(34px, 5vh, 44px);
  font-family: var(--font-sans);
  color: #666963;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.menu-links {
  min-height: calc(100% - 58px);
  gap: clamp(21px, 2.8vh, 26px);
}

.entry-word {
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.entry-pronunciation {
  margin-top: 5px;
  color: #8a8d88;
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.dictionary-entry:focus-visible {
  outline: 0;
}

.dictionary-entry:focus-visible .entry-word {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.menu-legal {
  display: flex;
  gap: 5px;
  align-items: baseline;
  margin-top: auto;
  padding-top: 32px;
  color: #969994;
  font-size: 9px;
}

.legal-link {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

.menu-toggle {
  z-index: 50;
}

.menu-toggle:focus-visible {
  outline: 0;
}

.menu-toggle:focus-visible span {
  background: var(--rolodex-active-dot);
}

body.menu-open .menu-toggle {
  right: auto;
  left: max(20px, env(safe-area-inset-left));
}

body.menu-open .page {
  width: 100%;
  margin-left: 0;
  transform: translateX(var(--side-sheet-width));
  opacity: 0.84;
}

.conversation {
  width: min(100%, calc(900px + 2 * var(--page-gutter)));
  padding-top: clamp(132px, 19vh, 208px);
}

.headline {
  max-width: 880px;
  font-size: clamp(42px, 4.5vw, 64px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  transform-origin: left top;
  transition:
    font-size 380ms cubic-bezier(0.22, 1, 0.36, 1),
    line-height 380ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 380ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.start-onboarding {
  max-width: 680px;
  margin-top: 30px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.62;
}

body.conversation-active .start-onboarding.is-visible {
  display: block;
}

.composer-shell {
  max-width: 760px;
  z-index: 20;
  margin-top: clamp(28px, 5vh, 48px);
}

.composer {
  min-height: 62px;
  border: 1px solid rgb(34 39 36 / 4%);
  border-radius: 16px;
  background: #fcfcfb;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 85%),
    0 1px 3px rgb(0 0 0 / 1.5%);
  font-family: var(--font-sans);
}

.composer:focus-within {
  border-color: rgb(34 39 36 / 10%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 85%),
    0 2px 5px rgb(0 0 0 / 2%),
    0 0 0 2px rgb(255 90 61 / 9%);
}

.rotating-placeholder {
  color: #737772;
  transition: opacity 140ms ease-in-out;
}

.send-button,
.send-button:disabled,
.send-button:hover:not(:disabled),
.composer.has-value .send-button {
  color: #ff5a3d;
}

/* Variante A (Standard): fast hintergrundlos, mit subtil lesbarer Hit-Area. */
.composer-send-a .send-button,
.composer-send-a .send-button:disabled {
  border: 1px solid rgb(34 39 36 / 6%);
  background: #f8f8f6;
}

.composer-send-a .send-button:hover:not(:disabled),
.composer-send-a .composer.has-value .send-button {
  border-color: rgb(255 90 61 / 14%);
  background: #fff8f6;
}

/* Variante B: identische Tap-Fläche, ohne sichtbare Button-Fläche. */
.composer-send-b .send-button,
.composer-send-b .send-button:disabled,
.composer-send-b .send-button:hover:not(:disabled),
.composer-send-b .composer.has-value .send-button {
  border-color: transparent;
  background: transparent;
}

.transcript {
  gap: clamp(38px, 7vh, 66px);
}

.message-user {
  width: fit-content;
  max-width: min(76%, 610px);
  padding: 11px 15px;
  border-radius: 15px;
  background: #f2f4f1;
  color: #4e5651;
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 280;
  line-height: 1.5;
  transform: none;
}

.message-assistant {
  max-width: 760px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 280;
  line-height: 1.52;
  letter-spacing: -0.005em;
}

.message-tools {
  color: #a0a29e;
  font-family: var(--font-sans);
}

body.conversation-active .conversation {
  padding-top: clamp(112px, 15vh, 150px);
}

body.conversation-active .headline {
  max-width: 760px;
  margin-bottom: clamp(44px, 7vh, 70px);
  font-size: clamp(25px, 2.75vw, 36px);
  line-height: 1.34;
  letter-spacing: -0.015em;
}

body.conversation-active .composer-shell {
  max-width: 760px;
  transition:
    opacity 320ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 680px) {
  :root {
    --page-gutter: 24px;
    --side-sheet-width: min(64vw, 250px);
  }

  .site-menu {
    inset: 0 auto 0 0;
    width: var(--side-sheet-width);
    padding: max(100px, calc(env(safe-area-inset-top) + 84px)) clamp(22px, 6.4vw, 26px) max(26px, env(safe-area-inset-bottom));
    border-radius: 0;
  }

  .entry-word {
    font-size: clamp(17px, 4.65vw, 18px);
  }

  .rolodex-item {
    font-size: 16px;
    font-weight: 280;
  }

  .rolodex-item[aria-selected="true"] {
    font-size: 17px;
    font-weight: 280;
  }

  body.menu-open .page {
    transform: translateX(var(--side-sheet-width));
    opacity: 0.84;
  }

  .conversation {
    padding-top: clamp(126px, 18vh, 164px);
  }

  .headline {
    width: 100%;
    max-height: none;
    margin-left: 0;
    overflow: visible;
    font-size: clamp(29px, 8vw, 38px);
    line-height: 1.23;
  }

  body.conversation-active .conversation {
    padding-top: calc(max(96px, env(safe-area-inset-top) + 76px));
  }

  body.conversation-active .headline {
    max-height: none;
    margin: 0 0 42px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    font-size: clamp(21px, 5.8vw, 27px);
    line-height: 1.38;
  }

  .start-onboarding,
  .message-assistant,
  .message-tools,
  .waiting,
  .error-message {
    width: 100%;
    margin-left: 0;
  }

  .start-onboarding {
    font-size: 16px;
  }

  .message-user {
    max-width: 86%;
    font-size: 16px;
  }

  .message-assistant {
    font-size: 17px;
    line-height: 1.52;
  }

  body.conversation-active .composer-shell {
    margin-top: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .headline-typed {
    transform: translateX(0) !important;
  }
}

/* Desktop calm stage and right-anchored circle. Mobile (<= 767px) is frozen. */
@media (min-width: 768px) {
  :root {
    --desktop-stage-shift: clamp(26px, 3.2vw, 54px);
    --desktop-circle-zone: clamp(330px, 27vw, 430px);
  }

  .conversation {
    width: min(100%, calc(840px + 2 * var(--page-gutter)));
    transform: translateX(var(--desktop-stage-shift));
  }

  .headline,
  .transcript,
  .composer-shell,
  body.conversation-active .headline,
  body.conversation-active .composer-shell {
    width: 100%;
    max-width: 760px;
  }

  .headline {
    font-size: clamp(42px, 4.15vw, 61px);
    line-height: 1.2;
  }

  .rolodex-edge {
    right: calc(30px + env(safe-area-inset-right));
  }

  .rolodex:not(.has-been-opened):not(.is-open) .rolodex-edge-mark {
    animation: none;
  }

  .rolodex-edge-mark--echo {
    opacity: 0.32;
  }

  /* --rolodex-clip-x wird von rolodex.js gesetzt, sobald der aktive Eintrag
     gemessen wurde: Bei kurzen Labels bleibt die Vorgabe aus --desktop-
     circle-zone unverändert, bei langen Labels auf hohen/schmalen Fenstern
     rückt die Kante genau so weit nach links, wie der aktive Text tatsächlich
     braucht (nachgemessen, nicht geschätzt) – sonst wird mitten im Wort
     abgeschnitten. */
  .rolodex-wheel {
    clip-path: inset(0 0 0 var(--rolodex-clip-x, calc(100vw - var(--desktop-circle-zone))));
  }

  .rolodex-item,
  .rolodex-item[aria-selected="true"] {
    padding-right: 0;
    padding-left: 12px;
    text-align: right;
    transform-origin: 100% 50%;
    transform: translate(-100%, -50%) rotate(var(--angle));
  }

  .rolodex-item[aria-selected="true"] .rolodex-item-label {
    transform: translateX(0);
  }

  .rolodex-gesture {
    right: 0;
    width: var(--desktop-circle-zone);
  }

  .rolodex.is-open .rolodex-backdrop-disc {
    display: block;
  }

  .rolodex-backdrop-disc {
    width: calc((var(--circle-radius, 520px) + 230px) * 2);
    background: radial-gradient(
      circle closest-side,
      rgb(255 255 255 / 100%) 0,
      rgb(255 255 255 / 100%) calc(100% - 22px),
      rgb(255 255 255 / 72%) calc(100% - 14px),
      rgb(255 255 255 / 28%) calc(100% - 6px),
      rgb(255 255 255 / 0%) 100%
    );
  }

  body.menu-open .conversation {
    transform: translateX(var(--desktop-stage-shift));
  }

  .identity-mark {
    right: calc(max(20px, env(safe-area-inset-right)) + 24px);
  }
}

/* ------------------------------------------------------------------
   Menü: Desktop reflowt, Mobil überlagert.
   Vorher wurde .page auf allen Breiten nur per translateX verschoben –
   die Textspalte behielt ihre Breite und rutschte rechts aus dem Bild.
   ------------------------------------------------------------------ */

@media (min-width: 768px) {
  /* Der Inhalt rückt zur Seite UND wird schmaler, bricht also neu um. */
  body.menu-open .page {
    width: calc(100% - var(--side-sheet-width));
    margin-left: var(--side-sheet-width);
    transform: none;
    opacity: 1;
  }

  /* Die zusätzliche Bühnen-Verschiebung würde den Gewinn wieder auffressen. */
  body.menu-open .conversation {
    transform: none;
  }

  /* Die Headline skaliert per vw und wüsste sonst nichts von der
     schmaleren Spalte. */
  body.menu-open .headline {
    font-size: clamp(32px, 3.1vw, 46px);
  }
}

@media (max-width: 767px) {
  /* 420px minus 250px Menü lassen keine lesbare Spalte übrig –
     deshalb hier ein Overlay statt eines Schiebers. */
  body.menu-open .page {
    transform: none;
    opacity: 0.62;
  }

  body.menu-open .composer-shell {
    pointer-events: none;
  }
}

/* Der Öffnen-Pfeil des Rolodex saß mit seiner Spitze auf der Bildkante. */
.rolodex-edge {
  right: calc(12px + env(safe-area-inset-right));
}

/* ------------------------------------------------------------------
   Markdown in den Antworten. Das Modell formatiert mit Sternchen,
   Aufzählungen und Backticks – die standen vorher wörtlich im Text.
   ------------------------------------------------------------------ */

.message p {
  margin: 0 0 0.85em;
}

.message p:last-child,
.message ul:last-child,
.message ol:last-child,
.message pre:last-child {
  margin-bottom: 0;
}

.message ul,
.message ol {
  margin: 0 0 0.85em;
  padding-left: 1.35em;
}

.message li {
  margin-bottom: 0.32em;
}

.message li::marker {
  color: var(--muted);
}

.message strong {
  font-weight: 600;
}

.message em {
  font-style: italic;
}

.message code {
  padding: 0.12em 0.4em;
  border-radius: 5px;
  background: rgb(23 23 23 / 5%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.message pre {
  margin: 0 0 0.85em;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid rgb(23 23 23 / 8%);
  border-radius: 12px;
  background: rgb(23 23 23 / 3%);
}

.message pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 0.84em;
  line-height: 1.5;
  white-space: pre;
}