:root{--bg: #000000;--surface: #0a0a0a;--border: #333333;--text: #ffffff;--text-dim: #888888;--active: #ffffff;--focus: #666666;--touch-target: 44px}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}main{max-width:900px;margin:0 auto;padding:1rem;min-height:100vh}header{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}h1{flex:1;font-size:1.25rem;font-weight:400;min-width:100px}h2{font-size:.875rem;font-weight:400;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}button{min-width:var(--touch-target);min-height:var(--touch-target);padding:.5rem 1rem;background:var(--bg);color:var(--text);border:1px solid var(--border);font-size:.875rem;font-weight:400;cursor:pointer;-webkit-user-select:none;user-select:none}button:hover:not(:disabled){background:var(--surface)}button:active:not(:disabled){background:var(--text);color:var(--bg)}button:disabled{opacity:.3;cursor:not-allowed}button[aria-pressed=true]{background:var(--text);color:var(--bg)}button:focus-visible{outline:1px dashed var(--focus);outline-offset:2px}section{margin-bottom:1.5rem;padding:1rem;border:1px solid var(--border)}.slider-container{margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.slider-container:last-child{margin-bottom:0}.slider-container label{font-size:.75rem;font-weight:400;min-width:80px;text-transform:uppercase;letter-spacing:.05em}.slider-container select{flex:1;min-height:var(--touch-target);padding:.5rem;background:var(--bg);color:var(--text);border:1px solid var(--border);font-size:.875rem;cursor:pointer}.slider-container select:hover{background:var(--surface)}.slider-container select:focus-visible{outline:1px dashed var(--focus);outline-offset:2px}.slider-wrapper{display:flex;align-items:center;gap:.5rem;flex:1}.slider-container input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:var(--touch-target);background:transparent;cursor:pointer}.slider-container input[type=range]::-webkit-slider-track{width:100%;height:2px;background:var(--border)}.slider-container input[type=range]::-moz-range-track{width:100%;height:2px;background:var(--border)}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--text);border:1px solid var(--text);cursor:pointer;margin-top:-7px}.slider-container input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--text);border:1px solid var(--text);cursor:pointer}.slider-container input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px dashed var(--focus);outline-offset:2px}.slider-container input[type=range]:focus-visible::-moz-range-thumb{outline:1px dashed var(--focus);outline-offset:2px}.slider-container input[type=number]{width:60px;padding:.25rem;background:var(--bg);color:var(--text);border:1px solid var(--border);font-size:.75rem;text-align:center}.slider-container input[type=number]:focus{outline:1px dashed var(--focus);outline-offset:2px}.sequencer-section{background:var(--bg)}#sequencer-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;width:100%}.sequencer-step{display:flex;flex-direction:column;gap:2px}.sequencer-step-number{font-size:.625rem;text-align:center;color:var(--text-dim);font-variant-numeric:tabular-nums}.sequencer-cell{aspect-ratio:1;width:100%;background:var(--bg);border:1px solid var(--border);cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.sequencer-cell:hover{background:var(--surface)}.sequencer-cell.active{background:var(--active);border-color:var(--active)}.sequencer-cell.active:hover{background:var(--text-dim)}.sequencer-cell.playhead{outline:2px solid var(--text);outline-offset:-2px}.sequencer-cell.active-step{border-width:2px;outline:1px dashed var(--focus);outline-offset:2px}.sequencer-cell.active.playhead{background:var(--bg);border-color:var(--text)}.sequencer-cell.has-custom-settings:after{content:"";position:absolute;top:2px;right:2px;width:3px;height:3px;background:var(--text-dim)}.sequencer-cell.has-custom-settings.active:after{background:var(--bg)}.sequencer-cell.copied{animation:copy-flash .5s ease}@keyframes copy-flash{0%,to{opacity:1}50%{opacity:.3}}.pitch-section{background:var(--bg)}.pitch-control{min-height:100px;display:flex;flex-direction:column;gap:.75rem}.pitch-control p{color:var(--text-dim);text-align:center;padding:1rem;font-size:.75rem}.pitch-control h3{font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.05em}.note-display{font-size:2rem;font-weight:400;text-align:center;font-family:Courier New,monospace;padding:.5rem;background:var(--surface);border:1px solid var(--border)}.pitch-slider{-webkit-appearance:none;appearance:none;width:100%;height:var(--touch-target);background:transparent;cursor:pointer}.pitch-slider::-webkit-slider-track{width:100%;height:2px;background:var(--border)}.pitch-slider::-moz-range-track{width:100%;height:2px;background:var(--border)}.pitch-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--text);border:1px solid var(--text);cursor:pointer;margin-top:-9px}.pitch-slider::-moz-range-thumb{width:20px;height:20px;background:var(--text);border:1px solid var(--text);cursor:pointer}.pitch-control label{text-align:center;font-size:.75rem;color:var(--text-dim)}footer{display:flex;gap:.5rem;justify-content:flex-start;flex-wrap:wrap;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}.export-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.export-controls label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.export-controls select{min-height:var(--touch-target);padding:.5rem;background:var(--bg);color:var(--text);border:1px solid var(--border);font-size:.875rem}@media(max-width:400px){#sequencer-grid{grid-template-columns:repeat(8,1fr);gap:3px}h1{font-size:1rem}section{padding:.75rem}.note-display{font-size:1.5rem}.slider-container{flex-wrap:wrap}.slider-container label{min-width:100%}}@media(min-width:768px){main{padding:1.5rem}h1{font-size:1.5rem}section{padding:1.25rem}#sequencer-grid{gap:6px}}*:focus-visible{outline:1px dashed var(--focus);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{animation:none!important}}