/* THE FLOATING CONTROL'S OWN RULES.
 *
 * Extracted from brand-io.css, the only sheet in the source that has them —
 * the control was built for that one page as a trial before rollout. area.css,
 * which the other 71 area pages link, carries NOT ONE of them, so the control
 * drawn there was an unstyled row of buttons in the flow of the document
 * instead of a bar docked to the window.
 *
 * A SEPARATE SHEET, not an addition to area.css: those two sheets are not
 * supersets of one another and never were, and adding rules to the shared one
 * puts them on 71 pages whose cascade nobody re-measured. This is linked only
 * by a page that draws the control, and only where that page's own sheet does
 * not already carry these rules — brand-io.css does, and loading them again
 * after it is the same declarations twice.
 *
 * GENERATED by tools/extract-hc-css.mjs. Do not hand-edit: change brand-io.css
 * (or the source page it came from) and re-extract.
 */

.hc{
  --hc-bg:#0A0A0A;--hc-line:#272727;--hc-line-2:#1F1F1F;--hc-surf:#1C1C1C;
  --hc-fg:#FFFFFF;--hc-mut:#B4B4B4;--hc-sub:#7A7A7A;--hc-faint:#5A5A5A;
  --hc-acc:#FF9013;--hc-acc-soft:rgba(255,144,19,.12);
  --hc-acc-line:rgba(255,144,19,.28);--hc-acc-fg:#0A0A0A;
  /* the folded size and the corner gap, declared rather than written into
     three rules and a script. A custom property is not transitioned, which is
     the point: read back mid-fold it gives the value, not the frame. */
  --hc-mini:52px;--hc-gap:22px;--hc-x:0px;
  position:fixed;bottom:var(--hc-gap);left:50%;z-index:120;
  transform:translateX(-50%) translateX(var(--hc-x));
  display:flex;align-items:center;gap:10px;
  height:var(--hc-mini);max-width:min(1040px,calc(100vw - 32px));padding:0 8px 0 7px;overflow:hidden;
  border:1px solid var(--hc-line);border-radius:16px;
  background:color-mix(in srgb,var(--hc-bg) 88%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.78),0 2px 10px rgba(0,0,0,.34);
  color:var(--hc-fg);font-family:var(--ui);
  transition:transform .44s cubic-bezier(.4,0,.2,1),
             max-width .44s cubic-bezier(.4,0,.2,1),
             padding .32s cubic-bezier(.4,0,.2,1),
             border-radius .32s cubic-bezier(.4,0,.2,1),
             background .2s,border-color .2s,box-shadow .32s}

.hc.is-light{
  --hc-bg:#FFFFFF;--hc-line:#E4E2DF;--hc-line-2:#EFEDEA;--hc-surf:#FBFAF9;
  --hc-fg:#37352F;--hc-mut:#4A4A4A;--hc-sub:#787774;--hc-faint:#B0AFAC;
  --hc-acc:#B4531A;--hc-acc-soft:#FDF0E6;--hc-acc-line:#F4DAC2;--hc-acc-fg:#FFFFFF;
  box-shadow:0 22px 50px -18px rgba(15,15,15,.34),0 2px 10px rgba(15,15,15,.10)}

.hc *{box-sizing:border-box}

.hc button{font-family:inherit}

.hc-id{flex:none;align-self:stretch;display:flex;align-items:center;gap:8px;
  padding:0 11px 0 7px;border:0;border-right:1px solid var(--hc-line-2);
  background:none;color:inherit;cursor:pointer;border-radius:12px 0 0 12px;
  transition:background .15s cubic-bezier(.4,0,.2,1)}

.hc-id:hover{background:var(--hc-surf)}

.hc-mark{width:22px;height:22px;flex:none}

.hc-nm{font:600 13px/1 var(--io-display);letter-spacing:-.01em;color:var(--hc-fg);
  white-space:nowrap;display:block;max-width:240px;overflow:hidden;
  transition:opacity .18s cubic-bezier(.4,0,.2,1),
             max-width .32s cubic-bezier(.4,0,.2,1)}

.hc-nm em{font-style:italic;font-weight:500;color:var(--hc-acc)}

.hc-n{flex:none;font:700 9.5px/1 var(--io-mono);letter-spacing:.12em;
  color:var(--hc-sub);white-space:nowrap}

.hc-n b{color:var(--hc-acc)}

.hc-n i{font-style:normal;margin:0 4px;opacity:.55}

.hc-vp{position:relative;flex:1;min-width:0;align-self:stretch}

