:root{--bg:#f3f7ff;--card:#fff;--ink:#2f2a4a;--muted:#74708f;--line:#e1e6f5;--rose:#6c5ce7;--rose-dark:#4b3fc0;--navy:#2b3a8f;--gold:#ffc93c;--ok:#1f9d6b;--ok-bg:#e2f7ee;--bad:#d64545;--bad-bg:#fdeaea;--warn-bg:#fff4d6;--radius:20px;--shadow:0 6px 20px #2f2a4a17;--font:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--display:"Baloo 2", "Nunito", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;margin:0;font-size:17px;line-height:1.4}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}h1,h2,h3{margin:0;line-height:1.2}h2{font-family:var(--display);font-size:1.6rem}h3{font-size:1.1rem}p{margin:0}.screen{max-width:720px;padding:max(12px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;gap:14px;min-height:100dvh;margin:0 auto;display:flex}.screen.center{text-align:center;justify-content:center;align-items:stretch}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.stack{flex-direction:column;gap:12px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row.between{justify-content:space-between}.row.center{justify-content:center}.row.gap{gap:10px}.muted{color:var(--muted)}.small{font-size:.85rem}.center-text{text-align:center}.error{color:var(--bad);font-weight:600}.btn{background:#e9edfb;border:none;border-radius:999px;padding:12px 22px;font-size:1rem;font-weight:800;transition:transform 80ms,filter .15s}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5}.btn.primary{background:var(--rose);color:#fff;box-shadow:0 4px 0 var(--rose-dark)}.btn.gold{background:var(--gold);color:var(--ink);box-shadow:0 4px #d99a1f}.btn.ghost{border:2px solid var(--line);background:0 0}.btn.danger{background:var(--bad-bg);color:var(--bad)}.btn.big{width:100%;padding:16px 22px;font-size:1.1rem}.btn.small{align-self:flex-start;padding:6px 14px;font-size:.85rem}.btn.pulse{animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{filter:brightness(1.08);transform:scale(1.03)}}.icon-btn,.back{background:#e9edfb;border:none;border-radius:50%;place-items:center;width:40px;height:40px;font-size:1.2rem;display:grid}.back.floating{top:max(12px, env(safe-area-inset-top));position:absolute;left:16px}.speaker{vertical-align:middle;background:#e5e1ff;border:none;border-radius:50%;flex:none;width:36px;height:36px;font-size:1rem}.topbar{grid-template-columns:40px 1fr auto;align-items:center;gap:10px;min-height:44px;display:grid}.topbar h1{font-family:var(--display);text-align:center;font-size:1.3rem}.topbar-right{justify-content:flex-end;min-width:40px;display:flex}.logo{font-family:var(--display);color:var(--rose);flex-direction:column;align-items:center;margin-bottom:8px;line-height:1;display:flex}.logo span{font-size:2.8rem;font-weight:800}.logo small{color:var(--navy);letter-spacing:.2em;text-transform:uppercase;font-size:1.2rem}.welcome p{color:var(--muted)}.text-input{font:inherit;border:2px solid var(--line);border-radius:12px;width:100%;padding:12px 14px;font-size:18px}.text-input:focus{border-color:var(--rose);outline:none}label{text-align:left;font-weight:700}.profile-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;display:grid}.profile-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:none;flex-direction:column;align-items:center;gap:6px;padding:12px;font-weight:800;display:flex}.profile-card.add{border:2px dashed var(--line);box-shadow:none;background:0 0;justify-content:center;min-height:190px}.plus{color:var(--rose);font-size:2.2rem}.pin-dots{justify-content:center;gap:14px;margin:10px 0;display:flex}.pin-dots span{border:3px solid var(--rose);border-radius:50%;width:18px;height:18px}.pin-dots span.on{background:var(--rose)}.pinpad{grid-template-columns:repeat(3,76px);justify-content:center;gap:12px;display:grid}.pinpad button{background:var(--card);height:76px;box-shadow:var(--shadow);border:none;border-radius:50%;font-size:1.6rem;font-weight:800}.pinpad button:active{background:#e5e1ff}.create-layout{grid-template-columns:1fr;gap:12px;display:grid}.create-preview{justify-content:center;display:flex}.avatar-lg{height:260px}.avatar-md{height:200px}@media (width>=640px){.create-layout{grid-template-columns:220px 1fr;align-items:start}}.look-editor{text-align:left;flex-direction:column;gap:10px;display:flex}.look-label{color:var(--muted);font-size:.85rem;font-weight:700}.look-options{flex-wrap:wrap;gap:6px;margin-top:4px;display:flex}.look-opt{border:2px solid var(--line);background:#fff;border-radius:12px;min-height:38px;padding:6px 10px;font-size:.85rem;font-weight:700}.look-opt.on{border-color:var(--rose);background:#ece9ff}.swatch{border:2px solid #00000026;border-radius:50%;width:24px;height:24px;display:block}.home-top{justify-content:space-between;align-items:center;gap:8px;display:flex}.hello{font-family:var(--display);font-size:clamp(1.2rem,5vw,1.6rem)}.level-tag{color:var(--navy);font-size:.9rem;font-weight:700}.home-stats{align-items:center;gap:10px;display:flex}.streak b,.starcount b{font-weight:800}.starcount{box-shadow:var(--shadow);background:#fff;border-radius:999px;align-items:center;gap:4px;padding:4px 10px 4px 6px;display:inline-flex}.sync-dot{background:var(--ok);border-radius:50%;width:10px;height:10px}.sync-dot.pending{background:var(--gold)}.sync-dot.offline{background:#bbb}.stage{border-radius:var(--radius);height:min(42vh,380px);box-shadow:var(--shadow);cursor:pointer;position:relative;overflow:hidden}.stage.small{cursor:default;height:min(36vh,300px)}.stage-bg{width:100%;height:100%;position:absolute;inset:0}.stage-avatar{filter:drop-shadow(0 8px 6px #0003);height:88%;position:absolute;bottom:4%;left:50%;transform:translate(-50%)}.stage-avatar.idle{transform-origin:50% 100%;animation:4s ease-in-out infinite sway}@keyframes sway{0%,to{transform:translate(-50%)rotate(-1.2deg)}50%{transform:translate(-50%)rotate(1.2deg)}}.twinkle{animation:1.8s ease-in-out infinite twinkle}@keyframes twinkle{50%{opacity:.25}}.progress-card{flex-direction:column;gap:8px;display:flex}.progress{background:#e9edfb;border-radius:999px;height:12px;overflow:hidden}.progress div{background:linear-gradient(90deg, var(--rose), var(--gold));border-radius:999px;height:100%;transition:width .4s}.home-nav{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.tile{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:none;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;font-size:.85rem;font-weight:700;display:flex}.tile-icon{font-size:1.7rem}.learn .task{flex-direction:column;gap:16px;display:flex}.badge{color:var(--rose-dark);background:#ece9ff;border-radius:999px;align-self:flex-start;padding:4px 12px;font-size:.8rem;font-weight:800}.prompt-en{font-family:var(--display);color:var(--navy);word-break:break-word;align-items:center;gap:10px;font-size:1.9rem;font-weight:700;display:flex}.prompt-de{font-size:1.5rem;font-weight:800}.prompt-hint{color:var(--muted);margin-top:4px;font-size:.9rem}.example{background:#f1f4ff;border-radius:12px;flex-direction:column;gap:4px;padding:12px;display:flex}.note{background:var(--warn-bg);border-radius:12px;padding:10px 12px;font-size:.92rem}.choices{grid-template-columns:1fr;gap:10px;display:grid}@media (width>=560px){.choices{grid-template-columns:1fr 1fr}}.choice{border:2px solid var(--line);text-align:left;background:#fff;border-radius:14px;min-height:56px;padding:14px;font-weight:700}.choice.ok{border-color:var(--ok);background:var(--ok-bg)}.choice.bad{border-color:var(--bad);background:var(--bad-bg)}.answer{flex-direction:column;gap:8px;display:flex}.answer-input{font:inherit;border:2px solid var(--line);background:#fff;border-radius:14px;width:100%;padding:14px;font-size:20px}.answer-input:focus{border-color:var(--rose);outline:none}.answer-input.bad{border-color:var(--bad);animation:.3s shake}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.accents{flex-wrap:wrap;gap:6px;display:flex}.accents button{background:#e9edfb;border:none;border-radius:10px;min-width:40px;height:40px;font-size:1.1rem;font-weight:700}.accents button:active{background:#e5e1ff}.feedback{border-radius:14px;flex-direction:column;gap:8px;padding:14px;display:flex}.feedback.ok{background:var(--ok-bg)}.feedback.bad{background:var(--bad-bg)}.feedback.warn{background:var(--warn-bg)}.big-mark{font-size:1.15rem;font-weight:800}.feedback.ok .big-mark{color:var(--ok)}.feedback.bad .big-mark{color:var(--bad)}.solution{font-family:var(--display);color:var(--navy);flex-wrap:wrap;align-items:center;gap:8px;font-size:1.35rem;display:flex}.diff{letter-spacing:.02em;font-family:ui-monospace,Menlo,monospace;font-size:1.2rem}.diff-same{color:var(--ink)}.diff-missing{color:var(--ink);background:#ffe08a;border-radius:4px;padding:0 2px;text-decoration:underline}.diff-extra{color:var(--bad);text-decoration:line-through}.retype-label{font-weight:700}.score{color:var(--navy);font-size:1.4rem;font-weight:800}.stars-earned{color:var(--rose-dark);font-weight:800}.hint-box{background:#fff4d6;border-radius:12px;padding:10px;font-weight:700}.wobbly{text-align:left;background:#f4f6fd;border-radius:12px;padding:12px}.wobbly ul{margin:6px 0 0;padding-left:18px}.tabs{gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.tab{width:44px;height:44px;box-shadow:var(--shadow);background:#fff;border:none;border-radius:50%;flex:none;font-weight:800}.tab.on{background:var(--rose);color:#fff}.tab.locked{opacity:.6}.collection-title{text-align:center;flex-direction:column;display:flex}.collection-title small{font-family:var(--font);color:var(--muted);font-size:.9rem}.item-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.item-card{border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;background:#fff;border:2px solid #0000;flex-direction:column;align-items:center;gap:2px;padding:10px;display:flex}.item-card.worn{border-color:var(--rose)}.item-card.locked,.item-card.poor{opacity:.55}.item-img{width:auto;height:130px}.item-img.big{align-self:center;height:200px}.item-fr{font-size:.9rem;font-weight:800}.item-de{color:var(--muted);font-size:.75rem}.item-cost{color:var(--rose-dark);margin-top:4px;font-size:.8rem;font-weight:800}.modal{z-index:10;background:#2b234073;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal .card{width:100%;max-width:420px;max-height:90dvh;overflow:auto}.runway-stage{border-radius:var(--radius);height:60vh;box-shadow:var(--shadow);position:relative;overflow:hidden}.runway{clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);opacity:.9;background:linear-gradient(#f3d9e3,#e2557b);width:70%;height:55%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.runway-avatar{transform-origin:50% 100%;filter:drop-shadow(0 10px 8px #0000004d);height:80%;animation:3.2s ease-out forwards walk;position:absolute;bottom:2%;left:50%}@keyframes walk{0%{transform:translate(-50%)translateY(-38%)scale(.35)}15%,35%,55%,75%{transform:translateX(-50%) translateY(var(--ty,-20%)) scale(var(--s,.6)) rotate(-2deg)}to{transform:translate(-50%)translateY(0)scale(1)rotate(0)}}.flashes span{opacity:0;background:radial-gradient(#fff,#fff0);border-radius:50%;width:40px;height:40px;animation:2s infinite flash;position:absolute;top:8%}@keyframes flash{0%,90%,to{opacity:0}94%{opacity:1}}.confetti span{border-radius:2px;width:8px;height:14px;animation:3s linear infinite fall;position:absolute;top:-10px}@keyframes fall{to{transform:translateY(70vh)rotate(540deg)}}.lesson{flex-direction:column;gap:10px;display:flex}.word-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.word-list li button{border:none;border-top:1px solid var(--line);text-align:left;background:0 0;grid-template-columns:1fr 1fr auto;align-items:center;gap:8px;width:100%;padding:10px 2px;display:grid}.word-list li.new button{opacity:.55}.word-list span[lang=fr]{color:var(--navy);font-weight:700}.stars span{color:#e3d8cf}.stars span.on{color:var(--gold)}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.chip{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:700}.chip.strong{border-color:var(--rose);color:var(--rose-dark)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.runway-avatar{transform:translate(-50%)}}h2,.topbar h1,.hello{font-weight:800}.profile-avatar{width:110px;height:110px}.profile-meta{color:var(--muted);font-size:.75rem;font-weight:600}.starter-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.starter{border:3px solid var(--line);background:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;font-size:.85rem;display:flex}.starter.on{border-color:var(--rose);background:#ece9ff}.starter-art{width:100%;max-width:110px}.exam-banner{text-align:center;background:#fff4d6;border-radius:14px;padding:8px 14px;font-weight:800}.island{border-radius:var(--radius);height:min(40vh,340px);min-height:220px;box-shadow:var(--shadow);position:relative;overflow:hidden}.island-bg{width:100%;height:100%;position:absolute;inset:0}.island-pal{background:0 0;border:none;padding:0;animation:2.6s ease-in-out infinite hop;position:absolute;transform:translate(-50%)}.island-pal svg{filter:drop-shadow(0 4px 3px #00000026);width:100%;display:block}@keyframes hop{0%,to{transform:translate(-50%)translateY(0)scale(1)}45%{transform:translate(-50%)translateY(-9%)scale(.98,1.03)}60%{transform:translate(-50%)translateY(0)scale(1.03,.97)}}.island-count{background:#ffffffd9;border-radius:999px;padding:3px 12px;font-size:.85rem;font-weight:800;position:absolute;top:10px;right:10px}.glow{animation:2.4s ease-in-out infinite twinkle}.home-nav{grid-template-columns:repeat(4,1fr)}.tile.wide{flex-direction:row;grid-column:1/-1;justify-content:center;gap:10px;font-size:1rem}.tile-sub{color:var(--muted);font-size:.7rem}.egg-list{flex-direction:column;gap:12px;display:flex}.egg-card{grid-template-columns:90px 1fr;align-items:center;gap:14px;display:grid}.egg-card.locked{opacity:.6}.egg-img{width:90px}.egg-info{flex-direction:column;align-items:flex-start;gap:4px;display:flex}.modal.hatch{background:#1e1846bf}.hatch-egg{transform-origin:50% 90%;width:min(50vw,220px);animation:.5s ease-in-out infinite wobble}@keyframes wobble{0%,to{transform:rotate(-9deg)}50%{transform:rotate(9deg)scale(1.04)}}.reveal{border:4px solid var(--line);animation:.45s cubic-bezier(.2,1.6,.4,1) pop}@keyframes pop{0%{opacity:0;transform:scale(.4)}}.reveal-art{align-self:center;width:min(56vw,220px)}.rarity-tag{text-transform:uppercase;letter-spacing:.08em;background:#e9edfb;border-radius:999px;align-self:center;padding:3px 12px;font-size:.75rem;font-weight:800}.rarity-2{border-color:#6fb1ff}.rarity-2 .rarity-tag{color:#1d5fa8;background:#d9ecff}.rarity-3{border-color:#b98cf0}.rarity-3 .rarity-tag{color:#6b2fb8;background:#eedfff}.rarity-4{border-color:var(--gold)}.rarity-4 .rarity-tag{color:#8a5a00;background:#fff0b8}.new-tag{color:var(--ok);font-weight:800}.pal-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;display:grid}.pal-card{border:3px solid var(--line);background:#fff;border-radius:16px;flex-direction:column;align-items:center;padding:6px 4px;font-size:.85rem;line-height:1.2;display:flex;position:relative}.pal-card.fav:after{content:"♥";color:#ff5c8a;position:absolute;top:4px;left:8px}.pal-card.unknown{color:var(--muted);background:#f4f6fd}.pal-img{width:100%;max-width:96px}.silhouette{filter:brightness(0)opacity(.16)}.pal-count{color:var(--muted);font-size:.7rem;font-weight:800;position:absolute;top:4px;right:6px}.levelup-egg{transform-origin:50% 90%;height:60%;animation:1.2s ease-in-out infinite wobble;position:absolute;bottom:8%;left:50%;transform:translate(-50%)}.gap-sentence{font-size:1.35rem;font-weight:700;line-height:1.6}.blank{text-align:center;min-width:56px;color:var(--rose-dark);border-bottom:3px solid var(--rose);background:#ece9ff;border-radius:10px;margin:0 4px;padding:0 10px;display:inline-block}.blank.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}.blank.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}.choices.three{grid-template-columns:repeat(3,1fr)}.choices.three .choice{text-align:center}.small-solution{font-size:1.1rem}.rule summary{cursor:pointer;color:var(--rose-dark);font-weight:700}.rule ul,.plain{flex-direction:column;gap:6px;margin:8px 0 0;padding-left:18px;font-size:.95rem;display:flex}.code{background:var(--rose);color:#fff;border-radius:8px;padding:0 8px;font-size:.85rem;display:inline-block}.example{display:block}