/* ===========================================================================
   zPortsHub — Visual system / 2026
   One palette. Intentional borders. Quiet motion. No decorative gradients.
   All catalogue, category and search behaviour lives in the original script.js.
   =========================================================================== */

/* 01 — Tokens --------------------------------------------------------------- */
:root {
  color-scheme: light;
  --page: #f5f6f2;
  --paper: #ffffff;
  --paper-raised: #fafbf8;
  --ink: #1b2621;
  --ink-soft: #384b41;
  --muted: #65716b;
  --muted-light: #8a958e;
  --line: #dbe0d9;
  --line-strong: #bfcac0;
  --brand: #315c49;
  --brand-hover: #244735;
  --brand-mist: #e6eee7;
  --focus: #3b7556;
  --radius: 13px;
  --radius-small: 8px;
  --shadow: 0 18px 42px -33px rgb(23 38 30 / 32%);
  --header-bg: rgb(245 246 242 / 93%);
  --header-scrolled: rgb(245 246 242 / 96%);
  --hover-shadow: rgb(20 44 31 / 32%);
  --on-accent: #fff;
  --tag-bg: rgb(255 255 255 / 93%);
  --tag-line: rgb(255 255 255 / 65%);
  --tag-text: #1b2621;
  --footer-bg: #1b2621;
  --footer-text: rgb(255 255 255 / 69%);
  --footer-accent: #fff;
  --selection-bg: #c9dfcf;
  --selection-text: #1b2621;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 180ms;
  --normal: 320ms;
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--page);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--page);
  z-index: 30;
}
::selection { background: var(--selection-bg); color: var(--selection-text); }
a { color: inherit; text-decoration: none; }
a, button, input { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { touch-action: manipulation; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(1200px, calc(100% - 56px)); margin-inline: auto; }

/* 02 — Navigation ----------------------------------------------------------- */
header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 25;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.nav {
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: max-content;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.085em;
  line-height: 1;
  white-space: nowrap;
}
.logo::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 11px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 72%, 72% 100%, 0 100%);
  transition: transform var(--normal) var(--ease), clip-path var(--normal) var(--ease);
}
.logo:hover::before { transform: rotate(-8deg); }
.logo b { color: var(--brand); font-weight: 700; }
.nav .btn { min-height: 42px; padding-inline: 20px; }
.nav .btn::after {
  content: '↗';
  font-size: 18px;
  line-height: 1;
  transition: transform var(--normal) var(--ease);
}
.nav .btn:hover::after { transform: translate(2px, -2px); }

