:root {
  --ink-display: #3d2d1e;
  --ink: #241b15;
  --ink-action: #3e2e1f;
  --muted: #8f8a86;
  --accent: #e5c21a;
  --accent-bright: #f4c900;
  --accent-soft: #fff5bd;
  --taupe: #8d7b6e;
  --surface: rgba(255, 255, 255, .94);
  --surface-solid: #fff;
  --surface-soft: #f7f7f5;
  --surface-muted: #f0f0ee;
  --border: #e8e5e1;
  --danger: #d9483b;
  --success: #68a44b;
  --radius-shell: 42px;
  --radius-card: 22px;
  --radius-panel: 18px;
  --radius-control: 13px;
  --shadow-card: 0 10px 30px rgba(49, 35, 23, .045);
  --shadow-shell: 0 30px 80px rgba(49, 35, 23, .12);
  --font-display: "Inter Tight", "Helvetica Neue", sans-serif;
  --font-ui: Inter, "Helvetica Neue", sans-serif;
  --sidebar: 220px;
  --shell-gap: 0px;
}

+
/* Public AI Reels guide */
.ai-reels-guide {
  min-height: 100dvh;
  padding: 132px clamp(18px, 4vw, 68px) 56px;
}
.ai-reels-guide__shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 920px);
  justify-content: center;
  gap: clamp(28px, 5vw, 74px);
}
.ai-reels-guide__toc {
  position: sticky;
  top: 118px;
  align-self: start;
  display: grid;
  gap: 3px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ai-reels-guide__toc-label {
  margin: 0 0 8px;
  color: #9d7f18;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ai-reels-guide__toc a {
  padding: 6px 0;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}
.ai-reels-guide__toc a:hover { color: var(--ink); }
.ai-reels-guide__content { min-width: 0; }
.ai-reels-hero {
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(61,45,30,.08);
  border-radius: 30px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-shell);
}
.ai-reels-hero h1 {
  max-width: 760px;
  margin-top: 8px;
  font-size: clamp(45px, 6vw, 76px);
  line-height: .97;
}
.ai-reels-hero__lead {
  max-width: 650px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
}
.ai-reels-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
}
.ai-reels-flow span {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 13px;
  font-weight: 500;
}
.ai-reels-flow b { color: #9d7f18; }
.ai-reels-hero__note {
  margin: 21px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.ai-reels-section {
  margin-top: 28px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(61,45,30,.08);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-card);
  scroll-margin-top: 36px;
}
.ai-reels-section__heading { max-width: 720px; }
.ai-reels-section__heading h2 {
  margin: 5px 0 0;
  font-size: clamp(29px, 4vw, 42px);
  line-height: 1.02;
}
.ai-reels-section__heading > p:last-child {
  margin: 13px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.ai-agent-start { border-color: rgba(229,194,26,.45); background: linear-gradient(145deg, rgba(255,253,240,.96), rgba(255,255,255,.92)); }
.ai-agent-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 27px 0 0; padding: 0; list-style: none; }
.ai-agent-steps li { padding: 17px; border: 1px solid rgba(61,45,30,.09); border-radius: 14px; background: rgba(255,255,255,.66); }
.ai-agent-steps strong { display: block; font-size: 14px; }
.ai-agent-steps span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ai-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.ai-tool-card {
  min-height: 205px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface-soft);
}
.ai-tool-card > span, .ai-step__index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: #857000;
  font-size: 11px;
  font-weight: 700;
}
.ai-tool-card h3, .ai-step h3 { margin: 16px 0 7px; font-size: 19px; }
.ai-tool-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ai-tool-card small { display: block; margin-top: 15px; color: #80796f; font-size: 12px; }
.ai-step-list { display: grid; gap: 0; margin-top: 28px; }
.ai-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}
.ai-step h3 { margin: 3px 0 8px; }
.ai-step p { margin: 0; color: var(--muted); line-height: 1.55; }
.ai-step__check { margin-top: 11px !important; font-size: 13px; }
.ai-command {
  position: relative;
  min-width: 0;
  width: 100%;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid #e2ded7;
  border-radius: 14px;
  background: #28231e;
}
.ai-command pre {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
  padding: 16px 116px 16px 17px;
  color: #f7f2e9;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}
.ai-command__copy {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 31px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px;
  background: rgba(255,255,255,.09);
  color: #fff;
  box-shadow: none;
  font-size: 11px;
}
.ai-command__copy:hover { background: rgba(255,255,255,.18); box-shadow: none; transform: none; }
.ai-model-table { margin-top: 25px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); }
.ai-model-table__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 145px;
  gap: 20px;
  padding: 15px 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}
