/* B326 · the app shell (B324), made to feel shipped. Everything here sits inside the shell's media query: phones in portrait
   (max-width:760px) and short touch screens in landscape (max-height:500px with a coarse pointer). Laptops and desktops render
   exactly as before. <html> carries sh-on from the head, before the first paint (tools/shell326.py), so the top bar never swaps.
   The shell: a compact top bar that tightens on scroll, the first section as a hero card, swipeable rows, the B323 docked player
   as a mini player above a bottom tab bar, bottom sheets (Ask, Listen, More) with half and full heights, and screens that slide
   in through cross-document view transitions. The living pills are never restyled here.
   Motion: enter cubic-bezier(.05,.7,.1,1), exit cubic-bezier(.3,0,.8,.15), exits a third faster than entries. */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  :root{
    --sh-tab:58px;
    --sh-head:58px;
    --sh-sb:env(safe-area-inset-bottom,0px);
    --sh-st:env(safe-area-inset-top,0px);
    --sh-sl:env(safe-area-inset-left,0px);
    --sh-sr:env(safe-area-inset-right,0px);
    --sh-dock:90px;
    --sh-glass:#fff;
    --sh-hair:rgba(10,22,51,.12);
    --sh-ink:#0d1b3d;
    --sh-mute:#5f6573;
    --sh-in:cubic-bezier(.05,.7,.1,1);
    --sh-out:cubic-bezier(.3,0,.8,.15);
    --sh-navy:#0a1633;
    /* what the end of a page has to clear: the tab bar, the home indicator and a breath; plus the mini player when it is up */
    --sh-end:calc(var(--sh-tab) + var(--sh-sb) + 12px);
  }
  html.sh-on.px-docked{--sh-end:calc(var(--sh-tab) + var(--sh-sb) + var(--sh-dock) + 8px + 12px)}

  /* the rubber band: navy below the footer, white above the top bar (iOS 26 tints its toolbars from the body) */
  html.sh-on{background:var(--sh-navy)}
  html.sh-on::before{content:"";position:fixed;left:0;right:0;top:0;height:50%;background:#fff;z-index:-1;pointer-events:none}
  html.sh-on body{background:#fff;min-height:100svh}
  ::view-transition{background:#fff}

  /* nothing on the page moves behind an open sheet */
  html.sh-on.sh-lock{overflow:hidden;overscroll-behavior:none}
  html.sh-on.sh-lock body{overscroll-behavior:none}

  /* anchors, citations and scrollIntoView land clear of the top bar and the tab bar */
  html.sh-on{scroll-padding-top:calc(var(--sh-st) + var(--sh-head) + 8px);scroll-padding-bottom:var(--sh-end)}
  /* the end of every page clears the bars and the player, measured, not guessed: the footer gets the room (it beat the shell's
     body padding before: polish-b281.css sets body padding-bottom to 0 !important and a fixed 160px on the footer) */
  html.sh-on body:not(:has(>footer.cf)){padding-bottom:var(--sh-end)}
  html.sh-on body>footer.cf{padding-bottom:var(--sh-end)!important}

  /* landscape: the notch side gets its inset */
  html.sh-on body{padding-left:var(--sh-sl);padding-right:var(--sh-sr)}

  /* the top bar: logo, Listen and Search; it tightens once the page moves */
  html.sh-on .px-ledger{display:none}
  html.sh-on .px-head{position:sticky;top:0;z-index:120;padding-top:var(--sh-st);background:var(--sh-glass);border-bottom:.5px solid transparent;transition:border-color .25s}
  html.sh-on.sh-scrolled .px-head{border-bottom-color:var(--sh-hair)}
  html.sh-on .px-head .px-in{min-height:var(--sh-head);padding-top:0!important;padding-bottom:0!important;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:min-height .3s var(--sh-in)}
  html.sh-on.sh-scrolled .px-head .px-in{min-height:46px}
  html.sh-on .px-head .px-brand{display:flex;align-items:center;min-height:44px}
  html.sh-on .px-head .px-brand img{height:28px!important;width:auto;transition:height .3s var(--sh-in)}
  html.sh-on.sh-scrolled .px-head .px-brand img{height:22px!important}
  html.sh-on .px-head .px-nav,html.sh-on .px-head .px-login,html.sh-on .px-head .px-cta,html.sh-on .px-head .px-menu{display:none!important}
  html.sh-on .px-head .px-acts{display:flex;align-items:center;gap:8px;margin-right:-8px;-webkit-user-select:none;user-select:none}
  html.sh-on .px-head .px-sbtn,html.sh-on .sh-ibtn{display:grid!important;place-items:center;width:44px;height:44px;min-width:44px;padding:0!important;margin:0;border:0!important;
    border-radius:999px;background:transparent!important;box-shadow:none!important;color:var(--sh-ink);cursor:pointer}
  html.sh-on .px-head .px-sbtn .px-sl,html.sh-on .px-head .px-sbtn kbd{display:none!important}
  html.sh-on .px-head .px-sbtn svg,html.sh-on .sh-ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  html.sh-on .px-head .px-sbtn:active,html.sh-on .sh-ibtn:active{background:rgba(21,89,245,.1)!important;transform:scale(.92)}
  html.sh-on .sh-ibtn:focus-visible,html.sh-on .px-head .px-sbtn:focus-visible{outline:2px solid #1559f5;outline-offset:-2px}
  html.sh-on .art .toc{max-height:calc(100dvh - 120px)}

  /* the hero card: the first section of a page, inset with round corners */
  html.sh-on main>.sx-hero:first-child,html.sh-on main>.hv-hero:first-child,html.sh-on .hb-hero,html.sh-on main>.px-lhero:first-child{
    margin:8px 10px 0!important;border-radius:28px;overflow:clip;isolation:isolate;box-shadow:0 1px 0 rgba(13,27,61,.04),0 18px 40px -24px rgba(13,27,61,.35)}
  html.sh-on main>.sx-hero:first-child{border:.5px solid rgba(21,89,245,.12)}

  /* swipeable rows: products, the two shows' features, what hvhh.ai does; the Lab's shelves already swipe */
  html.sh-on #products .sx-grid,html.sh-on .hw-feats,html.sh-on .hvx-list{
    display:flex!important;flex-wrap:nowrap!important;gap:12px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-left:calc(-1 * var(--px-gut))!important;margin-right:calc(-1 * var(--px-gut))!important;
    padding-left:var(--px-gut)!important;padding-right:var(--px-gut)!important;scroll-padding-inline:var(--px-gut);grid-template-columns:none!important}
  html.sh-on #products .sx-grid::-webkit-scrollbar,html.sh-on .hw-feats::-webkit-scrollbar,html.sh-on .hvx-list::-webkit-scrollbar{display:none}
  html.sh-on #products .sx-grid>*,html.sh-on .hw-feats>*{flex:0 0 86%!important;max-width:340px;min-width:0;scroll-snap-align:start;margin:0!important}
  html.sh-on .hvx-band{grid-template-columns:minmax(0,1fr)!important}
  html.sh-on .hvx-t{min-width:0}
  html.sh-on .hvx-list{margin-left:-18px!important;margin-right:-18px!important;padding-left:18px!important;padding-right:18px!important;scroll-padding-inline:18px}
  html.sh-on .hvx-list>li{flex:0 0 72%!important;max-width:280px;scroll-snap-align:start;margin:0!important;padding:16px!important;border-radius:20px;
    background:rgba(255,255,255,.08);border:.5px solid rgba(255,255,255,.16)}
  html.sh-on .hb-cards,html.sh-on .hb-rail{scroll-snap-type:x mandatory}
  html.sh-on .hb-cards>li{scroll-snap-align:start}

  /* press states, like a native app: they show on the touch, not after it (shell-b326.js listens for touchstart, which iOS
     needs before it applies :active); the grey tap flash is turned off only where a press state replaces it */
  html.sh-on :is(a,button,summary,label,select,input,textarea,[role=button]){touch-action:manipulation}
  html.sh-on .hb-card,html.sh-on .sx-tile,html.sh-on .hw-feat,html.sh-on .sx-btn,html.sh-on .hv-btn,html.sh-on .px-fbtn,html.sh-on .hb-cplay,html.sh-on .px-dk-pp,html.sh-on .px-dk-b,html.sh-on .px-lis-pp,html.sh-on .px-lis-b{transition:transform .12s var(--sh-in)}
  html.sh-on .hb-card:active,html.sh-on .hw-feat:active,html.sh-on .sx-btn:active,html.sh-on .hv-btn:active,html.sh-on .px-fbtn:active,html.sh-on .hb-cplay:active,
  html.sh-on .px-dk-pp:active,html.sh-on .px-dk-b:active,html.sh-on .px-lis-pp:active,html.sh-on .px-lis-b:active{transform:scale(.97)}
  html.sh-on :is(.sh-tab,.sh-row,.sh-ibtn,.sh-x,.sh-ep,.sh-subs a,.px-sbtn,.hb-card,.hb-card a,.hw-feat,.sx-btn,.hv-btn,.px-fbtn,.hb-cplay,.px-dk-pp,.px-dk-b,.px-lis-pp,.px-lis-b){-webkit-tap-highlight-color:transparent}

  /* the hero's sample thread: Steven's avatar was white on #7b61ff (4.2:1); the site's violet reads 4.5:1 and up */
  html.sh-on .hx5-m1>.hx5-av{background:var(--px-violet,#6d28d9)}

  /* the floating Ask button gives way to the tab bar (and so never sits on the player) */
  html.sh-on .px-askfab{display:none!important}

  /* forms: 16px or larger, or iOS zooms the page when a field is touched */
  html.sh-on :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){font-size:max(16px,1em)!important}
  html.sh-on #aq-sel{min-height:44px}

  /* touch targets: 44 by 44 on phones. Lists grow to 44px rows; lone controls get an invisible hit area, so nothing moves */
  html.sh-on .cf nav:not(.ft-small) a{display:flex!important;align-items:center;min-height:44px;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
  html.sh-on .cf nav:not(.ft-small){row-gap:0!important}
  html.sh-on .cf nav.ft-small a{display:inline-flex!important;align-items:center;min-height:44px}
  html.sh-on .cf address a{display:inline-flex;align-items:center;min-height:44px}
  html.sh-on :is(.hx5-replay,.hb-more,.hb-callsrc a,.sx-src-note a,.bn-fp a,.hw-show a,.sx-dev-l a,.ft-show-name,.ft-logo,.px-kick a,.pf-run,.pf-code-bar button){position:relative}
  html.sh-on :is(.hx5-replay,.okx-replay,.hb-cplay,.hb-more,.hb-callsrc a,.sx-src-note a,.bn-fp a,.hw-show a,.sx-dev-l a,.ft-show-name,.ft-logo,.px-kick a,.pf-run,.pf-code-bar button,.px-pub,.px-lis323 .px-lis-b,.px-lis323 .px-lis-pp)::after{
    content:"";position:absolute;inset:auto;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%);background:none}
  /* inside the swipeable rows the hit area would be clipped by the row's own scroller, so these links grow to 44px themselves */
  html.sh-on .hw-hubs .hb-more{min-height:44px}
  /* the note's player: its seek is 44px tall to touch and stays a 6px line to see; 10px between the skip and play buttons */
  html.sh-on .px-lis323 .px-lis-seek{inset:auto 0;top:calc(50% - 22px);height:44px}
  html.sh-on .px-lis323 .px-lis-ctl{gap:10px}

  /* the tab bar */
  .sh-tabs{position:fixed;left:0;right:0;bottom:0;z-index:140;display:grid;grid-template-columns:repeat(5,1fr);
    height:calc(var(--sh-tab) + var(--sh-sb));padding:0 max(6px,var(--sh-sr)) var(--sh-sb) max(6px,var(--sh-sl));margin:0;
    background:var(--sh-glass);border-top:.5px solid var(--sh-hair);view-transition-name:sh-tabs;transition:transform .28s var(--sh-in);
    -webkit-user-select:none;user-select:none}
  .sh-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;height:var(--sh-tab);margin:0;padding:6px 0 4px;
    border:0;background:none;color:var(--sh-mute);font:500 12px/1 var(--px-sans,"Rubik",system-ui,sans-serif);letter-spacing:0;text-decoration:none!important;
    cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
  .sh-tab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .14s var(--sh-in)}
  .sh-tab .sh-fill{fill:transparent;transition:fill .2s}
  .sh-tab[aria-current="page"],.sh-tab.is-on{color:#1559f5}
  .sh-tab[aria-current="page"] .sh-fill,.sh-tab.is-on .sh-fill{fill:rgba(21,89,245,.16)}
  .sh-tab:active svg{transform:scale(.86)}
  .sh-tab:focus-visible{outline:2px solid #1559f5;outline-offset:-4px;border-radius:14px}
  html.sh-kb .sh-tabs{transform:translateY(110%)}
  html.sh-kb.px-docked .px-dock{transform:translateX(-50%) translateY(calc(var(--sh-tab) + var(--sh-sb)))}

  /* glass only where the browser can blur; a solid bar where it can't */
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    :root{--sh-glass:rgba(255,255,255,.96)}
    html.sh-on .px-head,.sh-tabs{-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  }

  /* the B323 docked player as the mini player, above the tab bar */
  html.sh-on .px-dock{bottom:calc(var(--sh-tab) + var(--sh-sb) + 8px)!important;width:calc(100vw - 16px - var(--sh-sl) - var(--sh-sr))!important;border-radius:18px!important;
    box-shadow:0 14px 34px -12px rgba(13,27,61,.55),0 0 0 .5px rgba(255,255,255,.08) inset;z-index:141;-webkit-user-select:none;user-select:none}
  /* its seek: 44px tall to touch, still a 3px line to see, in the same place */
  html.sh-on .px-dock .px-dk-seek{position:relative;z-index:2;height:44px;margin:-8px 18px -20px}
  /* a tap anywhere on it (not on a control) goes to the note's player */
  html.sh-on .px-dock .px-dk-in{position:relative}
  html.sh-on .px-dock .px-dk-t::after{content:"";position:absolute;inset:0;z-index:0}
  html.sh-on .px-dock .px-dk-ctl,html.sh-on .px-dock .px-dk-x,html.sh-on .px-dock .px-dk-time{position:relative;z-index:1}

  /* the Ask the Lab panel becomes a bottom sheet, with the same header as More and Listen */
  html.sh-on .px-askp{inset:auto 0 0 0!important;top:calc(var(--sh-st) + 44px)!important;width:auto!important;height:auto!important;
    border-radius:26px 26px 0 0!important;border:0!important;padding-top:0;box-shadow:0 -10px 40px rgba(13,27,61,.18);z-index:210!important;
    animation:sh-up .38s var(--sh-in) both!important}
  html.sh-on .px-askp.sh-drag{animation:none!important}
  html.sh-on .px-askp .px-askp-in{padding-bottom:var(--sh-sb)}
  html.sh-on .px-askp .px-askp-h{position:relative;display:flex;align-items:center;gap:12px;padding:26px 12px 8px 20px!important;border-bottom:0!important;touch-action:none}
  html.sh-on .px-askp .px-askp-h>svg,html.sh-on .px-askp .px-askp-h>img,html.sh-on .px-askp .px-askp-h>.px-askp-badge{display:none!important}
  html.sh-on .px-askp .px-askp-h>div{flex:1;min-width:0}
  html.sh-on .px-askp .px-askp-t{margin:0;font:600 24px/1.15 var(--px-sans,"Rubik",sans-serif)!important;letter-spacing:-.015em;color:var(--sh-ink)!important;outline:none}
  html.sh-on .px-askp .px-askp-t .px-askp-live{font-size:11px;vertical-align:middle}
  html.sh-on .px-askp .px-askp-d{margin:4px 0 0;font:400 14px/1.4 var(--px-sans,"Rubik",sans-serif)!important;color:var(--sh-mute)!important}
  html.sh-on .px-askp .px-askp-x{width:44px!important;height:44px!important;flex:none;display:grid;place-items:center;border:0!important;border-radius:999px!important;
    background:rgba(10,22,51,.06)!important;color:var(--sh-ink)!important;align-self:flex-start}
  html.sh-on .px-askp .px-askp-x svg{width:18px;height:18px}
  html.sh-on .px-askp .px-askp-x:active{transform:scale(.9);background:rgba(10,22,51,.12)!important}
  html.sh-on .px-askp>.sh-grab{height:26px}
  html.sh-on.px-askp-open .sh-scrim{opacity:1;pointer-events:auto}
  html.sh-on.px-askp-open .sh-tabs{z-index:130}

  /* no paper on phones: the bars use the site's cool white, not the old cream */
  html.sh-on:not(.px-art) .px-head,html.sh-on .px-rbar{background:var(--sh-glass)!important}

  /* sheets */
  .sh-scrim{position:fixed;inset:0;z-index:200;background:rgba(9,18,40,.38);opacity:0;pointer-events:none;transition:opacity .25s var(--sh-out)}
  .sh-grab{position:absolute;top:0;left:0;right:0;height:26px;display:grid;place-items:center;cursor:grab;touch-action:none;z-index:2}
  .sh-grab::before{content:"";width:36px;height:5px;border-radius:3px;background:rgba(10,22,51,.22)}
  dialog.sh-sheet{position:fixed;inset:auto 0 0 0;top:auto;margin:0;width:100%;max-width:100%;max-height:calc(100dvh - var(--sh-st) - 44px);
    padding:0;border:0;border-radius:26px 26px 0 0;background:#f4f6fa;color:var(--sh-ink);font-family:var(--px-sans,"Rubik",system-ui,sans-serif);
    box-shadow:0 -10px 40px rgba(13,27,61,.2);overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:contain;
    transition:height .32s var(--sh-in)}
  dialog.sh-sheet:not([open]){display:none}
  dialog.sh-sheet[open]{animation:sh-up .38s var(--sh-in) both}
  dialog.sh-sheet.sh-closing{animation:sh-down .25s var(--sh-out) both}
  dialog.sh-sheet.sh-drag{animation:none;transition:none}
  dialog.sh-sheet::backdrop{background:rgba(9,18,40,.38);animation:sh-fade .3s var(--sh-in) both}
  dialog.sh-sheet.sh-closing::backdrop{animation:sh-fade .25s var(--sh-out) reverse both}
  .sh-shead{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:26px 12px 8px 20px;touch-action:none;flex:none;-webkit-user-select:none;user-select:none}
  .sh-shead h2{margin:0;font:600 24px/1.15 var(--px-sans,"Rubik",sans-serif);letter-spacing:-.015em;color:var(--sh-ink);outline:none}
  .sh-shead p{margin:4px 0 0;font:400 14px/1.4 var(--px-sans,"Rubik",sans-serif);color:var(--sh-mute)}
  .sh-x{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:999px;background:rgba(10,22,51,.06);color:var(--sh-ink);cursor:pointer}
  .sh-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .sh-x:active{transform:scale(.9);background:rgba(10,22,51,.12)}
  .sh-x:focus-visible{outline:2px solid #1559f5;outline-offset:2px}
  .sh-sbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px calc(20px + var(--sh-sb));-webkit-overflow-scrolling:touch}
  .sh-gl{margin:14px 4px 8px;font:500 13px/1.3 var(--px-sans,"Rubik",sans-serif);color:var(--sh-mute)}
  .sh-gl:first-child{margin-top:4px}
  .sh-grp{margin:0;padding:0;list-style:none;background:#fff;border-radius:18px;box-shadow:0 0 0 .5px rgba(10,22,51,.08);overflow:hidden}
  .sh-grp li{margin:0;padding:0}
  .sh-grp li+li .sh-row::before{content:"";position:absolute;top:0;left:60px;right:0;border-top:.5px solid rgba(10,22,51,.12)}
  .sh-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:10px 14px 10px 16px;border:0;background:none;
    color:var(--sh-ink)!important;text-decoration:none!important;text-align:left;font:500 16px/1.25 var(--px-sans,"Rubik",sans-serif);cursor:pointer}
  .sh-row:active{background:rgba(21,89,245,.07)}
  .sh-row:focus-visible{outline:2px solid #1559f5;outline-offset:-3px;border-radius:14px}
  /* the page you are on */
  .sh-row[aria-current="page"]{background:rgba(21,89,245,.08);color:#1559f5!important}
  .sh-here{width:20px;height:20px;flex:none;fill:none;stroke:#1559f5;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .sh-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;background:#1559f5;color:#fff}
  .sh-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .sh-ic.ink{background:#0d1b3d}
  .sh-ic.soft{background:rgba(21,89,245,.12);color:#1559f5}
  .sh-ic.img{background:none;overflow:hidden}
  .sh-ic.img img{width:30px;height:30px;display:block}
  .sh-rt{flex:1;min-width:0}
  .sh-rt small{display:block;margin-top:3px;font:400 13px/1.3 var(--px-sans,"Rubik",sans-serif);color:var(--sh-mute)}
  .sh-chev{width:9px;height:15px;flex:none;fill:none;stroke:rgba(10,22,51,.3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* Listen */
  .sh-show{margin:4px 0 14px;background:#fff;border-radius:22px;box-shadow:0 0 0 .5px rgba(10,22,51,.08);overflow:hidden}
  .sh-show-h{display:flex;align-items:center;gap:12px;padding:16px 16px 10px}
  .sh-show-h img{width:44px;height:44px;flex:none;border-radius:11px}
  .sh-show-h b{display:block;font:600 17px/1.2 var(--px-sans,"Rubik",sans-serif)}
  .sh-show-h span{display:block;margin-top:3px;font:400 13px/1.35 var(--px-sans,"Rubik",sans-serif);color:var(--sh-mute)}
  .sh-eps{margin:0;padding:0 0 4px;list-style:none}
  .sh-ep{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 16px;color:var(--sh-ink)!important;text-decoration:none!important}
  .sh-ep:active{background:rgba(21,89,245,.07)}
  .sh-ep:focus-visible{outline:2px solid #1559f5;outline-offset:-3px;border-radius:14px}
  .sh-ep img{width:48px;height:48px;flex:none;border-radius:10px;object-fit:cover;background:#f5f7fc}
  .sh-ep b{display:block;font:500 15px/1.3 var(--px-sans,"Rubik",sans-serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sh-ep small{display:block;margin-top:2px;font:400 12.5px/1.3 var(--px-sans,"Rubik",sans-serif);color:var(--sh-mute)}
  .sh-ep .sh-play{width:34px;height:34px;flex:none;margin-left:auto;display:grid;place-items:center;border-radius:999px;background:rgba(21,89,245,.1);color:#1559f5}
  .sh-ep .sh-play svg{width:13px;height:13px;fill:currentColor;margin-left:2px}
  .sh-subs{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 16px}
  .sh-subs a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#f5f7fc;color:var(--sh-ink)!important;
    text-decoration:none!important;font:500 14px/1 var(--px-sans,"Rubik",sans-serif)}
  .sh-subs a:active{transform:scale(.97);background:#e3e6f0}
  .sh-subs a:focus-visible{outline:2px solid #1559f5;outline-offset:2px}
  .sh-empty{padding:8px 16px 14px;font:400 14px/1.4 var(--px-sans,"Rubik",sans-serif);color:var(--sh-mute)}

  @keyframes sh-up{from{transform:translateY(100%)}}
  @keyframes sh-down{to{transform:translateY(100%)}}
  @keyframes sh-fade{from{opacity:0}}

  /* screens slide in like an app; the bars carry their own names (px-head and px-dock in press-8d59493abb.css, sh-tabs here)
     and stay still while the page under them moves */
  ::view-transition-group(sh-tabs){animation-duration:0s}
  ::view-transition-old(sh-tabs),::view-transition-new(sh-tabs){animation:none}
}
/* landscape on a phone: shorter bars, the label beside the icon, as iOS does */
@media (max-height:500px) and (pointer:coarse){
  :root{--sh-tab:50px;--sh-head:50px}
  .sh-tab{flex-direction:row;gap:6px}
  .sh-tab svg{width:24px;height:24px}
  /* a note's reading bar tucks under the top bar to its progress line, as it does in portrait (polish-b281.css) */
  html.sh-on .px-rbar.on{transform:translateY(calc(-100% + 1px))}
  html.sh-on .px-rbar.on .px-rbar-prog{height:3px;bottom:-2px}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference),(max-height:500px) and (pointer:coarse) and (prefers-reduced-motion:no-preference){
  html:active-view-transition-type(sh-push)::view-transition-old(root){animation:.25s var(--sh-out) both sh-push-out}
  html:active-view-transition-type(sh-push)::view-transition-new(root){animation:.375s var(--sh-in) both sh-push-in}
  html:active-view-transition-type(sh-back)::view-transition-old(root){animation:.25s var(--sh-out) both sh-back-out;z-index:2}
  html:active-view-transition-type(sh-back)::view-transition-new(root){animation:.375s var(--sh-in) both sh-back-in}
  html:active-view-transition-type(sh-tab)::view-transition-old(root){animation:.25s var(--sh-out) both sh-tab-out}
  html:active-view-transition-type(sh-tab)::view-transition-new(root){animation:.375s var(--sh-in) both sh-tab-in}
  @keyframes sh-push-in{from{transform:translateX(100%);box-shadow:-20px 0 40px rgba(13,27,61,.18)}to{box-shadow:-20px 0 40px rgba(13,27,61,0)}}
  @keyframes sh-push-out{to{transform:translateX(-28%);opacity:.7}}
  @keyframes sh-back-out{to{transform:translateX(100%)}}
  @keyframes sh-back-in{from{transform:translateX(-28%);opacity:.7}}
  @keyframes sh-tab-out{to{opacity:0}}
  @keyframes sh-tab-in{from{opacity:0}}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce),(max-height:500px) and (pointer:coarse) and (prefers-reduced-motion:reduce){
  html.sh-on .px-head .px-in,html.sh-on .px-head .px-brand img,.sh-tabs,dialog.sh-sheet,.sh-scrim{transition:none}
  dialog.sh-sheet[open],dialog.sh-sheet.sh-closing,dialog.sh-sheet::backdrop,html.sh-on .px-askp{animation:none!important}
}
/* outside the shell: none of it (the class comes off when a screen is turned or resized past the query) */
html:not(.sh-on) :is(.sh-tabs,.sh-ibtn,.sh-scrim,dialog.sh-sheet,.sh-grab){display:none!important}
@media print{.sh-tabs,.sh-scrim,dialog.sh-sheet{display:none!important}}