/* 03 — Buttons and controls ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 20px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  white-space: nowrap;
  transition: background var(--fast) ease, border-color var(--fast) ease,
              color var(--fast) ease, transform var(--normal) var(--ease),
              box-shadow var(--normal) ease;
}
.btn:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn.pri {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-accent);
}
.btn.pri:hover {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 10px 18px -13px rgb(27 38 33 / 55%);
}

/* 04 — Editorial hero ------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 545px;
  margin-top: 28px;
  padding: 102px 70px 79px;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.hero::before {
  content: 'ZPORTS  /  COLEÇÃO INDEPENDENTE';
  position: absolute;
  top: 38px;
  left: 70px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
}
.hero::after {
  content: '↗';
  position: absolute;
  top: 79px;
  right: 70px;
  display: grid;
  place-items: center;
  width: 145px;
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--brand);
  font-family: Arial, sans-serif;
  font-size: 86px;
  font-weight: 400;
  line-height: 1;
  transform: rotate(-1deg);
  transition: color .5s ease, background .5s ease, transform .8s var(--ease);
}
.hero:hover::after {
  color: var(--on-accent);
  background: var(--brand);
  transform: rotate(44deg);
}
h1 {
  position: relative;
  z-index: 1;
  width: min(100%, 875px);
  max-width: 10.7ch;
  font-size: clamp(57px, 7.9vw, 112px);
  font-weight: 700;
  line-height: .99;
  letter-spacing: -.087em;
  text-wrap: balance;
  animation: enter-up 750ms var(--ease) both;
}
h1 span { color: var(--brand); }
.lead {
  position: relative;
  z-index: 1;
  max-width: 565px;
  margin-top: 38px;
  padding-left: 21px;
  border-left: 2px solid var(--brand);
  color: var(--muted);
  font-size: clamp(15px, 1.45vw, 17px);
  line-height: 1.8;
  letter-spacing: -.017em;
  animation: enter-up 760ms 120ms var(--ease) both;
}

/* 05 — Section headers ------------------------------------------------------ */
section { padding-block: 100px 20px; }
#jogos { padding-top: 91px; scroll-margin-top: 94px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 27px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.eyebrow b {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
h2 {
  max-width: 19ch;
  font-size: clamp(35px, 5vw, 65px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.075em;
  text-wrap: balance;
}

/* 06 — Search, category tabs and product grid ------------------------------- */
.tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.search {
  flex: 1 1 360px;
  min-width: 0;
  min-height: 51px;
  padding: 12px 20px 12px 50px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  outline: none;
  background-color: var(--paper-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2365716b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='m16 16 4.8 4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 18px center;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -.025em;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--fast) ease, background-color var(--fast) ease,
              box-shadow var(--fast) ease;
}
.search::placeholder { color: var(--muted-light); opacity: 1; }
.search:hover { border-color: var(--line-strong); }
.search:focus {
  background-color: var(--paper);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.search::-webkit-search-cancel-button { cursor: pointer; }
.chips {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 7px;
}
.chip {
  min-height: 43px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
.chip:hover { background: var(--paper-raised); color: var(--ink); border-color: var(--line); }
.chip.on, .chip.on:hover {
  color: var(--on-accent);
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: none;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgb(34 48 36 / 2%);
  transition: transform 440ms var(--ease), border-color var(--normal) ease,
              box-shadow 440ms var(--ease), background-color 300ms ease;
  animation: enter-up 560ms var(--ease) both;
}
.card:nth-child(2) { animation-delay: 80ms; }
.card:nth-child(3) { animation-delay: 120ms; }
.card:nth-child(4) { animation-delay: 160ms; }
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 38px -28px var(--hover-shadow);
}
.cover {
  position: relative;
  aspect-ratio: 16 / 9.7;
  flex: 0 0 auto;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background: var(--brand-mist);
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 12px solid transparent;
  pointer-events: none;
  transition: border-color var(--normal) ease;
}
.card:hover .cover::after { border-color: rgb(255 255 255 / 5%); }
.cover-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 750ms var(--ease);
}
.card:hover .cover-image { transform: scale(1.045); }
.cover i {
  position: absolute;
  right: 23px;
  bottom: -30px;
  color: rgb(49 92 73 / 13%);
  font-size: clamp(140px, 17vw, 245px);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.1em;
  user-select: none;
}
.cover.has-image i { display: none; }
.tag {
  position: absolute;
  top: 17px;
  left: 17px;
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid var(--tag-line);
  border-radius: 6px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .095em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 27px 28px 27px;
}
.info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .015em;
}
.info span:nth-child(2) { color: var(--line-strong); }
.body h3 {
  margin-top: 0;
  color: var(--ink);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.065em;
}
.body p {
  flex: 1;
  max-width: 58ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.body .btn {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: -.015em;
}
.empty {
  display: none;
  margin: 24px 0 0;
  padding: 64px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* 07 — About, principles and social ----------------------------------------- */
#sobre { padding-top: 126px; }
#sobre h2 { margin-bottom: 42px; }
.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.pt {
  min-width: 0;
  min-height: 247px;
  padding: 29px 29px 31px;
  border-right: 1px solid var(--line);
  transition: background var(--normal) ease;
}
.pt:last-child { border-right: none; }
.pt:hover { background: var(--paper-raised); }
.pt > b {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  margin-bottom: 31px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  transition: background var(--normal) ease, color var(--normal) ease,
              border-color var(--normal) ease;
}
.pt:hover > b { background: var(--brand); color: var(--on-accent); border-color: var(--brand); }
.pt h3 {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.2;
}
.pt p {
  max-width: 32ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 68px 0 0;
}
.social a {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink-soft);
  transition: transform var(--normal) var(--ease), background var(--fast) ease,
              color var(--fast) ease, border-color var(--fast) ease;
}
.social a:hover { transform: translateY(-4px); background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.social svg { width: 19px; height: 19px; fill: currentColor; }

/* 08 — Footer and status ---------------------------------------------------- */
footer {
  margin-top: 102px;
  padding: 36px 0 calc(36px + env(safe-area-inset-bottom, 0px));
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 12px;
  letter-spacing: .015em;
}
footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
footer .wrap span:last-child { color: var(--footer-accent); }
.toast {
  position: fixed;
  z-index: 40;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  max-width: min(90vw, 440px);
  padding: 13px 20px;
  border: 1px solid #435348;
  border-radius: 10px;
  background: var(--footer-bg);
  color: var(--footer-accent);
  box-shadow: 0 20px 48px rgb(0 0 0 / 16%);
  font-size: 13px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity var(--normal) ease, transform var(--normal) var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 09 — Responsiveness ------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero { min-height: 495px; padding: 93px 52px 69px; }
  .hero::before { left: 52px; }
  .hero::after { right: 48px; top: 76px; width: 115px; font-size: 71px; }
  h1 { font-size: clamp(57px, 8.4vw, 94px); }
  .tools { flex-wrap: wrap; }
  .search { flex-basis: 100%; }
  .chips { width: 100%; }
  .pt { padding: 25px; min-height: 253px; }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 36px); }
  .nav { height: 68px; }
  .nav .btn { min-height: 40px; padding-inline: 14px; }
  .logo { font-size: 19px; }
  .logo::before { width: 30px; height: 30px; margin-right: 9px; }
  .hero { min-height: 470px; margin-top: 18px; padding: 101px 29px 48px; border-radius: 13px; }
  .hero::before { top: 31px; left: 29px; font-size: 10px; letter-spacing: .10em; }
  .hero::after { top: 73px; right: 27px; width: 64px; font-size: 43px; }
  h1 { width: 100%; max-width: 11ch; font-size: clamp(47px, 9.25vw, 68px); letter-spacing: -.08em; }
  .lead { max-width: 47ch; margin-top: 31px; padding-left: 15px; font-size: 14px; line-height: 1.7; }
  #jogos { padding-top: 72px; }
  #sobre { padding-top: 93px; }
  .grid { grid-template-columns: 1fr; gap: 16px; }
  .cover { aspect-ratio: 16 / 9.2; }
  .body { padding: 23px; }
  .body h3 { font-size: 29px; }
  .three { grid-template-columns: 1fr; }
  .pt { min-height: 0; padding: 27px; border-right: 0; border-bottom: 1px solid var(--line); }
  .pt:last-child { border-bottom: none; }
  .pt > b { margin-bottom: 20px; }
  .pt p { max-width: 55ch; }
  footer { margin-top: 80px; }
}
@media (max-width: 430px) {
  .wrap { width: calc(100% - 30px); }
  .nav { height: 66px; }
  .logo { font-size: 18px; }
  .logo::before { width: 27px; height: 27px; margin-right: 8px; border-radius: 7px; }
  .nav .btn { font-size: 12px; min-height: 38px; padding: 9px 12px; }
  .hero { min-height: 0; padding: 94px 23px 47px; }
  .hero::before { left: 23px; font-size: 9px; }
  .hero::after { top: 63px; right: 19px; width: 52px; font-size: 32px; }
  h1 { font-size: clamp(44px, 11.7vw, 54px); }
  .lead { margin-top: 25px; font-size: 13px; }
  .eyebrow { gap: 10px; font-size: 11px; letter-spacing: .035em; }
  .eyebrow b { width: 34px; height: 34px; }
  .tools { padding: 8px; gap: 8px; }
  .search { min-height: 49px; font-size: 14px; }
  .chips { gap: 5px; }
  .chip { min-height: 39px; font-size: 12px; padding: 9px 11px; }
  .body { padding: 22px; }
  .body p { font-size: 13px; }
  .tag { top: 12px; left: 12px; }
  h2 { font-size: clamp(34px, 9vw, 48px); }
  .social { margin-top: 53px; }
}

/* 10 — Scroll motion: restrained, progressively enhanced ------------------- */
/* The page stays readable if JavaScript or IntersectionObserver is unavailable. */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 2;
}
header { transition: box-shadow 350ms ease, background-color 350ms ease; }
header.is-scrolled {
  background-color: var(--header-scrolled);
  box-shadow: 0 8px 24px -24px rgb(18 33 24 / 45%);
}

