@font-face {
  font-family: "Geist";
  src: url("./assets/Geist-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #28231d;
  background: #f5f0e7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --paper: #fffdf9;
  --muted: #695c4d;
  --line: #ded3c1;
  --gold: #916920;
  --error: #a23b30;
  --success: #426336;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; display: grid; align-items: center; padding: 36px 40px; }
button { font: inherit; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
::selection { color: #28231d; background: #e6cf9f; }
html { scrollbar-color: #b0a18a #f5f0e7; }
[hidden] { display: none !important; }

.recorder { width: 100%; max-width: 1024px; margin: 0 auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 27px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 17px; }
.brand-mark { display: block; width: 51px; height: 29px; }
.brand-name { padding-left: 17px; border-left: 1px solid #cabeab; }
.brand-name strong, .brand-name span { display: block; }
.brand-name strong { font-size: 16px; line-height: 1.2; font-weight: 730; letter-spacing: -.025em; }
.brand-name span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.page-purpose { color: var(--muted); font-size: 12px; white-space: nowrap; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: clamp(40px, 6vw, 88px); padding: 52px 0; }
.recorder-heading h1 { margin: 0 0 18px; font-size: clamp(36px, 4.7vw, 50px); line-height: 1.08; letter-spacing: -.035em; font-weight: 580; text-wrap: balance; }
.recorder-heading p { margin: 0; max-width: 34ch; color: var(--muted); font-size: 15px; line-height: 1.65; }
.steps { margin: 34px 0 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; position: relative; padding: 0 0 23px; }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 33px; bottom: 6px; width: 1px; background: var(--line); }
.step-number { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #c9b795; border-radius: 50%; color: #76591f; font-size: 12px; font-weight: 600; }
.steps h2 { margin: 3px 0 5px; font-size: 14px; font-weight: 630; line-height: 1.4; }
.steps p { max-width: 34ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.recording-panel { min-width: 0; padding: 25px 30px 23px; border: 1px solid #d6c7b0; border-radius: 16px; background: var(--paper); }
.panel-heading { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.panel-heading span:first-child { color: #514536; font-weight: 620; }
.capture { text-align: center; padding: 28px 0 0; }
.microphone { width: 100px; height: 100px; display: grid; place-items: center; margin: 0 auto 24px; background: #f1e7d4; color: #7d5919; border-radius: 50%; transition: background-color 180ms ease, color 180ms ease; }
.microphone svg { width: 35px; height: 35px; }
.microphone .success-symbol, .microphone .error-symbol, .stop-symbol { display: none; }
.timer { color: #312820; font-size: 37px; font-weight: 530; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.timer span { margin-left: 3px; color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.status { min-height: 103px; padding: 19px 0 21px; }
.status h2 { margin: 0 0 8px; font-size: 16px; line-height: 1.4; font-weight: 630; text-wrap: balance; }
.status p { margin: 0 auto; max-width: 37ch; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.actions { display: flex; flex-direction: column; gap: 5px; }
.button { min-height: 48px; padding: 12px 16px; border: 0; border-radius: 10px; display: flex; justify-content: center; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 580; line-height: 1.4; transition: background-color 150ms ease, color 150ms ease; }
.button-primary { width: 100%; background: #29251f; color: var(--paper); }
.button-primary:hover:not(:disabled) { background: #494035; }
.button-primary:disabled { cursor: default; color: #746a5b; background: #e5ded2; }
.button-secondary { min-height: 44px; color: #695c4d; background: transparent; font-size: 12px; }
.button-secondary:hover:not(:disabled) { background: #f1e9dc; color: #28231d; }
.button-secondary:disabled { opacity: .65; cursor: default; }
.button-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.privacy, .close-note { margin: 15px 0 0; padding-top: 17px; border-top: 1px solid #e8dfd1; color: var(--muted); font-size: 11px; line-height: 1.65; }
.close-note { color: #514536; }
.page-footer { display: flex; align-items: center; justify-content: center; gap: 9px; padding-top: 23px; border-top: 1px solid var(--line); color: var(--muted); }
.page-footer svg { width: 16px; height: 16px; flex: 0 0 16px; }
.page-footer p { margin: 0; font-size: 11px; line-height: 1.6; }
.noscript { padding: 16px 0; color: var(--error); font-size: 14px; line-height: 1.5; }

[data-state="recording"] .microphone { background: #f8e4dd; color: var(--error); animation: recording-pulse 1.8s ease-in-out infinite; }
[data-state="recording"] .timer { color: var(--error); }
[data-state="recording"] .button-primary { background: #9d382c; }
[data-state="recording"] .button-primary:hover { background: #7e2b21; }
[data-state="recording"] .record-symbol { display: none; }
[data-state="recording"] .stop-symbol { display: block; }
[data-state="error"] .status h2 { color: var(--error); }
[data-state="error"] .microphone { background: #f8e4dd; color: var(--error); }
[data-state="error"] .microphone-symbol, [data-state="success"] .microphone-symbol { display: none; }
[data-state="error"] .error-symbol, [data-state="success"] .success-symbol { display: block; }
[data-state="success"] .microphone { background: #e4eddf; color: var(--success); }
[data-state="success"] .status h2 { color: var(--success); }
@keyframes recording-pulse { 0%, 100% { background-color: #f8e4dd; } 50% { background-color: #edc6ba; } }

@media (max-width: 740px) {
  body { align-items: start; padding: 28px 24px; }
  .recorder { max-width: 480px; }
  .page-header { padding-bottom: 22px; }
  .workspace { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .recorder-heading h1 { font-size: 34px; margin-bottom: 13px; }
  .recorder-heading h1 br { display: none; }
  .recorder-heading p { max-width: 42ch; font-size: 14px; }
  .steps { display: none; }
  .recording-panel { padding: 21px 25px; }
  .capture { padding-top: 25px; }
  .microphone { width: 84px; height: 84px; margin-bottom: 20px; }
  .microphone svg { width: 30px; height: 30px; }
  .status { min-height: 100px; }
  .page-footer { align-items: flex-start; padding-top: 20px; }
  .page-footer svg { margin-top: 2px; }
}
@media (max-width: 360px) {
  body { padding: 22px 18px; }
  .page-header { gap: 12px; }
  .brand { gap: 11px; }
  .brand-mark { width: 43px; height: 25px; }
  .brand-name { padding-left: 11px; }
  .page-purpose { max-width: 54px; white-space: normal; text-align: right; font-size: 11px; }
  .recorder-heading h1 { font-size: 29px; }
  .recording-panel { padding: 20px; }
  .status h2 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}