*{box-sizing:border-box}body{margin:0;background:#111228;color:#f5f0ff;font:14px Outfit,sans-serif}main{height:min(100dvh,980px);min-height:640px;max-width:1300px;margin:auto;padding:17px 24px;display:flex;flex-direction:column}button,select{font:inherit;color:inherit;background:#252540;border:1px solid #4c4968;border-radius:12px;padding:10px 16px;cursor:pointer}button:hover{background:#40365e}button:disabled{opacity:.5}button:focus-visible,select:focus-visible{outline:3px solid #44f0d1;outline-offset:2px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px}small{font-size:9px;letter-spacing:2px;color:#b3abd0}h1{font-size:30px;margin:3px 0;letter-spacing:-1px}h1 span{font-size:10px;letter-spacing:2px;color:#9bf5dc;margin-left:12px}nav{display:flex;align-items:center;gap:38px;border-top:1px solid #36334f;padding:11px 0}nav div{display:grid;gap:4px}nav b{font-size:19px}select{margin-left:auto}.stage{flex:1;min-height:240px;position:relative;overflow:hidden;border:1px solid #443759;border-radius:24px;background:radial-gradient(ellipse at top,#422967,#15182d)}canvas{display:block;width:100%;height:100%;touch-action:none}.status{position:absolute;left:18px;top:16px}h2{font-size:25px;margin:6px 0;color:#f5d4ab}.stage-label{position:absolute;right:18px;bottom:16px;font-size:9px;letter-spacing:3px;color:#ac9ebb}#progress{position:absolute;left:18px;bottom:16px;display:flex;gap:5px}#progress i{width:8px;height:8px;border-radius:50%;background:#59516d}#progress i.done{background:#55e9c9}.controls{padding-top:10px}#sequence{display:flex;justify-content:center;gap:5px;min-height:27px}#sequence span{display:inline-grid;place-items:center;background:#2b2742;border-radius:6px;width:25px;height:25px;color:#d2b6f1}#sequence.hidden span{color:transparent}#sequence span.lit{background:#5af2c7;color:#142831}#sequence span.correct{background:#4f6771;color:#77f2d5}.directions{display:flex;justify-content:center;gap:12px;margin:8px 0}.directions button{width:82px;height:64px;font-size:26px;font-weight:bold;background:#2c2946;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:4px}.directions button span{font-size:8px;letter-spacing:2px}.directions button.active{background:#42d6bc;color:#151d34;transform:translateY(-3px)}.bar{display:flex;justify-content:center;gap:12px}.bar button{font-size:12px}#start{min-width:180px;background:#c5a2ed;color:#201534;font-weight:800}p{font-size:11px;text-align:center;color:#aaa1c2;margin:10px auto 0;max-width:760px;line-height:1.5}@media(max-width:650px){main{padding:13px;min-height:700px;height:min(100dvh,980px)}h1{font-size:25px}h1 span{display:block;margin:2px 0;font-size:9px}header>button{font-size:11px;padding:9px}nav{gap:19px}nav b{font-size:17px}nav select{font-size:11px;padding:8px}.stage{min-height:250px}.directions{gap:8px}.directions button{width:65px;height:60px}.bar{gap:7px}.bar button{padding:10px 9px;font-size:10px}#start{min-width:125px}.status h2{font-size:21px}.stage-label{font-size:7px;letter-spacing:2px;right:12px}}