/* Five user-selectable palettes. All document surfaces share these tokens. */
:root{--bg:#0c192b;--surface:#12243b;--soft:#1c3550;--ink:#eff7ff;--muted:#b3c7da;--line:#3b566e;--sky:#8cd8ff;--link:#9adcff;--on-sky:#102d43;--rail:#17344f;--rail-ink:#edf7ff;--rail-muted:#b8d4e8;--hover:#254863;--warm:#3a3040;--shadow:0 14px 45px #0002;color-scheme:dark;font-family:'Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif}
:root[data-theme=white]{--bg:#f2f9fd;--surface:#fff;--soft:#e5f3fc;--ink:#193348;--muted:#4b6375;--line:#b7cdda;--sky:#a5e0ff;--link:#086590;--on-sky:#12364d;--rail:#dcedf8;--rail-ink:#183950;--rail-muted:#425f74;--hover:#c8e7f8;--warm:#fff1e5;--shadow:0 14px 45px #3156740c;color-scheme:light}
:root[data-theme=beige]{--bg:#f3eee5;--surface:#fffbf4;--soft:#e6eef0;--ink:#343b40;--muted:#5c6265;--line:#c9c2b4;--sky:#a9daee;--link:#17647f;--on-sky:#193744;--rail:#d6e6eb;--rail-ink:#243f4a;--rail-muted:#4f636b;--hover:#c5dce5;--warm:#eddfcd;--shadow:0 14px 45px #5847320c;color-scheme:light}
:root[data-theme=gray]{--bg:#e9edef;--surface:#f9fafb;--soft:#dce7ee;--ink:#26343e;--muted:#50606c;--line:#b7c4cd;--sky:#a5d9f5;--link:#135f88;--on-sky:#1b3649;--rail:#d3dfe7;--rail-ink:#243b4b;--rail-muted:#4a606f;--hover:#bfcfdc;--warm:#e9dfda;--shadow:0 14px 45px #223c510c;color-scheme:light}
:root[data-theme=pink]{--bg:#fff2f5;--surface:#fffcfd;--soft:#e6f2f9;--ink:#433441;--muted:#725767;--line:#d9bccb;--sky:#a9dcf5;--link:#17648a;--on-sky:#253948;--rail:#efdae4;--rail-ink:#513849;--rail-muted:#705463;--hover:#e6cbd9;--warm:#f5dde7;--shadow:0 14px 45px #74465a0c;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.35;letter-spacing:-.045em}h1{font-size:clamp(34px,4.2vw,60px);max-width:850px}h2{font-size:clamp(24px,2.5vw,33px);margin:46px 0 20px}h3{font-size:20px;margin:28px 0 12px}p+p{margin-top:12px}a{color:var(--link);text-underline-offset:4px}img,video{display:block;max-width:100%;height:auto}button,input,select{font:inherit;color:inherit}button,select,summary{cursor:pointer}button,a,input,select,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--link);outline-offset:4px}button{border:1px solid var(--line);background:var(--surface)}[hidden]{display:none!important}ul,ol{padding-left:24px}li+li{margin-top:7px}code{font-family:ui-monospace,monospace;font-size:.9em}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:20px;line-height:1.8}blockquote{margin:20px 0;border-left:4px solid var(--sky);padding:14px 20px;background:var(--soft);border-radius:0 12px 12px 0}small,.muted{color:var(--muted)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip{position:fixed;top:-100px;left:15px;padding:12px;background:var(--sky);color:var(--on-sky);z-index:100}.skip:focus{top:15px}
.rail{position:fixed;inset:0 auto 0 0;width:236px;overflow-y:auto;padding:30px 20px;background:var(--rail);color:var(--rail-ink);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}.brand{color:inherit;text-decoration:none;font-size:18px;font-weight:800;display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;background:var(--sky);color:var(--on-sky);width:36px;height:36px;border-radius:10px}.rail-caption{font-size:12px;color:var(--rail-muted);margin:30px 10px 10px}.rail nav{display:grid;gap:5px}.rail nav a{color:var(--rail-ink);text-decoration:none;border-radius:9px;padding:11px 12px;display:flex;gap:12px;font-size:14px}.rail nav a:hover{background:var(--hover)}.rail nav a[aria-current=page]{background:var(--sky);color:var(--on-sky);font-weight:800}.nav-num{font:12px/2 ui-monospace,monospace;opacity:.8}.rail-bottom{margin-top:auto;padding:28px 10px 0;color:var(--rail-muted);font-size:12px}.workspace{margin-left:236px;padding:28px 44px 40px}.wrap{max-width:1180px;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:40px;font-size:12px;color:var(--muted)}.theme-control{display:flex;align-items:center;gap:10px;flex-shrink:0}.theme-control select{max-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px}.eyebrow{color:var(--link);font-size:12px;letter-spacing:.14em;font-weight:800;margin-bottom:16px}.lead{color:var(--muted);font-size:18px;max-width:720px;margin-top:20px}.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:36px;align-items:center}.hero figure{border-radius:22px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}.hero img{aspect-ratio:1.14;object-fit:cover;object-position:72% 50%;width:100%}figcaption{padding:14px 18px;font-size:13px;color:var(--muted)}.accent{color:var(--link)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.button{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:11px 18px;text-decoration:none;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:700;min-height:44px}.button:hover{background:var(--soft)}.button.primary{background:var(--sky);border-color:var(--sky);color:var(--on-sky)}.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.pill{border:1px solid var(--line);background:var(--soft);border-radius:6px;padding:3px 9px;font-size:12px}.grid{display:grid;gap:18px;margin:20px 0}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{border:1px solid var(--line);border-radius:16px;padding:23px;background:var(--surface);min-width:0}.card h3{margin:0 0 10px}.card p{font-size:14px;color:var(--muted)}a.card{text-decoration:none;color:var(--ink)}a.card:hover{border-color:var(--link);background:var(--soft)}.number{color:var(--link);font:12px ui-monospace,monospace;display:block;margin-bottom:15px}.note{padding:18px 22px;border-left:4px solid var(--sky);border-radius:0 12px 12px 0;background:var(--soft);margin:22px 0;font-size:14px}.note.warm{background:var(--warm)}.pipeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:24px 0}.pipeline a{border:1px solid var(--line);padding:16px 12px;background:var(--surface);border-radius:12px;text-decoration:none;color:var(--ink)}.pipeline span{display:block;color:var(--link);font:12px ui-monospace,monospace;margin-bottom:6px}.pipeline small{display:block;font-size:12px}.shotboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}.shot{border:1px solid var(--line);border-radius:13px;background:var(--surface);overflow:hidden}.shot-image{aspect-ratio:16/9;overflow:hidden}.shot-image img{width:100%;height:100%;object-fit:cover}.shot:nth-child(1) img{transform:scale(1.4);transform-origin:15% 25%}.shot:nth-child(3) img{transform:scale(1.6);transform-origin:90% 75%}.shot:nth-child(4) img{transform:scale(1.45);transform-origin:76% 60%}.shot:nth-child(5) img{transform:scale(1.1);transform-origin:80% 65%}.shot figcaption strong{display:block;color:var(--ink)}.shot figcaption span{font-size:12px}.table-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:20px 0;background:var(--surface)}table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.65;text-align:left}th,td{padding:14px 16px;vertical-align:top;border-bottom:1px solid var(--line);min-width:120px}th{background:var(--soft);font-size:12px}tr:last-child td{border-bottom:0}td:first-child{font-weight:700}.prose>p,.prose>ul,.prose>ol{max-width:920px}.prose>p{margin:14px 0}.prose img{max-height:600px;object-fit:contain;border-radius:10px;background:var(--soft)}.prose h2{padding-top:15px;border-top:1px solid var(--line)}.prose .section-intro{color:var(--muted)}details{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 18px;margin:18px 0}summary{padding:16px 0;font-weight:700}details[open]>summary{border-bottom:1px solid var(--line);margin-bottom:16px}details>div{padding-bottom:18px}.lesson-links{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.lesson-links a{font-size:13px;padding:7px 12px;border:1px solid var(--line);border-radius:20px;text-decoration:none}.copy-wrap{position:relative}.copy-button{position:absolute;right:10px;top:10px;font-size:12px;border-radius:6px;padding:4px 9px;background:var(--surface)}.copy-wrap pre{padding-top:44px}.checklist{list-style:none;padding:0}.checklist label{display:flex;align-items:start;gap:12px;padding:10px 0}.checklist input{margin-top:8px;accent-color:var(--link);width:18px;height:18px}.palette-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:18px 0}.palette-button{padding:12px;border-radius:12px;font-size:12px;display:grid;gap:10px;justify-items:center;min-height:90px}.palette-button[aria-pressed=true]{outline:2px solid var(--link);outline-offset:2px}.swatches{display:flex}.swatches i{display:block;width:24px;height:24px;border:1px solid #5676;border-radius:50%;background:#a5dcf7}.swatches i+i{margin-left:-6px;background:var(--sample)}.palette-button[data-choice=white]{--sample:#fff}.palette-button[data-choice=navy]{--sample:#163450}.palette-button[data-choice=beige]{--sample:#e6d9c5}.palette-button[data-choice=gray]{--sample:#adb8c1}.palette-button[data-choice=pink]{--sample:#edc4d5}.footer{margin-top:55px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted)}.mobile-menu{display:none}.preview-screen{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}.preview-screen img{aspect-ratio:16/9;width:100%;object-fit:cover}.preview-caption{padding:15px 20px}.preview-caption p{color:var(--muted);font-size:14px}.timeline-diagram{display:grid;gap:8px;background:var(--soft);padding:20px;border-radius:14px;margin:20px 0}.timeline-row{display:grid;grid-template-columns:70px repeat(6,minmax(0,1fr));gap:4px;align-items:center;font-size:12px}.timeline-row span{padding:9px 4px;border-radius:5px;background:var(--sky);color:var(--on-sky);text-align:center}.timeline-row b{font-size:12px}.timeline-row .wide{grid-column:2/8}.timeline-row .last{grid-column:7/8}.audio-lab{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;margin:22px 0}.audio-lab input[type=range]{max-width:100%;accent-color:var(--link)}
.prose .hero img{object-fit:cover;max-height:none;border-radius:0}.prose .shot-image img{object-fit:cover;border-radius:0;max-height:none}
@media(max-width:1150px){.workspace{padding:26px}.hero{gap:24px}.pipeline{grid-template-columns:repeat(3,minmax(0,1fr))}.topbar>span{max-width:200px}.theme-control label{display:none}}
@media(max-width:800px){.rail{position:relative;width:100%;padding:17px 22px;display:block;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}.brand{display:inline-flex}.mobile-menu{display:block;position:absolute;right:20px;top:18px;padding:5px 12px;border-radius:7px;font-size:13px;background:var(--rail);color:var(--rail-ink)}.rail-caption,.rail-bottom{display:none}.rail nav{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:15px}.js .rail nav:not(.open){display:none}.workspace{margin-left:0;padding:20px 22px 30px}.topbar{margin-bottom:28px;flex-wrap:wrap;gap:10px}.theme-control label{display:inline}.topbar>span{max-width:none}.hero{grid-template-columns:1fr}.hero img{aspect-ratio:16/9}.three{grid-template-columns:repeat(2,minmax(0,1fr))}.shotboard{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}h1{font-size:39px}}
@media(max-width:480px){.workspace{padding:18px 16px}.topbar{align-items:start}.theme-control{width:100%;justify-content:space-between}.theme-control select{max-width:215px}.two,.three{grid-template-columns:1fr}.pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:20px}.shotboard{gap:8px}.shot figcaption{padding:10px;font-size:12px}h1{font-size:34px}.lead{font-size:16px}th,td{padding:12px;min-width:120px}.timeline-row{grid-template-columns:45px repeat(6,minmax(0,1fr));font-size:10px}.timeline-row b{font-size:10px}.timeline-diagram{padding:10px}.footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{:root{--bg:#fff;--surface:#fff;--soft:#eee;--ink:#111;--muted:#444;--line:#aaa;--link:#16435e;--sky:#d7eafa;--on-sky:#111;color-scheme:light}.rail,.topbar,.palette-grid,.copy-button,.actions,.footer,.skip{display:none}.workspace{margin:0;padding:0}.hero{display:block}.hero img{max-height:200px;object-fit:contain}.table-wrap{overflow:visible}table{font-size:10px}th,td{min-width:0;padding:6px}.card,figure{break-inside:avoid}.prose img{max-height:300px}h2{break-after:avoid}}

/* Modern Comparison Table & Badges */
.table-wrap{border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,0.15);overflow-x:auto;margin:24px 0}
.table-wrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.table-wrap th{background:var(--soft);color:var(--sky);font-weight:700;letter-spacing:0.04em;padding:16px;border-bottom:2px solid var(--line);text-transform:none}
.table-wrap td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.6}
.table-wrap tr:hover td{background:rgba(140,216,255,0.04)}
.table-wrap tr:last-child td{border-bottom:0}

/* Badges */
.badge{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:0.02em;margin-top:4px}
.badge-rec{background:var(--sky);color:var(--on-sky)}
.badge-spec{background:var(--hover);color:var(--ink);border:1px solid var(--line)}
.badge-pro{background:var(--warm);color:var(--ink);border:1px solid var(--line)}
.badge-free{background:#1b4731;color:#6ee7b7;border:1px solid #059669}
.badge-light{background:#2a3b5c;color:#93c5fd;border:1px solid #3b82f6}

/* Enhanced Storyboard Cards */
.story-board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}
.story-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.story-card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--soft);border-bottom:1px solid var(--line);font-size:12px}
.story-card-header strong{color:var(--sky);font-family:ui-monospace,monospace}
.story-badge{background:var(--sky);color:var(--on-sky);padding:2px 7px;border-radius:4px;font-size:11px;font-weight:700}
.story-visual{aspect-ratio:16/9;position:relative;background:#09121d;overflow:hidden;display:flex;align-items:center;justify-content:center}
.story-visual img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}
.story-card:hover .story-visual img{transform:scale(1.04)}
.story-viewfinder{position:absolute;inset:10px;border:1px dashed rgba(140,216,255,0.4);pointer-events:none;border-radius:4px;display:flex;justify-content:space-between;flex-direction:column;padding:6px;font-size:10px;color:rgba(140,216,255,0.8);font-family:ui-monospace,monospace}
.story-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.story-title{font-size:15px;font-weight:700;color:var(--ink);margin:0}
.story-narrative{font-size:13px;color:var(--muted);line-height:1.5}
.story-motion{font-size:12px;background:var(--soft);padding:6px 10px;border-radius:6px;border-left:3px solid var(--sky);color:var(--ink);margin-top:auto}

/* ComfyUI Special Section */
.comfy-box{background:linear-gradient(135deg,rgba(18,36,59,0.95),rgba(28,53,80,0.85));border:1.5px solid var(--sky);border-radius:16px;padding:26px;margin:30px 0;box-shadow:0 10px 30px rgba(0,0,0,0.25)}
.comfy-tag{display:inline-flex;align-items:center;gap:6px;background:var(--sky);color:var(--on-sky);padding:4px 10px;border-radius:20px;font-size:12px;font-weight:800;letter-spacing:0.05em;margin-bottom:12px}
.comfy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.comfy-subcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.comfy-subcard h4{margin:0 0 8px;font-size:15px;color:var(--sky)}
.comfy-subcard p{font-size:13px;color:var(--muted);margin:0;line-height:1.5}

@media(max-width:800px){
  .story-board-grid{grid-template-columns:1fr}
  .comfy-grid{grid-template-columns:1fr}
  .nav-accordion{grid-column:1/-1}
}

/* Sidebar Collapsible Accordion */
.nav-accordion{border:none;background:transparent;padding:0;margin:2px 0}
.nav-accordion-summary{list-style:none;display:flex;align-items:center;gap:12px;color:var(--rail-ink);padding:11px 12px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;user-select:none;transition:background 0.15s ease,color 0.15s ease}
.nav-accordion-summary::-webkit-details-marker{display:none}
.nav-accordion-summary:hover{background:var(--hover)}
.nav-accordion.active-group .nav-accordion-summary{color:var(--sky)}
.nav-group-title{flex:1}
.nav-chevron{font-size:13px;color:var(--sky);transition:transform 0.25s ease;line-height:1}
.nav-accordion[open] .nav-chevron{transform:rotate(180deg)}
.nav-sub{display:grid;gap:3px;padding:4px 0 6px 12px;margin-left:14px;border-left:2px solid rgba(140,216,255,0.25)}
.nav-sub a{padding:8px 10px !important;font-size:13px !important;border-radius:7px !important;color:var(--rail-muted) !important;display:flex !important;gap:10px !important;transition:all 0.15s ease}
.nav-sub a:hover{color:var(--rail-ink) !important;background:var(--hover) !important}
.nav-sub a[aria-current="page"]{background:var(--sky) !important;color:var(--on-sky) !important;font-weight:800 !important}

/* Post-Production & VFX Visual Components */
.vfx-diagram-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  margin: 28px 0;
  box-shadow: var(--shadow);
}
.vfx-diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 10px;
}
.vfx-diagram-header h4 {
  margin: 0;
  font-size: 16px;
  color: var(--sky);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vfx-diagram-badge {
  background: var(--soft);
  color: var(--sky);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
}
.vfx-svg-container {
  width: 100%;
  overflow-x: auto;
  padding: 10px 0;
}
.vfx-svg-container svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.vfx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--muted);
}
.vfx-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vfx-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.vfx-callout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.vfx-callout-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.vfx-callout-card h5 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--sky);
}
.vfx-callout-card p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
@media(max-width: 800px) {
  .vfx-callout-grid {
    grid-template-columns: 1fr;
  }
}


