/* Lecture Studio — per-effect reference pages. Loaded after shared.css. */

.fx-hero .hero-inner{ padding-top:40px; }
.fx-hero .crumbs{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap;
  font-size:13px; font-weight:700; color:rgba(255,255,255,.86); margin-bottom:18px; }
.fx-hero .crumbs a{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.5); }
.fx-hero .crumbs i{ opacity:.6; font-style:normal; }
.fx-hero .tagline{ display:inline-block; margin-top:22px; font-family:var(--font-mono); font-size:12.5px;
  color:#fff; background:rgba(11,11,12,.22); border:1px solid rgba(255,255,255,.3); padding:6px 14px; border-radius:999px; }
.fx-hero .lede{ max-width:64ch !important; }

/* on-this-page bar */
.otp{ position:sticky; top:calc(var(--strip,0px) + var(--navh,72px) + 6px); z-index:20; margin-top:-26px; }
.otp-inner{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line);
  border-radius:999px; padding:6px; box-shadow:var(--shadow-soft); width:max-content; max-width:100%; margin-inline:auto; }
.otp-inner::-webkit-scrollbar{ display:none; }
.otp a{ flex:none; font-size:13px; font-weight:700; color:var(--ink-dim); padding:7px 14px; border-radius:999px; white-space:nowrap; }
.otp a:hover{ background:var(--paper-2); color:var(--ink); }
.otp a.on{ background:var(--ink); color:#fff; }

.fx-sec{ padding-block:70px 10px; scroll-margin-top:150px; }
.fx-sec > .section-head{ margin-bottom:30px; }
.fx-sec h2{ font-size:clamp(26px,3.2vw,38px); }
.num-tag{ font-family:var(--font-mono); font-size:12px; color:var(--pink); letter-spacing:.04em; }

/* final sample */
.final{ display:grid; grid-template-columns:1.6fr 1fr; gap:30px; align-items:center; }
.player{ border-radius:var(--radius-m); overflow:hidden; background:#0B0B0C; box-shadow:var(--shadow-card); }
.player video{ width:100%; display:block; aspect-ratio:16/9; background:#0B0B0C; }
.final-body p{ color:var(--ink-dim); font-size:15.5px; }
.final-body p + p{ margin-top:12px; }
.final-body .meta{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); margin-top:14px; }

/* intro + glance */
.intro-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:start; }
.glance{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.glance div{ background:var(--paper-2); border-radius:16px; padding:16px 18px; }
.glance b{ display:block; font-size:19px; font-weight:800; line-height:1.25; }
.glance span{ display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:var(--ink-faint); letter-spacing:.02em; }

/* process */
.steps{ counter-reset:st; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; }
.step{ counter-increment:st; position:relative; padding:18px 20px 18px 64px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.step::before{ content:counter(st,decimal-leading-zero); position:absolute; left:18px; top:18px;
  font-family:var(--font-mono); font-size:13px; font-weight:500; color:#fff; background:var(--ink);
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.step b{ display:block; font-size:16px; font-weight:800; }
.step p{ margin-top:6px; font-size:14.5px; color:var(--ink-dim); }

/* elements */
.el-list{ display:flex; flex-direction:column; gap:26px; }
.elx{ display:grid; grid-template-columns:1.12fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius-m);
  overflow:hidden; background:#fff; scroll-margin-top:150px; }
.elx.flip .elx-media{ order:2; }
.elx-media{ background:#0B0B0C; position:relative; display:flex; flex-direction:column; justify-content:center; min-height:100%; }
.elx-media img, .elx-media video{ width:100%; display:block; height:auto; }
.elx-media video.el-clip{ aspect-ratio:16/9; object-fit:contain; background:#0A1B2E; }
.elx-media a.zoom{ display:block; cursor:zoom-in; }
.elx-media figcaption{ font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.72); padding:12px 16px 14px; background:#131316; }
.elx-media .audio{ padding:34px 26px; display:flex; flex-direction:column; gap:14px; align-items:stretch;
  background:linear-gradient(135deg,#17171d,#0e0e12); }
.elx-media .audio b{ color:#fff; font-size:15px; }
.elx-media .audio audio{ width:100%; }
.elx-body{ padding:26px 28px 26px; display:flex; flex-direction:column; gap:10px; }
.elx-body h3{ font-size:21px; }
.elx-body .role{ font-weight:700; color:var(--teal); font-size:14px; }
.elx-body p.txt{ color:var(--ink-dim); font-size:15px; }
.elx-body h5{ margin:8px 0 0; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.elx-body ul{ margin:2px 0 0; padding-left:18px; font-size:14px; color:var(--ink); }
.elx-body ul li{ margin:3px 0; }
.elx-body ul.r li::marker{ color:var(--pink); }
.elx.noviz{ grid-template-columns:1fr; }
.elx.noviz .elx-body{ display:grid; grid-template-columns:1fr 1fr; gap:10px 34px; }
.elx.noviz .elx-body > .head{ grid-column:1/-1; display:flex; flex-direction:column; gap:8px; }

/* element index */
.el-index{ display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 30px; }
.el-index a{ font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; background:var(--paper-2); color:var(--ink-dim); }
.el-index a:hover{ background:var(--ink); color:#fff; }

/* tables */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-m); background:#fff; }
table.fxt{ width:100%; border-collapse:collapse; font-size:14.5px; }
.fxt th{ text-align:left; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); padding:14px 18px; background:var(--paper-2); border-bottom:1px solid var(--line); }
.fxt td{ padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
.fxt tr:last-child td{ border-bottom:none; }
.fxt td.why{ color:var(--ink-dim); }
.fxt td.val{ font-weight:800; white-space:nowrap; }
.fxt code{ font-family:var(--font-mono); font-size:11.5px; color:var(--pink); display:block; margin-top:4px; }
.badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap; }
.badge.hard{ background:#FDE3EF; color:#B0145C; }
.badge.soft{ background:var(--teal-soft); color:var(--teal); }
.filters{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.filters button{ font:inherit; font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink-dim); }
.filters button.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* checks */
.checks{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.checks div{ display:grid; grid-template-columns:26px 1fr; gap:10px; padding:16px 18px; border-radius:16px; background:var(--good-soft); }
.checks div::before{ content:"✓"; width:24px; height:24px; border-radius:50%; background:var(--good); color:#fff;
  font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.checks b{ display:block; font-size:15px; }
.checks p{ font-size:13.5px; color:var(--ink-dim); margin-top:3px; }

/* worked example */
.worked{ background:var(--dark); color:#fff; border-radius:var(--radius-l); padding:44px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; }
.worked h3{ color:#fff; font-size:26px; }
.worked p{ color:rgba(255,255,255,.78); font-size:15px; margin-top:12px; }
.worked .wf{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
.worked .wf div{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:14px 16px; }
.worked .wf b{ display:block; font-size:18px; font-weight:800; color:#fff; }
.worked .wf span{ display:block; font-size:12px; color:rgba(255,255,255,.6); margin-top:3px; font-weight:600; }

/* timeline chart */
.chart{ border:1px solid var(--line); border-radius:var(--radius-m); padding:22px 22px 16px; background:#fff; margin-top:26px; }
.chart h4{ font-size:16px; }
.chart p.cap{ font-size:13px; color:var(--ink-faint); margin-top:4px; }
.chart svg{ width:100%; height:auto; display:block; margin-top:14px; }
.legend2{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; font-weight:700; color:var(--ink-dim); }
.legend2 i{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

/* limits + combines + faq */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.limits{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.limits li{ padding:14px 16px 14px 44px; position:relative; border-radius:14px; background:var(--paper-2); font-size:14.5px; color:var(--ink); }
.limits li::before{ content:"–"; position:absolute; left:18px; top:12px; font-weight:800; color:var(--orange); font-size:18px; }
.combos{ display:flex; flex-direction:column; gap:10px; }
.combos a{ display:block; padding:14px 18px; border-radius:14px; border:1px solid var(--line); background:#fff; }
.combos a:hover{ border-color:var(--ink); }
.combos b{ font-size:15px; }
.combos b::after{ content:" →"; color:var(--pink); }
.combos span{ display:block; font-size:13.5px; color:var(--ink-dim); margin-top:3px; }
.faq details{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq summary{ cursor:pointer; font-weight:800; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.faq summary::after{ content:"+"; font-weight:700; color:var(--pink); font-size:22px; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin-top:10px; color:var(--ink-dim); max-width:80ch; }

/* prev / next + all effects */
.pn{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:70px; }
.pn a{ display:flex; flex-direction:column; gap:4px; padding:22px 24px; border-radius:var(--radius-m); background:var(--paper-2); }
.pn a:hover{ background:var(--cream); }
.pn a.nx{ text-align:right; }
.pn small{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.pn b{ font-size:19px; }
.allfx{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.allfx a{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; }
.allfx a:hover{ border-color:var(--ink); }
.allfx a.here{ border-color:var(--pink); box-shadow:0 0 0 2px var(--pink) inset; }
.allfx img{ aspect-ratio:16/9; object-fit:cover; width:100%; background:var(--paper-2); }
.allfx div{ padding:12px 14px 14px; }
.allfx small{ display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.allfx b{ display:block; font-size:15px; margin-top:2px; }
.allfx span{ display:block; font-size:13px; color:var(--ink-dim); margin-top:4px; line-height:1.45; }

/* hub page */
.hub-stage{ margin-top:46px; }
.hub-stage h3{ font-size:20px; margin-bottom:16px; display:flex; gap:12px; align-items:baseline; }
.hub-stage h3 span{ font-size:12.5px; font-weight:700; color:var(--ink-faint); letter-spacing:.05em; text-transform:uppercase; }

@media (max-width:980px){
  .final, .intro-grid, .worked, .two{ grid-template-columns:1fr; }
  .elx, .elx.noviz .elx-body{ grid-template-columns:1fr; }
  .elx.flip .elx-media{ order:0; }
  .steps, .checks{ grid-template-columns:1fr; }
  .worked{ padding:30px 22px; }
}
@media (max-width:620px){
  .glance, .worked .wf{ grid-template-columns:1fr 1fr; }
  .pn{ grid-template-columns:1fr; }
  .fxt th:nth-child(3), .fxt td:nth-child(3){ min-width:200px; }
  .elx-body{ padding:20px 18px; }
}