*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,sans-serif;background:#0d0d1a;color:#d0d0e0;height:100vh;display:flex;flex-direction:column;overflow:hidden}header{background:#12122b;padding:12px 20px;border-bottom:1px solid #1e1e4a;display:flex;align-items:center;gap:12px;flex-shrink:0}header h1{font-size:1.1rem;font-weight:700;color:#e94560;letter-spacing:.05em}header .subtitle{font-size:.75rem;color:#555}.wake-toggle{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.75rem;color:#555;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-switch{position:relative;width:36px;height:20px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{position:absolute;inset:0;background:#1e1e4a;border-radius:20px;transition:background .2s}.toggle-slider:before{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:#444;border-radius:50%;transition:transform .2s,background .2s}.toggle-switch input:checked+.toggle-slider{background:#1a6e2a}.toggle-switch input:checked+.toggle-slider:before{transform:translate(16px);background:#7fff8a}.layout{display:flex;flex:1;overflow:hidden}.sidebar{width:200px;background:#12122b;border-right:1px solid #1e1e4a;display:flex;flex-direction:column;flex-shrink:0}.sidebar-title{padding:12px 14px 8px;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:#555}.song-list{flex:1;overflow-y:auto;padding:4px 6px}.song-item{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:.85rem;transition:background .1s;-webkit-user-select:none;user-select:none}.song-item:hover{background:#1e1e4a}.song-item.selected{background:#2a0d22;color:#e94560}.song-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpm-badge{font-size:.68rem;color:#555;flex-shrink:0}.del-btn{background:none;border:none;color:#444;cursor:pointer;font-size:.9rem;padding:0 2px;line-height:1;flex-shrink:0;transition:color .1s}.del-btn:hover{color:#e94560}.add-btn{margin:6px;padding:8px;background:none;border:1px dashed #1e1e4a;border-radius:6px;color:#555;cursor:pointer;font-size:.8rem;text-align:center;transition:all .15s;flex-shrink:0}.add-btn:hover{border-color:#e94560;color:#e94560}.editor{flex:1;overflow-y:auto;padding:20px 24px}.empty{color:#444;font-size:.9rem;padding:40px;text-align:center}.field-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px;align-items:flex-end}.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#555}input[type=text]{background:#12122b;border:1px solid #1e1e4a;border-radius:6px;color:#d0d0e0;padding:7px 11px;font-size:.9rem;width:240px;transition:border-color .15s}input[type=text]:focus{outline:none;border-color:#e94560}.bpm-wrap{display:flex;align-items:center;gap:6px}.bpm-input{background:#12122b;border:1px solid #1e1e4a;border-radius:6px;color:#d0d0e0;padding:7px 11px;font-size:.9rem;width:80px;text-align:center;-moz-appearance:textfield}.bpm-input::-webkit-inner-spin-button,.bpm-input::-webkit-outer-spin-button{-webkit-appearance:none}.bpm-input:focus{outline:none;border-color:#e94560}.bpm-tap{padding:7px 12px;background:#1e1e4a;border:1px solid #2a2a6a;border-radius:6px;color:#a0a0c0;cursor:pointer;font-size:.8rem;transition:all .1s;white-space:nowrap}.bpm-tap:hover{background:#2a2a6a}.bpm-tap:active{transform:scale(.95)}.seg-btn-group{display:flex;gap:6px}.seg-btn{padding:6px 16px;background:none;border:1px solid #1e1e4a;border-radius:6px;color:#666;cursor:pointer;font-size:.82rem;transition:all .15s}.seg-btn.active{background:#e94560;border-color:#e94560;color:#fff}.beats-ctrl{display:flex;align-items:center;gap:8px}.pm-btn{width:26px;height:26px;border-radius:50%;border:1px solid #1e1e4a;background:none;color:#aaa;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .1s}.pm-btn:hover{background:#1e1e4a}.beats-val{font-size:1rem;font-weight:600;min-width:20px;text-align:center}.pattern-section{margin-bottom:18px}.section-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#555;margin-bottom:8px}.hint{font-size:.72rem;color:#3a3a6a;margin-bottom:14px}.pattern-grid{display:flex;flex-direction:column;gap:6px}.beat-row{display:flex;align-items:center;gap:5px}.beat-num{width:32px;font-size:.7rem;color:#3a3a6a;text-align:right;flex-shrink:0}.sig-btn{width:42px;height:42px;border-radius:8px;border:none;cursor:pointer;font-size:.72rem;font-weight:700;letter-spacing:.04em;transition:transform .08s,filter .08s;flex-shrink:0}.sig-btn.accent{background:#c41e3a;color:#fff;box-shadow:0 0 8px #c41e3a80}.sig-btn.normal{background:#0a2050;color:#4fc3f7;border:1px solid #1a4080}.sig-btn.silent{background:#0d0d1a;color:#2a2a4a;border:1px solid #1a1a2a}.sig-btn.lit{transform:scale(1.18);filter:brightness(1.6);z-index:1;position:relative}.beat-sep{width:1px;height:36px;background:#1e1e4a;margin:0 3px;flex-shrink:0}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.ctrl-btn{padding:9px 22px;border:none;border-radius:8px;cursor:pointer;font-size:.88rem;font-weight:600;transition:all .15s}.btn-play{background:#1a6e2a;color:#7fff8a}.btn-play:hover{background:#228b33}.btn-stop{background:#6e1a1a;color:#ff8a8a}.btn-stop:hover{background:#8b2222}.btn-export{background:#0a1e4a;color:#4fc3f7;border:1px solid #1a4080}.btn-export:hover{background:#1a4080}.btn-export:disabled{opacity:.4;cursor:not-allowed}.export-wrap{margin-top:8px;display:none;flex-direction:column;gap:4px}.export-wrap.show{display:flex}.export-status{font-size:.78rem;color:#666}.prog-bar{width:220px;height:4px;background:#1e1e4a;border-radius:2px;overflow:hidden}.prog-fill{height:100%;background:#4fc3f7;border-radius:2px;transition:width .15s;width:0%}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1e1e4a;border-radius:3px}@media(max-width:600px){body{height:auto;overflow:auto}.layout{flex-direction:column;overflow:visible}.sidebar{width:100%;border-right:none;border-bottom:1px solid #1e1e4a;flex-direction:column;flex-shrink:0}.sidebar-title{display:none}.song-list{flex:none;max-height:30vh;overflow-y:auto;padding:4px 6px}.add-btn{margin:6px}.editor{padding:14px 16px}input[type=text]{width:100%}.field-row{gap:12px}}