:root {
  --bg: #050814;
  --bg-2: #0a1226;
  --card: rgba(10, 18, 35, 0.82);
  --line: rgba(255,255,255,0.10);
  --text: #eef5ff;
  --muted: #b9c8e3;
  --accent: #6ec7ff;
  --accent-2: #b991ff;
  --good: #27d6b2;
  --bad: #ff7b90;
  --gold: #ffd36f;
  --shadow: 0 28px 70px rgba(0,0,0,0.35);
  --radius: 26px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(94,165,255,0.18), transparent 18%),
    radial-gradient(circle at 80% 20%, rgba(176,99,255,0.14), transparent 16%),
    radial-gradient(circle at 50% 120%, rgba(255,176,86,0.08), transparent 22%),
    linear-gradient(180deg, #08101f 0%, #04070d 100%);
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 24px 18px, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 120px 90px, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 260px 180px, rgba(255,255,255,.55), transparent),
    radial-gradient(2px 2px at 420px 40px, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 580px 210px, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 900px 120px, rgba(255,255,255,.5), transparent);
  background-size: 920px 280px;
  opacity: .45;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1200px, calc(100% - 32px)); margin: 0 auto; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.site-header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(12px);
  background: rgba(4,7,13,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap: 18px; padding: 16px 0; }
