.drum-planner{--stage-line:color-mix(in srgb, var(--color-ink-3) 22%, transparent);--stage-fill:color-mix(in srgb, var(--color-paper-2) 74%, var(--color-paper))}.drum-planner button,.drum-planner input,.drum-planner select{font:inherit}.drum-planner button:not(:disabled),.drum-planner select{cursor:pointer}.field-block{background:var(--color-paper);flex-direction:column;gap:.4rem;min-width:0;padding:1rem 1.25rem;display:flex}.field-block>span,.dimension-field>span,.head-target-field>span{letter-spacing:.14em;color:var(--color-ink-3);text-transform:uppercase;font-size:.625rem;font-weight:500}.interval-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-top:.35rem;display:grid}.interval-picker label{border:1px solid var(--color-rule);background:var(--color-paper-2);min-width:0;color:var(--color-ink-2);cursor:pointer;text-align:left;border-radius:.6rem;flex-direction:column;align-items:flex-start;padding:.55rem .6rem;transition:border-color .14s,color .14s,background .14s,transform .14s;display:flex}.interval-picker label:hover{border-color:var(--color-ink-3);color:var(--color-ink);transform:translateY(-1px)}.interval-picker label:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}.interval-picker label.is-active{border-color:var(--color-accent);color:var(--color-paper);background:var(--color-accent);box-shadow:0 3px 10px color-mix(in srgb, var(--color-accent) 24%, transparent)}.interval-picker strong{text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:.625rem;font-weight:600;line-height:1.2;overflow:hidden}.interval-picker small{font-family:var(--font-mono);opacity:.72;margin-top:.2rem;font-size:.55rem;line-height:1}.head-target-field{border:1px solid var(--color-rule);background:var(--color-paper-2);border-radius:.65rem;flex-direction:column;gap:.4rem;min-width:0;padding:.7rem;display:flex}.field-select{appearance:none;width:100%;color:var(--color-ink);background-color:#0000;background-image:linear-gradient(45deg, transparent 50%, var(--color-ink-3) 50%), linear-gradient(135deg, var(--color-ink-3) 50%, transparent 50%);background-position:calc(100% - 5px) calc(50% - 1px),100% calc(50% - 1px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;border:0;border-radius:0;outline:none;padding:0 1rem 0 0;font-size:.8125rem}.field-select option{background:var(--color-paper);color:var(--color-ink)}.kit-stage{isolation:isolate;background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 42%), linear-gradient(var(--stage-line) 1px, transparent 1px), linear-gradient(90deg, var(--stage-line) 1px, transparent 1px);background-color:var(--stage-fill);background-size:auto,24px 24px,24px 24px;min-height:590px;position:relative;overflow:hidden}.kit-stage:after{z-index:-1;background:linear-gradient(transparent, var(--stage-line) 12%, var(--stage-line) 88%, transparent);content:"";width:1px;height:124%;position:absolute;top:-12%;left:50%}.kit-rug{z-index:-1;border:1px solid var(--stage-line);background:repeating-radial-gradient(ellipse, transparent 0, transparent 17px, color-mix(in srgb, var(--color-accent) 7%, transparent) 18px, transparent 19px);border-radius:48%;width:min(76%,490px);height:72%;position:absolute;top:14%;left:50%;transform:translate(-50%)}.kit-drum{z-index:4;border:2px solid color-mix(in srgb, var(--color-ink-3) 42%, transparent);color:var(--color-ink);background:radial-gradient(circle at 38% 32%, #ffffff8c, transparent 30%), radial-gradient(circle at center, var(--color-paper) 0 53%, color-mix(in srgb, var(--color-paper-2) 72%, var(--color-ink-3)) 54% 61%, var(--color-paper) 62%);box-shadow:0 7px 14px #0000001f, inset 0 0 0 3px color-mix(in srgb, var(--color-paper) 72%, transparent);border-radius:50%;place-content:center;transition:border-color .16s,box-shadow .16s,transform .16s;display:grid;position:absolute;transform:translate(-50%,-50%)}.kit-drum:hover{border-color:var(--color-ink-3);transform:translate(-50%,-50%)scale(1.04)}.kit-drum.is-selected{z-index:8;border-color:var(--color-accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--color-accent) 17%, transparent), 0 10px 24px #00000029, inset 0 0 0 3px color-mix(in srgb, var(--color-paper) 72%, transparent)}.kit-drum-ring{border:1px dashed color-mix(in srgb, var(--color-ink-3) 45%, transparent);border-radius:inherit;position:absolute;inset:9%}.kit-drum-ring:before,.kit-drum-ring:after{background:var(--color-ink-3);content:"";opacity:.75;border-radius:10px;position:absolute;inset:-3px 47%}.kit-drum-ring:after{transform:rotate(90deg)}.kit-drum-interval{z-index:1;font-family:var(--font-serif);color:var(--color-accent);font-size:1.08rem;font-weight:700;line-height:1;position:relative}.kit-drum-note{z-index:1;font-family:var(--font-mono);color:var(--color-ink-3);margin-top:3px;font-size:.55rem;position:relative}.kit-drum-label{text-overflow:ellipsis;white-space:nowrap;width:max-content;max-width:100px;font-size:.625rem;font-weight:500;line-height:1.2;position:absolute;top:calc(100% + 10px);left:50%;overflow:hidden;transform:translate(-50%)}.kit-drum-kick{background:radial-gradient(circle at 38% 32%, #ffffff57, transparent 30%), radial-gradient(circle at center, color-mix(in srgb, var(--color-ink) 8%, var(--color-paper)) 0 25%, var(--color-paper) 26% 53%, color-mix(in srgb, var(--color-paper-2) 72%, var(--color-ink-3)) 54% 61%, var(--color-paper) 62%)}.kit-cymbal{z-index:1;border:1px solid color-mix(in srgb, #b98c32 36%, var(--color-rule));background:repeating-radial-gradient(ellipse, color-mix(in srgb, #d6a740 12%, var(--color-paper-2)) 0 4px, color-mix(in srgb, #9c721f 13%, var(--color-paper-2)) 5px 6px);opacity:.72;border-radius:50%;width:112px;height:46px;position:absolute;transform:translate(-50%,-50%)rotate(-8deg);box-shadow:0 5px 12px #00000014}.kit-cymbal span{background:color-mix(in srgb, #856020 60%, var(--color-ink-3));border-radius:50%;width:9px;height:9px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.kit-cymbal-left{top:23%;left:22%}.kit-cymbal-right{top:19%;left:78%;transform:translate(-50%,-50%)rotate(9deg)}.pitch-card{border:1px solid var(--color-rule);background:var(--color-paper-2);border-radius:.75rem;flex-direction:column;align-items:flex-start;min-width:0;padding:.85rem;display:flex}.pitch-card>span{color:var(--color-ink-3);font-size:.625rem}.pitch-card>strong{font-family:var(--font-serif);margin-top:.25rem;font-size:1.55rem;font-weight:500}.pitch-card>code{font-family:var(--font-mono);color:var(--color-ink-3);margin-bottom:.75rem;font-size:.625rem}.register-button{border:1px solid var(--color-rule);background:var(--color-paper);width:1.75rem;height:1.75rem;color:var(--color-ink-2);border-radius:50%;place-items:center;display:grid}.register-button:disabled{cursor:not-allowed;opacity:.35}.range-spectrum{border:1px solid var(--color-rule);background:var(--color-paper-2);border-radius:.75rem;margin-bottom:1rem;padding:.85rem}.range-spectrum-heading{color:var(--color-ink-3);letter-spacing:.09em;text-transform:uppercase;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:.5rem;font-size:.5625rem;font-weight:500;display:grid}.range-spectrum-heading span:nth-child(2){color:var(--color-ink-2);text-align:center}.range-spectrum-heading span:last-child{text-align:right}.range-spectrum-bar{border:1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-rule));background:linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 28%, var(--color-paper)), color-mix(in srgb, var(--color-accent) 72%, var(--color-paper)) 50%, color-mix(in srgb, var(--color-accent) 28%, var(--color-paper)));border-radius:999px;height:.7rem;margin:1.35rem 0 .45rem;position:relative;box-shadow:inset 0 1px 2px #00000017}.range-frequency-tick{background:color-mix(in srgb, var(--color-ink) 42%, transparent);width:1px;height:1.05rem;position:absolute;top:50%;transform:translate(-50%,-50%)}.range-frequency-tick:after{border:1px solid color-mix(in srgb, var(--color-ink) 38%, transparent);background:var(--color-paper);content:"";border-radius:50%;width:.28rem;height:.28rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.range-frequency-tick.is-target{background:var(--color-ink);width:2px;height:1.25rem}.range-frequency-tick.is-target:after{border-color:var(--color-ink);background:var(--color-accent);width:.4rem;height:.4rem}.range-target-marker{color:var(--color-accent);letter-spacing:.08em;text-transform:uppercase;font-size:.5rem;font-style:normal;font-weight:600;position:absolute;bottom:calc(100% + .35rem);transform:translate(-50%)}.range-spectrum-bounds{font-family:var(--font-mono);color:var(--color-ink-3);justify-content:space-between;font-size:.5625rem;display:flex}.range-spectrum-bounds span{gap:.35rem;display:flex}.range-spectrum-bounds strong{color:var(--color-ink-2);font-weight:500}.range-frequency-list{grid-template-columns:repeat(auto-fit,minmax(3.1rem,1fr));gap:.3rem;margin-top:.8rem;display:grid}.range-frequency-list>span{border:1px solid var(--color-rule);background:var(--color-paper);border-radius:.45rem;flex-direction:column;align-items:center;min-width:0;padding:.32rem .2rem;display:flex}.range-frequency-list>span.is-target{border-color:var(--color-accent);box-shadow:0 0 0 1px color-mix(in srgb, var(--color-accent) 12%, transparent)}.range-frequency-list strong{font-family:var(--font-serif);font-size:.6875rem;font-weight:600}.range-frequency-list small{max-width:100%;color:var(--color-ink-3);font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;font-size:.47rem;overflow:hidden}.range-spectrum-caption{color:var(--color-ink-3);margin-top:.65rem;font-size:.625rem;line-height:1.45}.dimension-field{flex-direction:column;gap:.35rem;display:flex}.dimension-control{border:1px solid var(--color-rule);background:var(--color-paper-2);border-radius:.6rem;align-items:center;display:flex;overflow:hidden}.dimension-field input{appearance:textfield;width:100%;min-width:0;color:var(--color-ink);font-family:var(--font-mono);text-align:center;background:0 0;border:0;outline:0;padding:.55rem .25rem;font-size:.75rem}.dimension-control button{width:2rem;color:var(--color-ink-2);background:color-mix(in srgb, var(--color-paper) 70%, transparent);border:0;flex:0 0 2rem;align-self:stretch;place-items:center;font-size:.9rem;transition:color .12s,background .12s;display:grid}.dimension-control button:first-child{border-right:1px solid var(--color-rule)}.dimension-control button:last-child{border-left:1px solid var(--color-rule)}.dimension-control button:hover:not(:disabled){color:var(--color-accent);background:var(--color-paper)}.dimension-control button:disabled{cursor:not-allowed;opacity:.3}.dimension-field i{color:var(--color-ink-3);padding-right:.25rem;font-size:.6875rem;font-style:normal}.dimension-field>small{color:var(--color-ink-3);font-family:var(--font-mono);font-size:.5rem}@media (width<=639px){.kit-stage{min-height:460px}.kit-cymbal{width:84px;height:36px}.kit-drum{transform:translate(-50%,-50%)scale(.88)}.kit-drum:hover{transform:translate(-50%,-50%)scale(.92)}}