/* Sermosaic color system (approved step 03, 2026-10-09). Light is the default; dark follows the system.
   Buttons use the solid action color; the blue-to-violet gradients belong to the logo and hero-level art
   (the headline phrase, the glow, progress), never behind small text. One radius system: controls 10px,
   cards 16px, chips and toggles fully round. */
:root {
  --sm-violet-hi: #B391FF; --sm-violet: #7857F3; --sm-violet-deep: #3B1BCE;
  --sm-sky-hi: #92D9FF; --sm-sky: #43A0FF; --sm-blue: #1154F1; --sm-blue-hi: #48B1FF; --sm-blue-deep: #0851E8;
  --sm-grad-hero: linear-gradient(135deg, #48B1FF 0%, #1154F1 45%, #7857F3 100%);
  --bg: #F8FAFF;
  --surface: #FFFFFF;
  --surface-2: #F0F4FF;
  --line: #D7E1F0;
  --text: #091423;
  --muted: #50617A;
  --accent: #1154F1;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(17, 84, 241, 0.09);
  --link: #1154F1;
  --focus: #3B1BCE;
  --success: #136A4E;
  --warning: #805700;
  --grad: var(--accent);
  --grad-ink: var(--accent-ink);
  --grad-text: linear-gradient(100deg, #1154F1 0%, #2a63f5 20%, #7857F3 43%, #9a7cff 60%, #1154F1 100%);
  --glow: rgba(17, 84, 241, 0.28);
  --edge-hi: #E6ECF7;
  --danger: #B42C44;
  --fs-sm: 0.75rem; --fs-body: 0.875rem; --fs-head: 1.0625rem; --fs-display: 1.5rem;
  --fs-hero: 4rem; --fs-hero-s: clamp(1.75rem, 3.6vw, 2.5rem); /* landing headlines only: the one exception to the four sizes */
  --fw-regular: 400; --fw-strong: 600;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-control: 10px;
  --r-card: 16px;
  --shadow: 0 24px 60px -16px rgba(9, 20, 35, 0.18), 0 0 0 1px rgba(9, 20, 35, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 23, 30, .06), 0 4px 14px rgba(20, 23, 30, .07);
  --amb1: rgba(67, 140, 255, .14); --amb2: rgba(120, 87, 243, .09); --grain: .03; --grain-f: invert(1);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1026;
    --surface: #141B35;
    --surface-2: #1D2947;
    --line: #34425F;
    --text: #F7F9FF;
    --muted: #B0BED8;
    --accent: #B391FF;
    --accent-ink: #10152E;
    --accent-soft: rgba(179, 145, 255, 0.14);
    --link: #92D9FF;
    --focus: #92D9FF;
    --success: #74E0AF;
    --warning: #FFD48A;
    --grad-text: linear-gradient(100deg, #92D9FF 0%, #6fb4ff 20%, #B391FF 43%, #d4c2ff 60%, #92D9FF 100%);
    --glow: rgba(179, 145, 255, 0.32);
    --edge-hi: rgba(255, 255, 255, 0.12);
    --danger: #FFB4BB;
    --shadow: 0 24px 60px -12px rgba(2, 4, 16, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    color-scheme: dark;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 14px rgba(0, 0, 0, .18);
    --amb1: rgba(67, 120, 255, .16); --amb2: rgba(120, 87, 243, .10); --grain: .045; --grain-f: none;
  }
}
:root[data-theme="dark"] {
    --bg: #0B1026;
    --surface: #141B35;
    --surface-2: #1D2947;
    --line: #34425F;
    --text: #F7F9FF;
    --muted: #B0BED8;
    --accent: #B391FF;
    --accent-ink: #10152E;
    --accent-soft: rgba(179, 145, 255, 0.14);
    --link: #92D9FF;
    --focus: #92D9FF;
    --success: #74E0AF;
    --warning: #FFD48A;
    --grad-text: linear-gradient(100deg, #92D9FF 0%, #6fb4ff 20%, #B391FF 43%, #d4c2ff 60%, #92D9FF 100%);
    --glow: rgba(179, 145, 255, 0.32);
    --edge-hi: rgba(255, 255, 255, 0.12);
    --danger: #FFB4BB;
    --shadow: 0 24px 60px -12px rgba(2, 4, 16, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    color-scheme: dark;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 14px rgba(0, 0, 0, .18);
    --amb1: rgba(67, 120, 255, .16); --amb2: rgba(120, 87, 243, .10); --grain: .045; --grain-f: none;
}
@media (max-width: 720px) { :root { --fs-hero: clamp(2rem, 10vw, 2.5rem); } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body); line-height: 1.5; min-height: 100dvh;
}
.hidden { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ico { flex: none; display: block; }

/* ---------- Top bar ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s5); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--s3); font-weight: var(--fw-strong); letter-spacing: -0.01em; }
.mark { width: 28px; height: 28px; flex: none; display: block; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.25); }
.mark svg { display: block; width: 100%; height: 100%; }
.brand .bname { font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.02em; }
.steps { display: flex; gap: var(--s1); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: var(--s1); }
.step {
  border: 0; background: transparent; color: var(--muted); padding: var(--s2) var(--s4); border-radius: 999px; font-size: var(--fs-body); font-weight: var(--fw-strong);
  transition: background .2s var(--ease), color .2s var(--ease); white-space: nowrap;
}
.step:disabled { opacity: .45; cursor: default; }
.step.on { background: var(--accent-soft); color: var(--accent); }
.step:not(:disabled):not(.on):hover { color: var(--text); }

main { max-width: 1120px; margin: 0 auto; padding: var(--s2) var(--s5) 106px; }
.stage { animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons and controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  padding: var(--s3) var(--s4); border-radius: var(--r-control); font-weight: var(--fw-strong); font-size: var(--fs-body);
  transition: transform .15s var(--ease), background .2s, border-color .2s, opacity .2s;
}
.btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.big { padding: var(--s4) var(--s5); font-size: var(--fs-body); width: 100%; }
.btn.small { padding: var(--s2) var(--s4); font-size: var(--fs-body); }
.link { background: none; border: 0; color: var(--accent); padding: 0; font-weight: var(--fw-strong); font-size: var(--fs-body); }
.link:hover { text-decoration: underline; }

input[type='text'], input[type='password'], input[type='search'], input[type='email'] {
  width: 100%; padding: var(--s3) var(--s4); border-radius: var(--r-control); border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: var(--fs-body);
}
input::placeholder { color: var(--muted); }
.card, .panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
.panel { padding: var(--s5); }

/* ---------- Stage 1 ---------- */
.intro { max-width: 720px; padding: var(--s7) 0 var(--s6); }
.intro h1 { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 var(--s4); font-weight: 650; }
.lead { color: var(--muted); font-size: var(--fs-head); max-width: 56ch; margin: 0; }
.gate { max-width: 460px; display: flex; flex-direction: column; gap: var(--s4); }
.gate .row { display: flex; gap: var(--s3); }
.gate label { font-weight: var(--fw-strong); font-size: var(--fs-body); }
.err { color: var(--danger); font-size: var(--fs-body); }

.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s3);
  min-height: 280px; padding: var(--s7); border: 1.5px dashed var(--line); border-radius: var(--r-card);
  background: var(--surface); cursor: pointer; transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.drop:hover, .drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.drop.over { transform: scale(1.005); }
.drop .big { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -0.02em; }
.drop .sub { color: var(--muted); font-size: var(--fs-body); }
.drop .circle { width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
/* hidden from sight but not from the keyboard: Tab reaches the drop zone and Enter opens the file picker */
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.drop:has(input:focus-visible) { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }

.working { display: flex; flex-direction: column; gap: var(--s4); min-height: 200px; justify-content: center; }
.working .fname { font-weight: var(--fw-strong); word-break: break-all; }
.working .fmeta { color: var(--muted); font-size: var(--fs-body); }
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .3s var(--ease); }
.bar.indet > i { width: 35% !important; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.status { color: var(--muted); font-size: var(--fs-body); display: flex; justify-content: space-between; gap: var(--s4); align-items: center; }
.note { color: var(--muted); font-size: var(--fs-body); max-width: 62ch; margin: var(--s4) 0 0; }
details.key { margin-top: var(--s5); color: var(--muted); font-size: var(--fs-body); max-width: 62ch; }
details.key summary { cursor: pointer; font-weight: var(--fw-strong); color: var(--text); }
details.key .body { padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }

.slownote { color: var(--muted); font-size: var(--fs-body); background: var(--surface-2); border-radius: var(--r-control); padding: var(--s4) var(--s4); }
.slownote pre { margin: var(--s3) 0 0; font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-all; opacity: .8; max-height: 110px; overflow: auto; }

/* ---------- Stage 2 ---------- */
.s2top { display: flex; gap: var(--s4); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: var(--s2) 0 var(--s4); }
.filechip { display: flex; flex-direction: column; min-width: 0; }
.filechip b { font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.filechip span { color: var(--muted); font-size: var(--fs-body); }
.search { display: flex; align-items: center; gap: var(--s3); flex: 1 1 280px; max-width: 420px; position: relative; }
.search input { padding-left: var(--s7); }
.search .mag { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.search .count { color: var(--muted); font-size: var(--fs-body); white-space: nowrap; min-width: 52px; text-align: right; }
.iconbtn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface-2); }

.listen { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.listen .t { color: var(--muted); font-size: var(--fs-body); font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.playbtn { width: 38px; height: 38px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.playbtn:active { transform: scale(.94); }
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--surface-2); outline-offset: 6px; }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 999px; background: var(--text); border: 0; }
input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; background: var(--text); border: 0; }

.hint { color: var(--muted); font-size: var(--fs-body); margin: 0 0 var(--s3); }
.transcript { padding: var(--s5) var(--s6); line-height: 2; font-size: var(--fs-head); user-select: none; -webkit-user-select: none; cursor: pointer; max-width: 820px; }
.transcript:focus-visible { outline-offset: 3px; }
.transcript span { padding: 2px 1px; border-radius: 4px; transition: background .12s; }
.transcript span:hover { background: var(--surface-2); }
.transcript span.hit { background: rgba(250, 204, 21, 0.28); }
.transcript span.hit.cur { background: rgba(250, 204, 21, 0.6); color: #111; }
.transcript span.now { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.transcript span.sel { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--text); border-radius: 0; box-shadow: 0.32em 0 0 color-mix(in srgb, var(--accent) 24%, transparent); }
.transcript span.armed { background: var(--accent); color: var(--accent-ink); }
.tsl { color: var(--muted); font-size: var(--fs-sm); margin: var(--s5) 0 2px; user-select: none; font-variant-numeric: tabular-nums; }
.tsl:first-child { margin-top: 0; }

.dock {
  position: sticky; bottom: 14px; margin-top: var(--s5); max-width: 820px; z-index: 5;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--s4) var(--s4);
}
@media (prefers-reduced-transparency: reduce) { .dock { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.dockbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.seltext { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.seltext b { font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.seltext span { color: var(--muted); font-size: var(--fs-body); }
.actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.pop { position: relative; }
.menu {
  position: absolute; bottom: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-control); padding: var(--s2); display: flex; flex-direction: column; min-width: 150px; box-shadow: var(--shadow);
}
.menu button { text-align: left; border: 0; background: transparent; padding: var(--s3) var(--s3); border-radius: var(--r-control); font-weight: var(--fw-strong); }
.menu button:hover { background: var(--surface-2); }
.clipsrow { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: 999px; border: 1px solid var(--line);
  background: transparent; font-size: var(--fs-body); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; transition: background .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip .x { opacity: .6; display: grid; place-items: center; }
.chip .x:hover { opacity: 1; }

/* Trim (waveform) */
.trim { margin-bottom: var(--s4); }
.wave { position: relative; height: 112px; border-radius: var(--r-control); background: var(--bg); border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave .shade { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); pointer-events: none; }
.wave .grip {
  position: absolute; top: 0; bottom: 0; width: 28px; margin-left: -14px; cursor: ew-resize; display: flex; align-items: center; justify-content: center; touch-action: none; z-index: 2;
}
.wave .grip::after { content: ''; width: 6px; height: 38px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px var(--bg); }
.wave .grip:focus-visible::after { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.wave .head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); pointer-events: none; opacity: .85; }
.wave .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: var(--fs-body); }
.trimmeta { display: flex; justify-content: space-between; gap: var(--s4); align-items: center; flex-wrap: wrap; margin-top: var(--s3); color: var(--muted); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.check { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; font-size: var(--fs-body); color: var(--text); }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- Stage 3 (studio) ---------- */
.s3head { display: flex; align-items: center; gap: var(--s4); padding: var(--s2) 0 var(--s4); flex-wrap: wrap; }
.s3head .meta { color: var(--muted); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.studio { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s6); align-items: start; }
.stagecol { position: sticky; top: 14px; display: flex; flex-direction: column; gap: var(--s4); align-items: center; }
.frame {
  position: relative; background: #000; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); max-width: 100%;
  display: grid; place-items: center; border: 1px solid var(--line);
}
.frame canvas { display: block; max-width: 100%; max-height: min(72dvh, 760px); width: auto; height: auto; }
.analyzing { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--fs-body); }
.transport { display: flex; align-items: center; gap: var(--s4); width: 100%; max-width: 560px; }
.transport .t { color: var(--muted); font-size: var(--fs-body); font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.side { padding: var(--s2) var(--s5) var(--s5); display: flex; flex-direction: column; }
.sec { padding: var(--s4) 0; }
.sec:last-of-type { border-bottom: 0; }
.sec h3 { margin: 0 0 var(--s4); font-size: var(--fs-body); font-weight: var(--fw-strong); letter-spacing: -0.005em; }
.mini { color: var(--muted); font-size: var(--fs-body); margin: var(--s3) 0 0; }
.gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); }
.tile { position: relative; padding: 0; border: 1.5px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: #000; aspect-ratio: 9 / 14; transition: transform .2s var(--ease), border-color .2s; }
.tile canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile:hover { transform: translateY(-2px); }
.tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tile .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s1) var(--s2); font-size: var(--fs-sm); font-weight: var(--fw-strong); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); text-align: center; }
.gallery.wide .tile { aspect-ratio: 16 / 12; }
.captiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.ctile { display: flex; flex-direction: column; gap: var(--s2); padding: 0; border: 0; background: none; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); }
.ctile canvas { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-control); border: 1.5px solid var(--line); display: block; transition: border-color .2s, transform .2s var(--ease); }
.ctile:hover canvas { transform: translateY(-2px); }
.ctile.on canvas { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ctile.on { color: var(--text); }
.swatches { display: flex; gap: 13.5px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 999px; border: 2px solid transparent; padding: 0; background: var(--c); box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 1px var(--line); transition: transform .15s var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch.on { border-color: var(--text); }
.swatch.natural { background: conic-gradient(#2f93bd, #38bdb4, #f0a070, #e3f5a8, #6f86e0, #2f93bd); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); }
.field > label, .field > .lbl { font-size: var(--fs-body); color: var(--muted); font-weight: var(--fw-strong); }
details.more { padding: var(--s4) 0; }
details.more summary { cursor: pointer; font-weight: var(--fw-strong); font-size: var(--fs-body); }
details.more .inner { padding-top: var(--s4); }
.exportbox { padding: var(--s4) 0 var(--s2); display: flex; flex-direction: column; gap: var(--s3); position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 3; }
.exportbox .row { display: flex; gap: var(--s3); }
.exportbox .row .btn { flex: 1; }
.result { display: flex; flex-direction: column; gap: var(--s3); }
.result video { display: block; width: auto; max-width: 100%; margin-inline: auto; border-radius: var(--r-control); background: #000; aspect-ratio: var(--vr, 16 / 9); max-height: min(58dvh, 520px); object-fit: contain; }

/* ---------- B-roll lane and stock dialog ---------- */
.broll { width: 100%; max-width: 560px; padding: var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.lanehead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.lanehead .mini { margin: 0 0 0 var(--s2); }
.lane { position: relative; }
.track { position: relative; height: 54px; border-radius: var(--r-control); background: var(--bg); border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.track .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--muted) 30%, transparent); pointer-events: none; }
.blk { position: absolute; top: 4px; bottom: 4px; border-radius: var(--r-control); background: var(--surface-2) center / cover no-repeat; border: 1.5px solid var(--line); cursor: grab; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.blk.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.blk span { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; }
/* short blocks: no length label (it would collide with the handles and its neighbours); the tooltip still has it */
.blk { container-type: inline-size; }
@container (max-width: 52px) { .blk > span { display: none; } }
.blk .h { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; }
.blk .h.l { left: 0; } .blk .h.r { right: 0; }
.blk .h::after { content: ''; position: absolute; top: 14px; bottom: 14px; left: 4px; width: 3px; border-radius: 2px; background: rgba(255,255,255,.85); }
.lanesel { display: flex; flex-direction: column; gap: var(--s3); }
.lanesel .rows { display: grid; gap: var(--s3); }
.lanesel label { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: var(--s3); font-size: var(--fs-body); color: var(--muted); }
.lanesel label span { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.lanesel .row { display: flex; gap: var(--s3); }
.credits { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--fs-sm); color: var(--muted); }
.credits a { color: var(--muted); text-decoration: underline; }

.dlg { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text); padding: var(--s5); width: min(920px, calc(100vw - 24px)); max-height: min(86dvh, 820px); box-shadow: var(--shadow); }
.dlg::backdrop { background: rgba(0, 0, 0, .55); }
.dlg[open] { display: flex; flex-direction: column; gap: var(--s4); }
.dlghead { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); font-size: var(--fs-head); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-right: auto; margin-left: var(--s3); }
.seg button { border: 0; background: transparent; color: var(--muted); padding: var(--s2) var(--s4); border-radius: 999px; font-size: var(--fs-body); font-weight: var(--fw-strong); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.stockform { display: flex; gap: var(--s3); }
.dlg .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: thin; }
.dlg .chips .chip { flex: none; }
.dlg .mini { margin: 0; }
.stockgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: var(--s3); overflow: auto; min-height: 240px; flex: 1; align-content: start; padding: 2px; }
.scard { position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--r-control); overflow: hidden; background: var(--surface-2); aspect-ratio: 9 / 14; width: 100%; height: auto; display: block; }
.scard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.scard .pv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scard .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s5) var(--s3) var(--s2); background: linear-gradient(transparent, rgba(0,0,0,.78)); display: flex; flex-direction: column; text-align: left; gap: 1px; }
.scard .meta b { color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1.2; }
.scard .meta i { color: rgba(255,255,255,.75); font-size: var(--fs-sm); font-style: normal; }
.scard .match { position: absolute; top: 7px; left: 7px; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--accent-ink); background: var(--accent); padding: 3px var(--s2); border-radius: 999px; }
.scard .tick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: none; place-items: center; }
.scard.on { border-color: var(--accent); }
.scard.on .tick { display: grid; }
.dlgfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.credit a { color: var(--text); }
.chips.topics .chip, #stockSuggest .chip { text-transform: none; }

.seg-wide { margin: 0 0 var(--s4); display: flex; flex-wrap: wrap; }
.seg-wide button { flex: 1 1 auto; padding: var(--s2) var(--s2); font-size: var(--fs-body); white-space: nowrap; }
.sec h3 .mini { font-weight: var(--fw-regular); margin: 0 0 0 var(--s2); }
.padbox { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); }
.padbox .lbl { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-strong); }
.padbox .row, .sndsearch .row { display: flex; gap: var(--s3); }
.sndsearch { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); }
.sndsearch .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s1); }
.sndsearch .chip { flex: none; }
.sndlist { display: flex; flex-direction: column; gap: var(--s1); max-height: 300px; overflow: auto; }
.sndgroup { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); margin: var(--s3) 0 2px; }
.sndgroup:first-child { margin-top: 0; }
.snd { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2); border-radius: var(--r-control); border: 1px solid transparent; }
.snd:hover { background: var(--surface-2); }
.snd.on { border-color: var(--accent); background: var(--accent-soft); }
.snd .pb { width: 30px; height: 30px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; padding: 0; }
.snd .st { flex: 1; text-align: left; background: none; border: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.snd .st b { font-size: var(--fs-body); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snd .st i { font-style: normal; font-size: var(--fs-sm); color: var(--muted); }
.snd .ck { color: var(--accent); }
.sndctl { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }
.volrow { display: grid; grid-template-columns: 60px 1fr 40px; gap: var(--s3); align-items: center; font-size: var(--fs-body); color: var(--muted); }
.volrow span { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--s3); align-items: center; z-index: 50; pointer-events: none; }
.toast { background: var(--text); color: var(--bg); padding: var(--s3) var(--s4); border-radius: 999px; font-size: var(--fs-body); font-weight: var(--fw-strong); box-shadow: var(--shadow); animation: rise .3s var(--ease) both; }
.toast.err { background: var(--danger); color: #1a0000; }
.toast.out { opacity: 0; transition: opacity .4s; }

/* v70: the studio is one column only where the phone shell is (a phone, a small window on its side); 768 px and wider has the rail shell */
@media (max-width: 767px), (max-width: 920px) and (max-height: 520px) {
  .studio { grid-template-columns: 1fr; }
  .stagecol { position: static; }
}
@media (max-width: 920px) {
  .gallery { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 560px) {
  main { padding: var(--s1) var(--s4) 106px; }
  .top { padding: var(--s4); }
  .steps { width: 100%; justify-content: space-between; }
  .step { padding: var(--s2) var(--s3); font-size: var(--fs-sm); flex: 1; }
  .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
  .tile .nm { font-size: var(--fs-sm); }
  .dock { bottom: 8px; }
  /* the small buttons share one row and keep their words, so a phone shows "Play", "More", "Carousel" and not bare icons */
  .actions .btn:not(.primary) { flex: 1 1 0; min-width: 0; padding: 0 var(--s2); gap: var(--s2); font-size: var(--fs-body); min-height: 42px; }
  .actions .btn:not(.primary) .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #toCarousel .lbl { font-size: 0; }
  #toCarousel .lbl::after { content: 'Carousel'; font-size: var(--fs-body); }
  .actions { width: 100%; }
  .actions .btn.primary { flex: 1 1 100%; }
  .transcript { padding: var(--s4); font-size: var(--fs-head); }
  .search .iconbtn { flex: none; width: 40px; height: 40px; }
}
/* small, safe finishing touches outside the studio */
.enginechip { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: var(--s3); max-width: calc(100vw - 32px); padding: var(--s2) var(--s4); border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); font-size: var(--fs-body); font-weight: var(--fw-strong); animation: rise .3s var(--ease) both; }
.enginechip.err { border-color: var(--danger, #c0392b); border-radius: var(--r-card); }
.enginechip .spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: ecspin .9s linear infinite; }
@keyframes ecspin { to { transform: rotate(360deg); } }
@media (min-width: 981px) { .showcase .sc-note { bottom: -30px; } }
.search .count:empty { display: none; }
/* while a recording is being read, its progress (or what went wrong) is the only thing under the heading, not below the fold */
#s1:has(#working:not(.hidden)) #homeGuide, #s1:has(#working:not(.hidden)) #recent { display: none; }
/* the brand setup card's buttons sit at its right edge, not in the middle of the card */
#homeGuide .guideacts { flex: none; }
@media (max-width: 560px) { #homeGuide .guideacts { align-self: stretch; } }
@media (pointer: coarse) {
  .search .iconbtn { min-width: 40px; min-height: 40px; }
  #s4 .chip { min-height: 38px; }
  #s4 .chmore, #s2 .filechip .link, #s2 #changeFile, #recentAll { min-height: 40px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v6: feel filters, video backgrounds, cut styles, voice cleanup */
.chips.small { gap: var(--s2); margin: 0 0 var(--s3); }
.chips.small .chip { padding: var(--s1) var(--s3); font-size: var(--fs-sm); }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile .dur { position: absolute; top: 5px; right: 5px; padding: 1px var(--s2); border-radius: 999px; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: #fff; background: rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.tile .ld.hd { inset: auto auto 26px 50%; transform: translateX(-50%); white-space: nowrap; display: inline-block; padding: 2px var(--s2); border-radius: 999px; background: rgba(0,0,0,.55); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: .02em; opacity: .9; }
.tile .ld { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.cutrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s3); }
.cutrow .lbl { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); }
.cutrow .chips { margin: 0; }
.cutrow .mini { flex-basis: 100%; margin: 0; }
.switchrow { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer; transition: border-color .2s, background .2s; }
.switchrow:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.switchrow input { appearance: none; flex: none; width: 34px; height: 20px; margin-top: 1px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; }
.switchrow input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s var(--ease); }
.switchrow input:checked { background: var(--accent); }
.switchrow input:checked::after { transform: translateX(14px); }
.switchrow input:disabled { opacity: .6; }
.switchrow b { display: block; font-size: var(--fs-body); }
.switchrow i { display: block; font-style: normal; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; line-height: 1.4; }
#vStatus:empty { display: none; }
.subhead { font-size: var(--fs-body); font-weight: var(--fw-strong); margin: var(--s4) 0 var(--s3); display: flex; align-items: baseline; gap: var(--s3); }
@media (prefers-reduced-motion: reduce) { .switchrow input::after { transition: none; } }
.tile.vid .nm { font-size: var(--fs-sm); line-height: 1.25; padding: var(--s4) var(--s2) var(--s2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* v7: tabbed studio panel, hearts, B-roll auto/manual, mixer, overlays, saved */
.ptabs { display: flex; gap: 2px; padding: 12px 0 0; margin: 0 -4px; position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); border: 0; background: none; padding: var(--s3) var(--s2) var(--s3); font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .15s, border-color .15s; }
.ptabs button:hover { color: var(--text); }
.ptabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.pane .sec:last-child { border-bottom: 0; }
.side .pane { min-height: 320px; }

.heart { position: absolute; z-index: 2; width: 28px; height: 28px; border-radius: 999px; border: 0; padding: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity .15s, transform .15s var(--ease); }
.heart:hover { transform: scale(1.1); }
.heart.on { opacity: 1; color: var(--accent); }
.tile:hover .heart, .ctile:hover .heart, .scard:hover .heart, .heart:focus-visible { opacity: 1; }
@media (hover: none) {
  /* phones: a small heart tucked in the corner, so it never sits on a tile's own sample text */
  body .heart { opacity: .7; width: 22px; height: 22px; background: rgba(0,0,0,.32); }
  .heart svg { width: 11px; height: 11px; }
  body .heart.ontile { top: 3px; left: auto; right: 3px; }
  body .heart.on { opacity: 1; }
}
.heart.ontile { top: 5px; left: 5px; }
.ctile { position: relative; }
.ctile .heart { top: 5px; right: 5px; }
.heart.oncard { top: 6px; right: 36px; }
.heart.inrow { position: relative; opacity: 1; background: none; color: var(--muted); width: 30px; height: 30px; }
.heart.inrow.on { color: var(--accent); }

.volrow { grid-template-columns: minmax(70px, auto) 1fr 46px; margin-top: var(--s3); }
.volrow > span:first-child { text-align: left; color: var(--muted); }
.volrow.big { font-size: var(--fs-body); }
.volrow.big > span:first-child { color: var(--text); font-weight: var(--fw-strong); min-width: 128px; }
.volrow.off { opacity: .45; }
.volrow input[type=range] { width: 100%; accent-color: var(--accent); }
.mixer .check { margin-top: var(--s4); }
#sndVolHint { margin: var(--s1) 0 0; }

.swatch.custom { position: relative; overflow: hidden; background: conic-gradient(#ff6b5e, #f5c542, #6ee7b7, #7cc4ff, #c4a1ff, #ff6b5e); cursor: pointer; }
.swatch.custom.on { background: var(--c); }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }

#brAuto .row, #brManual { margin: var(--s2) 0 var(--s4); }
#brAuto .row { display: flex; gap: var(--s3); flex-wrap: wrap; }
#brAuto .row .btn.primary { flex: 1 1 auto; }
.seglist { display: flex; flex-direction: column; gap: var(--s3); max-height: 520px; overflow: auto; padding-right: 2px; }
.segrow { border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s3); }
.segtxt { font-size: var(--fs-body); line-height: 1.45; margin-bottom: var(--s3); }
.segtxt b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: var(--fw-strong); margin-right: var(--s1); }
.segpicks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.pick { position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--r-control); overflow: hidden; aspect-ratio: 3 / 4; background: var(--surface-2); color: #fff; text-align: left; transition: border-color .15s, transform .15s var(--ease); }
.pick:hover { transform: translateY(-1px); }
.pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick span { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s2) var(--s2); font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1.2; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.pick em { display: block; font-style: normal; font-size: var(--fs-sm); color: var(--accent); letter-spacing: 0; }
.pick.on { border-color: var(--accent); }
.pick.busy { opacity: .6; }
.pick.more { display: grid; place-items: center; color: var(--muted); border: 1.5px dashed var(--line); background: none; }
.pick.more span { position: static; background: none; padding: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.segrm { font-size: var(--fs-sm); margin-top: var(--s2); }

.oved { border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s4); margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.oved textarea { width: 100%; resize: vertical; font: inherit; font-size: var(--fs-body); padding: var(--s2) var(--s3); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.oved .row { display: flex; gap: var(--s3); margin-top: var(--s3); }

.brandlogo { max-width: 160px; max-height: 70px; object-fit: contain; display: block; margin: var(--s1) 0 var(--s4); padding: var(--s2); border-radius: var(--r-control); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px; }
.imgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.imgcell { position: relative; aspect-ratio: 1; border-radius: var(--r-control); overflow: hidden; border: 1px solid var(--line); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; }
.imgcell .use { padding: 0; border: 0; background: none; width: 100%; height: 100%; }
.imgcell img { width: 100%; height: 100%; object-fit: contain; }
.imgcell .rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 999px; border: 0; padding: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; }
.favrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s4); }
.favitem { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s4) var(--s1) var(--s1); border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-body); font-weight: var(--fw-strong); }
.favitem img { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }
.favitem:not(:has(img)) { padding-left: var(--s4); }
#stockBgHead { margin: var(--s4) 0 var(--s3); font-weight: var(--fw-strong); }
.lanehead .btn { margin-left: auto; }
#prev.hasov { touch-action: none; }

/* v8 */
.blk .bx { position: absolute; top: 3px; right: 14px; width: 20px; height: 20px; border-radius: 999px; border: 0; padding: 0; display: grid; place-items: center; background: rgba(0,0,0,.65); color: #fff; z-index: 2; }
.blk .bx:hover { background: #d9534f; }
.ccmenu { position: fixed; z-index: 1000; min-width: 190px; padding: var(--s2); border-radius: var(--r-control); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; }
.ccmenu button { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3); border: 0; background: none; border-radius: var(--r-control); font-size: var(--fs-body); font-weight: var(--fw-strong); text-align: left; color: var(--text); }
.ccmenu button:hover { background: var(--surface-2); }
.newver { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4) var(--s3) var(--s4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: var(--fs-body); font-weight: var(--fw-strong); max-width: calc(100vw - 32px); }
.filechip #wholeMp3 { margin-left: var(--s3); font-size: var(--fs-body); }

.ttiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: var(--s2) 0 var(--s4); }
.ttile { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: 0; border: 0; background: none; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); text-align: center; }
.ttile canvas { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-control); border: 1.5px solid var(--line); display: block; transition: border-color .2s, transform .2s var(--ease); }
.ttile:hover canvas { transform: translateY(-2px); border-color: var(--accent); }
.ttile .heart { top: 5px; right: 5px; left: auto; }
.ttile:hover .heart { opacity: 1; }
#titleGallery .lbl { display: block; margin-top: var(--s1); }

.mixbar { display: flex; gap: var(--s4); flex-wrap: wrap; margin: var(--s3) 0 var(--s1); padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); }
.mixbar label { flex: 1 1 180px; display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-body); font-weight: var(--fw-strong); min-width: 0; }
.mixbar label span:first-child { display: grid; place-items: center; color: var(--muted); }
.mixbar input { flex: 1; min-width: 60px; accent-color: var(--accent); }
.mixbar b { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.mixbar label.off { opacity: .5; }

/* v9: hearts on rhythm/transition chips, Your styles */
.chipfav { position: relative; display: inline-flex; }
.heart.onchip { top: -8px; right: -8px; width: 22px; height: 22px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.heart.onchip.on { color: var(--accent); border-color: var(--accent); }
.chipfav:hover .heart { opacity: 1; }
.stylist { display: grid; gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.stycard { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); background: var(--surface); }
.stycard.on { border-color: var(--accent); background: var(--accent-soft); }
.stytop { display: flex; align-items: center; gap: var(--s3); }
.stytop b { font-size: var(--fs-body); }
.stytop em { font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--accent); background: var(--accent-soft); padding: 2px var(--s2); border-radius: 999px; }
.styinfo { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: var(--s3) 0 var(--s3); }
.styinfo span { font-size: var(--fs-sm); color: var(--muted); }
.styinfo span + span::before { content: '·'; margin-right: var(--s2); }
.styrow { display: flex; gap: var(--s3); }

/* ---------- v10: Your brand ---------- */
.brandbtn { display: inline-flex; align-items: center; gap: var(--s3); height: 40px; padding: 0 var(--s4); border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: var(--fw-strong); font-size: var(--fs-body); transition: border-color .15s, background .15s, transform .15s var(--ease); }
.brandbtn .ico { color: var(--accent); }
.brandbtn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.brandbtn:active { transform: scale(.98); }
.brandbtn.on { background: var(--accent-soft); border-color: var(--accent); }
@media (max-width: 720px) { .brandbtn span { display: none; } .brandbtn { width: 40px; padding: 0; justify-content: center; } }

.brandpage { animation: bpIn .35s var(--ease); }
@keyframes bpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .brandpage { animation: none; } }
.bphead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5); padding: var(--s5) 0 var(--s6); }
.eyebrow { margin: 0 0 var(--s2); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--accent); }
.bphead h1 { margin: 0; font-size: var(--fs-hero-s); line-height: 1.08; letter-spacing: -0.025em; font-weight: var(--fw-strong); max-width: 18ch; }
.bpsub { margin: var(--s3) 0 0; color: var(--muted); max-width: 60ch; }
.bpsec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); margin-bottom: var(--s5); }
.bpsech { margin-bottom: var(--s5); }
.bpsech h2 { margin: 0 0 var(--s1); font-size: var(--fs-head); letter-spacing: -0.01em; }
.bpsech .mini { margin: 0; }
.bpcols { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s5); align-items: start; }
.bpcols .bpsec { margin-bottom: 0; }
@media (max-width: 860px) { .bpcols { grid-template-columns: 1fr; } }

/* presets */
.presetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--s5); }
.preset { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); overflow: hidden; transition: border-color .15s, transform .2s var(--ease), box-shadow .2s var(--ease); }
.preset:hover { border-color: color-mix(in srgb, var(--text) 22%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow); }
.preset.signature { border-color: var(--line); }
.pthumbbtn { position: relative; display: block; padding: 0; border: 0; background: #000; aspect-ratio: 9 / 12; overflow: hidden; }
.pthumb, .qthumb, .pendthumb { display: block; position: relative; overflow: hidden; background: linear-gradient(160deg, #1d2633, #0b0f15); }
.pthumb { width: 100%; height: 100%; }
.pthumb img, .qthumb img, .pendthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pthumbbtn:hover .pthumb img { transform: scale(1.04); }
.pthumb img { transition: transform .5s var(--ease); }
.composed .cap { position: absolute; left: 8%; right: 8%; top: 46%; font-style: normal; text-align: center; color: #fff; font-weight: 800; font-size: 1.0625rem; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.qthumb .cap, .pendthumb .cap { font-size: 0.4375rem; top: 42%; }
.pbadge { position: absolute; top: 10px; left: 10px; padding: 3px var(--s3); border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-strong); backdrop-filter: blur(6px); }
.pbadge.sig { background: var(--accent); color: var(--accent-ink); }
.pbadge.hot { background: var(--accent); color: var(--accent-ink); }
.pdur { position: absolute; bottom: 10px; right: 10px; padding: 2px var(--s2); border-radius: var(--r-control); background: rgba(0,0,0,.6); color: #fff; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pbody { padding: var(--s4) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.pbody h3 { margin: 0; font-size: var(--fs-body); line-height: 1.25; letter-spacing: -0.01em; }
.pmeta { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.pfit { margin: 0 0 var(--s3); font-size: var(--fs-sm); color: var(--muted); opacity: .85; }
.pact { display: flex; gap: var(--s2); margin-top: auto; }
.pact .use { flex: 1; }
.bpempty { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5); border: 1px dashed var(--line); border-radius: var(--r-card); color: var(--muted); }
.bpempty b { color: var(--text); }
.bpempty .ico { color: var(--accent); margin-top: 2px; }
.bpempty .mini { margin: var(--s1) 0 0; }

/* what you like */
.trow { display: grid; grid-template-columns: 130px 1fr; gap: var(--s4); align-items: start; padding: var(--s3) 0; }
.trow:first-child { border-top: 0; padding-top: 0; }
.tk { font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--muted); padding-top: var(--s2); }
.tchips { display: flex; flex-wrap: wrap; gap: var(--s3); }
.tchip { position: relative; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4) var(--s3); border-radius: var(--r-control); background: var(--surface-2); font-size: var(--fs-body); font-weight: var(--fw-strong); overflow: hidden; }
.tchip .ico { color: var(--accent); }
.tchip .meter { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.tchip .meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); }
.pairsh { margin: var(--s5) 0 var(--s3); font-size: var(--fs-body); }
.pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.pairs li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-control); background: var(--surface-2); font-size: var(--fs-body); font-weight: var(--fw-strong); }
.pairs .plus { color: var(--accent); font-weight: var(--fw-strong); }
.pairs .pside { display: inline-flex; align-items: center; gap: var(--s2); }
.pairs em { margin-left: auto; font-style: normal; font-weight: var(--fw-regular); color: var(--muted); font-size: var(--fs-sm); }
.pairsnote { margin-top: var(--s4); }
@media (max-width: 520px) { .trow { grid-template-columns: 1fr; gap: var(--s2); } .tk { padding-top: 0; } }

/* logo */
.bplogo { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.logobox { width: 72px; height: 72px; border-radius: var(--r-card); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; color: var(--muted); }
.logobox img { max-width: 86%; max-height: 86%; object-fit: contain; }
.logoact { display: flex; gap: var(--s3); flex-wrap: wrap; }
.bpsec .imgcell img { width: 100%; height: 100%; object-fit: contain; }

/* pending preset bar */
.pendbar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); margin: 0 0 var(--s5); border-radius: var(--r-card); border: 0; background: var(--surface-2); }
.pendthumb { width: 34px; height: 48px; border-radius: 6px; flex: none; }
.pendtxt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pendtxt b { font-size: var(--fs-body); }
.pendtxt small { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 560px) { .pendbar { flex-wrap: wrap; } .pendtxt { flex-basis: calc(100% - 50px); } }

