.kb2d{--mm: calc(100cqw / 60);--cap-grey: #1c1c1e;--cap-red: #d22a2a;--cap-green: #2c9c46;position:relative;width:100%;aspect-ratio:60 / 100;container-type:inline-size;font-family:Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}.kb2d *{box-sizing:border-box}.kb2d-plate{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;filter:drop-shadow(0 calc(var(--mm) * 3) calc(var(--mm) * 5) rgba(0,0,0,.65))}.kb2d-halo{position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--led) 95%,transparent) 0%,color-mix(in srgb,var(--led) 85%,transparent) 62%,color-mix(in srgb,var(--led) 40%,transparent) 78%,transparent 100%);mix-blend-mode:screen;opacity:.9}.kb2d[data-lit=false] .kb2d-halo{display:none}.kb2d-cap{--face: var(--cap-grey);position:absolute;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:calc(var(--mm) * 1.6);cursor:pointer;color:#fff;font:inherit;-webkit-appearance:none;appearance:none;background:linear-gradient(155deg,color-mix(in srgb,var(--face) 70%,#fff),color-mix(in srgb,var(--face) 78%,#000) 45%,color-mix(in srgb,var(--face) 45%,#000));box-shadow:0 0 calc(var(--mm) * 1.6) calc(var(--mm) * .2) color-mix(in srgb,var(--led) 70%,transparent),0 calc(var(--mm) * .8) calc(var(--mm) * 1.2) #00000080;transition:filter .12s ease,transform .12s ease}.kb2d-cap[data-style=red]{--face: var(--cap-red)}.kb2d-cap[data-style=green]{--face: var(--cap-green)}.kb2d-top{position:absolute;left:7.5%;right:7.5%;top:5.5%;bottom:11%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:calc(var(--mm) * 2);background:linear-gradient(90deg,#ffffff0f,#0000001f 50%,#ffffff0a),linear-gradient(170deg,color-mix(in srgb,var(--face) 88%,#fff),var(--face) 60%,color-mix(in srgb,var(--face) 90%,#000));box-shadow:inset 0 calc(var(--mm) * .2) 0 #ffffff1f,0 0 calc(var(--mm) * .4) #00000059}.kb2d-cap[data-style=red] .kb2d-top,.kb2d-cap[data-style=green] .kb2d-top{box-shadow:inset 0 calc(var(--mm) * .2) 0 #ffffff2e,inset 0 0 calc(var(--mm) * 2.5) color-mix(in srgb,var(--led) 40%,transparent)}.kb2d-top b{font-weight:500;line-height:1;letter-spacing:.01em;color:#fff;text-shadow:0 0 calc(var(--mm) * 1.2) color-mix(in srgb,var(--led) 80%,transparent)}.kb2d-top b[data-size=l]{font-size:calc(var(--mm) * 4.6)}.kb2d-top b[data-size=m]{font-size:calc(var(--mm) * 3.8)}.kb2d-top b[data-size=s]{font-size:calc(var(--mm) * 3.2)}.kb2d-top span{margin-top:calc(var(--mm) * .8);padding:0 calc(var(--mm) * .6);max-width:100%;font-family:IBM Plex Mono,ui-monospace,Menlo,Consolas,monospace;font-size:calc(var(--mm) * 1.9);line-height:1.25;text-align:center;color:#fffc;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.kb2d-cap:not([disabled]):hover{filter:brightness(1.12)}.kb2d-cap:not([disabled]):active{transform:scale(.97)}.kb2d-cap[disabled]{cursor:default}.kb2d-cap[data-sel=true]{outline:2px solid #ff6400;outline-offset:calc(var(--mm) * .8)}.kb2d-cap:focus-visible{outline:2px solid #fff;outline-offset:calc(var(--mm) * .8)}.kb2d-knob-wrap{position:absolute;aspect-ratio:1}.kb2d-knob{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;border:0;border-radius:50%;cursor:pointer;-webkit-appearance:none;appearance:none;background:conic-gradient(from 200deg,#f4f4f4,#8d8f93 12%,#e9eaec,#7d7f83 38%,#f0f0f0 50%,#8a8c90 63%,#e4e5e7 75%,#85878b 88%,#f4f4f4);box-shadow:0 0 0 calc(var(--mm) * .3) #0b0b0c,0 calc(var(--mm) * 1.6) calc(var(--mm) * 2.6) #000000a6;transition:filter .12s ease}.kb2d-knob:before{content:"";position:absolute;top:4.5%;right:4.5%;bottom:4.5%;left:4.5%;border-radius:50%;background:conic-gradient(from 300deg,#fff3,#fff0 25%,#ffffff21,#fff0 75%,#fff3),repeating-conic-gradient(#2c2d30 0deg 1.5deg,#222326 1.5deg 3deg);box-shadow:inset 0 0 calc(var(--mm) * .6) #0009}.kb2d-mark{position:absolute;left:50%;top:9.5%;width:3.5%;height:15%;transform:translate(-50%);border-radius:999px;background:#fff;box-shadow:0 0 calc(var(--mm) * .4) #ffffff80}.kb2d-knob:not([disabled]):hover{filter:brightness(1.08)}.kb2d-knob[disabled]{cursor:default}.kb2d-knob[data-sel=true]{outline:2px solid #ff6400;outline-offset:calc(var(--mm) * .8)}.kb2d-knob:focus-visible{outline:2px solid #fff;outline-offset:calc(var(--mm) * .8)}.kb2d-turn{position:absolute;top:-24%;right:-24%;bottom:-24%;left:-24%;width:148%;height:148%;color:#ff6400;fill:currentColor;pointer-events:none;opacity:0;transition:opacity .15s ease}.kb2d-hint{position:absolute;top:80%;width:calc(var(--mm) * 13);pointer-events:none;font-family:IBM Plex Mono,ui-monospace,Menlo,Consolas,monospace;font-size:calc(var(--mm) * 1.7);line-height:1.25;letter-spacing:.03em;color:#ff6400;opacity:0;transition:opacity .15s ease}.kb2d-hint.kb2d-l{right:100%;margin-right:calc(var(--mm) * 3);text-align:right}.kb2d-hint.kb2d-r{left:100%;margin-left:calc(var(--mm) * 3);text-align:left}.kb2d-knob-wrap[data-sel=true] .kb2d-turn,.kb2d-knob-wrap[data-sel=true] .kb2d-hint{opacity:1}@media(prefers-reduced-motion:reduce){.kb2d-cap,.kb2d-knob,.kb2d-turn,.kb2d-hint{transition:none}}.kb2d-map{--kb2d-side: 110px;padding:0 var(--kb2d-side)}.kb2d-call{position:absolute;display:flex;align-items:center;transform:translateY(-50%);pointer-events:none}.kb2d-call.is-l{right:calc(100% - var(--x) * 1%);width:calc(var(--kb2d-side) + var(--x) * 1%)}.kb2d-call.is-r{left:calc(var(--x) * 1%);width:calc(var(--kb2d-side) + (100 - var(--x)) * 1%);flex-direction:row-reverse}.kb2d-chips{flex:none;max-width:calc(var(--kb2d-side) - 14px);display:flex;flex-direction:column;gap:4px}.kb2d-call.is-l .kb2d-chips{align-items:flex-end}.kb2d-call.is-r .kb2d-chips{align-items:flex-start}.kb2d-chips kbd{display:inline-block;max-width:100%;padding:3px 7px 2px;border:1px solid rgba(255,255,255,.22);border-bottom-width:2px;border-radius:5px;background:#151515;color:#e9e9e9;text-align:center;font-family:IBM Plex Mono,ui-monospace,Menlo,Consolas,monospace;font-size:11px;line-height:1.35;transition:border-color .15s ease,color .15s ease}.kb2d-chips .kb2d-ico{width:1.05em;height:1.05em;margin-right:4px;vertical-align:-.17em;color:#f5f5f58c}.kb2d-call[data-sel=true] kbd{border-color:#ff6400;color:#fff}.kb2d-line{position:relative;flex:1;min-width:8px;height:1px;background:#ffffff8c}.kb2d-call.is-l .kb2d-line{margin-left:6px}.kb2d-call.is-r .kb2d-line{margin-right:6px}.kb2d-line:after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffffff26}.kb2d-call.is-l .kb2d-line:after{right:-3px}.kb2d-call.is-r .kb2d-line:after{left:-3px}.kb2d-call[data-sel=true] .kb2d-line{background:#ff6400}.kb2d-call[data-sel=true] .kb2d-line:after{background:#ff6400;box-shadow:0 0 0 3px #ff640040}.kb2d-call.is-pick .kb2d-chips{pointer-events:auto;cursor:pointer}.kb2d-combo{display:flex;flex-wrap:wrap;gap:3px;max-width:100%}.kb2d-call.is-l .kb2d-combo{justify-content:flex-end}.kb2d-chips .kb2d-combo kbd{min-width:1.9em;padding-left:5px;padding-right:5px;white-space:nowrap}.kb2d-chips .kb2d-more{white-space:nowrap;font-size:11px;color:#f5f5f580}.kb2d-call.is-pick .kb2d-chips:hover kbd{border-color:#ffffff80;color:#fff}
/*# sourceMappingURL=/cdn/shop/t/9/assets/tp-kb2d.css.map */