@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:dark;--pixel-font: "Press Start 2P", ui-monospace, "SFMono-Regular", monospace;--neon-bg: #08060d;--neon-panel: #120f1e;--neon-cyan: #4dfaff;--neon-magenta: #ff3fd8;--neon-yellow: #eaff3f}body{min-height:100dvh;background:var(--neon-bg);color:var(--neon-cyan)}.page{max-width:80ch;margin-inline:auto;padding:2rem}.chiptune{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;min-height:100dvh;padding:.75rem .75rem 1rem;background:radial-gradient(ellipse at top,#17102a 0%,var(--neon-bg) 70%);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.chiptune__scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgb(255 255 255 / 4%) 0px,rgb(255 255 255 / 4%) 1px,transparent 2px,transparent 4px);mix-blend-mode:overlay}.chiptune__title{font-family:var(--pixel-font);font-size:clamp(1.4rem,5vw,2.25rem);letter-spacing:.08em;text-align:center;color:var(--neon-yellow);text-shadow:0 0 6px var(--neon-yellow),0 0 18px var(--neon-magenta),2px 0 0 rgb(255 63 216 / 40%),-2px 0 0 rgb(77 250 255 / 40%)}.chiptune__subtitle{font-family:var(--pixel-font);font-size:clamp(.5rem,2vw,.65rem);letter-spacing:.05em;color:var(--neon-cyan);text-shadow:0 0 6px rgb(77 250 255 / 60%);text-align:center}.chiptune__scope{display:block;width:min(100%,260px);height:42px;background:#050409;border:2px solid var(--neon-cyan);border-radius:8px;box-shadow:0 0 8px #4dfaff66 inset,0 0 12px #4dfaff33}.chiptune__controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.chiptune__key-controls{display:flex;align-items:center;flex-shrink:0;gap:.35rem;padding:.2rem .4rem;background:var(--neon-panel);border:2px solid var(--neon-magenta);border-radius:10px;box-shadow:0 0 10px #ff3fd873 inset,0 0 16px #ff3fd840}.chiptune__key-display{font-family:var(--pixel-font);font-size:clamp(.45rem,1.8vw,.6rem);letter-spacing:.04em;color:var(--neon-yellow);white-space:nowrap;display:inline-flex;flex-shrink:0;justify-content:center;width:6.5ch;cursor:default}.chiptune__key-btn{font-family:var(--pixel-font);font-size:.6rem;line-height:1;min-width:1.4rem;min-height:1.4rem;flex-shrink:0;color:var(--neon-cyan);background:#0d0a17;border:2px solid var(--neon-cyan);border-radius:8px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:2px;box-shadow:0 0 8px #4dfaff7f inset;transition:box-shadow .08s ease-out}.chiptune__key-btn:hover{box-shadow:0 0 8px #4dfaff7f inset,0 0 12px #4dfaff99}.chiptune__key-btn:active{box-shadow:0 0 4px #4dfaff7f inset,0 0 12px #4dfaff99}.chiptune__key-btn:focus-visible{outline:2px solid var(--neon-cyan)}.chiptune__sample-controls{display:flex;align-items:center;flex-shrink:0;gap:.35rem;padding:.2rem .4rem;background:var(--neon-panel);border:2px solid var(--neon-cyan);border-radius:10px;box-shadow:0 0 10px #4dfaff73 inset,0 0 16px #4dfaff40;position:relative}.chiptune__sample-controls--active{border-color:var(--neon-yellow);box-shadow:0 0 10px #eaff3f73 inset,0 0 16px #eaff3f4d}.chiptune__sample-display{width:auto;min-width:4.5ch;max-width:10ch;overflow:hidden;text-overflow:ellipsis}.chiptune__sample-error{position:absolute;top:100%;left:50%;transform:translate(-50%);margin:.3rem 0 0;padding:.2rem .4rem;white-space:nowrap;font-family:var(--pixel-font);font-size:.4rem;letter-spacing:.02em;color:var(--neon-magenta);text-shadow:0 0 6px rgb(255 63 216 / 60%);background:#0d0a17;border:2px solid var(--neon-magenta);border-radius:8px;z-index:1}.chiptune__grid{display:grid;gap:clamp(.25rem,1vw,.45rem);width:min(92%,560px);min-width:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.chiptune__note{font-family:var(--pixel-font);font-size:clamp(.42rem,1.8vw,.58rem);letter-spacing:.02em;aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:var(--neon-cyan);background:var(--neon-panel);border:2px solid var(--neon-cyan);border-radius:8px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;box-shadow:0 3px #0009,0 0 6px #4dfaff4d inset;transition:transform .06s ease-out,box-shadow .1s ease-out,background .1s ease-out,color .1s ease-out}.chiptune__note:hover{box-shadow:0 3px #0009,0 0 10px #4dfaff99 inset}.chiptune__note--active{color:#08060d;background:var(--neon-yellow);border-color:var(--neon-yellow);transform:translateY(2px) scale(.96);box-shadow:0 0 18px 4px var(--neon-yellow),0 0 30px 8px #ff3fd899}.sequencer{display:flex;flex-direction:column;gap:.5rem;width:min(92%,560px);min-width:0;padding:.5rem;background:var(--neon-panel);border:2px solid var(--neon-cyan);border-radius:10px;box-shadow:0 0 10px #4dfaff4d inset,0 0 16px #4dfaff26}.sequencer__header{display:flex;flex-direction:column;gap:.5rem}.sequencer__title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}.sequencer__title{font-family:var(--pixel-font);font-size:clamp(.55rem,2vw,.7rem);letter-spacing:.06em;color:var(--neon-yellow);text-shadow:0 0 6px rgb(234 255 63 / 50%)}.sequencer__page-nav{display:flex;align-items:center;gap:.35rem;padding:.2rem .35rem;background:#0d0a17;border:2px solid var(--neon-cyan);border-radius:8px;box-shadow:0 0 8px #4dfaff59 inset}.sequencer__page-display{font-family:var(--pixel-font);font-size:.5rem;letter-spacing:.02em;color:var(--neon-cyan);white-space:nowrap;min-width:4.5ch;text-align:center}.sequencer__transport{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.sequencer__page-btn,.sequencer__loop-btn,.sequencer__play-btn,.sequencer__tempo-btn,.sequencer__clear-btn{font-family:var(--pixel-font);font-size:.6rem;line-height:1;min-width:1.6rem;min-height:1.6rem;color:var(--neon-cyan);background:#0d0a17;border:2px solid var(--neon-cyan);border-radius:8px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:2px;box-shadow:0 0 8px #4dfaff7f inset;transition:box-shadow .08s ease-out}.sequencer__page-btn:hover,.sequencer__loop-btn:hover,.sequencer__play-btn:hover,.sequencer__tempo-btn:hover,.sequencer__clear-btn:hover{box-shadow:0 0 8px #4dfaff7f inset,0 0 12px #4dfaff99}.sequencer__page-btn:focus-visible,.sequencer__loop-btn:focus-visible,.sequencer__play-btn:focus-visible,.sequencer__tempo-btn:focus-visible,.sequencer__clear-btn:focus-visible{outline:2px solid var(--neon-cyan)}.sequencer__play-btn[aria-pressed=true]{color:#08060d;background:var(--neon-yellow);border-color:var(--neon-yellow);box-shadow:0 0 10px 2px var(--neon-yellow)}.sequencer__page-btn:disabled,.sequencer__loop-btn:disabled,.sequencer__tempo-btn:disabled{opacity:.35;cursor:default;box-shadow:none}.sequencer__tempo{display:flex;align-items:center;gap:.35rem;padding:.25rem .4rem;background:#0d0a17;border:2px solid var(--neon-magenta);border-radius:8px;box-shadow:0 0 8px #ff3fd859 inset}.sequencer__tempo-display{font-family:var(--pixel-font);font-size:.55rem;letter-spacing:.03em;color:var(--neon-yellow);white-space:nowrap;width:2.5ch;text-align:center}.sequencer__loop{display:flex;align-items:center;gap:.35rem;padding:.25rem .4rem;background:#0d0a17;border:2px solid var(--neon-cyan);border-radius:8px;box-shadow:0 0 8px #4dfaff59 inset}.sequencer__loop-label{font-family:var(--pixel-font);font-size:.5rem;letter-spacing:.03em;color:var(--neon-cyan)}.sequencer__loop-display{font-family:var(--pixel-font);font-size:.55rem;letter-spacing:.03em;color:var(--neon-yellow);white-space:nowrap;min-width:4ch;text-align:center}.sequencer__grid-wrap{overflow-x:hidden}.sequencer__grid{display:grid;align-items:center;gap:2px;width:100%;min-width:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sequencer__row-label{font-family:var(--pixel-font);font-size:.4rem;color:var(--neon-cyan);padding-right:.2rem;text-align:right;white-space:nowrap;overflow:hidden}.sequencer__cell{aspect-ratio:1;min-width:.7rem;min-height:.7rem;padding:0;background:#0d0a17;border:1px solid rgb(77 250 255 / 35%);border-radius:3px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent;transition:background .06s ease-out,box-shadow .06s ease-out}.sequencer__cell--beat{border-left:1px solid rgb(77 250 255 / 60%)}.sequencer__cell--outside-loop{opacity:.4}.sequencer__cell--on{background:var(--neon-magenta);border-color:var(--neon-magenta);box-shadow:0 0 6px #ff3fd8b3}.sequencer__cell--current{border-color:var(--neon-yellow);box-shadow:0 0 0 1px var(--neon-yellow) inset}.sequencer__cell--current.sequencer__cell--on{background:var(--neon-yellow);border-color:var(--neon-yellow);box-shadow:0 0 10px 2px var(--neon-yellow)}