/* encyclopedia2000.com: the app's own night-blue world, deliberately dark-only.
   Home page: a centered hero with the real Home screen, alternating feature rows, an activities grid,
   a Wikipedia credit, a "software box" download panel, and an FAQ. Privacy and Press pages share the header and footer. */
@import url('fonts/fonts.css');
:root {
  --ink-0: #071330;      /* deepest background */
  --ink-1: #0f2250;      /* page background */
  --ink-2: #1c3566;      /* raised panels */
  --ink-3: #25458a;      /* panel edges, highlights */
  --sky: #aac0e6;        /* secondary text */
  --paper: #eef3fc;      /* primary text */
  --orange: #f5a623;     /* the app's accent */
  --gold: #ffd27a;       /* hover accent */
  --edge: rgba(160, 190, 255, .28);
  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --wordmark: "Segoe UI", "Selawik", system-ui, sans-serif; /* the app's own wordmark font */
  --wrap: 1120px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
html, body { margin: 0; }
body { background: var(--ink-1); color: var(--paper); font: 400 1.0625rem/1.6 var(--body); }
a { color: var(--gold); }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.eyebrow { font: 600 .72rem var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--orange); }

/* ---------- header ---------- */
header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(5, 10, 24, .86); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
header .wrap { display: flex; align-items: center; gap: 24px; height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 300 1.1rem var(--wordmark); white-space: nowrap; }
.brand img { width: 30px; height: 30px; }
.brand b { font-weight: 600; }
nav { display: flex; gap: 22px; margin-left: auto; }
@media (max-width: 1060px) { header nav { gap: 16px; } }
nav a { color: var(--sky); text-decoration: none; font-weight: 600; font-size: .95rem; }
nav a:hover { color: #fff; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid #4a5262; background: linear-gradient(#2b303a, #1b1e25);
       color: var(--orange); font: 600 .95rem var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { border-color: var(--orange); background: #333a48; color: var(--orange); }
.btn.primary { background: linear-gradient(#ffc14d, #f5a623 55%, #d4860f); color: #1a1406; border-color: #b8740b; }
.btn.primary:hover { background: linear-gradient(#ffd27a, #ffb52e 55%, #e0920f); color: #1a1406; }
.btn small { font-weight: 400; opacity: .75; }
.btn .gh, .ghlink .gh { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ghlink { display: inline-flex; align-items: center; gap: 6px; }
.hero .lede { font-size: clamp(1.25rem, 3vw, 1.5rem); color: #eef3fc; }
header .btn { padding: 7px 14px; }
@media (max-width: 900px) { header nav { display: none; } header .btn { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: 72px 0; text-align: center;
        background: radial-gradient(ellipse 60% 55% at 50% 30%, #4f78c4 0%, #25458a 45%, transparent 80%), var(--ink-1); }
.hero::before { /* the bloom, drawn with soft petals behind the wordmark */
  content: ""; position: absolute; left: 50%; top: -120px; width: 900px; height: 900px; translate: -50% 0; pointer-events: none; opacity: .32;
  background: repeating-conic-gradient(from 0deg, rgba(220, 232, 255, .55) 0deg 7deg, transparent 7deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 28%, transparent 62%); mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .7) 28%, transparent 62%);
  filter: blur(6px); animation: turn 120s linear infinite; }
@keyframes turn { to { rotate: 360deg; } }
.hero .wrap { position: relative; }
.mark { width: 84px; height: 84px; margin: 0 auto 18px; filter: drop-shadow(0 0 18px rgba(190, 215, 255, .8)); }
.hero h1 { line-height: 1; font-family: var(--wordmark); }
.hero h1 .e { display: block; font-weight: 300; font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: .03em; }
.hero h1 .y { display: block; font-weight: 600; font-size: clamp(4.2rem, 13vw, 8.5rem); letter-spacing: .06em; text-shadow: 0 4px 30px rgba(5, 15, 45, .7); }
.tag { margin-top: 10px; font: 600 .78rem var(--wordmark); letter-spacing: .5em; color: var(--sky); text-transform: uppercase; }
.lede { max-width: 38em; margin: 26px auto 0; font-size: 1.2rem; color: #dbe5f7; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.meta { margin-top: 14px; font-size: .9rem; color: var(--sky); }
.frame { max-width: 1000px; margin: 54px auto 0; border: 1px solid #3a4258; border-bottom: 0; background: #0b0d12;
         box-shadow: 0 -10px 60px rgba(79, 120, 196, .35), 0 30px 80px rgba(0, 0, 0, .6); }
.frame img { display: block; width: 100%; height: auto; }

/* ---------- sections ---------- */
section { padding-block: 88px; }
.head { max-width: 44em; margin-bottom: 44px; }
.head h2 { font-weight: 300; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin-top: 8px; }
.head p { margin-top: 14px; color: var(--sky); font-size: 1.1rem; }

/* Feature rows: picture and words side by side, alternating */
.features { background: linear-gradient(var(--ink-0), var(--ink-1) 30%); }
.row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
.row + .row { margin-top: 80px; }
.row.flip { grid-template-columns: 1fr 1.35fr; }
.row.flip .shot { order: 2; }
.row > div { min-width: 0; }
.shot { display: block; padding: 0; border: 1px solid var(--edge); background: #000; cursor: zoom-in; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.shot img { display: block; width: 100%; height: auto; }
.row h3 { font-weight: 300; font-size: 1.85rem; margin-top: 6px; }
.row p { margin-top: 12px; color: #d6e1f5; }
.row ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.row li { position: relative; padding-left: 22px; color: var(--sky); }
.row li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; rotate: 45deg; background: #7fa6ff; }
@media (max-width: 820px) { .row, .row.flip { grid-template-columns: 1fr; gap: 22px; } .row.flip .shot { order: 0; } }

/* Activities grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.card { display: flex; flex-direction: column; border: 1px solid var(--edge); background: linear-gradient(rgba(37, 69, 138, .45), rgba(15, 34, 80, .6)); }
.card .shot { border: 0; border-bottom: 1px solid var(--edge); box-shadow: none; }
.card div { padding: 16px 18px 20px; }
.card h3 { font-weight: 600; font-size: 1.05rem; }
.card p { margin-top: 6px; color: var(--sky); font-size: .97rem; }

/* Wikipedia */
.wiki { background: var(--ink-0); }
.wiki .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.wiki .wrap > div { min-width: 0; }
.wiki h2 { font-weight: 300; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin-top: 8px; }
.wiki p + p { margin-top: 14px; }
.wiki .copy p { color: #d6e1f5; }
.facts { border-top: 1px solid var(--edge); }
.facts div { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--edge); }
.facts dt { color: var(--sky); }
.facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wiki .btn { margin-top: 26px; }
@media (max-width: 820px) { .wiki .wrap { grid-template-columns: 1fr; gap: 32px; } }

/* Download: a software-box style panel */
.box { display: grid; grid-template-columns: 1.2fr 1fr; border: 1px solid #4f78c4; background: linear-gradient(135deg, #25458a, #0f2250 70%); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.box > div { min-width: 0; padding: 40px; }
.box h2 { font-weight: 300; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.15; margin-top: 8px; }
.box p { margin-top: 14px; color: #d6e1f5; }
.box .ctas { justify-content: flex-start; }
.soon { display: inline-block; margin-left: 4px; padding: 1px 7px; background: rgba(245, 166, 35, .2); border: 1px solid var(--orange); color: var(--gold); font: 600 .72rem var(--body); letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.req { background: rgba(5, 12, 30, .55); border-left: 1px solid var(--edge); }
.req h3 { font: 600 .72rem var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--orange); }
.req dl { margin: 14px 0 0; }
.req dl div { padding: 10px 0; border-bottom: 1px solid rgba(160, 190, 255, .16); }
.req dt { font-size: .85rem; color: var(--sky); }
.req dd { margin: 2px 0 0; }
@media (max-width: 820px) { .box { grid-template-columns: 1fr; } .box > div { padding: 28px 22px; } .req { border-left: 0; border-top: 1px solid var(--edge); } }

/* FAQ */
.faq { max-width: 52em; }
details { border-bottom: 1px solid var(--edge); }
summary { padding: 18px 0; font: 600 1.08rem var(--body); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--orange); font: 300 1.4rem/1 var(--display); }
details[open] summary::after { content: "−"; }
details p { padding-bottom: 18px; color: var(--sky); max-width: 44em; }

footer { padding-block: 40px; border-top: 1px solid rgba(255, 255, 255, .08); background: #050a18; color: var(--sky); font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
footer p + p { margin-top: 6px; }

/* Lightbox */
dialog { max-width: min(1280px, 94vw); padding: 0; border: 1px solid #4f78c4; background: #000; }
dialog::backdrop { background: rgba(3, 8, 22, .85); }
dialog img { display: block; max-width: 100%; max-height: 82vh; height: auto; }
dialog p { padding: 10px 14px; background: #0b0d12; color: var(--sky); font-size: .95rem; }
dialog button { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 1px solid #4a5262; background: rgba(11, 13, 18, .85); color: #fff; font: 1.2rem/1 var(--body); cursor: pointer; }

/* Download choices */
.box h2.big { font-weight: 600; font-size: clamp(2.2rem, 5vw, 3rem); margin-top: 0; }
.box .sub { margin-top: 6px; color: var(--sky); }
.dl { display: grid; gap: 12px; margin-top: 26px; }
.dl a, .dl button { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; }
.dl a svg, .dl button svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.dl a b, .dl button b { display: block; font-size: 1.1rem; }
.dl a span, .dl button span { display: block; font-size: .9rem; opacity: .8; }
.dl .btn { white-space: normal; text-align: left; font: 600 .95rem var(--body); width: 100%; }
/* Phones and tablets see the "send to yourself" panel; PCs see the download buttons. */
.on-phone { display: none; }
.phone .on-phone { display: block; }
.phone span.on-phone { display: inline; }
.phone .on-pc { display: none; }
.topc > p:first-child { margin-top: 22px; color: #eef3fc; }
.topc .dl { margin-top: 16px; }
.choices { display: grid; gap: 10px; margin-top: 22px; }
.choice { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--edge); background: rgba(5, 12, 30, .35); color: var(--paper); text-decoration: none; }
.choice:hover { border-color: var(--orange); background: rgba(245, 166, 35, .1); color: var(--paper); }
.choice b { display: block; font-size: 1.05rem; color: var(--gold); }
.choice span { display: block; font-size: .93rem; color: var(--sky); }
.choice i { flex: none; font-style: normal; font: 600 .7rem var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--orange); color: var(--gold); }
.note { margin-top: 16px; font-size: .93rem; color: var(--sky); }

/* Roadmap */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.plans div { padding: 18px 20px; border-left: 3px solid var(--orange); background: rgba(5, 12, 30, .3); }
.plans h3 { font-weight: 600; font-size: 1rem; }
.plans p { margin-top: 6px; color: var(--sky); font-size: .97rem; }

/* Footer links */
footer nav { margin: 0; flex-wrap: wrap; gap: 6px 20px; }
footer nav a { font-weight: 400; }

/* Text pages (privacy, press) */
.doc { padding-block: 64px 88px; }
.doc .wrap { max-width: 820px; }
.doc h1 { font-weight: 300; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.15; margin-top: 8px; }
.doc .lead { margin-top: 10px; color: var(--sky); }
.doc h2 { font-weight: 600; font-size: 1.25rem; margin-top: 40px; color: var(--gold); }
.doc p, .doc ul { margin-top: 12px; color: #d6e1f5; }
.doc li + li { margin-top: 6px; }
.doc code { font: .92em Consolas, monospace; padding: 1px 5px; background: rgba(0, 0, 0, .3); border: 1px solid var(--edge); }
.table { overflow-x: auto; margin-top: 14px; }
.table table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.table th, .table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); }
.table th { color: var(--sky); font-weight: 600; }
.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.assets a { display: block; border: 1px solid var(--edge); background: rgba(5, 12, 30, .35); color: var(--sky); text-decoration: none; font-size: .9rem; }
.assets a:hover { border-color: var(--orange); color: #fff; }
.assets img { display: block; width: 100%; height: auto; aspect-ratio: 1283 / 930; object-fit: cover; background: #000; }
.assets .logo img { aspect-ratio: 1; object-fit: contain; padding: 22px; background: radial-gradient(circle, #25458a, #0f2250 70%); }
.assets span { display: block; padding: 8px 10px; }
.copybox { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--edge); background: rgba(5, 12, 30, .35); color: #d6e1f5; }