:root {
  color-scheme: light;
  --paper: #f7efdf;
  --ink: #30251b;
  --muted: #695644;
  --line: #cdbba6;
  --walnut: #503722;
  font: 16px/1.55 system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(12px, 5vw, 48px);
  background: radial-gradient(ellipse at top, #4a3524, #261c15 70%);
  color: var(--ink);
}
.welcome-scene { display: none; }
main {
  max-width: 680px;
  margin: auto;
  padding: clamp(16px, 5vw, 36px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
h1, h2, h3 {
  font-family: Georgia, serif;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
h1 { margin: 6px 0 12px; font-size: clamp(1.85rem, 6vw, 2.6rem); }
h2 { margin: 0 0 12px; font-size: 1.35rem; }
h3 { margin: 0 0 4px; font-size: 1.15rem; }
p { margin: 0 0 12px; overflow-wrap: anywhere; }
.return, .versions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--walnut); }
.versions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.versions [aria-current="page"] { font-weight: 700; text-decoration-thickness: 2px; }
.eyebrow { margin: 12px 0 0; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.muted { color: var(--muted); font-size: .92rem; }
.status { min-height: 1.55em; margin: 16px 0; }
.problem { padding: 10px 12px; border-radius: 6px; background: #f6dfd5; color: #772c1b; }
.actions, .profile, .section-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.profile, .section-title { justify-content: space-between; }
.profile { margin-bottom: 12px; padding: 10px 0; border-block: 1px solid var(--line); }
.profile p, .section-title h2 { margin: 0; }
.section-title { margin-top: 24px; margin-bottom: 12px; }
label { display: block; font-weight: 600; }
input, textarea, button { font: inherit; border-radius: 6px; min-height: 44px; }
input, textarea {
  width: 100%;
  margin: 5px 0 14px;
  padding: 8px 10px;
  border: 1px solid #917b66;
  background: #fffcf5;
  color: var(--ink);
}
textarea { resize: vertical; }
button {
  padding: 7px 13px;
  border: 1px solid transparent;
  background: var(--walnut);
  color: #fffaf0;
  cursor: pointer;
}
button.quiet { border-color: var(--line); background: transparent; color: var(--walnut); }
button:hover:enabled { filter: brightness(.9); }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 2px solid #61512b; outline-offset: 3px; }
.books { list-style: none; margin: 0; padding: 0; }
.book, .editor { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 0 0 12px; }
.book { background: #fff9eb; }
.notes { margin: 10px 0 12px; padding-left: 1.3em; }
.notes li { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 6px; }
.editor { margin: 16px 0 0; }

body.account-first {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 1fr);
  align-items: stretch;
  padding: 0;
  background: #f6f1e8;
}
.account-first main {
  width: 100%;
  max-width: 520px;
  padding: 64px 50px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.account-first .welcome-scene {
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: clamp(30px, 5vw, 76px);
  color: #fff6e6;
  background: linear-gradient(0deg, rgba(28,22,17,.92), rgba(28,22,17,.08) 85%), url('/room/quality-study/assets/room-clean-v1.png') center/cover;
}
.welcome-scene .eyebrow { color: #e1ceb0; letter-spacing: .14em; }
.welcome-title { margin: 18px 0; font: 400 clamp(32px, 3.6vw, 56px)/1.12 Georgia, serif; letter-spacing: -.025em; }
.welcome-scene p:last-child { font-size: .92rem; line-height: 1.7; color: #eee0ca; }
.account-first header { margin-bottom: 24px; }
.account-first header .eyebrow { color: #635842; }
.account-first h1 { margin-top: 12px; }
.account-first .status:empty { display: none; }
.account-first .profile { margin: 0 0 20px; padding: 14px 0; }
.account-first #request-code button { width: 100%; }
.login-help { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.login-help details { margin-top: 12px; }
.login-help summary { min-height: 36px; cursor: pointer; color: var(--walnut); font-weight: 600; }
.login-help details p { margin: 8px 0 12px; }
.verify-address { padding: 10px 12px; border-left: 2px solid #7b865d; background: #e9ebdf; font-size: .95rem; }
.empty-onboarding { padding: 14px; border: 1px solid #c5cbb3; border-radius: 6px; background: #e9ebdf; }
#code { letter-spacing: .16em; font-variant-numeric: tabular-nums; }
#code[aria-invalid=true] { border-color: #a3432c; }
.profile strong { overflow-wrap: anywhere; }
#collection-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
#collection-summary div { padding: 8px 0; border-bottom: 1px solid var(--line); }
#collection-summary dt { font-size: .875rem; color: var(--muted); }
#collection-summary dd { margin: 2px 0 0; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
#summary-status:empty { display: none; }
.primary-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--walnut);
  color: #fffaf0;
  text-decoration: none;
}
.primary-link:hover { background: #3f2b1a; }
@media (max-width: 760px) {
  body.account-first { display: block; }
  .account-first .welcome-scene { min-height: 200px; padding: 24px; background-position: center 55%; }
  .welcome-scene .welcome-title { font-size: 30px; margin: 10px 0 0; }
  .welcome-scene p:last-child { display: none; }
  .account-first main { max-width: 460px; padding: 30px 24px max(32px, env(safe-area-inset-bottom)); }
}

.auth-tabs{display:flex;gap:5px;padding:5px;margin:16px 0;background:#e7dece;border-radius:8px}.auth-tabs button{flex:1;background:transparent;color:var(--muted);font-size:.95rem}.auth-tabs button[aria-pressed=true]{background:#fffaf2;color:var(--walnut);box-shadow:0 1px 4px #38241614}.auth-form .auth-submit{width:100%;margin:8px 0 12px}.password-field{display:flex;align-items:stretch;gap:8px;margin:5px 0 14px}.password-field input{margin:0;min-width:0;flex:1}.password-field button{flex:none;font-size:.85rem;padding-inline:10px}.auth-link,.inline-link{background:none;color:var(--walnut);text-decoration:underline;text-underline-offset:4px}.auth-link{display:inline-block;margin:3px 0 12px;padding:8px 0}.inline-link{display:inline;min-height:0;padding:0;font-size:inherit;border:0}.auth-form .actions{margin-top:10px}.auth-form .actions .auth-link{margin:0}.account-name{display:block;font:24px/1.3 Georgia,serif;margin-bottom:10px}.code-input{letter-spacing:.16em;font-variant-numeric:tabular-nums}.auth-form [aria-invalid=true]{border-color:#a3432c}.auth-form .muted{font-size:.85rem}.auth-form .auth-submit+ .muted{margin-top:4px}@media(max-width:420px){.auth-tabs button{font-size:.85rem;padding-inline:7px}.password-field{gap:5px}.password-field button{font-size:.8rem;padding-inline:7px}}

.profile-actions{display:flex;flex-wrap:wrap;gap:8px}.profile-actions button{font-size:.85rem}.profile-edit{margin:0 0 24px;padding:16px;background:#ebe5d8;border-radius:7px}