.kit-piece{scale:var(--kit-zoom,1)}
.drums-intro{background-image:linear-gradient(90deg,#123b2bd9,transparent),url('/gear/assets/cards/drums-v2.webp');background-position:center right}
.drums-intro .btn{margin-top:20px;background:#d9b36c;color:#163c30;border-color:#d9b36c}
.drum-actions{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.drum-actions .btn{text-decoration:none}
.drum-specs{margin:0}.drum-specs>div{display:flex;justify-content:space-between;gap:24px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}.drum-specs dd{margin:0;text-align:right}
.drum-planner{max-width:1560px;margin:auto;padding:38px 4% 60px}.planner-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.planner-head p{color:var(--muted);margin:12px 0}.planner-head .eyebrow{color:var(--ochre);margin-bottom:10px}
.kit-meta{display:flex;gap:20px;margin:25px 0}.kit-meta label{display:grid;gap:6px;font-size:13px;flex:1;max-width:330px}
.kit-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px}.kit-stage-panel{padding:22px;background:white;border:1px solid var(--line);border-radius:12px;margin-bottom:18px;min-width:0}.kit-stage-panel h2{font-size:26px;margin:0 0 18px}.stage-head{display:flex;justify-content:space-between;gap:15px}.stage-head span{font-size:12px;color:var(--muted)}
.kit-stage{position:relative;aspect-ratio:1.4;background-color:#edf0e9;border:1px solid #dde2d6;border-radius:10px;overflow:hidden;background-image:radial-gradient(#7c8c732b 1px,transparent 1px);background-size:20px 20px}.kit-stage:after{content:'SPEELPOSITIE';position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#667960;pointer-events:none}
.kit-piece{position:absolute;width:100px;max-width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border:none;padding:0;background:transparent;color:var(--ink);touch-action:none;cursor:grab;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(2px 4px 4px #163c3020);z-index:1}.kit-piece:focus-visible{outline:3px solid #956b26;outline-offset:6px;border-radius:50%;z-index:10}.kit-piece[aria-pressed=true]{z-index:4}.kit-piece[aria-pressed=true] .kit-face{outline:3px solid #497755;outline-offset:5px}
.kit-face{width:100%;aspect-ratio:1;border-radius:50%;border:5px solid #c8ccc5;background:radial-gradient(circle at 40% 35%,#fffefa,#dadbd3);box-shadow:inset 0 0 0 2px #a6ada1,inset 0 0 0 7px #f1f0e7;position:relative}.kit-face:after{content:'';position:absolute;inset:8%;border:1px solid #b6bdae;border-radius:50%}
.kit-piece.crash .kit-face,.kit-piece.ride .kit-face,.kit-piece.hihat .kit-face{border:1px solid #a0844e;background:repeating-radial-gradient(circle,#d8bc7b 0,#bba267 1px,#e6cc8e 2px,#cdb078 4px);box-shadow:inset -10px -10px 25px #7f5d2533}.kit-piece.crash .kit-face:after,.kit-piece.ride .kit-face:after,.kit-piece.hihat .kit-face:after{inset:39%;background:radial-gradient(circle,#374436 10%,#c4a76b 16%,#e9d394 65%,#a5854c);border:1px solid #9e804e;box-shadow:2px 3px 3px #63502960}
.kit-piece.ride{width:145px}.kit-piece.crash{width:130px}.kit-piece.kick{width:140px}.kit-piece.snare{width:104px}.kit-piece.tom{width:86px}.kit-piece.floor{width:117px}.kit-piece.kit,.kit-piece.electronic{width:230px;max-width:40%;aspect-ratio:1.2}
.kit-piece.kit .kit-face,.kit-piece.electronic .kit-face{border:0;border-radius:6px;box-shadow:none;background:none}.kit-face img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;mix-blend-mode:multiply}.kit-piece.kit .kit-face:after,.kit-piece.electronic .kit-face:after{display:none}
.kit-piece.pedal,.kit-piece.stand,.kit-piece.head,.kit-piece.sticks{width:45px}.kit-piece.pedal .kit-face,.kit-piece.stand .kit-face,.kit-piece.head .kit-face,.kit-piece.sticks .kit-face{border:0;border-radius:6px;background:white;box-shadow:none}.kit-piece.throne{width:75px}.kit-piece.throne .kit-face{border:3px solid #34413a;background:radial-gradient(circle at 40% 35%,#5e6861,#202e25);box-shadow:none}
.kit-piece span{font-size:10px;line-height:1.2;border-radius:4px;background:#ffffffed;padding:4px 6px;margin-top:6px;max-width:130px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}.kit-piece small{position:absolute;top:38%;left:0;right:0;z-index:1;font-size:10px;color:#506249;pointer-events:none}
.kit-check{border-radius:12px;padding:22px;background:#f4f0e6;border:1px solid #e4ddcd}.kit-check h2{font-size:25px;color:var(--ochre)}.kit-check ul{padding:0;list-style:none}.kit-check li{font-size:13px;padding:12px 0;border-bottom:1px solid #e4ddcd;display:flex;gap:10px}.kit-check li b{color:var(--green)}
#kit-results{max-height:480px;overflow:auto;margin-top:15px}.kit-result{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.kit-result img{width:55px;height:55px;object-fit:contain;border-radius:5px}.kit-result>div{flex:1;min-width:0}.kit-result strong{font-size:12px;display:block}.kit-result small{display:block;font-size:10px;color:var(--muted)}.kit-result button{padding:6px 10px}#kit-list .kit-result{flex-wrap:wrap}.kit-row-actions{display:flex;gap:7px}#kit-list .kit-row-actions button,#kit-list a{font-size:12px}
#kit-save-status{font-size:12px;line-height:1.7;color:var(--muted)}#drums-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#244d39;color:white;border-radius:8px;padding:12px 22px;z-index:90;max-width:90vw;box-shadow:0 4px 24px #0002;display:none}#drums-toast.visible{display:block}
.drum-compare-wrap{overflow:auto;margin:24px 0}.drum-compare{border-collapse:collapse;min-width:600px;width:100%;background:white}.drum-compare th,.drum-compare td{border:1px solid var(--line);padding:15px;font-size:14px;vertical-align:top;text-align:left}.drum-compare th{font-size:16px}.drum-compare img{width:150px;height:140px;object-fit:contain}.drum-compare td:first-child{width:160px;font-weight:600}.comparepage h1{margin:24px 0}
.soundbox h2{font:27px Georgia,serif;margin-bottom:12px}.soundbox p{font-size:16px;line-height:1.75}.kit-empty-state{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);padding:30px;text-align:center}.kit-replace{background:#eaf0e5;padding:8px 12px;border-radius:6px;font-size:12px;margin:10px 0}.card .cardfoot{grid-template-columns:1fr 1fr!important}.kit-stage-panel>select{margin-top:10px}
@media(max-width:1050px){.kit-layout{grid-template-columns:minmax(0,1fr) 280px}.kit-stage-panel{padding:16px}.kit-piece span{font-size:9px}.planner-head{align-items:flex-start;flex-direction:column}.drums-intro .introcopy{max-width:70%}}
@media(max-width:760px){.kit-layout{grid-template-columns:1fr}.kit-meta{flex-wrap:wrap;gap:12px}.kit-meta label{min-width:130px}.kit-piece{width:80px}.kit-piece.ride{width:115px}.kit-piece.crash{width:100px}.kit-piece.kick{width:110px}.kit-piece.floor{width:96px}.kit-piece.snare{width:80px}.kit-piece.tom{width:68px}.kit-stage{min-height:340px}.drums-intro .introcopy{max-width:100%}.drums-intro{background-position:center}.drums-intro:before{background:#10342677}.drum-specs>div{font-size:13px;gap:15px}}
@media print{body>header,body>footer,.kit-layout>aside,.kit-meta,.planner-head .drum-actions,.kit-stage-panel>.drum-actions,.kit-row-actions,#kit-cloud-load,#drums-toast{display:none!important}.kit-layout{display:block}.kit-stage{print-color-adjust:exact;-webkit-print-color-adjust:exact}.drum-planner{padding:0}.kit-stage-panel{break-inside:avoid}.kit-piece{filter:none}.kit-result{break-inside:avoid}.kit-stage-panel .smallprint{display:none}}
/* Studio edition: the kit is the focal point, with native movable illustrations. */
.drum-planner{padding-top:40px;background:radial-gradient(ellipse at 15% 0,#e9eee4a3,transparent 50%)}.planner-head h1{font-size:clamp(44px,5vw,68px);line-height:1.03;margin:0;letter-spacing:-1.5px}.planner-head .eyebrow{letter-spacing:4px;font-size:11px}.planner-head p{font-size:17px;max-width:600px}.planner-head .btn{background:#fff;border-color:#dbe1d5;border-radius:9px;box-shadow:0 2px 4px #2b402a05}.planner-head .drum-actions .btn:first-child{background:#214c37;color:#fff;border-color:#214c37}.kit-meta{padding:18px 22px;border:1px solid #dfe5d8;background:#ffffffaa;border-radius:12px;gap:24px}.kit-meta label{font-size:11px;color:#62745d;font-weight:600;letter-spacing:.3px}.kit-meta input,.kit-meta select{background:white;color:#234532;border-color:#d9e1d1}.kit-layout{grid-template-columns:minmax(0,1fr) 350px;gap:22px}.kit-stage-panel{border-color:#e0e5db;padding:24px;border-radius:15px;box-shadow:0 7px 25px #243c2910}.kit-stage-panel h2{font-family:inherit;font-size:19px;letter-spacing:-.4px;font-weight:650;margin:0 0 20px}.stage-view-badge{border:1px solid #e0e5d8;border-radius:30px;padding:5px 10px;align-self:flex-start;background:#f5f7f0}.kit-stage-panel:has(#kit-stage){padding:24px 24px 12px}.kit-stage{aspect-ratio:1.42;min-height:480px;background:radial-gradient(ellipse at 50% 48%,#fff 0,#f6f5ee 58%,#ebede4 100%);border:1px solid #eceee5;border-radius:12px;box-shadow:inset 0 -12px 60px #d5dbce33;margin-top:18px}.kit-stage:before{content:'';position:absolute;inset:8% 9%;border-radius:50%;border:1px dashed #b7c4aa60;pointer-events:none}.kit-stage:after{content:attr(data-label);bottom:12px;color:#8a997e;font-size:8px;letter-spacing:3px}.kit-piece{width:15%;max-width:none;aspect-ratio:1;filter:drop-shadow(5px 12px 7px #1f352324);transition:filter .15s;display:block;transform:translate(-50%,-50%)}.kit-art{position:absolute;inset:0;pointer-events:none}.kit-art svg{width:100%;height:100%;overflow:visible}.kit-piece.kick{width:26%}.kit-piece.snare{width:21%}.kit-piece.tom{width:17%}.kit-piece.floor{width:23%}.kit-piece.ride{width:29%;z-index:2}.kit-piece.crash{width:26%;z-index:2}.kit-piece.hihat{width:22%;z-index:2}.kit-piece.throne{width:20%}.kit-piece.pedal{width:12%}.kit-piece.stand{width:13%;opacity:.92}.kit-piece.head{width:14%}.kit-piece.sticks{width:12%}.kit-piece.kit,.kit-piece.electronic{width:43%;max-width:none}.kit-piece:focus-visible{outline:2px solid #a67b3f;outline-offset:2px;border-radius:40%}.kit-piece[aria-pressed=true]{z-index:8;filter:drop-shadow(0 0 7px #a979354d) drop-shadow(5px 12px 7px #1f352329)}.kit-piece span.kit-piece-label{position:absolute;left:50%;top:83%;transform:translateX(-50%);margin:0;background:#fcfdf8e8;border:1px solid #d5ddce;color:#395137;padding:5px 9px;border-radius:5px;max-width:160px;font-size:10px;line-height:1.2;white-space:nowrap;box-shadow:0 3px 6px #203c2512;pointer-events:none}.kit-piece[aria-pressed=true] .kit-piece-label{background:#224c38;color:white;border-color:#224c38}.kit-selected-info{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:43px;margin:10px 0 0;font-size:12px;color:#66765f;flex-wrap:wrap}.kit-selected-info strong{font-weight:600;color:#294d35}.kit-selected-info a{color:#a1722f;white-space:nowrap}.kit-visual-note{font-size:10px;color:#819076;margin:4px 0 12px}.kit-stage-panel:has(#kit-stage)>.smallprint{font-size:11px;max-width:650px;line-height:1.6;margin:0}.kit-stage-panel:has(#kit-stage)>.drum-actions{border-top:1px solid #e7ebdf;padding-top:13px;margin:0;gap:7px}.kit-stage-panel:has(#kit-stage)>.drum-actions .btn{font-size:11px;padding:8px 11px;background:#fff}.kit-group-tabs{display:flex;background:#f1f4ed;padding:4px;border:1px solid #e2e7db;border-radius:8px;margin-top:16px}.kit-group-tabs button{flex:1;border:none;border-radius:6px;background:none;padding:9px 5px;font-size:11px;color:#56664e;cursor:pointer}.kit-group-tabs button[aria-pressed=true]{background:#224c36;color:#fff;box-shadow:0 2px 4px #233d3022}.kit-result{border:1px solid #e4e9df;padding:10px;margin-bottom:8px;border-radius:9px;background:#fff;box-shadow:0 2px 4px #2e412a03;gap:13px}.kit-result img{width:68px;height:68px;border-radius:7px;background:#f8f9f4}.kit-result strong{font-size:12px;font-weight:600;line-height:1.45}.kit-result small{margin-top:5px;font-size:10px}.kit-result>.btn{background:#f7f9f2;border-color:#e0e6d7;border-radius:8px;padding:7px 11px;font-size:19px;color:#315539}.kit-check{border-color:#e6ddcb;background:linear-gradient(135deg,#faf8f0,#f2eee3);border-radius:14px}.kit-check h2{font-family:inherit;font-size:18px;font-weight:650}.kit-check li{align-items:flex-start;font-size:12px;line-height:1.5;padding:13px 0}.kit-check li b{display:grid;place-items:center;flex:none;width:21px;height:21px;border-radius:50%;font-size:12px}.kit-check li.check-ok b{background:#27563b;color:white}.kit-check li.check-info b{background:#b4863e;color:white}.kit-check li.check-missing b{background:#e5e8dc;color:#75846b}.kit-check .smallprint{font-size:10px;line-height:1.7}.kit-ghost-layout{opacity:.23;filter:blur(.3px);position:absolute;inset:0;pointer-events:none}.kit-ghost{pointer-events:none}.kit-empty-state{inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse,#f9faf4ee 0,#f9faf4ac 38%,transparent 70%);z-index:5;color:#4f6850;padding:25px}.kit-empty-state .eyebrow{font-size:10px;letter-spacing:3px;color:#ac7b31}.kit-empty-state h3{font:clamp(24px,3vw,39px) Georgia,serif;color:#214932;max-width:450px;margin:15px 0 12px}.kit-empty-state p{font-size:13px;line-height:1.8;max-width:280px;margin:0 0 23px}.kit-empty-state .btn{font-size:12px;background:#234f38;border-color:#234f38;color:white;border-radius:7px}.kit-stage-panel:has(#kit-list){padding:22px 24px}#kit-list{display:flex;gap:12px;overflow:auto;padding-bottom:8px}#kit-list .kit-result{min-width:190px;width:220px;flex-shrink:0;align-items:flex-start;margin:0}#kit-list .kit-result img{width:55px;height:65px}#kit-list .kit-result>div{flex:1}#kit-list .kit-row-actions{width:100%;flex:none;justify-content:space-between;padding-top:8px;border-top:1px solid #e7eadf}#kit-list .kit-row-actions button{font-size:10px;padding:5px 8px}#kit-list .kit-result strong{font-size:11px}#kit-list .kit-result a{font-size:10px;color:#a37533;display:block;margin-top:5px}
@media(max-width:1150px){.kit-layout{grid-template-columns:minmax(0,1fr) 300px}.kit-stage{min-height:400px}.kit-stage-panel{padding:18px}.kit-stage-panel:has(#kit-stage){padding:18px}.kit-result img{width:55px;height:55px}.kit-piece span.kit-piece-label{font-size:8px;padding:4px 6px}}@media(max-width:850px){.kit-layout{grid-template-columns:1fr}.kit-layout>aside{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:start}.kit-layout>aside>.kit-stage-panel{margin:0}.kit-layout>aside>#kit-save-status{grid-column:1/-1}.kit-stage{min-height:420px}.kit-meta{flex-wrap:wrap}.planner-head .drum-actions{margin:0}.kit-stage-panel:has(#kit-stage){padding:16px}}@media(max-width:580px){.drum-planner{padding:28px 4% 40px}.planner-head h1{font-size:46px}.planner-head p{font-size:14px}.kit-meta{padding:14px;gap:12px}.kit-meta label{min-width:120px}.kit-layout>aside{display:block}.kit-layout>aside>.kit-stage-panel{margin-bottom:18px}.kit-stage{min-height:330px;aspect-ratio:1.2}.kit-piece span.kit-piece-label{font-size:7px;padding:3px 4px}.stage-head h2{font-size:16px}.stage-view-badge{font-size:9px!important}.kit-selected-info{font-size:10px}.kit-visual-note{font-size:9px}.kit-empty-state h3{font-size:28px}.kit-stage-panel:has(#kit-list){padding:17px}#kit-list .kit-result{min-width:175px;width:175px}.kit-meta select,.kit-meta input{font-size:13px}}
@media print{.kit-stage{min-height:480px;background:#f5f6ef}.kit-selected-info,.kit-visual-note,.kit-group-tabs,.kit-empty-state{display:none!important}.kit-piece span.kit-piece-label{font-size:9px}#kit-list{flex-wrap:wrap;overflow:visible}.kit-stage-panel{box-shadow:none}.kit-ghost-layout{display:none}}