:root{--sky:#7cc8ff;--mint:#7fe0b5;--sun:#ffd36e;--coral:#ff8a7a;--soft:#fffdf8;--navy:#23345c;--dim:#5d6e92;--line:#cfe9ff;--card:#fff;--accent:#ffb938;--disp:"Fredoka", "Nunito", system-ui, -apple-system, "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", sans-serif;--body:"Nunito", system-ui, -apple-system, "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Microsoft YaHei", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--navy);font:700 16px/1.35 var(--body);-webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none;margin:0;overflow:hidden}body{background:#cfefff}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer}.f{fill:currentColor}.s{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.w{fill:#fff}.sky{background:linear-gradient(#7dc6ff 0%,#a9dbff 38%,#ddf1ff 70%,#ffe9da 100%);position:fixed;inset:0;overflow:hidden}.sunglow{background:radial-gradient(circle,#fff8d6f2 0%,#ffecbe73 30%,#ffecbe00 62%);border-radius:50%;width:70vmax;height:70vmax;position:absolute;top:-24vmax;right:-22vmax}.clouds{will-change:transform;background-repeat:repeat-x;width:200%;height:26%;animation:120s linear infinite drift;position:absolute;left:0}.clouds.c1{opacity:.95;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 300'%3E%3Cg fill='%23fff'%3E%3Cpath d='M60 150c-30 0-44-26-24-44 6-30 46-38 64-18 16-34 74-32 84 6 34-6 50 30 26 50-4 8-12 6-20 6z'/%3E%3Cpath d='M560 90c-22 0-32-20-18-32 4-22 34-28 48-14 12-24 54-22 60 4 26-4 36 22 20 36-4 6-10 6-16 6z' opacity='.85'/%3E%3C/g%3E%3C/svg%3E");background-size:900px 100%;top:6%}.clouds.c2{opacity:.9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 300'%3E%3Cg fill='%23fff'%3E%3Cpath d='M820 200c-40 0-60-34-32-58 8-40 62-52 86-24 22-46 100-42 112 8 46-8 68 40 34 66-6 10-16 8-26 8z'/%3E%3Cpath d='M120 240c-26 0-38-22-20-38 4-26 40-34 56-16 14-30 66-28 74 6 30-6 44 26 22 44-4 6-10 4-16 4z' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");background-size:1100px 100%;animation-duration:180s;top:46%}@keyframes drift{to{transform:translate(-50%)}}body.idle .clouds{animation-play-state:paused!important}.pill{min-height:54px;font:700 20px/1 var(--disp);letter-spacing:.3px;color:#5a3a00;background:linear-gradient(#ffe68a 0%,#ffcb45 55%,#ffb730 100%);border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 30px;transition:transform 80ms,box-shadow 80ms;display:inline-flex;box-shadow:0 5px #e39314,0 10px 18px #e3931447,inset 0 2px #ffffffbf}.pill svg{width:22px;height:22px}.pill:active{transform:translateY(4px);box-shadow:0 1px #e39314,0 4px 8px #e3931440,inset 0 2px #fff9}.pill.white{color:var(--navy);background:#fff;box-shadow:inset 0 0 0 2.5px #9ed6ff,0 4px #bfe3ff,0 8px 16px #3c78be24}.pill.white:active{transform:translateY(3px);box-shadow:inset 0 0 0 2.5px #9ed6ff,0 1px #bfe3ff}.pill.big{min-width:220px;min-height:66px;font-size:30px}.pill.sm{min-height:46px;padding:0 20px;font-size:16px}.pill:disabled{filter:grayscale(.4)opacity(.55);pointer-events:none}.rbtn{color:#fff;background:radial-gradient(circle at 35% 28%, #ffffff8c, #fff0 45%), var(--c,#4fb2f5);width:54px;height:54px;box-shadow:0 4px 0 color-mix(in srgb, var(--c,#4fb2f5) 70%, #123), 0 8px 14px #23345c2e;border:0;border-radius:50%;place-items:center;padding:0;transition:transform 80ms,box-shadow 80ms;display:inline-grid}.rbtn svg{width:26px;height:26px}.rbtn:active{box-shadow:0 1px 0 color-mix(in srgb, var(--c,#4fb2f5) 70%, #123);transform:translateY(3px)}.rbtn.sm{width:44px;height:44px}.rbtn.sm svg{width:22px;height:22px}.c-red{--c:#ff7e73}.c-blue{--c:#4da6f2}.c-sky{--c:#49b7f2}.c-green{--c:#3ecf9a}.c-white{--c:#fff;color:#3e9be0}.c-coral{--c:#ff8a7a}.card{background:var(--card);border-radius:20px;box-shadow:inset 0 0 0 2px #e2f2ff,0 6px 16px #23345c1f}.screen{z-index:2;pointer-events:none;padding:max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;max-width:560px;margin:0 auto;display:flex;position:fixed;inset:0}.screen>*{pointer-events:auto}.logo{line-height:.86;font:700 clamp(40px, 13vw, 62px)/.86 var(--disp);letter-spacing:1px;flex-direction:column;align-items:center;margin:76px 0 0;display:flex}.logo span{color:#fff;text-shadow:0 3px #3e8ee8,0 -2px #3e8ee8,3px 0 #3e8ee8,-3px 0 #3e8ee8,2px 2px #3e8ee8,-2px 2px #3e8ee8,2px -2px #3e8ee8,-2px -2px #3e8ee8,0 7px #2a6fc7,0 12px 18px #1e5aaa59}.logo .l2{color:#fff6d8}:root:not([lang=en]) .logo{font-size:clamp(34px,10.5vw,54px)}.tagline{font:800 16px/1.5 var(--body);color:#fff;text-align:center;text-shadow:0 2px 6px #1e5aaa73;max-width:300px;margin:14px 0 0}.home-mid{flex:1;align-content:center;place-items:center;gap:22px;width:100%;display:grid}.demo{align-items:center;gap:4px;display:flex}.demo .ln{background:#ff8a7a;border-radius:999px;width:34px;height:9px;box-shadow:0 0 0 4px #ff8a7a38}.demo .ln.s{background:#ff8a7a;width:20px}.demo svg{flex:none}.home-bottom{flex-direction:column;align-items:center;gap:16px;width:100%;display:flex}.rrow{gap:30px;display:flex}.rcol{flex-direction:column;align-items:center;gap:8px;display:flex}.rcol span{font:800 13px var(--body);color:var(--navy);text-shadow:0 1px #fffc}.hstat{color:var(--dim);font:800 14px var(--body);background:#ffffffbf;border-radius:999px;margin:0;padding:8px 18px}.hstat:empty{display:none}.hud{align-items:stretch;gap:8px;width:100%;display:flex}.hcard{flex:none;align-items:center;gap:9px;min-height:62px;padding:9px 12px;display:flex}.hcard .col{flex-direction:column;gap:3px;min-width:0;display:flex}.hcard b{font:800 11px/1.2 var(--body);color:var(--navy);white-space:nowrap}.hcard strong{font:700 24px/1 var(--disp)}.hcard.grow{flex:1;min-width:0}.hcard .pk{flex:none;width:34px;height:34px}.bar{background:#e8f4ee;border-radius:999px;height:16px;position:relative;overflow:hidden}.bar i{background:linear-gradient(#8debb9,#3dc488);border-radius:999px;transition:width .5s cubic-bezier(.3,1.4,.5,1);position:absolute;inset:0 auto 0 0}.bar i.warn{background:linear-gradient(#ffc9a0,#ff8a5b)}.bar u{background:#23345c80;width:2px;position:absolute;top:0;bottom:0}.bar em{font:800 11px/16px var(--body);color:var(--navy);font-style:normal;position:absolute;top:0;right:8px}#stage{flex:1;place-items:center;width:100%;margin:12px 0;display:grid;position:relative}#board{touch-action:none;width:100%;height:100%;display:block}.note-line{font:800 14px/1.2 var(--body);color:var(--dim);text-align:center;margin:6px 0 0}.note-line.good{color:#1f8a6b}.note-line.bad{color:#d8503c}.toast{z-index:3;background:#fff;border-radius:20px;align-items:center;gap:12px;padding:10px 14px;animation:.35s cubic-bezier(.3,1.4,.5,1) toastIn;display:flex;position:absolute;top:84px;left:12px;right:12px;box-shadow:inset 0 0 0 2px #e2f2ff,0 8px 20px #23345c29}.toast .pk{flex:none;width:44px;height:44px}.toast b{font:700 18px/1.2 var(--disp);display:block}.toast small{color:var(--dim);font:700 13px var(--body);display:block}@keyframes toastIn{0%{opacity:0;transform:translateY(-16px)}}.hintbar{color:#fff;max-width:calc(100% - 40px);font:800 15px var(--body);text-align:center;z-index:3;background:#23345ccc;border-radius:999px;padding:10px 18px;animation:2s ease-in-out infinite bob;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}@keyframes bob{50%{transform:translate(-50%,-6px)}}.corner{z-index:6;top:max(14px, env(safe-area-inset-top));align-items:center;gap:8px;display:flex;position:fixed;right:max(12px,50vw - 268px)}body.playing .corner{display:none}.langpick{min-height:44px;color:var(--navy);font:800 14px var(--body);background:#ffffffeb;border-radius:999px;align-items:center;gap:6px;padding:0 14px 0 11px;display:inline-flex;box-shadow:inset 0 0 0 2px #cfe9ff,0 4px 12px #23345c1f}.langpick svg{fill:none;stroke:#3e9be0;stroke-width:1.8px;width:20px;height:20px}.langpick select{appearance:none;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.corner .rbtn{--c:#fff;color:#3e9be0}.btnrow{justify-content:center;gap:10px;padding-bottom:4px;display:flex}.modal{z-index:10;-webkit-backdrop-filter:blur(6px);background:#a0d2fa59;place-items:center;padding:20px;animation:.25s fadeIn;display:grid;position:fixed;inset:0}.modal.hide{display:none}@keyframes fadeIn{0%{opacity:0}}.mcard{text-align:center;background:#fff;border-radius:30px;flex-direction:column;align-items:center;gap:10px;width:min(360px,100%);max-height:92vh;padding:18px 22px 22px;animation:.5s cubic-bezier(.3,1.5,.5,1) pop;display:flex;position:relative;overflow:auto;box-shadow:inset 0 0 0 3px #ffe7a0,0 20px 50px #23345c40}.mcard.plain{box-shadow:inset 0 0 0 3px #cfe9ff,0 20px 50px #23345c33}#album .mcard,#tutor .mcard{padding-top:30px}@keyframes pop{0%{opacity:0;transform:scale(.6)}}.mcard h2{font:700 28px/1.1 var(--disp);color:var(--navy);margin:0}.mcard p{color:var(--dim);font:700 15px/1.5 var(--body);margin:0}.banner{white-space:nowrap;font:700 19px var(--disp);color:#7a4a00;background:linear-gradient(#ffe98f,#ffc23c);border-radius:18px;align-items:center;gap:6px;margin-bottom:4px;padding:8px 22px;display:flex;box-shadow:inset 0 0 0 2.5px #fff,0 4px #e39314,0 8px 16px #e3931452}.banner .pk{width:30px;height:30px}.mrow{gap:10px;width:100%;margin-top:16px;display:flex}.mrow .pill{flex:1}.stars{gap:6px;display:flex}.stars svg{width:30px;height:30px}.stars svg path{fill:#e2f2ff}.stars svg.on path{fill:#ffc23c;stroke:#e59a1a;stroke-width:1.2px}.feed,.rank{width:100%;margin:0;padding:0;list-style:none}.feed li,.rank li{border-bottom:1px dashed var(--line);font:700 14px var(--body);text-align:left;align-items:center;gap:10px;padding:9px 4px;display:flex}.feed li:last-child,.rank li:last-child{border-bottom:0}.feed .lv,.rank .lv{color:#e4572e;flex:none;min-width:56px;font-weight:800}.feed .who,.rank .who{color:var(--navy);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.feed .ink,.rank .ink{color:var(--dim);flex:none;font-weight:800}.rank .pos{width:18px;color:var(--dim);flex:none;font-weight:800}.empty{color:var(--dim);font:700 14px var(--body);text-align:left;padding:10px 4px}.lvpick{align-items:center;gap:10px;display:flex}.lvpick span{font:700 20px/1 var(--disp);text-align:center;min-width:30px}.step{width:44px;height:44px;color:var(--navy);font:800 20px/1 var(--disp);background:#fff;border:0;border-radius:999px;box-shadow:inset 0 0 0 2.5px #9ed6ff,0 4px #bfe3ff}.step:active{transform:translateY(3px);box-shadow:inset 0 0 0 2.5px #9ed6ff,0 1px #bfe3ff}.tutfig{background:#f2f9ff;border-radius:22px;margin:0 0 4px;padding:14px;box-shadow:inset 0 0 0 2px #e2f2ff}.tutfig svg{width:190px;height:108px}.tutdots{justify-content:center;gap:6px;display:flex}.tutdots i{background:var(--line);border-radius:999px;width:7px;height:7px}.tutdots i.on{background:var(--accent);width:20px}