.chain-display{justify-content:center;align-items:center;width:100%;min-height:120px;display:flex;overflow:hidden}.chain-expression{align-items:center;gap:12px;font-size:48px;font-weight:800;display:flex}.chain-number{color:#2d3436}.chain-op{color:#6c5ce7;font-size:42px}.chain-operand{color:#2d3436}.chain-equals{color:#b2bec3}.chain-answer{color:#e17055;font-size:52px;animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.chain-expression-easy{justify-content:center;align-items:center;gap:12px;display:flex}.pip-card{background:#fff;border:2px solid #d0d0d0;border-radius:10px;flex-direction:column;width:110px;height:154px;display:flex;position:relative;box-shadow:0 2px 6px #0000001f}.pip-corner{flex-direction:column;align-items:center;padding:4px 6px;line-height:1;display:flex;position:absolute}.pip-corner-top{top:0;left:0}.pip-corner-bottom{bottom:0;right:0;transform:rotate(180deg)}.pip-corner-number{color:#636e72;border:1.5px solid #d0d0d0;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:13px;font-weight:800;display:flex}.pip-body{flex:1;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(3,1fr);place-items:center;padding:32px 18px;display:grid}.pip{font-size:18px;line-height:1}.easy-op{color:#6c5ce7;font-size:30px;font-weight:800}.easy-question{color:#e17055;font-size:38px;font-weight:800;animation:1s ease-in-out infinite pulse}.fraction{align-items:center;gap:8px;display:inline-flex}.fraction-whole{font-size:44px;line-height:1}.fraction-stack{flex-direction:column;align-items:center;line-height:1;display:inline-flex}.fraction-num,.fraction-den{padding:2px 6px;font-size:32px}.fraction-bar{background:#2d3436;border-radius:2px;width:100%;min-width:32px;height:3px}.fraction-display{justify-content:center;align-items:center;width:100%;min-height:140px;display:flex}.fraction-expression{color:#2d3436;align-items:center;gap:16px;font-size:36px;font-weight:800;display:flex}.fraction-op{color:#6c5ce7;font-size:36px}.frac-input{background:#fff;border-radius:14px;align-items:center;gap:18px;min-height:96px;padding:12px 28px;display:flex;box-shadow:0 2px 8px #0000001a}.frac-input-stack{flex-direction:column;align-items:center;gap:4px;display:inline-flex}.frac-input-bar{background:#2d3436;border-radius:2px;width:100%;min-width:48px;height:3px}.frac-slot{color:#b2bec3;cursor:pointer;-webkit-tap-highlight-color:transparent;border:2px dashed #dfe6e9;border-radius:8px;justify-content:center;align-items:center;min-width:48px;min-height:44px;padding:4px 6px;font-family:inherit;font-size:32px;font-weight:800;line-height:1;transition:border-color .15s,background .15s,color .15s;display:inline-flex}.frac-slot:disabled{cursor:default}.frac-slot-active{background:#f0edff;border-style:solid;border-color:#6c5ce7}.frac-slot-filled{color:#2d3436;border-style:solid;border-color:#dfe6e9}.frac-slot-active.frac-slot-filled{border-color:#6c5ce7}.frac-slot-disabled{color:#d0d5d8;opacity:.55;background:0 0;border-style:dashed;border-color:#e5e8ea}.pad-frozen .frac-slot{color:#6c5ce7;border-color:#6c5ce7}.recall-timer-bar{transform-origin:0;background:linear-gradient(90deg,#6c5ce7,#a29bfe);border-radius:4px;width:80%;height:6px}.recall-display{justify-content:center;align-items:center;width:100%;min-height:160px;display:flex}.recall-row{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:360px;display:flex;container-type:inline-size}.recall-items{justify-content:center;align-items:center;gap:clamp(4px, calc(16cqw / var(--recall-count)), 18px);display:flex}.recall-item{font-size:clamp(24px, calc(100cqw / var(--recall-count)), 64px);color:#2d3436;font-weight:900;line-height:1}.recall-footer{justify-content:center;align-items:center;width:100%;height:56px;display:flex}.recall-slots{grid-template-columns:repeat(var(--recall-count), minmax(0, 1fr));width:100%;max-width:calc(var(--recall-count) * 58px - 10px);justify-content:center;gap:clamp(4px,1.8cqw,10px);display:grid}.recall-slot{width:100%;min-width:0;height:56px;font-size:clamp(20px, calc(75cqw / var(--recall-count)), 32px);color:#2d3436;background:#ffffffb3;border:2px dashed #b2bec3;border-radius:8px;justify-content:center;align-items:center;font-weight:800;transition:border-color .15s,background .15s;display:inline-flex}.recall-slot-active{background:#f0edff;border-style:solid;border-color:#6c5ce7}.recall-slot-filled{border-style:solid;border-color:#dfe6e9}.recall-slot-active.recall-slot-filled{border-color:#6c5ce7}.pattern-round{flex-direction:column;align-items:center;gap:18px;width:100%;max-width:340px;display:flex}.pattern-board{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffffbf;border-radius:24px;width:100%;position:relative;box-shadow:0 4px 14px #00000014}.pattern-lines{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.pattern-line{stroke-linecap:round;stroke-linejoin:round;stroke-width:6px}.pattern-line-shown{stroke:#6c5ce7;opacity:.55}.pattern-line-picked{stroke:#00b894;opacity:.85}.pattern-line-drag{stroke:#00b894;opacity:.45}.pattern-grid{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);place-items:center;padding:6%;display:grid;position:absolute;inset:0}.pattern-node{aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;background:#fff;border:3px solid #b2bec3;border-radius:50%;justify-content:center;align-items:center;width:46%;padding:0;transition:transform .12s,border-color .15s,background .15s;display:flex}.pattern-node:disabled{cursor:default}.pattern-node-shown{background:#f0edff;border-color:#6c5ce7}.pattern-node-picked{background:#d8f5ee;border-color:#00b894;transform:scale(1.08)}.pattern-node-order{color:#2d3436;font-size:20px;font-weight:800;line-height:1}.pattern-footer{justify-content:center;align-items:center;width:100%;height:48px;display:flex}.pattern-clear-btn{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#636e72;border:none;border-radius:14px;width:84px;height:48px;font-size:20px;font-weight:700;box-shadow:0 4px #4a4f52}.pattern-clear-btn:disabled{opacity:.5;cursor:default}.vocab-round{flex-direction:column;align-items:center;gap:28px;width:100%;max-width:420px;display:flex}.vocab-emoji{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;margin-top:12px;padding:0;font-family:inherit;font-size:140px;line-height:1;display:inline-flex;position:relative}.vocab-emoji:active{transform:scale(.96)}.vocab-speaker{opacity:.4;font-size:22px;position:absolute;bottom:10px;right:14px}.spell-round{justify-items:center;gap:18px;padding:8px 0 4px;display:grid}.spell-picture{cursor:pointer;background:0 0;border:none;padding:4px 14px;font-size:clamp(64px,19vw,96px);line-height:1;position:relative}.spell-speaker{inset-inline-end:-2px;opacity:.55;pointer-events:none;font-size:22px;position:absolute;bottom:2px}.spell-slots{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.spell-slot{touch-action:none;border-radius:14px;place-items:center;width:clamp(46px,13vw,62px);height:clamp(54px,15vw,70px);font:800 clamp(26px,7vw,34px) Andika,sans-serif;transition:background .15s,border-color .15s;display:grid}.spell-empty{color:#0000;background:#f7f2fb;border:3px dashed #cabade}.spell-full{color:#4b3a66;cursor:grab;background:linear-gradient(#fff,#f1e9fa);border:3px solid #b79ddb;box-shadow:0 3px #cdbbe6}.spell-wrong .spell-full{color:#a8584f;background:linear-gradient(#fff,#fdeeec);border-color:#e0938a;box-shadow:0 3px #efc3bd}.spell-tray{background:#f4f7f8;border-radius:18px;flex-wrap:wrap;justify-content:center;gap:9px;min-height:clamp(54px,15vw,70px);padding:10px;display:flex}.spell-tile{color:#34546c;touch-action:none;cursor:grab;background:linear-gradient(#fff,#edf6f6);border:2px solid #d6e4e9;border-radius:14px;place-items:center;width:clamp(46px,13vw,62px);height:clamp(54px,15vw,70px);font:800 clamp(26px,7vw,34px) Andika,sans-serif;display:grid;box-shadow:0 4px #bdcfd7}.spell-used{visibility:hidden}.spell-ghost{z-index:50;color:#4b3a66;pointer-events:none;background:linear-gradient(#fff,#f1e9fa);border:3px solid #9472b8;border-radius:14px;place-items:center;width:clamp(46px,13vw,62px);height:clamp(54px,15vw,70px);font:800 clamp(26px,7vw,34px) Andika,sans-serif;display:grid;position:fixed;translate:-50% -50%;box-shadow:0 8px 18px #4b3a6633}@media (prefers-reduced-motion:reduce){.spell-slot{transition:none}}.fives-round{justify-items:center;gap:20px;padding:10px 0 4px;display:grid}.fives-target{color:#34546c;text-shadow:0 3px #d6e4e9;margin:0;font:800 clamp(52px,16vw,78px)/1 Andika,sans-serif}.fives-options{grid-template-columns:1fr;gap:12px;width:100%;display:grid}.fives-options button{background:#fcfdfe;border:2px solid #e4edf2;border-radius:20px;justify-content:flex-start;align-items:center;padding:14px 12px;transition:border-color .15s,box-shadow .15s;display:flex;box-shadow:0 3px #e4edf2}.fives-right{border-color:#9ad9bb;box-shadow:0 3px #c4e9d6}.fives-retry{border-color:#ecb3ab;box-shadow:0 3px #f6d6d1}.fives-bar{align-items:center;gap:3px;display:flex}.fives-bar i{background:radial-gradient(circle at 34% 28%,#7fb4de,#4580b0 72%);border-radius:50%;width:clamp(11px,3.4vw,18px);height:clamp(11px,3.4vw,18px);display:block;box-shadow:0 1px 2px #2f5f8726}.fives-bar i.fives-over{background:radial-gradient(circle at 34% 28%,#f3b96a,#d98a2c 72%);box-shadow:0 1px 2px #a9651726}.fives-bar b{background:#cedbe4;border-radius:1px;width:2px;height:clamp(8px,2.4vw,11px);margin:0 2px;display:block}@media (prefers-reduced-motion:reduce){.fives-options button{transition:none}}.letter-pad{--key-gap:5px;--key-width:calc((100% - 9 * var(--key-gap)) / 10);box-sizing:border-box;flex-direction:column;gap:6px;width:100%;max-width:460px;padding:6px 3px 8px;display:flex}.letter-row{justify-content:center;gap:var(--key-gap);width:100%;min-width:0;display:flex}.letter-btn{flex:0 0 var(--key-width);color:#1c1c1e;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:none;border-radius:6px;min-width:0;height:clamp(38px,6vh,50px);font-size:clamp(16px,2.4vh,21px);font-weight:500;box-shadow:0 1px #0000004d}.letter-btn:active:not(:disabled){background:#d1d5db}.letter-btn:disabled{opacity:.5}.letter-btn-delete{background:#adb3bd;font-size:clamp(14px,2.1vh,18px)}.writing-prompt{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;transition:transform .12s;display:flex}.writing-emoji{font-size:clamp(40px,9vh,64px);line-height:1}.writing-word{color:#2d3436;letter-spacing:2px;font-size:clamp(28px,5vh,40px);font-weight:900}.writing-slots{gap:8px;display:flex}.writing-slot{color:#6c5ce7;background:#ffffffb3;border-radius:12px;justify-content:center;align-items:center;width:clamp(34px,8vw,44px);height:clamp(42px,9vw,54px);font-size:clamp(22px,4.4vh,30px);font-weight:900;display:inline-flex;box-shadow:inset 0 -3px #dfe6e9}.writing-slot-filled{background:#f0edff;box-shadow:inset 0 -3px #6c5ce7}.writing-keyboard{justify-content:center;width:100%;display:flex}.writing-prompt:active{transform:scale(.97)}.writing-speaker{opacity:.4;font-size:18px}.composite-stage{justify-content:center;align-items:center;width:100%;max-width:560px;height:clamp(150px,26vh,280px);display:flex}.composite-svg{width:100%;height:100%;display:block}.composite-fill{fill:#a29bfe}.composite-cell{fill:none;stroke:#ffffffe6;stroke-width:1.5px}.composite-edge{stroke:#2d3436;stroke-width:2.5px;stroke-linecap:square}.composite-label{fill:#2d3436;font-family:inherit;font-size:16px;font-weight:800}.composite-edge.axis-horizontal,.composite-edge.axis-vertical{stroke-width:3.5px}.composite-edge.axis-horizontal{stroke:#e17055}.composite-edge.axis-vertical{stroke:#00b894}.composite-label.axis-horizontal,.composite-sum.axis-horizontal{fill:#c0442d}.composite-label.axis-vertical,.composite-sum.axis-vertical{fill:#00806a}.composite-label,.composite-sum{paint-order:stroke fill;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}.composite-sum{font-family:inherit;font-size:26px;font-weight:900}.composite-round{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.composite-prompt{color:#2d3436;letter-spacing:.5px;font-size:22px;font-weight:800}.composite-header{justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.composite-hint-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffffe6;border:none;border-radius:14px;width:36px;height:36px;font-size:18px;box-shadow:0 3px #00000014}.composite-hint-btn:disabled{opacity:.45;box-shadow:none}.composite-hint-btn{position:relative}.composite-hint-left{color:#fff;background:#6c5ce7;border-radius:999px;min-width:17px;height:17px;padding:0 4px;font-size:11px;font-weight:800;line-height:17px;position:absolute;top:-5px;right:-5px}.composite-hint-btn:disabled .composite-hint-left{background:#b2bec3}.simplify-display{flex-direction:column;align-items:center;gap:12px;width:100%;min-height:140px;display:flex}.simplify-prompt{color:#636e72;text-transform:uppercase;letter-spacing:1px;margin:0;font-size:16px;font-weight:700}.simplify-fraction{color:#2d3436;font-size:36px;font-weight:800}.knowledge-round{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:520px;padding:0 8px;display:flex}.knowledge-scroll{border-radius:18px;flex-direction:column;align-items:center;gap:16px;width:100%;max-height:min(72vh,640px);padding-bottom:8px;display:flex;overflow-y:auto}.knowledge-article{box-sizing:border-box;background:#ffffffbf;border-radius:18px;flex-direction:column;gap:14px;width:100%;padding:22px 26px;display:flex}.knowledge-title{color:#2d3436;margin:0;font-size:30px;font-weight:900}.knowledge-image{object-fit:cover;border-radius:12px;width:100%;max-height:220px}.knowledge-paragraph{color:#2d3436;margin:0;font-size:22px;font-weight:500;line-height:1.65}.knowledge-done-btn{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:16px;padding:14px 36px;font-size:20px;font-weight:800;box-shadow:0 5px #4a3db8}.knowledge-done-btn:active{transform:translateY(3px);box-shadow:0 2px #4a3db8}.knowledge-question{color:#2d3436;text-align:center;margin:0;font-size:24px;font-weight:800}.kw-word{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:5px;margin:0;padding:0 1px;text-decoration:none;transition:background .12s}.kw-word:active,.kw-word-open{background:#e9e4ff}.kw-pop{color:#fff;white-space:nowrap;z-index:1000;pointer-events:none;background:#2d3436;border-radius:12px;padding:7px 14px;font-size:21px;font-weight:700;position:fixed;transform:translate(-50%,calc(-100% - 12px));box-shadow:0 6px 18px #00000047}.kw-pop.kw-pop-below{transform:translate(-50%,12px)}.kw-pop:after{content:"";border:7px solid #0000;border-top-color:#2d3436;position:absolute;top:100%;left:50%;transform:translate(-50%)}.kw-pop.kw-pop-below:after{border-top-color:#0000;border-bottom-color:#2d3436;top:auto;bottom:100%}.number-name{flex-direction:column;align-items:center;gap:14px;display:flex}.number-name-word{color:#2d3436;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffffe6;border:none;border-radius:18px;align-items:center;gap:10px;padding:10px 22px;font-family:inherit;font-size:clamp(38px,8vh,54px);font-weight:900;transition:transform .12s;display:inline-flex;box-shadow:0 4px #0000000f}.number-name-word:active{transform:translateY(2px)}.number-name-speaker{opacity:.45;font-size:.42em}.number-name-card{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0;transition:transform .12s}.number-name-card:active{transform:scale(.96)}@media (height<=700px){.number-name{gap:8px}.number-name-word{padding:6px 18px;font-size:clamp(30px,6vh,42px)}}.first-letter-round{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:420px;display:flex}.first-letter-picture{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:clamp(72px,15vh,108px);line-height:1;display:inline-flex;position:relative}.first-letter-picture:active{transform:scale(.96)}.first-letter-speaker{opacity:.4;font-size:20px;position:absolute;bottom:8px;right:12px}.first-letter-word{color:#636e72;align-items:baseline;gap:2px;margin:0;font-size:clamp(30px,5.5vh,40px);font-weight:800;display:flex}.first-letter-lead{color:#6c5ce7;font-size:1.7em;font-weight:900}.option-list-letters{flex-direction:row;gap:10px}.option-list-letters .option-item{flex:1;padding:14px 0;font-size:clamp(38px,7vh,52px);font-weight:900}.listen-round{flex-direction:column;align-items:center;gap:22px;padding:10px;display:flex}.listen-picture{-webkit-user-select:none;user-select:none;font-size:96px;line-height:1}.listen-letter{color:#2d3436;-webkit-user-select:none;user-select:none;align-items:baseline;gap:6px;font-size:92px;font-weight:900;line-height:1;display:flex}.listen-letter-small{color:#6c5ce7;font-size:56px}.listen-prompt{background:0 0;border:none;justify-content:center;align-items:center;padding:6px;font-family:inherit;display:inline-flex;position:relative}.listen-prompt-speaks{cursor:pointer;border-radius:20px}.listen-prompt-speaks:disabled{cursor:default}.listen-question-mark{background:#fff;width:120px;height:120px;box-shadow:0 4px #00000014}.listen-question-mark .listen-letter{color:#6c5ce7}.listen-round-digits .listen-option{justify-content:center;min-height:84px;font-size:40px}.listen-prompt-speaker{opacity:.4;font-size:20px;line-height:1;animation:1.3s ease-in-out 2 listen-hint;position:absolute;bottom:4px;right:4px}@keyframes listen-hint{0%,to{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.22)}}@media (prefers-reduced-motion:reduce){.listen-prompt-speaker{animation:none}}.listen-veiled{filter:blur(16px);opacity:.55;-webkit-user-select:none;user-select:none;pointer-events:none}.listen-options{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.listen-option{color:#2d3436;cursor:pointer;background:#fff;border:3px solid #0000;border-radius:16px;flex-direction:column;align-items:center;gap:4px;min-width:104px;padding:14px 18px;font-family:inherit;font-size:22px;font-weight:800;display:flex;box-shadow:0 3px #00000014}.listen-option-speaker{font-size:26px;line-height:1}.listen-option-word{line-height:1.1}.listen-option-chosen{background:#f0edff;border-color:#6c5ce7}.listen-option:disabled{opacity:.6;cursor:default}.listen-submit{color:#fff;cursor:pointer;background:#00b894;border:none;border-radius:16px;min-width:96px;padding:12px 26px;font-family:inherit;font-size:28px;font-weight:900;box-shadow:0 4px #009472}.listen-submit:disabled{color:#fff;cursor:default;background:#dfe6e9;box-shadow:0 4px #c7cfd2}@media (width<=480px){.listen-picture{font-size:76px}.listen-letter{font-size:70px}.listen-letter-small{font-size:44px}.listen-option{min-width:88px;padding:12px 14px;font-size:19px}}.ear-round{flex-direction:column;align-items:center;gap:22px;width:100%;max-width:420px;display:flex}.ear-prompt{color:#2d3436;text-align:center;margin:0;font-size:20px;font-weight:800}.ear-play{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:148px;height:148px;font-family:inherit;display:inline-flex;box-shadow:0 6px #4a3db8}.ear-play:active{transform:translateY(3px);box-shadow:0 3px #4a3db8}.ear-play-icon{margin-left:6px;font-size:46px;line-height:1}.ear-play-label{letter-spacing:.04em;text-transform:uppercase;opacity:.9;font-size:15px;font-weight:800}.option-list-wide{flex-direction:row;gap:10px}.option-list-wide .option-item{flex:1;padding:18px 8px}@media (height<=700px){.ear-round{gap:14px}.ear-play{width:112px;height:112px}.ear-play-icon{font-size:34px}}.staff{justify-content:center;align-items:center;width:100%;min-height:150px;display:flex}.staff-canvas svg{max-width:100%;height:auto;display:block}.staff-failed{color:#636e72;margin:0;font-size:14px}.staff-round{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:420px;display:flex}.staff-sound{cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffffe6;border:none;border-radius:18px;width:100%;padding:8px 4px;font-family:inherit;display:block;position:relative;box-shadow:0 4px #0000000f}.staff-sound:active{transform:translateY(2px)}.staff-sound-hint{opacity:.4;font-size:22px;position:absolute;bottom:10px;right:12px}.staff-options{gap:10px;width:100%;display:flex}.staff-option{color:#2d3436;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:none;border-radius:16px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:12px 4px 10px;font-family:inherit;transition:transform .1s,box-shadow .1s;display:flex;box-shadow:0 4px #b2bec3}.staff-option:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #b2bec3}.staff-option:disabled{opacity:.65;cursor:default}.staff-option-picked{background:#f0edff;box-shadow:0 4px #4a3db8}.staff-option-solfege{font-size:26px;font-weight:900}.staff-option-letter{color:#636e72;font-size:13px;font-weight:700}.piano{background:#2d3436;border-radius:12px;width:100%;max-width:420px;height:148px;padding:8px 8px 0;display:flex;box-shadow:0 5px #00000040}.piano-slot{flex:1;display:flex;position:relative}.piano-key{color:#b2bec3;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fdfdfd;border:none;border-radius:0 0 7px 7px;flex:1;justify-content:center;align-items:flex-end;margin:0 1px;padding-bottom:8px;font-family:inherit;font-size:15px;font-weight:800;display:flex;box-shadow:inset 0 -4px #dfe6e9}.piano-key:active:not(:disabled),.piano-key-lit{color:#6c5ce7;background:#f0edff;box-shadow:inset 0 -2px #a29bfe}.piano-key:disabled{cursor:default}.piano-black{z-index:2;pointer-events:none;background:linear-gradient(#3d4548,#16191a);border-radius:0 0 5px 5px;width:26%;height:62%;position:absolute;top:0;right:-13%}@media (height<=700px){.piano{height:118px}}.piano-round{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:440px;display:flex}.piano-prompt{cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffffe6;border:none;border-radius:18px;width:100%;padding:8px 4px;font-family:inherit;display:block;position:relative;box-shadow:0 4px #0000000f}.piano-prompt:active{transform:translateY(2px)}.piano-prompt-hint{opacity:.4;font-size:22px;position:absolute;bottom:10px;right:12px}.echo-round{flex-direction:column;align-items:center;gap:14px;width:100%;max-width:440px;display:flex}.echo-listen{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:999px;align-items:center;gap:10px;padding:14px 28px;font-family:inherit;font-size:19px;font-weight:800;display:inline-flex;box-shadow:0 5px #4a3db8}.echo-listen:active{transform:translateY(3px);box-shadow:0 2px #4a3db8}.echo-listen-icon{font-size:20px}.echo-progress{gap:10px;display:flex}.echo-dot{background:#ffffffd9;border-radius:50%;width:15px;height:15px;box-shadow:inset 0 0 0 2px #dfe6e9}.echo-dot-done{box-shadow:none;background:#6c5ce7}.echo-ask{letter-spacing:.06em;text-transform:uppercase;color:#636e72;margin:0;font-size:15px;font-weight:700}.echo-clear{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#b2bec3;border:none;border-radius:14px;width:62px;padding:12px 0;font-family:inherit;font-size:20px;font-weight:900;box-shadow:0 4px #8d9598}.echo-clear:disabled{opacity:.45;cursor:default}@media (height<=700px){.echo-round{gap:10px}}.value-round{flex-direction:column;align-items:center;gap:18px;width:100%;max-width:420px;display:flex}.value-staff{background:#ffffffe6;border-radius:18px;width:100%;padding:8px 4px;box-shadow:0 4px #0000000f}.value-options{gap:12px;width:100%;display:flex}.value-option{color:#2d3436;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:none;border-radius:18px;flex:1;justify-content:center;align-items:center;padding:20px 6px;font-family:inherit;font-size:30px;font-weight:900;display:flex;box-shadow:0 4px #b2bec3}.value-option:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #b2bec3}.value-option:disabled{opacity:.65;cursor:default}.value-option-picked{color:#6c5ce7;background:#f0edff;box-shadow:0 4px #4a3db8}.value-beats{grid-template-columns:repeat(2,auto);justify-content:center;gap:6px;display:grid}.value-beat{background:#2d3436;border-radius:50%;width:14px;height:14px}.value-option-picked .value-beat{background:#6c5ce7}.cube-stage{perspective:900px;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffff8c;border-radius:20px;justify-content:center;align-items:center;width:100%;height:clamp(190px,34vh,260px);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #2d34360d}.cube-stage-turning{cursor:grabbing}.cube-world{transform-style:preserve-3d;position:relative}.cube{width:34px;height:34px;transform-style:preserve-3d;margin:-17px 0 0 -17px;position:absolute}.cube-face{backface-visibility:hidden;border:1px solid #2d343638;border-radius:3px;position:absolute;inset:0}.cube-face-top{background:#a29bfe;transform:rotateX(90deg)translateZ(17px)}.cube-face-bottom{background:#4a3db8;transform:rotateX(-90deg)translateZ(17px)}.cube-face-front{background:#7d6ef0;transform:translateZ(17px)}.cube-face-back{background:#5b4bd6;transform:rotateY(180deg)translateZ(17px)}.cube-face-right{background:#6c5ce7;transform:rotateY(90deg)translateZ(17px)}.cube-face-left{background:#5a4ad1;transform:rotateY(-90deg)translateZ(17px)}.cube-zoom{flex-direction:column;gap:6px;display:flex;position:absolute;bottom:8px;right:8px}.cube-zoom-btn{color:#6c5ce7;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffffeb;border:none;border-radius:12px;width:38px;height:38px;font-family:inherit;font-size:22px;font-weight:900;line-height:1;box-shadow:0 2px #0000001a}.cube-zoom-btn:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.cube-zoom-btn:disabled{opacity:.35;cursor:default}@media (height<=700px){.cube-stage{height:clamp(150px,26vh,200px)}}.volume-round{flex-direction:column;align-items:center;gap:14px;width:100%;max-width:440px;display:flex}.equation-round{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:440px;display:flex}.equation{color:#2d3436;font-variant-numeric:tabular-nums;align-items:baseline;gap:10px;margin:0;font-size:clamp(34px,7vh,46px);font-weight:900;display:flex}.equation-equals{color:#b2bec3}.equation-x{color:#6c5ce7;font-style:italic}