/* Frosted mobile chrome; the device still controls the light/dark palette. */
@media screen and (max-width:767px){
  :root{
    --mobile-glass:rgba(255,255,255,.72);
    --mobile-glass-menu:rgba(250,252,255,.94);
    --mobile-glass-footer:rgba(255,255,255,.79);
    --mobile-glass-edge:rgba(255,255,255,.88);
    --mobile-glass-outline:rgba(117,146,185,.25);
    --mobile-glass-shine:rgba(255,255,255,.94);
    --mobile-glass-control:rgba(238,245,255,.68);
    --mobile-glass-shadow:0 8px 30px rgba(31,55,89,.12);
  }
  .vp .hdr{
    top:calc(8px + env(safe-area-inset-top,0px));
    margin:8px 10px 0;
    width:calc(100% - 20px);
    border:1px solid var(--mobile-glass-edge);
    border-radius:23px;
    background:linear-gradient(140deg,rgba(255,255,255,.2),transparent 52%),var(--mobile-glass);
    -webkit-backdrop-filter:blur(24px) saturate(165%);
    backdrop-filter:blur(24px) saturate(165%);
    box-shadow:inset 0 1px 0 var(--mobile-glass-shine),0 0 0 1px var(--mobile-glass-outline),var(--mobile-glass-shadow);
  }
  .vp .hdr-in{min-height:62px;padding:8px 13px;gap:10px}
  .vp .hdr .burger{
    background:var(--mobile-glass-control);color:var(--ink);
    border:1px solid var(--mobile-glass-outline);
    box-shadow:inset 0 1px 0 var(--mobile-glass-shine);
    flex-shrink:0;
  }
  .vp .hdr .mmenu{
    top:calc(100% + 9px);left:-1px;right:-1px;
    max-height:calc(100dvh - 104px - env(safe-area-inset-top,0px));
    background:var(--mobile-glass-menu);
    border:1px solid var(--mobile-glass-edge);border-radius:23px;
    -webkit-backdrop-filter:blur(24px) saturate(145%);
    backdrop-filter:blur(24px) saturate(145%);
    box-shadow:inset 0 1px 0 var(--mobile-glass-shine),0 0 0 1px var(--mobile-glass-outline),0 18px 38px #14253c26;
  }
  .vp .mmenu-nav{padding-inline:10px}
  .vp .mobile-nested{margin-inline:7px;padding-left:8px}
  .vp .mobile-subgroup{padding-inline:5px}
  .vp .dock{background:transparent;box-shadow:none;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .vp .dock-in{
    border:1px solid var(--mobile-glass-edge);border-radius:25px;
    padding:7px;gap:4px;background:linear-gradient(130deg,rgba(255,255,255,.22),transparent 54%),var(--mobile-glass);
    -webkit-backdrop-filter:blur(26px) saturate(170%);
    backdrop-filter:blur(26px) saturate(170%);
    box-shadow:inset 0 1px 0 var(--mobile-glass-shine),0 0 0 1px var(--mobile-glass-outline),0 10px 32px #132b4930;
  }
  .vp .dock-q{border-radius:18px;min-height:48px;box-shadow:inset 0 1px 0 #ffffff45,0 4px 12px #1b57d62b}
  .vp .dock-b{border-radius:17px;min-width:44px;min-height:48px;color:var(--ink);background:transparent}
  .vp .dock-b:active{background:var(--mobile-glass-control)}
  .vp .ftr{
    margin-top:16px;padding:26px 10px 118px;border-top:0;
    background:radial-gradient(ellipse at 0 25%,#83b1f329,transparent 60%),radial-gradient(ellipse at 100% 75%,#f2c46c26,transparent 60%),var(--ground);
  }
  .vp .ftr-in{
    border:1px solid var(--mobile-glass-edge);border-radius:28px;
    padding:27px 21px;gap:28px 18px;background:var(--mobile-glass-footer);
    -webkit-backdrop-filter:blur(20px) saturate(145%);
    backdrop-filter:blur(20px) saturate(145%);
    box-shadow:inset 0 1px 0 var(--mobile-glass-shine),0 0 0 1px var(--mobile-glass-outline),0 12px 32px #1d3a6010;
  }
  .vp .ftr .disclosure{background:var(--mobile-glass-control);border:1px solid var(--mobile-glass-outline);border-radius:19px}
  .vp .ftr .fine{border-color:var(--mobile-glass-outline)}
  .vp .hdr .mmenu,.vp .ftr-in,.vp .dock-in{color:var(--ink)}
}
@media screen and (max-width:767px) and (prefers-color-scheme:dark){
  :root{
    --mobile-glass:rgba(15,29,48,.73);
    --mobile-glass-menu:rgba(17,32,53,.96);
    --mobile-glass-footer:rgba(18,34,55,.8);
    --mobile-glass-edge:rgba(191,215,251,.24);
    --mobile-glass-outline:rgba(3,10,21,.25);
    --mobile-glass-shine:rgba(224,237,255,.18);
    --mobile-glass-control:rgba(44,67,98,.56);
    --mobile-glass-shadow:0 8px 30px rgba(0,5,15,.3);
  }
  .vp .hdr,.vp .dock-in{background:linear-gradient(130deg,rgba(171,200,239,.07),transparent 55%),var(--mobile-glass)}
  .vp .ftr{background:radial-gradient(ellipse at 0 20%,#3063ad30,transparent 60%),radial-gradient(ellipse at 100% 75%,#90713e22,transparent 60%),var(--ground)}
}
@media screen and (max-width:767px) and (prefers-reduced-transparency:reduce),screen and (max-width:767px) and (prefers-contrast:more){
  .vp .hdr,.vp .hdr .mmenu,.vp .dock-in,.vp .ftr-in{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--line-2)}
  .vp .hdr .burger,.vp .ftr .disclosure{background:var(--surface-2)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media screen and (max-width:767px){
    .vp .hdr,.vp .hdr .mmenu,.vp .dock-in,.vp .ftr-in{background:var(--surface)}
  }
}
