/* Shared theme + language controls for every MOKE AIGC page. */
:root {
  color-scheme: dark;
  --moke-control-bg: rgba(7,7,7,.82);
  --moke-control-fg: #e1e0cc;
  --moke-control-border: rgba(225,224,204,.24);
}

html[data-theme="light"] {
  color-scheme: light;
  --moke-page: #ffffff;
  --moke-video-mask: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,.8) 50%, transparent 100%);
  --moke-pill: #F4F4F6;
  --moke-ink: #000000;
  --moke-muted: rgba(0,0,0,.55);
  --moke-button-border: rgba(0,0,0,.35);
  --moke-pill-border: rgba(0,0,0,.12);
  --moke-pill-text: #ffffff;
  --moke-label-text: #000000;
  --moke-surface: #ffffff;
  --moke-surface-soft: #f4f4f6;
  --moke-media-surface: #eef0f2;
  --moke-accent-text: #9f2026;
  --moke-control-bg: #000000;
  --moke-control-fg: #ffffff;
  --moke-control-border: rgba(0,0,0,.35);

  /* Tutorial / industrial pages use these variables directly. */
  --bg: #ffffff;
  --bg-grid: #ffffff;
  --surface: #ffffff;
  --surface2: #F4F4F6;
  --surface3: #F4F4F6;
  --border: rgba(0,0,0,.12);
  --border-strong: rgba(0,0,0,.35);
  --text: #000000;
  --text2: rgba(0,0,0,.55);
  --text3: rgba(0,0,0,.55);
  --accent: #000000;
  --accent2: #000000;
  --amber: #000000;
  --amber2: #F4F4F6;
  --steel: #F4F4F6;
  --danger: #000000;
  --ok: #000000;
}

html[data-theme="light"] body {
  filter: none;
  background: var(--moke-page) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] img,
html[data-theme="light"] video,
html[data-theme="light"] canvas,
html[data-theme="light"] picture,
html[data-theme="light"] iframe,
html[data-theme="light"] svg.image-preserve,
html[data-theme="light"] .about-carousel,
html[data-theme="light"] .hero-video {
  filter: none;
}

