/* The free example decks (flashcards.html and flashcards/*.html). Same colors as the home page. */
:root{
  --bg:#1B2430; --panel:#232E3D; --raised:#2B3749; --border:#3B4759;
  --text:#ECEFF3; --text-dim:#AEB9C7; --accent:#E0982B; --accent-ink:#1B2430;
}
:root[data-theme="light"]{
  --bg:#B4BECB; --panel:#C7CFD8; --raised:#DBE0E6; --border:#616C7B;
  --text:#000000; --text-dim:#000000; --accent:#6A3F06; --accent-ink:#FFFFFF;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; line-height:1.55; }
.wrap{ max-width:760px; margin:0 auto; padding:20px 16px 48px; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.brand{ display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:var(--text); }
.brand img{ border-radius:10px; }
.brand span{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:19px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:10px;
  border:1px solid var(--border); background:var(--panel); color:var(--text); font:inherit; font-weight:600; font-size:15px;
  text-decoration:none; cursor:pointer; }
.btn:hover{ border-color:var(--accent); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; padding:0 22px; }

.crumbs{ margin-bottom:6px; }
.crumbs a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text); font-weight:600; text-decoration:none; }
h1{ font-family:'JetBrains Mono',monospace; font-size:30px; line-height:1.25; margin:4px 0 10px; letter-spacing:-0.5px; }
h2{ font-size:20px; margin:36px 0 12px; }
.lead{ color:var(--text-dim); font-size:17px; margin:0 0 22px; }

/* The card. */
.flash{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; min-height:240px;
  padding:28px 20px; border-radius:16px; border:1px solid var(--border); background:var(--raised); color:var(--text);
  font:inherit; cursor:pointer; text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.25); transition:transform .15s; }
.flash:active{ transform:scale(.99); }
.flash .side{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); }
.flash .text{ font-size:30px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.flash .hint{ font-size:13.5px; color:var(--text-dim); }
.flash.back{ background:var(--panel); }
.controls{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.count{ min-width:70px; text-align:center; font-family:'JetBrains Mono',monospace; color:var(--text-dim); }
.keys{ text-align:center; font-size:13px; color:var(--text-dim); margin:10px 0 0; }

/* Every card, as text. */
.list{ width:100%; border-collapse:collapse; font-size:15px; }
.list th, .list td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.list th{ font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); }
.list tbody tr:nth-child(odd){ background:var(--panel); }

.cta{ margin:40px 0 0; padding:22px 20px; border-radius:14px; background:var(--panel); border:1px solid var(--border); text-align:center; }
.cta h2{ margin:0 0 8px; }
.cta p{ color:var(--text-dim); margin:0 0 16px; }

.more{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.more a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.more span{ color:var(--text-dim); font-size:14px; margin-left:6px; }

/* The gallery. */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.tile{ display:block; padding:18px; border-radius:14px; background:var(--panel); border:1px solid var(--border); color:var(--text); text-decoration:none; }
.tile:hover{ border-color:var(--accent); }
.tile h2{ font-size:18px; margin:0 0 6px; }
.tile p{ margin:0 0 12px; color:var(--text-dim); font-size:14.5px; }
.tile .n{ color:var(--accent); font-weight:700; font-size:14px; }

footer{ text-align:center; margin-top:44px; font-size:14px; }
footer a{ color:var(--text-dim); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; margin:0 8px; }
footer a:hover{ color:var(--accent); }

@media (max-width:600px){
  h1{ font-size:24px; }
  .flash{ min-height:200px; }
  .flash .text{ font-size:25px; }
}