/* Explore: interactive pages (lib/engine/explore.php). Uses the site's calm tokens from site.css. */

/* ---------- hub ---------- */
.ex-hero{padding:72px 0 40px}
.ex-hero-sm{padding:34px 0 18px}
.ex-hero-sm .wrap{max-width:var(--wrap)}
.ex-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,380px);gap:36px;align-items:center}
.ex-hero-art{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--bg-2)}
.ex-hero-art svg{width:100%;height:auto;display:block}
.ex-hero-sm h1{font-size:clamp(32px,4.2vw,50px);margin:10px 0 12px;max-width:18ch}
.ex-lede{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:62ch;margin:0 0 12px;line-height:1.55}
.ex-hero .crumbs{font-size:15px}
.ex-group{margin:0 0 46px}
.ex-group-d{color:var(--muted);margin:-6px 0 18px;font-size:17px}
.ex-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.ex-tile{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
a.ex-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--ex) 45%,var(--line))}
.ex-tile-art{display:block;aspect-ratio:16/9;overflow:hidden;background:color-mix(in srgb,var(--ex) 10%,var(--bg-2))}
.ex-tile-art svg{width:100%;height:100%;display:block;transition:transform .5s ease}
a.ex-tile:hover .ex-tile-art svg{transform:scale(1.045)}
.ex-tile-b{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.ex-tile-b b{font-size:19px;font-family:var(--font-display,inherit);color:var(--ink)}
.ex-tile-b span{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.ex-tile-b .views{font-size:13.5px;color:var(--muted)}
.ex-tile.is-soon{opacity:.62}
.ex-soon,.ex-live{font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;align-self:flex-start;padding:4px 10px;border-radius:999px}
.ex-soon{background:var(--bg-2);color:var(--muted)}
.ex-live{background:color-mix(in srgb,var(--ex) 14%,transparent);color:var(--ex)}
.ex-more{margin:44px 0 0}
.ex-more h2{font-size:24px;margin:0 0 14px}
.ex-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ex-mini a{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);font-size:15px}
.ex-mini-art{display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.ex-mini-art svg{width:100%;height:100%;display:block}
.ex-faq{margin:44px 0 0}
.ex-faq h2{font-size:26px;margin:0 0 14px}
.ex-credit{margin:28px 0 0;font-size:14.5px;color:var(--muted);line-height:1.6}
.ex-credit a{color:var(--accent)}
.ex-note{padding:14px 18px;border-radius:14px;background:var(--bg-2);color:var(--ink-2)}
.ex-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow);min-width:0}
.ex-card h3{font-size:15px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-family:var(--font)}
.ex-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:18px 0 0}
.ex-load{display:flex;align-items:center;gap:12px;color:var(--muted);padding:26px 4px}
.ex-load::before{content:"";width:18px;height:18px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--accent);animation:exspin .9s linear infinite}
@keyframes exspin{to{transform:rotate(360deg)}}
.ex-chips{display:flex;flex-wrap:wrap;gap:8px}
.ex-chip{font:600 14.5px/1 var(--font);padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.ex-chip:hover{border-color:var(--accent);color:var(--accent)}
.ex-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Your day ---------- */
.yd-find{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.yd-find input{flex:1 1 260px;min-width:0;font:500 17px/1.2 var(--font);padding:15px 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.yd-find input:focus{outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent);border-color:var(--accent)}
.yd-find .btn{padding:14px 22px}
.yd-here svg{width:18px;height:18px}
.yd-pick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.yd-empty{padding:30px;border:1px dashed var(--line-2);border-radius:var(--radius-lg);color:var(--ink-2);font-size:17.5px;line-height:1.6;background:var(--bg-2)}
.yd-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0 16px}
.yd-head h2{font-size:clamp(28px,3.4vw,40px);margin:0}
.yd-head p{margin:4px 0 0;color:var(--muted)}
.yd-head button.lnk{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.yd-now{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;background:linear-gradient(135deg,color-mix(in srgb,#e0915f 16%,var(--surface)),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 26px;box-shadow:var(--shadow)}
.yd-now-ic svg{width:92px;height:92px}
.yd-now-t{font:600 clamp(48px,6vw,68px)/1 var(--font-display,var(--font));color:var(--ink)}
.yd-now-w{font-size:20px;color:var(--ink-2);margin:6px 0 10px}
.yd-now-d{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--muted);font-size:15.5px}
.yd-now-d b{color:var(--ink);font-weight:600}
.yd-tl{position:relative;margin:18px 0 0}
.yd-tl-scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;cursor:grab;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);
  scrollbar-width:thin}
.yd-tl-scroll.is-drag{cursor:grabbing;scroll-snap-type:none}
.yd-tl-track{position:relative;display:flex;height:200px}
.yd-tl-svg{position:absolute;left:0;top:0;pointer-events:none}
.yd-h{flex:0 0 66px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px 0 10px;border-right:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  scroll-snap-align:start;cursor:pointer;background:none;border-top:0;border-bottom:0;border-left:0;font:inherit;color:inherit;position:relative;z-index:1}
.yd-h:hover,.yd-h.is-on{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.yd-h.is-day1{border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.yd-h .t{font-size:13.5px;color:var(--muted);font-weight:600}
.yd-h svg{width:32px;height:32px}
.yd-h .r{font-size:12px;color:#3c79b4;min-height:15px;font-weight:600}
.yd-h .bar{width:22px;border-radius:5px 5px 0 0;background:#9cc3e6;align-self:center}
.yd-h .dd{position:absolute;top:-2px;left:6px;font-size:11.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.yd-tl-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;z-index:2;font-size:20px;color:var(--ink)}
.yd-tl-btn.prev{left:-12px}.yd-tl-btn.next{right:-12px}
.yd-detail{margin:12px 2px 0;color:var(--ink-2);font-size:16px;min-height:24px}
.yd-detail b{color:var(--ink)}
.yd-sun svg.arc{width:100%;height:auto;display:block}
.yd-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:12px 0 0}
.yd-kv div span{display:block;font-size:13.5px;color:var(--muted)}
.yd-kv div b{font-size:19px;color:var(--ink);font-weight:600}
.yd-moon{display:flex;gap:18px;align-items:center}
.yd-moon svg{width:96px;height:96px;flex:none}
.yd-moon b{font-size:21px;display:block;color:var(--ink)}
.yd-moon p{margin:4px 0 0;color:var(--ink-2)}
.yd-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;margin:0}
.yd-day{text-align:center;padding:12px 6px;border-radius:16px;background:var(--bg-2)}
.yd-day b{display:block;font-size:14.5px;color:var(--ink-2)}
.yd-day svg{width:38px;height:38px;margin:6px auto}
.yd-day .mm{font-size:15px;color:var(--ink)}
.yd-day .mm i{color:var(--muted);font-style:normal}
.yd-units{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.yd-units button{border:0;background:var(--surface);padding:8px 14px;font:600 14px/1 var(--font);cursor:pointer;color:var(--ink-2)}
.yd-units button[aria-pressed="true"]{background:var(--accent);color:#fff}
@media (max-width:800px){.ex-hero-in{grid-template-columns:1fr}}
@media (max-width:640px){
  .yd-now{grid-template-columns:1fr;text-align:left}
  .yd-now-ic svg{width:70px;height:70px}
  .yd-tl-btn{display:none}
  .yd-find .btn{flex:1 1 auto}
}

/* ---------- The price time machine ---------- */
.pt-top{display:grid;grid-template-columns:auto 1fr auto;gap:14px 26px;align-items:center}
.pt-year span{display:block;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pt-year b{font:600 clamp(44px,5vw,64px)/1 var(--font-display,var(--font));color:#c2702d;font-variant-numeric:tabular-nums}
.pt-slide input{width:100%;accent-color:#c2702d;height:28px}
.pt-ticks{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:2px}
.pt-play{padding:12px 18px}
.pt-infl{grid-column:1/-1;margin:0;color:var(--ink-2);font-size:16.5px}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:18px 0}
.pt-card{display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);font:inherit;color:inherit;transition:transform .2s,border-color .2s}
.pt-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,#c2702d 40%,var(--line))}
.pt-card[aria-pressed="true"]{border-color:#c2702d;box-shadow:0 0 0 2px color-mix(in srgb,#c2702d 35%,transparent)}
.pt-card img,.pt-ph{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--bg-2)}
.pt-b{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.pt-b b{font-size:17px}
.pt-b small{color:var(--muted);font-size:13px}
.pt-then{font:600 30px/1.1 var(--font-display,var(--font));color:var(--ink);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.pt-now{font-size:14px;color:var(--muted)}
.pt-now b{color:var(--ink-2)}
.pt-x{font-size:13px;color:var(--muted);min-height:18px}
.pt-x.is-up{color:#a3462b}
.pt-x.is-down{color:#2f7d55}
.pt-big{font:600 24px/1.3 var(--font-display,var(--font));margin:0 0 10px}
.pt-big span{color:var(--muted)}
.pt-chart{width:100%;height:auto;display:block}
.pt-legend{display:flex;gap:18px;font-size:13.5px;color:var(--muted);margin:6px 0 0}
.pt-legend span::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;background:#c2702d}
.pt-legend .b::before{background:#9db0b6}
.pt-story{font-size:17px;color:var(--ink-2);line-height:1.6}
@media (max-width:700px){.pt-top{grid-template-columns:1fr}.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pt-then{font-size:24px}}

/* ---------- Where in the world? ---------- */
.ww{--ww-sea:#dcebee;--ww-land:#f4ecdc;--ww-edge:#c6b89c}
:root[data-theme="dark"] .ww{--ww-sea:#16252c;--ww-land:#2d3a3f;--ww-edge:#4a5b61}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ww{--ww-sea:#16252c;--ww-land:#2d3a3f;--ww-edge:#4a5b61}}
.ww-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:0 0 10px;color:var(--muted);font-size:15px}
.ww-n{font-weight:700;color:var(--accent)}
.ww-photo{margin:0 0 14px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--bg-2)}
.ww-photo img{width:100%;height:auto;display:block;max-height:70vh;object-fit:cover}
.ww-photo figcaption{font-size:13px;color:var(--muted);padding:8px 14px}
.ww-ask{font-size:17.5px;color:var(--ink-2);margin:0 0 12px}
.ww-ask b{color:var(--ink)}
.ww-map{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--ww-sea);touch-action:none;user-select:none}
.ww-svg{display:block;width:100%;height:auto;aspect-ratio:2/1;cursor:crosshair}
.ww-land{fill:var(--ww-land);stroke:var(--ww-edge);stroke-width:.4;vector-effect:non-scaling-stroke}
.ww-tools{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.ww-tools button{width:38px;height:38px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font-size:20px;cursor:pointer;color:var(--ink);box-shadow:var(--shadow)}
.ww-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0}
.ww-act .btn[disabled]{opacity:.45;cursor:not-allowed}
.ww-hint{font-weight:600;color:var(--ink-2)}
.ww-result h3{font-size:24px;text-transform:none;letter-spacing:0;color:var(--ink);font-family:var(--font-display,var(--font));margin:8px 0}
.ww-result p{font-size:17px;color:var(--ink-2);line-height:1.6}
.ww-score{font-size:19px!important}
.ww-score b{color:var(--accent)}
.ww-links a{color:var(--accent)}
.ww-share{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ww-next{color:var(--muted);font-size:15px}

/* ---------- Baby names ---------- */
.bn-tops p{margin:14px 0 8px;color:var(--ink-2)}
.bn-tops .ex-chip{text-decoration:none}
.bn-f{border-color:color-mix(in srgb,#b5577a 35%,var(--line-2))}
.bn-m{border-color:color-mix(in srgb,#3c79b4 35%,var(--line-2))}
.bn-out{margin-top:22px}
.bn-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0 0 16px}
.bn-card.bn-f{border-top:4px solid #b5577a}
.bn-card.bn-m{border-top:4px solid #3c79b4}
.bn-chart-card{margin:0 0 16px}
.bn-chart svg{width:100%;height:auto;display:block;touch-action:pan-y}
.bn-read{color:var(--ink-2);min-height:24px;margin:8px 0 0}
.bn-legend{display:flex;gap:16px;font-size:14px;color:var(--muted);margin:6px 0 0}
.bn-legend span::before{content:"";display:inline-block;width:16px;height:4px;border-radius:2px;background:var(--c);margin-right:6px;vertical-align:middle}
.bn-map svg{width:100%;max-width:560px;height:auto;display:block}
.bn-tile{cursor:pointer;outline:none}
.bn-tile:hover rect,.bn-tile:focus rect{stroke:var(--ink);stroke-width:2}
.bn-map-t{color:var(--ink-2);font-size:16.5px;min-height:24px}
.bn-sx{margin:0 0 10px}

/* ---------- The true size of countries ---------- */
.ts{--ts-sea:#dcebee;--ts-land:#efe7d7;--ts-edge:#cdbf9f}
:root[data-theme="dark"] .ts{--ts-sea:#16252c;--ts-land:#2d3a3f;--ts-edge:#4a5b61}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ts{--ts-sea:#16252c;--ts-land:#2d3a3f;--ts-edge:#4a5b61}}
.ts-bar{display:flex;flex-direction:column;gap:12px;margin:0 0 14px}
.ts-add{display:flex;gap:10px;flex-wrap:wrap}
.ts-add input{flex:1 1 240px;min-width:0;font:500 17px/1.2 var(--font);padding:14px 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.ts-map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--ts-sea);touch-action:none;user-select:none}
.ts-svg{display:block;width:100%;height:auto}
.ts-sea{fill:var(--ts-sea)}
.ts-grid line{stroke:color-mix(in srgb,var(--ts-edge) 40%,transparent);stroke-width:.6}
.ts-base path{fill:var(--ts-land);stroke:var(--ts-edge);stroke-width:.5;cursor:pointer}
.ts-base path:hover{fill:color-mix(in srgb,var(--ts-land) 80%,var(--accent))}
.ts-base path.is-picked{fill:color-mix(in srgb,var(--ts-land) 70%,var(--ink));opacity:.6}
.ts-piece{cursor:grab}
.ts-piece path{fill:color-mix(in srgb,var(--c) 55%,transparent);stroke:var(--c);stroke-width:1.4}
.ts-piece text{font:700 13px var(--font);fill:#fff;paint-order:stroke;stroke:color-mix(in srgb,var(--c) 85%,#000);stroke-width:3px;pointer-events:none}
.ts-legend{margin:14px 0 0;color:var(--ink-2);font-size:16.5px}
.ts-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ts-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--bg-2);border-left:5px solid var(--c)}
.ts-list li b{color:var(--ink)}
.ts-list button{margin-left:auto;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--ink-2);font:600 13.5px var(--font)}
.ts-list button + button{margin-left:0;width:30px;padding:5px 0}
.ts-cmp{margin:12px 0 0;font-size:17px}

/* ---------- The world as 100 people ---------- */
.w1-cats{margin:0 0 18px}
.w1-grid{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:6px 4px;padding:22px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.w1-p svg{display:block;width:100%;height:auto;fill:var(--c,#c9d2dc);transition:fill .45s ease,opacity .3s ease}
.w1-p{transition:opacity .3s}
.w1-say{font:600 clamp(19px,1.8vw,23px)/1.45 var(--font-display,var(--font));color:var(--ink);margin:18px 0 10px}
.w1-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.w1-legend li{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--ink-2);cursor:pointer;padding:4px 0}
.w1-legend li span{width:14px;height:14px;border-radius:4px;flex:none}
.w1-legend li b{color:var(--ink);font-size:18px}
@media (max-width:640px){.w1-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;padding:14px}}

/* ---------- The solar system now ---------- */
.ss-bar{display:grid;grid-template-columns:auto 1fr auto;gap:12px 22px;align-items:center;margin:0 0 16px}
.ss-date span{display:block;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ss-date b{font:600 22px/1.2 var(--font-display,var(--font));color:var(--ink)}
.ss-bar input{width:100%;accent-color:#4b5fa8}
.ss-btns{display:flex;gap:8px}
.ss-btns .btn{padding:11px 16px}
.ss-zoom{margin:0 0 12px}
.ss-wrap{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.ss-info{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:6px 20px;align-items:start}
.ss-info > p:first-child{grid-column:1/-1}
.ss-info img{grid-row:span 4}
@media (max-width:640px){.ss-info{grid-template-columns:1fr}.ss-info img{grid-row:auto}}
.ss-svg{display:block;width:100%;height:auto;border-radius:24px}
.ss-p{cursor:pointer;outline:none}
.ss-p text{font:600 12px var(--font);fill:#d9e2ef;pointer-events:none}
.ss-p.is-on circle:nth-of-type(2),.ss-p.is-on circle:last-of-type{stroke:#fff;stroke-width:2.5}
.ss-p:focus-visible circle:last-of-type{stroke:#7cc4b9;stroke-width:3}
.ss-info img{width:100%;height:auto;border-radius:14px;margin:0 0 10px;display:block}
.ss-info h3{font:600 26px/1.2 var(--font-display,var(--font));text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 6px}
.ss-info p{color:var(--ink-2);line-height:1.55}
.ss-miss{font-size:15.5px}
@media (max-width:860px){.ss-wrap{grid-template-columns:1fr}.ss-bar{grid-template-columns:1fr}}

/* ---------- Tonight's sky ---------- */
.sky-times{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 16px;color:var(--muted);font-size:15.5px}
.sky-times b{color:var(--ink);font-size:17px}
.sky-wrap{display:grid;grid-template-columns:1fr;gap:18px}
.sky-dome{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.sky-card{fill:#9fb0c6;font:700 15px var(--font)}
.sky-star{fill:#aebbd0;font:500 10.5px var(--font)}
.sky-lbl{fill:#f3f0ea;font:600 12.5px var(--font)}
.sky-slide{display:flex;flex-direction:column;gap:6px;max-width:520px;margin:12px auto 0;color:var(--ink-2)}
.sky-slide input{width:100%;accent-color:#4b5fa8}
.sky-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sky-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);line-height:1.5}
.sky-list .dot{width:14px;height:14px;border-radius:50%;margin-top:5px;flex:none;box-shadow:0 0 0 2px rgba(0,0,0,.08)}
.sky-list b{color:var(--ink)}
.sky-list small{color:var(--muted);font-size:14.5px}
.sky-passes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sky-passes button{width:100%;text-align:left;border:1px solid var(--line);background:var(--bg-2);border-radius:14px;padding:12px 14px;font:15.5px/1.45 var(--font);color:var(--ink-2);cursor:pointer}
.sky-passes button b{color:var(--ink)}
.sky-passes button.is-on,.sky-passes button:hover{border-color:#4b5fa8}

/* ---------- The human body ---------- */
.hb-wrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:22px;align-items:start}
.hb-fig{background:linear-gradient(180deg,color-mix(in srgb,#c2412d 6%,var(--surface)),var(--surface));border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow)}
.hb-svg{display:block;width:100%;height:auto;max-height:640px}
.hb-o{cursor:pointer;outline:none;fill:var(--f);transition:opacity .25s,filter .25s}
.hb-o path,.hb-o circle,.hb-o ellipse{fill:var(--f)}
.hb-bones path{fill:none;stroke:#e8dfcf}
.hb-skin path,.hb-skin circle{stroke:#d9b8a8;stroke-width:1.5}
.hb-o:not(.hb-skin):hover,.hb-o:focus-visible{filter:brightness(1.12) drop-shadow(0 0 4px rgba(0,0,0,.25))}
.hb-svg.has-on .hb-o:not(.is-on):not(.hb-skin){opacity:.45}
.hb-svg.has-on .hb-skin:not(.is-on){opacity:.85}
.hb-o.is-on{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--f) 70%,#000))}
.hb-info h3{font:600 28px/1.2 var(--font-display,var(--font));text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 10px}
.hb-what{font-size:18px;line-height:1.65;color:var(--ink-2)}
.hb-fact{font-size:16.5px;color:var(--ink-2);background:var(--bg-2);padding:12px 14px;border-radius:14px}
.hb-arts{margin:0 0 8px;padding-left:20px}
.hb-arts a{color:var(--accent)}
.hb-list{margin:18px 0}
@media (max-width:860px){.hb-wrap{grid-template-columns:1fr}.hb-fig{max-width:360px;margin:0 auto}}

/* ---------- Storm and hurricane tracker ---------- */
.st{--st-sea:#dfe8ef;--st-land:#f1ebde;--st-edge:#cbbd9f}
:root[data-theme="dark"] .st{--st-sea:#16212b;--st-land:#2a353b;--st-edge:#45555c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st{--st-sea:#16212b;--st-land:#2a353b;--st-edge:#45555c}}
.st-map{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--st-sea)}
.st-svg{display:block;width:100%;height:auto;aspect-ratio:2/1}
.st-sea{fill:var(--st-sea)}
.st-land path{fill:var(--st-land);stroke:var(--st-edge);stroke-width:.5;vector-effect:non-scaling-stroke}
.st-storm{cursor:pointer}
.st-cone{fill:color-mix(in srgb,var(--c) 22%,transparent);stroke:color-mix(in srgb,var(--c) 70%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.st-fc{fill:none;stroke:var(--c);stroke-width:2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.st-hist{fill:none;stroke:var(--c);stroke-width:2.5;opacity:.65;vector-effect:non-scaling-stroke}
.st-fcp{fill:#fff;stroke:var(--c);stroke-width:1.5;vector-effect:non-scaling-stroke}
.st-halo{fill:color-mix(in srgb,var(--c) 22%,transparent)}
.st-ic{fill:var(--c);stroke:var(--c);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.st-lbl{font-family:var(--font);font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--st-sea);stroke-width:3px}
.st-storm.is-on .st-halo{fill:color-mix(in srgb,var(--c) 40%,transparent)}
.st-list{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.st-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink-2);text-align:left}
.st-item b{color:var(--ink)}
.st-item span{font-size:14px;color:var(--muted)}
.st-item.is-on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.st-info h3{font:600 26px/1.2 var(--font-display,var(--font));text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 6px;border-left:6px solid var(--c);padding-left:12px}
.st-fch{margin:16px 0 6px;font-weight:700;color:var(--ink)}
.st-fcl{margin:0;padding-left:18px;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.st-do{margin-top:18px}
.st-do ul{margin:0;padding-left:20px;color:var(--ink-2);line-height:1.6;font-size:16.5px}
.st-info a,.st-do a{color:var(--accent)}

/* ---------- Right now ---------- */
.ex-snapshot{font-size:18px;line-height:1.55;color:var(--ink-2);margin:0 0 16px;max-width:70ch}
.ex-chips button{font:600 14.5px/1 var(--font);padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.ex-chips button:hover{border-color:var(--accent);color:var(--accent)}
.ex-chips button[aria-pressed="true"],.ex-chips button[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.ex-chips button:focus-visible,.lv-tab:focus-visible,.lv-cost-card:focus-visible,.lv-photos button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.lv{--lv-sea:#dcebee;--lv-land:#f4ecdc;--lv-edge:#c6b89c}
:root[data-theme="dark"] .lv{--lv-sea:#16252c;--lv-land:#2d3a3f;--lv-edge:#4a5b61}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv{--lv-sea:#16252c;--lv-land:#2d3a3f;--lv-edge:#4a5b61}}
.lv-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:18px;align-items:start}
.lv-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.lv-map{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--lv-sea);touch-action:none;user-select:none;height:420px}
.lv-map-lg{height:520px}
.lv-svg{display:block;width:100%;height:100%;cursor:grab}
.lv-svg:active{cursor:grabbing}
.lv-landp{fill:var(--lv-land);stroke:var(--lv-edge);stroke-width:.45;vector-effect:non-scaling-stroke}
.lv-tools{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.lv-tools button{width:38px;height:38px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font:600 18px/1 var(--font);cursor:pointer;color:var(--ink);box-shadow:var(--shadow)}
.lv-tools button[data-sharp]{width:auto;height:auto;padding:8px 12px;font-size:14px;border-radius:999px}
.lv-chart{width:100%;height:auto;display:block;touch-action:none}
.lv-tip{min-height:1.4em;margin:8px 0 0;color:var(--ink-2);font-size:14.5px}
.lv-muted{color:var(--muted);font-size:14.5px;line-height:1.5}
.lv-big{font:600 clamp(36px,4vw,52px)/1 var(--font-display,var(--font));margin:0 0 6px;color:var(--ink);font-variant-numeric:tabular-nums}
.lv-big span{font-size:.42em;color:var(--muted);font-weight:600}
.lv-kicker{margin:0;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--muted)}
.lv-side h3,.lv-side .ex-card h3{text-transform:none;letter-spacing:0;font:600 22px/1.25 var(--font-display,var(--font));color:var(--ink)}
.lv-time{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:12px 0}
.lv-time label{flex:1 1 240px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2);font-size:15px}
.lv-time input{width:100%;accent-color:var(--accent)}
.lv-play{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
.lv-donut{width:100%;max-width:240px;height:auto;display:block;margin:0 auto}
.lv-donut circle{cursor:pointer}
.lv-donut text{font-family:var(--font)}
.lv-gauge{width:100%;max-width:260px;height:auto;display:block}
.lv-orbit{position:relative;height:min(72vh,640px);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:#071018;touch-action:none}
.lv-orbit img{position:absolute;left:50%;top:50%;max-width:none;width:100%;height:100%;object-fit:contain;transform:translate(-50%,-50%);user-select:none;pointer-events:none}
.lv-caption{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.lv-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:16px 0 0}
.lv-photos button{display:flex;flex-direction:column;gap:4px;text-align:left;padding:0 0 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;cursor:pointer;color:inherit;font:inherit}
.lv-photos img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--bg-2)}
.lv-photos b{padding:0 10px;font-size:15px}
.lv-photos small{padding:0 10px;color:var(--muted)}
.lv-hero-img{width:100%;border-radius:14px;margin:0 0 10px;aspect-ratio:4/3;object-fit:cover;background:var(--bg-2)}
.lv-cost{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:16px 0}
.lv-cost-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);cursor:pointer;font:inherit;color:inherit;box-shadow:var(--shadow)}
.lv-cost-card small{color:var(--muted)}
.lv-cost-card span{font:600 26px/1.1 var(--font-display,var(--font));color:var(--ink);font-variant-numeric:tabular-nums}
.lv-cost-card:hover,.lv-cost-card:focus-visible{border-color:#c9a227}
.lv-pick-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.lv-tab{text-decoration:none;font:600 14.5px/1 var(--font);padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2)}
.lv-tab[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.lv-open{margin:0 0 10px}
.lv-open a{color:var(--accent)}
.lv-embed{margin:0}
.lv-embed .lv-map-lg{height:420px}
@media (max-width:860px){
  .lv-split{grid-template-columns:1fr}
  .lv-map,.lv-map-lg,.lv-embed .lv-map-lg{height:380px}
  .lv-orbit{height:420px}
}

/* ---------- desk pages: moon, clocks, distance, scale, elements, flags ---------- */
.ex-tile[hidden],.ex-group[hidden],.pt-cell[hidden],.far-picks[hidden]{display:none!important}
.ex-search{margin:22px 0 8px}
.moon-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px}
.moon-nav h2{margin:0;font-size:22px;text-align:center}
.moon-week,.moon-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.moon-week{margin:0 0 6px;color:var(--muted);font-size:13px;text-align:center}
.moon-day{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:92px;padding:8px 4px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.moon-day b{font-size:14px}
.moon-day small{font-size:11px;line-height:1.2;color:var(--ink-2);text-align:center}
.moon-ico{width:32px;height:32px;display:block}
.moon-today{font-size:18px;line-height:1.5}
.clock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.clock-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.clock-card h3{margin:0;font-size:16px}
.clock-card b{font:600 28px/1.1 var(--font-display,var(--font));font-variant-numeric:tabular-nums}
.clock-card span,.clock-card small{color:var(--ink-2);font-size:14px}
.far-result h3{margin:0 0 6px}
.far-km{font:600 28px/1.2 var(--font-display,var(--font));margin:0 0 12px}
.far-result ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.far-result li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.far-picks{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.scale-box{margin:0 0 18px}
.scale-box input{width:100%;accent-color:var(--accent)}
.scale-focus{font-size:18px;line-height:1.5}
.scale-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.scale-list li{display:grid;grid-template-columns:minmax(140px,1fr) auto;gap:4px 16px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer}
.scale-list small{grid-column:1/-1;color:var(--ink-2)}
.scale-list li.is-on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pt-tools{margin:0 0 14px;max-width:420px}
.pt-tools input{width:100%;padding:12px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:16px}
.pt-scroll{overflow-x:auto;margin:0 0 8px}
.ex-app[data-ex="periodic-table"] .pt-grid{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(10,minmax(32px,auto));gap:2px;width:100%}
.pt-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:34px;padding:2px 0;border:0;border-radius:6px;color:#1c1917;font:inherit;cursor:pointer;line-height:1}
.pt-cell small{font-size:8px;opacity:.75}
.pt-cell b{font-size:12px}
.pt-cell.is-on{outline:2px solid var(--ink);outline-offset:1px}
.pt-mark{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);border:1px dashed var(--line-2);border-radius:6px}
.ex-app[data-ex="periodic-table"] .pt-detail{margin:0 0 16px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.ex-app[data-ex="periodic-table"] .pt-detail h2{margin:0 0 4px}
.pt-num{margin:0;color:var(--muted);font-size:14px}
.pt-sym{font:600 42px/1 var(--font-display,var(--font));margin:0 0 8px}
.ex-app[data-ex="periodic-table"] .pt-legend{display:flex;flex-wrap:wrap;gap:8px 14px;list-style:none;margin:16px 0;padding:0;font-size:14px}
.ex-app[data-ex="periodic-table"] .pt-legend li{display:flex;align-items:center;gap:6px;color:var(--ink)}
.ex-app[data-ex="periodic-table"] .pt-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.pt-all{margin-top:18px}
.pt-all dt{font-weight:700;margin-top:10px}
.pt-all dd{margin:2px 0 0;color:var(--ink-2)}
.cat-alkali{background:#f3c1c1}
.cat-alkaline{background:#f6d7a8}
.cat-transition{background:#f7e7a1}
.cat-post{background:#cfe6b8}
.cat-metalloid{background:#b7e0d4}
.cat-nonmetal{background:#c9ddf5}
.cat-halogen{background:#d9d0f2}
.cat-noble{background:#f3d0e4}
.cat-lanthanide{background:#f6d2bf}
.cat-actinide{background:#e7d3c4}
.pt-cell{color:#1c1917}
.flag-quiz{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);margin:0 0 28px}
.flag-prompt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:20px;margin:0 0 12px}
.flag-big{font-size:72px;line-height:1}
.flag-choices{display:flex;flex-wrap:wrap;gap:8px}
.flag-choices .is-right{background:#1d6a5a;color:#fff;border-color:#1d6a5a}
.flag-choices .is-wrong{background:#c2412d;color:#fff;border-color:#c2412d}
.flag-score{color:var(--ink-2);margin:12px 0 0}
.flag-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.flag-card{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.flag-emoji{font-size:36px;line-height:1}
@media (max-width:720px){
  .ex-app[data-ex="periodic-table"] .pt-grid{min-width:560px;width:auto}
}
@media (max-width:860px){
  .moon-nav{flex-wrap:wrap}
  .moon-day{min-height:78px}
  .moon-day small{display:none}
}

/* ---------- the Explore hub: pictures first (explore_hub_mosaic) ---------- */
.ex-hub-top{padding:14px 0 6px}
.ex-hub-head{margin:0 0 14px}
.ex-hub-head h1{font-size:clamp(28px,3.4vw,44px);line-height:1.12;margin:8px 0 0}
.exm{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-auto-rows:minmax(200px,auto);gap:14px;margin:0 0 22px}
.exm-1,.exm-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.exm-t{position:relative;display:block;min-height:200px;border-radius:22px;overflow:hidden;background:#0b1622;color:#fff;text-decoration:none;isolation:isolate;
  box-shadow:0 14px 34px -24px rgba(20,40,45,.55);transition:transform .2s ease,box-shadow .2s ease}
.exm-t:hover{transform:translateY(-2px);box-shadow:0 20px 40px -24px rgba(20,40,45,.6)}
.exm-t:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.exm-3 .exm-t:first-child,.exm-4 .exm-t:first-child{grid-row:span 2}
.exm-4 .exm-t:nth-child(2){grid-column:span 2}
.exm-t>img,.exm-t>svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.exm-t.is-earth{background:#000}
.exm-t.is-earth>img{object-fit:contain;padding:6px 6px 64px}
.exm-t.is-moon{background:radial-gradient(circle at 50% 38%,#26365a,#0e1626 70%)}
.exm-t.is-moon>svg{inset:12% 0 auto;height:58%;object-fit:contain}
.exm-t.is-map{background:#dfeaee}
.exm-t.is-map image{opacity:.95}
.exm-t.is-map circle{fill:#d97a48;fill-opacity:.85;stroke:#fff;stroke-width:1.4}
.exm-t.is-map circle.exm-storm{fill:#2c68cc}
.exm-t.is-map .exm-pulse{animation:exm-pulse 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes exm-pulse{0%{stroke-width:1.4;stroke-opacity:1}70%{stroke-width:14;stroke-opacity:0}100%{stroke-width:14;stroke-opacity:0}}
.exm-tag{position:absolute;top:12px;left:12px;z-index:2;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:#1f2b30;font-size:13.5px;font-weight:700;letter-spacing:.02em}
.exm-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:3px;padding:48px 16px 14px;background:linear-gradient(rgba(8,14,20,0),rgba(8,14,20,.82))}
.exm-cap b{font-family:var(--font-display,serif);font-size:20px;font-weight:600;line-height:1.25}
.exm-cap span{font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.9)}
.exm-cr{font-size:13px;line-height:1.35;color:rgba(255,255,255,.82)}
.exm-t.is-earth .exm-cap b{font-size:24px}
.ex-hub-intro{display:grid;gap:12px;margin:0 0 4px}
.ex-hub-intro>p{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:820px}
.ex-hub-intro .ex-search{margin:0;max-width:640px}
:root[data-theme="dark"] .exm-t.is-map{background:#102026}
:root[data-theme="dark"] .exm-t.is-map image{filter:brightness(.45) saturate(.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .exm-t.is-map{background:#102026}:root:not([data-theme="light"]) .exm-t.is-map image{filter:brightness(.45) saturate(.7)}}
@media (prefers-reduced-motion:reduce){.exm-t{transition:none}.exm-t.is-map .exm-pulse{animation:none}}
@media (max-width:900px){
  .exm,.exm-3,.exm-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(180px,auto)}
  .exm-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .exm-4 .exm-t:nth-child(2){grid-column:auto}
  .exm-3 .exm-t:first-child,.exm-4 .exm-t:first-child{grid-column:1/-1;grid-row:auto;min-height:0;aspect-ratio:16/9}
  .exm-3 .exm-t:first-child.is-earth,.exm-4 .exm-t:first-child.is-earth{aspect-ratio:auto;min-height:380px}
}
@media (max-width:560px){
  .exm{gap:10px}
  .exm,.exm-3,.exm-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(160px,auto)}
  .exm-4 .exm-t:nth-child(4){grid-column:1/-1}
  .exm-3 .exm-t:first-child.is-earth,.exm-4 .exm-t:first-child.is-earth{min-height:330px}
  .exm-cap{padding:40px 12px 11px}
  .exm-cap b{font-size:17px}
  .exm-cap span{font-size:14px}
  .exm-t:not(:first-child) .exm-cap span{display:none}
}

/* Touch targets of at least 44px (older readers, phones). */
.ex-hero .crumbs a{display:inline-flex;align-items:center;min-height:44px}
.far-form input{min-height:46px;font-size:17px}
.ts-list button{min-height:44px;min-width:44px}
.pt-slide input[type=range]{min-height:44px}