#app{padding:calc(var(--head) + 40px) var(--pad) 80px;max-width:1240px;margin:0 auto}
.ico{display:inline-block;vertical-align:middle;flex:none}
.ico.num{width:var(--s);height:var(--s);display:inline-grid;place-items:center;border:1.6px solid currentColor;border-radius:28%;font:800 calc(var(--s)*.45)/1 var(--font)}
.ey{font:600 12px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--label2)}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.hd h1{font:800 clamp(36px,6vw,68px)/1 var(--font);letter-spacing:-.035em;margin-top:10px}
.stats{display:flex;gap:8px;flex-wrap:wrap}
.st{display:inline-flex;align-items:center;gap:6px;background:var(--card);border-radius:99px;padding:8px 14px;font-size:14px;color:var(--label2);border:0}
.st b{color:var(--label)}
.st.fl.on .ico{color:#ff7a00;animation:flick 1.6s ease-in-out infinite;transform-origin:50% 90%}
.st.cw .ico{color:#c9a227}
.mt{cursor:pointer;padding:8px 10px}
@keyframes flick{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.12,.94) rotate(-4deg)}60%{transform:scale(.95,1.08) rotate(3deg)}}
.mods{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:32px}
.mod{background:var(--card);border-radius:22px;padding:24px;min-width:0}
.mh{display:flex;gap:16px;align-items:center}.mh .mk{font-size:40px}.mh h2{font:800 26px var(--font);letter-spacing:-.02em}.mh p{color:var(--label2);font-size:14px;margin-top:2px}
.bar{height:8px;border-radius:9px;background:var(--fill2);overflow:hidden;margin-top:18px}.bar i{display:block;height:100%;background:var(--ok);border-radius:9px;transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.sm{font-size:13px;color:var(--label2);margin-top:6px}
.opts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.sl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--label2)}
select{border:1px solid var(--sep);border-radius:10px;background:var(--bg);color:var(--label);font:500 14px var(--font);padding:8px 10px;max-width:100%}
.tg{display:inline-flex;background:var(--fill2);border-radius:99px;padding:3px}
.tg button{appearance:none;border:0;background:none;border-radius:99px;padding:7px 14px;font:600 13px var(--font);cursor:pointer;color:var(--label2);transition:background .2s,color .2s}
.tg button[aria-pressed=true]{background:var(--label);color:var(--bg)}
.path{list-style:none;padding:0;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.nd{appearance:none;width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:1px solid var(--sep);background:var(--bg);border-radius:14px;padding:10px 14px;cursor:pointer;position:relative;transition:transform .18s cubic-bezier(.3,1.5,.5,1),box-shadow .18s;box-shadow:0 3px 0 var(--sep)}
.nd:hover{transform:translateY(-2px)}.nd:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sep)}
.nd .ic{flex:none;width:52px;height:44px;display:grid;place-items:center;border-radius:10px;background:var(--fill2);font-size:22px}
.nd b{display:block;font-weight:700}.nd small{display:block;color:var(--label2);font-size:12px}
.nd>span:nth-child(2){min-width:0}
.nd.done .ic{background:var(--ok);color:#fff}
.nd .ck{margin-left:auto;font-style:normal;color:var(--label2)}.nd.done .ck{color:var(--ok)}
.nd.lock{opacity:.45;cursor:not-allowed}.nd.lock:hover{transform:none}
.nd.final .ic{background:var(--hl);color:#000}
/* motion */
.rise{animation:rise .45s cubic-bezier(.2,1.2,.4,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
.in{animation:slide .35s cubic-bezier(.2,1,.4,1) both}
@keyframes slide{from{opacity:0;transform:translateX(28px)}}
.shk{animation:shk .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shk{15%,85%{transform:translateX(-3px)}30%,70%{transform:translateX(6px)}45%,55%{transform:translateX(-8px)}}
.bounce{animation:bounce .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes bounce{40%{transform:scale(1.08)}}
.up{animation:up .3s cubic-bezier(.2,1.2,.4,1) both}@keyframes up{from{transform:translateY(100%);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* session */
.ses{max-width:640px;margin:0 auto;min-height:calc(100dvh - var(--navh) - 100px);display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px}.top .bar{flex:1;margin:0;height:14px}
.mini{display:inline-flex;align-items:center;gap:4px;font:700 14px var(--font)}.mini .ico{color:#c9a227}
.x{appearance:none;border:0;background:none;font-size:20px;cursor:pointer;color:var(--label2);width:36px;height:36px}
.q{flex:1;padding:30px 0 20px;text-align:center;min-width:0}
.q h2{font:800 30px var(--font);letter-spacing:-.02em;margin-top:14px}.q h2.snd{font-size:46px}
.shero{margin-top:12px;display:flex;justify-content:center;align-items:center;gap:14px}
.xl{font-size:110px}.lg{font-size:44px}.md{font-size:26px}.sm.kr-i,.krw.sm{font-size:20px}
.hlg{color:var(--label);text-shadow:0 0 0 var(--hl)}
.der{display:inline-flex;align-items:center;gap:10px;color:var(--label3)}.der i{font-style:normal;font-size:28px}
.dim{opacity:.45}
.body{color:var(--label2);margin-top:12px;font-size:17px}.body b{color:var(--label)}
.rule{margin:14px auto 0;max-width:460px;background:var(--card);border-radius:12px;padding:10px 14px;font-size:14px;border-left:4px solid var(--hl);text-align:left}
.kw{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px;padding:16px 22px;border-radius:16px;border:1px solid var(--sep);max-width:100%}.kw>span:last-child{font-size:14px;color:var(--label2)}
.krw{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:0 .35em;max-width:100%;line-height:1.1}
.krw .wd{display:inline-flex}
.sy{border-radius:.12em;padding:0 .02em;transition:background .2s,color .2s}
.sy.hl{background:var(--hl);color:#000;box-shadow:0 0 0 .06em var(--hl)}
.tapw .sy{cursor:pointer;padding:0 .06em}.tapw .sy:hover{background:var(--fill2)}
.sy.okc{background:var(--ok);color:#fff}.sy.badc{background:var(--bad);color:#000;animation:shk .4s}
.ask{font:700 20px var(--font)}.ag{font-style:normal;font-size:12px;font-weight:700;background:var(--bad-bg);color:var(--bad-ink);padding:2px 8px;border-radius:99px;vertical-align:middle}
.big{margin:26px 0;max-width:100%;overflow-wrap:anywhere}.big .lt{font:800 clamp(30px,8vw,44px)/1.1 var(--font);letter-spacing:-.02em}
.pi{margin-top:18px;color:var(--label)}
.ops{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:24px}
.op,.mp,.ti{appearance:none;cursor:pointer;border:2px solid var(--sep);background:var(--bg);border-radius:14px;padding:16px 12px;font:600 16px var(--font);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere;box-shadow:0 3px 0 var(--sep);transition:border-color .15s,background .15s,transform .1s}
.op:hover,.mp:hover,.ti:hover{border-color:var(--label2)}
.op:active,.mp:active,.ti:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sep)}
.op small,.ti small{font-size:12px;color:var(--label2);font-weight:500}
.op.ok,.mp.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);box-shadow:0 3px 0 var(--ok)}
.op.bad,.mp.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--bad-ink);box-shadow:0 3px 0 var(--bad)}
.mp.on{border-color:var(--label);background:var(--fill2)}.mp.ok{opacity:.55}
.pics .op{padding:18px 8px}.pics .op .ico{color:var(--label)}
.mt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:24px}.mt>div{display:flex;flex-direction:column;gap:10px;min-width:0}
.ln{min-height:68px;border-bottom:2px solid var(--sep);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px 0;margin-top:24px}
.tl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}.ti{padding:10px 14px}
.wl{list-style:none;padding:0;margin-top:20px;text-align:left}.wl li{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--sep)}.wl .gl{color:var(--label2)}.wl small{display:block;font-size:12px;color:var(--label2);margin-top:4px}.wi{color:var(--label2)}
.ft{position:sticky;bottom:0;background:var(--bg);padding:14px 0 calc(18px + env(safe-area-inset-bottom))}
.go{appearance:none;border:0;width:100%;padding:16px;border-radius:14px;background:var(--label);color:var(--bg);font:800 16px var(--font);letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 0 var(--label3);transition:transform .1s}.go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--label3)}.go:disabled{opacity:.3;cursor:default}
.fb{display:flex;flex-direction:column;gap:12px;border-radius:16px;padding:16px;text-align:left}
.fbt{display:flex;gap:12px;align-items:flex-start}.fbi{flex:none;width:36px;height:36px;border-radius:99px;display:grid;place-items:center;color:#fff}
.fb.y{background:var(--ok-bg)}.fb.y b{color:var(--ok)}.fb.y .fbi{background:var(--ok)}.fb.y .go{background:var(--ok);color:#fff;box-shadow:0 4px 0 #157a43}
.fb.n{background:var(--bad-bg)}.fb.n b{color:var(--bad-ink)}.fb.n .fbi{background:var(--bad);color:#000}.fb.n .go{background:var(--bad);color:#000;box-shadow:0 4px 0 #b88900}
.fb b{display:block;font-size:20px}.fb p{color:var(--label);margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wins{display:flex;gap:10px;justify-content:center;margin-top:18px}.wins .st{font-size:18px;padding:10px 18px}
.confetti{position:fixed;left:50%;top:40%;pointer-events:none;z-index:40}
.confetti i{position:absolute;color:#c9a227;animation:boom 1.3s cubic-bezier(.1,.8,.3,1) forwards;animation-delay:var(--d);opacity:0}
@keyframes boom{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),55vh) rotate(var(--r))}}
@media(max-width:800px){.mods{grid-template-columns:minmax(0,1fr)}#app{padding:calc(var(--head) + 24px) var(--pad) 64px}.xl{font-size:84px}.lg{font-size:36px}.mod{padding:18px}.hd{align-items:flex-start}}

.nd em.bs{font-style:normal;font:700 .78rem var(--font);color:var(--mute);border:1px solid var(--line);border-radius:99px;padding:2px 8px;margin-left:auto;white-space:nowrap}
.nd em.bs.ok{color:var(--ok);border-color:var(--ok)}
.nd em.bs+.ck{margin-left:10px}
.go.ghost{background:none;color:var(--fg);border:1px solid var(--line);box-shadow:none;margin-top:8px}
.st.sc b{font-size:20px}.st.sc.low b{color:var(--bad)}.st.sc.on b{color:var(--ok)}
.ico.sw{width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1.5px #ffffff40;display:inline-block}
.ico.sw.shine{background:radial-gradient(circle at 30% 30%,#fff,#e8e8e8 40%,#fff 60%,#cfcfcf);box-shadow:0 0 14px #ffffffaa}
.top .x{flex:none}
html,body{overflow-x:clip}

/* exercises fill the screen under the header and never scroll */
body.ses-on{overflow:hidden;height:100dvh}
body.ses-on .site-foot{display:none}
body.ses-on #app{padding:calc(var(--head) + 8px) 16px 0;height:100dvh;max-width:680px;display:flex;flex-direction:column}
body.ses-on .ses{flex:1;min-height:0;height:100%;max-width:640px;width:100%}
.ses .q{flex:1;min-height:0;overflow:hidden;padding:clamp(8px,2.5dvh,28px) 0 8px;display:flex;flex-direction:column;align-items:center}
.ses .qi{width:100%;transform-origin:top center}
.ses .ft{position:static;flex:none;padding:8px 0 calc(12px + env(safe-area-inset-bottom))}
.ses .xl{font-size:clamp(56px,13dvh,110px)}
.ses .lg{font-size:clamp(30px,6dvh,44px)}
.ses .q h2{font-size:clamp(22px,3.6dvh,30px);margin-top:clamp(4px,1.4dvh,14px)}
.ses .q h2.snd{font-size:clamp(28px,5dvh,46px)}
.ses .body{font-size:clamp(14px,2.1dvh,17px);margin-top:clamp(4px,1.2dvh,12px)}
.ses .rule{margin-top:clamp(6px,1.2dvh,14px);padding:8px 12px}
.ses .kw{margin-top:clamp(8px,1.6dvh,20px);padding:clamp(8px,1.4dvh,16px) 18px}
.ses .big{margin:clamp(10px,3dvh,26px) 0}
.ses .ops,.ses .mt{margin-top:clamp(10px,2.4dvh,24px);gap:8px}
.ses .op,.ses .mp{padding:clamp(8px,1.8dvh,16px) 10px}
.ses .pics .op{padding:clamp(8px,1.6dvh,18px) 8px}
.ses .pics .op .ico:not(.sw){width:clamp(34px,6.5dvh,56px);height:clamp(34px,6.5dvh,56px)}
.ses .pi .ico{width:clamp(44px,9dvh,72px);height:clamp(44px,9dvh,72px)}
.ses .ln{min-height:clamp(48px,8dvh,68px);margin-top:clamp(10px,2dvh,24px)}
.ses .tl{margin-top:clamp(10px,2dvh,20px)}
.ses .go{padding:clamp(12px,2dvh,16px)}
.ses .fb{padding:12px 14px;gap:10px}
.ses .wl{margin-top:10px;column-gap:16px}
.ses .wl li{padding:clamp(5px,1dvh,12px) 0}
@media(max-width:600px){.ses .wl.many{display:grid;grid-template-columns:1fr 1fr}.ses .wl.many li{grid-template-columns:24px minmax(0,1fr);gap:6px}.ses .wl.many li .gl{grid-column:2;font-size:12px}}
/* readable sizes in exercises */
.ses .ask{font-size:clamp(19px,2.9dvh,24px);line-height:1.25}
.ses .body{font-size:clamp(17px,2.6dvh,20px);line-height:1.5;color:var(--fg)}
.ses .body.big-t{font-size:clamp(19px,3dvh,23px);max-width:34ch;margin-left:auto;margin-right:auto}
.ses .rule{font-size:clamp(16px,2.3dvh,18px);line-height:1.45;padding:12px 16px}
.ses .op,.ses .mp{font-size:clamp(16px,2.4dvh,19px)}
.ses .op small,.ses .ti small{font-size:13px}
.ses .wl li{font-size:clamp(16px,2.3dvh,18px)}
.ses .wl small{font-size:13px}
.ses .fb b{font-size:20px}.ses .fb p{font-size:16px}
.ses .ey{font-size:13px}
.ses .kw>span:last-child{font-size:16px}
.ses .kw .krw{font-size:clamp(34px,6dvh,48px)}
@media (prefers-color-scheme:light){:root{--bad-ink:#7a5800;--ok:#1a8f4c;--ok-bg:#1a8f4c1a;--bad-bg:#f2b70529}}