/* AI Atelier · the active AI course only.  Experiment diagrams retain their
   original semantic colours.  Presentation geometry is managed separately. */
body.ai-atelier {
  --bg: #090f1b;
  --panel: #111c2d;
  --panel2: #162239;
  --ink: #f2f5fc;
  --muted: #a8b8cf;
  --line: #2b3b53;
  --accent: #8de4ff;
  --warm: #e6c08c;
  --blue: #afc7ff;
  --atelier-cobalt: #315ac6;
  --atelier-violet: #b7a7ef;
  --atelier-paper: #f1f4fa;
  --atelier-paper-ink: #20344e;
  --atelier-paper-muted: #50637b;
  --atelier-paper-line: #c5d0e1;
  --ex-paper: var(--atelier-paper);
  --ex-ink: var(--atelier-paper-ink);
  --ex-muted: var(--atelier-paper-muted);
  --ex-line: var(--atelier-paper-line);
  --ex-teal: var(--atelier-cobalt);
  --paper: var(--atelier-paper);
  --paper-ink: var(--atelier-paper-ink);
  --paper-muted: var(--atelier-paper-muted);
  --paper-line: var(--atelier-paper-line);
  --teal: var(--atelier-cobalt);
  --lab-paper: var(--atelier-paper);
  --lab-ink: var(--atelier-paper-ink);
  --lab-muted: var(--atelier-paper-muted);
  --lab-border: var(--atelier-paper-line);
  --lab-teal: var(--atelier-cobalt);
  color-scheme: dark;
  color: var(--ink);
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 92% 0, #28376b32, transparent 50%),
    radial-gradient(ellipse at 0 40%, #143f5530, transparent 48%),
    linear-gradient(#a1c2ed04 1px, transparent 1px),
    linear-gradient(90deg, #a1c2ed04 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A quiet, consistent frame around the learning canvas. */
body.ai-atelier .site-header {
  background: #0a1120f5;
  border-bottom-color: #34445e;
  box-shadow: 0 1px 0 #8abfff06, 0 12px 35px #00000012;
}
body.ai-atelier .brand { flex-shrink: 0; }
body.ai-atelier .course-identity,
body.ai-atelier .fl-course { color: #d0dced; }
body.ai-atelier .course-identity a { color: inherit; }
body.ai-atelier .identity-divider { color: #59708f; }
body.ai-atelier .header-return { color: #acbed5; }
body.ai-atelier .preview-label {
  border-color: #8c759b80;
  background: #bf9bd00b;
  color: #e3d0e5;
  border-radius: 4px;
  letter-spacing: .09em;
}
body.ai-atelier .eyebrow {
  color: #a4d8f3;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .13em;
}
body.ai-atelier :is(button, .primary) {
  border-radius: 7px;
  font-family: inherit;
  border-color: #3a4d69;
}
body.ai-atelier button {
  background: #17243a;
  color: #e2ebf9;
}
body.ai-atelier button:hover { border-color: #6d92c2; background: #21314b; }
body.ai-atelier :is(.primary, button.primary) {
  color: #091a2b;
  background: #a0e4fa;
  border-color: #b4eafb;
  font-weight: 600;
  box-shadow: 0 6px 24px #3276bd1c;
}
body.ai-atelier :is(.primary, button.primary):hover { background: #c0f0ff; border-color: #d2f5ff; }
body.ai-atelier :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #f2c681;
  outline-offset: 4px;
}
body.ai-atelier :is(.header-tools, .fl-header-tools, .lab-header-tools) button {
  background: #ffffff03;
  border-color: #34465f;
  color: #c8d8eb;
}
body.ai-atelier :is(.header-tools, .fl-header-tools, .lab-header-tools) button:hover,
body.ai-atelier :is(.header-tools, .fl-header-tools, .lab-header-tools) button[aria-pressed="true"] {
  color: #d8f4ff;
  border-color: #89c7e4;
  background: #12354d;
}
body.ai-atelier :is(.fl-outline, .lesson-outline, .lab-sidebar) {
  background: #0c1525;
  border-right-color: #293a54;
  scrollbar-color: #3c5373 #101a2b;
}
body.ai-atelier :is(.fl-outline-heading h2, .outline-heading strong, .lab-sidebar h2) {
  color: #eef2fa;
  font-weight: 500;
  letter-spacing: .025em;
}
body.ai-atelier :is(.fl-period-heading, .outline-section-title) { color: #b0c4df; }
body.ai-atelier :is(.fl-period-title, .fl-period-heading span, .lab-time) { color: #8c9fb9; }
body.ai-atelier :is(.fl-activity-link, .outline-link, .lab-sidebar nav button) {
  color: #b1c0d4;
  border-radius: 6px;
}
body.ai-atelier :is(.fl-activity-link, .outline-link, .lab-sidebar nav button):hover {
  color: #e4f3ff;
  background: #1b2b43;
}
body.ai-atelier :is(.fl-activity-link, .outline-link, .lab-sidebar nav button).active {
  color: #c3ecff;
  background: linear-gradient(90deg, #284d714a, #1c2d461a);
  border-color: #5784ad80;
  box-shadow: inset 2px 0 0 #a5dfff;
}
body.ai-atelier :is(.fl-activity-link.active, .outline-link.active, .lab-sidebar nav button.active) small { color: #a2bfd9; }
body.ai-atelier :is(.fl-activity-number, .lab-step-number) { color: #849ebd; font-variant-numeric: tabular-nums; }
body.ai-atelier :is(.fl-outline-foot, .lab-sidebar-foot) { border-color: #2d3d55; color: #99b2cc; }
body.ai-atelier :is(.fl-outline-foot, .lab-sidebar-foot) a { color: #adc4df; }
body.ai-atelier :is(.fl-heading, .slide-heading, .lab-heading) h1 {
  color: #f4f5fc;
  font-weight: 500;
  letter-spacing: .035em;
}
body.ai-atelier :is(.fl-heading, .slide-heading, .lab-heading) > p:last-child { color: #b6c5db; }
body.ai-atelier :is(.fl-time, .fl-meta #lesson-progress, .slide-count, .lab-meta #lab-progress) {
  color: #93acca;
  font-variant-numeric: tabular-nums;
}

/* Cool paper is reserved for material students can observe and manipulate.
   No SVG fill/stroke or sample-background rules belong in this theme. */
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) {
  color-scheme: light;
  color: var(--atelier-paper-ink);
  background: var(--atelier-paper);
  border-color: #c8d3e5;
  border-radius: 13px;
  box-shadow: 0 18px 55px #00000030, 0 1px 0 #ffffffb3 inset;
}
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) :is(h2, h3, h4) { color: #213952; }
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) button {
  color: #2f4b6d;
  background: #fff;
  border-color: #afbed3;
  box-shadow: 0 1px 1px #172e4c08;
}
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) button:hover {
  color: #233e70;
  background: #e7edfb;
  border-color: #6d89bd;
}
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) button:is([aria-pressed="true"], .selected, .active) {
  color: #203b83;
  background: #dfe8fc;
  border-color: #5275c7;
  box-shadow: inset 0 0 0 1px #5275c7;
}
body.ai-atelier .visual-board button:is([aria-pressed="true"], .selected, .active) :is(strong, span, .visual-subtitle) {
  color: inherit !important;
}
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) button:is(.primary, .ex-primary) {
  color: #fff;
  background: #315ac6;
  border-color: #315ac6;
  box-shadow: 0 3px 10px #315ac61a;
}
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) button:is(.primary, .ex-primary):hover {
  color: #fff;
  background: #254aaa;
  border-color: #254aaa;
}
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) :is(input:not([type="range"]):not([type="checkbox"]), select, textarea) {
  color: #263e59;
  background: #fff;
  border-color: #aebed5;
  border-radius: 6px;
}
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) :is(input[type="range"], input[type="checkbox"]) { accent-color: #315ac6; }
body.ai-atelier :is(.fl-stage, .visual-board, .lab-stage) :is(button, input, select, textarea, summary):focus-visible {
  outline-color: #9b6328;
  outline-offset: 3px;
}
body.ai-atelier :is(.ex-panel, .visual-card, .pr-plan-editor) {
  background: #ffffffab;
  border-color: #c7d2e2;
  border-radius: 9px;
}
body.ai-atelier .visual-card.active { border-color: #6086cd; box-shadow: 0 0 0 2px #315ac612; }
body.ai-atelier :is(.ex-node, .visual-node) { background: #fafbfe; border-color: #b3c3dc; }
body.ai-atelier :is(.ex-note, .lab-note) {
  color: #4a627b;
  background: #e4eaf5;
  border-left-color: #7994c4;
}
body.ai-atelier :is(.ex-output, .pr-resource-result.ex-output) {
  color: #294b81;
  background: #e3eaf8;
  border-color: #becde4;
  border-left-color: #6285c5;
}
body.ai-atelier :is(.ex-question, .lab-question) { color: #2c527e; border-top-color: #bdcce0; }
body.ai-atelier .ex-chip { color: #3a5b8c; background: #e1e9f8; }
body.ai-atelier .ex-badge { color: #526986; border-color: #b3c6df; background: #f6f8fd; }
body.ai-atelier .fl-stage :is(.ex-detail, details) { color: #536a82; }
body.ai-atelier .fl-stage .ex-figure figcaption { color: #586e87; }
body.ai-atelier .lab-rule-question { color: #294a79; border-color: #7896cb; }
body.ai-atelier :is(.fl-reflection, .lab-disclosure, .fl-disclosure, .visual-caption) { color: #98adc5; }
body.ai-atelier .fl-reflection { border-top-color: #354964; }
body.ai-atelier .fl-reflection-grid label { color: #afc2d8; }
body.ai-atelier .fl-reflection-grid textarea { color: #e0eaf8; background: #122139; border-color: #415b7a; }
body.ai-atelier .fl-reflection-grid textarea::placeholder { color: #8a9fb9; }
body.ai-atelier :is(.fl-teacher, .lab-teacher, .teacher-notes) {
  color: #c4d5ec;
  background: #14243a;
  border-color: #48648a;
}
body.ai-atelier :is(.fl-teacher, .lab-teacher) small { color: #a0b8d4; }
body.ai-atelier .lab-teacher .lab-note { color: #c5d6ee; background: #20344e; border-color: #8da9d7; }
body.ai-atelier :is(.fl-break, .takeaway) { color: #c3dff3; background: #142e43; border-color: #466b87; }
body.ai-atelier .fl-break span { color: #abc2d8; }
body.ai-atelier :is(.fl-resume, .lab-resume) { color: #abc9e6; }
body.ai-atelier :is(.fl-controls, .presentation-controls, .lesson-controls, .lab-controls) {
  background: #0d1729f7;
  border-top-color: #3b506f;
  box-shadow: 0 -8px 30px #0000001c;
}
body.ai-atelier :is(.fl-control-hint, .lab-controls #lab-bottom-note) { color: #b0c2da; }
body.ai-atelier :is(.fl-toast, .lab-toast) { color: #253f70; background: #e7f0ff; border-color: #a4c1e7; }

/* The course entrance reads like an exhibition introduction. */
body.ai-atelier.course-page .course-hero { gap: 6%; }
body.ai-atelier.course-page .hero-copy h1 {
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.43;
  text-wrap: balance;
}
body.ai-atelier.course-page .hero-copy h1 .accent { color: #9de6ff; }
body.ai-atelier.course-page .hero-description { color: #b6c6dd; }
body.ai-atelier.course-page .hero-meta { color: #91a9c6; letter-spacing: .045em; }
body.ai-atelier.course-page .start-link { gap: 28px; padding: 13px 23px; }
body.ai-atelier.course-page .hero-diagram {
  border-color: #3b506f;
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 90% 0, #7272aa21, transparent 60%),
    linear-gradient(135deg, #19283ee6, #0d1b2be6);
  box-shadow: 0 22px 60px #00000030, 0 1px 0 #b2d9ff15 inset;
  position: relative;
}
body.ai-atelier.course-page .hero-diagram::before {
  content: "";
  height: 1px;
  position: absolute;
  left: 28px;
  right: 28px;
  top: -1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #a8d9fa, #ad9edc, transparent);
}
body.ai-atelier.course-page .diagram-caption { color: #9fb6d0; letter-spacing: .04em; }
body.ai-atelier.course-page .diagram-title { color: #e2ecfa; font-weight: 500; letter-spacing: .035em; }
body.ai-atelier.course-page .scene-gallery { gap: 13px; }
body.ai-atelier.course-page .scene-gallery figure {
  background: #0b1525;
  border-color: #3c506d;
  border-radius: 7px;
  box-shadow: 0 6px 15px #00000014;
}
body.ai-atelier.course-page .scene-gallery figcaption { color: #c5d8ef; padding: 7px 11px; }
body.ai-atelier.course-page .image-source-note { color: #8ba3c0; }
body.ai-atelier.course-page .section-heading h2 { color: #e5edfa; font-weight: 500; letter-spacing: .02em; }
body.ai-atelier.course-page .section-heading > p { color: #91a7c2; }
body.ai-atelier.course-page .lesson-entry {
  background: linear-gradient(100deg, #1d355339, #15213815 65%);
  border-top-color: #5e7fa8;
  border-bottom-color: #2d405c;
  border-radius: 0;
}
body.ai-atelier.course-page .lesson-entry:hover { background: linear-gradient(100deg, #2645696b, #19273e38 75%); }
body.ai-atelier.course-page .lesson-number { color: #8db6da; font-weight: 300; font-variant-numeric: tabular-nums; }
body.ai-atelier.course-page .entry-status { color: #b4c9ec; letter-spacing: .035em; }
body.ai-atelier.course-page .lesson-entry h3 { color: #eef2fa; letter-spacing: .025em; }
body.ai-atelier.course-page .lesson-entry p { color: #afc0d8; }
body.ai-atelier.course-page .entry-details { color: #91a8c5; }
body.ai-atelier.course-page .entry-arrow { color: #a1d6f3; }
body.ai-atelier.course-page .theory-path { border-bottom-color: #2f425d; }
body.ai-atelier.course-page .theory-path > div > span { color: #9bb0cc; letter-spacing: .05em; }
body.ai-atelier.course-page .theory-path strong { color: #d9e7fa; font-weight: 500; }
body.ai-atelier.course-page .theory-path small { color: #90a7c4; }
body.ai-atelier.course-page .path-arrow { color: #617e9e; }
body.ai-atelier.course-page .study-note { background: #12203999; border-color: #344a68; border-radius: 10px; }
body.ai-atelier.course-page .study-note h2 { color: #d7e5f8; }
body.ai-atelier.course-page .study-note p { color: #a4bad3; }
body.ai-atelier.course-page .study-note a { color: #a8dfff; }
body.ai-atelier .course-footer { border-top-color: #30435f; color: #8da6c4; }
body.ai-atelier .course-footer a { color: #b7cce6; }

/* Optional locally authored hero illustration, never a diagram colour filter. */
body.ai-atelier .atelier-artwork { width: 100%; height: auto; display: block; margin: 0 auto 20px; }
body.ai-atelier .atelier-art-caption { color: #a6bad4; font-size: 11px; letter-spacing: .09em; line-height: 1.8; }
body.ai-atelier.course-page .course-hero { grid-template-columns: 1fr 1.08fr; gap: 4%; padding: 46px 0 58px; min-height: 620px; }
body.ai-atelier .atelier-hero-art { margin: 0; min-width: 0; position: relative; }
body.ai-atelier .atelier-art-index { display: flex; justify-content: space-between; color: #92aacc; font-size: 10px; letter-spacing: .14em; padding: 0 3%; }
body.ai-atelier .atelier-hero-art .atelier-artwork { margin: 5px auto; }
body.ai-atelier .atelier-art-caption { display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid #3c517055; padding: 13px 3% 0; }
body.ai-atelier.course-page .atelier-sample-entry { border-top: 0; padding-top: 22px; padding-bottom: 22px; }
body.ai-atelier.course-page .atelier-sample-entry h3 { font-size: 20px; }
body.ai-atelier.course-page .atelier-sample-entry .lesson-number { font-size: 23px; min-width: 48px; }
body.ai-atelier .atelier-scenes { padding-top: 55px; }
body.ai-atelier.course-page .atelier-scenes .scene-gallery { grid-template-columns: repeat(4,minmax(0,1fr)); }
@media (max-width: 850px) {
  body.ai-atelier.course-page .course-hero { gap: 3%; min-height: 480px; padding: 40px 0; }
  body.ai-atelier .atelier-art-caption { flex-direction: column; gap: 0; font-size: 10px; }
}
@media (max-width: 600px) {
  body.ai-atelier.course-page .course-hero { grid-template-columns: 1fr; gap: 24px; padding: 32px 0 38px; }
  body.ai-atelier .atelier-hero-art { width: 100%; max-width: 430px; justify-self: center; }
  body.ai-atelier .atelier-art-caption { flex-direction: row; gap: 8px; }
  body.ai-atelier .atelier-scenes { padding-top: 36px; }
  body.ai-atelier.course-page .atelier-scenes .scene-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* The review sheet shares the same ink and spectral blue vocabulary. */
body.ai-atelier.theory-guide-page :is(.guide-heading, .guide-period, .guide-foot) { border-color: #334963; }
body.ai-atelier.theory-guide-page :is(.guide-heading h1, .guide-period h2, .guide-work h2) { color: #eef3fc; font-weight: 500; }
body.ai-atelier.theory-guide-page .guide-period-number { color: #8eb6db; font-variant-numeric: tabular-nums; }
body.ai-atelier.theory-guide-page .review-scenes img { border: 1px solid #4c6282; border-radius: 7px; }
body.ai-atelier.theory-guide-page .review-scenes figcaption { color: #bdd0e7; }
body.ai-atelier.theory-guide-page .review-flow { color: #d5e4f8; background: #1c345143; border-color: #48678c; }
body.ai-atelier.theory-guide-page .review-flow > span { color: #7d9bbf; }
body.ai-atelier.theory-guide-page .guide-recall summary { color: #b6dcfb; }
body.ai-atelier.theory-guide-page .guide-recall p { color: #b5c6db; }
body.ai-atelier.theory-guide-page .review-training-input strong { color: #b3d4fa; border-bottom-color: #7f9dca; }
body.ai-atelier.theory-guide-page .review-comparison > div { border-left-color: #6689b9; }
body.ai-atelier.theory-guide-page .review-task-lines > div { border-bottom-color: #334963; }
body.ai-atelier.theory-guide-page .review-task-lines strong { color: #b4d5f6; }
body.ai-atelier.theory-guide-page .review-task-lines p { color: #b7c8de; }
body.ai-atelier.theory-guide-page .work-fields li { border-top-color: #7797bc; }
body.ai-atelier.theory-guide-page .work-example { background: #e2bd8810; border-left-color: #d0ad7e; }
body.ai-atelier.theory-guide-page .guide-archive a { color: #acd5f4; }

@media (max-width: 600px) {
  body.ai-atelier.course-page .hero-copy h1 { letter-spacing: .02em; }
  body.ai-atelier.course-page .hero-diagram { border-radius: 10px; }
  body.ai-atelier.course-page .scene-gallery { gap: 9px; }
  body.ai-atelier.course-page .scene-gallery figcaption { padding: 6px 8px; }
  body.ai-atelier.course-page .start-link { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ai-atelier { scroll-behavior: auto; }
  body.ai-atelier *, body.ai-atelier *::before, body.ai-atelier *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  body.ai-atelier { color: #172b43; background: #fff; }
  body.ai-atelier.course-page :is(.hero-diagram, .lesson-entry, .study-note),
  body.ai-atelier.theory-guide-page :is(.review-flow, .work-example) { background: #fff; box-shadow: none; }
  body.ai-atelier.theory-guide-page :is(h1, h2, h3, p, strong, small, span, a, summary, figcaption) { color: #172b43 !important; }
}