:root {
  --ink: #000000;
  --graphite: #5e5e5e;
  --paper: #f7f7f7;
  --line-subtle: rgba(94, 94, 94, 0.18);
  --line-default: rgba(94, 94, 94, 0.32);
  --editorial: "Romana", "Bodoni 72", Didot, Georgia, serif;
  --technical: Consolas, Monaco, Menlo, "Courier New", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  display: grid;
  min-height: 100vh;
  margin: 0;
  padding: 18px 12px;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--editorial);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* This shell is presentation chrome for the browser preview; all app surfaces remain square. */
.presentation-frame {
  width: min(360px, calc(100vw - 24px));
  border: 1px solid var(--line-default);
  border-radius: 39px;
  overflow: hidden;
  background: var(--paper);
}

.app-surface { min-height: 760px; background: var(--paper); }
.app-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--line-subtle);
}
.wordmark { font: 700 16px/1 var(--technical); letter-spacing: .14em; }
.language-button {
  min-width: 92px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--graphite);
  background: transparent;
  font: 11px/1 var(--technical);
  letter-spacing: .04em;
  cursor: pointer;
}
.language-button span { margin-left: 5px; font-size: 15px; }

.screen-content { padding: 24px 20px 32px; }
.session-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 18px;
  color: var(--graphite);
  font: 11px/14px var(--technical);
  letter-spacing: .02em;
}
.session-line > i { height: 1px; background: var(--line-default); }
.session-line b, .panel-meta b { display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--ink); }

.companion-panel {
  position: relative;
  height: 215px;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
}
.panel-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 13px 14px 0;
  color: var(--paper);
  font: 10px/14px var(--technical);
  letter-spacing: .02em;
}
.panel-meta > span:first-child { color: rgba(247, 247, 247, .62); }
.panel-meta b { background: var(--paper); }
.companion-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel-caption {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  z-index: 1;
  color: rgba(247, 247, 247, .72);
  font: 10px/14px var(--technical);
  letter-spacing: .04em;
  text-align: center;
}

.intro { padding: 24px 0; border-bottom: 1px solid var(--line-subtle); }
.kicker { margin: 0; color: var(--graphite); font: 700 11px/14px var(--technical); letter-spacing: .02em; }
.intro h1 { margin: 8px 0 0; font: 400 32px/34px var(--editorial); letter-spacing: -.03em; }
.intro p:not(.kicker) { margin: 10px 0 0; color: var(--graphite); font: 17px/22px var(--editorial); letter-spacing: -.015em; }

.entry-region { padding-top: 24px; }
.entry-actions { display: grid; grid-template-columns: 1fr 88px 1fr; gap: 8px; align-items: stretch; }
.secondary-action, .voice-action {
  min-height: 56px;
  padding: 8px 4px;
  border: 1px solid var(--ink);
  font: 10px/14px var(--technical);
  letter-spacing: .025em;
  cursor: pointer;
}
.secondary-action { color: var(--ink); background: var(--paper); }
.secondary-action span { display: block; margin-bottom: 2px; font: 20px/16px var(--technical); }
.voice-action { display: grid; place-items: center; color: var(--paper); background: var(--ink); }
.microphone { display: block; width: 12px; height: 20px; border: 2px solid var(--paper); border-top-width: 9px; font-size: 0; }
.voice-action span:last-child { margin-top: 1px; font-size: 8px; }
.voice-action[data-state="listening"] { color: var(--ink); background: var(--paper); border-width: 2px; }
.voice-action[data-state="listening"] .microphone { border-color: var(--ink); }
.voice-action[data-state="processing"] { color: var(--ink); background: var(--paper); }
.voice-action[data-state="response-ready"] { color: var(--paper); background: var(--graphite); border-color: var(--graphite); }

.status-region { min-height: 32px; padding-top: 14px; color: var(--graphite); font: 10px/14px var(--technical); letter-spacing: .025em; text-align: center; }
.response-region { margin-top: 8px; padding: 12px 0; border-top: 1px solid var(--line-subtle); border-bottom: 1px solid var(--line-subtle); }
.response-region span, .attachment-summary { color: var(--graphite); font: 10px/14px var(--technical); letter-spacing: .025em; }
.response-region p { margin: 8px 0 0; font: 17px/22px var(--editorial); letter-spacing: -.015em; }
.attachment-summary { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; min-height: 48px; border-top: 1px solid var(--line-subtle); }
.attachment-summary button { min-height: 44px; padding: 0; border: 0; color: var(--ink); background: transparent; font: 10px/14px var(--technical); letter-spacing: .025em; cursor: pointer; }
.attachment-summary button:last-child { color: var(--graphite); }
.safety-copy { margin: 18px 0 0; color: rgba(94, 94, 94, .72); font: 9px/14px var(--technical); letter-spacing: .025em; text-align: center; }

.bottom-rail { display: flex; min-height: 26px; align-items: center; justify-content: space-around; padding: 0 20px; border-top: 1px solid var(--line-subtle); }
.bottom-rail::before { position: absolute; width: 160px; height: 1px; content: ""; background: var(--line-subtle); }
.bottom-rail i { position: relative; z-index: 1; width: 5px; height: 5px; background: var(--graphite); }
.bottom-rail i:nth-child(2) { width: 13px; height: 13px; background: var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-surface[data-state="listening"] .voice-signal rect { animation: voice-level .7s ease-in-out infinite alternate; transform-origin: center; }
.app-surface[data-state="listening"] .voice-signal rect:nth-child(3) { animation-delay: -.25s; }
.app-surface[data-state="listening"] .voice-signal rect:nth-child(4) { animation-delay: -.45s; }
@keyframes voice-level { from { scale: 1 .45; } to { scale: 1 1; } }

@media (max-width: 380px) { .screen-content { padding-inline: 18px; } .app-header { padding-inline: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }