/* =========================================================================
   Whisper Leader Wiki — an app for student leaders.
   Studio's palette in light and dark, TeX Gyre Heros, line icons. Phone
   first: five tabs at the thumb and sheets over the list; from 900px the
   tabs become a sidebar and sheets dock on the right. Content lives in
   wiki-data.js.
   ========================================================================= */

@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;
  /* tab bar: the page colour in dark, white in light — as in Studio */
  --chrome: var(--bg);
  --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);
  /* the floating tab bar's glass: see "Tab bar" below */
  --dock-glass: rgba(30, 25, 21, .55);
  --dock-edge: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 36px -10px rgba(0,0,0,.7);
  --dock-lens: rgba(255,255,255,.13);
  --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);
}
/* Light: picked in Settings, or the device's choice while on System */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F2EEE8;
  --fg: #130F0C;
  --panel: #FFFFFF;
  --chrome: #FFFFFF;
  /* warm, from the paper — tinting white read as a cool blue-grey */
  --well: color-mix(in srgb, var(--fg) 7%, var(--bg));
  --glass: rgba(255, 255, 255, .8);
  --dock-glass: rgba(255, 255, 255, .58);
  --dock-edge: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(19,15,12,.06), 0 12px 32px -12px rgba(19,15,12,.3);
  --dock-lens: rgba(19,15,12,.08);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F2EEE8;
    --fg: #130F0C;
    --panel: #FFFFFF;
    --chrome: #FFFFFF;
    --well: color-mix(in srgb, var(--fg) 7%, var(--bg));
    --glass: rgba(255, 255, 255, .8);
    --dock-glass: rgba(255, 255, 255, .58);
    --dock-edge: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(19,15,12,.06), 0 12px 32px -12px rgba(19,15,12,.3);
    --dock-lens: rgba(19,15,12,.08);
  }
}

*, *::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; }

/* The app shell. Five tabs at the thumb, a large title that
   tucks into the bar as you scroll, and every item opens as a sheet
   over the list instead of navigating away. From 900px the tab bar
   becomes a rail and the sheet docks on the right. */

body { overflow-x: hidden; }

.top {
  /* above the floating tab bar (10), so the menu sheet opens over it */
  position: sticky; top: 0; z-index: 11;
  display: flex; align-items: center; gap: 10px;
  /* same bar as Studio: 60px on a phone, 68px from 1000px */
  height: calc(60px + var(--safe-t)); padding: var(--safe-t) 16px 0;
  /* clear over the big title; it only becomes a bar once that has scrolled away */
  background: transparent;
}
/* Tucked (title scrolled away): no bar and no rule — a progressive blur.
   The page blurs harder the nearer it gets to the top edge and dims a
   little into the page colour, the way iOS headers fade content out
   beneath them. Two blur layers, each masked to its own band, stand in for
   a true gradient blur. */
.top::before, .top::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0;
  height: calc(100% + 28px);
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.top::before {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--bg) 72%, transparent), transparent);
}
.top::after {
  height: calc(100% - 4px);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}
.top.is-tucked::before, .top.is-tucked::after { opacity: 1; }
.top__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.top__mark { display: flex; view-transition-name: whisper-brand; }
.top__mark .wmark { width: 32px; height: 32px; }
.top__name { font-size: 20px; letter-spacing: -0.02em; line-height: 1; view-transition-name: app-name; }
.top .amenu { margin-left: auto; }

