/*
 * Tutee.Page landing page. One stylesheet, no build step, no web fonts: the app's system font.
 *
 * Under the landing's own header the page is Tutee.Page itself: the app's top bar, edge to edge,
 * and one lesson page in a reading column, with the call in its margin. The colours are the app's
 * tokens (web/src/styles/tokens.css), and the blocks, menus and carets copy the app's own styles
 * (web/src/editor/editor.css, web/src/ui/ui.css, web/src/blocks/*), so the page, the live lesson in
 * it and the screenshots share one look. The theme follows the system unless the visitor picks one
 * (data-theme on <html>, set by site.js).
 */

:root {
  color-scheme: light;
  --paper: #faf9f6;
  --desk: #f1f0eb;
  --ink: #1f1f1d;
  --muted: #66655f;
  --faint: #9d9b93;
  --line: #e4e2da;
  --line-strong: #d3d1c8;
  --card: #ffffff;
  --accent: #2f5fd8;
  --accent-ink: #ffffff;
  --peer: #c2338b;
  --peer-ink: #ffffff;
  --rec: #e5484d;
  --hl: color-mix(in srgb, #f5d90a 42%, transparent);
  --warn: #a15c07;
  --ok: #1f7a45;
  --bad: #b8322a;
  --shot-shadow:
    0 1px 1px rgb(31 31 29 / 0.04), 0 4px 10px rgb(31 31 29 / 0.05),
    0 24px 60px -12px rgb(31 31 29 / 0.16);
  /* The app's font (web/src/styles/tokens.css --font) */
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --wrap: 1180px;
  --column: 700px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --top: 64px;
  --tile-w: clamp(150px, calc((100vw - var(--column)) / 2 - 72px), 226px);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #151514;
  --desk: #1b1b1a;
  --ink: #ebe9e3;
  --muted: #a09f97;
  --faint: #6f6e68;
  --line: #2a2a28;
  --line-strong: #3d3c39;
  --card: #1e1e1d;
  --accent: #8db0ff;
  --accent-ink: #0d1a3a;
  --peer: #ff7ac6;
  --peer-ink: #2a0a1d;
  --warn: #f2b35a;
  --hl: color-mix(in srgb, #f5d90a 26%, transparent);
  --ok: #66d18f;
  --bad: #ff8577;
  --shot-shadow:
    0 1px 1px rgb(0 0 0 / 0.3), 0 4px 12px rgb(0 0 0 / 0.3), 0 30px 70px -14px rgb(0 0 0 / 0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: #151514;
    --desk: #1b1b1a;
    --ink: #ebe9e3;
    --muted: #a09f97;
    --faint: #6f6e68;
    --line: #2a2a28;
    --line-strong: #3d3c39;
    --card: #1e1e1d;
    --accent: #8db0ff;
    --accent-ink: #0d1a3a;
    --peer: #ff7ac6;
    --peer-ink: #2a0a1d;
    --warn: #f2b35a;
    --hl: color-mix(in srgb, #f5d90a 26%, transparent);
    --ok: #66d18f;
    --bad: #ff8577;
    --shot-shadow:
      0 1px 1px rgb(0 0 0 / 0.3), 0 4px 12px rgb(0 0 0 / 0.3), 0 30px 70px -14px rgb(0 0 0 / 0.6);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* The people's pointers and menus are placed in page coordinates on the body; the body clips what
   would run past the window's edge, so a phone never widens the page for a name tag. */
html {
  overflow-x: clip;
}
body {
  position: relative;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 50;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ico {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ───────────── Type ───────────── */

h1,
h2 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 650;
  text-wrap: balance;
}
h1 {
  font-size: clamp(25px, 6.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.028em;
}
h2 {
  font-size: clamp(22px, 2.6vw, 29px);
  line-height: 1.22;
  letter-spacing: -0.016em;
}
p {
  margin: 0;
  text-wrap: pretty;
}

/* ───────────── Buttons ───────────── */

.btn {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 16px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--ink) 86%, var(--accent));
}
.btn-primary:active {
  transform: translateY(1px);
}
.btn-primary .arrow {
  transition: transform 0.25s ease;
}
.btn-primary:hover .arrow {
  transform: translateX(3px);
}
.btn-small {
  --h: 40px;
  padding: 0 18px;
  font-size: 15px;
}

/* ───────────── The landing's header: the one thing the app does not have ───────────── */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--top);
  max-width: none;
}
/* The mark and the name as the lockup sets them (landing/brand): the mark twice the name's cap
   height, a quarter of its own height away, in the text's colour. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-right: auto;
  font: 600 19px/1 var(--sans);
  letter-spacing: -0.015em;
  text-decoration: none;
}
.brand svg {
  width: 1.81em;
  height: 1.44em;
  flex: none;
}
.skip-btn[hidden] {
  display: none;
}
.skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin-right: 4px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 14px/1 var(--sans);
  cursor: pointer;
}
.skip-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.skip-btn .ico {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
}
.skip-btn[data-mode='replay'] .ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
.signin {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
}
.signin:hover {
  color: var(--ink);
}
.theme {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.theme:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.theme svg {
  width: 19px;
  height: 19px;
}
.theme .moon {
  display: none;
}
:root[data-theme='dark'] .theme .sun {
  display: none;
}
:root[data-theme='dark'] .theme .moon {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme .sun {
    display: none;
  }
  :root:not([data-theme='light']) .theme .moon {
    display: block;
  }
}
.join .short {
  display: none;
}

/* ───────────── The app: its top bar, edge to edge (shell TitleBar) ───────────── */

.app {
  position: relative;
  display: block;
}
.app-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 12px 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--desk);
  color: var(--muted);
  font-size: 13px;
}
.ab-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
.ab-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  min-width: 0;
  margin-bottom: -1px;
  padding: 0 14px;
  border-inline: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.ab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ab-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--peer);
}
.ab-grow {
  flex: 1;
}
.ab-people {
  display: flex;
  margin-right: 4px;
}
.av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--desk);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 11px/1 var(--sans);
}
.av + .av {
  margin-left: -7px;
}
.av-s {
  background: var(--peer);
  color: var(--peer-ink);
}
.ab-call {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.ab-call.on {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
}
.ab-share {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
/* Nobody else on the page yet */
.av-s,
.ab-dot {
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.app.alone .av-s,
.app.alone .ab-dot {
  opacity: 0;
  transform: scale(0.4);
}

/* ───────────── The page: one reading column, written top to bottom ───────────── */

.app-page {
  min-height: calc(100vh - var(--top) - 46px);
  padding: clamp(36px, 6vw, 80px) var(--gutter) clamp(80px, 10vw, 140px);
}
.doc {
  max-width: var(--column);
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.65;
}
.doc > * + *,
.doc section > * + * {
  margin-top: 18px;
}
.doc-lead {
  color: var(--muted);
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.45;
}
.doc > .doc-lead {
  margin-top: 14px;
}
.doc > .doc-lead + * {
  margin-top: clamp(32px, 4vw, 48px);
}
.doc section {
  margin-top: clamp(64px, 9vw, 120px);
  scroll-margin-top: calc(var(--top) + 24px);
}
/* Air under a heading, so what follows reads as its own block */
.doc section > h2 + * {
  margin-top: clamp(18px, 2.2vw, 24px);
}
.doc ul {
  margin-bottom: 0;
  padding-left: 1.25em;
}
.doc li + li {
  margin-top: 0.45em;
}
/* What the credits cover: one figure per tile, large */
.doc ul.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-left: 0;
  list-style: none;
}
.doc ul.stats li {
  margin: 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}
.doc ul.stats b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .doc ul.stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.doc li::marker {
  color: var(--faint);
}
.doc li b,
.doc p b {
  font-weight: 650;
}
/* What a student needs: a tick for what it takes, the rest crossed out */
.doc ul.marks {
  display: grid;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}
.doc ul.marks li {
  position: relative;
  margin: 0;
  padding-left: 2em;
}
.doc ul.marks li::before {
  position: absolute;
  top: 0.22em;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
}
.doc ul.marks .yes {
  font-weight: 600;
}
.doc ul.marks .yes::before {
  content: '✓';
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
}
.doc ul.marks li {
  width: fit-content;
}
.doc ul.marks .no {
  color: var(--muted);
  transition: color 0.3s ease;
}
.doc ul.marks .no::before {
  content: '✕';
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--faint);
  font-size: 0.8em;
  transition: opacity 0.3s ease;
}
/* The strike, drawn from left to right when the teacher crosses an item out (demo.js) */
.doc ul.marks .no::after {
  content: '';
  position: absolute;
  top: 0.86em;
  right: 0;
  left: 2em;
  height: 1.5px;
  background: var(--faint);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.doc ul.marks.striking .no:not(.struck) {
  color: var(--ink);
}
.doc ul.marks.striking .no:not(.struck)::before {
  opacity: 0;
}
.doc ul.marks.striking .no:not(.struck)::after {
  transform: scaleX(0);
}
.doc figure {
  margin: 0;
}
.doc > .wide,
.doc section > .wide,
.doc .wide + * {
  margin-top: clamp(26px, 3.5vw, 40px);
}
.doc-line {
  min-height: 1.65em;
  margin: 0;
}
/* Not yet written: the teacher has not come this far (demo.js). Before the script has the page
   ready, the head's script hides it all (html.live), so the finished page never flashes by. */
.unwritten,
.live:not(.ready) .doc [data-w],
.live:not(.ready) .doc [data-block],
.live:not(.ready) .doc section,
.live:not(.ready) footer {
  display: none !important;
}
body.writing footer {
  display: none;
}
/* Room below the line being written, so the pill can bring it to the middle of the screen */
body.writing .app-page {
  padding-bottom: 50vh;
}

/* Pictures wider than the column, as a page lets an image run wide; on wide windows they stop short
   of the call in the margin. */
.doc .wide {
  --w: min(1000px, calc(100vw - 2 * var(--gutter)));
  width: var(--w);
  margin-left: calc(50% - var(--w) / 2);
}
@media (min-width: 1200px) {
  .doc .wide {
    --w: min(940px, calc(100vw - 2 * var(--tile-w) - 96px));
  }
}

/* Things appearing as the teacher writes */
.appear {
  animation: blk-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The teacher's caret: the app's caret of the other person (editor.css .pe-caret), in blue. */
.tc {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1.1em;
  margin-right: -2px;
  vertical-align: -0.17em;
  border-left: 2px solid var(--accent);
  pointer-events: none;
}
.tc > i {
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 0 4px;
  border-radius: 3px 3px 3px 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 10px/1.5 var(--sans);
  font-style: normal;
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.tc.idle {
  animation: blink 1.1s steps(1) infinite;
}
.app.t-ptr .tc > i {
  opacity: 0;
}
@keyframes blink {
  50% {
    border-left-color: transparent;
  }
}

/* The other person's pointer (presence.css .peer-pointer), in page coordinates */
.peer-pointer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 19;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  --c: var(--accent);
  --c-ink: var(--accent-ink);
}
.peer-pointer.on {
  opacity: 1;
}
.peer-pointer.student {
  --c: var(--peer);
  --c-ink: var(--peer-ink);
}
.peer-pointer > svg path {
  fill: var(--c);
  stroke: #fff;
  stroke-width: 1.2;
}
.peer-pointer > span {
  margin: 13px 0 0 -3px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--c);
  color: var(--c-ink);
  font: 600 11px/1.6 var(--sans);
  white-space: nowrap;
}
.ripple {
  position: absolute;
  z-index: 19;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid var(--c, var(--accent));
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 0.5s ease-out forwards;
}
@keyframes ripple {
  from {
    transform: scale(0.3);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Waving (presence.css): a hand beside the pointer, tilting and growing; the visitor's own beside
   their cursor, tilting with each shake and growing while it lasts. */
.shake-hand,
.peer-wave {
  filter: drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 1px var(--paper));
}
.shake-hand {
  position: fixed;
  z-index: 400;
  color: var(--accent);
  pointer-events: none;
  transform: scale(var(--grow, 1));
  transform-origin: 0 100%;
  transition: transform 0.25s ease-out;
}
.shake-hand b,
.peer-wave b {
  display: block;
  transform-origin: 60% 90%;
}
.shake-hand b {
  transition: transform 0.08s ease-out;
}
.peer-wave {
  position: absolute;
  left: 16px;
  top: -26px;
  color: var(--c);
  transform-origin: 0 100%;
  animation: wave-grow 2.6s ease-out forwards;
  transition: opacity 0.4s;
}
.tc .peer-wave {
  --c: var(--accent);
  left: 100%;
  top: -34px;
  margin-left: 30px;
}
.peer-wave b {
  animation: wave-tilt 0.22s ease-in-out infinite alternate;
}
.peer-wave.out {
  opacity: 0;
}
.shake-hand svg,
.peer-wave svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes wave-grow {
  to {
    transform: scale(2.3);
  }
}
@keyframes wave-tilt {
  from {
    transform: rotate(-16deg);
  }
  to {
    transform: rotate(20deg);
  }
}

/* The off-screen pill (presence.css .peer-edge), larger here: where the teacher is writing, and a
   press brings you there. */
.peer-edge {
  position: fixed;
  z-index: 35;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 15px var(--sans);
  box-shadow:
    0 2px 6px rgb(0 0 0 / 0.12),
    0 12px 30px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateX(-50%);
  cursor: pointer;
  animation: pill-in 0.25s ease-out;
}
.peer-edge:hover {
  filter: brightness(1.06);
}
.peer-edge .ico {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
}
.peer-edge.down {
  bottom: 22px;
}
.peer-edge.up {
  top: calc(var(--top) + 14px);
}
.peer-edge.down .ico {
  animation: nudge-down 1.3s ease-in-out infinite;
}
.peer-edge.up .ico {
  animation: nudge-up 1.3s ease-in-out infinite;
}
@keyframes nudge-down {
  50% {
    transform: translateY(3px);
  }
}
@keyframes nudge-up {
  50% {
    transform: translateY(-3px);
  }
}
@keyframes pill-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

/* The slash menu (ui.css .menu, .mi) */
.slash {
  position: absolute;
  z-index: 18;
  width: 286px;
  max-height: 212px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shot-shadow);
  font-size: 14px;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
  animation: pop 0.16s ease-out;
}
.slash.few {
  -webkit-mask-image: none;
  mask-image: none;
}
.mi {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--ink);
  white-space: nowrap;
}
.mi .ico {
  color: var(--muted);
}
.mi.on {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.mi-label {
  flex: 1;
}
.mi-hint {
  color: var(--faint);
  font-size: 13px;
}
.mi-ai {
  padding: 0 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

/* The Blocks panel: hidden, slid in only while the teacher picks a block (shell.css .blk-item) */
.panel {
  position: fixed;
  top: var(--top);
  right: 0;
  bottom: 0;
  z-index: 17;
  width: min(300px, 86vw);
  padding: 0 0 10px;
  border-left: 1px solid var(--line);
  background: var(--desk);
  font-size: 14px;
  box-shadow: -18px 0 40px -24px rgb(0 0 0 / 0.35);
  transform: translateX(104%);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.panel.open {
  transform: none;
}
/* shell.css .ltabs / .blk-group h3 / .blk-item, as the app draws them */
.panel-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 0 6px 0 8px;
}
.panel-tabs span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 500;
}
.panel-tabs span:first-child,
.panel-tabs.ai span:last-child {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
}
.panel-tabs.ai span:first-child {
  background: none;
  color: var(--muted);
}
.panel-label {
  padding: 10px 10px 4px 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.panel .mi {
  gap: 10px;
  height: 32px;
  margin: 0 4px;
  padding: 0 10px;
}
.panel .mi .ico {
  width: 16px;
  height: 16px;
}
.panel .mi-hint {
  margin-left: auto;
  overflow: hidden;
  opacity: 0;
  text-overflow: ellipsis;
  transition: opacity 0.15s;
}
.panel .mi.on .mi-hint {
  opacity: 1;
}

/* Blocks (editor.css .blk) */
.blk {
  font-size: 15px;
  line-height: 1.55;
  padding: 0.6em 0.9em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  transition: border-color 0.4s ease;
}
.blk.flash {
  border-color: var(--accent);
}
.blk.remote {
  border-color: color-mix(in srgb, var(--peer) 55%, var(--line-strong));
}
.blk-in {
  animation: blk-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes blk-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.blk-out {
  animation: blk-out 0.3s ease-in forwards;
}
@keyframes blk-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.blk-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  height: 1.6em;
  margin-bottom: 0.45em;
  color: var(--muted);
  font-size: 0.8em;
  font-weight: 500;
}
.blk-head .ico {
  width: 1.15em;
  height: 1.15em;
}
.blk-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.7em;
  font-size: 0.86em;
}
.bbtn {
  display: inline-flex;
  align-items: center;
  height: 2.15em;
  padding: 0 0.85em;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--card);
}
.blk-count {
  margin-left: auto;
  color: var(--muted);
}
.blk-count.all {
  color: var(--ok);
}

/* Gap fill (gapfill.css) */
.gf-line {
  margin: 0.1em 0;
  line-height: 2.15;
}
.gap {
  display: inline-block;
  min-width: 3.2em;
  height: 1.65em;
  padding: 0 6px;
  border-bottom: 1.5px solid var(--line-strong);
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--ink) 5.5%, transparent);
  line-height: 1.65em;
  text-align: center;
  vertical-align: baseline;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
