/* THE PLATE (Sid, 2 Nov 2026): the site's own pages sit on Braun plate grey, #DFDED7, around their dark rounded panels:
   the homepage (download.html, also /download), every account screen (signin.html and server.js appPage), /support and
   /privacy. A page opts in with class="plate" on <html>. The studio and the listener players never load this file and
   keep their look.
   On the plate: the wordmark's letters are its black-letter version, soft black #1D1D1B (wordmark.css --wm-ink; the
   orange triangle is its own picture and does not change); the top bar's links and the footer are dark text; the top
   bar keeps a band of the plate behind it, so a dark panel scrolling under the fixed bar never sits under dark letters;
   the corner scrim the bar draws for photographs goes. "sign in" top right is larger, so it is easy to spot. */
:root{ --plate:#DFDED7; --plate-ink:#1D1D1B; }
html.plate, html.plate body{ background:var(--plate); }
html.plate{ --wm-ink:var(--plate-ink); }

.plate .sb-topbar{ background:var(--plate); }
.plate .sb-topbar::before{ display:none; }
.plate .sb-tbwm, .plate .sb-tbwm:hover{ color:var(--plate-ink); text-shadow:none; }
.plate .sb-toplink{ color:rgba(29,29,27,.72); text-shadow:none; }
.plate .sb-toplink:hover{ color:var(--plate-ink); }
.plate .sb-tbsign{ font:600 21px/1 var(--ui); letter-spacing:-.01em; color:var(--plate-ink); text-shadow:none; padding:6px 0; }   /* clearly bigger (Sid, 2 Nov) */
.plate .sb-tbsign:hover{ color:#000; text-decoration:underline; text-underline-offset:4px; }

/* the footer outside the panels: dark text on the plate */
.plate .em-foot a, .plate .dl-foot a{ color:rgba(29,29,27,.72); border-bottom-color:rgba(29,29,27,.25); }
.plate .em-foot a:hover, .plate .dl-foot a:hover{ color:var(--plate-ink); }

/* ONE PANEL WIDTH: every panel on the plate is the download page's grey band's width (about.css .ab-band). The
   homepage's photo-less .ab-round sections (the emit plugin, emit uploader) were wider, 1400px, and had no fill of their
   own; on the plate they take the band's own grey and width, so all of them are one panel (Sid, 2 Nov). */
.plate .ab-round{ width:min(1220px, calc(100% - 2*clamp(12px,1.8vw,22px))); background:#17171a; border-top:0; }   /* every panel one dark grey, no rim (Sid, 2 Nov) */
.plate .dl-installBand{ padding:0; }

/* /support and /privacy: their reading column in one dark rounded panel, the band's width and grey */
.plate main.plate-panel{ box-sizing:border-box; max-width:none; width:min(1220px, calc(100% - 2*clamp(12px,1.8vw,22px)));
  margin:calc(var(--topbar-h) + 4px) auto clamp(16px,2.2vw,28px); background:#17171a; border-radius:clamp(26px,3.5vw,44px);
  padding:clamp(28px,5vw,56px) 24px clamp(44px,7vw,80px); }
.plate main.plate-panel > *{ max-width:640px; margin-left:auto; margin-right:auto; }