:root{--bg: #fff8f0;--card: #ffffff;--ink: #3b3355;--soft: #665e80;--line: #e6dcef;--accent: #ff8fab;--good: #6cc68a;--bad: #ef6f6c;--key: #efe7f7;--radius: 14px;font-family:ui-rounded,SF Pro Rounded,Nunito,Segoe UI,system-ui,sans-serif}:root[data-theme=dark]{--bg: #1e1a2b;--card: #2a2540;--ink: #ece6fa;--soft: #a69fc0;--line: #3d3657;--key: #3a3352;color-scheme:dark}*{box-sizing:border-box}body{margin:0 auto;max-width:560px;background:var(--bg);color:var(--ink);line-height:1.45;-webkit-tap-highlight-color:transparent}button{font-family:inherit;touch-action:manipulation;color:inherit}a{color:var(--ink)}.hidden{display:none!important}.center{text-align:center}header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 16px;border-bottom:2px solid var(--line)}header h1{margin:0;font-size:1.8rem;color:var(--accent);letter-spacing:.04em}header .back{color:var(--soft);font-size:.9rem}.header-actions{justify-self:end;display:flex;gap:6px}.icon-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--ink);font-size:1.1rem;cursor:pointer}#settings-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}#settings-btn svg{display:block}@media(hover:hover)and (prefers-reduced-motion:no-preference){#settings-btn svg{transition:transform .4s ease}#settings-btn:hover svg{transform:rotate(90deg)}}main{padding:16px}dialog.sheet{position:relative;width:min(92vw,360px);padding:18px 16px 12px;border:2px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink)}dialog.sheet::backdrop{background:#1e1a2b8c}dialog.sheet h2{margin:0 0 8px;text-align:center;color:var(--accent)}dialog.sheet .close{position:absolute;top:10px;right:10px;width:36px;height:36px}.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-weight:700;flex-wrap:wrap}.setting:first-of-type{border-top:0}.setting.links{justify-content:center;gap:6px 14px;font-weight:600}.seg{display:flex;border:2px solid var(--line);border-radius:999px;overflow:hidden}.seg button{min-width:62px;padding:7px 10px;border:0;background:none;color:var(--soft);font:inherit;font-weight:800;cursor:pointer}.seg button[aria-pressed=true]{background:var(--accent);color:#1e1a2b}#haptics-setting .seg button{min-width:48px;padding:7px 8px}.switch{position:relative;flex:none;width:48px;height:28px;padding:0;border:2px solid var(--line);border-radius:999px;background:var(--key);cursor:pointer}.switch:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--soft);transition:left .15s}.switch[aria-checked=true]{background:var(--accent);border-color:var(--accent)}.switch[aria-checked=true]:after{left:23px;background:#fff}h2{font-size:1.2rem;margin:24px 0 8px}button.primary{display:block;margin:16px auto 0;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:14px 32px;font-size:1.2rem;font-weight:800;cursor:pointer;box-shadow:0 4px #e0708d}button.primary:active{transform:translateY(2px);box-shadow:0 2px #e0708d}button.secondary{display:block;margin:12px auto 0;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:10px 22px;font-size:1rem;font-weight:700;cursor:pointer}button.link{background:none;border:none;padding:4px;color:var(--soft);text-decoration:underline;cursor:pointer;font-size:.95rem}.learn-stats{display:flex;gap:8px;text-align:center;color:var(--soft);font-size:.8rem}.learn-stats div{flex:1;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:8px 4px}.learn-stats b{display:block;font-size:1.5rem;color:var(--ink)}.train{text-align:center;margin:8px 0 4px}.plan{color:var(--soft);margin:10px 0 0}.extra-rounds{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 0}.extra-rounds button.secondary{margin:0;padding:7px 16px;font-size:.92rem}.caught-up{display:flex;align-items:center;gap:12px;text-align:left;margin:16px 0 0}.caught-up svg{width:64px;flex:none}.level-progress{list-style:none;padding:0;margin:0}.level-progress li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius)}.level-progress li.current{background:var(--card);border:2px solid var(--line)}.level-progress svg{width:40px;flex:none}.level-progress div{flex:1;min-width:0}.level-progress small{color:var(--soft);min-width:64px;text-align:right}.bar{display:flex;height:10px;margin-top:4px;border-radius:5px;background:var(--key);overflow:hidden}.bar .learning{opacity:.4}.word-list{margin-top:20px;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:10px 14px}.word-list summary{font-weight:800;cursor:pointer}.word-list ul{list-style:none;padding:0;margin:8px 0 0}.word-list li{padding:6px 0;border-top:1px solid var(--line);font-size:.92rem}.word-list i,.word-list .when{color:var(--soft)}.word-list .when{float:right;font-size:.85rem}.level-picker{display:grid;gap:8px}.level-pick{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:8px 12px;cursor:pointer;font-size:1rem}.level-pick:hover,.level-pick.current{border-color:var(--ink)}.level-pick svg{width:48px;flex:none}.level-pick small{display:block;color:var(--soft)}.session-top{display:flex;align-items:center;gap:10px}.session-top #quit{text-decoration:none;font-size:1.2rem}.progress{flex:1;height:12px;background:var(--key);border-radius:6px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--good);transition:width .3s}#session-count{color:var(--soft);font-size:.85rem;min-width:40px;text-align:right}#card{text-align:center;padding-top:8px}#card .slime svg{width:90px}#card .bubble+.slime svg{width:120px;margin-top:16px}.tag{color:var(--soft);font-weight:700;margin:0 0 6px;text-transform:uppercase;letter-spacing:.08em}.word{font-size:2.2rem;margin:4px 0 0}.pos{color:var(--soft);font-style:italic;margin:0}.definition{font-size:1.15rem;margin:12px 0}.similar{color:var(--soft)}.bubble{position:relative;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px 18px;text-align:center;box-shadow:0 3px 0 var(--line)}.bubble:after{content:"";position:absolute;bottom:-11px;left:50%;width:18px;height:18px;background:var(--card);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translate(-50%) rotate(45deg)}.bubble .pos{font-size:.95rem}.bubble p{margin:4px 0 0;font-size:1.3rem;line-height:1.4}.goal{margin:4px auto 0;max-width:320px;text-align:left;font-size:.9rem;color:var(--soft)}.goal b{color:var(--ink);float:right}.goal .progress{height:10px;margin-top:4px}#tiles{display:flex;gap:4px;justify-content:center;margin:4px 0 0;--size: min(48px, calc((100vw - 40px) / var(--len, 5) - 4px), calc((560px - 40px) / var(--len, 5) - 4px))}.tile{width:var(--size);height:calc(var(--size) * 1.15);border-bottom:4px solid var(--soft);display:flex;align-items:center;justify-content:center;font-size:calc(var(--size) * .62);font-weight:800;text-transform:uppercase;background:var(--card);border-radius:8px 8px 4px 4px}.tile.cursor{border-bottom-color:var(--accent);background:#fff0f4}.tile.ghost{color:#c3bad6}.tile.extra{background:transparent;border:2px dashed var(--line);border-bottom:4px dashed var(--soft)}.tile.solved{background:var(--good);color:#fff;border-bottom-color:#4aa36a}.tile.revealed{background:#fde2e1;border-bottom-color:var(--bad);color:#a33b39}#tiles.shake{animation:ouch .45s ease}@keyframes ouch{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 0}.choices.definitions{grid-template-columns:1fr}.choice{display:flex;align-items:center;gap:8px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:10px 12px;font-size:1.05rem;font-weight:700;cursor:pointer;min-height:52px}.choices.definitions .choice{font-weight:400;font-size:.98rem}.choice:hover:not(:disabled){border-color:var(--ink)}.choice:disabled{cursor:default;opacity:.6}.choice.right{opacity:1;border-color:var(--good);background:#e5f6ea}.choice.wrong{opacity:1;border-color:var(--bad);background:#fde2e1}.choice .num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--key);color:var(--soft);font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center}.actions{display:flex;gap:8px;justify-content:center}.actions button.secondary{margin:4px 0 0;padding:7px 18px}.actions button.primary{margin-top:4px}button.secondary.quiet{color:var(--soft)}#keyboard{position:sticky;bottom:0;padding:10px 0 14px;background:var(--bg);display:flex;flex-direction:column;gap:7px;user-select:none;-webkit-user-select:none}.krow{display:flex;gap:5px;justify-content:center}.key{flex:1;max-width:48px;height:52px;border:none;border-radius:8px;background:var(--key);font-size:1.25rem;font-weight:800;text-transform:uppercase;cursor:pointer;box-shadow:0 2px 0 var(--line)}.key.wide{max-width:80px;flex:1.6;font-size:.95rem}.key:active{background:#ddd0ec}.key.ready{background:var(--good);color:#fff;box-shadow:0 2px #4aa36a}#feedback{margin-top:12px}#feedback p{margin:4px 0}.good{color:#2f8a4c}.bad{color:#c2403c}.soft{color:var(--soft)}.site-links{padding:24px 0 16px;text-align:center;font-size:.85rem;color:var(--soft)}.site-links a{color:var(--soft)}.speak{background:none;border:none;padding:0 0 0 6px;font-size:.9em;cursor:pointer;vertical-align:middle}.word .speak{font-size:1.3rem}.example{color:var(--ink);font-style:italic;margin:6px 0}.example b{font-style:normal;color:var(--accent)}.blank{display:inline-block;letter-spacing:1px;color:var(--accent);font-weight:800}.notice{background:#e5f6ea;border:2px solid var(--good);border-radius:var(--radius);padding:8px 12px;margin:0 0 12px;text-align:center}.milestone{display:flex;align-items:center;gap:12px;margin-top:20px;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:10px 14px}.milestone svg{width:48px;display:block}.milestone>div{flex:1}.milestone small{display:block;color:var(--soft)}.milestone .progress{height:10px;margin-top:6px}.week{display:flex;gap:6px;align-items:flex-end;height:120px;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:8px 10px}.week .day{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}.week .day i{display:block;width:100%;max-width:32px;min-height:2px;border-radius:4px 4px 0 0;background:#c9bfe6}.week .day.today i{background:var(--good)}.week .day small{font-size:.7rem;color:var(--soft);min-height:1em}.week .day span{font-size:.75rem;color:var(--soft);font-weight:700}.intro{text-align:center}.intro .slimes{display:flex;justify-content:center;gap:2px;margin:8px 0}.intro .slimes svg{width:44px}:is(.slime,.milestone,.level-progress,.level-pick,.intro .slimes) svg{transform-origin:bottom center}:is(.slime,.milestone,.level-progress,.intro .slimes) svg{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}:is(.slime.bounce,.milestone,.level-progress,.level-pick,.intro .slimes) svg{animation:bounce 1.6s ease-in-out infinite}:is(.level-progress li,.level-pick,.intro .slimes svg):nth-child(3n+2){--bounce-delay: -.5s}:is(.level-progress li,.level-pick,.intro .slimes svg):nth-child(3n){--bounce-delay: -1.1s}:is(.level-progress,.level-pick,.intro .slimes) svg{animation-delay:var(--bounce-delay, 0s)}.level-progress li.sleepy svg{animation-duration:3.2s}.slime.ouch svg{animation:ouch .5s ease}.slime.yay svg{animation:yay .7s ease}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.06,.94)}}@keyframes yay{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-24px) scale(.95,1.08)}70%{transform:translateY(0) scale(1.1,.9)}to{transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:is(.slime,.milestone,.level-progress,.level-pick,.intro .slimes) svg{animation:none!important}}:root[data-theme=dark] .tile.cursor{background:#3d2a3a}:root[data-theme=dark] .tile.ghost{color:#6d6588}:root[data-theme=dark] .tile.revealed{background:#4a2628;color:#ffb3b0}:root[data-theme=dark] .key:active{background:#4b4268}:root[data-theme=dark] .good{color:#7fd69a}:root[data-theme=dark] .bad{color:#ff9a96}:root[data-theme=dark] .notice{background:#22392b}:root[data-theme=dark] .choice.right{background:#22392b}:root[data-theme=dark] .choice.wrong{background:#4a2628}:root[data-theme=dark] .week .day i{background:#5a5080}html.discord body{padding:var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px)) var(--discord-safe-area-inset-right, 0px) var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) var(--discord-safe-area-inset-left, 0px)}body.in-session{height:100vh;height:100dvh;display:flex;flex-direction:column}body.in-session main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:10px 14px 0}body.in-session #session{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}body.in-session #card{flex:1 1 auto;min-height:0;overflow-y:auto}body.in-session #keyboard{position:static;margin:0 -8px;padding:8px 0 14px}body.in-session .site-links{padding:0 0 8px}.key{height:clamp(38px,6.6dvh,56px)}#keyboard.disabled{opacity:.4;pointer-events:none}@media(max-height:1000px){header{padding:6px 16px}.icon-btn{width:40px;height:40px}body.in-session main{padding-top:6px}.bubble{padding:10px 14px}.bubble p{font-size:1.15rem;line-height:1.3}body.in-session #keyboard{padding:6px 0 8px;gap:6px}body.in-session .site-links{padding:0 0 6px}}@media(max-height:800px){.icon-btn{width:36px;height:36px;font-size:1.05rem}.tag{font-size:.9rem}.bubble .pos{font-size:.85rem}.bubble p{font-size:1.05rem;margin-top:2px}#card .bubble+.slime svg{width:90px}.krow{gap:4px}body.in-session #keyboard{gap:5px}}@media(max-height:660px){header{padding:4px 12px}.bubble{padding:8px 12px}.bubble p{font-size:1rem;line-height:1.25}#card .bubble+.slime svg{width:60px}body.in-session .site-links{padding:0 0 4px;font-size:.8rem}}#reminder .setting:first-of-type{border-top:1px solid var(--line)}.setting-note{margin:0 0 10px;font-size:.9rem;font-weight:400;color:var(--soft)}html.app,html.app body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html.app input{-webkit-user-select:text;user-select:text}html.app{--sait: max(env(safe-area-inset-top, 0px), var(--app-inset-top, 0px));--sair: max(env(safe-area-inset-right, 0px), var(--app-inset-right, 0px));--saib: max(env(safe-area-inset-bottom, 0px), var(--app-inset-bottom, 0px));--sail: max(env(safe-area-inset-left, 0px), var(--app-inset-left, 0px))}html.app body{padding:var(--sait) var(--sair) var(--saib) var(--sail)}html.app body.in-session{padding-bottom:max(var(--saib) - 12px,0px)}html.app .site-links{display:none}html.app :is(.icon-btn,button.secondary,button.primary,.choice,.back,.key){transition:transform .08s ease-out}html.app :is(.icon-btn,button.secondary,.choice,.key):active{transform:scale(.94)}html.app .back:active{opacity:.6}@media(pointer:coarse)and (max-width:600px){#keyboard,body.in-session #keyboard{margin-bottom:6px}}
