/* Self-hosted fonts (SIL Open Font License). Montserrat is subset to the logo's letters. */
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-logo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-logo-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("../fonts/michroma-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
/* Layout: one full-height stage (WebGL rack) with a slim header and a section bar underneath. Single dark "studio at night" look by choice. */
:root {
  --room: #0d0f12;        /* studio darkness, slightly blue */
  --room-2: #161a20;      /* raised surfaces */
  --steel: #aeb6c0;       /* text, brushed-steel grey */
  --steel-dim: #6c7480;   /* secondary text */
  --amber: #ffad2e;       /* LED amber accent */
  --amber-dim: #6b4a17;
  --logo-white: #ffffff;  /* logo, from logo.psd */
  --logo-gold: #cc9900;
  --f-logo: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --line: #262c35;
  --f-display: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
html, body { height: 100%; }
body {
  background: radial-gradient(120% 90% at 50% 38%, #1a1f27 0%, var(--room) 62%);
  background-color: var(--room);
  color: var(--steel);
  font-family: var(--f-body);
  overflow: hidden;
}
.app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
header, .bar { padding-inline: max(16px, 2.5vw); }
header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 18px 6px; flex-wrap: wrap;
}
.brandrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sp-logo { margin: 0; font-family: var(--f-logo); font-size: 22px; line-height: 1; letter-spacing: 0; white-space: nowrap; font-weight: 400; }
.sp-logo .sp-studio { color: var(--logo-white); font-weight: 400; }
.sp-logo .sp-projects { color: var(--logo-gold); font-weight: 700; }
.brandrow .sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-dim); }
.meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--steel-dim); text-transform: uppercase; }
.stage { position: relative; min-height: 0; }
canvas#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.status {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-dim);
  transition: opacity .6s ease; pointer-events: none; padding-inline: 16px;
}
.status.done { opacity: 0; }
.status b { color: var(--amber); font-weight: 500; }
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  padding-block: 10px 18px; border-top: 1px solid var(--line);
}
.sections { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.sections button, .tog {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--room-2); color: var(--steel-dim); border: 1px solid var(--line); border-radius: 3px;
  padding: 7px 10px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center;
  transition: color .2s, border-color .2s;
}
.sections button .n { color: var(--steel); font-variant-numeric: tabular-nums; }
.sections button:hover, .tog:hover { color: var(--steel); border-color: var(--steel-dim); }
.sections button[aria-pressed="true"] { color: var(--amber); border-color: var(--amber-dim); }
.sections button[aria-pressed="true"] .n { color: var(--amber); }
.sections button:focus-visible, .tog:focus-visible, canvas#gl:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.hint { font-size: 12.5px; color: var(--steel-dim); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hint kbd { font-family: var(--f-mono); font-size: 11px; border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; color: var(--steel); }
.tog[aria-pressed="true"] { color: var(--amber); border-color: var(--amber-dim); }
@media (max-width: 640px) {
  .sections button .lbl { display: none; }
  .hint .keys { display: none; }
}