/* quick styles in the studio heart tab */
.qlist { display: grid; gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.qstyle { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3) var(--s2) var(--s2); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color .15s; }
.qstyle:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.qstyle.on { border-color: var(--accent); background: var(--accent-soft); }
.qthumb { width: 36px; height: 50px; border-radius: 7px; flex: none; }
.qtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qtxt b { font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtxt small { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qgo { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--accent); }

.toast.act { display: flex; align-items: center; gap: var(--s4); pointer-events: auto; padding: var(--s2) var(--s2) var(--s2) var(--s4); }
.toast.act button { border: 0; border-radius: 999px; padding: var(--s2) var(--s4); font-weight: var(--fw-strong); font-size: var(--fs-body); background: var(--bg); color: var(--text); display: inline-flex; align-items: center; gap: var(--s2); }
.toast.act button.heart::before { content: '\2665'; color: var(--accent); }

/* ---------- v11: brand kit, media, history ---------- */
.kitgrid { display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--s6); padding-bottom: var(--s5); margin-bottom: var(--s5); }
@media (max-width: 860px) { .kitgrid { grid-template-columns: 1fr; gap: var(--s5); } }
.kitcell { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.kitcell .lbl { margin: 0; }
.kitcell .mini { margin: 0; }
.kitcell .bplogo { margin: 0; }
#bpNames { width: 100%; font-family: inherit; color: var(--text); min-height: 64px; padding: var(--s3) var(--s4); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--bg); font-size: var(--fs-body); line-height: 1.45; resize: vertical; }
.kitcell .opt { font-style: normal; font-weight: var(--fw-regular); opacity: .7; }
#bpName { width: 100%; height: 42px; padding: 0 var(--s4); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--bg); font-size: var(--fs-body); }
.kitcolors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.kitsw { position: relative; width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); background: var(--c); padding: 0; display: grid; place-items: center; color: transparent; transition: transform .15s var(--ease); }
.kitsw:hover { transform: scale(1.08); color: #fff; }
.kitsw:hover .ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.kitsw.add { background: var(--surface-2); color: var(--muted); cursor: pointer; overflow: hidden; }
.kitsw.add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kitsw.small { width: 22px; height: 22px; }
.kitsug { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--muted); margin-left: var(--s2); }
.swatch.brandc { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent); }
.mediahead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.mediahead .seg { margin: 0; }
.mediadrop { border-radius: var(--r-card); transition: background .15s, box-shadow .15s; }
.mediadrop.over { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.mediagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--s3); }
.mcell { position: relative; aspect-ratio: 1; border-radius: var(--r-control); overflow: hidden; border: 1px solid var(--line); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; }
.mcell.video { aspect-ratio: 9 / 13; background: #000; }
.mcell img, .mcell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcell.png img { object-fit: contain; }
.mplay { position: absolute; left: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; z-index: 1; }
.mdur { position: absolute; right: 8px; bottom: 8px; padding: 1px var(--s2); border-radius: var(--r-control); background: rgba(0,0,0,.6); color: #fff; font-size: var(--fs-sm); z-index: 1; font-variant-numeric: tabular-nums; }
.mmore { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 999px; border: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .15s; z-index: 2; }
.mcell:hover .mmore, .mmore:focus-visible { opacity: 1; }
@media (hover: none) { .mmore { opacity: .9; } }
.mediaempty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; padding: var(--s7) var(--s5); border: 1px dashed var(--line); border-radius: var(--r-card); color: var(--muted); }
.mediaempty b { color: var(--text); }
.mediaempty .ico { color: var(--accent); }
.histlist { display: grid; gap: var(--s3); }
.hrow { display: flex; align-items: center; gap: var(--s4); padding: var(--s2) var(--s3) var(--s2) var(--s2); border-radius: var(--r-control); background: var(--bg); border: 1px solid var(--line); }
.hthumb { width: 34px; height: 48px; border-radius: var(--r-control); overflow: hidden; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.hthumb img { width: 100%; height: 100%; object-fit: cover; }
.htxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.htxt b { font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htxt small { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 560px) { .hrow .btn.small:not(.ghost) { display: none; } }

/* ---------- v12: accounts ---------- */
.topright { display: flex; align-items: center; gap: var(--s3); }
.acct { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-strong); font-size: var(--fs-body); display: grid; place-items: center; padding: 0; transition: transform .15s var(--ease); }
.acct:hover { transform: scale(1.05); }
.gate .mini { margin: var(--s3) 0 0; }
.gate label b { color: var(--text); }
.gate .gmail { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: 2px; }
.gate .gmail .mini { margin: 0; }
.gate .gmail .btn { text-decoration: none; }
.gate .gmail.hidden { display: none; }
.gate .gspam { color: var(--muted); }
.gate .gwait { display: inline-flex; align-items: center; gap: var(--s3); }
.gate .gwait::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: gpulse 1.6s ease-in-out infinite; }
@keyframes gpulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gate .gwait::before { animation: none; } }
.codein { letter-spacing: .4em; font-size: var(--fs-head); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; max-width: 220px; }
.codein::placeholder { letter-spacing: .4em; opacity: .35; }
.mlocal { position: absolute; top: 8px; left: 8px; padding: 2px var(--s2); border-radius: var(--r-control); background: rgba(0,0,0,.6); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-strong); z-index: 1; }

/* ---------- v13: brand folder, fonts, text styles, drop anywhere ---------- */
.storecard { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg); margin-bottom: var(--s5); }
.storecard.hero { padding: var(--s5); border-color: var(--line); background: var(--surface-2); }
.storecard.on { border-color: var(--accent); }
.storecard.warn { border-color: var(--line); background: var(--surface-2); }
.storeic { width: 40px; height: 40px; border-radius: var(--r-control); display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.storeic.big { width: 52px; height: 52px; border-radius: var(--r-card); }
.storecard.warn .storeic { background: var(--surface-2); color: var(--warning); }
.storetxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-body); color: var(--muted); }
.storetxt b { color: var(--text); font-size: var(--fs-body); }
.storetxt em { font-style: normal; font-weight: var(--fw-strong); color: var(--text); }
.storetxt .path { font-weight: var(--fw-strong); color: var(--text); font-size: var(--fs-body); }
.storetxt .mini { margin: 2px 0 0; }
@media (max-width: 640px) { .storecard { flex-wrap: wrap; } .storecard .btn { width: 100%; } }
.kitgrid { grid-template-columns: auto 1fr 1fr; }
.kitcell.wide { grid-column: 2 / -1; }
@media (max-width: 860px) { .kitcell.wide { grid-column: auto; } }
.kitfonts, .kittext { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.fontchip, .tstyle { position: relative; display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3) var(--s2) var(--s4); border-radius: var(--r-control); background: var(--surface-2); font-size: var(--fs-head); line-height: 1.1; }
.tstyle { background: #14171e; font-weight: var(--fw-strong); font-size: var(--fs-body); padding-bottom: var(--s3); }
.tstyle i { position: absolute; left: 14px; right: 34px; bottom: 5px; height: 2px; border-radius: 2px; }
.fontchip button, .tstyle button { border: 0; background: none; color: var(--muted); padding: 2px; display: grid; place-items: center; border-radius: 999px; }
.tstyle button { color: #98a1b3; }
.fontchip button:hover, .tstyle button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.kitfonts label.btn { display: inline-flex; align-items: center; gap: var(--s2); }
.logobox.over { box-shadow: 0 0 0 3px var(--accent); }
.dropall { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(6px); pointer-events: none; animation: bpIn .2s var(--ease); }
.dropallin { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s7) 66px; border-radius: var(--r-card); border: 2px dashed var(--accent); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.dropallin b { font-size: var(--fs-display); letter-spacing: -0.01em; }
.dropallin span:last-child { color: var(--muted); }
.dropicons { display: flex; gap: var(--s4); color: var(--accent); }

/* ---------- v14: several logos ---------- */
.bplogo { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; border-radius: var(--r-card); }
.bplogo.over { box-shadow: 0 0 0 2px var(--accent); }
.bplogo .logobox { position: relative; cursor: pointer; transition: box-shadow .15s, transform .15s var(--ease); }
.bplogo .logobox:hover { transform: translateY(-1px); }
.bplogo .logobox.on { box-shadow: 0 0 0 2px var(--accent); }
.bplogo .logobox em { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-strong); padding: 1px var(--s2); border-radius: 999px; background: var(--accent); color: var(--accent-ink); white-space: nowrap; }
.bplogo .logobox.empty { flex-direction: column; gap: 2px; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); border-style: dashed; text-align: center; padding: var(--s1); }
.lrm { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .15s; }
.logobox:hover .lrm, .lrm:focus-visible { opacity: 1; }
@media (hover: none) { .lrm { opacity: 1; } }
.logopick { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0 var(--s1); }
.lp { width: 64px; height: 64px; border-radius: var(--r-control); border: 1px solid var(--line); padding: var(--s2); display: grid; place-items: center; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 10px 10px; }
.lp img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lp.none, .lp.add { background: var(--surface); }
.lp.add { flex-direction: column; gap: 2px; border-style: dashed; }
.lp.on { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); color: var(--accent); }
/* sign-in on phones: the field shrinks instead of pushing the button off screen, and they stack when narrow */
.gate .row input { flex: 1 1 auto; min-width: 0; }
.gate .row .btn { flex: none; }
@media (max-width: 420px) { .gate .row { flex-direction: column; } .gate .row .btn { width: 100%; } .codein { max-width: none; } }

/* ---------- v15: easier to read and use ---------- */
/* helper text was 12.5-13px gray; bigger is easier for everyone */
.mini { font-size: var(--fs-body); line-height: 1.5; }
.note { font-size: var(--fs-body); }
.field > label, .field > .lbl { font-size: var(--fs-body); }
.volrow, .lanesel label { font-size: var(--fs-body); }
.padbox .lbl, .cutrow .lbl { font-size: var(--fs-body); }
.ptabs button .ico { margin-right: 1px; }
/* the "pick your own" instruction is a clear callout, not a faint line */
.hint { font-size: var(--fs-body); color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.hint b { color: var(--accent); }

/* suggested moments */
.suggest { margin: 0 0 var(--s4); }
.sugghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); margin-bottom: var(--s3); }
.sugghead b { font-size: var(--fs-head); letter-spacing: -0.01em; }
.sugghead span { color: var(--muted); font-size: var(--fs-body); }
.suggrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.sugg { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.sugg:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.sugg.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.sugmeta { font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--accent); }
.sugg p { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text); flex: 1; }
.sugact { display: flex; gap: var(--s3); }
.sugact .btn { display: inline-flex; align-items: center; gap: var(--s2); }
.sugact .use { flex: 1; justify-content: center; }

/* v15 example video on the welcome screen */
.intro.hero { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text vid" "steps vid"; column-gap: 54px; align-items: end; }
.herotext { grid-area: text; max-width: 620px; }
.herotext .lead { margin-bottom: var(--s5); }
.steps3 { grid-area: steps; align-self: start; list-style: none; padding: 0; margin: var(--s1) 0 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); font-size: var(--fs-body); color: var(--muted); }
.steps3 li { display: flex; align-items: center; gap: var(--s3); }
.steps3 b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: var(--fs-body); background: var(--accent); color: var(--accent-ink); }
.herovid { grid-area: vid; align-self: center; margin: 0; width: 200px; text-align: center; }
.herovid video { width: 100%; aspect-ratio: 9 / 16; display: block; border-radius: 22px; background: #111; object-fit: cover; box-shadow: 0 18px 50px rgba(0,0,0,.35); border: 5px solid #1b1b1b; }
.herovid figcaption { font-size: 0.8125rem; color: var(--muted); margin-top: 12.5px; }
@media (max-width: 720px) {
  .intro.hero { grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "text text" "steps vid"; column-gap: var(--s5); align-items: center; }
  .steps3 { flex-direction: column; gap: var(--s4); margin: 0; }
  .herovid { width: 104px; }
  .herovid video { border-radius: 14px; border-width: 3px; }
  .herovid figcaption { font-size: 0.625rem; margin-top: 7.5px; white-space: nowrap; letter-spacing: -0.01em; }
}

/* v16 why a moment was picked */
.sugtags { display: flex; flex-wrap: wrap; gap: var(--s2); margin: -2px 0 10px; }
.sugtag { font-size: var(--fs-sm); padding: 3px var(--s2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); }

/* v17 one part / several parts */
.modebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); margin: 0 0 var(--s4); }
.modeseg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); flex: 1 1 340px; max-width: 520px; }
.modeseg button { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.modeseg button b { font-size: var(--fs-body); font-weight: var(--fw-strong); }
.modeseg button span { font-size: var(--fs-body); color: var(--muted); }
.modeseg button:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--line)); }
.modeseg button.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.modeseg button:focus-visible, .kindseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.manyopts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s3); font-size: var(--fs-body); color: var(--muted); }
.kindseg { margin: 0; }
.kindseg button { padding: var(--s2) var(--s5); font-size: var(--fs-body); }
.kindseg button[data-kind="cut"].on { color: var(--danger); }

/* marked parts in the transcript: kept parts glow, removed parts are struck through */
.transcript span.pk { background: color-mix(in srgb, var(--accent) 13%, transparent); border-radius: 0; box-shadow: 0.32em 0 0 color-mix(in srgb, var(--accent) 13%, transparent); }
.transcript span.pc { text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 2px; color: color-mix(in srgb, var(--text) 50%, transparent); background: color-mix(in srgb, var(--danger) 9%, transparent); border-radius: 0; box-shadow: 0.32em 0 0 color-mix(in srgb, var(--danger) 9%, transparent); }
.transcript span.pstart::before { content: attr(data-n); display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-right: var(--s2); padding: 0 var(--s1); border-radius: 999px; font-size: var(--fs-sm); font-weight: var(--fw-strong); vertical-align: 2px; text-decoration: none; background: var(--accent); color: var(--accent-ink); }
.transcript span.pc.pstart::before { background: var(--danger); color: #fff; }
.transcript span.sel.pk, .transcript span.sel.pc { background: color-mix(in srgb, var(--accent) 28%, transparent); }

.partsrow { align-items: center; }
.partshead { font-size: var(--fs-body); color: var(--muted); margin-right: 2px; }
.chip.part button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); }
.chip.part button i { font-style: normal; display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 999px; font-size: var(--fs-sm); font-weight: var(--fw-strong); background: var(--accent); color: var(--accent-ink); }
.chip.part.cut button i { background: var(--danger); color: #fff; }
.chip.part .x { margin-left: var(--s2); }

.dockprog { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); font-size: var(--fs-body); }
.dockprog .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dockprog .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s var(--ease); }
.dockprog span { color: var(--muted); white-space: nowrap; }

.ownopts { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s1); }
.ownopts .mini { margin: var(--s2) 0 0; }
.ownhint { color: var(--muted); }
@media (max-width: 560px) {
  #addPart:disabled { display: none; }
  .modeseg { flex-basis: 100%; max-width: none; }
  .modeseg button { padding: var(--s3) var(--s4); }
  .dockbar .actions { width: 100%; }
}
.chip.part.fresh { animation: partin .9s var(--ease); }
@keyframes partin { 0% { transform: scale(.85); box-shadow: 0 0 0 0 var(--accent); } 40% { transform: scale(1.06); box-shadow: 0 0 0 6px var(--accent-soft); } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .chip.part.fresh { animation: none; } }
/* while marking several parts, the part being picked right now stands out from the ones already marked */
.transcript.many span.sel { background: color-mix(in srgb, var(--accent) 38%, transparent); box-shadow: 0.32em 0 0 color-mix(in srgb, var(--accent) 38%, transparent), inset 0 -2px 0 var(--accent); }

/* v17.1 a video upload shows its picture on the transcript screen */
.vidcard { display: flex; gap: var(--s5); align-items: center; padding: var(--s4); margin-bottom: var(--s4); }
.vidbox { flex: none; width: 220px; border-radius: var(--r-control); overflow: hidden; background: #000; cursor: pointer; line-height: 0; }
.vidbox.tall { width: 120px; }
.vidbox video { width: 100%; height: auto; display: block; max-height: 220px; object-fit: contain; }
.vidmeta { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.vidmeta b { font-size: var(--fs-body); }
.vidmeta span { font-size: var(--fs-body); color: var(--muted); line-height: 1.45; }
.vidnote { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-control); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--text); font-size: var(--fs-body); line-height: 1.45; }
@media (max-width: 560px) {
  .vidcard { flex-direction: column; align-items: stretch; }
  .vidbox, .vidbox.tall { width: 100%; }
  .vidbox.tall video { max-height: 320px; }
}

/* v18 carousels */
.ctitle { margin: 0; font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.02em; }
.cstudio { grid-template-columns: minmax(0, 1fr) 400px; }
.cstagecol { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; position: sticky; top: 14px; }
.cstrip { display: flex; gap: var(--s3); overflow-x: auto; padding: var(--s1) 2px var(--s4); scroll-snap-type: x proximity; scrollbar-width: thin; }
.cstrip.pano { gap: 2px; }
.cslide { position: relative; flex: none; width: min(300px, 62vw); padding: 0; border: 0; background: none; border-radius: 10px; scroll-snap-align: start; cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s; }
.cstrip.pano .cslide { border-radius: 0; }
.cstrip.pano .cslide:first-child canvas { border-radius: 10px 0 0 10px; }
.cstrip.pano .cslide:last-child canvas { border-radius: 0 10px 10px 0; }
.cslide canvas { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); background: #222; }
.cstrip.pano .cslide canvas { border-radius: 0; box-shadow: none; }
.cslide.on { outline-color: var(--accent); }
.cslide .cnum { position: absolute; top: 8px; left: 8px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; background: rgba(0,0,0,.55); color: #fff; }
.cslide.on .cnum { background: var(--accent); color: var(--accent-ink); }
.cslidebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cslabel { font-weight: var(--fw-strong); font-size: var(--fs-body); margin-right: var(--s2); font-variant-numeric: tabular-nums; }
.cexport { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cexport .btn.primary { flex: 1 1 260px; justify-content: center; }
.clayouts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.clayout { position: relative; text-align: left; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border-radius: var(--r-control); border: 1.5px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.clayout b { font-size: var(--fs-body); }
.clayout > span:not(.cdiag) { font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; }
.clayout.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.clayout .heart.ontile { position: absolute; top: 6px; right: 6px; }
.cdiag { display: flex; gap: 3px; height: 54px; margin-bottom: var(--s1); }
.cdiag i { flex: 1; border-radius: 4px; background: var(--surface-2); position: relative; overflow: hidden; }
.cdiag.quote i { background: linear-gradient(160deg, #6b8f71, #2f4a3a); }
.cdiag.quote i::after, .cdiag.story i::after, .cdiag.photo i::after { content: ''; position: absolute; left: 18%; right: 18%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.85); top: 48%; box-shadow: 0 6px 0 rgba(255,255,255,.85); }
.cdiag.photo i { background: linear-gradient(180deg, #c9a27e, #6a4b35); }
.cdiag.photo i::after { top: 74%; }
.cdiag.story i { background: #f4efe6; }
.cdiag.story i::before { content: ''; position: absolute; left: 12%; right: 12%; top: 12%; height: 42%; border-radius: 3px; background: #b9a58c; }
.cdiag.story i::after { background: #3a332b; box-shadow: 0 6px 0 #3a332b; top: 66%; }
.cdiag.panorama { gap: 1px; }
.cdiag.panorama i { background: #f4efe6; border-radius: 0; overflow: visible; }
.cdiag.panorama i:nth-child(1)::after, .cdiag.panorama i:nth-child(2)::after { content: ''; position: absolute; z-index: 1; bottom: 8%; width: 70%; height: 46%; right: -35%; border-radius: 4px; background: #8a7a68; }
.cdiag.panorama i:nth-child(2)::after { bottom: auto; top: 10%; height: 40%; background: #6f8a96; }
.cstep { display: flex; align-items: center; gap: var(--s4); }
.cstep b { min-width: 24px; text-align: center; font-size: var(--fs-head); font-variant-numeric: tabular-nums; }
.cstep .mini { margin: 0; }
#cText, #cLabel { width: 100%; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); color: var(--text); padding: var(--s3) var(--s4); font: inherit; font-size: var(--fs-body); line-height: 1.5; resize: vertical; }
#cText { margin-bottom: var(--s3); min-height: 110px; }
.csugg { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); max-height: 420px; overflow: auto; }
.csrow { border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s3) var(--s4); background: var(--surface); }
.csrow p { margin: 0 0 var(--s3); font-size: var(--fs-body); line-height: 1.45; }
.csrow div { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ctstyles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ctstyle { position: relative; padding: 0; border: 1.5px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: #000; cursor: pointer; }
.ctstyle canvas { display: block; width: 100%; height: auto; }
.ctstyle .nm { position: absolute; left: 8px; bottom: 6px; font-size: var(--fs-sm); font-weight: var(--fw-strong); padding: 2px var(--s2); border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; }
.ctstyle.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ctstyle .heart.ontile { position: absolute; top: 4px; right: 4px; }
.pane .chips.small + .chips.small { margin-top: var(--s3); }
.cbgvids { grid-template-columns: repeat(4, 1fr); }
.cgrads { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.cgrad { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-control); border: 1.5px solid var(--line); cursor: pointer; }
.cgrad.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cgrad .heart.ontile { position: absolute; top: 4px; right: 4px; }
.cpick { cursor: pointer; }
.cthumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); margin-top: var(--s2); }
.cthumb { padding: 0; border: 1.5px solid var(--line); border-radius: var(--r-control); overflow: hidden; aspect-ratio: 1; background: var(--surface-2); cursor: pointer; }
.cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cthumb.on { border-color: var(--accent); }
.cphotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-top: var(--s4); }
.cphoto { position: relative; aspect-ratio: 1; border-radius: var(--r-control); overflow: hidden; background: var(--surface-2); }
.cphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cphoto .cnum { position: absolute; top: 4px; left: 4px; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-strong); background: rgba(0,0,0,.6); color: #fff; }
.cphact { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 3px; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.cphact button { width: 24px; height: 24px; border-radius: 999px; border: 0; background: rgba(255,255,255,.9); color: #111; display: grid; place-items: center; cursor: pointer; }
.clogos { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s3); }
.clogo { height: 52px; min-width: 64px; padding: var(--s2) var(--s3); border-radius: var(--r-control); border: 1.5px solid var(--line); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 50% / 12px 12px; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font-size: var(--fs-body); cursor: pointer; }
.clogo img { max-height: 38px; max-width: 90px; display: block; }
.clogo.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.nocar { display: block; margin: var(--s4) auto 0; font-size: var(--fs-body); }
@media (max-width: 980px) {
  .cstudio { grid-template-columns: 1fr; }
  .cstagecol { position: static; }
}
@media (max-width: 560px) {
  .cslide { width: 70vw; }
  .cbgvids, .cgrads { grid-template-columns: repeat(3, 1fr); }
  .cslidebar .btn span { display: none; }
  .cslidebar .btn.ghost { min-width: 40px; min-height: 40px; justify-content: center; }
}

/* v18.1 moving things by hand */
.cslide canvas { touch-action: pan-x pan-y; }
.cstrip.editing .cslide canvas { touch-action: none; }
.cmovebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-control); background: var(--accent-soft); border: 0; }
.cmovebar span { font-size: var(--fs-body); font-weight: var(--fw-strong); margin-right: auto; }
.ctip { margin: 0; }
.cmovebar [hidden] { display: none; }

/* v19 one calm chooser everywhere */
.chooser { display: flex; flex-direction: column; gap: var(--s3); }
.chbar { display: flex; flex-direction: column; gap: var(--s3); }
.chsearch { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); height: 40px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); color: var(--muted); }
.chsearch:focus-within { border-color: var(--accent); }
.chsearch input { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-body); outline: none; min-width: 0; }
.chgroups { flex-wrap: wrap; }
.chmore { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-body); padding: 2px 0; }
.chmore.up svg { transform: rotate(180deg); }
.chempty { margin: var(--s2) 0; grid-column: 1 / -1; }
.swmore { align-self: center; margin-left: var(--s1); font-size: var(--fs-body); }
.bptabs { margin: var(--s1) 0 var(--s5); max-width: 640px; }
.bptabs button { padding: var(--s3) var(--s4); font-size: var(--fs-body); }

/* v20 polish: one finish across every screen. Browser surfaces wear the theme, controls share one
   hover/press language, quiet things stay quiet, and only the one next step is loud. */
:root {
  --line-strong: color-mix(in srgb, var(--text) 22%, var(--line));
  --hover: color-mix(in srgb, var(--text) 5%, var(--surface-2));
  accent-color: var(--accent);
  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); }
input, textarea { caret-color: var(--accent); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.t, .meta, .dur, .seltext b, time { font-variant-numeric: tabular-nums; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--muted) 60%, transparent); }
::-webkit-scrollbar-track { background: transparent; }

/* entering a screen: short and small, it only says "you moved" */
.stage { animation: rise .32s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* one hover/press language for everything you can press */
.btn:hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.05); }
.btn.primary:disabled { opacity: .4; }
.chip:hover:not(.on) { background: var(--surface-2); border-color: var(--line-strong); }
.chip:active, .seg button:active, .step:active:not(:disabled) { transform: scale(.97); }
.chip, .seg button, .step { transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease); }
.iconbtn { transition: background .18s, border-color .18s, transform .12s var(--ease); }
.iconbtn:hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
.iconbtn:active:not(:disabled) { transform: scale(.95); }
.link { text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.playbtn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .12s var(--ease), filter .18s; }
.playbtn:hover { filter: brightness(1.05); }

/* sliders: a filled track and a thumb that reads as grabbable */
input[type='range'] { height: 22px; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
input[type='range']::-moz-range-track { height: 5px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
input[type='range']::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--accent); }
input[type='range']::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5.5px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06); transition: transform .12s var(--ease); }
input[type='range']::-moz-range-thumb { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.2); }
input[type='range']:focus-visible { outline-offset: 2px; border-radius: 999px; }

