*{box-sizing:border-box;margin:0;padding:0}body{background-color:#faf6ee;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='multiply'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),radial-gradient(ellipse at center,transparent 55%,rgba(100,60,10,.1) 100%),repeating-linear-gradient(93deg,transparent,transparent 8px,rgba(160,110,40,.025) 8px,rgba(160,110,40,.025) 9px),repeating-linear-gradient(180deg,transparent,transparent 22px,rgba(140,90,20,.03) 22px,rgba(140,90,20,.03) 23px);color:#2c1a0e;font-family:Segoe UI,system-ui,sans-serif;min-height:100vh}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='fn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23fn)'/%3E%3C/svg%3E")}.app{max-width:1200px;margin:0 auto;padding:24px 16px 48px}h1{font-size:1.8rem;font-weight:400;letter-spacing:.15em;color:#7c3d00;margin-bottom:4px;font-family:Georgia,Palatino Linotype,serif;font-style:italic;text-shadow:1px 1px 0 rgba(44,26,14,.1)}.subtitle{font-size:.85rem;color:#a8855a;margin-bottom:32px;letter-spacing:.05em}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}.controls label{display:flex;align-items:center;gap:6px;font-size:.85rem;color:#6b4c2a}.controls select{background:#f3ecda;border:1px solid #d4b882;color:#2c1a0e;padding:4px 8px;border-radius:3px;font-size:.85rem}.slider-label{gap:8px}.bpm-slider,.volume-slider{width:90px;accent-color:#7c3d00;cursor:pointer}.bpm-slider:disabled{opacity:.4;cursor:default}.slider-val{font-size:.78rem;color:#a8855a;width:52px}.btn{padding:8px 20px;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:opacity .15s}.btn:disabled{opacity:.4;cursor:default}.btn-play{background:#4a6741;color:#f0e8d0;border:1px solid #3a5530;box-shadow:inset 0 1px #ffffff26,0 1px 2px #00000026}.btn-play:hover:not(:disabled){background:#3d5835}.play-btn-wrapper{position:relative;display:inline-block}.play-btn-tooltip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:#3d2b1a;color:#e0d0a8;font-size:11px;white-space:nowrap;padding:5px 8px;border-radius:3px;border:1px solid #a88848;pointer-events:none;z-index:100}.play-btn-wrapper:hover .play-btn-tooltip{display:block}.btn-stop{background:#8c3020;color:#f0e8d0;border:1px solid #6a2018;box-shadow:inset 0 1px #ffffff26,0 1px 2px #00000026}.btn-stop:hover:not(:disabled){background:#a03828}.btn-clear{background:transparent;color:#6b4c2a;border:1px solid #d4b882}.btn-clear:hover:not(:disabled){color:#2c1a0e;border-color:#a88848}.btn-midi{background:transparent;color:#4a6080;border:1px solid #8aacbc}.btn-midi:hover:not(:disabled){color:#2a4060;border-color:#4a6080}.samples{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}.samples-label{font-size:.75rem;letter-spacing:.1em;color:#c8a87a;text-transform:uppercase;margin-right:4px}.btn-sample{padding:5px 14px;border:1px solid #d4b882;border-radius:20px;background:#e6d2a04d;color:#6b4c2a;font-size:.8rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.btn-sample:hover:not(:disabled){background:#d2b98280;color:#2c1a0e;border-color:#a88848}.btn-sample:disabled{opacity:.35;cursor:default}.section-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#a8855a;margin-bottom:8px}.output-legend{display:flex;align-items:center;gap:16px}.legend-item{font-size:.72rem;letter-spacing:.06em}.legend-derived{color:#2a5aaa}.legend-cp{color:#b05820}.legend-fill{color:#8a7a58}.roll-wrapper{display:flex;align-items:flex-start;overflow-x:auto;margin-bottom:32px;box-shadow:0 2px 10px #50320a1f}.roll-keys{display:flex;flex-direction:column;flex-shrink:0}.roll-key{height:20px;width:48px;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;font-size:.6rem;flex-shrink:0;border-left:4px solid #a88848;cursor:pointer;-webkit-user-select:none;user-select:none}.roll-key.white{background:#f0e8d4;color:#a8855a;border-bottom:1px solid #ddd0b0}.roll-key.black{background:#3d2b1a;color:#6a5040}.roll-key.c{color:#7c3d00!important;font-weight:600}.roll-key:hover{filter:brightness(1.08)}.roll-key.in-input-range.white{background:#e8dcc0;color:#6b4c2a;border-left:4px solid #7c3d00!important}.roll-key.in-input-range.black{background:#2a1e10;color:#6a5040;border-left:4px solid #5a2c00!important}.roll-key.in-input-range.c{color:#7c3d00!important}.roll-grid{display:flex;flex-direction:column;position:relative}.roll-row{display:flex;height:20px}.roll-cell{width:10px;height:20px;border-right:1px solid #e0d0b0;border-bottom:1px solid #e0d0b0;flex-shrink:0;cursor:pointer;transition:background .06s}.roll-cell:hover{background:#6a48a81f!important}.roll-cell.white-row{background:#f5eed8}.roll-cell.black-row{background:#eee4cc}.roll-cell.beat-1{border-left:2px solid #c8a870}.roll-cell.beat-bar{border-left:1px solid #dac8a0}.roll-cell.input-zone.white-row{background:#f3e8d0}.roll-cell.input-zone.black-row{background:#ecddc5}.roll-cell.input-zone-end{border-right:2px solid #a88848!important}.roll-cell.output-zone{cursor:default}.roll-cell.output-zone:hover{background:inherit!important}.roll-cell.input-zone.out-of-input-range.white-row{background:#e4d8c0}.roll-cell.input-zone.out-of-input-range.black-row{background:#ddd0b8}.roll-cell.input-zone.out-of-input-range{cursor:default}.roll-cell.input-zone.out-of-input-range:hover{background:inherit!important}.roll-cell.input-zone.white-row:not(.out-of-input-range){background:#f8f2e0}.roll-cell.input-zone.black-row:not(.out-of-input-range){background:#f2e8d4}.roll-header{display:flex;align-items:center;gap:16px}.roll-cell.note-preview{background:#6a48a838!important}.output-section{margin-top:8px}.status-bar{margin-top:16px;font-size:.8rem;color:#c8a87a;min-height:1.2em;font-style:italic}