.chassis-host{width:100%;height:100%;position:relative;overflow:hidden}.chassis{width:calc(372 * var(--u));height:calc(640 * var(--u));color:#1c2530;font-family:var(--font-ui,ui-sans-serif, system-ui, sans-serif);touch-action:manipulation;position:absolute}.chassis-deck{width:calc(372 * var(--u));height:calc(396 * var(--u));border-radius:calc(46 * var(--u)) calc(46 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));box-shadow:inset 0 calc(1 * var(--u)) 0 #fffc;background:linear-gradient(#eceef0 0%,#d3d7dc 42%,#b9bec6 100%);position:absolute;top:0;left:0}.chassis-wordmark{left:0;top:calc(8 * var(--u));width:calc(372 * var(--u));justify-content:center;align-items:center;gap:calc(5 * var(--u));font-size:calc(20 * var(--u));letter-spacing:calc(-.3 * var(--u));color:#2b3a4a;line-height:1;display:flex;position:absolute}.chassis-wordmark__mark{width:calc(19 * var(--u));height:calc(19 * var(--u));background:#2f6ea8;border-radius:50%;position:relative;overflow:hidden}.chassis-wordmark__mark:after{content:"";left:calc(-3 * var(--u));top:calc(-9 * var(--u));width:calc(22 * var(--u));height:calc(14 * var(--u));background:#f2f4f6;border-radius:0 0 100%;position:absolute;transform:rotate(-14deg)}.chassis-screen{left:calc(66 * var(--u));top:calc(38 * var(--u));width:calc(240 * var(--u));height:calc(320 * var(--u));box-shadow:0 0 0 calc(5 * var(--u)) #f0f1f2, 0 0 0 calc(7 * var(--u)) #9aa1a9;background:#0e1420;position:absolute}.chassis-key{width:calc(52 * var(--u));height:calc(40 * var(--u));cursor:pointer;border-radius:calc(20 * var(--u));-webkit-tap-highlight-color:transparent;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.chassis-key:after{content:"";width:100%;min-width:44px;height:100%;min-height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.chassis-key__cap{width:calc(48 * var(--u));height:calc(19 * var(--u));box-shadow:inset 0 calc(1 * var(--u)) 0 #ffffff73, 0 calc(1 * var(--u)) calc(2 * var(--u)) #0000002e;background:linear-gradient(#b6bcc3 0%,#8d949c 55%,#767d86 100%);border-radius:50%}.chassis-key:active .chassis-key__cap{background:linear-gradient(#9aa1a9 0%,#7b828b 100%)}.chassis-key__tick{top:calc(19 * var(--u));width:calc(9 * var(--u));height:calc(2 * var(--u));border-radius:calc(1 * var(--u));background:#7d848c;position:absolute}.chassis-key[data-column=L] .chassis-key__tick{right:calc(-9 * var(--u))}.chassis-key[data-column=R] .chassis-key__tick{left:calc(-9 * var(--u))}.chassis-model{left:0;top:calc(358 * var(--u));width:calc(372 * var(--u));text-align:center;color:#2c3742;position:absolute}.chassis-model__name{font-family:Georgia,Times New Roman,serif;font-size:calc(21 * var(--u));line-height:calc(22 * var(--u))}.chassis-model__sub{font-size:calc(9 * var(--u));line-height:calc(10 * var(--u));letter-spacing:calc(1.2 * var(--u));font-weight:600}.chassis-lower{left:0;top:calc(392 * var(--u));width:calc(372 * var(--u));height:calc(248 * var(--u));border-radius:calc(28 * var(--u)) calc(28 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));background:linear-gradient(#55636f 0%,#46535e 40%,#3c4853 100%);position:absolute}.chassis-nav,.chassis-cmd{cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.chassis-nav{height:calc(32 * var(--u));border-radius:calc(16 * var(--u));color:#eef3f8;box-shadow:inset 0 calc(1 * var(--u)) 0 #ffffff38;background:linear-gradient(#34527a 0%,#263f61 100%)}.chassis-nav:active{background:linear-gradient(#263f61 0%,#1d3050 100%)}.chassis-nav svg{width:calc(18 * var(--u));height:calc(18 * var(--u));fill:currentColor;display:block}.chassis-led{left:calc(183 * var(--u));top:calc(20 * var(--u));width:calc(6 * var(--u));height:calc(6 * var(--u));background:#1a2634;border-radius:50%;position:absolute}.chassis-led[data-on=true]{box-shadow:0 0 calc(6 * var(--u)) calc(2 * var(--u)) #37a8ff8c;background:#37a8ff}.chassis-cmd{left:calc(24 * var(--u));width:calc(120 * var(--u));height:calc(34 * var(--u));border-radius:calc(17 * var(--u));color:#3b4650;font-size:calc(13 * var(--u));letter-spacing:calc(2 * var(--u));text-indent:calc(2 * var(--u));box-shadow:0 calc(1 * var(--u)) calc(2 * var(--u)) #00000040;background:linear-gradient(#f3f1ea 0%,#ddd9cf 100%);font-weight:600}.chassis-cmd:active{background:linear-gradient(#ddd9cf 0%,#cbc7bd 100%)}.chassis-cmd__mark{left:calc(6 * var(--u));width:calc(14 * var(--u));height:calc(14 * var(--u));color:#cbd3da;position:absolute}.chassis-cmd__mark svg{fill:none;stroke:currentColor;stroke-width:1.5px;width:100%;height:100%;display:block}.chassis-knob{box-shadow:inset 0 calc(2 * var(--u)) calc(3 * var(--u)) #ffffff1f, 0 calc(3 * var(--u)) calc(6 * var(--u)) #00000059;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;background:radial-gradient(circle at 50% 38%,#5d6b76 0%,#46545e 62%,#35414a 100%);border-radius:50%;position:absolute}.chassis-knob:active{cursor:grabbing}.chassis-knob__dial{border-radius:50%;position:absolute;inset:0}.chassis-knob__tooth{transform-origin:50% 400%;background:#ffffff38;width:2px;height:12%;position:absolute;top:2%;left:calc(50% - 1px)}.chassis-knob__cap{width:62%;height:62%;box-shadow:0 calc(1 * var(--u)) calc(2 * var(--u)) #0000004d;pointer-events:none;background:linear-gradient(160deg,#f4f6f7 0%,#dfe4e7 55%,#c9d0d4 100%);border-radius:50%;position:absolute;top:19%;left:19%}.chassis-key:focus-visible,.chassis-nav:focus-visible,.chassis-cmd:focus-visible,.chassis-knob:focus-visible{outline-offset:3px;outline:3px solid #2f7ff5}
