/* Type: Instrument Sans for everything, IBM Plex Mono for timecodes, labels and greentext. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens. Both themes are complete sets; nothing is filtered or inverted. */
:root {
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --r-card: 18px;
  --r-panel: 22px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c0d;
  --grid: rgba(255, 255, 255, 0.07);
  --surface: #151516;
  --surface-hi: #1b1b1d;
  --panel: #151516;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.15);
  --text: #f1f0ec;
  --text-2: rgba(241, 240, 236, 0.64);
  --text-3: rgba(241, 240, 236, 0.42);
  --accent: #d8d2c8;
  --accent-text: #e6e1d8;
  --accent-soft: rgba(216, 210, 200, 0.09);
  --accent-line: rgba(216, 210, 200, 0.34);
  --edge: rgba(255, 255, 255, 0.13);
  --edge-hot: rgba(216, 210, 200, 0.72);
  --scrim: rgba(5, 5, 6, 0.66);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.045) inset, 0 18px 40px -26px rgba(0, 0, 0, 0.9);
  --panel-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 120px -40px rgba(0, 0, 0, 0.9);
  --glow: 0 0 0 1px rgba(216, 210, 200, 0.26), 0 14px 46px -12px rgba(0, 0, 0, 0.7);
  --slot: rgba(255, 255, 255, 0.035);
  --slot-line: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f1ed;
  --grid: rgba(20, 20, 18, 0.085);
  --surface: #fbfaf8;
  --surface-hi: #ffffff;
  --panel: #fbfaf8;
  --line: rgba(20, 20, 18, 0.08);
  --line-strong: rgba(20, 20, 18, 0.16);
  --text: #161614;
  --text-2: rgba(22, 22, 20, 0.66);
  --text-3: rgba(22, 22, 20, 0.46);
  --accent: #3a3733;
  --accent-text: #2b2926;
  --accent-soft: rgba(58, 55, 51, 0.065);
  --accent-line: rgba(58, 55, 51, 0.3);
  --edge: rgba(20, 20, 18, 0.16);
  --edge-hot: rgba(58, 55, 51, 0.72);
  --scrim: rgba(242, 241, 237, 0.7);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(20, 20, 18, 0.05), 0 18px 40px -28px rgba(20, 20, 18, 0.35);
  --panel-shadow: 0 1px 2px rgba(20, 20, 18, 0.05), 0 40px 120px -40px rgba(20, 20, 18, 0.35);
  --glow: 0 0 0 1px rgba(22, 22, 20, 0.12), 0 14px 46px -14px rgba(22, 22, 20, 0.3);
  --slot: rgba(20, 20, 18, 0.03);
  --slot-line: rgba(20, 20, 18, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern";
}

button { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 60;
  padding: 10px 14px;
  background: var(--surface-hi);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

.mono {
  font-family: var(--mono);
  font-feature-settings: normal;
}

/* Small round controls: mute, theme, back. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: color 160ms ease, transform 140ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { color: var(--text); }
}

.chrome {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  gap: 8px;
}

#mute-toggle .slash { opacity: 0; }
#mute-toggle[aria-pressed="true"] .slash { opacity: 1; }
#mute-toggle[aria-pressed="true"] .wave { opacity: 0; }
#mute-toggle path { transition: opacity 160ms ease; }



::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: ease;
}

/* An open sheet on a phone owns the whole screen. */
@media (max-width: 700px) {
  body.is-open .chrome { opacity: 0; pointer-events: none; }
}
.chrome { transition: opacity 200ms ease; }