/* One material, three pigments. Loaded after layout and mobile styles. */
:root {
  --cream: #faf3e3;
  --milk: #fff9ed;
  --sky: #dce6fa;
  --yellow: #ffdc45;
  --blue: #2449ed;
  --ink: #242c46;
  --muted: #5e625f;
  --muted-blue: #52617d;
  --muted-lilac: #625a43;
  --muted-warm: #645326;
  --clay-grain: url('assets/clay-surface.webp');
  --milk-relief: inset 3px 4px 10px #fffdf580, inset -4px -6px 12px #cabda780, 0 6px 0 #cfc3ac, 0 12px 18px #66563718;
  --sky-relief: inset 3px 4px 10px #f5f8ff70, inset -4px -6px 12px #9dafd080, 0 6px 0 #a4b7d9, 0 12px 18px #243d7018;
  --yellow-relief: inset 3px 4px 10px #fff1a060, inset -4px -6px 12px #cda52d80, 0 6px 0 #c59b27, 0 12px 18px #69531c20;
  --blue-relief: inset 3px 4px 12px #7694ff65, inset -4px -6px 14px #1735afaa, 0 6px 0 #152d99, 0 12px 18px #19357a25;
}

body { background: var(--cream); }
h2, h3 { text-wrap: balance; }
.blue-world, .clay-chapter, .neuro-section, .possibilities, .skill-section,
.teacher-band, .join, .part2, .resource-kit {
  background-image: var(--clay-grain);
}
.blue-world {
  box-shadow: inset 0 -8px 14px #1737b6, 0 6px 0 #192fa4;
  border-radius: 0 0 48px 38px;
}
.path { padding-top: 90px; padding-bottom: 85px; }
.clay-chapter {
  background-color: var(--sky);
  border-radius: 46px 35px 42px 32px;
  box-shadow: inset 0 5px 9px #f7faff, inset 0 -8px 12px #b7c8e5, 0 6px 0 #afc1df;
}
.neuro-section { margin: 30px 0 0; background-color: var(--yellow); box-shadow: var(--yellow-relief); }
.possibilities { margin-top: 0; background-color: var(--cream); color: var(--ink); border-radius: 0; }
.skill-section {
  margin-top: 0; background-color: var(--blue);
  border-radius: 44px 35px 47px 33px; box-shadow: var(--blue-relief);
}
.teacher-band {
  background-color: var(--blue); border-radius: 44px 35px 47px 33px;
  box-shadow: var(--blue-relief);
}
.faq { padding-top: 80px; }
.join { margin-top: 30px; background-color: var(--yellow); box-shadow: var(--yellow-relief); }