/* Page canvas and editorial surfaces. */
html[data-theme="light"] :where(.hero, .workspace, .results, .content, .section, .video-lessons) {
  background-color: var(--moke-page) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(.top, .site-top) {
  background: rgba(255,255,255,.94) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(.brand, .site-brand, .site-nav a, .site-menu a) {
  color: var(--moke-ink) !important;
}
/* Navigation must remain readable even when individual pages set link colors. */
html[data-theme="light"] body :is(.site-nav, .site-menu) a { color: #333 !important; }
html[data-theme="light"] body :is(.site-nav, .site-menu) a:is(:hover, :focus-visible, .active) { color: #000 !important; text-decoration: underline; text-underline-offset: 5px; }

html[data-theme="light"] :where(h1, h2, h3, h4, h5, strong, .ch-title, .hero-title, .article-header h2, .section-head h2) {
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(p, .desc, .hint, .meta, .route, .hero-sub, .ch-sub, .video-lessons-meta, .carousel-kicker, .carousel-status) {
  color: var(--moke-muted) !important;
}

html[data-theme="light"] :where(.card, .intro-card, .hot-panel, .skill-card, .video-card, .info-card, .principle, .flow-step, .toc-item, .carousel-shell, .toolbox, .sidebar) {
  background-color: var(--moke-page) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

/* Dynamic detail, account and legal surfaces used by the production frontend. */
html[data-theme="light"] :where(
  .account-panel, .account-card, .account-form, .analysis-box, .publish-box, .record,
  .activity-record, .activity-summary article, .status-box, .avatar-editor,
  .skill-hero, .skill-main, .skill-side, .tab-panel, .install-card, .security-card,
  .file-browser, .file-dialog, .file-preview, .metric-card,
  .article-toolbar, .article-sidebar, .article-main, .article-summary, .article-body,
  .legal-shell, .legal-section, .legal-meta, .legal-toc
) {
  background-color: var(--moke-page) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(
  .account-hero, .account-tabs, .activity-tabs, .article-hero, .article-deck,
  .article-footer, .skill-page, .skill-layout, .legal-top, .legal-footer
) {
  background-color: var(--moke-page) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(
  .account-panel p, .account-card p, .account-form small, .record small,
  .activity-record p, .article-summary p, .article-body p, .article-deck p,
  .skill-hero p, .skill-side p, .tab-panel p, .legal-lead, .legal-section p,
  .legal-section li, .legal-meta dt
) { color: var(--moke-muted) !important; }

html[data-theme="light"] :where(textarea, select) {
  background: var(--moke-page) !important;
  border-color: var(--moke-button-border) !important;
  color: var(--moke-ink) !important;
}

/* Requested light video fade. */
html[data-theme="light"] .hero-frame::after,
html[data-theme="light"] .feature-card.video::after,
html[data-theme="light"] .media::after,
html[data-theme="light"] .carousel-ambient::after {
  background: var(--moke-video-mask) !important;
}

/* The homepage menu remains a black pill with white Menu/nav text. */
html[data-theme="light"] .nav-pill {
  background: var(--moke-ink) !important;
  color: var(--moke-pill-text) !important;
  border-color: var(--moke-ink) !important;
}

html[data-theme="light"] .nav-pill :where(a, button) { color: var(--moke-pill-text) !important; }

/* Labels use the supplied cool-gray pill token and white label copy. */
html[data-theme="light"] :where(.label, .tag, .pill, .category, .article-tag, .hero-badge, .ch-tag, .ch-img-badge, .filter.active) {
  background: var(--moke-pill) !important;
  border: 1px solid var(--moke-pill-border) !important;
  color: var(--moke-label-text) !important;
  border-radius: 999px;
}

/* Primary actions and icon pills. */
html[data-theme="light"] :where(.button.primary, .copy, .read, .cta, .shuffle, .video-play, .carousel-control, .fs-toggle, .sidebar-fab) {
  background: var(--moke-ink) !important;
  border-color: var(--moke-ink) !important;
  color: var(--moke-pill-text) !important;
}

/* Transparent controls share the 35% black border token. */
html[data-theme="light"] :where(.button:not(.primary), .filter:not(.active), .social-link, .prompt-action, .prompt-btn, .fs-preset, .side-link, .email-link) {
  background: transparent !important;
  border-color: var(--moke-button-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(input, .search, .search-input, .subject-input) {
  background: var(--moke-page) !important;
  border-color: var(--moke-button-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(.lang-switch, .site-lang, .moke-global-dock) {
  background: var(--moke-ink) !important;
  border-color: var(--moke-ink) !important;
  color: var(--moke-pill-text) !important;
}

html[data-theme="light"] :where(.lang-switch, .site-lang, .moke-global-dock) button:not(.active) {
  color: var(--moke-pill-text) !important;
}

html[data-theme="light"] :where(.lang-switch, .site-lang, .moke-global-dock) button.active {
  background: var(--moke-pill) !important;
  color: var(--moke-ink) !important;
}

/* Hard-coded dark panels in the RED tutorial are normalized here. */
html[data-theme="light"] :where(.statusbar, .fs-panel, .prompt-drawer, .prompt-text, .sidebar-head) {
  background: var(--moke-page) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] body::before {
  background-image: linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px) !important;
}

/* Today / intelligence index: remove the remaining page-level dark canvas. */
html[data-theme="light"] :where(.intel-head, .intel-toolbar, .masonry, .date-group, .timeline-list) {
  background: var(--moke-page) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] .intel-head {
  border-color: var(--moke-pill-border) !important;
}

html[data-theme="light"] :where(.intel-head h1, .date-heading h2, .hot-panel li, .body h2) {
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(.intel-kicker, .intel-date, .date-heading span, .timeline-time, .hot-panel em, .body p, .date) {
  color: var(--moke-muted) !important;
}

html[data-theme="light"] .intel-toolbar .filter:not(.active) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--moke-muted) !important;
}

html[data-theme="light"] .intel-toolbar .filter.active {
  background: var(--moke-pill) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] .timeline-list .tag {
  background: var(--moke-pill) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] .search-form input {
  background: var(--moke-page) !important;
  border-color: var(--moke-button-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] .search-form button {
  background: var(--moke-ink) !important;
  color: var(--moke-pill-text) !important;
}

html[data-theme="light"] :where(.hot-panel-inner, .timeline-list .card) {
  background: var(--moke-page) !important;
  border-color: var(--moke-pill-border) !important;
}

html[data-theme="light"] .hot-panel header,
html[data-theme="light"] .actions {
  border-color: var(--moke-pill-border) !important;
}

html[data-theme="light"] .timeline-list::before {
  background: var(--moke-pill-border) !important;
}

html[data-theme="light"] .timeline-list .card::before {
  border-color: var(--moke-page) !important;
}

html[data-theme="light"] .timeline-list .card:hover {
  background: var(--moke-pill) !important;
  border-color: var(--moke-button-border) !important;
}

/* Home: the moving-image hero remains cinematic; editorial content uses the
   normal light canvas and readable card hierarchy. */
html[data-theme="light"] :where(.article-index, .features) {
  background: var(--moke-page) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(.article-card, .page-panel-main, .page-index, .feature-card) {
  background: var(--moke-surface) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.045);
}

html[data-theme="light"] :where(.article-card:hover, .feature-card:hover, .index-row:hover) {
  background: var(--moke-surface-soft) !important;
}

html[data-theme="light"] :where(.article-media, .page-image, .feature-icon, .index-row) {
  background: var(--moke-media-surface) !important;
  border-color: var(--moke-pill-border) !important;
}

html[data-theme="light"] :where(
  .article-body h3, .features-head h2, .page-panel h3, .feature-card h3,
  .index-row strong, .article-read, .learn
) { color: var(--moke-ink) !important; }

html[data-theme="light"] :where(
  .article-body p, .article-note, .page-panel p, .index-row span,
  .feature-card h3 small, .checks
) { color: var(--moke-muted) !important; }

html[data-theme="light"] :where(.page-tab, .article-filter) {
  background: var(--moke-surface) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-muted) !important;
}

html[data-theme="light"] :where(.page-tab.active, .article-filter.active, .article-filter:hover) {
  background: var(--moke-ink) !important;
  border-color: var(--moke-ink) !important;
  color: #fff !important;
}

/* The light homepage fades the lower video edge into the page canvas, so copy
   in that editorial zone stays dark and readable. */
html[data-theme="light"] .hero-frame :where(
  .hero-title, .hero-title .asterisk, .editorial-title, .editorial-line.lead
) { color: var(--moke-ink) !important; }

html[data-theme="light"] .hero-frame :where(
  .hero-side p, .editorial-line, .editorial-note, .swipe-cue
) { color: var(--moke-muted) !important; }

html[data-theme="light"] .hero-frame :where(.editorial-kicker, .social-link) {
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(0,0,0,.2) !important;
  color: rgba(0,0,0,.72) !important;
}

/* Intelligence navigation, cards and media framing. */
html[data-theme="light"] .intel-modes {
  background: rgba(255,255,255,.96) !important;
  border-color: var(--moke-pill-border) !important;
}

html[data-theme="light"] .intel-modes a {
  background: transparent !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-muted) !important;
}

html[data-theme="light"] .intel-modes :where(a:hover, a.active) {
  background: var(--moke-ink) !important;
  border-color: var(--moke-ink) !important;
  color: #fff !important;
}

html[data-theme="light"] :where(.media, .moke-media-row, .moke-media-cell) {
  background: var(--moke-media-surface) !important;
  border-color: var(--moke-pill-border) !important;
}

html[data-theme="light"] :where(.identity-avatar, .endpoint, .moke-reason) {
  background: var(--moke-surface-soft) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(
  .filter-label, .category-filter, .category-filter small, .identity-copy small,
  .identity-platform, .timeline-load-state, .moke-reason p
) { color: var(--moke-muted) !important; }

html[data-theme="light"] :where(
  .category-filter:hover, .category-filter.active, .identity-copy strong,
  .identity-avatar:hover, .identity-platform:hover, .moke-reason strong
) { color: var(--moke-ink) !important; }

/* Skill catalogue: normalize every nested surface, not just the outer card. */
html[data-theme="light"] :where(.hero-meta, .skill-card, .empty) {
  background: var(--moke-surface) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(.skill-card:hover, .skill-stats, .card-open, .skill-security) {
  background: var(--moke-surface-soft) !important;
  border-color: var(--moke-pill-border) !important;
}

html[data-theme="light"] :where(
  .skill-card .skill-top h3, .skill-author-copy b, .skill-stats b,
  .skill-card-footer, .library-head h2, .strip-head h2
) { color: var(--moke-ink) !important; }

html[data-theme="light"] :where(
  .skill-card .skill-summary, .skill-author-copy small, .skill-author-row time,
  .skill-stats small, .skill-version, .skill-security, .empty
) { color: var(--moke-muted) !important; }

html[data-theme="light"] :where(.skill-locator, .skill-stats i, .hero-meta strong) {
  color: var(--moke-accent-text) !important;
}

html[data-theme="light"] .skill-summary-box.is-truncated::after {
  background: linear-gradient(90deg, transparent, var(--moke-surface) 72%) !important;
}

html[data-theme="light"] .skill-card:hover .skill-summary-box.is-truncated::after {
  background: linear-gradient(90deg, transparent, var(--moke-surface-soft) 72%) !important;
}

html[data-theme="light"] .skill-author-avatar {
  background: var(--moke-media-surface) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] .skill-security.safe {
  background: rgba(23,108,90,.09) !important;
  color: var(--moke-accent-text) !important;
}

/* About: author information and manifesto must not retain the dark shell. */
html[data-theme="light"] :where(.profile, .manifesto) {
  background: var(--moke-surface) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] .ticker > div {
  background: var(--moke-surface) !important;
  border-color: var(--moke-pill-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] .ticker > div span { color: var(--moke-muted) !important; }

html[data-theme="light"] :where(.profile h2, .manifesto h2, .profile dd, .block h3, .email-link) {
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(.profile dt, .block .num, .block p, .carousel-head > span, .gallery-head > span) {
  color: var(--moke-muted) !important;
}

html[data-theme="light"] .block:hover { background: var(--moke-surface-soft) !important; }

html[data-theme="light"] .profile-social {
  background: transparent !important;
  border-color: var(--moke-button-border) !important;
  color: var(--moke-ink) !important;
}

html[data-theme="light"] :where(.carousel-slide, .carousel-thumb, .work-tile) {
  background: var(--moke-media-surface) !important;
  border-color: var(--moke-pill-border) !important;
}

/* White logos are converted to black only; artwork remains untouched. */
html[data-theme="light"] :where(.home-logo img, .about-hero-logo img) {
  filter: grayscale(1) invert(1) !important;
}

.moke-theme-toggle,
.lang-switch .moke-theme-toggle,
.site-lang .moke-theme-toggle {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  flex: 0 0 24px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--moke-control-border);
  border-radius: 999px;
  background: var(--moke-control-bg);
  color: var(--moke-control-fg);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.moke-theme-toggle:hover { transform: rotate(16deg); border-color: currentColor; }
.moke-theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.moke-theme-toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.lang-switch > button:not(.moke-theme-toggle),
.site-lang > button:not(.moke-theme-toggle) { height: 24px; min-height: 24px; }

body[data-force-dark="true"] .moke-theme-toggle { display: none !important; }

.moke-global-dock {
  position: fixed;
  z-index: 1000;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--moke-control-border);
  border-radius: 999px;
  background: var(--moke-control-bg);
  color: var(--moke-control-fg);
  backdrop-filter: blur(18px);
}

.moke-global-dock button:not(.moke-theme-toggle) {
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 700 9px/1 "Noto Sans SC", sans-serif;
  cursor: pointer;
}

.moke-global-dock button.active { background: #dedbc8; color: #050505; }

@media (max-width: 720px) {
  .moke-theme-toggle { width: 24px; height: 24px; flex-basis: 24px; }
  .moke-global-dock { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .moke-theme-toggle { transition: none; }
}

/* Detail-page theme convergence and a small readability lift. */
:root {
  --moke-detail-page: #101211;
  --moke-detail-surface: #191c1a;
  --moke-detail-surface-soft: #0e110f;
  --moke-detail-text: #dfdcc9;
  --moke-detail-muted: rgba(223,220,201,.62);
  --moke-detail-line: rgba(223,220,201,.14);
}

:where(.skill-page, .article-hero, .article-toolbar, .article-workspace) {
  color: var(--moke-detail-text);
}

:where(.markdown, .file-browser, .panel-list article, .skill-side > section,
  .article-summary, .article-body) {
  background: var(--moke-detail-surface) !important;
  border-color: var(--moke-detail-line) !important;
}

:where(.markdown, .article-body) {
  color: rgba(223,220,201,.8) !important;
  font-size: 16px !important;
}

:where(.skill-badges span, .skill-author, .document-head, .document-head button,
  .security-card p, .file-dialog header span, .file-dialog header button,
  .file-dialog header a, .article-kicker, .article-deck dl div, .side-title,
  .article-sidebar nav a, .side-empty, .article-tags span, .article-summary header,
  .article-footer, .article-footer a, .moke-account-link) {
  font-size: 11.5px !important;
}

:where(.article-toolbar button, .article-toolbar a, .skill-tabs button,
  .install-tabs button, .metric-card button, .install-card button) {
  font-size: 12px !important;
}

.article-deck > p { font-size: 14px !important; }
.article-summary p, .article-summary blockquote { font-size: 15px !important; }

html[data-theme="light"] {
  --bg: #ffffff;
  --ink: #ffffff;
  --paper: #000000;
  --surface: #ffffff;
  --line: rgba(0,0,0,.12);
  --muted: rgba(0,0,0,.6);
  --moke-detail-page: #ffffff;
  --moke-detail-surface: #ffffff;
  --moke-detail-surface-soft: #f4f4f6;
  --moke-detail-text: #000000;
  --moke-detail-muted: rgba(0,0,0,.6);
  --moke-detail-line: rgba(0,0,0,.12);
}

html[data-theme="light"] :where(.skill-page, .article-hero, .article-toolbar, .article-workspace) {
  color: var(--moke-detail-text) !important;
  border-color: var(--moke-detail-line) !important;
}

html[data-theme="light"] :where(.markdown, .file-browser, .panel-list article,
  .skill-side > section, .download, .article-summary, .article-body) {
  background: var(--moke-detail-surface) !important;
  border-color: var(--moke-detail-line) !important;
  color: var(--moke-detail-text) !important;
}

html[data-theme="light"] :where(.markdown, .markdown p, .markdown li,
  .article-body, .article-body p, .article-body li) {
  color: rgba(0,0,0,.78) !important;
}

html[data-theme="light"] :where(.document-head, .file-row, .article-kicker,
  .article-deck dt, .side-title, .article-sidebar nav a, .side-empty,
  .article-tags span, .article-summary header, .article-footer, .article-footer a) {
  color: var(--moke-detail-muted) !important;
  border-color: var(--moke-detail-line) !important;
}

html[data-theme="light"] :where(.document-head, .file-row:hover) {
  background: var(--moke-detail-surface-soft) !important;
}

html[data-theme="light"] :where(.markdown pre, .article-body pre, .install-card pre) {
  background: var(--moke-detail-surface-soft) !important;
  color: var(--moke-detail-text) !important;
  border-color: var(--moke-detail-line) !important;
}

html[data-theme="light"] :where(.markdown code, .article-body code) {
  color: #312e2a !important;
}

html[data-theme="light"] :where(.article-toolbar button, .article-toolbar a,
  .skill-tabs button, .install-tabs button, .metric-card button, .install-card button,
  .document-head button, .file-dialog header button, .file-dialog header a) {
  background: transparent !important;
  border-color: var(--moke-button-border) !important;
  color: var(--moke-detail-text) !important;
}

html[data-theme="light"] :where(.article-toolbar button.active, .skill-tabs button.active,
  .install-tabs button.active) {
  background: #000000 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .article-tags span {
  background: var(--moke-surface-soft) !important;
  color: var(--moke-detail-text) !important;
}