@font-face{font-family:Barlow Condensed;src:url(/kitten-rack/assets/BarlowCondensed-SemiBold-B7YG4rBL.ttf)format("truetype");font-weight:600;font-display:swap}@font-face{font-family:Barlow;src:url(/kitten-rack/assets/Barlow-Medium-BYD2zMwq.ttf)format("truetype");font-weight:500;font-display:swap}@font-face{font-family:"FM1 5x7";src:url(/kitten-rack/assets/FM1-5x7-HAqKoO9r.ttf)format("truetype");font-display:swap}:root{--bg:#070707;--metal:#1b1b1b;--metal-2:#232323;--rust:#7a3412;--rust-2:#a8501f;--bone:#e8dcc2;--bone-dim:#9a9388;--orange:#ff7a1a;--orange-dim:#b5520c;--c-audio:#ff7a1a;--c-cv:#8bc34a;--c-gate:#e8dcc2;--c-pitch:#a875ff;--c-keys:#ffd23f;--head:"Barlow Condensed", "Arial Narrow", sans-serif;--dots:"FM1 5x7", monospace;--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08  0 0 0 0 .08  0 0 0 0 .08  0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");--scratch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg stroke='%23fff' stroke-opacity='.04' stroke-width='.7'%3E%3Cpath d='M10 40l90 -8M60 120l120 30M30 190l70 -50M150 20l50 70M5 90l40 10'/%3E%3C/g%3E%3C/svg%3E");--fam0:#2f2f35;--fam1:#2b2723;--fam2:#3c3c3c;--fam3:#151515;--fam4:#474a4d;--fam5:#1e262c;--fam6:#4b4743;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--bone);margin:0;font-family:Barlow,sans-serif}body{background-image:var(--noise), radial-gradient(ellipse at 50% -10%, #2a1306 0%, var(--bg) 60%);flex-direction:column;display:flex}button,select,input{font-family:var(--head);text-transform:uppercase;color:var(--bone);font-weight:600}button,select,a.btnlink{background:var(--metal-2) var(--noise);border:2px solid #000;border-bottom-color:var(--rust);cursor:pointer;letter-spacing:.5px;padding:5px 10px;font-size:15px;box-shadow:2px 2px #000}a.btnlink{font-family:var(--head);color:var(--bone);font-weight:600;text-decoration:none;display:inline-block}button:hover:not(:disabled),select:hover,a.btnlink:hover{border-color:var(--orange-dim);color:var(--orange)}button:active{box-shadow:none;transform:translate(2px,2px)}button:disabled{opacity:.45;cursor:not-allowed}#bar{background:var(--orange);z-index:5;border-bottom:3px solid #000;flex-wrap:wrap;align-items:center;gap:7px;padding:6px 14px;display:flex;position:relative}#bar .tag,#bar .meter{color:#000;border-color:#0008}#bar #name{color:var(--orange);border-color:#000}#bar button,#bar select{padding:4px 9px;font-size:14px}#bar .big{font-size:16px}#bar .meter .track{border-color:#000}#logo{font-family:var(--head);color:#000;letter-spacing:1px;margin:0 6px 0 0;font-size:30px;font-weight:600;line-height:1}.tag{border:1px solid var(--bone-dim);font-family:var(--head);padding:3px 8px;font-size:15px;font-weight:600}.tag.small{font-size:13px}.spacer{flex:1}.big{color:var(--orange);background:#000;padding:5px 14px;font-size:17px}.big.on{background:var(--orange);color:#000;border-color:#000;box-shadow:0 0 18px #ff7a1a88,2px 2px #000}.meter{font-family:var(--head);align-items:center;gap:6px;font-size:15px;font-weight:600;display:flex}.meter .track{background:#000;border:2px solid #000;width:110px;height:12px}#cpu-bar{background:repeating-linear-gradient(90deg, var(--c-cv) 0 6px, #5e8a2f 6px 8px);width:0;height:100%;transition:width .2s}#cpu-bar.hot{background:repeating-linear-gradient(90deg,#ff3d1a 0 6px,#8a1d0a 6px 8px)}main{flex:1;min-height:0;display:flex}#catalog{background:#0b0b0b var(--noise);border-right:3px solid #000;flex-shrink:0;width:178px;padding:10px;overflow-y:auto}#catalog h3{font-family:var(--head);text-transform:uppercase;color:var(--orange);letter-spacing:.5px;border-bottom:2px solid var(--orange);margin:14px 0 6px;font-size:18px;font-weight:600}#catalog .add{text-align:left;border-left:6px solid var(--tone,#333);justify-content:space-between;width:100%;margin:3px 0;padding:3px 8px;font-size:15px;display:flex;box-shadow:1px 1px #000}#catalog .add i{color:var(--bone-dim);font-style:normal;font-family:var(--dots);align-self:center;font-size:8px}.hint{color:var(--bone-dim);margin:0;font-size:12px;line-height:1.4}#stage{--z:1;flex:1;padding:18px;position:relative;overflow:auto}#rack{transform-origin:0 0;box-shadow:0 0 0 2px var(--orange-dim), 0 10px 30px #000;background:#040404;border:4px solid #000;position:relative}.rowtools{font-family:var(--head);align-items:center;gap:10px;margin-top:14px;font-size:15px;font-weight:600;display:flex}.row{background:linear-gradient(#0000 18px, #090909 18px, #090909 calc(100% - 18px), #0000 calc(100% - 18px)), var(--noise);height:380px;position:absolute;left:0;right:0}.row:before,.row:after{content:"";background:radial-gradient(circle at 10px 9px, #000 3px, #0000 4px) 0 0 / 20px 18px, linear-gradient(#9a9a9a, #4a4a4a 40%, #262626), var(--noise);border-top:1px solid #b0b0b0;border-bottom:1px solid #000;height:18px;position:absolute;left:0;right:0}.row:before{top:0}.row:after{bottom:0}.row-num{font-family:var(--head);color:var(--orange-dim);font-size:22px;font-weight:600;position:absolute;top:50%;left:4px;transform:translateY(-50%)rotate(-90deg)}.panel{--tone:var(--metal);background-color:var(--tone);background-image:var(--scratch), var(--noise), linear-gradient(175deg, #ffffff0d, #0000 40%, #00000059);-webkit-user-select:none;user-select:none;border:1px solid #000;border-color:#ffffff1a #000 #000 #ffffff1a;position:absolute;box-shadow:inset 0 0 0 1px #0008,2px 0 #000}.fam-0{--tone:var(--fam0)}.fam-1{--tone:var(--fam1)}.fam-2{--tone:var(--fam2)}.fam-3{--tone:var(--fam3)}.fam-4{--tone:var(--fam4)}.fam-5{--tone:var(--fam5)}.fam-6{--tone:var(--fam6)}.panel.lifted{z-index:20;box-shadow:0 16px 30px #000, 0 0 0 2px var(--orange);opacity:.92}.panel.blocked{box-shadow:0 16px 30px #000,0 0 0 2px #e0301a}.panel.fixed{--tone:#0e0e0e;border-top:3px solid var(--orange)}.head{cursor:grab;border-bottom:1px solid #ffffff12;justify-content:center;align-items:flex-end;height:40px;padding:0 6px 3px;display:flex;position:relative}.head b{font-family:var(--head);text-transform:uppercase;color:var(--orange);letter-spacing:.3px;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:19px;font-weight:600;line-height:1;overflow:hidden}.head .hp{font-family:var(--dots);color:var(--bone-dim);font-size:8px;position:absolute;top:4px;left:50%;transform:translate(-50%)}.screw{background:radial-gradient(circle at 35% 35%,#c9c9c9,#4a4a4a 70%);border-radius:50%;width:9px;height:9px;position:absolute;box-shadow:0 0 0 1px #000}.screw:after{content:"";background:#000;height:1px;position:absolute;top:4px;left:1px;right:1px;transform:rotate(35deg)}.head .screw{top:3px}.foot .screw{bottom:3px}.screw.l{left:3px}.screw.r{right:3px}.kill{box-shadow:none;color:var(--bone-dim);background:#000;border:1px solid #000;padding:0 4px;font-size:12px;line-height:1.2;position:absolute;top:14px;right:2px}.knob{flex-direction:column;align-items:center;width:52px;display:flex;position:absolute;transform:translate(-50%,-24px)}.knob svg{cursor:ns-resize;touch-action:none;width:36px;height:36px}.k-name{font-family:var(--dots);color:var(--bone);white-space:nowrap;max-width:54px;height:11px;font-size:8px;overflow:hidden}.k-val{font-family:var(--dots);color:var(--bone-dim);white-space:nowrap;max-width:54px;height:11px;font-size:8px;overflow:hidden}.knob.turning .k-val,.knob:hover .k-val{color:var(--orange)}.k-track{fill:none;stroke:#000;stroke-width:3.5px}.k-ring{fill:none;stroke:var(--orange);stroke-width:3px;stroke-linecap:round}.k-mod{fill:none;stroke:var(--c-cv);stroke-width:1.5px;opacity:.9}.k-cap{fill:#121212;stroke:#000;stroke-width:1.5px}.knob svg:hover .k-cap{fill:#262626}.k-tick{stroke:var(--bone);stroke-width:2.4px;stroke-linecap:round}.knob.toggle .k-cap{fill:#3a1d0a}.knob.choice .k-ring{stroke:var(--bone-dim)}.jack{cursor:crosshair;touch-action:none;flex-direction:column;align-items:center;width:34px;display:flex;position:absolute;transform:translate(-50%,-50%)}.jack .hole{background:radial-gradient(circle,#000 0 4px,#8a8a8a 5px 6px,#2a2a2a 7px);border-radius:50%;width:18px;height:18px;position:relative;box-shadow:0 0 0 2px #000}.jack.out .hole{box-shadow:0 0 0 2px #000, 0 0 0 5px var(--orange-dim)}.jack:hover .hole{box-shadow:0 0 0 2px #000, 0 0 0 4px var(--orange)}.j-name{font-family:var(--dots);white-space:nowrap;color:var(--bone);max-width:36px;margin-top:4px;font-size:8px;overflow:hidden}.j-pin{font-family:var(--dots);color:#000;background:var(--orange);white-space:nowrap;padding:0 1px;font-size:8px;position:absolute;top:-9px}.jack.out .j-name{color:var(--orange)}.jack.k-gate .hole:after{content:"";border:1px dotted #e8dcc244;border-radius:50%;position:absolute;inset:-9px}#wires{pointer-events:none;z-index:10;position:absolute;top:0;left:0;overflow:visible}.wire{pointer-events:visibleStroke;cursor:pointer}.wire.live{pointer-events:none}.w-shade{fill:none;stroke:#000;stroke-width:8px;stroke-opacity:.8;stroke-linecap:round}.w-line{fill:none;stroke-width:4.5px;stroke-linecap:round;opacity:.93}.w-plug{stroke:#000;stroke-width:2.5px}.wire:hover .w-line{stroke-width:6px;opacity:1;filter:drop-shadow(0 0 4px #fff6)}body:not(.live) .wire .w-line{opacity:.75}.menu{z-index:50;background:#111 var(--noise);width:230px;max-height:70vh;box-shadow:0 0 0 2px var(--orange-dim), 6px 6px 0 #000;border:2px solid #000;padding:10px;font-size:13px;position:fixed;overflow-y:auto}.menu b{color:var(--orange);font-family:var(--head);text-transform:uppercase;font-size:19px;font-weight:600}.menu p{color:var(--bone-dim);margin:4px 0 8px}.menu label{cursor:pointer;margin:3px 0;display:block}.menu .amt{align-items:center;gap:6px;margin-top:10px;display:flex}.menu .amt input{accent-color:var(--orange);flex:1}.menu button{width:100%;margin-top:10px}footer{color:var(--bone-dim);background:#0b0b0b;border-top:3px solid #000;flex-wrap:wrap;gap:18px;padding:6px 14px;font-size:12px;display:flex}footer .credit{margin-left:auto}#about{color:var(--orange)}#toast{background:var(--orange);color:#000;opacity:0;pointer-events:none;z-index:60;font-family:var(--head);text-transform:uppercase;border:2px solid #000;padding:6px 16px;font-size:18px;font-weight:600;transition:all .2s;position:fixed;bottom:46px;left:50%;transform:translate(-50%,20px);box-shadow:4px 4px #000}#toast.on{opacity:1;transform:translate(-50%)}input[type=range]{accent-color:var(--orange)}#name{color:var(--orange);text-transform:uppercase;background:#000;width:150px;font-size:17px}.armed{color:#000!important;background:#e0301a!important}.kill.armed{font-size:11px}dialog{background:#111 var(--noise);color:var(--bone);box-shadow:0 0 0 2px var(--orange-dim), 8px 8px 0 #000;border:2px solid #000;width:min(520px,92vw)}dialog::backdrop{background:#000a}dialog b{font-family:var(--head);text-transform:uppercase;color:var(--orange);font-size:22px;font-weight:600}dialog p{color:var(--bone-dim);font-size:13px}dialog textarea{width:100%;color:var(--bone);border:1px solid var(--rust);background:#000;font-family:monospace;font-size:11px}@media (max-width:700px){main{flex-direction:column}#catalog{border-bottom:3px solid #000;border-right:0;width:auto;max-height:30vh}#logo{font-size:26px}}#midi a{color:var(--orange)}#link.on{background:var(--orange);color:#000;box-shadow:0 0 12px var(--orange)}dialog select{width:100%;color:var(--bone);border:1px solid var(--rust);background:#000;margin:6px 0;font-family:monospace;font-size:13px}dialog label{color:var(--bone-dim);margin:6px 0;display:block}dialog input{color:var(--bone);border:1px solid var(--rust);background:#000;padding:3px 6px;font-family:monospace}.roll-open{color:var(--orange);background:#000;padding:1px 5px;font-size:10px;position:absolute;top:6px;right:30px}dialog.roll{width:min(1500px,96vw);max-height:92vh}.roll-head{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.roll-head input{width:56px}.roll-head button.armed{color:#000;background:var(--orange)}.roll-scroll{background:#0b0b0b;border:2px solid #000;max-height:70vh;overflow:auto}.roll-grid{cursor:crosshair;position:relative}.roll-row{box-sizing:border-box;background:#151515;border-bottom:1px solid #1d1d1d;height:16px;position:absolute;left:0}.roll-row.black{background:#0e0e0e}.roll-row.c{border-bottom-color:#3a2a1a}.roll-key{text-align:right;box-sizing:border-box;width:44px;height:16px;color:var(--bone-dim);cursor:pointer;background:#000;padding-right:4px;font-family:monospace;font-size:10px;line-height:16px;display:inline-block;position:sticky;left:0}.roll-row.c .roll-key{color:var(--orange)}.roll-beat{pointer-events:none;background:#232323;width:1px;position:absolute;top:0;bottom:0}.roll-beat.bar{background:#3a3a3a}.roll-note{background:var(--orange);pointer-events:none;border:1px solid #000;border-radius:2px;position:absolute}.roll-note.acc{box-shadow:0 0 6px var(--orange);background:#ffd08a}.k-cc{font-family:var(--dots);color:#000;background:var(--orange);pointer-events:none;height:9px;padding:0 2px;font-size:7px;line-height:9px;display:none;position:absolute;top:12px;right:-6px}.knob.mapped .k-cc{display:block}body.learning .knob svg{cursor:crosshair;outline:1px dashed var(--orange-dim);border-radius:50%}body.learning .knob.learn-target svg{outline:2px solid var(--orange);animation:.6s steps(2,end) infinite learnblink}@keyframes learnblink{50%{outline-color:#0000}}#learn.on{background:var(--orange);color:#000}#map-list{max-height:40vh;margin:8px 0;overflow:auto}.map-row{border-bottom:1px solid #222;grid-template-columns:70px 1fr auto auto;align-items:center;gap:8px;padding:3px 0;display:grid}.map-row b{font-size:16px}.map-presets{flex-wrap:wrap;gap:6px;margin:4px 0;display:flex}