/* aSentientCrown — palette pulled from the throne-room banner and crown avatar */
:root {
  --night: #17122e;
  --night-2: #211a42;
  --panel: rgba(44, 34, 88, 0.72);
  --panel-solid: #2c2258;
  --line: rgba(190, 180, 255, 0.18);
  --lav: #9d97f5;
  --peri: #6f7fe8;
  --pink: #f4a6c0;
  --sunset: #f7b39b;
  --gold: #f9b234;
  --orange: #ef7a22;
  --royal: #c9333d;
  --snow: #eef0ff;
  --text: #f2efff;
  --muted: #b9b2e6;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(8, 4, 30, 0.45);
  --pixel: "Pixelify Sans", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, Segoe UI, sans-serif;
  --link: #f9b234;
  --heading: #eef0ff;
  --glass: rgba(23, 18, 46, 0.55);
  --field: rgba(23, 18, 46, 0.7);
  --flake: rgba(238, 240, 255, 0.75);
  --hero-fade: rgba(23, 18, 46, 0.35);
  --spec-bg: rgba(157, 151, 245, 0.12);
  --spec-line: rgba(157, 151, 245, 0.18);
  --spec-tile: rgba(255, 255, 255, 0.08);
  --spec-ink: #c9c5ff;
  color-scheme: dark;
}

/* Light mode — snowy daytime version of the kingdom */
:root[data-theme="light"] {
  --night: #f4f1ff;
  --night-2: #e9e5ff;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-solid: #ffffff;
  --line: rgba(92, 80, 190, 0.18);
  --text: #2a2150;
  --muted: #625a96;
  --link: #b4500a;
  --heading: #2a2150;
  --glass: rgba(255, 255, 255, 0.72);
  --field: #f6f4ff;
  --flake: rgba(124, 132, 232, 0.55);
  --hero-fade: rgba(244, 241, 255, 0.25);
  --spec-bg: #e9e5fb;
  --spec-line: transparent;
  --spec-tile: #ffffff;
  --spec-ink: #4a44b0;
  --shadow: 0 10px 26px rgba(70, 56, 160, 0.14);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--night);
  background-image:
    radial-gradient(1200px 600px at 10% 20%, rgba(111,127,232,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 60%, rgba(244,166,192,.12), transparent 60%),
    radial-gradient(800px 600px at 50% 100%, rgba(249,178,52,.08), transparent 60%);
  background-attachment: fixed;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--link); }
.pixel { font-family: var(--pixel); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; margin-top: 1.5rem; }
[hidden] { display: none !important; }

#snow { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 16px 6rem;
  background:
    linear-gradient(180deg, rgba(23,18,46,.15) 0%, var(--hero-fade) 55%, var(--night) 100%),
    url("/assets/banner.jpg") center 40% / cover no-repeat;
  z-index: 2;
}
.hero-inner { position: relative; z-index: 2; max-width: 720px; }
.avatar-frame {
  width: 180px; height: 180px; margin: 0 auto 1.2rem;
  border-radius: 50%;
  padding: 6px;
  background: conic-gradient(from 200deg, var(--gold), var(--orange), var(--royal), var(--lav), var(--gold));
  box-shadow: 0 0 0 6px rgba(23,18,46,.55), 0 0 60px rgba(249,178,52,.45);
  animation: bob 5s ease-in-out infinite;
}
.avatar-frame img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.hero h1 {
  font-size: clamp(2.6rem, 8vw, 5rem);
  margin: 0;
  letter-spacing: .04em;
  color: var(--gold);
  text-shadow: 0 4px 0 var(--orange), 0 8px 0 #8a3a14, 0 14px 30px rgba(0,0,0,.5);
}
.tagline {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 700;
  margin: 1rem auto 1.8rem;
  padding: .5rem 1.1rem;
  display: inline-block;
  background: var(--glass);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  border: 1px solid var(--line);
}
.hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.scroll-hint {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: var(--snow); font-size: 2.2rem; text-decoration: none; z-index: 2;
  animation: hint 2s ease-in-out infinite;
}
@keyframes hint { 0%,100% { transform: translate(-50%, 0); opacity: .6; } 50% { transform: translate(-50%, 8px); opacity: 1; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--pixel); font-size: 1.05rem; font-weight: 700;
  padding: .75rem 1.4rem;
  border-radius: 12px; border: 0; cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn-gold { background: var(--gold); color: #3a1a05; box-shadow: 0 5px 0 var(--orange); }
.btn-lav { background: var(--lav); color: #1c1540; box-shadow: 0 5px 0 #5f58c4; }
.btn-discord { background: #5865f2; color: #fff; box-shadow: 0 5px 0 #3a43b8; }

/* ---------- Sections ---------- */
main { position: relative; z-index: 2; }
.section { max-width: 1120px; margin: 0 auto; padding: 4.5rem 16px 1rem; }
.sec-title {
  font-family: var(--pixel);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin: 0 0 1.6rem;
  display: flex; align-items: center; gap: .7rem;
  color: var(--heading);
}
.sec-title::after {
  content: ""; flex: 1; height: 4px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--lav) 0 12px, transparent 12px 20px);
  opacity: .45;
}
.sec-ico {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--panel-solid); border: 2px solid var(--line); border-radius: 12px;
  font-size: 1.4rem;
}
.sec-sub { color: var(--muted); margin: -1rem 0 1.5rem; }

.card {
  background: var(--panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.chip {
  display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #3a1a05; background: var(--pink); padding: .2rem .7rem; border-radius: 999px;
}
.empty { color: var(--muted); text-align: center; padding: 2rem; margin: 0; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Latest ---------- */
.latest-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.4rem; }
.embed { aspect-ratio: 16/9; overflow: hidden; padding: 0; }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.latest-info { padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.latest-info h3 { font-size: 1.35rem; margin: .2rem 0 0; line-height: 1.3; }
.latest-info p { margin: 0; }
.about { flex: 1; }

.skeleton, .skeleton-card {
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton { width: 100%; height: 100%; }
.skeleton-card { min-height: 240px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Recent videos ---------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.video-card { overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .2s ease; }
.video-card:hover { transform: translateY(-4px) rotate(-.3deg); }
.video-card .thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.video-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.video-card:hover .thumb img { transform: scale(1.06); }
.video-card .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2.4rem; color: #fff; opacity: 0; background: rgba(23,18,46,.35); transition: opacity .2s;
}
.video-card:hover .play { opacity: 1; }
.video-card .meta { padding: .9rem 1.1rem 1.1rem; }
.video-card h3 { font-size: 1rem; margin: 0 0 .3rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-card .muted { font-size: .85rem; }
.link-more { font-weight: 800; text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* ---------- Fan art ---------- */
.fanart-grid { columns: 3 260px; column-gap: 1.2rem; }
.fan {
  break-inside: avoid; margin: 0 0 1.2rem; padding: 10px; cursor: zoom-in;
  transition: transform .2s ease;
}
.fan:nth-child(odd) { transform: rotate(-.6deg); }
.fan:nth-child(even) { transform: rotate(.6deg); }
.fan:hover { transform: rotate(0) scale(1.02); }
.fan img { width: 100%; border-radius: 12px; }
.fan figcaption { padding: .6rem .3rem .2rem; font-size: .92rem; }
.fan figcaption strong { color: var(--pink); }
.fan figcaption .muted { display: block; font-size: .8rem; }

.lightbox {
  border: 0; padding: 0; background: transparent; max-width: min(92vw, 1100px); max-height: 92vh;
}
.lightbox::backdrop { background: rgba(10,6,30,.85); backdrop-filter: blur(4px); }
.lb-body img { max-height: 80vh; width: auto; margin: 0 auto; border-radius: 14px; }
.lb-body p { text-align: center; color: var(--text); margin: .8rem 0 0; }
.lb-close {
  position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--panel-solid); color: var(--text); font-size: 1.2rem; cursor: pointer;
}

/* ---------- Timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--lav) 0 14px, var(--peri) 14px 28px);
  border-radius: 6px; opacity: .55;
}
.tl-item { position: relative; width: 50%; padding: 0 2.4rem 2rem; }
.tl-item:nth-child(odd) { left: 0; text-align: right; }
.tl-item:nth-child(even) { left: 50%; }
.tl-item::before {
  content: attr(data-icon); position: absolute; top: .4rem; width: 42px; height: 42px;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--gold); border: 4px solid var(--night); border-radius: 10px;
  box-shadow: 0 0 0 3px var(--orange);
}
.tl-item:nth-child(odd)::before { right: -21px; }
.tl-item:nth-child(even)::before { left: -21px; }
.tl-card { padding: 1.1rem 1.3rem; display: inline-block; text-align: left; max-width: 100%; }
.tl-date { font-family: var(--pixel); color: var(--link); font-size: .95rem; }
.tl-card h3 { margin: .1rem 0 .3rem; font-size: 1.15rem; }
.tl-card p { margin: 0; color: var(--muted); }
.tl-card img { margin-top: .7rem; border-radius: 10px; }

/* ---------- Specs ---------- */
.setup-head { margin-bottom: 1.4rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--pixel); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--peri); }
:root:not([data-theme="light"]) .eyebrow { color: var(--lav); }
.eyebrow-ico { width: 12px; height: 12px; position: relative; background: var(--orange); border-radius: 2px; }
.eyebrow-ico::after { content: ""; position: absolute; left: 4px; top: -4px; width: 8px; height: 8px; background: var(--gold); border-radius: 2px; }
.setup-title { font-family: var(--pixel); font-size: clamp(1.9rem, 4.5vw, 2.5rem); margin: .25rem 0 .2rem; color: var(--heading); line-height: 1.1; }
.setup-sub { margin: 0; color: var(--muted); font-size: 1.08rem; }

.specs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.spec {
  display: flex; align-items: center; gap: 1rem; padding: .95rem 1.1rem; border-radius: 14px;
  background: var(--spec-bg); border: 1px solid var(--spec-line);
  transition: transform .18s ease, border-color .18s ease;
}
.spec:hover { transform: translateY(-2px); border-color: var(--lav); }
.spec-ico {
  flex: none; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: var(--spec-tile); color: var(--spec-ink); box-shadow: 0 1px 2px rgba(40, 30, 110, .08);
}
.spec-ico svg { width: 24px; height: 24px; }
.spec-text { min-width: 0; }
.spec small { display: block; font-family: var(--pixel); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .1rem; }
.spec span { display: block; font-weight: 800; font-size: 1.06rem; color: var(--text); overflow-wrap: anywhere; }
.spec span.soon { font-style: italic; font-weight: 700; opacity: .75; }
@media (max-width: 560px) { .specs-grid { grid-template-columns: 1fr; } }

/* ---------- Socials ---------- */
.socials { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.social {
  padding: 1rem 1.1rem; display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--text);
  transition: transform .18s, border-color .18s;
}
.social:hover { transform: translateY(-3px); border-color: var(--brand, var(--gold)); }
.social .s-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--brand-bg, var(--brand, var(--peri))); color: #fff;
}
.social .s-ico svg { width: 24px; height: 24px; fill: currentColor; }
.social b { display: block; }
.social > span:last-child { min-width: 0; }
.social small { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Discord ---------- */
.discord-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.4rem; align-items: stretch; }
.discord-card { padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.discord-card img { border-radius: 50%; box-shadow: 0 0 0 4px var(--gold); }
.discord-card h3 { font-family: var(--pixel); font-size: 1.5rem; margin: .4rem 0 0; }
.discord-card p { margin: 0 0 .6rem; }
.discord-widget { overflow: hidden; min-height: 420px; display: grid; place-items: center; padding: 0; }
.discord-widget iframe { width: 100%; height: 100%; min-height: 420px; border: 0; }

/* ---------- Footer ---------- */
.footer {
  position: relative; z-index: 2; text-align: center; padding: 4rem 16px 2.5rem; color: var(--muted); font-size: .9rem;
}
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 5; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; text-decoration: none; font-weight: 800; font-size: 1.3rem;
  background: var(--gold); color: #3a1a05; box-shadow: 0 4px 0 var(--orange);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.to-top.show { opacity: 1; pointer-events: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .latest-grid, .discord-grid { grid-template-columns: 1fr; }
  .timeline::before { left: 21px; }
  .tl-item, .tl-item:nth-child(even), .tl-item:nth-child(odd) { width: 100%; left: 0; text-align: left; padding: 0 0 1.6rem 64px; }
  .tl-item:nth-child(odd)::before, .tl-item:nth-child(even)::before { left: 0; right: auto; }
}
@media (max-width: 520px) {
  .avatar-frame { width: 140px; height: 140px; }
  .sec-title::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 20;
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--glass); color: var(--text);
  border: 1px solid var(--line); backdrop-filter: blur(8px);
  box-shadow: var(--shadow); transition: transform .15s;
}
.theme-toggle:hover { transform: translateY(-2px) rotate(-8deg); }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: inline; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
.admin .theme-toggle { position: static; width: 36px; height: 36px; font-size: 1rem; box-shadow: none; }
body, .card, .a-head, .a-bar { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }

/* ---------- Social totals + business ---------- */
.social-total {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; margin-bottom: 1.2rem;
  background: linear-gradient(120deg, rgba(249,178,52,.22), rgba(157,151,245,.18) 60%, rgba(244,166,192,.18)), var(--panel);
}
.st-crown { font-size: 2.2rem; animation: bob 4s ease-in-out infinite; }
.st-num { display: block; font-family: var(--pixel); font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.05; color: var(--link); }
.social small.s-count { color: var(--text); font-weight: 700; opacity: .85; white-space: normal; }
.business {
  margin-top: 1rem; padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1rem;
  text-decoration: none; color: var(--text); transition: transform .18s, border-color .18s;
}
.business:hover { transform: translateY(-3px); border-color: var(--gold); }
.b-ico { width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem;
  background: linear-gradient(135deg, var(--gold), var(--orange)); }
.business b { display: block; }
.business small { color: var(--muted); word-break: break-all; }
.b-cta { margin-left: auto; font-weight: 800; color: var(--link); white-space: nowrap; }
@media (max-width: 520px) { .b-cta { display: none; } }

/* ---------- Timeline growth graph + filters ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.growth { padding: 1.2rem 1.4rem 1rem; margin-bottom: 1.4rem; }
.growth-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.growth-head h3 { margin: 0; font-family: var(--pixel); font-size: 1.25rem; }
.growth-head p { margin: .1rem 0 0; }
.growth-now { font-family: var(--pixel); font-size: 2rem; line-height: 1; color: var(--link); }
.growth-chart { position: relative; margin-top: .6rem; }
.growth-chart svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.g-grid { stroke: var(--line); stroke-width: 1; }
.g-label { fill: var(--muted); font-size: 12px; font-family: var(--body); font-weight: 700; }
.g-line { fill: none; stroke: var(--g-color, var(--gold)); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.g-ms circle { fill: var(--panel-solid); stroke: var(--orange); stroke-width: 3; }
.g-ms text { font-size: 16px; }
.g-cursor { stroke: var(--lav); stroke-width: 1.5; stroke-dasharray: 4 4; }
.g-hover { fill: var(--g-color, var(--gold)); stroke: var(--panel-solid); stroke-width: 3; }
.g-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .7rem;
  font-size: .85rem; line-height: 1.35; white-space: nowrap; box-shadow: var(--shadow); text-align: center; }
.g-tip span { color: var(--muted); }

.tl-filters { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.chip-btn { font: inherit; font-weight: 800; font-size: .9rem; padding: .45rem .95rem; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); transition: background .15s, transform .15s; }
.chip-btn:hover { transform: translateY(-1px); }
.chip-btn[aria-pressed="true"] { background: var(--gold); color: #3a1a05; border-color: var(--gold); }
.year-pick select { font: inherit; font-weight: 800; padding: .45rem .9rem; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.tl-type { display: inline-block; margin-left: .5rem; font-family: var(--body); font-size: .72rem; font-weight: 800;
  padding: .05rem .5rem; border-radius: 999px; background: var(--field); color: var(--muted); vertical-align: middle; }
.tl-type.tl-livestream { background: rgba(201,51,61,.18); color: #ff8f98; }
.tl-type.tl-video { background: rgba(157,151,245,.2); color: var(--lav); }
:root[data-theme="light"] .tl-type.tl-livestream { color: #b3242f; }
:root[data-theme="light"] .tl-type.tl-video { color: #4b44b8; }
.tl-card p.tl-subs { color: var(--text); font-weight: 700; margin-top: .3rem; }
@media (max-width: 520px) { .growth-now { font-size: 1.5rem; } .g-label { font-size: 16px; } }
.g-cursor, .g-hover { opacity: 0; transition: opacity .15s; }
.hovering .g-cursor, .hovering .g-hover { opacity: 1; }

/* ---------- QoL ---------- */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: #3a1a05; padding: .5rem 1rem; border-radius: 8px; font-weight: 800; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.announce { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .6rem 3rem; text-align: center; font-weight: 800;
  background: linear-gradient(90deg, var(--gold), var(--sunset), var(--pink)); color: #3a1a05; }
.announce a { color: inherit; }
.announce-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: rgba(58,26,5,.12);
  color: inherit; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-weight: 800; }
