:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:#eee;background:#000;margin:0;font-family:system-ui,sans-serif}#app{box-sizing:border-box;flex-direction:column;align-items:center;gap:28px;min-height:100vh;padding:40px;display:flex}h1{letter-spacing:.05em;margin:0;font-size:3rem}.controls{align-items:center;gap:40px;font-size:1.3rem;display:flex}.settings-btn{width:auto;min-width:auto;padding:10px 18px;font-size:1.1rem}.controls label{align-items:center;gap:12px;display:flex}select,button{color:#eee;cursor:pointer;background:#1a1a1a;border:1px solid #444;border-radius:10px;padding:10px 18px;font-size:1.2rem}button.primary{background:#2e86c1;border-color:#2e86c1}.grid{grid-template-columns:repeat(4,1fr);gap:16px;width:min(900px,90vw);display:grid}.level{flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:96px;display:flex}.level:disabled{opacity:.35;cursor:default}.level .num{font-size:1.6rem;font-weight:700}.level .stars{color:#f1c40f;min-height:1.2em}.hint{color:#888;font-size:1rem}.hint a{color:#4aa3df}.tips{color:#aaa;margin:0;font-size:1.1rem;line-height:1.5}.palette-row{margin-top:34px}.palette-row a{color:#4aa3df}canvas{position:fixed;inset:0 auto auto 0}#overlay{text-align:center;pointer-events:none;flex-direction:column;justify-content:space-between;align-items:center;padding:5vh 0 6vh;font-size:1.5rem;display:flex;position:fixed;inset:0}.overlay-group{pointer-events:auto;flex-direction:column;align-items:center;gap:18px;margin:0 20px;display:flex}.overlay-group.center{margin:auto 20px}.overlay-group.bottom{margin-top:auto;margin-bottom:40px}#overlay[hidden]{display:none}.overlay-close{color:#888;cursor:pointer;z-index:101;pointer-events:auto;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;padding:0;font-size:2.5rem;transition:color .2s;display:flex;position:fixed;top:20px;right:20px}.overlay-close:hover{color:#eee}.icon-btn{width:auto;min-width:auto;padding:8px 12px}.floating-menu{z-index:100;background:#1a1a1a;border:1px solid #444;border-radius:12px;max-height:80vh;padding:0;position:fixed;top:20px;right:20px;overflow-y:auto;box-shadow:0 8px 32px #00000080}.floating-menu[hidden]{display:none}.close-btn{color:#888;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:1.8rem;transition:color .2s;display:flex;position:absolute;top:8px;right:8px}.close-btn:hover{color:#eee}.menu-content{padding:40px 20px 16px}.settings-columns{grid-template-columns:repeat(4,1fr);gap:20px;display:grid}.settings-column{flex-direction:column;gap:10px;display:flex}.settings-column h4{color:#bbb;text-transform:capitalize;margin:0;font-size:.95rem}.option-group{flex-direction:column;gap:6px;display:flex}.option-btn{text-align:left;color:#aaa;cursor:pointer;white-space:nowrap;background:#0a0a0a;border:1px solid #333;border-radius:6px;padding:8px 12px;font-size:.95rem;transition:all .2s}.option-btn:hover{color:#eee;background:#2a2a2a}.option-btn[data-active]{color:#fff;background:#2e86c1;border-color:#2e86c1}.exercise-preview{flex-direction:column;justify-content:space-between;align-items:center;padding:40px 20px;display:flex;position:fixed;inset:0;overflow-y:auto}.preview-section{text-align:center;pointer-events:auto;flex-direction:column;align-items:center;gap:16px;max-width:600px;display:flex}.preview-section h3{margin:0;font-size:1.8rem}.preview-image-container{pointer-events:auto;flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.preview-canvas{width:auto;max-width:90vw;height:auto;max-height:50vh;image-rendering:pixelated;display:block}.exercise-overlay{z-index:50;pointer-events:auto;background:0 0;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.exercise-overlay[hidden]{display:none}.exercise-overlay button{pointer-events:auto}