:root { --bg:#faf8f4; --fg:#1d1d1b; --muted:#6b6a66; --card:#fff; --line:#e6e2da; --accent:#2f5d50; --accent-fg:#fff; --danger:#a33; }
  @media (prefers-color-scheme: dark) { :root { --bg:#141413; --fg:#eeebe4; --muted:#9a978f; --card:#1e1e1c; --line:#33322f; --accent:#8fbba8; --accent-fg:#101; } }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui, -apple-system, sans-serif; }
  header { display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem; border-bottom:1px solid var(--line); }
  header img { height:28px; }
  header b { font-size:1.05rem; }
  header small { color:var(--muted); margin-left:auto; }
  main { max-width:600px; margin:0 auto; padding:1rem; }
  .progress { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; color:var(--muted); font-size:.82rem; }
  .progress b { flex:1; height:4px; background:var(--line); border-radius:2px; overflow:hidden; }
  .progress i { display:block; height:100%; background:var(--accent); }
  .intro { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:14px; padding:1rem 1.1rem; margin-bottom:1rem; }
  .intro h1 { margin:0 0 .3rem; font-size:1rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
  .intro p { margin:0 0 .5rem; }
  .intro details { font-size:.9rem; }
  .intro summary { color:var(--accent); cursor:pointer; }
  .intro dl { margin:.5rem 0 0; }
  .intro dt { font-weight:600; margin-top:.4rem; }
  .intro dd { margin:0; color:var(--muted); }
  .intro.seen p, .intro.seen details { display:none; }
  .intro .toggle { float:right; font:inherit; font-size:.82rem; color:var(--accent); background:none; border:0; cursor:pointer; padding:0; }
  .term { border-bottom:1px dotted var(--muted); cursor:help; text-decoration:none; color:inherit; }
  .term.open::after { content:attr(data-meaning); display:block; font-size:.82rem; color:var(--muted); font-weight:400; margin:.2rem 0 .3rem; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem; margin-bottom:1rem; }
  .topic { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
  .stake { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.25rem .6rem; overflow-wrap:anywhere; }
  .worth { font-weight:600; }
  .worth small { color:var(--muted); font-weight:400; margin-right:.3rem; }
  h2 { margin:.3rem 0 .5rem; font-size:1.2rem; line-height:1.3; }
  .why { color:var(--muted); margin:0 0 .7rem; }
  .chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem; }
  .chip.term.open { display:inline-block; }
  .chip { background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem; font-size:.82rem; }
  .chip a { color:inherit; }
  .att img { max-width:100%; border-radius:8px; margin:.3rem 0; display:block; }
  .att figcaption { font-size:.8rem; color:var(--muted); }
  .opts { display:grid; gap:.5rem; margin:.6rem 0; }
  .opt { text-align:left; background:var(--card); border:1.5px solid var(--line); border-radius:10px; padding:.7rem .9rem; font:inherit; color:inherit; cursor:pointer; }
  .opt.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
  .opt small { display:block; color:var(--muted); font-size:.82rem; margin-top:.1rem; }
  .opt .rec { float:right; font-size:.72rem; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:0 .45rem; margin-left:.4rem; }
  textarea { width:100%; min-height:3.2rem; border:1px solid var(--line); border-radius:10px; padding:.6rem; font:inherit; background:var(--bg); color:inherit; resize:vertical; }
  .row { display:flex; gap:.6rem; align-items:center; margin-top:.7rem; }
  button.primary { background:var(--accent); color:var(--accent-fg); border:0; border-radius:10px; padding:.75rem 1.1rem; font:inherit; font-weight:600; cursor:pointer; flex:1; }
  button.primary:disabled { opacity:.5; }
  .answer-actions { position:sticky; bottom:0; z-index:2; background:var(--card); padding:.3rem 0 max(.5rem, env(safe-area-inset-bottom)); }
  .answer-actions .row { margin-top:.25rem; }
  .ready-status { color:var(--accent); font-size:.85rem; font-weight:600; min-height:1.3em; }
  button.primary.ready { outline:2px solid var(--accent); outline-offset:3px; }
  button.primary.attention { animation:send-ready .45s ease-out; }
  @keyframes send-ready { 50% { transform:scale(1.035); } }
  .answer-status { color:var(--danger); font-size:.88rem; }
  .voice-review { margin-top:.8rem; }
  .voice-review label { font-weight:600; }
  .voice-transcript { min-height:7rem; margin-top:.35rem; font-weight:400; }
  .voice-playback { display:block; width:100%; margin:.5rem 0; }
  .voice-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
  .voice-actions button { font:inherit; font-size:.85rem; color:var(--accent); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:.5rem; cursor:pointer; }
  .voice-actions button:disabled { opacity:.5; cursor:default; }
  button.talk { width:56px; height:56px; border-radius:50%; border:1.5px solid var(--accent); background:var(--card); color:var(--accent); font-size:1.4rem; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; }
  button.talk.rec { background:var(--danger); border-color:var(--danger); color:#fff; animation:pulse 1s infinite; }
  button.talk.busy { cursor:wait; animation:pulse 1.4s infinite; }
  @keyframes pulse { 50% { transform:scale(1.08); } }
  @media (prefers-reduced-motion: reduce) {
    button.primary.attention, button.talk.rec, button.talk.busy { animation:none; }
  }
  .hint { font-size:.8rem; color:var(--muted); margin-top:.5rem; }
  .voice-status { min-height:1.35rem; margin-top:.35rem; color:var(--muted); font-size:.88rem; }
  .voice-status[data-state="recording"] { color:var(--danger); font-weight:600; }
  .voice-status[data-state="error"] { color:var(--danger); }
  .default { font-size:.82rem; color:var(--muted); margin-top:.6rem; }
  .done { color:var(--muted); font-size:.9rem; }
  .done li { margin:.2rem 0; }
  .empty { text-align:center; color:var(--muted); padding:3rem 1rem; }
  footer { text-align:center; color:var(--muted); font-size:.8rem; padding:1.5rem; }
  .request-context { max-width:568px; margin:1rem auto 0; padding:0 1rem; font-size:.9rem; }
  .request-context summary { color:var(--accent); cursor:pointer; }
  .request-context p { margin:.5rem 0; }
  .request-context button, button.skip { border:0; background:none; color:var(--accent); font:inherit; cursor:pointer; padding:.5rem 0; }
  button.skip:disabled { opacity:.5; cursor:default; }
  .readership { color:var(--muted); font-size:.76rem; margin:.4rem 0; }
  .clarifications { border-top:1px solid var(--line); margin-top:1rem; padding-top:.6rem; font-size:.88rem; }
  .clarifications summary { cursor:pointer; color:var(--accent); }
  .clarifications label { display:block; margin-top:.6rem; }
  .clarifications select { display:block; max-width:100%; font:inherit; margin:.3rem 0; }
  .clarifications button { font:inherit; color:var(--accent); background:none; border:1px solid var(--line); border-radius:6px; padding:.4rem .6rem; cursor:pointer; }
  .request-history { margin:.5rem 0; }
  .request-history p { margin:.3rem 0; }

.corrections { margin: 1.5rem 0; }
.history-question { display: block; width: 100%; margin: .5rem 0; text-align: left; white-space: normal; }
.corrections select,.corrections textarea { max-width: 100%; }