.has-announce .theme-toggle { top: 64px; }

.new-badge { position: absolute; top: 10px; left: 10px; background: var(--royal); color: #fff; font-family: var(--pixel);
  font-size: .8rem; padding: .1rem .5rem; border-radius: 6px; box-shadow: 0 3px 0 #7d1820; }
.new-badge.inline { position: static; vertical-align: middle; font-size: .75rem; }

.btn-sm-pub { font: inherit; font-weight: 800; font-size: .88rem; padding: .45rem .85rem; border-radius: 10px; cursor: pointer;
  background: var(--field, rgba(23,18,46,.6)); color: var(--text); border: 1px solid var(--line); text-decoration: none; white-space: nowrap; }
.btn-sm-pub:hover { border-color: var(--gold); }
.b-mail { background: var(--gold); color: #3a1a05; border-color: var(--gold); }
.b-text { min-width: 0; }
.b-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) { .business { flex-wrap: wrap; } .b-actions { width: 100%; justify-content: stretch; } .b-actions > * { flex: 1; text-align: center; } }

.lightbox { overflow: visible; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--panel-solid); color: var(--text); font-size: 2rem; line-height: 1; box-shadow: var(--shadow); }
.lb-prev { left: 16px; } .lb-next { right: 16px; }
.lightbox.single .lb-nav { display: none; }
.lb-count { display: block; color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.lb-video { width: min(92vw, 1000px); aspect-ratio: 16 / 9; }
.lb-video iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; background: #000; }
.lb-body a { color: var(--gold); }

.dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 15; display: none; flex-direction: column; gap: 12px; }
.dots a { position: relative; width: 12px; height: 12px; border-radius: 3px; background: var(--line); border: 2px solid var(--muted); transition: transform .2s, background .2s; }
.dots a.on { background: var(--gold); border-color: var(--orange); transform: scale(1.25); }
.dots a::before { content: attr(data-label); position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: .8rem; font-weight: 800; padding: .2rem .55rem; border-radius: 6px; background: var(--panel-solid); color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity .15s; box-shadow: var(--shadow); }
.dots a:hover::before, .dots a:focus-visible::before { opacity: 1; }
@media (min-width: 1240px) { .dots { display: flex; } }