.brand { display:flex; align-items:center; gap: 12px; min-width:0; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(135deg, #72d2ff, #7a8dff 55%, #b789ff);
  box-shadow: 0 12px 30px rgba(90,140,255,.35);
  position: relative; overflow:hidden;
}
.brand-mark::before { content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:8px; left:10px; }
.brand-mark::after { content:""; position:absolute; width:70px; height:20px; border:2px solid rgba(255,255,255,.7); border-radius:50%; left:-10px; top:22px; transform:rotate(-18deg); }
.brand-text strong { display:block; font-size: 1rem; }
.brand-text span { display:block; color: var(--muted); font-size: .88rem; }
.nav-toggle {
  display:none; background: rgba(255,255,255,.06); border:1px solid var(--line); color:#fff;
  padding: 12px 14px; border-radius: 16px; font-weight:700;
}
.nav-links { display:flex; gap: 10px; flex-wrap: wrap; align-items:center; }
.nav-links a {
  padding: 10px 14px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .95rem;
  border: 1px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color:#fff; background: rgba(255,255,255,.06); border-color: var(--line); }
.main { padding: 28px 0 48px; }
.hero {
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 26px; padding: 30px; margin-bottom: 22px;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted); font-size:.9rem;
}
.hero h1, .page-hero h1 { font-size: clamp(2.1rem, 4vw, 4.6rem); line-height: 1.04; margin: 16px 0 0; letter-spacing: -.03em; }
.hero h1 span, .page-hero h1 span { color: var(--accent); }
.lead { color: var(--muted); font-size: 1.08rem; line-height: 1.8; margin-top: 16px; }
.button-row { display:flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.btn, button.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: 10px; cursor:pointer;
  padding: 14px 18px; border-radius: 18px; border:1px solid var(--line); color: #fff; font-weight: 700; font-size: 1rem;
  background: rgba(255,255,255,.06); transition: .18s ease;
}
.btn:hover, button.btn:hover { transform: translateY(-1px); }
.btn.primary { background: linear-gradient(135deg, #58b8ff, #2b7bff); border-color: transparent; box-shadow: 0 18px 34px rgba(43,123,255,.35); }
.btn.gold { background: linear-gradient(135deg, #ffdd8c, #ffb04f); color:#281300; border-color: transparent; }
.btn.ghost { background: rgba(255,255,255,.04); }
.hero-panels, .home-grid, .content-grid, .topic-grid, .facts-grid, .footer-grid { display:grid; gap: 18px; }
.hero-panels { grid-template-columns: repeat(2, minmax(0,1fr)); align-content:start; }
.stat-card, .mini-panel, .topic-card, .info-card, .fact-card, .link-card { padding: 20px; }
.stat-card strong { font-size: 2rem; display:block; }
.stat-card span, .mini-panel p, .fact-card p, .info-card p, .topic-card p, .link-card p { color: var(--muted); line-height:1.7; }
.home-grid { grid-template-columns: 1.2fr .8fr; margin-bottom: 22px; }
.page-hero { padding: 26px; display:grid; grid-template-columns: 1.15fr .85fr; gap: 24px; margin-bottom: 22px; }
.planet-visual-wrap {
  min-height: 300px; border-radius: 28px; border:1px solid var(--line); background:
  radial-gradient(circle at 30% 20%, rgba(115,188,255,.18), transparent 22%),
  linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.planet-visual {
  width: 240px; height: 240px; border-radius:50%; box-shadow: inset -30px -40px 80px rgba(0,0,0,.35), 0 10px 40px rgba(0,0,0,.35);
  position: relative;
}
.planet-visual.with-ring::after {
  content:""; position:absolute; inset: 44% -20%; border-radius:50%; border: 14px solid rgba(225,236,255,.75); transform: rotate(-18deg);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08), inset 0 0 0 2px rgba(0,0,0,.08);
}
.planet-aarde { background: radial-gradient(circle at 35% 30%, #87d8ff, #2e7bd2 45%, #0f3a6b 72%), radial-gradient(circle at 58% 56%, #67b55e, transparent 20%), radial-gradient(circle at 25% 62%, #5ca76b, transparent 18%), radial-gradient(circle at 70% 33%, rgba(255,255,255,.75), transparent 18%); }
.planet-maan { background: radial-gradient(circle at 35% 30%, #f4f6fb, #aab0bf 55%, #6c7280 86%); }
.planet-zon { background: radial-gradient(circle at 45% 45%, #fff1a2, #ffbb45 36%, #ff7a1f 62%, #d83b08 86%); box-shadow: 0 0 80px rgba(255,154,51,.55), inset -30px -40px 80px rgba(173,53,4,.35); }
.planet-planeten { background: radial-gradient(circle at 35% 30%, #ffe5bc, #b6794e 42%, #6d4831 75%), repeating-linear-gradient(0deg, rgba(255,255,255,.25) 0 12px, rgba(0,0,0,.08) 12px 22px); }
.planet-sterrenstelsel { background: radial-gradient(circle at 50% 50%, #fef7b7, #ffcb6b 18%, rgba(255,120,40,.95) 28%, rgba(163,78,255,.7) 42%, rgba(33,70,179,.35) 54%, transparent 58%); width:260px; height:260px; }
.planet-label {
  position:absolute; bottom: 18px; left: 18px; right: 18px; padding: 12px 14px; border-radius: 16px; background: rgba(3,8,18,.66); border:1px solid var(--line); color: var(--muted);
}
.breadcrumbs { color: var(--muted); font-size:.95rem; margin-bottom: 6px; }
.breadcrumbs a { color: var(--text); }
.topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 22px; }
.topic-card h2, .info-card h2, .fact-card h3, .quiz-shell h2, .link-card h2 { margin: 0 0 10px; }
.content-grid { grid-template-columns: 1.45fr .85fr; margin-bottom: 22px; }
.reading-card { padding: 24px; }
.reading-card h2 { margin-top: 0; }
.reading-card p, .reading-card li, .side-panel p, .side-panel li { color: var(--muted); line-height: 1.85; }
.reading-card ul, .side-panel ul { padding-left: 20px; }
.side-stack { display:grid; gap: 18px; }
.side-panel { padding: 22px; }
.facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.quiz-shell { padding: 22px; }
.quiz-top { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }
.quiz-meta { display:flex; gap: 10px; flex-wrap:wrap; }
.badge { padding: 9px 12px; border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted); font-weight: 700; font-size:.92rem; }
.progress { height: 12px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; border:1px solid var(--line); }
.progress > span { display:block; height:100%; width:0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.quiz-grid { display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-top: 18px; }
.question-box, .status-box { padding: 22px; }
.question-box h2 { margin: 8px 0 10px; font-size: 2rem; }
.answers { display:grid; gap: 12px; margin-top: 18px; }
.answer-btn { width:100%; text-align:left; padding: 16px 18px; border-radius: 18px; border:1px solid var(--line); background: rgba(255,255,255,.05); color:#fff; font-size:1rem; font-weight: 700; cursor:pointer; transition:.18s ease; }
.answer-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.08); }
.answer-btn.correct { border-color: rgba(39,214,178,.5); background: rgba(39,214,178,.16); }
.answer-btn.wrong { border-color: rgba(255,123,144,.5); background: rgba(255,123,144,.16); }
.answer-btn.disabled { opacity: .95; cursor: default; }
.feedback { margin-top: 18px; padding: 18px; border-radius: 18px; border:1px solid var(--line); background: rgba(255,255,255,.05); }
.feedback.good { border-color: rgba(39,214,178,.4); background: rgba(39,214,178,.11); }
.feedback.bad { border-color: rgba(255,123,144,.4); background: rgba(255,123,144,.11); }
.feedback h3 { margin: 0 0 6px; }
.feedback p { margin: 0; color: var(--muted); line-height: 1.75; }
.status-box ul { padding-left: 20px; }
.cta-bar { margin-top: 18px; display:flex; gap:10px; flex-wrap:wrap; }
.footer { margin-top: 28px; padding: 24px 0 42px; color: var(--muted); }
.footer-grid { grid-template-columns: 1.2fr .8fr .8fr; }
.footer-card { padding: 20px; }
.footer-card ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer-card a { color: var(--text); }
.note {
  margin-top: 16px; padding: 14px 16px; border-radius: 18px; border:1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: var(--muted); line-height: 1.75;
}
.home-links { display:grid; gap: 16px; }
.external-link { position:relative; }
.external-link::after { content:'↗'; position:absolute; top:18px; right:18px; color: var(--gold); font-weight:700; }
.seo-list { display:grid; gap: 10px; margin: 0; padding-left: 20px; }
.small { font-size:.92rem; }
.hidden { display:none !important; }
@media (max-width: 980px) {
  .hero, .home-grid, .page-hero, .content-grid, .quiz-grid, .footer-grid { grid-template-columns: 1fr; }
  .topic-grid, .facts-grid { grid-template-columns: 1fr 1fr; }
  .nav-toggle { display:block; }
  .nav-links { display:none; position:absolute; left: 16px; right: 16px; top: 78px; background: rgba(4,7,13,.95); border:1px solid var(--line); border-radius: 20px; padding: 14px; box-shadow: var(--shadow); }
  .nav-links.open { display:grid; }
  .nav-links a { padding: 12px 14px; }
}
@media (max-width: 680px) {
  .container { width: min(100% - 20px, 1200px); }
  .app-shell, .main { padding-top: 20px; }
  .hero, .page-hero, .reading-card, .quiz-shell, .side-panel, .stat-card, .mini-panel, .topic-card, .fact-card, .info-card, .link-card { padding: 18px; }
  .hero-panels, .topic-grid, .facts-grid { grid-template-columns: 1fr; }
  .question-box h2 { font-size: 1.6rem; }
  .planet-visual { width: 200px; height: 200px; }
  .planet-sterrenstelsel { width: 220px; height: 220px; }
}


.quick-route-grid, .route-grid, .news-grid, .rank-grid, .knowledge-grid { display:grid; gap:18px; }
.route-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom:22px; }
.quick-route-grid { grid-template-columns: 1.1fr .9fr; margin-bottom:22px; }
.route-card, .news-card, .rank-card, .knowledge-card { padding:22px; }
.route-card h2, .news-card h2, .rank-card h2, .knowledge-card h2 { margin-top:0; }
.route-card p, .news-card p, .rank-card p, .knowledge-card p { color: var(--muted); line-height:1.8; }
.info-list { padding-left: 20px; color: var(--muted); line-height:1.85; }
.muted-strong { color: var(--text); font-weight:700; }
.game-cta { border:1px solid rgba(110,199,255,.25); background: linear-gradient(180deg, rgba(110,199,255,.12), rgba(255,255,255,.03)); }
.slim-hero { align-items: start; }
.topic-quick-links { display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
.small-badge { display:inline-flex; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.05); border:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.knowledge-grid { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 16px; }
.anchor-box { padding:18px; border-radius:20px; border:1px solid var(--line); background: rgba(255,255,255,.04); }
.anchor-box h3 { margin-top:0; }
.rank-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom:22px; }
.top-preview { display:grid; gap:12px; }
.top-preview .row { display:grid; grid-template-columns: 42px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:18px; background: rgba(255,255,255,.03); }
.top-preview .nr { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background: rgba(255,255,255,.08); font-weight:700; }
.news-grid { grid-template-columns: repeat(3, minmax(0,1fr)); margin-bottom:22px; }
.placeholder-box { padding:22px; border-radius:22px; border:1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.03); }
.home-knowledge ul { margin:0; }
@media (max-width:980px) {
  .quick-route-grid, .route-grid, .news-grid, .rank-grid, .knowledge-grid { grid-template-columns: 1fr; }
}

.big-stats { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.topic-overview { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.topic-overview .card, .split-grid .card, .knowledge-columns .card, .story-grid .card { padding:22px; }
.split-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; margin-bottom:22px; }
.knowledge-columns { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.story-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.term-list { display:grid; gap:12px; }
.term-item { padding:14px 16px; border-radius:18px; background: rgba(255,255,255,.04); border:1px solid var(--line); }
.term-item strong { display:block; margin-bottom:4px; }
.memorize-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.memorize-list .item { padding:14px 16px; border-radius:18px; background: rgba(110,199,255,.08); border:1px solid rgba(110,199,255,.2); color:var(--text); }
.pill-links { display:flex; gap:10px; flex-wrap:wrap; }
.pill-links a { padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--muted); }
.topic-card .meta { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 16px; }
.inline-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.result-note { margin-top: 10px; color: var(--muted); line-height: 1.75; }
@media (max-width:980px) {
  .big-stats, .topic-overview, .split-grid, .knowledge-columns, .story-grid, .inline-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .memorize-list { grid-template-columns:1fr; }
}

.hero-spotlight { position: relative; overflow: hidden; }
.hero-spotlight::after { content:''; position:absolute; width:420px; height:420px; right:-80px; top:-120px; background: radial-gradient(circle, rgba(110,199,255,.18), transparent 60%); pointer-events:none; }
.mode-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin:18px 0 0; }
.mode-card { padding:16px; border-radius:20px; border:1px solid var(--line); background: rgba(255,255,255,.04); }
.mode-card h3 { margin:0 0 8px; font-size:1.02rem; }
.mode-card p { margin:0; color:var(--muted); line-height:1.7; font-size:.95rem; }
.mode-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.mode-btn { padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; font-weight:700; }
.mode-btn.active { background: linear-gradient(135deg, #58b8ff, #2b7bff); border-color: transparent; box-shadow: 0 10px 24px rgba(43,123,255,.32); }
.quiz-toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.quiz-toolbar .mini { padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--muted); font-size:.88rem; }
.quiz-toolbar .mini strong { color:#fff; }
.compare-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; margin-bottom:22px; }
.compare-grid .card, .look-grid .card, .extra-grid .card { padding:22px; }
.look-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.look-step { display:flex; gap:14px; align-items:flex-start; }
.look-step .nr { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background: rgba(110,199,255,.15); border:1px solid rgba(110,199,255,.25); color:#fff; font-weight:800; flex: 0 0 auto; }
.tip-list { display:grid; gap:12px; }
.tip-item { padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); line-height:1.75; }
.extra-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.hero-cta-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.hero-cta-grid .card { padding:22px; }
.hero-cta-grid p { color:var(--muted); line-height:1.8; }
.panel-accent { border-color: rgba(110,199,255,.22); background: linear-gradient(180deg, rgba(110,199,255,.10), rgba(255,255,255,.03)); }
.glow-card { border-color: rgba(255,211,111,.18); background: linear-gradient(180deg, rgba(255,211,111,.08), rgba(255,255,255,.03)); }
.quiz-note-strong { color:#fff; font-weight:700; }
.section-kicker { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size:.82rem; font-weight:800; margin-bottom:10px; display:block; }
@media (max-width:980px) { .mode-grid, .compare-grid, .look-grid, .extra-grid, .hero-cta-grid { grid-template-columns:1fr; } }


.planet-mercurius { background: radial-gradient(circle at 35% 30%, #d7d7d9, #8c8784 55%, #504c49 86%), radial-gradient(circle at 60% 55%, rgba(255,255,255,.16), transparent 12%), radial-gradient(circle at 28% 66%, rgba(0,0,0,.18), transparent 10%); }
.planet-venus { background: radial-gradient(circle at 35% 30%, #ffe8ae, #d6a458 48%, #7f5832 82%), linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }
.planet-mars { background: radial-gradient(circle at 35% 30%, #ffb286, #cf5b35 48%, #7c281b 82%), radial-gradient(circle at 70% 18%, rgba(255,255,255,.18), transparent 14%); }
.planet-jupiter { background: radial-gradient(circle at 35% 30%, #ffe7c9, #bf8455 45%, #6e4831 80%), repeating-linear-gradient(0deg, rgba(255,255,255,.25) 0 12px, rgba(109,72,49,.35) 12px 24px); }
.planet-saturnus { background: radial-gradient(circle at 35% 30%, #fff1c5, #d7b36e 45%, #7d6844 80%), repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 12px, rgba(160,120,70,.24) 12px 24px); }
.planet-uranus { background: radial-gradient(circle at 35% 30%, #d8ffff, #7fcdd6 48%, #3c7b88 82%); }
.planet-neptunus { background: radial-gradient(circle at 35% 30%, #7fb9ff, #255cbc 48%, #10255c 84%); }
.planet-hub-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin: 22px 0; }
.planet-hub-grid .card { padding:22px; }
.planet-hub-grid p { color: var(--muted); line-height:1.75; }
@media (max-width:980px) { .planet-hub-grid { grid-template-columns: 1fr; } }

.faq-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; margin:22px 0; }
.faq-grid .card p { line-height:1.85; }
@media (max-width:980px) { .faq-grid { grid-template-columns:1fr; } }