.gap.remote {
  border-color: var(--peer);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--peer) 28%, transparent);
}
.gap.ok {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 11%, transparent);
  color: var(--ok);
}
.gap.bad {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  color: var(--bad);
}

/* Multiple choice */
.q {
  margin: 0 0 0.4em;
}
.opt {
  display: flex;
  align-items: center;
  gap: 0.65em;
  margin: 0.3em 0;
  padding: 0.4em 0.75em;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}
.opt::before {
  content: '';
  width: 13px;
  height: 13px;
  flex: none;
  border: 1.5px solid var(--faint);
  border-radius: 50%;
}
.opt.picked {
  border-color: var(--peer);
}
.opt.picked::before {
  border: 4px solid var(--peer);
}
.opt.ok {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 11%, transparent);
}
.opt.ok::before {
  border: 4px solid var(--ok);
}
.opt.bad {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
}
.opt.bad::before {
  border: 4px solid var(--bad);
}

/* Word order */
.ord-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  min-height: 2.5em;
  padding: 0.3em 0;
  border-bottom: 1.5px solid var(--line-strong);
}
.ord-row.ok {
  border-color: var(--ok);
}
.ord-row.ok::after {
  content: '✓';
  margin-left: auto;
  color: var(--ok);
}
.ord-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  min-height: 2.4em;
  padding-top: 0.6em;
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 1.9em;
  padding: 0 0.6em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
}
.ord-row.ok .chip {
  background: color-mix(in srgb, var(--ok) 13%, transparent);
}

