.mc {
    --mc-line: var(--line);
    --mc-soft: rgba(207, 129, 254, .12);
    --mc-text: var(--ink);
    --mc-muted: var(--muted);
    --mc-dim: #817888;
    --mc-accent: var(--accent);
    --mc-green: #64dca0;
    padding-bottom: 64px;
    color: var(--mc-text);
}

.mc-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 48px;
    padding-block: clamp(42px, 6vw, 72px) 28px;
    border-bottom: 1px solid var(--mc-line);
}

.mc-header > div:first-child {max-width: 780px}
.mc-header h1 {
    margin: 0;
    color: #f7f3fa;
    font: 600 clamp(3.2rem, 6vw, 5.4rem)/.92 var(--serif);
    letter-spacing: -.055em;
}

.mc-header p {
    max-width: 650px;
    margin: 18px 0 0;
    color: var(--mc-muted);
    font-size: 1rem;
}

.mc-clock {
    min-width: 168px;
    padding: 0 0 3px 22px;
    border-left: 1px solid var(--mc-line);
    text-align: right;
}

.mc-clock span,
.mc-clock small {
    display: block;
    color: var(--mc-dim);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mc-clock strong {
    display: block;
    margin: 5px 0;
    color: #fff;
    font: 600 1.25rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

.mc-tabs {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    border-bottom: 1px solid var(--mc-line);
    scrollbar-width: none;
}

.mc-tabs::-webkit-scrollbar {display: none}
.mc-tabs button {
    position: relative;
    min-height: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mc-muted);
    font: 700 .75rem var(--sans);
    white-space: nowrap;
    cursor: pointer;
}

.mc-tabs button::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: transparent;
}

.mc-tabs button[aria-selected="true"] {color: #fff}
.mc-tabs button[aria-selected="true"]::after {background: var(--mc-accent)}
.mc-tabs button:focus-visible {outline: 2px solid var(--mc-accent); outline-offset: 4px}

.mc-status {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin-bottom: 20px;
    color: var(--mc-muted);
    font-size: .69rem;
}

.mc-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #efb958;
}

.mc-status.is-live i {
    background: var(--mc-green);
    box-shadow: 0 0 0 5px rgba(100, 220, 160, .08);
}

.mc-status button {
    margin-left: auto;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--mc-accent);
    font: 700 .69rem var(--sans);
    cursor: pointer;
}

.mc-panel[hidden] {display: none}
.mc-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr);
    gap: 36px 42px;
}

.mc-card {
    min-width: 0;
    overflow: hidden;
    border-top: 2px solid #665472;
    background: transparent;
}

.mc-card > header {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mc-line);
}

.mc-card h2,
.mc-card h3 {
    margin: 0;
    color: #f6f2f8;
    font: 600 1.35rem/1.05 var(--serif);
}

.mc-card header a,
.mc-card header span {
    color: var(--mc-muted);
    font-size: .64rem;
}

.mc-card header a {color: var(--mc-accent); font-weight: 700}
.mc-next-launch [data-mc-next] {padding: 26px 0 12px}
.mc-next-launch h3 {
    margin: 0;
    color: #fff;
    font: 600 clamp(2.1rem, 4vw, 3.6rem)/.96 var(--serif);
    letter-spacing: -.035em;
}

.mc-next-launch p {
    max-width: 680px;
    margin: 14px 0 0;
    color: var(--mc-muted);
    font-size: .78rem;
}

.mc-next-launch strong {
    display: block;
    margin-top: 24px;
    color: var(--mc-accent);
    font: 600 1.1rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

.mc-apod figure {margin: 16px 0 0}
.mc-apod [data-apod-media] {
    display: grid;
    aspect-ratio: 16/9;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--mc-line);
    border-radius: 3px;
    background: #08060a;
}

.mc-apod img {width: 100%; height: 100%; object-fit: cover}
.mc-apod figcaption {display: grid; gap: 4px; padding: 12px 1px 0}
.mc-apod figcaption strong {font: 600 1.04rem var(--serif)}
.mc-apod figcaption span,
.mc-image-placeholder {color: var(--mc-dim); font-size: .63rem}

.mc-orbit {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: center;
    padding: 24px 0 4px;
}

.mc-earth {
    position: relative;
    width: 176px;
    aspect-ratio: 1;
    border: 1px solid #44384e;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(143, 188, 255, .2), transparent 23%), repeating-linear-gradient(0deg, transparent 0 28px, rgba(207, 129, 254, .06) 29px), repeating-linear-gradient(90deg, transparent 0 28px, rgba(207, 129, 254, .06) 29px), #09070d;
}

.mc-earth::before,
.mc-earth::after {content: ''; position: absolute; inset: 49% 5%; border-top: 1px solid rgba(207, 129, 254, .18)}
.mc-earth::after {inset: 5% 49%; border-top: 0; border-left: 1px solid rgba(207, 129, 254, .18)}
.mc-earth i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--mc-accent);
    box-shadow: 0 0 16px var(--mc-accent);
    transform: translate(-50%, -50%);
    transition: left 1s linear, top 1s linear;
}

