.feed-controls{z-index:40;box-sizing:border-box;block-size:var(--feed-controls-block-size);align-items:center;gap:var(--space-3);padding-inline:var(--space-4);border-block-end:var(--border-width) solid var(--color-border);background-color:var(--color-surface-sunken);font-size:var(--font-size-1);line-height:var(--line-height-1);scrollbar-width:none;grid-area:controls;display:flex;position:sticky;inset-block-start:0;overflow-x:auto}.feed-controls::-webkit-scrollbar{display:none}.feed-controls>*{flex:none}@container (width>=40rem){.feed-controls{padding-inline:var(--space-5)}}.feed-controls .feed-controls__label{font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-caps);text-transform:uppercase;color:var(--color-text-secondary)}.feed-controls .feed-controls__state{align-items:baseline;gap:var(--space-2);color:var(--color-status-offline);display:flex}.feed-controls .feed-controls__state:after{content:"";border-radius:var(--border-radius-pill);background-color:currentColor;align-self:center;block-size:.4375rem;inline-size:.4375rem}.feed-controls .feed-controls__state[data-connected=true][data-playing=true]{color:var(--color-status-active)}.feed-controls .feed-controls__state[data-connected=true][data-playing=false]{color:var(--color-status-idle)}.feed-controls .feed-controls__state[data-connected=false]{color:var(--color-status-error)}.feed-controls .feed-controls__button,.feed-controls .feed-controls__select{box-sizing:border-box;block-size:calc(var(--line-height-1) + var(--space-1));font:inherit;color:var(--color-text-primary);background-color:var(--color-surface-raised);border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius);padding-block:0;padding-inline:var(--space-2);cursor:pointer}:is(.feed-controls .feed-controls__button,.feed-controls .feed-controls__select):hover:not(:disabled){background-color:var(--color-surface-hover)}:is(.feed-controls .feed-controls__button,.feed-controls .feed-controls__select):disabled{color:var(--color-text-muted);cursor:default}:is(.feed-controls .feed-controls__button,.feed-controls .feed-controls__select):focus-visible{outline:var(--border-width-thick) solid var(--color-focus);outline-offset:var(--border-width)}.feed-controls .feed-controls__field{align-items:center;gap:var(--space-2);display:flex}.feed-controls .feed-controls__field-label{color:var(--color-text-secondary)}.feed-controls .feed-controls__note{margin:0;color:var(--color-text-muted);margin-inline-start:auto;padding-inline-start:var(--space-3)}.grid-overlay{z-index:100;pointer-events:none;background-image:repeating-linear-gradient(to bottom, #4682be17 0 var(--space-2), transparent var(--space-2) var(--space-4));position:absolute;inset:0}@media (prefers-color-scheme:dark){.grid-overlay{background-image:repeating-linear-gradient(to bottom, #8cbef01c 0 var(--space-2), transparent var(--space-2) var(--space-4))}}.site-header{z-index:30;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-block-end:var(--border-width) solid var(--color-border);background-color:var(--color-surface-raised);grid-area:header;display:flex}@container (width>=40rem){.site-header{box-sizing:border-box;block-size:var(--site-header-block-size);padding-block:0;padding-inline:var(--space-5);position:sticky;inset-block-start:var(--feed-controls-block-size)}}.site-header .site-header__home{border-radius:var(--border-radius);display:flex}.site-header .site-header__home:focus-visible{outline:var(--border-width-thick) solid var(--color-focus);outline-offset:var(--space-1)}.site-header .site-header__logo{block-size:var(--line-height-3);inline-size:auto}.site-header .site-header__form{align-items:center;gap:var(--space-3);display:flex}.site-header .site-header__field{align-items:center;gap:var(--space-2);min-inline-size:0;display:flex}.site-header .site-header__label{inline-size:var(--border-width);block-size:var(--border-width);margin:calc(var(--border-width) * -1);clip-path:inset(50%);white-space:nowrap;padding:0;position:absolute;overflow:hidden}.site-header .site-header__input,.site-header .site-header__select{box-sizing:border-box;block-size:calc(var(--line-height-2) + var(--space-2));font:inherit;font-size:var(--font-size-2);line-height:var(--line-height-2);color:var(--color-text-primary);background-color:var(--color-surface-page);border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius);padding-block:0;padding-inline:var(--space-2)}:is(.site-header .site-header__input,.site-header .site-header__select):focus-visible{outline:var(--border-width-thick) solid var(--color-focus);outline-offset:var(--border-width)}.site-header .site-header__input{inline-size:100%;min-inline-size:0;max-inline-size:14rem}@container (width<40rem){.site-header{flex-wrap:wrap}.site-header .site-header__search{flex:auto;min-inline-size:0}.site-header .site-header__form{justify-content:flex-end}.site-header .site-header__input{min-inline-size:8rem;max-inline-size:none}}body{--site-header-block-size:3.5rem;--feed-controls-block-size:2rem;--app-chrome-block-size:calc(var(--feed-controls-block-size) + var(--site-header-block-size));overflow-inline:clip;color:var(--color-text-primary);background-color:var(--color-surface-page);grid-template-rows:min-content min-content 1fr min-content;grid-template-areas:"controls""header""body""footer";align-content:stretch;min-block-size:100dvh;margin:0;padding:0;font-family:sans-serif;display:grid;position:relative;container-type:inline-size}