/* Only enable reveal hidden states when the animation script is running. */
html.has-scroll-motion .reveal-item {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 680ms var(--ease), transform 720ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.has-scroll-motion .reveal-item.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* The catalogue's original entry animation must not compete with scroll reveal. */
html.has-scroll-motion .card.reveal-item { animation: none; }
html.has-scroll-motion .card.reveal-item.in-view:hover {
  transform: translate3d(0, -6px, 0);
}
/* The hero ornament floats gently on scroll, never the text or buttons. */
.hero::after {
  transform: translate3d(0, var(--hero-drift, 0px), 0) rotate(-1deg);
}
.hero:hover::after {
  transform: translate3d(0, var(--hero-drift, 0px), 0) rotate(44deg);
}
/* Underlined detail adds some feedback without shifting the layout. */
.pt { position: relative; }
.pt::after {
  content: '';
  position: absolute;
  left: 29px;
  right: 29px;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms var(--ease);
  pointer-events: none;
}
.pt:hover::after { transform: scaleX(1); }
@media (max-width: 700px) { .pt::after { left: 27px; right: 27px; } }

/* 11 — Comfortable motion, with accessibility escape hatch ----------------- */
@keyframes enter-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.has-scroll-motion .reveal-item,
  html.has-scroll-motion .reveal-item.in-view {
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-progress { display: none; }
  .hero::after, .hero:hover::after { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 12 — Appearance tokens: midnight green, no flashy gradients ---------------- */
/* The media query handles the first visit and reacts automatically to Android,
   Windows, and browser-level theme changes while the choice is 'Sistema'. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #101714;
  --paper: #1a221e;
  --paper-raised: #202b25;
  --ink: #eef3ef;
  --ink-soft: #d4e0d7;
  --muted: #abb9ae;
  --muted-light: #879b8c;
  --line: #35433b;
  --line-strong: #526455;
  --brand: #a5d2b3;
  --brand-hover: #bbe3c8;
  --brand-mist: #283b30;
  --focus: #c1e4c8;
  --shadow: 0 18px 42px -33px rgb(0 0 0 / 65%);
  --header-bg: rgb(16 23 20 / 91%);
  --header-scrolled: rgb(16 23 20 / 96%);
  --hover-shadow: rgb(0 0 0 / 58%);
  --on-accent: #112119;
  --tag-bg: rgb(23 34 28 / 94%);
  --tag-line: rgb(163 195 170 / 45%);
  --tag-text: #edf5ed;
  --footer-bg: #0b110e;
  --footer-text: #adb9af;
  --footer-accent: #f2f5f0;
  --selection-bg: #426d51;
  --selection-text: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --page: #101714;
    --paper: #1a221e;
    --paper-raised: #202b25;
    --ink: #eef3ef;
    --ink-soft: #d4e0d7;
    --muted: #abb9ae;
    --muted-light: #879b8c;
    --line: #35433b;
    --line-strong: #526455;
    --brand: #a5d2b3;
    --brand-hover: #bbe3c8;
    --brand-mist: #283b30;
    --focus: #c1e4c8;
    --shadow: 0 18px 42px -33px rgb(0 0 0 / 65%);
    --header-bg: rgb(16 23 20 / 91%);
    --header-scrolled: rgb(16 23 20 / 96%);
    --hover-shadow: rgb(0 0 0 / 58%);
    --on-accent: #112119;
    --tag-bg: rgb(23 34 28 / 94%);
    --tag-line: rgb(163 195 170 / 45%);
    --tag-text: #edf5ed;
    --footer-bg: #0b110e;
    --footer-text: #adb9af;
    --footer-accent: #f2f5f0;
    --selection-bg: #426d51;
    --selection-text: #fff;
  }
}

/* 13 — Compact moon launcher and discrete 3-option appearance popover -------- */
.nav-actions { display: inline-flex; align-items: center; gap: 10px; }
.theme-picker { position: relative; flex: none; }
.theme-trigger {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--fast) ease, background var(--fast) ease,
              border-color var(--fast) ease, transform var(--normal) var(--ease);
}
.theme-trigger svg { width: 19px; height: 19px; transition: transform 400ms var(--ease); }
.theme-trigger:hover, .theme-trigger[aria-expanded="true"] {
  color: var(--brand);
  background: var(--paper-raised);
  border-color: var(--brand);
}
.theme-trigger:hover svg { transform: rotate(-12deg); }
.theme-trigger:active { transform: scale(.95); }
.theme-menu[hidden] { display: none; }
.theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  z-index: 31;
  width: 230px;
  padding: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 20px 56px -25px rgb(0 0 0 / 30%);
  animation: theme-menu-appear 220ms var(--ease) both;
}
.theme-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 10px;
  height: 10px;
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  transform: rotate(45deg);
}
.theme-menu-title {
  margin: 6px 9px 7px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.theme-options { display: grid; gap: 3px; }
.theme-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  gap: 11px;
  padding: 9px 10px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--fast) ease, border-color var(--fast) ease;
}
.theme-option:hover { background: var(--paper-raised); }
.theme-option[aria-pressed="true"] {
  background: var(--brand-mist);
  color: var(--ink);
  border-color: var(--line);
}
.theme-option svg { width: 18px; height: 18px; flex: none; color: var(--brand); }
.theme-option > span:not(.theme-check) { display: grid; line-height: 1.35; }
.theme-option small { color: var(--muted); font-weight: 400; font-size: 10px; }
.theme-check { margin-left: auto; color: var(--brand); font-size: 14px; font-weight: 700; opacity: 0; }
.theme-option[aria-pressed="true"] .theme-check { opacity: 1; }
@keyframes theme-menu-appear {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Accent buttons remain readable whether their fill is dark or mint green. */
.btn.pri { color: var(--on-accent); }
.btn.pri:hover { color: var(--on-accent); }
.hero:hover::after { color: var(--on-accent); }
@media (max-width: 430px) {
  .nav-actions { gap: 7px; }
  .theme-trigger { height: 38px; width: 38px; border-radius: 9px; }
  .theme-trigger svg { width: 17px; height: 17px; }
  .theme-menu { width: min(230px, calc(100vw - 30px)); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-menu { animation: none; }
}

/* Comfortable theme crossfade, without moving the content or scroll position. */
body, .hero, .tools, .three, .cover, .tag, footer {
  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease;
}
@media (max-width: 375px) {
  .nav { gap: 8px; }
  .nav .btn { padding-inline: 9px; }
  .nav .btn::after { font-size: 14px; }
  .logo { font-size: 17px; }
  .logo::before { width: 25px; height: 25px; }
  .theme-trigger { width: 36px; height: 36px; }
}