:root {
  color-scheme: light dark;
  --red: #AA151B; --on-red: #ffffff; --yellow: #F1BF00; --ink: #221A00; --muted: #5c5640; --bg: #FFFBF0; --card: #ffffff; --line: #d9ca92;
  --soft: #FFEFB0; --ok: #C8E6C9; --bad: #FFCDD2; --grey: #ececec; --err: #b71c1c; --focus: #0b57d0;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --fs-sm: clamp(.85rem, .83rem + .1vw, .9rem);
  --fs-base: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-lg: clamp(1.1rem, 1.04rem + .3vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --fs-2xl: clamp(2.2rem, 1.6rem + 3vw, 3rem);
  --tap: 44px;
}
@media (prefers-color-scheme: dark) {
  :root { --red: #ff8a80; --on-red: #1a0000; --yellow: #F1BF00; --ink: #f4efe0; --muted: #c4bc9e; --bg: #16130b; --card: #201c10; --line: #5a512c; --soft: #4a3f12; --ok: #2e5a31; --bad: #7a2a31; --grey: #2c2818; --err: #ff8a80; --focus: #8ab4ff; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; font-size: var(--fs-base); }
.loading { padding: 40px; text-align: center; }
.stripe { height: 10px; background: linear-gradient(90deg, var(--red) 0 25%, var(--yellow) 25% 75%, var(--red) 75%); }
header.top { max-width: 1000px; margin: 0 auto; padding: var(--s3) var(--s4) var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; }
header.top h1 { font-size: var(--fs-lg); margin: 0; }
header.top .who { color: var(--muted); font-size: var(--fs-sm); display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
nav.menu { max-width: 1000px; margin: 0 auto; padding: var(--s1) var(--s4) var(--s3); display: flex; gap: var(--s2); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
nav.menu a { display: inline-flex; align-items: center; flex: none; min-height: var(--tap); padding: var(--s2) var(--s4); border-radius: 99px; text-decoration: none; color: var(--ink); background: var(--soft); font-size: var(--fs-sm); white-space: nowrap; }
nav.menu a.on { background: var(--red); color: var(--on-red); }
main { max-width: 1000px; margin: 0 auto; padding: var(--s2) var(--s4) 60px; }
main > * + * { margin-top: var(--s3); }
h2 { margin: 6px 0 2px; font-size: var(--fs-xl); line-height: 1.25; }
h3 { margin: var(--s1) 0; font-size: var(--fs-lg); line-height: 1.3; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.banner { border-radius: 14px; overflow: hidden; }
.banner .bar { height: 14px; background: var(--red); }
.banner .mid { background: var(--yellow); color: #000; padding: var(--s3) var(--s4); }
.banner .mid b { font-size: var(--fs-xl); display: block; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: var(--s4); }
.panel.soft { background: var(--soft); }
.panel.red { background: color-mix(in srgb, var(--red) 12%, var(--card)); }
.panel > * + * { margin-top: var(--s2); }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.tile { background: var(--soft); border: 0; border-radius: 12px; padding: 18px var(--s2); min-height: var(--tap); text-align: center; font-weight: 700; cursor: pointer; color: var(--ink); font-size: var(--fs-base); }
.tile .e { font-size: 1.9rem; display: block; }
button, .btn { font: inherit; cursor: pointer; border-radius: 9px; border: 1px solid var(--red); background: transparent; color: var(--red); padding: var(--s2) var(--s4); min-height: var(--tap); }
button.primary, .btn.primary { background: var(--red); color: var(--on-red); }
button.chip { border-radius: 99px; padding: var(--s2) var(--s4); border-color: var(--line); color: var(--ink); background: var(--card); }
button.chip.on { background: var(--yellow); border-color: var(--yellow); color: #000; }
button:disabled { opacity: .6; cursor: default; }
button.link { border: 0; background: none; padding: var(--s2) 0; text-decoration: underline; }
.choice { display: block; width: 100%; text-align: left; margin: 6px 0 0; background: var(--soft); border: 0; color: var(--ink); padding: var(--s3) var(--s4); border-radius: 10px; }
.choice.ok { background: var(--ok); } .choice.bad { background: var(--bad); } .choice.dim { background: var(--grey); }
.choice.sel { background: var(--yellow); color: #000; }
input[type=text], input[type=password], input[type=email] { font: inherit; padding: var(--s2) var(--s3); min-height: var(--tap); border: 1px solid var(--muted); border-radius: 9px; background: var(--card); color: var(--ink); width: 100%; max-width: 420px; }
progress { width: 100%; height: 10px; accent-color: var(--red); }
.line { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; min-height: var(--tap); cursor: pointer; border-top: 1px solid var(--line); }
.line:first-of-type { border-top: 0; }
button.line { width: 100%; min-height: var(--tap); text-align: left; border-radius: 0; border-width: 1px 0 0; border-color: var(--line); color: var(--ink); background: transparent; }
button.line:first-of-type { border-top: 0; }
.line b { display: block; }
.line .line-text { min-width: 0; flex: 1; }
.line .line-pic { margin-left: auto; font-size: 1.8rem; line-height: 1; flex: none; }
.card3d { background: var(--yellow); color: #000; border-radius: 16px; min-height: 200px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; width: 100%; border: 0; font-size: var(--fs-xl); font-weight: 600; }
.card3d.en { background: color-mix(in srgb, var(--red) 18%, var(--card)); color: var(--ink); }
.card3d .card-pic { font-size: 3.4rem; line-height: 1.1; margin-bottom: var(--s2); }
.card3d small { font-size: .8rem; font-weight: 400; margin-bottom: var(--s2); }
.err { color: var(--err); }
.pre { white-space: pre-line; }
.two { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.big { font-size: var(--fs-2xl); font-weight: 800; }
.decks { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 6px; }
.decks button { white-space: nowrap; flex: none; }
.auth { max-width: 460px; margin: 0 auto; padding: var(--s4); }
.auth > * + * { margin-top: var(--s3); }
nav.menu .grp { flex: none; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); align-self: center; margin-left: var(--s2); }
details > summary { cursor: pointer; min-height: var(--tap); display: list-item; padding: var(--s2) 0; }
:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
textarea:focus, input:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
h3.blanks { line-height: 2.4; }
input.blank { width: 7.5em; max-width: 38vw; display: inline-block; margin: 0 4px; padding: 3px var(--s2); font-size: 1rem; vertical-align: middle; }
@media (min-width: 640px) {
  .two { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  nav.menu { flex-wrap: wrap; overflow-x: visible; }
}
@media (min-width: 1000px) {
  header.top { padding-top: var(--s4); }
}