:root {
  color-scheme: light;
  --bg: #f4f5f3;
  --surface: #fafaf8;
  --ink: #28292b;
  --muted: #5c6058;
  --line: #e0e0e0;
  --gray: #e7e7e5;
  --brand: #8E1F2F;
  --brand-ink: #3A0C14;
  /* Text and icons on a green fill (owner, 2026-10-25: white on green). */
  --on-brand: #ffffff;
  /* Brand words on the always-dark sections (letter, Film band, footer): wine is too dark there. */
  --brand-on-dark: #F08C98;
  --brand-text: #8E1F2F;
  --mark-ink: var(--brand-ink);
  --mark-lime: var(--brand);
  --char: #151412;
  --on: #f6f6f4;
  --side: 232px;
}

/* Every live button shows the hand (owner, 2026-10-25: Cancel generation showed the arrow). */
button:not(:disabled), [role="button"] { cursor: pointer; }
button:disabled { cursor: default; }
/* Plus Jakarta Sans and Cormorant Garamond from our own media edge, not Google: where Google is
   unreachable its render-blocking stylesheet left every page blank for 10 s and more (owner,
   2026-10-30: the Changelog loaded blank and slow). Each subset loads only for its characters. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
html { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 19;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 max(32px, calc((100% - 1240px) / 2));
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  transition: border-color 300ms;
}
.top.compact { border-bottom-color: var(--line); }
body:not(.app):not(.studio) main { padding-top: 72px; }
.links button { display: inline-flex; align-items: center; gap: 4px; }
.logo, .links button, .product-menu button, .ghost, .solid, .make {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}
.logo { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0; color: var(--ink); font-size: 20px; font-weight: 800; line-height: 28px; letter-spacing: -0.04em; }
.mark-logo { display: block; flex: none; }
.mark-logo .mark-ink { fill: var(--mark-ink); }
.mark-logo .mark-lime { fill: var(--mark-lime); }
/* The mark on a wine tile: a white M with its dark-wine trail (owner, 2026-10-25). Same in both themes. */
.mark-logo .mark-tile { fill: var(--brand); }
.mark-logo:has(.mark-tile) .mark-ink { fill: #fff; }
.mark-logo:has(.mark-tile) .mark-lime { fill: var(--brand-ink); }
.logo .mark-logo { width: 32px; height: 32px; }
.icon {
  width: 64px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  padding: 0;
}
.links { display: flex; gap: 24px; align-items: center; }
.links > button, .links .products-btn, .links .products-chev { font-family: Inter, sans-serif; }
.links > button, .products-btn { height: 20px; padding: 0; line-height: 20px; border-radius: 0; color: var(--ink); font-size: 14px; font-weight: 500; }
.products { position: relative; display: flex; align-items: center; gap: 2px; }
.links .products-chev { width: 24px; height: 24px; padding: 0; border-radius: 999px; display: grid; place-items: center; }
.product-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 26rem;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.product-menu button {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.product-menu button:hover { background: var(--bg); }
.product-menu .mark {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.product-menu b, .product-menu i { display: block; font-style: normal; }
.product-menu b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; }
.product-menu i { margin-top: 2px; color: var(--muted); font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; line-height: 19.25px; }
.links button:hover, .ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.account { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.language { position: relative; width: 72px; height: 36px; flex: none; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 160px;
  height: 384px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
.lang-menu button > span { display: inline-flex; align-items: center; gap: 8px; }
.lang-menu button > span > span { font-size: 16px; line-height: 1; }
.lang-menu svg { color: var(--muted); flex: none; visibility: hidden; }
.lang-menu button.on svg { visibility: visible; }
.theme { position: relative; width: 64px; height: 36px; flex: none; }
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 160px;
  margin: 0;
  padding: 4px 0;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.theme-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
.theme-menu svg { color: var(--muted); flex: none; }
.account .ghost, .account .solid { display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; }
.account .ghost { padding: 0 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.account .solid { padding: 0 20px; border: 0; background: var(--ink); color: var(--bg); }
.home { padding: 0 32px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--brand-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.5; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--brand); clip-path: polygon(0 0, 0 100%, 100% 100%); }
.hero { display: flex; flex-direction: column; align-items: center; width: min(1080px, 100%); margin: 0 auto; padding: 40px 0 8px; text-align: center; }
.lede { margin: 22px 0 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.7rem, 3.2vw, 2.55rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.lede strong { font-weight: 700; }
.lede em, .punch em { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; }
/* A real space, so the title reads "Marketing video" to anything that reads the page; half size keeps the old
   0.12em gap. Chinese, Japanese and Korean have no space there and keep the margin. */
.lede .gap { font-size: 0.5em; }
.lede .spin + .tail { margin-left: 0.12em; }
.lede .spin { display: inline-block; overflow: hidden; vertical-align: baseline; }
.lede .spin span { display: inline-block; white-space: nowrap; transition: opacity 0.26s ease, transform 0.26s ease; }
.lede .spin span.out { opacity: 0; transform: translateY(-0.5em); }
.lede .spin span.in { opacity: 0; transform: translateY(0.5em); transition: none; }
.punch { margin: 14px 0 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(2.6rem, 6.2vw, 5rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.sub { max-width: 34rem; margin: 16px 0 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.6; text-wrap: balance; }
.hero-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 28px; }
.free { margin: 0; color: var(--muted); font-size: 14px; }
.news { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 20px; text-decoration: none; }
.news .pill { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 700; }
.news .line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news svg { flex: none; color: var(--muted); }
.news:hover { border-color: var(--ink); }
.make { height: 48px; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.make:hover { filter: brightness(0.95); }
.reel-band { width: min(1214px, 100%); margin: 0 auto; padding: 28px 0 0; border-top: 0; }
.reel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.reel-head h2 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.reel-head h2 em { padding: 0 4px; background: var(--brand); color: var(--on-brand); font-style: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.reel-actions { display: flex; flex: none; gap: 8px; }
.shuffle, .see { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.shuffle { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.shuffle:hover { border-color: var(--ink); }
.see { border: 0; background: var(--ink); color: var(--bg); }
.reel { display: flex; gap: 16px; margin: 0 -32px; padding: 0 32px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 32px; scrollbar-width: thin; }
.reel button { flex: none; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; scroll-snap-align: start; }
.reel button.short { width: 560px; }
.reel button.tall { width: 177px; }
.reel .poster { height: 315px; aspect-ratio: auto; clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.reel button:hover .poster { outline: 3px solid var(--brand); outline-offset: -3px; }
.reel .blurb { padding: 12px 0 0; border: 0; }
.reel .cap, .reel button.tall .meta span { display: none; }
.poster { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray); }
.poster img, .poster video { width: 100%; height: 100%; object-fit: cover; display: block; }
.watch { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(20, 20, 20, 0.6); }
.watch-card { position: relative; background: var(--surface); border-radius: 16px; color: var(--ink); }
.watch-card.tall { width: 735px; height: 836px; padding: 9px 26px 12px 9px; display: grid; grid-template-columns: 437px minmax(0, 1fr); grid-template-rows: 776px 44px; column-gap: 23px; }
.watch-card.wide { width: min(1282px, calc(100vw - 158px)); height: 833px; padding: 9px 9px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 711px 44px 1fr; }
.watch-film { position: relative; overflow: hidden; background: #000; }
.watch-card.tall .watch-film { grid-area: 1 / 1; height: 776px; border-radius: 12px; }
.watch-card.wide .watch-film { grid-column: 1 / -1; grid-row: 1; height: 711px; border-radius: 10px; }
.watch-film video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.watch-side { min-width: 0; }
.watch-card.tall .watch-side { grid-area: 1 / 2; display: flex; flex-direction: column; align-items: flex-start; padding-top: 16px; }
.watch-card.wide .watch-side { grid-column: 1; grid-row: 3; display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.watch-side b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; }
.watch-domain { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin-top: 16px; padding: 0 10px; border-radius: 8px; background: var(--bg); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 20px; }
.watch-card.wide .watch-domain { margin-top: 0; }
.watch-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.watch-card.wide .watch-facts { display: none; }
.watch-facts span { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
.watch-facts strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 20px; }
.watch-bar { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink); }
.watch-card.tall .watch-bar { grid-area: 2 / 1; }
.watch-card.wide .watch-bar { grid-column: 1 / -1; grid-row: 2; }
.watch-bar button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
#watch-time { flex: none; min-width: 84px; padding: 0 4px; color: var(--muted); font-size: 13px; line-height: 16px; font-variant-numeric: tabular-nums; }
.watch-seek { flex: 1; height: 28px; cursor: pointer; accent-color: var(--brand); }
#watch-make { height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--brand); color: var(--on-brand); display: inline-flex; align-items: center; gap: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; cursor: pointer; }
.watch-card.tall #watch-make { grid-area: 2 / 2; justify-self: start; margin-top: -8px; }
.watch-card.wide #watch-make { grid-column: 2; grid-row: 3; align-self: center; margin-right: 8px; }
.watch-nav { position: absolute; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.watch-card.tall .prev { left: -64px; top: 394px; }
.watch-card.tall .next, .watch-card.tall .close { right: -63px; }
.watch-card.tall .next { top: 394px; }
.watch-card.tall .close { top: 0; }
.watch-card.wide .prev { left: -64px; top: 340px; }
.watch-card.wide .next, .watch-card.wide .close { right: -63px; }
.watch-card.wide .next { top: 340px; }
.watch-card.wide .close { top: 0; }
.letter { position: relative; display: flex; flex-direction: column; gap: 18px; width: min(720px, 100%); margin: 96px auto 0; padding: 40px 36px 36px; background: var(--char); color: #f6f6f4; clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px)); }
.letter .eyebrow { color: var(--brand-on-dark); }
.letter h2 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.letter p { margin: 0; color: rgba(244, 244, 240, 0.78); font-size: 15.5px; line-height: 1.7; }
.letter .who { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-top: 20px; border-top: 1px solid rgba(244, 244, 240, 0.14); }
.letter .who > div { display: flex; flex-direction: column; gap: 2px; }
.letter .who .mono { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.letter .who b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 700; }
.letter .who span { color: rgba(244, 244, 240, 0.55); font-size: 13px; }
.notes-col { width: min(1240px, 100%); margin: 96px auto 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.band-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.band-head h2 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.band-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.band-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.posts { display: flex; flex-direction: column; }
.posts article { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.posts img { width: 128px; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--gray); clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.posts time, .entries time { display: block; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; }
.posts h3 { margin: 6px 0 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
.posts p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.posts article[data-post]:hover h3, .entries article[data-view]:hover h3, .entries article[data-log]:hover h3 { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* Home blog: the newest post as a large feature, three more stacked beside it. */
.notes-col .band-head { padding-bottom: 16px; }
.notes-col .band-head h2 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.035em; }
.band.blog .posts { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(3, minmax(0, 1fr)); column-gap: 48px; padding-top: 28px; }
.band.blog .posts article { grid-column: 2; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 0; }
.band.blog .posts article:nth-child(2) { padding-top: 0; }
.band.blog .posts article:last-child { padding-bottom: 0; border-bottom: 0; }
.band.blog .posts img { width: 168px; aspect-ratio: 16 / 9; border-radius: 10px; clip-path: none; }
.band.blog .posts time { font-size: 11px; }
.band.blog .posts h3 { margin-top: 6px; font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.band.blog .posts article p { display: none; }
.band.blog .posts article.lead-post { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; border-bottom: 0; }
.band.blog .posts .lead-post img { width: 100%; border-radius: 18px; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.45); transition: transform 0.5s ease; }
.band.blog .posts .lead-post:hover { translate: none; }
.band.blog .posts .lead-post:hover img { transform: scale(1.01); }
.band.blog .posts .lead-post .body { padding-top: 22px; }
.band.blog .posts .lead-post time { font-size: 12px; }
.band.blog .posts .lead-post h3 { margin-top: 10px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -0.03em; -webkit-line-clamp: 3; }
.band.blog .posts .lead-post p { display: -webkit-box; margin-top: 12px; font-size: 16px; line-height: 1.55; -webkit-line-clamp: 2; }
@media (max-width: 860px) {
  .band.blog .posts { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: 20px; }
  .band.blog .posts article, .band.blog .posts article:nth-child(2) { grid-column: 1; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
  .band.blog .posts img { width: 112px; border-radius: 8px; }
  .band.blog .posts h3 { font-size: 15px; }
  .band.blog .posts article.lead-post { grid-row: auto; margin-bottom: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .band.blog .posts .lead-post img { width: 100%; border-radius: 14px; }
  .band.blog .posts .lead-post .body { padding-top: 16px; }
  .band.blog .posts .lead-post h3 { font-size: 22px; }
  .band.blog .posts .lead-post p { font-size: 14.5px; }
}
.entries article { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.entries time { padding-top: 3px; }
.entries h3 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.entries p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.morelinks { display: flex; gap: 16px; margin: 12px 0 0; }
.morelinks a { color: var(--ink); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.faq { display: flex; flex-direction: column; align-items: center; width: min(720px, 100%); margin: 72px auto 0; padding: 0 0 96px; text-align: center; }
.faq h2 { margin: 0 0 28px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.faq-list { display: flex; flex-direction: column; width: 100%; text-align: left; border-top: 1.5px solid var(--ink); }
.faq article { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq h3 { margin: 0 0 8px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 700; line-height: 1.4; }
.faq p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.faq .morelinks a { color: var(--ink); font-size: 13px; font-weight: 600; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sources { width: min(1240px, 100%); margin: 0 auto; padding: 0 0 96px; }
.sources div { max-width: 46rem; margin-left: auto; padding-top: 24px; border-top: 1px solid var(--line); }
.sources h2 { margin: 0 0 10px; color: var(--muted); font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.sources p, .sources blockquote { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.65; }
.sources blockquote { margin-top: 8px; font-style: italic; }
.sources blockquote span { font-style: normal; }
.sources a { color: inherit; text-underline-offset: 4px; }
.foot { --mark-ink: #f4f4f0; --mark-lime: var(--brand); margin: 0; padding: 88px 32px 32px; color: #f6f6f4; background: var(--char); clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%, 0 64px); }
.foot-top { width: min(1240px, 100%); margin: 0 auto 72px; display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.worth-block { max-width: 300px; }
.worth-block .mark-logo { width: 44px; height: 44px; margin-bottom: 20px; }
.worth-block p { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: rgba(244, 244, 240, 0.8); }
.worth-block em { color: var(--brand-on-dark); font-style: normal; font-weight: 800; }
.cols { display: flex; flex-wrap: wrap; gap: 56px; margin: 0; }
.cols b { display: block; margin-bottom: 16px; color: var(--brand-on-dark); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cols > div > span { display: block; min-height: 24px; margin: 0 0 10px; color: rgba(244, 244, 240, 0.7); font-size: 14px; line-height: 24px; }
.cols > div > span:last-child { margin-bottom: 0; }
.cols > div > span > span,
.cols > div > span > button,
.cols > div > span > a { display: inline; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: 20px; cursor: pointer; text-align: left; text-decoration: none; }
.cols > div > span > button:hover,
.cols > div > span > a:hover { color: #f6f6f4; }
.logo-n { color: var(--brand-text); }
.wordmark { position: relative; width: min(1240px, 100%); margin: 0 auto 40px; padding: 40px 0 36px; container-type: inline-size; }
.wm-word { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 20.4cqw; font-weight: 800; letter-spacing: -0.055em; line-height: 0.82; white-space: nowrap; }
.wm-word span { padding: 0 0.08em; margin: 0 -0.08em; color: transparent; -webkit-background-clip: text; background-clip: text; }
.wm-motion { background-image: linear-gradient(180deg, #f6f6f4 30%, rgba(246, 246, 244, 0.38)); }
.wm-need { background-image: linear-gradient(180deg, var(--brand) 30%, rgba(142, 31, 47, 0.38)); }
.wm-n { background-image: linear-gradient(to top right, #f6f6f4 50%, var(--brand) 50%); }
.wm-brace { position: absolute; left: var(--l, 0); width: var(--w, 0); height: 10px; border: 0 solid currentColor; }
.wm-brace.up { top: 12px; border-width: 1.5px 1.5px 0; color: rgba(244, 244, 240, 0.7); }
.wm-brace.down { bottom: 6px; border-width: 0 1.5px 1.5px; color: var(--brand); }
.wm-brace i { position: absolute; padding: 0 8px; background: var(--char); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-style: normal; letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; }
.wm-brace.up i { left: 12px; top: -7px; }
.wm-brace.down i { right: 12px; bottom: -6px; }
.copy { width: min(1240px, 100%); margin: 0 auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(244, 244, 240, 0.12); }
.copy p { margin: 0; font-size: 12px; line-height: 16px; color: rgba(244, 244, 240, 0.5); }
.copy-side { display: flex; align-items: center; gap: 20px; }
.foot-lang { height: 24px; display: flex; align-items: flex-start; }
.copy .lang { display: inline-flex; align-items: center; gap: 6px; height: 20px; border: 0; background: transparent; padding: 0; font-size: 14px; line-height: 20px; color: rgba(244, 244, 240, 0.7); cursor: pointer; }
.copy .flag { font-size: 16px; line-height: 1; }
.copy-side .mark-logo { width: 20px; height: 20px; display: block; }
.poster i { position: absolute; left: 10px; top: 10px; height: 20px; display: flex; align-items: center; padding: 0 7px; border-radius: 5px; background: rgba(20, 20, 20, 0.72); color: white; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; font-size: 11px; line-height: 1; }
.poster .play { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--brand); color: var(--on-brand); opacity: 0; transition: opacity 0.25s ease; }
.poster .play svg { display: block; }
.reel button:hover .play, .reel button:focus-visible .play, .gallery button:hover .play { opacity: 1; }
.blurb { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; border-top: 1px solid var(--line); }
.meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0; }
.reel b, .gallery b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 700; line-height: 22px; }
.meta span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; line-height: 16.5px; }
.cap { margin: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 20px; }
button, input, textarea, select { font: inherit; color: inherit; }
.poster i, .poster em { color: white; }
/* Primary call to action. Contexts (header, auth, account forms) restyle it; anywhere else it is a
   brand pill, so it never renders as white text on a transparent background. */
.solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 15px; font-weight: 700; }
.solid:hover { filter: brightness(1.04); }
.solid:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.shell { min-height: 100%; display: flex; }
.side { width: var(--side); flex: none; display: flex; flex-direction: column; padding: 8px 12px 16px; }
.brand { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 680; letter-spacing: -0.04em; }
.nav {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 2px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.nav.on { color: var(--ink); }
.ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.nav.on .ico { background: var(--ink); color: var(--on); }
.badge {
  margin-left: auto;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  padding: 4px 6px;
}
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px; color: var(--muted); font-size: 13px; }
.avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--gray); }
.canvas {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 10px 10px 10px 0;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 16px;
  background: var(--surface);
  overflow: auto;
}
.wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 280px at 78% 8%, #8E1F2F33, transparent 70%),
    radial-gradient(520px 360px at 50% 42%, #ffffff, transparent 72%);
}
.view { position: relative; min-height: 100%; }
.stage {
  max-width: 720px;
  margin: 0 auto;
  padding: 16vh 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stage > h1, .panel h1 { margin: 0 0 28px; font-size: 30px; font-weight: 640; letter-spacing: -0.04em; text-align: center; }
.modes { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--gray) 80%, white); }
.mode { border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mode.on { background: white; color: var(--ink); box-shadow: 0 1px 2px rgba(40, 41, 43, 0.08); }
.hint, .lead { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }
.composer {
  width: 100%;
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 5;
  overflow: visible;
}
.slot { display: block; }
.slot[hidden] { display: none; }
.slot input, .slot textarea { width: 100%; border: 0; background: transparent; padding: 18px 20px 8px; outline: none; resize: none; }
.slot input { height: 58px; }
.slot textarea { min-height: 96px; line-height: 1.45; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 12px; border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip, .seg {
  border: 0;
  background: color-mix(in srgb, var(--gray) 70%, white);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink);
}
.chip select { border: 0; background: transparent; padding: 0; outline: none; }
.images-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--gray) 70%, white); color: var(--ink); font-size: 12px; cursor: pointer; }
.images-btn b { font-weight: 600; font-variant-numeric: tabular-nums; }
.images-btn b[hidden] { display: none; }
.uploads { padding: 4px 12px 12px; }
.uploads[hidden] { display: none; }
.upload-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.upload { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fafaf8; position: relative; }
.upload img { grid-row: 1 / span 2; width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: #eee; }
.upload-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 18px; }
.upload-use { grid-column: 2 / span 2; display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--gray) 70%, white); justify-self: start; }
.upload-use button { border: 0; background: transparent; border-radius: 999px; padding: 2px 9px; font-size: 11px; color: var(--muted, #666); cursor: pointer; }
.upload-use button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.upload-drop { position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; border: 0; background: transparent; font-size: 16px; line-height: 1; color: var(--muted, #666); cursor: pointer; }
.upload-hint { margin: 8px 2px 0; font-size: 12px; color: var(--muted, #666); }
.upload-error { margin: 6px 2px 0; font-size: 12px; color: #b42318; }
.upload-error[hidden] { display: none; }
.model { position: relative; z-index: 6; }
.model > button {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #fafaf8;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.model-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: 320px;
  max-height: min(46vh, 360px);
  overflow: auto;
  padding: 6px;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px -26px #00000059;
}
.model-menu button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.model-menu button.on, .model-menu button:hover { background: #f4f5f3; }
.model-menu b { font-size: 13px; font-weight: 600; }
.model-menu em { grid-column: 1 / -1; color: #5c6058; font-size: 12px; font-style: normal; }
.model-menu .rate { color: #5c6058; font-size: 12px; font-variant-numeric: tabular-nums; }
.model-menu .grp { margin: 6px 8px 2px; color: #5c6058; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.seg { margin: 0; padding: 0; display: flex; gap: 2px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 6px 10px; border-radius: 999px; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg input:checked + span { background: white; color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: var(--ink); color: var(--on); display: grid; place-items: center; cursor: pointer; }
.send:disabled { opacity: 0.45; cursor: progress; }
/* Visual Style strip (spec 314): thumbnails are fixed-color previews of each look. */
.visual-style { width: 100%; margin-top: 22px; }
.vs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vs-head h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.vs-nav { display: flex; gap: 6px; }
.vs-nav button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.vs-nav button:disabled { opacity: 0.35; cursor: default; }
.vs-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px; }
.vs-strip::-webkit-scrollbar { display: none; }
.vs-card { flex: 0 0 148px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.vs-thumb { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 88px; padding: 10px 12px; overflow: hidden; border-radius: 12px; border: 2px solid var(--line); box-sizing: border-box; font-family: "Plus Jakarta Sans", sans-serif; line-height: 1.05; }
.vs-card:hover .vs-thumb { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.vs-card.on .vs-thumb { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.vs-card:focus-visible { outline: none; }
.vs-card:focus-visible .vs-thumb { outline: 2px solid var(--brand); outline-offset: 2px; }
.vs-name { font-size: 13px; color: var(--muted); }
.vs-card.on .vs-name { color: var(--ink); font-weight: 600; }
/* Demo styles (spec 475): a moving picture per style; the chosen one plays. Hover shows it large. */
.style-peek { position: fixed; top: 0; left: 0; z-index: 80; width: min(480px, 46vw); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #111; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); pointer-events: none; }
.style-peek[hidden] { display: none; }
/* As a popover: undo the browser's centring, border and padding. */
.style-peek[popover] { inset: 0 auto auto 0; height: auto; margin: 0; padding: 0; border: 0; color: inherit; }
.style-peek video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ds-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.ds-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 4px; border-radius: 12px; border: 2px solid var(--line); background: #111; }
.ds-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-tile:hover .ds-media { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.ds-tile[aria-checked="true"] .ds-media { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.ds-tile:focus-visible { outline: none; }
.ds-tile:focus-visible .ds-media { outline: 2px solid var(--brand); outline-offset: 2px; }
.ds-tile b { font-size: 13px; font-weight: 600; color: var(--muted); }
.ds-tile[aria-checked="true"] b { color: var(--ink); }
.ds-tile > span:last-child { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .ds-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
  .ds-tile { flex: 0 0 62%; scroll-snap-align: start; }
}
.vs-thumb b { font-size: 15px; font-weight: 800; position: relative; z-index: 1; }
.vs-thumb small { font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; position: relative; z-index: 1; }
.vs-auto { align-items: center; background: linear-gradient(135deg, #f3f0ea, #e3e7f2); color: #28292b; }
.vs-auto-mark { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; }
.vs-editorial-cutout { background: #efe7d8; color: #1c1a17; }
.vs-editorial-cutout b { font-family: Georgia, serif; font-size: 20px; }
.vs-cut { position: absolute; background: #fff; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.18); }
.vs-cut.a { width: 54px; height: 38px; right: 12px; top: 10px; transform: rotate(5deg); background: #d9573b; }
.vs-cut.b { width: 40px; height: 30px; right: 40px; bottom: 8px; transform: rotate(-6deg); }
.vs-editorial { background: #fbfaf7; color: #141414; }
.vs-editorial b { font-family: Georgia, serif; font-size: 21px; font-weight: 700; }
.vs-rule { display: block; height: 1px; background: #141414; margin-top: 4px; }
.vs-brutalist-bold { background: #f4e04d; color: #000; border-color: #000; }
.vs-brutalist-bold b { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; }
.vs-block { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 22px; background: #ff4f2e; border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
.vs-glass-saas { background: radial-gradient(circle at 20% 20%, #d9e8ff, #f5f7fb 60%, #eadff8); color: #1d2433; }
.vs-pane { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(6px); }
.vs-pane i { display: block; align-self: flex-end; width: 26px; height: 9px; border-radius: 5px; background: #4a8ef0; }
.vs-precision-lab { background-color: #f6f6f2; background-image: linear-gradient(#e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px); background-size: 10px 10px; color: #1a1a1a; }
.vs-precision-lab small { font-family: ui-monospace, Menlo, monospace; }
.vs-precision-lab svg { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 20px; fill: none; stroke: #2f9e5b; stroke-width: 1.5; }
.vs-retro-future { background: linear-gradient(#1d0b33, #3b0f4f 60%, #12051f); color: #fff; justify-content: flex-start; }
.vs-retro-future b { font-size: 16px; font-weight: 900; text-shadow: 0 0 6px #ff4fd8; }
.vs-sun { position: absolute; right: 12px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(#ffd25a, #ff5f6d); }
.vs-grid { position: absolute; left: -20%; right: -20%; bottom: 0; height: 28px; background-image: linear-gradient(#36e3ff 1px, transparent 1px), linear-gradient(90deg, #36e3ff 1px, transparent 1px); background-size: 14px 7px; transform: perspective(60px) rotateX(45deg); transform-origin: bottom; opacity: 0.8; }
.vs-command-dark { background: #0e0f12; color: #f2f3f5; border-color: #2a2c31; }
.vs-command-dark small { display: flex; justify-content: space-between; color: #8a8f98; font-family: ui-monospace, Menlo, monospace; }
.vs-command-dark small em { font-style: normal; color: #b6a6ff; }
.vs-bar { display: block; width: 34px; height: 3px; border-radius: 2px; background: #7c6cf0; margin-top: 4px; }
.vs-soft-signal { background: linear-gradient(135deg, #fde7ef, #e4f1ff); color: #3a3350; align-items: center; }
.vs-bubble { width: 56px; height: 10px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(80, 60, 120, 0.12); align-self: flex-start; }
.vs-bubble.b { width: 42px; background: #c9b8ff; align-self: flex-end; }
html[data-theme="dark"] .vs-nav button { background: var(--surface); }
@media (max-width: 560px) { .vs-card { flex-basis: 128px; } .vs-thumb { height: 78px; } }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 18px; color: var(--muted); font-size: 13px; }
.samples button, .text-btn, .card {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--ink);
  cursor: pointer;
}
.app-nav { display: none; }
body.app { background: var(--bg); }
body.app .top, body.app .foot { display: none; }
body.app .app-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; display: flex; flex-direction: column; width: 240px; background: var(--bg); }
.app-nav-head { display: flex; align-items: center; height: 64px; padding: 0 20px; }
.app-brand { display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); cursor: pointer; }
.app-brand .mark-logo { width: 24px; height: 24px; }
.app-nav nav { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 16px 12px 8px; }
.app-nav nav button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.app-nav nav button:hover { background: rgba(40, 41, 43, 0.05); color: var(--ink); }
.app-nav nav button.on { color: var(--ink); }
.nav-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; }
.app-nav nav button.on .nav-ico { background: var(--ink); color: #f6f6f4; }
.app-nav nav em { position: absolute; top: 4px; right: 8px; padding: 2px 6px 2px 6px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-style: normal; font-size: 10px; font-weight: 600; line-height: 1; }
.app-user { display: flex; align-items: center; gap: 12px; margin: 12px; padding: 8px; }
button.app-user { border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.app-user > span:last-child { min-width: 0; }
.app-user b, .app-user i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 148px; }
.account .who {
  display: inline-flex;
  align-items: center;
  max-width: 9rem;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(40, 41, 43, 0.15);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.account .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-form { display: grid; gap: 12px; max-width: 360px; margin-top: 8px; }
.account-form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.account-form input, .account-form textarea { border: 1px solid var(--line); border-radius: 12px; background: white; font: inherit; }
.account-form input { height: 44px; padding: 0 12px; }
.account-form textarea { padding: 10px 12px; resize: vertical; }
.plans {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.plans .plan[data-plan="pro"],
.plans .plan[data-plan="max"],
.plans .plan[data-plan="ultra"] {
  grid-column: span 2;
}
.plans .plan[data-plan="free"] {
  grid-column: 2 / span 2;
}
.plans .plan[data-plan="pack"] {
  grid-column: span 2;
}
@media (max-width: 960px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans .plan[data-plan="pro"],
  .plans .plan[data-plan="max"],
  .plans .plan[data-plan="ultra"],
  .plans .plan[data-plan="free"],
  .plans .plan[data-plan="pack"] {
    grid-column: auto / span 1;
  }
}
@media (max-width: 560px) {
  .plans { grid-template-columns: 1fr; }
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.plan.on { border-color: var(--ink); }
.plan-popular {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
.plan-featured {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.plan .pack-size {
  display: grid;
  gap: 6px;
  margin: 0;
}
.plan .pack-size select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.plan .pack-size select:focus {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 2px;
}
.plan-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 11px;
  font-weight: 700;
}
.plan h2 { margin: 0; font-size: 15px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.plan .price b { font-size: 30px; letter-spacing: -0.02em; }
.plan .price span, .plan .credits { font-size: 13px; color: var(--muted); }
.plan .credits { margin: 0; }
.plan .enough-label {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plan .enough-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.plan .enough-cols b {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}
.plan ul {
  display: grid;
  align-content: start;
  gap: 6px;
  flex: 1;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.plan ul.enough { flex: 0; margin: 0; gap: 4px; font-size: 12px; color: var(--muted); }
.plan ul.enough li { padding-left: 0; }
.plan ul.enough li::before { content: none; }
.plan li { padding-left: 18px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--muted); }
.plan button {
  height: 38px;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.plan button:hover:not(:disabled) { border-color: var(--ink); }
.plan.on button { background: var(--ink); border-color: var(--ink); color: var(--surface); cursor: default; }
.plan-popular button {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}
.plan-popular.on button { background: var(--ink); border-color: var(--ink); color: var(--surface); }
#view-billing .lead.muted { color: var(--muted); font-size: 13px; }
.billing-actions { margin: 0 0 12px; }
#billing-manage {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#billing-error { margin: 0 0 12px; }
.credit-head { margin: 8px 0 10px; font-size: 18px; }
.credit-sub { margin: 16px 0 8px; font-size: 15px; }
.credit-rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.credit-rates div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.credit-rates dt { font-size: 13px; color: var(--muted); }
.credit-rates dd { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.credit-table-wrap { overflow-x: auto; margin: 0 0 12px; }
.credit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.credit-table th, .credit-table td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
}
.credit-table thead th {
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.credit-table tbody th { font-weight: 600; white-space: nowrap; }
.credit-table .cell-note { color: var(--muted); font-size: 11px; }
.credit-cost { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.credit-cost div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.credit-cost dt { font-size: 12px; color: var(--muted); }
.credit-cost dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.revise-chip { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-form .solid, #account-console, #logout {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-top: 4px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
}
.account-error { margin: 0; color: #c62828; font-size: 14px; }
.avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: #f6f6f4; font-size: 13px; font-weight: 600; }
.app-user b { display: block; font-size: 13px; font-weight: 600; }
.app-user i { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--muted); }
body.app main { margin-left: 240px; min-height: 100dvh; padding: 10px 10px 10px 0; }
body.app .view:not([hidden]) { min-height: calc(100dvh - 20px); border: 1px solid rgba(224, 224, 224, 0.7); border-radius: 16px; background: #fafaf8; }
body.studio { overflow: hidden; background: #f4f5f3; background-image: none; }
body.studio .top, body.studio .foot { display: none; }
body.studio main { height: 100dvh; }
/* An open film is a workspace like Motion's: no studio sidebar, the whole width for the work. */
body.app.studio .app-nav { display: none; }
body.app.studio main { margin-left: 0; padding: 0; }
body.app.studio .view:not([hidden]) { min-height: 0; border: 0; border-radius: 0; background: transparent; }
.workspace { display: flex; height: 100dvh; background: #f4f5f3; color: var(--ink); }
.history { position: relative; width: var(--history-w, 432px); flex: none; display: flex; flex-direction: column; min-height: 0; }
.history-top { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; }
.history-top button { width: 28px; height: 28px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.history-top button:hover { background: var(--bg); color: var(--ink); }
.history-top b { min-width: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid rgba(224, 224, 224, 0.5); background: rgba(255, 255, 255, 0.06); color: rgba(40, 41, 43, 0.7); }
.history-bar span { font-size: 12px; font-weight: 500; color: var(--ink); }
.history-bar em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--muted); }
.history-feed { flex: 1; min-height: 0; overflow: auto; }
.msg-user { display: flex; justify-content: flex-end; padding: 10px 16px; }
.msg-user p { max-width: 88%; margin: 0; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 16px 6px 16px 16px; background: rgba(255, 255, 255, 0.6); padding: 10px 14px; font-size: 13px; line-height: 1.625; color: var(--ink); box-shadow: 0 6px 20px -14px rgba(0, 0, 0, 0.14); }
.msg-assistant { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px 18px; }
.msg-assistant .mark-logo { position: relative; z-index: 1; width: 24px; height: 24px; margin-top: 2px; flex: none; }
.msg-assistant .stem { position: absolute; top: 32px; bottom: -12px; left: 27px; width: 1px; background: linear-gradient(#e0e0e0, transparent); }
.msg-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.msg-body > p { margin: 0; font-size: 14px; line-height: 1.625; color: rgba(40, 41, 43, 0.85); white-space: pre-wrap; }
.pipe { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 14px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 18px 44px -26px #00000059; }
.pipe-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; font-size: 12px; font-weight: 500; color: rgba(40, 41, 43, 0.85); }
.pipe-head b { min-width: 0; flex: 1; font-weight: 500; }
.pipe-head .spin { width: 14px; height: 14px; flex: none; border: 1.5px solid #1565c0; border-right-color: transparent; border-radius: 999px; animation: spin 0.8s linear infinite; }
.pipe-head .ok { width: 14px; height: 14px; flex: none; border-radius: 999px; background: #2e7d32; }
.pipe ul { margin: 0; padding: 8px 12px 10px; border-top: 1px solid rgba(255, 255, 255, 0.7); list-style: none; }
.pipe li { display: flex; gap: 8px; padding: 4px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pipe li.now { color: var(--ink); }
.chat-sections { margin: 0; padding: 0; list-style: none; }
.chat-sections li { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; line-height: 1.45; color: rgba(40, 41, 43, 0.85); }
.chat-sections .idx { width: 18px; flex: none; font-family: "Plus Jakarta Sans", sans-serif; font-style: normal; color: var(--muted); }

/* 049 gen-chat */
.revise-hint { margin: 0 6px 6px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.msg-turn + .msg-turn { margin-top: 0; }
.film-revise-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

.composer-dock { flex: none; position: relative; z-index: 2; border-top: 1px solid rgba(224, 224, 224, 0.5); background: rgba(250, 250, 248, 0.55); padding: 8px 10px 10px; backdrop-filter: blur(24px); }
.composer-box { border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 16px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 18px 44px -26px #00000059; }
.composer-box textarea { display: block; width: 100%; min-height: 96px; resize: none; border: 0; background: transparent; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--ink); outline: none; }
.composer-box textarea:disabled { opacity: 0.6; }
.composer-box textarea::placeholder { color: var(--muted); }
.composer-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 8px; }
.plus-wrap { display: inline-flex; }
.plus, .send-up { width: 32px; height: 32px; padding: 0; border-radius: 999px; display: grid; place-items: center; }
.plus { border: 1px solid rgba(224, 224, 224, 0.7); background: transparent; color: var(--muted); }
.send-up { border: 0; background: var(--ink); color: var(--on); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.plus:disabled, .send-up:disabled { opacity: 0.35; cursor: default; }
.studio-canvas { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 10px 10px 10px 0; border: 1px solid rgba(224, 224, 224, 0.7); border-radius: 16px; overflow: hidden; background: radial-gradient(520px 280px at 88% 0%, rgba(142, 31, 47, 0.14), transparent 70%), var(--bg); }
.canvas-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 56px; padding: 0 20px; border-bottom: 1px solid rgba(224, 224, 224, 0.5); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(24px); }
.canvas-title { display: flex; align-items: center; gap: 12px; }
.canvas-title > span:first-child { font-size: 13px; font-weight: 500; }
.run-badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 10px; border-radius: 6px; font-size: 11px; font-weight: 500; }
.run-badge i { width: 6px; height: 6px; border-radius: 999px; }
.run-badge.rendering { background: rgba(196, 127, 0, 0.08); color: #c47f00; }
.run-badge.rendering i { width: 10px; height: 10px; border: 1.5px solid #c47f00; border-right-color: transparent; border-radius: 999px; animation: spin 0.8s linear infinite; }
.run-badge.ready { background: rgba(46, 125, 50, 0.1); color: #2e7d32; }
.run-badge.ready i { background: #2e7d32; }
.run-badge.failed { background: rgba(198, 40, 40, 0.08); color: #c62828; }
.run-badge.failed i { background: #c62828; }
.canvas-actions { display: flex; align-items: center; gap: 8px; }
.glass-btn, .export-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 16px; font-size: 12px; font-weight: 500; text-decoration: none; }
.glass-btn { border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.55); color: var(--ink); box-shadow: 0 18px 44px -26px #00000059; cursor: pointer; font: inherit; }
.export { position: relative; }
.export-btn { border: 0; background: var(--ink); color: var(--on); box-shadow: 0 18px 44px -26px #00000059; cursor: pointer; font: inherit; }
.export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45);
}
.export-menu button {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.export-menu button:hover { background: var(--gray); }
/* With captions or without, for every size below (spec 526). */
.export-captions { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; cursor: pointer; }
.export-captions[hidden] { display: none; }
.versions, .share { position: relative; }
.versions-menu, .share-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: 300px;
  max-height: 60vh;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45);
}
.version-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.version-row.on { background: var(--gray); }
.version-row .version-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.version-row b { font-size: 13px; font-weight: 600; }
.version-row em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; font-style: normal; }
.version-row button, .share-row button { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.version-row button:hover, .share-row button:hover { background: var(--gray); }
.share-panel { padding: 10px; display: grid; gap: 8px; }
#share-url { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12px; }
.share-row { display: flex; gap: 8px; justify-content: flex-end; }
.film-dock .speed-toggle { width: auto; min-width: 44px; padding: 0 8px; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .film-dock .speed-toggle { display: none; } }
.export-menu b { font-size: 13px; font-weight: 600; }
.export-menu em { color: var(--muted); font-size: 12px; font-style: normal; }
.glass-btn:disabled, .export-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.theme-menu button.on { background: var(--gray); }
/* The scene panel sits beside the preview only; the timeline keeps the full width under both
   (owner, 2026-10-25: opening the panel squeezed the sections and cut their names). */
.canvas-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.canvas-row { flex: 1; min-height: 0; display: flex; }
.canvas-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.canvas-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.run-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: min(922px, calc(100% - 48px)); margin: 34px auto 0; }
.run-banner[hidden] { display: none; }
.run-banner p { margin: 8px 0 0; font-size: 16px; line-height: 20px; }
#cancel-run { height: 38px; padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 16px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; }
.progress-row { display: flex; align-items: flex-start; gap: 12px; width: min(768px, calc(100% - 32px)); margin: 40px auto 0; }
.progress-mark { width: 32px; height: 32px; margin-top: 2px; flex: none; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.progress-mark svg { display: block; }
.progress-row.ready .progress-mark { background: #2e7d32; }
.progress-row.ready .progress-mark i { border: 0; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); animation: none; }
.progress-row.failed .progress-mark { background: #c62828; }
.progress-row.failed .progress-mark i { border: 0; width: 12px; height: 12px; background: linear-gradient(#fff, #fff) center/12px 2px no-repeat, linear-gradient(#fff, #fff) center/2px 12px no-repeat; transform: rotate(45deg); animation: none; }
.progress-card { min-width: 0; flex: 1; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 28px 28px 28px 8px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 18px 44px -26px #00000059; backdrop-filter: blur(24px); }
.progress-kicker { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.progress-count { display: inline-flex; align-items: baseline; gap: 10px; color: #c47f00; }
.progress-count b { font-family: "Plus Jakarta Sans", sans-serif; font-style: normal; font-weight: 600; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.progress-count.word b { font-size: 16px; }
.progress-count em { font-family: "Plus Jakarta Sans", sans-serif; font-style: normal; font-weight: 600; font-size: 11px; color: rgba(92, 96, 88, 0.9); }
.progress-flag { display: inline-flex; align-items: center; gap: 6px; color: rgba(92, 96, 88, 0.6); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.progress-flag i { width: 6px; height: 6px; border-radius: 999px; background: #c47f00; animation: pulse 1.2s ease-in-out infinite; }
.progress-row.ready .progress-count, .progress-row.ready .progress-flag { color: #2e7d32; }
.progress-row.ready .progress-flag i { background: #2e7d32; animation: none; }
.progress-row.failed .progress-count, .progress-row.failed .progress-flag { color: #c62828; }
.progress-row.failed .progress-flag i { background: #c62828; animation: none; }
.progress-card h2 { margin: 10px 0 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
.progress-card > p { margin: 4px 0 0; font-family: "Plus Jakarta Sans", sans-serif; font-style: normal; font-weight: 600; font-size: 14px; line-height: 1.5; color: var(--muted); }
.step-rail { margin-top: 20px; }
.step-bars { display: flex; gap: 6px; }
.step-bars i { flex: 1; height: 3px; border-radius: 999px; background: #e0e0e0; }
.step-bars i.done { background: var(--ink); }
.step-bars i.now { background: linear-gradient(90deg, #c47f00, #f0c27a, #c47f00); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.step-names { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6px; }
.step-names span { text-align: center; font-size: 10px; line-height: 14px; color: rgba(92, 96, 88, 0.55); }
.step-names span.done, .step-names span.now { color: var(--ink); }
.stage-note, .sections, .polish { margin-top: 20px; }
.stage-note header, .sections-head, .polish-kicker { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.thinking { display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0.14em; }
.thinking i, .progress-flag i { width: 6px; height: 6px; border-radius: 999px; background: #c47f00; animation: pulse 1.2s ease-in-out infinite; }
.think-box { border: 1px solid rgba(224, 224, 224, 0.6); border-radius: 8px; background: rgba(250, 250, 248, 0.5); padding: 12px; }
.bones { display: flex; flex-direction: column; gap: 8px; }
.bones i { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(224, 224, 224, 0.3), rgba(224, 224, 224, 0.8), rgba(224, 224, 224, 0.3)); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.think-box p { margin: 10px 0 0; height: 16px; overflow: hidden; font-family: Inter, sans-serif; font-style: normal; font-weight: 400; font-size: 11px; line-height: 16px; color: rgba(92, 96, 88, 0.8); }
.swatch-row { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.swatches { display: inline-flex; gap: 2px; }
.swatches i { width: 10px; height: 10px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
.bpm { font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(92, 96, 88, 0.7); font-variant-numeric: tabular-nums; }
.ready-count { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.scale { height: 3px; margin-bottom: 8px; overflow: hidden; border-radius: 999px; background: rgba(224, 224, 224, 0.6); }
.scale i { display: block; height: 100%; background: #c47f00; transform-origin: left center; }
.sections ul, .polish ul { margin: 0; padding: 0; list-style: none; }
.sections li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.sections .idx { width: 16px; flex: none; text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mark-state { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.mark-state.active { background: rgba(21, 101, 192, 0.12); color: #1565c0; }
.mark-state.active svg { animation: spin 0.8s linear infinite; }
.mark-state.ready { background: rgba(46, 125, 50, 0.12); color: #2e7d32; }
.sections .chapter { flex: none; font-weight: 500; color: rgba(40, 41, 43, 0.6); }
.sections li.ready .chapter { color: rgba(40, 41, 43, 0.85); }
.sections .idea { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.sections .dur { margin-left: auto; flex: none; font-size: 10px; color: rgba(92, 96, 88, 0.7); font-variant-numeric: tabular-nums; }
.polish li { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 12px; border: 1px solid rgba(224, 224, 224, 0.3); border-radius: 6px; background: rgba(250, 250, 248, 0.2); font-size: 12px; color: rgba(92, 96, 88, 0.5); }
.polish li.now { border-color: rgba(196, 127, 0, 0.3); background: rgba(196, 127, 0, 0.05); color: var(--ink); }
.polish li.done { border-color: rgba(224, 224, 224, 0.5); background: rgba(250, 250, 248, 0.4); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(92, 96, 88, 0.3); }
.polish li b { margin-left: auto; font-weight: 500; }
.retry-btn { margin-top: 12px; height: 32px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--ink); color: var(--bg); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.retry-btn:disabled { opacity: 0.5; cursor: default; }
#work-error { margin-top: 12px; padding: 12px; border: 1px solid rgba(198, 40, 40, 0.3); border-radius: 8px; background: rgba(198, 40, 40, 0.08); color: rgba(198, 40, 40, 0.9); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; font-weight: 400; font-size: 11px; line-height: 1.5; }
/* The preview takes the room it has, bounded by the height it can show (owner, 2026-10-25: it
   stopped at 960px on a wide screen). */
.canvas-body figure { width: calc(100% - 40px); margin: 16px auto; }
.canvas-body figure.portrait { width: min(420px, calc(100% - 40px)); }
.canvas-body figure.three-four { width: min(540px, calc(100% - 40px)); }
/* The preview takes the height it is given: a tall film fills it, so no empty band is left above
   the timeline on a tall screen (owner, 2026-10-25). 64px holds the caption and the margins. */
@supports (width: 1cqh) {
  .canvas-body { container-type: size; }
  .canvas-body figure { width: min(calc(100% - 40px), calc((100cqh - 64px) * 16 / 9)); }
  .canvas-body figure.portrait { width: min(calc(100% - 40px), calc((100cqh - 64px) * 9 / 16)); }
  .canvas-body figure.square { width: min(calc(100% - 40px), calc(100cqh - 64px)); }
  .canvas-body figure.three-four { width: min(calc(100% - 40px), calc((100cqh - 64px) * 3 / 4)); }
  .canvas-body figure.four-three { width: min(calc(100% - 40px), calc((100cqh - 64px) * 4 / 3)); }
  /* The figure is sized to the room, so the clip fills it instead of its own 72vh cap. */
  .canvas-body figure.portrait .film video, .canvas-body figure.square .film video, .canvas-body figure.three-four .film video, .canvas-body figure.four-three .film video { width: 100%; max-height: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }
/* A dark disc under the ring keeps it readable on a light frame too. */
.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; box-sizing: border-box; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 4px solid rgba(255, 255, 255, 0.22); border-top-color: #fff; border-right-color: #fff; border-radius: 999px; background: rgba(12, 12, 12, 0.78); animation: spin 0.8s linear infinite; pointer-events: none; }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes shimmer { to { background-position: -200% 0; } }
figure { margin: 0; }
.film {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 16px;
  background: #000;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.film video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  background: #000;
  border-radius: 0;
}
.film.portrait video { aspect-ratio: 9 / 16; width: auto; height: auto; max-height: min(72vh, 820px); }
.film.square video { aspect-ratio: 1 / 1; width: auto; height: auto; max-height: min(72vh, 820px); }
.film.three-four video { aspect-ratio: 3 / 4; width: auto; height: auto; max-height: min(72vh, 820px); }
.film:fullscreen,
.film:-webkit-full-screen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #000;
}
.film:fullscreen video,
.film:-webkit-full-screen video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}
.sound-tap { position: absolute; top: 42%; right: 16px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; line-height: 28px; cursor: pointer; }
.sound-tap[hidden] { display: none; }
.film-bar { position: absolute; right: 0; bottom: 0; left: 0; padding: 48px 12px 12px; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35), transparent); }
.film-dock { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; }
#film-time { flex: none; min-width: 88px; font-size: 13px; font-variant-numeric: tabular-nums; }
.seek { flex: 1; height: 36px; margin: 0; accent-color: #fff; cursor: pointer; }
.film-dock button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.film-dock button:hover { background: rgba(255, 255, 255, 0.12); }
figcaption { color: var(--muted); margin-top: 8px; font-size: 13px; }
.player-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.player-tools button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--ink) 62%, transparent); color: var(--surface); display: grid; place-items: center; cursor: pointer; }
.player-tools button:hover { background: color-mix(in srgb, var(--ink) 80%, transparent); }
.mn-mark { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 72%, transparent); color: var(--surface); font-size: 12px; font-weight: 650; pointer-events: none; }
.mn-mark .mark-logo { width: 18px; height: 18px; }
.timeline { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 12px; border-top: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.timeline[hidden], .scene-panel[hidden] { display: none; }
.demo-panel { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; }
.demo-panel[hidden] { display: none; }
.demo-panel h3 { margin: 0; font-size: 13px; font-weight: 600; }
.demo-panel .demo-state { color: var(--muted); }
.demo-panel .demo-state.failed { color: #c62828; }
.demo-panel video { flex-basis: 100%; max-height: 240px; border-radius: 10px; background: #000; }
.demo-panel input { flex: 1; min-width: 180px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; font: inherit; }
.demo-panel .demo-actions { display: flex; gap: 8px; margin-left: auto; }
.demo-panel .demo-part { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.demo-panel .demo-part .demo-state { flex: 1; min-width: 0; }
.tl-block.tl-part { background: var(--surface); border-style: dashed; cursor: pointer; }
.demo-seg { grid-template-columns: repeat(3, minmax(0, 72px)); }
/* Demo composer (spec 445): built like Film's; the steps are a second, quieter line. */
.demo-steps-slot { border-top: 1px solid #f0f1ec; }
#demo-create .composer .demo-steps-slot input { font-size: 14.5px; padding-top: 12px; padding-bottom: 12px; }
#demo-spoken { grid-template-columns: repeat(2, minmax(0, 88px)); }
#demo-seconds { grid-template-columns: repeat(3, minmax(0, 88px)); }
.demo-with { display: grid; gap: 18px; }
.demo-with[hidden] { display: none; }
.demo-with textarea { padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 400; resize: vertical; }
html[data-theme="dark"] .demo-steps-slot { border-top-color: var(--line); }
html[data-theme="dark"] .demo-with textarea { background: var(--surface); border-color: var(--line); }
.demo-layouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.demo-layouts button { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.demo-layouts button.on { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
@media (max-width: 560px) { .demo-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.presenter-body { display: grid; gap: 14px; }
.presenter-photo { display: grid; place-items: center; height: 180px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 13px; text-align: center; cursor: pointer; overflow: hidden; }
.presenter-photo img { width: 100%; height: 100%; object-fit: contain; }
.presenter-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.presenter-note { margin: 0; color: var(--muted); font-size: 12px; }
.presenter-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.tl-transport { display: flex; align-items: center; gap: 8px; }
.tl-transport #film-time { min-width: 88px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.tl-transport button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.tl-transport .speed-toggle { width: auto; min-width: 40px; padding: 0 8px; font: inherit; font-size: 12px; }
.tl-transport button:hover { background: var(--bg); }
.tl-transport .seek { flex: 1; accent-color: var(--ink); }
.tl-row { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: center; }
.tl-name { font-size: 11px; color: var(--muted); }
.tl-lane { position: relative; height: 46px; border-radius: 8px; background: var(--bg); }
.tl-lane::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--head, 0%); width: 2px; background: var(--ink); pointer-events: none; z-index: 2; }
.tl-block { position: absolute; top: 4px; bottom: 4px; overflow: hidden; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.tl-block b, .tl-block span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-block b { font-size: 11px; font-weight: 650; }
.tl-block span { font-size: 10px; color: var(--muted); }
.tl-block.on { border-color: var(--ink); }
.tl-bgm { position: absolute; inset: 6px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--brand) 28%, var(--surface)); color: var(--ink); font-size: 12px; }
.tl-bgm.silent { background: var(--surface); color: var(--muted); border: 1px dashed var(--line); }
.scene-panel { width: min(320px, 36vw); flex: none; display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); overflow: auto; }
.scene-panel header { display: flex; align-items: flex-start; gap: 8px; }
.scene-panel h2 { margin: 0; font-size: 15px; }
.scene-panel header p, .scene-else, .scene-note { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.scene-panel header button { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.scene-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.scene-field span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.scene-field textarea { width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; resize: vertical; }
#scene-save { height: 40px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on); font: inherit; font-weight: 650; cursor: pointer; }
#scene-save:disabled { opacity: 0.55; cursor: default; }
.pipe li.cap-step { flex-direction: column; align-items: stretch; }
.cap-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cap-shot { padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); cursor: zoom-in; }
.cap-shot img { display: block; width: 100%; height: 120px; object-fit: cover; object-position: top; }
.cap-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.cap-card b { display: block; margin-bottom: 6px; font-size: 13px; }
.cap-excerpt, .cap-more { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.cap-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cap-card.open .cap-excerpt { display: none; }
.cap-toggle { margin-top: 6px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cap-logos { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cap-logos img, .cap-mark { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; background: var(--bg); border: 1px solid var(--line); }
.cap-mark { display: grid; place-items: center; font-weight: 750; }
.cap-swatches { display: flex; gap: 6px; margin-bottom: 6px; }
.cap-swatches i { width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--line); }
.cap-font, .cap-tones, .cap-pace { display: block; font-size: 12px; color: var(--muted); }
.cap-pace b { color: var(--ink); font-weight: 650; }
.credit-modal, .finish-modal { width: min(440px, calc(100vw - 32px)); padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink); }
.credit-modal { position: relative; }
.credit-modal::backdrop { background: color-mix(in srgb, var(--ink) 46%, transparent); }
.credit-modal h2 { margin: 0 28px 12px 0; font-size: 18px; }
.credit-modal p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.credit-size { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.credit-size select { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.credit-all { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.finish-modal { width: min(440px, calc(100vw - 32px)); padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink); }
.finish-modal::backdrop { background: color-mix(in srgb, var(--ink) 46%, transparent); }
.finish-x { position: absolute; top: 10px; right: 10px; margin: 0; }
.finish-modal { position: relative; }
.finish-x button, .shot-light button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.finish-modal h2 { margin: 0 28px 12px 0; font-size: 18px; }
.finish-card { margin: 0 0 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.finish-card h3 { margin: 0 0 6px; font-size: 15px; }
.finish-card p, .finish-ask, .finish-legal, .finish-refund { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.finish-primary, .finish-secondary { width: 100%; height: 42px; margin-top: 12px; border-radius: 999px; font: inherit; font-weight: 650; cursor: pointer; }
.finish-primary { border: 0; background: var(--ink); color: var(--on); }
.finish-secondary { border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.finish-ask { margin: 8px 0; text-align: center; }
.finish-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.finish-chips button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.finish-chips button[aria-checked="true"] { background: var(--ink); color: var(--on); border-color: var(--ink); }
.finish-legal, .finish-refund { margin-top: 12px; text-align: center; font-size: 12px; }
.finish-legal a { color: var(--ink); }
.shot-light { width: min(960px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); }
.shot-light img { display: block; width: 100%; height: auto; border-radius: 10px; }
.shot-light form { display: flex; justify-content: flex-end; margin: 0; }
.text-btn { margin-top: 14px; }
.panel { max-width: 760px; margin: 0 auto; padding: 12vh 24px 64px; }
.panel h1, .panel .lead { text-align: left; }
.account-note { margin: -8px auto 22px; max-width: 36rem; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.45; }
.notes { display: grid; gap: 12px; margin-top: 22px; }
.notes article { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.notes time { color: var(--muted); font-size: 12px; letter-spacing: 0.04em; }
.notes h2 { margin: 6px 0 8px; font-size: 16px; }
.notes p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.job-settings-wrap { position: relative; }
.job-settings {
  position: fixed;
  z-index: 40;
  width: 280px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45);
  text-align: left;
  color: var(--ink);
}
.job-settings h2 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.job-settings dl { margin: 0; display: grid; gap: 8px; }
.job-settings dt { color: var(--muted); font-size: 11px; }
.job-settings dd { margin: 2px 0 0; font-size: 14px; }
.job-settings .note { margin: 10px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.job-settings .theme-row { display: flex; gap: 4px; }
.job-settings .theme-row button { flex: 1; height: 32px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 12px; cursor: pointer; }
.job-settings .theme-row button.on { background: var(--ink); color: var(--on); }
html[data-theme="dark"] {
  color-scheme: dark;
  /* The canvas behind the page: dark from the first paint, and in overscroll. */
  background: #151412;
  --bg: #151412;
  --surface: #1d1c1a;
  --ink: #f5f1e8;
  --muted: #ada79d;
  --line: #3a3732;
  --gray: #2b2925;
  --brand-text: #E8808C;
  --mark-ink: #f4f4f0;
  --mark-lime: var(--brand);
  --char: #0e0d0c;
  --on: #151412;
}
/* Studio chat and status in dark mode: the light build uses white glass and dark text. */
html[data-theme="dark"] .msg-user p { border-color: var(--line); background: var(--gray); color: var(--ink); }
html[data-theme="dark"] .pipe { border-color: var(--line); background: var(--surface); box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] .pipe-head { color: var(--ink); }
html[data-theme="dark"] .pipe ul { border-top-color: var(--line); }
html[data-theme="dark"] .run-badge.ready { background: rgba(142, 31, 47, 0.12); color: #E8808C; }
html[data-theme="dark"] .run-badge.ready i { background: #E8808C; }
html[data-theme="dark"] .icon,
html[data-theme="dark"] .product-menu,
html[data-theme="dark"] .lang-menu,
html[data-theme="dark"] .theme-menu { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] body.app,
html[data-theme="dark"] body.app .app-nav,
html[data-theme="dark"] body.studio,
html[data-theme="dark"] .workspace { background: var(--bg); }
html[data-theme="dark"] body.app .view:not([hidden]) { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .studio-canvas { background: var(--bg); border-color: var(--line); }
html[data-theme="dark"] .canvas-bar,
html[data-theme="dark"] .composer-dock,
html[data-theme="dark"] .composer-box,
html[data-theme="dark"] .glass-btn { background: color-mix(in srgb, var(--surface) 92%, transparent); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .mode.on,
html[data-theme="dark"] .seg input:checked + span,
html[data-theme="dark"] .watch-card { background: var(--surface); color: var(--ink); }

/* 048 auth-parity: dedicated login/signup split layout (Motioneed lime, not MF orange) */
body.auth { background: var(--bg); }
body.auth .top,
body.auth .app-nav,
body.auth .foot { display: none !important; }
body.auth main,
body.auth:not(.app):not(.studio) main {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100dvh;
}
body.auth .view:not([hidden]) {
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.auth-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
  width: 100%;
}
.auth-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 40px 36px 48px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
  cursor: pointer;
}
.auth-brand .mark-logo { width: 28px; height: 28px; }
.auth-col h1,
#account-hello-title {
  margin: 8px 0 0;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.auth-col .lead { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.auth-social { display: grid; gap: 10px; margin-top: 8px; }
.auth-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  opacity: 0.72;
}
.auth-social-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.auth-social-note.off { display: none; }
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.auth-or::before,
.auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-form { max-width: none; margin-top: 0; width: 100%; }
.auth-pass-field .auth-pass-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  overflow: hidden;
}
.auth-pass-field .auth-pass-row input {
  flex: 1;
  border: 0;
  height: 44px;
  border-radius: 0;
  background: transparent;
}
.auth-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.auth-eye:hover { color: var(--ink); }
.auth-forgot-row { margin: -4px 0 0; text-align: right; }
.auth-forgot-row .text-btn { font-size: 13px; }
.auth-submit { width: 100%; height: 44px; border-radius: 999px; }
.account-form.auth-form .solid.auth-submit,
body.auth .account-form .auth-submit {
  width: 100% !important;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.auth-switch { margin-top: 4px; text-align: center; }
.auth-forgot-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.auth-forgot-panel h2 { margin: 0; font-size: 18px; }
.auth-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 42%),
    radial-gradient(circle at 22% 88%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 40%),
    #f3f5ef;
  background-image:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 42%),
    radial-gradient(circle at 22% 88%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 40%),
    radial-gradient(rgba(31, 31, 31, 0.06) 1px, transparent 1px),
    linear-gradient(#f3f5ef, #F3ECED);
  background-size: auto, auto, 18px 18px, auto;
}
.auth-promo-card {
  display: grid;
  gap: 22px;
  justify-items: center;
  width: min(560px, 100%);
  padding: 48px 36px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: color-mix(in srgb, white 78%, transparent);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.auth-promo-tag {
  color: var(--brand-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.auth-promo-h {
  margin: 0;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.15;
}
.auth-promo-input {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(420px, 100%);
  height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.35);
}
.auth-promo-input svg { color: var(--muted); flex: none; }
.auth-caret {
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  background: var(--brand);
  animation: auth-blink 1s step-end infinite;
}
@keyframes auth-blink { 50% { opacity: 0; } }
.auth-promo-hint { margin: 0; color: var(--muted); font-size: 14px; }
html[data-theme="dark"] .auth-promo {
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 42%),
    radial-gradient(circle at 22% 88%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 40%),
    #151714;
}
html[data-theme="dark"] .auth-promo-card { background: color-mix(in srgb, var(--surface) 88%, transparent); }
html[data-theme="dark"] .auth-promo-input,
html[data-theme="dark"] .auth-pass-field .auth-pass-row { background: var(--surface); }
html[data-theme="dark"] .auth-social-btn { background: var(--surface); }
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-promo { display: none; }
  .auth-col { max-width: 480px; padding: 28px 20px 40px; }
}

html[data-theme="dark"] .account-form input, html[data-theme="dark"] .account-form textarea { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .account .solid,
html[data-theme="dark"] .app-nav nav button.on .nav-ico,
html[data-theme="dark"] .avatar { color: var(--on); }
html[data-theme="dark"] .letter { background: var(--surface); }
html[data-theme="dark"] .msg-body > p,
html[data-theme="dark"] .history-bar { color: var(--muted); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.pair article, .card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: color-mix(in srgb, white 72%, transparent); text-align: left; }
.pair h2 { margin: 0 0 8px; font-size: 16px; }
.pair p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cards { display: grid; gap: 10px; margin-top: 18px; }
.card { width: 100%; border-radius: 16px; display: flex; justify-content: space-between; gap: 12px; }
.card b { font-weight: 640; }
.card span { color: var(--muted); font-size: 13px; }

/* Projects: Motion + Film cards (spec 047) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.posts article[data-post],
.entries article[data-view], .entries article[data-log] { cursor: pointer; }
#home-log p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.posts article[data-post]:hover { translate: 0 -2px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery button {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.gallery .poster { aspect-ratio: 16 / 9; }
.post-cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: 16px; display: block; }
.post time { display: block; margin: 16px 0 0; color: var(--muted); font-size: 12px; letter-spacing: 0.05em; }
@media (max-width: 1100px) {
  .top, .top.compact {
    height: 96px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 40px 28px;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 16px 8px;
  }
  .logo { grid-column: 1; grid-row: 1; min-width: 0; }
  .account { grid-column: 2; grid-row: 1; margin-left: 0; }
  .links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .links::-webkit-scrollbar { display: none; }
  .links > button, .products-btn { flex: none; }
  .product-menu { max-width: calc(100vw - 32px); }
  body:not(.app):not(.studio) main { padding-top: 96px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .faq { margin-top: 56px; }
  .reel-head { flex-direction: column; align-items: flex-start; }
  .foot-top { flex-direction: column; gap: 40px; margin-bottom: 48px; }
  .cols { gap: 28px 32px; }
  .cols > div { flex: 1 1 140px; min-width: 0; }
  .copy { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 860px) {
  .side { display: none; }
  .canvas { margin: 0; border: 0; border-radius: 0; }
  .workspace { flex-direction: column; height: auto; min-height: 100dvh; }
  .history { width: 100%; height: 42dvh; }
  .studio-canvas { margin: 0; border-radius: 0; }
  .canvas-bar { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 12px; }
  .canvas-actions { flex-wrap: wrap; }
  .pair { grid-template-columns: 1fr; }
  .stage { padding-top: 8vh; }
  body.app .app-nav {
    top: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 56px;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid rgba(224, 224, 224, 0.7);
  }
  body.app .app-nav-head { width: auto; height: 56px; padding: 0 8px 0 12px; flex: none; }
  body.app .app-brand { font-size: 0; gap: 0; }
  body.app .app-brand .mark-logo { width: 28px; height: 28px; }
  body.app .app-nav nav {
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 0 8px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.app .app-nav nav::-webkit-scrollbar { display: none; }
  body.app .app-nav nav button { width: auto; flex: none; gap: 4px; padding: 4px 6px; font-size: 13px; }
  body.app .nav-ico { width: 28px; height: 28px; }
  body.app .app-nav nav em { display: none; }
  body.app .app-user { display: none; }
  body.app main { margin-left: 0; padding: 56px 0 0; }
  body.app .view:not([hidden]) {
    min-height: calc(100dvh - 56px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .watch { padding: 12px; }
  .watch-card.tall, .watch-card.wide {
    width: min(100%, calc(100vw - 24px));
    height: auto;
    max-height: calc(100dvh - 24px);
    padding: 8px;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  .watch-card.tall .watch-film,
  .watch-card.wide .watch-film {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }
  .watch-card.tall .watch-film { aspect-ratio: 9 / 14; max-height: 62dvh; }
  .watch-card.tall .watch-side,
  .watch-card.wide .watch-side { padding: 12px 4px 0; }
  .watch-card.tall #watch-make,
  .watch-card.wide #watch-make { margin: 8px 0; }
  .watch-card.tall .prev, .watch-card.wide .prev { left: 16px; top: 34%; bottom: auto; }
  .watch-card.tall .next, .watch-card.wide .next { right: 16px; top: 34%; bottom: auto; }
  .watch-card.tall .close, .watch-card.wide .close { top: 12px; right: 12px; }
}
@media (max-width: 720px) {
  .home { padding-left: 16px; padding-right: 16px; }
  .logo { gap: 8px; font-size: 17px; }
  .logo .mark-logo { width: 26px; height: 26px; }
  .language { width: 40px; }
  .icon { width: 40px; }
  .account { gap: 8px; }
  .account .ghost { display: none; }
  .account .who { display: none; }
  .account .solid { padding: 0 14px; }
  .links { gap: 8px; }
  .links > button, .products-btn { font-size: 13px; }
  .hero { padding: 28px 0 4px; }
  .lede { font-size: clamp(1.35rem, 5.4vw, 1.7rem); }
  .punch { font-size: clamp(2rem, 9vw, 2.6rem); }
  .sub { font-size: 1rem; }
  .hero-go { flex-direction: column; }
  .make { justify-content: center; }
  .reel { margin: 0 -16px; padding: 0 16px 12px; scroll-padding: 0 16px; }
  .reel button.short { width: 82vw; }
  .reel button.tall { width: calc(82vw * 81 / 256); }
  .reel .poster { height: calc(82vw * 9 / 16); }
  .reel button.tall .poster { height: calc(82vw * 9 / 16); }
  .letter { padding: 32px 22px 28px; }
  .letter h2 { font-size: 26px; }
  .posts article { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .posts img { width: 96px; }
  .entries article { grid-template-columns: 1fr; gap: 6px; }
  .faq h2 { font-size: 28px; }
  .wordmark { padding: 26px 0; }
  .wm-brace i { font-size: 10px; letter-spacing: 0.12em; }
  .foot { margin: 0; padding: 72px 20px 28px; clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px); }
  .panel { padding: 48px 16px 64px; }
  .post-cover { max-height: 220px; border-radius: 12px; }
}
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; }
}

.voice-lang { margin-left: 4px; padding: 4px 8px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 12px; }
.voice-lang[hidden] { display: none; }
/* Film mode (spec 042) */
/* Website | Prompt uses Motion's .modes / .mode tabs; Film only aligns them left (spec 043). */
.film-note { margin: 0; color: var(--muted); font-size: 12.5px; }
.film-board { margin: 0 0 28px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.film-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.film-head h2 { margin: 0; font-size: 20px; }
.film-meta { color: var(--muted); font-size: 13px; }
.film-stage { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; }
.film-stage .spin { width: 14px; height: 14px; border: 1.5px solid var(--brand-text); border-right-color: transparent; border-radius: 999px; animation: spin 0.8s linear infinite; }
.film-stage[data-status="ready"] { color: var(--brand-text); font-weight: 600; }
/* An open film: Motion's workspace, the film and its plan on the canvas (spec 368). */
.film-work .studio-canvas { overflow: hidden; }
.film-canvas { flex: 1; min-height: 0; overflow: auto; padding: 8px 24px 28px; }
.film-canvas .film-player { max-width: 960px; margin: 12px auto; }
.film-canvas .film-player.vertical { max-width: 360px; }
.film-canvas .film-player.three-four { max-width: 480px; }
.film-canvas .film-player.four-three { max-width: 840px; }
.film-canvas .film-versions, .film-canvas .film-share, .film-canvas .film-plan, .film-canvas .film-clips { max-width: 960px; margin-left: auto; margin-right: auto; }
.film-wait { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 960px); margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 20px; background: rgba(40, 41, 43, 0.05); color: var(--muted); font-size: 14px; }
.film-wait.square { aspect-ratio: 1; width: min(100%, 70vh); }
.film-wait.vertical { aspect-ratio: 9 / 16; width: min(100%, calc(70vh * 9 / 16)); }
.film-wait.three-four { aspect-ratio: 3 / 4; width: min(100%, calc(70vh * 3 / 4)); }
.film-wait.four-three { aspect-ratio: 4 / 3; width: min(100%, calc(70vh * 4 / 3)); }
html[data-theme="dark"] .film-wait { background: rgba(255, 255, 255, 0.05); }
.film-wait .spin { width: 16px; height: 16px; border: 1.5px solid var(--muted); border-right-color: transparent; border-radius: 999px; animation: spin 0.8s linear infinite; }
.film-work .msg-body #film-render { align-self: flex-start; }
/* The film's steps, numbered, each with its state: an empty ring, a spinner, a tick. */
.film-work .pipe-head b { display: flex; flex-direction: column; }
.film-work .pipe-head small { font-size: 11px; font-weight: 400; color: var(--muted); }
.film-work .pipe .step { display: flex; align-items: center; gap: 8px; }
.film-work .pipe .step::before { content: ""; flex: none; width: 12px; height: 12px; border: 1.5px solid rgba(40, 41, 43, 0.25); border-radius: 999px; }
.film-work .pipe li.done .step::before { border-color: #2e7d32; background: #2e7d32 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat; }
.film-work .pipe li.now .step::before { border-color: #1565c0; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@media (max-width: 860px) {
  /* Stacked on a phone: the page scrolls, not the canvas (Motion and Film workspaces). */
  body.studio { overflow: visible; }
  body.studio main { height: auto; }
  .film-work .studio-canvas, .film-canvas { overflow: visible; }
  /* A film's chat is a few turns: show it whole instead of a 42dvh window scrolled to its end. */
  .film-work .history { height: auto; }
  .film-work .history-feed { overflow: visible; }
  .film-canvas { padding: 8px 12px 24px; }
}
.film-player { margin: 12px 0; border-radius: 14px; overflow: hidden; background: #000; }
.film-player video { display: block; width: 100%; max-height: 70vh; background: #000; }
.film-player.vertical { max-width: 360px; }
.film-versions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 14px; font-size: 13px; color: var(--muted); }
.film-versions button { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; }
.film-versions button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.film-download { margin-left: auto; color: var(--brand-text); font-weight: 600; }
/* With captions or without, beside Download (spec 526). */
.film-cap-export { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 13px; cursor: pointer; }
.film-cap-export + .film-download { margin-left: 12px; }
.film-plan { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 14px 0; font-size: 14px; }
.film-plan dt { color: var(--muted); }
.film-plan dd { margin: 0; }
.film-clips { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.film-clip { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.film-clip h3 { margin: 0 0 8px; font-size: 14px; }
.film-clip ul { margin: 0 0 10px; padding-left: 18px; font-size: 14px; }
.film-clip ul b { color: var(--muted); font-weight: 600; margin-right: 4px; }
.film-clip label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.film-clip textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); resize: vertical; }
.film-clip details { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.film-sfx { margin: 8px 0 0; font-size: 13px; }
.film-sfx span { color: var(--muted); margin-right: 4px; }
.film-revise { display: flex; gap: 8px; margin-top: 14px; }
.film-revise input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--bg); color: var(--ink); }
.film-revise button { height: 42px; padding: 0 16px; border: 1px solid var(--char); border-radius: 12px; background: var(--char); color: var(--on); font: inherit; cursor: pointer; }
.film-yours { font-size: 16px; margin: 8px 0 10px; }
.film-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.film-card { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.film-card.on { border-color: var(--brand-text); }
.film-card.failed .film-card-text span { color: #c0362c; }
.film-card.making .film-card-text span { color: var(--brand-text); }
.film-thumb { width: 72px; height: 48px; border-radius: 8px; background: var(--gray); overflow: hidden; }
.film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-card-text { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.film-card-text b { color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.film-empty { color: var(--muted); font-size: 14px; }
@media (max-width: 720px) {
  .film-plan { grid-template-columns: 1fr; }
  .film-plan dd { margin-bottom: 6px; }
}

/* Film create page (spec 044): the Motionflare Film layout on Motion's own classes.
   Everything here is scoped to #view-film / .film-* so no other page changes. */
.film-create { max-width: 720px; padding-top: 14vh; }
.film-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(40, 41, 43, 0.06); font-size: 13px; font-weight: 500; color: var(--ink); }
.film-pill svg { color: var(--ink); }
.film-pill i { width: 1px; height: 14px; background: var(--line); }
.film-pill button { border: 0; padding: 0; background: none; font: inherit; color: var(--brand-text); cursor: pointer; }
.film-create > h1.film-h1 { margin-bottom: 24px; }
.film-h1 em { font-family: Georgia, "Times New Roman", "Songti SC", "Hiragino Mincho ProN", "Batang", serif; font-style: italic; font-weight: 400; font-size: 1.22em; letter-spacing: -0.01em; }
.film-hint { font-size: 12.5px; max-width: 460px; }
.film-composer { margin-top: 16px; }
.film-composer:focus-within { border-color: color-mix(in srgb, var(--brand-text) 35%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent), 0 18px 44px -26px rgba(0, 0, 0, 0.18); }
.film-url-slot { display: flex; align-items: center; gap: 10px; padding-left: 18px; }
.film-url-slot[hidden] { display: none; }
.film-url-slot .film-link { flex: none; color: color-mix(in srgb, var(--ink) 40%, transparent); }
.film-url-slot input { padding-left: 0; padding-top: 10px; padding-bottom: 10px; }
#film-prompt-slot textarea { min-height: 112px; padding-top: 14px; font-size: 15px; }
.film-toolbar { padding: 10px 10px 10px 12px; }
.film-toolbar .tools { flex-wrap: nowrap; min-width: 0; }
.film-round, .film-pillbtn, .film-model > button { display: inline-flex; align-items: center; gap: 6px; height: 36px; border: 1px solid #e0e0e0; border-radius: 999px; background: #fafaf8; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500; box-shadow: 0 1px 2px rgba(40, 41, 43, 0.05); cursor: pointer; white-space: nowrap; }
.film-round { width: 36px; justify-content: center; padding: 0; flex: none; }
.film-round:disabled { opacity: 0.45; cursor: not-allowed; }
.film-pillbtn { padding: 0 12px; }
.film-pillbtn em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.film-cost { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; font-size: 13px; font-weight: 500; color: var(--brand-text); white-space: nowrap; cursor: help; }
.film-tip { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30; width: max-content; max-width: 288px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.35); color: var(--ink); font-size: 12px; font-weight: 400; line-height: 1.45; white-space: normal; opacity: 0; visibility: hidden; transition: opacity 0.15s; }
.film-tip:empty { display: none; }
.film-cost:hover .film-tip, .film-cost:focus .film-tip, .film-cost:focus-within .film-tip { opacity: 1; visibility: visible; }
.film-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.film-model > button { padding: 0 12px; height: 36px; }
.film-model > button:disabled { opacity: 0.5; cursor: not-allowed; }
.film-model-menu { left: auto; right: 0; width: 280px; }
.film-model-menu button { display: grid; grid-template-columns: 1fr auto; text-align: left; }
.film-go { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--char); color: var(--on); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(40, 41, 43, 0.6); }
.film-go:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.film-count { align-self: flex-end; margin: 6px 4px 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.film-count[hidden] { display: none; }
.film-error { margin: 10px 0 0; color: #b42318; font-size: 13px; }
.film-error[hidden] { display: none; }
.film-provider { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; border: 1px solid #f0b9a8; background: #fff4f0; color: #8a2d12; font-size: 13px; text-align: center; }
.film-provider[hidden] { display: none; }
#view-film .film-board, #view-film .film-yours, #view-film .film-list { width: 100%; }
#view-film .film-board { margin-top: 36px; text-align: left; }
#view-film .film-yours { margin-top: 36px; align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#film-render { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--char); color: var(--on); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#film-render:disabled { opacity: 0.45; cursor: not-allowed; }

/* Settings dialog (reference 03) */
.film-dialog { padding: 0; border: 0; background: transparent; max-width: min(620px, calc(100vw - 24px)); width: 100%; color: var(--ink); }
.film-dialog::backdrop { background: rgba(28, 28, 26, 0.42); }
.film-dialog-panel { padding: 22px 22px 24px; border: 1px solid #e0e0e0; border-radius: 24px; background: radial-gradient(circle at 92% 0%, #8E1F2F26, transparent 42%), #fafaf8; box-shadow: 0 50px 140px -50px rgba(0, 0, 0, 0.45); }
.film-dialog-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.film-dialog-panel h2 { margin: 0; font-size: 16px; font-weight: 600; }
.film-x { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.film-x:hover { background: var(--gray); }
.film-dialog-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.film-col { display: grid; gap: 16px; align-content: start; }
.film-col h3 { margin: 0; font-size: 13px; font-weight: 600; }
.film-field { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.film-field select { height: 36px; max-width: 100%; padding: 0 30px 0 12px; border: 1px solid #e0e0e0; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2328292b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--ink); font: inherit; font-size: 13px; font-weight: 400; appearance: none; -webkit-appearance: none; }
.film-field select.film-fit { justify-self: start; min-width: 150px; }
.film-field input[type=text] { height: 36px; padding: 0 12px; border: 1px solid #e0e0e0; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; }
html[data-theme="dark"] .film-field input[type=text] { background: var(--surface); border-color: var(--line); }
.film-duration-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 400; color: var(--ink); }
.film-duration-head em { font-style: normal; color: var(--muted); }
.film-duration input[type="range"] { --fill: 11%; width: 100%; height: 4px; margin: 6px 0 0; appearance: none; -webkit-appearance: none; border-radius: 999px; background: linear-gradient(var(--char), var(--char)) 0 / var(--fill) 100% no-repeat, var(--line); }
.film-duration input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 999px; background: var(--char); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); cursor: pointer; }
.film-duration input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; background: var(--char); border: 2px solid #fff; cursor: pointer; }
.film-ends { display: flex; justify-content: space-between; font-size: 11px; font-weight: 400; color: var(--muted); }
.film-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 4px; }
.film-seg button { height: 32px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.film-seg button.on { background: var(--char); border-color: var(--char); color: var(--on); }
.film-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.film-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.film-toggle span { display: grid; gap: 2px; }
.film-toggle b { font-size: 13px; font-weight: 500; }
.film-toggle small { font-size: 11.5px; color: var(--muted); }
.film-toggle input { flex: none; position: relative; width: 36px; height: 20px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 999px; background: var(--line); cursor: pointer; transition: background 0.15s; }
.film-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.film-toggle input:checked { background: var(--brand-text); }
.film-toggle input:checked::after { transform: translateX(16px); }
.film-toggle input:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.film-dialog .film-note { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

html[data-theme="dark"] .film-round, html[data-theme="dark"] .film-pillbtn, html[data-theme="dark"] .film-model > button, html[data-theme="dark"] .film-seg button, html[data-theme="dark"] .film-field select { background-color: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .film-dialog-panel { background: var(--surface); border-color: var(--line); }

@media (max-width: 720px) {
  .film-create { padding-top: 8vh; }
  .film-toolbar { flex-wrap: wrap; }
  .film-toolbar .tools { flex-wrap: wrap; }
  .film-actions { margin-left: auto; }
  .film-dialog-cols { grid-template-columns: 1fr; }
  .film-dialog-panel { padding: 18px 16px 20px; max-height: calc(100vh - 32px); overflow: auto; }
  .film-tip { max-width: calc(100vw - 64px); }
}

/* Film reference images (spec 045) */
.film-refs-wrap { position: relative; flex: none; }
.film-round.on { border-color: var(--brand-text); background: color-mix(in srgb, var(--brand) 22%, #fafaf8); }
.film-round b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--char); color: var(--on); font-size: 10px; font-weight: 600; line-height: 18px; text-align: center; }
.film-refs-menu { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 40; width: min(300px, calc(100vw - 48px)); padding: 8px; border: 1px solid #e0e0e0; border-radius: 14px; background: var(--surface); box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.35); }
.film-refs-pick { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.film-refs-pick:hover { background: var(--bg); }
.film-refs-pick svg { flex: none; margin-top: 2px; color: var(--muted); }
.film-refs-pick span { display: grid; gap: 2px; }
.film-refs-pick b { font-size: 13.5px; font-weight: 600; }
.film-refs-pick small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.film-refs-note { margin: 4px 8px 6px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.film-refs-list { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 720px; margin: 12px 0 0; padding: 0; list-style: none; }
.film-ref { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; min-width: min(100%, 200px); max-width: 280px; padding: 6px 8px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.film-ref img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--gray); }
.film-ref-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.film-ref-drop { width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 16px; cursor: pointer; }
.film-ref-drop:hover { background: var(--gray); color: var(--ink); }
.film-refs-error { margin: 8px 0 0; color: #b42318; font-size: 13px; }
.film-refs-error[hidden] { display: none; }

/* Film share (spec 046) */
.film-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 14px; }
.film-share-btn { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.film-share-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.film-share-panel[hidden] { display: none; }
.film-share-panel input { width: min(320px, 100%); height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12.5px; }
.film-share-panel button { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.film-share-note { margin: 0; width: 100%; color: var(--muted); font-size: 12.5px; }
.film-share-note[hidden] { display: none; }

/* 050 marketing-pages */
.panel.wide { max-width: 960px; }
.feat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.feat-card { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: color-mix(in srgb, var(--surface) 90%, transparent); display: flex; flex-direction: column; gap: 12px; }
.feat-card h2 { margin: 0; font-size: 22px; }
.feat-card p { margin: 0; color: var(--muted); line-height: 1.5; flex: 1; }
.feat-card .solid { align-self: flex-start; }
.feat-sub { margin: 36px 0 14px; font-size: 22px; letter-spacing: -0.03em; }
.feat-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.feat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.feat-table th, .feat-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.feat-table thead th { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); font-weight: 700; }
.feat-table tbody th { width: 22%; color: var(--muted); font-weight: 600; }
.feat-both { margin-top: 22px; }
.feat-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
/* `.feat-sections p` out-ranks the rule above and zeroed the gap under a list (spec 460). */
.feat-sections .feat-ctas { margin-top: 24px; }
.feat-sections { display: grid; gap: 28px; margin-top: 36px; }
.feat-sections article { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.feat-sections h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.03em; }
.feat-sections h3 { margin: 18px 0 8px; font-size: 16px; }
.feat-sections p { margin: 0 0 12px; color: var(--muted); line-height: 1.55; }
.motion-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; align-items: center; }
.motion-split ul, .motion-limits { margin: 0; padding-left: 18px; color: var(--ink); display: grid; gap: 8px; }
.motion-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.motion-chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--brand) 22%, var(--surface)); font-size: 13px; font-weight: 650; }
.motion-film { margin: 0; }
.motion-film video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: #111; display: block; }
.motion-film.portrait { max-width: 280px; margin-inline: auto; }
.motion-film.portrait video { aspect-ratio: 9 / 16; }
.motion-film figcaption { display: grid; gap: 2px; margin-top: 10px; }
.motion-film figcaption b { font-size: 14px; }
.motion-film figcaption span, .motion-note { color: var(--muted); font-size: 13px; }
.score-board { margin-top: 8px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: color-mix(in srgb, #1f1f1f 92%, var(--brand)); color: #f4f4f1; }
.score-forms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.score-lane { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; margin-top: 8px; }
.score-lane b { font-size: 12px; font-weight: 600; }
.score-lane i { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, transparent var(--from), var(--brand) calc(var(--from) + 8%), var(--brand) calc(var(--from) + 70%), transparent 100%); }
.ask-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ask-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--surface); display: grid; gap: 8px; }
.ask-card p { margin: 0; }
.ask-card b { font-size: 14px; }
.ask-card span { color: var(--muted); font-size: 13px; }
#view-features-motion .panel, #view-features-film .panel { max-width: 1040px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; line-height: 20px; margin: 0 0 18px; }
/* Breadcrumb links are plain text, not the pill .text-btn they share markup with. */
.crumbs .text-btn { height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font: inherit; line-height: inherit; cursor: pointer; }
.crumbs .text-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .text-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.crumbs > span { color: var(--ink); font-weight: 600; }
.eyebrow { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.showcase-note { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
.cut-badge { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0.02em; }
.cut-badge.ours { background: var(--brand); color: var(--on-brand); }
.cut-badge.ref { background: color-mix(in srgb, var(--ink) 72%, transparent); color: #fff; }
.cut-badge.soon { background: color-mix(in srgb, var(--ink) 55%, transparent); color: #fff; }
.poster-only { cursor: default; opacity: 0.92; }
.poster-only .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster { position: relative; }
#view-changelog .panel > h1, #view-changelog .panel > .lead { text-align: center; }
#view-changelog .panel > h1 { font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.03em; }
.log-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 36px; }
.log-filters button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.log-filters button.on { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); color: var(--ink); font-weight: 600; }
/* Timeline (spec 317): date column, then a rail with one dot per entry. */
.log-list { position: relative; display: grid; gap: 0; max-width: 760px; margin: 0 auto; }
.log-list article { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 28px; padding: 0 0 56px; scroll-margin-top: 96px; }
.log-list article::before { content: ""; position: absolute; left: 110px; top: 6px; bottom: 0; width: 1px; background: var(--line); }
.log-list article:last-child::before { bottom: 40px; }
.log-list article::after { content: ""; position: absolute; left: 107px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.log-list time { padding-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.log-main { min-width: 0; padding-left: 14px; }
.log-list h2 { margin: -6px 0 10px; font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; }
.log-list h3 { margin: 26px 0 8px; font-size: 19px; letter-spacing: -0.01em; }
.log-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; }
.log-tags > span, .log-share { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.log-share { cursor: pointer; font: inherit; font-size: 11px; }
.log-share:hover { color: var(--ink); border-color: var(--ink); }
.log-list p { margin: 0; color: var(--ink); opacity: 0.86; line-height: 1.65; font-size: 15px; }
.log-media { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; background: #111; object-fit: cover; cursor: pointer; }
.log-list .log-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; opacity: 1; }
.log-links a { color: var(--brand); font-weight: 600; text-decoration: none; }
.log-links a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .log-list article { grid-template-columns: minmax(0, 1fr); padding: 0 0 40px 22px; }
  .log-list article::before { left: 3px; }
  .log-list article::after { left: 0; }
  .log-list time { margin-bottom: 8px; }
  .log-main { padding-left: 0; }
  .log-list h2 { margin-top: 0; font-size: 21px; }
}
@media (max-width: 800px) {
  .feat-cards { grid-template-columns: 1fr; }
  .motion-split, .ask-grid, .score-forms { grid-template-columns: 1fr; }
}

/* Auth polish — MotionFlare-like split, Motioneed brand */
body.auth {
  background: #f7f7f4;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}
body.auth .top,
body.auth .app-nav,
body.auth .foot { display: none !important; }
body.auth main,
body.auth:not(.app):not(.studio) main {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100dvh;
}
body.auth .view:not([hidden]) {
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.auth .auth-shell {
  display: grid;
  /* A narrow form column (owner, 2026-10-27); the reel side takes the rest and fills it. */
  grid-template-columns: minmax(440px, 0.7fr) 1.3fr;
  min-height: 100dvh;
  width: 100%;
  background: #fff;
}
body.auth .auth-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(32px, 6vh, 56px) clamp(28px, 5vw, 64px);
  max-width: none;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  margin: 0;
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
body.auth .auth-col > * {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
body.auth .auth-brand {
  margin-bottom: 8px;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}
body.auth .auth-col h1 {
  margin: 12px 0 4px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.2;
}
body.auth .auth-col .lead,
body.auth #account-lead { display: none !important; }
body.auth .auth-social {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
}
body.auth .auth-social-btn {
  width: 100%;
  height: 44px;
  opacity: 1;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  box-sizing: border-box;
}
body.auth .auth-social-btn:disabled { opacity: 0.92; }
body.auth .auth-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 0;
  letter-spacing: 0;
  text-transform: lowercase;
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
}
body.auth .auth-or::before,
body.auth .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}
body.auth .auth-social-note {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
body.auth .auth-form {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
}
body.auth .auth-form label > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
body.auth .auth-form input,
body.auth .auth-pass-field .auth-pass-row {
  border-radius: 10px;
  border-color: #d8d8d2;
  background: #fff;
}
body.auth .account-form .solid.auth-submit,
body.auth .auth-submit {
  width: 100% !important;
  height: 44px;
  margin-top: 4px;
  border-radius: 10px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
body.auth .auth-submit:hover {
  background: var(--ink);
  color: #f6f6f4;
}
body.auth .auth-terms {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
body.auth .auth-forgot-row {
  margin: 0;
  text-align: right;
}
body.auth .auth-switch {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
body.auth .auth-link {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--brand-text);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.auth .auth-switch .auth-link {
  font-size: 14px;
  color: var(--ink);
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
}
body.auth .auth-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.2vw, 32px);
  overflow: hidden;
  min-height: 100dvh;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 72% 18%, color-mix(in srgb, #8E1F2F 28%, transparent), transparent 46%),
    radial-gradient(circle at 18% 82%, color-mix(in srgb, #8E1F2F 14%, transparent), transparent 42%),
    linear-gradient(155deg, #0f1410 0%, #3A0C14 42%, #4A1019 100%);
}
/* A link typed, then the cut made from it (spec 459). */
/* The whole panel width (owner: the video fills its side), unless headline, field and frame would not fit one screen. */
body.auth .auth-reel { display: flex; flex-direction: column; gap: clamp(14px, 2dvh, 22px); width: min(100%, calc((100dvh - 320px) * 16 / 9)); color: #f6f8f2; }
body.auth .auth-reel-h { margin: 0 0 6px; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: clamp(30px, 3.2vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
body.auth .auth-reel-url { display: flex; align-items: center; gap: 10px; height: clamp(52px, 6dvh, 64px); padding: 0 22px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: clamp(17px, 1.3vw, 21px); font-weight: 600; }
body.auth .auth-reel-url svg { flex: none; color: rgba(246, 248, 242, 0.6); }
body.auth .auth-reel-caret { width: 2px; height: 20px; margin-left: -8px; background: #F08C98; animation: auth-blink 1s steps(1) infinite; }
@keyframes auth-blink { 50% { opacity: 0; } }
body.auth .auth-reel-arrow { align-self: center; color: rgba(246, 248, 242, 0.45); }
body.auth .auth-reel-film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; background: #000; box-shadow: 0 40px 90px -48px rgba(0, 0, 0, 0.75); }
body.auth .auth-reel-film video { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
body.auth .auth-reel-film.typing video { opacity: 0.25; }
body.auth .auth-reel-foot { display: flex; justify-content: space-between; align-items: center; color: rgba(246, 248, 242, 0.7); font-size: 13px; }
body.auth .auth-reel-kind { margin-right: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(240, 140, 152, 0.18); color: #F08C98; font-size: 12px; font-weight: 700; }
body.auth .auth-reel-dots i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
body.auth .auth-reel-dots i.on { background: #F08C98; }
@media (prefers-reduced-motion: reduce) {
  body.auth .auth-reel-caret { animation: none; }
}
@media (max-width: 960px) {
  body.auth .auth-shell { grid-template-columns: 1fr; }
  body.auth .auth-promo { display: none; }
  body.auth .auth-col {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    padding: 32px 22px 40px;
  }
  body.auth .auth-col > * { max-width: none; }
}

/* Markdown blog posts */
.notes.md { display: block; max-width: 760px; color: var(--text, inherit); font-size: 16px; line-height: 1.7; }
.notes.md p { margin: 0 0 16px; color: inherit; font-size: 16px; line-height: 1.7; }
.notes.md h2 { margin: 36px 0 12px; font-size: 24px; line-height: 1.3; }
.notes.md h3 { margin: 28px 0 10px; font-size: 19px; }
.notes.md h4 { margin: 22px 0 8px; font-size: 16px; }
.notes.md ul, .notes.md ol { margin: 0 0 16px; padding-left: 22px; }
.notes.md li { margin: 6px 0; }
.notes.md a { color: #8E1F2F; text-decoration: underline; text-underline-offset: 3px; }
.notes.md figure { margin: 24px 0; }
.notes.md img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.notes.md strong { font-weight: 650; }
.notes.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, #8E1F2F 12%, transparent); }
.notes.md pre { overflow-x: auto; padding: 14px; border-radius: 12px; border: 1px solid var(--line); }
.notes.md pre code { background: none; padding: 0; }
.notes.md blockquote { margin: 0 0 16px; padding: 4px 16px; border-left: 3px solid #8E1F2F; color: var(--muted); }
.notes.md hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.notes.md .md-table { overflow-x: auto; margin: 0 0 18px; }
.notes.md table { width: 100%; border-collapse: collapse; font-size: 14px; }
.notes.md th, .notes.md td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.notes.md th { color: #8E1F2F; font-weight: 600; }


/* === blog article shell (reading-post) === */
/* Isolated article column: cover → title → meta → dek → body → CTA → related.
   Site-wide FAQ/pricing chrome is stripped from /blog/:slug SSR; in-post ## FAQ stays. */
body.reading-post main {
  padding-bottom: 0;
}
.panel.post {
  max-width: 42rem;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.panel.post .post-back {
  margin: 0 0 20px;
  text-align: left;
}
.panel.post .post-back .text-btn {
  margin-top: 0;
  color: var(--muted);
  font-size: 13px;
}
.panel.post .post-back .text-btn:hover {
  color: var(--ink);
}
.panel.post .post-cover {
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin: 0 0 28px;
  background: var(--gray);
  border: 1px solid var(--line);
}
.panel.post .post-cover[hidden] {
  display: none;
}
.panel.post .post-header {
  margin: 0 0 8px;
}
.panel.post .post-header h1,
.panel.post #post-title {
  margin: 0 0 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.18;
  text-align: left;
  color: var(--ink);
}
.panel.post .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.panel.post .post-meta time,
.panel.post .post-meta #post-date {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.panel.post .post-meta-dot {
  opacity: 0.55;
}
.panel.post .post-lead {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
  text-align: left;
  font-weight: 500;
}
.panel.post .notes,
.panel.post .post-body {
  display: block;
  max-width: none;
  margin-top: 0;
  color: var(--ink);
  font-size: 17.5px;
  line-height: 1.7;
}
.panel.post .notes.md,
.panel.post .post-body.md {
  max-width: none;
  font-size: 17.5px;
  line-height: 1.7;
}
.panel.post .notes p,
.panel.post .notes.md p {
  margin: 0 0 1.15em;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.panel.post .notes.md .post-dek,
.panel.post .post-body .post-dek {
  margin: 0 0 1.6em;
  padding: 14px 16px 14px 18px;
  border-left: 3px solid #8E1F2F;
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, #8E1F2F 10%, var(--surface));
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.6;
}
.panel.post .notes.md h2 {
  margin: 2.1em 0 0.7em;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 26px;
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ink);
}
.panel.post .notes.md h3 {
  margin: 1.55em 0 0.55em;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.panel.post .notes.md h4 {
  margin: 1.3em 0 0.45em;
  font-size: 16px;
  font-weight: 650;
}
.panel.post .notes.md ul,
.panel.post .notes.md ol {
  margin: 0 0 1.2em;
  padding-left: 1.35em;
}
.panel.post .notes.md li {
  margin: 0.4em 0;
}
.panel.post .notes.md a {
  color: #8E1F2F;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, #8E1F2F 70%, transparent);
  text-underline-offset: 3px;
}
.panel.post .notes.md a:hover {
  color: #3A0C14;
  text-decoration-color: #8E1F2F;
}
html[data-theme="dark"] .panel.post .notes.md a {
  color: #8E1F2F;
}
.panel.post .notes.md figure {
  margin: 1.6em 0;
}
.panel.post .notes.md img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.panel.post .notes.md figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.panel.post .notes.md blockquote {
  margin: 0 0 1.2em;
  padding: 4px 0 4px 16px;
  border-left: 3px solid #8E1F2F;
  color: var(--muted);
}
.panel.post .notes.md hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}
.panel.post .notes.md .md-table {
  overflow-x: auto;
  margin: 0 0 1.4em;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.panel.post .notes.md table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}
.panel.post .notes.md th,
.panel.post .notes.md td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.panel.post .notes.md tr:last-child td {
  border-bottom: 0;
}
.panel.post .notes.md th {
  color: var(--ink);
  font-weight: 650;
  background: color-mix(in srgb, #8E1F2F 8%, var(--surface));
}
.panel.post .notes.md tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
}
/* In-post FAQ (## FAQ + ### Q) — article rhythm, not homepage FAQ widget */
.panel.post .notes.md h2 + h3 {
  margin-top: 1.1em;
}
.panel.post .post-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 40px 0 0;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, #8E1F2F 35%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, #8E1F2F 9%, var(--surface));
}
.panel.post .post-cta strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.panel.post .post-cta p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.panel.post .post-cta .solid {
  flex: none;
}
.panel.post .post-related {
  margin: 48px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.panel.post .post-related h2 {
  margin: 0 0 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.panel.post .post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.panel.post .post-related-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.panel.post .post-related-card:hover {
  border-color: color-mix(in srgb, #8E1F2F 55%, var(--line));
  translate: 0 -1px;
}
.panel.post .post-related-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--gray);
}
.panel.post .post-related-card span {
  display: grid;
  gap: 4px;
  padding: 0 12px 12px;
}
.panel.post .post-related-card time {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.panel.post .post-related-card b {
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
@media (max-width: 860px) {
  .panel.post {
    padding: 32px 16px 64px;
  }
  .panel.post .post-cover {
    border-radius: 12px;
    margin-bottom: 22px;
  }
  .panel.post .post-header h1,
  .panel.post #post-title {
    font-size: 28px;
  }
  .panel.post .post-lead {
    font-size: 16.5px;
  }
  .panel.post .notes.md,
  .panel.post .post-body.md,
  .panel.post .notes,
  .panel.post .post-body {
    font-size: 16.5px;
  }
  .panel.post .post-related-grid {
    grid-template-columns: 1fr;
  }
  .panel.post .post-cta {
    padding: 16px 18px;
  }
}

/* In-app billing/account (signed in): keep sidebar shell */
body.app .auth-promo { display: none; }
body.app #view-account .auth-grid, body.app #view-account > div { display: block; }
body.app #view-billing .panel { max-width: none; }
.billing-current { font-weight: 600; color: #3A0C14; }
.upsell-btn { margin-left: 6px; padding: 2px 10px; border: 0; border-radius: 999px; background: #8E1F2F; color: var(--on-brand); font: inherit; font-weight: 600; cursor: pointer; }

.app-announce { display: none; }
body.app .app-announce:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; padding: 8px 40px; position: relative; border-radius: 12px; background: #8E1F2F; color: var(--on-brand); font-size: 14px; }
body.app .app-announce a { color: var(--on-brand); font-weight: 600; text-decoration: none; }
body.app .app-announce .pill { background: #3A0C14; color: var(--on-brand); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
body.app .app-announce button { position: absolute; right: 10px; border: 0; background: none; color: var(--on-brand); font-size: 18px; cursor: pointer; }
.empty-state { grid-column: 1 / -1; padding: 48px 20px; text-align: center; border: 1px dashed rgba(0,0,0,.15); border-radius: 14px; }
.empty-state h2 { margin: 0 0 6px; font-size: 18px; }
.empty-state p { margin: 0 0 16px; opacity: .7; }
.empty-cta { padding: 8px 18px; }
.acct-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 18px 0 0; text-align: left; }
.acct-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.acct-form input { padding: 7px 10px; border: 1px solid rgba(0,0,0,.18); border-radius: 8px; font: inherit; }
.acct-note { width: 100%; margin: 0; font-size: 13px; }
.acct-danger { padding-top: 14px; border-top: 1px solid rgba(0,0,0,.1); }
.acct-danger b { width: 100%; color: #b42318; }

/* ---- Dashboard polish (signed-in) ---- */
body.app #view-account, body.app #view-billing, body.app #view-projects { padding: 56px 40px 80px; }
body.app #view-account .auth-promo { display: none; }
body.app #view-account > *, body.app #view-account .auth-col { display: block; max-width: none; padding: 0; margin: 0; min-height: 0; background: none; box-shadow: none; border: 0; }
body.app #view-account .auth-brand, body.app #view-account .auth-logo { display: none; }
.acct { max-width: 760px; margin: 0 auto; text-align: left; }
.dash-head { margin: 0 0 28px; text-align: left; }
.dash-head h1, body.app #view-billing h1, body.app #view-projects h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; text-align: left; }
.dash-sub { margin: 0; color: #6b6f6a; font-size: 15px; }
.dash-card { margin: 0 0 18px; padding: 26px 28px; border: 1px solid rgba(20,30,20,.09); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,16,.04); }
.dash-card-head { margin: 0 0 18px; }
.dash-card-head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 650; }
.dash-card-head p { margin: 0; color: #6b6f6a; font-size: 14px; }
.acct-methods { margin: 0; padding: 0; list-style: none; }
.acct-methods li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.acct-methods li:first-child { border-top: 0; padding-top: 0; }
.acct-methods code, .acct-key-row code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; }
#acct-keys-list:not(:empty), .acct-key-new { margin-bottom: 18px; }
#acct-key-create { white-space: nowrap; }
.acct-key-new { margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--gray); font-size: 14px; }
.acct-key-new p { margin: 0 0 10px; }
.acct-key-row { display: flex; gap: 10px; align-items: center; }
.acct-key-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.acct-pill { padding: 3px 10px; border-radius: 999px; background: var(--gray); color: var(--muted); font-size: 12px; font-weight: 600; }
.acct-pill.on { background: #f6e7ea; color: var(--brand); }
html[data-theme="dark"] .acct-pill.on { background: rgba(240, 140, 152, 0.16); color: var(--brand-on-dark); }
.dash-card.danger { border-color: rgba(200,40,30,.35); background: #fffafa; }
.dash-card.danger h2 { color: #b42318; }
.acct-form { display: block; margin: 0; padding: 0; border: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 4px; font-size: 13px; font-weight: 550; color: #3a3f39; }
.field input { height: 42px; padding: 0 12px; border: 1px solid rgba(20,30,20,.16); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 400; color: inherit; transition: border-color .15s, box-shadow .15s; }
.field input:focus { outline: none; border-color: #8E1F2F; box-shadow: 0 0 0 3px rgba(142,31,47,.25); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.form-actions.start { justify-content: flex-start; margin-top: 0; }
.acct-note { margin: 0 auto 0 0; font-size: 13px; color: #6b6f6a; }
#acct-verify-send { white-space: nowrap; }
.btn-primary, .btn-secondary, .btn-danger, .upsell-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter .15s, background .15s, border-color .15s; }
.btn-primary, .upsell-btn { border: 1px solid #7A1A28; background: #8E1F2F; color: var(--on-brand); }
.btn-primary:hover, .upsell-btn:hover { filter: brightness(.96); }
.btn-secondary { border: 1px solid rgba(20,30,20,.16); background: #fff; color: #1d211c; }
.btn-secondary:hover { background: #f4f6f3; }
.btn-danger { border: 1px solid #d92d20; background: #fff; color: #b42318; }
.btn-danger:hover { background: #d92d20; color: #fff; }
.upsell-btn { height: 30px; padding: 0 12px; margin-left: 8px; border-radius: 999px; font-size: 13px; vertical-align: middle; }
.film-share-note, #history-state { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
/* Billing header */
body.app #view-billing .panel { max-width: 1120px; margin: 0 auto; }
body.app #view-billing .lead { max-width: 720px; color: #6b6f6a; }
.billing-current:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 26px; padding: 20px 24px; border: 1px solid rgba(142,31,47,.55); border-radius: 16px; background: linear-gradient(180deg, #FCF5F6, #fff); }
.bc-label { display: block; margin-bottom: 4px; color: #6b6f6a; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bc-plan { font-size: 22px; color: #3A0C14; }
.bc-chip { padding: 4px 12px; border-radius: 999px; background: #eef1ec; color: #3a3f39; font-size: 13px; font-weight: 600; }
.bc-chip.paid { background: #8E1F2F; color: var(--on-brand); }
/* Projects empty */
body.app #view-projects .panel { max-width: 1120px; margin: 0 auto; }
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 72px 24px; text-align: center; border: 1px dashed rgba(20,30,20,.16); border-radius: 20px; background: #fff; }
.empty-ico { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 20px; border-radius: 24px; background: radial-gradient(circle at 30% 25%, #F9E6E9, #F2C9CF); color: #8E1F2F; box-shadow: inset 0 0 0 1px rgba(142,31,47,.45); }
.empty-state h2 { margin: 0 0 8px; font-size: 20px; font-weight: 650; }
.empty-state p { margin: 0 0 22px; max-width: 380px; color: #6b6f6a; opacity: 1; }
.empty-state .upsell-btn.empty-cta { height: 44px; padding: 0 22px; margin: 0; border-radius: 12px; font-size: 15px; }
/* Announcement */
body.app .app-announce:not([hidden]) { min-height: 40px; margin: 0 0 10px; padding: 0 48px; border-radius: 12px; background: linear-gradient(90deg, #8E1F2F, #A8303F); box-shadow: 0 1px 2px rgba(16,24,16,.06); font-size: 14px; }
body.app .app-announce a:hover { text-decoration: underline; }
/* A workspace fills the screen: the banner would push its composer below the fold. */
body.app.studio .app-announce:not([hidden]) { display: none; }
body.app .app-announce button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 18px; line-height: 1; }
body.app .app-announce button:hover { background: rgba(58,12,20,.1); }
html[data-theme="dark"] .dash-card, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .field input { background: var(--surface); color: inherit; border-color: var(--line); }
@media (max-width: 760px) { .field-row { grid-template-columns: 1fr; } body.app #view-account, body.app #view-billing, body.app #view-projects { padding: 28px 16px 60px; } }
.acct #account-console.btn-secondary, .acct #logout.btn-secondary { height: 40px; padding: 0 18px; border: 1px solid rgba(20,30,20,.16); border-radius: 10px; background: #fff; color: #1d211c; font-size: 14px; font-weight: 600; box-shadow: none; }
.acct #account-console.btn-secondary:hover, .acct #logout.btn-secondary:hover { background: #f4f6f3; }
body.app #view-billing, body.app #view-projects { padding-top: 8px; }
body.app #view-billing .panel, body.app #view-projects .panel { padding-top: 40px; }

.notfound { max-width: 560px; margin: 0 auto; padding: 120px 24px; text-align: center; }
.nf-code { margin: 0 0 8px; color: #8E1F2F; font-size: 64px; font-weight: 800; letter-spacing: -0.03em; }
.notfound h1 { margin: 0 0 10px; font-size: 30px; }
.nf-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }

/* ---- Plan gating ---- */
.motion-pill { margin: 0 auto 18px; }
.lock { flex: none; margin-right: 6px; vertical-align: -1px; color: #6b6f6a; }
.pro-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #8E1F2F; color: var(--on-brand); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.model-menu button.locked { opacity: 1; cursor: pointer; }
.model-menu button.locked b, .model-menu button.locked em, .model-menu button.locked .rate { color: #8a8e88; }
.model-menu button.locked:hover { background: #FBF3F4; }
.model-menu .menu-upsell { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px dashed rgba(142,31,47,.8); border-radius: 10px; background: #FCF5F6; color: #3A0C14; font: inherit; font-size: 13px; cursor: pointer; }
.model-menu .menu-upsell > span:last-child { padding: 3px 10px; border-radius: 999px; background: #8E1F2F; font-weight: 700; font-size: 12px; }
.film-longer { display: inline-flex; align-items: center; gap: 2px; margin-top: 10px; padding: 6px 12px; border: 1px dashed rgba(142,31,47,.8); border-radius: 999px; background: #FCF5F6; color: #3A0C14; font: inherit; font-size: 13px; cursor: pointer; }
.film-longer[hidden], .nav-plan[hidden] { display: none; }
.nav-plan { margin: 0 12px 4px; }
.nav-upgrade { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; border: 1px solid #7A1A28; border-radius: 12px; background: #8E1F2F; color: var(--on-brand); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,16,.08); transition: filter .15s; }
.nav-upgrade:hover { filter: brightness(.96); }
.nav-upgrade.paid { justify-content: flex-start; padding: 0 12px; border-color: rgba(20,30,20,.12); background: #fff; color: #1d211c; font-weight: 600; }
.np-dot { width: 8px; height: 8px; border-radius: 50%; background: #8E1F2F; }
.up-modal { width: min(520px, calc(100vw - 32px)); padding: 32px 32px 28px; border: 0; border-radius: 22px; background: #fff; color: #1d211c; box-shadow: 0 24px 80px rgba(16,24,16,.25); }
.up-modal::backdrop { background: rgba(16,24,16,.45); backdrop-filter: blur(2px); }
.up-x-form { position: absolute; top: 14px; right: 14px; margin: 0; }
.up-x { width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; font-size: 20px; color: #6b6f6a; cursor: pointer; }
.up-x:hover { background: #f1f3ef; }
.up-badge { display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 999px; background: #8E1F2F; color: var(--on-brand); font-size: 12px; font-weight: 700; }
.up-modal h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.01em; }
.up-sub { margin: 0 0 20px; color: #6b6f6a; font-size: 14.5px; }
.up-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid rgba(20,30,20,.09); border-radius: 14px; font-size: 14px; }
.up-table th, .up-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid rgba(20,30,20,.07); }
.up-table tr:last-child th, .up-table tr:last-child td { border-bottom: 0; }
.up-table thead th { background: #fafbf9; color: #6b6f6a; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.up-table .pro { background: #FCF5F6; color: #3A0C14; font-weight: 600; }
.up-table thead .pro { color: #8E1F2F; }
.up-note { margin: 12px 0 0; color: #b42318; font-size: 13px; }
.up-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
@media (max-width: 480px) { .up-modal { padding: 26px 20px 20px; } .up-actions { flex-direction: column-reverse; } .up-actions button { width: 100%; } }
@media (max-width: 860px) { body.app .nav-plan:not([hidden]) { display: block; margin: 0 8px 0 auto; flex: none; } body.app .nav-upgrade { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 999px; } }

/* ---------- Create pages: spacious premium layout (Motion + Film) ---------- */
#view-create .stage, #film-create, #demo-create { max-width: 760px; margin: 0 auto; padding: clamp(56px, 11vh, 120px) 24px 72px; display: flex; flex-direction: column; align-items: center; text-align: center; }
#view-create .stage > .film-pill, #film-create > .film-pill, #demo-create > .film-pill { margin: 0 0 22px; }
#view-create .stage > h1, #film-create > .film-h1, #demo-create > .film-h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 650; margin: 0 0 14px; max-width: 16ch; }
.create-sub { margin: 0 0 30px; color: #6b6f68; font-size: 17px; line-height: 1.5; max-width: 46ch; }
#view-create .modes, #film-create .modes, #demo-create .modes { margin-bottom: 12px; }
#view-create .hint, #film-create .hint, #demo-create .hint { color: #8a8e86; font-size: 14px; margin: 0 0 18px; }
#view-create .composer, #film-create .composer, #demo-create .composer { width: 100%; background: #fff; border: 1px solid #e4e6e0; border-radius: 22px; box-shadow: 0 1px 2px rgba(16,24,16,.04), 0 18px 48px -18px rgba(16,24,16,.18); transition: border-color .18s, box-shadow .18s; text-align: left; }
#view-create .composer:focus-within, #film-create .composer:focus-within, #demo-create .composer:focus-within { border-color: #8E1F2F; box-shadow: 0 0 0 4px rgba(142,31,47,.18), 0 18px 48px -18px rgba(16,24,16,.22); }
#view-create .composer .slot input, #film-create .composer .slot input, #demo-create .composer .slot input { font-size: 17px; padding-top: 20px; padding-bottom: 20px; }
#view-create .composer .slot textarea, #film-create .composer .slot textarea, #demo-create .composer .slot textarea { font-size: 17px; }
#view-create .composer .bar, #film-create .composer .bar, #demo-create .composer .bar { padding: 10px 12px 12px; gap: 10px; border-top: 1px solid #f0f1ec; }
#view-create .tools, #film-create .tools, #demo-create .tools { gap: 8px; flex-wrap: wrap; }
#view-create .tools .chip, #view-create .tools .seg, #view-create #model-btn, #view-create .images-btn,
#film-create .film-pillbtn, #film-create .film-round, #film-create #film-model-btn, #demo-create .film-pillbtn, #demo-create .film-round, #demo-create #film-model-btn { border-radius: 999px; background: #f6f7f3; border: 1px solid #e9ebe5; min-height: 34px; }
#view-create #model-btn:hover, #view-create .images-btn:hover, #film-create .film-pillbtn:hover, #film-create #film-model-btn:hover, #demo-create .film-pillbtn:hover, #demo-create #film-model-btn:hover { background: #eef0ea; }
#view-create .send, #film-create .film-go, #demo-create .film-go { background: #8E1F2F; color: var(--on-brand); border: 0; box-shadow: 0 6px 16px -6px rgba(142,31,47,.8); transition: transform .12s, filter .12s; }
#view-create .send { width: 46px; height: 46px; border-radius: 999px; }
#film-create .film-go, #demo-create .film-go { border-radius: 999px; padding: 0 20px; min-height: 42px; font-weight: 650; }
#view-create .send:hover, #film-create .film-go:hover, #demo-create .film-go:hover { filter: brightness(1.04); transform: translateY(-1px); }
#view-create .send:focus-visible, #film-create .film-go:focus-visible, #demo-create .film-go:focus-visible { outline: 3px solid rgba(142,31,47,.45); outline-offset: 2px; }
#view-create .samples, #film-create .film-samples, #demo-create .film-samples { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; color: #8a8e86; font-size: 14px; }
#film-create .film-samples button, #demo-create .film-samples button { border: 1px solid #e4e6e0; background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; color: #2a2d28; cursor: pointer; }
#film-create .film-samples button:hover, #demo-create .film-samples button:hover { border-color: #8E1F2F; }
#film-create .film-list, #film-create .film-recent, #film-create > section, #film-create > h2, #demo-create .film-list, #demo-create .film-recent, #demo-create > section, #demo-create > h2 { width: 100%; text-align: left; }
@media (max-width: 600px) {
  #view-create .stage, #film-create, #demo-create { padding: 40px 16px 56px; }
  #view-create .stage > h1, #film-create > .film-h1, #demo-create > .film-h1 { font-size: 32px; }
  .create-sub { font-size: 15px; margin-bottom: 22px; }
  #view-create .composer, #film-create .composer, #demo-create .composer { border-radius: 18px; }
}

/* Examples under the Motion and Film forms (spec 315). */
.examples { width: 100%; margin-top: 40px; }
.ex-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ex-head h2 { flex: 1; display: flex; align-items: center; gap: 14px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.ex-head h2::before, .ex-head h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ex-shuffle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.ex-shuffle:hover { color: var(--ink); }
/* Columns, each card in its own shape: a 9:16 film stands tall, a 16:9 one lies wide; height follows width. */
.ex-grid { columns: 3; column-gap: 10px; }
.ex-card { position: relative; display: block; width: 100%; margin: 0 0 10px; aspect-ratio: 16 / 9; break-inside: avoid; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--gray); cursor: pointer; text-align: left; }
.ex-card.tall { aspect-ratio: 9 / 16; }
.ex-card.square { aspect-ratio: 1; }
.ex-card video, .ex-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-card:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.ex-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ex-card .cut-badge.soon { background: rgba(20, 20, 22, 0.62); color: #fff; }
.ex-name { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(20, 20, 22, 0.62); color: #fff; font-size: 12px; font-weight: 600; }
.ex-idea { position: absolute; inset: 0; display: flex; align-items: center; padding: 40px 16px; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--tint) 55%, #fff), var(--tint) 55%, color-mix(in srgb, var(--tint) 60%, #000)); color: #fff; }
.ex-idea span { font-family: Georgia, serif; font-size: 18px; line-height: 1.25; }
.ex-card.wide .ex-idea span { font-size: 16px; }
.film-create:has(#film-board:not([hidden])) #film-examples { display: none; }
@media (max-width: 560px) {
  /* Two columns: one tall card beside the three wide ones keeps them level. */
  .ex-grid { columns: 2; }
  .ex-card.tall + .ex-card.tall { display: none; }
  /* Film cards come tall, wide, tall, wide…: two pairs fill both columns evenly. */
  [data-examples="film"] .ex-card:nth-child(n+5) { display: none; }
}

/* ---------- Create v2: one calm row, Motion settings popover ---------- */
#view-create .composer .bar, #film-create .composer .bar, #demo-create .composer .bar { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 10px 12px 12px; }
#view-create .tools, #film-create .tools, #film-create .film-actions, #demo-create .tools, #demo-create .film-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0; }
#view-create .tools { flex: 1; }
#view-create #model-btn, #view-create .mset-btn, #film-create .film-pillbtn, #film-create .film-round, #film-create #film-model-btn, #demo-create .film-pillbtn, #demo-create .film-round, #demo-create #film-model-btn {
  height: 36px; min-height: 36px; border-radius: 999px; background: #f6f7f3; border: 1px solid #e9ebe5; box-shadow: none; color: #2a2d28; font-size: 13.5px; font-weight: 500; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#film-create .film-round, #demo-create .film-round { width: 36px; padding: 0; justify-content: center; }
.mset-btn em, #film-create .film-pillbtn em, #demo-create .film-pillbtn em { font-style: normal; color: #8a8e86; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
#film-create .film-cost, #demo-create .film-cost { font-size: 12.5px; color: #8a8e86; }
#view-create .send, #film-create .film-go, #demo-create .film-go { width: auto; height: 40px; min-height: 40px; border-radius: 999px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; background: #8E1F2F; color: var(--on-brand); flex: none; margin-left: auto; }
#view-create .send svg { width: 16px; height: 16px; }
.mset-wrap { position: relative; }
.mset { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 320px; background: #fff; border: 1px solid #e4e6e0; border-radius: 16px; box-shadow: 0 20px 48px -16px rgba(16,24,16,.25); padding: 8px; text-align: left; }
.mset section { padding: 10px 10px 12px; }
.mset section + section { border-top: 1px solid #f0f1ec; }
.mset h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8e86; }
.mset .chip, .mset .seg, .mset .images-btn, .mset .voice-lang { display: flex; width: 100%; }
.mset .chip select, .mset .voice-lang { width: 100%; height: 36px; border-radius: 10px; border: 1px solid #e9ebe5; background: #f6f7f3; padding: 0 10px; font: inherit; font-size: 13.5px; }
.mset .voice-lang { margin-top: 8px; }
.mset .seg { border: 1px solid #e9ebe5; background: #f6f7f3; border-radius: 10px; padding: 3px; gap: 2px; margin: 0; }
.mset .seg label { flex: 1; text-align: center; }
.mset .seg label span { display: block; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.mset .images-btn { height: 36px; border-radius: 10px; border: 1px dashed #d8dbd3; background: #fff; justify-content: center; gap: 6px; }
@media (max-width: 600px) {
  #view-create .composer .bar, #film-create .composer .bar, #demo-create .composer .bar { padding: 8px 10px 10px; gap: 6px; }
  #view-create #model-btn, #view-create .mset-btn, #film-create .film-pillbtn, #film-create #film-model-btn, #demo-create .film-pillbtn, #demo-create #film-model-btn { padding: 0 10px; font-size: 13px; }
  #view-create .mset-btn > span, #film-create .film-pillbtn > span, #demo-create .film-pillbtn > span { display: none; }
  #view-create .mset-btn em, #film-create .film-pillbtn em, #demo-create .film-pillbtn em { max-width: 30vw; }
  #film-create .film-cost, #demo-create .film-cost { display: none; }
  #view-create .send, #film-create .film-go, #demo-create .film-go { padding: 0 14px; }
  .mset { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
}
@media (max-width: 600px) {
  #view-create .tools, #film-create .tools, #demo-create .tools { flex: 1 1 auto; min-width: 0; }
  #film-create .film-actions, #demo-create .film-actions { flex: none; }
  #view-create .mset-wrap { min-width: 0; flex: 0 1 auto; }
  #view-create .mset-btn { max-width: 100%; min-width: 0; overflow: hidden; }
  #view-create .mset-btn em { max-width: none; min-width: 0; }
  #view-create #model-btn { flex: none; }
  #film-create .film-pillbtn em, #demo-create .film-pillbtn em { display: none; }
  #film-create .film-pillbtn, #demo-create .film-pillbtn { width: 36px; padding: 0; justify-content: center; flex: none; }
  #film-create #film-model-btn, #demo-create #film-model-btn { max-width: 40vw; overflow: hidden; }
}

/* Create v3: Images back in the composer row */
#view-create .tools > .images-wrap { flex: none; }
#view-create .tools .images-btn { height: 36px; border-radius: 999px; background: #f6f7f3; border: 1px solid #e9ebe5; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: #2a2d28; white-space: nowrap; cursor: pointer; }
#view-create .tools .images-btn:hover { background: #eef0ea; }
#view-create .tools .images-btn #images-count { font-weight: 600; color: #3A0C14; background: none; padding: 0; min-width: 0; }
#view-create .tools .images-btn #images-count::before { content: "· "; color: #8a8e86; font-weight: 500; }
@media (max-width: 600px) {
  #view-create .tools .images-btn { width: 36px; padding: 0; justify-content: center; position: relative; }
  #view-create .tools .images-btn > span { display: none; }
  #view-create .tools .images-btn #images-count { position: absolute; top: -4px; right: -4px; background: #8E1F2F; color: var(--on-brand); border-radius: 999px; font-size: 10.5px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; }
  #view-create .tools .images-btn #images-count::before { content: none; }
}


/* Create v4: heading and subtitle on one line on desktop */
#view-create .stage, #film-create, #demo-create { max-width: 880px; }
#view-create .stage > h1, #film-create > .film-h1, .create-sub, #view-create .hint, #film-create .hint, #demo-create > .film-h1, #demo-create .hint { max-width: none; text-wrap: wrap; }
@media (min-width: 701px) {
  #view-create .stage > h1, #film-create > .film-h1, #demo-create > .film-h1 { font-size: clamp(30px, 3.1vw, 46px); white-space: nowrap; }
  .create-sub, #film-create .hint, #demo-create .hint { white-space: nowrap; }
}
@media (max-width: 700px) {
  #view-create .stage > h1, #film-create > .film-h1, .create-sub, #film-create .hint, #demo-create > .film-h1, #demo-create .hint { white-space: normal; overflow-wrap: anywhere; }
}

/* Plan cards in the reference layout (spec 316). */
.plan-head { display: flex; align-items: center; gap: 10px; }
.plan-head h2 { flex: 1; font-size: 17px; }
.plan-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 9px; background: color-mix(in srgb, var(--ink) 8%, var(--surface)); color: var(--ink); }
.plan .plan-head .plan-badge { position: static; }
.plan-current { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 600; }
.plan-current[hidden] { display: none; }
.plan .enough-box { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.plan .enough-box .enough-label { margin: 0 0 6px; text-transform: none; font-weight: 500; }
.plan .enough-kind { display: block; margin: 6px 0 2px; font-size: 12px; color: var(--ink); }
.plan .enough-box ul.enough { display: grid; gap: 3px; padding: 0; list-style: none; }
.plan .enough-box ul.enough li { display: flex; justify-content: space-between; gap: 10px; }
.plan .enough-box ul.enough b { color: var(--ink); font-variant-numeric: tabular-nums; }
.plan .enough-box ul.enough b i { font-style: normal; font-weight: 400; color: var(--muted); }
.plan .plan-feats { flex: 1; display: grid; align-content: start; gap: 7px; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13px; }
.plan .plan-feats li { position: relative; padding-left: 22px; }
.plan .plan-feats li::before { content: ""; position: absolute; left: 3px; top: 3px; width: 9px; height: 5px; border-left: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); }
.plan > button { margin-top: auto; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.plan > button:hover:not(:disabled) { border-color: var(--ink); }
.plan > button:disabled { opacity: 0.6; cursor: default; }
.credits-balance { font-weight: 600; color: var(--ink); }

/* Showcase page (spec 318): wide page, big landscape pairs, portrait rows of four. */
#view-showcase .panel.wide { max-width: 1240px; }
#view-showcase .panel > h1 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.035em; max-width: 18ch; }
#view-showcase .panel > .lead { font-size: 17px; }
.sc-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; margin-top: 36px; }
.sc-col { display: grid; gap: 18px; min-width: 0; }
.sc-card { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.sc-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); }
.sc-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.sc-media { position: relative; display: block; overflow: hidden; background: #111; }
.sc-card.wide .sc-media { aspect-ratio: 16 / 9; }
.sc-card.tall .sc-media { aspect-ratio: 9 / 16; }
.sc-card.square .sc-media { aspect-ratio: 1; }
.sc-media video, .sc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-media .cut-badge { top: 12px; left: 12px; }
.sc-media .cut-badge.soon { background: rgba(20, 20, 22, 0.62); color: #fff; }
.sc-time { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 2px 7px; border-radius: 6px; background: rgba(20, 20, 22, 0.66); color: #fff; font: 600 11px ui-monospace, Menlo, monospace; font-style: normal; }
.sc-meta { display: grid; gap: 4px; padding: 14px 16px 16px; }
.sc-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.sc-line b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.sc-line code { flex: none; color: var(--muted); font-size: 11px; }
.sc-line .sc-kind { flex: none; margin-right: auto; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-size: 11px; font-style: normal; font-weight: 700; }
.sc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.sc-filter button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.sc-filter button span { color: var(--muted); font-size: 12px; }
.sc-filter button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sc-filter button[aria-selected="true"] span { color: inherit; opacity: .7; }
.sc-cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
@media (max-width: 960px) {
  .sc-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sc-wall, .sc-col { gap: 12px; }
  .sc-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-card { border-radius: 14px; }
  .sc-meta { padding: 9px 10px 11px; }
  .sc-line code { display: none; }
}

/* Dark mode for the Create and Film composers (fix: controls were light-on-light).
   The create-page block above hard-codes light colors, so dark mode remaps them here. */
html[data-theme="dark"] .create-sub,
html[data-theme="dark"] #view-create .hint,
html[data-theme="dark"] #film-create .hint,
html[data-theme="dark"] #view-create .samples,
html[data-theme="dark"] #film-create .film-samples,
html[data-theme="dark"] .mset-btn em,
html[data-theme="dark"] #film-create .film-pillbtn em,
html[data-theme="dark"] #film-create .film-cost, html[data-theme="dark"] #demo-create .hint, html[data-theme="dark"] #demo-create .film-samples, html[data-theme="dark"] #demo-create .film-pillbtn em, html[data-theme="dark"] #demo-create .film-cost { color: var(--muted); }
html[data-theme="dark"] #view-create .composer,
html[data-theme="dark"] #film-create .composer, html[data-theme="dark"] #demo-create .composer { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 48px -18px rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] #view-create .composer .slot input,
html[data-theme="dark"] #view-create .composer .slot textarea,
html[data-theme="dark"] #film-create .composer .slot input,
html[data-theme="dark"] #film-create .composer .slot textarea, html[data-theme="dark"] #demo-create .composer .slot input, html[data-theme="dark"] #demo-create .composer .slot textarea { color: var(--ink); }
html[data-theme="dark"] #view-create .composer .slot input::placeholder,
html[data-theme="dark"] #view-create .composer .slot textarea::placeholder,
html[data-theme="dark"] #film-create .composer .slot input::placeholder,
html[data-theme="dark"] #film-create .composer .slot textarea::placeholder, html[data-theme="dark"] #demo-create .composer .slot input::placeholder, html[data-theme="dark"] #demo-create .composer .slot textarea::placeholder { color: var(--muted); }
html[data-theme="dark"] #film-create .film-link, html[data-theme="dark"] #demo-create .film-link { color: var(--muted); }
html[data-theme="dark"] #view-create .composer .bar,
html[data-theme="dark"] #film-create .composer .bar, html[data-theme="dark"] #demo-create .composer .bar { border-top-color: var(--line); }
html[data-theme="dark"] #view-create .tools .chip,
html[data-theme="dark"] #view-create .tools .seg,
html[data-theme="dark"] #view-create #model-btn,
html[data-theme="dark"] #view-create .mset-btn,
html[data-theme="dark"] #view-create .images-btn,
html[data-theme="dark"] #view-create .tools .images-btn,
html[data-theme="dark"] #film-create .film-pillbtn,
html[data-theme="dark"] #film-create .film-round,
html[data-theme="dark"] #film-create #film-model-btn, html[data-theme="dark"] #demo-create .film-pillbtn, html[data-theme="dark"] #demo-create .film-round, html[data-theme="dark"] #demo-create #film-model-btn { background: var(--gray); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] #view-create #model-btn:hover,
html[data-theme="dark"] #view-create .mset-btn:hover,
html[data-theme="dark"] #view-create .images-btn:hover,
html[data-theme="dark"] #view-create .tools .images-btn:hover,
html[data-theme="dark"] #film-create .film-pillbtn:hover,
html[data-theme="dark"] #film-create #film-model-btn:hover, html[data-theme="dark"] #demo-create .film-pillbtn:hover, html[data-theme="dark"] #demo-create #film-model-btn:hover { background: color-mix(in srgb, var(--gray) 70%, var(--ink) 12%); }
html[data-theme="dark"] #view-create .tools .images-btn #images-count::before { color: var(--muted); }
html[data-theme="dark"] .seg input:checked + span { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] #film-create .film-samples button, html[data-theme="dark"] #demo-create .film-samples button { background: var(--surface); border-color: var(--line); color: var(--ink); }
/* Motion settings popover */
html[data-theme="dark"] .mset { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] .mset .chip select,
html[data-theme="dark"] .mset .voice-lang,
html[data-theme="dark"] .mset .seg { background: var(--gray); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .mset .chip select option,
html[data-theme="dark"] .mset .voice-lang option { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .mset .images-btn { background: transparent; border-color: var(--line); color: var(--ink); }
/* Film settings dialog */
html[data-theme="dark"] .film-dialog-panel { background: radial-gradient(circle at 92% 0%, #8E1F2F1f, transparent 42%), var(--surface); border-color: var(--line); }
html[data-theme="dark"] .film-field select { background-color: var(--gray); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .film-field select option { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .film-seg button { background: var(--gray); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .film-duration input[type="range"]::-webkit-slider-thumb { background: var(--ink); border-color: var(--surface); }
html[data-theme="dark"] .film-duration input[type="range"]::-moz-range-thumb { background: var(--ink); border-color: var(--surface); }
html[data-theme="dark"] .film-provider { background: #3a1f17; border-color: #6b3423; color: #ffb59c; }
html[data-theme="dark"] .mset section + section { border-top-color: var(--line); }
html[data-theme="dark"] .mset h4 { color: var(--muted); }
html[data-theme="dark"] .mset .seg label span { color: var(--muted); }
html[data-theme="dark"] .mset .seg input:checked + span,
html[data-theme="dark"] #view-create .seg input:checked + span { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .film-seg button.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Site polish (spec 320): dark mode for the auth page and the signed-in dashboard, which hard-code
   light colors. Light mode is unchanged. */
html[data-theme="dark"] body.auth .auth-shell { background: var(--bg); }
html[data-theme="dark"] body.auth .auth-social-btn,
html[data-theme="dark"] body.auth .auth-pass-field .auth-pass-row,
html[data-theme="dark"] body.auth .auth-form input { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] body.auth .auth-or::before,
html[data-theme="dark"] body.auth .auth-or::after { background: var(--line); }
html[data-theme="dark"] body.auth .auth-form label > span { color: var(--muted); }
html[data-theme="dark"] .dash-sub,
html[data-theme="dark"] .dash-card-head p,
html[data-theme="dark"] .acct-note,
html[data-theme="dark"] .bc-label,
html[data-theme="dark"] body.app #view-billing .lead,
html[data-theme="dark"] .empty-state p { color: var(--muted); }
html[data-theme="dark"] .field { color: var(--muted); }
html[data-theme="dark"] .field input { color: var(--ink); }
html[data-theme="dark"] .field input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
html[data-theme="dark"] .dash-card { box-shadow: none; }
html[data-theme="dark"] .dash-card.danger { background: color-mix(in srgb, #d92d20 8%, var(--surface)); border-color: color-mix(in srgb, #d92d20 45%, var(--line)); }
html[data-theme="dark"] .dash-card.danger h2,
html[data-theme="dark"] .acct-danger b { color: #ff8a7a; }
html[data-theme="dark"] .acct #account-console.btn-secondary,
html[data-theme="dark"] .acct #logout.btn-secondary,
html[data-theme="dark"] .btn-secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .acct #account-console.btn-secondary:hover,
html[data-theme="dark"] .acct #logout.btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:hover { background: var(--gray); }
html[data-theme="dark"] .btn-danger { background: transparent; color: #ff8a7a; border-color: #d92d20; }
html[data-theme="dark"] .bc-plan { color: var(--brand-text); }
html[data-theme="dark"] .bc-chip { background: var(--gray); color: var(--ink); }
html[data-theme="dark"] .billing-current:not([hidden]) { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
html[data-theme="dark"] .empty-ico { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); color: var(--brand-text); }
html[data-theme="dark"] .nf-code { color: var(--brand-text); }

/* Landing pages (spec 320): centered hero, primary action up top, two-column notes, real cuts as proof. */
.page-hero { text-align: center; }
#view-page .page-hero > h1, #view-page .page-hero > .lead { text-align: center; }
.page-hero > h1 { margin: 0 auto 16px; max-width: 16ch; font-size: clamp(38px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.035em; }
.page-hero > .lead { margin: 0 auto; max-width: 60ch; font-size: 18px; line-height: 1.55; }
.page-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 28px 0 44px; }
.page-ctas .solid { min-height: 50px; padding: 0 28px; font-size: 16px; }
.page-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; text-align: left; }
.page-notes article { padding: 24px 26px; border-radius: 18px; }
.page-notes h2 { font-size: 19px; }
.page-reel { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; max-width: 920px; margin: 40px auto 0; text-align: left; }
.page-reel:empty { display: none; }
.page-reel .sc-media { aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
  .page-reel { grid-template-columns: 1fr; }
  .page-hero > .lead { font-size: 16px; }
}

/* Comparison pages (spec 504): a start form in the hero, both verdicts, the table with our column
   lit, real cuts as proof, and a closing band with the form again. They carry a .vs-start form. */
.page-hero:has(.vs-start) { max-width: 1040px; padding-top: 10vh; }
.page-hero:has(.vs-start) .page-ctas, .page-hero:has(.vs-start) .page-notes:empty { display: none; }
.page-hero:has(.vs-start) > h1 { text-wrap: balance; max-width: 14ch; font-size: clamp(46px, 6.6vw, 88px); line-height: 0.98; letter-spacing: -0.05em; }
.page-hero > h1 em, .vs-band h2 em { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: -0.02em; }
.page-hero > h1 em { color: var(--brand-text); }
.page-hero:has(.vs-start) > .lead { max-width: 56ch; margin-top: 20px; font-size: 18.5px; text-wrap: balance; }

.vs-start { display: flex; gap: 6px; max-width: 580px; margin: 34px auto 0; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 22px 44px -30px rgba(58, 12, 20, 0.5); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.vs-start:focus-within { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent), 0 22px 44px -30px rgba(58, 12, 20, 0.5); }
.vs-field { display: flex; flex: 1; min-width: 0; }
.vs-field input { width: 100%; min-width: 0; padding: 0 18px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; outline: none; box-shadow: none; }
.vs-field input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.vs-start .solid { min-height: 50px; padding: 0 24px; font-size: 15.5px; white-space: nowrap; }
.vs-trust { margin: 14px 0 0; color: var(--muted); font-size: 13px; letter-spacing: 0.01em; }

.vs-verdict { display: grid; grid-template-columns: 1fr 1.18fr; gap: 16px; margin: 64px 0 0; text-align: left; }
.vs-card { padding: 30px 32px 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.vs-card.us { position: relative; overflow: hidden; border-color: transparent; background: radial-gradient(130% 150% at 100% 0%, #b03247 0%, var(--brand) 40%, var(--brand-ink) 100%); color: #fff; box-shadow: 0 34px 64px -36px rgba(58, 12, 20, 0.75); }
.vs-kicker { margin: 0 0 18px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.vs-card.us .vs-kicker { color: rgba(255, 255, 255, 0.7); }
.vs-card ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.vs-card li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.5; }
.vs-card li::before { content: ""; position: absolute; top: 0.3em; left: 0; width: 15px; height: 15px; border: 1.5px solid color-mix(in srgb, var(--muted) 60%, transparent); border-radius: 50%; }
.vs-card.us li { font-weight: 600; }
.vs-card.us li::before { top: 0.22em; width: 18px; height: 18px; border: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6l4.4-5' fill='none' stroke='%238E1F2F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.vs-go { display: inline-flex; width: fit-content; align-items: center; gap: 8px; min-height: 46px; margin-top: 26px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--brand-ink); font-size: 15px; font-weight: 800; text-decoration: none; transition: transform 0.2s ease; }
.vs-go:hover { transform: translateX(2px); }

.vs-side { margin: 76px 0 0; text-align: left; }
.vs-side h2, .vs-proof { margin: 0 0 22px; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.035em; text-align: center; }
.vs-table { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; border-collapse: separate; border-spacing: 0; background: var(--surface); font-size: 15px; }
.vs-table th, .vs-table td { padding: 17px 22px; border-top: 1px solid var(--line); line-height: 1.45; text-align: left; vertical-align: top; }
.vs-table thead th { padding-top: 22px; padding-bottom: 18px; border-top: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.vs-table thead th.us { color: var(--brand-text); }
.vs-table tbody th { width: 22%; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.vs-table .us { width: 40%; background: color-mix(in srgb, var(--brand) 6%, var(--surface)); color: var(--ink); font-weight: 600; }
.vs-table td:not(.us) { color: var(--muted); }
.vs-proof { margin-top: 84px; }
.page-hero:has(.vs-start) .page-reel { max-width: none; margin-top: 0; }

.vs-band { position: relative; overflow: hidden; margin: 84px 0 0; padding: clamp(44px, 7vw, 84px) 24px; border-radius: 30px; background: var(--char); color: #f6f6f4; text-align: center; isolation: isolate; }
.vs-band::before { content: ""; position: absolute; z-index: -1; top: -55%; right: -12%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 70%, transparent), transparent); opacity: 0.75; }
.vs-band h2 { max-width: 16ch; margin: 0 auto; color: #fff; font-size: clamp(34px, 4.8vw, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.vs-band h2 em { color: var(--brand-on-dark); }
.vs-start.on-dark { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.07); box-shadow: none; }
.vs-start.on-dark input { color: #fff; }
.vs-start.on-dark input::placeholder { color: rgba(255, 255, 255, 0.5); }
.vs-band .vs-trust { color: rgba(255, 255, 255, 0.6); }
.vs-sources { max-width: 72ch; margin: 22px auto 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
html[data-theme="dark"] .vs-band { border: 1px solid var(--line); }

/* Landing pages (spec 504): benefits, how it works, questions; the hero form and band are shared. */
.page-hero:has(.lp-benefits) > h1 { max-width: 17ch; font-size: clamp(40px, 5.6vw, 76px); text-wrap: balance; }
.lp-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 68px 0 0; text-align: left; }
.lp-card { display: flex; flex-direction: column; padding: 28px 28px 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lp-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -36px rgba(58, 12, 20, 0.45); }
.lp-num { color: var(--brand-text); font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-style: italic; font-weight: 600; line-height: 1; }
.lp-card h2 { margin: 18px 0 8px; font-size: 20px; letter-spacing: -0.02em; }
.lp-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.lp-link { margin-top: auto; padding-top: 18px; color: var(--brand-text); font-size: 14.5px; font-weight: 800; text-decoration: none; }
.lp-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.lp-how { margin: 76px 0 0; padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px); border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--line)); border-radius: 30px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, var(--surface)), var(--surface)); }
.lp-how h2, .lp-faq h2 { margin: 0 0 30px; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.035em; text-align: center; }
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; text-align: left; counter-reset: none; }
.lp-steps li { position: relative; }
.lp-steps li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 58px; right: -14px; border-top: 1.5px dashed color-mix(in srgb, var(--brand) 35%, transparent); }
.lp-step-n { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 17px; font-weight: 800; box-shadow: 0 10px 22px -12px rgba(142, 31, 47, 0.8); }
.lp-steps h3 { margin: 18px 0 6px; font-size: 18px; letter-spacing: -0.02em; }
.lp-steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.lp-workflow { max-width: 760px; margin: 56px auto 0; text-align: left; }
.lp-workflow h2 { margin: 0 0 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.lp-workflow pre { overflow-x: auto; margin: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.6; }
.lp-workflow code { font-family: inherit; }
.lp-workflow p { margin: 14px 0 0; color: var(--muted); font-size: 14.5px; }
.lp-workflow a { color: var(--brand-text); font-weight: 700; text-decoration: none; }
.lp-workflow a:hover { text-decoration: underline; text-underline-offset: 3px; }

.lp-faq { max-width: 760px; margin: 84px auto 0; text-align: left; }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq details:first-of-type { border-top: 1px solid var(--line); }
.lp-faq summary { position: relative; padding: 22px 44px 22px 2px; cursor: pointer; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ""; position: absolute; top: 50%; right: 6px; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.5v7M2.5 6h7' stroke='%238E1F2F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.2s ease; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { margin: -6px 0 22px; padding-right: 44px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 760px) {
  .lp-benefits, .lp-steps { grid-template-columns: 1fr; }
  .lp-benefits { margin-top: 44px; }
  .lp-how, .lp-faq { margin-top: 56px; }
  .lp-steps li:not(:last-child)::after { display: none; }
  .lp-steps { gap: 22px; }
}

@media (max-width: 760px) {
  .page-hero:has(.vs-start) { padding-top: 7vh; }
  .vs-start { flex-direction: column; border-radius: 22px; }
  .vs-field input { min-height: 48px; text-align: center; }
  .vs-verdict { grid-template-columns: 1fr; margin-top: 44px; }
  .vs-card.us { order: -1; }
  .vs-card { padding: 24px 22px 26px; }
  .vs-side, .vs-proof { margin-top: 56px; }
  .vs-table, .vs-table tbody, .vs-table tr { display: block; }
  .vs-table thead { display: none; }
  .vs-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; border-top: 1px solid var(--line); }
  .vs-table tbody tr:first-child { border-top: 0; }
  .vs-table tbody th { grid-column: 1 / -1; width: auto; padding: 0; border: 0; }
  .vs-table td, .vs-table td.us { width: auto; padding: 10px 12px; border: 0; border-radius: 12px; font-size: 14px; }
  .vs-table td:not(.us) { background: var(--bg); }
  .vs-table td::before { content: attr(data-who); display: block; margin-bottom: 4px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .vs-table td.us::before { color: var(--brand-text); }
  .vs-band { margin-top: 56px; border-radius: 24px; }
}

/* Public page headings at the same scale as Showcase and Changelog (signed-in dashboard keeps its own). */
body:not(.app) .panel > h1 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.035em; margin-bottom: 14px; }
body:not(.app) .panel > .lead { font-size: 17px; line-height: 1.55; }
#view-videos .panel.wide { max-width: 1240px; }

/* Blog index (spec 321): featured newest post, then a three-column grid. */
#view-blog .panel.wide { max-width: 1240px; }
#view-blog .panel > h1, #view-blog .panel > .lead { text-align: center; }
#view-blog .panel > .lead { margin: 0 auto; max-width: 56ch; }
.blog-index { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.blog-card { min-width: 0; grid-column: span 2; }
.blog-card.wide { grid-column: span 3; }
.blog-card.featured { grid-column: 1 / -1; }
.blog-card .post-link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); text-decoration: none; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.blog-card .post-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.45); }
.blog-card .post-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.blog-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #1f1f1f; }
.blog-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.blog-card .post-link:hover .blog-cover img { transform: scale(1.03); }
.blog-card .body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.blog-meta { display: flex; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; }
.blog-card h2 { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; }
.blog-lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.blog-more { margin-top: auto; padding-top: 4px; color: var(--brand-text); font-size: 14px; font-weight: 600; }
.blog-card.featured .post-link { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.blog-card.featured .blog-cover { aspect-ratio: auto; min-height: 380px; }
.blog-card.featured .body { justify-content: center; gap: 14px; padding: 36px 40px; }
.blog-card.featured h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.03em; }
.blog-card.featured .blog-lead { -webkit-line-clamp: 4; font-size: 16px; }
.blog-card.featured .blog-more { margin-top: 6px; }
@media (max-width: 960px) {
  .blog-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-card, .blog-card.wide { grid-column: span 1; }
  .blog-card.featured .post-link { grid-template-columns: 1fr; }
  .blog-card.featured .blog-cover { aspect-ratio: 16 / 9; min-height: 0; }
  .blog-card.featured .body { padding: 22px 22px 24px; }
}
@media (max-width: 600px) {
  .blog-index { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .blog-card, .blog-card.wide { grid-column: auto; }
}

/* Blog post page (spec 322): centered header, wide cover, reading column with a sticky contents list. */
.panel.post { max-width: 1180px; padding: 56px 24px 96px; }
.panel.post .post-back { margin: 0 0 28px; text-align: center; }
.panel.post .post-back .text-btn { margin: 0; padding: 0; min-height: 0; height: auto; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.panel.post .post-back .text-btn:hover { color: var(--ink); }
.panel.post .post-header { max-width: 860px; margin: 0 auto 40px; text-align: center; }
.panel.post .post-meta { justify-content: center; margin: 0 0 18px; font-size: 14px; }
.panel.post .post-header h1,
.panel.post #post-title { margin: 0 0 20px; font-size: clamp(34px, 5vw, 60px); line-height: 1.06; letter-spacing: -0.04em; text-align: center; text-wrap: balance; }
.panel.post .post-lead { max-width: 680px; margin: 0 auto; font-size: 19px; line-height: 1.6; text-align: center; text-wrap: pretty; }
.panel.post .post-cover { width: 100%; max-height: none; aspect-ratio: 2 / 1; margin: 0 0 56px; border-radius: 26px; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.45); }
.post-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); column-gap: 48px; align-items: start; }
.post-main > .post-body { grid-column: 2; min-width: 0; }
.post-toc { grid-column: 1; grid-row: 1; justify-self: end; position: sticky; top: 96px; display: grid; gap: 2px; width: 100%; max-width: 230px; padding-left: 14px; border-left: 1px solid var(--line); font-size: 13.5px; }
.post-toc[hidden] { display: none; }
.post-toc p { margin: 0 0 10px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.post-toc a { margin-left: -15px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; color: var(--muted); line-height: 1.35; text-decoration: none; }
.post-toc a:hover { color: var(--ink); }
.post-toc a.on { border-left-color: var(--brand); color: var(--ink); font-weight: 600; }
.panel.post .notes.md,
.panel.post .post-body,
.panel.post .post-body.md { font-size: 18px; line-height: 1.78; }
.panel.post .notes.md h2 { font-size: 30px; line-height: 1.2; letter-spacing: -0.03em; scroll-margin-top: 96px; }
.panel.post .notes.md h3 { font-size: 21px; }
.panel.post .post-cta { max-width: 1000px; margin: 72px auto 0; padding: 40px 44px; border: 0; border-radius: 26px; background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--brand) 45%, transparent), transparent 55%), #161816; }
.panel.post .post-cta strong { margin-bottom: 8px; color: #f4f4f1; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.03em; line-height: 1.15; }
.panel.post .post-cta p { color: #b9bcb4; font-size: 16px; }
.panel.post .post-cta .solid { min-height: 50px; padding: 0 28px; font-size: 16px; }
.panel.post .post-related { max-width: none; margin: 80px 0 0; padding-top: 0; border-top: 0; }
.panel.post .post-related > h2 { margin: 0 0 22px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.03em; text-align: center; }
.panel.post .post-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 0; }
/* Related posts reuse the blog index cards; keep the older post rules off them. */
.panel.post .post-related .blog-card { grid-column: auto; }
.panel.post .post-related .blog-card h2 { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; text-align: left; }
.panel.post .blog-meta time { display: inline; margin: 0; font-size: inherit; letter-spacing: inherit; }
@media (max-width: 1100px) {
  .post-main { grid-template-columns: minmax(0, 1fr); }
  .post-main > .post-body { grid-column: 1; max-width: 720px; justify-self: center; width: 100%; }
  .post-toc { display: none; }
  .panel.post .post-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .panel.post { padding: 32px 16px 64px; }
  .panel.post .post-header { margin-bottom: 28px; }
  .panel.post .post-lead { font-size: 17px; }
  .panel.post .post-cover { aspect-ratio: 16 / 9; margin-bottom: 32px; border-radius: 16px; }
  .panel.post .notes.md,
  .panel.post .post-body,
  .panel.post .post-body.md { font-size: 17px; }
  .panel.post .notes.md h2 { font-size: 24px; }
  .panel.post .post-cta { margin-top: 48px; padding: 28px 22px; border-radius: 20px; }
  .panel.post .post-related { margin-top: 56px; }
  .panel.post .post-related-grid { grid-template-columns: 1fr; }
}

/* Projects (spec 323). */
body.app #view-projects .panel.proj { max-width: 1240px; }
.proj-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.proj-head h1 { margin: 0 0 6px; }
.proj-head .dash-sub:empty { display: none; }
.proj-new { display: flex; gap: 10px; }
.proj-new button { height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.proj-filters { display: flex; gap: 6px; margin: 0 0 22px; }
.proj-filters[hidden] { display: none; }
.proj-filters button { height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.proj-filters button.on { border-color: var(--ink); color: var(--ink); }
/* Masonry: columns about 260px wide, each card in its cut's own shape (spec 391). */
.proj-grid { columns: 260px; column-gap: 22px; }
.proj-grid > .proj-card { width: 100%; margin: 0 0 22px; break-inside: avoid; }
.proj-grid > .empty-state { column-span: all; }
.proj-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.proj-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.45); }
.proj-open { display: flex; flex: 1; flex-direction: column; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.proj-open:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 20px; }
.proj-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #141414; }
.proj-card.tall .proj-media { aspect-ratio: 9 / 16; }
.proj-card.three-four .proj-media { aspect-ratio: 3 / 4; }
.proj-card.four-three .proj-media { aspect-ratio: 4 / 3; }
.proj-card.square .proj-media { aspect-ratio: 1; }
.proj-media video, .proj-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-media img.dim { filter: saturate(0.7) brightness(0.6); }
.proj-blank { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tint) 55%, #fff), var(--tint) 60%, color-mix(in srgb, var(--tint) 55%, #000)); color: #fff; font-size: 54px; font-weight: 800; }
.proj-state { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 700; }
.proj-state.ready { background: var(--brand); color: var(--on-brand); }
.proj-state.planned { background: #fff; color: #1f1f1f; }
.proj-state.making { background: #ffd66b; color: #3a2a00; }
.proj-state.making::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: proj-pulse 1.2s ease-in-out infinite; }
.proj-state.failed { background: #d92d20; color: #fff; }
@keyframes proj-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .proj-state.making::before { animation: none; } }
.proj-body { display: grid; gap: 4px; padding: 14px 16px 16px; min-width: 0; }
.proj-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.proj-body > span { color: var(--muted); font-size: 13px; }
.proj-body .proj-error { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #b42318; font-size: 12.5px; }
html[data-theme="dark"] .proj-body .proj-error { color: #ff8a7a; }
.proj-retry { position: absolute; right: 12px; top: 12px; z-index: 3; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: #1f1f1f; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); }
.proj-retry:hover { background: var(--brand); color: var(--on-brand); }
.proj-retry:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 600px) {
  .proj-head { align-items: flex-start; }
  .proj-new { width: 100%; }
  .proj-new button { flex: 1; }
  .proj-grid { columns: 2; column-gap: 12px; }
  .proj-grid > .proj-card { margin-bottom: 12px; }
}

/* Home wall: portrait columns plus a landscape column whose video is 464px (card 466, 1px border). */
.sc-wall.home-wall { grid-template-columns: minmax(0, 354fr) minmax(0, 354fr) minmax(0, 466fr); gap: 20px; margin-top: 8px; }
.sc-wall.home-wall .sc-col { gap: 20px; }
.sc-wall.home-wall .sc-card:hover { transform: none; }
.sc-wall.home-wall .sc-media video { object-fit: cover; }
.reel-band { padding-top: 32px; }
.reel-head { margin-bottom: 32px; }
@media (max-width: 560px) {
  .sc-wall.home-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sc-wall.home-wall .sc-col { gap: 12px; }
}

/* Home wall v2: justified rows of real cuts only. Cards in a row share a height (flex-grow = aspect). */
/* 16:9 column on the left; each 9:16 is 0.633 of its width so it matches two stacked 16:9 cuts. */
.home-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 8px; }
.home-wall { align-items: stretch; }
.home-wall .sc-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* A quiet link closing the shortest column, not a block the size of a video (owner, 2026-10-25). */
.home-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.home-more:hover { background: var(--gray); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.home-more svg { flex: none; transition: transform 0.3s ease; }
.home-more:hover svg { transform: translateX(4px); }
.home-wall .sc-card { position: relative; border-radius: 18px; overflow: hidden; }
.home-wall .sc-card .sc-media { position: absolute; inset: 0; height: auto; aspect-ratio: auto; }
.home-wall .sc-card.wide::before { content: ""; display: block; aspect-ratio: 16 / 9; }
.home-wall .sc-card.tall::before { content: ""; display: block; aspect-ratio: 9 / 16; }
.home-wall .sc-card.square::before { content: ""; display: block; aspect-ratio: 1; }
.home-wall .sc-media video { width: 100%; height: 100%; object-fit: cover; }
.home-wall .cut-badge { display: none; }
.home-wall .sc-time { top: 14px; right: 14px; bottom: auto; left: auto; }
.home-wall .sc-meta { position: absolute; right: 0; bottom: 0; left: 0; padding: 40px 16px 14px; border: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); color: #fff; pointer-events: none; }
.home-wall .sc-line b { color: #fff; font-size: 16px; }
.home-wall .sc-line code { display: none; }
.home-wall .sc-cap { max-width: 68%; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-wall .sc-card:hover { transform: none; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.45); }
.home-wall .sc-card:hover video { transform: scale(1.02); }
.home-wall .sc-media video { transition: transform 0.5s ease; }
@media (max-width: 560px) {
  .home-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-wall .sc-col { gap: 10px; }
  .home-more { height: 44px; font-size: 13.5px; border-radius: 10px; }
  .home-wall .sc-card { border-radius: 14px; }
  .home-wall .sc-meta { padding: 24px 10px 8px; }
  .home-wall .sc-line b { font-size: 14px; }
  .home-wall .sc-cap { display: none; }
}

/* Homepage Film band: our one real Film render, shown beside the Motion wall. */
.film-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; width: min(1214px, 100%); margin: 112px auto 0; padding: 56px; background: var(--char); color: #f6f6f4; border-radius: 28px; }
.film-band .eyebrow { margin: 0 0 14px; color: var(--brand-on-dark); }
.film-band h2 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.film-band-lead { margin: 18px 0 0; color: rgba(244, 244, 240, 0.78); font-size: 16px; line-height: 1.65; }
.film-band-lead code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 0.92em; }
.film-band-facts { display: flex; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(244, 244, 240, 0.14); border-bottom: 1px solid rgba(244, 244, 240, 0.14); }
.film-band-facts li { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px 0; }
.film-band-facts li + li { padding-left: 20px; border-left: 1px solid rgba(244, 244, 240, 0.14); }
.film-band-facts b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.film-band-facts span { color: rgba(244, 244, 240, 0.55); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.film-band-note { margin: 18px 0 0; color: rgba(244, 244, 240, 0.55); font-size: 13px; line-height: 1.6; }
.film-band-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.film-band-ctas .solid { padding: 13px 22px; border: 0; border-radius: 999px; background: #8E1F2F; color: var(--on-brand); font-weight: 700; font-size: 15px; cursor: pointer; }
.film-band-ctas .text-btn { border: 0; background: none; color: #f6f6f4; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.film-band-wall { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); grid-template-rows: repeat(var(--rows, 3), auto); gap: 10px; min-width: 0; }
.film-band-tile { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: #000; cursor: pointer; aspect-ratio: 16 / 9; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.film-band-tile.tall { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; }
.film-band-tile.wide { grid-column: 2; }
.film-band-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.film-band-tile:hover video { transform: scale(1.03); }
.film-band-tile:focus-visible { outline: 2px solid #8E1F2F; outline-offset: 2px; }
.film-band-tile .film-band-cap { padding: 28px 12px 10px; }
.film-band-tile .film-band-cap span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }
.film-band-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 40px 20px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; text-align: left; }
.film-band-cap b { font-size: 15px; }
.film-band-cap span { color: rgba(255, 255, 255, 0.78); font-size: 13px; }
/* The Demo band mirrors Film's: every cut is 16:9, the first one large. */
.demo-band { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-top: 24px; }
.demo-band .film-band-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-band .film-band-tile.wide { grid-column: auto; }
.demo-band .film-band-tile:first-child { grid-column: 1 / -1; }
/* An even count would leave the last cut alone in half a row. */
.demo-band .film-band-tile:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .film-band { grid-template-columns: 1fr; gap: 32px; margin-top: 72px; padding: 28px 22px; border-radius: 22px; }
  .demo-band { margin-top: 24px; }
  .film-band-wall { order: -1; }
}
@media (max-width: 560px) {
  .film-band-tile .film-band-cap { padding: 20px 8px 6px; }
  .film-band-tile .film-band-cap span { display: none; }
  .film-band-tile .film-band-cap b { font-size: 13px; }
  .film-band-facts b { font-size: 17px; white-space: nowrap; }
  .film-band-facts li + li { padding-left: 14px; }
}

/* Revise chat: quick replies, plan card, typing dots */
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chat-chips button { border: 1px solid rgba(58, 12, 20, 0.16); background: #fff; color: #3A0C14; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.chat-chips button:hover { border-color: #8E1F2F; background: rgba(142, 31, 47, 0.1); }
.plan-card { margin-top: 12px; border: 1px solid rgba(58, 12, 20, 0.12); border-radius: 14px; padding: 16px 18px; background: #FDF9F9; box-shadow: 0 1px 2px rgba(58, 12, 20, 0.04); }
.plan-head { font-weight: 650; color: #3A0C14; font-size: 14px; margin-bottom: 6px; }
.plan-sum { color: #3A0C14; margin: 0 0 8px; }
.plan-card ul { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: #4A2B2F; }
.plan-card ul b { color: #3A0C14; font-weight: 600; }
.plan-keeps { font-size: 12.5px; color: #7A5A5E; margin: 0 0 4px; }
.plan-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.plan-go { background: #8E1F2F; color: var(--on-brand); border: 0; border-radius: 10px; padding: 9px 16px; font: inherit; font-weight: 650; cursor: pointer; }
.plan-go:hover { filter: brightness(0.96); }
.plan-go:disabled { opacity: .6; cursor: default; }
.plan-no { background: transparent; border: 1px solid rgba(58, 12, 20, 0.16); color: #3A0C14; border-radius: 10px; padding: 8px 14px; font: inherit; cursor: pointer; }
.plan-cost { font-size: 12.5px; color: #7A5A5E; }
.plan-state { margin: 10px 0 0; font-size: 13px; color: #7A5A5E; display: flex; gap: 8px; align-items: center; }
.plan-state.done { color: #8E1F2F; }
.plan-state.failed { color: #b4362b; }
.chat-attach { display: block; font-size: 12px; opacity: .7; margin-top: 4px; }
.chat-error { color: #b4362b; }
.chat-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8E1F2F; animation: chat-dot 1s infinite ease-in-out; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Film chat and canvas after the owner's reference (spec 383). */
.film-work .act { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 14px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 18px 44px -26px #00000040; font-size: 12.5px; }
.film-work .act b { flex: 1; min-width: 0; font-weight: 500; }
.film-work .act em { font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.film-work .act .spin { width: 14px; height: 14px; flex: none; border: 1.5px solid #1565c0; border-right-color: transparent; border-radius: 999px; animation: spin 0.8s linear infinite; }
.film-work .act .ok { width: 14px; height: 14px; flex: none; border: 1.5px solid #2e7d32; border-radius: 999px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat; }
.film-work .act-line { margin: 8px 2px 0; color: var(--muted); font-size: 12.5px; }
.film-brief { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.film-brief summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 12.5px; }
.film-brief summary::-webkit-details-marker { display: none; }
.film-brief summary b { flex: 1; font-weight: 500; }
.film-brief summary em { font-style: normal; font-size: 11px; color: var(--muted); }
.film-work .history .brief-rows { max-height: 320px; overflow: auto; }
.brief-rows { display: grid; gap: 10px; padding: 0 12px 12px; }
.brief-row { display: grid; grid-template-columns: 112px 1fr; gap: 10px; }
.brief-time { align-self: start; padding: 6px 8px; border-radius: 6px; background: rgba(40, 41, 43, 0.06); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.brief-text p { margin: 0; font-size: 13px; line-height: 1.55; }
.brief-text .brief-voice { margin-top: 6px; color: var(--muted); }
.brief-text textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-family: inherit; font-size: 13px; line-height: 1.55; resize: vertical; }
.brief-text label { display: grid; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.film-work .history .brief-row { grid-template-columns: 92px 1fr; }
.film-work .history .brief-text p { font-size: 12px; }
.film-confirm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.film-confirm h4 { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.film-confirm ul { margin: 0; padding-left: 18px; font-size: 13px; }
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spec-chips span { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 11.5px; }
.film-price { margin: 0; font-size: 12.5px; color: var(--muted); }
.film-price.short { color: #c62828; }
.film-price .text-btn { margin: 0; color: inherit; text-decoration: underline; }
.confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.film-confirm .solid { min-height: 34px; padding: 0 14px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 600; }
.film-confirm .ghost, .film-row .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.film-confirm > .text-btn { justify-self: start; margin: 0; font-size: 12.5px; color: var(--muted); }
.film-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.film-set label { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--muted); }
.film-set select { width: 100%; min-width: 0; }
.film-set select { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.film-set .set-checks, .film-set .film-set-note, .film-set .confirm-actions { grid-column: 1 / -1; }
.film-set .set-checks { display: flex; flex-wrap: wrap; gap: 14px; }
.film-set .set-check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.film-set-note { margin: 0; font-size: 11.5px; color: var(--muted); }
.film-set .text-btn { margin: 0; }
.film-canvas .film-row, .film-canvas .film-set, .film-canvas .film-brief-panel { max-width: 960px; margin-left: auto; margin-right: auto; }
.film-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px auto; }
.film-row .chip em { font-style: normal; color: var(--muted); }
.film-row .chip:disabled { opacity: 0.55; cursor: default; }
.film-row .cost { cursor: default; color: #c2410c; border-color: transparent; background: transparent; }
.film-row .cost.short { color: #c62828; }
.film-row .regen { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin-left: auto; padding: 0 14px; border: 0; border-radius: 999px; background: #e8590c; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.film-brief-panel { margin-top: 14px; background: transparent; }
.film-brief-panel summary b { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.film-brief-panel .film-plan { margin: 0 12px 12px; font-size: 13px; }
.canvas-bar .film-download { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 12px; border-radius: 8px; background: rgba(40, 41, 43, 0.06); color: var(--ink); font-size: 12.5px; font-weight: 500; text-decoration: none; }
html[data-theme="dark"] .film-work .act { border-color: var(--line); background: var(--surface); }
html[data-theme="dark"] .brief-time, html[data-theme="dark"] .canvas-bar .film-download { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 860px) {
  .brief-row, .film-work .history .brief-row { grid-template-columns: 1fr; }
  .film-set { grid-template-columns: 1fr; }
  .film-row .regen { margin-left: 0; }
}

/* Film settings after the owner's reference (spec 384). */
.film-dialog { text-align: left; }
.film-lang { display: flex; align-items: center; gap: 10px; margin-top: -6px; font-size: 13px; color: var(--muted); }
.film-lang select { height: 32px; padding: 0 28px 0 10px; border: 1px solid #e0e0e0; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
.film-wm { display: grid; gap: 12px; }
.film-wm-row { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.film-switch { flex: none; position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--brand-text); opacity: 0.6; }
.film-switch::after { content: ""; position: absolute; top: 2px; left: 18px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.film-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.film-seg button.locked { color: var(--muted); }
.film-seg .pro-tag { padding: 1px 5px; border: 1px solid color-mix(in srgb, #e8590c 45%, transparent); border-radius: 4px; color: #e8590c; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; }
html[data-theme="dark"] .film-lang select { border-color: var(--line); background: var(--surface); }

/* Dark mode: --char and --on are both dark there, so the strong "char" controls flip to ink on paper,
   the plan names and the credit chip read on the dark surfaces (spec 392). */
html[data-theme="dark"] :is(.film-revise button, .film-go, #film-render, .film-seg button.on, .film-round b, .film-duration) { --char: var(--ink); --on: var(--bg); }
html[data-theme="dark"] .plan .plan-head { color: var(--ink); }
html[data-theme="dark"] .film-row .cost { color: #fb923c; }
html[data-theme="dark"] .film-row .cost.short, html[data-theme="dark"] .film-price.short { color: #f87171; }

/* Your videos under the Motion create box, styled as Your films (spec 394). */
#view-create .film-yours, #view-create .film-list, #view-demo .film-yours, #view-demo .film-list { width: 100%; text-align: left; }
#view-create .film-yours, #view-demo .film-yours { margin-top: 36px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#view-create .film-yours[hidden], #view-create .film-list[hidden], #view-demo .film-yours[hidden], #view-demo .film-list[hidden] { display: none; }
.film-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A revise shows each step it went through, the last one running. */
/* The plan card stays light in both themes, so its steps use the card's own greens. */
.revise-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: #7A5A5E; }
.revise-steps li { display: flex; gap: 8px; align-items: center; }
.revise-steps li.done::before { content: "✓"; width: 14px; text-align: center; color: #8E1F2F; font-weight: 700; }
.revise-steps li.now { color: #3A0C14; font-weight: 600; }
.revise-steps .spin { width: 14px; height: 14px; flex: none; border: 1.5px solid #8E1F2F; border-right-color: transparent; border-radius: 999px; animation: spin 0.8s linear infinite; }

/* The plan as a quiet line, Upgrade as the strong button under it (spec 395). */
.nav-plan-name { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 4px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.nav-plan-name:hover { color: var(--ink); }
.nav-plan-name[hidden], .nav-upgrade[hidden] { display: none; }
.nav-upgrade { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 4px 12px rgba(142, 31, 47, 0.35); }
@media (max-width: 860px) { body.app .nav-plan-name { display: none; } }

/* The studio sidebar folds to a 64px icon rail on wide screens (spec 397). */
.app-nav-head { justify-content: space-between; }
.nav-collapse { display: none; }
@media (min-width: 861px) {
  .nav-collapse { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
  .nav-collapse:hover { background: rgba(40, 41, 43, 0.06); color: var(--ink); }
  html[data-theme="dark"] .nav-collapse:hover { background: rgba(255, 255, 255, 0.08); }
  body.app .app-nav { transition: width 0.18s ease; }
  body.app main { transition: margin-left 0.18s ease; }
  body.app.nav-mini .app-nav { width: 64px; }
  body.app.nav-mini main { margin-left: 64px; }
  /* The studio hides the nav, folded or not: no room is kept for the rail (owner, 2026-10-25). */
  body.app.studio.nav-mini main { margin-left: 0; }
  body.app.nav-mini .app-nav-head { flex-direction: column; justify-content: center; gap: 10px; height: auto; padding: 20px 0 4px; }
  body.app.nav-mini .nav-collapse svg { transform: scaleX(-1); }
  body.app.nav-mini .app-brand > span,
  body.app.nav-mini .app-nav nav button > span:not(.nav-ico),
  body.app.nav-mini .app-nav nav em,
  body.app.nav-mini .nav-plan-name,
  body.app.nav-mini .app-user > span:last-child { display: none; }
  body.app.nav-mini .app-nav nav { padding: 12px 10px 8px; }
  body.app.nav-mini .app-nav nav button { justify-content: center; gap: 0; padding: 8px 0; }
  body.app.nav-mini .nav-plan { margin: 0 10px 4px; }
  body.app.nav-mini .nav-upgrade { gap: 0; padding: 0; font-size: 0; }
  body.app.nav-mini .app-user { justify-content: center; gap: 0; margin: 12px 8px; padding: 8px 0; }
}

/* Pack picker: each pack with its bonus, so a bigger pack reads as the better buy (spec 398). */
.pp-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pp { position: relative; width: 100%; }
.pp .pp-btn { margin: 0; display: flex; align-items: center; gap: 8px; width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pp .pp-btn .pp-chev { margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.pp .pp-btn[aria-expanded="true"] .pp-chev { transform: rotate(180deg); }
.pp-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); max-height: 320px; overflow: auto; }
.pp-list[hidden] { display: none; }
.pp-list li { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.pp-list li:hover, .pp-list li.on { background: rgba(40, 41, 43, 0.05); }
html[data-theme="dark"] .pp-list li:hover, html[data-theme="dark"] .pp-list li.on { background: rgba(255, 255, 255, 0.06); }
.pp-list .pp-tick { margin-left: auto; color: var(--ink); }
.pp-main { color: var(--muted); white-space: nowrap; }
.pp-main b { color: var(--ink); font-weight: 600; }
.pp-bonus { flex: none; padding: 2px 7px; border: 1px solid #f5b8a0; border-radius: 6px; background: #fff1eb; color: #d4511f; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
html[data-theme="dark"] .pp-bonus { border-color: rgba(251, 146, 60, 0.45); background: rgba(251, 146, 60, 0.14); color: #fdba74; }
.plan .pp-list li { padding: 10px; }
.plan .pp-list li::before { content: none; }

/* Motion settings in Film's dialog (spec 400): two even columns, length chips that fit their PRO tag. */
.mset-dialog .film-dialog-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mset-dialog .film-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 4px; }
@media (max-width: 640px) { .mset-dialog .film-dialog-cols { grid-template-columns: minmax(0, 1fr); } }
.mset-dialog .film-seg { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }

/* The media cut from the site, under Direct the video in the chat (spec 401). */
.cut-media { margin-top: 10px; display: grid; gap: 8px; }
.cut-head { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
/* One piece a row, each in its own shape, so it reads clearly (owner, 2026-10-25). */
.cut-grid { display: grid; gap: 14px; }
.cut-item { margin: 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.cut-thumb { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; max-height: 420px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--gray); cursor: zoom-in; }
.cut-thumb img, .cut-thumb video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cut-play { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); }
.cut-play::after { content: ""; position: absolute; left: 7px; top: 5px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.cut-item figcaption { display: grid; gap: 2px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.cut-item figcaption b { color: var(--ink); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cut-item figcaption span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shot-light video { display: block; width: 100%; max-height: 80vh; border-radius: 10px; background: #000; }
.shot-light video[hidden], .shot-light img[hidden] { display: none; }

/* The rest of the reference settings (spec 404): PRO tags on switches, a line under a field, voice cards. */
.film-toggle .pro-tag { margin-left: auto; font-style: normal; padding: 1px 6px; border: 1px solid color-mix(in srgb, #e8590c 45%, transparent); border-radius: 4px; color: #e8590c; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; }
.film-toggle .pro-tag[hidden] { display: none; }
.film-toggle input:disabled { opacity: 0.55; cursor: pointer; }
.film-sub { margin-top: -4px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.m-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
/* Demo's presenter in its settings (owner, 2026-10-29): Motion's voice rows, with the face first. */
.m-voices.demo-people { grid-template-columns: 1fr; margin-top: 0; }
.demo-people .m-voice-text span { flex-wrap: wrap; }
.demo-people .m-voice-text i { white-space: nowrap; }
.demo-person-face { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; box-sizing: border-box; }
.demo-person-face.demo-none { border: 1.5px dashed #c9ccc4; }
.demo-add .demo-person-face { background: var(--gray); color: var(--muted); }
.demo-add .demo-person-face svg { width: 16px; height: 16px; }
.m-voices[hidden] { display: none; }
.m-voice { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.m-voice.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.m-voice:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.m-voice-text { display: grid; gap: 4px; min-width: 0; flex: 1; }
.m-voice-text b { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-voice-text span { display: flex; gap: 4px; }
.m-voice-text i { padding: 1px 6px; border-radius: 6px; background: var(--gray); color: var(--muted); font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.presenter-voice-row { display: flex; align-items: center; gap: 8px; }
.presenter-voice-row select { flex: 1; min-width: 0; }
.presenter-voice-row .m-voice-play[hidden] { display: none; }
.m-voice-play { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.m-voice-tick { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 999px; background: var(--ink); color: var(--bg); }
@media (max-width: 640px) { .m-voices { grid-template-columns: minmax(0, 1fr); } }

/* How each video is made: four plain steps, centred (spec 408). */
.sources.how { width: min(1240px, 100%); margin: 0 auto; padding: 24px 0 96px; border-top: 1px solid var(--line); text-align: center; }
.sources.how h2 { margin: 0 0 22px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; text-align: left; }
.how-steps li { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.how-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 13px; font-weight: 700; }
.how-steps h3 { margin: 6px 0 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; color: var(--ink); }
.how-steps p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.how-film { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
/* `.sources p` out-ranks the rule above and zeroed the gap under the steps. */
.sources .how-film { margin-top: 28px; }
@media (max-width: 860px) { .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .how-steps { grid-template-columns: minmax(0, 1fr); } .sources.how { padding-left: 16px; padding-right: 16px; } }

/* The copy angle and storyboard the director wrote, and the live steps on the canvas (spec 409). */
.copy-plan { margin-top: 10px; display: grid; gap: 8px; }
.copy-angle { margin: 0; display: grid; gap: 6px; }
.copy-angle div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 1.45; }
.copy-angle dt { color: var(--brand-text); font-weight: 700; }
.copy-angle dd { margin: 0; color: var(--ink); }
.copy-board { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.stage-live { margin-top: 22px; display: grid; gap: 18px; }
.stage-live:empty { display: none; }

/* Free keeps the defaults: locked choices carry PRO and lead to the upgrade (spec 410). */
.film-field-head { display: flex; align-items: center; gap: 8px; }
.film-field-head .pro-tag { font-style: normal; padding: 1px 6px; border: 1px solid color-mix(in srgb, #e8590c 45%, transparent); border-radius: 4px; color: #e8590c; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; }
.film-field-head .pro-tag[hidden] { display: none; }
.m-voice.locked { opacity: 0.62; }
.m-voice .pro-tag { font-style: normal; margin-left: 6px; padding: 1px 5px; border: 1px solid color-mix(in srgb, #e8590c 45%, transparent); border-radius: 4px; color: #e8590c; font-size: 9px; font-weight: 700; vertical-align: 2px; }
#m-text-lang:disabled { opacity: 0.6; cursor: pointer; }

/* The chat column can be dragged wider (spec 411); a tall clip stays whole inside its row. */
.cut-thumb img, .cut-thumb video { object-fit: contain; object-position: center; }
.cut-item figcaption { font-size: 12.5px; }
.history-resize { display: none; }
@media (min-width: 861px) {
  .history-resize { display: block; position: absolute; top: 0; right: -5px; bottom: 0; width: 10px; z-index: 5; cursor: col-resize; touch-action: none; }
  .history-resize::after { content: ""; position: absolute; top: 50%; left: 4px; width: 2px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--line); transition: background 0.15s; }
  .history-resize:hover::after, .history-resize.on::after { background: var(--brand); }
  body.resizing { cursor: col-resize; user-select: none; }
  body.resizing iframe, body.resizing video { pointer-events: none; }
}

/* The reel heading reads on one line on wide screens (owner, 2026-10-25); phones wrap. */
@media (min-width: 861px) { .reel-head h2 { white-space: nowrap; } }

/* Settings dialogs: roomier, not crammed (owner, 2026-10-25). Motion's has the most controls and gets the most room. */
.film-dialog { max-width: min(760px, calc(100vw - 32px)); }
.mset-dialog { max-width: min(920px, calc(100vw - 32px)); }
.film-dialog-panel { padding: 30px 34px 32px; max-height: calc(100vh - 48px); overflow: auto; }
.film-dialog-panel header { margin-bottom: 24px; }
.film-dialog-panel h2 { font-size: 18px; }
.film-dialog-cols, .mset-dialog .film-dialog-cols { gap: 26px 48px; }
.film-col { gap: 20px; }
.mset-dialog .m-voices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
@media (max-width: 1000px) { .mset-dialog .m-voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .film-dialog-panel { padding: 20px 16px 22px; }
  .mset-dialog .m-voices { grid-template-columns: minmax(0, 1fr); }
}
/* All five lengths on one row; the chosen voice's tick sits on the card's corner so the name keeps its room. */
@media (min-width: 641px) { .mset-dialog .film-seg { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.m-voice-tick { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--bg); }
.m-voice-text span { overflow: hidden; }

/* The progress card in dark mode (owner, 2026-10-25: "Queued · 1 ahead" was light text on a light card). */
html[data-theme="dark"] .progress-card { background: color-mix(in srgb, var(--surface) 88%, transparent); border-color: var(--line); box-shadow: 0 18px 44px -26px #000; }
html[data-theme="dark"] .progress-card h2 { color: var(--ink); }
html[data-theme="dark"] .progress-card #work-verb { color: var(--muted); }
html[data-theme="dark"] .progress-count { color: #e0a84a; }
html[data-theme="dark"] .progress-count em, html[data-theme="dark"] .progress-flag { color: var(--muted); }
html[data-theme="dark"] .progress-flag i { background: #e0a84a; }
html[data-theme="dark"] .progress-mark { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
html[data-theme="dark"] .progress-row.ready .progress-count, html[data-theme="dark"] .progress-row.ready .progress-flag { color: #6cc070; }

/* The score in the chat (spec 424): the whole song and the part the film plays. */
.music-card { margin-top: 10px; display: grid; gap: 8px; }
.music-facts { margin: 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.music-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); }
.music-row audio { width: 100%; height: 34px; }

/* Model, format, purpose and screen language: one per row, the name and its choice on one line (owner, 2026-10-25). */
.mset-inline { grid-template-columns: 150px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.mset-inline > span, .mset-inline > .film-field-head { margin: 0; }
.mset-inline select.film-fit { justify-self: stretch; width: 100%; min-width: 0; }
/* A Settings model field as the composer's menu (spec 479): opens below, the rate on the button. */
.mset-inline .model-pick { justify-self: stretch; min-width: 0; z-index: 7; }
.model-pick > button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 36px; border-radius: 10px; font-size: 13px; text-align: left; }
.model-pick > button b { font-weight: 600; }
.model-pick > button .rate { margin-left: auto; color: #5c6058; font-size: 12px; font-variant-numeric: tabular-nums; }
.model-pick > button::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; }
.model-pick .model-menu { top: calc(100% + 6px); bottom: auto; right: 0; left: auto; width: min(320px, 80vw); }
html[data-theme="dark"] .model-pick > button { background: var(--gray); border-color: var(--line); }
@media (max-width: 640px) { .mset-inline { grid-template-columns: 120px minmax(0, 1fr); } }

/* The model menu in dark mode (owner, 2026-10-25: light names on its white box). */
html[data-theme="dark"] .model-menu { background: var(--surface); border-color: var(--line); box-shadow: 0 18px 44px -26px #000; }
html[data-theme="dark"] .model-menu button { color: var(--ink); }
html[data-theme="dark"] .model-menu button.on, html[data-theme="dark"] .model-menu button:hover { background: var(--gray); }
html[data-theme="dark"] .model-menu em, html[data-theme="dark"] .model-menu .rate, html[data-theme="dark"] .model-menu .grp { color: var(--muted); }
html[data-theme="dark"] .model-menu button.locked b, html[data-theme="dark"] .model-menu button.locked em, html[data-theme="dark"] .model-menu button.locked .rate { color: color-mix(in srgb, var(--muted) 80%, transparent); }
html[data-theme="dark"] .model-menu button.locked:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }

/* What the cut review left out (spec 427): folded, small pictures with their reasons. */
.cut-review { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.cut-review summary { cursor: pointer; }
.cut-review ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cut-review li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; }
.cut-review img { width: 72px; height: 48px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: var(--gray); }

/* Share sits beside Download in the film's header; its link opens in a panel under it. */
.canvas-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.canvas-actions .film-download { margin-left: 0; }
.canvas-bar .film-share { position: relative; margin: 0; }
.canvas-bar .film-share-btn { height: 30px; }
.canvas-bar .film-share-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; flex-wrap: nowrap; width: max-content; max-width: min(520px, 90vw); padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 44px -26px #00000059; }
.canvas-bar .film-share-note { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: max-content; max-width: min(360px, 90vw); margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 12.5px; }
.canvas-bar .film-share-panel button { white-space: nowrap; }

/* Film feature page: the films it made, in one strip, and one brief beside its film (owner, 2026-10-25). */
.feat-reel { margin: 34px 0 10px; }
.feat-reel h2 { margin: 0 0 14px; font-size: 22px; }
.feat-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.feat-strip .film-band-tile { flex: none; height: 300px; aspect-ratio: auto; scroll-snap-align: start; }
.feat-strip .film-band-tile.wide { width: calc(300px * 16 / 9); }
.feat-strip .film-band-tile.tall { width: calc(300px * 9 / 16); }
.feat-brief { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; margin-top: 30px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.feat-brief h3 { margin: 0 0 6px; font-size: 18px; }
.feat-brief-title { margin: 0 0 14px; color: var(--brand-text); font-weight: 600; }
.feat-brief dl { margin: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px 14px; font-size: 13.5px; line-height: 1.5; }
.feat-brief dt { color: var(--muted); font-weight: 600; }
.feat-brief dd { margin: 0; color: var(--ink); }
.feat-brief-film.film-band-tile { width: 220px; aspect-ratio: 9 / 16; height: auto; }
@media (max-width: 760px) {
  .feat-strip .film-band-tile { height: 220px; }
  .feat-strip .film-band-tile.wide { width: calc(220px * 16 / 9); }
  .feat-strip .film-band-tile.tall { width: calc(220px * 9 / 16); }
  .feat-brief { grid-template-columns: minmax(0, 1fr); }
  .feat-brief-film.film-band-tile { width: min(240px, 100%); justify-self: center; }
}
/* The band's tall tile sits in column 1; here the film goes beside the brief. */
.feat-brief .feat-brief-film.film-band-tile { grid-column: 2; grid-row: 1; }
.feat-brief .feat-brief-text { grid-column: 1; grid-row: 1; }
@media (max-width: 760px) {
  .feat-brief .feat-brief-film.film-band-tile { grid-column: 1; grid-row: 2; }
}

/* Credit activity on the billing page (owner, 2026-10-25). */
.credit-activity { margin: 36px 0 8px; }
.credit-activity h2 { margin: 0 0 8px; font-size: 16px; }
.credit-activity ul { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.credit-activity li { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.credit-activity li:first-child { border-top: 0; }
.credit-activity li.held { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.credit-activity .act-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.credit-activity .act-name a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credit-activity .act-name em { font-style: normal; color: var(--muted); margin-left: 6px; }
.credit-activity .act-when { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.credit-activity .act-amount { text-align: right; font-variant-numeric: tabular-nums; }
.credit-activity .act-amount.act-in { color: #2f8f4e; }
html[data-theme="dark"] .credit-activity .act-amount.act-in { color: #6fcf8e; }
.credit-activity .act-amount.act-out { color: var(--ink); }
@media (max-width: 560px) { .credit-activity li { grid-template-columns: minmax(0, 1fr) 56px; } .credit-activity .act-when { grid-column: 1; grid-row: 2; } .credit-activity .act-amount { grid-row: 1 / span 2; grid-column: 2; } }

/* A film step that stopped with an error (owner, 2026-10-25). */
.film-work .act .bad { width: 14px; height: 14px; flex: none; border: 1.5px solid #c62828; border-radius: 999px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 9px no-repeat; }

/* Film steps in a row: one mark for the run, 6px apart, like Motion's single reply. */
.film-work .msg-step { padding-bottom: 6px; }
.film-work .msg-step + .msg-step { padding-top: 0; }
.film-work .msg-step + .msg-step .mark-logo { visibility: hidden; height: 0; margin-top: 0; }
.film-work .msg-step:has(+ .msg-step) .stem { display: none; }

/* Where a picture or clip came from on the site (owner, 2026-10-25). */
.cut-item .cut-where { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }

/* Film models on the pricing page: what each makes, under its name. */
.film-rates { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 12px; }
.film-rates div { flex-direction: column; justify-content: flex-start; gap: 8px; }
.film-rates dt { color: var(--ink); font-weight: 600; font-size: 14px; }
.film-rates dd { white-space: normal; }
.film-rates dt small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted); }

/* Every PRO mark carries a lock (owner, 2026-10-28), like the reference. */
.pro-tag { display: inline-flex; align-items: center; gap: 3px; font-style: normal; }
.pro-tag::before { content: ""; flex: none; width: 0.95em; height: 0.95em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
/* On buttons that are not settings rows: a small mark after the label. */
#versions-btn .pro-tag, #share-btn .pro-tag, #export-btn .pro-tag, .film-download .pro-tag, .film-share-btn .pro-tag, .demo-add .pro-tag, .plan-go .pro-tag { margin-left: 6px; padding: 1px 5px; border: 1px solid color-mix(in srgb, #e8590c 45%, transparent); border-radius: 4px; color: #e8590c; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; }
.film-toggle .demo-pro-mark { margin-left: auto; }


/* Caption styles as tiles (spec 505): the label above one row that scrolls, each tile a loop of the style. */
.cap-row { min-width: 0; }
.cap-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; }
.cap-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.cap-look { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--line); border-radius: 10px; background: #0b0b0d; }
.cap-look video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-off { color: #8a8a92; }
.cap-tile b { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cap-tile:hover .cap-look { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.cap-tile[aria-checked="true"] .cap-look { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.cap-tile[aria-checked="true"] b { color: var(--ink); }
.cap-tile:focus-visible { outline: none; }
.cap-tile:focus-visible .cap-look { outline: 2px solid var(--brand); outline-offset: 2px; }
.cap-tile:disabled { cursor: not-allowed; opacity: 0.45; }

/* Account settings (owner, 2026-10-30: a stack of cards with buttons on both sides read as a mess).
   One header with the plan and its actions, then grouped rows: what it is on the left, the control on the right. */
.acct-hero { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.acct-avatar { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 700 22px/1 "Plus Jakarta Sans", Inter, sans-serif; }
.acct-who { flex: 1; min-width: 0; }
.acct-who #account-hello-title { margin: 0; font-size: 26px; overflow-wrap: anywhere; }
.acct-who .dash-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; }
.acct-plan { padding: 2px 10px; border-radius: 999px; background: #f6e7ea; color: var(--brand); font-size: 12px; font-weight: 650; }
.acct-plan:empty { display: none; }
.acct-hero-actions { display: flex; flex: none; gap: 8px; }
.acct .dash-card.acct-group { padding: 6px 24px; }
.acct-group-title { margin: 18px 0 2px; font-size: 15px; font-weight: 650; }
.acct-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acct-group-sub { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.acct-link { color: var(--brand-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.acct-link:hover { text-decoration: underline; }
.acct-row, .acct .acct-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; margin: 0; padding: 18px 0; border-top: 1px solid var(--line); }
.acct-group-title + .acct-row, .acct-group > .acct-row:first-child { border-top: 0; }
.acct .acct-banner { margin: 0 0 18px; padding: 18px 24px; border: 1px solid rgba(20,30,20,.09); }
.acct-banner h2 { margin: 0 0 2px; font-size: 15px; font-weight: 650; }
.acct-row-label h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.acct-row-label p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.acct-row-control { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.acct-row .acct-note, .acct-banner .acct-note { grid-column: 1 / -1; margin: 0; }
.acct-row-control > input, .acct-key-form input, .acct-pass .field input { width: 220px; height: 40px; padding: 0 12px; border: 1px solid rgba(20,30,20,.16); border-radius: 10px; background: #fff; color: inherit; font: inherit; font-size: 14px; }
.acct-pass .field { margin: 0; }
.acct-pass .field input { width: 170px; }
.acct-row-control > input:focus, .acct-key-form input:focus { outline: none; border-color: #8E1F2F; box-shadow: 0 0 0 3px rgba(142,31,47,.25); }
.acct-row .acct-methods { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.acct-row .acct-methods li { padding: 4px 10px; border: 0; font-size: 12.5px; }
.acct-keys { margin: 0; padding: 0; list-style: none; }
.acct-keys li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.acct-keys .key-main { flex: 1; min-width: 0; }
.acct-keys .key-name { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.acct-keys .key-meta { display: block; color: var(--muted); font-size: 12.5px; }
.acct-keys code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12.5px; }
.key-revoke { flex: none; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #b42318; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.key-revoke:hover { background: #fdecea; }
.acct-key-form { display: flex; gap: 8px; padding: 14px 0 18px; border-top: 1px solid var(--line); }
.acct-key-form input { flex: 1; width: auto; min-width: 0; }
#acct-key-note:not([hidden]) { margin: -8px 0 16px; }
.acct .dash-card.acct-group.danger .acct-row-label h3 { color: #b42318; }
html[data-theme="dark"] .acct-plan { background: rgba(240, 140, 152, 0.16); color: var(--brand-on-dark); }
html[data-theme="dark"] .acct-row-control > input, html[data-theme="dark"] .acct-key-form input, html[data-theme="dark"] .acct-pass .field input { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .acct .acct-banner { border-color: var(--line); }
html[data-theme="dark"] .key-revoke, html[data-theme="dark"] .acct .dash-card.acct-group.danger .acct-row-label h3 { color: #ff8a7a; }
html[data-theme="dark"] .key-revoke:hover { background: color-mix(in srgb, #d92d20 16%, transparent); }
@media (max-width: 640px) {
  .acct-hero { flex-wrap: wrap; }
  .acct-hero-actions { width: 100%; }
  .acct-hero-actions button { flex: 1; }
  .acct .dash-card.acct-group { padding: 4px 18px; }
  .acct .acct-banner { padding: 16px 18px; }
  .acct-row, .acct .acct-banner { grid-template-columns: 1fr; }
  .acct-row-control, .acct-row .acct-methods { justify-content: flex-start; flex-wrap: wrap; }
  .acct-row-control > input { flex: 1; width: auto; min-width: 0; }
  .acct-pass .field { flex: 1 1 100%; }
  .acct-pass .field input { width: 100%; }
}

/* The confirm dialog for anything that cannot be undone (owner, 2026-10-30: not the browser's confirm()). */
.confirm-modal { width: min(440px, calc(100vw - 32px)); padding: 28px 28px 22px; border: 0; border-radius: 22px; background: #fff; color: #1d211c; box-shadow: 0 24px 80px rgba(16,24,16,.25); }
.confirm-modal::backdrop { background: rgba(16,24,16,.45); backdrop-filter: blur(2px); }
.confirm-modal form { margin: 0; }
.confirm-modal h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; }
.confirm-body { margin: 0 0 18px; color: #6b6f6a; font-size: 14.5px; line-height: 1.5; }
.confirm-modal .field { margin: 0 0 14px; }
.confirm-note { margin: 0 0 12px; color: #b42318; font-size: 13px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-modal .btn-danger { border-color: #d92d20; background: #d92d20; color: #fff; }
.confirm-modal .btn-danger:hover { background: #b42318; }
.confirm-modal button:disabled { opacity: .6; cursor: default; }
html[data-theme="dark"] .confirm-modal { border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgba(0,0,0,.5); }
html[data-theme="dark"] .confirm-body { color: var(--muted); }
html[data-theme="dark"] .confirm-note { color: #ff8a7a; }
html[data-theme="dark"] .confirm-modal .btn-danger { border-color: #d92d20; background: #d92d20; color: #fff; }
@media (max-width: 480px) { .confirm-modal { padding: 24px 20px 20px; } .confirm-actions { flex-direction: column-reverse; } .confirm-actions button { width: 100%; } }