:root{
  --bg:#fafaf8;
  --surface:#ffffff;
  --ink:#16181c;
  --muted:#63676e;
  --line:#e2e2dd;
  --accent:#1d4a4a;
}

:root[data-theme="dark"]{
  --bg:#14171a;
  --surface:#1c2024;
  --ink:#f0f1ef;
  --muted:#9195a0;
  --line:#2b2f34;
  --accent:#4f9c9c;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:'Instrument Sans', system-ui, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  transition:background .2s ease, color .2s ease;
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

a{ color:var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.theme-toggle{
  position:fixed;
  top:16px; right:16px;
  width:34px; height:34px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }

.card{ width:100%; max-width:560px; }

.progress{
  display:flex;
  gap:5px;
  margin-bottom:26px;
}
.progress span{ height:3px; flex:1; background:var(--line); }
.progress span.done{ background:var(--accent); }
.progress-label{ font-size:12px; color:var(--muted); margin-bottom:8px; letter-spacing:.03em; }

h1{ font-size:15px; font-weight:600; letter-spacing:.01em; color:var(--muted); margin:0 0 8px; }
h2{ font-size:26px; line-height:1.3; margin:0 0 26px; font-weight:600; max-width:26ch; }

.options{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.opt{
  display:block;
  width:100%;
  text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  padding:15px 18px;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  cursor:pointer;
}
.opt:hover{ border-color:var(--accent); }

.textfield{
  width:100%;
  border:1px solid var(--line);
  background:var(--surface);
  padding:14px 16px;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  margin-bottom:14px;
}
textarea.textfield{ resize:vertical; min-height:80px; }

.row-actions{ display:flex; gap:14px; align-items:center; }
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  padding:13px 24px;
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
}
.btn:hover{ background:#153838; }
:root[data-theme="dark"] .btn:hover{ background:#6cb8b8; }
.skip{ background:none; border:none; color:var(--muted); font-family:inherit; font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.skip:hover{ color:var(--ink); }

.disclosure{ margin-top:30px; }
.disclosure summary{ font-size:13px; color:var(--muted); cursor:pointer; }
.disclosure p{ font-size:13.5px; color:var(--muted); line-height:1.6; margin:12px 0 0; max-width:48ch; }

.gate-actions{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.gate-actions .btn.outline{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.gate-actions .btn.outline:hover{ border-color:var(--ink); }

.screen{ display:none; }
.screen.active{ display:block; }