/* V4: reading contrast, practical guide directory and actual course video. */
:root { --muted: #294e58; }
.lede, .rows span, .tiles p, .guide p, .aside p, .shot figcaption { color: var(--muted); }
.dark .lede { color: #e2ece7; }
.service:nth-child(2) p, .service:nth-child(2) .num { color: #e2ece7; }
.learning-tiles article:first-child p, .learning-tiles article:first-child .num { color: #e2ece7; }
.motion-pending .motion-item { opacity: 1; }
.will-reveal { opacity: 1; }
.split-title .lede { color: #294e58; }
.dark .split-title .lede { color: #e2ece7; }
.article-meta { color: #315963; font-size: .8rem; font-weight: 750; margin-bottom: 1.2rem; }
.article-toc { background: #e5ece6; padding: 1.25rem 1.5rem; border: 1px solid #b5c9be; border-radius: 4px 4px 22px 4px; margin-bottom: 2.5rem; }
.article-toc strong { font-size: 1.1rem; }
.article-toc ol { margin-bottom: 0; }
.article-toc a { color: #124b60; font-size: .94rem; }
.article-copy .article-lead { font-size: 1.17rem; }
.article-copy section[id] { scroll-margin-top: 110px; }
.article-copy li { padding-bottom: .3rem; }
.guide-note { padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .82rem; color: #315963; margin-top: 2.4rem; }
.guide-all { margin-top: 1.7rem; }
.guide-topics { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 3rem; }
.guide-topics a { display: inline-flex; align-items: center; gap: .8rem; padding: .6rem .85rem; color: #103b46; border: 1px solid #97b3a9; border-radius: 4px; text-decoration: none; font-weight: 750; font-size: .84rem; }
.guide-topics a:hover { background: #dce8dc; border-color: #3b7163; }
.guide-category { margin-top: 3rem; }
.guide-category > h3 { padding: 0 0 1.2rem; font-size: 1.6rem; }
.guide-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.guide-card { display: flex; flex-direction: column; padding: 27px; background: #fdfcf7; border: 1px solid #b6c8c2; border-radius: 4px 4px 24px 4px; text-decoration: none; transition: transform .2s,border-color .2s; }
.guide-card:hover { transform: translateY(-4px); border-color: #487969; }
.guide-card-icon { color: var(--blue); margin-bottom: 1.6rem; }
.guide-card h4 { color: var(--ink); font-size: 1.23rem; line-height: 1.18; letter-spacing: -.025em; margin: 0 0 .9rem; }
.guide-card p { color: #294e58; margin-bottom: 1.6rem; font-size: .94rem; }
.guide-card .read { display: flex; align-items: center; gap: 1rem; font-size: .8rem; font-weight: 850; margin-top: auto; padding-top: 1rem; border-top: 1px solid #c6d1d0; }
.faq-list { border-top: 1px solid #a3bdb2; }
.faq-list details { border-bottom: 1px solid #a3bdb2; padding: 1rem 0; }
.faq-list summary { cursor: pointer; font-size: 1.02rem; font-weight: 800; color: #103b46; padding-right: 1rem; }
.faq-list details p { color: #294e58; padding: .9rem 0 0; margin: 0; }
.learning-demo { padding: 24px; border-color: #97b9b1; background: #173f49; color: #f5f3ec; }
.demo-top { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800; color: #e2ece7; letter-spacing: .03em; margin-bottom: 14px; }
.live-dot { display: inline-block; width: 6px; height: 6px; background: #c2d94e; border-radius: 50%; flex: none; }
.course-demo { display: block; width: 100%; aspect-ratio: 16/9; background: #fff; border: 1px solid #91aaa5; border-radius: 5px; object-fit: contain; }
.learning-demo figcaption { font-weight: 800; font-size: 1.15rem; color: #f5f3ec; margin: 18px 0 15px; }
.demo-stages { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.demo-stages > span { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font-size: .7rem; font-weight: 750; line-height: 1.3; background: #214b56; padding: 13px 11px; border: 1px solid #769a94; border-radius: 4px; }
.demo-stages .visual-icon { color: #c2d94e; width: 22px; height: 22px; }
.demo-description { color: #dce9e2; font-size: .69rem; line-height: 1.5; margin: 16px 0 0; }
.contact-hint { font-size: .85rem; color: #294e58; margin: 1.2rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .motion-pending .motion-item { opacity: 1; transform: translateY(16px); }
  @keyframes arrive { from { opacity: 1; transform: translateY(11px); } to { opacity: 1; transform: none; } }
  @keyframes scene-arrive { from { opacity: 1; transform: translateY(13px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 1001px) { .aside { position: sticky; top: 106px; } }
@media (max-width: 1000px) { .guide-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } .learning-demo { padding: 18px; } }
@media (max-width: 600px) { .guide-cards { grid-template-columns: 1fr; } .guide-card { padding: 24px; } .guide-topics { gap: 7px; } .guide-topics a { font-size: .78rem; padding: .55rem .65rem; } .article-toc { padding: 1.1rem; } }
@media (max-width: 360px) { .demo-stages { gap: 5px; } .demo-stages > span { padding: 10px 7px; font-size: .64rem; } .demo-top { font-size: .66rem; } }