.panes { padding: 24px 16px calc(100px + var(--safe-b)); }
.pane { animation: paneIn .45s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } }
.big { font-size: 40px; letter-spacing: -0.04em; line-height: 1.02; margin: 4px 0 20px; }
/* Watch: each category's own heading, so the shelves read as sections */
.shelf__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 36px 0 12px; }
.shelf__h h2 { margin: 0; font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }
.shelf__h h2 span { font-size: 15px; letter-spacing: 0; color: var(--muted); }
.shelf__h .txtbtn { flex: none; font-size: 15px; color: var(--muted); }
#vids > .shelf__h:first-child { margin-top: 24px; }
.lbl { margin: 28px 0 10px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* grouped list, iOS settings style */
.group { border-radius: var(--r); background: var(--panel); overflow: hidden; }
.row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px; text-align: left; position: relative; transition: background-color .15s; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 70px; right: 0; height: 1px; background: var(--line); }
.row:active { background: var(--well); }
.row__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--well); font-size: 17px; flex: none; }
.row__ic { overflow: hidden; }
.row__ic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.row__t { display: grid; min-width: 0; flex: 1; }
.row__t b { font-weight: 400; }
.row__t small { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row > .ic { color: var(--muted); width: 18px; height: 18px; }
/* asset previews: the logo on paper, whatever the theme */
.row--asset .row__ic { background: #F2EEE8; }
.row--asset .row__ic img { object-fit: contain; padding: 6px; border-radius: 0; }

/* Featured slider: full-width slides with the next one peeking in */
.feat { margin: 0 -16px; }
.feat__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 44px); gap: 10px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.feat__track::-webkit-scrollbar { display: none; }
.feat .hero { scroll-snap-align: start; }
.feat__dots { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.feat__dot { width: 22px; height: 22px; display: grid; place-items: center; }
.feat__dot::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .3s var(--ease), background-color .3s; }
.feat__dot[aria-current="true"]::before { width: 18px; background: var(--fg); }
@media (min-width: 1000px) {
  /* The scroller runs to the screen edge, under the rail, so a slide can
     leave to the left and pass behind it. At rest it snaps to the content
     column: the pane's 40px padding past --rail, the same left edge as the
     heading, the search field, and the lists. */
  .feat {
    --snap: calc(var(--rail, 184px) + 40px);
    margin: 0 -40px 0 calc(-40px - var(--rail, 184px));
    width: calc(100% + var(--rail, 184px) + 80px);
  }
  .feat__track {
    /* 100% is the track's content box, already the content-column width
       (the rail and the 40px insets are padding). Two slides fill that
       column; the gap between them is 10px. */
    grid-auto-columns: calc((100% - 10px) / 2);
    padding: 0 40px 0 var(--snap);
    scroll-padding-left: var(--snap);
  }
  .feat__dots { padding-left: var(--snap); padding-right: 40px; }
}

/* each slide is one tap target, not just its pill */
/* kicker and title read from the top-left; the action sits at the foot */
.hero { position: relative; display: grid; grid-template-rows: auto auto 1fr; align-content: stretch; justify-items: start; gap: 4px; width: 100%; min-height: 220px; padding: 20px; border-radius: 24px; overflow: hidden; color: #fff; background: #130F0C; text-align: left; cursor: pointer; transition: transform .3s var(--ease); }
.hero:active { transform: scale(.985); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: opacity .3s, transform .6s var(--ease); }
.hero:hover img { opacity: .72; transform: scale(1.03); }
.hero > *:not(img) { position: relative; }
/* a printable sits as paper on a coloured ground instead of filling the tile */
.hero:has(.is-paper) { background: var(--paper, #FF4D00); }
.hero img.is-paper { inset: 18px 18px 18px auto; width: 44%; height: auto; max-height: calc(100% - 36px); object-fit: contain; opacity: 1; transform: rotate(4deg); box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); border-radius: 3px; }
.hero:hover img.is-paper { opacity: 1; transform: rotate(0deg) scale(1.03); }
.hero:has(.is-paper) b, .hero:has(.is-paper) small { max-width: 44%; }
/* Printables: a few of the sheets fanned out on the orange */
.hero:has(.hero__fan) { background: var(--paper, #FF4D00); }
.hero:has(.hero__fan) b, .hero:has(.hero__fan) small { max-width: 48%; }
.hero > .hero__fan { position: absolute; top: 0; right: 10px; bottom: 0; width: 52%; pointer-events: none; }
.hero img.hero__sheet { inset: auto; top: 50%; left: 50%; width: 46%; height: auto; object-fit: contain; opacity: 1; border-radius: 3px; box-shadow: 0 14px 28px -12px rgba(0,0,0,.6);
  transform: translate(-50%, -50%) translateX(calc((var(--i) - 1) * 34%)) rotate(calc((var(--i) - 1) * 8deg)) translateY(calc((var(--i) - 1) * (var(--i) - 1) * 6px)); transition: transform .5s var(--spring); }
.hero:hover img.hero__sheet { opacity: 1; transform: translate(-50%, -50%) translateX(calc((var(--i) - 1) * 46%)) rotate(calc((var(--i) - 1) * 12deg)) translateY(calc((var(--i) - 1) * (var(--i) - 1) * 6px - 4px)); }
.hero img.hero__sheet:nth-child(2) { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero img.hero__sheet { transition: none; } }
/* Studio's card: posters in three colours fanned at the right */
.hero:has(.hero__posters) { background: #2A231D; }
.hero:has(.hero__posters) b, .hero:has(.hero__posters) small { max-width: 50%; }
.hero > .hero__posters { position: absolute; top: 0; right: 14px; bottom: 0; width: 50%; pointer-events: none; }
.hero__poster { position: absolute; top: 50%; left: 50%; display: grid; align-content: start; gap: 6px; width: 84px; aspect-ratio: 4 / 5; padding: 6px; border-radius: 4px;
  transform: translate(-50%, -50%) translateX(calc((var(--i) - 1) * 24px)) rotate(calc((var(--i) - 1) * 9deg)) translateY(calc(var(--i) * -4px));
  box-shadow: 0 14px 26px -12px rgba(0,0,0,.7); transition: transform .5s var(--spring); }
.hero__poster img { position: static !important; width: 100%; height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; opacity: 1 !important; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; transform: none !important; }
.hero__poster b { font-weight: 400; font-size: 10.5px !important; line-height: 1.05 !important; letter-spacing: -0.02em; max-width: none !important; }
.hero__poster i { height: 1px; background: currentColor; opacity: .5; }
.hero:hover .hero__poster { transform: translate(-50%, -50%) translateX(calc((var(--i) - 1) * 40px)) rotate(calc((var(--i) - 1) * 13deg)) translateY(calc(var(--i) * -4px - 4px)); }
@media (prefers-reduced-motion: reduce) { .hero__poster { transition: none; } }
.hero small { opacity: .8; }
.hero b { font-weight: 400; font-size: 26px; line-height: 1.08; letter-spacing: -.03em; }
.hero .pill { align-self: end; margin-top: 18px; background: #fff; color: #130F0C; }

.find { position: relative; display: flex; align-items: center; margin-bottom: 18px; }
.find > .ic { position: absolute; left: 16px; color: var(--muted); pointer-events: none; }
.find input { width: 100%; height: 52px; padding: 0 48px 0 48px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; transition: box-shadow .2s; }
.find input:focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 45%, transparent); }
.find input::placeholder { color: var(--muted); }
.find input::-webkit-search-cancel-button { display: none; }
.find__x { position: absolute; right: 6px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); }
.find__x .ic { width: 18px; height: 18px; }
#homeHits .lbl:first-child { margin-top: 4px; }
#homeHits { animation: paneIn .35s var(--ease); }
.qs { border-top: 1px solid var(--line); }
.nohit { padding: 24px 4px; color: var(--muted); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: grid; gap: 18px; padding: 16px; border-radius: var(--r); background: var(--panel); text-align: left; transition: transform .2s var(--ease); }
.tile:active { transform: scale(.97); }
.tile .ic { width: 26px; height: 26px; }
.tile small { display: block; color: var(--muted); font-size: 13px; }

/* Guides: six plain tiles, a tenth shorter than square — the week at the top, the guide's name
   at the foot — then the shape of a night as a timeline */
.gtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gtile {
  display: grid; align-content: space-between; aspect-ratio: 10 / 9; padding: 14px 16px 16px;
  border-radius: 22px; background: var(--panel); text-align: left;
  animation: paneIn .5s var(--ease) var(--d) both;
  transition: transform .3s var(--ease), background-color .2s;
}
.gtile:hover { background: var(--well); }
.gtile:active { transform: scale(.97); }
.gtile__wk { font-size: 13px; color: var(--muted); }
.gtile__name { font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.shift { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: 14px; white-space: nowrap; box-shadow: inset 0 0 0 1.2px currentColor; }

.flow { position: relative; display: grid; gap: 0; }
.flow__step { position: relative; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 0 0 22px; }
.flow__step:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--line); }
.flow__no { grid-row: span 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 14px; }
.flow__step b { font-weight: 400; font-size: 18px; letter-spacing: -.02em; }
.flow__step small { color: var(--muted); font-size: 14px; }
/* who leads it: a small chip with people in it, so it reads apart from
   the description under it */
.flow__who { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--well); }
.flow__step .flow__who { color: var(--fg); font-size: 13px; }
.flow__who svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.flow__who svg .soft { opacity: .5; }
.flow__line { font-size: 14px; color: var(--muted); }

/* Printables: paper spread on a table */
.sub { margin: -10px 0 20px; color: var(--muted); }
.table {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px 18px; align-items: center;
  margin: 0 -16px; padding: 34px 26px 44px;
  border-radius: 28px;
  /* a lamp over the table */
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--fg) 7%, transparent), transparent 70%),
    color-mix(in srgb, var(--fg) 4%, var(--bg));
}
.paper {
  /* the piece sits on the bottom of its cell, so every name in a row lines up */
  display: grid; grid-template-rows: 1fr auto; align-items: end; align-self: stretch; justify-items: center; gap: 12px;
  transform: translate(var(--x), var(--y));
  animation: lay .7s var(--ease) var(--d) both;
}
@keyframes lay { from { opacity: 0; transform: translate(var(--x), calc(var(--y) - 24px)) scale(1.06); } }
.paper__pile { position: relative; display: block; width: var(--w); transform: rotate(var(--r)); transition: transform .45s var(--spring); }
.paper__pile img {
  position: relative; z-index: 2; width: 100%; height: auto; border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 14px 26px -12px rgba(0,0,0,.6), 0 30px 50px -30px rgba(0,0,0,.5);
  transition: box-shadow .45s var(--ease);
}
/* more than one size: the other copies peek out underneath */
.paper__pile.is-pile::before, .paper__pile[data-three]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 3px;
  background: #F4F1EC; box-shadow: 0 10px 20px -12px rgba(0,0,0,.55);
  transform: rotate(5deg) translate(6px, 2px);
  transition: transform .45s var(--spring);
}
.paper__pile[data-three]::after { z-index: 0; background: #E9E5DE; transform: rotate(-6deg) translate(-6px, 4px); }
.paper:hover .paper__pile, .paper:focus-visible .paper__pile { transform: rotate(0) translateY(-6px) scale(1.03); }
.paper:hover .paper__pile img { box-shadow: 0 2px 2px rgba(0,0,0,.2), 0 26px 40px -16px rgba(0,0,0,.6), 0 44px 70px -36px rgba(0,0,0,.5); }
.paper:hover .paper__pile.is-pile::before { transform: rotate(9deg) translate(12px, 4px); }
.paper:hover .paper__pile[data-three]::after { transform: rotate(-10deg) translate(-12px, 6px); }
.paper:active .paper__pile { transform: rotate(0) scale(.97); }
.paper__tag { display: grid; align-self: start; text-align: center; font-size: 15px; line-height: 1.25; }
/* The pamphlet is a booklet: pages fanning out past the cover's right and
   bottom edges, and the fold shading the cover along its spine */
.paper__pile.is-booklet::before {
  content: ""; position: absolute; z-index: 1; left: 2px; top: 4px; right: -9px; bottom: -7px; border-radius: 2px 5px 5px 2px;
  background:
    repeating-linear-gradient(90deg, #FFFFFF 0 2px, #CFC9C0 2px 3px) right / 10px 100% no-repeat,
    repeating-linear-gradient(180deg, #FFFFFF 0 2px, #CFC9C0 2px 3px) bottom / 100% 8px no-repeat,
    #F4F1EC;
  box-shadow: 0 14px 24px -12px rgba(0,0,0,.6);
}
.paper__pile.is-booklet::after {
  content: ""; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 12%; border-radius: 3px 0 0 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 45%, rgba(255,255,255,.12) 62%, transparent 85%);
}
.paper:hover .paper__pile.is-booklet::before { transform: none; }
.paper__tag small { font-size: 13px; color: var(--muted); }

/* question generator (wiki-questions.js), on the Guides tab: week chips,
   then one big question on a card — tap it, or the button, for another */
.qgen__chips { margin-bottom: 10px; }
.qgen__card { display: grid; align-content: space-between; gap: 18px; min-height: 230px; padding: 22px 22px 20px; border-radius: 24px; background: var(--panel); cursor: pointer; transition: opacity .16s, transform .16s var(--ease); }
.qgen__card.is-out { opacity: 0; transform: translateY(6px); }
.qgen__wk { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qgen__q { margin: 0; font-size: clamp(26px, 6.4vw, 38px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.qgen__fu { margin: 0; font-size: 15px; }
.qgen__fu span { color: var(--muted); }
.qgen__fu span::after { content: " →"; }
.qgen__fu b { font-weight: 400; }
.qgen__goal { margin: 12px 4px 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.qgen__go { display: flex; gap: 8px; margin-top: 14px; }
.qgen__go .pill { min-height: 48px; padding: 0 20px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .qgen__card { transition: none; } }

/* video filters */
.fchips { display: flex; gap: 8px; margin: 0 -16px 6px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.fchips::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; transition: background-color .2s, color .2s, box-shadow .2s; }
.fchip span { font-size: 12px; color: var(--muted); }
.fchip[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.fchip[aria-pressed="true"] span { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.fchip--tog::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.fchip--tog[aria-pressed="true"]::before { background: currentColor; }
.vcard__len { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 7px; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; font-style: normal; }
.txtbtn { text-decoration: underline; text-underline-offset: 3px; color: var(--fg); }
.vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; }
/* All view: each shelf is one swipeable row, not a wrapping grid. The row
   bleeds to the screen edge like .fchips so cards slide out from under it. */
.vgrid--row {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 10px) / 2.2);
  margin: 0 -16px; padding: 0 16px 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.vgrid--row::-webkit-scrollbar { display: none; }
.vgrid--row > .vcard { scroll-snap-align: start; }
.vgrid .vcard__t { font-size: 14px; line-height: 1.25; }
.vgrid .vcard__a { border-radius: 12px; }
.vgrid .vcard__a .ic { width: 30px; height: 30px; padding: 8px; left: 6px; bottom: 6px; }
.vgrid .vcard__len { right: 6px; bottom: 6px; }
.vcard { position: relative; }
.vcard__play { display: grid; gap: 6px; width: 100%; text-align: left; }
/* share sits on the thumbnail's top corner, clear of play and the length */
.vcard__share { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s, transform .2s var(--ease); }
.vcard__share .ic { width: 17px; height: 17px; }
.vcard__share:hover { background: rgba(0,0,0,.75); }
.vcard__share:active { transform: scale(.92); }
.vgrid .vcard__share { top: 6px; right: 6px; width: 30px; height: 30px; }
.vgrid .vcard__share .ic { width: 15px; height: 15px; }
.vcard__a { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: var(--well); }
.vcard__a img { width: 100%; height: 100%; object-fit: cover; }
.vcard__a .ic { position: absolute; left: 10px; bottom: 10px; width: 38px; height: 38px; padding: 10px; border-radius: 50%; background: rgba(255,255,255,.92); color: #130F0C; }
.vcard small { color: var(--muted); font-size: 13px; }

/* Questions: the homepage FAQ's rows */
.faq { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 44px; padding-block: 22px;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.35;
  list-style: none; cursor: pointer;
  transition: opacity .2s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { opacity: .7; }
.qa summary i { position: relative; width: 16px; height: 16px; flex: none; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; background: var(--fg); transition: transform .3s var(--ease); }
.qa summary i::before { left: 0; right: 0; top: 7.5px; height: 1px; }
.qa summary i::after { top: 0; bottom: 0; left: 7.5px; width: 1px; }
.qa[open] summary i::after { transform: scaleY(0); }
.qa__body { padding-bottom: 28px; }
.qa__body p { color: var(--fg); line-height: 1.6; max-width: 68ch; }
.qa__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.qa__link:hover { opacity: .7; }
.qa__body ul { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.qa__body li { position: relative; padding-left: 20px; line-height: 1.5; }
.qa__body li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.qa[open] .qa__body { animation: qaIn .35s var(--ease); }
@keyframes qaIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .qa[open] .qa__body { animation: none; } }

/* Tab bar — Studio's. On a phone it floats: a Liquid Glass pill over the
   page, as in iOS, with the list scrolling on beneath it and a lens that
   slides to the chosen tab. From 1000px it is a rail, width --rail. */
.tabbar {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.tab { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; padding: 8px 0 6px; border-radius: 14px; font-size: 11px; letter-spacing: 0; color: var(--muted); transition: color .2s, background-color .2s, transform .35s var(--spring); }
.tab .ic { width: 24px; height: 24px; stroke-width: 1.25; }
.tab[aria-selected="true"] { color: var(--fg); }
.tab[aria-selected="true"] .ic { stroke-width: 1.5; }
.tab__dot { display: none; }
.tabbar__lens { display: none; }

@media (max-width: 999.98px) {
  .tabbar {
    left: 12px; right: 12px; bottom: max(12px, calc(var(--safe-b) - 8px));
    max-width: 440px; margin: 0 auto;
    padding: 4px;
    border-radius: 999px;
    background: var(--dock-glass);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: var(--dock-edge);
  }
  .tab { padding: 7px 0 6px; border-radius: 999px; font-size: 10.5px; -webkit-tap-highlight-color: transparent; }
  .tab:active { transform: scale(.92); }
  .tabbar__lens {
    display: block; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
    border-radius: 999px; background: var(--dock-lens);
    transition: transform .55s var(--spring), width .55s var(--spring);
  }
  .tabbar.is-settling .tabbar__lens { transition: none; }
}
/* Reduce Transparency, Increase Contrast: the glass turns solid */
@media (max-width: 999.98px) and (prefers-reduced-transparency: reduce), (max-width: 999.98px) and (prefers-contrast: more) {
  .tabbar { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line), 0 12px 32px -12px rgba(0,0,0,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .tabbar__lens { transition: none; }
  .tab:active { transform: none; }
}

/* Brand Toolkit: Studio as a slim callout under the table — two tiny
   posters, a line, and Open */
.kitcall { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 14px 12px 12px; border-radius: 20px; background: var(--panel); color: var(--fg); transition: background-color .2s; }
.kitcall__art { position: relative; width: 52px; height: 52px; }
.kitcall__art i { position: absolute; top: 6px; width: 28px; aspect-ratio: 4 / 5; border-radius: 3px; background: var(--c); transform: rotate(var(--r)); box-shadow: 0 6px 12px -6px rgba(0,0,0,.6); transition: transform .45s var(--spring); }
.kitcall__art i:first-child { left: 2px; }
.kitcall__art i:last-child { left: 21px; top: 9px; }
.kitcall:hover .kitcall__art i:first-child { transform: rotate(-10deg) translateX(-2px); }
.kitcall:hover .kitcall__art i:last-child { transform: rotate(9deg) translateX(2px); }
.kitcall__t { display: grid; gap: 2px; min-width: 0; }
.kitcall__t b { font-weight: 400; font-size: 17px; }
.kitcall__t small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.kitcall__go { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; }
.kitcall__go .ic { width: 14px; height: 14px; }

/* Guidelines and Studio, one half each, under the downloads */
.kitsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; align-items: stretch; }
.kitpair { display: grid; grid-template-rows: auto 1fr auto; align-content: start; gap: 14px; min-height: 100%; padding: 10px 10px 16px; border: 0; border-radius: 22px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .2s; }
.kitpair:hover, .kitpair:focus-visible { background: color-mix(in srgb, var(--fg) 7%, var(--panel)); outline: none; }
/* in light, a grey hover read cold against the paper: warm it toward the page */
:root[data-theme="light"] .kitpair:hover, :root[data-theme="light"] .kitpair:focus-visible { background: color-mix(in srgb, var(--bg) 55%, var(--panel)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .kitpair:hover, :root:not([data-theme="dark"]) .kitpair:focus-visible { background: color-mix(in srgb, var(--bg) 55%, var(--panel)); } }
.kitpair__art { position: relative; display: grid; place-items: center; align-content: center; gap: 14px; min-height: 190px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 4%, var(--bg)); overflow: hidden; }
.kitpair__art--guide { background: #F4F1EC; color: #130F0C; gap: 16px; }
.kitpair__art--guide img { width: 48%; }
.kitpair__cap { font-family: var(--font); font-weight: 400; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; }
.kitpair__t { display: grid; gap: 2px; padding: 0 6px; }
.kitpair__t b { font-weight: 400; font-size: 18px; letter-spacing: -0.02em; }
.kitpair__t small { color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.kitpair__go { justify-self: start; display: inline-flex; align-items: center; gap: 2px; height: 34px; margin-left: 6px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; }
.kitpair__go .ic { width: 14px; height: 14px; }
.kitpair:hover .kit__poster--a, .kitpair:focus-visible .kit__poster--a { transform: rotate(-9deg) translate(-6px, -6px); }
.kitpair:hover .kit__poster--b, .kitpair:focus-visible .kit__poster--b { transform: rotate(8deg) translate(6px, -6px); }
@media (max-width: 999.98px) { .kitsplit { grid-template-columns: 1fr; } }
/* the avatar maker's card: full width, five of its avatars fanned out */
.kitav { width: 100%; margin-top: 16px; color: var(--fg); text-decoration: none; }
.kitav__art { display: flex; justify-content: center; align-items: center; gap: 0; min-height: 230px; padding: 24px 16px; background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
.kitav__art img { width: min(24%, 140px); aspect-ratio: 1; margin: 0 -2.4%; border-radius: 50%; box-shadow: 0 14px 30px -16px rgba(0,0,0,.55); transform: translateY(calc((var(--i) - 2) * (var(--i) - 2) * 4px)) rotate(calc((var(--i) - 2) * 4deg)); transition: transform .5s var(--spring); }
.kitav__art img:nth-child(3) { z-index: 1; width: min(28%, 164px); }
.kitav:hover .kitav__art img, .kitav:focus-visible .kitav__art img { transform: translateY(calc((var(--i) - 2) * (var(--i) - 2) * 6px - 6px)) rotate(calc((var(--i) - 2) * 7deg)); }
@media (prefers-reduced-motion: reduce) { .kitav__art img { transition: none; } }

/* the whole kit in one download, above the pieces */
.kitall { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 14px 20px 14px 16px; border-radius: 22px; background: var(--fg); color: var(--bg); transition: transform .3s var(--ease); }
.kitall:active { transform: scale(.985); }
.kitall .ic { width: 22px; height: 22px; flex: none; }
.kitall span { display: grid; gap: 2px; min-width: 0; }
.kitall b { font-weight: 400; font-size: 17px; }
.kitall small { font-size: 13px; line-height: 1.35; opacity: .65; }

/* Brand Toolkit: each download its own card, like Studio's format cards —
   the thing itself in a well up top, its name and file under it */
.table.kit { gap: 12px; align-items: stretch; margin: 0; padding: 0; border-radius: 0; background: none; }
.kit__item { display: grid; grid-template-rows: auto auto; align-content: start; justify-items: stretch; gap: 12px; padding: 10px 10px 14px; text-align: left; cursor: pointer; border-radius: 22px; background: var(--panel); color: var(--fg); transition: background-color .2s; }
.kit__item--wide { grid-column: 1 / -1; }
.kit .paper__tag { justify-items: start; gap: 2px; padding: 0 6px; text-align: left; font-size: 16px; }
.kit .paper__tag small { display: flex; align-items: flex-start; gap: 5px; text-align: left; }
.kit .paper__tag small .ic { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.kit__art { display: grid; grid-auto-flow: column; place-items: center; place-content: center; gap: 14px; width: 100%; height: 130px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 4%, var(--bg)); color: var(--fg); }
.kit__art img { width: 72%; height: auto; max-height: 100%; transition: transform .45s var(--spring); }
/* the files are black on clear: white on the dark theme, as drawn on light */
.kit__art img { filter: invert(1); }
:root[data-theme="light"] .kit__art img { filter: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .kit__art img { filter: none; } }
.kit__art--mark img { width: auto; height: 60px; }
.kit__art--pack img { width: auto; height: 34px; }
.kit__art--pack img + img { height: 40px; }
.kit__art--type { font-size: 64px; line-height: 1; letter-spacing: -0.04em; }
.kit__art--guide { gap: 0; }
.kit__art--guide i { width: 38px; height: 54px; margin: 0 -5px; border-radius: 5px; background: var(--c); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent), 0 8px 16px -8px rgba(0,0,0,.6); transition: transform .45s var(--spring); }
.kit__art--guide i:nth-child(odd) { transform: rotate(-5deg); }
.kit__art--guide i:nth-child(even) { transform: rotate(4deg) translateY(4px); }
.kit__item:hover .kit__art--guide i { transform: none; }
/* a file's card: its download sits in the corner of the art, beside the card */
.kit__cell { position: relative; display: grid; }
.kit__dl { position: absolute; top: 18px; right: 18px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); animation: lay .7s var(--ease) var(--d) both; transition: background-color .2s, color .2s, transform .2s var(--ease); }
.kit__dl .ic { width: 18px; height: 18px; }
.kit__dl:hover, .kit__dl:focus-visible { background: var(--fg); color: var(--bg); }
.kit__dl:active { transform: scale(.92); }
/* Brand downloads in the side sheet: each colour's preview on its own
   ground, then its files as big buttons */
.kitdl { margin-top: 18px; }
.kitdl .sheet__art { height: 150px; margin: 0 0 12px; }
.kitdl__art--black { background: #F2EEE8 !important; }
.kitdl__art--white { background: #130F0C !important; }
.kitdl .sheet__art img { width: 62%; max-height: 90px; box-shadow: none; border-radius: 0; }
.kitdl__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; }
.kitdl__row b { font-weight: 400; font-size: 17px; }
.kitdl__art--type { font-size: 96px; letter-spacing: -0.04em; line-height: 1; }
.paper:hover .kit__art img { transform: scale(1.04); }
/* Studio: two of its posters, leaning on each other */
.kit__posters { position: relative; display: block; width: 100%; height: 190px; }
.kit__poster { position: absolute; top: 8px; display: grid; align-content: start; gap: 8px; width: 118px; aspect-ratio: 4 / 5; padding: 9px; border-radius: 4px; color: #130F0C; text-align: left;
  box-shadow: 0 14px 26px -12px rgba(0,0,0,.6), 0 30px 50px -30px rgba(0,0,0,.5); transition: transform .45s var(--spring); }
.kit__poster img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; }
.kit__poster b { font-weight: 400; font-size: 13px; line-height: 1.05; letter-spacing: -0.03em; }
.kit__poster i { height: 1px; margin-top: 4px; background: currentColor; opacity: .5; }
.kit__poster--a { left: calc(50% - 128px); background: #F5D63D; transform: rotate(-6deg); }
.kit__poster--b { left: calc(50% + 4px); top: 18px; background: #F2B8C6; transform: rotate(5deg); }
.kit__item:hover .kit__poster--a, .kit__item:focus-visible .kit__poster--a { transform: rotate(-9deg) translate(-6px, -6px); }
.kit__item:hover .kit__poster--b, .kit__item:focus-visible .kit__poster--b { transform: rotate(8deg) translate(6px, -6px); }
@media (prefers-reduced-motion: reduce) { .kit__poster { transition: none; } }

/* sheet */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.is-on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 21; left: 0; right: 0; bottom: 0;
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 20px calc(24px + var(--safe-b));
  border-radius: 28px 28px 0 0; background: var(--panel);
  transform: translateY(105%); transition: transform .5s var(--ease);
  touch-action: pan-y;
}
.sheet.is-on { transform: none; }
.sheet__grab { width: 40px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: var(--line); }
.sheet__x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--well); }
.sheet__x .ic { width: 18px; height: 18px; }
.sheet h2 { font-size: 30px; letter-spacing: -.03em; line-height: 1.05; }
.sheet .lead { margin-top: 8px; color: var(--muted); }
.sheet__art { display: grid; place-items: center; height: 260px; margin: 18px 0; border-radius: 18px; background: var(--well); padding: 20px; }
.sheet__art img { max-height: 220px; width: auto; box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); border-radius: 4px; }
/* flipping through a multi-page printable: the page turns in from the side
   it comes from; arrows either side, the page count underneath */
.flip { position: relative; overflow: hidden; perspective: 1200px; }
.flip .flip__page { position: absolute; top: 20px; left: 50%; display: flex; opacity: 0; transform: translateX(calc(-50% + 40%)) rotateY(-28deg); transform-origin: left center;
  transition: opacity .3s var(--ease), transform .45s var(--ease); pointer-events: none; }
.flip .flip__page.is-back { transform: translateX(calc(-50% - 40%)) rotateY(28deg); transform-origin: right center; }
.flip .flip__page.is-on { opacity: 1; transform: translateX(-50%); }
.flip .flip__page img { display: block; max-height: 200px; width: auto; border-radius: 3px; box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); }
/* a spread: two pages meeting at the fold, the gutter shaded */
.flip .flip__page.is-spread img:first-child { border-radius: 3px 0 0 3px; -webkit-mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.82)); mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.82)); }
.flip .flip__page.is-spread img:last-child { border-radius: 0 3px 3px 0; -webkit-mask-image: linear-gradient(270deg, #000 88%, rgba(0,0,0,.82)); mask-image: linear-gradient(270deg, #000 88%, rgba(0,0,0,.82)); }
.flip--spreads .flip__page img { max-height: 180px; }
.flip__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -24px; border-radius: 50%; background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -8px rgba(0,0,0,.5); transition: opacity .2s; }
.flip__nav .ic { width: 18px; height: 18px; }
.flip__nav--prev { left: 10px; }
.flip__nav--prev .ic { transform: scaleX(-1); }
.flip__nav--next { right: 10px; }
.flip__nav:disabled { opacity: 0; pointer-events: none; }
.flip__count { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .flip .flip__page { transition: opacity .2s; } }
/* a logo's sheet: the preview sits on the ground that colour is for, and
   each pick is a big two-up choice — easy to hit with a thumb, and it
   never runs past the sheet's edge */
.logo-art { height: 200px; transition: background-color .3s; }
.logo-art[data-c="black"] { background: #F2EEE8; box-shadow: inset 0 0 0 1px rgba(19,15,12,.08); }
.logo-art[data-c="white"] { background: #130F0C; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.logo-art img { width: 70%; max-height: 120px; box-shadow: none; border-radius: 0; }
.sheet .lbl { margin: 20px 0 8px; }
.choose { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choose button { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 60px; padding: 10px 14px; border: 0; border-radius: 16px; background: var(--well); color: var(--fg); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: box-shadow .2s, transform .2s var(--ease); }
.choose button:active { transform: scale(.97); }
.choose button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--fg); }
.choose span { display: grid; gap: 1px; min-width: 0; }
.choose small { color: var(--muted); font-size: 12.5px; line-height: 1.25; }
.choose__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; }
.choose__dot--black { background: #130F0C; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.choose__dot--white { background: #fff; box-shadow: inset 0 0 0 1px rgba(19,15,12,.2); }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 16px; }
.sizes .pill { min-height: 52px; font-size: 15px; }
.steps { margin-top: 18px; display: grid; gap: 2px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--well); font-size: 13px; }
.steps small { color: var(--muted); font-size: 14px; }
.cta { width: 100%; min-height: 56px; margin-top: 20px; font-size: 16px; }

@media (min-width: 1000px) {
  /* the same progressive blur as on a phone, across the whole bar, once
     the title has scrolled under it */
  .top, .top.is-tucked { position: fixed; left: 0; right: 0; height: 68px; padding: 0 24px; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .panes { margin-left: var(--rail, 184px); max-width: 1084px; padding: 108px 40px 60px; }
  .tabbar { top: 68px; right: auto; width: var(--rail, 184px); grid-template-columns: none; grid-auto-rows: max-content; align-content: start; gap: 4px; padding: 8px 10px; border-top: 0; border-right: 1px solid var(--line); background: var(--bg); }
  /* rail: small icon with the label beside it — same as Studio's */
  .tab { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 12px; padding: 10px 14px; font-size: 15px; }
  .tab .ic { width: 20px; height: 20px; }
  .tab[aria-selected="true"] { background: var(--well); }
  .tab:hover { color: var(--fg); }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .gtiles { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gtile { aspect-ratio: 5 / 3; padding: 20px 20px 22px; }
  .gtile__name { font-size: 28px; }
  .flow { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .flow__step { grid-template-columns: 1fr; row-gap: 4px; align-content: start; padding: 0; }
  .flow__step:not(:last-child)::after { left: 46px; right: -8px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .flow__no { grid-row: auto; margin-bottom: 10px; }
  .table { grid-template-columns: repeat(3, 1fr); gap: 56px 44px; margin: 0; padding: 56px 56px 64px; }
  .table.kit { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; }
  .kitall { margin-bottom: 16px; }
  .vgrid { grid-template-columns: repeat(3, 1fr); gap: 22px 16px; }
  /* run the rows past the pane's right padding to the window edge */
  .vgrid--row {
    --bleed: max(40px, 100vw - var(--rail, 184px) - 1084px + 40px);
    grid-template-columns: none;
    grid-auto-columns: calc((100% - var(--bleed) - 40px - 32px) / 3.2);
    margin-right: calc(-1 * var(--bleed)); padding-right: var(--bleed);
    scroll-padding-right: var(--bleed);
    /* and left, past the pane's 40px padding, so cards scroll away under
       the sidebar's edge instead of stopping short of it */
    margin-left: -40px; padding-left: 40px; scroll-padding-left: 40px;
  }
  .scrim { display: none; }
  .sheet { left: auto; top: 12px; right: 12px; bottom: 12px; width: 420px; max-height: none; border-radius: 24px; transform: translateX(110%); box-shadow: 0 30px 60px -20px rgba(0,0,0,.45), inset 0 0 0 1px var(--line); }
  .sheet__grab { display: none; }
  /* no grab bar above the title here, so it needs its own room — this
     lines its first line up with the close button */
  .sheet { padding-top: 18px; }
}

/* player: share row under the video, and the little confirmation toast */
.vplayer__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.vplayer__act { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 15px; text-decoration: none; transition: background-color .2s; }
.vplayer__act:hover { background: rgba(255,255,255,.24); }
.vplayer__act .ic { width: 18px; height: 18px; }
.wtoast { position: fixed; z-index: 90; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translate(-50%, 12px); padding: 12px 18px; border-radius: 999px; background: #fff; color: #130F0C; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease); max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtoast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── Brand guidelines (brand-guide.js) ─────────────────────────────────
   The basics, in the side sheet: each part in a well, short rules under it. */
.bg__sec { margin-top: 14px; padding: 18px 16px 20px; border-radius: 20px; background: var(--well); }
.bg__sec h3 { margin: 0 0 12px; font-weight: 400; font-size: 22px; letter-spacing: -0.03em; }
.bg__sec > p { margin: 0 0 12px; color: color-mix(in srgb, var(--fg) 82%, transparent); line-height: 1.45; }
.bg__sec b { font-weight: 400; color: var(--fg); }
.bg-hint { color: var(--muted); }
.bg-rules { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.bg-rules li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.bg-rules li::before { content: ""; position: absolute; left: 1px; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--fg); }
.bg-logo { display: flex; align-items: center; justify-content: center; gap: 28px; height: 120px; border-radius: 14px; background: #F4F1EC; }
.bg-logo img { width: 46%; }
.bg-logo img + img { width: auto; height: 40px; }
.bg-sws { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bg-sw { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 8px; border: 0; border-radius: 14px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: transform .2s var(--ease); }
.bg-sw:active { transform: scale(.97); }
.bg-sw__chip { grid-row: span 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: var(--c); color: var(--on); font-size: 18px; letter-spacing: -0.04em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent); }
.bg-sw b { font-weight: 400; font-size: 15px; }
.bg-sw small, .bg-sw em { font-size: 12px; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.bg__sec > .bg-type { margin: 0; font-size: 34px; line-height: 1.05; letter-spacing: -0.04em; color: var(--fg); }
.bg__sec h4 { margin: 16px 0 10px; font-weight: 400; font-size: 15px; color: var(--muted); }
.bg-donts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.bg-dont { display: grid; gap: 6px; margin: 0; }
.bg-dont__art { display: grid; place-items: center; height: 46px; border-radius: 8px; background: #F4F1EC; overflow: hidden; }
.bg-dont__art img { width: 68%; }
.bg-dont figcaption { font-size: 12px; line-height: 1.3; color: var(--muted); }
.bg-dont--stretch img { transform: scaleX(1.55); }
.bg-dont--tilt img { transform: rotate(-16deg); }
.bg-dont--recolor img { background-color: #E10098; -webkit-mask: url("wiki/files/brand/whisper-wordmark-black.svg") center / contain no-repeat; mask: url("wiki/files/brand/whisper-wordmark-black.svg") center / contain no-repeat alpha; object-fit: none; object-position: -4000px center; }
.bg-dont--outline img { filter: drop-shadow(1px 0 0 #FF4D00) drop-shadow(-1px 0 0 #FF4D00) drop-shadow(0 1px 0 #FF4D00) drop-shadow(0 -1px 0 #FF4D00); }
.bg-dont--shadow img { filter: drop-shadow(4px 5px 0 #FF4D00); }
.bg-dont--busy .bg-dont__art { background: repeating-linear-gradient(45deg, #FF4D00 0 6px, #FFE600 6px 12px, #0064F3 12px 18px); }
.bg-scale { display: grid; gap: 12px; margin-top: 16px; }
.bg-scale div { display: grid; gap: 2px; }
.bg-scale__k { font-size: 12px; color: var(--muted); }
.bg-say { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.bg-say div { padding: 12px; border-radius: 12px; background: var(--panel); }
.bg-say b { display: block; margin-bottom: 8px; font-weight: 400; font-size: 13px; }
.bg-say p { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }
.bg-say p:last-child { margin: 0; }
.bg-say .is-no p { color: var(--muted); }