/* text fields: a calm field that lights up when you are in it */
input[type='text'], input[type='password'], input[type='search'], input[type='email'], textarea {
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input[type='text']:hover, input[type='search']:hover, input[type='email']:hover, textarea:hover { border-color: var(--line-strong); }
input[type='text']:focus, input[type='password']:focus, input[type='search']:focus, input[type='email']:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* header */
.brand { font-size: var(--fs-body); letter-spacing: -0.02em; }
.mark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.steps { box-shadow: var(--shadow-sm); }
.step.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.brandbtn { box-shadow: var(--shadow-sm); }
.acct { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
@media (max-width: 560px) {
  .top { row-gap: var(--s4); }
  .top .steps { order: 3; }
}

/* cards: flat by default (a border), only floating things get a shadow */
.frame { border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.drop { border-width: 1.5px; background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.drop .circle { transition: transform .25s var(--ease); }
.drop:hover .circle, .drop.over .circle { transform: translateY(-2px); }
.menu { box-shadow: var(--shadow); padding: var(--s2); }
.menu button { transition: background .12s; }

/* transcript screen */
.filechip #wholeMp3 { margin: 3px 0 0; align-self: flex-start; }
.sugg { border-radius: var(--r-card); }
.sugg:not(.on) .use { background: transparent; border: 1px solid var(--line); color: var(--text); box-shadow: none; }
.sugg:not(.on) .use:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line); }
.transcript { letter-spacing: -0.003em; }
.tsl { letter-spacing: .01em; }

/* studio */
.tile .nm, .tile.vid .nm { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; padding: 0 var(--s2); bottom: 6px; background: none; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.tile:has(.nm)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); pointer-events: none; }
.tile .dur, .tile .ld { z-index: 1; }
.tile, .ctile canvas, .scard { transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.ptabs button { letter-spacing: -0.005em; }
.sec h3 { font-size: var(--fs-body); }
.exportbox { box-shadow: 0 -12px 18px -12px rgba(0, 0, 0, .25); }

/* carousel: the move bar only lights up while you are moving something */
.cmovebar { background: var(--surface-2); border-color: var(--line); transition: background .18s, border-color .18s; }
.cmovebar span { font-weight: var(--fw-strong); color: var(--muted); }
.cmovebar.live { background: var(--accent-soft); border-color: transparent; }
.cmovebar.live span { color: var(--text); font-weight: var(--fw-strong); }

/* toasts */
.toast { box-shadow: var(--shadow-sm); letter-spacing: -0.005em; }
#aspectChips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
#aspectChips .chip { justify-content: center; padding: var(--s2) var(--s1); white-space: nowrap; }
@media (max-width: 380px) { #aspectChips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px), (max-width: 920px) and (max-height: 520px) { .studio { grid-template-columns: minmax(0, 1fr); } }

/* v21: visual text effects (each tile shows the effect on real words) */
.ceffects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.ceffect { position: relative; padding: 0; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: none; cursor: pointer; display: flex; flex-direction: column; transition: border-color .18s, transform .18s var(--ease); }
.ceffect canvas { display: block; width: 100%; height: auto; }
.ceffect .nm { font-size: 0.7188rem; font-weight: 600; color: var(--muted); padding: 6px 4.5px 7px; text-align: center; background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ceffect:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.ceffect.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ceffect.on .nm { color: var(--accent); }
.cgrad { overflow: hidden; }
.ccaption { margin-top: var(--s4); }
.ccaption textarea { width: 100%; margin-top: var(--s3); padding: var(--s4) var(--s4); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-body); line-height: 1.5; resize: vertical; }
.ccaprow { display: flex; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.noaudio { display: flex; flex-direction: column; align-items: center; gap: var(--s3); margin-top: var(--s5); text-align: center; }
.noaudio .link { font-size: var(--fs-body); }
.noaudio .link:disabled { opacity: .5; cursor: wait; }

/* v26 carousel editor: templates, picking anything, word styling, per-slide looks, your own media */
.cundo { display: flex; gap: var(--s1); margin-left: auto; }
.btn.icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
.btn.icon:disabled { opacity: .35; cursor: default; }
.cmovebar { gap: var(--s2); }
.cmovebar > span { margin-right: auto; font-size: var(--fs-body); }
.cmovebar .btn { padding: var(--s2) var(--s3); }
.cmovebar .btn span { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.cslide .cown { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 2px rgba(0,0,0,.4); font-size: 0; display: none; }
.cslide.own .cown { display: block; }
.cadd { flex: none; width: 124px; align-self: center; display: grid; place-content: center; justify-items: center; gap: var(--s3); border: 1.5px dashed var(--line); border-radius: var(--r-control); background: transparent; color: var(--muted); font-weight: var(--fw-strong); font-size: var(--fs-body); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.cadd:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cstrip.pano .cadd { margin-left: var(--s3); }
.cauto { width: 100%; justify-content: center; padding: var(--s4) var(--s4); font-size: var(--fs-body); }
.gallery.ctpls { grid-template-columns: repeat(3, 1fr); }
.tile.ctpl { background: var(--surface-2); }
.ctplx { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; opacity: 0; transition: opacity .15s; cursor: pointer; }
.tile.ctpl:hover .ctplx, .tile.ctpl:focus-visible .ctplx { opacity: 1; }
@media (hover: none) { .ctplx { opacity: 1; } }
.csavetpl { margin-top: var(--s4); }
.csavetpl .mini { margin-bottom: 0; }
.crow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.crow + .crow, .crow + .switchrow, .switchrow + .crow { margin-top: var(--s3); }
.crow .chips.small { margin: 0; }
.crow input[type='text'], #cItText { flex: 1 1 180px; min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); color: var(--text); padding: var(--s3) var(--s4); font: inherit; font-size: var(--fs-body); line-height: 1.45; resize: vertical; }
.cacts .btn { padding: var(--s2) var(--s3); }
.btn.danger { color: var(--danger); }
.cscope .seg { width: 100%; display: flex; margin: 0; }
.cscope .seg button { flex: 1; }
.cscope .mini { margin: var(--s3) 0 0; }
.wtools { border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s3); margin: 0 0 var(--s4); background: var(--surface); }
.wtools.off .wtrow { opacity: .45; }
.wtools.off .wtsub { display: none; }
.whint { margin: 0 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtrow { display: flex; flex-wrap: wrap; gap: var(--s2); }
.wt { min-width: 38px; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.wt:disabled { cursor: default; }
.wt:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.wt.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.wt.wb { font-weight: 800; }
.wt.wi { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.wt sub, .wt sup { font-size: 0.625rem; }
.wtsub .mini { margin: var(--s3) 0 var(--s2); }
.ctits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.ctit { position: relative; padding: 0; border: 1.5px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: #0e1116; cursor: pointer; transition: transform .15s, border-color .15s; }
.ctit:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.ctit.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ctit canvas { display: block; width: 100%; height: auto; }
.ctit .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s1) var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-strong); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); text-align: center; }
.ctit .heart.ontile { position: absolute; top: 3px; right: 3px; }
.ctray { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); margin-top: var(--s3); }
.ctrayit { position: relative; padding: 0; aspect-ratio: 1; border-radius: var(--r-control); overflow: hidden; border: 1.5px solid var(--line); background: var(--surface-2); cursor: grab; transition: transform .15s, border-color .15s; }
.ctrayit:hover { transform: translateY(-2px); border-color: var(--accent); }
.ctrayit img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ctrayit.dragging { opacity: .35; }
.cghost { position: fixed; left: 0; top: 0; width: 80px; height: 80px; padding: 0; border-radius: 12px; overflow: hidden; pointer-events: none; z-index: 1000; box-shadow: 0 18px 40px rgba(0,0,0,.45); border: 2px solid #fff; }
.cghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cinsp { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) 0 var(--s3); }
.cinsp .link { display: inline-flex; align-items: center; gap: var(--s2); }
.cinsp b { font-size: var(--fs-body); font-weight: var(--fw-strong); }
.crange { display: grid; grid-template-columns: 84px 1fr 46px; align-items: center; gap: var(--s3); margin: var(--s3) 0; font-size: var(--fs-body); color: var(--muted); }
.crange output { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.corder { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: var(--fw-strong); box-shadow: 0 1px 4px rgba(0,0,0,.4); z-index: 1; }
.cthumb { position: relative; }
.cref { display: inline-block; margin-left: var(--s1); padding: 1px var(--s2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.cempty { margin: var(--s2) 0 0; }
.pane .link .ico { vertical-align: -2px; }
@media (max-width: 560px) {
  .gallery.ctpls, .ctits { grid-template-columns: repeat(2, 1fr); }
  .ctray { grid-template-columns: repeat(4, 1fr); }
  .cmovebar > span { flex: 1 0 100%; }
}
.link.ilink { display: inline-flex; align-items: center; gap: var(--s2); }
.ctray, .ctrayit, .cstrip { -webkit-user-select: none; user-select: none; }
@media (max-width: 560px) {
  #s4 .s3head { gap: var(--s3); }
  #s4 .s3head .meta { order: 3; flex-basis: 100%; margin-top: -6px; }
}

/* v27 music made here */
.padfine { margin-top: var(--s3); }
.padfine .lbl { display: block; margin: var(--s3) 0 var(--s2); }
.sndlist.vibes { display: flex; flex-direction: column; gap: var(--s2); }
#padMore { margin-top: var(--s3); }

/* v27 video looks and Make it for me */
.vstart .cauto { margin-bottom: var(--s1); }
.vtpls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.vtpl { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r-control); border: 1.5px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; min-width: 0; transition: border-color .15s, transform .15s; }
.vtpl:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.vtpl.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.vtimg { flex: none; width: 46px; height: 58px; border-radius: var(--r-control); overflow: hidden; background: var(--surface-2); }
.vtimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vttxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vttxt b { font-size: var(--fs-body); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vttxt small { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .vtpls { grid-template-columns: 1fr; } }

/* v28 Sermosaic: install, recent work, app mode, the brand page */
.installbtn { padding: var(--s2) var(--s4); }
.topright { display: flex; align-items: center; gap: var(--s3); }
.installcard { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4); padding: var(--s4) var(--s4) var(--s4) var(--s4); border-radius: var(--r-card); border: 0; background: var(--surface-2); animation: bpIn .35s var(--ease); }
.installcard .mark { width: 36px; height: 36px; border-radius: 10px; }
.ictxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ictxt b { font-size: var(--fs-body); }
.ictxt span { font-size: var(--fs-body); color: var(--muted); line-height: 1.4; }
.icx { flex: none; width: 30px; height: 30px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.icx:hover { background: var(--surface-2); color: var(--text); }
.recent { margin: 0 0 var(--s5); }
.rhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.rhead b { font-size: var(--fs-body); font-weight: var(--fw-strong); }
.rrow { display: flex; gap: var(--s3); overflow-x: auto; padding: 2px 2px var(--s2); scrollbar-width: none; scroll-snap-type: x proximity; }
.rrow::-webkit-scrollbar { display: none; }
.ritem { flex: none; width: 168px; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; scroll-snap-align: start; transition: border-color .15s, transform .15s; }
.ritem:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-2px); }
.rimg { display: block; height: 112px; border-radius: var(--r-control); overflow: hidden; background: var(--surface-2); }
.rimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rtxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rtxt b { font-size: var(--fs-body); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtxt small { font-size: var(--fs-sm); color: var(--muted); }
/* opened as an app: room for the notch and home bar, a header that stays put */
html.app .top { position: sticky; top: 0; z-index: 30; padding-top: max(12px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html.app body { padding-bottom: env(safe-area-inset-bottom); }
html.app .herovid, html.app .intro .note { display: none; }
@media (display-mode: standalone) { .installbtn { display: none !important; } }
/* the brand page: one calm row of tabs, a brand card, less reading */
body.onbrand .steps { visibility: hidden; }
.bphead { align-items: center; padding: var(--s3) 0 var(--s5); }
.bphead h1 { max-width: none; }
.bpsub { margin-top: var(--s2); font-size: var(--fs-body); }
.bptabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 520px; margin: 0 0 var(--s5); }
.bptabs::-webkit-scrollbar { display: none; }
.bptabs button { flex: 1 0 auto; white-space: nowrap; padding: var(--s3) var(--s4); }
.brandcard { display: flex; align-items: center; gap: var(--s5); padding: var(--s5); margin-bottom: var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: radial-gradient(600px 180px at 0% 0%, var(--accent-soft), transparent 70%), var(--bg); }
.bclogo { flex: none; width: 84px; height: 84px; border-radius: var(--r-card); border: 1px dashed var(--line); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 50% / 12px 12px; color: var(--muted); display: grid; place-items: center; align-content: center; gap: var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-strong); overflow: hidden; padding: var(--s2); }
.bclogo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bclogo:hover { border-color: var(--accent); }
.bcmain { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.bcname { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--text); font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -0.02em; line-height: 1.1; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bcrow { display: flex; align-items: center; gap: var(--s3); }
.bccols { display: flex; gap: var(--s2); }
.bccols i { width: 22px; height: 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.bccols em { font-style: normal; font-size: var(--fs-body); color: var(--muted); }
.bcstats { margin: 0; font-size: var(--fs-body); color: var(--muted); }
.bpdrophint { margin: 0 0 var(--s5); }
.flash { animation: flash .9s var(--ease); }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--accent-soft); } }
#bpStore { margin: var(--s5) 0 0; }
.bpsub2 { margin-top: var(--s6); }
.ctpllist { display: flex; flex-direction: column; gap: var(--s3); }
.ctplrow { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--bg); }
.ctplrow b { font-size: var(--fs-body); }
.ctplrow small { color: var(--muted); font-size: var(--fs-sm); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .bpsec { padding: var(--s4); }
  .brandcard { padding: var(--s4); gap: var(--s4); }
  .bclogo { width: 68px; height: 68px; border-radius: var(--r-card); }
  .storecard.hero { flex-direction: column; align-items: flex-start; }
  .storecard .storeic.big { display: none; }
  .bphead h1 { font-size: var(--fs-hero-s); }
  .installbtn span { display: none; }
}
@media (max-width: 860px) { .kitgrid { grid-template-columns: 1fr; gap: var(--s5); } .kitcell.wide { grid-column: auto; } }

/* v29 solid mobile. The studio preview pins at the top and the section tabs pin right under it, so
   nothing floats over the controls. Picking something on the video swaps the play row for its own bar.
   Every touch target is at least 36 px, sliders have a finger-sized grip, and hover lifts stay on mice. */
.viewer { display: flex; flex-direction: column; align-items: center; gap: var(--s4); width: 100%; }
.makemini { display: none; }
.ovbar { display: flex; justify-content: center; gap: var(--s1); width: 100%; max-width: 560px; padding: var(--s1); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.ovbar button { flex: 1 1 0; min-width: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; padding: var(--s2) var(--s1); border: 0; border-radius: var(--r-control); background: none; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.ovbar button:hover { background: var(--surface-2); }
.ovbar button:active { background: var(--surface-2); transform: scale(.96); }
.ovbar .del { color: var(--danger); }
.ovbar .done { color: var(--accent); }
.viewer:has(#ovBar:not(.hidden)) .transport { display: none; }

/* range sliders: a thin track, a grip you can actually hold */
input[type='range'] { height: 26px; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--surface-2); }
input[type='range']::-webkit-slider-thumb { margin-top: -5px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
input[type='range']::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-2); }
input[type='range']:disabled { opacity: .45; cursor: default; }

button, a, label, .chip, .tile { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:active:not(:disabled), .chip:active { transform: scale(.97); }
#toasts { bottom: calc(24px + env(safe-area-inset-bottom)); }

@media (hover: none) {
  .tile:hover, .ctile:hover canvas, .vtpl:hover, .ritem:hover, .ceffect:hover, .drop:hover .circle { transform: none; }
}
@media (pointer: coarse) {
  .chip { min-height: 36px; padding: var(--s2) var(--s4); }
  .chips.small .chip { min-height: 34px; padding: var(--s2) var(--s4); font-size: var(--fs-body); }
  .btn.small { min-height: 38px; }
  .swatch { width: 38px; height: 38px; }
  input[type='range'] { height: 32px; }
  input[type='range']::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; }
  input[type='range']::-moz-range-thumb { width: 22px; height: 22px; }
  .seg button { min-height: 36px; }
  .ptabs button { padding: var(--s4) var(--s2) var(--s4); font-size: var(--fs-body); }
  input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']), textarea, select { font-size: var(--fs-head); }   /* iPhone zooms the page into anything smaller */
}

@media (max-width: 767px), (max-width: 920px) and (max-height: 520px) {
  /* the column holding the preview steps aside so the preview can stay pinned the whole way down */
  #s3 .stagecol { display: contents; }
  #s3 .studio { gap: var(--s4); }
  #s3 .viewer { position: sticky; top: var(--pinTop, 0px); z-index: 6; padding: var(--s2) 0 var(--s3); gap: var(--s3); background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax -1px); border-bottom: 1px solid var(--line); }
  #s3.typing .viewer { position: relative; }
  #s3 .frame canvas { max-height: 44vh; max-height: 44svh; }
  #s3 .frame { border-radius: var(--r-card); box-shadow: none; }
  #s3 .transport { max-width: none; gap: var(--s3); }
  #s3 .transport .t { min-width: 0; font-size: var(--fs-sm); }
  #s3 .playbtn { width: 40px; height: 40px; flex: none; }
  .makemini { display: inline-flex; flex: none; padding: var(--s3) var(--s4); font-size: var(--fs-body); gap: var(--s2); }
  #exportBtn { display: none; }
  .exportbox { position: static; box-shadow: none; border-top: 1px solid var(--line); padding-top: var(--s4); }
  #s3 .ptabs { top: calc(var(--pinTop, 0px) + var(--viewerH, 0px)); }
  #s3.typing .ptabs { top: var(--pinTop, 0px); }
  #s3 .mixbar, #s3 .broll { width: 100%; max-width: none; margin: 0; }
  #s3 #laneBox:has(#lane.hidden) { display: none; }
  #s3 .side .pane [id], #s3 #result, #s3 #exportBox { scroll-margin-top: calc(var(--pinTop, 0px) + var(--viewerH, 0px) + 60px); }
  #s3 .side { padding: 0 var(--s4) var(--s4); }
  #s3 .side .pane { min-height: 0; }
}
@media (max-width: 560px) {
  #s3 .s3head { padding: 0 0 var(--s2); gap: var(--s3); }
  #s3 .s3head .meta { font-size: var(--fs-sm); }
  /* welcome: the drop zone comes into view without scrolling; the steps are said by the headline already */
  .intro.hero { grid-template-columns: minmax(0, 1fr) 92px; grid-template-areas: "text vid"; align-items: start; column-gap: var(--s4); }
  .steps3 { display: none; }
  .herovid { width: 92px; margin-top: 7.5px; }
  .herotext h1 { font-size: var(--fs-hero-s); }
  .herotext .lead { font-size: var(--fs-body); margin-bottom: var(--s1); }
  .recent { margin: var(--s5) 0 var(--s2); }
  .ritem { width: 148px; }
  .rimg { height: 96px; }
}
.ftime { display: none; }
@media (max-width: 767px), (max-width: 920px) and (max-height: 520px) {
  #s3 .transport .t { display: none; }
  #s3 .ftime { display: block; position: absolute; left: 8px; bottom: 8px; padding: 2px var(--s2); border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; pointer-events: none; }
  #s3 .ptabs { margin: 0 -6px; }
  #s3 .ptabs button { flex: 1 1 auto; padding-left: 3px; padding-right: 3px; }
}
@media (max-width: 400px) { #s3 .ptabs [data-p="saved"] span { display: none; } }
@media (max-width: 560px) {
  /* the transcript's action bar is part of the page edge, not a card floating over the words */
  .dock { bottom: 0; margin: 16px -14px 0; border-radius: var(--r-card) var(--r-card) 0 0; border-width: 1px 0 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -10px 30px rgba(0,0,0,.18); }
  main:has(#s2:not(.hidden)) { padding-bottom: 0; }
}
/* hearts on choice chips sit inside the chip, not hanging off its corner */
.chipfav .chip { padding-right: var(--s7); }
.heart.onchip { top: 50%; right: 5px; transform: translateY(-50%); width: 24px; height: 24px; background: transparent; border: 0; color: var(--muted); }
.heart.onchip:hover { transform: translateY(-50%) scale(1.1); }
.heart.onchip.on { color: var(--accent); border: 0; }
.chipfav .chip.on + .heart.onchip:not(.on) { color: color-mix(in srgb, var(--accent) 70%, transparent); }
@media (pointer: coarse) {
  .seg-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); border-radius: var(--r-card); gap: 2px; }
  .seg-wide button { border-radius: var(--r-control); }
}
@media (max-width: 767px), (max-width: 920px) and (max-height: 520px) { #s3 .frame canvas { max-height: 40vh; max-height: 40svh; } }
.chips .chipfav .chip, .chips.small .chipfav .chip { padding-right: var(--s7); }
#cutChips { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); }
#cutChips .chipfav, #cutChips .chip { width: 100%; justify-content: center; }
.cview { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
@media (max-width: 980px) {
  #s4 .cstagecol { display: contents; }
  #s4 .cview { position: sticky; top: var(--pinTop, 0px); z-index: 6; gap: var(--s3); padding: var(--s2) 0 var(--s2); background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax -1px); border-bottom: 1px solid var(--line); }
  #s4.typing .cview { position: relative; }
  #s4 .cslide { width: min(66vw, calc(36svh * var(--ar, 0.8))); }
  #s4 .cstrip { padding-bottom: var(--s2); }
  #s4 .ptabs { top: calc(var(--pinTop, 0px) + var(--viewerH, 0px)); }
  #s4.typing .ptabs { top: var(--pinTop, 0px); }
  #s4 .side .pane [id] { scroll-margin-top: calc(var(--pinTop, 0px) + var(--viewerH, 0px) + 60px); }
  #s4 .side { padding: 0 var(--s4) var(--s4); }
  #s4 .studio { gap: var(--s4); }
}
.cdl { display: none; }
@media (max-width: 980px) {
  #s4 .cdl { display: inline-flex; margin-left: auto; gap: var(--s2); }
  #s4 .cdl b { font-weight: var(--fw-strong); }
  #s4 .cexport #cExport { display: none; }
}
.analyzing.making { background: rgba(8, 10, 18, .78); font-weight: var(--fw-strong); letter-spacing: -0.005em; }

/* v32 brands: the switcher in the top right (like companies in Sovereign Console) */
.brandbtn { gap: var(--s3); padding: 0 var(--s4) 0 var(--s2); max-width: 240px; }
.brandbtn .bsw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brandbtn > .ico { color: var(--muted); flex: none; }
.bsw-logo { flex: none; width: 30px; height: 30px; border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.bsw-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.bsw-logo.ini { background: var(--c, var(--accent)); color: #fff; font-weight: var(--fw-strong); font-size: var(--fs-body); box-shadow: none; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.bswmenu { position: fixed; z-index: 1000; width: 300px; max-width: calc(100vw - 16px); padding: var(--s2); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: bpIn .18s var(--ease); }
.bswmenu button { width: 100%; display: flex; align-items: center; gap: var(--s3); border: 0; background: none; color: var(--text); text-align: left; border-radius: var(--r-control); padding: var(--s2) var(--s3); font-size: var(--fs-body); font-weight: var(--fw-strong); min-height: 44px; }
.bswmenu button:hover, .bswmenu button:focus-visible { background: var(--surface-2); }
.bsw-page { flex-wrap: wrap; row-gap: 0; }
.bsw-page .ico { color: var(--accent); }
.bsw-page small { flex-basis: 100%; padding-left: var(--s6); font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--muted); }
.bsw-sep { height: 1px; background: var(--line); margin: var(--s2) var(--s1); }
.bsw-h { font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--muted); padding: var(--s1) var(--s3) var(--s1); }
.bsw-list { max-height: 46vh; overflow-y: auto; }
.bsw-row span:not(.bsw-logo) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsw-row.on { background: var(--accent-soft); }
.bsw-row.on > .ico { color: var(--accent); }
.bsw-row .bsw-logo { width: 28px; height: 28px; font-size: var(--fs-sm); }
.bsw-foot { margin-top: var(--s2); padding-top: var(--s2); }
.bsw-new { color: var(--accent) !important; }
.bsw-form { display: flex; gap: var(--s2); padding: var(--s1); }
.bsw-form input { flex: 1; min-width: 0; height: 38px; padding: 0 var(--s4); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.bswmenu .bsw-form button { width: auto; min-height: 38px; justify-content: center; }
.bsw-note { margin: var(--s1) var(--s3) var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.bsw-ask { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2); font-size: var(--fs-body); color: var(--muted); line-height: 1.45; }
.bsw-ask b { color: var(--text); }
.bsw-ask > div { display: flex; gap: var(--s2); justify-content: flex-end; }
.bswmenu .bsw-ask button { width: auto; min-height: 36px; justify-content: center; }
.bpremove { margin: var(--s6) 0 var(--s3); padding-top: var(--s5); }
.bpremove .bsw-ask { padding: 0; max-width: 560px; }
.link.danger { color: var(--danger); }
@media (max-width: 720px) { .brandbtn { width: auto; padding: 0 var(--s2) 0 var(--s2); } .brandbtn .bsw-name { display: none; } }
@media (max-width: 720px) { .brandbtn span.bsw-logo { display: grid; } }

/* v32 welcome showcase: a real Short beside a real carousel post, both made from the sample talk */
.showcase { grid-area: vid; align-self: center; position: relative; width: 470px; height: 520px; margin: 0; }
.showcase figure { margin: 0; position: absolute; }
.sc-tag { position: absolute; top: -12px; left: 14px; z-index: 3; padding: 3px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.7188rem; font-weight: 700; letter-spacing: .02em; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.sc-phone { left: 0; top: 10px; width: 236px; aspect-ratio: 9 / 19.2; padding: 8.5px; border-radius: 38px; background: linear-gradient(160deg, #2a2f3d, #0c0f17 55%); box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-3deg); z-index: 1; }
.sc-phone video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 31px; background: #0b0d14; }
.sc-sound { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8.5px 15.5px; border: 0; border-radius: 999px; background: rgba(10, 13, 22, .62); color: #fff; font-size: 0.7812rem; font-weight: 650; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.14); transition: background .2s, transform .2s var(--ease); }
.sc-sound:hover { transform: translateX(-50%) scale(1.04); }
.sc-sound.on { background: var(--grad); color: var(--grad-ink); }
.sc-post { right: 0; top: 74px; width: 262px; border-radius: 18px; background: #fff; color: #111; box-shadow: 0 30px 70px rgba(0,0,0,.4); transform: rotate(2.5deg); z-index: 2; overflow: visible; }
.sc-head { display: flex; align-items: center; gap: 11px; padding: 10.5px 13px; font-size: 0.7812rem; }
.sc-av { width: 24px; height: 24px; border-radius: 999px; background: conic-gradient(#f7c95e, #e1306c, #833ab4, #f7c95e); padding: 2px; }
.sc-av::after { content: ''; display: block; width: 100%; height: 100%; border-radius: 999px; background: #1d2438; box-shadow: inset 0 0 0 2px #fff; }
.sc-head i { margin-left: auto; width: 16px; height: 4px; background: radial-gradient(circle, #111 1.6px, transparent 2px) 0 0 / 5.5px 4px repeat-x; }
.sc-slides { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 5; background: #eee; outline-offset: -2px; overscroll-behavior-x: contain; }
.sc-slides::-webkit-scrollbar { display: none; }
.sc-slides video { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; user-select: none; -webkit-user-select: none; pointer-events: none; background: #222; }
.sc-media { position: relative; }
.sc-arrow { position: absolute; top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.9); color: #111; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); opacity: 0; transition: opacity .2s; z-index: 2; }
.sc-arrow.l { left: 8px; }
.sc-arrow.r { right: 8px; }
.sc-arrow:disabled { visibility: hidden; }
.sc-post:hover .sc-arrow, .sc-arrow:focus-visible { opacity: 1; }
.sc-foot { display: flex; align-items: center; gap: 13.5px; padding: 10.5px 13px 13px; }
.sc-acts { display: flex; gap: 16px; color: #111; }
.sc-dots { margin-left: auto; display: flex; gap: 0; }
/* v69: a 24 px target around the 6 px dot (WCAG 2.2 target size); the dot is drawn by ::before so it looks as it did */
.sc-dots button { position: relative; width: 26px; height: 26px; padding: 0; border: 0; background: none; border-radius: 999px; }
.sc-dots button::before { content: ''; position: absolute; left: 10px; top: 10px; width: 6px; height: 6px; border-radius: 999px; background: #c9c9c9; transition: background .2s, transform .2s; }
.sc-dots button.on::before { background: #0095f6; transform: scale(1.15); }
.sc-note { position: absolute; left: 0; right: 0; bottom: -6px; margin: 0; text-align: center; font-size: 0.7812rem; color: var(--muted); }
@media (hover: none) { .sc-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .sc-phone, .sc-post { transform: none; } }
html.app .showcase { display: none; }
@media (max-width: 980px) and (min-width: 561px) {
  .intro.hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "steps" "vid"; }
  .showcase { justify-self: center; margin-top: 35px; }
}
@media (max-width: 560px) {
  .intro.hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "vid"; }
  .showcase { width: 100%; height: auto; display: grid; grid-template-columns: 0.82fr 1fr; gap: 16px; align-items: start; margin-top: 22.5px; padding-bottom: 26px; }
  .showcase figure { position: relative; inset: auto; width: auto; transform: none; }
  .sc-phone { border-radius: 26px; padding: 6px; aspect-ratio: 9 / 16.6; }
  .sc-phone video { border-radius: 21px; }
  .sc-post { margin-top: 17.5px; border-radius: 14px; }
  .sc-sound { bottom: 14px; padding: 7px 12px; font-size: 0.7188rem; }
  .sc-head { padding: 8.5px 10.5px; font-size: 0.7188rem; }
  .sc-foot { padding: 8.5px 10.5px 10.5px; }
  .sc-acts { gap: 12px; }
  .sc-acts .ico { width: 15px; height: 15px; }
  .sc-tag { top: -10px; left: 10px; font-size: 0.6562rem; }
}
/* signed out: the free sample is the first thing to do, signing in comes after */
#s1.out { display: flex; flex-direction: column; }
#s1.out > * { order: 3; }
#s1.out > .intro { order: 0; }
#s1.out > #noAudio { order: 1; margin: var(--s2) 0 var(--s6); align-items: flex-start; text-align: left; }
#s1.out > #gate { order: 2; }
#s1.out #trySample { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s6); border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-head); font-weight: var(--fw-strong); text-decoration: none; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent); }
#s1.out #trySample:hover { filter: brightness(1.05); }
#s1.out #trySample::after { content: 'No account needed'; font-size: var(--fs-sm); font-weight: var(--fw-strong); opacity: .75; margin-left: var(--s1); }
#s1.out #carouselNoAudio { font-size: var(--fs-body); }
#s1.out #gate .btn.primary { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
@media (max-width: 560px) { #s1.out > #noAudio { align-items: stretch; } #s1.out #trySample { justify-content: center; } #s1.out #trySample::after { display: none; } }

/* v35 premium finish: midnight ink with a soft dawn glow, a fine grain, crisp hairline edges,
   the dawn gradient on the one thing to press, and motion that settles instead of bouncing. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(1100px 560px at 78% -12%, var(--amb1), transparent 62%), radial-gradient(800px 480px at -8% 4%, var(--amb2), transparent 60%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain); filter: var(--grain-f);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the mark: three ribbons, sky to violet, beside the outlined wordmark */
.mark { width: 30px; height: 30px; border-radius: 0; box-shadow: none; background: none; filter: drop-shadow(0 6px 14px var(--glow)); }
.top .mark svg { overflow: visible; }
.brand { gap: var(--s3); }
.wm { display: block; color: var(--text); line-height: 0; }
.wmsvg { height: 21px; width: auto; display: block; }
.top .mark path { transform-box: fill-box; transform-origin: 50% 100%; animation: mbIn .9s var(--ease) both; }
.top .mark path:nth-of-type(2) { animation-delay: .08s; }
.top .mark path:nth-of-type(1) { animation-delay: .16s; }
@keyframes mbIn { 0% { transform: translateY(30%) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
/* while Sermosaic is working, the ribbons breathe in turn */
body:has(#working:not(.hidden)) .top .mark path, body:has(.analyzing:not(.hidden)) .top .mark path { animation: mbLive 1.2s var(--ease-io) infinite alternate; }
body:has(#working:not(.hidden)) .top .mark path:nth-of-type(2), body:has(.analyzing:not(.hidden)) .top .mark path:nth-of-type(2) { animation-delay: -.4s; }
body:has(#working:not(.hidden)) .top .mark path:nth-of-type(1), body:has(.analyzing:not(.hidden)) .top .mark path:nth-of-type(1) { animation-delay: -.8s; }
@keyframes mbLive { 0% { transform: none; } 100% { transform: scaleY(.82); opacity: .75; } }


/* top bar: the progress pill has one sliding light instead of a jumping one */
.steps { position: relative; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: color-mix(in srgb, var(--line) 85%, transparent); }
.steps .stepind { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform .45s var(--ease), width .45s var(--ease); pointer-events: none; }
.steps.slide .step.on { background: transparent; box-shadow: none; }
.step { position: relative; z-index: 1; }

/* the welcome: big, tight, calm type and one gradient phrase */
.intro.hero { padding-top: 66px; }
.intro h1 { font-size: var(--fs-hero); line-height: .98; letter-spacing: -0.048em; font-weight: 700; margin-bottom: var(--s5); }
.gt { background: var(--grad-text); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: gtSheen 2.6s .5s var(--ease) both; padding-bottom: .06em; white-space: nowrap; }
@keyframes gtSheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.lead { font-size: var(--fs-head); line-height: 1.55; letter-spacing: -0.008em; }
.steps3 b { background: var(--grad); color: var(--grad-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 12px -4px var(--glow); font-weight: var(--fw-strong); }
.steps3 li { color: color-mix(in srgb, var(--text) 78%, var(--muted)); }
/* everything on the welcome arrives in a short, settled cascade */
#s1 .herotext > *, #s1 .steps3, #s1 > #noAudio, #s1 > #gate, #s1 > .note { animation: heroIn .9s var(--ease) both; }
#s1 .herotext > :nth-child(2) { animation-delay: .07s; }
#s1 .steps3 { animation-delay: .14s; }
#s1 > #noAudio { animation-delay: .2s; }
#s1 > #gate { animation-delay: .26s; }
#s1 > .note { animation-delay: .32s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* the showcase: floats in, breathes, leans toward the pointer, with a dawn glow behind it */
.showcase::before { content: ''; position: absolute; inset: -12% -16% -8% -10%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side at 40% 45%, rgba(67, 160, 255, .30), transparent 70%), radial-gradient(closest-side at 70% 60%, rgba(120, 87, 243, .30), transparent 72%);
  filter: blur(30px); animation: glowDrift 14s ease-in-out infinite alternate; }
@keyframes glowDrift { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(4%, -3%, 0) scale(1.08); } }
.showcase { perspective: 1100px; }
.sc-phone, .sc-post { will-change: transform; }
.sc-phone { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-3deg); animation: scIn 1.1s .15s var(--ease) both, scFloat 7s 1.4s ease-in-out infinite alternate; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .14); }
.sc-post { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(2.5deg); animation: scIn 1.1s .3s var(--ease) both, scFloat 8s 1.6s ease-in-out infinite alternate-reverse; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .05); }
@keyframes scIn { from { opacity: 0; translate: 0 36px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes scFloat { from { translate: 0 0; } to { translate: 0 -8px; } }
.sc-tag { background: var(--grad); color: var(--grad-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px -6px var(--glow); }
.sc-note { letter-spacing: -0.005em; }

/* the one thing to press wears the dawn gradient, with a soft glow and a light that passes on hover */
.btn.primary, .btn.primary:hover:not(:disabled), #s1.out #trySample {
  background: var(--grad); color: var(--grad-ink); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(10, 20, 90, .28), 0 8px 24px -10px var(--glow);
}
.btn.primary { transition: transform .16s var(--ease), box-shadow .25s var(--ease), filter .2s; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.04) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(10, 20, 90, .28), 0 12px 32px -10px var(--glow); }
.btn.primary:active:not(:disabled) { transform: scale(.975); }
#s1.out #trySample { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s var(--ease), box-shadow .3s var(--ease); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(10, 20, 90, .28), 0 14px 40px -12px var(--glow); }
#s1.out #trySample:hover { filter: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(10, 20, 90, .28), 0 20px 50px -12px var(--glow); }
#s1.out #trySample:active { transform: scale(.975); }
#s1.out #trySample::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); }
#s1.out #trySample:hover::before { transform: translateX(120%); transition: transform .9s var(--ease); }
#s1.out #trySample svg { transition: transform .3s var(--ease); }
#s1.out #trySample:hover svg { transform: scale(1.12); }

/* cards: a hairline that catches light along the top edge */
.panel {
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(180deg, var(--edge-hi), var(--line) 60%) border-box;
  border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .02), 0 18px 40px -24px rgba(0, 0, 0, .5);
}
input[type='text']:focus, input[type='password']:focus, input[type='search']:focus, input[type='email']:focus, textarea:focus { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 24px -8px var(--glow); }

/* the drop zone glows awake when a file is over it */
.drop { position: relative; transition: border-color .25s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), transform .25s var(--ease); }
.drop:hover, .drop.over { background: radial-gradient(600px 240px at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), color-mix(in srgb, var(--surface) 70%, var(--bg)); box-shadow: 0 20px 50px -30px var(--glow); }
.drop .circle { background: var(--grad); color: var(--grad-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -10px var(--glow); }
.drop.over .circle { transform: translateY(-3px) scale(1.06); }

/* progress: the dawn gradient with a light that runs along it */
.bar { background: color-mix(in srgb, var(--surface-2) 85%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.bar > i { background: var(--grad); position: relative; overflow: hidden; box-shadow: 0 0 14px -2px var(--glow); }
.bar > i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); animation: barSheen 1.6s ease-in-out infinite; }
@keyframes barSheen { to { transform: translateX(100%); } }

/* moving between screens: a short settle, slightly out of focus to sharp */
.stage { animation: stageIn .42s var(--ease) both; }
@keyframes stageIn { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* small things */
.chip.on, .seg button.on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.toast { box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .5); }
.link { transition: color .18s, opacity .18s; }

@media (prefers-reduced-motion: reduce) {
  .top .mark path, .gt, #s1 .herotext > *, #s1 .steps3, #s1 > #noAudio, #s1 > #gate, #s1 > .note, .sc-phone, .sc-post, .showcase::before, .bar > i::after, .stage { animation: none !important; }
  .sc-phone, .sc-post { transform: none !important; }
  .steps .stepind, #s1.out #trySample::before { transition: none; }
}
@media (max-width: 560px) {
  .intro.hero { padding-top: var(--s6); }
  .intro h1 { font-size: var(--fs-hero); letter-spacing: -0.04em; }
  .sc-phone, .sc-post { transform: none; }
  .showcase::before { inset: -6% -4%; }
}
/* quiet versions: a waiting primary is plain until it can be pressed, a second choice is an outline */
.btn.primary:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--line); box-shadow: none; opacity: .75; filter: none; }
.sugg:not(.on) .use { background: transparent; border: 1px solid var(--line); color: var(--text); box-shadow: none; }
.sugg:not(.on) .use:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line); }
.playbtn { background: var(--grad); color: var(--grad-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 22px -10px var(--glow); }
#aspectChips .chip { font-size: var(--fs-body); padding: var(--s2) 2px; }

/* step 03: links and focus use their own audited colors; progress keeps the brand gradient (no text on it) */
.link, a.link { color: var(--link); }
:focus-visible { outline-color: var(--focus); }
.bar > i { background: var(--sm-grad-hero); }
.btn.primary, .btn.primary:hover:not(:disabled), #s1.out #trySample { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 24px -10px var(--glow); }
#s1.out #trySample { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 40px -12px var(--glow); }
#s1.out #trySample::before { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); }

/* Sermosaic type system (approved step 04): Geist only, self-hosted (the logo wordmark stays outlined
   Inter Display paths). Marketing display 64/800, body 16, transcript 18/1.7, controls and buttons 14,
   timecodes tabular. Customer caption and carousel fonts are never touched by these rules. */
body { font-size: var(--fs-head); line-height: 1.55; font-optical-sizing: auto; }
.intro h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.06; letter-spacing: -0.045em; }
.lead { font-size: var(--fs-head); line-height: 1.55; }
.transcript { font-size: var(--fs-head); line-height: 1.7; letter-spacing: 0; }
.btn { font-size: var(--fs-body); font-weight: var(--fw-strong); letter-spacing: -0.005em; }
.t, .meta, .dur, time, .tc { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .intro h1 { font-size: var(--fs-hero); letter-spacing: -0.04em; }
  .transcript { font-size: var(--fs-head); }
}

/* v36 app shell (inspired by the ChatGPT studio concept): on a computer a calm sidebar holds the way
   around, a quiet top bar says where you are, and the content gets the width. Phones keep the top bar. */
.appside, .topctx, .toplinks { display: none; }
.eyebrow { margin: 0 0 var(--s3); font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1.4; letter-spacing: 0; color: var(--accent); }
@media (min-width: 1100px) {
  body.shell { padding-left: 302px; }
  body.shell .appside {
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 40; overflow-y: auto;
    padding: var(--s5) var(--s4) var(--s4); background: color-mix(in srgb, var(--surface) 88%, transparent); border-right: 1px solid var(--line);
    backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }
  body.shell .top > .brand, body.shell .top > .steps { display: none; }
  body.shell .topctx { display: flex; }
  body.shell .top { max-width: 1260px; padding: var(--s5) var(--s7) var(--s4); }
  body.shell main { max-width: 1260px; padding: var(--s2) var(--s7) 106px; }
}
.sidelogo { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4) var(--s5); color: var(--text); text-decoration: none; }
.sidecap { margin: var(--s5) 0 var(--s2); padding: 0 var(--s4); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--muted); }
.sidenav { display: grid; gap: 2px; }
.sidenav[hidden], .sidecap[hidden] { display: none; }
.sidenav button, .sidebottom a, .sidebottom button {
  display: flex; align-items: center; gap: var(--s4); width: 100%; min-height: 42px; padding: var(--s3) var(--s4); border: 0; border-radius: var(--r-control);
  background: transparent; color: color-mix(in srgb, var(--text) 74%, var(--muted)); font-size: var(--fs-body); font-weight: var(--fw-strong); text-align: left; text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.sidenav button .ico, .sidebottom .ico { flex: none; opacity: .85; }
.sidenav button:hover:not(:disabled), .sidebottom a:hover, .sidebottom button:hover { background: var(--surface-2); color: var(--text); }
.sidenav button:active:not(:disabled) { transform: scale(.98); }
.sidenav button.on { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.sidenav button.on .ico { opacity: 1; }
.sidenav button:disabled { opacity: .38; cursor: default; }
.sidespacer { flex: 1; min-height: 24px; }
.sidetip { margin: 0 0 var(--s4); padding: var(--s4) var(--s4) var(--s4); border-radius: var(--r-card); background: var(--accent-soft); color: var(--text); font-size: var(--fs-body); line-height: 1.5; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent); }
.sidetip b { display: block; margin-bottom: var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--accent); }
.sidetip span { display: block; animation: tipIn .35s var(--ease) both; }
@keyframes tipIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.sidebottom { display: grid; gap: 2px; padding-top: var(--s3); }
.sidebottom a, .sidebottom button { font-size: var(--fs-body); min-height: 38px; }
.topctx { align-items: center; gap: var(--s3); min-width: 0; color: var(--muted); font-size: var(--fs-body); }
.topctx span { font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; }
.topctx i { font-style: normal; opacity: .5; }
.topctx b { color: var(--text); font-weight: var(--fw-strong); }

/* the signed-out welcome is a landing page: no step pill, a few quiet links */
body.landing .top > .steps { display: none; }
@media (min-width: 900px) {
  body.landing .toplinks { display: flex; align-items: center; gap: var(--s6); margin-left: auto; font-size: var(--fs-body); font-weight: var(--fw-strong); }
  body.landing .toplinks a { color: color-mix(in srgb, var(--text) 72%, var(--muted)); text-decoration: none; transition: color .18s; }
  body.landing .toplinks a:hover { color: var(--text); }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* signed in, the first screen is a workspace, not a sales page */
.homehead { display: none; }
#s1.signed .homehead, html.pre-in #s1:not(.out) .homehead { display: block; padding: var(--s7) 0 var(--s6); animation: heroIn .7s var(--ease) both; }
#s1.signed .intro.hero, html.pre-in #s1:not(.out) .intro.hero { display: none; }
.homehead h1 { margin: 0 0 var(--s4); font-size: var(--fs-display); font-weight: var(--fw-strong); line-height: 1.15; letter-spacing: -0.035em; }
.homehead .lead { max-width: 62ch; }
#s1.signed .drop { min-height: 300px; border: 1.5px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); background: radial-gradient(700px 260px at 50% 0%, var(--accent-soft), transparent 70%), var(--surface); box-shadow: 0 24px 50px -36px var(--glow); }
#s1.signed .drop .circle { width: 60px; height: 60px; border-radius: var(--r-card); background: var(--accent); color: var(--accent-ink); }
#s1.signed .drop .big { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -0.025em; }
#s1.signed #noAudio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); text-align: left; }
#s1.signed #noAudio.hidden { display: none; }
#s1.signed #noAudio .link { display: flex; align-items: center; gap: var(--s4); min-height: 64px; padding: var(--s4) var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-strong); text-decoration: none; transition: border-color .18s, transform .18s var(--ease), box-shadow .18s; }
#s1.signed #noAudio .link:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; }
@media (max-width: 560px) { #s1.signed #noAudio { grid-template-columns: 1fr; } .homehead h1 { font-size: var(--fs-display); } }

/* landing sections below the hero */
.mkt { display: none; }
#s1.out .mkt { display: block; }
.trust { list-style: none; margin: 70px 0 0; padding: var(--s5) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust li { display: flex; flex-direction: column; gap: 2px; padding-left: var(--s4); border-left: 2px solid var(--line); }
.trust b { font-size: var(--fs-body); font-weight: var(--fw-strong); }
.trust span { font-size: var(--fs-body); color: var(--muted); }
.mktsec { padding: 99px 0 0; }
.mktsec h2 { margin: 0 0 var(--s4); font-size: var(--fs-hero-s); font-weight: 750; line-height: 1.1; letter-spacing: -0.04em; max-width: 22ch; }
.mktsub { margin: 0 0 var(--s6); color: var(--muted); font-size: var(--fs-head); max-width: 60ch; }
.fmtgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.fmt { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s3) var(--s5); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.fmt:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px var(--glow); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.fmt > b { margin: var(--s3) var(--s2) 0; font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.015em; }
.fmt > span:not(.fmtart) { margin: 0 var(--s2); color: var(--muted); font-size: var(--fs-body); }
.fmtart { display: grid; place-items: center; height: 120px; border-radius: var(--r-control); color: #fff; position: relative; overflow: hidden; }
.fmtart .ico { width: 30px; height: 30px; padding: var(--s4); box-sizing: content-box; border-radius: var(--r-card); background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); backdrop-filter: blur(6px); }
.fmtart.a1 { background: linear-gradient(140deg, #1b2a6b, #4a3bd6 70%, #7857F3); }
.fmtart.a2 { background: linear-gradient(140deg, #92D9FF, #43A0FF 55%, #1154F1); }
.fmtart.a3 { background: linear-gradient(140deg, #48B1FF, #0851E8); }
.fmtart.a4 { background: linear-gradient(140deg, #3B1BCE, #7857F3 60%, #B391FF); }
.mktsec.how { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 65px; align-items: center; }
.howlist { list-style: none; counter-reset: how; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s5); }
.howlist li { counter-increment: how; display: grid; grid-template-columns: 36px 1fr; column-gap: var(--s4); }
.howlist li::before { content: counter(how, decimal-leading-zero); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-body); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.howlist b { font-size: var(--fs-head); font-weight: var(--fw-strong); }
.howlist span { color: var(--muted); font-size: var(--fs-body); }
.howart { display: grid; gap: var(--s4); padding: var(--s6); border-radius: var(--r-card); background: radial-gradient(500px 260px at 70% 0%, var(--accent-soft), transparent 70%), var(--surface-2); }
.howcard { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); }
.howcard > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); }
.howcard small { display: block; font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--muted); }
.howcard b { font-size: var(--fs-head); font-weight: var(--fw-strong); }
.howcard.on { margin-left: var(--s5); box-shadow: 0 20px 40px -24px var(--glow), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.howrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-left: var(--s5); }
.howrow span { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s4) var(--s2); border-radius: var(--r-card); background: var(--surface); font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--muted); box-shadow: var(--shadow-sm); }
.howrow .ico { color: var(--accent); }
.whogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.who { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); }
.who b { font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.015em; }
.who span { color: var(--muted); font-size: var(--fs-body); }
.plangrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin: var(--s6) 0 var(--s5); max-width: 860px; }
.plan { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); }
.plan.pro { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 24px 50px -34px var(--glow); }
.plan > b { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-head); font-weight: var(--fw-strong); }
.plan > b i { font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; padding: 3px var(--s2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.plan .price { margin: 0; font-size: var(--fs-hero-s); font-weight: 750; letter-spacing: -0.04em; }
.plan .price small { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan > span { color: var(--muted); font-size: var(--fs-body); }
.ctaband { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); margin: 105px 0 0; padding: var(--s7) var(--s7); border-radius: var(--r-card); color: #fff; background: radial-gradient(600px 300px at 85% 0%, rgba(146, 217, 255, .25), transparent 70%), linear-gradient(135deg, #0B1026, #1d2a6b 60%, #3b2a9b); box-shadow: 0 30px 60px -30px rgba(17, 30, 90, .6); }
.ctaband h2 { margin: 0 0 var(--s3); font-size: var(--fs-display); font-weight: 750; letter-spacing: -0.035em; line-height: 1.12; max-width: 22ch; }
.ctaband p { margin: 0; color: rgba(255, 255, 255, .78); }
.ctaband .btn { flex: none; background: #fff; color: #0B1026; border-color: #fff; padding: var(--s4) var(--s5); font-size: var(--fs-body); }
.ctaband .btn:hover:not(:disabled) { background: #eef2ff; border-color: #eef2ff; }
.mktfoot { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; padding: var(--s7) 0 var(--s3); margin-top: var(--s7); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-body); }
.mktfoot a { color: inherit; }
@media (max-width: 900px) {
  .trust, .fmtgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mktsec.how, .whogrid, .plangrid { grid-template-columns: 1fr; }
  .ctaband { flex-direction: column; align-items: flex-start; padding: var(--s6) var(--s6); }
}
@media (max-width: 560px) { .mktsec { padding-top: 71px; } .trust { margin-top: var(--s7); } }
#s1.out > .note:has(a) { display: none; }

/* brand setup guide */
.guide { margin: 0 0 var(--s5); padding: var(--s5) var(--s5); border-radius: var(--r-card); border: 0; background: var(--surface-2); }
.guide.hidden { display: none; }
.guide.complete { border-color: var(--line); background: var(--surface); }
.guidehead { display: flex; align-items: flex-start; gap: var(--s4); }
.guidehead > div:first-child, .guidehead > div:nth-child(2):last-child { flex: 1; min-width: 0; }
.guidehead .eyebrow { margin-bottom: var(--s1); }
.guidehead b { display: block; font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.015em; }
.guidehead span { display: block; color: var(--muted); font-size: var(--fs-body); margin-top: 2px; }
.guideok { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 999px; background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.guideacts { display: flex; gap: var(--s3); flex: none; align-self: center; }
.guidebar { height: 6px; margin: var(--s5) 0 var(--s2); border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.guidebar i { display: block; height: 100%; border-radius: inherit; background: var(--sm-grad-hero); transition: width .6s var(--ease); }
.guidelist { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 2px; }
.guidelist li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--s4); padding: var(--s4) var(--s3); border-radius: var(--r-control); transition: background .2s; }
.guidelist li.next { background: var(--accent-soft); }
.guidelist li b { display: block; font-size: var(--fs-body); font-weight: var(--fw-strong); }
.guidelist li span { display: block; color: var(--muted); font-size: var(--fs-body); }
.guidelist li.done b { color: var(--muted); font-weight: var(--fw-strong); }
.guidelist em { font-style: normal; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--success); }
.gk { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--line-strong); color: #fff; }
.guidelist li.done .gk { background: var(--success); border-color: var(--success); }
.guidelist li.next .gk { border-color: var(--accent); }
.guidewhere { margin-top: var(--s4); font-size: var(--fs-body); color: var(--muted); }
.guidewhere summary { cursor: pointer; font-weight: var(--fw-strong); color: var(--text); }
.guidewhere ul { margin: var(--s3) 0 var(--s3); padding-left: var(--s5); display: grid; gap: var(--s2); }
.guidewhere li b { color: var(--text); margin-right: var(--s2); }
.guidewhere p { margin: 0; }
.guide.mini { margin: var(--s5) 0 var(--s2); padding: var(--s4) var(--s5); }
.guide.mini .guidehead b { font-size: var(--fs-head); }
.guide.mini .guidebar { margin: var(--s4) 0 0; }
.guideglow { animation: guideGlow 1.6s var(--ease); border-radius: var(--r-control); }
@keyframes guideGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 25% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); } }
@media (max-width: 560px) { .guidehead { flex-direction: column; } .guideacts { align-self: stretch; } .guideacts .btn { flex: 1; } .guidelist li { grid-template-columns: 24px minmax(0, 1fr); } .guidelist li > .btn, .guidelist li > em { grid-column: 2; justify-self: start; } }
#s1.signed .recent { margin-top: var(--s5); }
#s1.signed #noAudio .link .ico { flex: none; padding: var(--s3); box-sizing: content-box; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); }

/* selection handles in the transcript */
.transcript { position: relative; }
.transcript .grip { position: absolute; left: -11px; top: 0; width: 22px; z-index: 2; cursor: ew-resize; touch-action: none; }
.transcript .grip[hidden] { display: none; }
.transcript .grip::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--accent); }
.transcript .grip::after { content: ''; position: absolute; left: 4px; width: 14px; height: 14px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 2.5px var(--surface), 0 2px 8px rgba(0, 0, 0, .25); transition: transform .15s var(--ease); }
.transcript .grip-a::after { top: -11px; }
.transcript .grip-b::after { bottom: -11px; }
.transcript .grip:hover::after, .transcript .grip.on::after { transform: scale(1.25); }
@media (pointer: coarse) {
  .transcript { touch-action: manipulation; -webkit-touch-callout: none; }
  .transcript.holding { touch-action: none; }
  /* the line is the grip's own background, so ::before can be a big invisible landing pad around each dot */
  .transcript .grip { left: -6px; width: 12px; background: linear-gradient(var(--accent), var(--accent)) center / 2.5px 100% no-repeat; }
  .transcript .grip::before { left: -10px; width: 32px; height: 32px; top: auto; bottom: auto; background: transparent; border-radius: 50%; }
  .transcript .grip-a::before { top: -25px; } .transcript .grip-b::before { bottom: -25px; }
  .transcript .grip::after { left: -5px; width: 22px; height: 22px; }
  .transcript .grip-a::after { top: -20px; } .transcript .grip-b::after { bottom: -20px; }
  .transcript span:hover { background: none; }
  .transcript span.sel:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
}

/* upload progress: three named steps above one forward-only bar */
.wsteps { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; gap: var(--s3); flex-wrap: wrap; }
.wsteps li { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3) var(--s2) var(--s3); border-radius: 999px; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--muted); background: var(--surface-2); transition: background .25s, color .25s; }
.wsteps li[hidden] { display: none; }
.wsteps li::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .5; }
.wsteps li.on { color: var(--accent); background: var(--accent-soft); }
.wsteps li.on::before { opacity: 1; animation: wpulse 1.2s ease-in-out infinite; }
.wsteps li.done { color: var(--success); }
.wsteps li.done::before { opacity: 1; }
@keyframes wpulse { 50% { transform: scale(1.5); opacity: .6; } }
.retryrow { display: flex; gap: var(--s3); flex-wrap: wrap; }
.retryrow .btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .wsteps li.on::before { animation: none; } }
/* one smooth band for selected words (an opaque tint, so the joins between words never show) */
.transcript span.sel { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); box-shadow: 0.32em 0 0 color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.transcript span.pk { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: 0.32em 0 0 color-mix(in srgb, var(--accent) 12%, var(--surface)); }
/* signed out, the sample's progress takes the place of the button you just pressed */
#s1.out > #working { order: 1; margin: var(--s2) 0 var(--s6); }
.gk .ico, .guidelist li.done .gk { color: var(--surface); fill: currentColor; }

/* Slides tab */
.slgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.sltile { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); cursor: pointer; transition: border-color .18s, transform .18s var(--ease), box-shadow .18s; }
.sltile canvas { display: block; width: 100% !important; height: auto !important; border-radius: var(--r-control); }
.sltile .nm { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sltile:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.sltile.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sltile.on .nm { color: var(--accent); }
.sltile .slx { position: absolute; top: 9px; left: 9px; width: 22px; height: 22px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .15s; }
.sltile:hover .slx, .sltile .slx:focus-visible { opacity: 1; }
.slcustom, .slown { margin-top: var(--s4); }
.slcustom summary, .slown summary { cursor: pointer; font-weight: var(--fw-strong); font-size: var(--fs-body); padding: var(--s2) 0; }
.slcustom > div, .slown .sllook { display: grid; gap: var(--s3); margin-top: var(--s3); }
.slcount { margin-top: var(--s2); }
.sllist { display: grid; gap: var(--s2); }
.slrow { border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); transition: border-color .18s, box-shadow .18s; }
.slrow.on { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.slrow.open { box-shadow: var(--shadow-sm); }
.slhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3) var(--s2) var(--s2); }
.slthumb { padding: 0; border: 0; background: none; border-radius: var(--r-control); overflow: hidden; line-height: 0; cursor: pointer; opacity: .55; transition: opacity .18s; }
.slrow.on .slthumb { opacity: 1; }
.slthumb canvas { display: block; border-radius: var(--r-control); max-height: 64px; width: auto !important; }
.sltxt { min-width: 0; border: 0; background: none; padding: 2px 0; text-align: left; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.sltxt small { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.sltxt b { font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slrow:not(.on) .sltxt b { color: var(--muted); }
.slswitch { flex: none; position: relative; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: background .2s var(--ease); }
.slswitch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .22s var(--ease); }
.slswitch.on { background: var(--accent); }
.slswitch.on::after { transform: translateX(16px); }
.sled { display: grid; gap: var(--s3); padding: var(--s1) var(--s4) var(--s4); animation: tipIn .25s var(--ease) both; }
.sled .field { display: grid; gap: var(--s2); }
.sled textarea, .sled input[type='text'] { width: 100%; padding: var(--s3) var(--s3); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-body); resize: vertical; }
.sled .row { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- Timeline: slides, zoom punch-ins, footage, playhead ---------- */
.lane { display: flex; flex-direction: column; gap: var(--s1); }
.mtrack { position: relative; height: 28px; border-radius: var(--r-control); background: var(--bg); border: 1px solid var(--line); overflow: hidden; touch-action: none; cursor: pointer; }
.mtrack.thin { height: 18px; }
.track.empty { height: 26px; }
.track.empty::after { content: attr(data-empty); position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-sm); color: var(--muted); pointer-events: none; }
.lph { position: absolute; top: -2px; bottom: -2px; left: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); opacity: .75; pointer-events: none; z-index: 3; }
.smk { position: absolute; top: 3px; bottom: 3px; min-width: 6px; border-radius: 6px; background: var(--k); color: #fff; display: flex; align-items: center; padding: 0 10.5px; overflow: hidden; cursor: grab; transition: box-shadow .15s var(--ease); }
.smk span { flex: 1 1 auto; min-width: 0; font-size: 0.6875rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.smk { container-type: inline-size; }
@container (max-width: 36px) { .smk > span { display: none; } }
.smk.card { background: color-mix(in srgb, var(--k) 16%, var(--surface)); border: 1.5px solid var(--k); color: var(--text); }
.smk.lower { top: 8px; bottom: 8px; border-radius: 999px; padding: 0 8.5px; }
.smk.lower span { font-size: 0.5938rem; }
.smk.full.glass { background: repeating-linear-gradient(135deg, var(--k) 0 5px, color-mix(in srgb, var(--k) 55%, transparent) 5px 10px); }
.smk.on, .pmk.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); z-index: 2; }
.smk:active, .pmk:active { cursor: grabbing; }
.smk .h { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 1; }
.smk .h.l { left: 0; } .smk .h.r { right: 0; }
.smk .h::after { content: ''; position: absolute; top: 6px; bottom: 6px; left: 3px; width: 2px; border-radius: 2px; background: currentColor; opacity: .55; }
.smk.lower .h::after { display: none; }
.pmk { position: absolute; top: 3px; bottom: 3px; min-width: 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); cursor: grab; }
.pmk i { position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--accent); transform: rotate(45deg); border-radius: 1px; pointer-events: none; }
.pmk.off { opacity: .4; border-style: dashed; }
.lanelegend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); }
.lanelegend span { display: inline-flex; align-items: center; gap: var(--s2); }
.lg { display: inline-block; width: 14px; height: 9px; border-radius: 3px; background: var(--sm-blue); }
.lg.card { background: color-mix(in srgb, var(--sm-blue) 16%, var(--surface)); border: 1.5px solid var(--sm-blue); }
.lg.lower { height: 5px; border-radius: 99px; background: #A35BE8; }
.lg.zoom { width: 8px; height: 8px; border-radius: 1px; background: var(--accent); transform: rotate(45deg); }
.lanehead #keysBtn { margin-left: 0; width: 32px; height: 32px; }
.lanehead #clearBroll { margin-left: auto; }
.lanehead #clearBroll.hidden + #keysBtn { margin-left: auto; }

/* ---------- Safe zones over the preview (never in the video) ---------- */
.frbtn { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; opacity: .8; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .15s, background .15s; }
.frbtn:hover { opacity: 1; }
.frbtn.on { background: var(--accent); color: var(--accent-ink); opacity: 1; }
.safeov { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sz { position: absolute; display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgba(255, 72, 96, .32) 0 6px, rgba(255, 72, 96, .14) 6px 12px); }
.sz span { font-size: 0.6562rem; font-weight: 650; color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 8.5px; border-radius: 999px; white-space: nowrap; }
.sz.top { left: 0; right: 0; top: 0; height: 12%; }
.sz.bottom { left: 0; right: 0; bottom: 0; height: 24%; }
.sz.side { right: 0; top: 40%; height: 36%; width: 15%; }
.sz.side span { writing-mode: vertical-rl; padding: 8.5px 2px; }
.sz.keep { left: 6%; right: 17%; top: 13%; bottom: 25%; background: none; border: 1.5px dashed rgba(255, 255, 255, .85); border-radius: 10px; place-items: start center; }
.sz.keep span { margin-top: -10px; }
.sz.keep.m { inset: 6%; }
.sz.keep.m.wide { left: 5%; right: 5%; top: 6%; bottom: 12%; }

/* ---------- Zoom punch-ins (Look tab) ---------- */
.pchwrap { margin-top: var(--s4); }
.pchwrap > summary { cursor: pointer; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--accent); list-style: none; display: inline-flex; align-items: center; gap: var(--s2); }
.pchwrap > summary::-webkit-details-marker { display: none; }
.pchwrap > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); transition: transform .18s var(--ease); }
.pchwrap[open] > summary::before { transform: rotate(45deg); }
.pchlist { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.pchrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); transition: border-color .15s; }
.pchrow.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pchrow.off { opacity: .6; }
.pcht { display: flex; align-items: center; gap: var(--s3); min-width: 0; padding: var(--s2) var(--s3); border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font-size: var(--fs-body); }
.pcht b { font-variant-numeric: tabular-nums; font-weight: var(--fw-strong); font-size: var(--fs-sm); color: var(--muted); }
.pcht span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcht span i { font-style: normal; color: var(--muted); font-size: var(--fs-sm); }
.pcht em { font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--accent); background: var(--accent-soft); padding: 2px var(--s2); border-radius: 999px; }
.pchn { display: flex; padding-right: var(--s1); }
.pchn button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-control); background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pchn button:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Export: all sizes, cover ---------- */
.exall { width: 100%; justify-content: center; margin-top: var(--s3); }
.exall:disabled { opacity: .5; cursor: default; text-decoration: none; }
.allres { display: grid; gap: var(--s3); margin: var(--s3) 0; }
.allrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-control); }
.allrow .ar { display: block; max-width: 24px; max-height: 30px; width: 100%; border: 2px solid var(--text); border-radius: 4px; opacity: .7; justify-self: center; }
.allrow .an { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-body); }
.allrow .an small { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.allres > .btn.primary { justify-self: start; }

/* ---------- Keyboard shortcuts ---------- */
.keysdlg { width: min(500px, calc(100vw - 24px)); }
.keys { display: grid; gap: var(--s3); }
.keys > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s4); align-items: baseline; font-size: var(--fs-body); }
.keys kbd { font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); padding: 2px var(--s2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-control); background: var(--surface-2); color: var(--text); white-space: nowrap; }
.keys span { color: var(--muted); }
.keys .kk { font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--muted); display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
@media (max-width: 560px) { .keys > div { grid-template-columns: 1fr; gap: var(--s1); } }
@media (prefers-reduced-motion: reduce) { .smk, .pmk, .frbtn, .pchrow, .pchwrap > summary::before { transition: none; } }
.vtnote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-control); background: var(--accent-soft); font-size: var(--fs-body); color: var(--text); }
.vtnote .vtlinks { display: inline-flex; gap: var(--s4); }