.mc-orbit dl {display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0}
.mc-orbit dt {color: var(--mc-dim); font-size: .61rem}
.mc-orbit dd {margin: 3px 0 0; color: var(--mc-text); font: 600 .82rem ui-monospace, monospace}
.mc-metrics {display: grid; grid-template-columns: 1fr 1fr; padding-top: 8px}
.mc-metrics > div {min-height: 104px; padding: 20px 12px 20px 0; border-bottom: 1px solid var(--mc-line)}
.mc-metrics > div:nth-child(2n) {padding-left: 18px; border-left: 1px solid var(--mc-line)}
.mc-metrics > div:nth-last-child(-n+2) {border-bottom: 0}
.mc-metrics span {display: block; color: var(--mc-dim); font-size: .65rem}
.mc-metrics strong {display: block; margin-top: 8px; color: #fff; font: 600 2rem var(--serif)}

.mc-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 0 24px;
    border-bottom: 1px solid var(--mc-line);
}

.mc-section-head h2 {margin: 0; color: #fff; font: 600 clamp(2.2rem, 4vw, 3.3rem)/.95 var(--serif); letter-spacing: -.035em}
.mc-section-head p,
.mc-section-head > span,
.mc-section-head > a {margin: 8px 0 0; color: var(--mc-muted); font-size: .72rem}
.mc-section-head > a {color: var(--mc-accent); font-weight: 700}

.mc-tracking-grid,
.mc-weather-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; padding-top: 26px}
.mc-weather-grid {grid-template-columns: 1.2fr .8fr .8fr}
.mc-events-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 42px; padding-top: 26px}
.mc-coordinate {display: grid; grid-template-columns: 1fr auto; gap: 5px 15px; padding: 22px 0}
.mc-coordinate strong {color: #fff; font: 600 1.65rem ui-monospace, monospace}
.mc-coordinate span {align-self: center; color: var(--mc-dim); font-size: .65rem}
.mc-button {display: grid; min-height: 42px; place-items: center; margin-top: 4px; border: 1px solid #594866; border-radius: 4px; color: var(--mc-text); font-size: .7rem; font-weight: 700}
.mc-list {padding-top: 7px}
.mc-list article {padding: 13px 0; border-bottom: 1px solid var(--mc-line)}
.mc-list article:last-child {border: 0}
.mc-list strong,
.mc-list span {display: block}
.mc-list strong {font: 600 .94rem var(--serif)}
.mc-list span,
.mc-list p {margin: 4px 0 0; color: var(--mc-dim); font-size: .65rem}
.mc-loading {color: var(--mc-dim) !important}
.mc-sun img {width: 100%; aspect-ratio: 1; margin-top: 16px; object-fit: cover}
.mc-gauge {display: grid; min-height: 190px; place-items: center; align-content: center; padding: 24px 0}
.mc-gauge strong {color: #fff; font: 600 4.2rem/1 var(--serif)}
.mc-gauge span {margin-top: 8px; color: var(--mc-muted); font-size: .72rem; text-align: center}
.mc-weather-grid .mc-card > p {padding-bottom: 12px; color: var(--mc-dim); font-size: .68rem}
.mc-event-list article {display: grid; grid-template-columns: 100px 1fr; gap: 15px}
.mc-event-list time {color: var(--mc-accent); font: 600 .68rem ui-monospace, monospace}
.mc-error {color: #ff9aa8 !important}

.mc-sources {
    margin-top: 18px;
    padding-block: 17px;
    border-block: 1px solid var(--mc-line);
    color: var(--mc-muted);
    font-size: .66rem;
}

.mc-sources summary {color: #d9d2dd; font-weight: 700; cursor: pointer}
.mc-sources > div {display: flex; justify-content: space-between; gap: 30px; padding-top: 15px}
.mc-sources p {margin: 0}
.mc-sources a {color: #cba6e2; text-decoration: underline; text-underline-offset: 2px}

@media (max-width: 1050px) {
    .mc-overview-grid,
    .mc-weather-grid {grid-template-columns: 1fr 1fr}
    .mc-tracking-grid {grid-template-columns: 1fr 1fr}
    .mc-tracking-grid .mc-card:last-child {grid-column: 1 / -1}
}

@media (max-width: 700px) {
    .mc {padding-bottom: 48px}
    .mc-header {align-items: flex-start; flex-direction: column; gap: 22px; padding-block: 34px 20px}
    .mc-header h1 {font-size: 3.55rem}
    .mc-header p {margin-top: 12px; font-size: .88rem}
    .mc-clock {display: flex; width: 100%; align-items: center; gap: 10px; padding: 0; border: 0; text-align: left}
    .mc-clock strong {margin: 0 0 0 auto}
    .mc-clock small {text-align: right}
    .mc-tabs {gap: 20px}
    .mc-overview-grid,
    .mc-tracking-grid,
    .mc-weather-grid,
    .mc-events-grid {grid-template-columns: 1fr; gap: 32px}
    .mc-tracking-grid .mc-card:last-child {grid-column: auto}
    .mc-orbit {grid-template-columns: 1fr}
    .mc-earth {margin-inline: auto}
    .mc-section-head {align-items: flex-start; flex-direction: column}
    .mc-sources > div {flex-direction: column; gap: 10px}
}