/* Shared ground for the wiki app prototypes: Whisper's type, the Studio
   palette in light and dark, line icons and a reset. Each layout adds its
   own file on top. */

@font-face {
  font-family: "TeX Gyre Heros";
  src: url("../../fonts/texgyreheros-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  /* The face sits its letters low in the line box (ascent 1.15em, descent
     0.28em, caps 0.73em), so text read below centre in every pill and
     button. Same total height, rebalanced so caps sit in the middle;
     nothing moves in layout, and canvas text (alphabetic baseline) is
     untouched. */
  ascent-override: 108%;
  descent-override: 35%;
}

:root {
  color-scheme: dark;
  --bg: #000000;   /* the site's own black, as at the top of the homepage */
  --fg: #FFFFFF;
  --panel: #1E1915;
  --well: color-mix(in srgb, var(--fg) 8%, var(--panel));
  --line: color-mix(in srgb, var(--fg) 13%, transparent);
  --muted: color-mix(in srgb, var(--fg) 60%, transparent);
  --glass: rgba(30, 25, 21, .78);
  --focus: #00D9FF;
  --font: "TeX Gyre Heros", Helvetica, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --r: 20px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #F2EEE8;
    --fg: #130F0C;
    --panel: #FFFFFF;
    --glass: rgba(255, 255, 255, .8);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.4 var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; border: 0; background: none; padding: 0; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.ic { width: 22px; height: 22px; flex: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ic .f { fill: currentColor; stroke: none; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wmark { width: 30px; height: 30px; fill: currentColor; flex: none; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border-radius: 999px; background: var(--well);
  font-size: 14px; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s;
}
.pill .ic { width: 16px; height: 16px; }
.pill:active { transform: scale(.96); }
.pill--solid { background: var(--fg); color: var(--bg); }

/* Video player shared by every layout */
.vplayer { width: min(1000px, 100vw - 24px); max-width: none; padding: 0; border: 0; background: none; overflow: visible; }
.vplayer::backdrop { background: rgba(8, 6, 5, .88); backdrop-filter: blur(8px); }
.vplayer__f { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.vplayer__f iframe { width: 100%; height: 100%; border: 0; display: block; }
.vplayer__x { position: absolute; right: 0; top: -54px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; }