/* YouTube (blocks/youtube): the video, the subtitles kept off, one time for both */
.yt-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #1e1e1d;
}
.yt-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.4s ease;
}
.yt-frame:not(.playing) img {
  filter: brightness(0.86);
}
.yt-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 12px;
}
.yt-title {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
}
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: #1f1f1d;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.yt-play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
  fill: currentColor;
}
.yt-frame.playing .yt-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}
.yt-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.86em;
}
.yt-track {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line-strong);
}
.yt-track b {
  display: block;
  width: 0;
  height: 100%;
  background: var(--rec);
  transition: width 1s linear;
}
.yt-time {
  font-variant-numeric: tabular-nums;
}

/* Drawing (blocks/draw/draw.css): a dot grid, three pens, text in the app's font */
.draw-box {
  aspect-ratio: 25 / 9;
  border-radius: 6px;
  background: radial-gradient(var(--line-strong) 1px, transparent 1.2px) 0 0 / 18px 18px;
}
.draw-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.draw-svg path {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.draw-svg text {
  font: 500 30px var(--sans);
  text-anchor: middle;
}
.draw-svg .ink-blue {
  stroke: var(--accent);
}
.draw-svg .ink-red {
  stroke: var(--rec);
}
.draw-svg text.ink-blue {
  fill: var(--accent);
  stroke: none;
}
.draw-tools {
  gap: 8px;
}
.swatch {
  width: 18px;
  height: 18px;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--sw);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.swatch.on {
  box-shadow: 0 0 0 2px var(--accent);
}
.sw-ink {
  --sw: var(--ink);
}
.sw-red {
  --sw: var(--rec);
}
.sw-blue {
  --sw: var(--accent);
}

/* Rec (blocks/rec/rec.css): Record, then each take with its header, its player (play, the seek
   line, the time), its word-for-word transcript and the AI check's corrections under it */
.rec-prompt {
  font-weight: 550;
}
.rec-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.6em;
}
.rec-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
}
.rec-btn::after {
  content: '';
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  background: var(--rec);
  transition:
    border-radius 0.2s ease,
    transform 0.2s ease;
}
.rec-btn.on::after {
  border-radius: 2px;
  transform: scale(0.85);
}
.rec-btn.on {
  border-color: var(--rec);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--rec) 40%, transparent);
  animation: rec-pulse 1.2s ease-out infinite;
}
@keyframes rec-pulse {
  to {
    box-shadow: 0 0 0 10px transparent;
  }
}
.rec-live {
  color: var(--rec);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rec-take {
  margin-top: 0.6em;
}
.rec-take-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  min-height: 28px;
  font-size: 13px;
}
.rec-take-head b {
  font-weight: 600;
}
.rec-take-head span {
  color: var(--muted);
}
.rec-take-head .rec-more {
  margin-left: auto;
  letter-spacing: 0.05em;
}
.rec-player {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.3em 0.75em 0.3em 0.3em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.rec-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
}
/* The triangle, and two bars while it plays */
.rec-play::after {
  content: '';
  width: 0.62em;
  height: 0.72em;
  margin-left: 0.12em;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.rec-player.playing .rec-play {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}
.rec-player.playing .rec-play::after {
  margin-left: 0;
  background: var(--accent);
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
.rec-seek {
  --done: var(--muted);
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--done) var(--played, 0%),
    var(--line-strong) var(--played, 0%)
  );
}
.rec-seek::after {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--played, 0%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--done);
  transform: translate(-50%, -50%);
}
.rec-player.playing .rec-seek {
  --done: var(--accent);
}
.rec-time {
  flex: none;
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rec-wait {
  margin-top: 0.7em;
  padding-left: 0.8em;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
}
.rec-text {
  margin-top: 0.7em;
  padding-left: 0.8em;
  border-left: 3px solid var(--line-strong);
}
.um {
  color: var(--warn);
}
.rec-diff {
  margin: 0.7em 0 0;
}
.fix-del {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  color: var(--bad);
  text-decoration: line-through;
}
.fix-ins {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  animation: pop 0.25s ease-out;
}
.rec-band {
  margin-top: 0.5em;
  color: var(--muted);
}
.rec-band b {
  color: var(--ink);
}

/* Inline Markdown (editor.css .md-*): the formats, and the markers dimmed while a line is typed */
.md-b {
  font-weight: 650;
}
.md-i {
  font-style: italic;
}
.md-s {
  text-decoration: line-through;
}
.md-code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  font: 0.88em var(--mono);
}
.md-hl {
  border-radius: 3px;
  background: var(--hl);
}
.md-mark {
  color: var(--faint);
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  background: none;
}

