/* =========================================================================
   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);
  --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);
}
@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);
  }
}

*, *::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 {
  position: sticky; top: 0; z-index: 5;
  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;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.top.is-tucked { border-color: var(--line); background: var(--glass); backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px); }
.top__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); }
.top__mark { display: flex; }
.top__mark .wmark { width: 32px; height: 32px; }
.top__name { font-size: 20px; letter-spacing: -0.02em; line-height: 1; }
.top .amenu { margin-left: auto; }

.panes { padding: 16px 16px calc(84px + 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; }
.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) {
  .feat { margin: 0; }
  .feat__track { grid-auto-columns: calc(50% - 5px); padding: 0; scroll-padding: 0; }
}

/* 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%; }
.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: numbered week tiles (rows with a badge on a phone), then the
   shape of a night as a timeline */
.weeks { display: grid; gap: 8px; }
.week {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 12px 44px 12px 12px; border-radius: var(--r); background: var(--panel); text-align: left;
  animation: paneIn .5s var(--ease) var(--d) both;
  transition: transform .3s var(--ease), background-color .2s;
}
.week:hover { background: var(--well); }
.week:active { transform: scale(.985); }
.week__num { display: grid; place-content: center; justify-items: center; flex: none; width: 64px; height: 64px; border-radius: 14px; background: var(--well); font-size: 26px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.week__num small { margin-bottom: 3px; font-size: 11px; letter-spacing: 0; color: var(--muted); }
.week__txt { display: grid; gap: 2px; min-width: 0; }
.week__name { font-size: 20px; letter-spacing: -.02em; }
.week__line { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.week > .ic { position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); }
.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; }
.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 {
  display: grid; 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; text-align: center; font-size: 15px; line-height: 1.25; }
.paper__tag small { font-size: 13px; color: var(--muted); }

/* 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; }
.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: docked full width on a phone, a 184px rail from 1000px */
.tabbar {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 4px 6px calc(4px + var(--safe-b));
  background: var(--chrome);
  border-top: 1px solid var(--line);
}
.tab { 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; }
.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; }

/* 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; }
.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) {
  .top, .top.is-tucked { position: fixed; left: 0; right: 0; height: 68px; padding: 0 24px; background: var(--bg); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .panes { margin-left: 184px; max-width: 1084px; padding: 100px 40px 60px; }
  .tabbar { top: 68px; right: auto; width: 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); }
  .weeks { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .week { flex-direction: column; align-items: stretch; gap: 24px; padding: 20px 20px 22px; }
  .week__num { display: block; width: auto; height: auto; background: none; justify-items: normal; place-content: normal; font-size: 56px; letter-spacing: -.04em; }
  .week__num small { display: block; margin-bottom: 8px; font-size: 13px; }
  .week__name { font-size: 24px; }
  .week > .ic { top: 22px; right: 20px; margin: 0; }
  .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; }
  .vgrid { grid-template-columns: repeat(3, 1fr); gap: 22px 16px; }
  .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); }