/* ---------- sound ---------- */
.gfs{position:relative;display:inline-flex;align-items:stretch;flex:none;font-family:var(--gfs-font);--gfs-h:44px}
.gfs-btn{display:inline-flex;align-items:center;gap:10px;height:var(--gfs-h);border:2px solid var(--gfs-line);background:var(--gfs-bg);color:var(--gfs-fg);cursor:pointer;font:700 15px/1 var(--gfs-font);padding:0 16px 0 13px;border-radius:99px;white-space:nowrap;transition:background .2s,color .2s,translate .35s cubic-bezier(.3,1.6,.5,1)}
.gfs-btn:hover{translate:0 -1px}
.gfs[data-on="true"] .gfs-btn{background:var(--gfs-on-bg);color:var(--gfs-on-fg);border-color:var(--gfs-on-bg)}
/* icon only: a speaker with the coloured bars as its sound waves; the words stay for screen readers */
.gfs-btn{gap:5px;padding:0 15px 0 13px}
.gfs-spk{width:20px;height:20px;flex:none}
.gfs-btn .gfs-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* off: the waves fold away and a small cross sits by the speaker; on: the cross goes and the waves rise */
.gfs-bars,.gfs-x{transition:width .25s cubic-bezier(.3,1.4,.5,1),opacity .2s,margin .25s}
.gfs-x{width:0;height:12px;flex:none;opacity:0;margin-left:-5px}
.gfs[data-on="false"] .gfs-x{width:12px;opacity:1;margin-left:1px}
.gfs[data-on="false"] .gfs-bars{width:0;opacity:0;margin-left:-5px;overflow:hidden}
.gfs-bars{display:flex;align-items:flex-end;gap:3px;height:16px;width:19px;flex:none}
.gfs-bars i{flex:1;height:16px;border-radius:2px;transform-origin:50% 100%;scale:1 .25;background:var(--gfs-b1)}
.gfs-bars i:nth-child(2){background:var(--gfs-b2)}.gfs-bars i:nth-child(3){background:var(--gfs-b3)}.gfs-bars i:nth-child(4){background:var(--gfs-b4)}
.gfs[data-on="true"] .gfs-bars i{animation:gfsEq 1.05s ease-in-out infinite}
.gfs[data-on="true"] .gfs-bars i:nth-child(2){animation-delay:-.35s}.gfs[data-on="true"] .gfs-bars i:nth-child(3){animation-delay:-.7s}.gfs[data-on="true"] .gfs-bars i:nth-child(4){animation-delay:-.15s}
/* scale, not height: a height animation re-lays-out and repaints the page every frame the music plays */
@keyframes gfsEq{0%,100%{scale:1 .25}50%{scale:1 1}}
.gfs.nudge .gfs-btn{animation:gfsWig .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes gfsWig{25%{rotate:-5deg}60%{rotate:4deg}}
@media (max-width:700px){
  .gfs{--gfs-h:40px}
  .gfs-btn{padding:0 12px 0 10px}
  .gfs-btn .gfs-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (prefers-reduced-motion:reduce){.gfs-bars i{animation:none!important;scale:1 .62!important}}
.gfs{--gfs-font:var(--sans);--gfs-mono:var(--mono);--gfs-bg:#fff;--gfs-fg:var(--ink);--gfs-line:var(--ink);--gfs-on-bg:var(--ink);--gfs-on-fg:#fff;--gfs-b1:var(--cobalt);--gfs-b2:var(--tang);--gfs-b3:var(--bubble);--gfs-b4:var(--mint);--gfs-p-bg:var(--lemon);--gfs-p-fg:var(--ink);--gfs-p-line:#fff}
.nav .gfs{--gfs-h:42px}
@media (max-width:700px){.nav .gfs{--gfs-h:40px}}
.gfs-float{position:fixed;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:61}
.gfs-float .gfs{--gfs-h:52px;border-radius:99px;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(14,14,14,.18),0 14px 26px -12px rgba(14,14,14,.55)}
.gfs-float .gfs-btn{font-size:16px}
body.case-open .gfs-float{visibility:hidden}
@media (max-width:700px){.gfs-float{left:16px;bottom:calc(10px + env(safe-area-inset-bottom))}.gfs-float .gfs{--gfs-h:58px}.gfs-float .gfs-btn{width:66px;padding:0;justify-content:center}.dock{left:92px}}