[data-theme="dark"] { --bg:#0f0f11; --ink:#f0f0eb; --muted:#888; --line:rgba(255,255,255,0.08); --shadow:0 1px 6px rgba(0,0,0,0.5); color-scheme:dark; }
[data-theme="dark"] body { background:var(--bg,#0f0f11); color:var(--ink,#f0f0eb); }
[data-theme="dark"] .card,[data-theme="dark"] .hero,[data-theme="dark"] .milestone,[data-theme="dark"] aside.sidebar,[data-theme="dark"] .shell,[data-theme="dark"] .topbar,[data-theme="dark"] .topbar-inner { background:#1a1a1f; border-color:rgba(255,255,255,0.08); }
[data-theme="dark"] nav a,[data-theme="dark"] .nav a,[data-theme="dark"] .menu a { color:#ccc; background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1); }
[data-theme="dark"] nav a:hover,[data-theme="dark"] .nav a:hover,[data-theme="dark"] .menu a:hover { background:rgba(255,255,255,0.1); }
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea { background:#1a1a1f; color:#f0f0eb; border-color:rgba(255,255,255,0.15); }
[data-theme="dark"] .btn,[data-theme="dark"] button { background:#222228; color:#f0f0eb; border-color:rgba(255,255,255,0.12); }
[data-theme="dark"] .btn.primary,[data-theme="dark"] button[type=submit],[data-theme="dark"] a.cta { background:#F5C542; color:#111; }
[data-theme="dark"] code,[data-theme="dark"] pre { background:#1a1a1f; color:#f0f0eb; }
.theme-toggle { display:flex; gap:4px; align-items:center; }
.theme-toggle-btn { background:none; border:1px solid transparent; border-radius:8px; padding:6px 9px; cursor:pointer; font-size:13px; opacity:0.45; transition:opacity .15s,background .15s; line-height:1; }
.theme-toggle-btn:hover { opacity:1; background:rgba(0,0,0,0.07); }
.theme-toggle-btn.active { opacity:1; background:rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.15); }
[data-theme="dark"] .theme-toggle-btn:hover { background:rgba(255,255,255,0.1); }
[data-theme="dark"] .theme-toggle-btn.active { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.2); }

/* ── Shared page-header component ── */
.page-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(12px, 3vw, 48px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 60px);
  box-sizing: border-box;
}

.header-word {
  flex: 0 0 auto;
  flex-shrink: 0;
  max-width:min(38vw,520px);
  width:min(38vw,520px);
  overflow: hidden;
}

.header-word img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}

.header-duck {
  flex: 0 0 auto;
  flex-shrink: 0;
  max-width:min(28vw,380px);
  width:min(28vw,380px);
  overflow: hidden;
}

.header-duck img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .header-word {
    width: 54vw;
    max-width: 54vw;
  }
  .header-duck {
    width: 42vw;
    max-width: 42vw;
  }
}

/* ── Mobile topbar stacking ── */
@media (max-width: 768px) {
  .topbar { flex-direction: column !important; align-items: flex-start !important; gap: 8px; overflow-x: hidden; }
  .topbar .title { width: 100%; min-width: 0; }
  .topbar .actions,
  .topbar .btn-row,
  .topbar .cta-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .topbar > * { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .topbar .title p { white-space: normal; overflow-wrap: break-word; }
  .main, .wrap { overflow-x: hidden; max-width: 100%; }
  .btn, a.btn { white-space: normal; max-width: 100%; box-sizing: border-box; }
  h1, h2, h3, h4 { word-break: break-word; overflow-wrap: break-word; }
}