:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#17201c;background:#eef3ef;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--surface: #ffffff;--surface-muted: #f6f8f5;--ink: #17201c;--muted: #5c675f;--line: #dce4de;--control: #1f2a25;--danger: #b42318;--shadow: 0 18px 60px rgba(28, 39, 34, .13)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,rgba(239,68,68,.13),transparent 31rem),radial-gradient(circle at right 18%,rgba(16,185,129,.12),transparent 28rem),#eef3ef}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{position:relative;min-height:100vh;padding:18px;overflow-x:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(1180px,100%);min-height:72px;margin:0 auto 18px;padding:12px 14px;border:1px solid rgba(31,42,37,.09);border-radius:8px;background:#ffffffdb;box-shadow:0 8px 30px #16201c12;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand-lockup{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{display:grid;width:46px;height:46px;flex:0 0 auto;place-items:center;border-radius:8px;color:#fff;background:#1f2a25}.brand-lockup h1,.active-kit h2,.modal-header h2{margin:0;letter-spacing:0}.brand-lockup h1{font-size:clamp(1.12rem,2.4vw,1.45rem);line-height:1.1}.brand-kicker,.active-kit-copy p{margin:0 0 4px;color:var(--muted);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.control-strip{display:flex;align-items:center;gap:8px;flex:0 0 auto}.icon-button,.text-button{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:transform .16s ease,opacity .16s ease,background .16s ease,color .16s ease}.icon-button{width:44px;height:44px;border-radius:8px;color:#26322c;background:#edf2ee}.icon-button.primary{color:#fff;background:#d93a2f}.icon-button.large{width:58px;height:58px}.icon-button.compact{width:36px;height:36px}.icon-button:hover:not(:disabled),.text-button:hover:not(:disabled),.kit-option:hover{transform:translateY(-1px)}.icon-button:disabled,.text-button:disabled,.instrument-card:disabled{cursor:not-allowed;opacity:.45}.text-button{min-height:42px;padding:0 16px;gap:8px;border-radius:8px;color:#fff;font-weight:800;background:#1f2a25}.text-button.danger{background:var(--danger)}.stage{position:relative;width:min(1180px,100%);margin:0 auto;padding:24px;border:1px solid rgba(31,42,37,.08);border-radius:8px;background:linear-gradient(135deg,#fffffff5,#ffffffdb),linear-gradient(120deg,var(--kit-color-a),var(--kit-color-b),var(--kit-color-c));box-shadow:var(--shadow)}.active-kit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin-bottom:22px}.kit-orb{display:grid;width:clamp(86px,14vw,128px);aspect-ratio:1;place-items:center;border:8px solid rgba(255,255,255,.72);border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--kit-color-a),var(--kit-color-b)),#1f2a25;box-shadow:inset 0 -12px 30px #00000029}.active-kit-copy{min-width:0}.active-kit-copy h2{font-size:clamp(2rem,7vw,4.8rem);line-height:.95}.active-kit-copy span{display:block;max-width:56rem;margin-top:10px;color:var(--muted);font-size:clamp(.95rem,2vw,1.08rem);line-height:1.5}.active-kit-actions{display:flex;align-items:center;gap:10px}.instrument-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:12px}.empty-grid{display:grid;min-height:260px;place-items:center;border:1px dashed var(--line);border-radius:8px;color:var(--muted);background:#ffffff9e;text-align:center}.instrument-card{position:relative;display:grid;min-height:188px;grid-template-rows:1fr auto auto;gap:12px;padding:16px;border:1px solid rgba(31,42,37,.08);border-radius:8px;color:var(--ink);background:var(--surface);box-shadow:0 8px 24px #16201c12;text-align:left}.instrument-card:before{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;border-top:4px solid var(--instrument-color);content:"";pointer-events:none}.instrument-card.muted{color:#7c8580;background:#f1f4f2}.instrument-visual{position:relative;display:grid;min-height:82px;place-items:center}.instrument-head{width:76px;height:56px;border:6px solid color-mix(in srgb,var(--instrument-color),#17201c 18%);border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.88),transparent 34%),color-mix(in srgb,var(--instrument-color),white 70%);box-shadow:inset 0 -12px 24px #17201c1c}.instrument-card.playing:not(.muted) .instrument-head{animation:drumPulse var(--beat-duration) ease-in-out infinite}.instrument-stick{position:absolute;top:12px;width:42px;height:4px;border-radius:999px;background:#1f2a25;transform-origin:right center}.instrument-stick.one{left:calc(50% - 48px);transform:rotate(24deg)}.instrument-stick.two{right:calc(50% - 48px);transform:rotate(156deg)}.instrument-card.playing:not(.muted) .instrument-stick.one{animation:stickHit var(--beat-duration) ease-in-out infinite}.instrument-card.playing:not(.muted) .instrument-stick.two{animation:stickHit var(--beat-duration) ease-in-out infinite reverse}.instrument-meta{display:grid;gap:4px;min-width:0}.instrument-meta strong{overflow-wrap:anywhere;font-size:1rem;line-height:1.15}.instrument-meta small{color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase}.instrument-state{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:999px;color:var(--instrument-color);background:color-mix(in srgb,var(--instrument-color),white 86%)}.app-footer{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;width:min(1180px,100%);margin:14px auto 0;color:var(--muted);font-size:.83rem;font-weight:800;text-transform:uppercase}.app-footer span{padding:8px 10px;border-radius:999px;background:#ffffffb8}.modal-backdrop,.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:18px;background:#17201c9e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal-panel,.loading-panel{width:min(560px,100%);border-radius:8px;background:#fff;box-shadow:0 24px 90px #00000052}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--line)}.modal-header h2{font-size:1.2rem}.modal-body{padding:16px}.kit-list{display:grid;gap:10px}.kit-option{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-height:72px;width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff;cursor:pointer;text-align:left}.kit-option-mark{width:44px;height:44px;border-radius:8px}.kit-option strong,.kit-option small{display:block}.kit-option small{margin-top:4px;color:var(--muted)}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-weight:800}.toggle-row span{display:inline-flex;align-items:center;gap:8px}.toggle-row input{width:42px;height:24px;accent-color:#d93a2f}.help-copy{display:grid;gap:10px;color:#334139;line-height:1.55}.help-copy p{margin:0}.loading-panel{padding:20px}.loading-panel p{margin:0 0 12px;color:var(--muted);font-weight:800;text-transform:uppercase}.loading-panel strong{display:block;margin-top:10px;font-size:1.35rem}.progress-track{height:12px;overflow:hidden;border-radius:999px;background:#edf2ee}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#d93a2f,#f59e0b,#10b981);transition:width .16s ease}.error-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px;border:1px solid rgba(180,35,24,.24);border-radius:8px;color:var(--danger);background:#fff4f2}.loading-pill{position:fixed;right:18px;bottom:18px;z-index:30;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:999px;color:#fff;font-weight:900;background:#1f2a25;box-shadow:var(--shadow)}.spin{animation:spin 1s linear infinite}.confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;top:-20px;left:var(--x);width:9px;height:15px;border-radius:2px;background:var(--confetti-color);animation:confettiFall var(--duration) linear infinite;animation-delay:var(--delay);transform:rotate(var(--tilt))}@keyframes drumPulse{0%,to{transform:scale(1)}34%{transform:scale(.92)}46%{transform:scale(1.05)}}@keyframes stickHit{0%,to{transform:rotate(24deg) translateY(0)}40%{transform:rotate(12deg) translateY(12px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes confettiFall{0%{transform:translateY(-24px) rotate(var(--tilt));opacity:1}to{transform:translateY(110vh) rotate(calc(var(--tilt) + 460deg));opacity:.3}}@media(max-width:760px){.app-shell{padding:10px}.topbar{align-items:stretch;flex-direction:column}.control-strip{justify-content:space-between}.control-strip .icon-button{width:100%}.stage{padding:14px}.active-kit{grid-template-columns:1fr;text-align:center}.kit-orb{margin:0 auto}.active-kit-actions{justify-content:center}.instrument-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.instrument-card{min-height:168px;padding:12px}.error-banner{align-items:stretch;flex-direction:column}}@media(max-width:420px){.instrument-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}