:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #16211c;
  background: #f1f4ee;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% 0%, #dcebdc 0, transparent 36%), #f1f4ee; }
.shell { width: min(1040px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 96px; }
header { max-width: 760px; margin-bottom: 52px; }
.eyebrow, .label { margin: 0 0 10px; color: #47705c; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(46px, 8vw, 88px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.intro { max-width: 620px; margin: 26px 0 0; color: #59665f; font-size: 18px; line-height: 1.7; }
.recorder, .draft, .workspace, .preferences { border: 1px solid #ccd6cd; border-radius: 28px; background: rgba(255,255,255,.74); box-shadow: 0 24px 60px rgba(43,65,53,.08); backdrop-filter: blur(16px); }
.recorder { padding: 30px; }
.recorder-topline, .draft-heading, .workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
h2 { margin: 0; font-size: 24px; }
.status { padding: 8px 12px; border-radius: 999px; background: #e7eee8; color: #47705c; font-size: 13px; font-weight: 700; }
.status.live { background: #ffe6df; color: #ae402d; }
.controls { display: flex; align-items: center; gap: 22px; padding: 48px 0 38px; }
.record-button { display: inline-flex; align-items: center; gap: 12px; border: 0; border-radius: 999px; padding: 17px 25px; background: #183f2d; color: white; font: inherit; font-weight: 750; cursor: pointer; box-shadow: 0 12px 26px rgba(24,63,45,.22); }
.record-button:hover { transform: translateY(-1px); }
.record-button.recording { background: #ad3d2d; }
.record-dot { width: 13px; height: 13px; border-radius: 50%; background: #ffb49f; }
.recording .record-dot { border-radius: 3px; background: white; }
.timer { font-variant-numeric: tabular-nums; color: #66736c; font-size: 20px; }
.transcript-card { min-height: 150px; padding: 22px; border-radius: 18px; background: #f7f8f5; border: 1px solid #e0e5df; }
.transcript { margin: 0; color: #647169; font-size: 18px; line-height: 1.7; }
.transcript.has-text { color: #1d2922; }
.draft { margin-top: 24px; padding: 30px; }
.workspace { margin-top: 24px; padding: 30px; }
.preferences { margin-top: 24px; padding: 30px; }
.workspace-meta { color: #47705c; font-size: 13px; font-weight: 750; }
.workspace-note { margin: 10px 0 0; color: #758078; font-size: 13px; line-height: 1.6; }
.workspace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.workspace-card { min-height: 160px; padding: 20px; border-radius: 17px; background: #edf3ed; border: 1px solid #d9e3da; }
.workspace-card h3 { margin: 0 0 14px; font-size: 15px; }
.workspace-list { margin: 0; padding-left: 20px; color: #26352d; font-size: 14px; line-height: 1.65; }
.workspace-list li + li { margin-top: 9px; }
.workspace-tag { display: inline-block; margin: 5px 5px 0 0; padding: 3px 7px; border-radius: 999px; background: #dce9de; color: #47705c; font-size: 10px; font-weight: 750; }
.draft-heading > span { color: #758078; font-size: 13px; }
.draft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.draft-card { padding: 20px; border-radius: 17px; background: #f7f8f5; border: 1px solid #e0e5df; }
.draft-card h3 { margin: 0; font-size: 15px; }
.draft-card-heading, .item-metadata, .draft-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.text-button, .remove-button { border: 0; background: transparent; color: #47705c; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.draft-item { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e1e6e1; }
.draft-input, .meta-input, .meta-select { width: 100%; border: 1px solid #d4ddd5; border-radius: 11px; background: white; color: #1d2922; font: inherit; }
.draft-input { padding: 12px; resize: vertical; line-height: 1.55; }
.draft-input:focus, .meta-input:focus, .meta-select:focus { outline: 2px solid #91b8a2; outline-offset: 1px; }
.item-metadata { margin-top: 9px; }
.meta-input, .meta-select { min-width: 0; padding: 8px 10px; font-size: 12px; }
.remove-button { color: #a34d3d; }
.empty-copy { margin: 18px 0 0; color: #7d8781; font-size: 13px; }
.draft-actions { margin-top: 26px; padding-top: 24px; border-top: 1px solid #dce3dc; }
.save-message { margin: 0; color: #68746c; font-size: 13px; }
.save-message.success { color: #2d7653; font-weight: 750; }
.save-message.error { color: #a33f31; }
.confirm-button { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 14px 22px; background: #183f2d; color: white; font: inherit; font-weight: 750; cursor: pointer; }
.confirm-button:disabled { cursor: default; opacity: .58; }
.preferences-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.preference-toggle, .snooze-field { display: flex; gap: 12px; padding: 17px; border: 1px solid #d9e3da; border-radius: 15px; background: #f7f8f5; }
.preference-toggle { align-items: flex-start; cursor: pointer; }
.preference-toggle input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #183f2d; }
.preference-toggle span { display: flex; flex-direction: column; gap: 4px; }
.preference-toggle small, .snooze-field span { color: #758078; font-size: 12px; line-height: 1.5; }
.snooze-field { grid-column: 1 / -1; align-items: center; justify-content: space-between; }
.snooze-field input { border: 1px solid #d4ddd5; border-radius: 10px; padding: 8px 10px; background: white; color: #1d2922; font: inherit; }
.preference-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.preference-actions > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.secondary-button { border: 1px solid #cbd8cd; border-radius: 999px; padding: 12px 16px; background: #f7f8f5; color: #315642; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.hidden { display: none; }
@media (max-width: 720px) {
  .shell { width: min(100% - 24px, 1040px); padding-top: 40px; }
  .recorder, .draft, .workspace, .preferences { padding: 22px; border-radius: 22px; }
  .recorder-topline, .draft-heading, .workspace-heading { flex-direction: column; }
  .draft-grid, .workspace-grid { grid-template-columns: 1fr; }
  .draft-actions { align-items: stretch; flex-direction: column; }
  .preferences-grid { grid-template-columns: 1fr; }
  .snooze-field { grid-column: auto; align-items: stretch; flex-direction: column; }
  .preference-actions { align-items: stretch; flex-direction: column; }
  .preference-actions > div { justify-content: stretch; }
  .preference-actions button { flex: 1; }
  .confirm-button { width: 100%; }
}
.login-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(100%, 440px);
  padding: 40px;
  border: 1px solid var(--line, #d8d1c5);
  border-radius: 24px;
  background: var(--paper, #fffdf8);
}

.login-card h1 { font-size: clamp(2rem, 8vw, 3.5rem); }
.login-field { display: grid; gap: 8px; margin: 28px 0 16px; }
.login-field input { padding: 14px; border: 1px solid #b8afa2; border-radius: 10px; font: inherit; }
.login-gate.hidden { display: none; }