/* A picture in the page: never wider than the column */
.pic img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* The picture of the app on a computer and a phone: its own shapes and shadows, no frame */
.pic.devices .shot {
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.pic.devices img {
  border-radius: 0;
}
.pic figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

/* A feature of the app, as a screenshot: cut to the feature, framed, on a soft backdrop; never
   wider than the page column, never enlarged past its own size. */
.doc .feat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 2.5vw, 24px);
  margin-top: 22px;
  padding: clamp(18px, 4.5vw, 40px) clamp(14px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(
      90% 80% at 0% 0%,
      color-mix(in srgb, var(--accent) 10%, transparent),
      transparent 65%
    ),
    radial-gradient(
      90% 80% at 100% 100%,
      color-mix(in srgb, var(--peer) 9%, transparent),
      transparent 65%
    ),
    var(--desk);
}
.feat .shot {
  max-width: 100%;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px var(--line-strong),
    0 1px 2px rgb(0 0 0 / 0.06),
    0 14px 34px -10px rgb(31 31 29 / 0.28);
}
:root[data-theme='dark'] .feat .shot {
  box-shadow:
    0 0 0 1px var(--line-strong),
    0 18px 40px -12px rgb(0 0 0 / 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .feat .shot {
    box-shadow:
      0 0 0 1px var(--line-strong),
      0 18px 40px -12px rgb(0 0 0 / 0.7);
  }
}
/* Its own width (the img's width and height attributes, so its box is kept before it loads),
   never wider than the room it has */
.feat .shot img {
  max-width: 100%;
  height: auto;
}
.feat .shot-phone {
  width: min(250px, 70%);
  border-radius: 30px;
}
.feat .shot-phone img {
  width: 100%;
}
/* Two features side by side, a little smaller if need be; one under the other on a phone */
.feat.pair {
  flex-wrap: nowrap;
}
.feat.pair .shot {
  flex: 0 1 auto;
  min-width: 0;
}
@media (max-width: 600px) {
  .feat.pair {
    flex-direction: column;
    align-items: center;
  }
}

/* A code block: the page's own Markdown */
.doc pre.md {
  overflow-x: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font: 14px/1.6 var(--mono);
  white-space: pre;
}

/* The plans: a card, each plan a column with its price on top, the rows of Settings' table */
.doc .table-wrap.plans {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 1px 2px rgb(31 31 29 / 0.04);
}
.doc .plans table {
  font-size: 15px;
  line-height: 1.4;
}
.doc .plans th,
.doc .plans td {
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  vertical-align: middle;
}
.doc .plans thead th {
  padding-top: 20px;
  padding-bottom: 16px;
  border-top: 0;
  vertical-align: bottom;
}
.doc .plans tbody th {
  color: var(--muted);
  font-size: 14px;
}
/* Free is what the heading is about: its column a shade of the accent */
.doc .plans :is(th, td):nth-child(2) {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.plan-name {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.plan-name.pro {
  width: max-content;
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--warn);
}
.plan-price {
  display: inline-block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.plan-unit {
  color: var(--muted);
  font-size: 14px;
}
.plan-per {
  display: block;
  min-height: 1.35em;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}
.doc .plans td.yes {
  color: var(--ok);
  font-weight: 700;
}
.doc .plans td.no {
  color: var(--faint);
}
@media (max-width: 560px) {
  .doc .plans table,
  .doc .plans thead,
  .doc .plans tbody {
    display: block;
  }
  .doc .plans tr {
    display: flex;
    flex-wrap: wrap;
  }
  .doc .plans thead th:first-child {
    display: none;
  }
  .doc .plans tbody th {
    flex-basis: 100%;
    padding: 12px 10px 0;
    font-size: 13px;
  }
  .doc .plans th,
  .doc .plans td {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .doc .plans tbody td {
    padding-top: 4px;
    border-top: 0;
  }
  .doc .plans tbody tr + tr {
    border-top: 1px solid var(--line);
  }
  .doc .plans thead th {
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .doc .plans tbody th:first-child {
    background: none;
  }
  /* On a phone the columns are the values under each row's name: Free is the first of them */
  .doc .plans :is(th, td):nth-child(2) {
    background: none;
  }
  .doc .plans thead th:nth-child(2),
  .doc .plans tbody td:nth-child(2) {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
  .plan-price {
    font-size: 21px;
  }
  .plan-unit {
    font-size: 12px;
  }
  .plan-per {
    font-size: 11.5px;
  }
}

/* Share (ShareDialog.tsx) and the toast */
.share-pop {
  position: absolute;
  z-index: 18;
  top: 52px;
  right: 10px;
  width: min(330px, calc(100% - 20px));
  padding: 14px 14px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shot-shadow);
  font-size: 14px;
  animation: pop 0.18s ease-out;
}
.share-pop h4 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}
.share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.share-row .av {
  width: 30px;
  height: 30px;
  border: 0;
}
.share-row small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.share-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
}
.share-link code {
  flex: 1;
  color: var(--ink);
  font: 13px var(--mono);
}
.share-link .bbtn {
  height: 28px;
  color: var(--ink);
  font-size: 13px;
}
.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 24px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  transform: translateX(-50%);
  animation: pop 0.2s ease-out;
}

/* The call: in the page's margin on wide windows, following the reader down the page as in the
   app; on narrow ones folded into a bubble in the corner, as the app's phone layout folds it. */
.app-tile {
  position: fixed;
  z-index: 15;
  right: 24px;
  bottom: 24px;
  width: var(--tile-w);
}
.app-tile {
  overflow: hidden;
  border-radius: 12px;
  background: var(--card);
  box-shadow:
    0 0 0 1px var(--line-strong),
    var(--shot-shadow);
}
/* The call card (features/call), drawn here: the other person's camera, the name, the self view and
   the controls. */
.call-video {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 6px 6px 0;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(circle at 60% 30%, #e061a6, #b72a7b 75%);
}
.call-person {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: rgb(255 255 255 / 0.62);
}
.call-name {
  position: absolute;
  left: 7px;
  bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgb(0 0 0 / 0.38);
  color: #fff;
  font: 600 11px/1.4 var(--sans);
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 9px;
}
.bars b {
  width: 2.5px;
  border-radius: 1px;
  background: #66d18f;
}
.bars b:nth-child(1) {
  height: 4px;
}
.bars b:nth-child(2) {
  height: 6.5px;
}
.bars b:nth-child(3) {
  height: 9px;
}
.call-self {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 27%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1.5px solid rgb(255 255 255 / 0.7);
  border-radius: 5px;
  background: radial-gradient(circle at 55% 30%, #6d93ea, #2f5fd8 80%);
}
.call-self .call-person {
  fill: rgb(255 255 255 / 0.55);
}
.call-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 7px 8px 7px 10px;
  color: var(--muted);
}
.call-bar .ico {
  width: 15px;
  height: 15px;
}
.call-time {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.call-access {
  display: grid;
  place-items: center;
}
@media (max-width: 1299px) {
  .call-bar > svg:nth-of-type(4) {
    display: none;
  }
}
.call-end {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 6px;
  background: var(--rec);
  color: #fff;
}
.call-end .ico {
  width: 14px;
  height: 14px;
}
.app-bubble {
  display: none;
}
.app-tile,
.app-bubble {
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.app-tile.away,
.app-bubble.away {
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
}
@media (max-width: 1199px) {
  .app-tile {
    display: none;
  }
  .app-bubble {
    position: fixed;
    z-index: 15;
    right: 14px;
    bottom: 16px;
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow:
      0 0 0 3px var(--peer),
      var(--shot-shadow);
  }
  .app-bubble {
    background: radial-gradient(circle at 60% 30%, #e061a6, #b72a7b 75%);
  }
  .app-bubble .call-person {
    position: static;
    fill: rgb(255 255 255 / 0.62);
  }
}

/* ───────────── Pictures of the app, inside the page ───────────── */

.shot {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow:
    0 0 0 1px var(--line-strong),
    var(--shot-shadow);
}
/* While a picture is on its way: its frame, empty (the alt text is for screen readers, not drawn
   over the frame), then the picture fades in (site.js marks it arrived). Without the script,
   pictures show as the browser loads them. */
.js .shot img,
.js .pic img {
  color: transparent;
}
.js .shot img:not(.arrived),
.js .pic img:not(.arrived) {
  opacity: 0;
}
.js .shot img.arrived,
.js .pic img.arrived {
  opacity: 1;
  transition: opacity 0.35s ease;
}
.pic .shot img,
.shot-phone img {
  width: 100%;
}
.shot-phone {
  border-radius: 34px;
  box-shadow:
    0 0 0 1px var(--line-strong),
    0 0 0 7px var(--desk),
    0 0 0 8px var(--line-strong),
    var(--shot-shadow);
}

/* The student's phone and the teacher's homework list */
.sides {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.side {
  display: grid;
  gap: 18px;
  margin: 0;
}
.side-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
}
.side-label i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.side-label.peer i {
  background: var(--peer);
}
.phone-wrap {
  max-width: 320px;
  margin-inline: auto;
  padding: 8px;
}

/* A table, as the app draws one */
.table-wrap {
  margin-top: clamp(24px, 3vw, 36px);
  overflow-x: auto;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}
.doc th,
.doc td {
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
}
.doc th {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-weight: 600;
}
.doc td:first-child {
  font-weight: 600;
  white-space: nowrap;
}
.doc td:nth-child(2) {
  white-space: nowrap;
}

/* The last words */
.closing h2 {
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.022em;
}
.closing .btn {
  margin-top: 1.4em;
}
.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.hero-note::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin: calc(0.75em - 3.5px) 0 0 4px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent);
}

footer {
  padding-block: 28px 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
footer .brand {
  margin-right: auto;
  color: var(--ink);
  font-size: 15px;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  color: var(--ink);
}

/* ───────────── Motion ───────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tc.idle,
  .rec-btn.on,
  .peer-wave,
  .peer-wave b {
    animation: none;
  }
}

/* ───────────── Narrow windows: half a desktop, and a phone ───────────── */

@media (max-width: 760px) {
  .sides {
    grid-template-columns: 1fr;
  }
  .doc td:nth-child(2) {
    white-space: normal;
  }
}
@media (max-width: 560px) {
  :root {
    --top: 58px;
  }
  body,
  .doc {
    font-size: 17px;
  }
  /* The opening fits a phone's first screen down to "Free for students. No email needed.", so
     the visitor sees the teacher write it and press Share without scrolling. */
  .app-page {
    padding-top: 20px;
  }
  .doc > * + * {
    margin-top: 14px;
  }
  .doc > .doc-lead {
    margin-top: 8px;
  }
  .doc > .doc-lead + * {
    margin-top: 20px;
  }
  .top .wrap {
    gap: 4px;
  }
  .signin {
    display: none;
  }
  .join .long {
    display: none;
  }
  .join .short {
    display: inline;
  }
  .ab-icon {
    display: none;
  }
  .ab-tab {
    padding: 0 10px;
  }
  .shot {
    border-radius: 10px;
  }
}

/* ───────────── The page outline (editor/OutlineRidge.tsx, editor.css .ridge) ─────────────
   A bar per heading in the right margin, the darker one where you read; its list of headings on
   hover (a tap on a phone). site.js/outline.js keeps it in step with what the teacher has written. */
.ridge {
  position: fixed;
  z-index: 16;
  top: calc(var(--top) + 58px);
  right: 16px;
  display: flex;
  max-height: calc(100vh - var(--top) - 90px);
}
.ridge[hidden] {
  display: none;
}
.ridge-bars {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  padding: 8px 2px 8px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.ridge-bars:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ridge .bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  cursor: pointer;
  transform-origin: right;
}
.ridge .bar.l1 {
  width: 26px;
}
.ridge .bar.l2 {
  width: 18px;
}
.ridge .bar.on {
  height: 3px;
  background: var(--ink);
}
/* A heading just written: its bar grows in from the edge */
.ridge .bar.new {
  animation: ridge-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes ridge-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
}
.ridge-toc {
  display: none;
  width: 240px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 10px 30px -8px rgb(31 31 29 / 0.25);
  animation: pop 0.12s ease-out;
}
.ridge.open .ridge-toc {
  display: block;
}
.ridge.open .ridge-bars {
  display: none;
}
.ridge-head {
  padding: 4px 8px 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.toc-row {
  display: block;
  width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font: 14px/1.45 var(--sans);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.toc-row:hover,
.toc-row:focus-visible {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}
.toc-row.l2 {
  padding-left: 18px;
}
.toc-row.on {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 760px) {
  .ridge {
    top: calc(var(--top) + 52px);
    right: 2px;
  }
  .ridge-bars {
    gap: 6px;
    padding: 6px 2px 6px 8px;
  }
  .ridge .bar.l1 {
    width: 16px;
  }
  .ridge .bar.l2 {
    width: 11px;
  }
  .ridge-toc {
    width: min(260px, 80vw);
    max-height: 60vh;
  }
  .toc-row {
    padding: 8px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ridge .bar.new,
  .ridge-toc {
    animation: none;
  }
}