/* ---------- Picking captions and part-screen slides on the preview (never in the video) ---------- */
.pickov { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pkbox { position: absolute; border: 2px dashed #7fa6ff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.pkbox .hd { position: absolute; width: 14px; height: 14px; border-radius: 4px; background: #fff; border: 2px solid #4f7dff; pointer-events: auto; touch-action: none; }
.pkbox .hd.nw { left: -8px; top: -8px; cursor: nwse-resize; } .pkbox .hd.se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.pkbox .hd.ne { right: -8px; top: -8px; cursor: nesw-resize; } .pkbox .hd.sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.pkbox.cap .hd { display: none; }
@media (pointer: coarse) { .pkbox .hd { width: 22px; height: 22px; } .pkbox .hd.nw, .pkbox .hd.sw { left: -12px; } .pkbox .hd.ne, .pkbox .hd.se { right: -12px; } .pkbox .hd.nw, .pkbox .hd.ne { top: -12px; } .pkbox .hd.sw, .pkbox .hd.se { bottom: -12px; } }
.pkbar { position: absolute; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(12, 16, 30, .82); color: #fff; font-size: var(--fs-sm); white-space: nowrap; pointer-events: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.pkbar span { padding: 3px var(--s2); font-weight: var(--fw-strong); }
.pkbar i { font-style: normal; padding: 3px var(--s3) 3px 2px; opacity: .75; }
.pkbar button { border: 0; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-weight: var(--fw-strong); padding: var(--s1) var(--s3); border-radius: 999px; cursor: pointer; }
.pkbar button:hover { background: rgba(255, 255, 255, .22); }
.pkguide { position: absolute; background: #ff4d8d; pointer-events: none; }
.pkguide.x { width: 1.5px; margin-left: -.75px; }
.pkguide.y { height: 1.5px; margin-top: -.75px; }
.slcaps { margin: var(--s4) 0 0; }
.exportbox .row { flex-wrap: wrap; }
.exportbox .row .btn { min-width: 0; padding-left: var(--s3); padding-right: var(--s3); white-space: nowrap; }
.exportbox .exall { margin-top: 0; }
/* two columns: the preview shrinks a little when the timeline shows, so the whole timeline fits on screen */
@media (min-width: 921px) {
  #s3 .stagecol:has(#laneBox:not(.lnone) #lane:not(.hidden)) .frame canvas { max-height: max(300px, min(calc(100dvh - 430px), 760px)); }
}

/* ---------- v40: phones and iPhone ---------- */
/* fine-tune by one word, in the transcript's bar (phones and tablets only) */
.nudge { display: none; }
@media (pointer: coarse) {
  .nudge:not([hidden]) { display: flex; gap: var(--s2); margin-left: auto; flex: none; }
  .dockbar:has(.nudge:not([hidden])) .seltext { flex: 1 1 0; }
  .dockbar:has(.nudge:not([hidden])) .seltext b { font-size: var(--fs-body); }
  .dockbar:has(.nudge:not([hidden])) .seltext span { font-size: var(--fs-sm); }
  .nd { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
  .nd button { width: 36px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--text); border-radius: 999px; padding: 0; }
  .nd button:active { background: var(--accent-soft); color: var(--accent); transform: scale(.92); }
  .nd i { font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); min-width: 26px; text-align: center; letter-spacing: .01em; }
}
/* the handle being dragged: a bigger dot with a soft halo, and a ring on the word it will land on */
@media (pointer: coarse) {
  .transcript .grip.on::after { transform: scale(1.18); box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 9px var(--accent-soft), 0 3px 10px rgba(0, 0, 0, .3); }
}
.transcript span.edge { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.transcript.gripping span.sel:not(.edge) { transition: none; }
/* a one-time card on phones: how fingers pick words */
.coach { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin: 0 0 var(--s4); padding: var(--s4); border-radius: var(--r-card); border: 0; background: var(--surface-2); animation: rise .35s var(--ease) both; transition: opacity .25s, transform .25s var(--ease); }
.coach.out { opacity: 0; transform: translateY(-6px); }
.coach .ctext b { display: block; font-size: var(--fs-body); margin-bottom: var(--s1); }
.coach ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: var(--fs-body); color: var(--muted); }
.coach em { font-style: normal; font-weight: var(--fw-strong); color: var(--text); }
.coach .btn { justify-self: start; }
.cdemo { position: relative; justify-self: start; padding: var(--s2) var(--s3); border-radius: var(--r-control); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.6; user-select: none; -webkit-user-select: none; }
.cdemo span { padding: 2px 1px; }
.cdemo span:nth-child(1) { animation: cdA 4.2s infinite; } .cdemo span:nth-child(2) { animation: cdB 4.2s infinite; } .cdemo span:nth-child(3) { animation: cdC 4.2s infinite; }
.cfinger { position: absolute; left: 6px; top: 70%; color: var(--accent); animation: cdF 4.2s var(--ease) infinite; pointer-events: none; }
@keyframes cdA { 0%, 12% { background: none; } 18%, 88% { background: color-mix(in srgb, var(--accent) 24%, transparent); } 100% { background: none; } }
@keyframes cdB { 0%, 48% { background: none; } 54%, 88% { background: color-mix(in srgb, var(--accent) 24%, transparent); } 100% { background: none; } }
@keyframes cdC { 0%, 48% { background: none; } 54%, 88% { background: color-mix(in srgb, var(--accent) 24%, transparent); box-shadow: inset -2px 0 0 var(--accent); } 100% { background: none; } }
@keyframes cdF { 0% { transform: translate(8px, 6px); opacity: 0; } 10% { transform: translate(8px, 0); opacity: 1; } 16% { transform: translate(8px, 2px) scale(.9); } 22%, 36% { transform: translate(8px, 0); } 46% { transform: translate(84px, 0); } 52% { transform: translate(84px, 2px) scale(.9); } 60%, 88% { transform: translate(84px, 0); opacity: 1; } 100% { transform: translate(84px, 6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cdemo span, .cfinger { animation: none !important; } .cdemo span:nth-child(-n+3) { background: color-mix(in srgb, var(--accent) 24%, transparent); } }
#s2:has(.coach) #hint { display: none; }
@media (max-width: 560px) {
  /* suggested moments: one swipeable row with the next card peeking, so the words start a screen sooner */
  .suggrow { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 -14px; padding: 2px 16.5px 7px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .suggrow::-webkit-scrollbar { display: none; }
  .suggrow > .sugg { flex: 0 0 86%; scroll-snap-align: center; }
  .suggrow > .sugg:only-child { flex-basis: 100%; }
  .sugg p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  /* the pinned bar covers the bottom of the screen: anything scrolled into view stops above it */
  html:has(#s2:not(.hidden)) { scroll-padding-bottom: 200px; scroll-padding-top: 16px; }
}
@media (pointer: coarse) {
  /* smaller visible dots (they sat on the words of the next line), same 32px landing pads */
  .transcript .grip::after { left: -2px; width: 16px; height: 16px; }
  .transcript .grip-a::after { top: -15px; } .transcript .grip-b::after { bottom: -15px; }
}
@media (max-width: 560px) {
  /* the file, a way to change it, and search in two rows instead of four */
  #s2 .s2top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s2) var(--s4); padding: 2px 0 var(--s4); }
  #s2 .s2top .filechip { grid-column: 1; grid-row: 1; }
  #s2 .s2top #changeFile { grid-column: 2; grid-row: 1; font-size: var(--fs-body); }
  #s2 .s2top .search { grid-column: 1 / -1; max-width: none; }
}
/* viewport-fit=cover: in landscape the notch side gets room (the pinned bars already clear the home bar) */
main { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.top { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
@media (max-width: 560px) {
  main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .top { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}
/* studio and carousel on phones: the pinned preview gets smaller once you are working in the controls (phone.js) */
@media (max-width: 767px), (max-width: 920px) and (max-height: 520px) {
  #s3 .frame canvas { transition: max-height .28s var(--ease); }
  #s3.compact .frame canvas { max-height: 25vh; max-height: 25svh; }
  #s3.compact .viewer { padding-top: var(--s1); padding-bottom: var(--s2); }
}
@media (max-width: 980px) {
  #s4 .cslide { transition: width .28s var(--ease); }
  #s4.compact .cslide { width: min(46vw, calc(23svh * var(--ar, 0.8))); }
}
/* a sideways swipe on the controls moves to the next section; the new one slides in from that side */
.pane.swl { animation: swl .26s var(--ease); } .pane.swr { animation: swr .26s var(--ease); }
@keyframes swl { from { opacity: .3; transform: translateX(28px); } }
@keyframes swr { from { opacity: .3; transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { .pane.swl, .pane.swr { animation: none; } #s3 .frame canvas, #s4 .cslide { transition: none; } }
@media (pointer: coarse) {
  /* timelines: up-and-down swipes scroll the page, sideways ones move blocks */
  .track, .mtrack, .wave { touch-action: pan-y; }
  /* slider grips a thumb can hold (iOS's own are 28px) */
  input[type='range'] { height: 36px; }
  input[type='range']::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04); }
  input[type='range']::-moz-range-thumb { width: 26px; height: 26px; }
  /* the preview: a finger picks a caption or slide first, then drags it (stagepick.js, overlay.js) */
  #prev.hasov { touch-action: auto; }
  #prev.grab { touch-action: none; }
  /* no "Save image" pop-up from a long press on previews and slides */
  .frame, .frame canvas, .cslide, .cslide canvas, .rimg, .tile img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
/* phones: a reminder on the preview to keep the screen open while a video renders */
.analyzing small { display: block; margin-top: 3px; font-size: var(--fs-sm); font-weight: var(--fw-regular); opacity: .8; }
/* Record now (phones, recorder.js): under the "Choose a recording" box */
.recrow { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: var(--s4) 0 var(--s1); }
#drop.hidden + .recrow { display: none; }
.recrow #recBtn { flex: none; gap: var(--s3); min-height: 46px; padding: 0 var(--s5); font-weight: var(--fw-strong); }
.recrow #recBtn .ico { color: var(--danger); }
.recsub { flex: 1 1 180px; color: var(--muted); font-size: var(--fs-body); line-height: 1.4; }
.recrow.on { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3) var(--s4); padding: var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.recmeter { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s1); height: 44px; }
.recmeter i { flex: 1; height: calc(var(--h, .12) * 100%); min-height: 4px; border-radius: 999px; background: var(--accent); transition: height .07s linear; }
.rect { font-size: var(--fs-display); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.recdot { display: inline-flex; align-items: center; gap: var(--s2); color: var(--danger); font-size: var(--fs-body); font-weight: var(--fw-strong); }
.recdot::before { content: ''; width: 9px; height: 9px; border-radius: 999px; background: currentColor; animation: wpulse 1.2s ease-in-out infinite; }
.recacts { grid-column: 1 / -1; display: flex; gap: var(--s3); }
.recacts .btn { flex: 1; min-height: 46px; }
.recacts .btn.primary { flex: 2; }
@media (prefers-reduced-motion: reduce) { .recdot::before { animation: none; } .recmeter i { transition: none; } }
/* phones: every pop-up menu (More, a long press on a picture or text) opens as a sheet from the bottom, in thumb reach */
@media (pointer: coarse) and (max-width: 560px) {
  .ccmenu { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); min-width: 0; padding: var(--s2); border-radius: var(--r-card); box-shadow: 0 0 0 100vmax rgba(5, 8, 20, .42), 0 -10px 40px rgba(0, 0, 0, .25); animation: sheetup .26s var(--ease) both; }
  .ccmenu::before { content: ''; align-self: center; width: 36px; height: 4px; margin: 0 0 var(--s2); border-radius: 999px; background: var(--line); }
  .ccmenu button { min-height: 48px; padding: var(--s4) var(--s4); font-size: var(--fs-body); gap: var(--s4); border-radius: var(--r-control); }
  .ccmenu button:active { background: var(--surface-2); }
}
@keyframes sheetup { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ccmenu { animation: none; } }
.transcript span.flash { animation: wflash .42s var(--ease); }
@keyframes wflash { 0% { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .transcript span.flash { animation: none; } }
/* the pinned preview changes height (compact, tabs): the browser must not "hold" the content in place, or the
   section under the tabs slides behind them */
@media (max-width: 980px) { html:has(#s3:not(.hidden)), html:has(#s4:not(.hidden)), html:has(#s3:not(.hidden)) body, html:has(#s4:not(.hidden)) body { overflow-anchor: none; } }
.cslabel .csword { font-style: normal; }
@media (max-width: 560px) {
  /* the slide bar and Save share one row on a phone */
  .cslabel { margin-right: 2px; } .cslabel .csword { display: none; }
  #s4 .cslidebar { gap: 5.5px; flex-wrap: nowrap; }
  #s4 .cslidebar .btn.ghost { min-width: 38px; padding: 0; }
}
@media (pointer: coarse) and (max-width: 560px) {
  /* phones pick files, they don't drop them: a big button, not a drop target, with Record now right under it */
  #s1.signed .drop { min-height: 190px; border-style: solid; }
  #s1 .drop:active { transform: scale(.99); }
}
#s1.recording #drop, #s1.recording #noAudio, #s1.recording #recent { display: none; }
#s3 .ftime { white-space: nowrap; }
/* phones on their side (short screens): a pinned preview would leave no room, so it scrolls with the page and the
   tabs pin at the top instead; the transcript's bar slims down */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  #s3 .viewer, #s4 .cview { position: relative; top: auto; }
  #s3 .ptabs, #s4 .ptabs { top: var(--pinTop, 0px); }
  #s3 .frame canvas, #s3.compact .frame canvas { max-height: 72svh; }
  #s3 .side .pane [id], #s4 .side .pane [id] { scroll-margin-top: calc(var(--pinTop, 0px) + 60px); }
  .dock { bottom: 4px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .dockbar { gap: var(--s2) var(--s3); }
  .seltext span { display: none; }
  .dockbar .actions .btn { min-height: 38px; }
  #s2 .coach { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  html:has(#s2:not(.hidden)) { scroll-padding-bottom: 130px; }
}
.toast button { white-space: nowrap; flex: none; }
.toast.act { max-width: calc(100vw - 24px); }
#toasts { width: max-content; max-width: calc(100vw - 24px); } .toast { max-width: 100%; }

/* "HD loading" on the preview while the full file of a background takes over from its preview copy */
.hdbadge { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px var(--s2); border-radius: 999px; background: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, .92); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: .02em; font-variant-numeric: tabular-nums; pointer-events: none; }

/* ---------- layers (v44): the list, the inspector, handles over the preview, the timeline lane ---------- */
#pickOv { display: none !important; }   /* the old caption / slide outline: layers draw their own */
.layov { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; }
.lbox { position: absolute; border: 2px solid #7fa6ff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .28); pointer-events: none; }
.lbox.m { border-width: 1.5px; border-style: dashed; }
.lbox.grp { border: 1.5px solid #ffb35c; border-radius: 6px; box-shadow: none; }
.lbox.locked { border-style: dotted; border-color: #aab2c5; }
.lbox.hidden, .lguide.hidden, .lmarq.hidden, .lang.hidden { display: none; }
.lh { position: absolute; width: 14px; height: 14px; border-radius: 4px; background: #fff; border: 2px solid #4f7dff; pointer-events: auto; touch-action: none; }
.lh.nw { left: -9px; top: -9px; cursor: nwse-resize; } .lh.se { right: -9px; bottom: -9px; cursor: nwse-resize; }
.lh.ne { right: -9px; top: -9px; cursor: nesw-resize; } .lh.sw { left: -9px; bottom: -9px; cursor: nesw-resize; }
.lh.n { left: 50%; top: -9px; margin-left: -7px; cursor: ns-resize; } .lh.s { left: 50%; bottom: -9px; margin-left: -7px; cursor: ns-resize; }
.lh.e { right: -9px; top: 50%; margin-top: -7px; cursor: ew-resize; } .lh.w { left: -9px; top: 50%; margin-top: -7px; cursor: ew-resize; }
.lstem { position: absolute; left: 50%; top: -28px; width: 2px; height: 24px; margin-left: -1px; background: #7fa6ff; pointer-events: none; }
.lrot { position: absolute; left: 50%; top: -44px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #7fa6ff; border: 2px solid #fff; pointer-events: auto; touch-action: none; cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.lbox.flip .lstem { top: auto; bottom: -28px; } .lbox.flip .lrot { top: auto; bottom: -44px; }
.ltag { position: absolute; left: 0; top: calc(100% + 8px); max-width: 220px; padding: 2px var(--s2); border-radius: 999px; background: rgba(12, 16, 30, .82); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.lbox.small .lh.n, .lbox.small .lh.s, .lbox.small .lh.e, .lbox.small .lh.w { display: none; }
.lbox.flip .ltag { top: auto; bottom: calc(100% + 8px); }
.lguide { position: absolute; background: #ff4d8d; pointer-events: none; }
.lguide.x { width: 1.5px; margin-left: -.75px; } .lguide.y { height: 1.5px; margin-top: -.75px; }
.lmarq { position: absolute; border: 1.5px dashed #7fa6ff; background: rgba(127, 166, 255, .14); pointer-events: none; }
.lang { position: absolute; transform: translateX(-50%); padding: 3px var(--s3); border-radius: 999px; background: rgba(0, 0, 0, .74); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-strong); pointer-events: none; }
@media (pointer: coarse) {
  .lh { width: 26px; height: 26px; border-radius: 7px; }
  .lh.nw { left: -14px; top: -14px; } .lh.se { right: -14px; bottom: -14px; } .lh.ne { right: -14px; top: -14px; } .lh.sw { left: -14px; bottom: -14px; }
  .lh.n { top: -14px; margin-left: -13px; } .lh.s { bottom: -14px; margin-left: -13px; } .lh.e { right: -14px; margin-top: -13px; } .lh.w { left: -14px; margin-top: -13px; }
  .lrot { width: 30px; height: 30px; margin-left: -15px; top: -58px; } .lstem { top: -40px; height: 36px; }
  .lbox.flip .lrot { top: auto; bottom: -58px; } .lbox.flip .lstem { top: auto; bottom: -40px; }
}
.frbtn.lay { right: 52px; }

.laybar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s4) 0 var(--s2); }
.laybar .mini { margin: 0; }
.laylist { position: relative; display: flex; flex-direction: column; gap: var(--s1); max-height: 262px; overflow-y: auto; padding: 1px; overscroll-behavior: contain; }
.layrow { display: flex; align-items: center; gap: 2px; min-height: 46px; padding: 3px var(--s1); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); cursor: pointer; transition: background .12s, border-color .12s; }
.layrow:hover { background: var(--surface-2); }
.layrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.layrow.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.layrow.dragging { opacity: .45; }
.lgrip { align-self: stretch; width: 24px; display: grid; place-items: center; color: var(--muted); cursor: grab; touch-action: none; }
.fullrow .lgrip { visibility: hidden; width: 8px; }
.lname { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s3); color: var(--text); }
.lname .ico { flex: none; color: var(--muted); }
.layrow.on .lname .ico { color: var(--accent); }
.lname .lt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lname .lt b { font-size: var(--fs-body); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lname .lt small { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layrow.hid .lname { opacity: .5; }
.lbtn { flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--r-control); background: none; color: var(--muted); display: grid; place-items: center; }
.lbtn:hover { background: var(--surface-2); color: var(--text); }
.lbtn[aria-pressed='true'] { color: var(--accent); }
.layrow.hid .eye, .layrow.lock .lockb { color: var(--accent); }
.layins { position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 3px; background: var(--accent); pointer-events: none; }
.laysub { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); padding: var(--s3) var(--s1) 2px; }

.layinsp { margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s3) var(--s4) var(--s2); background: var(--surface); }
.layhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.layhead input { flex: 1 1 100%; min-width: 0; font: inherit; font-size: var(--fs-body); font-weight: var(--fw-strong); padding: var(--s2) var(--s3); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.laymulti { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s2); }
.layd { padding: var(--s2) 0 var(--s2); }
.layhead + .layd { border-top: 0; }
.layd > summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; font-size: var(--fs-body); font-weight: var(--fw-strong); cursor: pointer; list-style: none; color: var(--text); }
.layd > summary::-webkit-details-marker { display: none; }
.layd > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.layd[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.layd .field { margin: var(--s2) 0; }
.layd .oved { border: 0; padding: 0; margin: var(--s1) 0 0; }
.layaligns { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s3) 0 var(--s1); }
.lalign { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); }
.lalign:hover { background: var(--surface-2); }
.laytimes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s2) 0; }
.laytimes label { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-body); color: var(--muted); }
.laytimes input { width: 76px; font: inherit; font-size: var(--fs-body); padding: var(--s2) var(--s2); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }
.kflist { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.kfrow { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.kfrow.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.kfgo { display: inline-flex; align-items: center; gap: var(--s2); border: 0; background: none; padding: var(--s2) var(--s3); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--text); }
.kfgo small { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.kfrow .lbtn { width: 28px; height: 28px; }

#layerTrack { position: relative; height: auto; min-height: 30px; cursor: default; }
.lmk { position: absolute; height: 20px; min-width: 8px; display: flex; align-items: center; padding: 0 var(--s3); border-radius: var(--r-control); border: 1.5px solid var(--k); background: color-mix(in srgb, var(--k) 18%, var(--surface)); color: var(--text); overflow: hidden; cursor: grab; container-type: inline-size; }
.lmk span { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.lmk span .ico { flex: none; color: var(--k); }
@container (max-width: 44px) { .lmk > span { display: none; } }
.lmk.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); z-index: 2; }
.lmk.off { opacity: .45; border-style: dashed; }
.lmk.lk { cursor: not-allowed; }
.lmk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lmk .h { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 1; }
.lmk .h.l { left: 0; } .lmk .h.r { right: 0; }
.lmk .h::after { content: ''; position: absolute; top: 4px; bottom: 4px; left: 3px; width: 2px; border-radius: 2px; background: var(--k); opacity: .7; }

.laysheet-back { position: fixed; inset: 0; z-index: 899; background: rgba(5, 8, 20, .42); }
.laysheet { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 900; max-height: 58vh; max-height: 58svh; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s2) var(--s4) var(--s3); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); animation: sheetup .26s var(--ease) both; }
.lsh-grip { align-self: center; width: 36px; height: 4px; border-radius: 999px; background: var(--line); }
.lsh-head { display: flex; align-items: center; gap: var(--s3); }
.lsh-head b { flex: 1 1 auto; font-size: var(--fs-body); }
.laysheet .laylist { max-height: none; flex: 1 1 auto; min-height: 0; }
.laysheet .layrow { min-height: 52px; }
.lsh-foot { text-align: center; }
@media (min-width: 921px) { .laysheet { left: auto; right: 16px; width: 380px; bottom: 16px; } .laysheet-back { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .laysheet { animation: none; } .layrow, .layd > summary::after { transition: none; } }

/* ---------- v45: Auto and Script tabs, an icon tab strip ---------- */
/* The studio's tabs: an icon over a short word. On a computer they wrap into two even rows (nothing to scroll to);
   on a phone they are one row that scrolls sideways with the open tab kept in the middle (studio.js). Only #ptabs:
   the carousel editor's tabs keep their own look. */
#s3 #ptabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px 0; padding: var(--s2) 0 0; overflow: visible; }
#s3 #ptabs button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-width: 0; padding: var(--s2) 2px var(--s2); font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1.15; border-radius: var(--r-control) var(--r-control) 0 0; letter-spacing: 0; flex: none; }
#s3 #ptabs button[hidden] { display: none; }
#s3 #ptabs .pti { display: grid; place-items: center; height: 22px; }
#s3 #ptabs .ptl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s3 #ptabs button.on { background: var(--accent-soft); }
#s3 #ptabs button:focus-visible { outline-offset: -2px; border-radius: var(--r-control); }
@media (max-width: 767px), (max-width: 920px) and (max-height: 520px) {
  #s3 #ptabs { display: flex; gap: 0; padding: var(--s1) 0 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  #s3 #ptabs button { flex: 0 0 auto; min-width: 60px; padding: var(--s2) 3px var(--s3); font-size: var(--fs-sm); scroll-snap-align: center; }   /* 5 and a bit: the cut-off one says there are more */
}

/* Auto: Make it for me, then one tile per thing it turns on, each with a switch */
.atiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.atile { position: relative; min-width: 0; border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: border-color .2s, background .2s, opacity .2s; }
.atile.wide { grid-column: 1 / -1; }
.atile.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.atile.busy { opacity: .7; }
.abody { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "ico nm" "sub sub"; gap: var(--s2) var(--s3); align-items: center; width: 100%; min-height: 84px; padding: var(--s4) var(--s3) var(--s4); border: 0; border-radius: inherit; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.abody:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.aico { grid-area: ico; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-control); background: var(--surface-2); color: var(--muted); transition: background .2s, color .2s; }
.atile.on .aico { background: var(--accent); color: var(--accent-ink); }
.atn { grid-area: nm; font-size: var(--fs-body); font-weight: var(--fw-strong); min-width: 0; }
.ats { grid-area: sub; font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; padding-right: var(--s7); min-height: 17px; }
.aarrow { position: absolute; top: 18px; right: 14px; color: var(--muted); }
.asw { position: absolute; bottom: 2px; right: 2px; display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer; }
.asw input { appearance: none; -webkit-appearance: none; margin: 0; width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; }
.asw input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.asw input:checked { background: var(--accent); }
.asw input:checked::after { transform: translateX(16px); }
.asw input:disabled { cursor: progress; }
.autotiles { border-bottom: 0; padding-bottom: var(--s2); }
#autoNote { margin: var(--s4) 2px 0; }
@media (max-width: 340px) { .atiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .asw input::after, .atile, .aico { transition: none; } }

/* Script: search on top, the lines, the actions under the picked line */
/* where the search stays pinned: just under the tab strip, wherever the strip itself is pinned (studio.js sets --ptabsH) */
#s3 { --scrTop: var(--ptabsH, 56px); }
.scrhead { position: sticky; top: var(--scrTop); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding: var(--s4) 0 var(--s2); background: var(--surface); }
.scrsearch { flex: 1 1 200px; display: flex; align-items: center; gap: var(--s3); min-height: 46px; padding: 0 var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--muted); }
.scrsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text); }
.scrsearch input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-body); -webkit-appearance: none; appearance: none; }
.scrsearch input:focus-visible { outline: none; }   /* the box around it shows the focus */
.scrsearch input::-webkit-search-cancel-button { display: none; }
.scrico { display: grid; place-items: center; flex: none; }
.scrbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-control); background: none; color: var(--text); cursor: pointer; }
.scrbtn:hover:not(:disabled) { background: var(--surface-2); }
.scrbtn:disabled { opacity: .35; cursor: default; }
.scrstep { flex: 1 0 100%; display: flex; align-items: center; justify-content: flex-end; gap: 2px; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -2px; }
.scrstep #scrCount { margin-right: auto; padding-left: var(--s1); }
.scrhint { margin: 0 0 var(--s3); }
.scrlist { display: flex; flex-direction: column; gap: 3px; padding-bottom: var(--s6); }
.scl { border: 1.5px solid transparent; border-radius: var(--r-control); content-visibility: auto; contain-intrinsic-size: auto 62px; scroll-margin-top: calc(var(--scrTop) + 76px); scroll-margin-bottom: 24px; transition: background .15s, border-color .15s; }
.scl.now { box-shadow: inset 3px 0 0 var(--accent); }
.scl.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); content-visibility: visible; }
.scl.cur:not(.on) { background: var(--surface-2); }
.sclr { display: flex; align-items: baseline; gap: var(--s3); min-height: 48px; padding: var(--s3) var(--s4); border-radius: var(--r-control); cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.sclr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.sclr:focus-visible { outline-offset: -3px; }
.sclt { flex: none; min-width: 34px; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--accent); font-variant-numeric: tabular-nums; }
.sclx { min-width: 0; font-size: var(--fs-body); line-height: 1.5; overflow-wrap: anywhere; }
.sclx .w { border-radius: 4px; padding: 0 1px; margin: 0 -1px; }
.sclx .w.hit { background: color-mix(in srgb, #f5c542 60%, transparent); color: var(--text); }
.sclx .w.ws { background: var(--accent); color: var(--accent-ink); }
.scrlist.holding .sclr { cursor: grabbing; }
.sclc { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s2); padding: 0 var(--s4) var(--s3) 66px; }
.sclc:empty { display: none; }
.scc { position: relative; display: inline-flex; align-items: center; gap: var(--s2); min-height: 28px; padding: 3px var(--s3) 3px var(--s2); border: 0; border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); cursor: pointer; }
.scl.on .scc { background: var(--surface); }
.scc::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--muted)); }
.scc::after { content: ''; position: absolute; inset: -8px -3px; }   /* a 44 px tall target without a tall chip */
.scc.slide { --k: #7857F3; } .scc.footage { --k: #0E9F7E; } .scc.zoom { --k: #E0803A; } .scc.text { --k: #1154F1; } .scc.layer { --k: #5B6B86; }
.scc.cont { padding: 3px var(--s2); opacity: .55; }
.scc:hover { box-shadow: 0 0 0 1.5px var(--k, var(--line)); }
.scgrp { padding: var(--s4) var(--s1) var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--muted); }
.scempty { padding: var(--s5) var(--s2); }
.scact { padding: 2px var(--s3) var(--s4); }
.scphrase { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 0 2px var(--s3); font-size: var(--fs-body); }
.scphrase > span { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; color: var(--muted); }
.scphrase q { color: var(--text); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; quotes: '\201C' '\201D'; }
.scbtns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
.scbtns .sca { grid-column: span 2; }
.scbtns[data-n="5"] .sca:nth-child(n+4) { grid-column: span 3; }
.scbtns[data-n="4"] .sca { grid-column: span 3; }
.sca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); min-height: 58px; padding: var(--s2) var(--s1); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1.15; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .12s var(--ease); }
.sca:hover { border-color: var(--accent); }
.sca:active { transform: scale(.97); }
.sca.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sca.ghost { background: none; }
.scpick { margin-top: var(--s3); }
.scpick:empty { display: none; margin: 0; }
.scpick .mini { margin: 0 0 var(--s3); }
.scpick .chips { gap: var(--s2); }
.scpick .chip { min-height: 44px; }
.scpick .chip i { font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--accent); margin-left: var(--s1); }
.scfoot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.scf { position: relative; display: block; min-height: 96px; padding: 0; border: 1.5px solid var(--line); border-radius: var(--r-control); overflow: hidden; background: var(--surface-2); cursor: pointer; }
.scf:hover { border-color: var(--accent); }
.scf img { display: block; width: 100%; height: 100%; min-height: 96px; object-fit: cover; }
.scf span { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s2) var(--s2); background: linear-gradient(transparent, rgba(5, 8, 20, .78)); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1.2; text-align: left; }
.scf em { display: block; font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: #ffd166; }
.scf.busy { opacity: .6; cursor: progress; }
@keyframes scflash { 0% { box-shadow: 0 0 0 0 var(--accent); } 35% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 75%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes frflash { 0% { outline: 0 solid var(--accent); } 30% { outline: 4px solid var(--accent); } 100% { outline: 0 solid transparent; } }
.scflash { animation: scflash 1.2s var(--ease) 1; position: relative; z-index: 4; }
.frflash { animation: frflash 1.1s var(--ease) 1; }
@media (pointer: coarse) { .sclr { min-height: 52px; } .sca { min-height: 60px; } }
@media (prefers-reduced-motion: reduce) { .scflash { animation: none; box-shadow: 0 0 0 3px var(--accent); } .frflash { animation: none; outline: 3px solid var(--accent); } .sca { transition: none; } }
@media (max-width: 767px), (max-width: 920px) and (max-height: 520px) {
  #s3 { --scrTop: calc(var(--pinTop, 0px) + var(--viewerH, 0px) + var(--ptabsH, 58px)); }
  #s3.typing { --scrTop: calc(var(--pinTop, 0px) + var(--ptabsH, 58px)); }
}
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) { #s3, #s3.typing { --scrTop: calc(var(--pinTop, 0px) + var(--ptabsH, 58px)); } }

/* ===== v46: caption styles v2 and the elements library (capui.js, elements.js) ===== */
.capswitch { margin-bottom: var(--s1); }
.capd { padding: var(--s2) 0 var(--s2); }
.capd .field { margin: var(--s3) 0; }
.capd .volrow { margin: var(--s2) 0; }
.capsave { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); align-items: center; }
.capsave input { flex: 1 1 140px; min-width: 0; font: inherit; font-size: var(--fs-body); padding: var(--s2) var(--s3); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.ctile .capx { position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; border: 0; background: rgba(8, 12, 24, .62); color: #fff; opacity: 0; transition: opacity .15s; padding: 0; }
.ctile:hover .capx, .ctile .capx:focus-visible { opacity: 1; }
@media (hover: none) { .ctile .capx { opacity: .85; } }
.wchips { gap: var(--s2); }
.wchip { position: relative; text-transform: none; }
.wchip.edited::after { content: ''; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.wchip.keyw { font-weight: var(--fw-strong); }
.wedit { margin-top: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); display: flex; flex-direction: column; gap: var(--s1); }
.wedit input[type=text] { width: 100%; font: inherit; font-size: var(--fs-body); font-weight: var(--fw-strong); padding: var(--s2) var(--s3); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.wedit .btn { align-self: flex-start; margin-top: var(--s2); }
.capwordhi { position: absolute; z-index: 4; pointer-events: none; border: 2px solid #ffd84a; border-radius: var(--r-control); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 12px rgba(255, 216, 74, .45); }
.capwordhi.hidden { display: none; }
.capnote { display: inline; }
.capnotepos { margin: var(--s3) 0 var(--s1); }
.capnotepos .chip { padding: var(--s1) var(--s3); font-size: var(--fs-sm); }
.eltiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eltile canvas { background: #0b0f15; }
.elEd { display: flex; flex-direction: column; gap: var(--s1); }
.elEd .field input[type=text] { width: 100%; font: inherit; font-size: var(--fs-body); padding: var(--s2) var(--s3); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.elEd .swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.elEd .swatch { width: 28px; height: 28px; }
.capd .swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.capd .swatch { width: 28px; height: 28px; }
.wedit .swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wedit .swatch { width: 28px; height: 28px; }
@media (max-width: 520px) { .eltiles, .captiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#musicPane .sec:first-child .subhead:first-child { margin-top: 0; }

/* ===== v47: simple by default (simple.js). Each tool: a few things up front, the rest under "More options" ===== */
.more { padding: var(--s1) 0 var(--s2); }
.more > summary { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s1) 2px; cursor: pointer; list-style: none; border-radius: var(--r-control); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary > span { flex: none; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--text); white-space: nowrap; }
.more > summary > small { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more > summary::after { content: ''; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.more > summary:hover > span { color: var(--accent); }
.more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.more[open] > summary { margin-bottom: 2px; }
.more > .sec:last-child { border-bottom: 0; }
.more > .sec:first-of-type { padding-top: var(--s3); }
.more > .field:first-of-type, .more > .volrow:first-of-type { margin-top: var(--s3); }
.more-titled > summary > span { font-size: var(--fs-body); }
.more-in { border-top: 1px dashed var(--line); margin-top: var(--s3); }
.more-in > summary { min-height: 40px; }
.more-in.hidden { display: none; }
.more > .layd { }
.allopt { margin: var(--s1) 0 0; padding: var(--s2) 0 0; }
.allopt .link { font-size: var(--fs-body); }
.audnote { margin: var(--s4) 0 0; }
.ghostchip { border-style: dashed; color: var(--muted); }
.vstart .vtnote { margin-top: var(--s3); }
/* the Voice / Music pair, once, in the Music tool */
#musicPane .mixbar { margin: 0 0 var(--s1); padding: 0; border: 0; background: none; flex-direction: column; flex-wrap: nowrap; gap: var(--s3); }
#musicPane .mixbar label { flex: none; font-size: var(--fs-body); }
#musicPane .mixbar .nm { min-width: 46px; }
#musicPane .mixbar input { min-width: 0; }
#musicPane .mixer h3 { margin-bottom: var(--s3); }
/* the one hint, once */
.firsthint { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s4) 0 2px; padding: var(--s3) var(--s3) var(--s3) var(--s4); border-radius: var(--r-card); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); }
.firsthint.hidden { display: none; }
.fhico { flex: none; width: 30px; height: 30px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.fhtxt { flex: 1 1 auto; min-width: 0; }
.fhtxt > b { display: block; font-size: var(--fs-body); margin-bottom: 2px; }
.fhtxt p { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text); }
.fhtxt .link { font-size: inherit; font-weight: var(--fw-strong); }
.fhx { flex: none; width: 36px; height: 36px; margin: -6px -4px 0 0; border: 0; border-radius: var(--r-control); background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
@media (pointer: coarse) { .fhx { width: 44px; height: 44px; margin: -8px -8px 0 0; } }
.fhx:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
/* one Make video; the other ways to save sit under More */
.exrow { display: flex; gap: var(--s3); align-items: stretch; }
.exrow #exportBtn { flex: 1 1 auto; }
.exmore { position: relative; flex: none; }
.exmore > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 100%; min-height: 44px; padding: 0 var(--s4); }
.exmore > summary::-webkit-details-marker { display: none; }
.exmore > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg) translate(-1px, -1px); opacity: .7; }
.exmore:not([open]) > summary::after { transform: rotate(45deg) translate(-2px, -2px); }
.exmore[open] > summary { border-color: var(--accent); color: var(--accent); }
.exmenu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 6; width: min(300px, calc(100vw - 32px)); display: grid; gap: var(--s1); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 12px 34px rgba(0, 0, 0, .22); }
.exmenu .btn { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; border: 0; background: none; padding: var(--s3) var(--s4); min-height: 44px; font-weight: var(--fw-strong); }
.exmenu .btn:hover:not(:disabled) { background: var(--surface-2); }
.exmenu .btn:disabled { opacity: .5; }
@media (max-width: 767px), (max-width: 920px) and (max-height: 520px) {
  /* a phone: the Make video button is on the transport; the bottom box keeps More and the result */
  .exrow { justify-content: flex-start; position: relative; }
  .exmore { position: static; }
  .exmenu { left: 0; right: 0; width: auto; }   /* the menu is as wide as the row, wherever More sits in it */
  .exrow #exportBtn { display: none; }
  .exmore > summary { min-height: 44px; }
  /* while something is picked on the video its bar takes the transport's place: Make video moves down here */
  #s3:has(#ovBar:not(.hidden)) .exrow #exportBtn { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .more > summary::after { transition: none; } }
.layrow[hidden], .segrow[hidden] { display: none !important; }
.listnone { margin: var(--s3) 0; }
#layFilter, #segFilter, #sndFilter { margin: var(--s3) 0; }

/* ===== v48: transitions, speed, color, fades (transitions.js, speed.js, grade.js, finish.js) ===== */
.track .tmk { position: absolute; z-index: 3; top: 2px; left: clamp(10px, calc(var(--x, 0) * 1%), calc(100% - 10px)); transform: translateX(-50%); width: 20px; height: 20px; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--text) 40%, transparent); background: rgba(8, 12, 24, .62); color: #fff; cursor: pointer; opacity: .85; touch-action: manipulation; }
.track .tmk:hover, .track .tmk:focus-visible { opacity: 1; border-color: #fff; }
.track .tmk.set { background: var(--accent); border-color: #fff; color: var(--accent-ink); opacity: 1; }
.track .tmk.cutk { opacity: .55; }
/* a finger: the marker is a 28 px target in the top half of the track, so the shot under it can still be tapped in its lower half */
@media (pointer: coarse) { .track .tmk { width: 28px; height: 28px; top: 0; } }
.tpop { position: fixed; z-index: 70; width: min(340px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 10px 34px rgba(8, 12, 30, .28); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.tpop .tph { display: flex; flex-direction: column; gap: 2px; }
.tpop .tph b { font-size: var(--fs-body); }
.tpop .tpc { max-height: 190px; overflow: auto; }
.tpop .tpc .chip { min-height: 36px; }
.tpop .tpmore { align-self: flex-start; }
.tpop.sheet { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-height: 60vh; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.tpop.sheet .tpc { max-height: 36vh; }
.tpop.sheet .tpc .chip { min-height: 44px; }
.transpick { margin-top: var(--s3); }
.spdbox { margin: var(--s3) 0 var(--s1); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.spdbox .lbl { margin-top: var(--s1); }
.lanesel .spdbox label.check { display: inline-flex; grid-template-columns: none; color: var(--text); font-size: var(--fs-body); }
.lanesel .spdbox label.check span { text-align: left; }
.lanesel .spdbox label.volrow { grid-template-columns: 120px 1fr 52px; }
.spdbox .check { margin: var(--s1) 0; }
.fadebox { display: flex; flex-direction: column; gap: var(--s1); margin: var(--s3) 0 0; }
.fadebox .volrow { margin: var(--s1) 0; }
.holdrow { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; margin-top: var(--s2); font-size: var(--fs-body); }
.holdrow span { flex: 1 1 auto; font-weight: var(--fw-strong); }
.gradetiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.gtile { position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: 0; border: 0; background: none; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); cursor: pointer; }
.gtile canvas { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-control); border: 1.5px solid var(--line); display: block; transition: border-color .2s, transform .2s var(--ease); background: var(--bg); }
.gtile:hover canvas { transform: translateY(-2px); }
.gtile.on canvas { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.gtile.on { color: var(--text); }
@media (pointer: coarse) { .gtile { min-height: 44px; } #s3 .spdbox .chips .chip, #s3 .fadebox .chips .chip, #s3 #bgSpeedBox .chips .chip, #s3 #holdBox .chips .chip, #s3 .transpick .chip, #s3 .holdrow .link { min-height: 44px; } #s3 .fadebox .check, #s3 .spdbox .check { min-height: 44px; } }
@media (max-width: 520px) { .gradetiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); } }
#gradeSec .mini { margin: 0 0 var(--s3); }
#gradeMore { margin-top: var(--s4); }
@media (prefers-reduced-motion: reduce) { .gtile canvas { transition: none; } .gtile:hover canvas { transform: none; } }

/* ===== v49: the phone shell (sheet.js). On a phone the studio is one fixed screen: a slim header, the preview, a thin
   timeline, a bottom sheet with three heights and a tool strip under the thumb. Everything here is keyed on #s3.sh,
   which only the phone layout gets, so a computer is untouched. The old pinned-preview rules above are overridden,
   not edited (the carousel editor still uses them). ===== */
.shhead, .shmore, .shmini, .ctxbar, .shic, .ptmore, .shtlx { display: none; }
html:has(#s3.sh:not(.hidden)), html:has(#s3.sh:not(.hidden)) body { overflow: hidden; overscroll-behavior: none; }
html:has(#s3.sh:not(.hidden)) .top { display: none; }
html:has(#s3.sh:not(.hidden)) #toasts { bottom: calc(var(--shBot, 56px) + 20px); }
#s3.sh, #s3.sh.typing { --scrTop: 46px; }
#s3.sh {
  position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); z-index: 40; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "head" "view" "dock" "sheet" "strip";
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: var(--bg); animation: none;
}
#s3.sh .studio, #s3.sh .stagecol { display: contents; }

/* header: back, undo, redo, Make video */
#s3.sh .s3head { grid-area: head; flex-wrap: nowrap; gap: 2px; padding: 2px var(--s2) 2px var(--s1); min-height: 48px; }
#s3.sh #backBtn { width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; flex: none; }
#s3.sh #backBtn span { display: none; }
#s3.sh .s3head .meta { flex: 1 1 auto; min-width: 0; margin: 0 var(--s2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
@media (max-width: 560px) { #s3.sh .s3head .meta { display: none; } }
#s3.sh .shic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--text); }
#s3.sh #shUndo { margin-left: auto; }
#s3.sh .shic.dim { opacity: .36; }
#s3.sh .shic:active { background: var(--surface-2); }
#s3.sh .s3head .makemini { display: inline-flex; flex: none; min-height: 44px; padding: 0 var(--s4); margin-left: var(--s2); border-radius: 999px; font-size: var(--fs-body); }

/* the preview: it keeps its shape and gets what the sheet leaves */
#s3.sh .viewer { grid-area: view; position: relative; top: auto; z-index: 1; min-height: 0; padding: 0 var(--s3); gap: var(--s1); background: none; box-shadow: none; clip-path: none; border: 0; justify-content: center; container-type: size; }
#s3.sh .frame canvas { max-width: 100%; max-height: calc(100cqh - 50px); transition: none; }
@supports not (height: 1cqh) { #s3.sh .frame canvas { max-height: 38svh; } }
#s3.sh .frame { border-radius: var(--r-card); box-shadow: none; }
#s3.sh .transport { flex: none; width: 100%; max-width: none; height: 46px; padding: 0 2px; gap: var(--s3); }
#s3.sh .playbtn { width: 44px; height: 44px; }
#s3.sh .viewer:has(#ovBar:not(.hidden)) .transport { display: flex; }
#s3.sh #ovBar { display: none !important; }
#s3.sh .frbtn { width: 44px; height: 44px; top: 8px; right: 8px; }   /* a column on the right edge: a narrow preview has room for it */
#s3.sh .frbtn.lay { top: 58px; right: 8px; }
#s3.sh .frbtn.remix { top: 108px; right: 8px; }
#s3.sh[data-det="tall"] .frbtn, #s3.sh.kb .frbtn, #s3.sh .frame:has(.analyzing:not(.hidden)) .frbtn { display: none; }
#s3.sh .analyzing { text-align: center; padding: var(--s4); }
#s3.sh .pane .btn { white-space: normal; }
/* fingers: every control in the sheet is 44 px or more (the older touch rules stop at 34 to 38) */
#s3.sh .chip, #s3.sh .chips.small .chip, #s3.sh .seg button, #s3.sh .btn, #s3.sh .btn.small { min-height: 44px; }
#s3.sh .swatch { width: 44px; height: 44px; }
#s3.sh .swatches { gap: 8px; }
#s3.sh .layd > summary { min-height: 44px; }
#s3.sh .pane .chmore, #s3.sh #laySeveral, #s3.sh .pane .ilink, #s3.sh .pane .allopt .link, #s3.sh .pane .fhtxt + * { min-height: 44px; display: inline-flex; align-items: center; }
#s3.sh .slswitch::before, #s3.sh .heart::before { content: ''; position: absolute; inset: -11px -5px; }
#s3.sh .heart { width: 32px; height: 32px; }
#s3.sh .lbtn { width: 44px; height: 44px; }
#s3.sh .scrbtn { min-width: 44px; min-height: 44px; }

/* the timeline: a thin strip; a tap opens the real lanes */
#s3.sh .shmini { grid-area: dock; display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px; padding: 0 var(--s4); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--muted); }
#s3.sh .shmini.hidden { display: none; }
#s3.sh .shml, #s3.sh .shmc { display: grid; place-items: center; flex: none; }
#s3.sh .shmb { position: relative; flex: 1 1 auto; height: 22px; border-radius: var(--r-control); background: var(--surface-2); overflow: hidden; }
#s3.sh .shmk { position: absolute; height: 4px; border-radius: 2px; }
#s3.sh .shmk.s, #s3.sh .shmk.c { top: 2px; background: var(--sm-blue); }
#s3.sh .shmk.c { background: color-mix(in srgb, var(--sm-blue) 40%, transparent); box-shadow: inset 0 0 0 1px var(--sm-blue); }
#s3.sh .shmk.z { top: 9px; background: #E0583A; }
#s3.sh .shmk.l { top: 9px; background: #A35BE8; }
#s3.sh .shmk.f { top: 16px; background: #0E9F7E; }
#s3.sh .shph { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); z-index: 2; }
#s3.sh #laneBox { grid-area: dock; display: none; width: 100%; max-width: none; margin: 0; padding: var(--s1) var(--s4) var(--s2); gap: var(--s2); border-radius: 0; border-width: 1px 0 0; box-shadow: none; max-height: 40vh; overflow-y: auto; }
#s3.sh.tl #laneBox { display: flex; }
#s3.sh.tl #laneBox:has(#lane.hidden), #s3.sh.tl #laneBox.lnone { display: none; }
#s3.sh.tl .shmini, #s3.sh[data-det="tall"] .shmini { display: none; }
#s3.sh #laneBox .lanehead { flex-wrap: nowrap; }
#s3.sh #laneBox #laneHint, #s3.sh #laneBox #keysBtn, #s3.sh #laneLegend, #s3.sh #laneBox .credits { display: none; }
#s3.sh .shtlx { display: inline-flex; min-height: 44px; margin-left: auto; }
#s3.sh #clearBroll { min-height: 44px; margin-left: 0; }

/* the sheet: three heights; its header is the handle */
#s3.sh .side {
  grid-area: sheet; display: block; position: relative; min-height: 0; height: var(--shH, 40vh); padding: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-card) var(--r-card) 0 0; border-width: 1px 0 0; box-shadow: 0 -10px 30px -12px rgba(8, 14, 30, .3); background: var(--surface);
}
#s3.sh .side { scroll-padding: 60px 0 14px; }   /* scrollIntoView keeps a control clear of the sticky header */
#s3.sh.snap .side { transition: height .3s var(--ease); }
#s3.sh .side .pane { min-height: 0; padding: 0 var(--s4) var(--s5); }
#s3.sh .side .sec { padding: var(--s3) 0; }
#s3.sh .side .sec h3 { margin: 0 0 var(--s3); }
#s3.sh .side .pane .mini { margin-top: var(--s2); font-size: var(--fs-sm); line-height: 1.4; }
#s3.sh .side .field { margin-bottom: var(--s3); gap: var(--s2); }
#s3.sh .side .pane > .sec:first-child { padding-top: 2px; }
#s3.sh .side .pane [id], #s3.sh #result, #s3.sh #exportBox { scroll-margin-top: 64px; }
#s3.sh .shhead { display: block; position: sticky; top: 0; z-index: 7; height: 46px; background: var(--surface); border-radius: var(--r-card) var(--r-card) 0 0; touch-action: none; -webkit-user-select: none; user-select: none; }
#s3.sh .shbar { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: grab; }
#s3.sh .shbar::before { content: ''; position: absolute; left: 50%; top: 6px; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: color-mix(in srgb, var(--text) 24%, transparent); }
#s3.sh .shbar:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
#s3.sh .shrow { position: absolute; left: 16px; right: 60px; top: 14px; height: 28px; display: flex; align-items: center; pointer-events: none; }
#s3.sh .shrow b { font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s3.sh .shx { position: absolute; right: 6px; top: 1px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); }
#s3.sh .shx:active { background: var(--surface-2); }
#s3.sh[data-det="tall"] .ftime { display: none; }
#s3.sh.dragging .side { transition: none; }
#s3.sh.dragging .shbar { cursor: grabbing; }
.shflash { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-control); animation: shflash 1.1s var(--ease) both; }
@keyframes shflash { 0% { outline-color: var(--accent); } 70% { outline-color: var(--accent); } 100% { outline-color: transparent; } }

/* the sheet's other views: More, and the video being made */
#s3.sh .shmore { padding: 0 var(--s4) var(--s5); }
#s3.sh[data-view="more"] .shmore { display: grid; gap: var(--s3); }
#s3.sh[data-view="more"] .side .pane, #s3.sh[data-view="export"] .side .pane, #s3.sh[data-view="export"] .shmore { display: none; }
#s3.sh .shmr { display: flex; align-items: center; gap: var(--s4); width: 100%; min-height: 60px; padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text); text-align: left; }
#s3.sh .shmr:active:not(:disabled) { background: var(--surface-2); }
#s3.sh .shmr:disabled { opacity: .45; }
#s3.sh .shmri { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); }
#s3.sh .shmrt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#s3.sh .shmrt b { font-size: var(--fs-body); font-weight: var(--fw-strong); }
#s3.sh .shmrt small { font-size: var(--fs-sm); color: var(--muted); }
#s3.sh .shmr > .ico:last-child { color: var(--muted); }
#s3.sh #exportBox { display: none; position: static; padding: var(--s1) var(--s4) var(--s5); border: 0; box-shadow: none; background: none; }
#s3.sh[data-view="export"] #exportBox { display: flex; }
#s3.sh #exportBox .exrow { display: none; }
#s3.sh #resVideo { max-height: 28vh; }   /* v54: the shapes and the other saves sit right under Save */

/* the tool strip, under the thumb */
#s3.sh #ptabs { grid-area: strip; position: relative; top: auto; z-index: 8; display: flex; gap: 2px; margin: 0; padding: 3px 6px calc(3px + env(safe-area-inset-bottom)); overflow-x: auto; overflow-y: hidden; background: var(--surface); border: 0; border-top: 1px solid var(--line); scroll-snap-type: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#s3.sh #ptabs::-webkit-scrollbar { display: none; }
#s3.sh #ptabs button { flex: 0 0 auto; min-width: 72px; height: 48px; margin: 0; padding: var(--s2) var(--s2); border: 0; border-radius: var(--r-control); font-size: var(--fs-sm); justify-content: center; scroll-snap-align: none; }
#s3.sh #ptabs button.on { background: var(--accent-soft); color: var(--accent); border: 0; }
#s3.sh #ptabs [data-p="audio"], #s3.sh #ptabs [data-p="saved"] { display: none; }
#s3.sh #ptabs .ptmore { display: flex; }
#s3.sh #ptabs .ptmore.on { background: var(--accent-soft); color: var(--accent); }
#s3.sh #ptabs button:active { transform: scale(.96); }

/* the bar that replaces the strip while something is picked */
#s3.sh .ctxbar { grid-area: strip; z-index: 8; align-items: stretch; gap: var(--s2); padding: 3px 6px calc(3px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
#s3.sh.ctx .ctxbar { display: flex; animation: shup .2s var(--ease) both; }
#s3.sh.ctx #ptabs { display: none; }
#s3.sh .ctxl { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#s3.sh .ctxl::-webkit-scrollbar { display: none; }
#s3.sh .ctxr { display: flex; flex: none; gap: 2px; }
#s3.sh .ctxr .ctxchip { flex: none; min-width: 60px; }
#s3.sh .ctxchip { flex: 1 0 auto; min-width: 62px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: var(--s1) var(--s2); border: 0; border-radius: var(--r-control); background: none; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
#s3.sh .ctxchip:active { background: var(--surface-2); transform: scale(.96); }
#s3.sh .ctxchip.del { color: var(--danger); }
#s3.sh .ctxi { display: grid; place-items: center; height: 22px; }
#s3.sh .ctxdone { flex: none; min-width: 72px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: var(--r-control); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
#s3.sh .ctxdone:active { transform: scale(.96); filter: brightness(.95); }
@keyframes shup { from { opacity: 0; transform: translateY(8px); } }
/* typing: the keyboard takes the lower half. The strip, the bar and the thin timeline step aside; the sheet goes tall */
#s3.sh.kb #ptabs, #s3.sh.kb .ctxbar, #s3.sh.kb .shmini { display: none; }

/* a phone on its side: preview left, the sheet on the right, the strip a rail on the left */
#s3.sh.land { grid-template-columns: 84px minmax(0, 1fr) min(320px, 46vw); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head head head" "strip view sheet" "strip dock sheet"; }
#s3.sh.land .s3head { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
#s3.sh.land .side { height: auto; border-radius: var(--r-card) 0 0 0; border-width: 1px 0 0 1px; box-shadow: none; }
#s3.sh.land .shhead { height: 46px; border-radius: var(--r-card) 0 0 0; touch-action: auto; }
#s3.sh.land .shbar { cursor: default; }
#s3.sh.land .shbar::before, #s3.sh.land .shx { display: none; }
#s3.sh.land .shrow { top: 9px; right: 16px; }
#s3.sh.land #ptabs { flex-direction: column; gap: 2px; overflow-x: hidden; overflow-y: auto; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-top: 0; border-right: 1px solid var(--line); }
#s3.sh.land #ptabs button { width: 100%; min-width: 0; height: 54px; padding: var(--s2) 2px; }
#s3.sh.land .ctxbar { flex-direction: column; border-top: 0; border-right: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
#s3.sh.land .ctxl { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
#s3.sh.land .ctxr { flex-direction: column; }
#s3.sh.land .ctxchip, #s3.sh.land .ctxdone { flex: none; width: 100%; min-width: 0; height: 50px; }
#s3.sh.land .ctxr .ctxchip { min-width: 0; }
#s3.sh.land .viewer { padding: 0 var(--s2); }
#s3.sh.land #resVideo { max-height: 60vh; }
@media (prefers-reduced-motion: reduce) {
  #s3.sh.snap .side { transition: none; }
  #s3.sh.ctx .ctxbar, .shflash { animation: none; }
  .shflash { outline-color: var(--accent); }
}

/* ===== v50: remix, templates, hook and chapters, a week of content ===== */
/* the Remix button under Make it for me, and the one on the preview */
.cremix { width: 100%; justify-content: center; margin-top: var(--s3); padding: var(--s3) var(--s4); font-size: var(--fs-body); }
.cremix svg { color: var(--accent); }
.frbtn.remix { top: 52px; right: 10px; }
.frbtn.remix[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); opacity: 1; }

/* six live tiles: two columns beside the preview, a swipeable row on a phone */
.rxpanel { border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--r-card); padding: var(--s4); background: var(--surface); }
.rxhead { display: flex; align-items: baseline; gap: var(--s3); }
.rxhead h3 { margin: 0; font-size: var(--fs-body); flex: 1 1 auto; }
.rxgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: var(--s3) 0; }
.rxtile { position: relative; min-width: 0; }
.rxtile.busy { opacity: .6; pointer-events: none; }
.rxmain { display: flex; flex-direction: column; gap: var(--s2); width: 100%; padding: var(--s2); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s var(--ease); }
.rxmain:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
.rxcv { display: block; width: 100%; height: auto; border-radius: var(--r-control); background: #1b2230; }
.rxnm { font-size: var(--fs-body); font-weight: var(--fw-strong); padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rxsub { font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); padding: 0 3px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rxtile .heart.ontile { top: 9px; right: 9px; left: auto; opacity: .9; width: 32px; height: 32px; }
.rxfoot { display: flex; justify-content: center; }
@media (max-width: 700px) {
  .rxgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s3); margin: 10px -12px; padding: 2px 14px 9.5px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rxgrid::-webkit-scrollbar { display: none; }
  .rxtile { flex: 0 0 min(46%, 190px); scroll-snap-align: center; }
}

/* templates */
.dtsec .dthead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.dtsec .dthead h3 { margin: 0; }
.dtgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.dttile { position: relative; min-width: 0; }
.dttile.busy { opacity: .6; pointer-events: none; }
.dtmain { display: flex; flex-direction: column; gap: var(--s2); width: 100%; padding: var(--s2); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s var(--ease); }
.dtmain:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
.dttile.def .dtmain { border-color: var(--accent); }
.dtcv { display: block; width: 100%; height: auto; border-radius: var(--r-control); background: #1b2230; }
.dtnm { font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1.25; padding: 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dtsub { font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); padding: 0 3px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dtname { margin: 0 3px; width: calc(100% - 6px); padding: 3px var(--s2); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-strong); border: 1.5px solid var(--accent); border-radius: var(--r-control); background: var(--surface); color: var(--text); }
.dttile .heart.ontile { top: 9px; right: 9px; left: auto; opacity: .85; width: 32px; height: 32px; }
.dtact { position: absolute; left: 9px; top: 9px; display: flex; gap: var(--s1); opacity: 0; transition: opacity .15s; }
.dttile:hover .dtact, .dttile:focus-within .dtact { opacity: 1; }
@media (hover: none) { .dtact { opacity: 1; } }
.dtx { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; padding: 0; cursor: pointer; }
.dtx.on { color: #ffd166; }
.dtfoot { margin-top: var(--s3); }
.dtfoot .btn { width: 100%; justify-content: center; }

/* hook and chapters */
.hkcard { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); margin-top: var(--s3); }
.hkcard .hkico { flex: none; width: 34px; height: 34px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.hkcard .hktxt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--s1); }
.hkcard b { font-size: var(--fs-body); }
.hkcard .hkline { font-size: var(--fs-body); line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.hkcard .hkrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.hkcard .hkrow .btn { padding: var(--s2) var(--s4); font-size: var(--fs-body); }
.hkcard.hidden { display: none; }

/* a week of content */
.bwbtn { width: 100%; justify-content: center; margin-top: var(--s3); padding: var(--s3) var(--s4); font-size: var(--fs-body); }
.bwsheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(9, 20, 35, .5); }
.bwsheet.hidden { display: none; }
.bwbox { width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: var(--shadow); overflow: hidden; }
@media (min-width: 700px) { .bwsheet { align-items: center; } .bwbox { border-radius: var(--r-card); max-height: 86vh; } }
.bwhead { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4) var(--s2); }
.bwhead h2 { margin: 0; font-size: var(--fs-head); flex: 1 1 auto; }
.bwx { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.bwnote { margin: 0; padding: 0 var(--s4) var(--s2); }
.bwlist { overflow-y: auto; padding: var(--s1) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.bwrow { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); min-height: 64px; }
.bwrow.off { opacity: .55; }
.bwrow.done { border-color: color-mix(in srgb, var(--success) 60%, var(--line)); }
.bwrow.err { border-color: var(--danger); }
.bwrow .bwchk { flex: none; width: 24px; height: 24px; accent-color: var(--accent); }
.bwrow canvas { flex: none; width: 54px; height: auto; border-radius: var(--r-control); background: #1b2230; }
.bwrow .bwt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.bwrow .bwt b { font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bwrow .bwt small { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bwrow .bws { flex: none; font-size: var(--fs-sm); color: var(--muted); }
.bwtool { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) var(--s4); flex-wrap: wrap; }
.bwtool select { flex: 1 1 160px; min-width: 0; padding: var(--s2) var(--s3); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body); }
.bwfoot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); }
.bwbar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bwbar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.bwfoot .row { display: flex; gap: var(--s3); }
.bwfoot .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .rxmain, .dtmain { transition: none; } .bwbar > i { transition: none; } }
/* a finger: every new control is 44 px or more */
@media (pointer: coarse) {
  .dtx { width: 44px; height: 44px; }
  .dtact { top: 4px; left: 4px; gap: 2px; }
  #s3 .rxtile .heart.ontile, #s3 .dttile .heart.ontile { width: 44px; height: 44px; top: 4px; right: 4px; }
  #s3 .rxtile .heart.ontile svg, #s3 .dttile .heart.ontile svg { width: 18px; height: 18px; }
  .hkcard .hkrow .btn, .rxagain, .dtfoot .btn, .cremix, .bwbtn { min-height: 44px; }
  .hkcard .hkrow .link { min-height: 44px; display: inline-flex; align-items: center; }
  .rxhead .rxclose { min-height: 44px; padding: 0 var(--s2); }
  .bwrow { min-height: 72px; cursor: pointer; }
  .bwrow .bwchk { width: 28px; height: 28px; }
  .bwrow .btn.small { min-height: 44px; }
  .bwtool select { min-height: 44px; }
  .dtname { min-height: 40px; }
}
/* ===== end v50 ===== */

/* ===== v51: the desktop shell (shell.js), Phase 4 of docs/PLAN-EDITOR-EXPERIENCE.md. On a computer the studio is one fixed
   screen: a tool rail, one drawer, the stage, a right column (Script or Selected) and a docked timeline. Everything is keyed
   on #s3.dk, which only a computer (980 px and wider, and not the phone shell) gets; ?shell=classic leaves today's layout. ===== */
.dkic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--r-control); background: none; color: var(--text); cursor: pointer; }
.dkic:hover:not(:disabled) { background: var(--surface-2); }
.dkic.dim { opacity: .4; }
.dkbacklink { margin-left: auto; }
.dkbacklink[hidden] { display: none; }

html:has(#s3.dk:not(.hidden)), html:has(#s3.dk:not(.hidden)) body { overflow: hidden; }
html:has(#s3.dk:not(.hidden)) .top { display: none; }
#s3.dk {
  position: fixed; inset: 0; z-index: 30; margin: 0; padding: 0; overflow: hidden; animation: none;
  display: grid; grid-template-columns: 80px 340px minmax(0, 1fr) 0; grid-template-rows: 56px minmax(0, 1fr) var(--dkTl, 212px);
  grid-template-areas: "head head head head" "rail drawer stage right" "rail tl tl right";
  background: var(--bg); --scrTop: 0px;
}
#s3.dk.dkw { grid-template-columns: 80px 340px minmax(0, 1fr) clamp(320px, 26vw, 360px); }
#s3.dk.dkempty { --dkTl: 152px; }
#s3.dk.dktlc { --dkTl: 36px; }
#s3.dk .studio, #s3.dk .stagecol { display: contents; }
@media (min-width: 1100px) {
  /* v74 (C1 Calm): one rail. The app's own sidebar is not shown while the studio is open: its places are in the account menu
     (shell.js CC.railItems) and in the palette, so the tool rail is the only rail. */
  body.shell #s3.dk { left: 0; }
  html:has(#s3.dk:not(.hidden)) body.shell { padding-left: 0; }
  html:has(#s3.dk:not(.hidden)) body.shell .appside { display: none; }
}

/* header (v74): back, the project's name, undo, redo, Make video, the account menu. The shape is a chip on the preview, the time range is in the timeline's header */
#s3.dk .s3head { grid-area: head; display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s2); height: 56px; padding: 0 var(--s4) 0 var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); }
#s3.dk #backBtn { flex: none; }
#s3.dk .s3head .meta { flex: 0 1 auto; min-width: 0; margin-left: var(--s2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); }
#s3.dk .dkspace { flex: 1 1 0; min-width: 8px; }
#s3.dk .dkshape { flex: none; gap: var(--s2); font-variant-numeric: tabular-nums; margin: 0 var(--s1); }
#s3.dk .s3head .topright { display: flex; align-items: center; gap: var(--s3); flex: none; margin-left: var(--s1); }
#s3.dk .s3head .topright .installbtn { display: none; }
.dkmake { display: flex; flex: none; margin-left: var(--s3); }
.dkmake .dkmakeb { border-radius: var(--r-control) 0 0 var(--r-control); padding: 0 var(--s4); min-height: 38px; gap: var(--s3); font-size: var(--fs-body); }
.dkmake .dkmakec { border-radius: 0 var(--r-control) var(--r-control) 0; padding: 0 var(--s3); min-height: 38px; border-left: 1px solid color-mix(in srgb, var(--accent-ink) 30%, transparent); }
@media (max-width: 1279px) { #s3.dk .s3head .meta { display: none; } }

/* the rail: the same tools as the phone strip, an icon over a word, a vertical list */
#s3.dk #ptabs {
  grid-area: rail; position: relative; top: auto; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--s2) var(--s2); overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  background: var(--surface); border: 0; border-right: 1px solid var(--line); z-index: 2;
}
#s3.dk #ptabs::-webkit-scrollbar { display: none; }
#s3.dk #ptabs button, #s3.dk #ptabs .dkmore {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); width: 100%; height: 62px; min-width: 0; margin: 0; padding: var(--s2) 2px;
  border: 0; border-radius: var(--r-control); background: none; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; cursor: pointer; transition: background .15s, color .15s;
}
#s3.dk #ptabs button:hover, #s3.dk #ptabs .dkmore:hover { background: var(--surface-2); color: var(--text); }
#s3.dk #ptabs button.on, #s3.dk #ptabs .dkmore.on { background: var(--accent-soft); color: var(--accent); }
#s3.dk #ptabs button.on::before { content: ''; position: absolute; left: -6px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
#s3.dk #ptabs button.dkskip, #s3.dk #ptabs button[hidden] { display: none; }
#s3.dk #ptabs .dkmore { margin-top: auto; }
#s3.dk #ptabs .pti { display: grid; place-items: center; height: 22px; }
#s3.dk #ptabs .ptl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s3.dk #ptabs .ptmore { display: none; }

/* the drawer: one tool, its simple view; More options folds stay */
#s3.dk .side {
  grid-area: drawer; display: block; position: relative; min-width: 0; min-height: 0; padding: 0 var(--s4) var(--s6); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; background: var(--surface);
}
#s3.dk .side .pane { min-height: 0; }
#s3.dk .dkdhead { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; height: 52px; margin: 0 -16px 4px; padding: 0 19px; background: var(--surface); border-bottom: 1px solid var(--line); }
#s3.dk .dkdhead b { font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.01em; }
#s3.dk .side .pane .sec { padding: var(--s4) 0; }
#s3.dk .side .pane .btn, #s3.dk .dkpanel .btn { white-space: normal; text-align: center; }
#s3.dk .side .pane .btn.small { text-align: left; }
#s3.dk .side .pane [id] { scroll-margin-top: 64px; }
#s3.dk #exportBtn, #s3.dk #exMore { display: none; }
#s3.dk #aspectChips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the stage: the preview, its play row, the voice and music mini-mix; the bar floats on what is picked */
#s3.dk #viewer { grid-area: stage; position: relative; min-width: 0; min-height: 0; padding: var(--s4) var(--s5) var(--s3); gap: var(--s3); justify-content: center; container-type: size; background: color-mix(in srgb, var(--surface-2) 55%, var(--bg)); }
#s3.dk #frame #prev { max-height: calc(100cqh - 112px); max-width: 100%; }
@supports not (height: 1cqh) { #s3.dk #frame #prev { max-height: calc(100dvh - 56px - var(--dkTl, 212px) - 150px); } }
#s3.dk .frame { box-shadow: var(--shadow-sm); }
#s3.dk .transport { flex: none; max-width: 560px; }
#s3.dk #ovBar { display: none !important; }
#s3.dk .viewer:has(#ovBar:not(.hidden)) .transport { display: flex; }
#s3.dk #viewer .mixbar { flex: none; width: 100%; max-width: 560px; margin: 0; padding: var(--s1) var(--s4); flex-wrap: nowrap; gap: var(--s5); background: var(--surface); }
#s3.dk #viewer .mixbar label { flex: 1 1 0; }
#s3.dk .frbtn { width: 36px; height: 36px; }
#s3.dk .dkctx {
  position: absolute; z-index: 8; display: flex; align-items: center; gap: 2px; width: max-content; max-width: calc(100% - 12px); padding: var(--s1); border-radius: var(--r-control);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 8px 24px rgba(8, 14, 30, .22);
}
#s3.dk .dkctx.hidden { display: none; }
#s3.dk .dkctxb { display: inline-flex; align-items: center; gap: var(--s2); height: 34px; padding: 0 var(--s3); border: 0; border-radius: var(--r-control); background: none; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-strong); white-space: nowrap; cursor: pointer; }
#s3.dk .dkctxb:hover { background: var(--surface-2); }
#s3.dk .dkctxb.del { color: var(--danger); }
#s3.dk .dkctxb.done { color: var(--accent); }
#s3.dk .dkctxb .ico { flex: none; }
/* a narrow stage: icons only (each has its name as a tooltip and for screen readers) */
@container (max-width: 640px) { #s3.dk .dkctxb span { display: none; } #s3.dk .dkctxb { width: 36px; padding: 0; justify-content: center; } }

/* the right column: Script | Selected */
#s3.dk .dkright { grid-area: right; display: none; min-width: 0; min-height: 0; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); }
#s3.dk.dkw .dkright { display: flex; z-index: 2; }
.dktabs { display: flex; gap: var(--s1); flex: none; margin: var(--s4) var(--s4) 0; padding: 3px; border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--line); }
.dktabs button { position: relative; flex: 1 1 0; height: 34px; border: 0; border-radius: var(--r-control); background: none; color: var(--muted); font-size: var(--fs-body); font-weight: var(--fw-strong); cursor: pointer; }
.dktabs button[aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(8, 14, 30, .16); }
.dktabs .dkdot { display: none; position: absolute; top: 7px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.dktabs button.has .dkdot { display: block; }
.dkchip { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex: none; margin: var(--s3) var(--s4) 0; padding: var(--s2) var(--s4); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-body); font-weight: var(--fw-strong); cursor: pointer; }
.dkchip b { font-weight: var(--fw-strong); }
.dkchip.hidden { display: none; }
.dkpanels { position: relative; flex: 1 1 auto; min-height: 0; }
.dkpanel { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; padding: 0 var(--s4) var(--s5); overscroll-behavior: contain; visibility: hidden; }
.dkpanel .pane { min-height: 0; padding: 0; }
#s3.dk[data-right="script"] #dkScript, #s3.dk[data-right="sel"] #dkSel { visibility: visible; }
#s3.dk:not(.dkw) .dkpanel#dkSel { visibility: visible; }
#s3.dk .dkpanel .scrhead { top: 0; margin: 0 -14px; padding: 14px 16.5px 9.5px; }
.dkselhead { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) 0 var(--s2); }
.dkselk { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.01em; }
.dkselx { display: none; }
.dkselnone { margin: var(--s2) 0 0; }
.dkselacts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.dkselacts .dkdel { color: var(--danger); }
.dkselbody .layinsp { margin-top: var(--s1); }

/* 980 to 1279: no right column. Script is a rail item (it shares the drawer); Selected is a popover on the stage */
#s3.dk:not(.dkw) .dkright { position: absolute; display: none; grid-area: stage; align-self: start; justify-self: end; z-index: 9; width: 340px; max-height: calc(100% - 24px); margin: var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 16px 40px rgba(8, 14, 30, .28); overflow: hidden; }
#s3.dk.dkselon:not(.dkw) .dkright { display: flex; }
#s3.dk:not(.dkw) .dktabs, #s3.dk:not(.dkw) #dkScript, #s3.dk:not(.dkw) .dkchip { display: none; }
#s3.dk:not(.dkw) { --scrTop: 52px; }   /* Script in the drawer: its search sticks under the drawer's title */
/* with room for it, the popover sits beside the preview, not over it */
@media (min-width: 1060px) { #s3.dk.dkselon:not(.dkw) #viewer { padding-right: 429.5px; } }
#s3.dk:not(.dkw) .dkpanels { position: static; overflow-y: auto; }
#s3.dk:not(.dkw) .dkpanel#dkSel { position: static; padding: 0 var(--s4) var(--s4); max-height: calc(100vh - 220px); overflow-y: auto; }
#s3.dk:not(.dkw) .dkselx { display: grid; }

/* the timeline: docked under the drawer and the stage, collapsible to a thin scrub bar */
#s3.dk #laneBox {
  grid-area: tl; display: flex; flex-direction: column; gap: var(--s2); width: auto; max-width: none; min-height: 0; margin: 0; padding: var(--s2) var(--s4) var(--s2); border: 0; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: auto; background: var(--surface);
}
#s3.dk.dktlc #laneBox { display: none; }
#s3.dk #laneBox .lanehead { flex: none; flex-wrap: nowrap; gap: var(--s3); min-height: 28px; }
#s3.dk #laneBox .lanehead > div:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s3.dk #laneBox #laneHint { overflow: hidden; text-overflow: ellipsis; }
#s3.dk .dktlx { flex: none; }
#s3.dk #laneBox .track { height: 40px; }
#s3.dk #laneBox #laneLegend { margin: 0; }
#s3.dk #laneBox #credits { display: none; }
.dkmini { grid-area: tl; display: flex; align-items: center; gap: var(--s4); min-width: 0; height: 36px; padding: 0 var(--s4); border-top: 1px solid var(--line); background: var(--surface); }
.dkmini.hidden { display: none; }
.dkmx { display: inline-flex; align-items: center; gap: var(--s3); flex: none; height: 30px; padding: 0 var(--s3); border: 0; border-radius: var(--r-control); background: none; color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-strong); cursor: pointer; }
.dkmx:hover { background: var(--surface-2); }
.dkmb { position: relative; flex: 1 1 auto; height: 22px; border-radius: var(--r-control); background: var(--surface-2); overflow: hidden; cursor: pointer; touch-action: none; }
.dkmb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dkmk { position: absolute; height: 4px; border-radius: 2px; }
.dkmk.s, .dkmk.c { top: 2px; background: var(--sm-blue); }
.dkmk.c { background: color-mix(in srgb, var(--sm-blue) 40%, transparent); box-shadow: inset 0 0 0 1px var(--sm-blue); }
.dkmk.z { top: 9px; background: #E0583A; }
.dkmk.l { top: 9px; background: #A35BE8; }
.dkmk.f { top: 16px; background: #0E9F7E; }
.dkph { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); z-index: 2; pointer-events: none; }
.dkmt { flex: none; min-width: 84px; text-align: right; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* Make video: progress, an error, or the finished video, in a card at the top right (the old buttons under every panel are gone) */
#s3.dk .exportbox.dkexp { display: none; }
#s3.dk.dkexpon .exportbox.dkexp {
  display: flex; position: absolute; z-index: 20; top: 62px; right: 12px; bottom: auto; width: 360px; max-height: calc(100% - 80px); overflow-y: auto; padding: var(--s4) var(--s4) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 16px 44px rgba(8, 14, 30, .3);
}
#s3.dk .dkexp .exrow { display: none; }
#s3.dk .dkexp .dkexpx { position: absolute; top: 6px; right: 6px; }
#s3.dk .dkexp #resVideo { max-height: 300px; }

/* the stage is not squeezed to nothing on a short window: the timeline starts as the thin bar there (shell.js) */
@media (prefers-reduced-motion: reduce) { html:has(#s3.dk:not(.hidden)) body.shell .appside { transition: none; } }

/* focus and touch: a computer with a touch screen still gets 44 px targets */
#s3.dk :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (pointer: coarse) {
  #s3.dk .dkic, #s3.dk .dkctxb, #s3.dk .dktabs button { min-width: 44px; min-height: 44px; }
  #s3.dk .dkmini, #s3.dk .dkmb { min-height: 44px; }
}

/* the command palette (Ctrl or Cmd K) */
.cmdk { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: min(14vh, 120px) 16px 16px; background: rgba(8, 12, 28, .46); }
.cmdk.hidden { display: none; }
.cmdkbox { width: min(620px, 100%); max-height: min(70vh, 560px); display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(2, 6, 20, .5); overflow: hidden; }
.cmdkq { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); height: 56px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cmdkq input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-head); }
.cmdkq input:focus { box-shadow: none; }
.cmdkq kbd, .cmdkfoot kbd, .cmdkrow kbd { font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); padding: 1px var(--s2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-control); background: var(--surface-2); color: var(--muted); }
.cmdklist { flex: 1 1 auto; min-height: 60px; overflow-y: auto; padding: var(--s2) var(--s2) var(--s2); }
.cmdkgrp { padding: var(--s3) var(--s3) var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--muted); }
.cmdkrow { display: flex; align-items: center; gap: var(--s4); min-height: 46px; padding: var(--s2) var(--s3); border-radius: var(--r-control); cursor: pointer; }
.cmdkrow.on { background: var(--accent-soft); }
.cmdkrow .cmdki { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-control); background: var(--surface-2); color: var(--muted); }
.cmdkrow.on .cmdki { background: var(--accent); color: var(--accent-ink); }
.cmdkt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cmdkt b { font-size: var(--fs-body); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdkt small { font-size: var(--fs-sm); color: var(--muted); }
.cmdknone { margin: 0; padding: var(--s5) var(--s4); text-align: center; color: var(--muted); font-size: var(--fs-body); }
.cmdkfoot { display: flex; gap: var(--s5); padding: var(--s2) var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
/* ===== end v51 ===== */

/* ===== v52: Script v2 (emphasis, sounds, fixed words, replace, pauses), Browse looks, the finish line ===== */
/* Script: marks on words, the second row of actions, replace, pauses */
.sclx .w.emph { font-weight: var(--fw-strong); }
.sclx .w.fixed { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.scc.sound { --k: #C0398B; }
.scbtns2 { margin-top: var(--s3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scbtns2[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scbtns2 .sca { grid-column: span 1 !important; min-height: 54px; }
.sca.lit { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.scnote { margin: var(--s3) 2px 0; }
.scfix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.scfix input { flex: 1 1 160px; min-width: 0; min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-head); }
.scfix input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.scfixw .chip.edited { border-color: var(--accent); }
.scrrep { flex: 1 0 100%; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 2px 2px; }
.scrrep .mini { margin: 0; }
.scrrepr { display: flex; gap: var(--s3); }
.scrrepr input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-head); }
.scrrepr input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.scrrepr .btn { min-height: 44px; flex: none; }
.scrtools { margin: -2px 0 8px; }
.scrpb { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; }
.scpauses { margin-top: var(--s2); padding: var(--s3) var(--s4) var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); }
.scpauses .mini { margin: 0 0 var(--s3); }
.scpl { display: flex; flex-direction: column; gap: var(--s1); max-height: 240px; overflow-y: auto; }
.scp { display: flex; align-items: baseline; gap: var(--s3); min-height: 44px; padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body); text-align: left; cursor: pointer; }
.scp b { flex: none; min-width: 40px; color: var(--accent); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.scp span { color: var(--muted); }
.scp:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.scpt { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s3); margin-top: var(--s3); }
.scpt .mini { margin: 0; }
#s3.dk .dkpanel .scrrep { padding-top: var(--s2); }

/* Look: the way into the feed; folds that now hold the Add, hook and filter parts */
.lkbrowse { padding-bottom: var(--s1); }
.lkbtn { display: flex; align-items: center; gap: var(--s4); width: 100%; min-height: 56px; padding: var(--s2) var(--s4); text-align: left; justify-content: flex-start; border-radius: var(--r-card); }
.lkbtn .lkbt { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.lkbtn .lkbt b { font-size: var(--fs-body); }
.lkbtn .lkbt small { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--muted); white-space: normal; }
.more.hasnote > summary > small { color: var(--accent); font-weight: var(--fw-strong); }
.more > .hkwrap, .more > .cremix, .more > .bwbtn { margin-top: var(--s3); }
.more > .cremix, .more > .bwbtn { display: flex; width: 100%; justify-content: center; }
.more > #gradeSec { padding-top: var(--s3); }

/* the feed: dark chrome in light and dark mode alike, the pictures are the content */
html.lkon { overflow: hidden; }
.lkfeed { position: fixed; inset: 0; z-index: 2400; display: flex; flex-direction: column; background: #07091a; color: #fff; animation: lkin .2s var(--ease) 1; }
.lkfeed.lkout { opacity: 0; transition: opacity .15s; pointer-events: none; }
@keyframes lkin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lkbar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 12px 10px; pointer-events: none; }
.lkbar > * { pointer-events: auto; }
.lkic { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(8, 12, 30, .62); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lkic:focus-visible, .lkheart:focus-visible, .lkuse:focus-visible { outline: 2px solid #92D9FF; outline-offset: 2px; }
.lkpos { padding: var(--s2) var(--s4); border-radius: 999px; background: rgba(8, 12, 30, .62); font-size: var(--fs-body); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.lkbody { flex: 1 1 auto; min-height: 0; display: flex; }
.lkscroll { flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lkscroll::-webkit-scrollbar { display: none; }
.lkc { position: relative; height: 100%; min-height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; background: #0b1026; padding-top: max(60px, calc(env(safe-area-inset-top) + 56px)); }
.lkstage { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; background: #000; overflow: hidden; }
.lkcv, .lklive { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.lkcv { opacity: 0; transition: opacity .2s; }
.lkc.lkready .lkcv { opacity: 1; }
.lklive { opacity: 0; }
.lklive.rdy { opacity: 1; transition: opacity .12s; }
.lkpaused .lkstage::after { content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(8, 12, 30, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 30px no-repeat; }
.lkmeta { flex: none; min-height: 104px; padding: 12px 140px max(16px, env(safe-area-inset-bottom)) 16px; display: flex; flex-direction: column; gap: 2px; background: #07091a; pointer-events: none; }
.lkname { font-size: var(--fs-head); font-weight: var(--fw-strong); line-height: 1.25; }
.lksub { font-size: var(--fs-body); color: rgba(255, 255, 255, .82); line-height: 1.35; }
.lkact { position: absolute; right: 10px; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.lkheart { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(8, 12, 30, .62); color: #fff; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .12s var(--ease), color .15s; }
.lkheart:active { transform: scale(.92); }
.lkheart.on { color: #ff6b7e; }
.lkuse { min-height: 52px; padding: 0 var(--s4); border-radius: var(--r-card); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.lkact { align-items: flex-end; }
.lkhint { position: absolute; z-index: 2; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 120px); transform: translateX(-50%); margin: 0; padding: var(--s2) var(--s4); border-radius: 999px; background: rgba(8, 12, 30, .7); font-size: var(--fs-sm); font-weight: var(--fw-strong); pointer-events: none; animation: lkhint 2.6s ease 1 forwards; }
.lkhint.hidden { display: none; }
@keyframes lkhint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.lkbig { display: none; }
/* on a computer: the looks in a grid on the left, the one picked plays large on the right */
.lkfeed[data-mode="grid"] .lkbody { gap: 0; padding-top: 75.5px; }
.lkfeed[data-mode="grid"] .lkscroll { flex: 1 1 56%; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); grid-auto-rows: min-content; gap: var(--s4); padding: var(--s2) var(--s5) var(--s6); scroll-snap-type: none; align-content: start; }
.lkfeed[data-mode="grid"] .lkc { height: auto; min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; border-radius: var(--r-card); background: #121936; outline: 2px solid transparent; cursor: pointer; transition: outline-color .12s, transform .12s var(--ease); }
.lkfeed[data-mode="grid"] .lkc:hover { transform: translateY(-2px); }
.lkfeed[data-mode="grid"] .lkc.on { outline-color: #B391FF; }
.lkfeed[data-mode="grid"] .lkc { padding-top: 0; }
.lkfeed[data-mode="grid"] .lkc .lkstage { flex: none; height: auto; width: 100%; }
.lkfeed[data-mode="grid"] .lkc .lkmeta { min-height: 0; padding: var(--s2) var(--s3) var(--s3); background: none; }
.lkfeed[data-mode="grid"] .lkc .lkname { font-size: var(--fs-body); }
.lkfeed[data-mode="grid"] .lkc .lksub { display: none; }
.lkfeed[data-mode="grid"] .lkc .lkact { display: none; }
.lkfeed[data-mode="grid"] .lkc .lklive { display: none; }
.lkfeed[data-mode="grid"] .lkbig { flex: 1 1 44%; max-width: 560px; min-width: 320px; display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: var(--s2) var(--s6) var(--s6) var(--s2); min-height: 0; }
.lkfeed[data-mode="grid"] .lkbig .lkstage { flex: 1 1 auto; min-height: 0; height: auto; width: auto; max-width: 100%; align-self: center; border-radius: var(--r-card); cursor: pointer; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lkfeed[data-mode="grid"] .lkbig .lkmeta { min-height: 0; padding: 0; background: none; align-self: stretch; }
.lkfeed[data-mode="grid"] .lkbig .lkact { position: static; flex-direction: row; align-self: stretch; justify-content: space-between; }
.lkfeed[data-mode="grid"] .lkhint { bottom: 14px; }
@media (max-width: 899px) { .lkfeed[data-mode="grid"] .lkbig { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .lkfeed { animation: none; }
  .lkfeed.lkout, .lkcv, .lklive.rdy, .lkheart, .lkfeed[data-mode="grid"] .lkc { transition: none; }
  .lkhint { animation: none; }
}

/* the finish line: the result rises, the brand's colors bloom behind it, one clear Save */
#result { position: relative; }
#result.fin-rise { animation: finrise .46s var(--ease) 1; }
#result.fin-fade { animation: finfade .3s ease 1; }
@keyframes finrise { from { opacity: 0; transform: translateY(26px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes finfade { from { opacity: 0; } to { opacity: 1; } }
.fin-bloom { position: absolute; z-index: 0; inset: -18px -14px; border-radius: var(--r-card); pointer-events: none; opacity: 0; animation: finbloom .6s ease-out 1 forwards; }
@keyframes finbloom { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: .55; } 100% { opacity: 0; transform: scale(1.3); } }
#result > :not(.fin-bloom) { position: relative; z-index: 1; }
#result #resSave { min-height: 52px; font-size: var(--fs-body); font-weight: var(--fw-strong); }
#result #resShare { min-height: 52px; }
@media (prefers-reduced-motion: reduce) { #result.fin-rise, #result.fin-fade { animation: finfade .3s ease 1; } }
/* ===== end v52 ===== */

/* ===== v53: one Undo, landing on results, calmer galleries, bigger touch targets ===== */
/* every small control has a 44 px hit area even where the sheet's own rule is not in force (the sheet already has it) */
@media (pointer: coarse) {
  .heart:not(.inrow):not(#toasts .heart)::before, .slswitch::before { content: ''; position: absolute; inset: -11px -8px; }
  .heart.inrow::before { content: ''; position: absolute; inset: -7px; }
  .slswitch { min-width: 38px; }
}
/* the duration badge sits top-left where the heart sits top-right on a phone */
@media (hover: none) { .tile .dur { right: auto; left: 5px; } }
/* the bar for a picked thing: chips are a little narrower and stop on a whole chip, so a label is never cut mid-word */
#s3.sh .ctxchip { min-width: 54px; padding: var(--s1) var(--s1); }
#s3.sh .ctxr .ctxchip { min-width: 54px; }
#s3.sh .ctxl { scroll-snap-type: x proximity; scroll-padding: 0 6px; }
#s3.sh .ctxchip { scroll-snap-align: start; }
/* the play button in a line's actions is an icon (its words stay for screen readers) */
.scvh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sca[data-a="play"] { position: relative; }
/* the caption style in use: a tick, and it stays where it was */
.ctile.on::after { content: '\2713'; position: absolute; left: 6px; top: 6px; right: auto; bottom: auto; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--accent-ink, #fff); background: var(--accent); pointer-events: none; }
/* Make it for me: the finished picture arrives softly */
#prev.mkreveal { animation: mkreveal .42s ease-out 1; }
@keyframes mkreveal { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #prev.mkreveal { animation: none; } }
/* ===== end v53 ===== */

/* ===== v54: ideas on top of Auto, a clean picture on a phone, one short Music list, one export card, a file before sign-in ===== */
/* Auto: the Ideas row (a week of content, Looks, a stronger start when one is ready, the church starters) */
.ideas { padding-top: var(--s2); padding-bottom: var(--s2); }
.ideas > h3 { margin: 0 0 var(--s3); }
.ideacards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.idcard { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0; min-height: 66px; padding: var(--s3) var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.idcard:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.idcard:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.idcard > svg { flex: none; margin-top: 1px; color: var(--accent); }
.idcard .idt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.idcard b { font-size: var(--fs-body); font-weight: var(--fw-strong); }
.idcard small { font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.ideastart { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.ideastart .mini { margin: 0; }
.ideastart .chip.busy { opacity: .6; }
.ideas .hkwrap { margin-top: 0; }
.ideas .hkwrap:empty { display: none; }
.ideas .hkcard { margin-top: var(--s3); }
.ideas.hasnote > h3::after { content: attr(data-note); display: inline-block; margin-left: var(--s3); padding: 1px var(--s2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; text-transform: none; vertical-align: middle; }
@media (max-width: 340px) { .ideacards { grid-template-columns: 1fr; } }
@media (pointer: coarse) { .idcard { min-height: 72px; } }
@media (prefers-reduced-motion: reduce) { .idcard { transition: none; } }

/* the phone: nothing floats over the picture (Layers, Safe zones and Looks are the Preview chip in the header) */
.shprev { display: none; }
#s3.sh .shprev { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 40px; margin-left: 2px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.8438rem; font-weight: 600; }
#s3.sh .shprev:active { background: var(--surface-2); }
#s3.sh .shprev svg { color: var(--muted); }
#s3.sh .frbtn { display: none; }
@media (max-width: 389px) { #s3.sh .shprev span { display: none; } #s3.sh .shprev { padding: 0 12px; min-width: 44px; justify-content: center; } }

/* Music: the short list first, the rest in one fold */
.sndpicks { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s2); }
.sndpicks .sndlead { margin: 0 0 2px; }
.snd.chosen { flex-direction: column; align-items: stretch; gap: var(--s2); padding: var(--s2) var(--s3) var(--s3); }
.snd.chosen .sndtop { display: flex; align-items: center; gap: var(--s3); }
.snd.chosen .sndtop .ck { flex: none; display: grid; place-items: center; width: 30px; height: 30px; }
.snd.chosen .st { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.snd.chosen .st b { font-size: var(--fs-body); font-weight: var(--fw-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snd.chosen .st i { font-style: normal; font-size: var(--fs-sm); color: var(--muted); }
.snd.chosen .sndoff { flex: none; min-height: 36px; padding: 0 var(--s2); }
.sndvol { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-body); font-weight: var(--fw-strong); padding: 0 2px; }
.sndvol input { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.sndvol b { min-width: 38px; text-align: right; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); font-variant-numeric: tabular-nums; }
.sndmore { margin-top: var(--s3); }
#s3.sh .snd.chosen .sndvol input { min-height: 44px; }

/* the one export card: Save, then the other shapes, audio only, the captions file and a cover */
.exalso { padding-top: 2px; }
.exalso .exalsoin { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s1); }
.exalso .lbl { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); margin: 0; }
.exsizes, .exsaves { display: flex; flex-wrap: wrap; gap: var(--s2); }
.exshapes { display: contents; }
.exshape.here { border-color: var(--accent); color: var(--accent); opacity: 1; }
.exshape.here::before { content: '\2713'; margin-right: var(--s2); font-weight: var(--fw-strong); }
.exweek { align-self: flex-start; margin: var(--s3) 0 var(--s4); font-size: var(--fs-body); }
#s3.sh .exweek { min-height: 44px; display: inline-flex; align-items: center; }
#result .row { margin-top: 2px; }

/* landing, signed out: the sample, then your own file, then the email (a file chosen first waits for the sign-in) */
#s1.out > #drop { order: 2; margin: 0 0 var(--s5); }
#s1.out > #gate { order: 3; }
.gfile { margin: 0; padding: var(--s3) var(--s4); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--r-control); background: var(--accent-soft); font-size: var(--fs-body); line-height: 1.45; overflow-wrap: anywhere; }
.gfile.hidden { display: none; }
.gfile b { font-weight: var(--fw-strong); }
.gfile .gfsize { color: var(--muted); }
.gfile .link { font-size: var(--fs-body); }
#s1.out.haspend #gate .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* Script: a pause in the list has its own Cut */
.scprow { display: flex; align-items: stretch; gap: var(--s2); }
.scprow .scp { flex: 1 1 auto; min-width: 0; }
.scpcut { flex: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); }
#resShare[hidden] { display: none !important; }

/* ===== v55: words, not guesses (docs/UX-AUDIT-2026-10-11.md item 12, second pass) ===== */
/* the label a picture-only control shows on hover, focus or a press and hold (polish.js) */
.cctip { position: fixed; z-index: 3000; max-width: min(300px, calc(100vw - 16px)); padding: var(--s2) var(--s3); border-radius: var(--r-control); background: #101626; color: #fff; font-family: inherit; font-weight: var(--fw-strong); font-size: var(--fs-sm); line-height: 1.3; pointer-events: none; box-shadow: 0 6px 18px rgba(8, 12, 28, .35); opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; }
.cctip.on { opacity: 1; transform: none; }
.cctip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cctip { transition: none; transform: none; } }
/* the bar on the picked thing keeps its words on a narrow stage: the word sits under its picture */
@container (max-width: 640px) {
  #s3.dk .dkctxb { flex-direction: column; justify-content: center; gap: 1px; width: auto; min-width: 46px; height: 44px; padding: 0 var(--s2); font-size: var(--fs-sm); line-height: 1.1; }
  #s3.dk .dkctxb span { display: block; }
}
@container (max-width: 400px) { #s3.dk .dkctxb span { display: none; } #s3.dk .dkctxb { width: 36px; min-width: 36px; height: 34px; padding: 0; } }
/* the shortcuts and gestures sheet: groups with a small heading */
.keys .kh { display: block; margin: var(--s3) 0 0; padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--muted); }
.keys .kh:first-child { margin-top: 0; }
.keys > .kh { grid-template-columns: 1fr; }
.keys .kt { font-style: normal; font-weight: var(--fw-strong); font-size: var(--fs-body); color: var(--text); }

/* a play button on a music row: a finger finds it (44 px), the look stays 30 px */
@media (pointer: coarse) { .snd .pb { position: relative; } .snd .pb::after { content: ''; position: absolute; inset: -7px; } }

/* ---------- v56: the timeline you can read at a glance: lane names, Captions and Music lanes, zoom, "+ Add here" ---------- */
.laneshell { display: grid; grid-template-columns: var(--lblW, 104px) minmax(0, 1fr); column-gap: var(--s2); align-items: start; min-width: 0; }
.lanelabels { position: relative; min-width: 0; min-height: 4px; }
.lanescroll { min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; scrollbar-width: thin; overscroll-behavior-x: contain; }
.lanescroll.zm { padding-bottom: var(--s1); }
.lane { width: 100%; --ph: 0%; }
.llab { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: var(--s2); min-width: 0; padding: 0 0 0 1px; overflow: hidden; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1.1; }
.llab[hidden] { display: none; }
.llab .lli { flex: none; display: grid; place-items: center; width: 14px; }
.llab .lln { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.llab .llx { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-control); background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: .65; }
.llab .llx:hover, .llab .llx:focus-visible { opacity: 1; background: var(--surface-2); color: var(--text); }
.llab.off { opacity: .6; font-size: var(--fs-sm); }
.llab.off .llx { height: 16px; }
.lane > .lnoff { height: 16px !important; min-height: 0; overflow: hidden; opacity: .5; border-style: dashed; cursor: default; }
.lane > .lnoff > * { display: none; }
.lanetime { margin-left: var(--s2); font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lanezoom { display: flex; align-items: center; gap: 3px; margin-left: auto; flex: none; }
.lanezoom.hidden { display: none; }
.lzb { min-width: 30px; height: 30px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); display: grid; place-items: center; cursor: pointer; font-variant-numeric: tabular-nums; }
.lzb:hover:not(:disabled) { background: var(--surface-2); }
.lzb:disabled { opacity: .4; cursor: default; }
.lzb:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.lzfit { min-width: 38px; }
#laneBox .lanehead .lanezoom ~ #clearBroll, #laneBox .lanehead .lanezoom ~ #clearBroll.hidden + #keysBtn { margin-left: var(--s2); }
/* "+ Add here": a dashed block at the playhead in an empty lane (never in the video) */
.lghost { position: absolute; top: 3px; bottom: 3px; left: min(var(--ph, 0%), calc(100% - max(var(--gw, 12%), 86px))); width: max(var(--gw, 12%), 86px); display: flex; align-items: center; justify-content: center; gap: var(--s1); padding: 0 var(--s2); overflow: hidden; border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, var(--line)); border-radius: var(--r-control); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); white-space: nowrap; cursor: pointer; z-index: 1; }
.lghost:hover, .lghost:focus-visible { background: var(--accent-soft); }
.lghost:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; }
.lghost .ico { flex: none; }
.track.empty.hasghost::after { display: none; }
.track.empty .tick { display: none; }
.mtrack.hasghost { cursor: default; }
/* captions: the phrases the caption engine made, in the same chunks the preview shows */
.mtrack.ct, .mtrack.mt { height: 24px; cursor: pointer; }
.cmk { position: absolute; top: 3px; bottom: 3px; min-width: 2px; padding: 0 var(--s2); border-radius: 5px; overflow: hidden; container-type: inline-size; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-strong); font-style: normal; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.cmk > span { display: block; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 40px) { .cmk > span { display: none; } }
.cmk.hid { opacity: .45; border-style: dashed; }
.capoff .cmk { opacity: .35; border-style: dashed; }
.cgap { position: absolute; top: 0; bottom: 0; pointer-events: none; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 38%, transparent) 0 3px, transparent 3px 7px); border-left: 1px dashed var(--muted); border-right: 1px dashed var(--muted); }
.coffbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; height: 20px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); white-space: nowrap; cursor: pointer; z-index: 2; }
/* music: one bar with its level and the two fades */
.mmk { position: absolute; inset: 0; outline: none; cursor: pointer; }
.mmk svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mmk polygon { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mml { position: absolute; left: 22px; right: 22px; top: 0; bottom: 0; display: flex; align-items: center; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.mmk.on { box-shadow: inset 0 0 0 2px var(--accent); }
.mmk:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mfh { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; touch-action: none; z-index: 2; }
.mfh.in { left: 0; } .mfh.out { right: 0; }
.mfh::after { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: 4px; border-radius: 3px; background: var(--accent); opacity: .75; }
.mfh:hover::after, .mfh:focus-visible::after { opacity: 1; }
.mfh:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }
#laneBox .lane { gap: 3px; }
@media (max-width: 920px) {
  #s3.sh { --lblW: 86px; }
  #s3.sh .laneshell { column-gap: var(--s1); }
  #s3.sh .llab { font-size: var(--fs-sm); gap: 3px; }
  #s3.sh .llab .lli { width: 12px; }
  #s3.sh .llab .llx { width: 18px; }
  #s3.sh #laneBox .lanehead b { display: none; }
  #s3.sh .lanetime { margin-left: 0; }
  #s3.sh .lzb { min-width: 40px; height: 40px; }
  #s3.sh .lzfit { min-width: 46px; }
}
#s3.dk #laneBox .mtrack, #s3.dk #laneBox .mtrack.ct, #s3.dk #laneBox .mtrack.mt { height: 22px; }
#s3.dk #laneBox .mtrack.thin { height: 16px; }
#s3.dk #laneBox .track { height: 30px; }
#s3.dk #laneBox .track.empty { height: 24px; }
#s3.dk #laneBox #laneLegend { display: none; }   /* the lanes have names now */
@media (pointer: coarse) {
  .lzb { min-width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .lzb, .lghost { transition: none; } .lanescroll { scroll-behavior: auto; } }
/* the classic layout keeps its old empty look: nothing until something is on the timeline */
#s3:not(.dk):not(.sh) #laneBox.lnone .laneshell, #s3:not(.dk):not(.sh) #laneBox.lnone .lanezoom { display: none; }

/* v57: the first line of Script says what Pauses and voice did */
.scrdid { margin: 0 0 var(--s3); font-weight: var(--fw-strong); color: var(--text, inherit); }
#stPost.done { border-color: var(--accent); color: var(--accent); }

/* v58: stumbles and retakes in the pauses list, fix a name everywhere, names box */
.scpauses .scphead { margin: var(--s4) 0 var(--s2); }
.scpauses .scphead:first-child { margin-top: 0; }
.scrtk { flex-wrap: wrap; }
.scrtk .scp { flex: 1 1 200px; flex-wrap: wrap; }
.scrtk .scp q { display: block; flex-basis: 100%; margin-top: 2px; font-size: var(--fs-body); color: var(--muted); quotes: "\201C" "\201D"; }
.scpkeep { flex: none; min-height: 44px; padding: 0 var(--s4); }
.scfixall { margin-top: var(--s3); }
.bwcutrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin: 0 0 var(--s3); }
.bwcutrow .check { margin: 0; }
.bwcutrow .mini { margin: 0; }

/* ===== v59: Pick a moment, laid out (docs: README v59). One structure, two layouts. Under 1100 px it is one column in
   the order the person works: the file, the player, the moments, how to cut, the words, with a single-row bar pinned to
   the bottom (the range and Next). From 1100 px the words take the left and a sticky panel the right (moments, the
   range, how to cut, one Next). The brand, colors and type are untouched; this is spacing, order and hierarchy. ===== */
#s2.stage { animation: s2in .22s var(--ease) both; }   /* opacity only: a transform would make the pinned bar position itself against the page, not the screen */
@keyframes s2in { from { opacity: 0; } to { opacity: 1; } }
#s2 .s2grid { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s1); }
#s2 .s2main, #s2 .s2side, #s2 .dock { display: contents; }
#s2 .dock { position: static; margin: 0; max-width: none; }
#s2 .s2top { order: 1; } #s2 .vidcard { order: 2; margin: 0; } #s2 .vidnote { order: 3; margin: 0; } #s2 .card.listen { order: 4; margin: 0; }
#s2 .suggest { order: 5; margin: 0; } #s2 .modebar { order: 6; margin: 0; } #s2 .coach { order: 7; margin: 0; }
#s2 .hint { order: 8; margin: 0; } #s2 .transcript { order: 9; max-width: none; } #s2 .dockbar { order: 10; }

/* the file line: name and length on one row, search and the file's own actions to the right */
#s2 .s2top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "file tools" "search search"; align-items: center; gap: 0 var(--s3); padding: 0; }
#s2 .filechip { grid-area: file; flex-direction: row; align-items: baseline; gap: 0 var(--s3); min-width: 0; }
#s2 .filechip b { flex: 0 1 auto; min-width: 0; max-width: none; font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.01em; }
#s2 .filechip span { flex: none; white-space: nowrap; font-size: var(--fs-body); color: var(--muted); font-variant-numeric: tabular-nums; }
#s2 .s2tools { grid-area: tools; display: flex; align-items: center; gap: 2px; }
#s2 .s2tools .iconbtn { width: 44px; height: 44px; background: transparent; border-color: transparent; color: var(--muted); transition: background-color .15s var(--ease), color .15s var(--ease); }
#s2 .s2tools .iconbtn:hover { background: var(--surface-2); color: var(--text); }
#s2 .s2tools .iconbtn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
#s2 .filepop { position: relative; }
#s2 .filepop .menu { top: calc(100% + 4px); bottom: auto; right: 0; min-width: 244px; z-index: 12; }
#s2 .filepop .menu button { min-height: 44px; padding: var(--s3) var(--s4); font-size: var(--fs-body); }
#s2 .search { grid-area: search; max-width: none; flex: none; overflow: hidden; max-height: 0; opacity: 0; padding: 0 3px; transition: max-height .2s var(--ease), opacity .18s var(--ease), padding .2s var(--ease); }
#s2 .s2top.finding .search { max-height: 64px; opacity: 1; padding: var(--s2) 3px 3px; }
#s2 .search input { min-height: 44px; }
#s2 .search .iconbtn { width: 44px; height: 44px; flex: none; }
#s2 .search .mag { top: 50%; margin-top: -8px; left: 15px; }
#s2 .s2top.finding .search .mag { margin-top: 0; top: calc(50% + 2px); transform: translateY(-50%); }
@media (min-width: 641px) and (max-width: 1099px), (min-width: 1300px) {
  #s2 .s2top { grid-template-columns: minmax(0, 1fr) minmax(220px, 340px) auto; grid-template-areas: "file search tools"; gap: 0 var(--s4); }
  #s2 .search, #s2 .s2top.finding .search { max-height: none; opacity: 1; padding: 0; overflow: visible; }
  #s2 .s2find { display: none; }
  #s2 .search input { min-height: 40px; }
  #s2 .search .iconbtn { width: 36px; height: 36px; }
  #s2 .search .mag { margin-top: 0; top: 50%; transform: translateY(-50%); left: 12px; }
  #s2 .s2tools .iconbtn { width: 36px; height: 36px; }
}

/* the player: one slim row */
#s2 .card.listen { gap: var(--s3); padding: var(--s2) var(--s4) var(--s2) var(--s2); min-height: 52px; }
#s2 .playbtn { width: 40px; height: 40px; }
#s2 .card.listen .t { min-width: 84px; }
@media (pointer: coarse) { #s2 .playbtn { width: 44px; height: 44px; } }

/* the moments */
#s2 .sugghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); margin: 0 0 var(--s3); }
#s2 .sugghead b { font-size: var(--fs-body); font-weight: var(--fw-strong); letter-spacing: -0.005em; }
#s2 .sugghead span { font-size: var(--fs-body); color: var(--muted); }
#s2 .suggrow { display: flex; flex-direction: column; gap: var(--s3); }
#s2 .sugg { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
#s2 .sugg:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
#s2 .sugg.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
#s2 .sugpick { display: flex; flex-direction: column; gap: var(--s2); width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-control); }
#s2 .sugpick:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 4px; }
#s2 .sugmeta { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--accent); font-variant-numeric: tabular-nums; }
#s2 .sugn { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-strong); background: var(--accent-soft); color: var(--accent); transition: background-color .2s var(--ease), color .2s var(--ease); }
#s2 .sugg.on .sugn { background: var(--accent); color: var(--accent-ink); }
#s2 .sugd { margin-left: auto; color: var(--muted); font-weight: var(--fw-strong); }
#s2 .sugq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-body); line-height: 1.45; color: var(--text); }
#s2 .sugtags { display: flex; flex-wrap: nowrap; gap: var(--s2); margin: 0; overflow: hidden; }
#s2 .sugtag { flex: none; }
#s2 .sugact { display: flex; gap: var(--s3); }
#s2 .sugact .btn { min-height: 38px; padding: 0 var(--s4); border-radius: var(--r-control); }
#s2 .sugact .sugl { background: transparent; }
#s2 .sugact .use { flex: 1; justify-content: center; background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); color: var(--accent); box-shadow: none; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
#s2 .sugact .use:hover:not(:disabled) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
#s2 .sugg.on .use { background: var(--accent-soft); border-color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* how to cut it: one quiet segmented control */
#s2 .modebar { display: flex; flex-direction: column; align-items: stretch; gap: var(--s3); }
#s2 .modeseg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; flex: none; max-width: 420px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-control); }
#s2 .modeseg button { flex-direction: row; justify-content: center; align-items: center; min-height: 36px; padding: 0 var(--s4); border: 0; border-radius: var(--r-control); background: transparent; box-shadow: none; transition: background-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); }
#s2 .modeseg button span { display: none; }
#s2 .modeseg button b { font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--muted); transition: color .18s var(--ease); }
#s2 .modeseg button:hover b { color: var(--text); }
#s2 .modeseg button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
#s2 .modeseg button.on b { color: var(--text); }
@media (pointer: coarse) { #s2 .modeseg button { min-height: 40px; } }
#s2 .manyopts { font-size: var(--fs-body); }

/* the words */
#s2 .hint { font-size: var(--fs-body); color: var(--muted); background: none; border: 0; border-radius: 0; padding: 0 2px; }
#s2 .transcript span { transition: background-color .18s var(--ease), box-shadow .18s var(--ease); }
#s2 .transcript .grip-a[data-n]::after { content: attr(data-n); display: grid; place-items: center; width: 20px; height: 20px; left: -12px; top: -17px; font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1; color: var(--accent-ink); }

/* the bar: the range, one overflow button and Next, in one row pinned to the bottom of the screen */
#s2 .dockbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s3); margin: 0; max-width: none;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(8, 14, 30, .1); }
#s2 .dockbar > .clipsrow, #s2 .dockbar > .partsrow, #s2 .dockbar > .dockprog, #s2 .dockbar > .trim { order: 0; flex: 1 1 100%; margin: 0; min-width: 0; }
#s2 .partsrow, #s2 .clipsrow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
#s2 .partsrow::-webkit-scrollbar, #s2 .clipsrow::-webkit-scrollbar { display: none; }
#s2 .partsrow > *, #s2 .clipsrow > * { flex: none; }
#s2 .seltext { order: 2; flex: 1 1 0; min-width: 0; min-height: 40px; justify-content: center; gap: 1px; }
#s2 .seltext b { font-size: var(--fs-body); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#s2 .seltext span { display: block; font-size: var(--fs-sm); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#s2 .actions { display: contents; }
#s2 #moreSel { order: 3; flex: none; width: 44px; min-height: 48px; padding: 0; }
#s2 #moreSel .lbl { display: none; }
#s2 #addPart { order: 4; flex: none; min-height: 48px; }
#s2 #toStudio { order: 5; flex: none; min-height: 48px; padding: 0 var(--s4); }
#s2 #playSel, #s2 #toCarousel, #s2 #trimBtn, #s2 #saveClip, #s2 .actions .pop { display: none; }
#s2 #addPart:not(.primary), #s2 #toStudio:not(.primary) { display: none; }
#s2 #toStudio > .ico:first-child { display: none; }
@media (max-width: 480px) {
  #s2 #toStudio .lbl[data-short] { font-size: 0; }
  #s2 #toStudio .lbl[data-short]::after { content: attr(data-short); font-size: var(--fs-body); }
}
/* above the bar: the fine-tune strip hugs it; the word nudges float over its right end */
#s2 .dockbar .nudge:not([hidden]) { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(100% + 8px); margin: 0; padding: 3px; gap: var(--s1); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); animation: s2in .18s var(--ease) both; }
#s2 .dockbar .nudge .nd { border: 0; background: none; }
#s2 .dockbar .nudge .nd button { width: 40px; height: 44px; }
#s2 .dockbar .nudge .nd i { min-width: 30px; }
#s2 .dockbar .nudge .nd + .nd { border-left: 1px solid var(--line); border-radius: 0; }
/* the page leaves room for the bar, and anything scrolled into view stops above it */
main:has(#s2:not(.hidden)) { padding-bottom: calc(var(--s2bar, 70px) + 32px); }
html:has(#s2:not(.hidden)) { scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--s2bar, 70px) + 16px); }

/* tablets and narrow windows: the bar has room for Play and Carousel as quiet buttons */
@media (min-width: 761px) and (max-width: 1099px) {
  #s2 .dockbar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  #s2 .seltext { flex: 1 1 auto; }
  #s2 #playSel, #s2 #toCarousel { display: inline-flex; min-height: 44px; padding: 0 var(--s4); border-color: transparent; color: var(--muted); }
  #s2 #playSel { order: 1; } #s2 #toCarousel { order: 3; }
  #s2 #moreSel { order: 4; width: auto; padding: 0 var(--s4); border-color: transparent; color: var(--muted); }
  #s2 #moreSel .lbl { display: inline; }
  #s2 #toCarousel .lbl { font-size: inherit; } #s2 #toCarousel .lbl::after { content: none; }
  #s2 #addPart { order: 5; } #s2 #toStudio { order: 6; }
  #s2 #toStudio .lbl[data-short]::after { content: none; }
}
/* a phone on its side is short: the bar slims, the moments row keeps its cards */
@media (max-height: 500px) and (orientation: landscape) {
  #s2 .dockbar { padding-top: var(--s2); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  #s2 .seltext span { display: none; }
  #s2 #moreSel, #s2 #toStudio, #s2 #addPart { min-height: 40px; }
}

/* under 1100: the moments are a swipeable row, the next one peeking */
@media (max-width: 1099px) {
  #s2 .suggrow { flex-direction: row; gap: var(--s3); overflow-x: auto; margin: 0 -14px; padding: 2px 16.5px 7px; scroll-snap-type: x mandatory; scroll-padding-left: 14px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #s2 .suggrow::-webkit-scrollbar { display: none; }
  #s2 .suggrow > .sugg { flex: 0 0 min(86%, 400px); scroll-snap-align: start; }
  #s2 .suggrow > .sugg:only-child { flex-basis: 100%; }
  #s2 .sugtags { display: none; }
  html:has(#s2:not(.hidden)) .top { position: static; }
  html:has(#s2:not(.hidden)) .top, html:has(#s1:not(.hidden)) body.shell .top { padding-top: var(--s3); padding-bottom: var(--s2); gap: var(--s3) var(--s4); }
}
@media (min-width: 561px) and (max-width: 1099px) { #s2 .suggrow { margin: 0 -20px; padding-left: 23.5px; padding-right: 23.5px; scroll-padding-left: 20px; } }

/* from 1100: words left, a sticky panel right */
@media (min-width: 1100px) {
  #s2 .s2grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw - 20px, 380px); column-gap: var(--s6); align-items: start; }
  #s2 .s2main { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
  #s2 .transcript { max-width: 760px; }
  #s2 .s2side { display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 3px; margin: -3px; }
  #s2 .suggest { order: 0; }
  #s2 .dock { display: flex; flex-direction: column; gap: var(--s4); order: 1; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
  #s2 .modebar { order: 2; margin: 0; }
  #s2 .dockbar { display: contents; }
  #s2 .seltext { order: 1; flex: none; min-height: 0; gap: 2px; }
  #s2 .seltext::before { content: 'Your selection'; font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--muted); }
  #s2 .seltext b { font-size: var(--fs-head); letter-spacing: -0.01em; white-space: normal; }
  #s2 .seltext span { font-size: var(--fs-body); white-space: normal; }
  #s2 .dockbar > .clipsrow, #s2 .dockbar > .partsrow { order: 3; flex: none; flex-wrap: wrap; overflow: visible; padding: 0; }
  #s2 .dockbar > .dockprog { order: 4; } #s2 .dockbar > .trim { order: 4; }
  #s2 .dockbar .nudge:not([hidden]) { position: static; order: 4; margin: 0; align-self: flex-start; box-shadow: none; animation: none; }
  #s2 .actions { order: 6; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
  #s2 .actions .btn { flex: 1 1 auto; justify-content: center; gap: var(--s2); }
  #s2 #toStudio, #s2 #addPart { order: 0; flex: 1 1 100%; min-height: 46px; padding: 0 var(--s4); }
  #s2 #addPart:not(.primary), #s2 #toStudio:not(.primary) { display: inline-flex; }
  #s2 #toStudio > .ico:first-child { display: block; }
  #s2 #toStudio .lbl[data-short] { font-size: inherit; } #s2 #toStudio .lbl[data-short]::after { content: none; }
  #s2 #playSel, #s2 #toCarousel, #s2 #moreSel { order: 1; display: inline-flex; min-height: 38px; padding: 0 var(--s2); width: auto; background: transparent; border-color: transparent; color: var(--muted); }
  #s2 #playSel { order: 1; } #s2 #toCarousel { order: 2; flex-grow: 2; } #s2 #moreSel { order: 3; }
  #s2 #moreSel .lbl { display: inline; }
  #s2 #toCarousel .lbl { font-size: inherit; } #s2 #toCarousel .lbl::after { content: none; }
  #s2 #playSel:hover:not(:disabled), #s2 #toCarousel:hover:not(:disabled), #s2 #moreSel:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
  #s2 #trimBtn, #s2 #saveClip { display: none; }
  main:has(#s2:not(.hidden)) { padding-bottom: 56.5px; }
  html:has(#s2:not(.hidden)) { scroll-padding-bottom: 24px; }
}

/* installed as an app the top bar is pinned, so the panel sits under it */
@media (min-width: 1100px) { html.app #s2 .s2side { top: 84px; max-height: calc(100dvh - 100px); } }

/* ===== v59: the landing's top bar on a phone: the logo, Sign in, and a small menu (it had no links at all) ===== */
.topmenu, .topdrop { display: none; }
@media (min-width: 900px) { .topdrop { display: contents; } }
@media (max-width: 899px) {
  body.landing .top { position: relative; flex-wrap: nowrap; justify-content: space-between; gap: var(--s3); padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: var(--s2); }
  body.landing .toplinks { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
  body.landing #topSignin { min-height: 44px; padding: 0 var(--s5); border-radius: 999px; font-size: var(--fs-body); background: var(--surface); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); box-shadow: var(--shadow-sm); }
  body.landing .topmenu { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: transparent; border-color: transparent; color: var(--text); }
  body.landing .topmenu:hover, body.landing .toplinks.open .topmenu { background: var(--surface-2); }
  body.landing .toplinks.open .topdrop { display: flex; flex-direction: column; position: absolute; z-index: 45; top: calc(100% - 2px); right: max(14px, env(safe-area-inset-right)); min-width: 220px; padding: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); animation: s2in .18s var(--ease) both; }
  body.landing .toplinks.open .topdrop a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s4); border-radius: var(--r-control); color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-strong); text-decoration: none; }
  body.landing .toplinks.open .topdrop a:active, body.landing .toplinks.open .topdrop a:hover { background: var(--surface-2); }
}

/* ===== v59: the phone studio: room at the edges, a View chip that says what it is, a tool strip that shows there is more ===== */
#s3.sh .s3head { padding: var(--s1) var(--s4) var(--s1) var(--s2); }
#s3.sh .s3head { gap: 2px; }
#s3.sh .s3head .makemini { margin-left: var(--s1); padding: 0 var(--s4); }
#s3.sh .viewer { padding: 0 var(--s4); }
#s3.sh .transport { padding: 0; }
#s3.sh .shprev { min-height: 44px; padding: 0 12px 0 13px; margin-left: 0; }
#s3.sh .shprev .ico:last-child { margin-left: -2px; color: var(--muted); }
@media (max-width: 389px) {
  #s3.sh .shprev span { display: inline; }
  #s3.sh .shprev .ico:last-child { display: none; }
  #s3.sh .shprev { padding: 0 13px; min-width: 0; margin-left: 2px; }
}
/* five tools and a half: the sixth is cut in the middle, so the strip plainly goes on (Music, Look, Layers, More) */
#s3.sh:not(.land) #ptabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
#s3.sh.stripend:not(.land) #ptabs { -webkit-mask-image: none; mask-image: none; }
#s3.sh:not(.land) #ptabs button { flex: 0 0 calc((100% - 10px) / 5.5); min-width: 0; padding-left: 2px; padding-right: 2px; }
/* v77 (E1, item 7): the room studio.js CC.revealTab adds after the last tab, so the open tab and the first one shown are whole */
#s3.sh:not(.land) #ptabs::after { content: ''; flex: 0 0 var(--stripRoom, 0px); margin-left: -2px; }   /* -2px: the strip's gap, so no room is no change */

/* a short desktop window: the panel gives up the tags and the second line so it still fits without scrolling */
@media (min-width: 1100px) and (max-height: 860px) {
  #s2 .sugtags, #s2 .sugghead span { display: none; }
  #s2 .s2side { gap: var(--s4); }
}

@media (min-width: 1100px) and (max-width: 1299px) { #s2 #playSel .ico, #s2 #toCarousel .ico { display: none; } }

/* ===== v60: brand files (Share or back up this brand) ===== */
.bpshare { margin-top: var(--s6); padding-top: var(--s5); max-width: 640px; }
.bpshare h2 { margin: 0 0 var(--s1); font-size: var(--fs-body); letter-spacing: -0.005em; }
.bpshare > .mini { margin: 0 0 var(--s4); }
.bpshare-act { display: flex; flex-wrap: wrap; gap: var(--s3); }
.bpshare-act .btn { display: inline-flex; align-items: center; gap: var(--s2); }
.bpshare-opt { display: flex; align-items: flex-start; gap: var(--s3); margin-top: var(--s4); font-size: var(--fs-body); line-height: 1.4; color: var(--text); cursor: pointer; }
.bpshare-opt input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.bpshare-opt small { display: block; margin-top: 2px; font-size: var(--fs-body); color: var(--muted); }
.bpshare-body:empty { display: none; }
.bpshare-body { margin-top: var(--s4); }
.bpshare-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-body); line-height: 1.5; color: var(--muted); }
.bpshare-card p { margin: 0; overflow-wrap: anywhere; }
.bpshare-card b { color: var(--text); }
.bpshare-card .mini { margin: 0; }
.bpshare-card.err { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.bpshare-from { font-size: var(--fs-body); color: var(--muted); }
.bpshare-btns { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 720px) {
  .bpshare .btn { min-height: 44px; }
  .bpshare-act .btn, .bpshare-btns .btn { flex: 1 1 100%; justify-content: center; }
}

/* ===== v61: captions shown for part of the video (lanes.js, layerui.js) ===== */
.cmk.cout { opacity: .4; }
.cwv { position: absolute; top: 0; bottom: 0; pointer-events: none; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 30%, transparent) 0 3px, transparent 3px 7px); background-color: color-mix(in srgb, var(--bg) 55%, transparent); z-index: 1; }
.cwh { position: absolute; top: 0; bottom: 0; width: 14px; cursor: ew-resize; touch-action: none; z-index: 2; }
.cwh.in { margin-left: 0; }
.cwh.out { margin-right: 0; }
.cwh::after { content: ''; position: absolute; top: 3px; bottom: 3px; width: 4px; border-radius: 3px; background: var(--accent); opacity: .8; }
.cwh.in::after { left: 0; }
.cwh.out::after { right: 0; }
.cwh:hover::after, .cwh:focus-visible::after { opacity: 1; }
.cwh:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }
.cwh.out { transform: translateX(0); }
@media (pointer: coarse) { .cwh { width: 24px; } }

/* v61: caption styles on the brand page (brandpage.js) */
.capstylegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); }
.capstylegrid > .mini { grid-column: 1 / -1; }
.capsty { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); min-width: 0; }
.capsty .capstypic { cursor: pointer; width: 100%; outline-offset: 3px; }
.capsty .capstypic:focus-visible { outline: 2px solid var(--focus, var(--accent)); border-radius: var(--r-control); }
.capsty .capstyname { width: 100%; font: inherit; font-size: var(--fs-body); font-weight: var(--fw-strong); padding: var(--s2) var(--s2); border-radius: var(--r-control); border: 1px solid var(--accent); background: var(--surface); color: var(--text); }
.capstyact { display: flex; flex-wrap: wrap; gap: var(--s2); }
.capstyact .btn { flex: 0 1 auto; }
@media (pointer: coarse) { .capstyact .btn { min-height: 44px; } }

/* ===== v62: groups inside a tool (tabs.js) and one gallery for every long list (gallery.js, categories.js) ===== */
.sgoff, .sgflat { display: none !important; }
.subtabs { position: relative; z-index: 3; isolation: isolate; display: flex; align-items: stretch; gap: 2px; height: 40px; box-sizing: border-box; margin: 0 0 var(--s3); padding: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.subtabs::before { content: ''; position: absolute; z-index: -1; inset: -6px -16px -6px -16px; background: var(--surface); border-radius: 0; }
.subtabs .sgtab { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); padding: 0 var(--s2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.subtabs .sgtab:hover { color: var(--text); }
.subtabs .sgtab.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.subtabs .sgtab:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: -2px; }
.sgnote { margin: -2px 2px 8px; }
.sgempty { margin: var(--s3) 2px; }
#s3.sh .subtabs { position: sticky; top: 46px; z-index: 6; margin: var(--s1) 0 var(--s3); }
#s3.sh .subtabs::before { inset: -4px -14px -6px -14px; }
#s3.dk .subtabs { position: sticky; top: 52px; z-index: 4; margin: var(--s1) 0 var(--s3); }
#s3.dk .subtabs::before { inset: -4px -16px -6px -16px; }
#s3.sh .side { scroll-padding: 108px 0 14px; }
#s3.sh .side .pane.hassg [id], #s3.dk .side .pane.hassg [id] { scroll-margin-top: 112px; }
#s3.sh .side .pane.hassg > .sec:first-child { padding-top: 2px; }
@media (max-width: 380px) { .subtabs .sgtab { font-size: var(--fs-sm); padding: 0 var(--s2); } }

/* the gallery */
.galbody { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.galchips { position: relative; display: flex; flex-wrap: wrap; gap: var(--s2); }
.galchips .galchip { padding: var(--s2) var(--s4); font-size: var(--fs-body); }
.galchips.galdim .galchip.on { background: transparent; border-color: var(--line); color: var(--text); }
.galmore .galn { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.galmore.hidden { display: none; }
.galsr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.galempty { margin: var(--s1) 0; }
.sndgal { display: flex; flex-direction: column; gap: var(--s1); }
#sndList.gal { max-height: none; overflow: visible; }
@media (max-width: 920px), (pointer: coarse) {
  .galchips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -14px; padding: 0 16.5px 2px; }
  .galchips::-webkit-scrollbar { display: none; }
  .galchips .galchip { flex: 0 0 auto; min-height: 44px; padding: 0 var(--s4); scroll-snap-align: start; white-space: nowrap; }
  .galmore { min-height: 44px; display: inline-flex; align-items: center; }
}
#stockDlg .galmore { margin: var(--s3) 0 0; }
.lkdesigns .mini, .captiming .mini { margin-top: var(--s1); }
#layerHead { display: none; }

/* ===== v63: purpose and placement, phase B2 of docs/PLAN-BUBBLES.md (purpose.js). Two small bubbles under Make it for me in Auto:
   What is this for? (six purposes) and Where will it go? (four places). The rest of the old Ideas row folds under More ideas. ===== */
.bubbles { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) 0 var(--s4); border-bottom: 0; }
.bubbles .bub > h3 { margin: 0 0 var(--s3); font-size: var(--fs-body); }
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.pcard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); min-width: 0; min-height: 60px; padding: var(--s3) var(--s2); border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.pcard:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.pcard:active { transform: scale(.98); }
.pcard:focus-visible, .plchip:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.pcard .ptop { display: flex; align-items: center; gap: var(--s1); min-width: 0; max-width: 100%; }
.pcard .pico { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1; }
.pcard b { font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1.2; min-width: 0; overflow-wrap: break-word; }
.pcard small { font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); overflow-wrap: break-word; }
.pcard.on { border-color: var(--accent); background: var(--accent-soft); }
/* the chosen one shows a tick where its icon was, so it is not told apart by colour alone */
.pcard.on .pico { background: var(--accent); color: var(--accent-ink, #fff); }
.pcard.on .pico svg { display: none; }
.pcard.on .pico::before { content: '\2713'; }
.pcard.busy { opacity: .65; cursor: progress; }
.plchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.plchip { display: flex; align-items: center; gap: var(--s3); min-width: 0; min-height: 42px; padding: var(--s2) var(--s3); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1.2; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.plchip:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.plchip .pfr { flex: none; height: 18px; aspect-ratio: var(--r, 1); max-width: 30px; border: 2px solid currentColor; border-radius: 3px; opacity: .75; }
.plchip .pl { min-width: 0; overflow-wrap: anywhere; }
.plchip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.plchip.on .pfr { opacity: 1; }
/* More ideas: a week of content, six looks, and a stronger start when one is ready */
#ideasMore { padding: var(--s3) 0; }
#ideasMore > summary { min-height: 40px; display: flex; align-items: center; }
#ideasMore.hasnote > summary > small { color: var(--accent); font-weight: var(--fw-strong); }
#ideasMore > .ideas { padding: var(--s2) 0 var(--s1); border-bottom: 0; }
#ideasMore .hkwrap:empty { display: none; }
/* the phone's sheet is short: the choices are a sideways row, one finger wide, so Make it for me and both bubbles fit */
#s3.sh .bubbles { gap: var(--s3); padding: var(--s2) 0 var(--s1); }
#s3.sh .bubbles .bub > h3 { margin: 0 0 var(--s2); }
#s3.sh .pcards, #s3.sh .plchips { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -14px; padding: 2px 16.5px 4.5px; scroll-padding-left: 14px; }
#s3.sh .pcards::-webkit-scrollbar, #s3.sh .plchips::-webkit-scrollbar { display: none; }
#s3.sh .pcard { flex: 0 0 150px; min-height: 58px; padding: var(--s2) var(--s3); scroll-snap-align: start; }
#s3.sh .plchip { flex: 0 0 auto; min-height: 44px; padding: var(--s2) var(--s4); white-space: nowrap; scroll-snap-align: start; }
#s3.sh .plchip .pl { overflow-wrap: normal; }
@media (prefers-reduced-motion: reduce) { .pcard, .plchip { transition: none; } .pcard:active { transform: none; } }
/* a short phone (375 x 667): the line under Make it for me waits, so the button and both bubbles still fit the half sheet */
@media (max-height: 700px) {
  #s3.sh #makeItHint:not(:empty) { display: none; }
  #s3.sh .vstart { padding-bottom: var(--s2); }
  #s3.sh .bubbles { gap: var(--s2); padding-top: var(--s1); }
  #s3.sh .bubbles .bub > h3 { margin-bottom: var(--s1); }
  #s3.sh .plchip { min-height: 42px; }
}
/* ===== end v63 ===== */

/* ===== v64: Projects, the home of a signed-in person (projects.js) ===== */
/* with at least one project the "New recording" bubble is the drop zone; the old drop zone stays in the page for drops and the file input */
#s1.hasproj > #drop { display: none; }
#s1.hasproj:has(#working:not(.hidden)) #projHome, #s1.hasproj:has(#working:not(.hidden)) #projPage, #s1.recording #projHome, #s1.recording #projPage { display: none; }
#s1.pjpagev .homehead, #s1.pjpagev > #noAudio, #s1.pjpagev > #homeGuide, #s1.pjpagev > #recent, #s1.pjpagev > #recRow, #s1.pjpagev > .note { display: none !important; }
.pjhome.hidden, .pjpage.hidden { display: none; }
/* v80 (E4, docs/PLAN-OWN-WORLD.md 3.1): with the new studio switched on, the home's two doors (Bring a recording, Start blank)
   are the first two bubbles, and the drop zone steps aside for them (a file dropped anywhere still opens, app.js) */
#s1.wdoors > #drop { display: none; }
.pjdoors .pjblank { border-style: solid; border-color: var(--line); background: radial-gradient(420px 200px at 50% 0%, color-mix(in srgb, var(--sm-violet) 10%, transparent), transparent 70%), var(--surface); }
.pjdoors .pjblank .pjnewic { background: var(--surface-2); color: var(--accent); }
.pjnewt b .betachip { vertical-align: 2px; margin-left: var(--s1); }
.betachip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--s2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; line-height: 1; white-space: nowrap; }
.pjshelf { margin-top: var(--s3); }
.pjshelf .link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; }
.pjhome { margin: 0 0 var(--s2); }
.pjgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: var(--s4); }
.pjnew { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); min-height: 236px; padding: var(--s5); border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--r-card); background: radial-gradient(420px 200px at 50% 0%, var(--accent-soft), transparent 70%), var(--surface); color: var(--text); text-align: center; cursor: pointer; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.pjnew:hover, #s1:has(#drop.over) .pjnew { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pjnew:focus-visible, .pjthumb:focus-visible, .pjname:focus-visible, .pjmadeitem:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.pjnewic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-card); background: var(--accent); color: var(--accent-ink); }
.pjnewt { display: flex; flex-direction: column; gap: 3px; }
.pjnewt b { font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.02em; }
.pjnewt small { font-size: var(--fs-body); color: var(--muted); }
.pjcard { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); min-width: 0; }
.pjthumb, .pjhthumb { display: grid; place-items: center; overflow: hidden; border: 0; padding: 0; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); }
.pjthumb { height: 118px; width: 100%; cursor: pointer; }
.pjthumb img, .pjhthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pjbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pjname { display: block; max-width: 100%; padding: 2px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-head); font-weight: var(--fw-strong); letter-spacing: -0.01em; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; border-radius: var(--r-control); }
.pjname:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.pjname.big { font-size: var(--fs-display); font-weight: var(--fw-strong); letter-spacing: -0.03em; white-space: normal; overflow-wrap: anywhere; }
.pjrename { width: 100%; min-width: 0; padding: var(--s1) var(--s2); border: 1.5px solid var(--accent); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-head); font-weight: var(--fw-strong); }
.pjmeta { margin: 0; font-size: var(--fs-body); color: var(--muted); }
.pjacts { display: flex; gap: var(--s3); margin-top: auto; }
.pjacts .pjopen { flex: 1 1 auto; min-height: 40px; }
.pjacts .pjmore { flex: none; width: 40px; height: 40px; }
.pjfoot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); margin: var(--s4) 2px 0; }
.pjsearch { flex: 1 1 220px; min-width: 0; max-width: 360px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body); }
/* one project */
.pjpage { padding: var(--s5) 0 var(--s2); }
.pjback { display: inline-flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); font-size: var(--fs-body); }
.pjhead { display: flex; align-items: center; gap: var(--s5); margin: 0 0 var(--s5); }
.pjhthumb { flex: none; width: 88px; height: 88px; border-radius: var(--r-card); }
.pjhtext { flex: 1 1 auto; min-width: 0; }
.pjtitle { margin: 0 0 var(--s1); font: inherit; }
.pjhead .pjopen { flex: none; }
.pjadd { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s4); margin: 0 0 var(--s5); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--r-card); background: var(--accent-soft); }
.pjaddic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--r-card); background: var(--accent); color: var(--accent-ink); }
.pjaddt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.pjaddt b { font-size: var(--fs-head); font-weight: var(--fw-strong); }
.pjaddt span { font-size: var(--fs-body); color: var(--muted); line-height: 1.4; }
.pjmsg { margin: -6px 0 18px; padding: 14px 16.5px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); outline: none; }
.pjmsg p { margin: 0 0 var(--s3); font-size: var(--fs-body); line-height: 1.45; }
.pjmsgacts { display: flex; flex-wrap: wrap; gap: var(--s3); }
.pjtabs { margin-bottom: var(--s4); max-width: 360px; }
.pjpanel { display: flex; flex-direction: column; gap: var(--s3); min-height: 60px; }
.pjrow { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); }
.pjrowt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pjrowt b { font-size: var(--fs-body); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.pjrowt small { font-size: var(--fs-body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pjrow .btn { flex: none; }
.pjmade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); }
.pjmadeitem { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; min-width: 0; transition: border-color .2s, transform .2s var(--ease); }
.pjmadeitem:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.pjmadeimg { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--r-control); overflow: hidden; background: var(--surface-2); color: var(--muted); }
.pjmadeimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pjmadet { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pjmadet b { font-size: var(--fs-body); font-weight: var(--fw-strong); }
.pjmadet small { font-size: var(--fs-sm); color: var(--muted); }
.pjkeep { margin: var(--s5) 0 0; }
.pjkeep p { margin: 0 0 var(--s3); font-size: var(--fs-body); line-height: 1.45; }
.pjkeep p span { color: var(--muted); }
.pjforget { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s5) 0 0; padding-top: var(--s4); }
.pjforget .mini { margin: 0; }
.link.danger { color: var(--danger); }
@media (pointer: coarse) { .pjname { cursor: pointer; } .pjacts .pjopen, .pjacts .pjmore { min-height: 44px; } .pjacts .pjmore { width: 44px; } }
/* a phone: a list, one row per project, the thumbnail small */
@media (max-width: 560px) {
  .pjgrid { grid-template-columns: 1fr; gap: var(--s3); }
  .pjnew { flex-direction: row; justify-content: flex-start; min-height: 76px; padding: var(--s4) var(--s4); text-align: left; gap: var(--s4); }
  .pjnewic { width: 46px; height: 46px; border-radius: var(--r-card); }
  .pjnewt b { font-size: var(--fs-head); }
  .pjcard { display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-areas: 'th body' 'acts acts'; gap: var(--s3) var(--s4); padding: var(--s3); }
  .pjthumb { grid-area: th; width: 60px; height: 60px; }
  .pjbody { grid-area: body; justify-content: center; }
  .pjacts { grid-area: acts; margin-top: 0; }
  .pjhead { flex-wrap: wrap; gap: var(--s4); }
  .pjhthumb { width: 64px; height: 64px; border-radius: var(--r-card); }
  .pjname.big { font-size: var(--fs-display); }
  .pjhead .pjopen { flex: 1 1 100%; min-height: 44px; }
  .pjrow { flex-wrap: wrap; }
  .pjrow .btn { flex: 1 1 100%; min-height: 44px; }
  .pjadd .pjchoose { flex: 1 1 100%; min-height: 46px; }
  .pjmade { grid-template-columns: 1fr; }
  .pjmadeitem { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .pjnew, .pjmadeitem { transition: none; } .pjnew:hover, .pjmadeitem:hover { transform: none; } }
/* ===== end v64 ===== */

/* a project page is about one recording: the new-recording tools wait on the grid */
#s1.pjpagev #recRow { display: none; }

/* ===== v65: "Where will it go?" fits a phone without scrolling, groups folded behind their own More, Saved, How was that? ===== */
/* the four places are one row of four on a phone (it was a sideways row that needed a swipe); the shape's frame sits above its name */
@media (max-width: 460px) {
  #s3.sh .plchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); overflow: visible; margin: 0; padding: 2px 0 var(--s1); scroll-snap-type: none; }
  #s3.sh .plchip { flex-direction: column; justify-content: center; align-items: center; gap: var(--s1); min-height: 50px; padding: var(--s2) 2px; text-align: center; white-space: normal; font-size: var(--fs-sm); line-height: 1.15; letter-spacing: -0.005em; }
  #s3.sh .plchip .pl { overflow-wrap: normal; text-wrap: balance; }
  #s3.sh .plchip .pfr { height: 13px; max-width: 24px; }
  #s3.sh .pcard { min-height: 54px; }
}
/* a short phone (375 x 667): the half sheet shows 225 px; the line under Make it for me waits, the purposes keep to a name, and
   the padding between the bubbles tightens so Make it for me, What is this for? and Where will it go? are all in view */
@media (max-width: 460px) and (max-height: 700px) {
  #s3.sh #autoPane > .sec.vstart { padding: 0 0 var(--s1); }
  #s3.sh #autoPane > .sec.vstart .cauto { min-height: 44px; margin-bottom: 0; }
  #s3.sh #autoPane > .sec.bubbles { gap: var(--s1); padding: var(--s2) 0 2px; }
  #s3.sh .bubbles .bub > h3 { margin-bottom: 2px; font-size: var(--fs-body); line-height: 1.25; }
  #s3.sh .pcards { padding-bottom: 2px; }
  #s3.sh .pcard { flex-basis: 140px; min-height: 42px; padding: var(--s2) var(--s3); justify-content: center; }
  #s3.sh .pcard small { display: none; }
  #s3.sh .plchip { min-height: 50px; padding: var(--s1) 2px; }
}

/* ---- v65: the quiet "Saved" (util.js CC.saved): in the header on a computer, top left of the preview on a phone ---- */
.savedmk { display: inline-flex; align-items: center; gap: var(--s2); flex: none; min-width: 66px; margin-left: var(--s3); font-size: var(--fs-sm); line-height: 1; color: var(--muted); opacity: 0; transition: opacity .25s ease; pointer-events: none; white-space: nowrap; -webkit-user-select: none; user-select: none; }
.savedmk.on { opacity: 1; }
.savedmk .ico { flex: none; color: var(--accent); }
.savedmk.warn { color: var(--warning); pointer-events: auto; cursor: help; font-weight: var(--fw-strong); }
.savedmk.warn .ico { display: none; }
.savedmk.warn::before { content: '!'; flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; font-size: var(--fs-sm); font-weight: var(--fw-strong); line-height: 1; }
.savedmk.ph { display: none; }
#s3.sh .s3head .savedmk { display: none; }
#s3.sh .savedmk.ph { transition: none; }
#s3.sh .savedmk.ph { display: inline-flex; position: absolute; top: 4px; left: 12px; z-index: 6; min-width: 0; margin: 0; padding: var(--s1) var(--s3) var(--s1) var(--s2); border-radius: 999px; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--text); font-size: var(--fs-sm); }
.bphead .savedmk { margin: 0 var(--s3) 0 auto; align-self: center; }
@media (prefers-reduced-motion: reduce) { .savedmk { transition: none; } }

/* ---- v68: "Pick up where you left off" (recover.js): one calm card at the top of the home, only when something is unfinished ---- */
.resumecard { display: flex; align-items: center; gap: var(--s4); margin: 0 0 var(--s5); padding: var(--s4) var(--s4); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: var(--r-card); background: radial-gradient(520px 160px at 0% 0%, var(--accent-soft), transparent 70%), var(--surface); box-shadow: var(--shadow-sm); }
.resumecard.hidden { display: none; }
#s1.out > #resumeCard { order: -1; }
#s1 > #resumeCard { max-width: 1080px; }
.rcic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); }
.rctext { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.rctext b { font-size: var(--fs-body); color: var(--text); }
.rcline { font-size: var(--fs-body); color: var(--text); overflow-wrap: anywhere; }
.rcsub { font-size: var(--fs-body); color: var(--muted); }
.rcacts { display: flex; align-items: center; gap: var(--s4); flex: none; flex-wrap: wrap; justify-content: flex-end; }
.rcacts .link { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-body); min-height: 36px; padding: 0 var(--s1); }
.rcacts .btn { min-height: 44px; }
@media (max-width: 640px) {
  .resumecard { flex-wrap: wrap; align-items: flex-start; padding: var(--s4); }
  .rctext { flex-basis: calc(100% - 56px); }
  .rcacts { flex: 1 1 100%; justify-content: flex-start; }
  .rcacts { gap: var(--s3) var(--s4); }
  .rcacts .btn.primary { flex: 1 1 100%; }
  .rcacts .link { min-height: 40px; }
}

/* ---- v65: "How was that?" under a finished video (feedback.js): one quiet line, never a pop-up ---- */
.fbcard { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--s3); margin: var(--s4) 0 0; padding: var(--s1) var(--s2) var(--s1) var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); color: var(--muted); font-size: var(--fs-body); animation: fbIn .28s ease both; }
.fbcard .fbq { color: var(--text); font-weight: var(--fw-strong); margin-right: auto; padding: var(--s2) 0; }
.fbcard .fbb { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.fbcard .fbb:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
.fbcard .fbb:active { transform: scale(.96); }
.fbcard .fbb:focus-visible, .fbcard .fbx:focus-visible, .fbcard input:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.fbcard .fbx { flex: none; min-height: 44px; padding: 0 var(--s2); font-size: var(--fs-body); color: var(--muted); }
.fbcard.note { padding: var(--s2) var(--s3) var(--s2) var(--s4); gap: var(--s2) var(--s3); }
.fbcard.note .fbq { flex: 1 0 100%; margin: 0; padding: var(--s1) 0 0; order: 1; }
.fbcard.note input { order: 2; flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body); }
.fbcard.note .btn { order: 3; flex: none; min-height: 44px; }
.fbcard.note .fbx { order: 4; }
.fbcard.note .fbhint { order: 5; flex: 1 0 100%; margin: 0 0 2px; }
@keyframes fbIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fbcard { animation: none; } .fbcard .fbb:active { transform: none; } }

/* ---------- v66: the Autopilot draft (autopilot.js) ---------- */
/* the strip: "Draft", what it is for, and three things to do. Desktop: top of the stage. Phone: top of the Auto sheet. */
.draftstrip { display: grid; gap: var(--s3); width: 100%; max-width: 560px; flex: none; padding: var(--s3) var(--s4); border-radius: var(--r-card); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); animation: fbIn .3s var(--ease) both; }
.draftstrip .dshead { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.draftstrip .dsbadge { flex: none; padding: 2px var(--s3); border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: .03em; }
.draftstrip .dstxt { min-width: 0; font-size: var(--fs-body); line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.draftstrip .dsact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.draftstrip .dsact .btn { min-height: 38px; }
.draftstrip .dsoff { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); }
#s3.dk #viewer .draftstrip { margin: -4px 0 2px; }
#s3.dk.hasdraft #frame #prev { max-height: calc(100cqh - 112px - 92px); }
@supports not (height: 1cqh) { #s3.dk.hasdraft #frame #prev { max-height: calc(100dvh - 56px - var(--dkTl, 212px) - 242px); } }
/* a phone: the card is the first thing in the Auto sheet; three equal buttons, the quiet link under them */
#s3.sh .draftstrip { max-width: none; margin: 2px 0 var(--s3); padding: var(--s3) var(--s3); gap: var(--s2); }
#s3.sh .draftstrip .dsact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
#s3.sh .draftstrip .dsact .btn { min-height: 44px; padding: var(--s2) var(--s1); font-size: var(--fs-body); line-height: 1.15; white-space: normal; text-wrap: balance; }
#s3.sh .draftstrip .dsoff { grid-column: 1 / -1; margin: 0; padding: var(--s1) 0 0; text-align: center; font-size: var(--fs-sm); }
/* while the draft is being made the plain studio is covered, so the first thing seen is the draft */
.draftveil { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-strong); text-align: center; }
.draftveil .spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: ecspin .9s linear infinite; }
/* the three-step coach: a small card by the strip (or by Make video), one at a time, with Skip */
.dscoach { position: fixed; z-index: 70; box-sizing: border-box; padding: var(--s4) var(--s4); border-radius: var(--r-card); background: var(--surface); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 12px 32px rgba(8, 14, 30, .28); animation: fbIn .25s var(--ease) both; }
.dscoach p { margin: 0 0 var(--s3); font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1.35; }
.dscoach .dscrow { display: flex; align-items: center; gap: var(--s4); }
.dscoach .dscn { margin-right: auto; font-size: var(--fs-sm); color: var(--muted); }
.dscoach .link { font-size: var(--fs-body); }
/* the waiting screen: the two choices, compact; the page scrolls if it has to */
.wparts { color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -6px; }
.wparts.hidden, .wsetup.hidden { display: none; }
.wsetup { display: grid; gap: var(--s4); margin-top: var(--s1); padding: var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface-2); }
.wsetup .wsh { margin: 0; font-size: var(--fs-body); line-height: 1.4; color: var(--muted); }
.wsetup .wsh b { color: var(--text); font-weight: var(--fw-strong); }
.wsetup .wsq > h3 { margin: 0 0 var(--s2); font-size: var(--fs-body); }
.wschips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.wschips .plchip { min-height: 44px; background: var(--surface); }
.wschips .plchip.on { background: var(--accent-soft); }
.wschips .plchip .pl { overflow-wrap: normal; }
.wschips .wsi { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent); }
.wsetup .wsname { display: grid; gap: var(--s1); font-size: var(--fs-body); color: var(--muted); }
.wsetup .wsname.hidden { display: none; }
.wsetup .wsname input { width: 100%; box-sizing: border-box; min-height: 44px; padding: var(--s2) var(--s4); border-radius: var(--r-control); border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body); }
.wsetup .wsname input:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; }
@media (min-width: 720px) { .wschips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 440px) { .wschips .wsi { display: none; } .wschips .plchip { padding: var(--s2) var(--s3); font-size: var(--fs-sm); } }
/* the switch under the moments on Pick a moment */
.apfoot { margin: var(--s2) 0 0; }
.apfoot .link { font-size: var(--fs-body); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .draftstrip, .dscoach, .draftveil .spin { animation: none; } }

