.midi-player{max-width:600px;margin:2rem auto;padding:2rem;background:var(--color-bg-dark);border:3px solid var(--color-cyan)}.midi-player-header{text-align:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px dashed var(--color-yellow)}.midi-player-header h3{font-size:1.5rem;margin:0;animation:blink 1.5s infinite}.midi-error{background:#f003;border:2px solid #ff0000;padding:1rem;margin-bottom:1rem;text-align:center;color:#ff6b6b;font-weight:700}.midi-loading{text-align:center;padding:2rem;color:var(--color-cyan);font-size:1.2rem;animation:pulse 1.5s infinite}.midi-controls{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem}.midi-button{padding:.75rem 1.5rem;font-size:1.1rem;font-weight:700;border:3px solid;cursor:pointer;transition:all .2s;font-family:Comic Sans MS;text-transform:uppercase}.play-button{background:var(--color-green);color:var(--color-bg-dark);border-color:var(--color-yellow)}.play-button:hover:not(:disabled){background:var(--color-yellow);transform:scale(1.05);box-shadow:0 0 20px var(--color-yellow)}.stop-button{background:var(--color-magenta);color:#fff;border-color:var(--color-cyan)}.stop-button:hover:not(:disabled){background:var(--color-cyan);transform:scale(1.05);box-shadow:0 0 20px var(--color-cyan)}.midi-button:disabled{opacity:.5;cursor:not-allowed}.midi-progress{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1rem;background:var(--color-bg-darker);border:2px solid var(--color-yellow)}.time-display{font-family:Courier New,monospace;font-size:1.1rem;color:var(--color-cyan);font-weight:700;min-width:50px;text-align:center}.progress-slider{flex:1;height:8px;-webkit-appearance:none;appearance:none;background:var(--color-bg-dark);border:2px solid var(--color-cyan);outline:none;cursor:pointer}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--color-yellow);border:2px solid var(--color-cyan);cursor:pointer;transition:all .2s}.progress-slider::-webkit-slider-thumb:hover{background:var(--color-cyan);transform:scale(1.2)}.progress-slider::-moz-range-thumb{width:20px;height:20px;background:var(--color-yellow);border:2px solid var(--color-cyan);cursor:pointer;transition:all .2s}.progress-slider::-moz-range-thumb:hover{background:var(--color-cyan);transform:scale(1.2)}.midi-volume{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--color-bg-darker);border:2px solid var(--color-magenta)}.volume-label{font-weight:700;color:var(--color-magenta);font-size:1.1rem}.volume-slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--color-bg-dark);border:2px solid var(--color-magenta);outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--color-magenta);border:2px solid var(--color-yellow);cursor:pointer;transition:all .2s}.volume-slider::-webkit-slider-thumb:hover{background:var(--color-yellow);transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:var(--color-magenta);border:2px solid var(--color-yellow);cursor:pointer;transition:all .2s}.volume-slider::-moz-range-thumb:hover{background:var(--color-yellow);transform:scale(1.2)}.volume-value{font-family:Courier New,monospace;font-weight:700;color:var(--color-yellow);min-width:45px;text-align:right}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes blink{0%,49%,to{opacity:1}50%,99%{opacity:.3}}@media(max-width:768px){.midi-player{padding:1.5rem}.midi-player-header h3{font-size:1.5rem}.midi-controls{flex-direction:column}.midi-button{width:100%;padding:1rem}.midi-progress,.midi-volume{flex-wrap:wrap}.time-display,.volume-value{font-size:1rem}}.page-header[data-astro-cid-6glp6cfo]{padding:2rem 0}.page-header[data-astro-cid-6glp6cfo] h1[data-astro-cid-6glp6cfo]{font-size:3.5rem;margin-bottom:1rem}.subtitle[data-astro-cid-6glp6cfo]{font-size:1.5rem;margin-bottom:1rem}.midi-section[data-astro-cid-6glp6cfo],.game-tabs-section[data-astro-cid-6glp6cfo]{margin:2rem 0}.navigation-section[data-astro-cid-6glp6cfo]{max-width:600px;margin:3rem auto;padding:2rem}.navigation-section[data-astro-cid-6glp6cfo] h2[data-astro-cid-6glp6cfo]{margin-bottom:1rem}.navigation-section[data-astro-cid-6glp6cfo] p[data-astro-cid-6glp6cfo]{font-size:1.1rem;margin-bottom:1.5rem}.button-group[data-astro-cid-6glp6cfo]{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.fun-facts[data-astro-cid-6glp6cfo]{max-width:700px;margin:3rem auto}.fun-facts[data-astro-cid-6glp6cfo] h3[data-astro-cid-6glp6cfo]{font-size:1.8rem;margin-bottom:1.5rem;text-align:center}.fun-facts[data-astro-cid-6glp6cfo] ul[data-astro-cid-6glp6cfo]{list-style:none;padding:0}.fun-facts[data-astro-cid-6glp6cfo] li[data-astro-cid-6glp6cfo]{font-size:1.1rem;color:var(--color-cyan);margin-bottom:.75rem;padding-left:0}.fun-facts[data-astro-cid-6glp6cfo] li[data-astro-cid-6glp6cfo]:before{content:"▸ ";color:var(--color-yellow);font-weight:700;margin-right:.5rem}@media(max-width:768px){.page-header[data-astro-cid-6glp6cfo] h1[data-astro-cid-6glp6cfo]{font-size:2.5rem}.subtitle[data-astro-cid-6glp6cfo]{font-size:1.2rem}.navigation-section[data-astro-cid-6glp6cfo]{padding:1.5rem}.button-group[data-astro-cid-6glp6cfo]{flex-direction:column;align-items:stretch}.fun-facts[data-astro-cid-6glp6cfo] li[data-astro-cid-6glp6cfo]{font-size:1rem}}