.hc-vp::before,.hc-vp::after{content:"";position:absolute;top:1px;bottom:1px;width:26px;
  z-index:2;pointer-events:none}

.hc-vp::before{left:0;background:linear-gradient(90deg,var(--hc-bg),transparent)}

.hc-vp::after{right:0;background:linear-gradient(270deg,var(--hc-bg),transparent)}

.hc-strip{display:flex;align-items:center;gap:3px;height:100%;overflow-x:auto;
  overflow-y:hidden;scrollbar-width:none;cursor:grab;scroll-behavior:auto}

.hc-strip::-webkit-scrollbar{display:none}

.hc-strip.dragging{cursor:grabbing}

.hc-chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;
  padding:0 10px;border:1px solid transparent;border-radius:9px;background:none;
  cursor:pointer;color:var(--hc-mut);
  transition:background .14s cubic-bezier(.4,0,.2,1),color .14s cubic-bezier(.4,0,.2,1),
             border-color .14s cubic-bezier(.4,0,.2,1)}

.hc-chip:hover{background:var(--hc-surf);color:var(--hc-fg)}

.hc-chip .n{font:700 8.5px/1 var(--io-mono);letter-spacing:.1em;color:var(--hc-faint)}

.hc-chip .t{font:500 12.5px/1 var(--ui);white-space:nowrap}

.hc-chip .w{font:600 8px/1 var(--io-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--hc-sub);border:1px solid var(--hc-line);border-radius:5px;padding:4px 5px}

.hc-chip.on{background:var(--hc-acc-soft);border-color:var(--hc-acc-line);color:var(--hc-fg)}

.hc-chip.on .n{color:var(--hc-acc)}

.hc-chip.on .w{color:var(--hc-acc);border-color:var(--hc-acc-line)}

.hc-act{flex:none;align-self:stretch;display:flex;align-items:center;gap:6px;
  padding-left:9px;border-left:1px solid var(--hc-line-2)}

.hc-ico{width:32px;height:32px;display:grid;place-items:center;padding:0;
  border:1px solid var(--hc-line);border-radius:8px;background:none;
  color:var(--hc-mut);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}

.hc-ico:hover{color:var(--hc-fg);border-color:var(--hc-acc)}

.hc-ico svg{width:15px;height:15px}

.hc-play[aria-pressed="true"]{background:var(--hc-acc);border-color:var(--hc-acc);
  color:var(--hc-acc-fg)}

.hc-play .i-pause{display:none}

.hc-play[aria-pressed="true"] .i-play{display:none}

.hc-play[aria-pressed="true"] .i-pause{display:block}

.hc-tone{display:flex;align-items:center;gap:7px;height:32px;padding:0 11px;
  border:1px solid var(--hc-line);border-radius:8px;background:none;
  color:var(--hc-mut);font:500 12px/1 var(--ui);cursor:pointer;
  transition:all .15s cubic-bezier(.4,0,.2,1)}

.hc-tone:hover{color:var(--hc-fg);border-color:var(--hc-acc)}

.hc-tone svg{width:14px;height:14px;flex:none}

.hc-tone .i-sun{display:none}

.hc.is-light .hc-tone .i-sun{display:block}

.hc.is-light .hc-tone .i-moon{display:none}

.hc.mini{--hc-x:calc(50vw - var(--hc-gap) - var(--hc-mini) / 2);
  max-width:var(--hc-mini);padding:0;border-radius:50%;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.82),0 0 0 1px rgba(255,144,19,.20)}

.hc.mini.is-light{box-shadow:0 18px 40px -14px rgba(15,15,15,.34),0 0 0 1px rgba(255,144,19,.28)}

.hc.mini .hc-id{width:var(--hc-mini);height:var(--hc-mini);padding:0;gap:0;
  justify-content:center;border-right:0;border-radius:50%}

.hc.mini .hc-mark{width:24px;height:24px}

.hc.mini .hc-nm{opacity:0;max-width:0}

.hc.mini .hc-n,.hc.mini .hc-vp,.hc.mini .hc-act{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s cubic-bezier(.4,0,.2,1),visibility 0s .16s}

@media(max-width:1000px){
.hc{height:auto;flex-wrap:wrap;padding:8px;gap:8px;max-width:calc(100vw - 24px)}
.hc-id{border-right:0;padding-left:4px}
.hc-vp{flex:1 0 100%;height:40px;order:3}
.hc-act{border-left:0;margin-left:auto;padding-left:0}
.hc.mini{height:var(--hc-mini);flex-wrap:nowrap;padding:0}
.hc.mini .hc-vp{flex:none}
}