:root{
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-raised: #F5F5F7;
    --border: rgba(32,30,26,0.14);
    --ink: #201E1A;
    --ink-muted: #756F65;
    --blue: #3B82F6;
    --purple: #4A4741;
    --red: #F43F5E;
    --yellow: #F59E0B;
    --green: #22C55E;
    --avatar-border: rgba(32,30,26,0.16);
    --shadow: 0 16px 38px rgba(32,30,26,0.10);
    --card-bg: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(247,247,249,0.96));
    --card-border: rgba(32,30,26,0.12);
    --tag-border: rgba(32,30,26,0.14);
    --tag-ink: #5F5A52;
    --send-ink: #FFFFFF;
    --theme-bloom: rgba(255,255,255,0.82);
    --glow-opacity: 0.10;
  }

  html[data-theme="dark"]{
    --bg: #09090B;
    --surface: #151519;
    --surface-raised: #1D1D22;
    --border: rgba(255,255,255,0.13);
    --ink: #F5F5F2;
    --ink-muted: #A2A2AA;
    --blue: #60A5FA;
    --purple: #E5E4DF;
    --red: #FB7185;
    --yellow: #FBBF24;
    --green: #2DD4BF;
    --avatar-border: rgba(255,255,255,0.22);
    --shadow: 0 18px 44px rgba(0,0,0,0.42);
    --card-bg: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
    --card-border: rgba(255,255,255,0.13);
    --tag-border: rgba(255,255,255,0.12);
    --tag-ink: #D4D4D8;
    --send-ink: #101014;
    --theme-bloom: rgba(9,9,11,0.88);
    --glow-opacity: 0.24;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  html:has(.stage.is-chat){
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 32px 20px;
    transition: background-color 850ms ease, color 850ms ease;
  }
  body::before{
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at calc(100% - 43px) 43px, rgba(124, 58, 237, 0.30), transparent 38rem);
    opacity: var(--glow-opacity);
    pointer-events: none;
    transition: opacity 850ms ease;
  }
  body::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at top right, var(--theme-bloom), transparent 48vmax);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.02);
    transform-origin: top right;
  }
  html.theme-changing body::after{ animation: themeBloom 900ms cubic-bezier(.2,.75,.2,1) both; }
  @keyframes themeBloom{
    0%{ opacity: 0.58; transform: scale(0.02); }
    72%{ opacity: 0.22; transform: scale(1.45); }
    100%{ opacity: 0; transform: scale(1.75); }
  }

  .stage{
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .profile-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 38px;
    transition: margin 300ms ease, transform 300ms ease;
  }
  .stage.is-chat{
    max-width: 760px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    align-items: stretch;
    text-align: left;
    overflow: hidden;
  }
  body:has(.stage.is-chat){
    align-items: flex-start;
    height: 100dvh;
    min-height: 100dvh;
    padding: 22px 20px;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body:has(.stage.is-chat) .theme-toggle{
    display: none;
  }
  .stage.is-chat .profile-header{
    flex-direction: row;
    gap: 11px;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    top: auto;
    z-index: 4;
    /* The chat header deliberately belongs to the viewport, not the centered
       message column. This prevents side gutters on wide mobile viewports. */
    width: 100vw;
    margin: 0 0 0 calc(50% - 50vw);
    padding: 4px 88px 4px max(14px, calc((100vw - 760px) / 2));
    text-align: left;
    isolation: isolate;
    transition: margin 300ms ease, transform 300ms ease, padding 300ms ease, background-color 850ms ease;
  }
  .stage.is-chat .profile-header::before{
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset: -6px 0 -32px;
    background: linear-gradient(
      to bottom,
      var(--bg) 0%,
      var(--bg) 42%,
      color-mix(in srgb, var(--bg) 92%, transparent) 62%,
      color-mix(in srgb, var(--bg) 62%, transparent) 78%,
      transparent 100%
    );
  }
  .stage.is-chat .profile-header > *{
    position: relative;
    z-index: 1;
  }
  .stage.is-chat .avatar{
    width: 44px;
    height: 44px;
    margin: 0;
    box-shadow: none;
  }
  .role{ display: none; }

  .avatar{
    width: 187px;
    height: 187px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--avatar-border);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
  }

  .name{
    font-weight: 450;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
  }
  .stage.is-chat .name{ font-size: 16px; font-weight: 560; }

  .role{
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--ink-muted);
    margin-bottom: 32px;
  }

  .composer{
    width: 100%;
    position: relative;
    z-index: 3;
  }

  .quick-links{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    width: 100%;
    margin-top: 24px;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.3;
  }
  .quick-links a{
    color: var(--ink-muted);
    text-decoration: none;
    transition: color 160ms ease, transform 160ms ease;
  }
  .quick-links a:hover,
  .quick-links a:focus-visible{
    color: var(--ink);
    outline: none;
    transform: translateY(-1px);
  }
  .quick-links .dot{ opacity: .5; user-select: none; }
  .stage.is-chat .quick-links{ display: none; }

  .command-menu{
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    left: 8px;
    right: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity 160ms ease, transform 160ms ease;
  }
  .command-menu.is-open{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .command-menu-list{
    display: grid;
    gap: 2px;
  }
  .command-option{
    width: 100%;
    appearance: none;
    display: grid;
    grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    padding: 10px 11px;
    text-align: left;
    transition: background-color 160ms ease;
  }
  .command-option:hover,
  .command-option.is-active,
  .command-option:focus-visible{
    background: var(--surface-raised);
    outline: none;
  }
  .command-name{
    color: var(--purple);
    font-size: 13px;
    font-weight: 700;
  }
  .command-description{
    overflow: hidden;
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .command-empty{
    color: var(--ink-muted);
    font-size: 13px;
    padding: 11px;
  }

  .gradient-ring{
    width: 100%;
    padding: 0;
    border-radius: 26px;
  }

  @keyframes gradientShift{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 100% 50%; }
  }

  .input-inner{
    border: 2px solid transparent;
    border-radius: 26px;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      linear-gradient(100deg, var(--blue), var(--purple), var(--red), var(--yellow), var(--green)) border-box;
    background-size: 100% 100%, 260% 100%;
    background-position: 0 0, 0 50%;
    animation: gradientShift 7s ease-in-out infinite alternate;
    display: flex;
    align-items: flex-end;
    min-height: 58px;
    padding: 5px 5px 5px 20px;
    transition: background 850ms ease;
  }

  .input-wrap{
    position: relative;
    flex: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
  }

  #input{
    flex: 1;
    min-width: 0;
    min-height: 28px;
    max-height: 132px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.45;
    padding: 9px 0;
    color: var(--ink);
    outline: none;
    position: relative;
    z-index: 2;
    resize: none;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .ghost{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    font-size: 16px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
  }

  button.send{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--ink);
    color: var(--send-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 6px;
    align-self: flex-end;
    transition: background-color 850ms ease, color 850ms ease, transform 180ms ease;
  }
  button.send:hover{ transform: translateY(-1px); }
  button.send:disabled{ opacity: 0.45; cursor: default; }
  button.send svg{ width: 16px; height: 16px; }

  .answer-block{
    width: 100%;
    text-align: left;
    margin-top: 28px;
    min-height: 0;
    opacity: 1;
    transition: opacity 0.22s ease, transform 0.28s ease;
  }
  .stage.is-chat .answer-block{
    order: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 0;
    padding: 16px 4px 14px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .stage.is-chat .answer-block::-webkit-scrollbar{ display: none; }
  .stage.is-chat .composer{
    order: 3;
    flex: 0 0 auto;
    position: relative;
    bottom: auto;
    margin-top: -28px;
    padding: 38px 0 calc(2px + env(safe-area-inset-bottom));
    background: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in srgb, var(--bg) 46%, transparent) 36%,
      color-mix(in srgb, var(--bg) 88%, transparent) 72%,
      var(--bg) 100%
    );
  }
  .answer-block.hidden{ opacity: 0; transform: translateY(8px); }
  .answer-block.with-deck{ transform: translateY(-6px); }
  .answer-block:empty{ margin-top: 0; }

  .asked{
    font-size: 13px;
    color: var(--ink-muted);
    margin-bottom: 7px;
  }
  .chat-message{
    display: flex;
    width: 100%;
    animation: messageIn 220ms ease both;
  }
  .chat-message.user{ justify-content: flex-end; }
  .chat-message.assistant{ justify-content: flex-start; }
  .chat-bubble{
    max-width: min(83%, 570px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 12px 14px;
    box-shadow: 0 6px 20px rgba(32,30,26,0.06);
  }
  .chat-message.user .chat-bubble{
    border-color: transparent;
    border-bottom-right-radius: 5px;
    background: var(--ink);
    color: var(--send-ink);
  }
  .chat-message.assistant .chat-bubble{
    border-bottom-left-radius: 5px;
    background: var(--surface-raised);
  }
  .chat-message .asked{ margin: 0; color: inherit; font-size: 15px; line-height: 1.5; }
  .chat-message .reply{ font-size: 15px; line-height: 1.62; }
  .chat-message .fact-deck{ width: 100%; margin: 12px 0 0; }
  .chat-message .fact-deck-label{ padding-left: 0; }
  .chat-message .fact-track{ padding-left: 0; padding-right: 0; }
  .chat-message .fact-card{ flex-basis: min(500px, calc(100% - 42px)); }
  .chat-limit-note{
    align-self: center;
    color: var(--ink-muted);
    font-size: 12px;
    margin: -4px 0 2px;
  }
  @keyframes messageIn{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  .reply{
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    white-space: pre-line;
  }
  .reply-links{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }
  .reply-link{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    padding: 8px 11px;
    text-decoration: none;
  }
  .reply-link:hover{ border-color: var(--ink-muted); background: var(--surface-raised); }
  .site-icon{
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    background: var(--surface-raised);
    color: var(--ink);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    text-transform: lowercase;
  }
  .site-icon.is-github{ background: #24292f; color: #fff; }
  .site-icon.is-linkedin{ background: #0a66c2; border-radius: 3px; color: #fff; font-size: 10px; }
  .site-icon.is-pypi{ background: #3775a9; color: #fff; }
  .site-icon.is-appstore{ background: #0a84ff; color: #fff; font-size: 11px; }
  .site-icon.is-kariyerle{ background: #7c5ce0; color: #fff; }
  .site-icon.is-movienotes{ background: #2b2a3d; color: #fff; }
  .site-icon.is-instagram{ background: #d9468d; color: #fff; font-size: 8px; }
  .site-icon.is-email{ background: #6b7280; color: #fff; font-size: 10px; }
  .site-icon.is-file{ background: #b7791f; color: #fff; font-size: 10px; }
  .site-icon.is-web{ border-radius: 50%; background: #4b5563; color: #fff; font-size: 11px; }
  .site-icon svg{ display: block; width: 12px; height: 12px; fill: currentColor; }
  .site-icon svg.is-stroke{ fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
  .site-icon.is-instagram{ background: linear-gradient(135deg, #833ab4 0%, #d62976 55%, #f58529 100%); }
  .site-icon.is-letterboxd{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 20px;
    background: transparent;
  }
  .site-icon.is-letterboxd i{ width: 6px; height: 6px; border-radius: 50%; }
  .site-icon.is-letterboxd i:nth-child(1){ background: #ff8000; }
  .site-icon.is-letterboxd i:nth-child(2){ background: #00e054; }
  .site-icon.is-letterboxd i:nth-child(3){ background: #40bcf4; }
  .voice-message{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 270px;
  }
  .voice-info{ min-width: 0; flex: 1; }
  .voice-mic{
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    color: var(--purple);
    animation: voiceMicBreathe 1.15s ease-in-out infinite;
  }
  .voice-mic-icon{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .voice-message.is-pending{ min-width: 36px; }
  @keyframes voiceMicBreathe{ 0%, 100%{ opacity: .42; transform: scale(.96); } 50%{ opacity: 1; transform: scale(1.03); } }
  .voice-wave{
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    flex: 1;
    overflow: hidden;
  }
  .voice-wave span{
    display: block;
    width: 2px;
    height: var(--wave-h, 8px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink-muted) 56%, transparent);
    opacity: .92;
    transition: background 120ms ease, transform 120ms ease;
  }
  .voice-wave span.is-played{ background: var(--purple); }
  .voice-play{
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: var(--send-ink);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--ink) 16%, transparent);
    cursor: pointer;
    padding: 0;
    transition: transform 150ms ease, opacity 150ms ease;
  }
  .voice-play:hover{ transform: translateY(-1px); }
  .voice-play:disabled{ cursor: default; opacity: .72; }
  .voice-play-icon{
    display: block;
    width: 18px;
    height: 18px;
    margin-left: 1px;
    overflow: visible;
  }
  .voice-pause-bars{ display: none; }
  .voice-play.is-playing .voice-play-triangle{ display: none; }
  .voice-play.is-playing .voice-pause-bars{ display: block; }
  .voice-status{ display: block; margin-top: 4px; color: var(--ink-muted); font-size: 11px; white-space: nowrap; }
  .theme-toggle{
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 5;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 850ms ease, border-color 850ms ease, color 850ms ease, box-shadow 850ms ease, transform 180ms ease;
  }
  .theme-toggle:hover{ transform: translateY(-2px); }
  .theme-toggle svg{ width: 18px; height: 18px; }
  .theme-toggle .theme-sun{ display: none; }
  html[data-theme="dark"] .theme-toggle .theme-sun{ display: block; }
  html[data-theme="dark"] .theme-toggle .theme-moon{ display: none; }

  .fact-deck{
    width: calc(100% + 40px);
    margin: 23px -20px -2px;
    position: relative;
    opacity: 0;
    transform: translateY(18px);
    animation: deckIn 0.48s cubic-bezier(.2,.8,.2,1) forwards;
    overflow: visible;
  }
  .fact-deck-label{
    display: block;
    padding: 0 20px 10px;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .fact-track{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 20px 12px;
    scroll-padding-left: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
  }
  .fact-track:active{ cursor: grabbing; }
  .fact-track:focus-visible{ outline: 2px solid var(--purple); outline-offset: -4px; }
  .fact-track::-webkit-scrollbar{ display: none; }
  .fact-card{
    flex: 0 0 min(500px, calc(100% - 74px));
    min-height: 230px;
    padding: 18px;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    scroll-snap-align: start;
    opacity: 0.42;
    transform: scale(0.94);
    transform-origin: left center;
    transition: opacity 280ms ease, transform 280ms ease, background 850ms ease, border-color 850ms ease, box-shadow 850ms ease;
  }
  .fact-card.is-active{ opacity: 1; transform: scale(1); }
  .fact-kind{
    color: var(--ink-muted);
    display: block;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    text-transform: uppercase;
  }
  .fact-card h3{
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    font-weight: 560;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .fact-description{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 12px 0 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.5;
  }
  .fact-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
  }
  .fact-tag{
    border: 1px solid var(--tag-border);
    border-radius: 999px;
    color: var(--tag-ink);
    font-size: 12px;
    line-height: 1;
    padding: 7px 8px;
  }
  .fact-card-link{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .fact-card-link:hover{ color: var(--ink); }
  .link-arrow{ margin-left: -1px; }
  .fact-controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    inset: 42px 4px 38px;
    pointer-events: none;
  }
  .fact-control{
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    pointer-events: auto;
    box-shadow: var(--shadow);
    transition: background-color 850ms ease, border-color 850ms ease, color 850ms ease, transform 180ms ease;
  }
  .fact-control:hover{ transform: translateY(-1px); }
  @keyframes deckIn{ to { opacity: 1; transform: translateY(0); } }

  .word{ opacity: 0; transition: opacity 0.32s ease; }

  .typing{ display: inline-flex; gap: 4px; padding: 2px 0; }
  .typing span{ width: 6px; height: 6px; background: var(--ink-muted); border-radius: 50%; animation: bounce 1.2s infinite; }
  .typing span:nth-child(2){ animation-delay: 0.15s; }
  .typing span:nth-child(3){ animation-delay: 0.3s; }
  @keyframes bounce{ 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

  @media (max-width: 620px){
    body{
      align-items: center;
      padding: max(24px, env(safe-area-inset-top)) 14px calc(32px + env(safe-area-inset-bottom));
    }
    body::before{ background: radial-gradient(circle at 50% -12%, rgba(124, 58, 237, 0.30), transparent 28rem); }
    .stage{ max-width: none; }
    .avatar{ width: 137px; height: 137px; margin-bottom: 13px; }
    .stage.is-chat .avatar{ width: 42px; height: 42px; margin: 0; }
    .stage.is-chat{
      height: 100%;
      min-height: 0;
    }
    body:has(.stage.is-chat){
      align-items: flex-start;
      padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom);
    }
    .stage.is-chat .profile-header{
      margin-left: calc(50% - 50vw);
      margin-right: 0;
      padding: 4px 76px 4px 14px;
    }
    .name{ font-size: 24px; }
    .role{ margin-bottom: 26px; }
    .command-menu{ left: 4px; right: 4px; }
    .command-option{ grid-template-columns: 78px minmax(0, 1fr); gap: 8px; padding: 9px 10px; }
    .gradient-ring, .input-inner{ border-radius: 22px; }
    .input-inner{ min-height: 56px; padding-left: 16px; }
    button.send{ width: 42px; height: 42px; margin-left: 5px; }
    .answer-block{ margin-top: 22px; }
    .stage.is-chat .answer-block{
      padding: 16px 4px 14px 0;
      scroll-padding-bottom: 14px;
    }
    .stage.is-chat .composer{
      margin-top: -28px;
      padding: 38px 0 calc(8px + env(safe-area-inset-bottom));
      isolation: isolate;
      z-index: 5;
    }
    .fact-deck{ width: calc(100% + 28px); margin-left: -14px; margin-right: -14px; }
    .fact-deck-label{ padding-left: 14px; padding-right: 14px; }
    .fact-track{ padding-left: 14px; padding-right: 14px; scroll-padding-left: 14px; }
    .fact-card{ flex-basis: calc(100% - 48px); min-height: 224px; padding: 17px; }
    .fact-controls{ inset: 42px 2px 38px; }
    .theme-toggle{ top: calc(env(safe-area-inset-top) + 12px); right: 14px; }
  }

  @media (max-width: 360px){
    #input, .ghost{ font-size: 15px; }
    button.send{ width: 40px; height: 40px; }
  }

  @media (prefers-reduced-motion: reduce){
    .input-inner, .fact-deck, body::after{ animation: none; }
    .fact-deck{ opacity: 1; transform: none; }
    .typing span{ animation: none; }
    .word{ transition: none; opacity: 1; }
    body, body::before, .input-inner, .theme-toggle, .fact-card, .fact-control{ transition: none; }
  }