:root {
  color-scheme: light;
  --paper: #f5f2ea; --card: #fbf9f3; --ink: #211f1a; --muted: #6b6558; --line: #e3ddcf;
  --gold: #8a5f00; --gold-deep: #6e4c00; --danger: #a8352a;
  --display: Optima, Candara, Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #1c1a16; --card: #24211c; --ink: #ece6d8; --muted: #a39b89; --line: #3a362e;
    --gold: #c9a24a; --gold-deep: #d9b560; --danger: #e0786d;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--paper); color: var(--ink); font: 15px/1.5 var(--body);
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
}
.card {
  width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 32px 28px 28px;
}
header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
header img { border-radius: 8px; }
h1 { font: 400 26px/1 var(--display); letter-spacing: .08em; margin: 0; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 0; font: 500 14px var(--body); color: var(--muted); cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.lead { margin: 0 0 12px; color: var(--muted); }
.workspaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.workspaces a {
  display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.workspaces a, .workspaces .soon {
  display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.workspaces a:hover { border-color: var(--gold); }
.workspaces .soon { color: var(--muted); border-style: dashed; }
.choices label.soon { color: var(--muted); border-style: dashed; cursor: default; }
.workspaces a span, .workspaces .soon span { color: var(--muted); font: 12px var(--mono); overflow-wrap: anywhere; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend, label { display: block; font-weight: 500; margin-bottom: 8px; padding: 0; }
.choices { display: grid; gap: 8px; }
.choices label {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 400;
}
.choices label:has(input:checked) { border-color: var(--gold); }
.choices input { accent-color: var(--gold); margin: 0; }
input#code {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: 14px var(--mono);
}
input#code[aria-invalid="true"] { border-color: var(--danger); }
.help { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.error { color: var(--danger); font-size: 13px; margin: 6px 0 0; min-height: 1.5em; }
.notice { margin: 4px 0 8px; padding: 10px 12px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.choices small { color: var(--muted); margin-left: auto; font-size: 12px; }
input#code:disabled { opacity: .5; }
.primary {
  width: 100%; margin-top: 8px; padding: 12px; border: 0; border-radius: 8px;
  background: var(--gold); color: #fbf9f3; font: 600 14px var(--body); cursor: pointer;
}
.primary:hover:not(:disabled) { background: var(--gold-deep); }
.primary:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }