/* Jost (headings and interface) and Source Serif 4 (reading text), both SIL OFL, served from the site itself. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/jost-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/jost-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jost-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/jost-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(fonts/jost-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(fonts/jost-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/source-serif-4-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/source-serif-4-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/source-serif-4-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/source-serif-4-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/source-serif-4-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/source-serif-4-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/source-serif-4-latin-ext-600-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/source-serif-4-latin-600-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --sky: #000000;
  --sky-2: #0b0b0c;
  --sky-3: #141215;
  --glass: rgba(14, 12, 17, .86);
  --glass-hi: rgba(22, 18, 25, .9);
  --line: rgba(255, 255, 255, .09);
  --line-hi: rgba(255, 165, 82, .45);
  --pink: #ffa552;
  --rose: #ff8c3a;
  --star: #ffd6ad;
  --text: #f4f2ef;
  --body: #cbc4bc;
  --muted: #8f8880;
  --green: #8fdcb0;
  --amber: #f3c77a;
  --red: #ff8d8d;
  --sans: "Jost", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --radius: 6px;
  --head: rgba(0, 0, 0, .82);
  --foot: #000000;
  --glow-a: transparent;
  --glow-b: transparent;
  --shadow: 0 1px 0 rgba(255, 255, 255, .02);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --sky: #faf7f3;
  --sky-2: #ffffff;
  --sky-3: #f1e9df;
  --glass: rgba(255, 255, 255, .78);
  --glass-hi: #ffffff;
  --line: rgba(60, 40, 20, .12);
  --line-hi: rgba(194, 97, 15, .4);
  --pink: #c2610f;
  --rose: #f0a35e;
  --star: #9a4a08;
  --text: #1c140d;
  --body: #4a3d31;
  --muted: #84776a;
  --green: #1d8456;
  --amber: #a86d10;
  --red: #c0392b;
  --head: rgba(250, 247, 243, .88);
  --foot: rgba(255, 255, 255, .7);
  --glow-a: rgba(255, 186, 120, .32);
  --glow-b: rgba(240, 214, 180, .38);
  --shadow: 0 1px 2px rgba(60, 35, 10, .06), 0 8px 24px rgba(60, 35, 10, .05);
  color-scheme: light;
}
:root[data-theme="light"] .stars { display: none; }
/* The live sky: a canvas behind everything; the CSS stars stay as the fallback without script. */
.cosmos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.cosmos-on .stars { display: none; }
:root[data-theme="light"] .story, :root[data-theme="light"] .panel { box-shadow: var(--shadow); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--sky); scroll-padding-top: 120px; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60rem 40rem at 12% 0%, var(--glow-a), transparent 70%),
    radial-gradient(50rem 40rem at 95% 40%, var(--glow-b), transparent 70%),
    var(--sky);
  color: var(--text);
  font: 16px/1.55 var(--sans);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--pink); color: #1a0f05; padding: 8px 12px; border-radius: 10px; }
.skip:focus { left: 8px; }
.ic { flex: none; vertical-align: -3px; fill: currentColor; }
.small { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.credit { font: 10.5px/1 var(--mono); color: var(--muted); opacity: .75; margin: 12px 0 0; text-align: right; }
.stars { position: fixed; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; pointer-events: none; z-index: 0; animation: tw 6s ease-in-out infinite; }
@keyframes tw { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* masthead */
.masthead { position: sticky; top: 0; z-index: 20; background: var(--head); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bar-top, .topics, main, .foot-grid, .fine { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.bar-top { display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 400 20px/1 var(--sans); letter-spacing: -.4px; }
.brand b { font-weight: 800; color: var(--pink); }
.brand svg { width: 22px; height: 22px; fill: var(--star); filter: drop-shadow(0 0 6px rgba(255, 165, 82, .7)); }
.main-nav { display: flex; gap: 4px; }
.main-nav a { text-decoration: none; font: 600 14px/1 var(--sans); color: var(--body); padding: 10px 12px; border-radius: 10px; }
.main-nav a:hover { color: var(--text); background: var(--glass); }
.main-nav a[aria-current] { color: var(--text); background: var(--glass-hi); }
.tools-top { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.me, .lang { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; font: 700 12.5px/1 var(--sans); color: var(--body); }
.me:hover, .lang:hover { border-color: var(--line-hi); color: var(--text); }
.lang { color: #1a0f05; background: linear-gradient(90deg, #ffd6ad, var(--rose)); border-color: transparent; }
.streak-chip { display: inline-flex; align-items: center; gap: 3px; color: var(--amber); }
.pts { font: 700 12px/1 var(--mono); color: var(--pink); }
.theme { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--body); cursor: pointer; }
.theme:hover { border-color: var(--line-hi); color: var(--text); }
.theme .t-dark { display: none; }
:root[data-theme="light"] .theme .t-dark { display: inline; }
:root[data-theme="light"] .theme .t-light { display: none; }
.topics a.followed::before { content: "★ "; color: var(--amber); }

@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.topics { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; height: 42px; align-items: center; }
.topics::-webkit-scrollbar { display: none; }
.topics a { white-space: nowrap; text-decoration: none; font: 600 13px/1 var(--sans); color: var(--muted); padding: 8px 10px; border-radius: 8px; }
.topics a:hover { color: var(--text); }
.topics a[aria-current] { color: var(--pink); box-shadow: inset 0 -2px 0 var(--pink); border-radius: 0; }

main { position: relative; z-index: 1; padding-top: 8px; padding-bottom: 40px; width: 100%; flex: 1 0 auto; }
.hero { padding: 42px 0 28px; max-width: 800px; }
.hero.compact { padding: 34px 0 22px; }
.kicker { display: flex; align-items: center; gap: 6px; font: 12px/1 var(--mono); letter-spacing: 2.5px; color: var(--pink); margin: 0 0 14px; }
h1 { font: 800 clamp(32px, 5.4vw, 54px)/1.05 var(--sans); letter-spacing: -1.6px; margin: 0; }
h1 em { font: italic 400 1em/1.1 var(--serif); letter-spacing: -.5px; color: var(--pink); }
.lede { color: var(--body); font-size: 17.5px; margin: 16px 0 6px; max-width: 640px; }
.section-title { display: flex; align-items: center; gap: 8px; font: 800 13px/1 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--text); margin: 0 0 14px; }
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-hi), transparent); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.feed { display: grid; gap: 30px; min-width: 0; }
.side { display: grid; gap: 16px; align-content: start; }

/* home hero */
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 34px; align-items: end; max-width: none; padding-bottom: 30px; }
.home-hero h1 { font-size: clamp(32px, 4.6vw, 50px); }
.home-hero .small a { color: var(--pink); }
.caps { text-transform: uppercase; }
.greet { font: 600 15px/1.4 var(--sans); color: var(--star); margin: -4px 0 12px; }
.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: grid; gap: 3px; align-content: start; min-height: 112px; padding: 14px 15px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; transition: border-color .2s, transform .2s; }
.tile:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.tile .moon { width: 34px; height: 34px; }
.g-num { font: 800 28px/1.1 var(--sans); letter-spacing: -1px; color: var(--text); }
.g-icon { color: var(--pink); height: 34px; display: flex; align-items: center; }
.g-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kp-calm { color: var(--green); } .kp-mild { color: var(--amber); } .kp-warm, .kp-hot { color: var(--red); }
.g-label { font: 700 13.5px/1.25 var(--sans); margin-top: 6px; }
.g-sub { font: 11.5px/1.3 var(--mono); color: var(--muted); }
.g-sub .cd { display: block; color: var(--star); margin-top: 2px; }

/* reading progress and back to top */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 25; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--pink)); }
.to-top { position: fixed; right: 22px; bottom: 24px; z-index: 29; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-hi); background: var(--sky-2); color: var(--text); font-size: 18px; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.to-top:hover { border-color: var(--pink); color: var(--pink); }

/* digest */
.digest { position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px 24px; background: linear-gradient(135deg, rgba(255, 165, 82, .16), rgba(255, 120, 40, .06)); border: 1px solid var(--line-hi); }
.digest .kicker { margin-bottom: 10px; }
.digest p:not(.kicker):not(.small) { margin: 0; font: 17px/1.6 var(--serif); color: var(--text); }

/* stories */
.story { position: relative; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, background .2s, transform .2s; }
.story:hover { border-color: var(--line-hi); background: var(--glass-hi); transform: translateY(-2px); }
.story .pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(110deg, var(--sky-3) 30%, color-mix(in srgb, var(--sky-3) 70%, #fff 6%) 50%, var(--sky-3) 70%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.story .pic.ok { animation: none; }
.story .pic img { position: relative; }
.pic.ph { display: grid; place-items: center; animation: none; background:
  radial-gradient(circle at 30% 35%, color-mix(in srgb, var(--c) 55%, transparent), transparent 55%),
  radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%),
  linear-gradient(160deg, var(--sky-3), var(--sky)); }
.pic.ph svg { width: 26%; max-width: 84px; fill: color-mix(in srgb, var(--c) 60%, #fff); filter: drop-shadow(0 0 18px var(--c)); opacity: .9; }
.pic.ph span { position: absolute; left: 14px; bottom: 10px; font: 700 10.5px/1 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); opacity: .8; }
.story .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.story:hover .pic img { transform: scale(1.03); }
.story .body { padding: 15px 17px 15px; display: flex; flex-direction: column; flex: 1; }
.meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; font: 11.5px/1 var(--mono); color: var(--muted); }
.src { color: var(--pink); font-weight: 700; }
.dots { display: inline-flex; gap: 2px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--pink); box-shadow: 0 0 6px rgba(255, 165, 82, .7); }
.counts { display: inline-flex; gap: 9px; margin-left: auto; }
.plus { font: 700 10.5px/1 var(--mono); color: var(--star); background: rgba(255, 165, 82, .14); border-radius: 99px; padding: 3px 6px; margin-left: -4px; }
.counts span { display: inline-flex; align-items: center; gap: 3px; }
.story h3 { font: 700 17px/1.32 var(--sans); margin: 0 0 8px; letter-spacing: -.2px; }
.story h3 a { text-decoration: none; }
.story h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.story .pic, .story .tags a, .story .save { position: relative; z-index: 1; }
.story h3 a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.story.is-read h3 a { color: var(--body); }
.story.is-read .meta::after { content: "✓"; color: var(--green); }
.summary { color: var(--body); font-size: 14.5px; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.story.lead .summary { -webkit-line-clamp: 6; }
.story h3 a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story.lead h3 a { -webkit-line-clamp: 4; }
.foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--pink)); margin-right: 5px; vertical-align: 1px; }
.tag { white-space: nowrap; font: 11px/1 var(--mono); color: var(--body); border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; text-decoration: none; }
.tag:hover { border-color: var(--pink); color: var(--text); }
.save { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.save:hover { color: var(--text); border-color: var(--line-hi); }
.save[aria-pressed="true"] { color: #1a0f05; background: var(--pink); border-color: var(--pink); }
.save[aria-pressed="true"] path { fill: currentColor; }

.highlights .hl-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.story.lead .pic { aspect-ratio: 16 / 10; }
.story.lead .body { padding: 20px 22px; }
.story.lead h3 { font: 800 clamp(21px, 2.3vw, 27px)/1.2 var(--sans); letter-spacing: -.6px; }
.story.lead .summary { font-size: 15.5px; }
.hl-list { display: grid; gap: 10px; align-content: start; }
.story.brief { border-radius: 14px; }
.story.brief .body { padding: 13px 15px; }
.story.brief h3 { font-size: 15px; margin: 0; }
.story.brief .meta { margin-bottom: 6px; }

.filters { display: grid; gap: 12px; margin-bottom: 16px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); justify-self: start; }
.tabs button { display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px/1 var(--sans); color: var(--muted); background: transparent; border: 0; border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: #1a0f05; background: linear-gradient(90deg, #ffd6ad, var(--rose)); }
.chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; flex: none; }
.ask-chips { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
.chip { font: 600 13px/1 var(--sans); color: var(--body); background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.chip span { font: 11px/1 var(--mono); color: var(--muted); margin-left: 3px; }
.chip:hover { border-color: var(--line-hi); color: var(--text); }
.chip.on { background: rgba(255, 165, 82, .16); border-color: var(--pink); color: var(--text); }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; margin-top: 12px; }
input, select { font: 14px/1.2 var(--sans); color: var(--text); background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; min-width: 0; }
input[type=search], .name-form input { flex: 1; }
input::placeholder { color: var(--muted); }
select option { background: var(--sky-2); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.empty { color: var(--muted); font-style: italic; text-align: center; padding: 40px 0; }
.btn { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1 var(--sans); color: #1a0f05; background: linear-gradient(90deg, #ffd6ad, var(--rose)); border: 1px solid transparent; border-radius: 999px; padding: 11px 18px; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.06); }
.btn.ghost { color: var(--text); background: var(--glass); border-color: var(--line-hi); }
.btn.ghost:hover { background: var(--glass-hi); }
.btn.danger { color: var(--red); border-color: rgba(255, 141, 141, .4); }
.btn.file { position: relative; }
.more { display: block; margin: 22px auto 0; }

/* side panels */
.panel { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 19px; }
.panel h2 { font: 12px/1 var(--mono); letter-spacing: 2.5px; text-transform: uppercase; color: var(--pink); margin: 0 0 12px; }
.panel dl { margin: 0; display: grid; gap: 7px; }
.panel dl div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line); padding-top: 7px; }
.panel dt { color: var(--muted); font-size: 13px; }
.panel dd { margin: 0; font: 600 13px/1.4 var(--sans); text-align: right; }
.panel ul, .panel ol { list-style: none; margin: 0; padding: 0; }
.place { font: 11.5px/1.3 var(--mono); color: var(--muted); margin: -4px 0 12px; }
.moonrow { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.moon { flex: none; filter: drop-shadow(0 0 14px rgba(255, 165, 82, .25)); }
.phase { font: italic 22px/1.1 var(--serif); margin: 0; }

.you { background: linear-gradient(135deg, rgba(243, 199, 122, .1), rgba(255, 165, 82, .08)); }
.you-top { display: flex; gap: 12px; align-items: center; color: var(--amber); }
.you-streak { margin: 0; font: 15px/1.2 var(--sans); color: var(--text); }
.you-streak b { font-size: 24px; color: var(--amber); }
.you-read { margin: 3px 0 0; font: 12px/1.3 var(--mono); color: var(--muted); }
.bar { height: 6px; border-radius: 99px; background: var(--line); margin: 14px 0 6px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--pink)); border-radius: inherit; transition: width .6s; }
.you-next { font-size: 12.5px; color: var(--body); margin: 0 0 12px; }

.planets li { display: grid; grid-template-columns: 10px 64px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.planets li:first-child { border-top: 0; }
.planets i { width: 9px; height: 9px; border-radius: 50%; }
.planets span { color: var(--pink); font: 12px/1.2 var(--mono); }
.planets em { font: 10.5px/1 var(--mono); color: var(--muted); font-style: normal; }
.planets li.dim { opacity: .5; }
.planets li.dim span { color: var(--muted); }

.kp { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kp-num { font: 800 28px/1 var(--sans); margin: 0; letter-spacing: -1px; }
.kp-word { margin: 4px 0 0; font: 12px/1 var(--mono); color: var(--green); }
.kp.mild .kp-word { color: var(--amber); }
.kp.warm .kp-word, .kp.hot .kp-word { color: var(--red); }
.kp-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.kp-bars i { width: 9px; border-radius: 3px 3px 0 0; background: var(--green); opacity: .8; }
.kp-bars i.mild { background: var(--amber); }
.kp-bars i.warm, .kp-bars i.hot { background: var(--red); }

.launches li { padding: 9px 0; border-top: 1px dashed var(--line); }
.launches li:first-child { border-top: 0; padding-top: 0; }
.l-name { font: 700 13.5px/1.35 var(--sans); margin: 0; }
.launches .small { margin-top: 2px; }
.l-time { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; margin: 6px 0 0; font: 12px/1.3 var(--mono); color: var(--body); }
.l-time .cd { grid-column: 1; grid-row: 2; color: var(--star); }

.pill { font: 700 10.5px/1 var(--mono); padding: 4px 7px; border-radius: 99px; background: var(--line); color: var(--body); }
.pill.go { background: rgba(143, 220, 176, .18); color: var(--green); }

.rocks li { display: grid; gap: 1px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.rocks li:first-child { border-top: 0; padding-top: 0; }
.rocks span:not(.small) { color: var(--pink); font: 12px/1.3 var(--mono); }
.rocks .small { margin: 0; }

.iss .map { width: 100%; height: auto; display: block; margin-bottom: 10px; }
.map-bg { fill: var(--sky-3); stroke: var(--line); }
.map line { stroke: var(--line); stroke-width: .6; stroke-dasharray: 2 4; }
.map .land { fill: rgba(255, 165, 82, .13); stroke: rgba(255, 165, 82, .3); stroke-width: .6; stroke-linejoin: round; }
.map .home { fill: var(--pink); }
.map .halo { fill: var(--star); opacity: .18; }
.map .dot { fill: var(--star); }
[data-iss-dot] { transition: transform 1s linear; }

.term-word { font: italic 22px/1.2 var(--serif); margin: 0; }
.calendar li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); }
.calendar li:first-child { border-top: 0; padding-top: 0; }
.cal-date { flex: none; width: 46px; text-align: center; border: 1px solid var(--line-hi); border-radius: 12px; padding: 5px 0; font: 10.5px/1.1 var(--mono); color: var(--muted); text-transform: uppercase; }
.cal-date b { display: block; font: 800 18px/1.1 var(--sans); color: var(--text); }
.calendar div { display: grid; gap: 1px; }
.calendar strong { font-size: 14px; }
.calendar .small { margin: 0; }
.ev-kind { font: 10.5px/1.2 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--pink); }

.popular li { position: relative; margin: 0 0 6px; }
.popular a { position: relative; z-index: 1; display: flex; justify-content: space-between; padding: 7px 10px; text-decoration: none; font-size: 13.5px; }
.popular a:hover span { text-decoration: underline; }
.popular b { font: 12px/1.6 var(--mono); color: var(--pink); }
.popular i { position: absolute; inset: 0 auto 0 0; border-radius: 9px; background: rgba(255, 165, 82, .1); }
.sources li { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; border-top: 1px dashed var(--line); }
.sources li:first-child { border-top: 0; }
.sources a { text-decoration: none; }
.sources a:hover { color: var(--pink); }
.sources span { font: 12px/1.6 var(--mono); color: var(--muted); }

/* article */
.article { max-width: 760px; }
.crumbs { font: 12px/1 var(--mono); color: var(--muted); margin: 26px 0 16px; }
.crumbs a { text-decoration: none; color: var(--pink); }
.crumbs span { margin: 0 4px; }
.article h1 { font-size: clamp(28px, 4.2vw, 42px); letter-spacing: -1px; line-height: 1.12; margin: 10px 0 12px; }
.imp { display: inline-flex; gap: 6px; align-items: center; }
.original { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.original span:first-child { font-family: var(--mono); font-size: 11.5px; }
.hero-pic { margin: 0 0 20px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--sky-3); }
.hero-pic img { display: block; width: 100%; max-height: 480px; object-fit: cover; }
.hero-pic figcaption { font: 11px/1 var(--mono); color: var(--muted); padding: 9px 12px; }
.lead-text p { font: 19px/1.65 var(--serif); color: var(--text); margin: 0 0 16px; }
.why { border-left: 3px solid var(--pink); background: rgba(255, 165, 82, .08); border-radius: 0 14px 14px 0; padding: 14px 18px; margin: 4px 0 18px; }
.why h2 { display: flex; align-items: center; gap: 6px; font: 12px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pink); margin: 0 0 8px; }
.why h2 svg { fill: var(--pink); }
.why p { margin: 0; color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.actions .save { width: auto; height: auto; padding: 11px 18px; border-radius: 999px; }
.listen em { font: 11px/1 var(--mono); font-style: normal; color: var(--muted); }
.listen.on { border-color: var(--pink); color: var(--pink); }
.listen.on svg { animation: pulse 1s ease-in-out infinite; }
.covered { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; }
.covered h2 { display: flex; align-items: center; gap: 8px; font: 12px/1 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--pink); margin: 0 0 10px; }
.covered h2 span { color: var(--text); background: rgba(255, 165, 82, .16); border-radius: 99px; padding: 3px 7px; }
.covered ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.covered a { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/1 var(--sans); text-decoration: none; border: 1px solid var(--line); border-radius: 99px; padding: 7px 11px; }
.covered a:hover { border-color: var(--pink); color: var(--pink); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.share a, .share button { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1 var(--sans); color: var(--body); background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; text-decoration: none; cursor: pointer; }
.share a:hover, .share button:hover { color: var(--text); border-color: var(--line-hi); }
.comments { margin-top: 28px; }
.comments-container { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.comments-guest-prompt { border: 1px dashed var(--line-hi); border-radius: var(--radius); padding: 20px; text-align: center; }
.comments-guest-prompt p { margin: 0 0 12px; }
.comment-form { display: flex; flex-direction: column; gap: 10px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.comment-form-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.comment-input { width: 100%; border: 1px solid var(--line-hi); border-radius: var(--radius-sm, 6px); background: rgba(255, 255, 255, 0.03); color: inherit; padding: 10px; font-family: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; }
.comment-input:focus { outline: none; border-color: var(--accent); }
.comment-form-actions { display: flex; justify-content: flex-end; }
.comments-list { display: flex; flex-direction: column; gap: 12px; }
.comment-item { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.comment-head time { color: var(--muted); font-size: 12px; margin-left: auto; }
.comment-del { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
.comment-del:hover { color: #ef4444; }
.comment-body { font-size: 14px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.empty-comments { color: var(--muted); text-align: center; padding: 16px 0; }
.comments-off { border: 1px dashed var(--line-hi); border-radius: var(--radius); padding: 22px; text-align: center; }
.comments-off p { margin: 0; }
.comments-note { margin: 0 0 12px; }
.related { margin-top: 8px; }
.note { margin: -6px 0 16px; }

/* Rich article content */
.article-content { margin: 24px 0 20px; font-size: 15.5px; line-height: 1.8; color: var(--body); }
.article-content h3 { font-size: 18px; font-weight: 700; margin: 30px 0 12px; color: var(--text); letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.article-content h3::before { content: ""; display: inline-block; width: 4px; height: 16px; background: var(--accent); border-radius: 2px; }
.article-content p { margin: 0 0 16px; word-break: break-word; }

/* topic page */
.topic-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; }
.follow[aria-pressed="true"] { color: #1a0f05; background: linear-gradient(90deg, #ffd6ad, var(--rose)); border-color: transparent; }

/* assistant */
.assistant { max-width: 820px; display: grid; gap: 14px; }
.ask { display: flex; gap: 8px; }
.ask input { flex: 1; font-size: 16px; padding: 14px 16px; border-radius: 14px; }
.ask .btn { padding: 0 22px; }
.thread { display: grid; gap: 12px; margin-top: 6px; }
.msg { max-width: 92%; border-radius: 16px; padding: 12px 16px; border: 1px solid var(--line); }
.msg p { margin: 0 0 6px; }
.msg p:last-child { margin-bottom: 0; }
.msg.me { justify-self: end; background: linear-gradient(90deg, #ffd6ad, var(--rose)); color: #1a0f05; border-color: transparent; font-weight: 600; }
.msg.bot { justify-self: start; background: var(--glass); }
.fact { font: 17px/1.55 var(--serif); }
.answers { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.answers li::marker { color: var(--pink); font: 700 13px var(--mono); }
.answers a { font-weight: 700; text-decoration: none; }
.answers a:hover { color: var(--pink); }
.answers p { margin: 3px 0 2px; color: var(--body); font-size: 14px; }

/* about */
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.about-grid .wide { grid-column: 1 / -1; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps b { font: 800 30px/1 var(--sans); color: var(--pink); }
.steps h3, .rules h3 { margin: 8px 0 4px; font-size: 17px; }
.steps p, .rules p { margin: 0; color: var(--body); font-size: 14px; }
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rules li { display: flex; gap: 12px; }
.rules li > svg { color: var(--green); margin-top: 8px; }
.rules h3 { margin-top: 4px; }
.panel h2.gap { margin-top: 20px; }

/* sky page */
.sky-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 30px; align-items: start; }

/* profile */
.profile-hero { display: flex; align-items: center; gap: 20px; max-width: none; }
.avatar { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font: 800 30px/1 var(--sans); color: #1a0f05; background: linear-gradient(135deg, #ffd6ad, var(--rose)); box-shadow: 0 0 30px rgba(255, 165, 82, .35); }
.profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.profile .wide { grid-column: 1 / -1; }
.name-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.stat b { display: block; font: 800 26px/1.1 var(--sans); letter-spacing: -.5px; }
.stat span { font: 11.5px/1.3 var(--mono); color: var(--muted); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge { border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; }
.badge .em { font-size: 28px; line-height: 1; display: block; margin-bottom: 8px; filter: grayscale(1); opacity: .35; }
.badge b { display: block; font-size: 13.5px; }
.badge span { font-size: 11.5px; color: var(--muted); }
.badge.on { border-color: var(--line-hi); background: rgba(255, 165, 82, .08); }
.badge.on .em { filter: none; opacity: 1; }
.saved-list { display: grid; gap: 8px; }
.saved-item { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.saved-item img { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--sky-3); flex: none; }
.saved-item a { text-decoration: none; font-weight: 600; font-size: 14px; }
.saved-item a:hover { color: var(--pink); }
.saved-item .small { margin: 2px 0 0; }
.saved-item .save { margin-left: auto; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; background: var(--sky-2); border: 1px solid var(--line-hi); color: var(--text); padding: 12px 18px; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); font-size: 14px; max-width: calc(100vw - 32px); }

.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; grid-template-columns: repeat(4, 1fr); background: var(--head); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.tabbar a { display: grid; justify-items: center; gap: 3px; text-decoration: none; font: 600 11px/1 var(--sans); color: var(--muted); padding: 5px 0; }
.tabbar a[aria-current] { color: var(--pink); }

footer { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 20px; padding: 34px 0 30px; background: var(--foot); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1.6fr 1fr; gap: 30px; }
.foot-grid p { color: var(--body); font-size: 14px; }
.foot-grid h3 { font: 12px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pink); margin: 6px 0 12px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; columns: 2; font-size: 13.5px; }
.foot-grid div:last-child ul { columns: 1; }
.foot-grid li { margin-bottom: 6px; }
.foot-grid ul a { text-decoration: none; color: var(--body); }
.foot-grid ul a:hover { color: var(--pink); }
.fine { font: 11.5px/1.6 var(--mono); color: var(--muted); margin-top: 18px; }
.fine a { color: var(--pink); }

@media (max-width: 1060px) {
  .home-hero { grid-template-columns: 1fr; gap: 20px; }
  .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .layout { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 720px) {
  .bar-top, .topics, main, .foot-grid, .fine { padding-left: 16px; padding-right: 16px; }
  .bar-top { gap: 12px; }
  .main-nav a { padding: 9px 8px; }
  .highlights .hl-grid { grid-template-columns: 1fr; }
  .hero { padding: 28px 0 18px; }
  .row:not(.wrap) { flex-direction: column; align-items: stretch; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; }
  .profile, .about-grid, .steps, .rules { grid-template-columns: 1fr; }
  .topic-hero { flex-direction: column; align-items: flex-start; }
  .main-nav { display: none; }
  .glance { grid-template-columns: 1fr 1fr; }
  .tile { min-height: 96px; }
  .to-top { bottom: 80px; right: 14px; }
  .tabbar { display: grid; }
  body { padding-bottom: 64px; }
  .toast { bottom: 80px; }
  .foot-grid { grid-template-columns: 1fr; gap: 18px; }
  .lead-text p { font-size: 17.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .stars, .listen.on svg, .story .pic { animation: none; }
  .story, .story .pic img, .bar i, [data-iss-dot] { transition: none; }
  .story:hover { transform: none; }
}

/* city picker */
.linkish { font: inherit; color: var(--pink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.city-dialog { border: 1px solid var(--line-hi); border-radius: 18px; background: var(--sky-2); color: var(--text); padding: 22px; width: min(420px, calc(100vw - 32px)); }
.city-dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.city-dialog h2 { font: 800 20px/1.2 var(--sans); margin: 0 0 6px; }
.city-dialog select { width: 100%; margin: 14px 0; font-size: 16px; }
.city-dialog .row { justify-content: flex-end; }

/* calendar links */
.ics { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border-radius: 9px; border: 1px solid var(--line); color: var(--muted); }
.ics:hover { color: var(--pink); border-color: var(--line-hi); }
.calendar li { align-items: center; }
.l-side { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 8px; }
.l-side .ics { width: 28px; height: 28px; margin: 0; }
.subscribe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.subscribe a { color: var(--pink); }

/* star chart */
.sky-cols { columns: 3 320px; column-gap: 16px; margin: 16px 0 30px; }
.sky-cols > .panel { break-inside: avoid; margin-bottom: 16px; }
.starmap { display: grid; justify-items: center; }
.starmap h2 { justify-self: start; }
.map-tools { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; font-size: 13px; color: var(--body); }
.map-tools label { display: inline-flex; align-items: center; gap: 8px; }
.map-tools select { padding: 7px 10px; }
.map-tools input[type=range] { accent-color: var(--pink); width: 160px; }
.map-tools output { font: 12px/1 var(--mono); color: var(--star); min-width: 92px; }
.map-tools .check input { accent-color: var(--pink); }
.chart-wrap { position: relative; }
.chart-wrap canvas { display: block; touch-action: manipulation; cursor: crosshair; }
.chart-tip { position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 2px; background: var(--sky-2); border: 1px solid var(--line-hi); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; white-space: nowrap; }
.chart-tip span { font: 11px/1.3 var(--mono); color: var(--muted); }
.starmap > .small { max-width: 720px; text-align: center; }

/* question of the day */
.quiz .q { font: 700 15.5px/1.4 var(--sans); margin: 0 0 12px; }
.opts { display: grid; gap: 7px; }
.opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; font: 13.5px/1.4 var(--sans); color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; cursor: pointer; }
.opt b { font: 700 11px/1.8 var(--mono); color: var(--pink); }
.opt:hover:not(:disabled) { border-color: var(--line-hi); background: var(--glass-hi); }
.opt:disabled { cursor: default; opacity: .65; }
.opt.right { opacity: 1; border-color: var(--green); background: rgba(143, 220, 176, .1); }
.opt.wrong { opacity: 1; border-color: var(--red); background: rgba(255, 141, 141, .08); }
.quiz-result { margin-top: 12px; }
.verdict { font-weight: 700; margin: 0; }
.quiz-result .read { display: inline-block; margin-top: 6px; }

/* gallery */
.gallery { columns: 4 260px; column-gap: 14px; margin-bottom: 30px; }
.shot { break-inside: avoid; margin: 0 0 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--glass); }
.shot img { display: block; width: 100%; height: auto; transition: transform .5s; }
.shot a { display: block; overflow: hidden; }
.shot:hover img { transform: scale(1.04); }
.shot figcaption { display: grid; gap: 3px; padding: 9px 12px 11px; font-size: 13px; color: var(--body); }
.shot figcaption span { font: 700 10.5px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--pink); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .92); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: calc(100vw - 120px); max-height: calc(100vh - 140px); border-radius: 10px; }
.lb-cap { position: fixed; left: 0; right: 0; bottom: 18px; display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0 16px; color: #f4f2ef; }
.lb-cap p { margin: 0; font-size: 14px; }
.lb-close, .lb-nav { position: fixed; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .5); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lb-close { top: 16px; right: 16px; }
.lb-nav.prev { left: 16px; top: 50%; }
.lb-nav.next { right: 16px; top: 50%; }

/* weekly recaps, archive, papers */
.weeks, .papers { display: grid; gap: 18px; max-width: 860px; margin-bottom: 30px; }
.week, .paper { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.week h2 { font: 800 24px/1.2 var(--sans); letter-spacing: -.5px; margin: 0 0 12px; }
.week > p:not(.kicker) { font: 17px/1.65 var(--serif); color: var(--text); margin: 0 0 12px; }
.week-stories { display: grid; gap: 8px; margin-top: 14px; }
.archive { display: grid; gap: 10px; max-width: 900px; margin-bottom: 30px; }
.day { background: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px; }
.day summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.day summary::-webkit-details-marker { display: none; }
.day summary::after { content: "+"; font: 700 18px/1 var(--mono); color: var(--pink); }
.day[open] summary::after { content: "−"; }
.day summary span { margin-left: auto; font: 12px/1 var(--mono); color: var(--muted); }
.day-list { display: grid; gap: 8px; padding: 4px 0 14px; }
.paper h3 { font: 700 19px/1.3 var(--sans); margin: 4px 0 8px; }
.paper p { color: var(--body); margin: 0 0 8px; }
.paper .orig { font-size: 12.5px; color: var(--muted); }
.archive-link { text-align: center; margin: 18px 0 0; }
.archive-link a { color: var(--pink); font-weight: 600; text-decoration: none; }
.archive-link a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .lightbox img { max-width: calc(100vw - 24px); }
  .lb-nav { top: auto !important; bottom: 70px; }
  .map-tools input[type=range] { width: 120px; }
}

/* ---------------------------------------------------------------- form controls in the site's own style */
::selection { background: rgba(255, 165, 82, .35); color: var(--text); }
html { scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) var(--sky); }
button, input, select, textarea { font-family: inherit; }
input:focus, select:focus { outline: none; border-color: var(--line-hi); box-shadow: 0 0 0 3px rgba(255, 165, 82, .15); }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--sky-2) inset; -webkit-text-fill-color: var(--text); }
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background: var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffa552' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 11px 8px;
}
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none; width: 14px; height: 14px; cursor: pointer; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23ffa552' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; min-width: 0; margin: 0; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line-hi); border-radius: 5px; background: transparent; display: inline-grid; place-content: center;
}
input[type=checkbox]::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .12s; background: var(--pink); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
input[type=checkbox]:checked { border-color: var(--pink); background: rgba(255, 165, 82, .1); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=range] {
  -webkit-appearance: none; appearance: none; height: 4px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--pink) var(--fill, 33%), var(--line) var(--fill, 33%));
}
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--star); border: 2px solid var(--pink); box-shadow: 0 0 0 4px rgba(255, 165, 82, .15); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--star); border: 2px solid var(--pink); box-shadow: 0 0 0 4px rgba(255, 165, 82, .15); }
input[type=range]:focus { box-shadow: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(255, 165, 82, .35); }

/* badges, toasts and thumbnails drawn with the line icons */
.badge .em { display: grid; place-items: center; height: 34px; margin-bottom: 8px; color: var(--muted); opacity: .45; filter: none; font-size: inherit; }
.badge.on .em { color: var(--pink); opacity: 1; }
.toast { display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); line-height: 1.45; }
.toast .ic { flex: none; color: var(--pink); }
.thumb-ph { width: 72px; height: 48px; flex: none; border-radius: 8px; background: radial-gradient(circle at 35% 40%, rgba(255, 165, 82, .35), transparent 60%), var(--sky-3); }

/* picture of the day and raw arXiv papers */
.apod { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 0; margin-bottom: 22px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.apod-pic { display: block; height: 100%; background: var(--sky-3); }
.apod-pic img { display: block; width: 100%; height: 100%; max-height: 560px; object-fit: cover; }
.apod-text { padding: 26px 28px; }
.apod-text h2 { font: 800 clamp(22px, 2.4vw, 28px)/1.2 var(--sans); letter-spacing: -.5px; margin: 0 0 12px; }
.apod-text p:not(.kicker):not(.small) { color: var(--body); font-size: 14.5px; margin: 0 0 10px; }
.paper.raw h3 { font-size: 17px; }
.paper .abstract { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
.notes-pending { margin: -4px 0 14px; }
.papers + .section-title { margin-top: 28px; }
.from-turkey { margin-bottom: 30px; }
.from-turkey .archive-link { margin-top: 12px; }
@media (max-width: 860px) {
  .apod { grid-template-columns: 1fr; }
  .apod-text { padding: 18px; }
}
.papers-page { max-width: 860px; }

/* ================================================================ editorial layer
   The site's own voice, after hfatih.com: black or paper, hairline rules instead of boxes, thin
   geometric headings, serif reading text, mono labels, and orange used sparingly. */

body { font: 400 16px/1.6 var(--sans); font-synthesis: none; }
:root[data-theme="light"] .story, :root[data-theme="light"] .panel { box-shadow: none; }

/* masthead */
.masthead { background: color-mix(in srgb, var(--sky) 88%, transparent); }
.brand { font: 400 21px/1 var(--sans); letter-spacing: -.2px; }
.brand b { font-weight: 500; }
.brand svg { filter: none; }
.main-nav { gap: 2px; }
.main-nav a { font: 400 15px/1 var(--sans); padding: 10px 12px; border-radius: 0; color: var(--body); }
.main-nav a:hover { background: none; color: var(--text); }
.main-nav a[aria-current] { background: none; color: var(--text); box-shadow: inset 0 -1px 0 var(--pink); }
.me, .lang, .theme { border-radius: 4px; background: transparent; border-color: var(--line); height: 34px; }
.theme { width: 34px; }
.lang { color: var(--text); background: transparent; border-color: var(--line); font: 500 12px/1 var(--mono); letter-spacing: 1px; }
.lang:hover, .me:hover, .theme:hover { border-color: var(--line-hi); color: var(--pink); }
.topics a { font: 400 14px/1 var(--sans); color: var(--muted); }

/* labels: a short rule, then mono capitals */
.kicker::before, .section-title::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; flex: none; }
.kicker { font: 500 11.5px/1 var(--mono); letter-spacing: 2.6px; text-transform: uppercase; }
.section-title { font: 500 11.5px/1 var(--mono); letter-spacing: 2.6px; color: var(--muted); }
.section-title::after { background: var(--line); }
.panel h2 { font: 500 11px/1 var(--mono); letter-spacing: 2.6px; color: var(--muted); }
.panel h2::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--pink); }

/* headings: thin and large */
h1 { font: 300 clamp(38px, 5.6vw, 64px)/1.04 var(--sans); letter-spacing: -1px; }
h1 em { font: inherit; font-style: normal; color: var(--pink); letter-spacing: inherit; }
.home-hero h1 { font-size: clamp(38px, 5vw, 60px); }
.article h1 { font: 400 clamp(30px, 4vw, 46px)/1.12 var(--sans); letter-spacing: -.6px; }
.lede { font: 400 18px/1.6 var(--serif); color: var(--body); }
.greet { font: 400 15px/1.4 var(--sans); color: var(--body); }

/* the day at a glance: a ruled table instead of tiles */
.glance { gap: 0; border-top: 1px solid var(--line); }
.tile { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; min-height: 0; padding: 16px 4px 16px 0; }
.tile:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 16px; }
.tile:nth-child(even) { padding-left: 18px; }
.tile:hover { transform: none; background: none; }
.tile:hover .g-label { color: var(--pink); }
.g-num { font: 300 34px/1 var(--sans); letter-spacing: -1px; }
.g-label { font: 500 14px/1.3 var(--sans); }

/* stories: no boxes, just pictures, words and rules */
.story { background: none; border: 0; border-radius: 0; overflow: visible; }
.story:hover { background: none; transform: none; border: 0; }
.story .pic { border-radius: 3px; }
.story .body { padding: 14px 0 0; }
.story h3 { font: 500 19px/1.3 var(--sans); letter-spacing: -.1px; }
.story h3 a:hover, .story:hover h3 a { color: var(--pink); text-decoration: none; }
.summary { font: 400 15px/1.6 var(--serif); }
.grid { gap: 36px 28px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid > .story { border-top: 1px solid var(--line); padding-top: 18px; }
.story.lead .body { padding: 18px 0 0; }
.story.lead h3 { font: 400 clamp(26px, 2.8vw, 34px)/1.18 var(--sans); letter-spacing: -.4px; }
.story.lead .summary { font-size: 17px; }
.hl-list { gap: 0; border-top: 1px solid var(--line); }
.story.brief { border-bottom: 1px solid var(--line); border-radius: 0; }
.story.brief .body { padding: 14px 0; }
.story.brief h3 { font: 500 16px/1.35 var(--sans); }
.meta { font: 400 11.5px/1 var(--mono); }
.src { font-weight: 500; }
.dots i.on { box-shadow: none; }
.plus { background: none; border: 1px solid var(--line-hi); border-radius: 3px; padding: 2px 4px; }
.tag { border: 0; padding: 3px 0; margin-right: 10px; font: 400 11px/1 var(--mono); color: var(--muted); }
.tag:hover { color: var(--pink); }
.save { border: 0; width: 30px; height: 30px; border-radius: 4px; }
.save[aria-pressed="true"] { background: none; color: var(--pink); }

/* filters: text tabs with an underline */
.tabs { border: 0; background: none; padding: 0; gap: 22px; border-bottom: 1px solid var(--line); justify-self: stretch; }
.tabs button { font: 400 15px/1 var(--sans); padding: 10px 0; border-radius: 0; color: var(--muted); }
.tabs button.on { background: none; color: var(--text); box-shadow: inset 0 -1px 0 var(--pink); }
.chips { gap: 18px; }
.chip { background: none; border: 0; border-radius: 0; padding: 6px 0; font: 400 14px/1 var(--sans); color: var(--muted); }
.chip:hover { color: var(--text); border: 0; }
.chip.on { background: none; color: var(--pink); box-shadow: inset 0 -1px 0 var(--pink); }
input, select { border-radius: 4px; background-color: transparent; }
select { background-color: transparent; }

/* buttons: one quiet outline, one solid accent, no gradients */
.btn { font: 500 14px/1 var(--sans); background: var(--pink); color: #160c03; border-radius: 4px; padding: 11px 16px; }
.btn:hover { filter: none; background: var(--star); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-hi); }
.btn.ghost:hover { background: transparent; border-color: var(--pink); color: var(--pink); }

/* panels: a rule and a label instead of a card */
.panel { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0 6px; }
.side { gap: 26px; }
.you { background: none; }
.bar { height: 2px; }
.digest { background: none; border: 0; border-left: 2px solid var(--pink); border-radius: 0; padding: 4px 0 4px 22px; }
.digest p:not(.kicker):not(.small) { font: 400 19px/1.65 var(--serif); }
.why { background: none; border-radius: 0; }
.covered, .comments-off { border-radius: 4px; }
.lead-text p { font: 400 20px/1.7 var(--serif); }
.week, .paper { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0; }
.week > p:not(.kicker), .paper p { font-family: var(--serif); }
.week h2, .paper h3 { font-weight: 400; }
.day { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 4px 0; }
.stat, .badge, .opt, .saved-item, .covered a, .share a, .share button, .cal-date { border-radius: 4px; }
.stat b, .badge b { font-weight: 400; }
.stat b { font: 300 30px/1.1 var(--sans); }
.apod, .shot { border-radius: 4px; }
.apod-text h2 { font-weight: 400; }
.term-word, .phase { font-family: var(--serif); }
.kp-num { font-weight: 300; }


/* the streak on the profile: the run on the left, the last seven days on the right */
.you-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 36px; align-items: center; }
.you-grid .you-week { margin: 0; }
.you-next { margin-bottom: 0; }
@media (max-width: 720px) { .you-grid { grid-template-columns: 1fr; gap: 18px; } }

