:root{--bg: #f0f4ff;--surface: #ffffff;--ink: #1e293b;--ink-soft: #64748b;--brand: #4f46e5;--brand-soft: #eef2ff;--accent-sight: #0ea5e9;--accent-cvc: #f59e0b;--active: #22c55e;--shadow: 0 10px 25px rgba(30, 41, 59, .12);--radius: 24px;font-family:"Baloo 2",Comic Sans MS,Segoe UI,system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);-webkit-tap-highlight-color:transparent}.app{min-height:100%;display:flex;align-items:stretch;justify-content:center}.screen{width:100%;max-width:820px;padding:24px clamp(16px,4vw,40px) 40px;display:flex;flex-direction:column;align-items:center;gap:28px}.home{justify-content:center;text-align:center}.home-header{margin-top:12px}.home-title{font-size:clamp(2rem,7vw,3.25rem);margin:0;color:var(--brand)}.home-subtitle{font-size:clamp(1.1rem,3.5vw,1.4rem);color:var(--ink-soft);margin:8px 0 0}.activity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;width:100%}.activity-card{border:none;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;border-bottom:8px solid var(--brand)}.activity-card--sight{border-bottom-color:var(--accent-sight)}.activity-card--cvc{border-bottom-color:var(--accent-cvc)}.activity-card:hover,.activity-card:focus-visible{transform:translateY(-4px);box-shadow:0 16px 32px #1e293b2e}.activity-card:active{transform:translateY(0)}.activity-emoji{font-size:3.5rem;line-height:1}.activity-name{font-size:1.5rem;font-weight:700}.activity-desc{font-size:1rem;color:var(--ink-soft)}.home-hint{color:var(--ink-soft);font-size:.95rem;margin:0}.topbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar-title{margin:0;font-size:clamp(1.25rem,4vw,1.75rem);color:var(--brand)}.topbar-progress{min-width:3.5rem;text-align:right;color:var(--ink-soft);font-weight:700}.btn{border:none;border-radius:999px;font-family:inherit;font-size:1.1rem;font-weight:700;padding:14px 22px;cursor:pointer;transition:transform .1s ease,filter .1s ease;color:#fff;background:var(--brand)}.btn:hover:not(:disabled){filter:brightness(1.05)}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.5;cursor:default}.btn--ghost{background:var(--surface);color:var(--brand);box-shadow:var(--shadow)}.btn--back{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-size:1rem;padding:12px 18px}.btn--say{background:var(--active)}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;width:100%}.sight,.cvc{justify-content:flex-start}.flashcard{border:none;background:var(--surface);box-shadow:var(--shadow);border-radius:var(--radius);width:100%;min-height:40vh;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:clamp(3.5rem,18vw,8rem);font-weight:800;color:var(--brand);cursor:pointer;transition:transform .1s ease}.flashcard:active{transform:scale(.98)}.cvc-picture{font-size:clamp(4rem,20vw,8rem);line-height:1}.letter-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.letter-tile{border:none;background:var(--surface);box-shadow:var(--shadow);border-radius:20px;width:clamp(72px,22vw,120px);height:clamp(90px,26vw,150px);font-family:inherit;font-size:clamp(3rem,12vw,5rem);font-weight:800;color:var(--accent-cvc);cursor:pointer;transition:transform .12s ease,background .12s ease,color .12s ease;text-transform:lowercase}.letter-tile:active{transform:scale(.94)}.letter-tile--active{background:var(--active);color:#fff;transform:translateY(-6px) scale(1.05)}.empty-note{color:var(--ink-soft);font-size:1.1rem;text-align:center}code{background:var(--brand-soft);color:var(--brand);padding:2px 6px;border-radius:6px;font-size:.9em}.admin-link{position:fixed;bottom:12px;right:12px;width:40px;height:40px;border:none;border-radius:50%;background:transparent;color:var(--ink-soft);font-size:1.2rem;opacity:.35;cursor:pointer}.admin-link:hover{opacity:1}.admin{width:100%;max-width:900px;margin:0 auto;padding:20px clamp(16px,4vw,32px) 60px}.admin-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;background:var(--bg);border-bottom:2px solid var(--brand-soft)}.admin-title{margin:0;font-size:clamp(1.1rem,3.5vw,1.5rem);color:var(--brand)}.admin-note{background:var(--brand-soft);color:var(--ink);border-radius:14px;padding:12px 16px;font-size:.95rem;line-height:1.4}.admin-token{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.admin-tools{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}.admin-tools .btn{font-size:.95rem;padding:10px 16px}.admin-section{margin-top:28px}.admin-section h2{color:var(--brand);margin:0 0 4px}.admin-hint{color:var(--ink-soft);font-size:.9rem;margin:0 0 14px}.admin-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}.admin-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:8px}.admin-input{font-family:inherit;font-size:1.1rem;padding:10px 12px;border:2px solid var(--brand-soft);border-radius:12px;min-width:120px;flex:1}.admin-input--emoji{flex:0 0 90px;min-width:70px;text-align:center}.admin-input:focus{outline:none;border-color:var(--brand)}.admin-letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}.admin-footer{margin-top:32px;display:flex;justify-content:flex-end}.recorder{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.9rem}.recorder-label{min-width:90px;color:var(--ink);font-weight:700}.chip{border:none;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-family:inherit;font-weight:700;font-size:.85rem;padding:7px 12px;cursor:pointer}.chip:disabled{opacity:.4;cursor:default}.chip--rec{background:#fee2e2;color:#b91c1c}.chip--stop{background:#b91c1c;color:#fff}.chip--del{background:transparent;color:var(--ink-soft)}.recorder-state{font-size:.8rem;color:var(--ink-soft)}.recorder-state--on{color:var(--active);font-weight:700}.recorder-error{font-size:.8rem;color:#b91c1c;flex-basis:100%}@media(prefers-reduced-motion:reduce){*{transition:none!important}}