:root{--bg-void: #fbe7ee;--bg-panel: #fdf2f6;--bg-panel-2: #fbe9f0;--bg-module: #ffffff;--border-soft: #f0c6d7;--accent-pink: #c65b84;--accent-pink-bright: #ef9dbb;--accent-pink-deep: #8f3f61;--accent-sage: #7fa88e;--accent-warm: #d9a441;--text-main: #3a2530;--text-dim: #93707e;--key-w: 34px;--step-w: 26px;font-family:Segoe UI,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;background:radial-gradient(ellipse 60% 40% at 12% 8%,rgba(237,168,197,.4),transparent 60%),radial-gradient(ellipse 55% 45% at 88% 12%,rgba(224,140,174,.32),transparent 60%),radial-gradient(ellipse 65% 50% at 25% 95%,rgba(214,128,163,.24),transparent 60%),radial-gradient(ellipse 55% 45% at 92% 90%,rgba(240,180,205,.3),transparent 60%),var(--bg-void);background-attachment:fixed;color:var(--text-main);overflow-x:hidden}#app{min-height:100vh}.app-shell{display:flex;flex-direction:column;height:100vh}.brand-logo{font-weight:700;letter-spacing:.12em;color:var(--accent-pink-deep);padding:0 1rem;border-right:1px solid var(--border-soft);margin-right:.5rem;white-space:nowrap}.transport-bar{display:flex;align-items:center;gap:.6rem;padding:.4rem .8rem;background:linear-gradient(180deg,#fdf3f7,#fae1ea);border-bottom:2px solid var(--border-soft);flex-wrap:wrap}.transport-btn{background:var(--bg-module);border:1px solid var(--border-soft);color:var(--text-main);padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-weight:600;letter-spacing:.05em}.transport-btn:hover{border-color:var(--accent-pink)}.transport-btn.play.active{background:var(--accent-sage);color:#eefbf3}.transport-btn.rec.active{background:#d9534f;color:#fff;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.main-area{flex:1;display:flex;min-height:0;overflow:hidden}.panel-left{width:300px;background:var(--bg-panel);border-right:2px solid var(--border-soft);overflow-y:auto;padding:.6rem;flex-shrink:0}.panel-center{flex:1;overflow-y:auto;padding:.8rem;background:var(--bg-panel-2)}.panel-bottom{height:42vh;min-height:260px;display:flex;flex-direction:column;border-top:2px solid var(--border-soft);background:var(--bg-panel);flex-shrink:0}.status-bar{padding:.3rem .8rem;font-size:.72rem;color:var(--text-dim);background:#fbe7eed9;display:flex;justify-content:space-between;border-top:1px solid var(--border-soft)}@media (max-width: 860px){.app-shell{height:auto;min-height:100vh}.main-area{flex-direction:column;overflow:visible;min-height:0}.panel-left{width:100%;max-height:50vh;border-right:none;border-bottom:2px solid var(--border-soft)}.panel-center{flex:none;overflow-y:visible}}.lcd-display{background:#3a1626;color:#ffb3d0;font-family:Consolas,monospace;padding:.6rem 1rem;border-radius:6px;border:2px solid #5c2440;box-shadow:inset 0 0 12px #00000073,0 0 8px #ffb3d033;margin-bottom:.8rem;letter-spacing:.05em;font-size:.95rem}.track-list-header{font-weight:700;color:var(--accent-pink);letter-spacing:.1em;margin-bottom:.4rem;font-size:.85rem}.track-row{background:var(--bg-module);border:1px solid var(--border-soft);border-radius:6px;padding:.5rem;margin-bottom:.5rem;cursor:default}.track-row.selected{border-color:var(--accent-pink);box-shadow:0 0 0 1px var(--accent-pink) inset}.track-name{font-weight:700;cursor:pointer;font-size:.9rem}.track-patch-name{color:var(--text-dim);font-size:.75rem;margin:.15rem 0 .3rem}.track-controls{display:flex;gap:.3rem;margin-bottom:.2rem}.mini-btn{background:#f8e3ec;border:1px solid var(--border-soft);color:var(--text-dim);border-radius:4px;width:24px;height:22px;cursor:pointer;font-size:.7rem}.mini-btn.on{background:var(--accent-pink);color:#fff5f9;border-color:var(--accent-pink)}.track-volpan{display:flex;gap:.6rem}.add-track-btn{width:100%;padding:.5rem;background:transparent;border:1px dashed var(--border-soft);color:var(--text-dim);border-radius:6px;cursor:pointer}.add-track-btn:hover{color:var(--accent-pink);border-color:var(--accent-pink)}.synth-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem}.module-box{background:linear-gradient(180deg,#fff,#fdeff5);border:1px solid var(--border-soft);border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #c65b8414}.module-header{background:linear-gradient(180deg,#f6d3e2,#f0c6d7);color:var(--accent-pink-deep);font-size:.72rem;letter-spacing:.12em;font-weight:700;padding:.35rem .6rem;border-bottom:1px solid var(--border-soft)}.module-body{display:flex;flex-wrap:wrap;gap:.6rem;padding:.6rem;align-items:flex-end}.knob-wrap{display:flex;flex-direction:column;align-items:center;width:54px;user-select:none}.knob-dial{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fdeff5,#f0c6d7 70%);border:2px solid #d99cb6;position:relative;cursor:ns-resize;box-shadow:0 2px 4px #8f3f6140}.knob-dial.active{border-color:var(--accent-pink)}.knob-indicator{position:absolute;top:3px;left:50%;width:2px;height:16px;background:var(--accent-pink-deep);transform-origin:50% 18px;border-radius:1px}.knob-center-mark{position:absolute;top:50%;left:50%;width:3px;height:3px;background:var(--text-dim);border-radius:50%;transform:translate(-50%,-50%) rotate(0) translateY(-19px)}.knob-label{font-size:.62rem;color:var(--text-dim);margin-top:.3rem;text-align:center;letter-spacing:.03em}.knob-value{font-size:.62rem;color:var(--accent-sage);font-family:Consolas,monospace}.select-wrap,.toggle-wrap{display:flex;flex-direction:column;gap:.2rem;min-width:84px}.select-label{font-size:.62rem;color:var(--text-dim)}.select-wrap select{background:#fff;color:var(--text-main);border:1px solid var(--border-soft);border-radius:4px;padding:.3rem;font-size:.75rem}.toggle-btn{background:#fff;border:1px solid var(--border-soft);color:var(--text-dim);border-radius:4px;padding:.4rem .6rem;font-size:.72rem;cursor:pointer;font-weight:600}.toggle-btn.on{background:var(--accent-sage);color:#eefbf3;border-color:var(--accent-sage)}.patch-browser-container{margin-top:1rem}.patch-browser{display:flex;flex-direction:column;gap:.6rem}.patch-category-title{font-size:.72rem;color:var(--accent-pink);letter-spacing:.1em;margin-bottom:.3rem;font-weight:700}.patch-list{display:flex;flex-wrap:wrap;gap:.35rem}.patch-btn{background:var(--bg-module);border:1px solid var(--border-soft);color:var(--text-main);border-radius:5px;padding:.3rem .6rem;font-size:.72rem;cursor:pointer}.patch-btn:hover{border-color:var(--accent-sage)}.patch-btn.active{background:var(--accent-pink);color:#fff5f9;border-color:var(--accent-pink)}.sequencer-grid-container{flex:1;display:flex;flex-direction:column;min-height:0;border-bottom:1px solid var(--border-soft)}.grid-toolbar{display:flex;gap:.5rem;padding:.4rem .6rem;background:#fae1ea;align-items:center}.small-btn{background:var(--bg-module);border:1px solid var(--border-soft);color:var(--text-main);border-radius:4px;padding:.25rem .6rem;cursor:pointer;font-size:.72rem}.grid-toolbar select{background:#fff;color:var(--text-main);border:1px solid var(--border-soft);border-radius:4px;padding:.25rem}.grid-scroll{flex:1;overflow:auto;background:#fdeef4}.piano-roll{display:grid;align-items:stretch}.row-label{font-size:.6rem;color:var(--text-dim);background:#f8e3ec;display:flex;align-items:center;padding-left:.3rem;border-bottom:1px solid #f0cddd;position:sticky;left:0;z-index:2}.row-label.c-row{color:var(--accent-pink-deep);font-weight:700}.roll-cell{height:14px;border-bottom:1px solid #f2d7e4;border-right:1px solid #f2d7e4;cursor:pointer}.roll-cell.beat-a{background:#fdf5f9}.roll-cell.beat-b{background:#f8e7ee}.roll-cell.c-row{border-bottom:1px solid #dea9c1}.roll-cell.filled{background:var(--accent-pink)!important}.roll-cell.playhead{outline:1px solid var(--accent-warm);outline-offset:-1px}.roll-cell:hover{filter:brightness(.94)}#keyboard-container{height:130px;background:#f9e3ec;padding:.4rem;overflow-x:auto}.virtual-keyboard{position:relative;height:100%;display:flex}.key{box-sizing:border-box}.key.white{width:var(--key-w);height:100%;background:linear-gradient(180deg,#fef8fa,#f6dbe6);border:1px solid #c88ba6;border-radius:0 0 4px 4px;flex-shrink:0}.key.white.pressed{background:var(--accent-pink-bright)}.key.black{position:absolute;top:0;width:calc(var(--key-w) * .62);height:60%;background:linear-gradient(180deg,#6b3450,#3a1626);border:1px solid #240d1a;border-radius:0 0 3px 3px;z-index:2}.key.black.pressed{background:var(--accent-sage)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#f9e3ec}::-webkit-scrollbar-thumb{background:#e0a8c1;border-radius:5px}