/* the streak's last seven days: beads on a thread, joined where the run is unbroken */
.you-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 16px 0 2px; }
.you-week::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 5px; height: 1px; background: var(--line); }
.you-week li { position: relative; display: grid; justify-items: center; gap: 8px; }
.you-week li.on + li.on::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 1px; background: var(--pink); }
.you-week i { position: relative; z-index: 1; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--line-hi); background: var(--sky); }
.you-week li.on i { background: var(--pink); border-color: var(--pink); }
.you-week li.now i { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 18%, transparent); }
.you-week li.now.on i { box-shadow: 0 0 10px var(--pink); }
.you-week span { font: 400 10.5px/1 var(--mono); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.you-week li.now span { color: var(--pink); }

/* footer */
.foot-grid h3 { font: 500 11px/1 var(--mono); letter-spacing: 2.6px; }
.foot-tech { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.foot-tech-label { display: block; font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted); margin-bottom: 10px; }
.foot-tech-list { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-tech-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 500 12px/1.2 var(--sans); opacity: 0.75; transition: opacity .2s, color .2s; }
.foot-tech-item:hover { opacity: 1; color: var(--text); }
.foot-tech-item svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.foot-dev { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.foot-dev-label { font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.dev-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: rgba(255, 159, 67, 0.1); border: 1px solid rgba(255, 159, 67, 0.28); color: #ff9f43; font: 600 12.5px/1 var(--sans); text-decoration: none; transition: all .2s ease; }
.dev-link:hover { background: rgba(255, 159, 67, 0.22); border-color: #ff9f43; color: #ffb066; text-decoration: none; box-shadow: 0 0 14px rgba(255, 159, 67, .38); transform: translateY(-1px); }
.dev-link svg { width: 13.5px; height: 13.5px; fill: currentColor; }
.dev-link-inline { color: #ff9f43; font-weight: 500; text-decoration: none; transition: color .15s; }
.dev-link-inline:hover { color: #ffb066; text-decoration: underline; }
.to-top { border-radius: 4px; box-shadow: none; }
.toast { border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.tabbar a { font: 400 11px/1 var(--sans); }

/* tonight's guide and the moon calendar */
.guide.wide { margin-top: 26px; }
.guide-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.guide.wide .guide-list { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); column-gap: 32px; }
.guide-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.guide-list b { display: block; font: 500 15px/1.3 var(--sans); }
.g-kind { font: 400 11.5px/1.3 var(--mono); color: var(--muted); }
.g-when { text-align: right; font: 400 12.5px/1.35 var(--mono); }
.g-when span { display: block; color: var(--text); }
.g-when em { font-style: normal; color: var(--pink); }
.g-tool { grid-column: 1 / -1; font: 400 11px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.g-tool[data-tool="eye"] { color: var(--green); }
.g-tool[data-tool="binoculars"] { color: var(--amber); }
.moon-cal { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.mc { display: grid; justify-items: center; gap: 3px; padding: 6px 0 5px; border: 1px solid transparent; border-radius: 4px; }
.mc span { font: 500 12px/1 var(--mono); color: var(--text); }
.mc em { font: 400 9.5px/1 var(--mono); font-style: normal; color: var(--muted); text-transform: uppercase; }
.mc .moon { filter: none; }
.mc.full { border-color: var(--pink); }
.mc.new { border: 1px dashed var(--line-hi); }

/* spacecraft: a map from above, then one ruled entry per craft */
.orrery { margin: 28px 0 8px; display: grid; justify-items: center; gap: 10px; }
.orrery svg { width: min(100%, 640px); height: auto; overflow: visible; font: 400 11px var(--mono); }
.orrery figcaption { max-width: 640px; font-size: 13px; color: var(--muted); text-align: center; }
.o-ring { fill: none; stroke: var(--line); stroke-dasharray: 2 4; }
.o-ring-label { fill: var(--muted); font-size: 9.5px; letter-spacing: .5px; }
.o-orbit { fill: none; stroke: var(--line); }
.o-sun { fill: #ffb347; filter: drop-shadow(0 0 8px rgba(255, 170, 70, .7)); }
.o-planet { stroke: var(--sky); stroke-width: 1; }
.o-label { fill: var(--muted); }
.o-craft { fill: var(--pink); }
.o-craft-label { fill: var(--text); }
.craft-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 36px; margin-top: 26px; }
.craft { border-top: 1px solid var(--line); padding: 20px 0 22px; }
.craft header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.craft h2 { margin: 0; font: 400 24px/1.15 var(--sans); letter-spacing: -.3px; }
.craft header .small { margin: 0; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.craft > p { margin: 8px 0 14px; font: 400 15px/1.55 var(--serif); color: var(--body); }
.craft dl { margin: 0; display: grid; gap: 0; }
.craft dl div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.craft dt { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.craft dd { margin: 0; font: 400 13px/1.4 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.craft dd b { font-weight: 400; color: var(--text); }
.craft dd span { display: block; color: var(--muted); font-size: 12px; }
.craft [data-c-au] { color: var(--pink); }
.craft-news { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; }
.craft-news li { padding: 4px 0; }
.craft-news li::before { content: "— "; color: var(--muted); }
.source-note { margin-top: 26px; }

/* side panels: the farthest craft and the week in history */
.far { list-style: none; margin: 4px 0 0; padding: 0; }
.far li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.far b { font: 500 15px/1.3 var(--sans); }
.far span { font: 400 13px/1.3 var(--mono); color: var(--pink); text-align: right; font-variant-numeric: tabular-nums; }
.far em { grid-column: 1 / -1; font: 400 11.5px/1 var(--mono); font-style: normal; color: var(--muted); }
.history { list-style: none; margin: 4px 0 0; padding: 0; }
.history li { display: grid; grid-template-columns: 4.6em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.h-date { font: 400 12px/1.35 var(--mono); color: var(--text); }
.h-date em { display: block; font-style: normal; color: var(--muted); }
.history li.today .h-date { color: var(--pink); }
.history p { margin: 0; font: 400 14.5px/1.5 var(--serif); color: var(--body); }
.history p .small { display: block; margin-top: 2px; font: 400 11.5px/1 var(--mono); color: var(--muted); }

/* glossary words inside a story */
dfn.gl { font-style: normal; text-decoration: underline dotted var(--pink); text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: help; }
dfn.gl:hover, dfn.gl:focus-visible { color: var(--pink); outline: none; }
.gl-tip { position: absolute; z-index: 60; width: min(320px, calc(100vw - 24px)); padding: 12px 14px; background: var(--sky-2); color: var(--body); border: 1px solid var(--line-hi); border-radius: 4px;
  font: 400 14px/1.5 var(--serif); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.gl-tip b { display: block; margin-bottom: 4px; font: 500 11px/1 var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--pink); }

/* night vision: the whole page in dim red, so the eyes stay used to the dark */
svg.fx-defs { position: absolute; width: 0; height: 0; }
:root[data-red] { filter: url(#red-light) brightness(.8); }
.red-btn { margin-top: 14px; }
.map-tools .red-btn { margin: 0 0 0 auto; padding: 8px 12px; }
.red-btn[aria-pressed="true"] { border-color: var(--pink); color: var(--pink); }

/* tonight, hour by hour */
.timeline.wide { margin-top: 26px; }
.tl-grid { position: relative; display: grid; gap: 0; margin-top: 6px; --name: 132px; }
.tl-sky { position: absolute; top: 22px; bottom: 0; left: var(--name); right: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--sky-3) 0, transparent var(--a), transparent var(--b), var(--sky-3) 100%); opacity: .9; }
.tl-hours { position: relative; height: 22px; margin-left: var(--name); border-bottom: 1px solid var(--line); }
.tl-hours span { position: absolute; top: 2px; transform: translateX(-50%); font: 400 11px/1 var(--mono); color: var(--muted); }
.tl-hours span::after { content: ""; position: absolute; left: 50%; top: 16px; width: 1px; height: 6px; background: var(--line-hi); }
.tl-row { position: relative; display: grid; grid-template-columns: var(--name) 1fr; align-items: center; min-height: 40px; border-bottom: 1px solid var(--line); }
.tl-name b { display: block; font: 500 14.5px/1.2 var(--sans); }
.tl-name span { font: 400 11.5px/1.2 var(--mono); color: var(--muted); white-space: nowrap; }
.tl-track { position: relative; height: 10px; }
.tl-track i { position: absolute; top: 0; height: 10px; border-radius: 2px; }
.tl-track i.low { opacity: .35; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--pink); z-index: 2; pointer-events: none; }
.tl-now span { position: absolute; top: -2px; left: 4px; font: 500 10.5px/1 var(--mono); color: var(--pink); text-transform: uppercase; letter-spacing: 1px; background: var(--sky); padding: 2px 3px; }
.tl-key i { display: inline-block; width: 18px; height: 8px; margin: 0 6px 0 12px; vertical-align: middle; border-radius: 2px; }
.tl-key i:first-child { margin-left: 0; }
.k-dark { background: var(--sky); border: 1px solid var(--line-hi); }
.k-twi { background: var(--sky-3); }
.k-low { background: var(--pink); opacity: .35; }

/* the Sun right now */
.sdo { margin: 4px 0 10px; }
.sdo img { display: block; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: #000; object-fit: cover; }
.sdo-tabs { display: flex; gap: 18px; justify-content: center; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.sdo-tabs button { background: none; border: 0; padding: 8px 0; font: 400 13px/1.2 var(--sans); color: var(--muted); cursor: pointer; text-align: center; }
.sdo-tabs button span { display: block; font: 400 10.5px/1.3 var(--mono); }
.sdo-tabs button.on { color: var(--text); box-shadow: inset 0 -1px 0 var(--pink); }
.flare { font: 500 13px/1 var(--mono); }
.flare.f-X { color: var(--red); }
.flare.f-M { color: var(--pink); }
.sun_now dd .small { color: var(--muted); }

/* exoplanets */
.exo-count { margin: 4px 0 12px; font: 400 14px/1.3 var(--sans); color: var(--muted); }
.exo-count b { display: block; font: 300 40px/1 var(--sans); letter-spacing: -1px; color: var(--text); }
.exo-methods { list-style: none; margin: 0 0 22px; padding: 0; }
.exo-methods li { position: relative; display: flex; justify-content: space-between; padding: 6px 0 9px; font-size: 13.5px; }
.exo-methods b { font: 400 12.5px/1.4 var(--mono); }
.exo-methods i { position: absolute; left: 0; bottom: 2px; height: 2px; background: var(--pink); border-radius: 1px; }
.exo-h { margin: 0 0 4px; font: 500 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.exo-new { list-style: none; margin: 0; padding: 0; }
.exo-new li { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.exo-new b { font: 500 15px/1.25 var(--sans); }
.exo-new span { font: 400 12px/1.35 var(--mono); color: var(--body); }
.exo-new em { font: 400 11.5px/1 var(--mono); font-style: normal; color: var(--muted); }

@media (max-width: 640px) {
  .tl-grid { --name: 96px; }
  .tl-name b { font-size: 13.5px; }
  .tl-hours span:nth-child(even) { display: none; }
}

/* text size, from settings */
:root[data-font="s"] .lead-text p { font-size: 18px; }
:root[data-font="s"] .summary, :root[data-font="s"] .legal p, :root[data-font="s"] .legal li { font-size: 14px; }
:root[data-font="l"] .lead-text p { font-size: 23px; }
:root[data-font="l"] .summary, :root[data-font="l"] .history p, :root[data-font="l"] .craft > p { font-size: 17px; }
:root[data-font="l"] .story h3 { font-size: 21px; }
:root[data-font="l"] .legal p, :root[data-font="l"] .legal li { font-size: 18.5px; }
:root[data-font="xl"] .lead-text p { font-size: 26px; }
:root[data-font="xl"] .summary, :root[data-font="xl"] .history p, :root[data-font="xl"] .craft > p { font-size: 19px; }
:root[data-font="xl"] .story h3 { font-size: 23px; }
:root[data-font="xl"] .legal p, :root[data-font="xl"] .legal li { font-size: 20.5px; }
:root[data-font="l"] body, :root[data-font="xl"] body { font-size: 17.5px; }

.gear { display: grid; place-items: center; width: 34px; color: var(--text); text-decoration: none; }
.foot-grid { grid-template-columns: 1.3fr 1.5fr 1fr 1fr; }

/* the action row under a story */
.acts { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.act { display: inline-flex; align-items: center; gap: 5px; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 4px; background: none; color: var(--muted);
  font: 400 12px/1 var(--mono); text-decoration: none; cursor: pointer; }
.act:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.act[data-repost][aria-pressed="true"] { color: var(--green); }
.act.like:hover, .act.like[aria-pressed="true"] { color: #ff6b81; }
.act.like[aria-pressed="true"] svg path { fill: currentColor; }
.act.pop svg { animation: pop .35s ease-out; }
@keyframes pop { 40% { transform: scale(1.35); } }
.acts .save { width: 30px; height: 30px; }
.acts.big { margin: 18px 0 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); justify-content: space-between; }
.acts.big .act { height: 38px; padding: 0 10px; gap: 7px; font-size: 13px; }
.acts.big .act em { font: 400 14px/1 var(--sans); font-style: normal; }
.report { margin: 14px 0 0; font-size: 13.5px; }
.report a { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.report a:hover { color: var(--pink); }
.pop-menu { position: absolute; z-index: 70; min-width: 220px; padding: 6px; background: var(--sky-2); border: 1px solid var(--line-hi); border-radius: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.pop-menu a, .pop-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 4px; background: none; color: var(--text);
  font: 400 14px/1.2 var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.pop-menu a:hover, .pop-menu button:hover, .pop-menu :focus-visible { background: color-mix(in srgb, var(--pink) 12%, transparent); color: var(--text); outline: none; }
.pop-menu svg { color: var(--muted); flex: none; }
.pop-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.repost-dialog { border: 1px solid var(--line-hi); border-radius: 8px; background: var(--sky-2); color: var(--text); padding: 22px; width: min(460px, calc(100vw - 32px)); }
.repost-dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.repost-dialog h2 { margin: 0 0 8px; font: 400 22px/1.2 var(--sans); }
.repost-dialog .quote { border-left: 2px solid var(--pink); padding-left: 12px; color: var(--body); font: 400 15px/1.5 var(--serif); }
.repost-dialog textarea, .feedback textarea { width: 100%; resize: vertical; }
.repost-dialog label { display: block; margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
.repost-dialog .row { justify-content: flex-end; margin-top: 12px; }

/* settings, in the manner of a phone's settings screen */
.settings { max-width: 760px; display: grid; gap: 22px; margin-top: 10px; }
.set-group { border-top: 1px solid var(--line); }
.set { display: block; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
a.set, .set > summary { display: grid; grid-template-columns: 38px 1fr 20px; gap: 14px; align-items: center; padding: 14px 4px; cursor: pointer; list-style: none; }
.set > summary::-webkit-details-marker { display: none; }
.set-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--body); }
.set-t b { display: block; font: 500 16px/1.3 var(--sans); }
.set-t em { display: block; font: 400 12.5px/1.35 var(--sans); font-style: normal; color: var(--muted); }
.set-chev { color: var(--muted); font-size: 22px; line-height: 1; transition: transform .15s; }
details.set[open] > summary .set-chev { transform: rotate(90deg); color: var(--pink); }
a.set:hover .set-t b, .set > summary:hover .set-t b { color: var(--pink); }
.set-body { padding: 2px 4px 22px 56px; }
.set-body h3 { margin: 18px 0 8px; font: 500 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.set-body h3:first-child { margin-top: 4px; }
.set-body p { margin: 8px 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg label, .seg a { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span, .seg a { display: block; padding: 8px 14px; font: 400 14px/1 var(--sans); color: var(--muted); text-decoration: none; cursor: pointer; border-right: 1px solid var(--line); }
.seg label:last-child span, .seg a:last-child { border-right: 0; }
.seg input:checked + span, .seg a.on { background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--text); }
.seg input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: -2px; }
.switch { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); cursor: pointer; }
.switch b { display: block; font: 500 15px/1.3 var(--sans); }
.switch em { display: block; font: 400 13px/1.4 var(--sans); font-style: normal; color: var(--muted); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--sky-3); border: 1px solid var(--line); transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + i { background: color-mix(in srgb, var(--pink) 35%, transparent); border-color: var(--pink); }
.switch input:checked + i::after { transform: translateX(18px); background: var(--pink); }
.switch input:focus-visible + i { outline: 2px solid var(--pink); outline-offset: 2px; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--body); padding: 7px 11px; font: 400 13.5px/1 var(--sans); cursor: pointer; }
.chip-btn[aria-pressed="true"] { border-color: var(--pink); color: var(--pink); background: color-mix(in srgb, var(--pink) 10%, transparent); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; }
.check-grid .check { font-size: 14px; padding: 4px 0; }
.hidden-list { display: grid; gap: 8px; }
.small-btn { padding: 7px 10px; font-size: 12.5px; margin-left: auto; }
.av-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.av-pick { position: relative; cursor: pointer; }
.av-pick input { position: absolute; opacity: 0; }
.av-pick span { display: block; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000)); border: 2px solid transparent; }
.av-pick input:checked + span { border-color: var(--text); box-shadow: 0 0 0 2px var(--sky), 0 0 0 4px var(--pink); }

/* the avatar everywhere */
.avatar { --c: #ffa552; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000)); box-shadow: none; font: 400 30px/1 var(--sans); color: #120a03; }
.avatar.blank::before { content: ""; width: 46%; height: 46%; border-radius: 50%; border: 1.5px solid rgba(18, 10, 3, .55); box-shadow: 0 0 0 9px transparent; transform: rotate(-20deg) scaleY(.38); }
.avatar.mini { width: 28px; height: 28px; font-size: 13px; }

/* profile */
.profile-hero { align-items: center; }
.profile-hero > div:nth-child(2) { flex: 1; }
.level-line { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.level-line [data-level] { font: 500 12px/1 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--pink); }
.level-line .bar { flex: 1; min-width: 120px; max-width: 280px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.level-line .bar i { display: block; height: 100%; background: var(--pink); }
.profile-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 6px 0 22px; overflow-x: auto; scrollbar-width: none; }
.profile-tabs button { background: none; border: 0; padding: 12px 0; font: 400 15px/1 var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.profile-tabs button.on { color: var(--text); box-shadow: inset 0 -1px 0 var(--pink); }
.profile-tabs span { font: 400 11px/1 var(--mono); color: var(--muted); }
.stats { grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.stat { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 4px; }
.badge-group { margin: 26px 0 12px; font: 500 11px/1 var(--mono); letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); }
.badge-group:first-child { margin-top: 4px; }
.badges { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.badge { display: grid; gap: 4px; justify-items: center; padding: 16px 12px 12px; border: 1px solid var(--line); border-radius: 6px; background: none; }
.badge .how { font-size: 12px; line-height: 1.35; color: var(--muted); min-height: 2.7em; }
.badge .prog { width: 100%; height: 2px; margin-top: 6px; background: var(--line); border-radius: 1px; overflow: hidden; }
.badge .prog i { display: block; height: 100%; background: var(--muted); }
.badge.on .prog i { background: var(--pink); }
.badge .small { font: 400 11px/1 var(--mono); color: var(--muted); }
.badge.on { background: color-mix(in srgb, var(--pink) 6%, transparent); }
.badges.near .badge { text-align: center; }
.post-list { display: grid; gap: 0; }
.post { padding: 16px 0; border-bottom: 1px solid var(--line); }
.post header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.post header b { font: 500 14.5px/1 var(--sans); }
.post header time { font: 400 12px/1 var(--mono); color: var(--muted); }
.post header .act { margin-left: auto; font-size: 18px; }
.post .note { margin: 0 0 10px; font: 400 16px/1.55 var(--serif); }

/* legal pages */
.legal-wrap { display: grid; grid-template-columns: 230px minmax(0, 720px); gap: 48px; align-items: start; margin-top: 10px; }
.legal-toc { position: sticky; top: 130px; font-size: 14px; }
.legal-toc ol, .legal-toc ul { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--line); }
.legal-toc li a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.legal-toc li a:hover, .legal-toc li a[aria-current] { color: var(--pink); }
.legal-toc h3 { margin: 18px 0 6px; font: 500 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.legal section { padding: 4px 0 18px; scroll-margin-top: 130px; }
.legal h2 { display: flex; gap: 14px; align-items: baseline; margin: 18px 0 10px; font: 400 24px/1.25 var(--sans); }
.legal h2 span { font: 400 12px/1 var(--mono); color: var(--pink); letter-spacing: 1px; }
.legal p, .legal li { font: 400 16.5px/1.7 var(--serif); color: var(--body); }
.legal ul { padding-left: 20px; margin: 8px 0 12px; }
.legal li { margin: 4px 0; }
.legal li::marker { color: var(--pink); }

/* feedback */
.feedback-wrap { display: grid; grid-template-columns: minmax(0, 680px) 260px; gap: 48px; align-items: start; margin-top: 10px; }
.feedback { display: grid; gap: 8px; }
.feedback fieldset { border: 0; padding: 0; margin: 0 0 10px; }
.feedback legend { font: 500 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.kind { position: relative; cursor: pointer; }
.kind input { position: absolute; opacity: 0; }
.kind span { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; }
.kind b { display: block; font: 500 15px/1.3 var(--sans); }
.kind em { display: block; font: 400 12.5px/1.4 var(--sans); font-style: normal; color: var(--muted); }
.kind input:checked + span { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 8%, transparent); }
.kind input:focus-visible + span { outline: 2px solid var(--pink); }
.feedback > label { margin-top: 10px; font-size: 13px; color: var(--muted); }
.feedback .check { margin-top: 10px; }
.feedback-side { border-top: 1px solid var(--line); padding-top: 14px; }
.feedback-side h2 { font: 500 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.feedback-side ul { padding-left: 18px; margin: 0 0 22px; font-size: 14px; color: var(--body); }

@media (max-width: 860px) {
  .legal-wrap, .feedback-wrap { grid-template-columns: 1fr; gap: 20px; }
  .legal-toc { position: static; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .set-body { padding-left: 4px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .profile-hero { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .acts .act { min-width: 26px; padding: 0 4px; }
  .acts.big .act em { display: none; }
}
.story .foot { flex-wrap: wrap; row-gap: 4px; }
.story .acts { position: relative; z-index: 1; }
textarea { font: 15px/1.5 var(--sans); color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 10px 13px; }
textarea::placeholder { color: var(--muted); }
textarea:focus { outline: none; border-color: var(--line-hi); box-shadow: 0 0 0 3px rgba(255, 165, 82, .15); }

/* the sky chart's extra controls */
.map-tools input[type=date] { padding: 7px 10px; color-scheme: dark; }
:root[data-theme="light"] .map-tools input[type=date] { color-scheme: light; }
.map-tools .tool { padding: 8px 12px; font-size: 13px; min-width: 40px; }
.map-tools .find { flex: 1 1 220px; position: relative; color: var(--muted); }
.map-tools .find input { flex: 1; padding: 8px 12px; }
.map-tools .red-btn { margin-left: 0; }
.map-layers { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 12px; font-size: 13px; color: var(--body); }
.map-layers .check input { accent-color: var(--pink); }
.chart-wrap { display: grid; justify-items: center; }
.chart-wrap canvas { cursor: grab; }
.chart-wrap canvas:active { cursor: grabbing; }
.zoom { position: absolute; right: 0; top: 0; display: grid; gap: 6px; }
.zoom button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--sky) 80%, transparent); color: var(--text); font: 400 18px/1 var(--sans); cursor: pointer; }
.zoom button:hover { border-color: var(--pink); color: var(--pink); }
.starmap:fullscreen { background: var(--sky); padding: 20px 24px; overflow: auto; }
.starmap:fullscreen .chart-wrap { justify-items: center; }

/* the ISS map's layers, passes and crew */
.map .night { fill: rgba(0, 0, 0, .42); }
:root[data-theme="light"] .map .night { fill: rgba(40, 25, 10, .16); }
.map .trail { fill: none; stroke: var(--star); stroke-width: 1; opacity: .55; }
.map .ahead { fill: none; stroke: var(--star); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.iss-h { margin: 16px 0 6px; font: 500 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.passes { list-style: none; margin: 0; padding: 0; }
.passes li { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.passes li.small { display: block; }
.p-when b { display: block; font: 500 14px/1.2 var(--sans); }
.p-when span { font: 400 12.5px/1.3 var(--mono); color: var(--text); }
.p-how span { display: block; font: 400 12.5px/1.35 var(--mono); color: var(--body); }
.p-how em { font: 400 11.5px/1.3 var(--mono); font-style: normal; color: var(--muted); }
.passes li.soon .p-when b { color: var(--pink); }
.passes .ics { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.passes .ics:hover { color: var(--pink); border-color: var(--pink); }
.crew { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.crew summary { cursor: pointer; font: 400 14px/1.3 var(--sans); color: var(--body); }
.crew summary b { color: var(--pink); font-weight: 500; }
.crew ul { list-style: none; margin: 8px 0 0; padding: 0; columns: 2; column-gap: 18px; font-size: 13px; }
.crew li { break-inside: avoid; padding: 3px 0; }
.crew li span { display: block; font: 400 11px/1.2 var(--mono); color: var(--muted); }

/* the live observatory (4-floor AstroNews observatory) */
.obs { --kng-px: 'Press Start 2P', var(--mono); --kng-vt: 'VT323', var(--mono); display: grid; gap: 0; border: 2px solid #2b3245; border-radius: 6px; overflow: hidden; background: #07090f; margin-top: 8px; box-shadow: 0 18px 48px rgba(0, 0, 0, .55); }
.obs-stage { position: relative; background: #07090f; overflow: hidden; }
.obs-stage > canvas { display: block; width: 100%; cursor: pointer; image-rendering: pixelated; }
.obs-stage:fullscreen { display: grid; place-items: center; }
.obs-stage:fullscreen > canvas { width: 100vw; height: 100vh; }
.obs-status.kng-hud { position: absolute; left: 10px; top: 10px; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 10px; background: rgba(8, 10, 18, .9); border: 1px solid #334155; border-radius: 4px; font: 400 10px/1.2 var(--kng-px); color: #e2e8f0; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.obs-status b { color: #4ade80; font-weight: 400; }
.kng-badge { padding: 3px 6px; background: #1e293b; border: 1px solid #475569; border-radius: 3px; color: #38bdf8; font-size: 9px; }
.kng-clock { color: #fde68a; font: 400 18px/1 var(--kng-vt); letter-spacing: 1px; }
.kng-sky-pill { font: 400 16px/1 var(--kng-vt); color: #cbd5e1; padding-left: 6px; border-left: 1px solid #334155; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .22); animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.kng-hud-r { position: absolute; right: 10px; top: 10px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: rgba(8, 10, 18, .9); border: 1px solid #334155; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.kng-floors { display: inline-flex; align-items: center; gap: 4px; }
.kng-fl-lbl { font: 400 9px/1 var(--kng-px); color: #94a3b8; margin-right: 2px; }
.kng-fl { min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid #475569; border-radius: 3px; background: #111827; color: #cbd5e1; font: 400 10px/1 var(--kng-px); cursor: pointer; }
.kng-fl:hover { border-color: #fde68a; color: #fde68a; }
.kng-fl.on { background: #f59e0b; border-color: #fde68a; color: #0b0f19; font-weight: 700; }
.kng-metric { font: 400 16px/1 var(--kng-vt); color: #fde68a; padding-left: 6px; border-left: 1px solid #334155; }
.obs-hint { position: absolute; left: 50%; bottom: 10px; z-index: 3; transform: translateX(-50%); padding: 4px 10px; background: rgba(8, 10, 18, .82); border: 1px solid rgba(255, 255, 255, .1); border-radius: 3px; font: 400 15px/1.2 var(--kng-vt); color: #cbd5e1; white-space: nowrap; pointer-events: none; }
.obs-tools { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: flex; gap: 4px; }
.obs-tools button { min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid #475569; border-radius: 3px; background: rgba(8, 10, 18, .9); color: #e2e8f0; font: 600 13px/1 var(--mono); cursor: pointer; }
.obs-tools button:hover, .obs-tools button[aria-pressed="true"][data-o-sound] { border-color: #fde68a; color: #fde68a; }
.obs-tools button[aria-pressed="false"]:not([data-o-sound]) { border-color: #f59e0b; color: #f59e0b; }
.obs-card { position: absolute; left: 10px; top: 52px; z-index: 5; width: min(330px, calc(100% - 20px)); max-height: calc(100% - 64px); overflow-y: auto; padding: 12px 14px; background: rgba(11, 15, 25, .96); border: 2px solid #f59e0b; border-radius: 5px; color: #e2e8f0; box-shadow: 0 14px 36px rgba(0, 0, 0, .65); }
.obs-card.kng-room { left: auto; right: 10px; border-color: #38bdf8; }
.obs-card h3 { margin: 0 0 2px; font: 400 12px/1.3 var(--kng-px); color: #fde68a; }
.obs-card p { margin: 4px 0; font: 400 16px/1.3 var(--kng-vt); color: #cbd5e1; }
.obs-card a { color: #38bdf8; font: 400 16px/1.2 var(--kng-vt); }
.obs-x { position: absolute; right: 6px; top: 4px; border: 0; background: none; color: #94a3b8; font-size: 18px; cursor: pointer; }
.kng-card-top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.kng-portrait { width: 48px; height: 48px; border: 1px solid #475569; border-radius: 4px; background: #1e293b; image-rendering: pixelated; flex: none; }
.kng-task { margin: 8px 0; padding: 7px 9px; background: #111827; border: 1px solid #334155; border-radius: 4px; }
.kng-task-lbl { font: 400 8px/1 var(--kng-px); color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; }
.kng-task-name { font: 400 17px/1.25 var(--kng-vt); color: #f8fafc; margin: 3px 0 6px; }
.kng-stages { display: flex; flex-wrap: wrap; gap: 4px; }
.kng-st { padding: 2px 6px; border-radius: 3px; font: 400 13px/1.1 var(--kng-vt); background: #1e293b; color: #64748b; border: 1px solid #334155; }
.kng-st.done { color: #4ade80; border-color: #166534; }
.kng-st.on { background: #f59e0b; color: #0b0f19; border-color: #fde68a; font-weight: 700; }
.kng-quote { display: block; width: 100%; text-align: left; margin: 7px 0; padding: 7px 9px; background: rgba(245, 158, 11, .1); border: 1px dashed #f59e0b; border-radius: 4px; color: #fef3c7; font: 400 16px/1.25 var(--kng-vt); cursor: pointer; }
.kng-quote:hover { background: rgba(245, 158, 11, .18); }
.kng-bars { display: grid; gap: 5px; margin: 8px 0; }
.kng-bar { display: grid; grid-template-columns: 68px 1fr 34px; gap: 6px; align-items: center; font: 400 14px/1 var(--kng-vt); color: #cbd5e1; }
.kng-bar-track { height: 7px; background: #1e293b; border: 1px solid #334155; border-radius: 2px; overflow: hidden; }
.kng-bar-fill { display: block; height: 100%; background: #4ade80; }
.kng-bonds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kng-bond { padding: 2px 6px; border: 1px solid #334155; border-radius: 3px; background: #111827; color: #cbd5e1; font: 400 14px/1.1 var(--kng-vt); cursor: pointer; }
.kng-bond:hover { border-color: #fde68a; color: #fde68a; }
.kng-mini { display: block; width: 100%; height: 96px; margin: 6px 0 8px; border: 1px solid #334155; border-radius: 4px; background: #07090f; image-rendering: pixelated; }
.obs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-top: 1px solid #1e293b; background: #0b0f19; }
.o-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid #263147; border-radius: 3px; background: #111827; color: #e2e8f0; font: 400 15px/1 var(--kng-vt); cursor: pointer; }
.o-chip i { width: 8px; height: 8px; border-radius: 1px; }
.o-chip b { font: 400 10px/1 var(--kng-px); }
.o-chip em { font: 400 13px/1 var(--kng-vt); color: #38bdf8; padding: 1px 4px; background: #1e293b; border-radius: 2px; }
.o-chip span { color: #94a3b8; font-size: 15px; }
.o-chip.off { opacity: .48; }
.o-chip.on, .o-chip:hover { border-color: #f59e0b; background: #172033; }
.obs-panes { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #1e293b; background: #090d16; }
.obs-log, .obs-book { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.obs-log { border-right: 1px solid #1e293b; }
.kng-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.obs-panes h2 { margin: 0; font: 400 10px/1.3 var(--kng-px); letter-spacing: 1px; text-transform: uppercase; color: #fde68a; }
.kng-chat-sub, [data-obs-online] { font: 400 15px/1 var(--kng-vt); color: #94a3b8; }
.obs-log ol, .kng-chat-list { list-style: none; margin: 0; padding: 0; max-height: 270px; overflow: auto; font: 400 16px/1.4 var(--kng-vt); color: #e2e8f0; }
.obs-log li, .kng-chat-list li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 3px 0; border-bottom: 1px dashed rgba(255, 255, 255, .05); }
.obs-log time, .kng-chat-list time { color: #64748b; }
.obs-log b, .kng-chat-list b { color: #fde68a; font-weight: 600; }
.kng-chat-list b.staff { color: #4ade80; }
.obs-log em { font-style: normal; color: #4ade80; }
.obs-log a { color: #38bdf8; }
.kng-chat-form { display: grid; grid-template-columns: 92px 1fr auto; gap: 6px; margin-top: 4px; }
.kng-chat-form input { padding: 7px 9px; border: 1px solid #334155; border-radius: 3px; background: #0f172a; color: #f8fafc; font: 400 16px/1.2 var(--kng-vt); }
.kng-chat-form input:focus { outline: none; border-color: #f59e0b; }
.kng-chat-send { padding: 0 12px; border: 1px solid #fde68a; border-radius: 3px; background: #f59e0b; color: #0b0f19; font: 400 9px/1 var(--kng-px); cursor: pointer; }
.kng-chat-send:hover { background: #fde68a; }
.kng-giscus-drawer { margin-top: 6px; border-top: 1px dashed #1e293b; padding-top: 6px; }
.kng-giscus-drawer summary { cursor: pointer; font: 400 15px/1.3 var(--kng-vt); color: #94a3b8; }
.obs-book .comments-off, .obs-book .comments-note { color: #94a3b8; font-size: 13px; }
@media (max-width: 760px) {
  .obs-panes { grid-template-columns: 1fr; }
  .obs-log { border-right: 0; border-bottom: 1px solid #1e293b; }
  .obs-hint, .kng-sky-pill, .kng-metric { display: none; }
  .obs-card, .obs-card.kng-room { left: 10px; right: 10px; top: auto; bottom: 48px; width: auto; max-height: 58%; }
  .kng-chat-form { grid-template-columns: 76px 1fr auto; }
}
/* small pictures are shown at their own size rather than stretched and blurred */
.hero-pic.small img { width: auto; max-width: min(100%, 520px); height: auto; aspect-ratio: auto; }
.set-group.pad { padding: 0 4px; }
.switch.fixed { opacity: .7; cursor: default; }
.prefs .row { margin: 18px 0 8px; }
/* controls are pressed, not selected */
button, summary, .btn, .chip, .chip-btn, .tabs, .tab, .act, .set, .seg, .switch, .o-chip, .profile-tabs, .sdo-tabs, .zoom, .obs-tools, .kind, .opt, .map-layers, .tabbar, .main-nav, .topics, .lang, .theme, .me {
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}

/* the guide's tool labels: each its own colour */
.g-tool[data-tool="telescope"] { color: #8fb8ff; }
:root[data-theme="light"] .g-tool[data-tool="telescope"] { color: #2f63b0; }

/* "More" in the top menu */
.more-nav { position: relative; }
.more-nav summary { list-style: none; cursor: pointer; font: 400 15px/1 var(--sans); padding: 10px 12px; color: var(--body); }
.more-nav summary::-webkit-details-marker { display: none; }
.more-nav summary span { font-size: 10px; color: var(--muted); }
.more-nav summary:hover, .more-nav[open] summary { color: var(--text); }
.more-nav summary[aria-current] { color: var(--text); box-shadow: inset 0 -1px 0 var(--pink); }
.more-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 200px; padding: 6px; display: grid; background: var(--sky-2); border: 1px solid var(--line-hi); border-radius: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.more-menu a { padding: 9px 10px; border-radius: 4px; color: var(--text); text-decoration: none; font: 400 14px/1.2 var(--sans); }
.more-menu a:hover { background: color-mix(in srgb, var(--pink) 12%, transparent); }

/* the mobile menu sheet */
.menu-btn { display: none; }
.menu-sheet { width: min(420px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; padding: 22px 20px 40px; border: 0; border-left: 1px solid var(--line-hi); background: var(--sky-2); color: var(--text); overflow: auto; }
.menu-sheet::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
.menu-sheet section { margin-bottom: 20px; }
.menu-sheet h3 { margin: 0 0 8px; font: 500 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.menu-sheet section div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.menu-sheet a { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font: 400 15px/1.2 var(--sans); }
.sheet-x { float: right; border: 0; background: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; }
.tabbar { grid-template-columns: repeat(5, 1fr); }

/* the account chip, menu and sign-in window */
.me-pic { width: 22px; height: 22px; border-radius: 50%; background: center / cover no-repeat var(--sky-3); }
.account-menu { min-width: 250px; }
.acc-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.acc-head b { display: block; font: 500 15px/1.25 var(--sans); }
.acc-head span { display: block; font: 400 12px/1.35 var(--sans); color: var(--muted); }
.acc-head.big b { font-size: 18px; }
.acc-pic { flex: none; border-radius: 50%; object-fit: cover; background: var(--sky-3); }
.acc-pic.letter { display: grid; place-items: center; background: var(--pink); color: #140b03; font: 500 18px/1 var(--sans); }
.account-menu .login-cta { width: calc(100% - 16px); margin: 6px 8px 4px; justify-content: center; }
.account-menu .danger { color: var(--red); }
.account-box { margin-bottom: 14px; }
.login-dialog { position: relative; width: min(410px, calc(100vw - 24px)); padding: 26px 26px 20px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--sky-2); color: var(--text); text-align: center; }
.login-dialog .sheet-x { float: none; position: absolute; top: 14px; right: 16px; }
.login-dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.login-logo { display: grid; place-items: center; width: 60px; height: 60px; margin: 4px auto 10px; border-radius: 14px; background: var(--pink); color: #140b03; }
.login-brand { margin: 0; padding-left: 3px; font: 500 12px/1 var(--mono); letter-spacing: 3px; color: var(--muted); }
.login-dialog h2 { margin: 14px 0 4px; font: 500 22px/1.2 var(--sans); }
.login-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .2); }
.login-tab { height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 500 13.5px/1 var(--sans); cursor: pointer; transition: background .15s, color .15s; }
.login-tab.on { background: var(--pink); color: #140b03; }
.login-provider-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 7px 12px; margin-bottom: 10px; border: 1px solid var(--pink); border-radius: 8px; background: color-mix(in srgb, var(--pink) 12%, transparent); color: var(--text); font: 500 13px/1.2 var(--sans); }
.login-provider-pill[hidden] { display: none; }
.login-provider-pill button { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.login-form { display: grid; gap: 9px; text-align: left; }
.login-input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 13px; border: 1px solid var(--line-hi); border-radius: 8px; background: rgba(0, 0, 0, .22); color: var(--text); font: 400 14.5px/1 var(--sans); }
.login-input[hidden] { display: none; }
.login-input::placeholder { color: var(--muted); }
.login-msg { margin: 2px 0; padding: 8px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.4; }
.login-msg[hidden] { display: none; }
.login-msg.err { background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .4); color: #fca5a5; }
.login-msg.info { background: color-mix(in srgb, var(--pink) 12%, transparent); border: 1px solid var(--pink); color: var(--text); }
.login-submit { width: 100%; height: 44px; justify-content: center; border-radius: 22px; font-size: 15px; margin-top: 2px; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; color: var(--muted); font: 400 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 1px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 20px; border: 1px solid var(--line); font: 500 13px/1 var(--sans); cursor: pointer; }
.login-btn.light { background: #ffffff; color: #111111; border-color: #ffffff; }
.login-btn.dark { background: #0b0b0d; color: #ffffff; border-color: rgba(255, 255, 255, .22); }
.login-btn.selected { box-shadow: 0 0 0 2px var(--sky-2), 0 0 0 4px var(--pink); }
.login-btn:disabled { opacity: .45; cursor: not-allowed; }
.login-btn:not(:disabled):hover { filter: brightness(.94); }
.login-off { margin: 14px 0 0; padding: 10px 12px; border: 1px dashed var(--line-hi); border-radius: 6px; font-size: 13px; color: var(--body); text-align: left; }
.login-legal { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.login-legal a { color: var(--body); }
.avatar.photo { background-size: cover; background-position: center; }

/* the feed */
.feed-tabs { margin-bottom: 6px; }
.feed-note { margin: 8px 0 4px; }
.feed-post header .acc-pic { width: 36px; height: 36px; }
.quote-card { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--text); }
.quote-card img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.quote-card .qc-src { display: block; padding: 10px 14px 0; font: 400 11.5px/1 var(--mono); color: var(--pink); }
.quote-card b { display: block; padding: 6px 14px 12px; font: 500 16px/1.35 var(--sans); }
.quote-card:hover { border-color: var(--line-hi); }
.post-counts { margin: 6px 0 0; font: 400 12px/1 var(--mono); color: var(--muted); }
.trend-list { list-style: none; margin: 4px 0 0; padding: 0; }
.trend-list a { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.trend-list img, .trend-list .thumb-ph { width: 64px; height: 44px; border-radius: 4px; object-fit: cover; background: var(--sky-3); display: block; }
.trend-list b { font: 500 13.5px/1.3 var(--sans); }
.trend-list a:hover b { color: var(--pink); }

/* the top menu has nine entries; below this width they move into the menu sheet */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .menu-btn { display: grid; place-items: center; }
}
@media (max-width: 860px) {
  .tools-top .gear { display: none; }
  .tabbar a span { font-size: 10.5px; }
}
.obs-thumb { position: relative; display: block; margin: 4px 0 10px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #090d1a; }
.obs-thumb-live { aspect-ratio: 44 / 25; }
.obs-live-frame { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; background: #090d1a; }
.obs-thumb-overlay { position: absolute; inset: 0; z-index: 2; display: block; cursor: pointer; }
.obs-thumb img { display: block; width: 100%; height: auto; image-rendering: pixelated; transition: transform .4s; }
.obs-thumb:hover img { transform: scale(1.03); }
.obs-thumb .live-dot { position: absolute; left: 10px; top: 10px; }
.trend-list b { grid-column: 2; }

/* the first-visit cookies and privacy notice */
.consent { position: fixed; z-index: 45; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(820px, calc(100vw - 32px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 24px; padding: 20px 22px; background: var(--sky-2); color: var(--text);
  border: 1px solid var(--line-hi); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.consent[hidden] { display: none; }
.consent h2 { margin: 0 0 6px; font: 500 16px/1.3 var(--sans); }
.consent p { margin: 0; font: 400 14px/1.6 var(--sans); color: var(--body); }
.consent a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--pink); }
.consent-actions { flex: none; display: flex; gap: 10px; }
.consent-actions .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .consent { flex-direction: column; align-items: stretch; gap: 14px; bottom: 76px; padding: 16px; }
  .consent p { font-size: 13px; }
  .consent-actions .btn { flex: 1; justify-content: center; }
}
.stars{box-shadow:1326px 617px 0 .5px rgba(255,222,190,0.61),296px 2194px 0 0 rgba(255,222,190,0.45),237px 2078px 0 0 rgba(255,222,190,0.27),1776px 1712px 0 0 rgba(255,222,190,0.38),2257px 1738px 0 0 rgba(255,222,190,0.70),507px 914px 0 0 rgba(255,222,190,0.57),1624px 203px 0 0 rgba(255,222,190,0.28),545px 1186px 0 .5px rgba(255,222,190,0.33),482px 2338px 0 0 rgba(255,222,190,0.56),740px 422px 0 0 rgba(255,222,190,0.45),2243px 257px 0 0 rgba(255,222,190,0.59),2033px 2177px 0 .5px rgba(255,222,190,0.68),1907px 2398px 0 .5px rgba(255,222,190,0.45),1017px 736px 0 0 rgba(255,222,190,0.30),1229px 2151px 0 .5px rgba(255,222,190,0.73),1838px 1179px 0 0 rgba(255,222,190,0.31),1712px 675px 0 0 rgba(255,222,190,0.33),2002px 1727px 0 0 rgba(255,222,190,0.78),317px 2285px 0 0 rgba(255,222,190,0.44),1434px 2034px 0 .5px rgba(255,222,190,0.29),383px 1105px 0 .5px rgba(255,222,190,0.63),266px 248px 0 0 rgba(255,222,190,0.61),1825px 1165px 0 .5px rgba(255,222,190,0.74),1421px 92px 0 .5px rgba(255,222,190,0.45),479px 2022px 0 0 rgba(255,222,190,0.37),1177px 529px 0 0 rgba(255,222,190,0.47),2033px 330px 0 0 rgba(255,222,190,0.50),2250px 1138px 0 0 rgba(255,222,190,0.70),2253px 1140px 0 .5px rgba(255,222,190,0.79),1558px 945px 0 0 rgba(255,222,190,0.30),619px 950px 0 0 rgba(255,222,190,0.26),746px 1076px 0 0 rgba(255,222,190,0.25),1716px 2189px 0 0 rgba(255,222,190,0.59),1305px 514px 0 0 rgba(255,222,190,0.50),2290px 1607px 0 .5px rgba(255,222,190,0.47),424px 1972px 0 .5px rgba(255,222,190,0.28),275px 855px 0 .5px rgba(255,222,190,0.34),1392px 215px 0 0 rgba(255,222,190,0.25),619px 2197px 0 0 rgba(255,222,190,0.77),104px 288px 0 0 rgba(255,222,190,0.59),608px 1033px 0 0 rgba(255,222,190,0.58),1942px 503px 0 0 rgba(255,222,190,0.72),1908px 1967px 0 .5px rgba(255,222,190,0.42),590px 418px 0 0 rgba(255,222,190,0.66),1960px 661px 0 0 rgba(255,222,190,0.36),2163px 1481px 0 0 rgba(255,222,190,0.63),110px 2163px 0 0 rgba(255,222,190,0.79),372px 1069px 0 0 rgba(255,222,190,0.75),1456px 912px 0 0 rgba(255,222,190,0.60),799px 980px 0 .5px rgba(255,222,190,0.66),928px 818px 0 .5px rgba(255,222,190,0.45),118px 114px 0 0 rgba(255,222,190,0.51),793px 1410px 0 .5px rgba(255,222,190,0.69),1431px 1493px 0 0 rgba(255,222,190,0.37),929px 1925px 0 0 rgba(255,222,190,0.44),1976px 7px 0 .5px rgba(255,222,190,0.75),1409px 347px 0 0 rgba(255,222,190,0.75),816px 1958px 0 0 rgba(255,222,190,0.49),1361px 355px 0 .5px rgba(255,222,190,0.50),347px 650px 0 0 rgba(255,222,190,0.80),112px 619px 0 .5px rgba(255,222,190,0.69),598px 1942px 0 0 rgba(255,222,190,0.34),2245px 536px 0 0 rgba(255,222,190,0.26),420px 2156px 0 0 rgba(255,222,190,0.49),797px 864px 0 0 rgba(255,222,190,0.39),1199px 2052px 0 0 rgba(255,222,190,0.67),1335px 1062px 0 .5px rgba(255,222,190,0.71),249px 1449px 0 .5px rgba(255,222,190,0.61),2116px 1722px 0 0 rgba(255,222,190,0.54),2144px 2091px 0 0 rgba(255,222,190,0.73),750px 16px 0 0 rgba(255,222,190,0.34),1939px 492px 0 0 rgba(255,222,190,0.43),2123px 2173px 0 .5px rgba(255,222,190,0.68),434px 2294px 0 0 rgba(255,222,190,0.39),1134px 172px 0 0 rgba(255,222,190,0.53),2300px 114px 0 0 rgba(255,222,190,0.49),2070px 2097px 0 0 rgba(255,222,190,0.63),1852px 2081px 0 .5px rgba(255,222,190,0.53),1014px 2143px 0 0 rgba(255,222,190,0.76),829px 1833px 0 0 rgba(255,222,190,0.48),1607px 1810px 0 0 rgba(255,222,190,0.29),985px 1754px 0 0 rgba(255,222,190,0.37),1240px 501px 0 0 rgba(255,222,190,0.77),1499px 585px 0 0 rgba(255,222,190,0.74),1915px 899px 0 0 rgba(255,222,190,0.47),1995px 666px 0 0 rgba(255,222,190,0.34),1767px 2111px 0 .5px rgba(255,222,190,0.44),801px 1460px 0 0 rgba(255,222,190,0.30),1498px 79px 0 0 rgba(255,222,190,0.55),1804px 74px 0 .5px rgba(255,222,190,0.43),1210px 2098px 0 0 rgba(255,222,190,0.31),936px 429px 0 0 rgba(255,222,190,0.40),162px 743px 0 0 rgba(255,222,190,0.67),1729px 1059px 0 .5px rgba(255,222,190,0.33),2108px 2337px 0 .5px rgba(255,222,190,0.64),366px 1143px 0 0 rgba(255,222,190,0.69),750px 1742px 0 0 rgba(255,222,190,0.40),68px 362px 0 0 rgba(255,222,190,0.30),910px 272px 0 0 rgba(255,222,190,0.72),1858px 47px 0 0 rgba(255,222,190,0.80),1711px 1097px 0 0 rgba(255,222,190,0.27),976px 448px 0 0 rgba(255,222,190,0.39),741px 826px 0 0 rgba(255,222,190,0.60),2175px 843px 0 0 rgba(255,222,190,0.50),728px 1108px 0 0 rgba(255,222,190,0.69),1025px 151px 0 0 rgba(255,222,190,0.26),2071px 2257px 0 0 rgba(255,222,190,0.53),1006px 1831px 0 0 rgba(255,222,190,0.61),1770px 2027px 0 .5px rgba(255,222,190,0.78),1260px 881px 0 0 rgba(255,222,190,0.44),572px 1657px 0 0 rgba(255,222,190,0.79),531px 58px 0 0 rgba(255,222,190,0.59),1046px 1764px 0 0 rgba(255,222,190,0.28),1560px 2072px 0 0 rgba(255,222,190,0.58),1200px 185px 0 .5px rgba(255,222,190,0.35),1101px 1826px 0 0 rgba(255,222,190,0.39),1347px 2240px 0 0 rgba(255,222,190,0.38),1267px 892px 0 0 rgba(255,222,190,0.35),1373px 1563px 0 0 rgba(255,222,190,0.51),2059px 823px 0 0 rgba(255,222,190,0.53),20px 372px 0 0 rgba(255,222,190,0.70),589px 1636px 0 0 rgba(255,222,190,0.47),1227px 1246px 0 0 rgba(255,222,190,0.30),2167px 635px 0 .5px rgba(255,222,190,0.67),2024px 612px 0 0 rgba(255,222,190,0.65),592px 179px 0 .5px rgba(255,222,190,0.65),2070px 570px 0 0 rgba(255,222,190,0.70),2392px 941px 0 0 rgba(255,222,190,0.27),545px 1477px 0 0 rgba(255,222,190,0.46),1848px 2287px 0 0 rgba(255,222,190,0.60),2176px 1001px 0 .5px rgba(255,222,190,0.40),1871px 287px 0 0 rgba(255,222,190,0.61),270px 1940px 0 0 rgba(255,222,190,0.70),1087px 961px 0 0 rgba(255,222,190,0.38),1885px 2023px 0 .5px rgba(255,222,190,0.29),1176px 191px 0 0 rgba(255,222,190,0.29),603px 1358px 0 0 rgba(255,222,190,0.61),1246px 2325px 0 0 rgba(255,222,190,0.26),248px 1989px 0 0 rgba(255,222,190,0.78),407px 891px 0 .5px rgba(255,222,190,0.41),2115px 1169px 0 .5px rgba(255,222,190,0.51),485px 2249px 0 0 rgba(255,222,190,0.42),351px 1937px 0 0 rgba(255,222,190,0.41),313px 2075px 0 .5px rgba(255,222,190,0.80),1584px 859px 0 0 rgba(255,222,190,0.29),369px 580px 0 0 rgba(255,222,190,0.77),543px 2083px 0 0 rgba(255,222,190,0.74),1495px 947px 0 .5px rgba(255,222,190,0.74),1991px 1614px 0 0 rgba(255,222,190,0.34),2013px 1846px 0 .5px rgba(255,222,190,0.42)}