:root{--paper: #f4ece0;--paper-2: #ece1d0;--ink: #1c1a17;--ink-soft: #4a443c;--oxblood: #6e1423;--oxblood-2: #8a1c2e;--blue: #294a6b;--sepia: #9a7b4f;--ochre: #b8893b;--green: #4a6b3f;--line: rgba(28, 26, 23, .16);--shadow: 0 8px 30px rgba(28, 26, 23, .14);--serif: "Fraunces", Georgia, serif;--mono: "JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}.app{position:relative;min-height:100%;max-width:880px;margin:0 auto;padding:0 20px 64px}.grain{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}.app>*:not(.grain):not(.modal-wrap):not(.time-up-wrap){position:relative;z-index:1}.topbar{display:flex;align-items:center;gap:16px;padding:28px 0 20px;border-bottom:2px solid var(--ink)}.brand{flex:1;min-width:0}.brand-title{display:block;font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(26px,6vw,40px);line-height:1;color:var(--oxblood)}.brand-sub{display:block;margin-top:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}.stamp{display:grid;place-items:center;width:76px;height:76px;border:2.5px solid var(--oxblood);border-radius:50%;transform:rotate(-9deg);color:var(--oxblood);text-align:center;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px #6e142340;flex:none}.stamp-code{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1}.stamp-level{font-size:9px;letter-spacing:.1em;margin-top:2px}.sync{display:flex;align-items:center;gap:8px;flex:none}.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}.ghost{font-family:var(--mono);font-size:12px;letter-spacing:.04em;background:none;border:1.5px solid var(--ink);color:var(--ink);padding:7px 12px;cursor:pointer;transition:background .15s,color .15s}.ghost:hover{background:var(--ink);color:var(--paper)}.btn{font-family:var(--mono);font-size:14px;font-weight:500;border:2px solid var(--ink);padding:13px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .1s,background .15s}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--oxblood);color:var(--paper);border-color:var(--oxblood)}.btn.primary:hover{background:var(--oxblood-2)}.btn.ghost{background:var(--paper)}.btn.ghost:hover{background:var(--paper-2)}.btn.wide{width:100%;justify-content:center}kbd{font-family:var(--mono);font-size:10px;border:1px solid currentColor;border-radius:3px;padding:1px 5px;opacity:.8}.lede{font-family:var(--serif);font-size:clamp(16px,3.5vw,20px);line-height:1.45;margin:28px 0 24px;color:var(--ink)}.note{margin-top:28px;font-size:12px;color:var(--ink-soft);line-height:1.6}.note code,.lede code{font-size:.9em;background:var(--paper-2);padding:1px 5px}.lang-grid{display:grid;gap:14px}.lang-tile{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow)}.lang-tile.open{box-shadow:0 12px 40px #1c1a1733}.lang-head{display:flex;align-items:center;gap:16px;width:100%;background:none;border:0;padding:18px;cursor:pointer;font-family:var(--mono);text-align:left}.lang-flag{font-size:30px;flex:none}.lang-names{flex:1;min-width:0}.lang-native{display:block;font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink)}.lang-en{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.lang-code{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--oxblood);flex:none}.level-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px 18px}.level-btn{display:flex;flex-direction:column;gap:8px;background:var(--paper-2);border:1.5px solid var(--ink);padding:14px;cursor:pointer;font-family:var(--mono);text-align:left;transition:transform .1s,background .15s}.level-btn:hover{background:#e3d6c2;transform:translateY(-2px)}.level-name{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--blue)}.level-meta{font-size:11px;color:var(--ink-soft)}.level-bar{height:5px;background:#1c1a1724;overflow:hidden}.level-fill{display:block;height:100%;background:var(--oxblood);transition:width .3s}.study-head{display:flex;align-items:center;gap:14px;padding:22px 0 18px}.study-progress{flex:1;display:flex;align-items:center;gap:10px}.study-count{font-size:12px;color:var(--ink-soft);flex:none}.study-bar{flex:1;height:6px;background:#1c1a1724;overflow:hidden}.study-fill{display:block;height:100%;background:var(--oxblood);transition:width .3s}.card{position:relative;display:block;width:100%;min-height:340px;margin-top:8px;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);cursor:pointer;text-align:left;font-family:var(--mono);padding:30px 26px 26px;overflow:hidden;transition:transform .12s}.card:active{transform:scale(.995)}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:7px}.card.type-vocab:before{background:var(--oxblood)}.card.type-verb:before{background:var(--blue)}.card.type-grammar:before{background:var(--ochre)}.card.type-phrase:before{background:var(--green)}.card-cat{position:absolute;top:18px;left:26px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}.card-tag{position:absolute;bottom:16px;right:18px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);padding:3px 8px;transform:rotate(-4deg)}.card-inner{display:grid;place-items:center;min-height:280px}.card-face{width:100%;text-align:center}.card-front-text{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(28px,8vw,46px);line-height:1.15;color:var(--ink)}.card-hint{display:block;margin-top:18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.card-back-text{display:block;font-family:var(--serif);font-size:clamp(18px,4.5vw,26px);line-height:1.4;color:var(--ink)}.card-example{display:block;margin-top:18px;font-size:14px;line-height:1.5;color:var(--oxblood);font-style:italic}.card-conj{display:inline-block;margin-top:18px;padding-top:14px;max-width:100%;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--ink-soft);white-space:pre-line;text-align:left}.card.flipped{background:var(--paper-2)}.controls{display:flex;gap:12px;margin-top:18px}.controls .btn{flex:1;justify-content:center}.done{text-align:center;padding:60px 20px}.done-stamp{width:84px;height:84px;margin:0 auto 20px;display:grid;place-items:center;border:3px solid var(--green);border-radius:50%;color:var(--green);font-size:40px;transform:rotate(-8deg)}.done h2{font-family:var(--serif);font-size:30px;margin:0 0 10px;color:var(--ink)}.done p{color:var(--ink-soft);line-height:1.55;max-width:420px;margin:0 auto 24px;font-size:14px}.modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#1c1a1773;display:grid;place-items:center;padding:20px}.modal{background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);padding:28px 26px;width:100%;max-width:380px}.modal h3{font-family:var(--serif);font-size:24px;margin:0 0 4px;color:var(--oxblood)}.modal-sub{font-size:12px;color:var(--ink-soft);margin:0 0 20px;letter-spacing:.05em}.timer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.timer-btn{font-family:var(--mono);font-size:16px;border:1.5px solid var(--ink);background:var(--paper-2);padding:16px;cursor:pointer;transition:background .15s}.timer-btn:hover{background:var(--oxblood);color:var(--paper);border-color:var(--oxblood)}.time-up-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#1c1a1773;display:grid;place-items:center;padding:20px;animation:fadein .2s ease}.time-up{background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);padding:30px 28px;width:100%;max-width:340px;text-align:center;cursor:default;animation:popin .28s cubic-bezier(.2,.8,.3,1.2)}.time-up h3{font-family:var(--serif);font-size:26px;margin:16px 0 6px;color:var(--paper)}.time-up p{font-size:13px;color:#f4ece0cc;margin:0 0 22px;line-height:1.5}@keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes popin{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.time-stamp{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:600;border:2px solid var(--paper);padding:3px 10px;transform:rotate(-6deg);letter-spacing:.08em}@media (max-width: 560px){.app{padding:0 14px 56px}.topbar{gap:12px;padding:20px 0 16px}.stamp{width:60px;height:60px}.stamp-code{font-size:17px}.sync .ghost{padding:6px 9px;font-size:11px}.card{min-height:300px;padding:28px 20px 24px}.controls{flex-direction:column}}