:root { --paper:#F4F4EF; --surface:#FFFFFF; --ink:#18202E; --muted:#596173; --rule:rgba(24,32,46,.12);
          --yellow:#FFE35A; --green:#2E6A45; --greenTint:#D7EEDD; --blue:#2453C7; --blueTint:#DCE6FF; }
  @media (prefers-color-scheme: dark) {
    :root { --paper:#0F131A; --surface:#171D27; --ink:#ECEDEF; --muted:#9EA6B5; --rule:rgba(236,237,239,.16);
            --yellow:#FFD84A; --green:#7FD39C; --greenTint:#1F4430; --blue:#9BB8FF; --blueTint:#203159; }
  }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--paper); color:var(--ink);
         font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  main { max-width: 440px; margin: 0 auto; padding: 28px 16px 40px; }
  .brand { font-weight: 800; letter-spacing: -.02em; font-size: 20px; margin-bottom: 28px; }
  .lead { color: var(--muted); margin: 0 0 10px; }
  .card { background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; padding: 22px 20px; }
  .title { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0 0 8px; word-wrap: break-word;
           background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%);
           display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--ink); }
  @media (prefers-color-scheme: dark) { .title { color: var(--ink); background: none; } }
  .when { margin: 14px 0 0; color: var(--blue); font-weight: 700; }
  .actions { display: grid; gap: 10px; margin-top: 22px; }
  button { font: inherit; font-weight: 700; border-radius: 14px; min-height: 52px; border: 0; cursor: pointer; }
  .ok { background: var(--yellow); color: #18202E; }
  .done { background: var(--greenTint); color: var(--green); }
  .no { background: transparent; color: var(--muted); border: 1px solid var(--rule); font-weight: 600; }
  button:disabled { opacity: .6; cursor: default; }
  .answer { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: var(--blueTint); color: var(--blue);
            font-weight: 600; }
  .foot { margin-top: 28px; color: var(--muted); font-size: 14px; }
  [hidden] { display: none !important; }