@import"https://fonts.googleapis.com/css2?family=Coiny&family=M+PLUS+Rounded+1c:wght@500;800&display=swap";:root{--bg: #ffe6c7;--bg-2: #fff2b2;--ink: #2d1a0b;--accent: #ff7a00;--accent-2: #00b894;--accent-3: #ffd400;--danger: #ff4d4d;--card: #fffaf0;--shadow: 0 10px 0 rgba(0, 0, 0, .12)}*{box-sizing:border-box}body{margin:0;font-family:"M PLUS Rounded 1c",Arial Rounded MT Bold,sans-serif;color:var(--ink);background:radial-gradient(circle at top,var(--bg-2) 0%,var(--bg) 45%,#ffd6a0 100%)}h1,h2{font-family:Coiny,"M PLUS Rounded 1c",sans-serif;letter-spacing:1px;margin:0 0 12px}.page{min-height:100vh;padding:20px 18px 32px;display:flex;flex-direction:column;gap:18px}.page-header{display:flex;align-items:center;justify-content:space-between}.btn{border:none;border-radius:18px;padding:10px 18px;font-size:18px;font-weight:700;background:#fff;color:var(--ink);box-shadow:var(--shadow);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.btn:active{transform:translateY(2px);box-shadow:0 4px #00000026}.btn.big{font-size:22px;padding:14px 22px}.btn.huge{font-size:28px;padding:18px 28px;border-radius:24px}.btn.mini{font-size:16px;padding:6px 12px;border-radius:14px}.btn.record{background:#ff5a5a;color:#fff}.btn.play{background:var(--accent-2);color:#fff}.btn.stop{background:var(--danger);color:#fff}.btn.go{background:var(--accent);color:#fff}.btn.danger{background:var(--danger);color:#fff}.btn.muted{background:#c8c8c8;color:#555}.btn.active{background:var(--accent-3)}.toggle{display:flex;gap:12px;flex-wrap:wrap}.record-controls{display:flex;flex-direction:column;align-items:center;gap:16px;background:var(--card);padding:18px;border-radius:22px;box-shadow:var(--shadow)}.tempo-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}.record-pulse{width:160px;height:160px;border-radius:50%;background:#fff4c8;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 6px #ffd400}.record-pulse.active{background:#ffe7a3}.pulse-dot{width:120px;height:120px;border-radius:50%;background:#ffd400;opacity:.4;animation:pulse .6s ease}.pulse-character{position:absolute;width:72px;height:72px;display:grid;place-items:center}.pulse-character img{width:100%;height:100%;display:block}.pulse-character.active{animation:bounce .6s ease}.countdown{font-size:22px;font-weight:700;color:var(--accent)}.error{background:#fff;padding:8px 12px;border-radius:12px;font-weight:700;color:var(--danger)}.clip-list,.sound-list,.slot-grid{background:var(--card);padding:16px;border-radius:20px;box-shadow:var(--shadow)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.sound-card{background:#fff;border-radius:18px;padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;min-height:110px;position:relative}.sound-card.draggable{border:4px dashed #ffc107}.sound-card.selected{border:4px solid #00b894;box-shadow:0 0 0 4px #00b89433}.sound-card.dur-5{border:4px solid #4d9cff}.sound-card.dur-10{border:4px solid #ff9f43}.duration-badge{position:absolute;top:6px;right:6px;background:#4d9cff;color:#fff;font-weight:800;font-size:12px;padding:2px 8px;border-radius:12px;box-shadow:var(--shadow)}.sound-card.dur-10 .duration-badge{background:#ff9f43}.sound-title{font-size:20px;font-weight:800}.sound-actions{display:flex;gap:8px;flex-wrap:wrap}.empty{font-size:18px;margin:0}.page-footer{margin-top:auto;display:flex;justify-content:center}.mix-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}.mix-top{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}.hint{background:#fff8d5;padding:8px 12px;border-radius:12px;font-weight:700;color:#2d1a0b}.transport{display:flex;align-items:center}.slots{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px}.slot{background:#fff;border-radius:18px;padding:10px;min-height:140px;display:flex;flex-direction:column;gap:10px;justify-content:space-between;border:4px dashed transparent;box-shadow:var(--shadow)}.slot.filled{border-color:#00b894}.slot.queued{border-color:#ffd400;animation:blink .8s infinite}.slot-label{font-size:18px;font-weight:800}.slot-character{width:64px;height:64px;display:grid;place-items:center;margin:0 auto}.slot-character img{width:100%;height:100%;display:block}.slot-character.active{animation:bounce .6s ease;filter:drop-shadow(0 4px 0 rgba(0,0,0,.15))}.slot-controls{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}.slider-wrap{display:flex;align-items:center;gap:6px;font-size:16px}input[type=range]{width:110px}.slot-controls .btn{flex:0 0 auto}@keyframes blink{0%,to{box-shadow:0 0 #ffd400cc}50%{box-shadow:0 0 0 6px #ffd40099}}@keyframes pulse{0%{transform:scale(.8);opacity:.2}60%{transform:scale(1.05);opacity:.5}to{transform:scale(1);opacity:.4}}@keyframes bounce{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.05)}70%{transform:translateY(2px) scale(.98)}to{transform:translateY(0) scale(1)}}@media (max-width: 900px){.mix-layout{grid-template-columns:1fr}.slots{grid-template-columns:repeat(2,minmax(140px,1fr))}}@media (max-width: 600px){.btn.huge{font-size:24px}.slots{grid-template-columns:repeat(2,minmax(120px,1fr))}}