:root { --ink: #17150F; --paper: #F6F4EF; --amber: #F5B400; --muted: #6B675E; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.4 -apple-system, system-ui, sans-serif;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
#app, main { max-width: 480px; margin: 0 auto; }
h1 { font-size: 28px; margin: 8px 0 12px; }
.tag { display: inline-block; background: var(--amber); padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; margin: 0; }
.what, .note { color: var(--muted); font-size: 15px; }
.who { background: var(--amber); padding: 0 6px; border-radius: 6px; }
button { display: block; width: 100%; margin: 10px 0; padding: 14px; font: inherit; font-weight: 600; border: 0; border-radius: 14px; background: var(--ink); color: var(--paper); }
button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th, td { text-align: left; padding: 10px 4px; border-bottom: 1px solid #DDD8CC; font-size: 15px; vertical-align: top; }
th { font-weight: 500; width: 45%; }
td.yes { color: #1E7B3A; font-weight: 600; word-break: break-all; }
td.no { color: #B3261E; }
textarea { width: 100%; height: 160px; font: 12px ui-monospace, monospace; }
a.variant { display: block; padding: 14px; margin: 10px 0; border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; }
a.variant b { display: block; }
a.variant span { color: var(--muted); font-size: 15px; }