@import "https://fonts.googleapis.com/css2?family=Bangers&family=Nunito:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#faf8f5;--bg-rgb:250, 248, 245;--bg-grad:linear-gradient(180deg, #fdfcfa 0%, #f5f2ed 100%);--surface:#fffefa;--text:#1a1a2a;--text-dim:#6b6b7a;--text-muted:#a6a6b0;--border:#1a1a2a14;--shadow-soft:0 10px 40px #1a1a2a14;--shadow-card:0 4px 18px #1a1a2a0f;--beat:#e07070;--bass:#6ba3b5;--perc:#e08a6a;--vocal:#5db8a8;--toy:#5db8a8;--hihat:#e8b86d;--fx:#a07ed4;--guitar:#e5a04a;--beat-glow:#e0707059;--bass-glow:#6ba3b559;--perc-glow:#e08a6a59;--vocal-glow:#5db8a859;--toy-glow:#5db8a859;--brand-grad:linear-gradient(135deg, var(--beat) 0%, var(--bass) 100%);--brand-grad-playing:linear-gradient(135deg, var(--beat) 0%, var(--perc) 100%)}[data-theme=dark]{--bg:#121218;--bg-rgb:18, 18, 24;--bg-grad:linear-gradient(180deg, #1a1a28 0%, #151520 100%);--surface:#1c1c2a;--text:#ebe8f0;--text-dim:#9494a8;--text-muted:#5c5c70;--border:#ffffff12;--shadow-soft:0 10px 40px #00000059;--shadow-card:0 4px 18px #00000040}body{background:var(--bg);min-height:100vh;color:var(--text);font-family:Nunito,system-ui,-apple-system,sans-serif;overflow-x:hidden}.app{z-index:1;flex-direction:column;gap:24px;max-width:1300px;min-height:100vh;margin:0 auto;padding:24px 28px 32px;display:flex;position:relative}.header-bar{justify-content:space-between;align-items:center;gap:20px;padding:10px 4px 12px;display:flex}.header-left{flex:1;align-items:center;gap:12px;display:flex}.header-right{flex:1;justify-content:flex-end;align-items:center;gap:14px;display:flex}.header-center{flex:none}.wordmark{letter-spacing:.1em;text-transform:uppercase;background:var(--brand-grad);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Nunito,sans-serif;font-size:.8rem;font-weight:900;line-height:1.3;overflow:visible}.site-footer{text-align:center;color:var(--beat);-webkit-backdrop-filter:blur(12px);background:rgba(var(--bg-rgb), .6);border-top:1px solid var(--border);padding:12px 16px 10px;font-family:Nunito,sans-serif;font-size:.85rem}.play-btn{background:var(--brand-grad);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;transition:transform .18s,box-shadow .18s;display:flex;box-shadow:0 8px 24px #e070704d}.play-btn svg{fill:currentColor}.play-btn:hover{transform:scale(1.07);box-shadow:0 10px 32px #e0707066}.play-btn:active{transform:scale(.94)}.play-btn.playing{background:var(--brand-grad-playing);box-shadow:0 8px 24px var(--beat-glow)}.header-action{border:1px solid var(--border);background:var(--surface);width:36px;height:36px;color:var(--text-dim);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;transition:all .15s;display:flex}.header-action:hover:not(:disabled){color:var(--text);border-color:var(--text-muted)}.header-action:disabled{opacity:.3;cursor:not-allowed}.copied-label{color:var(--beat);white-space:nowrap;font-family:Nunito,sans-serif;font-size:.65rem;font-weight:700;animation:.2s ease-out copiedFadeIn;position:absolute;top:100%;left:50%;transform:translate(-50%)}@keyframes copiedFadeIn{0%{opacity:0;transform:translate(-50%)translateY(-4px)}to{opacity:1;transform:translate(-50%)}}.theme-toggle{border:1px solid var(--border);background:var(--surface);width:40px;height:40px;color:var(--text-dim);cursor:pointer;box-shadow:var(--shadow-card);border-radius:50%;justify-content:center;align-items:center;transition:background .2s,color .2s,transform .15s,box-shadow .2s;display:flex}.theme-toggle:hover{color:var(--text);transform:scale(1.08);box-shadow:0 4px 14px #e0707033}.theme-toggle:active{transform:scale(.92)}.stage{background:var(--bg-grad);border:1px solid var(--border);box-shadow:var(--shadow-soft);border-radius:28px;justify-content:center;align-items:flex-end;padding:40px 28px 24px;transition:box-shadow .6s;display:flex;position:relative;overflow:hidden}[data-theme=dark] .stage{-webkit-backdrop-filter:blur(8px);background:linear-gradient(#1a1a28d9 0%,#151520e6 100%)}.stage:after{content:"";pointer-events:none;background:linear-gradient(#0000 0%,#1a1a2a1f 100%);height:110px;position:absolute;bottom:0;left:0;right:0}[data-theme=dark] .stage:after{background:linear-gradient(#0000 0%,#0006 100%)}.stage:before{content:"";pointer-events:none;background:radial-gradient(#6ba3b524 0%,#0000 65%);width:600px;height:220px;position:absolute;top:-60px;left:50%;transform:translate(-50%)}[data-theme=dark] .stage:before{background:radial-gradient(#e639461f 0%,#0000 60%);width:700px;height:250px}.stage.stage-playing{box-shadow:var(--shadow-soft), 0 0 80px #e070701a, 0 0 140px #6ba3b514}[data-theme=dark] .stage.stage-playing{box-shadow:var(--shadow-soft), 0 0 100px #e070702e, 0 0 160px #6ba3b524}.stage.stage-playing:before{background:radial-gradient(#e0707026 0%,#0000 60%);width:800px;height:280px;animation:3s ease-in-out infinite spotlightPulse}@keyframes spotlightPulse{0%,to{opacity:.7}50%{opacity:1}}.stage-hint{color:var(--text-muted);letter-spacing:.04em;z-index:2;pointer-events:none;white-space:nowrap;font-size:.95rem;font-weight:600;animation:2.5s ease-in-out infinite hintPulse;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}@keyframes hintPulse{0%,to{opacity:.5}50%{opacity:.9}}.stage-inner{z-index:1;justify-content:center;align-items:flex-end;gap:12px;width:100%;display:flex;position:relative}.char-slot{flex-direction:column;flex:1 1 0;align-items:center;gap:8px;max-width:160px;transition:transform .3s;display:flex;position:relative}.char-slot-over{transform:translateY(-10px)}.char-slot-over .char-svg-wrap{filter:drop-shadow(0 8px 16px #6ba3b54d)}.char-muted{opacity:.4}.char-muted:hover{opacity:.6}.char-svg-wrap{width:100%;transition:filter .3s;position:relative;overflow:hidden}.dad-avatar svg{width:100%;height:auto;display:block}.dad-empty{filter:grayscale()opacity(.45);transition:filter .3s,transform .3s}.dad-assigned{filter:none;transition:filter .3s,transform .3s;animation:.35s ease-out assignPop}@keyframes assignPop{0%{transform:scale(1)}40%{transform:scale(1.12)}to{transform:scale(1)}}.dad-active,.dad-active-0{animation:.65s ease-in-out infinite dadBounce}@keyframes dadBounce{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-7px)rotate(-1deg)}50%{transform:translateY(-10px)rotate(0)}75%{transform:translateY(-7px)rotate(1deg)}}.dad-active-1{animation:1.3s ease-in-out infinite dadSway}@keyframes dadSway{0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-4px)rotate(-2.5deg)}75%{transform:translate(4px)rotate(2.5deg)}}.dad-active-2{animation:.65s ease-in-out infinite dadNod}@keyframes dadNod{0%,to{transform:translateY(0)scaleY(1)}50%{transform:translateY(-3px)scaleY(.97)}}.dad-active-3{animation:.65s ease-in-out infinite dadWiggle}@keyframes dadWiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}.dad-active-4{animation:1.3s ease-in-out infinite dadLean}@keyframes dadLean{0%,to{transform:rotate(0)scale(1)}50%{transform:rotate(-2deg)scale(1.03)}}.dad-active-5{animation:.65s cubic-bezier(.2,0,.3,1) infinite dadHop}@keyframes dadHop{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-9px)}}.dad-active-6{animation:1.3s ease-in-out infinite dadGroove}@keyframes dadGroove{0%,to{transform:translateY(0)translate(0)rotate(0)}25%{transform:translateY(-5px)translate(-2px)rotate(-2deg)}50%{transform:translateY(-3px)translate(0)rotate(0)}75%{transform:translateY(-5px)translate(2px)rotate(2deg)}}@keyframes badgeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.char-loop-badge{color:#fff;white-space:nowrap;border-radius:14px;align-items:center;gap:5px;padding:4px 6px 4px 9px;font-family:Nunito,sans-serif;font-size:.7rem;font-weight:600;animation:.3s ease-out badgeSlideIn;display:inline-flex;box-shadow:0 3px 10px #1a1a2e26}.char-loop-name{text-shadow:0 1px 2px #0000002e}.char-loop-remove{color:#fff;cursor:pointer;background:#ffffff40;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;transition:background .15s,transform .15s;display:inline-flex}.char-loop-remove:hover{background:#ffffff73;transform:scale(1.15)}.char-controls{opacity:0;gap:6px;transition:opacity .2s;display:flex}.char-slot:hover .char-controls,.char-slot.has-loop .char-controls{opacity:1}.char-ctrl{border:1px solid var(--border);background:var(--surface);width:30px;height:30px;color:var(--text-muted);cursor:pointer;box-shadow:var(--shadow-card);border-radius:50%;justify-content:center;align-items:center;transition:all .15s;display:flex}.char-ctrl:hover{color:var(--text-dim);transform:translateY(-1px)}.char-ctrl.active{background:var(--beat);border-color:var(--beat);color:#fff;box-shadow:0 0 0 4px var(--beat-glow)}.char-ctrl.solo.active{background:var(--perc);border-color:var(--perc);color:#fff;box-shadow:0 0 0 4px var(--perc-glow)}.sound-palette{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-card);border-radius:22px;gap:24px;padding:16px 20px;display:flex;overflow-x:auto}[data-theme=dark] .sound-palette{-webkit-backdrop-filter:blur(12px);background:#1c1c2abf}.palette-group{flex-direction:column;gap:8px;min-width:0;display:flex}.palette-group-label{text-transform:uppercase;letter-spacing:.12em;text-align:center;font-size:.65rem;font-weight:700}.palette-group-chips{gap:4px;display:flex}.palette-chip{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;border:none;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:52px;padding:10px 4px 7px;transition:transform .2s,box-shadow .25s;display:flex;position:relative}.palette-chip:hover{transform:translateY(-5px)scale(1.06);box-shadow:0 8px 20px #00000040}.palette-chip:active{cursor:grabbing;transform:scale(.94)}.palette-chip-used{filter:grayscale(.85)brightness(.7);opacity:.4;cursor:default;pointer-events:none}.palette-chip-name{color:#ffffffd9;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;font-size:.5rem;font-weight:700;line-height:1;display:block}.drag-overlay-tile{pointer-events:none;border-radius:14px;justify-content:center;align-items:center;width:56px;height:56px;font-family:Nunito,sans-serif;display:flex;transform:scale(1.15)rotate(-3deg)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#1a1a2e24;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#1a1a2e3d}[data-theme=dark] ::-webkit-scrollbar-thumb{background:#ffffff1f}[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:#ffffff38}.credit-line{text-align:center;color:#666;letter-spacing:.5px;padding:12px 0 8px;font-size:.7rem}.credit-line a{color:#888;text-decoration:none}.credit-line a:hover{color:#aaa;text-decoration:underline}@media (width<=600px){.app{gap:14px;padding:12px 10px 20px}.header-bar{flex-wrap:wrap;justify-content:center;gap:10px}.header-center{flex:0 0 100%;order:0;justify-content:center;display:flex}.header-left{flex:0 0 100%;order:-2;justify-content:center}.header-right{flex:0 0 100%;order:-1;justify-content:center;gap:8px}.play-btn{width:60px;height:60px}.stage{border-radius:18px;padding:20px 12px 16px}.stage-inner{flex-wrap:wrap;gap:8px}.char-slot{flex:calc(25% - 8px);max-width:calc(25% - 8px)}.char-loop-badge{padding:3px 5px 3px 6px;font-size:.55rem}.char-loop-name{display:none}.stage:before{width:300px;height:120px}.stage.stage-playing:before{width:350px;height:140px}.sound-palette{border-radius:16px;flex-wrap:wrap;justify-content:center;gap:16px;padding:12px;overflow-x:visible}.palette-chip{width:48px;padding:8px 3px 5px}.palette-chip-name{font-size:.55rem}.palette-group-chips{gap:8px}.stage-hint{font-size:.75rem}.wordmark{font-size:.65rem}}@media (hover:none){.char-controls{opacity:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}