@font-face{font-family:"Varela Round";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/w8gdH283Tvk__Lua32TysjIfqcuPP9g.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Varela Round";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/w8gdH283Tvk__Lua32TysjIfp8uP.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#000;--muted:#5b5b5b;--line:#e4e1da;--bg:#f6f4ef;--paper:#fff;
  --known:#2E8B57;--learning:#DC1F26;--accent:#000;
  --font:"Varela Round",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font)}
body{min-height:100vh;display:flex;flex-direction:column}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;max-width:760px;width:100%;margin:0 auto}
.brand{font-size:20px;font-weight:400;display:flex;align-items:center;gap:10px}
.brand-mark{width:12px;height:26px;border-radius:3px;background:linear-gradient(#000 0 16.6%,#F28C28 0 33.3%,#DC1F26 0 50%,#56B4E9 0 66.6%,#7344D6 0 83.3%,#2E8B57 0)}
.who{display:flex;align-items:center;gap:8px}
.who img{width:30px;height:30px;border-radius:50%;background:var(--line)}

main{flex:1;max-width:760px;width:100%;margin:0 auto;padding:0 16px 24px}

.btn{border:1.5px solid var(--ink);background:var(--paper);border-radius:999px;padding:10px 18px;font-size:15px;line-height:1.1;transition:transform .08s}
.btn:active{transform:scale(.97)}
.btn.ghost{border-color:var(--line)}
.btn.small{padding:7px 12px;font-size:13px}
.btn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary{background:var(--ink);color:#fff;padding:13px 24px;font-size:16px}
.btn:disabled{opacity:.5;cursor:default}

.banner{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin:4px 0 12px;font-size:14px;line-height:1.4}
.banner.ok{border-color:var(--known)}
.banner.warn{border-color:#F28C28}

.cats{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.chip{flex:none;display:flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 12px;font-size:13px;white-space:nowrap}
.chip i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.chip[aria-pressed="true"]{border-color:var(--ink)}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 12px}
.count{font-size:14px;color:var(--muted)}
.tools{display:flex;gap:6px;flex-wrap:wrap}

/* Card: same proportions as the printed 88 x 50 mm card. All sizes are % of card width (cqw). */
.stage{perspective:1400px}
.card{display:block;width:100%;max-width:620px;margin:0 auto;aspect-ratio:88/50;border:0;background:none;padding:0;container-type:inline-size;-webkit-tap-highlight-color:transparent}
.flipper{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.card.flipped .flipper{transform:rotateY(180deg)}
.face{position:absolute;inset:0;background:var(--paper);border-radius:3.4cqw;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.08);text-align:left}
.face.back{transform:rotateY(180deg)}
.face .bar{position:absolute;left:0;top:0;bottom:0;width:7.95cqw;background:var(--c)}
.face .t{position:absolute;top:9.1cqw;left:15.9cqw;color:var(--c);text-transform:uppercase;font-size:3.6cqw;letter-spacing:.16em;line-height:1}
.face .in{position:absolute;top:21.8cqw;left:15.9cqw;right:3.5cqw}
.face .w{font-size:10.4cqw;line-height:1.05;margin-bottom:5.7cqw;white-space:nowrap}
.face .w .sm{font-size:6cqw;margin-left:2.95cqw}
.face .w .blank{display:inline-block;width:12.5cqw;border-bottom:.8cqw solid currentColor;margin-right:1.1cqw;vertical-align:baseline}
.face .p{font-size:6cqw;line-height:1.22}
.face .side{position:absolute;right:4.5cqw;bottom:4cqw;font-size:2.6cqw;letter-spacing:.14em;color:#9a9a9a;text-transform:uppercase}
.face .mark{position:absolute;right:4.5cqw;top:8.3cqw;width:3cqw;height:3cqw;border-radius:50%}
.face .mark.known{background:var(--known)}
.face .mark.learning{background:var(--learning)}
.face.empty{display:flex;align-items:center;justify-content:center;font-size:4.5cqw;color:var(--muted);padding:8cqw;text-align:center}

.hint{text-align:center;color:var(--muted);font-size:13px;margin:12px 0 0}

.controls{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:10px;max-width:620px;margin:16px auto 0}
.btn.nav{width:48px;height:48px;padding:0;font-size:20px;border-color:var(--line)}
.btn.mark{height:48px}
.btn.mark.known{border-color:var(--known);color:var(--known)}
.btn.mark.learning{border-color:var(--learning);color:var(--learning)}
.btn.mark.on.known{background:var(--known);color:#fff}
.btn.mark.on.learning{background:var(--learning);color:#fff}

.progress{max-width:620px;margin:18px auto 0;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.progress-bar{height:100%;width:0;background:var(--known);transition:width .3s}
.stats{max-width:620px;margin:8px auto 0;font-size:13px;color:var(--muted);text-align:center}

.unlock{max-width:620px;margin:28px auto 0;background:var(--paper);border-radius:16px;padding:22px 20px;text-align:center;border:1.5px solid var(--line)}
.unlock h2{font-weight:400;font-size:22px;margin-bottom:8px}
.unlock p{font-size:15px;line-height:1.5;color:#333;margin-bottom:16px}
.unlock .fine{font-size:12px;color:var(--muted);margin:10px 0 0}

.foot{text-align:center;color:var(--muted);font-size:12px;padding:18px 16px 28px}

@media (max-width:420px){
  .brand{font-size:18px}
  .controls{gap:8px}
  .btn.mark{font-size:14px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){.flipper{transition:none}}