.krack{--pitch:clamp(50px, calc((100cqi - 72px) / 4.4), 70px);margin-bottom:2.5rem;position:relative;container-type:inline-size}.krack *,.krack :before,.krack :after{box-sizing:border-box}.krack-stage{grid-template-columns:minmax(calc(var(--pitch) * 4 + 88px), 420px) minmax(200px, 300px);-webkit-user-select:none;user-select:none;align-items:start;gap:2rem;padding-bottom:4px;display:grid;position:relative}@container (width<=599px){.krack-stage{grid-template-columns:minmax(0,400px);gap:1.5rem}.krack-side{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:1rem;display:grid}.krack-note{margin:0!important}}@container (width<=470px){.krack-stage,.krack-side{grid-template-columns:minmax(0,1fr)}.krack-note{max-width:230px}}.krack-cables{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;inset:0}.krack-labels{pointer-events:none;z-index:2;position:absolute;inset:0}.krack-plugs{pointer-events:none;z-index:5;position:absolute;inset:0}.krack-rack{z-index:1;border-radius:30px 34px 28px 36px/34px 28px 36px 30px;padding:16px 18px 20px;position:relative}.krack-unit{background:var(--k-face);box-shadow:inset 2px 3px 5px var(--k-lo), inset -2px -2px 4px var(--k-hi);border-radius:16px 18px 15px 19px/18px 15px 19px 16px}.krack-unit--head{align-items:center;gap:12px;padding:9px 12px;display:flex}.krack-fan{background:var(--k-clay);width:42px;height:42px;box-shadow:inset 2px 2px 4px var(--k-hi), inset -3px -3px 6px var(--k-lo), 0 2px 3px var(--k-lo);border-radius:50%;flex:none;place-items:center;display:grid}.krack-fan svg{width:34px;height:34px;display:block}.krack-fan__well{fill:var(--k-hole)}.krack-fan__blade{fill:var(--k-clay-2)}.krack-fan__hub{fill:var(--k-clay)}.krack-fan__rotor{transform-box:fill-box;transform-origin:50%}.krack-lcd{background:var(--k-lcd);min-width:0;height:34px;font-family:var(--font-mono);letter-spacing:.08em;color:var(--k-lcd-ink);white-space:nowrap;text-transform:uppercase;border-radius:10px 12px 10px 11px;flex:1;align-items:center;gap:8px;padding:0 12px;font-size:12px;font-weight:600;display:flex;overflow:hidden;box-shadow:inset 2px 3px 5px #00000038,inset -1px -1px 2px #ffffff40}.krack-lcd__dot{background:var(--k-red);width:7px;height:7px;box-shadow:0 0 6px var(--k-red);border-radius:50%;flex:none;animation:1.2s steps(2,jump-none) infinite krack-blink}.krack[data-state=booting] .krack-lcd__dot,.krack[data-state=up] .krack-lcd__dot{background:var(--k-green);box-shadow:0 0 6px var(--k-green);animation:none}.krack[data-state=booting] .krack-lcd__dot{background:var(--k-amber);box-shadow:0 0 6px var(--k-amber);animation:.35s steps(2,jump-none) infinite krack-blink}.krack-panel{width:fit-content;margin:14px auto 0;padding:10px 26px 12px;position:relative}.krack-panel:before,.krack-panel:after{content:"";background:var(--k-screw);width:9px;height:9px;box-shadow:inset 1px 1px 1px var(--k-hi), inset -1px -1px 2px var(--k-lo);border-radius:50%;margin-top:-4.5px;position:absolute;top:50%}.krack-panel:before{left:9px}.krack-panel:after{right:9px}.krack-grid{grid-template-columns:repeat(4, var(--pitch));grid-auto-rows:var(--pitch);display:grid}.krack-port{flex-direction:column;align-items:center;display:flex;position:relative}.krack-port__top{width:calc(var(--pitch) * .66);height:calc(var(--pitch) * .24);justify-content:space-between;align-items:center;display:flex}.krack-port__top--live{isolation:isolate;position:absolute;top:0;left:0}.krack-port__label{font-family:var(--font-mono);font-size:clamp(8px, calc(var(--pitch) * .145), 9.5px);letter-spacing:.03em;color:var(--k-ink);font-weight:600;line-height:1}.krack-port__hole{width:calc(var(--pitch) * .44);height:calc(var(--pitch) * .44);margin-top:calc(var(--pitch) * .04);background:linear-gradient(160deg, var(--k-hole-2), var(--k-hole));box-shadow:inset 2px 4px 5px #00000073, inset -1px -1px 1px #ffffff14, 0 1px 0 var(--k-hi);border-radius:9px 10px 8px/10px 8px 10px 9px;transition:box-shadow .2s;position:relative}.krack-port__hole:after{content:"";background:repeating-linear-gradient(90deg,#dcbe788c 0 1.5px,#0000 1.5px 3px);border-radius:2px;height:3px;position:absolute;top:22%;left:26%;right:26%}.krack-port[data-ring] .krack-port__hole{box-shadow:inset 2px 4px 5px #00000073, 0 0 0 2.5px var(--k-face), 0 0 0 5px var(--ring)}.krack-port[data-ring=blue]{--ring:var(--k-blue)}.krack-port[data-ring=teal]{--ring:var(--k-teal)}.krack-port[data-ring=rose]{--ring:var(--k-rose)}.krack-port.is-aim .krack-port__hole{box-shadow:inset 2px 4px 5px #00000073, 0 0 0 2.5px var(--k-face), 0 0 0 5px var(--ring,var(--k-off)), 0 0 0 8px color-mix(in oklch, var(--color-primary) 45%, transparent)}.krack-led{background:radial-gradient(circle at 35% 30%, #ffffff8c, transparent 55%), var(--led,var(--k-off));border-radius:50%;flex:none;width:7px;height:7px;transition:background-color .18s,box-shadow .18s;box-shadow:inset -1px -1px 1px #0003}.krack-led[data-led=red]{--led:var(--k-red)}.krack-led[data-led=amber]{--led:var(--k-amber)}.krack-led[data-led=green]{--led:var(--k-green)}.krack-led[data-led]:not([data-led=off]){box-shadow:inset -1px -1px 1px #00000026, 0 0 7px var(--led)}.krack-led.is-boot{animation:.5s ease-out both krack-boot-led;animation-delay:var(--d,0s)}@keyframes krack-boot-led{0%{background-color:var(--k-off);box-shadow:none}30%{box-shadow:0 0 10px var(--k-green);background-color:#e9ffef}to{background-color:var(--k-green);box-shadow:0 0 7px var(--k-green)}}.krack-led.is-boot-blink{animation:.45s ease-out both krack-boot-blink;animation-delay:var(--d,0s)}@keyframes krack-boot-blink{0%,to{background-color:var(--k-off);box-shadow:none}35%{background-color:var(--k-green);box-shadow:0 0 8px var(--k-green)}}.krack-blades{margin-top:calc(var(--pitch) * .95);gap:8px;display:grid}.krack-blade{align-items:center;gap:10px;height:32px;padding:0 12px;display:flex}.krack-blade__name{font-family:var(--font-mono);letter-spacing:.06em;color:var(--k-ink);width:4.6em;font-size:10px;font-weight:600}.krack-blade__bays{flex:1;gap:5px;display:flex}.krack-blade__bays span{background:var(--k-clay);max-width:34px;height:12px;box-shadow:inset 1px 1px 2px var(--k-hi), inset -1px -2px 3px var(--k-lo);border-radius:4px 5px;flex:1}.krack-blade__leds{gap:5px;display:flex}.krack-side{z-index:2;position:relative}.krack-note{background:linear-gradient(175deg, color-mix(in oklch, var(--k-note) 85%, white), var(--k-note) 40%);width:min(100%,236px);color:var(--k-note-ink);box-shadow:inset -2px -3px 6px #0000000f, 0 1px 1px #00000014, 6px 12px 18px -10px var(--k-drop);border-radius:3px 4px 14px 3px/3px 3px 10px 4px;margin:6px 0 22px -54px;padding:18px 16px 14px;position:relative;transform:rotate(-3.2deg)}.krack-note:before{content:"";background:var(--k-tape);backdrop-filter:blur(1px);border-radius:2px;width:78px;height:22px;margin-left:-39px;position:absolute;top:-10px;left:50%;transform:rotate(4deg);box-shadow:0 1px 2px #0000000f}.krack-note__title{font-family:var(--font-sans);margin:0 0 6px;font-size:15px;font-style:italic;font-weight:600;line-height:1.2}.krack-note svg{width:100%;height:auto;display:block;overflow:visible}.krack-note__txt{font-family:var(--font-mono);fill:var(--k-note-ink);font-size:10.5px;font-weight:600}.krack-note__foot{opacity:.8;margin:4px 0 0;font-size:12px;font-style:italic;line-height:1.3}.krack-crt{border-radius:24px 26px 22px 28px/26px 22px 28px 24px;padding:12px 12px 14px}.krack-screen{background:radial-gradient(120% 90% at 40% 30%, color-mix(in oklch, var(--k-screen) 82%, #3a5a46), var(--k-screen));border-radius:14px 16px 13px 17px/16px 13px 17px 14px;min-height:178px;padding:12px 13px;position:relative;overflow:hidden;box-shadow:inset 3px 5px 10px #0000008c,inset -1px -1px 2px #ffffff0f}.krack-screen:after{content:"";pointer-events:none;background:repeating-linear-gradient(#ffffff08 0 1px,#0000 1px 3px);position:absolute;inset:0}.krack-term{font-family:var(--font-mono);color:var(--k-phosphor);text-shadow:0 0 6px color-mix(in oklch, var(--k-phosphor) 40%, transparent);white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text;margin:0;font-size:11.5px;line-height:1.55}.krack-term .is-dim{opacity:.55}.krack-term a{color:inherit;text-underline-offset:2px;text-decoration:underline}.krack-term a:focus-visible{outline:2px solid var(--k-phosphor);outline-offset:2px;border-radius:2px}.krack-caret{vertical-align:-.18em;background:var(--k-phosphor);width:.6em;height:1.05em;margin-left:1px;animation:1s steps(2,jump-none) infinite krack-blink;display:inline-block}.krack-crt__foot{justify-content:space-between;align-items:center;padding:9px 6px 0;display:flex}.krack-crt__brand{font-family:var(--font-mono);letter-spacing:.12em;color:var(--k-ink);font-size:9.5px}.krack-plug{width:calc(var(--pitch) * .5);height:calc(var(--pitch) * .56);color:inherit;font:inherit;cursor:grab;touch-action:none;pointer-events:auto;-webkit-tap-highlight-color:transparent;will-change:transform;background:0 0;border:0;margin:0;padding:0;position:absolute;top:0;left:0}.krack-plug[data-cable=blue]{--c:var(--k-blue);--c-d:var(--k-blue-d);--c-l:var(--k-blue-l)}.krack-plug[data-cable=teal]{--c:var(--k-teal);--c-d:var(--k-teal-d);--c-l:var(--k-teal-l)}.krack-plug[data-cable=rose]{--c:var(--k-rose);--c-d:var(--k-rose-d);--c-l:var(--k-rose-l)}.krack-plug__body{background:radial-gradient(120% 90% at 30% 20%, var(--c-l), var(--c) 60%);width:100%;height:100%;box-shadow:inset 2px 3px 4px #ffffff59, inset -3px -4px 6px #00000029, 0 3px 5px -1px var(--k-drop);border-radius:10px 11px 8px 9px/11px 10px 9px 8px;place-items:center;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s;display:grid;position:relative}.krack-plug__body:after{content:"";background:var(--c-d);border-radius:0 0 6px 6px;height:8px;position:absolute;bottom:-6px;left:30%;right:30%;box-shadow:inset 1px -2px 2px #0000002e}.krack-plug__tag{background:var(--k-tag);color:#3c3c46;font-family:var(--font-mono);font-size:clamp(7.5px, calc(var(--pitch) * .13), 8.5px);letter-spacing:.01em;border-radius:3px;padding:2px 3px 1px;font-weight:600;line-height:1.1;position:relative;transform:rotate(-3deg);box-shadow:0 1px 1px #00000026}.krack-plug:nth-child(2n) .krack-plug__tag{transform:rotate(2.5deg)}@media (hover:hover){.krack-plug:not(.is-held):hover .krack-plug__body{transform:translateY(-2px)}}.krack-plug.is-held{cursor:grabbing;z-index:2}.krack-plug.is-held .krack-plug__body{box-shadow:inset 2px 3px 4px #ffffff59, inset -3px -4px 6px #00000029, 0 14px 16px -6px var(--k-drop);transform:scale(1.1)rotate(-2deg)}.krack-plug.is-pop .krack-plug__body{animation:.34s cubic-bezier(.3,.7,.4,1) krack-squash}@keyframes krack-squash{0%{transform:scale(1.1,.8)translateY(2px)}40%{transform:scale(.94,1.07)}70%{transform:scale(1.03,.98)}to{transform:none}}.krack-plug.is-nope .krack-plug__body{animation:.32s krack-nope}@keyframes krack-nope{25%{transform:translate(-3px)rotate(-3deg)}60%{transform:translate(3px)rotate(2deg)}}.krack-plug:focus{outline:none}.krack-plug:focus-visible .krack-plug__body{outline:2px solid var(--color-primary);outline-offset:4px}.krack-foot{color:color-mix(in oklch, var(--color-base-content) 62%, transparent);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;margin-top:1.1rem;font-size:.875rem;display:flex}.krack-hint{max-width:30rem;margin:0;line-height:1.5}.krack-hint kbd{font-family:var(--font-mono);border:1px solid var(--color-base-300);background:var(--color-base-100);border-bottom-width:2px;border-radius:4px;padding:0 4px;font-size:.75rem}.krack-actions{flex-wrap:wrap;gap:.25rem 1rem;display:flex}.krack-btn{font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in oklch, currentColor 35%, transparent);text-underline-offset:3px;background:0 0;border:0;padding:2px 0}.krack-btn:hover{color:var(--color-primary);text-decoration-color:currentColor}.krack-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:3px}.krack-btn[hidden]{display:none}@media (prefers-reduced-motion:reduce){.krack-lcd__dot,.krack-caret{animation:none!important}.krack-plug.is-pop .krack-plug__body,.krack-plug.is-nope .krack-plug__body{animation:none}.krack-led.is-boot,.krack-led.is-boot-blink{animation-duration:.01ms;animation-delay:0s}.krack-plug__body{transition:none}}
