body {
    --ui-bg: #08151c; --ui-surface: #10232d; --ui-raised: #16303c;
    --ui-text: #edf7fb; --ui-muted: #b2c8d2; --ui-line: #35515e; --ui-accent: #85ebd4;
    --station-bg: var(--ui-surface); --station-border: var(--ui-line); --station-accent: var(--ui-accent); --station-muted: var(--ui-muted);
    background-color: var(--ui-bg); color: var(--ui-text); isolation: isolate;
}
body.light-mode {
    --ui-bg: #edf4f6; --ui-surface: #ffffff; --ui-raised: #e2eff3;
    --ui-text: #15313e; --ui-muted: #45616e; --ui-line: #b8ced8; --ui-accent: #006f61;
    background-color: var(--ui-bg); color: var(--ui-text);
}
#page-hologram { position: fixed; inset: 0; width: 100%; height: 100dvh; pointer-events: none; z-index: -1; }
body main, body header, body .site-footer { position: relative; z-index: 1; }
body .home-hero { --station-bg: var(--ui-surface); --station-border: var(--ui-line); --station-accent: var(--ui-accent); --station-muted: var(--ui-muted); }
body :is(.home-hero, .resource-page) { color: var(--ui-text); }
body :is(.home-hero, .resource-page) :is(h1,h2,h3,h4) { color: var(--ui-text) !important; text-shadow: none !important; }
.home-destinations { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 1.5rem; }
.home-destinations > .col-auto { width: auto; padding: 0; }
body main[role="main"] .home-hero a.btn-home { display: grid; position: relative; gap: .65rem; text-align: left; width: 100%; max-width: none; min-width: 0; white-space: normal; padding: 1.3rem 2.8rem 1.3rem 1.2rem; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); color: var(--ui-text) !important; min-height: 112px; font-size: .95rem; }
.home-destinations small { color: var(--ui-muted); font-weight: 400; font-size: .85rem; }
body main[role="main"] .home-hero a.btn-home { max-width: none !important; padding: 1.3rem 2.8rem 1.3rem 1.2rem !important; font-size: .95rem !important; }
.destination-arrow { position: absolute; top: 1.2rem; right: 1rem; color: var(--ui-accent); }
.home-destinations a:hover { background: var(--ui-raised) !important; transform: translateY(-2px); }
.tracker-intro { color: var(--ui-muted); margin-bottom: 1rem; }
.tracker-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
body main[role="main"] .home-hero :is(#iss-ping-button,#starlink-ping-button) { font-size: .95rem; line-height: 1.25; min-height: 50px; padding: .8rem 1.3rem; }
body .home-hero :is(#iss-ping-button,#starlink-ping-button) { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.3rem; margin: 0; min-height: 48px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); color: var(--ui-text) !important; box-shadow: none; text-shadow: none !important; }
body .home-hero #iss-ping-button { border-color: var(--ui-accent); }
body .home-hero :is(#iss-ping-button,#starlink-ping-button):hover { background: var(--ui-raised); color: var(--ui-text) !important; }
body .home-hero :is(#iss-ping-button,#starlink-ping-button)[aria-expanded="true"] { background: var(--ui-raised); border-color: var(--ui-accent); }
.tracker-panel { margin-top: 1.5rem; padding: 1.2rem; border: 1px solid var(--ui-line); border-radius: 20px; background: var(--ui-surface); scroll-margin-top: 1rem; }
.tracker-panel[hidden], .station-panel[hidden] { display: none !important; }
body .home-hero .station-panel > a { color: var(--ui-accent); }
.tracker-panel-heading, .starlink-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tracker-panel-heading h3 { margin: 0; font-size: 1.1rem; }
.tracker-close { flex: 0 0 auto; display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--ui-line); border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--ui-text); background: var(--ui-raised); }
.tracker-close:hover { border-color: var(--ui-accent); }
:is(.tracker-close,.tracker-ping,.starlink-speed select,.resource-back):focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.starlink-controls { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; padding-top: .6rem; }
.starlink-speed { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; color: var(--ui-muted); font-size: .85rem; }
.starlink-speed select { color: var(--ui-text); background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: 8px; padding: .55rem .8rem; min-height: 44px; }
.starlink-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.starlink-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8rem; padding: .5rem 0; }
.status-operational { color: #9addff; } .status-partial { color: #ffd475; } .status-nonoperational { color: #ff8491; } .status-other { color: #c3cddb; }
body.light-mode .status-operational { color: #005e87; } body.light-mode .status-partial { color: #825500; } body.light-mode .status-nonoperational { color: #ad2435; } body.light-mode .status-other { color: #465569; }
.station-panel.iss-video-panel { width: 272px; padding: .65rem; border-radius: 14px; }
.iss-video-panel .tracker-close { min-width: 32px; min-height: 32px; font-size: 1.25rem; }
.iss-video-panel .panel-reference { display: none; }
.iss-video-panel .tracker-panel-heading { margin-bottom: .5rem; }
.iss-video-panel h3 { font-size: .8rem; }
.resource-page { padding: 2.5rem 1.2rem 4rem; margin-top: 0 !important; }
.resource-back { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem .95rem; margin-bottom: 1.5rem; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text) !important; text-decoration: none; font-weight: 750; transition: border-color .18s, box-shadow .18s; }
.resource-kicker { font: 700 .75rem/1.5 monospace; letter-spacing: .16em; color: var(--ui-accent); }
.resource-page h1 { font-size: clamp(1.9rem,4vw,3rem); font-weight: 700; letter-spacing: -.035em; }
.resource-intro, .resource-page .lead { color: var(--ui-muted); max-width: 45rem; line-height: 1.75; }
.resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 2rem !important; }
body .resource-page .list-group-item { padding: 0; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 16px !important; }
body .resource-page a.btn { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; color: var(--ui-text) !important; box-shadow: none; text-shadow: none !important; padding: .8rem 1.2rem; }
@media(max-width:650px) {
    .home-destinations { grid-template-columns: 1fr; gap: .6rem; }
    body main[role="main"] .home-hero a.btn-home { min-height: 88px; padding: 1rem 2.5rem 1rem 1rem !important; }
    .tracker-actions > button { flex: 1 1 140px; }
    .tracker-panel { padding: .8rem; }
    .starlink-heading { flex-direction: row; align-items: center; }
    .starlink-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .starlink-speed { width: 100%; justify-content: space-between; }
    .resource-grid { grid-template-columns: 1fr; }
    .station-panel.iss-video-panel { width: min(236px,calc(100vw - 2rem)); }
}
@media(prefers-reduced-motion:reduce) { .home-destinations a:hover { transform: none; } }
/* Clear typography and triadic destination accents across all pages. */
body { font-weight: 600; }
body :is(p,li,small,label,.lead,.panel-reference,.nav-link,.footer) { font-weight: 600; }
body :is(h1,h2,h3,h4,h5,h6,.display-4) { font-weight: 800; }
body main[role="main"] .home-hero a.btn-home {
    grid-template-columns: 48px 1fr; gap: .35rem 1rem; text-align: left;
    border-top: 3px solid var(--destination-accent); box-shadow: 0 8px 24px #00000020;
    background: linear-gradient(125deg,var(--ui-surface),var(--ui-raised));
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.destination-teal { --destination-accent: #5ee0c0; }
.destination-violet { --destination-accent: #bd85ff; }
.destination-amber { --destination-accent: #ffd075; }
body.light-mode .destination-teal { --destination-accent: #007b61; }
body.light-mode .destination-violet { --destination-accent: #7333a6; }
body.light-mode .destination-amber { --destination-accent: #956700; }
.destination-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ui-raised); border: 1px solid var(--destination-accent); font-size: 1.5rem; }
.destination-title { font-size: 1.12rem; font-weight: 800; }
body main[role="main"] .home-hero a.btn-home small { grid-column: 2; font-weight: 600; line-height: 1.5; }
body main[role="main"] .home-hero a.btn-home:hover { border-color: var(--destination-accent); box-shadow: 0 10px 26px #00000035; }
body .home-destinations .destination-arrow { color: var(--destination-accent); }
.starlink-legend { border: 0; padding: 0; margin: 1rem 0; }
.starlink-legend legend { float: none; width: auto; font-size: .9rem; font-weight: 750; margin-bottom: .65rem; color: var(--ui-text); }
.starlink-legend label { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-raised); cursor: pointer; }
.starlink-legend input { accent-color: var(--ui-accent); width: 18px; height: 18px; }
.starlink-legend label:has(input:not(:checked)) { border-style: dashed; }
.starlink-zoom { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin: .85rem 0; color: var(--ui-text); }
.starlink-zoom input { width: min(180px,35vw); accent-color: var(--ui-accent); }
.starlink-zoom button { min-width: 44px; min-height: 44px; padding: .4rem .7rem; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-raised); color: var(--ui-text); font-weight: 750; }
.starlink-zoom button:disabled { opacity: .45; }
.starlink-zoom :focus-visible,.starlink-legend input:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.starlink-zoom output { min-width: 3rem; font-variant-numeric: tabular-nums; }
#starlink-globe { cursor: grab; touch-action: pan-x pan-y pinch-zoom; }
#starlink-globe:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { body main[role="main"] .home-hero a.btn-home { transition: none; } }
.starlink-legend [data-layer-count] { padding: .12rem .4rem; border-radius: 5px; background: var(--ui-surface); color: var(--ui-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.starlink-legend label:has(input:disabled) { color: var(--ui-muted); border-style: dashed; cursor: default; }
/* Zoom grows the drawing surface; scroll keeps the full globe reachable. */
.starlink-panel { min-width: 0; max-width: 100%; }
.starlink-panel .starlink-stage {
    display: grid;
    place-items: safe center;
    width: 100%;
    min-width: 0;
    height: clamp(280px, 72vh, 760px);
    height: clamp(280px, 72svh, 760px);
    overflow: auto;
    overflow-anchor: none;
    scrollbar-gutter: stable both-edges;
    scrollbar-color: var(--ui-line) var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    background: var(--ui-bg);
}
@supports (height: 1cqw) {
    .starlink-panel { container-type: inline-size; }
    .starlink-panel .starlink-stage { height: min(72svh, 760px, 100cqw); }
}
.starlink-stage:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; }
.starlink-stage #starlink-globe {
    display: block;
    width: var(--starlink-canvas-size, 100%);
    height: var(--starlink-canvas-size, 100%);
    min-width: 0;
    max-width: none;
    max-height: none;
}
.starlink-panel :is(.panel-reference, .starlink-note) { overflow-wrap: anywhere; }
.starlink-view-help { margin: .65rem 0; color: var(--ui-muted); font-size: .8rem; line-height: 1.6; }
.starlink-fetch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .85rem;
    margin: .85rem 0;
    padding: .75rem .9rem;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-raised);
    color: var(--ui-text);
    font-size: .85rem;
    line-height: 1.5;
}
.starlink-fetch[hidden], .starlink-fetch progress[hidden] { display: none; }
.starlink-fetch progress { width: 8rem; max-width: 100%; height: .5rem; flex: 0 1 8rem; accent-color: var(--ui-accent); }
.starlink-fetch[data-state="ready"] { color: var(--ui-accent); }
.starlink-fetch[data-state="error"], .starlink-data-quality[data-state="error"] { color: #ff8491; }
.starlink-data-health { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; margin: .85rem 0; color: var(--ui-muted); font-size: .85rem; line-height: 1.5; }
.starlink-data-health[hidden] { display: none; }
.starlink-data-quality { padding: .35rem .65rem; border: 1px solid currentColor; border-radius: 8px; color: var(--ui-accent); background: var(--ui-raised); }
.starlink-data-quality[data-state="stale"] { color: #ffd475; }
body.light-mode .starlink-fetch[data-state="error"], body.light-mode .starlink-data-quality[data-state="error"] { color: #ad2435; }
body.light-mode .starlink-data-quality[data-state="stale"] { color: #825500; }
/* Both trackers reveal the existing page hologram without another animation. */
.home-hero :is(#iss-panel, #starlink-panel) {
    background: rgba(16, 35, 45, .58);
    background: color-mix(in srgb, var(--ui-surface) 58%, transparent);
}
body.light-mode .home-hero :is(#iss-panel, #starlink-panel) {
    background: rgba(255, 255, 255, .58);
    background: color-mix(in srgb, var(--ui-surface) 58%, transparent);
}
.starlink-panel .starlink-stage {
    background: radial-gradient(ellipse at center, rgba(21, 59, 64, .6), rgba(11, 24, 34, .2) 75%);
}
body.light-mode .starlink-panel .starlink-stage {
    background: radial-gradient(ellipse at center, rgba(216, 243, 238, .7), rgba(239, 247, 250, .25) 75%);
}

/* Keep the globe near the panel heading; secondary controls stay below it. */
.starlink-summary-metrics, .starlink-detail-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
.starlink-summary-metrics { margin: .75rem 0; }
.starlink-summary-metrics > div { padding: .65rem .85rem; }
.starlink-summary-metrics strong { font-size: 1.25rem; }
.starlink-panel #starlink-status { margin: .5rem 0; }
.starlink-panel .starlink-fetch { margin: .5rem 0; padding: .5rem .75rem; }
.starlink-data-health { margin: .5rem 0; }
.starlink-orbit-quality { font-size: .85rem; line-height: 1.6; margin: .4rem 0; color: var(--ui-muted); }
.starlink-details { border-top: 1px solid var(--ui-line); margin-top: 1rem; padding-top: .35rem; }
.starlink-details > summary { padding: .8rem .25rem; min-height: 44px; cursor: pointer; color: var(--ui-text); font-weight: 750; }
.starlink-details > summary::marker { color: var(--ui-accent); }
.starlink-details > summary:focus-visible, .starlink-age-filter input:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 3px; border-radius: 6px; }
.starlink-details > :last-child { margin-bottom: .5rem; }
.starlink-age-filter { display: flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--ui-text); }
.starlink-age-filter input { width: 18px; height: 18px; accent-color: var(--ui-accent); }
#starlink-older-count { font-variant-numeric: tabular-nums; color: var(--ui-muted); }
.tracker-panel:focus, .iss-video-panel:focus { outline: none; }
.tracker-panel:focus-visible, .iss-video-panel:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; }
@media(max-width:650px) {
    .starlink-panel .starlink-zoom { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px auto; gap: .5rem; }
    .starlink-zoom label { grid-column: 1 / -1; font-size: .85rem; }
    .starlink-zoom input { width: 100%; min-width: 0; }
    #starlink-view-reset { grid-column: 1 / -1; }
    .starlink-summary-metrics span { font-size: .75rem; }
    .starlink-panel .starlink-stage { height: min(55svh,100cqw); }
}

body .resource-page .resource-grid .resource-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.4rem; }
.resource-card :is(h2,h3) { font-size: 1.15rem; line-height: 1.5; margin: 0; }
.resource-author, .resource-edition { font-size: .85rem; margin: 0; color: var(--ui-muted); }
.resource-description, .resource-note, .resource-review { color: var(--ui-muted); line-height: 1.7; }
.resource-description { margin: 0; }
.resource-note, .resource-review { font-size: .85rem; margin-top: 1.25rem; }
.resource-review { padding-top: .85rem; border-top: 1px solid var(--ui-line); }
.resource-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem .8rem; margin: .25rem 0; font-size: .85rem; }
.resource-meta > div { display: flex; flex-direction: column; gap: .25rem; }
.resource-meta dt { font-weight: 750; }
.resource-meta dd { margin: 0; color: var(--ui-muted); }
.resource-books { --resource-accent: #85ebd4; --resource-action-ink: #0b3029; }
.resource-apps { --resource-accent: #c5a0ff; --resource-action-ink: #2c1946; }
.resource-blockchain { --resource-accent: #ffd68a; --resource-action-ink: #3d2b0d; }
body.light-mode .resource-books { --resource-accent: #006f61; --resource-action-ink: #ffffff; }
body.light-mode .resource-apps { --resource-accent: #693998; --resource-action-ink: #ffffff; }
body.light-mode .resource-blockchain { --resource-accent: #795700; --resource-action-ink: #ffffff; }
body .resource-page .resource-link {
    display: inline-flex; align-items: center; justify-content: space-between; gap: .85rem;
    min-width: 0; max-width: 100%; min-height: 52px; padding: .65rem .8rem .65rem 1rem;
    border: 1px solid var(--resource-accent); border-radius: 13px;
    background: var(--resource-accent); color: var(--resource-action-ink) !important;
    font-size: .95rem; font-weight: 800; line-height: 1.45; text-align: left; text-decoration: none;
    box-shadow: inset 0 1px 0 #ffffff40, 0 4px 12px #00000018;
    transition: transform .18s, box-shadow .18s;
}
.resource-card > .resource-link { width: 100%; margin-top: auto; }
.resource-link-label { min-width: 0; overflow-wrap: anywhere; }
.resource-link-icon {
    display: grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem;
    border: 1px solid #00000018; border-radius: 9px; background: #00000012;
    color: inherit; font-family: Arial, sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1;
}
body .resource-page .resource-link-secondary {
    background: var(--ui-raised); color: var(--resource-accent) !important;
    box-shadow: inset 0 1px 0 #ffffff12;
}
.resource-link-secondary .resource-link-icon { border-color: var(--ui-line); background: var(--ui-surface); }
body .resource-page .resource-link:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #ffffff40, 0 8px 20px #00000028; }
body .resource-page .resource-link:active { transform: translateY(0); box-shadow: inset 0 2px 5px #00000018; }
body .resource-page .resource-back:hover { border-color: var(--resource-accent); box-shadow: 0 3px 12px #00000018; }
body .resource-page :is(.resource-link,.resource-back):focus-visible { outline: 3px solid var(--resource-accent); outline-offset: 4px; }
body .resource-page .resource-referral .resource-link { width: 100%; margin-top: .65rem; }
.resource-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.resource-actions > .resource-link { flex: 1 1 14rem; }
.resource-badge { display: inline-block; border: 1px solid var(--ui-line); border-radius: 8px; padding: .3rem .6rem; font-size: .8rem; color: var(--ui-muted); }
.resource-section, .resource-project { padding: 1.4rem; border: 1px solid var(--ui-line); border-radius: 16px; background: var(--ui-surface); margin-top: 1.25rem; }
.resource-section h2, .resource-project h2 { font-size: 1.3rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
    body .resource-page :is(.resource-link,.resource-back),
    body .resource-page :is(.resource-link,.resource-back):hover,
    body .resource-page :is(.resource-link,.resource-back):active { transition: none; transform: none; }
}