/* ---------- PC setup photo ---------- */
.setup-photo { margin: 0; }
.setup-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); }
.setup-zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.setup-zoom:hover img { transform: scale(1.03); }
.setup-photo figcaption { margin-top: .6rem; color: var(--muted); font-size: .92rem; text-align: center; }
.photo-above .setup-photo { margin-bottom: 1.1rem; }
.photo-above .setup-zoom { aspect-ratio: 21 / 9; }
.photo-beside { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.photo-beside .setup-photo { position: sticky; top: 24px; }
.photo-beside .setup-zoom { aspect-ratio: 4 / 5; }
.photo-beside .specs-grid { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .photo-beside { grid-template-columns: 1fr; }
  .photo-beside .setup-photo { position: static; }
  .photo-beside .setup-zoom { aspect-ratio: 16 / 10; }
  .photo-beside .specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .photo-beside .specs-grid { grid-template-columns: 1fr; }
  .photo-above .setup-zoom { aspect-ratio: 16 / 10; }
}

/* ---------- Live on Twitch ---------- */
.announce.live { background: linear-gradient(90deg, #9146ff, #c9333d); color: #fff; flex-wrap: wrap; row-gap: .3rem; }
.announce.live .announce-x { background: rgba(255,255,255,.18); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: livepulse 1.6s infinite; display: inline-block; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.live-meta { font-weight: 700; opacity: .85; font-size: .9rem; }
.live-cta { background: #fff; color: #5b21b6 !important; text-decoration: none; padding: .25rem .8rem; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.live-embed { padding: 0; overflow: hidden; margin-bottom: 1.4rem; border-color: #9146ff; }
.live-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; flex-wrap: wrap; }
.live-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-head a { font-weight: 800; text-decoration: none; }
.live-pill { display: inline-flex; align-items: center; gap: .45rem; background: #e91916; color: #fff; font-family: var(--pixel);
  font-size: .85rem; padding: .2rem .65rem; border-radius: 6px; }
.live-pill .live-dot { width: 8px; height: 8px; }
.live-frame { aspect-ratio: 16 / 9; background: #000; }
.live-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.live-twitch .social[data-platform="twitch"],
.live-youtube .social[data-platform="youtube"],
.live-tiktok .social[data-platform="tiktok"] { border-color: var(--live-c); box-shadow: 0 0 0 2px var(--live-ring), var(--shadow); }
.social[data-platform="twitch"] { --live-c: #9146ff; --live-ring: rgba(145,70,255,.35); }
.social[data-platform="youtube"] { --live-c: #ff0033; --live-ring: rgba(255,0,51,.3); }
.social[data-platform="tiktok"] { --live-c: #fe2c55; --live-ring: rgba(254,44,85,.3); }
.live-twitch .social[data-platform="twitch"] b::after,
.live-youtube .social[data-platform="youtube"] b::after,
.live-tiktok .social[data-platform="tiktok"] b::after {
  content: "LIVE"; margin-left: .45rem; font-family: var(--pixel); font-size: .7rem; padding: .05rem .4rem;
  border-radius: 4px; background: #e91916; color: #fff; vertical-align: middle; animation: livetag 2s ease-in-out infinite; }
@keyframes livetag { 50% { opacity: .65; } }
.announce.live[data-platform="youtube"] { background: linear-gradient(90deg, #ff0033, #c9333d); }
.announce.live[data-platform="tiktok"] { background: linear-gradient(90deg, #25f4ee 0%, #fe2c55 35%, #c9333d 100%); }
.live-cta.alt { background: rgba(255,255,255,.18); color: #fff !important; }
.live-embed[data-platform="youtube"] { border-color: #ff0033; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } .social b::after { animation: none !important; } }
.announce-text { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3rem .7rem; }

.growth-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; }
.chip-btn.small { font-size: .82rem; padding: .3rem .75rem; display: inline-flex; align-items: center; gap: .4rem; }
.g-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); flex: none; }
.chip-btn.small[aria-pressed="true"] { background: var(--panel-solid); color: var(--text); border-color: var(--dot); box-shadow: inset 0 0 0 1px var(--dot); }
.growth-now { white-space: nowrap; }

/* ---------- QoL round 2 ---------- */
.countdown { font-family: var(--pixel); font-weight: 700; background: rgba(58,26,5,.14); padding: .15rem .65rem; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-share { font: inherit; font-size: .85rem; font-weight: 800; background: none; border: 0; color: var(--gold); cursor: pointer; padding: 0; }
.lb-share:hover { text-decoration: underline; }
section[hidden] { display: none !important; }

/* ---------- Timeline teaser (home) ---------- */
.tl-teaser { display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem 1.8rem; text-decoration: none; color: var(--text);
  background: linear-gradient(120deg, rgba(249,178,52,.16), rgba(157,151,245,.14) 55%, rgba(244,166,192,.14)), var(--panel);
  transition: transform .2s ease, border-color .2s; }
.tl-teaser:hover { transform: translateY(-3px); border-color: var(--gold); }
.tlt-ico { font-size: 3rem; flex: none; animation: bob 5s ease-in-out infinite; }
.tlt-text { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.tlt-title { font-family: var(--pixel); font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.15; }
.tlt-sub { color: var(--muted); }
.tlt-stats b { color: var(--text); }
.tlt-latest { font-weight: 700; font-size: .95rem; }
.tlt-side { display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; flex: none; }
.tlt-spark { display: flex; flex-direction: column; align-items: flex-end; }
.tlt-spark svg { width: 180px; height: 50px; }
.spark-line { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-fill { fill: var(--gold); opacity: .15; }
@media (max-width: 700px) {
  .tl-teaser { flex-direction: column; align-items: flex-start; text-align: left; }
  .tlt-side { align-items: stretch; width: 100%; }
  .tlt-spark { align-items: flex-start; }
  .tlt-side .btn { justify-content: center; }
}

/* ---------- Sub-page header (timeline page) ---------- */
.sub-hero { position: relative; z-index: 2; padding: 1.4rem 16px 2.4rem;
  background: linear-gradient(180deg, rgba(23,18,46,.25), var(--night)), url("/assets/banner.jpg") center 35% / cover no-repeat; }
.back-home { display: inline-block; font-weight: 800; text-decoration: none; padding: .45rem .9rem; border-radius: 999px;
  background: var(--glass); color: var(--text); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.back-home:hover { border-color: var(--gold); }
.sub-hero-inner { max-width: 1120px; margin: 2.4rem auto 0; display: flex; align-items: center; gap: 1.2rem;
  background: var(--glass); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.sub-avatar { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 0 0 4px var(--gold); flex: none; }
.sub-hero h1 { margin: .15rem 0 .2rem; font-size: clamp(1.8rem, 5vw, 2.8rem); color: var(--gold); text-shadow: 0 3px 0 var(--orange); line-height: 1.1; }
.sub-intro { margin: 0; color: var(--text); font-weight: 600; }
.page-timeline .section { padding-top: 2rem; }
@media (max-width: 520px) { .sub-hero-inner { flex-direction: column; text-align: center; } }

/* ---------- QoL round 3 ---------- */
.snow-toggle { position: fixed; top: 70px; right: 16px; z-index: 20; width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; font-size: 1.15rem; background: var(--glass); color: var(--text);
  border: 1px solid var(--line); backdrop-filter: blur(8px); box-shadow: var(--shadow); transition: transform .15s, opacity .2s; }
.snow-toggle:hover { transform: translateY(-2px); }
.snow-toggle.off { opacity: .55; }
.snow-toggle.off::after { content: ""; position: absolute; width: 26px; height: 2.5px; background: var(--text); transform: rotate(-45deg); border-radius: 2px; }
.has-announce .snow-toggle { top: 118px; }
.sec-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: -1rem 0 1.5rem; }
.sec-sub-row .sec-sub { margin: 0; }
.video-grid .video-card:nth-child(n+7) { display: none; }
.video-grid.show-all .video-card:nth-child(n+7) { display: flex; }
.more-row { display: flex; flex-direction: column; align-items: center; gap: .8rem; }

.sec-title.has-link { margin-bottom: .35rem; }
.top-link { display: inline-block; margin: 0 0 1.2rem; font-size: .95rem; }

/* ---------- Stream schedule ---------- */
section.is-empty { display: none !important; }
.sched-sub { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: -1rem 0 1.2rem; }
.sched-sub .sec-sub { margin: 0; }
.tz-toggle { font: inherit; font-weight: 800; font-size: .85rem; padding: .4rem .85rem; border-radius: 999px; cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.tz-toggle:hover { border-color: var(--gold); }
.next-up { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.4rem; margin-bottom: 1.1rem;
  border-left: 6px solid var(--pc); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 16%, transparent), transparent 60%), var(--panel); }
.nu-left { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.nu-label { font-family: var(--pixel); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nu-title { font-size: 1.35rem; line-height: 1.25; }
.nu-right { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.nu-count { font-family: var(--pixel); font-size: 1.3rem; color: var(--link); font-variant-numeric: tabular-nums; white-space: nowrap; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.day { padding: .8rem .7rem; display: flex; flex-direction: column; gap: .5rem; min-height: 150px; }
.day.today { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(249,178,52,.3), var(--shadow); }
.day.off { opacity: .7; }
.day-name { font-family: var(--pixel); font-size: 1.05rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.day-full { display: none; }
.today-pill { font-family: var(--body); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--gold); color: #3a1a05; padding: .05rem .4rem; border-radius: 999px; }
.slot { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .6rem; border-radius: 10px; border-left: 4px solid var(--pc);
  background: color-mix(in srgb, var(--pc) 12%, var(--field)); }
.slot-time { font-family: var(--pixel); font-size: 1.05rem; }
.slot-title { font-weight: 800; font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.slot-plat, .slot-note { font-size: .75rem; color: var(--muted); font-weight: 700; }
.slot-off { color: var(--muted); font-size: .85rem; font-style: italic; margin-top: auto; margin-bottom: auto; }
.specials { margin-top: 1.4rem; }
.specials-title { font-family: var(--pixel); font-size: 1.2rem; margin: 0 0 .7rem; }
#specials-list { display: grid; gap: .6rem; }
.special { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; flex-wrap: wrap; border-left: 5px solid var(--pc); }
.sp-date { display: flex; flex-direction: column; align-items: center; width: 52px; flex: none; line-height: 1.05; }
.sp-date b { font-family: var(--pixel); font-size: 1.6rem; }
.sp-date span { font-size: .75rem; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.sp-body { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
@media (max-width: 960px) {
  .week { grid-template-columns: 1fr; gap: .45rem; }
  .day { min-height: 0; flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  .day-name { width: 120px; flex: none; padding-top: .4rem; }
  .day-full { display: inline; }
  .day .slot { flex: 1; min-width: 160px; }
  .slot-off { margin: .4rem 0 0; }
}

/* ---------- Readable lightbox captions (fan art + videos) ---------- */
.lb-body > p, .lb-caption {
  margin: .9rem auto 0; max-width: min(92vw, 1000px); padding: .8rem 1.1rem; border-radius: 14px;
  background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 1.05rem; line-height: 1.45; text-align: center;
}
.lb-body > p a { color: var(--link); font-weight: 800; }
.lb-body .lb-count { color: var(--muted); }
.lb-share { color: var(--link); }
.lb-video-cap { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; text-align: left; }
.lb-title { font-size: 1.12rem; font-weight: 800; line-height: 1.35; flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.lb-yt { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .5rem 1rem; border-radius: 10px;
  background: #ff0033; color: #fff !important; font-weight: 800; text-decoration: none; white-space: nowrap; }
.lb-yt:hover { filter: brightness(1.08); }
@media (max-width: 520px) { .lb-video-cap { flex-direction: column; align-items: stretch; text-align: center; } .lb-yt { justify-content: center; } }

/* ---------- Color-coded growth graph ---------- */
.g-line.g-sub { stroke-width: 2.2; opacity: .9; }
.g-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .6rem; justify-content: center; }
.g-leg { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .85rem; font-weight: 700; color: var(--muted);
  background: none; border: 0; padding: .15rem .3rem; border-radius: 6px; cursor: pointer; }
button.g-leg:hover { color: var(--text); background: var(--field); }
.g-leg.main { cursor: default; color: var(--text); }
.g-leg i { width: 14px; height: 4px; border-radius: 2px; background: var(--c); display: inline-block; }
.g-leg.main i { height: 5px; }
.g-leg b { color: var(--text); }
.tip-rows { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--line); display: grid; gap: .1rem; text-align: left; }
.tip-row { color: var(--text) !important; font-size: .8rem; display: flex; align-items: center; gap: .35rem; }
.tip-row i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tip-row b { margin-left: auto; padding-left: .6rem; }

/* ---------- QoL round 4 ---------- */
.preview-bar { position: sticky; top: 0; z-index: 60; text-align: center; padding: .55rem 16px; font-weight: 700;
  background: repeating-linear-gradient(135deg, #6d28d9 0 14px, #7c3aed 14px 28px); color: #fff; }
.preview-bar a { color: #fff; margin-left: .6rem; font-weight: 800; }
.lb-body > img { transition: transform .25s ease; cursor: zoom-in; }
.lb-body > img.zoomed { transform: scale(2.2); cursor: zoom-out; }
.lightbox:not(.video) .lb-body { overflow: hidden; border-radius: 14px; }
.lightbox.video .lb-body > img { cursor: default; }
.tl-search { font: inherit; font-weight: 700; padding: .45rem .9rem; border-radius: 999px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); min-width: 0; flex: 1; max-width: 320px; }
.tl-search:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) { .tl-search { max-width: none; width: 100%; flex: 1 1 100%; order: 3; } }

/* ---------- Latest video description ---------- */
.vid-desc { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; width: 100%; }
.vid-desc-text { font-size: .95rem; line-height: 1.55; color: var(--text); opacity: .9; overflow-wrap: anywhere; }
.vid-desc-text.clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.vid-desc-text a { color: var(--link); font-weight: 700; }
.desc-more { font: inherit; font-size: .88rem; font-weight: 800; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; }
.desc-more:hover { text-decoration: underline; }
.about-spacer { flex: 1; }

/* ---------- Footer quick links + section link buttons ---------- */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .5rem; margin-bottom: 1rem; }
.footer-nav a { text-decoration: none; font-weight: 800; font-size: .9rem; color: var(--text); padding: .35rem .8rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); }
.footer-nav a:hover { border-color: var(--gold); }
.footer-nav a[hidden] { display: none; }
.sec-link { order: 2; font: 800 1rem/1 var(--body); width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; flex: none; }
.sec-title { position: relative; }
.sec-title:hover .sec-link, .sec-link:focus-visible { opacity: 1; }
.sec-title::after { order: 3; }
@media (hover: none) { .sec-link { display: none; } }

/* Latest upload: compact description preview */
.vid-desc-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Fan art submission form ---------- */
.submit-dlg { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 3px solid var(--sd-ink); border-radius: 16px;
  background: var(--sd-bg); color: var(--sd-ink); box-shadow: 8px 8px 0 var(--sd-shadow); overflow: auto; --sd-ink: #2a1630; --sd-bg: #fffdf8; --sd-shadow: rgba(244,166,192,.85); --sd-muted: #7a5566; }
:root:not([data-theme="light"]) .submit-dlg { --sd-ink: #f2efff; --sd-bg: #221a44; --sd-shadow: rgba(157,151,245,.55); --sd-muted: #b9b2e6; }
.submit-dlg::backdrop { background: rgba(10,6,30,.65); backdrop-filter: blur(3px); }
.sd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.4rem .4rem; }
.sd-head h2 { margin: 0; font-size: 1.7rem; color: var(--sd-ink); }
.sd-close { flex: none; width: 42px; height: 42px; border-radius: 10px; border: 2.5px solid var(--sd-ink); background: var(--sd-bg); color: var(--sd-ink);
  font-weight: 800; cursor: pointer; box-shadow: 3px 3px 0 var(--sd-shadow); }
.sd-body, .sd-done { padding: .4rem 1.4rem 1.4rem; display: grid; gap: 1rem; }
.sd-field { display: grid; gap: .35rem; }
.sd-label { font-weight: 800; font-size: 1.05rem; }
.sd-req { color: #c9333d; font-weight: 600; font-size: .85rem; }
:root:not([data-theme="light"]) .sd-req { color: #ff8f98; }
.sd-opt { color: var(--sd-muted); font-weight: 600; font-size: .85rem; }
.sd-input { font: inherit; color: var(--sd-ink); background: transparent; border: 2.5px solid var(--sd-ink); border-radius: 12px; padding: .7rem .85rem; width: 100%; }
.sd-input:focus, .sd-file:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
textarea.sd-input { resize: vertical; min-height: 110px; }
.sd-file { display: flex; align-items: center; gap: .8rem; border: 2.5px solid var(--sd-ink); border-radius: 12px; padding: .45rem; cursor: pointer; position: relative; }
.sd-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sd-pick { background: var(--gold); color: #2a1630; font-weight: 800; padding: .55rem .9rem; border-radius: 8px; border: 2px solid #2a1630; white-space: nowrap; }
.sd-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-prev { max-height: 220px; width: auto; max-width: 100%; border-radius: 10px; border: 2px solid var(--sd-ink); justify-self: start; }
.sd-hint { margin: 0; font-size: .88rem; color: var(--sd-muted); }
.sd-count { margin: 0; text-align: right; font-size: .85rem; font-weight: 700; color: var(--sd-muted); }
.sd-consent { display: flex; gap: .8rem; align-items: flex-start; font-weight: 800; line-height: 1.4; cursor: pointer; }
.sd-consent input { width: 24px; height: 24px; flex: none; margin-top: .1rem; accent-color: var(--gold); cursor: pointer; }
.sd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sd-turnstile:empty { display: none; }
.sd-error { margin: 0; padding: .6rem .8rem; border-radius: 10px; background: rgba(201,51,61,.12); border: 2px solid #c9333d; font-weight: 700; }
.sd-actions { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.sd-actions .btn { border: 2.5px solid #2a1630; }
.sd-done { text-align: center; justify-items: center; }
.sd-done-ico { font-size: 3rem; }
.sd-done h3 { margin: 0; font-size: 1.6rem; }
.sd-done p { margin: 0; color: var(--sd-muted); }
.fan { position: relative; }
.fan-star { position: absolute; top: 16px; left: 16px; z-index: 1; font-size: .78rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px;
  background: var(--gold); color: #3a1a05; box-shadow: 0 2px 0 var(--orange); }
.fan.featured { border-color: var(--gold); }

/* ---------- Timeline page QoL ---------- */
.tl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
.tls { padding: .8rem 1rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; gap: .15rem; }
.tls b { font-family: var(--pixel); font-size: 1.5rem; color: var(--link); line-height: 1.1; }
.tls span { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tl-result { margin: -.8rem 0 1.2rem; }
.link-btn { font: inherit; font-weight: 800; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.tl-year-mark { list-style: none; position: relative; text-align: center; margin: .4rem 0 1.4rem; z-index: 1; scroll-margin-top: 80px; }
.tl-year-mark span { display: inline-block; font-family: var(--pixel); font-size: 1.15rem; padding: .3rem 1rem; border-radius: 999px;
  background: var(--gold); color: #3a1a05; box-shadow: 0 3px 0 var(--orange); }
.tl-item { scroll-margin-top: 90px; }
.tl-date { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .3rem; }
.tl-share { margin-left: auto; font-size: .85rem; background: none; border: 0; cursor: pointer; opacity: .45; padding: .1rem .2rem; border-radius: 6px; }
.tl-card:hover .tl-share, .tl-share:focus-visible { opacity: 1; }
.tl-ago { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin-top: .1rem; }
.tl-anniv { display: inline-block; margin-top: .35rem; font-size: .8rem; font-weight: 800; padding: .15rem .55rem; border-radius: 999px; background: var(--pink); color: #3a1a05; }
.tl-thumb { display: block; position: relative; margin-top: .7rem; border-radius: 10px; overflow: hidden; }
.tl-thumb img { margin: 0 !important; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s; }
.tl-thumb:hover img { transform: scale(1.04); }
.tl-thumb.is-video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: #fff;
  background: rgba(23,18,46,.25); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tl-glow .tl-card { animation: tlglow 2.6s ease; }
@keyframes tlglow { 0%, 60% { box-shadow: 0 0 0 4px var(--gold), 0 0 30px rgba(249,178,52,.6); } 100% { box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .tl-glow .tl-card { animation: none; box-shadow: 0 0 0 4px var(--gold); } }

/* Timeline: Watch button */
.tl-actions { margin-top: .8rem; display: flex; }
.tl-watch { font-size: .95rem; padding: .55rem 1.1rem; }
.btn-live { background: #e91916; color: #fff; box-shadow: 0 5px 0 #8e0f0d; }
.tl-item:nth-child(odd) .tl-actions { justify-content: flex-start; }

/* ---------- Coming soon (from WIP Videos) ---------- */
.coming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.coming-card { overflow: hidden; display: flex; flex-direction: column; }
.coming-thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--peri), var(--pink)); display: grid; place-items: center; font-size: 2.6rem; overflow: hidden; }
.coming-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.coming-thumb .soon-tag { position: absolute; top: 10px; left: 10px; font: 700 .78rem/1 var(--pixel); letter-spacing: .06em; padding: .3rem .55rem; border-radius: 6px;
  background: rgba(23,18,46,.82); color: var(--gold); }
.coming-meta { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.coming-meta b { font-size: 1.02rem; line-height: 1.3; }
.coming-status { align-self: flex-start; font-size: .75rem; font-weight: 800; padding: .15rem .55rem; border-radius: 999px; background: var(--field, rgba(255,255,255,.08)); color: var(--text); }
.coming-meta .muted { font-size: .85rem; }

/* Form preview notice */
.sd-preview-note { margin: 0; padding: .6rem .8rem; border-radius: 10px; font-weight: 700; font-size: .9rem;
  background: repeating-linear-gradient(135deg, rgba(124,58,237,.14) 0 12px, rgba(124,58,237,.22) 12px 24px); border: 2px dashed #7c3aed; }

/* ---------- Fan art gallery styles ---------- */
.fan-tools { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: -.4rem 0 1rem; }
.fan-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.fan-chips button, .fan-switch button, .fan-arrow { font: inherit; font-weight: 800; font-size: .86rem; color: var(--text); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: .32rem .75rem; cursor: pointer; transition: border-color .15s, background .15s; }
.fan-chips button span { opacity: .6; font-size: .78rem; margin-left: .15rem; }
.fan-chips button[aria-pressed="true"], .fan-switch button[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: #2a1030; }
.fan-chips button:hover, .fan-switch button:hover, .fan-arrow:hover { border-color: var(--pink); }
.fan-tools-end { display: inline-flex; gap: .4rem; align-items: center; margin-left: auto; }
.fan-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.fan-switch button { border: 0; padding: .25rem .6rem; background: none; }
.fan-arrow { width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.fan-count { font-size: .9rem; }
.fan img { display: block; }
.fan { cursor: zoom-in; transition: transform .2s ease, box-shadow .2s ease; }
.fan:hover, .fan:focus-visible { transform: translateY(-3px); }

/* Even grid */
.fanart-grid.layout-grid { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.layout-grid .fan, .layout-spotlight .fan { margin: 0; break-inside: auto; }
.layout-grid .fan img, .layout-spotlight .fan img, .layout-carousel .fan img { aspect-ratio: 1; object-fit: cover; height: auto; }

/* Spotlight: the first piece big */
.fanart-grid.layout-spotlight { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.layout-spotlight .fan:first-child { grid-column: span 2; grid-row: span 2; }
.layout-spotlight .fan:first-child img { aspect-ratio: auto; height: 100%; max-height: 640px; }
.layout-spotlight .fan:first-child { display: flex; flex-direction: column; }
.layout-spotlight .fan:first-child img { flex: 1; min-height: 0; }

/* Carousel */
.fanart-grid.layout-carousel { columns: auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30%); gap: 1rem; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: .3rem .2rem 1rem; scrollbar-width: thin; overscroll-behavior-x: contain; }
.layout-carousel .fan { margin: 0; scroll-snap-align: start; }
.layout-carousel + .center #fanart-more, .layout-carousel ~ .center { display: none; }

/* Polaroids */
.fanart-grid.layout-polaroid { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.6rem 1.2rem; padding: .6rem; }
.layout-polaroid .fan { margin: 0; background: #fffdf7; color: #2a2150; border: 0; border-radius: 4px; padding: .7rem .7rem 0; transform: rotate(var(--r, 0deg));
  box-shadow: 0 10px 24px rgba(8,4,30,.28); }
.layout-polaroid .fan:hover, .layout-polaroid .fan:focus-visible { transform: rotate(0deg) scale(1.04); z-index: 2; }
.layout-polaroid .fan img { aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.layout-polaroid .fan figcaption { font-family: var(--pixel); text-align: center; padding: .55rem .2rem .7rem; color: #2a2150; }
.layout-polaroid .fan figcaption strong, .layout-polaroid .fan figcaption a strong { color: #b4407a; }
.layout-polaroid .fan figcaption .muted { color: #7a7299; }
.layout-polaroid .fan-star { top: 10px; left: 10px; }

/* Captions on hover */
.cap-hover .fan { position: relative; overflow: hidden; }
.cap-hover .fan figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .7rem; color: #fff;
  background: linear-gradient(transparent, rgba(10,6,30,.85)); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; border-radius: 0 0 12px 12px; }
.cap-hover .fan:hover figcaption, .cap-hover .fan:focus-within figcaption { opacity: 1; transform: none; }
.cap-hover .fan figcaption strong { color: #fff; }
.cap-hover .fan figcaption .muted { color: rgba(255,255,255,.75); }
@media (hover: none) { .cap-hover .fan figcaption { opacity: 1; transform: none; } }
.cap-none .fan figcaption { display: none; }
.cap-hover.layout-polaroid .fan figcaption { position: static; opacity: 1; transform: none; background: none; color: #2a2150; padding: .55rem .2rem .7rem; }
.cap-hover.layout-polaroid .fan figcaption strong { color: #b4407a; }

@media (max-width: 720px) {
  .fanart-grid.layout-spotlight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fanart-grid.layout-carousel { grid-auto-columns: 78%; }
  .fanart-grid.layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .fanart-grid.layout-polaroid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .8rem; }
}
@media (prefers-reduced-motion: reduce) { .fan, .layout-polaroid .fan { transition: none; } }
@media (max-width: 600px) { .announce { flex-wrap: wrap; row-gap: .3rem; padding-right: 2.6rem; } .countdown { white-space: normal; text-align: center; } }
:root[data-theme="light"] .fan figcaption strong { color: #b03a74; }
@media (max-width: 720px) { .layout-spotlight .fan:first-child { grid-row: span 1; } }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .section { padding-top: 3rem; }
  /* Recent videos: two small cards per row instead of one long column */
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .video-grid .video-card h3 { font-size: .88rem; }
  .video-grid .video-card { font-size: .82rem; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
}
@media (hover: none) { .btn, .btn-sm, button, a { -webkit-tap-highlight-color: transparent; } }
@media (max-width: 600px) { .video-grid .video-card .meta { padding: .6rem .7rem .75rem; } }

/* ================= Media kit (/mediakit) ================= */
.mk-page .sub-hero-inner { flex-wrap: wrap; }
.mk-cta { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }
.mk { max-width: 1120px; margin: 0 auto; padding: 0 16px 3rem; position: relative; z-index: 2; }
.mk-sec { margin-top: 2.4rem; }
.mk-small { font-family: var(--body); font-size: .9rem; font-weight: 700; }
.mk-about { padding: 1.3rem 1.5rem; font-size: 1.05rem; line-height: 1.65; }
.mk-about p { margin: 0; white-space: pre-line; }
.mk-audience { margin-top: .8rem !important; color: var(--muted); }
.mk-total { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; margin-bottom: 1rem;
  background: linear-gradient(120deg, rgba(249,178,52,.22), rgba(157,151,245,.18) 60%, rgba(244,166,192,.18)), var(--panel); }
.mk-crown { font-size: 2.2rem; }
.mk-total b { display: block; font-family: var(--pixel); font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.05; color: var(--link); }
.mk-plats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem; }
.mk-plat { padding: 1rem 1.1rem; display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--text); }
.mk-plat .s-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--brand-bg, var(--brand)); color: #fff; }
.mk-plat .s-ico svg { width: 24px; height: 24px; fill: currentColor; }
.mk-plat b { display: block; font-size: 1.45rem; line-height: 1.1; }
.mk-plat small { color: var(--muted); font-weight: 700; }
.mk-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mk-vid { overflow: hidden; text-decoration: none; color: var(--text); display: flex; flex-direction: column; }
.mk-vid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mk-vid span { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.mk-vid small { color: var(--muted); font-weight: 700; }
.mk-aud { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 1rem; }
.mk-stat { padding: 1.2rem; display: flex; flex-direction: column; gap: .2rem; }
.mk-stat > b { font-family: var(--pixel); font-size: 2.2rem; color: var(--link); line-height: 1.1; }
.mk-k { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mk-bars { padding: 1.1rem 1.2rem; }
.mk-bars h3 { margin: 0 0 .6rem; font-size: 1rem; }
.mk-bars ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.mk-bars li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; font-size: .95rem; }
.mk-bars li i { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: var(--gold); }
.mk-rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.mk-rate { padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .25rem; }
.mk-rate b { font-size: 1.05rem; }
.mk-rate span { color: var(--link); font-weight: 800; }
.mk-brands { margin-top: 1rem; padding: 1rem 1.2rem; }
.mk-brands p { margin: .3rem 0 0; font-weight: 700; }
.mk-contact { margin-top: 2.6rem; padding: 1.5rem 1.7rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(249,178,52,.2), rgba(157,151,245,.16)), var(--panel); }
.mk-contact h2 { margin: 0 0 .3rem; color: var(--gold); }
.mk-contact p { margin: 0; }
.mk-contact-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.mk-off { padding: 2rem; text-align: center; margin-top: 2rem; }
.mk-updated { margin-top: 1.6rem; }
@media (max-width: 860px) { .mk-aud { grid-template-columns: 1fr; } .mk-vids { grid-template-columns: 1fr; } .mk-cta { margin-left: 0; width: 100%; } }
.mk-for { margin: .4rem 0 0; font-weight: 800; color: var(--link); }
.mk-contact { flex-direction: column; align-items: stretch; }
.mk-contact-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mk-form { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.mk-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.mk-form-grid label { display: flex; flex-direction: column; gap: .3rem; font-weight: 800; font-size: .9rem; }
.mk-form-grid .wide { grid-column: 1 / -1; }
.mk-form input, .mk-form select, .mk-form textarea { font: inherit; font-weight: 400; color: var(--text); background: var(--field, var(--panel)); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; }
.mk-form :is(input, select, textarea):focus { outline: 2px solid var(--lav); outline-offset: 1px; }
.mk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mk-form-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
.mk-thanks { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 14px; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.mk-thanks p { margin: .3rem 0 0; }
.mk-print-foot { display: none; }
.mk-preview .back-home, .mk-preview .theme-toggle { display: none; }
.mk-printview body { max-width: 816px; margin: 0 auto; padding: 12mm; }
@media (max-width: 640px) { .mk-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Brand-ready one-page PDF (Save as PDF / print) */
@page { size: letter; margin: 12mm; }
@media print {
  .theme-toggle, .back-home, .mk-cta, .footer, .to-top, #mk-copy, .mk-form, .mk-thanks, .mk-updated, #mk-vid-note, .skip-link, canvas, .season, .loader { display: none !important; }
  html, body { background: #fff !important; color: #111 !important; font-size: 10.5pt; }
  body::before, body::after { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #d8d4e8 !important; background: #fff !important; break-inside: avoid; backdrop-filter: none !important; }
  .mk-page .sub-hero { background: none !important; padding: 0 0 6pt !important; min-height: 0 !important; border-bottom: 2pt solid #e0a100; margin-bottom: 6pt; }
  .mk-page .sub-hero-inner { padding: 0 !important; gap: 10pt; }
  .mk-page .sub-avatar { width: 54pt; height: 54pt; }
  .mk-page h1 { font-size: 24pt !important; color: #8a4300 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; margin: 0 !important; }
  .mk-page .eyebrow { color: #4b44b8 !important; }
  .mk-page .sub-intro, .mk-for { margin: 2pt 0 0 !important; color: #333 !important; }
  .mk { padding: 0 !important; max-width: none; }
  .mk-sec { margin-top: 9pt !important; break-inside: avoid; }
  .sec-title { font-size: 12.5pt !important; margin: 0 0 4pt !important; color: #111 !important; }
  .mk-about { padding: 6pt 9pt !important; font-size: 10pt; line-height: 1.45; }
  #mk-pitch { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
  .mk-total { padding: 5pt 9pt !important; margin-bottom: 5pt !important; }
  .mk-total b, .mk-stat > b { font-size: 18pt !important; color: #8a4300 !important; }
  .mk-plats { grid-template-columns: repeat(4, 1fr) !important; gap: 5pt !important; }
  .mk-plat { padding: 5pt 7pt !important; gap: 6pt !important; color: #111 !important; }
  .mk-plat .s-ico { width: 24pt; height: 24pt; border-radius: 6pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mk-plat .s-ico svg { width: 14pt; height: 14pt; }
  .mk-plat b { font-size: 12pt !important; }
  .mk-vids { grid-template-columns: repeat(3, 1fr) !important; gap: 6pt !important; }
  .mk-vid span { padding: 4pt 6pt !important; font-size: 9pt; }
  .mk-aud { grid-template-columns: 1.2fr 2fr 2fr !important; gap: 6pt !important; }
  .mk-stat, .mk-bars { padding: 6pt 8pt !important; }
  .mk-bars li i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mk-rates { grid-template-columns: repeat(3, 1fr) !important; gap: 5pt !important; }
  .mk-rate { padding: 5pt 8pt !important; }
  .mk-rate span { color: #8a4300 !important; }
  .mk-brands { margin-top: 5pt !important; padding: 5pt 8pt !important; }
  .mk-contact { margin-top: 9pt !important; padding: 7pt 10pt !important; border: 2pt solid #e0a100 !important; }
  .mk-contact h2 { font-size: 13pt !important; color: #8a4300 !important; }
  .mk-contact .btn { background: none !important; color: #111 !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font-weight: 800; }
  .mk-print-foot { display: block; text-align: center; margin-top: 8pt; font-size: 9pt; color: #555; }
  .sec-title .sec-ico { width: 18pt !important; height: 18pt !important; font-size: 10pt !important; border-radius: 5pt !important; box-shadow: none !important; }
  .sec-title::after { display: none !important; }
  .mk-vid { flex-direction: row !important; align-items: center; }
  .mk-vid img { width: 64pt !important; flex: none; aspect-ratio: 16 / 9; }
  .mk-vid b { font-size: 8.5pt; line-height: 1.25; }
  .mk-page .sub-hero-inner { border: 0 !important; box-shadow: none !important; background: none !important; }
  .mk-bars ol { gap: 3pt !important; } .mk-bars li { font-size: 8.5pt; } .mk-bars h3 { font-size: 9pt !important; margin-bottom: 3pt !important; }
  .mk-contact-top p { font-size: 9pt; }
  .mk-sec { margin-top: 6pt !important; } .mk-contact { margin-top: 7pt !important; }
  .mk-crown { font-size: 16pt !important; } .mk-total b { font-size: 15pt !important; } .mk-stat > b { font-size: 15pt !important; }
  .mk-total { margin-bottom: 4pt !important; padding: 4pt 8pt !important; }
  .mk-plat small, .mk-rate b { font-size: 8.5pt; } .mk-rate { padding: 4pt 7pt !important; }
  .mk-page .sub-avatar { width: 46pt !important; height: 46pt !important; }
  #mk-reach:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 5pt; align-items: stretch; }
  #mk-reach .sec-title { grid-column: 1 / -1; }
  #mk-reach .mk-total { margin: 0 !important; flex-direction: column; justify-content: center; text-align: center; gap: 2pt; }
  #mk-reach .mk-plats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mk-plat small { white-space: nowrap; font-size: 7.5pt !important; }
  .mk-brands { display: flex; gap: 6pt; align-items: baseline; } .mk-brands p { margin: 0 !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ---------- ❤️ Fan art likes ---------- */
.fan-like { position: absolute; right: 14px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; font: inherit; font-weight: 800; font-size: .85rem;
  padding: .28rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--text); cursor: pointer; box-shadow: var(--shadow); }
.fan-like b:empty { display: none; }
.fan-like:hover, .lb-like:hover { border-color: var(--pink); }
.fan-like.on, .lb-like.on { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 18%, var(--panel-solid)); }
.fan-like.pop span, .lb-like.pop span { animation: heart-pop .45s ease; display: inline-block; }
@keyframes heart-pop { 30% { transform: scale(1.45); } 60% { transform: scale(.9); } }
.fan:has(.fan-like) figcaption { padding-right: 4.2rem; }
.layout-polaroid .fan-like { bottom: 10px; right: 10px; }
.cap-none .fan-like, .cap-hover .fan-like { bottom: 22px; right: 22px; }
.lb-like { display: inline-flex; align-items: center; gap: .2rem; font: inherit; font-weight: 800; color: inherit; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .1rem .55rem; cursor: pointer; }
.fan-fav { position: absolute; top: 16px; left: 16px; z-index: 1; font-size: .78rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; background: var(--pink); color: #2a1030; }
.fan.featured .fan-fav { top: 46px; }
.layout-polaroid .fan-fav { top: 10px; left: 10px; }
.fan-sort { font: inherit; font-weight: 800; font-size: .86rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .32rem .75rem; cursor: pointer; }
.fan-sort[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: #2a1030; }
@media (prefers-reduced-motion: reduce) { .fan-like.pop span, .lb-like.pop span { animation: none; } }

/* ---------- 🎯 Goal bar ---------- */
.goal { width: min(460px, 100%); margin: 1.3rem auto 0; padding: .8rem 1rem .75rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: left; box-shadow: var(--shadow); }
.goal-in { width: 100%; margin: 0 0 1.2rem; }
.goal-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; font-size: .92rem; }
.goal-top b { color: var(--link); }
.goal-top span { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .85rem; }
.goal-bar { height: 12px; border-radius: 999px; background: var(--field, rgba(127,127,127,.2)); margin: .5rem 0 .35rem; overflow: hidden; }
.goal-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--orange)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.goal.go .goal-bar i { width: var(--w); }
.goal.done .goal-bar i { background: linear-gradient(90deg, #3fb68b, var(--gold)); }
.goal-foot { font-size: .8rem; font-weight: 700; }

/* ---------- 💖 Support ---------- */
.support-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.support { display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem; text-decoration: none; color: var(--text); border-top: 4px solid var(--sc); transition: transform .18s, border-color .18s; }
.support:hover { transform: translateY(-3px); }
.support img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.sp-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.7rem; background: color-mix(in srgb, var(--sc) 22%, transparent); }
.sp-body { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.sp-body b { font-size: 1.08rem; }
.sp-body .muted { font-size: .92rem; line-height: 1.5; }
.sp-btn { align-self: flex-start; font-size: .92rem; padding: .55rem 1rem; }

/* ---------- 🔔 Live alerts ---------- */
.bell { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; margin: 0 0 1.2rem; }
.bell-ico { font-size: 1.8rem; flex: none; }
.bell.on .bell-ico { animation: bell-ring 2.4s ease-in-out 1; }
.bell-text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.bell-text .muted { font-size: .9rem; }
.bell-btn { flex: none; font-size: .92rem; padding: .55rem 1rem; }
@keyframes bell-ring { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-14deg); } }
@media (max-width: 560px) { .bell { flex-wrap: wrap; } .bell-btn { width: 100%; justify-content: center; } }
.fan-like span, .lb-like span { color: var(--pink); font-size: 1.05rem; line-height: 1; }

/* ---------- ▶ Click-to-play video (fast) ---------- */
.yt-facade { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; overflow: hidden; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s, filter .3s; }
.yt-facade:hover img, .yt-facade:focus-visible img { transform: scale(1.03); filter: brightness(.9); }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-play svg { width: 72px; height: 51px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); transition: transform .2s; }
.yt-facade:hover .yt-play svg { transform: scale(1.1); }
.yt-facade:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

/* ---------- ✨ New since your last visit ---------- */
.fan-new { position: absolute; top: 16px; right: 16px; z-index: 1; font-size: .74rem; font-weight: 800; padding: .18rem .5rem; border-radius: 999px; background: var(--gold); color: #3a1a05; box-shadow: 0 2px 0 var(--orange); }
.layout-polaroid .fan-new { top: 10px; right: 10px; }
.tl-new { display: inline-block; margin-right: .4rem; font-size: .72rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; background: var(--gold); color: #3a1a05; vertical-align: 1px; }
.tl-newc { color: var(--link); font-weight: 800; }
.welcome-back { position: fixed; left: 50%; bottom: 20px; z-index: 60; transform: translate(-50%, 150%); transition: transform .35s cubic-bezier(.2,.8,.2,1); display: flex; align-items: center; gap: .7rem;
  max-width: calc(100vw - 24px); padding: .7rem .8rem .7rem 1.1rem; border-radius: 999px; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 700; font-size: .92rem; }
.welcome-back.show { transform: translate(-50%, 0); }
.welcome-back button { border: 0; background: var(--field); color: var(--text); border-radius: 50%; width: 28px; height: 28px; cursor: pointer; flex: none; }
@media (prefers-reduced-motion: reduce) { .welcome-back { transition: none; } }

/* ---------- Accessibility: readable contrast in both themes ---------- */
:root:not([data-theme="light"]) .eyebrow { color: #b3aefa; }
:root[data-theme="light"] .eyebrow { color: #4b44b8; }
:root:not([data-theme="light"]) .tl-type.tl-video { color: #c3bfff; }
:root[data-theme="light"] .growth-now { color: #9a4a06; }
/* Big gold titles on the light theme get a dark edge so they stay readable over the bright background */
/* (light theme: a deeper orange-gold fill with a gold shadow — on brand, and readable on the pale background) */
:root[data-theme="light"] .sub-hero h1, :root[data-theme="light"] .mk-hero h1 { color: #b4560a; text-shadow: 0 3px 0 #f9c25a; -webkit-text-stroke: 0; }
:root[data-theme="light"] .hero h1 { -webkit-text-stroke: 2px #6b3500; paint-order: stroke fill; }
/* Keyboard users always see where they are */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
:root[data-theme="light"] :focus-visible { outline-color: #4b44b8; }

/* ================= Timeline: ⭐ highlights, ☰ compact, ▶ story ================= */
.tl-play { margin-top: .8rem; }
.tl-hl { margin: 0 0 1.4rem; }
.tl-hl-title { font-family: var(--pixel); font-size: 1.3rem; margin: 0 0 .6rem; color: var(--heading); }
.tl-hl-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px); gap: .9rem; overflow-x: auto; padding: .2rem .1rem .8rem; scroll-snap-type: x mandatory; }
.tl-hl-card { scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--text); border-top: 4px solid var(--gold); transition: transform .18s; }
.tl-hl-card:hover { transform: translateY(-3px); }
.tl-hl-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tl-hl-ico { display: grid; place-items: center; aspect-ratio: 16 / 9; font-size: 3rem; background: linear-gradient(135deg, rgba(249,178,52,.25), rgba(157,151,245,.22)); }
.tl-hl-body { padding: .7rem .9rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.tl-hl-date { font-size: .78rem; font-weight: 800; color: var(--muted); }

/* Compact list: one line per moment */
.timeline.compact .tl-card { padding: .55rem .9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; }
.timeline.compact .tl-card > p, .timeline.compact .tl-thumb, .timeline.compact .tl-actions, .timeline.compact .tl-ago, .timeline.compact .tl-anniv { display: none; }
.timeline.compact .tl-card h3 { margin: 0; font-size: 1rem; order: 2; flex: 1 1 260px; }
.timeline.compact .tl-date { order: 1; margin: 0; font-size: .82rem; }
.timeline.compact .tl-item { margin-bottom: .45rem; }

/* Story slideshow */
.story { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: radial-gradient(circle at 30% 20%, #2c2258, #120e24 70%); color: #f2f0ff; overflow: hidden; }
.story::backdrop { background: #000; }
.story[open] { display: flex; flex-direction: column; }
.st-top { display: flex; align-items: center; gap: .6rem; padding: max(.8rem, env(safe-area-inset-top)) 1rem .6rem; }
.st-count { font-weight: 800; font-size: .85rem; opacity: .8; min-width: 3.4rem; }
.st-bar { flex: 1; display: flex; gap: 3px; }
.st-bar i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); }
.st-bar i.done { background: rgba(249,178,52,.75); } .st-bar i.now { background: var(--gold); }
.st-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 1.05rem; cursor: pointer; flex: none; }
.st-btn[aria-pressed="true"].st-hl { background: var(--gold); color: #2a1d00; }
.st-slide { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 2.4rem; padding: 1rem clamp(1rem, 6vw, 6rem) 2rem; min-height: 0; }
.st-slide.in-right { animation: st-in-r .45s ease; } .st-slide.in-left { animation: st-in-l .45s ease; }
@keyframes st-in-r { from { opacity: 0; transform: translateX(40px); } } @keyframes st-in-l { from { opacity: 0; transform: translateX(-40px); } }
.st-pic { border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5); aspect-ratio: 16 / 9; background: rgba(255,255,255,.06); }
.st-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-emoji { display: grid; place-items: center; font-size: clamp(5rem, 14vw, 9rem); }
.st-text { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.st-date { font-weight: 800; color: #c9c5ff; font-size: .95rem; }
.st-text h2 { margin: 0; font-size: clamp(1.8rem, 4.2vw, 3rem); color: var(--gold); line-height: 1.12; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.st-text p { margin: 0; font-size: 1.08rem; line-height: 1.6; color: #e6e3ff; max-width: 52ch; }
.st-subs { font-size: 1.15rem !important; } .st-subs b { color: var(--gold); }
.st-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.st-nav:disabled { opacity: .3; cursor: default; }
.st-prev { left: 14px; } .st-next { right: 14px; }
@media (max-width: 760px) {
  .st-slide { grid-template-columns: 1fr; gap: 1.2rem; align-content: start; padding: .4rem 1.1rem 6rem; overflow-y: auto; }
  .st-nav { top: auto; bottom: max(1rem, env(safe-area-inset-bottom)); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .st-slide.in-right, .st-slide.in-left { animation: none; } }
.timeline.compact .tl-item { padding-bottom: .5rem; }

/* ---------- 🎨 Fan art form: same colors as the rest of the website ---------- */
.submit-dlg, :root:not([data-theme="light"]) .submit-dlg {
  --sd-ink: var(--text); --sd-bg: var(--panel-solid); --sd-muted: var(--muted); --sd-shadow: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lav) 10%, var(--panel-solid)), var(--panel-solid) 140px);
}
.submit-dlg::backdrop { background: color-mix(in srgb, var(--night) 70%, transparent); backdrop-filter: blur(4px); }
.sd-head { border-bottom: 1px solid var(--line); padding-bottom: .9rem; margin-bottom: .4rem; }
.sd-head h2 { color: var(--link); }
.sd-close { border: 1px solid var(--line); background: var(--field); color: var(--text); box-shadow: none; border-radius: 12px; }
.sd-close:hover, .sd-close:focus-visible { border-color: var(--gold); }
.sd-input, .sd-file { border: 1px solid var(--line); background: var(--field); color: var(--text); }
.sd-input:hover, .sd-file:hover { border-color: color-mix(in srgb, var(--lav) 55%, transparent); }
.sd-input:focus, .sd-file:focus-within { outline: 2px solid var(--lav); outline-offset: 1px; border-color: transparent; }
.sd-pick { border: 0; color: #2a1630; background: linear-gradient(180deg, #ffc94d, var(--gold)); box-shadow: 0 2px 0 #c97f12; }
.sd-prev { border: 1px solid var(--line); }
.sd-req { color: var(--pink); }
:root[data-theme="light"] .sd-req { color: #b3261e; }
.sd-actions .btn { border: 0; }
.sd-consent { padding: .75rem .9rem; border-radius: 12px; background: var(--spec-bg); border: 1px solid var(--spec-line); font-weight: 700; }
.sd-error { border: 1px solid #c9333d; }
.sd-preview-note { background: color-mix(in srgb, var(--lav) 14%, transparent); border: 1px dashed var(--lav); }
.sd-done h3 { color: var(--link); }

/* Admin → "Preview the form": only the form, on a clear page */
html.form-only, html.form-only body { background: transparent !important; }
html.form-only body::before, html.form-only body::after { display: none !important; }
html.form-only body > *:not(#submit-dlg) { display: none !important; }
html.form-only .submit-dlg::backdrop { background: transparent; backdrop-filter: none; }
html.form-only .submit-dlg { margin: 12px auto; max-height: calc(100vh - 24px); }

/* ---------- 📄 Media kit: YouTube-style layout ---------- */
.mk-banner { position: relative; margin: -1px 0 0; height: clamp(90px, 16vw, 200px); overflow: hidden; border-radius: 0 0 22px 22px; }
.mk-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-hero:has(.mk-banner:not([hidden])) .sub-hero-inner { margin-top: -38px; position: relative; }
.mk-subs { margin: .1rem 0 0; font-weight: 800; color: var(--muted); }
.mk-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0 1.6rem; align-items: start; }
.mk-col { min-width: 0; }
.mk-side .mk-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.mk-side .mk-vid span { padding: .55rem .7rem .7rem; font-size: .88rem; }
.mk-thumb { position: relative; display: block; padding: 0 !important; }
.mk-thumb img { display: block; }
.mk-dur { position: absolute; right: 6px; bottom: 6px; font-style: normal; font-size: .75rem; font-weight: 800; padding: .1rem .35rem; border-radius: 5px; background: rgba(0,0,0,.8); color: #fff; }
.mk-statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.mk-stat-tile { padding: .8rem .9rem; border-radius: 14px; background: var(--spec-bg); border: 1px solid var(--spec-line); display: flex; flex-direction: column; gap: .2rem; text-align: center; }
.mk-stat-tile span { font-size: .8rem; font-weight: 700; color: var(--muted); }
.mk-stat-tile b { font-size: 1.35rem; font-family: var(--pixel); color: var(--link); }
.mk-note { margin: .5rem 0 0; }
.mk-demo { padding: 1.1rem 1.2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.mk-demo h3 { margin: 0 0 .6rem; font-size: 1rem; }
.mk-demo .mk-bars { padding: 0; }
.mk-donut-row { display: flex; align-items: center; gap: 1rem; }
.mk-donut { width: 92px; height: 92px; transform: rotate(-90deg); flex: none; }
.mk-donut circle { fill: none; stroke-width: 7; }
.mk-donut-bg { stroke: color-mix(in srgb, var(--lav) 45%, transparent); }
.mk-donut-fg { stroke: #6b5bd6; stroke-dasharray: 0 100; }
#mk-gender-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .92rem; }
#mk-gender-list li::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; background: color-mix(in srgb, var(--lav) 45%, transparent); }
#mk-gender-list .g-m::before { background: #6b5bd6; }
.mk-int { padding: 1.1rem 1.2rem; display: grid; gap: 1.1rem; }
.mk-int h3 { margin: 0 0 .5rem; font-size: 1rem; }
.mk-int ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mk-int li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(80px, 1fr) 4.5rem; align-items: center; gap: .8rem; font-size: .93rem; }
.mk-lvl { position: relative; height: 6px; border-radius: 6px; background: var(--spec-bg); }
.mk-lvl i { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #6b5bd6; transform: translate(-50%, -50%); }
.mk-int small { color: var(--muted); font-weight: 700; }
.mk-topics { padding: .9rem 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.mk-topic { padding: .3rem .7rem; border-radius: 999px; font-weight: 700; font-size: .88rem; background: var(--spec-bg); border: 1px solid var(--spec-line); }
.mk-facts { margin: 0; padding: .9rem 1.1rem; display: grid; gap: .7rem; }
.mk-facts dt { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mk-facts dd { margin: .1rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
:root:not([data-theme="light"]) .mk-donut-fg, :root:not([data-theme="light"]) .mk-lvl i, :root:not([data-theme="light"]) #mk-gender-list .g-m::before { stroke: #7d6cf0; background: #7d6cf0; }
@media (max-width: 980px) {
  .mk-grid { display: flex; flex-direction: column; }
  .mk-col { display: contents; }
  #mk-contact { order: 10; }
  .mk-side .mk-vids { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 640px) { .mk-demo { grid-template-columns: minmax(0, 1fr); } .mk-int li { grid-template-columns: minmax(0, 1fr) 70px 4rem; } }
@media print {
  .mk-grid { display: grid !important; grid-template-columns: 1.7fr 1fr !important; gap: 0 10pt !important; }
  .mk-col { display: block !important; }
  .mk-banner { height: 70pt; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mk-hero:has(.mk-banner:not([hidden])) .sub-hero-inner { margin-top: -18pt; }
  .mk-statgrid { grid-template-columns: repeat(4, 1fr) !important; gap: 4pt !important; }
  .mk-stat-tile { padding: 4pt 5pt !important; } .mk-stat-tile span { font-size: 7pt; } .mk-stat-tile b { font-size: 11pt !important; color: #111 !important; }
  .mk-demo { padding: 6pt 8pt !important; gap: 8pt !important; } .mk-donut { width: 46pt; height: 46pt; } .mk-demo h3 { font-size: 9pt !important; margin-bottom: 3pt !important; }
  .mk-donut-fg, .mk-donut-bg, .mk-lvl, .mk-lvl i, #mk-gender-list li::before, .mk-dur { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mk-int { padding: 6pt 8pt !important; gap: 6pt !important; } .mk-int li { font-size: 8.5pt; gap: 5pt; } .mk-int h3 { font-size: 9pt !important; }
  .mk-side .mk-vids { grid-template-columns: 1fr 1fr !important; gap: 4pt !important; }
  .mk-side .mk-vid { flex-direction: column !important; }
  .mk-side .mk-vid img, .mk-side .mk-thumb { width: 100% !important; }
  .mk-side .mk-vid span { font-size: 7.5pt; padding: 3pt 4pt !important; }
  .mk-facts, .mk-topics { padding: 5pt 7pt !important; gap: 4pt !important; font-size: 8.5pt; }
  .mk-topic { padding: 1pt 5pt; font-size: 8pt; }
}
@media print { html.mk-fit, .mk-page { zoom: var(--print-zoom, 1); } }
.nocount-note { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 99; padding: .7rem 1rem; border-radius: 12px; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 700; }

/* ---------- 🧭 Start here ---------- */
.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.start-card { overflow: hidden; display: flex; flex-direction: column; }
.start-thumb { position: relative; display: block; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.start-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.start-card:hover .start-thumb img { transform: scale(1.05); }
.start-num { position: absolute; top: .6rem; left: .6rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.15rem var(--pixel); background: var(--gold); color: #3a1a05; box-shadow: 0 3px 0 var(--orange); }
.start-play { position: absolute; inset: 0; margin: auto; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem;
  background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transition: opacity .2s; }
.start-thumb:hover .start-play, .start-thumb:focus-visible .start-play { opacity: 1; }
.start-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.start-body b { font-size: 1.05rem; line-height: 1.3; }
.start-body p { margin: 0; font-size: .93rem; }
.start-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.start-btns .btn { font-size: .9rem; padding: .5rem .95rem; }

/* ---------- 🛠️ Behind the builds ---------- */
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.story-card { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .2s ease; }
.story-card:hover { transform: translateY(-4px); }
.story-pic { position: relative; display: block; aspect-ratio: 4/3; background: var(--night-2); overflow: hidden; }
.story-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.story-card:hover .story-pic img { transform: scale(1.05); }
.story-pic em { position: absolute; right: .55rem; bottom: .55rem; font-style: normal; font-weight: 800; font-size: .8rem; padding: .2rem .5rem; border-radius: 8px; background: rgba(0, 0, 0, .62); color: #fff; }
.story-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.story-body b { font-size: 1.05rem; line-height: 1.3; }
.story-body .muted { font-size: .92rem; }
.story-go { margin-top: auto; padding-top: .4rem; font-weight: 800; color: var(--link); }
.story-more { grid-column: 1 / -1; }

/* ---------- ❓ FAQ ---------- */
.faq-list { display: grid; gap: .7rem; max-width: 820px; }
.faq-item { padding: 0; overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.2rem; font-weight: 800; font-size: 1.02rem; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font: 700 1.4rem var(--pixel); color: var(--gold); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius); }
.faq-a { padding: 0 1.2rem 1.1rem; color: var(--muted); line-height: 1.6; }
.faq-a a { color: var(--link); }

/* ---------- 🔔 bell: pick streams / new videos ---------- */
.bell-picks { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .35rem; }
.bell-pick { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; cursor: pointer; }
.bell-pick input { width: 1.05rem; height: 1.05rem; accent-color: var(--gold); }
.latest-bell { font: inherit; font-weight: 800; font-size: .88rem; padding: .45rem .85rem; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); background: var(--field); color: var(--text); }
.latest-bell:hover:not(:disabled) { border-color: var(--gold); }
.latest-bell.on { cursor: default; opacity: .85; }

/* ---------- 🎬 Video page (/video?v=…) ---------- */
.vp-hero { padding-bottom: 2rem; }
.vp-hero-inner { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 4.5rem 16px 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.vp-title { font-size: clamp(1.7rem, 4.5vw, 2.8rem); margin: .2rem 0 0; line-height: 1.15; color: var(--heading); text-wrap: balance; }
.vp-meta { margin: 0; color: var(--muted); font-weight: 700; }
.vp-blurb { margin: .2rem 0 0; max-width: 640px; font-size: 1.08rem; }
.vp-cover { position: relative; display: block; width: min(860px, 100%); aspect-ratio: 16/9; overflow: hidden; margin-top: 1rem; padding: 0; background: #000; }
.vp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.vp-cover:hover img { transform: scale(1.03); }
.vp-play { position: absolute; inset: 0; margin: auto; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; padding-left: .2rem;
  background: var(--gold); color: #3a1a05; box-shadow: 0 5px 0 var(--orange), 0 10px 30px rgba(0, 0, 0, .45); transition: transform .2s; }
.vp-cover:hover .vp-play { transform: scale(1.08); }
.vp-dur { position: absolute; right: .7rem; bottom: .7rem; font-style: normal; font-weight: 800; font-size: .85rem; padding: .15rem .5rem; border-radius: 6px; background: rgba(0, 0, 0, .75); color: #fff; }
.vp-sec, .vp-cta-sec { max-width: 980px; }
.vp-text { padding: 1.4rem 1.6rem; font-size: 1.05rem; line-height: 1.7; }
.vp-text p { margin: 0 0 1em; } .vp-text p:last-child { margin: 0; }
.vp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.vp-gallery.few { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vp-ph { margin: 0; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.vp-ph a { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--night-2); cursor: zoom-in; }
.vp-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vp-ph a:hover img { transform: scale(1.05); }
.vp-ph figcaption { padding: .65rem .9rem; font-size: .9rem; color: var(--muted); }
.vp-cta { display: flex; align-items: center; gap: 1.4rem; padding: 1.3rem; border: 2px solid var(--gold); }
.vp-cta-thumb { width: min(320px, 40%); aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; flex: none; }
.vp-cta-title { margin: 0 0 .3rem; font-size: 1.3rem; line-height: 1.3; }
.vp-cta p { margin: 0 0 1rem; }
.vp-watch { font-size: 1.15rem; padding: .85rem 1.8rem; }
@media (max-width: 640px) { .vp-cta { flex-direction: column; align-items: stretch; text-align: center; } .vp-cta-thumb { width: 100%; } .vp-watch { width: 100%; justify-content: center; } .vp-hero-inner { padding-top: 4rem; } }
.vp-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.vp-lightbox::backdrop { background: rgba(8, 5, 22, .92); }
.vp-lightbox[open] { display: grid; place-items: center; }
.vp-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; max-width: 92vw; }
.vp-lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 10px; }
.vp-lightbox figcaption { color: #e9e6ff; font-weight: 700; text-align: center; }
.vp-lb-x, .vp-lb-nav { position: fixed; z-index: 2; border: 0; cursor: pointer; border-radius: 50%; width: 3rem; height: 3rem; font-size: 1.6rem; line-height: 1;
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; }
.vp-lb-x { top: 1rem; right: 1rem; font-size: 1.2rem; }
.vp-lb-nav.prev { left: 1rem; top: 50%; transform: translateY(-50%); } .vp-lb-nav.next { right: 1rem; top: 50%; transform: translateY(-50%); }
.vp-lb-x:hover, .vp-lb-nav:hover { background: rgba(255, 255, 255, .28); }
.vp-lb-nav[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .start-thumb img, .story-pic img, .vp-ph img, .vp-cover img, .story-card { transition: none; } }
.page-video .section { padding-top: 2rem; }
.vp-head { display: flex; flex-direction: column; align-items: center; gap: .45rem; width: min(860px, 100%); background: var(--glass); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem 1.3rem; }
.vp-head .vp-meta { color: var(--muted); }
/* 📈 typical views + 🛡️ brand safety (media kit) */
.mk-typ { padding: 1.1rem 1.3rem; display: grid; gap: .9rem; }
.mk-typ-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.mk-typ-main b { font: 700 1.7rem var(--pixel); color: var(--link); }
.mk-typ-bar { position: relative; height: 12px; border-radius: 99px; background: var(--spec-bg); border: 1px solid var(--spec-line); }
.mk-typ-bar i { position: absolute; top: -1px; bottom: -1px; border-radius: 99px; background: linear-gradient(90deg, var(--lav), var(--gold)); }
.mk-typ-bar em { position: absolute; top: 50%; width: 16px; height: 16px; margin-left: -8px; transform: translateY(-50%); border-radius: 50%; background: var(--panel-solid); border: 3px solid var(--orange); }
.mk-safe-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-safe-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 99px; font-weight: 700; font-size: .92rem; background: var(--spec-bg); border: 1px solid var(--spec-line); }
.mk-safe-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .35rem; }
.mk-safe-list li { position: relative; padding-left: 1.6rem; }
.mk-safe-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 900; color: #2fa36b; }
.mk-safe-list[hidden] { display: none; }
@media print {
  .mk-typ { padding: 5pt 7pt !important; gap: 4pt !important; } .mk-typ-main b { font-size: 12pt !important; color: #111 !important; }
  .mk-typ-bar { height: 6pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .mk-typ-bar i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mk-safe-badge { padding: 2pt 6pt !important; font-size: 7.5pt !important; } .mk-safe-list { margin-top: 4pt !important; gap: 1pt !important; font-size: 8pt; }
}

/* 📱 Home: jump-to-section bar (phones) */
.jump-bar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  padding: .55rem 12px calc(.55rem + env(safe-area-inset-bottom, 0px)); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s ease; }
.jump-bar::-webkit-scrollbar { display: none; }
body.jump-on .jump-bar { transform: none; }
body:not(.jump-on) .jump-bar { pointer-events: none; }
.jump-bar a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .85rem; border-radius: 999px; font-weight: 800; font-size: .9rem; text-decoration: none; color: var(--text); background: var(--field); border: 1px solid var(--line); white-space: nowrap; }
.jump-bar a[aria-current] { background: var(--gold); border-color: var(--gold); color: #3a1a05; }
body.has-jump.jump-on .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
body.has-jump .footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .jump-bar { transition: none; } }
/* 📱 bigger tap targets on phones */
@media (max-width: 720px) {
  .chip-btn, .tz-toggle, .link-more, .year-pick select, .tl-search, .bell-pick, .latest-bell, .faq-item summary, .story-go { min-height: 44px; }
  .chip-btn, .tz-toggle { display: inline-flex; align-items: center; }
  .footer a { display: inline-block; padding: .35rem .2rem; }
}
/* 📱 Media kit on phones: one column in a sensible order + a "Work with me" button that stays in reach */
@media (max-width: 980px) { .mk-grid > .mk-col > .mk-sec { order: var(--po, 5); } .mk-grid > .mk-col > #mk-contact { order: 999; } }
.mk-sticky { display: none; }
@media (max-width: 720px) {
  .mk-sticky { display: flex; justify-content: center; position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(160%); transition: transform .25s ease; box-shadow: 0 4px 0 var(--orange), 0 10px 30px rgba(0, 0, 0, .3); }
  .mk-sticky.on { transform: none; }
  .mk-sticky:not(.on) { transform: translateY(160%) !important; pointer-events: none; }
  .mk-page:has(.mk-sticky.on) .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .mk-sticky, .jump-bar { display: none !important; } }
:root[data-theme="light"] .mk-contact h2.pixel, :root[data-theme="light"] #mk-contact h2.pixel { color: #b4560a; text-shadow: 0 2px 0 #f9c25a; -webkit-text-stroke: 0; }

/* 🎂 On this day · 🎯 Next milestone · 🔜 What's next (timeline page) */
.tl-otd { display: flex; gap: .8rem; align-items: center; padding: .85rem 1.1rem; margin: 0 0 1.2rem; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--panel)); }
.tl-otd[hidden] { display: none; }
.tl-otd-cake { font-size: 2rem; line-height: 1; }
.tl-otd div { display: grid; gap: .2rem; }
.tl-otd b { font-family: var(--pixel); color: var(--link); }
.tl-otd a { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent); text-underline-offset: 3px; }
.tl-next { margin: .9rem 0 0; width: 100%; }
.tl-next[hidden], .tl-soon[hidden] { display: none; }
.tl-next p { margin: 0; }
.tl-soon { margin: 1.4rem 0 1.6rem; }
.tl-soon-title { text-align: center; font-family: var(--pixel); color: var(--link); margin: 0 0 .2rem; }
.tl-soon .coming-grid { margin-top: .9rem; }
@media (max-width: 600px) { .tl-otd { padding: .75rem .9rem; } .tl-otd-cake { font-size: 1.6rem; } }

/* 🎥 Coming soon: "63/100 days recorded" */
.soon-rec { display: grid; gap: .3rem; margin-top: .35rem; font-size: .85rem; }
.soon-rec-top b { color: var(--link); }
.soon-rec-bar { height: 8px; border-radius: 999px; background: var(--field, rgba(127,127,127,.2)); overflow: hidden; }
.soon-rec-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3fb68b, #7bd88f); }

/* 👥 Private team brief page (/team) */
.team-page { width: min(760px, calc(100% - 24px)); margin: 0 auto; padding: max(1.2rem, env(safe-area-inset-top)) 0 3rem; display: grid; gap: 1rem; }
.team-head { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.2rem; }
.team-head img { border-radius: 50%; flex: none; }
.team-head h1 { margin: .1rem 0 .2rem; font-size: clamp(1.4rem, 5vw, 2rem); color: var(--link); }
.team-head p { margin: 0; }
.team-msg { padding: 1rem 1.2rem; }
.team-sec { padding: 1rem 1.2rem; display: grid; gap: .55rem; }
.team-sec h2 { margin: 0; font-size: 1.1rem; }
.team-sec p, .team-sec ul { margin: 0; }
.team-sec a { overflow-wrap: anywhere; }
.team-role { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.team-due { font-weight: 800; color: var(--link); }
.team-thumb { width: 100%; max-width: 420px; border-radius: 12px; }
.team-hl { padding-left: 1.1rem; display: grid; gap: .3rem; }
.team-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.team-refs figure { margin: 0; display: grid; gap: .25rem; }
.team-refs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.team-refs figcaption { font-size: .85rem; font-weight: 700; }
.team-noimg { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--field); font-size: 2rem; }
.team-form { display: grid; gap: .7rem; }
.team-form label { display: grid; gap: .25rem; font-weight: 700; }
.team-form label[hidden] { display: none; }
.team-form :is(input[type="url"], textarea, input[type="file"]) { font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; }
.team-who { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; } .team-who legend { font-weight: 800; margin-bottom: .3rem; }
.team-who label { display: flex; gap: .4rem; align-items: center; font-weight: 700; }
.team-form .btn { justify-self: start; }
.team-ok { color: #2fa36b; font-weight: 800; } .team-bad { color: #e5484d; font-weight: 800; }
.team-sent { list-style: none; padding: 0; display: grid; gap: .5rem; }
.team-sent li { display: flex; gap: .7rem; align-items: flex-start; }
.team-sent img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex: none; }
.team-form, .team-form label, .team-sec { min-width: 0; }
.team-form :is(input[type="url"], textarea, input[type="file"]) { width: 100%; box-sizing: border-box; max-width: 100%; min-width: 0; }
.team-form input[type="file"] { font-size: .9rem; }
.team-form textarea { display: block; resize: vertical; }

/* ---------- 🧭 Timeline layouts (Admin → Settings → Timeline page layout) ---------- */
/* Single column / compact list / by year: one column down a line on the left */
.timeline:is(.layout-single, .layout-list, .layout-years) { max-width: 820px; margin-inline: auto; }
.timeline:is(.layout-single, .layout-list, .layout-years)::before { left: 21px; }
.timeline:is(.layout-single, .layout-list, .layout-years) .tl-item { width: 100%; left: 0; text-align: left; padding: 0 0 1.6rem 64px; }
.timeline:is(.layout-single, .layout-list, .layout-years) .tl-item::before { left: 0; right: auto; }
.timeline:is(.layout-single, .layout-list, .layout-years) .tl-card { display: block; }
.timeline:is(.layout-single, .layout-list, .layout-years) .tl-year-mark { text-align: left; }
.timeline.layout-list .tl-item::before { width: 34px; height: 34px; font-size: 1rem; left: 4px; top: .1rem; border-width: 3px; }
/* By year: each year folds */
.tl-year-mark button { font-family: var(--pixel); font-size: 1.15rem; padding: .35rem 1rem; border-radius: 999px; border: 0; cursor: pointer; min-height: 44px;
  background: var(--gold); color: #3a1a05; box-shadow: 0 3px 0 var(--orange); display: inline-flex; align-items: center; gap: .5rem; }
.tl-year-mark button small { font-family: var(--body, inherit); font-size: .78rem; font-weight: 800; opacity: .75; }
.tl-year-mark button[aria-expanded="false"] { background: var(--panel-solid, #fff); color: var(--text); box-shadow: 0 3px 0 var(--line); border: 1px solid var(--line); }
.tl-item.yr-shut { display: none; }
/* Card grid: thumbnails in rows, years as full-width headings */
.timeline.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 1.1rem; align-items: stretch; }
.timeline.layout-grid::before { display: none; }
.timeline.layout-grid .tl-year-mark { grid-column: 1 / -1; text-align: left; margin: .6rem 0 0; }
.timeline.layout-grid .tl-item, .timeline.layout-grid .tl-item:nth-child(odd), .timeline.layout-grid .tl-item:nth-child(even) { width: auto; left: 0; text-align: left; padding: 0; }
.timeline.layout-grid .tl-item::before { left: auto; right: 10px; top: 10px; width: 34px; height: 34px; font-size: 1rem; border-width: 3px; z-index: 2; }
.timeline.layout-grid .tl-card { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding-right: 3.2rem; }
.timeline.layout-grid .tl-card:has(.tl-thumb) { padding-right: 1.3rem; }
.timeline.layout-grid .tl-thumb { order: -1; margin: -1.1rem -1.3rem .8rem; border-radius: var(--radius, 14px) var(--radius, 14px) 0 0; }
.timeline.layout-grid .tl-actions { margin-top: auto; padding-top: .8rem; }
.timeline.layout-grid.compact .tl-card { padding-right: 3.2rem; }
.timeline.compact:is(.layout-single, .layout-list, .layout-years) .tl-item { padding-bottom: .55rem; }
.timeline.layout-list .tl-year-mark { margin: .6rem 0 .8rem; }
/* Grid cards with no picture get a big emoji banner instead */
.timeline.layout-grid:not(.compact) .tl-item:not(:has(.tl-thumb))::before { left: 0; right: 0; top: 0; width: auto; height: 110px; font-size: 3rem; border: 0; box-shadow: none;
  border-radius: var(--radius, 14px) var(--radius, 14px) 0 0; background: linear-gradient(135deg, rgba(249,178,52,.3), rgba(157,151,245,.28)); z-index: 1; }
.timeline.layout-grid:not(.compact) .tl-item:not(:has(.tl-thumb)) .tl-card { padding-top: calc(110px + 1rem); padding-right: 1.3rem; }
.timeline.layout-grid.compact { gap: .6rem; }
.timeline.layout-grid.compact .tl-card { flex-direction: row; }
.timeline.layout-grid.compact .tl-card h3 { flex: 1 1 100%; }

/* ---------- 🏆 Goal bar: Kingdom level + latest badges ---------- */
.goal-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.goal-lvl { font-weight: 800; color: var(--text); padding: .1rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--gold) 22%, transparent); }
.goal-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; min-width: 0; }
@media (max-width: 600px) { .goal-badges .goal-badge:nth-child(n+5) { display: none; } }
.goal-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 800; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--text); white-space: nowrap; }