:root{--bg: #fdf6ec;--bg-blob-1: #ffe1a8;--bg-blob-2: #c9e4ff;--ink: #2c2a4a;--ink-soft: #6b6785;--card: #ffffff;--line: #efe6d8;--purple: #6c5ce7;--purple-dark: #5443c9;--orange: #ff9f43;--orange-dark: #f0810f;--teal: #17b6a7;--teal-dark: #0e9488;--coral: #ff6b6b;--coral-dark: #e04f4f;--green: #2ecc71;--green-dark: #1ea855;--radius-lg: 28px;--radius-md: 18px;--radius-sm: 12px;--shadow: 0 10px 30px -12px rgba(44, 42, 74, .25);--shadow-sm: 0 4px 14px -6px rgba(44, 42, 74, .2)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);background-image:radial-gradient(circle at 8% 8%,var(--bg-blob-1) 0%,transparent 32%),radial-gradient(circle at 92% 18%,var(--bg-blob-2) 0%,transparent 30%),radial-gradient(circle at 50% 100%,#ffd6e8 0%,transparent 28%);background-attachment:fixed;color:var(--ink);font-family:Nunito,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,.display{font-family:"Baloo 2",Nunito,sans-serif;font-weight:700;letter-spacing:-.01em;margin:0}button{font-family:inherit;cursor:pointer;border:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed;opacity:.55}input,textarea{font-family:inherit;font-size:1rem}.app-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 56px}.app-width{width:100%;max-width:720px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 28px;border-radius:999px;font-weight:800;font-size:1.05rem;color:#fff;background:var(--purple);box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease,background .15s ease}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow)}.btn:active:not(:disabled){transform:translateY(0) scale(.97)}.btn.secondary{background:#fff;color:var(--purple);border:2px solid var(--purple)}.btn.orange{background:var(--orange)}.btn.orange:hover:not(:disabled){background:var(--orange-dark)}.btn.teal{background:var(--teal)}.btn.ghost{background:transparent;color:var(--ink-soft);box-shadow:none;min-height:40px;padding:0 12px}.btn.ghost:hover{color:var(--ink);transform:none;box-shadow:none}.btn.full{width:100%}.btn.sm{min-height:42px;padding:0 18px;font-size:.95rem}.card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:28px}.card.tight{padding:18px 20px;border-radius:var(--radius-md)}.avatar{display:inline-flex;align-items:center;justify-content:center;font-family:"Baloo 2",sans-serif;font-weight:700;color:#fff;border-radius:50%;flex:none}.picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-top:24px}.picker-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:28px 16px;display:flex;flex-direction:column;align-items:center;gap:14px;transition:transform .15s ease,box-shadow .15s ease;border:3px solid transparent}.picker-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.picker-card:active{transform:translateY(0) scale(.98)}.picker-card .name{font-size:1.3rem}.pin-dots{display:flex;gap:14px;justify-content:center;margin:18px 0}.pin-dot{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--purple);background:transparent;transition:background .1s ease}.pin-dot.filled{background:var(--purple)}.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:320px;margin:0 auto}.pin-key{aspect-ratio:1;border-radius:50%;background:#f4f1fb;color:var(--ink);font-size:1.5rem;font-weight:700;font-family:"Baloo 2",sans-serif;transition:transform .08s ease,background .1s ease}.pin-key:hover{background:#ece6fb}.pin-key:active{transform:scale(.92);background:var(--purple);color:#fff}.progress-track{height:14px;background:#f0ecf9;border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--purple));border-radius:999px;transition:width .35s ease}.option-btn{display:block;width:100%;text-align:left;padding:18px 22px;border-radius:var(--radius-md);background:#f7f5fc;border:3px solid transparent;font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:12px;transition:all .12s ease}.option-btn:hover{background:#efeafc}.option-btn.selected{border-color:var(--purple);background:#ece6fb}.text-input,.number-input,.text-area{width:100%;padding:16px 18px;border-radius:var(--radius-md);border:3px solid var(--line);font-size:1.15rem;font-weight:700;color:var(--ink);background:#fffdf9}.text-input:focus,.number-input:focus,.text-area:focus{outline:none;border-color:var(--purple)}.text-area{font-weight:500;min-height:90px;resize:vertical}.canvas-wrap{position:relative;border-radius:var(--radius-md);overflow:hidden;border:3px solid var(--line);background:#fffdf6;touch-action:none}.canvas-toolbar{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.mark-row{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--radius-md);margin-bottom:14px}.mark-row.correct{background:#eafaf0}.mark-row.incorrect{background:#fff2ee}.mark-badge{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff}.mark-badge.correct{background:var(--green)}.mark-badge.incorrect{background:var(--coral)}.muted{color:var(--ink-soft)}.center{text-align:center}.row{display:flex;align-items:center}.row.between{justify-content:space-between}.row.gap{gap:12px}.spin{width:44px;height:44px;border-radius:50%;border:5px solid #eee3f9;border-top-color:var(--purple);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pop-in{animation:pop .25s ease}@keyframes pop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.error-banner{background:#fff0ee;color:var(--coral-dark);border-radius:var(--radius-sm);padding:12px 16px;font-weight:700;margin-bottom:16px}.lesson-body h1,.lesson-body h2,.lesson-body h3{margin:20px 0 10px}.lesson-body p{line-height:1.7;font-size:1.05rem;margin:0 0 14px}.lesson-body ul,.lesson-body ol{line-height:1.7;font-size:1.05rem;padding-left:24px;margin:0 0 14px}.lesson-body strong{color:var(--purple-dark)}.lesson-body code{background:#f4f1fb;padding:2px 6px;border-radius:6px;font-size:.95em}