/* ==========================================================================
   Polaris theme: black base, pink sections. Loaded last, overrides opentab.
   ========================================================================== */
:root {
  --bg: #0a0a0a;
  --ink: #ffffff;
  --mute: #ffffff99;
  --rule: #ffffff26;
  --paper: #141414;
  --dk: #ff2d8a;
  --dk-ink: #0a0a0a;
  --dk-mute: #0a0a0abf;
  --dk-rule: #0a0a0a40;
  --pink: #ff2d8a;
  color-scheme: dark;
}
.dark ::selection { background: #0a0a0a; color: var(--pink); }
::selection { background: var(--pink); color: #0a0a0a; }
.progress { background: var(--pink); }
body.on-dark .progress { background: #0a0a0a; }

.hdr { background: rgba(10, 10, 10, .72); }
.hdr.dark { background: rgba(255, 45, 138, .82); color: #0a0a0a; border-color: #0a0a0a26; }
.hdr.menu-open { background: rgba(10, 10, 10, .9); color: #fff; }
.pill-btn { background: var(--pink); color: #0a0a0a; font-weight: 600; }
.hdr.dark .pill-btn { background: #0a0a0a; color: var(--pink); }
.hdr.menu-open .pill-btn { background: var(--pink); color: #0a0a0a; }
.menu { background: #0a0a0a; }
.menu a:hover { color: var(--pink); }
.dark .divider::before { background: #0a0a0a; }
.brand .star { color: var(--pink); }
.hdr.dark .brand .star { color: #0a0a0a; }

/* Logo mark: three-piece P (traced from brand logo) */
.mark-logo { height: 24px; width: auto; display: block; fill: currentColor; color: var(--pink); }
.mark-logo path { transform-box: fill-box; transform-origin: center; animation: logoIn .7s var(--ease-spring) backwards; transition: transform .5s var(--ease-spring); }
.mark-logo path:nth-child(1) { animation-delay: .1s; }
.mark-logo path:nth-child(2) { animation-delay: .22s; }
.mark-logo path:nth-child(3) { animation-delay: .16s; }
.brand:hover .mark-logo path:nth-child(1) { transform: translateX(-12px); }
.brand:hover .mark-logo path:nth-child(2) { transform: translate(10px, 10px); }
.brand:hover .mark-logo path:nth-child(3) { transform: translate(6px, -12px); }
.hdr.dark .mark-logo { color: #0a0a0a; }
@keyframes logoIn { from { transform: scale(0.5); opacity: 0; } }

h1 em, h2 em { font-style: normal; color: var(--pink); }
.dark h2 em { color: #0a0a0a; }

/* Stage + catalog window (replaces the browser demo) */
.stage { background: #111; }
.win {
  --bg: #0d0d0d; --panel: #151515; --fg: #f2f2f2; --muted: #8f8f8f; --line: rgba(255,255,255,.08);
  height: auto;
  border-radius: 8px;
  box-shadow: 0 40px 80px -30px rgba(255, 45, 138, .35), 0 0 0 1px rgba(255,255,255,.06);
  font: 400 14px/1.4 var(--sans);
}
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cat-head b { font-weight: 600; letter-spacing: -.02em; }
.cat-head span { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.cat-dots { display: flex; gap: 6px; }
.cat-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a2a2a; }
.cat-dots i:first-child { background: var(--pink); }
.cat { display: grid; grid-template-columns: 1fr; }
.cat a {
  display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background .3s var(--ease), padding .45s var(--ease);
}
.cat a:last-child { border-bottom: 0; }
.cat .n { font: 500 12px var(--mono); color: var(--muted); }
.cat strong { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.02em; }
.cat small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cat .go { color: var(--muted); transition: color .3s, transform .45s var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .cat a:hover { background: rgba(255, 45, 138, .08); padding-left: 26px; }
  .cat a:hover .go { color: var(--pink); transform: translateX(4px); }
}
.cat a:active { background: rgba(255, 45, 138, .14); }
@media (min-width: 700px) {
  .cat { grid-template-columns: 1fr 1fr; }
  .cat a:nth-child(odd) { border-right: 1px solid var(--line); }
  .cat a:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

.item code { border-color: var(--rule); }
.badge { background: var(--pink); color: #0a0a0a; }
.engine.light { background: #0a0a0a; }
.engine .wipe { color: #fff; }
.light .wipe:hover { color: #0a0a0a; }
.light .wipe::before { background: var(--pink); }
.light .wipe { border-color: var(--pink); }
.big em { color: var(--pink); font-style: normal; }
.foot { background: #0a0a0a; }