/* Original white frame, with a screen lowered from the header housing. */
:root { --console-menu-close-duration:260ms; }
body.console-preview { box-sizing:border-box;min-width:0; }
.console-power { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; }
.console-power__label { font-family:Inter,Arial,sans-serif;font-size:6px;font-weight:700;line-height:1;letter-spacing:.1em;text-transform:uppercase; }
.console-power svg { width:19px;height:19px; }
.console-power[aria-expanded=true] { box-shadow:inset 0 2px 5px #20355a20,inset 0 0 0 4px #f8fafb; }
body.console-menu-open { overflow:hidden; }
.console-menu-open #console-content { filter:blur(2px); }
.console-menu {
  position:fixed;
  inset:calc(var(--console-top) - 6px) 28px auto auto;
  width:min(710px,calc(100vw - 68px));
  max-width:none;
  max-height:calc(100dvh - var(--console-top) - var(--console-bottom) + 6px);
  margin:0;
  padding:58px 12px 18px;
  border:0;
  border-radius:0;
  overflow:hidden;
  color:#20355a;
  background:transparent;
  font-family:Inter,Arial,sans-serif;
  overscroll-behavior:contain;
}
.console-menu::backdrop { background:linear-gradient(to bottom,transparent 0 var(--console-top),#20355a24 var(--console-top)); }
.console-menu__conduits { position:absolute;z-index:1;inset:0 0 auto;width:100%;height:74px;overflow:visible;pointer-events:none;transform-origin:50% 0; }
.console-tube-base { fill:none;stroke:#141b24;stroke-width:12;stroke-linecap:round; }
.console-tube-ribs { fill:none;stroke:#59616c;stroke-width:9;stroke-dasharray:1.4 5;stroke-linecap:butt;opacity:.8; }
.console-tube-light { fill:none;stroke:#a9afb8;stroke-width:1.3;stroke-linecap:round;opacity:.7; }
.console-tube-plug { fill:#252d36;stroke:#737b85;stroke-width:1; }
.console-menu__panel {
  position:relative;
  z-index:2;
  max-height:calc(100dvh - var(--console-top) - var(--console-bottom) - 76px);
  overflow:auto;
  padding:20px 28px 17px;
  border:1px solid #becbd6;
  border-radius:5px 5px 11px 11px;
  background:linear-gradient(125deg,#fffffffa,#f7fafcee);
  backdrop-filter:blur(20px);
  box-shadow:0 16px 30px #20355a22,inset 0 0 0 4px #ffffffa8,inset 0 0 0 5px #d9e2e9;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#acbbc7 transparent;
}
.console-menu__panel:before { content:'';position:absolute;top:6px;left:17px;right:17px;height:2px;background:linear-gradient(90deg,#92dad6 0 60px,#d2dde5 60px); }
.console-menu__head { display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:17px;border-bottom:1px solid #d1dce5; }
.console-menu__kicker { display:block;margin:0 0 7px;color:#6c8194;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase; }
.console-menu__head h2 { margin:0;color:#20355a;font-family:inherit;font-size:25px;font-weight:500;letter-spacing:-.04em;line-height:1.2; }
.console-menu__close { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none;width:48px;height:48px;padding:5px;border:1px solid #bdccd7;border-radius:50%;background:linear-gradient(#fff,#eef3f6);color:#294260;box-shadow:0 2px 3px #20355a0c,inset 0 0 0 3px #ffffffb8;cursor:pointer; }
.console-menu__close svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round; }
.console-menu__close span { font-family:inherit;font-size:6px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }
.console-menu__links { display:grid;gap:0;margin:0;padding:0; }
.console-menu__link { position:relative;display:grid;grid-template-columns:25px minmax(0,1fr) 24px;align-items:center;gap:13px;padding:13px 5px;border-bottom:1px solid #dce5eb;color:#20355a!important;text-decoration:none!important;transition:background-color .15s,box-shadow .15s; }
.console-menu__link:before { content:'';position:absolute;left:-9px;top:13px;bottom:13px;width:2px;background:#24a9a0;transform:scaleY(0);transform-origin:center;transition:transform .17s var(--console-ease); }
.console-menu__link:active { background:#e0edf0;box-shadow:inset 0 2px 4px #20355a16; }
.console-menu__number { display:grid;place-items:center;align-self:start;margin-top:2px;min-height:21px;border:1px solid transparent;border-radius:3px;color:#8192a1;font-size:9px;font-variant-numeric:tabular-nums;transition:border-color .15s,background-color .15s,box-shadow .15s; }
.console-menu__title { display:block;font-size:26px;font-weight:400;letter-spacing:-.035em;line-height:1.1; }
.console-menu__description { display:block;margin-top:5px;color:#698093;font-size:11px;line-height:1.4; }
.console-menu__arrow { width:23px;height:23px;fill:none;stroke:#087f7b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--console-ease); }
.console-menu__footer { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:15px;color:#7c8f9e;font-size:9px;line-height:1.5; }
.console-menu__footer a { color:#4f6a84;text-underline-offset:4px; }
.console-sound { display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:4px 7px;border:1px solid #cedbe4;border-radius:3px;color:#4f6a84;background:#f8fbfc;font-family:inherit;font-size:9px;white-space:nowrap;cursor:pointer; }
.console-sound svg { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.console-menu__footer { flex-wrap:wrap; }
.console-menu a:focus-visible,.console-menu button:focus-visible { outline:2px solid #087f7b;outline-offset:3px; }
.console-menu[open]:not([data-state=closing]) .console-menu__panel { animation:console-screen-lower .58s var(--console-ease) both; }
.console-supports,.console-hoses { transform-origin:50% 0; }
.console-menu[open]:not([data-state=closing]) .console-supports { animation:console-rods-lower .58s var(--console-ease) both; }
.console-menu[open]:not([data-state=closing]) .console-hoses { animation:console-tubes-lower .58s var(--console-ease) both; }
.console-menu[open]::backdrop { animation:console-screen-shade .25s ease-out both; }
.console-menu[data-state=closing] .console-menu__panel { animation:console-screen-raise var(--console-menu-close-duration) ease-in both; }
.console-menu[data-state=closing] .console-supports,.console-menu[data-state=closing] .console-hoses { animation:console-tubes-raise var(--console-menu-close-duration) ease-in both; }
.console-menu[data-state=closing]::backdrop { animation:console-screen-shade-out var(--console-menu-close-duration) ease-in both; }
@keyframes console-screen-lower { 0% { opacity:.5;transform:translateY(calc(-100% - 80px)); } 76% { opacity:1;transform:translateY(3px); } 100% { opacity:1;transform:translateY(0); } }
@keyframes console-screen-raise { to { opacity:0;transform:translateY(calc(-100% - 80px)); } }
@keyframes console-tubes-lower { from { opacity:0;transform:translateY(-10px) scaleY(.1); } 75% { opacity:1;transform:scaleY(1.04); } to { opacity:1;transform:none; } }
@keyframes console-rods-lower { from { transform:scaleY(.05); } 76% { transform:scaleY(1.02); } to { transform:none; } }
@keyframes console-tubes-raise { to { opacity:0;transform:translateY(-10px) scaleY(.1); } }
@keyframes console-screen-shade { from { opacity:0; } to { opacity:1; } }
@keyframes console-screen-shade-out { from { opacity:1; } to { opacity:0; } }
@media(hover:hover) {
  .console-menu__link:hover { background:#ebf3f780; }
  .console-menu__link:hover:before { transform:scaleY(1); }
  .console-menu__link:hover .console-menu__number { border-color:#b9cbd5;background:#fff;box-shadow:0 2px 3px #20355a0b; }
  .console-menu__link:hover .console-menu__arrow { transform:translateX(4px); }
  .console-menu__close:hover { background:#eaf3f4; }
}
@media(max-width:700px) {
  :root { --console-top:calc(92px + env(safe-area-inset-top,0px));--console-bottom:calc(62px + env(safe-area-inset-bottom,0px)); }
  .console-header { padding-top:calc(5px + env(safe-area-inset-top,0px)); }
  .console-header__face { display:flex;height:73px;align-items:center;justify-content:space-between;gap:15px;padding-inline:16px; }
  .console-brand { margin-right:auto; }
  .console-nav { display:none; }
  .console-power-unit { display:flex;margin:0;padding:0; }
  .console-power { width:46px;height:46px; }
  .console-power svg { width:19px;height:19px; }
  .console-power__label { font-size:6px; }
  .console-header__underlay { height:14px; }
  .console-rail { top:calc(78px + env(safe-area-inset-top,0px));bottom:calc(54px + env(safe-area-inset-bottom,0px)); }
  .console-corner--tl,.console-corner--tr { top:calc(78px + env(safe-area-inset-top,0px)); }
  .console-footer { padding-bottom:calc(5px + env(safe-area-inset-bottom,0px)); }
  .console-menu { inset:calc(var(--console-top) - 4px) 9px auto;width:auto;max-height:calc(100dvh - var(--console-top) - var(--console-bottom) + 4px);padding:44px 6px 12px; }
  .console-menu__conduits { height:56px; }
  .console-menu__panel { max-height:calc(100dvh - var(--console-top) - var(--console-bottom) - 52px);padding:18px 18px 15px; }
  .console-menu__head { gap:12px;padding-bottom:14px; }
  .console-menu__kicker { font-size:8px; }
  .console-menu__head h2 { font-size:23px; }
  .console-menu__close { width:44px;height:44px; }
  .console-menu__link { grid-template-columns:20px minmax(0,1fr) 22px;column-gap:8px;padding-block:16px; }
  .console-menu__title { font-size:24px; }
  .console-menu__description { font-size:10px; }
  .console-menu__footer { flex-wrap:wrap;gap:4px 12px;margin-top:12px;font-size:8px; }
}
@media(max-height:800px) {
  .console-menu__description { display:none; }
  .console-menu__link { min-height:48px;padding-block:12px; }
  .console-menu__title { font-size:24px; }
}
@media(max-height:650px) {
  .console-menu__head { padding-bottom:10px; }
  .console-menu__head h2 { font-size:21px; }
  .console-menu__panel { padding-top:15px;padding-bottom:12px; }
  .console-menu__link { min-height:44px;padding-block:9px; }
  .console-menu__title { font-size:22px; }
  .console-menu__footer { margin-top:10px; }
  .console-menu__footer>span { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .console-menu,.console-menu::backdrop,.console-menu * { animation:none!important;transition:none!important; }
}
