/* Shared header controls and the theme disclosure. */
.pi-header-controls,
.studio-top .pi-studio-controls {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(8px, 1.05vw, 16px);
}
.global-navigation .pi-header-controls > .language { margin: 0; }
.topbar:not(.global-navigation) > .pi-appearance { margin-inline-start: auto; }
.topbar:not(.global-navigation) > .pi-appearance + .language { margin-inline-start: 0; }
.global-navigation .public-auth-slot .pi-nav-signin,
.studio-top .pi-studio-controls .pi-nav-signin {
  background: #603cff;
  color: #fff;
}
.global-navigation .public-auth-slot .pi-nav-signin:hover,
.studio-top .pi-studio-controls .pi-nav-signin:hover { background: #512bdf; color: #fff; }
.studio-top .pi-nav-signin { border-radius: 999px; padding: 8px 13px; white-space: nowrap; }
.auth-screen .studio-top:has(.pi-studio-controls) {
  display: flex;
  justify-content: flex-end;
  width: min(1060px, 100%);
  margin: 0 auto 12px;
  padding: 0;
  border: 0;
}
.auth-screen .studio-top:has(.pi-studio-controls) > span { display: none; }
.pi-appearance { position: relative; flex: none; letter-spacing: normal; }
.pi-appearance[open] { z-index: 110; }
.pi-appearance-trigger {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  list-style: none;
  cursor: pointer;
  color: var(--muted, #64708a);
}
.pi-appearance-trigger::-webkit-details-marker { display: none; }
.pi-appearance-trigger:hover,
.pi-appearance[open] > .pi-appearance-trigger {
  background: var(--pi-raised, #eeecf8);
  color: var(--ink, #06152f);
}
.pi-appearance-trigger:focus-visible,
.pi-appearance-option:focus-visible {
  outline: 2px solid var(--pi-accent, #563dfc);
  outline-offset: 2px;
}
.pi-appearance-panel {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: -34px;
  inline-size: 174px;
  padding: 6px;
  border: 1px solid var(--line, #dce2f1);
  border-radius: 17px;
  background: var(--card, #fff);
  color: var(--ink, #06152f);
  box-shadow: 0 12px 32px #101a3825, 0 2px 5px #101a3812;
}
.pi-appearance .pi-appearance-option {
  display: grid;
  grid-template-columns: 8px 20px 1fr;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 8px 11px;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 11px;
  text-align: start;
  font: 500 14px/1.35 system-ui, sans-serif;
  cursor: pointer;
}
.pi-appearance-option::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.pi-appearance-option[aria-pressed="true"]::before { background: currentColor; }
.pi-appearance .pi-appearance-option:hover,
.pi-appearance .pi-appearance-option:focus-visible { background: var(--pi-raised, #eeecf8); }

@media (max-width: 900px) {
  .global-navigation.nav-position-v2 > .pi-header-controls {
    grid-area: 1 / 2 / auto / -1;
    justify-self: end;
  }
}
@media (max-width: 650px) {
  .global-navigation .pi-header-controls,
  .studio-top .pi-studio-controls { gap: 6px; }
  .pi-appearance-trigger { inline-size: 36px; block-size: 40px; }
  .global-navigation .pi-header-controls > .language { font-size: 11px; padding: 4px 9px; }
  .global-navigation .pi-header-controls .pi-nav-signin { padding-inline: 9px; }
  .pi-appearance-panel { inset-inline-end: -69px; }
}

/* Dark palette. Keep the existing gradients, geometry and motion in light mode. */
:root[data-skillpi-appearance="dark"] {
  color-scheme: dark;
  --paper: #171718;
  --ink: #f3f2ef;
  --muted: #b6b3b4;
  --line: #3a383b;
  --card: #202021;
  --shadow: 0 16px 44px #0006;
  --pi-raised: #2b292d;
  --pi-accent: #cbbdf5;
  --green: var(--pi-accent);
  --purple: var(--pi-accent);
}
html[data-skillpi-appearance="dark"] body { background: var(--paper); color: var(--ink); }
[data-skillpi-appearance="dark"] :is(.header-brand-wordmark,.brand-full-lockup,img.auth-brand,.pi-auth-brand img,.brand img) {
  filter: url("brand/appearance.svg#light-ink");
}
[data-skillpi-appearance="dark"] :is(.topbar.wrap,.global-navigation,.global-navigation .language,.nav-mega,.nav-collection-grid,.pi-account-links,.pi-auth-dialog,.pi-auth-story,.hero-more-panel,.browse-form,.catalog-search,.skill-card,.topic,.detail-sidebar,.skill-markdown,.p0-guide-card,.p0-prereq,.p0-code,.p0-cli,.evidence-box,.home-evidence,.how-grid > *, .evidence-grid > *, .pi-preview-dialog,.panel,.metric,.signup-story,.studio-hero,body.auth-screen aside) {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}
[data-skillpi-appearance="dark"] :is(.nav-mega-top,.nav-mega-bottom,.nav-mega-aside,.nav-categories > summary:hover,.nav-categories[open] > summary,.nav-categories:not(.nav-collections) > summary,.nav-utility a:hover,.nav-search,.nav-search kbd,.hero .searchbox,.home-search,.motion-toggle,.preview-toolbar button,.shelf-actions button,.shelf-arrow,.pagination a:not([aria-current]),.card-tags :is(a,span),.topic-mark,.note,.empty,.btn:not(.primary),.browse-advanced,.pi-account-menu > summary,.pi-account-avatar,.pi-auth-dialog .social-provider,.pi-auth-dialog .pi-auth-close,.pi-auth-dialog .pi-auth-secondary,.pi-auth-art,.start-prompt-box,.start-tile,.start-secondary,.file-zone,.secondary, .pi-auth-success,.signup-story .stat-row,.hero-more summary,.hero-more-list a:hover) {
  background: var(--pi-raised);
  border-color: var(--line);
  color: var(--ink);
}
[data-skillpi-appearance="dark"] :is(.global-navigation,.hero,.browse-form,.catalog-search,.p0-guide,.pi-auth-dialog,.fields,.editor-grid) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) {
  background: var(--pi-raised);
  border-color: var(--line);
  color: var(--ink);
}
[data-skillpi-appearance="dark"] :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
[data-skillpi-appearance="dark"] :is(.hero p,.lead,.description,.home-pick p,.pick-author,.home-section-heading p,.shelf-heading p,.preview-toolbar,.nav-mega p,.nav-mega-aside a,.nav-scene-children a,.nav-collection-item small,.home-footer-main nav a,.home-footer-bottom,.studio-top,.signup-story p,.pi-auth-lead,.pi-auth-dialog .social-terms,.pi-auth-fields label,.pi-auth-dialog .social-divider,.fields label,.field-help) {
  color: var(--muted);
}
[data-skillpi-appearance="dark"] :is(.hero .eyebrow,.home-p0 .home-kicker,.home-p0 .text-link,.p0-guide a:not(.primary),.hero .text-link,.pi-auth-dialog a:not(.pi-auth-primary),.auth-screen .text-link) {
  color: var(--pi-accent);
}
[data-skillpi-appearance="dark"] :is(.pi-auth-content h2,.pi-auth-story h3,.pi-account-links a,.pi-account-links button,.nav-collection-item,.nav-mega h3,.shelf-heading h3,.pick-title-line a) { color: var(--ink); }
[data-skillpi-appearance="dark"] :is(.pi-account-links a,.pi-account-links button,.nav-collection-item):hover { background: var(--pi-raised); color: var(--pi-accent); }
[data-skillpi-appearance="dark"] :is(.btn.primary,.searchbox button,.btn-dark,.pagination [aria-current],.primary,.pi-auth-dialog .pi-auth-primary) {
  background: #603cff;
  border-color: #603cff;
  color: white;
}
[data-skillpi-appearance="dark"] :is(.btn.primary,.searchbox button,.btn-dark,.primary,.pi-auth-dialog .pi-auth-primary):hover { background: #512bdf; }
[data-skillpi-appearance="dark"] :is(.hero h1 span,.hero h1 .hero-accent) { text-shadow: none; color: var(--ink); }
[data-skillpi-appearance="dark"] .hero .eyebrow { color: var(--muted); }
[data-skillpi-appearance="dark"] .hero-visual::after {
  background: linear-gradient(90deg,var(--paper),#171718f0 18%,#171718bc 40%,transparent 76%),
    linear-gradient(0deg,#171718a8,transparent 22%,transparent 84%,#1717186e);
}
[data-skillpi-appearance="dark"] .tile-lilac { background: #716681; }
[data-skillpi-appearance="dark"] .tile-cream { background: #807264; }
[data-skillpi-appearance="dark"] .tile-sage { background: #566e68; }
[data-skillpi-appearance="dark"] .tile-blue { background: #526b80; }
[data-skillpi-appearance="dark"] .tile-coral { background: #8b6667; }
[data-skillpi-appearance="dark"] .mosaic-tile svg { stroke: #f4eee5d9; }
[data-skillpi-appearance="dark"] .pi-ribbon {
  background: linear-gradient(90deg,transparent,#ad9ed720 32%,#bdb9cd28 52%,#ad9ed71c 72%,transparent);
  border-color: #bfb2db20;
  box-shadow: inset 0 0 32px #c7b6ee12;
}
[data-skillpi-appearance="dark"] .pi-ribbon::before,
[data-skillpi-appearance="dark"] .pi-ribbon::after {
  background: linear-gradient(180deg,transparent,#cbbdf555 45%,#cbbdf533 70%,transparent);
  box-shadow: 0 0 8px #cbbdf535;
}
[data-skillpi-appearance="dark"] .ribbon-surge { opacity: .35; }
[data-skillpi-appearance="dark"] .ribbon-spark { opacity: .5; }
[data-skillpi-appearance="dark"] .ribbon-flow { filter: none; }
[data-skillpi-appearance="dark"] .ribbon-chunk {
  background-image: linear-gradient(90deg,#a49bab,#ded4e5 49%,#b8aec4);
}
[data-skillpi-appearance="dark"] .ribbon-still { color: #d7cbff; }
[data-skillpi-appearance="dark"] .home-start .start-field {
  background: radial-gradient(ellipse at 90% 12%,#382e48,transparent 66%),var(--card);
  border-color: var(--line);
}
[data-skillpi-appearance="dark"] :is(.start-copy,.start-copy p,.start-ecosystem p,.start-copy-status) { color: #ede9ff; }
[data-skillpi-appearance="dark"] .start-primary { background: #f0ecff; color: #3f2b88; }
[data-skillpi-appearance="dark"] :is(.studio-top .pi-studio-controls a,.pi-auth-switch,.pi-auth-content p) { color: var(--muted); }
[data-skillpi-appearance="dark"] .studio-top .pi-studio-controls .pi-nav-signin { color: #fff; }
[data-skillpi-appearance="dark"] :is(
  .source-setup,.security-hints,.relation-card,.social-comments,.ranking-hero,.ranking-board,.ranking-tabs a,
  .collection-card,.collection-explainer,.collection-member,.collection-start-card,.collections-search,
  .learn-card,.learn-toc details,.learn-search input,.learn-share button,.learn-search button,
  .auth-screen .onboarding
) { background: var(--card); border-color: var(--line); color: var(--ink); }
[data-skillpi-appearance="dark"] :is(
  .source-setup-guides a,.social-comments button,.skill-stats button,.collection-intro-note,.collection-origin,
  .collection-start textarea,.learn-note,.learn-sources,.learn-preview,.learn-prose :not(pre) > code,
  .ranking-empty,.ranking-filters a:not([aria-current]),.ranking-tabs a[aria-current],
  .auth-screen .onboarding .panel input:not([type=checkbox])
) { background: var(--pi-raised); border-color: var(--line); color: var(--ink); }
[data-skillpi-appearance="dark"] :is(
  .browse-form label,.browse-advanced summary,.detail-breadcrumbs,.detail-breadcrumbs a,
  .detail-breadcrumbs [aria-current],.relation-card small,.learn-card small,.collection-card p,
  .ranking-row small,.auth-screen .panel label,.auth-screen .panel .social-terms,
  .auth-screen .panel .social-divider
) { color: var(--muted); }
[data-skillpi-appearance="dark"] :is(
  .source-setup-guides a:hover,.relation-card:hover,.auth-screen .account-links a,
  .auth-screen .panel .social-terms a
) { color: var(--pi-accent); }
[data-skillpi-appearance="dark"] :is(.card-bottom,.detail-sidebar dl>div,.source-setup-heading,.ranking-row) {
  border-color: var(--line);
}
@media (max-width: 650px) {
  [data-skillpi-appearance="dark"] .hero-visual::after {
    background: linear-gradient(180deg,var(--paper),#171718f2 14%,#171718ce 38%,transparent 77%),
      linear-gradient(90deg,#171718bb,transparent 75%);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-skillpi-appearance="dark"] .ribbon-chunk { background: none; color: #d7cbff; }
}