/* Broad matte highlights, rounded edges and a visible soft underside. */
.step, .step:nth-child(2), .step:nth-child(3), .audience-row article,
.module, .faq-list details, .resource-links a, .workflow-panel {
  background: var(--clay-grain), var(--milk);
  box-shadow: var(--milk-relief); border: 0;
  border-radius: 26px 22px 29px 23px;
}
.step:nth-child(2) { border-radius: 22px 29px 24px 28px; }
.step:nth-child(3) { border-radius: 29px 23px 27px 21px; }
.outcome { border-color: #d9ceba; }
.note-stamp { color: #9b4c24; border-color: #9b4c24; }
.step:hover { transform: none; }
.author-tag {
  background: var(--clay-grain), var(--milk); color: var(--ink);
  border: 0; backdrop-filter: none; box-shadow: var(--milk-relief);
  border-radius: 19px 16px 22px 17px;
}
.author-tag div>span { color: var(--muted); }
.tag-dot { background: var(--blue); box-shadow: inset 1px 2px 2px #8aa3ff; }
.tag-arrow { color: var(--blue); }
.audience-row article:nth-child(n)>span {
  background: var(--yellow); color: var(--ink);
  box-shadow: var(--yellow-relief); text-shadow: 1px 2px #fff1a0;
}
.audience-row article:nth-child(even)>span {
  background: var(--blue); color: var(--milk);
  box-shadow: var(--blue-relief); text-shadow: 1px 2px #1735af;
}
/* Двенадцать букв на пяти пластилиновых цветах. Цвет и обе тени берутся
   из переменных, поэтому мелкий экран меняет только глубину, а не палитру. */
.neuro-word>span:nth-child(n) {
  --face: #2449ed; --lite: #8ca4ff; --deep: #1c38ae;
  color: var(--face);
  text-shadow: 1px 2px var(--lite), 3px 5px var(--deep), 5px 9px 8px #93732b35;
}
.neuro-word>span:nth-child(2), .neuro-word>span:nth-child(8) {
  --face: #ee7639; --lite: #ffbb8e; --deep: #a8451c;
}
.neuro-word>span:nth-child(3), .neuro-word>span:nth-child(7), .neuro-word>span:nth-child(12) {
  --face: #a768be; --lite: #dcaeea; --deep: #6b3a80;
}
.neuro-word>span:nth-child(4), .neuro-word>span:nth-child(9) {
  --face: #e0533f; --lite: #ffa08f; --deep: #94301f;
}
.neuro-word>span:nth-child(5), .neuro-word>span:nth-child(11) {
  --face: #5f9b3c; --lite: #a9d982; --deep: #3c6526;
}
.project-options button, .neuro-repeat { background: var(--milk); box-shadow: var(--milk-relief); }
.project-options button { background-image: var(--clay-grain); }
.project-options button>span { color: var(--blue); }

/* The laboratory is a light workbench; the result section that follows is blue. */
.possibilities .section-label, .lab-kicker { color: var(--muted-blue); }
.possibilities h2 em, .lab-instruction, .possibilities-footer a { color: var(--blue); }
.possibilities-heading>p, .lab-story>p, .lab-extension p,
.possibilities-footer p { color: var(--muted-blue); }
.project-lab { background: var(--clay-grain), var(--sky); box-shadow: var(--sky-relief); }
.lab-selector, .lab-extension, .lab-caption { border-color: #aebfdd; }
.lab-selector button {
  background: var(--milk); color: var(--muted-blue); box-shadow: var(--milk-relief);
}
.lab-selector b { color: var(--ink); }
.lab-selector button[aria-pressed=true] {
  background: var(--blue); color: #e8edff; box-shadow: var(--blue-relief);
}
.lab-selector button[aria-pressed=true] b { color: white; }
.lab-caption, .lab-caption>span:first-child { color: var(--muted-blue); }
.lab-caption i { color: var(--blue); }
.possibilities-footer a { border-color: #a5b3da; }
.lab-window, .calc-window, .library-window {
  background: var(--clay-grain), var(--milk); color: var(--ink); box-shadow: var(--milk-relief);
}
.lab-window-top, .calc-window .lab-window-top, .library-window .lab-window-top { border-color: #dacfb9; }
.lab-dots, .pet-progress, .library-results details p, .library-status { color: var(--muted-blue); }
.pet-progress>div { background: #d9cfbb; box-shadow: inset 1px 2px 3px #afa288; }
.pet-tasks input:checked+span { color: var(--muted); }
.pet-bubble { background: var(--yellow); box-shadow: var(--yellow-relief); }
.calc-total { background: var(--yellow); box-shadow: var(--yellow-relief); color: var(--ink); }
.calc-total output { color: var(--ink); }
#card-quantity { accent-color: var(--blue); }
.calc-range-labels, .lab-demo-note { color: var(--muted-warm); }
.library-search { background: var(--cream); box-shadow: inset 2px 3px 5px #cfc3ac, inset -2px -2px 3px #fffdf5; }

.skill-section .section-label, .skill-intro>p, .skill-outcomes p { color: #e0e8ff; }
.skill-intro h2 em { color: var(--yellow); }
.skill-outcomes article { border-color: #8da5ff66; }
.skill-outcomes article>span { background: var(--yellow); box-shadow: var(--yellow-relief); color: var(--ink); }
.skill-clay-art { box-shadow: none; }
.module { margin-bottom: 15px; }
.module[open] { background: var(--sky); box-shadow: var(--sky-relief); }
.module-result { background: var(--cream); color: var(--ink); box-shadow: inset 2px 3px 5px #c7baa2, inset -2px -2px 4px #fffdf5; }
.module .plus, .part2-lessons .plus, .faq-list .plus {
  background: var(--blue); box-shadow: var(--blue-relief); color: white;
}
.program-diorama img { box-shadow: var(--milk-relief); }
.part2 { background-color: var(--yellow); box-shadow: var(--yellow-relief); }
.part2-lessons details { border-color: #c5a53c; }
.part2-intro>p, .part2-teacher div>span, .part2-lessons details>p { color: var(--muted-warm); }
.part2-teacher img { border-color: var(--milk); }
.resource-kit { background-color: var(--sky); box-shadow: var(--sky-relief); }
.resource-kit p { color: var(--muted-blue); }
.resource-icon { background: var(--yellow); box-shadow: var(--yellow-relief); color: var(--ink); }
.resource-links a>span:last-child { color: var(--blue); }
.practice-grid { background: var(--milk); box-shadow: var(--milk-relief); }
#brief-form { background: var(--clay-grain), var(--milk); }
.prompt-panel { background: var(--clay-grain), var(--sky); box-shadow: inset 3px 4px 8px #f5f8ff, inset -4px -5px 8px #b3c3e1; }
#brief-form input, #brief-form select, #brief-form textarea {
  background: #f3ead7; border: 0; border-radius: 14px 17px 13px 16px;
  box-shadow: inset 2px 3px 5px #c9bda5, inset -2px -3px 4px #fffdf5;
  color: var(--ink);
}
.teacher-copy .section-label, .teacher-copy>p { color: #dce6ff; }
.teacher-copy .teacher-lead { color: #fff9ed; }
.teacher-quote { background: #3157df; box-shadow: inset 3px 4px 7px #6686f5, inset -3px -4px 8px #1735af; }
.teacher-quote blockquote { color: #fff9ed; }
.teacher-quote figcaption { color: #e0e8ff; }
.experience span { background: #3157df; border: 0; box-shadow: inset 1px 2px 3px #6e8bf3, inset -2px -3px 4px #1b3bb8; }
#anton .teacher-real { background: var(--milk); box-shadow: var(--milk-relief); }
#anton .teacher-real>span { color: var(--muted); }
.case-art { background: var(--sky); box-shadow: var(--sky-relief); }
.case-art .case-tag { background: var(--milk); color: var(--muted-blue); box-shadow: inset 1px 2px 3px white, 0 3px 0 #cfc3ac; }
.teaching-art { background: var(--sky); }
.teach-figure, .teach-figure-alt, .platform-tile {
  background: var(--milk); color: var(--blue); box-shadow: var(--milk-relief);
}
.teach-arrow { color: var(--blue); }
.faq-list details { margin-bottom: 15px; }
.join-note { color: var(--muted-warm); }
footer, .footer-legal { border-color: #d9ceba; }

/* Real hand-rolled clay texture: only surfaces, never filters on readable text. */
body, .blue-world, .clay-chapter, .neuro-section, .possibilities,
.skill-section, .teacher-band, .join, .part2, .resource-kit,
.step, .step:nth-child(2), .step:nth-child(3), .audience-row article,
.module, .module[open], .faq-list details, .resource-links a, .workflow-panel,
.author-tag, .project-options button, .project-lab, .lab-window,
.calc-window, .library-window, #brief-form, .prompt-panel,
.clay-button, .solid-button, .teacher-quote, .case-art,
.lab-selector button, .lab-selector button[aria-pressed=true] {
  background-image: none;
  background-blend-mode: multiply;
  background-size: 580px 580px;
}
.step, .audience-row article, .project-lab, .part2, .resource-kit {
  border-radius: 31px 25px 35px 27px / 25px 34px 26px 32px;
}
.step:nth-child(2), .audience-row article:nth-child(even) {
  border-radius: 24px 34px 26px 31px / 31px 24px 35px 25px;
  background-position: 90px 170px;
}
.step:nth-child(3) { background-position: 250px 80px; }
.clay-button, .join .clay-button { box-shadow: var(--yellow-relief); }
.join .clay-button { box-shadow: var(--blue-relief); }
.teacher-quote { box-shadow: inset 3px 4px 12px #6686f545, inset -3px -4px 14px #1735af99; }
.clay-window, .little-note, .clay-code, .clay-ball, .check, .clay-pet,
.audience-row article:nth-child(n)>span, .skill-outcomes article>span,
.module .plus, .part2-lessons .plus, .faq-list .plus, .resource-icon,
.platform-tile, .server-tile, .teach-figure, .teach-figure-alt {
  background-image: var(--clay-grain); background-blend-mode: multiply;
  background-size: 260px 260px;
}
.skill-clay-art {
  width: 100%; max-width: 510px; height: auto; max-height: none;
  aspect-ratio: 3 / 2; object-fit: contain; border-radius: 0;
  mask-image: none; -webkit-mask-image: none;
  margin: -20px 0 18px;
}
.clay-toolkit-art { display: block; width: 250px; max-width: 100%; height: auto; margin: -20px 0 10px; }
.clay-question-art { display: block; width: 225px; max-width: 65%; height: auto; margin: 5px 0 20px; }
.resource-kit { align-items: center; }
:where(.sculpted-surface) { position: relative; isolation: isolate; }
.sculpted-surface::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; border-radius: inherit;
  background: var(--clay-grain) 0 0 / 580px 580px;
  mix-blend-mode: multiply; opacity: .42;
}
.sculpted-surface .sculpted-surface::after { opacity: .32; }

/* Pressable objects share the same light direction and yielding motion. */
.clay-button, .solid-button, .mobile-menu-button, .neuro-repeat,
.project-options button, .lab-selector button, .resource-links a {
  transition: transform .18s ease, box-shadow .18s ease;
}
.clay-button, .solid-button { background-image: var(--clay-grain); }
.solid-button { box-shadow: var(--blue-relief); }
.mobile-menu-button { background: #3157df; border: 0; box-shadow: var(--blue-relief); }
.neuro-repeat:active, .project-options button:active, .resource-links a:active {
  transform: translateY(4px) scale(.99);
  box-shadow: inset 2px 3px 6px #cfc3ac, inset -2px -3px 4px #fffdf5, 0 1px 0 #cfc3ac;
}
.lab-selector button:active, .solid-button:active, .mobile-menu-button:active { transform: translateY(4px) scale(.99); }
.solid-button:active { box-shadow: inset 3px 4px 7px #1735af, inset -2px -3px 5px #7694ff, 0 1px 0 #152d99; }
:is(a,button,summary,input,select,textarea):focus-visible { outline: 3px solid #a74416; outline-offset: 5px; }
:is(.blue-world,.skill-section,.teacher-band) :is(a,button):focus-visible { outline-color: var(--yellow); }

@media (max-width:700px) {
  .path { padding-top: 55px; padding-bottom: 55px; }
  .clay-chapter, .skill-section, .teacher-band { border-radius: 29px 23px 31px 24px; }
  .neuro-section { margin-top: 22px; }
  .join { margin-top: 22px; }
  .faq { padding-top: 55px; }
  .lab-window, .calc-window, .library-window { box-shadow: var(--milk-relief); }
  .neuro-word>span:nth-child(n) { text-shadow: 1px 2px var(--lite), 2px 3px var(--deep); }
  .skill-clay-art { max-width: 370px; max-height: none; margin: -12px auto 20px; }
  .clay-toolkit-art { width: 200px; margin: -12px auto 12px; }
  .clay-question-art { width: 155px; margin: 0 0 18px; }
}
@media (prefers-reduced-motion:reduce) {
  .clay-button, .solid-button, .mobile-menu-button, .neuro-repeat,
  .project-options button, .lab-selector button, .resource-links a { transition: none; }
  .clay-button:hover, .clay-button:active, .solid-button:active, .mobile-menu-button:active,
  .neuro-repeat:active, .project-options button:hover, .project-options button:active,
  .lab-selector button:active, .resource-links a:hover, .resource-links a:active { transform: none; }
}