/* Readability review: semantic lesson numbering and compact teaching media. */
.nav-heading{font-size:11px;letter-spacing:.08em;color:var(--rail-muted);margin:15px 12px 3px;grid-column:1/-1}
.rail nav{gap:2px}.rail nav a{padding-top:7px;padding-bottom:7px}.rail-bottom{margin-top:20px}
.learning-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));list-style:none;gap:12px;padding:0;margin:24px 0;counter-reset:flow}
.learning-flow li{position:relative;border:1px solid var(--line);border-top:3px solid var(--sky);background:var(--surface);padding:18px;margin:0;line-height:1.6}
.learning-flow small{color:var(--muted);font-size:13px}.learning-flow li+li:before{content:'→';position:absolute;left:-13px;top:50%;background:var(--bg);color:var(--link)}
.lesson-pager{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:40px}
.prose video{display:block;max-width:100%;width:100%;max-height:560px;background:#000;border-radius:12px;margin:18px 0}
.teaching-media{margin:20px 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.prose .teaching-media img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;margin:0;border:0;border-radius:0}
.prose .teaching-media.ui-native img,.lesson-article .prose figure.teaching-media.ui-native>img{width:auto;max-width:100%;max-height:none;margin:0 auto}.prose .teaching-media.ui-pair .ui-pair-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px}.prose .teaching-media.ui-pair .ui-pair-row img{margin:0}.prose .media-ref{padding:.6rem .8rem;border-left:3px solid var(--line);background:var(--soft)}
.teaching-media figcaption{padding:14px 18px;font-size:14px;color:var(--muted);line-height:1.65}
.story-card{margin:0}.story-body h3{margin:0;font-size:17px}.story-body p{margin:0;font-size:14px}.story-card-header strong{color:var(--link)}
.table-wrap th{color:var(--ink);letter-spacing:0}.table-wrap{box-shadow:none}.table-wrap td{padding:12px 16px}
.prose p,.prose li{max-width:78ch}.prose h2{font-size:28px}.prose .card h2{font-size:25px;margin-top:12px}.motion-icon{font-size:32px;color:var(--link)}
.caption{color:var(--muted);font-size:14px}.audio-lab label{margin:0 12px}
.learning-flow.alternatives li:before{display:none}
.visual-strip,.visual-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
.visual-strip figure,.visual-compare figure{min-width:0;margin:0}
.visual-strip .teaching-media img{height:190px;object-fit:cover}.visual-strip .teaching-media img[src*="/platforms/"]{object-fit:contain;background:var(--soft)}
.visual-strip figcaption,.visual-compare figcaption{padding:12px 14px;font-size:14px;line-height:1.6}
.workshop-hero img{aspect-ratio:2.1;object-fit:cover!important}.prose .compact-ui img{max-height:300px}
.compare-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.triptych-crop{position:relative;aspect-ratio:1;overflow:hidden}
.prose .triptych-crop img{position:absolute;top:0;left:0;width:300%;max-width:none;height:100%;margin:0;border:0;border-radius:0;object-fit:fill}
.prose .triptych-crop.panel-1 img{left:-100%}.prose .triptych-crop.panel-2 img{left:-200%}
.annotation-ring{position:absolute;border:3px solid #fff478;border-radius:12px;box-shadow:0 0 0 1px #293c46;pointer-events:none}
.panel-1 .annotation-ring{left:65%;top:45%;width:26%;height:31%}.panel-2 .annotation-ring{left:25%;top:1%;width:18%;height:47%}
.shot-filmstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:25px 0 0}.shot-filmstrip figure{margin:0;min-width:0}.shot-filmstrip img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover;margin:0!important}.shot-filmstrip figcaption{font-size:12px;text-align:center;padding:7px 2px}
.inline-video video{margin:0;border-radius:0;max-height:410px}.inline-video{max-width:850px}
.service-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 32px}.service-links a{border:1px solid var(--line);background:var(--surface);padding:9px 14px;border-radius:9px;font-size:14px}
.export-picture{position:relative}.export-picture img{aspect-ratio:16/9;object-fit:cover!important}.sample-title{position:absolute;right:12%;top:29%;color:#fff;font-size:clamp(32px,7vw,86px);font-weight:600;text-shadow:0 2px 12px #0c192b}
.inspect-dot{position:absolute;border-radius:50%;display:grid;place-items:center;width:28px;height:28px;background:#fff478;color:#102137;border:1px solid #18394a;font-weight:bold}.dot-a{left:43%;top:63%}.dot-b{left:70%;top:14%}.dot-c{right:8%;top:38%}
.color-photo.color-scene{position:relative;aspect-ratio:1;max-height:none;width:min(100%,470px);margin:auto;overflow:hidden}
.prose .color-photo img{position:absolute;left:0;top:0;width:300%;height:100%;max-width:none;object-fit:fill;margin:0;border:0;border-radius:0}
.color-photo[data-look=balanced] img{left:-100%}.color-photo[data-look=graded] img{left:-200%}
@media(max-width:800px){.visual-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-compare{grid-template-columns:1fr}.compare-card{max-width:500px;width:100%;margin:auto!important}.shot-filmstrip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.visual-strip{grid-template-columns:1fr}.visual-strip .teaching-media img{height:200px}.workshop-hero img{aspect-ratio:1.45}.service-links{gap:7px}}
.post-resolution{display:flex;align-items:center;justify-content:center;gap:22px;padding:24px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.post-resolution>div{display:grid;justify-items:center;gap:12px;font-size:14px;min-width:0}
.resolution-box{display:grid;place-items:center;width:180px;aspect-ratio:16/9;border:2px solid var(--link);background:var(--soft)}
.resolution-box.small-box{width:120px}
.post-lab{padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:22px 0}
.post-lab input[type=range]{width:100%;accent-color:var(--link);margin:20px 0}
.post-lab output{margin-left:14px;color:var(--link)}
.frame-track{margin:14px 0;font-size:14px}.frame-lane{position:relative;height:38px;margin:10px 24px 0 0;border-bottom:1px solid var(--line)}
.frame-dot{position:absolute;left:0;top:4px;width:24px;height:24px;border-radius:50%;background:var(--sky);border:2px solid var(--ink)}
.frame-dot.inferred{border-style:dashed;border-radius:4px}
.color-scene{display:block;width:100%;max-height:340px;border-radius:9px;--wall:#839cae;--window:#617f9e;--table:#6f7b89;--cup:#a8c3da}
.color-scene[data-look=balanced]{--wall:#c8c7c1;--window:#91b0c6;--table:#967a61;--cup:#f0efeb}
.color-scene[data-look=graded]{--wall:#d5c3a2;--window:#7c9faf;--table:#a47c50;--cup:#f5e9cf}
.scene-wall{fill:var(--wall)}.scene-window{fill:var(--window)}.scene-table{fill:var(--table)}.scene-cup{stroke:var(--cup)}.scene-cup:not([fill]){fill:var(--cup)}
@media(max-width:480px){.post-resolution{gap:10px}.resolution-box{width:138px}.resolution-box.small-box{width:92px}.post-resolution>div{font-size:12px}.post-lab{padding:15px}}
.method-nav{font-size:12px!important;margin-left:24px;opacity:.95}
.process-demo,.motion-demo,.scrub-demo{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px;margin:22px 0}
.process-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.process-controls button{border:1px solid var(--line);padding:9px 15px;border-radius:8px;background:var(--soft);color:var(--ink)}
.process-controls button[aria-pressed=true]{background:var(--sky);color:var(--on-sky)}
.process-body{display:grid;grid-template-columns:minmax(230px,1fr) 1fr;align-items:center;gap:25px}
.process-picture{position:relative;overflow:hidden;border-radius:10px}.process-picture>svg{display:block;width:100%}
.noise-layer{position:absolute;inset:0;opacity:0}.process-picture[data-step="1"]>svg:first-child{filter:grayscale(1);opacity:.4}
.process-picture[data-step="2"] .noise-layer{opacity:.4}.process-picture[data-step="2"]>svg:first-child{filter:blur(5px)}
.stage-stamp{position:absolute;left:10px;bottom:10px;padding:3px 10px;background:#16344c;color:#fff;border-radius:5px;font-size:12px}
.method-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:20px 0}
.method-tile{margin:0;border:1px solid var(--line);background:var(--surface);border-radius:10px;overflow:hidden}
.method-tile svg{width:100%;display:block}.method-tile figcaption{padding:10px 14px;font-size:14px;color:var(--muted)}
.prose .method-tile img{display:block;width:100%;height:230px;object-fit:contain;background:var(--soft);margin:0;border:0;border-radius:0}
.text-input{display:grid;place-items:center;min-height:190px;padding:25px;color:var(--ink);background:var(--soft);font-size:20px}
.method-case{margin:40px 0}.method-case h2{margin-top:10px}.motion-demo svg,.scrub-demo svg{display:block;max-width:460px;width:100%;margin:15px auto;border-radius:10px}
.scrub-demo input{display:block;width:100%;margin:16px 0;accent-color:var(--link)}.scrub-demo output{font-weight:bold}
.motion-demo button{padding:9px 16px;border-radius:8px;background:var(--sky);color:var(--on-sky)}
.playing .steam{animation:teaching-steam 2s linear infinite;transform-origin:center}
@keyframes teaching-steam{0%{transform:translateY(8px);opacity:.2}50%{opacity:1}100%{transform:translateY(-13px);opacity:.1}}
@media(max-width:800px){.process-body{grid-template-columns:1fr}.method-row{grid-template-columns:1fr}.method-tile svg{max-height:240px}.method-nav{margin-left:0}}
@media(prefers-reduced-motion:reduce){.playing .steam{animation:none;stroke-width:6}}
@media(max-width:800px){.story-board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.story-board-grid{grid-template-columns:1fr}.learning-flow{grid-template-columns:1fr}.learning-flow li+li:before{content:'↓';left:50%;top:-20px}.prose h2{font-size:25px}.lesson-pager{font-size:14px}}

/* Seed Experiment Showcase */
.seed-experiment-suite {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 28px 0;
}
.seed-exp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.seed-exp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 10px;
}
.seed-exp-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.seed-exp-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--sky);
  color: var(--on-sky);
  font-family: ui-monospace, monospace;
}
.seed-exp-condition {
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.seed-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}
.seed-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.seed-item-visual {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
}
.seed-item-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.seed-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(10, 20, 35, 0.85);
  color: #70d6ff;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid rgba(112, 214, 255, 0.3);
  backdrop-filter: blur(4px);
}
.seed-tag.warning {
  color: #ff9f1c;
  border-color: rgba(255, 159, 28, 0.3);
}
.seed-item-caption {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.seed-item-caption strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--link);
}
.seed-item-caption p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.seed-exp-footer {
  padding: 14px 18px;
  background: var(--soft);
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.seed-exp-footer strong {
  color: var(--link);
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .seed-compare-grid {
    grid-template-columns: 1fr;
  }
}


/* Editor Tabs (Adobe Premiere Pro default / DaVinci Resolve) */
.editor-tabs{margin:24px 0}
.editor-tab-list{display:inline-flex;align-items:center;gap:4px;padding:4px;margin-bottom:14px;background:var(--soft);border:1px solid var(--line);border-radius:999px;flex-wrap:wrap}
.editor-tab{appearance:none;border:1px solid transparent;background:transparent;color:var(--muted);font:700 13px/1.2 inherit;padding:7px 14px;border-radius:999px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;min-height:32px;display:inline-flex;align-items:center;gap:6px}
.editor-tab:hover{color:var(--ink)}
.editor-tab.is-active,.editor-tab[aria-selected="true"]{background:var(--surface);color:var(--link);border-color:var(--line);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.editor-panel>figure.teaching-media,.editor-panel>.grid{margin-top:0!important;margin-bottom:0!important}
.editor-panel[hidden]{display:none!important}