/* v67 (R3): skeletons, not spinners. Grey shapes where the real thing will be, with one slow light moving across (off for
   reduced motion). Both themes use the page's own surface and line colors. */
.skel { display: block; position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-control); }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--edge-hi), transparent); animation: skelrun 1.5s ease-in-out infinite; }
@keyframes skelrun { to { transform: translateX(100%); } }
.skelgrid { display: grid; gap: var(--s3); }
.skelgrid .skel { border: 1.5px solid var(--line); border-radius: var(--r-control); }
.skellines { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s1) 0; }
.skellines .skel { height: 12px; border-radius: var(--r-control); }
.skelwrap { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s1); }
.skelwrap.hidden { display: none; }
.skelcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.skelcards .skel { height: 64px; border-radius: var(--r-card); border: 1px solid var(--line); }
.lkwait { align-items: center; justify-content: center; padding: 85px var(--s5) var(--s5); animation: none; }
.lkwgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); width: min(980px, 100%); }
.lkwgrid .skel { aspect-ratio: 9 / 16; background: #121936; border-radius: var(--r-card); }
.lkwgrid .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; transform: none; opacity: 0; } }

/* v67 (R3): until the studio's code has arrived on a wide screen, the account and brand buttons are not in the page header
   (the desktop shell moves them into the studio's header when it runs; app.js sets this class by the same test). */