.ai-model-table__row:first-child { border-top: 0; }
.ai-model-table__head { background: var(--surface-soft); color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ai-model-table__row--recommended { background: #fff9d9; color: var(--ink); }
.ai-callout {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: #fffbed;
  color: var(--muted);
  line-height: 1.55;
}
.ai-callout strong { color: var(--ink); }
.ai-workflow { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: workflow; }
.ai-workflow li { counter-increment: workflow; padding: 23px 0 23px 48px; border-top: 1px solid var(--border); position: relative; }
.ai-workflow li { min-width: 0; }
.ai-workflow li::before { position: absolute; top: 22px; left: 0; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: #857000; content: counter(workflow); font-size: 11px; font-weight: 700; }
.ai-workflow strong { display: block; }
.ai-workflow > li > span { display: block; margin-top: 6px; color: var(--muted); line-height: 1.55; }
.ai-workflow .ai-command { margin-top: 14px; }
.ai-command--prompt { margin-top: 26px; }
.ai-command--prompt pre { padding-right: 18px; white-space: pre-wrap; }
.ai-command--prompt .ai-command__copy { position: static; display: flex; width: fit-content; margin: 0 16px 16px auto; }
.ai-checklist { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; }
.ai-checklist li { display: flex; gap: 13px; padding: 15px 0; border-top: 1px solid var(--border); }
.ai-checklist li > span { flex: 0 0 18px; height: 18px; margin-top: 2px; border: 1px solid var(--accent); border-radius: 5px; background: #fffdf1; }
.ai-checklist strong { font-size: 15px; }
.ai-checklist p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.ai-reels-guide__footer { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) {
  .ai-reels-guide { padding-top: 112px; }
  .ai-reels-guide__shell { grid-template-columns: minmax(0, 860px); }
  .ai-reels-guide__toc { position: static; grid-template-columns: repeat(4, auto); gap: 7px 18px; padding: 0 0 16px; border-top: 0; }
  .ai-reels-guide__toc-label { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ai-reels-guide { padding: 92px 12px 28px; }
  .ai-reels-hero, .ai-reels-section { padding: 22px 18px; border-radius: 20px; }
  .ai-reels-hero h1 { font-size: 44px; }
  .ai-reels-guide__toc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
  .ai-tool-grid { grid-template-columns: 1fr; }
  .ai-agent-steps { grid-template-columns: 1fr; }
  .ai-tool-card { min-height: auto; }
  .ai-model-table__row { grid-template-columns: 76px minmax(0, 1fr); gap: 9px 13px; }
  .ai-model-table__row > :last-child { grid-column: 2; }
  .ai-model-table__head > :last-child { display: none; }
  .ai-command pre { padding: 15px 14px 58px; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .ai-command code, .ai-reels-guide p code, .ai-workflow span code { overflow-wrap: anywhere; }
  .ai-command__copy { top: auto; right: 9px; bottom: 9px; }
  .ai-command--prompt pre { padding-bottom: 16px; }
}
/* Student learning flow */
.course-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:32px;padding:32px;background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow-card)}
.course-hero__copy{align-self:center;padding:12px 0 12px 10px}.course-hero h1{max-width:720px;margin:7px 0 14px;font-size:clamp(36px,4vw,64px);line-height:.96;letter-spacing:-.055em}.course-hero__copy>p:not(.page-intro__eyebrow):not(.status){max-width:680px;color:var(--muted);font-size:17px;line-height:1.6}
.course-hero__art{min-height:310px;border-radius:22px;overflow:hidden;background:#ddcfac}.course-hero__art img{width:100%;height:100%;object-fit:cover;display:block}
.course-progress{width:min(420px,100%);height:8px;margin:24px 0 9px;background:#eee8dc;border-radius:99px;overflow:hidden}.course-progress span{display:block;height:100%;background:var(--accent);border-radius:inherit}
.program-module__heading{display:flex;align-items:flex-start;gap:18px}.program-module__heading h3{margin:2px 0 16px}.program-module__index{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--ink);font-size:12px;font-weight:800}
.lesson-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}.lesson-outline{position:sticky;top:110px;padding:24px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.72)}.lesson-outline h2{margin:7px 0 18px;font-size:23px;letter-spacing:-.04em}.lesson-outline__module{padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}.lesson-layout__main{min-width:0}.assignments-page .student-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(340px,1.2fr);gap:28px;align-items:start}.assignments-page .admin-form{margin:0;background:rgba(255,255,255,.74)}
@media(max-width:900px){.course-hero{grid-template-columns:1fr}.course-hero__art{min-height:240px;order:-1}.lesson-layout{grid-template-columns:1fr}.lesson-outline{position:static}.assignments-page .student-card{grid-template-columns:1fr}}
@media(max-width:600px){.course-hero{padding:14px;border-radius:22px}.course-hero__copy{padding:10px 5px}.course-hero h1{font-size:38px}.course-hero__art{min-height:190px}.program-module__heading{gap:12px}.program-module__index{flex-basis:36px;height:36px}.lesson-outline{padding:18px}.assignments-page .student-card{padding:18px}}

* { box-sizing: border-box; }
html { min-width: 320px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  padding: 0;
  background: #d9ddd9 url('/assets/shilling-landscape.webp') center / cover fixed no-repeat;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
}
body::before {
  display: none;
}

a { color: inherit; }
img, video { max-width: 100%; }
svg { display: block; }
button, input, textarea, select { font: inherit; }
button, .button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: linear-gradient(135deg, #f7d34c, var(--accent-bright));
  color: var(--ink);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(214,173,0,.12);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
button:hover, .button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(84,62,24,.12); }
button:active, .button:active { transform: scale(.98); }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(229,194,26,.38); outline-offset: 2px; }
.button--secondary { border-color: var(--border); background: rgba(255,255,255,.72); box-shadow: none; }
.button--secondary:hover { background: var(--surface-solid); }

.container { width: 100%; max-width: none; margin: 0; }
.site-header--authenticated {
  position: fixed;
  z-index: 10;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar);
  flex-direction: column;
  padding: 30px 18px 24px;
  border-right: 1px solid rgba(61,45,30,.08);
  border-radius: 0;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-display);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.04em;
  text-decoration: none;
}
.brand-mark { position: relative; display: inline-block; width: 27px; height: 22px; }
.brand-mark i { position: absolute; left: 0; width: 24px; height: 7px; border-radius: 2px; background: var(--accent-bright); transform: skewX(35deg); }
.brand-mark i:first-child { top: 2px; }
.brand-mark i:last-child { bottom: 2px; left: 5px; }
.side-nav { display: grid; gap: 5px; margin-top: 40px; }
.side-nav a, .nav-logout {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  padding: 9px 13px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #4b433e;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  box-shadow: none;
}
.side-nav a:hover, .nav-logout:hover { background: rgba(255,255,255,.58); box-shadow: none; transform: none; }
.side-nav a.is-active { background: linear-gradient(90deg, rgba(255,235,160,.8), rgba(250,225,130,.5)); color: var(--ink); font-weight: 500; }
.side-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.side-nav--bottom { margin-top: auto; }
.side-nav--bottom form { margin: 0; }
.workspace-topbar {
  position: absolute;
  z-index: 9;
  top: 26px;
  right: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-avatar { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; overflow: hidden; border: 3px solid rgba(255,255,255,.9); border-radius: 50%; background: linear-gradient(145deg, #e9c36f, #8d6f55); color: #fff; font-size: 16px; font-weight: 600; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-identity { display: grid; min-width: 118px; line-height: 1.25; }
.user-identity strong { font-size: 13px; font-weight: 500; }
.user-identity small { color: var(--muted); font-size: 11px; }

.public-header {
  position: absolute;
  z-index: 10;
  top: 26px;
  right: 36px;
  left: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.public-header nav { display: flex; align-items: center; gap: 20px; }
.public-header nav > a:not(.button) { color: var(--muted); text-decoration: none; }

main {
  min-height: 100dvh;
  margin-left: var(--sidebar);
  padding: 88px clamp(28px, 3vw, 52px) 38px;
  background: rgba(241,243,244,.82);
  backdrop-filter: blur(22px) saturate(.85);
  -webkit-backdrop-filter: blur(22px) saturate(.85);
}
.site-header--authenticated ~ main {
  background: #f1f3f4;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.public-header ~ main { margin-left: 0; }

h1, h2, h3, h4 { color: var(--ink-display); font-family: var(--font-display); text-wrap: balance; }
h1 { margin: 0; font-size: clamp(38px, 4vw, 54px); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
h2 { font-size: 24px; font-weight: 500; letter-spacing: -.025em; }
h3 { font-weight: 500; letter-spacing: -.018em; }
p { text-wrap: pretty; }

.start-screen {
  position: relative;
  display: grid;
  min-height: 100dvh;
  align-items: center;
  overflow: hidden;
  padding: 106px clamp(28px, 5vw, 78px) 50px;
}
.start-screen .container { position: relative; z-index: 2; }
.start-screen__content { width: min(590px, 52%); padding: 0; }
.start-screen::after {
  position: absolute;
  right: 3%;
  bottom: 5%;
  width: min(49%, 650px);
  aspect-ratio: 4 / 3;
  border-radius: 30px;
  background: url('/assets/course-golden-leaf.webp') center / cover no-repeat;
  box-shadow: var(--shadow-card);
  content: "";
}
.start-screen__eyebrow, .page-intro__eyebrow, .course-card__meta { margin: 0 0 13px; color: #9d7f18; font-size: 13px; font-weight: 500; }
.start-screen h1 { font-size: clamp(48px, 5.8vw, 78px); }
.start-screen__lead { max-width: 42ch; margin: 22px 0 0; color: var(--muted); font-size: clamp(18px, 1.7vw, 22px); }
.start-screen__benefits { display: flex; flex-wrap: wrap; gap: 9px; margin: 32px 0; }
.start-screen__benefits p { margin: 0; padding: 9px 13px; border: 1px solid rgba(61,45,30,.09); border-radius: 999px; background: rgba(255,255,255,.7); font-size: 13px; }
.start-screen__actions { display: flex; flex-wrap: wrap; gap: 11px; }
.start-screen__content form { display: grid; gap: 16px; margin-top: 28px; }
.start-screen__content form p { margin: 0; }
.start-screen__content form label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 500; }
.start-screen__content form + p, .start-screen__content > p:last-child { color: var(--muted); font-size: 14px; }
.start-screen__content form + p a, .start-screen__content > p:last-child a { color: var(--ink); }
.start-screen__content:has(form) { width: min(470px, 48%); padding: 30px; border-radius: var(--radius-card); background: rgba(255,255,255,.87); box-shadow: var(--shadow-card); }
.start-screen__content:has(form) h1 { font-size: 46px; }

input, textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.78);
  color: var(--ink);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
textarea { min-height: 98px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229,194,26,.13); outline: 0; }

.cabinet-page, .admin-page { padding-top: 92px; }
.cabinet-page__content, .admin-page__content { display: grid; gap: 24px; }
.settings-page { padding-top: 104px; }
.settings-page__content { display: grid; width: min(100%, 980px); gap: 24px; margin: 0 auto; }
.settings-page .page-intro > p:last-child { max-width: 600px; margin: 14px 0 0; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); align-items: start; gap: 20px; }
.settings-card { overflow: hidden; border: 1px solid rgba(61,45,30,.07); border-radius: var(--radius-card); background: rgba(255,255,255,.88); box-shadow: var(--shadow-card); }
.settings-card__heading { display: flex; min-height: 112px; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid var(--border); }
.settings-card__heading p, .settings-card__heading h2 { margin: 0; }
.settings-card__heading p { margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.settings-card__heading h2 { font-size: 24px; }
.settings-avatar { display: grid; width: 68px; height: 68px; flex: 0 0 68px; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #e9c36f, #8d6f55); color: #fff; font-size: 24px; font-weight: 600; box-shadow: 0 8px 22px rgba(61,45,30,.13); }
.settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-form { display: grid; gap: 16px; padding: 24px; }
.settings-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 500; }
.settings-form label small { color: var(--muted); font-weight: 400; }
.settings-form > button { justify-self: start; }
.avatar-upload input { padding: 8px; }
.avatar-upload input::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; border-radius: 8px; background: #eee9df; color: var(--ink); cursor: pointer; }
.settings-message { margin: 0; padding: 13px 16px; border: 1px solid #cfe0be; border-radius: 12px; background: #f0f7e8; color: #4f713f; font-size: 13px; }
.settings-message--error { border-color: #e8c5bd; background: #fff1ed; color: #9b4033; }
.lesson-page { max-width: 1080px; }
.page-intro { max-width: 880px; }
.page-intro h1 { font-size: clamp(38px, 4vw, 52px); }
.page-intro > p:not(.page-intro__eyebrow):not(.status) { max-width: 62ch; margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 12px; }
.section-heading h1, .section-heading h2 { margin: 0; }
.section-heading h2, .lesson-material h2 { margin: 0; font-size: 22px; }

.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 16px; }
.course-card {
  position: relative;
  display: flex;
  min-height: 260px;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(61,45,30,.05);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.course-card::before { display: block; height: 88px; margin: -24px -24px 20px; background: url('/assets/course-golden-leaf.webp') center 45% / cover no-repeat; content: ""; }
.course-card h3 { margin: 0; font-size: 22px; }
.course-card h3 a { text-decoration: none; }
.course-card > p:not(.course-card__meta) { color: var(--muted); }
.course-card > .button, .course-card > form { align-self: flex-start; margin-top: auto; }
.status { display: inline-flex; width: fit-content; margin: 14px 0 0; padding: 7px 11px; border-radius: 999px; background: var(--accent-soft); color: #7c6610; font-size: 13px; font-weight: 500; }
.empty-state { margin: 0; padding: 24px; border-radius: var(--radius-panel); background: rgba(255,255,255,.7); color: var(--muted); }

.program-list, .admin-stack { display: grid; gap: 10px; }
.program-module, .student-card {
  padding: 20px 22px;
  border: 1px solid rgba(61,45,30,.06);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.program-module h3, .student-card h3 { margin: 0; font-size: 18px; }
.program-module ol { margin: 18px 0 0; padding: 0; list-style: none; }
.program-module li { display: flex; min-height: 48px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--border); color: var(--muted); }
.program-module li::before { display: grid; width: 28px; height: 28px; margin-right: 12px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: #89700b; content: "▶"; font-size: 9px; }
.program-module a { color: var(--ink); text-decoration: none; }
.program-list--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.program-list--columns .program-module { min-width: 0; }
.program-list--columns .program-module__heading h3 { overflow-wrap: anywhere; line-height: 1.4; }
.program-list--columns .program-resource { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 0; min-width: 0; }
.program-list--columns .program-resource::before { display: none; }
.program-resource__copy { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.program-resource__icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); }
.program-resource__action { align-self: flex-start; max-width: 100%; white-space: normal; text-align: center; }
.program-resource__locked { color: var(--muted); font-size: 14px; }
.student-password { min-width: 0; margin-top: 24px; }
.student-password > summary { cursor: pointer; text-align: center; white-space: normal; }
.student-password .admin-form { display: grid; gap: 16px; margin-top: 16px; padding: 18px; min-width: 0; }
.student-password .admin-form p { margin: 0; }
.student-password .admin-form label { min-width: 0; }
.student-password input { width: 100%; min-width: 0; box-sizing: border-box; }
.student-password button { white-space: normal; }
.student-password__generate { margin-top: 16px; }
.workbook-ai-result ol { display: grid; gap: 16px; padding-left: 24px; }
.workbook-ai-result li { padding-left: 4px; line-height: 1.6; }
.workbook-ai-result a { overflow-wrap: anywhere; }
#workbook-upload-title { scroll-margin-top: 120px; }
@media (max-width: 800px) { .program-list--columns { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.tag { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: #eef6e5; color: #699449; font-family: var(--font-ui); font-size: 11px; vertical-align: middle; }
.back-link { width: fit-content; color: var(--muted); font-size: 13px; text-decoration: none; }

.lesson-material { padding: 24px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.lesson-material p { max-width: 760px; color: var(--muted); }
.lesson-video { display: block; width: 100%; margin-top: 18px; border-radius: var(--radius-panel); background: #17130f; aspect-ratio: 16 / 9; }
.workbook { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.workbook__lead, .workbook__section { margin: 0; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-soft); }
.workbook__lead { color: var(--ink) !important; font-size: 17px; }
.workbook__section { display: grid; gap: 11px; }
.workbook__section h3 { margin: 0; font-size: 20px; }
.workbook__section p { margin: 0; }
.workbook__number { color: #9d7f18 !important; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.workbook__hint { padding-left: 13px; border-left: 2px solid var(--accent); font-size: 13px; }
.workbook__answers { display: grid; gap: 17px; margin-top: 10px; }
.workbook__answers span { min-height: 20px; border-bottom: 1px solid #d8d3ce; }
.workbook__checklist { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.workbook__checklist li { display: flex; gap: 10px; }
.workbook__checklist span { flex: 0 0 17px; height: 17px; border: 1px solid var(--accent); border-radius: 5px; }
.transcript { max-width: 800px; margin-top: 16px; }
.transcript summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.transcript p { white-space: pre-wrap; }

.admin-nav, .admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-section { display: grid; gap: 18px; }
.admin-form {
  display: grid;
  gap: 15px;
  max-width: 760px;
  padding: 24px;
  border: 1px solid rgba(61,45,30,.06);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.admin-form--compact { max-width: 100%; margin-top: 14px; padding: 18px; }
.admin-form h3, .admin-form h4 { margin: 0; }
.admin-form label { display: grid; gap: 7px; color: #615752; font-size: 13px; font-weight: 500; }
.admin-form .checkbox-label { display: flex; align-items: center; gap: 9px; }
.admin-form .checkbox-label input { width: 18px; min-height: 18px; }
.form-message, [role="alert"] { margin: 0; padding: 13px 16px; border-radius: 12px; background: #fff0ed; color: #a53e34; }
.form-message--notice { background: var(--accent-soft); color: #79630d; }
.admin-module { display: grid; gap: 16px; }
.student-card { display: grid; gap: 14px; }
.student-card h3, .student-card p { margin: 0; }
.student-card p { color: var(--muted); }
.student-course { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 11px; border-top: 1px solid var(--border); }
.student-course span { flex: 1 1 220px; }
.student-course .button, .student-card > form .button { min-height: 34px; padding: 8px 12px; }

/* Dashboard composition */
.dashboard-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.dashboard-head > div > p:last-child { margin: 9px 0 0; color: var(--muted); }
.dashboard-head .back-link { display: inline-block; margin-bottom: 14px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.metric-card { display: flex; min-height: 118px; align-items: center; gap: 16px; padding: 20px; border: 1px solid rgba(61,45,30,.05); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); }
.metric-card__icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: #7d650c; font-size: 21px; }
.metric-card__icon--danger { background: #fff0e7; color: var(--danger); }
.metric-card > div { display: grid; gap: 2px; }
.metric-card small, .metric-card span { color: var(--muted); font-size: 11px; }
.metric-card strong { color: var(--ink); font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 31px); font-weight: 500; line-height: 1.1; }
.metric-card--accent { background: linear-gradient(145deg, #fff8dc, #f4d870); }
.data-panel { padding: 18px; border: 1px solid rgba(61,45,30,.05); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.panel-heading h2, .panel-heading h3 { margin: 0; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.quiet-link { color: var(--ink); font-size: 12px; text-underline-offset: 4px; }
.data-list { display: grid; gap: 8px; }
.data-row { display: grid; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.7); }
.data-row--course { grid-template-columns: 62px minmax(220px, 1fr) auto auto 36px; }
.data-row img { width: 62px; height: 54px; border-radius: 11px; object-fit: cover; }
.data-row h3, .data-row p { margin: 0; }
.data-row h3 { font-size: 17px; }
.data-row h3 a { text-decoration: none; }
.data-row p { max-width: 65ch; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.data-order { display: grid; color: var(--muted); font-size: 10px; }
.data-order strong { color: var(--ink); font-size: 15px; }
.icon-action { display: grid; width: 34px; height: 34px; min-height: 34px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--ink); text-decoration: none; box-shadow: none; }
.icon-action:hover { background: var(--surface-soft); transform: none; }
.tag--muted { background: var(--surface-muted); color: var(--muted); }
.tag--waiting { background: #fff4ce; color: #9a7711; }
.tag--danger { background: #fff0ed; color: var(--danger); }

/* Editors */
.editor-card { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 30px 38px; padding: 24px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.editor-fields { display: grid; gap: 22px; }
.editor-fields > label { display: grid; gap: 7px; font-weight: 500; }
.editor-fields > label > span { color: #d28e00; }
.editor-fields small { color: var(--muted); font-size: 11px; font-weight: 400; }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span { display: flex; align-items: center; padding: 0 13px; border: 1px solid var(--border); border-right: 0; border-radius: 11px 0 0 11px; background: var(--surface-muted); color: var(--muted); font-size: 11px; white-space: nowrap; }
.input-prefix input { border-radius: 0 11px 11px 0; }
.publish-choice { margin: 0; padding: 0; border: 0; }
.publish-choice legend { margin-bottom: 9px; font-weight: 500; }
.publish-choice label { display: flex; align-items: center; gap: 12px; width: fit-content; padding: 13px 18px; border: 1px solid var(--accent); border-radius: 14px; background: var(--accent-soft); }
.publish-choice input { width: 18px; min-height: 18px; }
.publish-choice span { display: grid; }
.publish-choice small { font-weight: 400; }
.editor-hints { display: grid; align-content: start; gap: 40px; padding-top: 8px; }
.editor-hints article { display: flex; gap: 13px; }
.editor-hints article > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: #876e11; }
.editor-hints strong { font-size: 13px; }
.editor-hints p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.editor-actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--border); }
.course-summary { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.course-summary > img { width: 120px; height: 96px; border-radius: 14px; object-fit: cover; }
.course-summary__actions { display: flex; flex-wrap: wrap; gap: 12px; grid-column: 1 / -1; }
.course-summary__actions .button { white-space: nowrap; }
.course-summary__text > div:first-child { display: flex; align-items: center; gap: 10px; }
.course-summary h2, .course-summary p { margin: 0; }
.course-summary p { max-width: 60ch; margin-top: 5px; color: var(--muted); font-size: 13px; }
.course-meta { display: flex; gap: 18px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.settings-panel { border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); }
.settings-panel > summary { padding: 16px 20px; cursor: pointer; font-weight: 500; }
.settings-panel > .admin-form { max-width: none; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-panel) var(--radius-panel); box-shadow: none; }
.module-stack { display: grid; gap: 8px; }
.module-editor { border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.72); overflow: hidden; }
.module-editor > summary { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 14px; cursor: pointer; list-style: none; }
.module-editor > summary > span:nth-child(2) { display: grid; }
.module-editor > summary small { color: var(--muted); font-size: 11px; }
.drag-handle { color: var(--muted); }
.lesson-table { border-top: 1px solid var(--border); }
.lesson-row { border-bottom: 1px solid var(--border); }
.lesson-row > summary { display: grid; grid-template-columns: 24px 42px minmax(180px,1.4fr) minmax(110px,1fr) minmax(100px,1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; color: var(--muted); font-size: 11px; list-style: none; }
.lesson-row > summary strong { color: var(--ink); font-size: 12px; }
.lesson-number { color: var(--ink); }
.inline-create { margin: 10px; }
.inline-create > summary { width: fit-content; padding: 7px 11px; border-radius: 9px; background: var(--accent-soft); color: #7d6611; cursor: pointer; font-size: 12px; list-style: none; }
.inline-create--module { margin-top: 14px; }

/* Tables and operational screens */
.action-popover { position: relative; }
.action-popover > summary { list-style: none; }
.action-popover[open] > summary { background: var(--ink-action); color: #fff; }
.action-popover > .admin-form { position: absolute; z-index: 20; top: calc(100% + 10px); right: 0; width: min(390px, 80vw); }
.product-table, .orders-table, .student-table, .request-table { display: grid; }
.table-head { display: grid; align-items: center; gap: 12px; padding: 10px 12px; color: var(--muted); font-size: 10px; }
.product-table .table-head, .product-row { grid-template-columns: minmax(180px,1.5fr) minmax(90px,.8fr) minmax(80px,.7fr) minmax(120px,1fr) 100px 28px; }
.product-row, .order-row, .student-row, .request-row { display: grid; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px; border-top: 1px solid var(--border); font-size: 11px; }
.product-name, .person-cell { display: flex; align-items: center; gap: 10px; }
.product-name img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.product-name > span, .person-cell > span:last-child, .order-row > div { display: grid; }
.product-name small, .person-cell small, .order-row small, .student-row small { color: var(--muted); font-size: 10px; }
.tariff-list { display: grid; gap: 5px; }
.tariff-list > span { width: fit-content; padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; }
.row-menu { position: relative; }
.row-menu > summary { cursor: pointer; font-size: 20px; list-style: none; }
.row-menu > .admin-form { position: absolute; z-index: 20; top: 25px; right: 0; width: 330px; }
.orders-table .table-head, .order-row { grid-template-columns: minmax(170px,1.4fr) minmax(145px,1.2fr) 95px 90px 90px 105px 100px; }
.mini-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#f2d883,#8d7159); color: #fff; font-weight: 600; text-transform: uppercase; }
.compact-button { min-height: 30px; padding: 7px 10px; border-color: var(--accent); border-radius: 8px; background: var(--accent-soft); box-shadow: none; font-size: 10px; }
.compact-button--quiet { border-color: var(--border); background: #fff; }
.compact-button:hover { transform: none; }

/* Team */
.split-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px,.85fr); gap: 18px; align-items: start; }
.side-stack { display: grid; gap: 16px; }
.side-stack .admin-form { max-width: none; }
.role-group + .role-group { margin-top: 18px; }
.role-group h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 17px; }
.role-group h3 span { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--surface-muted); color: var(--muted); font-family: var(--font-ui); font-size: 11px; }
.team-row { display: grid; grid-template-columns: 40px minmax(160px,1fr) 100px 34px; align-items: center; gap: 10px; min-height: 60px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; }
.team-row + .team-row { margin-top: 6px; }
.team-row > div { display: grid; }
.team-row small, .team-row > span { color: var(--muted); font-size: 10px; }
.summary-card { padding: 20px; border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); }
.summary-card h3 { margin-top: 0; }
.summary-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.summary-card span { display: grid; padding: 14px; border-radius: 12px; background: linear-gradient(145deg,#fffaf0,#f5efde); }
.summary-card small { color: var(--muted); font-size: 10px; }
.summary-card strong { font-size: 20px; font-weight: 500; }

/* Cohorts */
.cohort-layout { display: grid; grid-template-columns: minmax(270px,.8fr) minmax(0,1.8fr); gap: 16px; align-items: start; }
.cohort-list-item { display: grid; grid-template-columns: 54px minmax(0,1fr) 50px; align-items: center; gap: 10px; min-height: 78px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.cohort-list-item + .cohort-list-item { margin-top: 7px; }
.cohort-list-item.is-selected { border-color: var(--accent); background: rgba(255,247,210,.58); }
.cohort-list-item img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; }
.cohort-list-item > div, .cohort-list-item > b { display: grid; }
.cohort-list-item small, .cohort-list-item span { color: var(--muted); font-size: 10px; }
.cohort-list-item > b { text-align: center; }
.cohort-detail { display: grid; gap: 12px; }
.cohort-hero { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); }
.cohort-hero img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.cohort-hero h2, .cohort-hero p { margin: 0; }
.cohort-hero p { color: var(--muted); font-size: 12px; }
.cohort-stats { display: grid; grid-template-columns: repeat(3,1fr); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); }
.cohort-stats span { display: grid; gap: 3px; padding: 15px; }
.cohort-stats span + span { border-left: 1px solid var(--border); }
.cohort-stats small { color: var(--muted); font-size: 10px; }
.cohort-stats strong { font-size: 13px; }
.cohort-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cohort-panels h3 { margin-top: 0; }
.cohort-panels .admin-actions { display: grid; }

/* Students */
.student-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(360px,.75fr); gap: 16px; align-items: start; }
.filter-bar { display: flex; gap: 9px; margin-bottom: 12px; }
.search-field { position: relative; flex: 1; }
.search-field span { position: absolute; top: 9px; left: 12px; font-size: 20px; }
.search-field input { padding-left: 38px; }
.filter-chip { display: flex; align-items: center; padding: 0 13px; border: 1px solid var(--border); border-radius: 11px; background: #fff; color: var(--muted); font-size: 11px; }
.student-table .table-head, .student-row { grid-template-columns: minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,.8fr) 75px 12px; }
.student-row>*{min-width:0;overflow-wrap:anywhere}.student-row .person-cell{min-width:0}.student-row .person-cell>span:last-child{min-width:0}.student-row .mini-avatar{flex-shrink:0}
.student-row { color: inherit; text-decoration: none; cursor: pointer; }
.student-row.is-selected { border: 1px solid var(--accent); border-radius: 12px; background: rgba(255,248,218,.48); }
.student-profile { padding: 20px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.profile-heading { display: flex; align-items: center; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.large-avatar { display: grid; width: 64px; height: 64px; flex: 0 0 64px; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#f2d883,#80644f); color: #fff; font-size: 23px; font-weight: 600; }
.profile-heading h2 { margin: 0; font-size: 22px; }
.online-status { color: var(--success); font-size: 11px; }
.student-profile section { padding: 15px 0; border-bottom: 1px solid var(--border); }
.student-profile h3 { margin: 0 0 12px; font-size: 15px; }
.student-profile p { font-size: 11px; }
.profile-course { display: flex; align-items: center; gap: 10px; }
.profile-course img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.profile-course span { display: grid; }
.profile-course strong { font-size: 11px; }
.profile-course small { color: var(--muted); font-size: 9px; }
.profile-actions { display: grid; gap: 7px; margin-top: 10px; }
.profile-actions form, .profile-actions button, .full-button { width: 100%; }
.danger-button { color: var(--danger); }
.lesson-access-section { display: grid; gap: 10px; }
.access-course { border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.58); }
.access-course > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; cursor: pointer; list-style: none; }
.access-course > summary::-webkit-details-marker { display: none; }
.access-course > summary::after { color: var(--muted); content: '⌄'; font-size: 15px; }
.access-course[open] > summary::after { transform: rotate(180deg); }
.access-course > summary > .tag { margin-left: auto; }
.profile-actions--course { grid-template-columns: 1fr; padding: 0 10px 10px; }
.lesson-access-list { display: grid; border-top: 1px solid var(--border); }
.lesson-access-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; }
.lesson-access-row + .lesson-access-row { border-top: 1px solid var(--border); }
.lesson-access-row > span { display: grid; min-width: 0; gap: 3px; }
.lesson-access-row > span small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-access-row > span strong { font-size: 10px; line-height: 1.3; }
.lesson-access-row > div { display: grid; justify-items: end; gap: 5px; }
.lesson-access-row form { margin: 0; }
.lesson-access-row .compact-button { min-height: 28px; padding: 5px 8px; font-size: 9px; }
.lesson-access-status { color: var(--muted); font-size: 8px; }
.lesson-access-status.is-open { color: var(--success); }

/* Access requests */
.request-table .table-head, .request-row { grid-template-columns: minmax(170px,1.3fr) minmax(170px,1.2fr) 120px 100px minmax(170px,1fr); }
.row-actions { display: flex; gap: 7px; }

/* Curator review */
.review-layout { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 14px; align-items: start; }
.review-list, .review-detail { padding: 18px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.review-list-item { display: grid; grid-template-columns: 40px minmax(0,1fr) 10px; align-items: center; gap: 10px; min-height: 62px; padding: 9px; border: 1px solid var(--border); border-radius: 12px; }
.review-list-item + .review-list-item { margin-top: 7px; }
.review-list-item.is-selected { border-color: var(--accent); background: rgba(255,248,218,.58); }
.review-list-item > div { display: grid; }
.review-list-item small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
.review-detail { display: grid; gap: 12px; }
.review-detail > header { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.review-detail > header h2, .review-detail > header p { margin: 0; }
.review-detail > header p, .review-detail > header small { color: var(--muted); font-size: 10px; }
.review-detail > header > span:last-child { display: grid; text-align: right; }
.review-detail > article { padding: 16px; border: 1px solid var(--border); border-radius: 14px; }
.review-detail > article h3, .review-detail > article p { margin: 0; }
.review-detail > article h3 { margin-bottom: 8px; font-size: 14px; }
.review-detail > article p { color: #665d57; font-size: 12px; }
.attachment-link { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.review-detail > form { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; }
.review-detail > form label { display: grid; gap: 7px; font-weight: 500; }
.review-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (min-width: 1450px) {
  :root { --sidebar: 225px; }
  main { padding-right: 54px; padding-left: 54px; }
}

@media (max-width: 1050px) {
  :root { --sidebar: 184px; }
  .site-header--authenticated { padding-inline: 12px; }
  .site-brand { font-size: 21px; }
  .side-nav a, .nav-logout { gap: 9px; padding-inline: 10px; font-size: 13px; }
  main { padding-inline: 24px; }
  .start-screen__content { width: 56%; }
  .start-screen::after { right: 2%; width: 43%; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .editor-card { grid-template-columns: 1fr; }
  .editor-hints { grid-template-columns: repeat(3,1fr); gap: 14px; }
  .split-layout, .student-layout { grid-template-columns: 1fr; }
  .student-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .profile-heading { grid-column: 1/-1; }
  .cohort-layout { grid-template-columns: 1fr; }
  .cohort-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
  .cohort-list .panel-heading { grid-column: 1/-1; }
}

@media (max-width: 767px) {
  body { padding: 0; background-attachment: scroll; }
  .site-header--authenticated {
    position: sticky;
    top: 0;
    display: block;
    width: auto;
    margin: 0;
    padding: 14px;
    overflow: hidden;
    border: 0;
    border-radius: 0 0 23px 23px;
    background: rgba(255,255,255,.84);
  }
  .site-header--authenticated .site-brand { font-size: 20px; }
  .side-nav { display: flex; margin-top: 13px; overflow-x: auto; scrollbar-width: none; }
  .side-nav a { width: auto; min-width: 44px; min-height: 44px; }
  .side-nav a span { display: none; }
  .side-nav a svg { width: 19px; }
  .side-nav--bottom { position: absolute; top: 7px; right: 8px; margin: 0; }
  .side-nav--bottom > a { display: none; }
  .nav-logout { width: 44px; min-height: 44px; padding: 8px; }
  .nav-logout span:last-child { display: none; }
  .workspace-topbar { display: none; }
  .public-header { top: 22px; right: 24px; left: 24px; }
  .public-header nav > a:not(.button) { display: none; }
  .public-header .button { min-height: 38px; padding: 9px 13px; }
  main, .public-header ~ main { min-height: 100dvh; margin-left: 0; padding: 34px 18px 28px; }
  .site-header--authenticated ~ main { padding-top: 34px; }
  .public-header ~ .start-screen { padding: 138px 20px 28px; align-items: start; }
  .start-screen__content, .start-screen__content:has(form) { width: 100%; }
  .start-screen::after { position: relative; right: auto; bottom: auto; display: block; width: 100%; margin-top: 30px; border-radius: 20px; }
  .start-screen h1 { font-size: clamp(40px, 12vw, 58px); }
  .start-screen__content:has(form) h1 { font-size: 40px; }
  .start-screen__benefits { margin: 24px 0; }
  .cabinet-page, .admin-page { padding-top: 30px; }
  .settings-page { padding-top: 30px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card__heading, .settings-form { padding: 20px; }
  h1, .page-intro h1 { font-size: 38px; }
  .course-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .program-module, .student-card, .lesson-material, .admin-form { padding: 18px; border-radius: 20px; }
  .admin-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-nav .button { width: 100%; font-size: 12px; }
  .dashboard-head { align-items: flex-start; flex-direction: column; }
  .dashboard-head > div, .dashboard-head > div > p { max-width: 100%; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 96px; }
  .data-row--course { grid-template-columns: 54px 1fr auto; }
  .data-row--course > * { min-width: 0; }
  .data-row--course h3 { overflow-wrap: anywhere; }
  .data-row--course .data-order { display: none; }
  .data-row--course .icon-action { grid-column: 3; }
  .editor-card { padding: 18px; }
  .editor-hints { display: none; }
  .input-prefix > span { display: none; }
  .input-prefix input { border-radius: 11px; }
  .course-summary { grid-template-columns: 72px 1fr; }
  .course-summary > img { width: 72px; height: 72px; }
  .course-summary > .button { grid-column: 1/-1; }
  .lesson-row > summary { grid-template-columns: 20px 34px 1fr auto; }
  .lesson-row > summary > span:nth-of-type(3), .lesson-row > summary > span:nth-of-type(4) { display: none; }
  .product-table .table-head, .orders-table .table-head, .student-table .table-head, .request-table .table-head { display: none; }
  .product-row, .order-row, .student-row, .request-row { grid-template-columns: 1fr auto; gap: 9px; padding: 14px 2px; }
  .product-row > *, .order-row > *, .student-row > *, .request-row > * { grid-column: 1; }
  .product-row > .tag, .order-row > .tag, .student-row > .tag, .request-row > .tag, .product-row > .row-menu { grid-column: 2; grid-row: 1; }
  .split-layout--team { grid-template-columns: 1fr; }
  .team-row { grid-template-columns: 40px 1fr 34px; }
  .team-row > span { display: none; }
  .cohort-list { display: block; }
  .cohort-panels, .cohort-stats { grid-template-columns: 1fr; }
  .cohort-stats span + span { border-top: 1px solid var(--border); border-left: 0; }
  .student-profile { display: block; }
  .filter-chip { display: none; }
  .review-layout { grid-template-columns: 1fr; }
  .review-list { max-height: 330px; overflow-y: auto; }
  .review-detail > header { grid-template-columns: 52px 1fr; }
  .review-detail > header .large-avatar { width: 52px; height: 52px; }
  .review-detail > header > span:last-child { grid-column: 2; text-align: left; }
  .review-actions { flex-direction: column; }
  .review-actions button { width: 100%; }
  .site-header--authenticated ~ main { max-width: 100%; overflow-x: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Public AI reels editing playbook */
.ai-playbook { min-height: 100dvh; padding: 132px clamp(18px, 4vw, 68px) 56px; background: #f7f4ec; color: #181715; }
.ai-playbook__content { width: min(100%, 980px); margin: 0 auto; }
.ai-playbook__hero, .ai-playbook__section { border: 1px solid #ded9cf; background: #fffef9; }
.ai-playbook__hero { padding: clamp(28px, 5vw, 56px); }
.ai-playbook__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #8a6500; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ai-playbook__eyebrow::before { width: 9px; height: 9px; border-radius: 50%; background: #f2c230; content: ''; }
.ai-playbook h1, .ai-playbook h2, .ai-playbook h3, .ai-playbook p { margin-top: 0; }
.ai-playbook h1 { max-width: 770px; margin-bottom: 18px; font-size: clamp(42px, 7vw, 82px); line-height: .94; letter-spacing: -.065em; }
.ai-playbook__lead { max-width: 640px; margin-bottom: 0; color: #5d5a53; font-size: clamp(18px, 2vw, 23px); line-height: 1.45; }
.ai-playbook__mobile-nav { display: flex; gap: 8px; margin: 22px 0 34px; padding: 4px 0 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ai-playbook__mobile-nav::-webkit-scrollbar { display: none; }
.ai-playbook__mobile-nav a { flex: 0 0 auto; border: 1px solid #d9d1c3; border-radius: 999px; padding: 9px 13px; color: #34312c; background: #fffef9; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; }
.ai-playbook__mobile-nav a:hover { border-color: #efc233; background: #fff7ce; }
.ai-playbook__section { margin-top: 18px; padding: clamp(24px, 4vw, 44px); }
.ai-playbook__heading { max-width: 720px; margin-bottom: 30px; }
.ai-playbook__heading .page-intro__eyebrow { margin-bottom: 10px; color: #9a7400; }
.ai-playbook h2 { margin-bottom: 10px; font-size: clamp(29px, 4vw, 48px); line-height: 1; letter-spacing: -.05em; }
.ai-playbook h3 { margin-bottom: 8px; font-size: 17px; line-height: 1.2; }
.ai-playbook__heading > p:last-child, .ai-playbook__card p, .ai-playbook__motion-card p, .ai-playbook__visual-flow p, .ai-playbook__asset-guide p, .ai-playbook__prompt-list div { margin-bottom: 0; color: #69645b; line-height: 1.55; }
.ai-playbook__brief-grid, .ai-playbook__editing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.ai-playbook__brief-grid > div, .ai-playbook__card, .ai-playbook__prompt-list > div, .ai-playbook__editing-grid section { border: 1px solid #e4ded3; background: #fcfaf4; }
.ai-playbook__brief-grid > div { min-height: 122px; padding: 18px; }
.ai-playbook__brief-grid strong { display: block; margin-bottom: 7px; font-size: 14px; }
.ai-playbook__brief-grid span { color: #6b665c; font-size: 14px; line-height: 1.4; }
.ai-playbook__tip, .ai-callout { border-left: 4px solid #efc233; padding: 13px 0 13px 17px; color: #4e493f; font-weight: 650; line-height: 1.5; }
.ai-playbook__two-col, .ai-playbook__techniques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ai-playbook__two-col > div, .ai-playbook__techniques > section { border: 1px solid #e4ded3; padding: 22px; background: #fcfaf4; }
.ai-playbook__rule-list ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ai-playbook__rule-list li { position: relative; padding-left: 17px; color: #555047; line-height: 1.45; }
.ai-playbook__rule-list li::before { position: absolute; top: .55em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #efc233; content: ''; }
.ai-playbook__techniques dl { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.ai-playbook__techniques dt { font-size: 13px; font-weight: 800; }
.ai-playbook__techniques dd { margin: 0; color: #666057; font-size: 14px; line-height: 1.42; }
.ai-playbook__motion-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.ai-playbook__motion-card { min-height: 205px; border: 1px solid #e4ded3; padding: 18px; background: linear-gradient(135deg, #fffdf6, #f6f0e4); }
.ai-playbook__motion-card > span { display: block; margin-bottom: 27px; color: #9b7500; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ai-playbook__motion-card code { display: inline-block; margin-top: 14px; color: #75600e; font-size: 12px; }
.ai-playbook__visual-flow, .ai-playbook__asset-guide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 18px; background: #e0d8cb; }
.ai-playbook__visual-flow > div, .ai-playbook__asset-guide > div { padding: 18px; background: #fffef9; }
.ai-playbook__visual-flow strong { display: block; margin-bottom: 26px; color: #b18700; font-size: 12px; letter-spacing: .1em; }
.ai-playbook__reference { margin-bottom: 18px; border: 1px solid #ead37d; padding: 20px; background: #fff8d8; }
.ai-playbook__reference strong { display: block; margin-bottom: 7px; }
.ai-playbook__reference p { max-width: 780px; margin-bottom: 0; color: #655b39; line-height: 1.55; }
.ai-playbook__asset-guide { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.ai-sfx-table { display: grid; grid-template-columns: 120px minmax(130px, .8fr) minmax(0, 1.6fr); margin-bottom: 18px; border: 1px solid #e0d8cb; background: #e0d8cb; font-size: 14px; }
.ai-sfx-table > div { display: contents; }
.ai-sfx-table span, .ai-sfx-table strong { padding: 13px 15px; background: #fffef9; line-height: 1.4; }
.ai-sfx-table strong { font-size: 14px; }
.ai-playbook__editing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-playbook__editing-grid section { min-height: 142px; padding: 19px; }
.ai-playbook__editing-grid span { display: block; margin-bottom: 22px; color: #b18700; font-size: 12px; font-weight: 800; }
.ai-playbook__editing-grid p { margin-bottom: 0; color: #69645b; line-height: 1.5; }
.ai-playbook__prompt-list { display: grid; gap: 10px; }
.ai-playbook__prompt-list > div { padding: 19px 20px; }
.ai-playbook__prompt-list p { margin-bottom: 7px; color: #8a6500; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-playbook__prompt-list code { color: #39342d; font: inherit; line-height: 1.5; }
.ai-playbook .ai-command { margin-top: 18px; }
.ai-playbook__live-demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.ai-playbook__demo { position: relative; min-height: 170px; overflow: hidden; border: 1px solid #e5ddce; padding: 16px; background: #f2eee5; }
.ai-playbook__demo small { position: relative; z-index: 2; color: #837b6e; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-playbook__demo--plate { display: flex; align-items: end; background: linear-gradient(150deg, #ddd6c9 0%, #f7f3e9 60%); }
.ai-playbook__demo--plate > div { width: 100%; padding: 13px; border: 1px solid rgba(255,255,255,.72); border-radius: 17px; background: rgba(47,40,31,.86); box-shadow: 0 12px 24px rgba(54,44,23,.18); color: #fffdf6; transform: translateY(54px); opacity: 0; animation: ai-plate-in 4.8s cubic-bezier(.16,1,.3,1) infinite; }
.ai-playbook__demo--plate b, .ai-playbook__demo--plate span { display: block; }
.ai-playbook__demo--plate b { font-size: 17px; }
.ai-playbook__demo--plate span { margin-top: 3px; color: #e3dccf; font-size: 11px; }
.ai-playbook__demo--card { display: grid; place-items: center; background: radial-gradient(circle at 65% 25%, #fff7c5, transparent 38%), #ece7da; }
.ai-playbook__demo--card > div { width: 140px; border: 1px solid rgba(255,255,255,.72); border-radius: 19px; padding: 20px; background: rgba(255,254,249,.93); box-shadow: 0 14px 30px rgba(63,50,20,.17); animation: ai-card-in 4.8s cubic-bezier(.16,1,.3,1) .7s infinite; }
.ai-playbook__demo--card span { display: block; color: #756b5d; font-size: 11px; }
.ai-playbook__demo--card b { display: block; margin-top: 7px; font-size: 28px; letter-spacing: -.06em; }
.ai-playbook__demo--chart { background: linear-gradient(180deg, #f9f7f0, #ece6d7); }
.ai-playbook__demo--chart svg { position: absolute; right: 14px; bottom: 20px; left: 14px; width: calc(100% - 28px); overflow: visible; }
.ai-playbook__demo--chart path { stroke: #d2a900; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ai-chart-in 4.8s ease-in-out 1.25s infinite; }
.ai-playbook__demo--chart circle { fill: #f3c230; opacity: 0; animation: ai-dot-in 4.8s ease-out 2.3s infinite; }
@keyframes ai-plate-in { 0%, 10% { transform: translateY(54px); opacity: 0; } 22%, 72% { transform: translateY(0); opacity: 1; } 84%, 100% { transform: translateY(18px); opacity: 0; } }
@keyframes ai-card-in { 0%, 12% { transform: scale(.84); filter: blur(8px); opacity: 0; } 25%, 72% { transform: scale(1); filter: blur(0); opacity: 1; } 84%, 100% { transform: scale(.96); opacity: 0; } }
@keyframes ai-chart-in { 0%, 24% { stroke-dashoffset: 1; } 48%, 72% { stroke-dashoffset: 0; } 84%, 100% { stroke-dashoffset: 1; } }
@keyframes ai-dot-in { 0%, 45% { opacity: 0; transform: scale(.4); } 50%, 72% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; } }

@media (max-width: 650px) {
  .ai-playbook { padding: 102px 14px 30px; }
  .ai-playbook__hero, .ai-playbook__section { padding: 24px 18px; }
  .ai-playbook h1 { font-size: clamp(40px, 13vw, 56px); }
  .ai-playbook__mobile-nav { margin: 12px -14px 20px; padding: 4px 14px 12px; }
  .ai-playbook__brief-grid, .ai-playbook__editing-grid, .ai-playbook__two-col, .ai-playbook__techniques, .ai-playbook__motion-showcase, .ai-playbook__visual-flow, .ai-playbook__asset-guide, .ai-playbook__live-demos { grid-template-columns: 1fr; }
  .ai-playbook__brief-grid > div, .ai-playbook__motion-card, .ai-playbook__editing-grid section { min-height: 0; }
  .ai-playbook__motion-card > span, .ai-playbook__editing-grid span, .ai-playbook__visual-flow strong { margin-bottom: 14px; }
  .ai-playbook__techniques dl { grid-template-columns: 105px minmax(0, 1fr); }
  .ai-sfx-table { grid-template-columns: 1fr; gap: 1px; }
  .ai-sfx-table > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1px; background: #e0d8cb; }
  .ai-sfx-table span:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-playbook__demo *, .ai-playbook__demo { animation: none !important; }
  .ai-playbook__demo--plate > div, .ai-playbook__demo--card > div { opacity: 1; transform: none; filter: none; }
  .ai-playbook__demo--chart path { stroke-dashoffset: 0; }
  .ai-playbook__demo--chart circle { opacity: 1; }
}

/* HyperFrames motion catalogue */
.ai-motion-page, .ai-visuals-page { min-height: 100dvh; padding: 132px clamp(18px, 4vw, 68px) 56px; background: #f7f4ec; color: #201d18; }
.ai-motion-page__content, .ai-visuals-page__content { width: min(100%, 1040px); margin: 0 auto; }
.ai-motion-hero, .ai-visuals-hero { padding: clamp(28px, 5vw, 60px); border: 1px solid #ded8cd; background: #fffef9; }
.ai-motion-hero h1, .ai-visuals-hero h1 { max-width: 800px; margin: 10px 0 18px; font-size: clamp(46px, 8vw, 90px); line-height: .9; letter-spacing: -.075em; }
.ai-motion-hero > p:not(.page-intro__eyebrow), .ai-visuals-hero > p:not(.page-intro__eyebrow) { max-width: 660px; margin: 0; color: #625d54; font-size: clamp(18px, 2vw, 23px); line-height: 1.45; }
.ai-learning-links { display: flex; gap: 8px; margin-top: 30px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ai-learning-links::-webkit-scrollbar { display: none; }
.ai-learning-links a { flex: 0 0 auto; border: 1px solid #ddd5c7; border-radius: 999px; padding: 9px 13px; color: #494239; background: #fffef9; font-size: 13px; font-weight: 800; text-decoration: none; }
.ai-learning-links a.is-current { border-color: #e3b916; color: #261e08; background: #ffdd50; }
.ai-motion-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0; background: #dfd8cb; }
.ai-motion-intro > div { padding: 22px; background: #fffef9; }
.ai-motion-intro strong { display: block; margin-bottom: 8px; color: #8a6700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.ai-motion-intro p { margin: 0; color: #615b51; line-height: 1.52; }
.ai-motion-gallery { display: grid; gap: 14px; }
.ai-motion-example { display: grid; grid-template-columns: minmax(330px, .92fr) minmax(0, 1.08fr); min-height: 310px; border: 1px solid #ded8cd; background: #fffef9; }
.ai-motion-stage { position: relative; display: flex; min-height: 308px; overflow: hidden; align-items: center; justify-content: center; padding: 28px; background: linear-gradient(150deg, #e4ded3, #fbf8ef 65%); }
.ai-motion-stage__label { position: absolute; top: 18px; left: 18px; z-index: 3; color: #756e62; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ai-motion-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 46px); }
.ai-motion-copy > p { margin: 0 0 11px; color: #987500; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ai-motion-copy h2 { margin: 0 0 12px; font-size: clamp(27px, 3vw, 39px); line-height: .98; letter-spacing: -.05em; }
.ai-motion-copy > div, .ai-motion-copy > p + h2 + p { margin: 0; color: #686158; line-height: 1.52; }
.ai-motion-copy code { margin-top: 17px; color: #765e05; font-size: 12px; }
.ai-lower-third { align-self: end; width: 100%; border: 1px solid rgba(255,255,255,.65); border-radius: 22px; padding: 18px; background: rgba(35,31,24,.89); box-shadow: 0 18px 28px rgba(44,32,17,.22); color: #fffdf8; transform: translateY(115px); opacity: 0; animation: ai-lower 5.4s cubic-bezier(.16,1,.3,1) infinite; }
.ai-lower-third b, .ai-lower-third span { display: block; }.ai-lower-third b { font-size: 23px; }.ai-lower-third span { margin-top: 3px; color: #dcd4c6; font-size: 13px; }
.ai-top-card { width: 190px; border: 1px solid rgba(255,255,255,.8); border-radius: 27px; padding: 22px; background: rgba(255,254,248,.86); box-shadow: 0 22px 35px rgba(52,42,21,.2); transform: translateY(-100px) scale(.9); filter: blur(9px); opacity: 0; animation: ai-topcard 5.4s cubic-bezier(.16,1,.3,1) .4s infinite; }.ai-top-card span { color: #746d61; font-size: 12px; }.ai-top-card b { display:block; margin-top: 8px; font-size: 42px; letter-spacing: -.08em; }.ai-top-card i { display:block; width: 76px; height: 7px; margin-top: 16px; border-radius:9px; background:#f4c533; }
.ai-side-pill { width: 230px; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; padding: 15px 17px; background: rgba(255,254,248,.88); box-shadow: 0 16px 30px rgba(52,42,21,.16); transform: translateX(-310px); opacity:0; animation: ai-sidepill 5.4s cubic-bezier(.18,.9,.27,1.23) .8s infinite; }.ai-side-pill i { display:inline-block;width:10px;height:10px;border-radius:50%;background:#f5c534; }.ai-side-pill b { margin-left:8px;font-size:13px; }.ai-side-pill span {display:block;margin-top:8px;color:#625c52;font-size:15px;}
.ai-motion-example--dim .ai-motion-stage { background: linear-gradient(145deg,#fee26a,#f5f1e6 48%,#cdc2b0); }.ai-dim-copy { position:relative;z-index:2;width:240px;color:#fffefa; }.ai-dim-copy b {display:block;font-size:30px;line-height:.94;letter-spacing:-.05em;}.ai-dim-copy span {display:block;margin-top:12px;line-height:1.35;}.ai-dim-veil {position:absolute;inset:0;background:#1e1a14;opacity:0;animation:ai-dim 5.4s ease-in-out 1.2s infinite;}
.ai-chart-card { width: 270px; border:1px solid rgba(255,255,255,.8);border-radius:25px;padding:20px;background:rgba(255,254,249,.82);box-shadow:0 18px 36px rgba(50,42,20,.16); }.ai-chart-card span{color:#70695d;font-size:12px}.ai-chart-card b{display:block;margin:5px 0 8px;font-size:34px;letter-spacing:-.07em}.ai-chart-card svg{width:100%;overflow:visible}.ai-chart-card path{fill:none;stroke:#e4b603;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ai-chartdraw 5.4s ease-in-out 1.6s infinite}.ai-chart-card circle{fill:#f5c534;opacity:0;animation:ai-chartdot 5.4s ease-out 2.8s infinite}
.ai-sticker {position:absolute;z-index:2;display:grid;place-items:center;width:76px;height:76px;border-radius:27px;background:#f5c534;box-shadow:0 16px 22px rgba(72,53,8,.23);font-size:42px;font-weight:900;transform:translate(190px,-110px) rotate(14deg);opacity:0;animation:ai-sticker 5.4s cubic-bezier(.18,.9,.27,1.2) 1.4s infinite}.ai-sticker-copy {width:205px;padding:18px;border-radius:19px;background:#28231a;color:#fffdf6}.ai-sticker-copy b,.ai-sticker-copy span{display:block}.ai-sticker-copy b{font-size:24px}.ai-sticker-copy span{margin-top:5px;color:#e0d7c8;font-size:13px;line-height:1.3}
.ai-motion-example--mask .ai-motion-stage{gap:0;padding:0}.ai-mask-one,.ai-mask-two{display:grid;place-items:center;width:50%;height:100%;font-size:27px}.ai-mask-one{background:#302a20;color:#fffef9}.ai-mask-two{background:#f3c331}.ai-mask-wipe{position:absolute;inset:-20% auto -20% -45%;width:50%;background:#fffdf7;transform:skewX(-20deg) translateX(-120%);animation:ai-maskwipe 5.4s cubic-bezier(.7,0,.3,1) 1.7s infinite}.ai-caption-demo{display:grid;gap:5px;text-align:center;font-size:26px;line-height:.98}.ai-caption-demo span{opacity:0;animation:ai-captionfade 5.4s ease .8s infinite}.ai-caption-demo b{color:#d6a900;font-size:38px;letter-spacing:-.07em;opacity:0;animation:ai-captionfade 5.4s ease 1.05s infinite}
.ai-motion-catalog { margin-top:18px; padding:clamp(24px,4vw,46px); border:1px solid #ded8cd; background:#fffef9; }.ai-motion-catalog__heading{max-width:670px;margin-bottom:25px}.ai-motion-catalog__heading h2,.ai-motion-prompt h2{margin:9px 0 10px;font-size:clamp(31px,4vw,49px);line-height:.98;letter-spacing:-.055em}.ai-motion-catalog__heading p:last-child{margin:0;color:#665f55;line-height:1.5}.ai-motion-catalog__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ai-motion-tile{min-width:0;border:1px solid #e1dbcf;padding:12px;background:#fcfaf4}.ai-motion-tile__visual{position:relative;height:158px;overflow:hidden;margin-bottom:14px;border-radius:12px;background:linear-gradient(145deg,#e7e1d6,#f8f5ec)}.ai-motion-tile p{margin:0 0 7px;color:#997700;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ai-motion-tile h3{margin:0 0 8px;font-size:17px;line-height:1.04;letter-spacing:-.035em}.ai-motion-tile>div:not(.ai-motion-tile__visual){min-height:70px;color:#70695e;font-size:12px;line-height:1.4}.ai-motion-tile code{display:block;margin-top:10px;color:#76600b;font-size:10px;line-height:1.3;overflow-wrap:anywhere}
.ai-motion-tile__visual--glass{background:radial-gradient(circle at 35% 20%,#f8d95f,transparent 32%),linear-gradient(140deg,#78868a,#e0dad0)}.ai-motion-tile__visual--glass i{position:absolute;inset:30px 20px;border:1px solid rgba(255,255,255,.75);border-radius:19px;background:rgba(255,255,255,.32);box-shadow:0 14px 25px rgba(30,39,36,.21);backdrop-filter:blur(10px);transform:scale(.85);opacity:0;animation:ai-glass 5s ease .2s infinite}.ai-motion-tile__visual--glass b,.ai-motion-tile__visual--glass em{position:absolute;left:37px;right:52px;height:7px;border-radius:8px;background:#fffdf8;opacity:0;animation:ai-glasslines 5s ease .55s infinite}.ai-motion-tile__visual--glass b{top:59px}.ai-motion-tile__visual--glass em{top:78px;width:55%}
.ai-motion-tile__visual--sheet{background:linear-gradient(145deg,#5f625b,#d4cfc0)}.ai-motion-tile__visual--sheet i{position:absolute;right:0;bottom:-100%;left:0;height:70%;border-radius:22px 22px 0 0;background:rgba(255,254,249,.93);box-shadow:0 -8px 24px rgba(20,20,18,.14);animation:ai-sheet 5s cubic-bezier(.16,1,.3,1) .3s infinite}.ai-motion-tile__visual--sheet b,.ai-motion-tile__visual--sheet em{position:absolute;z-index:2;left:28px;height:7px;border-radius:8px;background:#2b271f;opacity:0;animation:ai-sheetline 5s ease .8s infinite}.ai-motion-tile__visual--sheet b{bottom:55px;width:85px}.ai-motion-tile__visual--sheet em{bottom:37px;width:118px}
.ai-motion-tile__visual--terminal{background:#24251f}.ai-motion-tile__visual--terminal i{position:absolute;top:30px;left:22px;width:11px;height:11px;border-radius:50%;background:#f4c432;box-shadow:18px 0 #ece8db,36px 0 #77786d}.ai-motion-tile__visual--terminal b,.ai-motion-tile__visual--terminal em,.ai-motion-tile__visual--terminal span{position:absolute;left:22px;height:6px;border-radius:7px;background:#b9e974;transform-origin:left;transform:scaleX(0);animation:ai-type 5s steps(6,end) .65s infinite}.ai-motion-tile__visual--terminal b{top:62px;width:96px}.ai-motion-tile__visual--terminal em{top:83px;width:122px;animation-delay:1.15s}.ai-motion-tile__visual--terminal span{top:106px;width:61px;background:#f4c432;animation-delay:1.65s}
.ai-motion-tile__visual--checklist{background:#fffcf4}.ai-motion-tile__visual--checklist i,.ai-motion-tile__visual--checklist b,.ai-motion-tile__visual--checklist em{position:absolute;left:27px;width:112px;height:20px;border-bottom:1px solid #ded7c8;opacity:0;animation:ai-list 5s ease .4s infinite}.ai-motion-tile__visual--checklist i{top:36px}.ai-motion-tile__visual--checklist b{top:67px;animation-delay:.82s}.ai-motion-tile__visual--checklist em{top:98px;animation-delay:1.24s}.ai-motion-tile__visual--checklist i::before,.ai-motion-tile__visual--checklist b::before,.ai-motion-tile__visual--checklist em::before{display:inline-grid;place-items:center;width:13px;height:13px;margin-right:9px;border-radius:50%;background:#f3c432;color:#201d16;content:'✓';font-size:10px;font-style:normal}
.ai-motion-tile__visual--counter{display:grid;place-items:center;background:radial-gradient(circle,#fff3a7,#e3dac9)}.ai-motion-tile__visual--counter i{width:125px;height:85px;border:1px solid #fff; border-radius:18px;background:rgba(255,254,249,.72);box-shadow:0 14px 25px rgba(70,57,24,.13)}.ai-motion-tile__visual--counter b{position:absolute;color:#30291d;font-size:43px;letter-spacing:-.09em;animation:ai-number 5s cubic-bezier(.16,1,.3,1) .5s infinite}.ai-motion-tile__visual--counter em{position:absolute;bottom:29px;color:#81765c;font-size:10px;font-style:normal}
.ai-motion-tile__visual--notification{background:linear-gradient(135deg,#eef0e7,#d5cdbd)}.ai-motion-tile__visual--notification i,.ai-motion-tile__visual--notification b,.ai-motion-tile__visual--notification em{position:absolute;left:26px;width:125px;height:37px;border:1px solid rgba(255,255,255,.75);border-radius:12px;background:rgba(255,254,249,.88);box-shadow:0 8px 14px rgba(61,52,35,.14)}.ai-motion-tile__visual--notification i{top:76px;opacity:.5;transform:scale(.9)}.ai-motion-tile__visual--notification b{top:58px;opacity:.7;transform:scale(.95)}.ai-motion-tile__visual--notification em{top:39px;opacity:0;transform:translateY(-36px);animation:ai-notify 5s cubic-bezier(.16,1,.3,1) .7s infinite}.ai-motion-tile__visual--notification em::after{display:block;margin:12px 14px;width:61px;height:6px;border-radius:7px;background:#f3c432;content:''}
.ai-motion-tile__visual--dock{background:linear-gradient(145deg,#7d7771,#e6dfd1)}.ai-motion-tile__visual--dock i{position:absolute;right:15px;bottom:17px;left:15px;height:45px;border:1px solid rgba(255,255,255,.65);border-radius:16px;background:rgba(255,255,255,.36);backdrop-filter:blur(8px);transform:translateY(70px);animation:ai-dock 5s cubic-bezier(.16,1,.3,1) .45s infinite}.ai-motion-tile__visual--dock b,.ai-motion-tile__visual--dock em,.ai-motion-tile__visual--dock span{position:absolute;bottom:29px;width:19px;height:19px;border-radius:7px;background:#fffdf8;opacity:0;animation:ai-dockicon 5s ease .9s infinite}.ai-motion-tile__visual--dock b{left:45px}.ai-motion-tile__visual--dock em{left:76px;animation-delay:1.08s}.ai-motion-tile__visual--dock span{left:107px;background:#f3c432;animation-delay:1.26s}
.ai-motion-tile__visual--cursor{background:#faf7ee}.ai-motion-tile__visual--cursor i{position:absolute;top:37px;left:31px;width:115px;height:48px;border:1px solid #dbd2c3;border-radius:12px;background:#fffef9}.ai-motion-tile__visual--cursor b{position:absolute;top:53px;left:45px;width:47px;height:6px;border-radius:7px;background:#6f6659}.ai-motion-tile__visual--cursor em{position:absolute;top:77px;left:110px;width:16px;height:22px;border:2px solid #2b2720;border-radius:10px 10px 10px 0;background:#fffef9;transform:translate(44px,48px);animation:ai-cursor 5s cubic-bezier(.16,1,.3,1) .5s infinite}.ai-motion-tile__visual--cursor span{position:absolute;top:38px;left:31px;width:115px;height:48px;border:2px solid #f3c432;border-radius:12px;opacity:0;animation:ai-click 5s ease 1.55s infinite}
.ai-motion-tile__visual--split{background:linear-gradient(90deg,#312b21 50%,#f3c432 50%)}.ai-motion-tile__visual--split i{position:absolute;top:0;bottom:0;left:40%;width:5px;background:#fffdf7;box-shadow:0 0 0 5px rgba(255,253,247,.23);animation:ai-split 5s cubic-bezier(.7,0,.3,1) .5s infinite}.ai-motion-tile__visual--split b,.ai-motion-tile__visual--split em{position:absolute;top:68px;color:#fffdf7;font-size:15px}.ai-motion-tile__visual--split b{left:27px}.ai-motion-tile__visual--split em{right:22px;color:#2e2717;font-style:normal}
.ai-motion-tile__visual--quote{background:linear-gradient(145deg,#f9f0cc,#ece4d6)}.ai-motion-tile__visual--quote i{position:absolute;top:20px;left:27px;color:#e0ae00;font-size:72px;line-height:1;content:'“'}.ai-motion-tile__visual--quote i::after{content:'“';font-style:normal}.ai-motion-tile__visual--quote b,.ai-motion-tile__visual--quote em{position:absolute;left:39px;border-radius:8px;background:#443b2d;opacity:0;transform:translateY(20px);animation:ai-quote 5s ease .85s infinite}.ai-motion-tile__visual--quote b{top:85px;width:95px;height:8px}.ai-motion-tile__visual--quote em{top:102px;width:72px;height:7px;animation-delay:1.1s}
.ai-motion-tile__visual--timeline{background:#faf7ef}.ai-motion-tile__visual--timeline i{position:absolute;top:77px;right:20px;left:20px;height:3px;background:#d9d1c3;transform-origin:left;transform:scaleX(0);animation:ai-line 5s ease .5s infinite}.ai-motion-tile__visual--timeline b,.ai-motion-tile__visual--timeline em,.ai-motion-tile__visual--timeline span{position:absolute;top:70px;width:16px;height:16px;border-radius:50%;background:#f3c432;opacity:0;animation:ai-node 5s ease 1.2s infinite}.ai-motion-tile__visual--timeline b{left:34px}.ai-motion-tile__visual--timeline em{left:83px;animation-delay:1.55s}.ai-motion-tile__visual--timeline span{right:30px;animation-delay:1.9s}
.ai-motion-tile__visual--search{background:#f7f4eb}.ai-motion-tile__visual--search i{position:absolute;top:34px;left:22px;width:136px;height:34px;border:1px solid #d9d0c1;border-radius:18px;background:#fffef9}.ai-motion-tile__visual--search b{position:absolute;top:48px;left:38px;width:0;height:6px;border-radius:7px;background:#4d4538;animation:ai-searchtype 5s steps(5,end) .55s infinite}.ai-motion-tile__visual--search em{position:absolute;top:86px;left:29px;width:122px;height:31px;border-radius:9px;background:#f4c533;opacity:0;animation:ai-result 5s ease 1.5s infinite}
.ai-motion-tile__visual--orbit{background:radial-gradient(circle,#fffdf6 0 24%,#e2dacc 25%)}.ai-motion-tile__visual--orbit i,.ai-motion-tile__visual--orbit b,.ai-motion-tile__visual--orbit em,.ai-motion-tile__visual--orbit span{position:absolute;top:65px;left:81px;width:25px;height:25px;border-radius:9px;background:#f4c533;animation:ai-orbit 5s cubic-bezier(.16,1,.3,1) .6s infinite}.ai-motion-tile__visual--orbit b{background:#393126;animation-delay:.8s}.ai-motion-tile__visual--orbit em{background:#fffef9;animation-delay:1s}.ai-motion-tile__visual--orbit span{background:#a2b9ad;animation-delay:1.2s}
.ai-motion-tile__visual--tabs{background:#f7f3ea}.ai-motion-tile__visual--tabs i{position:absolute;top:59px;left:24px;width:137px;height:39px;border-radius:20px;background:#e2dbce}.ai-motion-tile__visual--tabs b{position:absolute;top:62px;left:27px;width:43px;height:33px;border-radius:17px;background:#fffef9;box-shadow:0 3px 7px rgba(49,41,28,.13);animation:ai-tabs 5s cubic-bezier(.16,1,.3,1) .55s infinite}.ai-motion-tile__visual--tabs em,.ai-motion-tile__visual--tabs span{position:absolute;top:76px;width:7px;height:5px;border-radius:7px;background:#746b5d}.ai-motion-tile__visual--tabs em{left:45px}.ai-motion-tile__visual--tabs span{left:112px}
.ai-motion-tile__visual--gradient{background:radial-gradient(circle at 30% 70%,#f6c42e,transparent 9%),radial-gradient(circle at 70% 28%,#fff1a1,transparent 14%),#e9e2d5}.ai-motion-tile__visual--gradient i{position:absolute;inset:36px 28px;border-radius:18px;background:#fffef9;box-shadow:0 15px 29px rgba(55,44,17,.13)}.ai-motion-tile__visual--gradient b{position:absolute;top:65px;left:49px;width:79px;height:9px;border-radius:8px;background:#393126}.ai-motion-tile__visual--gradient em{position:absolute;top:84px;left:49px;width:52px;height:6px;border-radius:8px;background:#827868}.ai-motion-tile__visual--gradient span{position:absolute;inset:-20px;background:radial-gradient(circle,#fff0a4,transparent 30%);opacity:0;animation:ai-glow 5s ease .5s infinite}
.ai-motion-tile__visual--reveal{background:#e7dfd1}.ai-motion-tile__visual--reveal i{position:absolute;inset:29px 24px;border-radius:16px;background:#322b20;box-shadow:0 16px 24px rgba(43,35,20,.18)}.ai-motion-tile__visual--reveal b{position:absolute;top:64px;left:43px;width:90px;height:9px;border-radius:8px;background:#fffdf7}.ai-motion-tile__visual--reveal em{position:absolute;top:84px;left:43px;width:54px;height:6px;border-radius:8px;background:#f3c432}.ai-motion-tile__visual--reveal span{position:absolute;inset:-20px;background:#fffdf7;transform:translateX(-125%) skewX(-20deg);animation:ai-reveal 5s cubic-bezier(.7,0,.3,1) .6s infinite}
.ai-motion-prompt{margin-top:18px;padding:clamp(26px,4vw,48px);border:1px solid #d8b326;background:#fff4be}.ai-motion-prompt>p{margin:0;color:#886600;font-weight:800}.ai-motion-prompt .ai-command{margin-top:20px}
@keyframes ai-lower{0%,10%{transform:translateY(115px);opacity:0}23%,72%{transform:translateY(0);opacity:1}85%,100%{transform:translateY(36px);opacity:0}}@keyframes ai-topcard{0%,12%{transform:translateY(-100px) scale(.9);filter:blur(9px);opacity:0}26%,72%{transform:translateY(0) scale(1);filter:blur(0);opacity:1}86%,100%{opacity:0}}@keyframes ai-sidepill{0%,13%{transform:translateX(-310px);opacity:0}26%,72%{transform:translateX(0);opacity:1}86%,100%{opacity:0}}@keyframes ai-dim{0%,18%{opacity:0}30%,70%{opacity:.7}84%,100%{opacity:0}}@keyframes ai-chartdraw{0%,26%{stroke-dashoffset:1}49%,70%{stroke-dashoffset:0}84%,100%{stroke-dashoffset:1}}@keyframes ai-chartdot{0%,47%{opacity:0;transform:scale(.4)}52%,70%{opacity:1;transform:scale(1)}84%,100%{opacity:0}}@keyframes ai-sticker{0%,23%{transform:translate(190px,-110px) rotate(14deg);opacity:0}35%,72%{transform:translate(0,0) rotate(0);opacity:1}84%,100%{opacity:0}}@keyframes ai-maskwipe{0%,23%{transform:skewX(-20deg) translateX(-120%)}45%,70%{transform:skewX(-20deg) translateX(400%)}100%{transform:skewX(-20deg) translateX(400%)}}@keyframes ai-captionfade{0%,15%{opacity:0;transform:translateY(15px)}28%,72%{opacity:1;transform:translateY(0)}84%,100%{opacity:0}}
@keyframes ai-glass{0%,10%{transform:scale(.85);opacity:0}24%,72%{transform:scale(1);opacity:1}84%,100%{opacity:0}}@keyframes ai-glasslines{0%,18%{opacity:0;transform:translateY(8px)}28%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@keyframes ai-sheet{0%,14%{bottom:-100%}28%,72%{bottom:0}84%,100%{bottom:-60%}}@keyframes ai-sheetline{0%,22%{opacity:0;transform:translateY(7px)}30%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@keyframes ai-type{0%,20%{transform:scaleX(0)}35%,70%{transform:scaleX(1)}84%,100%{transform:scaleX(0)}}@keyframes ai-list{0%,17%{opacity:0;transform:translateX(-15px)}28%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@keyframes ai-number{0%,18%{transform:scale(.7);opacity:0}33%,72%{transform:scale(1);opacity:1}84%,100%{opacity:0}}@keyframes ai-notify{0%,15%{opacity:0;transform:translateY(-36px)}29%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@keyframes ai-dock{0%,14%{transform:translateY(70px)}28%,72%{transform:none}84%,100%{transform:translateY(35px)}}@keyframes ai-dockicon{0%,24%{opacity:0;transform:scale(.5)}32%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@keyframes ai-cursor{0%,18%{transform:translate(44px,48px);opacity:0}30%,72%{transform:none;opacity:1}84%,100%{opacity:0}}@keyframes ai-click{0%,29%{opacity:0;transform:scale(1)}33%,40%{opacity:1;transform:scale(.94)}45%,72%{opacity:0;transform:scale(1)}}@keyframes ai-split{0%,17%{left:40%;opacity:0}28%,72%{left:60%;opacity:1}84%,100%{opacity:0}}@keyframes ai-quote{0%,22%{opacity:0;transform:translateY(20px)}34%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@keyframes ai-line{0%,18%{transform:scaleX(0)}35%,72%{transform:scaleX(1)}84%,100%{transform:scaleX(0)}}@keyframes ai-node{0%,27%{opacity:0;transform:scale(.4)}35%,72%{opacity:1;transform:scale(1)}84%,100%{opacity:0}}@keyframes ai-searchtype{0%,20%{width:0}35%,72%{width:76px}84%,100%{width:0}}@keyframes ai-result{0%,31%{opacity:0;transform:translateY(7px)}40%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@keyframes ai-orbit{0%,22%{transform:translate(var(--x,0),var(--y,0)) scale(.5);opacity:0}38%,72%{transform:translate(0,0) scale(1);opacity:1}84%,100%{opacity:0}}@keyframes ai-tabs{0%,21%{left:27px}36%,72%{left:108px}84%,100%{left:27px}}@keyframes ai-glow{0%,18%{opacity:0;transform:scale(.7)}35%,72%{opacity:.8;transform:scale(1)}84%,100%{opacity:0}}@keyframes ai-reveal{0%,20%{transform:translateX(-125%) skewX(-20deg)}42%,72%{transform:translateX(145%) skewX(-20deg)}100%{transform:translateX(145%) skewX(-20deg)}}
.ai-visuals-section{margin-top:18px;padding:clamp(26px,4vw,46px);border:1px solid #ded8cd;background:#fffef9}.ai-visuals-section--cream{background:#fff7d3}.ai-visuals-section--dark{border-color:#302a20;background:#2a251d;color:#fffdf8}.ai-visuals-heading{max-width:700px;margin-bottom:28px}.ai-visuals-heading h2{margin:8px 0 10px;font-size:clamp(31px,4vw,48px);line-height:.98;letter-spacing:-.055em}.ai-visuals-heading>p:last-child{margin:0;color:#686157;line-height:1.52}.ai-visuals-section--dark .ai-visuals-heading>p:last-child{color:#d6cec0}.ai-visuals-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#dfd8cb}.ai-visuals-roles article{min-height:180px;padding:20px;background:#fffef9}.ai-visuals-roles span{display:inline-block;margin-bottom:30px;border:1px solid #dac76a;border-radius:99px;padding:5px 8px;color:#79600b;background:#fff6c9;font-size:10px;font-weight:800}.ai-visuals-roles h3{margin:0 0 8px;font-size:19px}.ai-visuals-roles p{margin:0;color:#6c655a;font-size:14px;line-height:1.45}.ai-reference-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ai-reference-steps>div{padding-top:15px;border-top:2px solid #e6bf27}.ai-reference-steps b{display:block;margin-bottom:24px;color:#997700;font-size:13px}.ai-reference-steps h3{margin:0 0 8px;font-size:17px}.ai-reference-steps p{margin:0;color:#675f50;font-size:14px;line-height:1.45}.ai-reference-script{margin-top:25px;border-left:4px solid #e4b813;padding:15px 0 15px 18px}.ai-reference-script strong{display:block;margin-bottom:7px}.ai-reference-script p{max-width:780px;margin:0;color:#625a47;line-height:1.52}.ai-folder-map{max-width:620px;border:1px solid #ded7c9;padding:21px;background:#28231b;color:#f7f1e4;font:14px/1.5 "JetBrains Mono",monospace}.ai-folder-map div{padding-left:17px}.ai-folder-map__root{padding-left:0!important;color:#f2c432}.ai-folder-map span{margin-left:8px;color:#a99f90;font-size:12px}.ai-visual-prompts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ai-visual-prompts article{border:1px solid #564d40;padding:19px;background:#312b22}.ai-visual-prompts p{margin:0 0 8px;color:#f3c431;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ai-visual-prompts code{color:#eee7d9;font:13px/1.5 "Inter",sans-serif;overflow-wrap:anywhere}
@media (max-width:800px){.ai-motion-catalog__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-motion-example{grid-template-columns:1fr}.ai-motion-stage{min-height:250px}.ai-motion-copy{min-height:260px}.ai-visuals-roles{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-reference-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:650px){.ai-motion-page,.ai-visuals-page{padding:102px 14px 30px}.ai-motion-hero,.ai-visuals-hero,.ai-visuals-section,.ai-motion-catalog,.ai-motion-prompt{padding:24px 18px}.ai-motion-hero h1,.ai-visuals-hero h1{font-size:clamp(42px,13vw,58px)}.ai-motion-intro{grid-template-columns:1fr}.ai-motion-stage{min-height:240px}.ai-motion-copy{padding:25px 20px;min-height:0}.ai-motion-copy h2{font-size:30px}.ai-motion-catalog__grid{grid-template-columns:1fr}.ai-motion-tile__visual{height:185px}.ai-motion-tile>div:not(.ai-motion-tile__visual){min-height:0}.ai-visuals-roles,.ai-reference-steps,.ai-visual-prompts{grid-template-columns:1fr}.ai-visuals-roles article{min-height:0}.ai-folder-map{font-size:12px;overflow:auto}.ai-folder-map span{display:block;margin-left:0}.ai-learning-links{margin-top:20px}}
@media (prefers-reduced-motion:reduce){.ai-motion-page *, .ai-visuals-page *{animation:none!important}.ai-lower-third,.ai-top-card,.ai-side-pill,.ai-sticker,.ai-motion-tile__visual--glass i,.ai-motion-tile__visual--sheet i,.ai-motion-tile__visual--notification em{opacity:1;transform:none;filter:none}.ai-dim-veil{opacity:.5}.ai-chart-card path{stroke-dashoffset:0}.ai-chart-card circle{opacity:1}.ai-motion-tile__visual--terminal b,.ai-motion-tile__visual--terminal em,.ai-motion-tile__visual--terminal span,.ai-motion-tile__visual--glass b,.ai-motion-tile__visual--glass em,.ai-motion-tile__visual--sheet b,.ai-motion-tile__visual--sheet em,.ai-motion-tile__visual--checklist i,.ai-motion-tile__visual--checklist b,.ai-motion-tile__visual--checklist em{opacity:1;transform:none}.ai-motion-tile__visual--timeline i{transform:none}.ai-motion-tile__visual--timeline b,.ai-motion-tile__visual--timeline em,.ai-motion-tile__visual--timeline span{opacity:1}.ai-motion-tile__visual--reveal span{display:none}}

/* Final lesson video */
.ai-playbook__video { border-color: #d8b326; background: #fff4be; }
.ai-playbook__video-player { display: block; width: min(100%, 530px); margin: 22px auto 0; aspect-ratio: 9 / 16; border: 2px solid #30251b; background: #28231b; box-shadow: 14px 14px 0 rgba(48, 37, 27, .12); object-fit: cover; }
.ai-playbook__video-note { max-width: 530px; margin: 14px auto 0; color: #62583c; line-height: 1.5; }
@media (max-width: 650px) { .ai-playbook__video-player { margin-top: 18px; box-shadow: 8px 8px 0 rgba(48, 37, 27, .12); } }

/* Practical 9:16 caption lab */
.ai-caption-style { grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr); }
.ai-caption-preview.ai-reel-preview { position:relative; width:min(78%,280px); min-height:0; aspect-ratio:9/16; place-self:center; border:2px solid #2c271f; border-radius:24px; padding:18px; background:radial-gradient(circle at 48% 30%,#ad947c 0 13%,transparent 14%),linear-gradient(150deg,#47413a,#8f8375 64%,#342f29); box-shadow:0 22px 34px rgba(44,34,23,.22); }
.ai-reel-preview__person{position:absolute;inset:18% 19% 0;overflow:hidden}.ai-reel-preview__person i{position:absolute;top:4%;left:28%;width:44%;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#d8ad8c,#9c7158)}.ai-reel-preview__person b{position:absolute;inset:31% 4% -10%;border-radius:45% 45% 8% 8%;background:linear-gradient(145deg,#35302d,#181614)}
.ai-reel-preview__tag{position:absolute;top:14px;left:16px;color:rgba(255,255,255,.72);font-size:8px;font-weight:800;letter-spacing:.12em}.ai-reel-preview__safe{position:absolute;right:12px;bottom:11px;color:rgba(255,255,255,.35);font-size:7px;text-transform:uppercase;letter-spacing:.1em}
.ai-caption-live{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:4px 6px;width:100%;color:#fffef9;font-size:clamp(17px,2vw,25px);font-weight:900;line-height:1;text-align:center;text-shadow:0 2px 9px rgba(0,0,0,.48)}.ai-caption-live span{display:inline-block}
.ai-caption-guide{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,46px)}.ai-caption-guide>p:first-child{margin:0 0 10px;color:#987500;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.ai-caption-guide h2{margin:0 0 20px;font-size:clamp(27px,3vw,39px);line-height:.98;letter-spacing:-.05em}.ai-caption-guide strong{margin:12px 0 5px;color:#30291f;font-size:12px;text-transform:uppercase;letter-spacing:.06em}.ai-caption-guide>p:not(:first-child){margin:0;color:#686158;line-height:1.5}
.ai-mini-prompt{min-width:0;margin-top:18px;border:1px solid #ded4c3;background:#f7f1e5}.ai-mini-prompt code{display:block;min-width:0;padding:14px;color:#4d4438;font:12px/1.45 Inter,sans-serif;overflow-wrap:anywhere;white-space:normal}.ai-mini-prompt button{width:100%;border:0;border-top:1px solid #ded4c3;padding:10px 12px;background:#f2c536;color:#282116;font-weight:900;cursor:pointer}
.ai-caption-live--word span{position:absolute;opacity:0;animation:ai-word-only 6s ease infinite;animation-delay:calc(var(--i)*.75s)}
.ai-caption-live--karaoke span{color:rgba(255,255,255,.42);text-shadow:none;animation:ai-karaoke-word 6s ease infinite;animation-delay:calc(var(--i)*.8s)}
.ai-caption-live--semantic span:nth-child(3){color:#f4ca38}.ai-caption-live--hand span:last-child{width:100%;color:#f4ca38;font-family:"Snell Roundhand","Segoe Script",cursive;font-size:1.55em;font-weight:400;transform:rotate(-5deg)}
.ai-caption-live--marker span:nth-child(2){position:relative}.ai-caption-live--marker span:nth-child(2)::after{position:absolute;right:-3px;bottom:-6px;left:-3px;height:7px;border-radius:50%;background:#f2c334;content:"";transform:scaleX(0);transform-origin:left;animation:ai-marker 6s cubic-bezier(.16,1,.3,1) infinite}
.ai-caption-live--stack{display:grid}.ai-caption-live--stack span{opacity:0;animation:ai-stack 6s ease infinite;animation-delay:calc(var(--i)*.18s)}.ai-caption-live--stack span:nth-child(2){color:#f4ca38;font-size:1.25em}
.ai-caption-live--scale span:last-child{color:#f4ca38;animation:ai-scale-word 6s ease infinite}.ai-caption-live--glass{padding:18px 12px;border:1px solid rgba(255,255,255,.55);border-radius:18px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.ai-caption-live--blocks{display:grid}.ai-caption-live--blocks span{padding:5px 8px;background:#28231d}.ai-caption-live--blocks span:last-child{background:#f3c435;color:#272119}.ai-caption-live--glow span:first-child{color:#fff36d;animation:ai-glow-word 6s ease infinite}.ai-caption-live--frame{padding:15px;border:1px solid rgba(255,255,255,.78);border-radius:14px}.ai-caption-live--minimal{font-size:14px;font-weight:600;letter-spacing:.07em}
@keyframes ai-word-only{0%,8%{opacity:0;transform:scale(.92)}12%,24%{opacity:1;transform:scale(1)}29%,100%{opacity:0}}
@keyframes ai-karaoke-word{0%,10%{color:rgba(255,255,255,.42);transform:scale(1)}14%,25%{color:#f4ca38;transform:scale(1.04)}30%,100%{color:rgba(255,255,255,.42);transform:scale(1)}}
@keyframes ai-scale-word{0%,24%{transform:scale(1)}31%{transform:scale(1.16)}39%,75%{transform:scale(1.08)}88%,100%{transform:scale(1)}}@keyframes ai-glow-word{0%,22%{text-shadow:none}35%{text-shadow:0 0 18px #fff36d,0 0 35px #f4ca38}52%,100%{text-shadow:0 0 5px rgba(255,243,109,.4)}}
@media(max-width:800px){.ai-caption-style{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}}
@media(max-width:650px){.ai-caption-style{grid-template-columns:1fr}.ai-caption-preview.ai-reel-preview{width:min(74%,230px);margin:22px auto}.ai-caption-guide{padding:24px 18px}.ai-caption-guide h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.ai-caption-live span{animation:none!important;opacity:1!important}.ai-caption-live--word span{position:static}.ai-caption-live--karaoke span:nth-child(2){color:#f4ca38}}

/* Reel-context motion lab */
.ai-motion-stage.ai-reel-motion{width:min(72%,250px);min-height:0;aspect-ratio:9/16;place-self:center;border:2px solid #302920;border-radius:24px;padding:18px;background:linear-gradient(155deg,#8f8170,#48413a 62%,#2d2924);box-shadow:0 22px 35px rgba(48,36,22,.22)}.ai-motion-example{align-items:center}.ai-motion-person{position:absolute;inset:20% 18% 0}.ai-motion-person::before{position:absolute;top:0;left:31%;width:38%;aspect-ratio:1;border-radius:50%;background:#b58b6e;content:""}.ai-motion-person::after{position:absolute;inset:30% 2% -8%;border-radius:48% 48% 8% 8%;background:#25211e;content:""}
.ai-motion-copy strong,.ai-motion-tile strong{display:block;margin:14px 0 6px;color:#8b6a00;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.ai-motion-copy strong+p{margin:0;color:#686158;line-height:1.5}.ai-motion-copy code{display:block;padding:12px;border:1px solid #e0d7c7;background:#f8f3e9;white-space:normal}.ai-motion-tile{display:flex;flex-direction:column}.ai-motion-tile>div:not(.ai-motion-tile__visual){min-height:0}.ai-motion-tile code{margin-top:auto;padding-top:10px}
.ai-motion-tile__visual{aspect-ratio:9/16;height:auto;max-height:230px;border:1px solid #d6cec1}.ai-mini-person{position:absolute;inset:27% 25% 0!important;width:auto!important;height:auto!important;border:0!important;border-radius:45% 45% 4px 4px!important;background:#51483e!important;box-shadow:none!important;opacity:.58!important;transform:none!important;animation:none!important}.ai-mini-person::before{position:absolute;top:-24%;left:28%;width:44%;aspect-ratio:1;border-radius:50%;background:#a17b62;content:""}
.ai-terminal-live{position:absolute;inset:20px 11px;padding:14px 10px;border-radius:10px;background:#181c19;color:#d7f6d8;font:8px/1.7 "JetBrains Mono",monospace}.ai-terminal-live>*{display:block;position:static!important;width:auto!important;height:auto!important;margin:0!important;border:0!important;background:none!important;color:inherit!important;box-shadow:none!important;opacity:0;transform:translateY(5px);animation:ai-terminal-type 7s steps(18,end) infinite}.ai-terminal-live b{color:#82df8d;animation-delay:1.2s}.ai-terminal-live em{color:#f1d76b;animation-delay:2.4s}.ai-terminal-live span{color:#82df8d;animation-delay:3.7s}
@keyframes ai-terminal-type{0%,8%{opacity:0;transform:translateY(5px)}12%,78%{opacity:1;transform:none}90%,100%{opacity:0}}
.ai-motion-tile__visual--phone i{position:absolute;inset:26px 35px;border:3px solid #27231e;border-radius:17px;background:linear-gradient(#f5c638 0 28%,#fbfaf5 28%);box-shadow:12px 15px 18px rgba(37,30,19,.24);transform:perspective(350px) rotateY(-22deg) rotateX(8deg);animation:ai-phone3d 6s cubic-bezier(.16,1,.3,1) infinite}.ai-motion-tile__visual--grid{display:grid;grid-template-columns:repeat(2,40px);align-content:center;justify-content:center;gap:5px}.ai-motion-tile__visual--grid i,.ai-motion-tile__visual--grid b,.ai-motion-tile__visual--grid em,.ai-motion-tile__visual--grid span{position:static;width:40px;height:55px;border-radius:5px;background:#f4c537;opacity:0;animation:ai-gridcard 6s ease infinite}.ai-motion-tile__visual--grid b{background:#4d4439;animation-delay:.15s}.ai-motion-tile__visual--grid em{background:#e8e0d4;animation-delay:.3s}.ai-motion-tile__visual--grid span{background:#fff;animation-delay:.45s}.ai-motion-tile__visual--cutout i{position:absolute;top:34px;right:20px;width:58px;height:72px;border-radius:50% 45% 40% 55%;background:#f3c433;filter:drop-shadow(0 12px 8px rgba(61,46,14,.25));transform:translate(70px,20px) rotate(18deg);animation:ai-cutout 6s cubic-bezier(.18,.9,.27,1.2) infinite}.ai-motion-tile__visual--parallax i,.ai-motion-tile__visual--parallax b,.ai-motion-tile__visual--parallax em{position:absolute;border-radius:10px;animation:ai-parallax 6s ease-in-out infinite}.ai-motion-tile__visual--parallax i{inset:18px;background:#cec4b5}.ai-motion-tile__visual--parallax b{inset:45px 30px;background:#645b4e;animation-duration:5s}.ai-motion-tile__visual--parallax em{inset:90px 18px 30px 70px;background:#f3c433;animation-duration:4s}.ai-motion-tile__visual--shape-match i{position:absolute;top:38px;left:36px;width:70px;height:70px;border-radius:50%;background:#f2c434;animation:ai-shapematch 6s cubic-bezier(.7,0,.3,1) infinite}.ai-motion-tile__visual--reaction i{position:absolute;top:55px;left:50%;font-style:normal;transform:translateX(-50%);animation:ai-reaction 6s ease infinite}.ai-motion-tile__visual--reaction i::before{content:"♥ 450";padding:9px 12px;border-radius:18px;background:#2d2822;color:white;font-weight:900}.ai-motion-tile__visual--foreground i{position:absolute;top:-20%;left:-20%;width:75%;height:150%;border-radius:50%;background:#2d2822;transform:translateX(-130%) rotate(18deg);animation:ai-foreground 6s cubic-bezier(.7,0,.3,1) infinite}.ai-motion-tile__visual--association i{position:absolute;top:32px;left:31px;width:60px;height:60px;border:8px solid #f2c434;border-radius:50%;animation:ai-association 6s ease infinite}.ai-motion-tile__visual--association b{position:absolute;right:28px;bottom:40px;width:8px;height:72px;border-radius:5px;background:#423a30;transform:rotate(-25deg)}.ai-motion-tile__visual--halftone{background-image:radial-gradient(#62584a 1px,transparent 1px);background-size:6px 6px}.ai-motion-tile__visual--halftone i{position:absolute;inset:35px;border-radius:18px;background:#f3c433;filter:blur(5px);animation:ai-halftone 6s ease infinite}.ai-motion-tile__visual--camera-collage i,.ai-motion-tile__visual--camera-collage b,.ai-motion-tile__visual--camera-collage em{position:absolute;width:48px;height:70px;border:2px solid white;border-radius:6px;background:#4a4238;box-shadow:0 12px 18px rgba(36,29,19,.25);animation:ai-collage 6s ease infinite}.ai-motion-tile__visual--camera-collage i{top:38px;left:15px;transform:perspective(300px) rotateY(22deg)}.ai-motion-tile__visual--camera-collage b{top:24px;right:15px;transform:perspective(300px) rotateY(-22deg)}.ai-motion-tile__visual--camera-collage em{bottom:20px;left:50%;background:#f3c433;transform:translateX(-50%) scale(1.1)}
@keyframes ai-phone3d{0%,15%{opacity:0;transform:perspective(350px) rotateY(-42deg) rotateX(14deg) translateY(30px)}30%,75%{opacity:1;transform:perspective(350px) rotateY(-16deg) rotateX(5deg)}90%,100%{opacity:0}}@keyframes ai-gridcard{0%,12%{opacity:0;transform:translateY(18px) scale(.9)}28%,76%{opacity:1;transform:none}90%,100%{opacity:0}}@keyframes ai-cutout{0%,16%{opacity:0;transform:translate(70px,20px) rotate(18deg)}32%,75%{opacity:1;transform:none}90%,100%{opacity:0}}@keyframes ai-parallax{0%,15%{transform:translateX(-8px)}50%{transform:translateX(9px)}85%,100%{transform:translateX(-8px)}}@keyframes ai-shapematch{0%,18%{transform:translateX(-25px) scale(.7)}42%{border-radius:50%;transform:translateX(25px) scale(1)}70%{border-radius:12px;transform:translate(25px,55px) scale(1.25)}90%,100%{opacity:0}}@keyframes ai-reaction{0%,20%{opacity:0;transform:translateX(-50%) scale(.8)}35%,75%{opacity:1;transform:translateX(-50%) scale(1)}90%,100%{opacity:0}}@keyframes ai-foreground{0%,18%{transform:translateX(-130%) rotate(18deg)}48%,58%{transform:translateX(160%) rotate(18deg)}100%{transform:translateX(160%) rotate(18deg)}}@keyframes ai-association{0%,18%{opacity:0;transform:scale(.5)}35%,75%{opacity:1;transform:scale(1)}90%,100%{opacity:0}}@keyframes ai-halftone{0%,16%{opacity:0;transform:translateY(25px);filter:blur(12px)}35%,75%{opacity:1;transform:none;filter:blur(3px)}90%,100%{opacity:0}}@keyframes ai-collage{0%,15%{opacity:0;transform:translateY(35px) scale(.8)}35%,72%{opacity:1}90%,100%{opacity:0;transform:translateY(-20px) scale(1.15)}}
@media(max-width:650px){.ai-motion-stage.ai-reel-motion{width:min(72%,230px)}.ai-motion-tile__visual{max-height:260px}}

/* SFX learning lab */
.ai-sound-page{min-height:100dvh;padding:132px clamp(18px,4vw,68px) 56px;background:#f7f4ec;color:#211d18}.ai-sound-page__content{width:min(100%,1040px);margin:0 auto}.ai-sound-hero{padding:clamp(28px,5vw,60px);border:1px solid #ded8cd;background:#fffef9}.ai-sound-hero h1{max-width:850px;margin:10px 0 18px;font-size:clamp(46px,8vw,90px);line-height:.9;letter-spacing:-.075em}.ai-sound-hero>p:not(.page-intro__eyebrow){max-width:700px;margin:0;color:#625d54;font-size:clamp(18px,2vw,23px);line-height:1.45}.ai-sound-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:18px 0;background:#ded8cd}.ai-sound-principles>div{padding:22px;background:#fffef9}.ai-sound-principles strong{display:block;margin-bottom:8px;color:#896800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.ai-sound-principles p{margin:0;color:#676055;line-height:1.46}.ai-sound-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ai-sound-card{border:1px solid #ded8cd;padding:24px;background:#fffef9}.ai-sound-card__top{display:flex;align-items:center;justify-content:space-between}.ai-sound-card__top>span{color:#987500;font-size:12px;font-weight:900;letter-spacing:.1em}.ai-sound-card__top button{display:grid;width:44px;height:44px;border:1px solid #2b251d;border-radius:50%;place-items:center;background:#f3c435;color:#252018;font-weight:900;cursor:pointer}.ai-sound-card h2{margin:13px 0 6px;font-size:31px;letter-spacing:-.055em}.ai-sound-card>p{min-height:42px;margin:0;color:#6a6257;line-height:1.46}.ai-sound-wave{position:relative;display:flex;height:68px;align-items:center;justify-content:center;gap:6px;margin:18px 0;border-radius:10px;background:#2b261f}.ai-sound-wave i{width:4px;height:18px;border-radius:4px;background:#f3c435}.ai-sound-wave i:nth-child(2),.ai-sound-wave i:nth-child(6){height:32px}.ai-sound-wave i:nth-child(3),.ai-sound-wave i:nth-child(7){height:44px}.ai-sound-wave i:nth-child(4){height:25px}.ai-sound-wave b{position:absolute;top:8px;bottom:8px;left:55%;width:2px;background:#fff}.ai-sound-wave b::after{position:absolute;top:-2px;left:-4px;width:10px;height:10px;border-radius:50%;background:#fff;content:""}.ai-sound-card dl{margin:0}.ai-sound-card dl>div{display:grid;grid-template-columns:105px 1fr;padding:9px 0;border-top:1px solid #e3ddd2}.ai-sound-card dt{color:#8b6a00;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.ai-sound-card dd{margin:0;color:#5f584e;font-size:13px;line-height:1.4}.ai-sound-workflow{display:grid;grid-template-columns:.75fr 1.25fr;gap:1px;margin-top:18px;background:#d9d1c3}.ai-sound-workflow>div{padding:clamp(24px,4vw,42px);background:#fff4be}.ai-sound-workflow h2{margin:8px 0 18px;font-size:clamp(30px,4vw,45px);line-height:.98;letter-spacing:-.055em}.ai-sound-workflow pre{margin:0;padding:20px;overflow:auto;background:#28231c;color:#f4eddf;font:13px/1.55 "JetBrains Mono",monospace}.ai-sound-workflow .ai-command{margin-top:0}
.ai-sound-card,.ai-sound-workflow>div{min-width:0}.ai-sound-card dl>div{grid-template-columns:105px minmax(0,1fr)}.ai-sound-card dd{min-width:0;overflow-wrap:anywhere}.ai-sound-workflow{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}.ai-sound-workflow pre,.ai-sound-workflow .ai-command{max-width:100%}
@media(max-width:760px){.ai-sound-grid{grid-template-columns:1fr}.ai-sound-workflow{grid-template-columns:1fr}.ai-sound-principles{grid-template-columns:1fr}}
@media(max-width:650px){.ai-sound-page{padding:102px 14px 30px}.ai-sound-hero{padding:24px 18px}.ai-sound-hero h1{font-size:clamp(42px,13vw,58px)}.ai-sound-card{padding:20px 18px}.ai-sound-card>p{min-height:0}.ai-sound-workflow>div{padding:24px 18px}}

/* Caption style library */
.ai-captions-page { min-height:100dvh; padding:132px clamp(18px,4vw,68px) 56px; background:#f7f4ec; color:#211d18; }.ai-captions-page__content{width:min(100%,1040px);margin:0 auto}.ai-captions-hero{padding:clamp(28px,5vw,60px);border:1px solid #ded8cd;background:#fffef9}.ai-captions-hero h1{max-width:780px;margin:10px 0 18px;font-size:clamp(45px,8vw,89px);line-height:.9;letter-spacing:-.075em}.ai-captions-hero>p:not(.page-intro__eyebrow){max-width:660px;margin:0;color:#625d54;font-size:clamp(18px,2vw,23px);line-height:1.45}.ai-captions-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:18px 0;background:#ded8cd}.ai-captions-rules>div{padding:19px;background:#fffef9}.ai-captions-rules strong{display:block;margin-bottom:9px;color:#896800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.ai-captions-rules p{margin:0;color:#676055;font-size:14px;line-height:1.45}.ai-captions-gallery{display:grid;gap:14px}.ai-caption-style{display:grid;grid-template-columns:minmax(330px,.92fr) minmax(0,1.08fr);border:1px solid #ded8cd;background:#fffef9}.ai-caption-preview{position:relative;display:grid;min-height:300px;overflow:hidden;place-items:center;padding:28px;background:linear-gradient(145deg,#8d8a81,#e6dfd2 67%);color:#fffef9;text-align:center}.ai-caption-preview>p{position:relative;z-index:1;margin:0;font-size:31px;font-weight:800;line-height:1.02;letter-spacing:-.055em}.ai-caption-style>div:last-child{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,46px)}.ai-caption-style>div:last-child>p:first-child{margin:0 0 11px;color:#987500;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.ai-caption-style h2{margin:0 0 12px;font-size:clamp(27px,3vw,39px);line-height:.98;letter-spacing:-.05em}.ai-caption-style h2+p{margin:0;color:#686158;line-height:1.52}.ai-caption-style code{margin-top:17px;color:#765e05;font-size:12px}.ai-caption-style--semantic b{color:#f7ce3b}.ai-caption-style--semantic p{animation:ai-caption-enter 5.5s cubic-bezier(.16,1,.3,1) infinite}.ai-caption-style--hand .ai-caption-preview{background:radial-gradient(circle at 66% 28%,#f8d352,transparent 18%),#3a3328}.ai-caption-style--hand b{color:#fffdf6}.ai-caption-style--hand i{display:block;margin-top:6px;color:#f5c534;font-family:"Snell Roundhand","Segoe Script",cursive;font-size:48px;font-weight:400;transform:rotate(-5deg);animation:ai-handwrite 5.5s ease .55s infinite}.ai-caption-style--marker .ai-caption-preview{background:#f5eedb;color:#31291f}.ai-caption-style--marker b{position:relative;z-index:1}.ai-caption-style--marker b::after{position:absolute;right:-5px;bottom:-4px;left:-5px;z-index:-1;height:10px;border-radius:50%;background:#f2c334;content:'';transform:scaleX(0);transform-origin:left;animation:ai-marker 5.5s cubic-bezier(.16,1,.3,1) .7s infinite}.ai-caption-style--kinetic .ai-caption-preview{display:grid;gap:3px;background:#29231b}.ai-caption-style--kinetic span,.ai-caption-style--kinetic b{display:block;opacity:0;animation:ai-stack 5.5s ease .4s infinite}.ai-caption-style--kinetic b{color:#f3c333;font-size:43px;letter-spacing:-.075em;animation-delay:.7s}.ai-caption-style--kinetic span:last-child{animation-delay:1s}.ai-caption-style--glass .ai-caption-preview{background:radial-gradient(circle at 70% 24%,#f2ce52,transparent 20%),linear-gradient(145deg,#53616a,#a8a096)}.ai-caption-style--glass p{padding:18px 23px;border:1px solid rgba(255,255,255,.7);border-radius:22px;background:rgba(255,255,255,.22);box-shadow:0 16px 30px rgba(27,36,37,.25);backdrop-filter:blur(12px);transform:scale(.93);opacity:0;animation:ai-glass-caption 5.5s cubic-bezier(.16,1,.3,1) .4s infinite}.ai-caption-style--glass b{color:#ffe265}.ai-caption-style--blocks .ai-caption-preview{display:grid;align-content:center;justify-items:center;gap:9px;background:#e9dfca;color:#292219}.ai-caption-style--blocks span,.ai-caption-style--blocks b{display:block;padding:8px 11px;background:#292219;color:#fffdf8;font-size:19px;font-weight:900;letter-spacing:-.045em;opacity:0;animation:ai-blocks 5.5s cubic-bezier(.16,1,.3,1) .35s infinite}.ai-caption-style--blocks b{background:#f3c332;color:#201b13;font-size:24px;animation-delay:.7s}.ai-caption-style--blocks span:last-child{animation-delay:1.05s}.ai-caption-combos{margin-top:18px;padding:clamp(26px,4vw,46px);border:1px solid #ded8cd;background:#fffef9}.ai-caption-combos__head{max-width:650px;margin-bottom:23px}.ai-caption-combos__head h2,.ai-caption-prompt h2{margin:8px 0 10px;font-size:clamp(31px,4vw,48px);line-height:.98;letter-spacing:-.055em}.ai-caption-combos__head p:last-child{margin:0;color:#675f54;line-height:1.52}.ai-caption-combos__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#ded8cd}.ai-caption-combos__grid article{padding:20px;background:#fcfaf4}.ai-caption-combos__grid strong{display:block;margin-bottom:22px;color:#8b6700;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.ai-caption-combos__grid p{margin:0 0 8px;font-size:19px;font-weight:800;line-height:1.1}.ai-caption-combos__grid span{color:#6e665a;font-size:13px}.ai-caption-prompt{margin-top:18px;padding:clamp(26px,4vw,48px);border:1px solid #d8b326;background:#fff4be}.ai-caption-prompt>p{margin:0;color:#886600;font-weight:800}.ai-caption-prompt .ai-command{margin-top:20px}@keyframes ai-caption-enter{0%,14%{opacity:0;transform:translateY(22px)}27%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@keyframes ai-handwrite{0%,18%{opacity:0;transform:translateY(14px) rotate(-5deg)}33%,72%{opacity:1;transform:rotate(-5deg)}84%,100%{opacity:0}}@keyframes ai-marker{0%,24%{transform:scaleX(0)}38%,72%{transform:scaleX(1)}84%,100%{transform:scaleX(0)}}@keyframes ai-stack{0%,15%{opacity:0;transform:translateY(16px)}30%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@keyframes ai-glass-caption{0%,15%{opacity:0;transform:scale(.93)}30%,72%{opacity:1;transform:scale(1)}84%,100%{opacity:0}}@keyframes ai-blocks{0%,15%{opacity:0;transform:translateX(-18px)}30%,72%{opacity:1;transform:none}84%,100%{opacity:0}}@media(max-width:800px){.ai-captions-rules{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-caption-style{grid-template-columns:1fr}.ai-caption-preview{min-height:250px}.ai-caption-style>div:last-child{min-height:260px}}@media(max-width:650px){.ai-captions-page{padding:102px 14px 30px}.ai-captions-hero,.ai-caption-combos,.ai-caption-prompt{padding:24px 18px}.ai-captions-hero h1{font-size:clamp(42px,13vw,58px)}.ai-captions-rules,.ai-caption-combos__grid{grid-template-columns:1fr}.ai-caption-preview{min-height:235px}.ai-caption-style>div:last-child{padding:25px 20px;min-height:0}.ai-caption-style h2{font-size:30px}}@media(prefers-reduced-motion:reduce){.ai-captions-page *{animation:none!important}.ai-caption-style--glass p{opacity:1;transform:none}.ai-caption-style--kinetic span,.ai-caption-style--kinetic b,.ai-caption-style--blocks span,.ai-caption-style--blocks b{opacity:1;transform:none}.ai-caption-style--marker b::after{transform:none}}
/* Mentorship workbook — uses the platform's existing colors, typography and controls. */
.workbook-form__head,.workbook-form__actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.workbook-save-state,.workbook-status{color:var(--muted,#647188);font-size:13px}.workbook-save-bar{position:sticky;z-index:4;top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid rgba(229,194,26,.55);border-radius:14px;background:rgba(255,253,244,.96);box-shadow:0 10px 28px rgba(49,35,23,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.workbook-save-bar span{color:var(--muted);font-size:13px;line-height:1.45}.workbook-save-bar button{flex:0 0 auto}.workbook-field{display:grid;gap:8px;margin-top:18px}.workbook-field span{font-size:13px;font-weight:600}.workbook-field textarea{width:100%;min-height:150px;resize:vertical}.workbook-field--error{outline:2px solid #c74646;outline-offset:4px}.workbook-feedback{margin:16px 0;padding:18px;border-left:3px solid var(--accent,#365cff);background:var(--surface,#fff)}.workbook-feedback p{margin:6px 0 0}.lesson-resource .button{display:inline-flex;margin-top:10px;text-decoration:none}@media(max-width:650px){.workbook-form__actions>*,.workbook-save-bar button{width:100%;justify-content:center}.workbook-save-bar{top:118px;align-items:stretch;flex-direction:column;padding:13px}.workbook__section{padding-left:0;padding-right:0}}
.workbook-learning-note{margin:22px 0 8px;padding:22px;border:1px solid rgba(229,194,26,.42);border-radius:18px;background:linear-gradient(145deg,#fff9d9,#fffdf4)}.workbook-learning-note h3{margin:6px 0 16px;color:var(--ink-display);font-size:20px;line-height:1.35}.workbook-learning-note ol{display:grid;gap:8px;margin:0 0 18px;padding-left:22px}.workbook-learning-note li,.workbook-learning-note>p:last-child{color:var(--ink);font-size:14px;line-height:1.55}
.workbook-options{margin:22px 0;padding:22px;border:1px solid var(--border);border-radius:18px;background:#fff}.workbook-options h3{margin:6px 0 16px;font-size:20px}.workbook-options ol{display:grid;gap:10px;margin:0 0 16px;padding-left:22px}.workbook-options li,.workbook-options>p:last-child{color:var(--muted);font-size:14px;line-height:1.55}.workbook-options strong{color:var(--ink)}
.workbook__why{padding:14px 16px;border-radius:12px;background:#fff9d9;color:var(--ink)!important}.workbook-followups{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:#fff}.workbook-followups ul{display:grid;gap:6px;margin:9px 0 0;padding-left:20px;color:var(--muted);font-size:14px}.workbook-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.workbook-examples article{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:#fff}.workbook-examples span{color:#9d7f18;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}.workbook-examples p{margin:7px 0 0!important;color:var(--ink)!important;font-size:14px}.workbook__section>.workbook__hint{margin-top:2px}
.workbook-theory{display:grid;gap:16px;margin:24px 0 34px;padding:clamp(22px,4vw,42px);border:1px solid var(--border);border-radius:20px;background:#fffdf4}.workbook-theory>h2{margin:0;color:var(--ink-display)}.workbook-theory article{padding-top:16px;border-top:1px solid var(--border)}.workbook-theory article h3{margin:0 0 8px}.workbook-theory article p{margin:6px 0!important;color:var(--muted)!important;line-height:1.6}
.workbook-prompt{display:grid;gap:18px;margin:24px 0 34px;padding:clamp(22px,4vw,42px);border:1px solid rgba(229,194,26,.55);border-radius:20px;background:linear-gradient(145deg,#fff9d9,#fff)}.workbook-prompt h2,.workbook-prompt p{margin:0}.workbook-prompt__guide{display:grid;grid-template-columns:1fr 1fr;gap:12px}.workbook-prompt__guide article,.workbook-prompt__rule{padding:18px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.78)}.workbook-prompt__guide ul{margin:10px 0 0;padding-left:20px}.workbook-prompt__bar{display:flex;align-items:center;justify-content:space-between;gap:16px}.workbook-prompt__bar button{flex:0 0 auto}.workbook-prompt pre{max-height:620px;margin:0;padding:22px;overflow:auto;border:1px solid var(--border);border-radius:16px;background:#fff;color:var(--ink);font:400 13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.workbook-prompt__rule{line-height:1.55}@media(max-width:720px){.workbook-prompt{padding:20px}.workbook-prompt__guide{grid-template-columns:1fr}.workbook-prompt__bar{align-items:stretch;flex-direction:column}.workbook-prompt__bar button{width:100%}.workbook-prompt pre{max-height:460px;font-size:12px}}
.workbook-cjm{margin:24px 0 34px;padding:clamp(20px,3vw,32px);border:1px solid var(--border);border-radius:20px;background:#fff}.workbook-cjm h2{margin:4px 0 18px}.workbook-cjm__scroll{overflow-x:auto}.workbook-cjm table{width:100%;min-width:900px;border-collapse:collapse}.workbook-cjm th,.workbook-cjm td{padding:12px;border:1px solid var(--border);text-align:left;vertical-align:top;font-size:13px;line-height:1.45}.workbook-cjm thead th{background:#fff4be}.workbook-cjm tbody th{color:#806900;background:#fffdf4}
@media(max-width:650px){.workbook-examples{grid-template-columns:1fr}}

/* Lesson pages: size against the usable area beside the app sidebar. */
.lesson-page{width:min(100%,1120px);margin-inline:auto;grid-template-columns:minmax(190px,220px) minmax(0,860px);gap:28px}
.lesson-layout__main{display:grid;width:100%;max-width:860px;grid-template-columns:minmax(0,1fr);gap:28px;align-content:start}.lesson-layout__main>.back-link{justify-self:start}.lesson-layout__main .page-intro{max-width:820px}.lesson-layout__main .page-intro h1{font-size:clamp(34px,3.35vw,48px);line-height:1.15;overflow-wrap:anywhere}.lesson-material{width:100%;padding:clamp(22px,2.4vw,30px)}
.lesson-upload-shortcut{display:inline-flex;margin-top:18px;text-decoration:none}
.workbook-field-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}.workbook-field-actions button{min-height:44px}.workbook-save-bar>div{display:grid;gap:6px}.workbook-save-bar [data-save-state]{font-weight:600;color:var(--text)}
@media(max-width:767px){.workbook-save-bar{position:static}.workbook-field-actions{align-items:stretch;flex-direction:column;gap:10px}.workbook-field-actions button{width:100%;justify-content:center}}
.workbook-upload{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;margin:22px 0;padding:22px;border:1px solid var(--border);border-radius:18px;background:#fff}.workbook-upload__intro{grid-column:1/-1}.workbook-upload__intro h3{margin:6px 0 10px;font-size:20px}.workbook-upload__intro>p:last-child{max-width:760px;margin:0;color:var(--muted);font-size:14px;line-height:1.55}.workbook-upload__picker{display:grid;gap:8px;min-width:0}.workbook-upload__picker>span{font-size:13px;font-weight:600}.workbook-upload__picker input{width:100%;min-height:48px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft)}.workbook-upload__file{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.workbook-upload__file div{display:grid;gap:4px;min-width:0}.workbook-upload__file strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workbook-upload__file small{color:var(--muted)}.workbook-upload__icon{display:grid;width:38px;height:38px;place-items:center;border-radius:10px;background:#fff;color:var(--accent);font-size:20px}.review-attachment .button{display:inline-flex;margin-top:12px;text-decoration:none}@media(max-width:767px){.workbook-upload{grid-template-columns:1fr;padding:18px}.workbook-upload>button,.workbook-upload__file .button{width:100%;justify-content:center}.workbook-upload__file{grid-template-columns:auto minmax(0,1fr)}.workbook-upload__file .button{grid-column:1/-1}}
.module-lock{margin:12px 0 0;padding:10px 14px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:13px}
.terra-progress-table{display:grid}.terra-progress-table .table-head,.terra-progress-row{display:grid;grid-template-columns:1.2fr 1.2fr .55fr .5fr;gap:16px;align-items:center}.terra-progress-row{padding:16px 0;border-top:1px solid var(--border)}.terra-progress-row div{display:grid;gap:3px}.terra-progress-row small{color:var(--muted)}.terra-progress-row a{color:var(--accent);font-weight:600;text-decoration:none}@media(max-width:800px){.terra-progress-table .table-head{display:none}.terra-progress-row{grid-template-columns:1fr auto}.terra-progress-row>span:nth-child(2){grid-column:1/-1}}
@media(max-width:1240px){.lesson-page{grid-template-columns:minmax(0,860px);justify-content:center}.lesson-outline{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:18px 20px}.lesson-outline .page-intro__eyebrow{grid-column:1/-1;margin-bottom:0}.lesson-outline h2,.lesson-outline__module{margin:0}.lesson-outline__module{padding:0;border:0}.lesson-outline .back-link{grid-column:2;grid-row:2}.lesson-layout__main .page-intro h1{font-size:clamp(32px,4.2vw,44px)}}
@media(max-width:767px){.lesson-page{width:100%;gap:18px}.lesson-outline{display:none}.lesson-layout__main{gap:20px}.lesson-layout__main .page-intro h1{font-size:clamp(30px,9vw,38px)}.lesson-material{padding:18px}.workbook__lead,.workbook__section{padding:18px}}

/* Apple-design quality pass: direct feedback, optical type and adaptive materials. */
html{font-optical-sizing:auto}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,.button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button,.button,.side-nav a,.nav-logout{touch-action:manipulation}
button:active,.button:active,.side-nav a:active,.nav-logout:active{transform:scale(.97);transition-duration:100ms}
h1{font-optical-sizing:auto;letter-spacing:clamp(-.045em,-.035em + -.3vw,-.02em)}
h2,h3,h4{font-optical-sizing:auto}
input,textarea,select{min-height:44px}
.icon-action,.row-menu>summary{min-width:44px;min-height:44px}
img{height:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce){.site-header--authenticated,.workspace-topbar,main{background:#f7f7f5!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(prefers-contrast:more){:root{--muted:#625d58;--border:#aaa39c;--shadow-card:none}.site-header--authenticated,.course-card,.data-panel,.lesson-material{border-color:currentColor}}
/* Pasted workbook tables scroll inside the card, never widen the page. */
.workbook-table-preview { max-width: 100%; overflow-x: auto; margin: 20px 0 24px; border: 1px solid #d9dce3; border-radius: 12px; background: #fff; }
.workbook-table-preview[hidden] { display: none; }
.workbook-table-preview table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.workbook-table-preview caption { text-align: left; padding: 12px 16px; color: #666; }
.workbook-table-preview th, .workbook-table-preview td { min-width: 140px; max-width: 340px; padding: 12px 16px; text-align: left; vertical-align: top; overflow-wrap: anywhere; border: 1px solid #e5e7eb; }
.workbook-table-preview th { background: #f4f6fb; font-weight: 600; }
.workbook-table-preview + .workbook-field { margin-top: 24px; }
.review-detail .workbook-review-answer { white-space: pre-wrap; overflow-wrap: anywhere; }