/* Attention exercises share the island's quiet, original cartoon palette. */
.math-learning-note{width:100%;display:flex;flex-direction:column;gap:7px;background:#f4ebf6;border:1px solid #e3d2eb;border-radius:13px;padding:13px 16px;color:#9475a6}.math-learning-note strong{font-size:13px;font-weight:650}.math-learning-note span{font-size:12px;line-height:1.8;color:#a18ba9}.focus-label{background:#e5efdf;border-color:#ccdcbf;color:#8ca477}.focus-badge{align-self:flex-start;display:flex;align-items:center;gap:7px;border:1px solid #d8e2d0;background:#eef3e8;border-radius:10px;padding:7px 11px;color:#88a077;font-size:11px;line-height:1.7}.focus-badge .icon{height:17px;width:17px}.focus-task{width:100%;border:1px solid #e3d9e9;border-radius:14px;background:#f4eef8;padding:15px 17px}.focus-task h3{font-size:17px;line-height:1.6;color:#8d729f}.focus-task p{font-size:12px;line-height:1.9;color:#a18aaa;margin-top:7px}.focus-tools{width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.focus-tools .secondary-button{font-size:11px;min-height:39px;padding:8px 11px}.focus-tools>span{font-size:10px;color:#ad9bb4;margin-left:auto}.focus-pause{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:340px;gap:16px;background:#f0eaf5;border:1px solid #e2d6ed;border-radius:18px;padding:25px;text-align:center;width:100%}.focus-pause>span{width:90px;height:90px;background:#fff6df;border-radius:50%;padding:8px}.focus-pause h3{font-size:21px;color:#9075a3}.focus-pause p{font-size:12px;color:#a089ad;line-height:1.9;max-width:300px}.focus-hint{outline:3px dashed #a78bbe!important;outline-offset:1px}
.spot-scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;width:100%;align-items:start}.spot-scene{background:#f1f3e8;border:1px solid #dbe4d1;border-radius:14px;overflow:hidden;min-width:0}.spot-scene h4{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:11px 10px;margin:0;color:#90a27b;font-size:12px;font-weight:650;line-height:1.6;background:#e9efdd}.spot-scene h4>span{font-size:9px;font-weight:400;color:#a5b18b}.spot-scene:last-child h4{background:#eee3f3;color:#a184af}.spot-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;padding:7px}.spot-cell{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-width:0;border:1px solid #e7e8d7;background:#fff9e9;border-radius:8px;padding:3px;isolation:isolate}.spot-cell .illustration{width:100%;height:100%}.spot-cell.found{border:2px solid #abc895;background:#f0f6d9;opacity:1}.spot-found{position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#a7bb86;color:#fffaf2;font-size:10px;text-align:center;line-height:14px}.spot-cell:hover:not(:disabled){background:#faf1d5}
.memory-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(100%,395px);gap:9px;padding:10px;border:1px solid #dccfe9;border-radius:17px;background:#ebe2f3;aspect-ratio:1}.memory-cell{position:relative;aspect-ratio:1;border:2px solid #e0d3eb;background:#f8f1fc;border-radius:12px;padding:7px;display:flex;align-items:center;justify-content:center;color:#c4b1d5}.memory-cell:disabled{opacity:1}.memory-cell .icon{width:51%;height:51%;fill:#e5d9f0;stroke:#cab6dc;stroke-width:1.5}.memory-cell.lit{background:#f7e5b3;border-color:#d9b970;box-shadow:0 0 0 3px #efce8660}.memory-cell.lit .icon{fill:#ebc977;stroke:#c5a260}.memory-cell.complete{background:#e8f0d9;border-color:#bdd2a1}.memory-cell.complete .icon{fill:#c8d8a9;stroke:#a3b883}.memory-cell>small{position:absolute;left:2px;right:2px;bottom:2px;text-align:center;font-size:10px;color:#b499c3;line-height:1.5}.memory-cell:not(:disabled):hover{background:#eee0f7}
.signal-rule{width:100%;display:flex;gap:13px;align-items:center;background:#edf2e4;border:1px solid #dbe5cf;border-radius:14px;padding:13px 16px}.signal-example{display:inline-flex;width:70px;height:70px;background:#fff9e9;border:1px solid #e4e8d1;border-radius:14px;padding:3px;flex-shrink:0}.signal-rule>div{min-width:0}.signal-rule small{display:block;font-size:10px;color:#a1b187;margin-bottom:5px}.signal-rule strong{display:block;font-size:17px;line-height:1.6;color:#7c9666}.signal-rule p{font-size:11px;line-height:1.8;color:#a2ab89;margin-top:4px}.signal-status{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:11px;color:#a18cab;gap:9px}.signal-stage{position:relative;width:100%;min-height:265px;padding:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;border:1px solid #e3d7e9;border-radius:18px;background:#f7f1f9;text-align:center;overflow:hidden}.signal-stage h3{font-size:19px;line-height:1.6;color:#997ba9}.signal-stage>p{font-size:12px;color:#a38fae;line-height:1.85;max-width:350px}.signal-buddy{width:70px;height:70px;display:inline-flex;background:#fff5df;border-radius:50%;padding:7px}.signal-stimulus{width:166px;height:166px;display:flex;align-items:center;justify-content:center;position:relative}.signal-stimulus .illustration{position:relative;z-index:1;width:100%;height:100%}.signal-stimulus.sized::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:100px;width:100px;border:2px dashed #d2c3df;border-radius:50%}.signal-message{min-height:22px}.signal-window{position:absolute;left:20px;right:20px;bottom:12px;height:5px;background:#e9deef;border-radius:5px;overflow:hidden}.signal-window i{display:block;height:100%;width:100%;background:#c2acd2;transform-origin:left;animation:signal-time var(--signal-duration) linear forwards}.signal-response{min-width:175px;min-height:49px;font-size:16px;gap:9px;background:#91b18b;box-shadow:0 4px 0 #c8d5bd}.signal-response:hover:not(:disabled){background:#82a47b}.signal-response:disabled{opacity:.45}.signal-size-guide{font-size:10px;color:#ac98b6;text-align:center;line-height:1.7}
.firefly-stage{position:relative;width:min(100%,470px);aspect-ratio:600/490;overflow:hidden;border:5px solid #d3cfdf;border-radius:18px;background:#e5e8f0;isolation:isolate}.firefly-moon{position:absolute;top:7%;right:10%;width:10%;aspect-ratio:1;border-radius:50%;background:#f0dfaf}.firefly-moon::after{content:"";position:absolute;inset:-5px -6px 9px 9px;border-radius:50%;background:#e5e8f0}.firefly-hill{position:absolute;left:-10%;right:-10%;bottom:-19%;height:34%;background:#c9d6d3;border-radius:50% 50% 0 0;transform:rotate(-4deg);z-index:-1}.firefly{position:absolute;width:12.5%;aspect-ratio:1;min-width:40px;min-height:40px;transform:translate(-50%,-50%);border:2px solid transparent;background:transparent;border-radius:50%;padding:2px;touch-action:manipulation;transition:none!important}.firefly:disabled{opacity:1}.firefly .illustration{width:100%;height:100%;filter:drop-shadow(0 0 5px #e6cc8660)}.firefly.target{border:3px solid #d6b876;box-shadow:0 0 0 5px #f3dba835;background:#f8eac340}.firefly.selected{border-color:#b99ad0;background:#dac7e830}.firefly>small{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);font:10px system-ui,sans-serif;color:#a399b0}.firefly:active{transform:translate(-50%,-50%)!important}.firefly:focus-visible{outline:3px dashed #b397c6;outline-offset:2px}@keyframes signal-time{to{transform:scaleX(0)}}
@media(max-width:760px){.focus-task{padding:13px 15px}.focus-task h3{font-size:16px}.focus-task p{font-size:11px}.focus-badge{font-size:10px}.focus-tools>span{font-size:9px}.focus-pause{min-height:290px}.spot-scenes{gap:11px}.spot-scene h4{font-size:11px;padding:9px}.signal-rule{padding:11px 13px}.signal-rule strong{font-size:15px}.signal-example{width:58px;height:58px}.signal-stage{min-height:242px;padding:15px}.signal-stage h3{font-size:17px}.signal-stage>p{font-size:11px}.signal-stimulus{height:154px;width:154px}.signal-stimulus.sized::before{width:94px;height:94px}.signal-response{font-size:15px;min-height:47px}.memory-grid{gap:7px;padding:8px}.memory-cell{border-radius:10px}.firefly-stage{border-width:4px}}
@media(max-width:600px){.subject-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.subject-filter{min-height:38px;font-size:12px;gap:8px}.subject-filter[data-subject="focus"]{border-color:#cbdcc1;background:#f0f5e9;color:#8ca279}.subject-filter[data-subject="focus"].active{background:#dfead4;border-color:#aebe9a;color:#799363}.spot-scenes[data-size="4"]{grid-template-columns:1fr;justify-items:center}.spot-scenes[data-size="4"] .spot-scene{width:min(100%,216px)}}
@media(max-width:420px){.math-learning-note{padding:11px 12px}.math-learning-note strong{font-size:12px}.math-learning-note span{font-size:11px}.focus-tools{gap:6px}.focus-tools .secondary-button{padding:7px 9px;font-size:10px;min-height:37px}.focus-badge{padding:6px 9px;font-size:10px}.focus-task h3{font-size:15px}.focus-task p{font-size:11px;line-height:1.8}.spot-scenes{gap:8px}.spot-grid{gap:3px;padding:5px}.spot-cell{padding:2px;border-radius:6px}.spot-scene h4{font-size:10px;padding:8px 6px;flex-wrap:wrap;gap:2px}.spot-scene h4>span{font-size:8px}.memory-grid{gap:6px;padding:7px}.memory-cell{padding:4px}.memory-cell>small{font-size:9px}.signal-rule{gap:10px;padding:10px 12px}.signal-example{height:51px;width:51px}.signal-rule strong{font-size:14px}.signal-rule p{font-size:10px}.signal-status{font-size:10px}.signal-stage{min-height:222px;padding:14px;gap:11px}.signal-stage h3{font-size:16px}.signal-buddy{height:61px;width:61px}.signal-stimulus{width:146px;height:146px}.signal-stimulus.sized::before{width:88px;height:88px}.signal-response{min-width:163px;min-height:45px;font-size:15px}.firefly{min-height:40px;min-width:40px}.firefly.target{border-width:2px;box-shadow:0 0 0 3px #f3dba850}.focus-pause h3{font-size:19px}.focus-pause p{font-size:11px}}

.signal-stimulus.sized::before{z-index:2;pointer-events:none;border-color:#bfaacd}