:root{--navy:#152e52;--blue:#254a7c;--paper:#eef5fa;--yellow:#ffd460;--teal:#85dbcf}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--navy);font-family:'Trebuchet MS',Arial,sans-serif}button,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;border:1px solid #c6d5df;border-radius:12px;padding:12px 18px;background:white;color:var(--navy);font-weight:bold;min-height:46px}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:4px solid #bd7200;outline-offset:4px}button:not(:disabled):hover{filter:brightness(.96)}[hidden]{display:none!important}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4%;border-bottom:1px solid #ccdce7;background:#fff}header a{color:var(--navy);font-weight:bold;text-decoration:none}header span{font-size:14px}header b{font-weight:normal;color:#5b7086}header div{display:flex;gap:8px}header button{font-size:13px;padding:8px 12px}main{max-width:1180px;margin:auto;padding:30px 28px}.intro{display:grid;grid-template-columns:1fr 1.45fr;align-items:center;gap:35px;margin-bottom:24px}.eyebrow{font-size:14px;color:#3b6378;font-weight:bold;margin:0 0 12px}h1{font-size:clamp(34px,4vw,55px);letter-spacing:-2px;line-height:1.02;margin:0 0 15px}h1+p{font-size:17px;line-height:1.5;margin:0;color:#47627a}.factory svg{display:block;width:100%}.machine .window{fill:#294568;transition:fill .4s}.machine.active .window{fill:var(--yellow)}.machine.active .gear{animation:spin 5s linear infinite;transform-box:fill-box;transform-origin:center}.machine.active .lamp{fill:#96f7ce}.workshop{background:white;border:1px solid #cad9e4;border-radius:24px;overflow:hidden;box-shadow:0 12px 0 #dce8f0}.settings{display:flex;align-items:end;gap:16px;padding:22px 28px;background:#f9fcff}.settings label{display:grid;gap:8px;font-size:13px;font-weight:bold;flex:1}select{padding:12px;border:1px solid #b8cddd;border-radius:10px;background:white;color:var(--navy);width:100%;min-height:46px}.primary{background:var(--yellow);border-color:#e8b647;color:#172c46;box-shadow:0 3px 0 #cc9b28}.scorebar{display:flex;justify-content:space-between;align-items:center;padding:15px 28px;border-top:1px solid #e0eaf0;border-bottom:1px solid #e0eaf0;font-size:14px;font-weight:bold}#lights{display:flex;gap:8px}#lights i{width:13px;height:13px;border-radius:50%;background:#d6e2eb}#lights i.on{background:#138576;box-shadow:0 0 0 3px #d4f2ec}.console{text-align:center;padding:22px 26px 28px}#phase{color:#447084;font-size:13px;margin:0 0 9px;font-weight:bold}h2{font-size:clamp(23px,3vw,32px);margin:0 0 10px}#hint{min-height:24px;color:#4b647a;margin:0 auto 18px;max-width:680px;line-height:1.45}#sequence{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;min-height:54px;margin-bottom:22px}.beat{width:45px;height:48px;border:2px solid #d7e2eb;border-radius:10px;display:grid;place-items:center;font-size:20px;font-weight:bold;background:#f0f5f9}.beat.lit{background:var(--yellow);border-color:#bd8500;transform:translateY(-4px)}.beat.right{background:#c8efe5;border-color:#388b75}.beat.wrong{background:#ffdbd7;border-color:#be4f49}#pads{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;max-width:760px;margin:auto}.pad{border:0;border-bottom:6px solid #9eacae;border-radius:20px;padding:15px 10px 12px;display:grid;justify-items:center;gap:4px;background:#a7ded8;color:#152e52;min-height:133px;font-size:18px}.pad:nth-child(2){background:#ffd477;border-color:#d7a34f}.pad:nth-child(3){background:#c7c8f1;border-color:#9396c6}.pad:nth-child(4){background:#d8e7f2;border-color:#a9bfd0}.pad svg{height:55px;width:65px;stroke:var(--navy);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}.pad.lit{transform:translateY(4px);border-bottom-width:2px;box-shadow:0 0 0 5px #18395e}.pad small{font-size:11px;font-weight:normal}.keys{font-size:12px;color:#536b80;margin:15px 0 20px}.actions,#creator,#teacher{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}#result{text-align:center;padding:36px;background:#fff7dc}#result .medal{display:inline-grid;place-items:center;width:90px;height:90px;border:6px double #9e730e;border-radius:50%;background:var(--yellow);font-size:48px}footer{display:flex;align-items:start;flex-wrap:wrap;justify-content:space-between;gap:18px;margin-top:28px;color:#486479;font-size:13px;line-height:1.6}details{max-width:640px}summary{cursor:pointer;font-weight:bold}body.reduced *{animation:none!important;transition:none!important}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:700px){main{padding:22px 14px}header{flex-wrap:wrap;padding:12px 15px}header span{display:none}.intro{gap:16px;grid-template-columns:1fr}.intro>div:first-child{display:block}h1{font-size:36px}h1 br{display:none}h1+p{font-size:15px}.factory{max-width:500px;width:100%;margin:auto}.settings{padding:18px;flex-wrap:wrap}.settings label{flex-basis:40%}.settings>.primary{width:100%}.console{padding:20px 14px}#pads{gap:8px}.pad{font-size:14px;min-height:115px;padding:12px 3px}.pad svg{width:48px;height:46px}.pad small{display:none}.scorebar{padding:14px;font-size:12px}#lights{gap:5px}#lights i{width:10px;height:10px}#sequence{gap:4px}.beat{width:34px;height:40px}.keys{line-height:1.5}}@media print{header,.intro,.settings,.scorebar,.console,footer,#result button{display:none!important}body{background:white}main,.workshop{padding:0;border:0;box-shadow:none}#result{display:block!important;padding:80px 20px;border:8px double #152e52}}

@media(max-width:700px){body.playing .intro>div:first-child{display:none}body.playing .factory{max-width:260px}body.playing main{padding-top:12px}body.playing .intro{margin-bottom:12px}body.playing .console{padding-top:14px}}