html.dkpre .top > .topright { display: none; }

/* ======================================================================================================================
   v69 (R5, "Everyone"): accessibility. One focus ring, a skip link, quiet headings, contrast and forced-colors modes.
   ====================================================================================================================== */
/* text for screen readers only (the heading of a screen whose design carries its own title) */
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
/* the skip link: the first stop of every screen, seen only when it has focus */
.skip { position: fixed; left: 12px; top: 12px; z-index: 100000; padding: var(--s3) var(--s5); min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--r-control); background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-strong); text-decoration: none; transform: translateY(-160%); transition: transform .12s var(--ease); box-shadow: var(--shadow-sm); }
.skip:focus, .skip:focus-visible { transform: none; }
/* a place focus is sent to by the page (a screen's heading, the main part) is not a control: no ring on it */
main:focus, h1:focus, h2:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
h1[tabindex="-1"]:focus-visible, main:focus-visible { outline: none; }

/* ONE focus ring, everywhere: a 3 px ring in the focus color (9:1 on the page in light, 12:1 in dark) 2 px off the control,
   with a thin halo in the page color so it also reads on photos, the preview and a filled button. Every older, local
   focus rule above keeps its place but loses to this one. */
:root { --ring-halo: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ring-halo: #0B1026; } }
:root[data-theme="dark"] { --ring-halo: #0B1026; }
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px !important; }
:is(button, a, summary, [role="button"], [role="tab"], [role="option"], [tabindex]):focus-visible { box-shadow: 0 0 0 2px var(--ring-halo); }
#s3 #ptabs button:focus-visible, .subtabs .sgtab:focus-visible, .mfh:focus-visible, .cwh:focus-visible, .sclr:focus-visible { outline-offset: -3px !important; }
.wave .grip:focus-visible::after { box-shadow: 0 0 0 3px var(--ring-halo), 0 0 0 6px var(--focus); }
input[type='text']:focus-visible, input[type='email']:focus-visible, input[type='search']:focus-visible, input[type='password']:focus-visible, textarea:focus-visible { outline-offset: 1px !important; }
.scrsearch input:focus-visible, .cmdkq input:focus-visible { outline: none !important; }   /* the box around it shows the focus */
.scrsearch:focus-within, .cmdkq:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
/* a heart on a tile is not a control of its own (the tile is): it shows while its tile has focus, and the H key toggles it */
.tile:focus-visible .heart, .ctile:focus-visible .heart, .scard:focus-visible .heart, .ttile:focus-visible .heart, .tile:focus-within .heart, .ctile:focus-within .heart, .ttile:focus-within .heart { opacity: 1; }
span.heart { cursor: pointer; }
.capx { cursor: pointer; }
.ctile:focus-visible .capx, .ctile:focus-within .capx { opacity: 1; }
/* a layer row: the name is the control, the eye and the lock sit beside it */
button.lname { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; align-self: stretch; }
.layrow:focus-within { border-color: var(--focus); }

/* touch: the actions people press with a thumb are at least 44 x 44 */
@media (pointer: coarse) {
  .btn.primary, .btn.big, #exportTop, #exportBtn, #trySample, #toStudio, #rcGo, #resSave, #cExport, #dkMake { min-height: 44px; }
  .slcustom summary, .slown summary, .more > summary { min-height: 44px; display: flex; align-items: center; }
}

/* a longer word, a bigger default font, a narrow phone (320 px): nothing runs off the side */
@media (max-width: 360px) {
  .top { gap: var(--s3); }
  .btn { max-width: 100%; }
}

/* more contrast, when the system asks for it: stronger edges and quieter text made louder */
@media (prefers-contrast: more) {
  :root { --line: #4A5A74; --muted: #2E3C52; --edge-hi: #C9D3E6; --accent-soft: rgba(17, 84, 241, .16); }
  .btn, .chip, .tile, .ctile, .card, .layrow, .seg, .seg button, input, select, textarea, .sltile, .scard, .ttile, .heart { border-color: var(--text); }
  .btn:not(.primary):not(.ghost), .chip { border-width: 2px; }
  ::placeholder { color: var(--muted); opacity: 1; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --line: #9FB0CF; --muted: #E3EAF8; --edge-hi: rgba(255, 255, 255, .4); --accent-soft: rgba(179, 145, 255, .26); }
}
@media (prefers-contrast: more) { :root[data-theme="dark"] { --line: #9FB0CF; --muted: #E3EAF8; --edge-hi: rgba(255, 255, 255, .4); } }

/* forced colors (Windows high contrast): borders and a mark stand in for the colors that are taken away, nothing vanishes */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight !important; box-shadow: none !important; }
  .btn, .chip, .tile, .ctile, .seg button, .layrow, .sltile, .scard, .ttile, .iconbtn, .lbtn, .heart, .frbtn, .sgtab, #ptabs button, .step, .skip { border: 1px solid ButtonText; }
  .on, [aria-pressed="true"], [aria-selected="true"], .tile.on, .ctile.on, .chip.on, .layrow.on, .sgtab.on, #ptabs button.on { outline: 3px solid Highlight; outline-offset: -3px; }
  .heart.on svg, .lkheart[aria-pressed="true"] svg { forced-color-adjust: none; color: Highlight; }
  .bar, .bar > i, .dockprog .bar, .wbar { border: 1px solid ButtonText; }
  .bar > i { background: Highlight !important; forced-color-adjust: none; }
  .savedmk, .dsbadge { border: 1px solid CanvasText; }
  .sc-dots button::before { background: ButtonText; forced-color-adjust: none; }
  .sc-dots button.on::before { background: Highlight; }
  .skel { border: 1px dashed GrayText; }
  svg { forced-color-adjust: auto; }
}

/* reduced motion: nothing moves that is not the thing the person asked to see. Earlier rules switch off the named
   animations; this closes the rest (shimmers, the finish bloom, springs, smooth scrolling) in one place. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .fin-bloom, .skel::after { display: none !important; }
}

/* v69: the keyboard's place in the transcript */
#transcript span.kbcaret { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: 4px; }
#transcript:not(:focus-within) span.kbcaret { outline: none; }

/* v69: a 320 px phone (what is wider than 360 px is left exactly as it was). Nothing is wider than the screen: the headline wraps, the two showcase cards share the row, the
   header's names and the three steps shrink to fit. */
@media (max-width: 360px) {
  main { padding-left: var(--s4); padding-right: var(--s4); }
  .top { padding-left: var(--s4); padding-right: var(--s4); gap: var(--s3); }
  .brand .bname { font-size: var(--fs-head); }
  .step { padding: var(--s2) var(--s1); font-size: var(--fs-sm); }
  .intro h1, .herotext h1 { font-size: var(--fs-hero); }
  .gt { white-space: normal; }
  .showcase { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
  .showcase figure, .sc-post, .sc-phone { min-width: 0; max-width: 100%; }
}
@media (max-width: 560px) {
  .gt { white-space: normal; }   /* the headline's second line may wrap (a larger default font) */
  .bphead { flex-wrap: wrap; row-gap: var(--s3); }
  .bphead > div { min-width: 0; flex: 1 1 140px; }
  .sc-acts { display: none; }   /* the like, share and save marks of the example post: room for 26 px dots */
  .showcase { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
  .showcase figure, .sc-post { min-width: 0; }
}
@media (max-width: 360px) {
  .sc-acts { display: none; }
  .bphead { flex-wrap: wrap; gap: var(--s3) var(--s4); }
  .bphead .savedmk { margin-left: 0; }
  .bphead > div { min-width: 0; flex: 1 1 140px; }
}
@media (max-width: 340px) {
  .top { padding-left: var(--s3); padding-right: var(--s2); gap: var(--s1); }
  .brand { gap: var(--s2); }
  body.landing .toplinks { gap: 0; }
}
.keysopt { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s4); padding-top: var(--s4); font-size: var(--fs-body); color: var(--muted); }
.keysopt input { margin-top: 3px; }

/* the ring on the dark toast, and on the picture (the preview): white, with a dark halo, so it reads on anything */
.toast :focus-visible { outline-color: var(--bg) !important; box-shadow: none; }
.frame :focus-visible, .lkstage :focus-visible, .viewer .frbtn:focus-visible { outline-color: #FFFFFF !important; box-shadow: 0 0 0 2px #0B1026, 0 0 0 5px rgba(11, 16, 38, .55); }
.sc-post :focus-visible { outline-color: #3B1BCE !important; box-shadow: none; }   /* the showcase post is a white card in both themes */
/* group tabs: a long name wraps onto a second line instead of being cut (a larger default font, 200 percent zoom) */
.subtabs { height: auto; min-height: 40px; }
.subtabs .sgtab { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.15; padding: var(--s2) var(--s2); display: flex; align-items: center; justify-content: center; text-align: center; }
@media (max-width: 560px) {
  .steps { flex-wrap: wrap; border-radius: var(--r-card); }   /* three names that do not fit in a row (a larger default font) go to a second row */
}

/* ===== v70: native feel, release R6 of docs/PLAN-GREATEST-UX.md (W7). Tablets and in-between sizes use the rail shell (shell.js,
   from 768 px; the phone shell is up to 767 px, a small window on its side and a phone on its side). Nothing here changes a
   phone (390 x 844) or a 1440 x 900 window: every rule below is for a width in between, a touch screen, or an installed app. ===== */

/* --- 768 to 1099: a narrower rail and drawer, a header that fits, the drawer can step aside --- */
@media (max-width: 1099px) {
  #s3.dk { grid-template-columns: 72px 336px minmax(0, 1fr) 0; }
  #s3.dk .s3head { gap: var(--s1); padding: 0 var(--s2); }
  #s3.dk #backBtn { width: 40px; min-width: 40px; height: 38px; padding: 0; justify-content: center; }
  #s3.dk #backBtn span { display: none; }
  #s3.dk .s3head .brandbtn { max-width: none; padding: 0 var(--s2); }
  #s3.dk .s3head .brandbtn .bsw-name, #s3.dk .s3head .brandbtn > .ico { display: none; }
  #s3.dk .dkshape { margin: 0 2px; }
  .dkmake { margin-left: var(--s1); }
  #s3.dk.dkdrawerx { grid-template-columns: 72px 0 minmax(0, 1fr) 0; }
  #s3.dk.dkdrawerx .side { display: none; }
  #s3.dk.dkdrawerx.dkselon:not(.dkw) { grid-template-columns: 72px 336px minmax(0, 1fr) 0; }
}
/* Selected: below 1060 it takes the drawer's place (a popover would cover the preview) */
@media (max-width: 1059px) {
  #s3.dk:not(.dkw) .dkright { grid-area: drawer; inset: 0; width: auto; height: auto; margin: 0; align-self: stretch; justify-self: stretch; max-height: none; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; z-index: 9; }
  #s3.dk:not(.dkw) .dkpanel#dkSel { max-height: none; height: 100%; }
}
/* a narrow stage: the voice and music mix wraps to two rows and the preview keeps clear of it */
@container (max-width: 430px) {
  #s3.dk #viewer .mixbar { flex-wrap: wrap; row-gap: 0; }
  #s3.dk #viewer .mixbar label { flex: 1 1 100%; }
  #s3.dk #frame #prev { max-height: calc(100cqh - 150px); }
}
/* the timeline's thin bar and its hint have less room */
@media (max-width: 899px) {
  #s3.dk #laneBox #laneHint { display: none; }
}

/* --- a finger: 44 px targets in the rail shell, and nothing that only shows on hover --- */
@media (pointer: coarse) {
  #s3.dk .dkic { width: 44px; height: 44px; }
  #s3.dk #backBtn { min-height: 44px; height: 44px; }
  .dkmake .dkmakeb, .dkmake .dkmakec { min-height: 44px; }
  .dkmake .dkmakec { min-width: 44px; padding: 0 var(--s4); }
  #s3.dk .dkshape, #s3.dk .s3head .brandbtn { min-height: 44px; height: 44px; }
  #s3.dk .s3head .topright .acct { width: 44px; height: 44px; }
  #s3.dk .dkctxb { height: 44px; }
  #s3.dk .dktabs button { height: 44px; }
  #s3.dk .frbtn { width: 44px; height: 44px; }
  #s3.dk #laneBox .lzb { min-width: 44px; height: 44px; }
  #s3.dk #laneBox .track { height: 44px; }
  .dkmx { height: 44px; }
  .dkmini { height: 48px; }
  #s3.dk.dktlc { --dkTl: 48px; }
  .dkmb { height: 32px; }
  .sltile .slx { width: 32px; height: 32px; top: 5px; left: 5px; }
  /* long-press does not open a menu or a callout where a hold means "start choosing" */
  .sclr, .sclr *, .transcript span, #s3 .track, #s3 .lanescroll, .dkmb, .shhead, .ctxbar, .dkctx { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  /* the timeline pans sideways and up and down by itself; its own pinch and drags are handled in lanes.js */
  .lanescroll { touch-action: pan-x pan-y; }
}
@media (hover: none) { .sltile .slx { opacity: 1; } }

/* --- iPhone and iPad (installed or not): the page's own bars keep out of the notch, the home bar and the keyboard --- */
.newver { bottom: calc(18px + env(safe-area-inset-bottom)); }
#s3.dk { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
html:has(#s3.dk:not(.hidden)), html:has(#s3.dk:not(.hidden)) body { overscroll-behavior: none; }
html.app { overscroll-behavior-y: contain; }   /* an installed app: a pull from the top does not reload the page under a sheet drag */
@supports (height: 1dvh) {
  .bsw-list { max-height: 46dvh; }
  .tpop.sheet { max-height: 60dvh; }
  .tpop.sheet .tpc { max-height: 36dvh; }
  #s3.sh #laneBox { max-height: 40dvh; }
  #s3.sh #resVideo { max-height: 28dvh; }
  #s3.sh.land #resVideo { max-height: 60dvh; }
  .bwbox { max-height: 92dvh; }
  .cmdk { padding-top: min(14dvh, 120px); }
  .cmdkbox { max-height: min(70dvh, 560px); }
  #s3.dk:not(.dkw) .dkpanel#dkSel { max-height: calc(100dvh - 220px); }
}
@supports (height: 1dvh) {
  @media (min-width: 700px) { .bwbox { max-height: 86dvh; } }
}
@media (max-width: 1059px) {
  #s3.dk:not(.dkw) .dkpanel#dkSel { max-height: none; }
}

/* --- a file dragged onto the window (Finder or Explorer): one calm card, anywhere (platform.js) --- */
.windrop { z-index: 2500; }
.windrop .dropallin { max-width: min(460px, calc(100vw - 48px)); padding: var(--s6) var(--s7); }
.windrop.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .windrop { animation: none; } }
.windlg { width: min(440px, calc(100vw - 32px)); padding: var(--s5) var(--s5); }
.windlg .windlgp { margin: var(--s3) 0 var(--s5); line-height: 1.5; overflow-wrap: anywhere; }
.windlg .windlgb { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: flex-end; }
.windlg .windlgb .btn { min-height: 44px; }
/* a drawer of 336 px: the group tabs keep their whole words (the longest, Background, is smaller and closer) */
@media (max-width: 1099px) {
  #s3.dk .subtabs .sgtab { padding: var(--s2) var(--s1); font-size: var(--fs-sm); letter-spacing: -0.02em; overflow-wrap: normal; min-width: min-content; }
  #s3.dk .subtabs { gap: 0; }
}
/* Pick a moment on a tablet: two moments share the row (a third peeks), not one and a half */
@media (min-width: 700px) and (max-width: 1099px) {
  #s2 .suggrow > .sugg { flex: 0 0 calc(50% - 5px); }
  #s2 .suggrow > .sugg:only-child { flex-basis: 100%; }
}
.installcard .mark img { display: block; width: 100%; height: 100%; border-radius: 10px; }
/* a phone on its side: the dock's main buttons are a thumb's size (they were 40 px there) */
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) { #s2 #toStudio, #s2 #moreSel, #s2 #addPart { min-height: 44px; } }

/* v71 (R7): the church-year line on the home screen, its three looks, and the quiet bloom behind a delight toast */
.seasonline { margin: 0 0 var(--s5); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); }
.seasonline.hidden { display: none; }
.snrow { display: flex; align-items: center; gap: var(--s3); min-height: 44px; }
.sntext { flex: 1; min-width: 0; font-size: var(--fs-body); color: var(--text); line-height: 1.35; }
.sngo { flex: none; min-height: 44px; padding: 0 var(--s2); font-weight: var(--fw-strong); font-size: var(--fs-body); }
.snx { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.snx:hover { background: var(--surface-2); color: var(--text); }
.snlooks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); padding: var(--s1) var(--s2) var(--s2) 0; }
.snlooks.hidden { display: none; }
.snwait { grid-column: 1 / -1; margin: var(--s2) 0; }
.snlook { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--bg); color: var(--text); text-align: left; cursor: pointer; min-height: 56px; min-width: 0; transition: border-color .15s; }
.snlook:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.sntile { flex: none; position: relative; width: 40px; height: 40px; border-radius: var(--r-control); display: grid; place-items: center; font: 700 0.9375rem/1 var(--font-display, inherit); overflow: hidden; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.sntile i { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px; border-radius: 2px; }
.sntx { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sntx b { font-size: var(--fs-body); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sntx small { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .snlooks { grid-template-columns: 1fr; }
  .snrow { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s2); row-gap: 0; align-items: center; padding-top: var(--s2); }
  .sntext { grid-column: 1; }
  .snx { grid-column: 2; grid-row: 1; }
  .sngo { grid-column: 1; grid-row: 2; justify-self: start; padding: 0; }
}
#s1.pjpagev > #seasonNudge, #s1.recording > #seasonNudge, #s1:not(.signed) #seasonNudge { display: none; }
.toast.delight { position: relative; overflow: hidden; }
.toast.delight::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%), radial-gradient(circle at 75% 60%, #f5c542, transparent 55%); opacity: 0; pointer-events: none; animation: delightBloom .9s var(--ease, ease-out) .1s both; }
.toast.delight span { position: relative; }
@keyframes delightBloom { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: .38; } 100% { opacity: 0; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .toast.delight::before { animation: none; opacity: 0; } }

/* Calm pass (2026-10-13): everything sits a touch smaller so there is room to move.
   Type is rem, so one root value scales it; gaps and padding were widened in place (tools/calm.py).
   Respects a larger system text size because it is a percentage, not a pixel size. */
html { font-size: 95%; }
@media (max-width: 400px) {
  .top { padding-left: var(--s3); padding-right: var(--s3); gap: var(--s2); }
  .brand { gap: var(--s2); min-width: 0; }
  .brand .bname { font-size: var(--fs-head); }
  body.landing .toplinks { gap: var(--s2); flex: none; }
  body.landing #topSignin { padding-left: var(--s3); padding-right: var(--s3); }
}

/* ---------- v74 (C1 Calm) ---------- */
.ccmenu .ccsep { flex: none; height: 1px; margin: var(--s1) var(--s2); background: var(--line); }
#s3.dk .dkname { flex: 0 1 auto; min-width: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: var(--s2); font-size: var(--fs-body); font-weight: var(--fw-strong); letter-spacing: -0.005em; }
#s3.dk .s3head #openBrand, #s3.dk .s3head .installbtn { display: none; }
#s3.dk .s3head .topright { margin-left: var(--s1); }
#s3.dk .dkmake { margin-left: var(--s2); }
#s3.dk .dkshape { align-self: center; flex: none; min-height: 30px; margin: 0; padding: 0 var(--s3); font-size: var(--fs-body); }
#s3.dk .dkshape .ico { margin-left: 2px; }
#s3.dk #laneBox .lanehead .meta { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; margin-left: var(--s1); }
@media (max-width: 1279px) { #s3.dk #laneBox .lanehead .meta { display: inline; } }

/* the preview's "..." and the timeline's "..." (calm.js) */
.frbtn.fmore, .frmenu { display: none; }
#s3.dk .frbtn.fmore { display: grid; right: 10px; }
#s3.dk .frbtn.lay { right: 52px; }
#s3.dk #safeBtn, #s3.dk #remixBtn { display: none; }
#s3.dk .frmenu { position: absolute; z-index: 6; top: 52px; right: 10px; flex-direction: column; min-width: 232px; padding: var(--s2); border-radius: var(--r-control); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(8, 14, 30, .28); }
#s3.dk .frmenu:not(.hidden) { display: flex; }
.frmi { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3); border: 0; border-radius: var(--r-control); background: none; color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-strong); text-align: left; cursor: pointer; }
.frmi:hover { background: var(--surface-2); }
.frmi[aria-pressed="true"] { color: var(--accent); }
.frmi[hidden] { display: none; }
#laneBox .lanehead { position: relative; }
.tlmenu { position: absolute; z-index: 12; top: calc(100% + 4px); right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 232px; padding: var(--s2); border-radius: var(--r-control); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(8, 14, 30, .28); }
.tlmenu.hidden { display: none; }
.tlmenu > * { margin: 0; }
.tlmenu .lanezoom { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s1) var(--s2); }
.tlmenu .lanezoom.hidden { display: none; }
.tlmenu #keysBtn, .tlmenu #clearBroll, .tlmenu .dktlx { display: flex; justify-content: flex-start; gap: var(--s3); width: auto; min-height: 38px; padding: 0 var(--s3); border: 0; background: none; font-size: var(--fs-body); font-weight: var(--fw-strong); }
.tlmenu #keysBtn::after { content: 'Keys and gestures'; }
.tlmenu #clearBroll.hidden { display: none; }
#laneBox.hintoff #laneHint { display: none; }
/* the right column's Script and Selected tabs show only while something is picked: Script alone is just its lines */
#s3.dk.dkw .dktabs:has(#dkTabSel:not(.has)):has(#dkTabScript[aria-selected="true"]) { display: none; }
/* the Script column is its lines: the search is a magnifier that opens in place (script.js) */
.scrfind { margin-left: auto; width: 40px; height: 40px; border-radius: var(--r-control); }
#scrHead:not(.srch) .scrsearch { display: none; }
#scrHead.srch .scrfind { display: none; }
#scrHead:not(.srch) { padding-bottom: 2px; }
/* the drawer's tab row: its on/off switch is a small switch at the end of the row (tabs.js, beside the tablist); one "Adjust" fold per group */
.sgrow { position: relative; z-index: 3; display: flex; align-items: center; gap: var(--s1); margin: 0 0 var(--s3); }
.sgrow .subtabs { flex: 1 1 auto; min-width: 0; position: relative !important; top: auto !important; margin: 0 !important; }
#s3.dk .sgrow, #s3.sh .sgrow { position: sticky; z-index: 4; margin: var(--s1) 0 var(--s3); }
#s3.dk .sgrow { top: 52px; }
#s3.sh .sgrow { top: 46px; z-index: 6; }
.sgrow::before { content: ''; position: absolute; z-index: -1; inset: -4px -16px -6px -16px; background: var(--surface); }
.sgsw { flex: none; display: grid; place-items: center; min-width: 46px; min-height: 44px; border-radius: 999px; cursor: pointer; }
.sgsw input { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; }
.sgsw input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s var(--ease); }
.sgsw input:checked { background: var(--accent); }
.sgsw input:checked::after { transform: translateX(14px); }
.sgsw input:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.adjhead { margin: var(--s4) 0 2px; font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; color: var(--muted); }
.adjhead:first-child { margin-top: var(--s1); }
/* one primary button per screen: Make video. Make it for me, in the drawer, is the same accent as a tint, not a second fill */
#s3.dk #makeIt, #s3.sh #makeIt { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
#s3.dk #makeIt:hover:not(:disabled), #s3.sh #makeIt:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 12%); }
#ideasMore .autotiles { padding-top: var(--s2); }
/* the volumes are one button on the transport (calm.js); the lane eyes and the caption handles show when the timeline is pointed at */
.mixbtn { display: none; }
#s3.dk .mixbtn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--r-control); background: none; color: var(--muted); cursor: pointer; }
#s3.dk .mixbtn:hover, #s3.dk .viewer.mixon .mixbtn { background: var(--surface-2); color: var(--text); }
#s3.dk #viewer .mixbar { display: none; }
#s3.dk #viewer.mixon .mixbar { display: flex; position: absolute; z-index: 7; left: 50%; bottom: 64px; transform: translateX(-50%); width: min(560px, calc(100% - 36px)); box-shadow: 0 10px 30px rgba(8, 14, 30, .28); }
@media (hover: hover) {
  #s3.dk #laneBox:not(:hover):not(:focus-within) .llab:not(.off) .llx, #s3.dk #laneBox:not(:hover):not(:focus-within) .cwh, #s3.dk #laneBox:not(:hover):not(:focus-within) .tmk:not(.set) { opacity: 0; }
}
#purposeBox .pcard small { display: none; }
.helpgone { display: none !important; }
/* "Where will it go?" is one button (purpose.js); the four chips stay in the page, folded */
#purposeBox #placeChips { display: none; }
.plbtn { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 44px; padding: var(--s2) var(--s4); border: 1.5px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-strong); text-align: left; cursor: pointer; }
.plbtn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.plbtn:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.vtpl .vttxt small { display: none; }
.dttile .dtsub { display: none; }
/* the finished-video card: Save video is the one primary, so Make video steps back while the card shows */
#s3.dk.dkexpon .dkmake .btn.primary { background: var(--surface); color: var(--text); border-color: var(--line); }
/* four group names fit a narrow drawer without breaking a word */
#s3.dk .subtabs .sgtab { overflow-wrap: normal; word-break: normal; hyphens: none; min-width: min-content; }
/* v74: the draft strip says what it is and has three buttons; "Don't start with a draft" is the toggle in More (one primary per screen: Make video) */
.draftstrip .dsoff { display: none; }
/* the Script column is its lines: what is on a line (Text, Footage...) shows for the line that is picked, pointed at or focused */
@media (hover: hover) {
  #s3.dk .scl:not(.on):not(:hover):not(:focus-within) .scc { visibility: hidden; }
}
#s3.sh[data-view="export"] #exportTop { background: var(--surface); color: var(--text); border-color: var(--line); }

/* v81 (R8 "Help and learning", docs/PLAN-GREATEST-UX.md W8): What's new, Tell us (tellus.js), the palette's answer card and
   Show me (learn.js). Tokens only; light and dark come from the theme's own colours. */
.acct { position: relative; }
.acct.hasnew::after { content: ''; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--bg); }
.ccmenu .wndot { display: inline-block; width: 8px; height: 8px; margin-left: var(--s2); border-radius: 50%; background: var(--text); vertical-align: middle; }
.tucard { position: fixed; z-index: 1100; top: 64px; right: var(--s4); width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 88px); overflow-y: auto; box-sizing: border-box; padding: var(--s4); border-radius: var(--r-card); background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(8, 14, 30, .28); animation: fbIn .2s var(--ease) both; }
.tuhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s2); }
.tuhead h2 { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); }
.tux { display: grid; place-items: center; width: 36px; height: 36px; margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)) 0 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.tux:hover { color: var(--text); background: var(--surface-2); }
.tutitle { margin: 0 0 var(--s2); font-size: var(--fs-head); font-weight: var(--fw-strong); line-height: 1.3; }
.tulist { margin: 0 0 var(--s3); padding-left: var(--s5); font-size: var(--fs-body); line-height: 1.5; }
.tulist li { margin: var(--s1) 0; }
.turow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s2) 0 0; }
.tumore { margin: var(--s3) 0 0; font-size: var(--fs-body); }
.tumore summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; color: var(--muted); font-weight: var(--fw-strong); }
.tumore h4 { margin: var(--s3) 0 var(--s1); font-size: var(--fs-body); font-weight: var(--fw-strong); }
.tuq { margin: 0 0 var(--s2); font-size: var(--fs-body); font-weight: var(--fw-strong); }
.tuquiet { margin: 0; color: var(--muted); font-size: var(--fs-body); }
.tuthumbs { margin: 0 0 var(--s3); }
.tucard .fbb { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.tucard .fbb[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tulab { display: block; margin: 0 0 var(--s1); font-size: var(--fs-sm); color: var(--muted); }
.tucard input[type="text"] { width: 100%; box-sizing: border-box; height: 44px; padding: 0 var(--s3); border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-body); }
.tuhint { margin: var(--s2) 0 0; }
@media (max-width: 600px) { .tucard { top: auto; bottom: var(--s4); right: var(--s4); left: var(--s4); width: auto; max-height: calc(100vh - 32px); } }
.cmdkcard { padding: var(--s3) var(--s3) var(--s4); }
.cmdkcard h2 { margin: 0 0 var(--s2); font-size: var(--fs-head); font-weight: var(--fw-strong); line-height: 1.3; }
.cmdkcard p { margin: 0 0 var(--s4); font-size: var(--fs-body); line-height: 1.55; }
.cmdkacts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lpring { position: fixed; z-index: 2090; pointer-events: none; border-radius: var(--r-control); box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px var(--accent-soft); transition: left .2s var(--ease), top .2s var(--ease), width .2s var(--ease), height .2s var(--ease); }
.lpcard { z-index: 2100; }
.lpcard .dscrow { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .tucard, .lpcard { animation: none; } .lpring { transition: none; } }

/* F3: present mode (slide decks): a full-screen black stage, the slide at its own shape, a quiet bar */
.cpresent { position: fixed; inset: 0; z-index: 400; background: #000; display: grid; place-items: center; }
.cpresent .cpcv { max-width: 100vw; max-height: 100vh; width: auto; height: auto; aspect-ratio: auto; object-fit: contain; }
.cpresent .cpbar { position: absolute; top: var(--s3); right: var(--s3); display: flex; align-items: center; gap: var(--s3); color: #fff; font-size: var(--fs-sm); opacity: 0.55; transition: opacity 0.2s; }
.cpresent .cpbar:hover, .cpresent .cpbar:focus-within { opacity: 1; }
.cpresent .cpn { font-variant-numeric: tabular-nums; }
.cpresent .cpnote { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s5); background: rgba(0, 0, 0, 0.82); color: #fff; font-size: var(--fs-head); line-height: 1.4; max-height: 40vh; overflow: auto; }
.cpresent .cpnote.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .cpresent .cpbar { transition: none; } }

/* Q0: Fix a picture (public/js/quick.js) */
.qkbox { max-width: 560px; }
.qkempty { text-align: center; padding: 28px 12px; display: grid; gap: 12px; justify-items: center; }
.qkstage { display: grid; place-items: center; background: var(--surface-2); border-radius: 12px; padding: 10px; }
.qkstage canvas { max-width: 100%; max-height: 42vh; width: auto; height: auto; border-radius: 6px; }
.qkchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.qkwords { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.qkwords input { flex: 1 1 180px; min-width: 0; }
.qkmake { margin: 10px 0; }
.qkmake summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.qkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
.qkgrid label { display: grid; gap: 4px; font-size: 13px; }
.qktrim { align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
/* L1: the book (public/js/book.js) */
.bkbox { max-width: 640px; }
.bklist { display: grid; gap: 14px; margin: 12px 0; max-height: 52vh; overflow: auto; }
.bkrow { display: grid; gap: 6px; }
.bkrow textarea { width: 100%; }
.bkt { flex: 1 1 200px; display: grid; gap: 4px; font-size: 13px; }
.bkadd { margin-bottom: 8px; flex-wrap: wrap; }
.bkopt { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
/* B5: the one-time offer of the new studio on the home */
.pjtry { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pjtryt { display: grid; gap: 2px; max-width: 520px; }
.pjtryt span { font-size: 13px; color: var(--muted, inherit); }

/* S2: the Table (public/js/projects.js renderTable; switch smTable). On the home, no sidebar and one calm column. */
@media (min-width: 1100px) {
  html.tbl:has(#s1:not(.hidden)) body.shell { padding-left: 0; }
  html.tbl:has(#s1:not(.hidden)) body.shell .appside { display: none; }
  html.tbl:has(#s1:not(.hidden)) body.shell .top > .brand { display: flex; }
  html.tbl:has(#s1:not(.hidden)) body.shell .topctx { display: none; }
  html.tbl:has(#s1:not(.hidden)) body.shell .top, html.tbl:has(#s1:not(.hidden)) body.shell main { max-width: 1040px; margin-inline: auto; }
}
/* S4 (first step): the carousel page on the Table has no sidebar either; Back, the brand mark and the avatar are the way around */
@media (min-width: 1100px) {
  html.tbl:has(#s4:not(.hidden)) body.shell { padding-left: 0; }
  html.tbl:has(#s4:not(.hidden)) body.shell .appside { display: none; }
  html.tbl:has(#s4:not(.hidden)) body.shell .top > .brand { display: flex; }
  html.tbl:has(#s4:not(.hidden)) body.shell .topctx { display: none; }
  html.tbl:has(#s4:not(.hidden)) body.shell .top, html.tbl:has(#s4:not(.hidden)) body.shell main { max-width: 1240px; margin-inline: auto; }
}
html.tbl #s1 .homehead, html.tbl .intro.hero { display: none !important; }
html.tbl:has(#s1:not(.hidden)) .top > .steps { display: none; }
html.tbl #resumeCard:not(.hidden) ~ #seasonNudge { display: none; }   /* one thing to do next, not two */
.tbl-wrap { display: grid; gap: var(--s5); padding-block: var(--s5); }
.tbl-bring { display: flex; align-items: center; gap: var(--s5); width: 100%; min-height: 150px; padding: var(--s6); border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 22px; background: radial-gradient(600px 220px at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .18s, background .18s; }
.tbl-bring:hover { border-color: var(--accent); }
.tbl-bic { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--accent); color: #fff; }
.tbl-bt { display: grid; gap: 4px; }
.tbl-bt b { font-size: 22px; line-height: 1.2; }
.tbl-bt small { font-size: var(--fs-body); color: var(--muted); }
.tbl-chips { display: flex; flex-wrap: wrap; gap: var(--s3); }
.tbl-chip { display: inline-flex; align-items: center; gap: 8px; }
.tbl-h { margin: var(--s4) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); letter-spacing: 0; }
.tbl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.tbl-card { display: grid; grid-template-columns: 84px 1fr; gap: var(--s4); align-items: center; padding: var(--s3); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.tbl-card:hover { border-color: var(--accent); }
.tbl-thumb { display: block; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.tbl-thumb img, .tbl-thumb svg, .tbl-thumb canvas { width: 100%; height: 100%; object-fit: cover; }
.tbl-ct { display: grid; gap: 2px; min-width: 0; }
.tbl-ct b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-ct small { color: var(--muted); }
.tbl-jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); }
.tbl-job { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font-weight: var(--fw-strong); text-align: left; cursor: pointer; }
.tbl-job:hover { border-color: var(--accent); }
.tbl-shelf { justify-self: start; }
@media (max-width: 560px) { .tbl-bring { flex-direction: column; align-items: flex-start; min-height: 0; padding: var(--s5); } }
html.tbl #s1 > #noAudio, html.tbl #s1 > #homeGuide, html.tbl #s1 > #recent, html.tbl #s1 > #recRow, html.tbl #s1 > .note { display: none !important; }   /* the Table says all of this itself */
/* S5: Make (public/js/make.js) */
.mkbox { max-width: 720px; }
.mkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); margin: var(--s3) 0; max-height: 50vh; overflow: auto; padding: 2px; }
.mkcard { display: grid; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.mkcard:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mkth { display: grid; place-items: center; min-height: 96px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.mkth img { max-width: 100%; max-height: 110px; display: block; }
.mkinfo { display: grid; gap: 2px; }
.mkrow { display: flex; align-items: center; gap: 8px; }
.mkinfo small { color: var(--muted); }
/* the Make sheet on a phone: its text and cards had no side room, and one card a row hid the rest */
@media (max-width: 560px) {
  .mkbox #mkFrom, .mkbox #mkNote { margin-inline: var(--s4); }
  .mkbox #mkGrid { margin-inline: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 46vh; }
  .mkbox .mkth { min-height: 72px; }
  .mkbox .mkth img { max-height: 84px; }
}
/* the Table: Bring comes first; the season line waits underneath */
html.tbl #s1:not(.hidden) { display: flex; flex-direction: column; }
html.tbl #s1 > #seasonNudge { order: 9; margin-top: var(--s5); }

/* the pick-a-moment screen on the Table: no sidebar either */
@media (min-width: 1100px) {
  html.tbl:has(#s2:not(.hidden)) body.shell { padding-left: 0; }
  html.tbl:has(#s2:not(.hidden)) body.shell .appside { display: none; }
  html.tbl:has(#s2:not(.hidden)) body.shell .top > .brand { display: flex; }
  html.tbl:has(#s2:not(.hidden)) body.shell .topctx { display: none; }
  html.tbl:has(#s2:not(.hidden)) body.shell .top, html.tbl:has(#s2:not(.hidden)) body.shell main { max-width: 1240px; margin-inline: auto; }
}
/* the Make sheet: side room for its text and cards at every width */
.mkbox #mkFrom, .mkbox #mkNote, .mkbox #mkGrid { margin-inline: var(--s4); }