/*
 * PORTFOLIO STYLE MAP
 * 01 Design tokens and themes       lines 1+
 * 02 Document and canvas layers     search: #starfield
 * 03 Header, navigation, controls   search: .site-header
 * 04 Orb and celestial components   search: .orb
 * 05 Content and page components    search: .hero
 * 06 Settings and telemetry         search: .settings-form
 * 07 Utilities and responsive rules search: Layout helpers
 *
 * Component selectors stay colocated with their states and pseudo-elements.
 * Shared colors and surfaces must use the tokens below rather than literals.
 */
:root {
    --bg: #0b0f13;
    --bg-2: #0e141b;
    --fg: #e6eef6;
    --muted: #93a1b1;
    --neon: #7df9ff;
    --accent: #b292ff;
    --accent-2: #76ffa6;
    --glass: rgba(255,255,255,0.04);
    --glass-border: rgba(255,255,255,0.08);
    --shadow: 0 10px 40px rgba(0,0,0,0.5);
    --control-surface: color-mix(in srgb, var(--bg-2) 88%, var(--glass) 12%);
    --control-border: color-mix(in srgb, var(--neon) 34%, var(--glass-border));
    --panel-surface: color-mix(in srgb, var(--bg-2) 96%, var(--glass) 4%);
    --focus-ring: color-mix(in srgb, var(--neon) 80%, var(--fg) 20%);
    --panel-border: color-mix(in srgb, var(--neon) 58%, var(--glass-border));
    --panel-glow: color-mix(in srgb, var(--accent) 20%, transparent);
    --menu-control-height: max(44px, calc(44px / var(--page-zoom-factor, 1)));
    --scrollbar-track: var(--bg-2);
    --scrollbar-thumb: color-mix(in srgb, var(--accent) 72%, var(--bg-2));
    --scrollbar-thumb-hover: var(--neon);
}

html.theme-alt {
    /* Alternate palette */
    --bg: #0c0b13;
    --bg-2: #131027;
    --fg: #e9e9ff;
    --muted: #a9a2d7;
    --neon: #7eebff;
    --accent: #8ab6ff;
    --accent-2: #ffd36e;
    --glass: rgba(255,255,255,0.05);
    --glass-border: rgba(255,255,255,0.11);
}

html.theme-ocean {
    --bg: #021219;
    --bg-2: #03202d;
    --fg: #dff7ff;
    --muted: #87b4c8;
    --neon: #36d7ff;
    --accent: #3fe2b8;
    --accent-2: #6ae8ff;
    --glass: rgba(54,215,255,0.08);
    --glass-border: rgba(54,215,255,0.25);
    --shadow: 0 14px 44px rgba(2,22,33,0.6);
}

html.theme-sunset {
    --bg: #1a0614;
    --bg-2: #260a1d;
    --fg: #ffe9f5;
    --muted: #f7b0cf;
    --neon: #ff8c64;
    --accent: #ff53c4;
    --accent-2: #ffd447;
    --glass: rgba(255,83,196,0.08);
    --glass-border: rgba(255,140,100,0.22);
    --shadow: 0 14px 44px rgba(26,6,20,0.55);
}

html.theme-terminal {
    --bg: #010904;
    --bg-2: #03140a;
    --fg: #dcffe2;
    --muted: #82d695;
    --neon: #57ff6d;
    --accent: #2fd8ff;
    --accent-2: #fff68c;
    --glass: rgba(87,255,109,0.07);
    --glass-border: rgba(87,255,109,0.25);
    --shadow: 0 14px 44px rgba(1,18,10,0.65);
}

html.theme-lagoon {
    --bg: #02121b;
    --bg-2: #032634;
    --fg: #dcf5ff;
    --muted: #83bada;
    --neon: #33e0ff;
    --accent: #5cf7c0;
    --accent-2: #ffe29d;
    --glass: rgba(51,224,255,0.08);
    --glass-border: rgba(51,224,255,0.26);
    --shadow: 0 16px 46px rgba(2,32,43,0.62);
}

html.theme-ember {
    --bg: #180908;
    --bg-2: #2b0f0c;
    --fg: #ffe7db;
    --muted: #f0ad98;
    --neon: #ff7a45;
    --accent: #ffb347;
    --accent-2: #ffe49a;
    --glass: rgba(255,122,69,0.08);
    --glass-border: rgba(255,122,69,0.22);
    --shadow: 0 16px 46px rgba(24,9,8,0.6);
}

html.theme-midnight {
    --bg: #08071a;
    --bg-2: #111034;
    --fg: #eae7ff;
    --muted: #a6a3d5;
    --neon: #6f6bff;
    --accent: #9a6fff;
    --accent-2: #ffafef;
    --glass: rgba(111,107,255,0.08);
    --glass-border: rgba(154,111,255,0.24);
    --shadow: 0 18px 52px rgba(8,7,26,0.62);
}

html.theme-jade {
    --bg: #06140f;
    --bg-2: #0c251c;
    --fg: #e6fff5;
    --muted: #8ddbbd;
    --neon: #4dff88;
    --accent: #3bd1c0;
    --accent-2: #c6ff6f;
    --glass: rgba(77,255,136,0.08);
    --glass-border: rgba(77,255,136,0.24);
    --shadow: 0 16px 48px rgba(6,20,15,0.58);
}

html.theme-solstice {
    --bg: #101414;
    --bg-2: #1d2525;
    --fg: #f0f5f5;
    --muted: #aab7b7;
    --neon: #ffd166;
    --accent: #a5d8ff;
    --accent-2: #ff7aa2;
    --glass: rgba(255,209,102,0.08);
    --glass-border: rgba(255,209,102,0.22);
    --shadow: 0 18px 48px rgba(16,20,20,0.6);
}

html.theme-observatory {
    color-scheme: dark;
    --bg: #080d14;
    --bg-2: #121c29;
    --fg: #edf3fa;
    --muted: #afbed0;
    --neon: #a9c9f5;
    --accent: #c3b4e8;
    --accent-2: #e8c28b;
    --glass: rgba(169,201,245,.06);
    --glass-border: rgba(169,201,245,.20);
    --shadow: 0 16px 46px rgba(0,4,10,.62);
}

html.theme-heliosphere {
    color-scheme: dark;
    --bg: #120e0b;
    --bg-2: #241c15;
    --fg: #fff3e5;
    --muted: #d0bba1;
    --neon: #f1c07a;
    --accent: #b5c9ed;
    --accent-2: #e3a18b;
    --glass: rgba(241,192,122,.06);
    --glass-border: rgba(241,192,122,.22);
    --shadow: 0 16px 46px rgba(10,6,2,.62);
}

html.theme-mystic {
    color-scheme: light;
    --bg: #f7fbff;
    --bg-2: #eef6ff;
    --fg: #1f2a37;
    --muted: #4b5d73;
    --neon: #276fc7;
    --accent: #4f7fe0;
    --accent-2: #2f9ec5;
    --glass: rgba(255,255,255,0.62);
    --glass-border: rgba(88, 122, 170, 0.45);
    --shadow: 0 18px 44px rgba(86, 118, 168, 0.28);
}

html.theme-mystic .btn-ghost {
    background: rgba(79,127,224,.14);
    border-color: rgba(79,127,224,.38);
    color: #1a304d;
}

html.theme-mystic .btn-ghost:hover {
    background: rgba(79,127,224,.22);
}

html.theme-mystic .glass {
    border-color: rgba(88,122,170,.42);
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    min-height: 100%;
    scroll-behavior: smooth;
    background: radial-gradient(1200px 800px at 30% -10%, var(--bg-2) 0%, var(--bg) 60%) fixed;
}

button, input, select, textarea {
    font: inherit;
}

input[type="checkbox"], input[type="range"] {
    accent-color: var(--neon);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

:where(button, input, select, textarea):disabled {
    cursor: not-allowed;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: calc(100dvh / var(--page-zoom-factor, 1));
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--fg);
    background: transparent;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Cantarell, 'Helvetica Neue', Arial;
    line-height: 1.55;
    transition: filter .35s ease;
    isolation: isolate;
}

#starfield, #matrix {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.home-scene-chooser {
    width: min(100%, 23rem);
    margin-top: 1.35rem;
    padding: .8rem .9rem;
    border: 1px solid color-mix(in srgb, var(--glass-border) 76%, var(--accent) 24%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--glass) 88%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.home-scene-chooser label {
    display: block;
    margin-bottom: .3rem;
    color: var(--fg);
    font-size: .86rem;
    font-weight: 700;
}

.home-scene-chooser select { width: 100%; }

select {
    appearance: none;
    min-height: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--glass-border) 72%, var(--neon) 28%);
    border-radius: 12px;
    padding: .65rem 2.6rem .65rem .8rem;
    color: var(--fg);
    background-color: color-mix(in srgb, var(--bg) 90%, var(--glass) 10%);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--neon) 50%),
      linear-gradient(135deg, var(--neon) 50%, transparent 50%),
      linear-gradient(to right, color-mix(in srgb, var(--glass-border) 75%, transparent), color-mix(in srgb, var(--glass-border) 75%, transparent));
    background-position:
      calc(100% - 17px) calc(50% - 2px),
      calc(100% - 12px) calc(50% - 2px),
      calc(100% - 2.2rem) 50%;
    background-size: 5px 5px, 5px 5px, 1px 1.55rem;
    background-repeat: no-repeat;
    box-shadow: 0 10px 28px rgba(0,0,0,.3), 0 0 0 1px color-mix(in srgb, var(--neon) 7%, transparent);
    font: inherit;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

select:hover,
select:focus-visible {
    border-color: color-mix(in srgb, var(--neon) 68%, var(--glass-border));
    box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 0 20px color-mix(in srgb, var(--neon) 20%, transparent);
    outline: none;
}

select option,
select optgroup {
    color: var(--fg);
    background: color-mix(in srgb, var(--bg) 92%, black 8%);
}

.home-scene-chooser p {
    margin: .35rem 0 0;
    color: var(--muted);
    font-size: .78rem;
}

.home-scene-chooser p + label {
    margin-top: .8rem;
}

.site-features-dialog {
    width: min(calc(92vw / var(--page-zoom-factor, 1)), 720px);
    max-height: min(calc(88dvh / var(--page-zoom-factor, 1)), 760px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--fg);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    background: var(--panel-surface);
    box-shadow: var(--shadow);
}

.site-features-dialog::backdrop {
    background: rgba(2, 5, 14, .78);
    backdrop-filter: blur(8px) saturate(.8);
}

.site-features-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid var(--glass-border);
    background: var(--panel-surface);
}
.site-features-header button { flex: 0 0 auto; min-height: var(--menu-control-height); }

.site-features-header h2,
.site-features-header p {
    margin: 0;
}

.site-features-content {
    display: grid;
    gap: 1rem;
    max-height: calc(min(88dvh / var(--page-zoom-factor, 1), 760px) - 6rem);
    padding: 1.2rem;
    overflow: auto;
    overscroll-behavior: contain;
}

.site-features-content > p,
.site-features-content section p {
    margin: 0;
    color: var(--muted);
}

.site-features-content section {
    padding: .9rem 1rem;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--glass) 88%, transparent);
}

.site-features-content section h3 {
    margin: 0 0 .4rem;
}

.site-features-content section p + p {
    margin-top: .65rem;
}

.site-features-content kbd {
    display: inline-block;
    min-width: 1.7rem;
    padding: .08rem .4rem;
    color: var(--fg);
    text-align: center;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-2) 82%, var(--glass) 18%);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .24);
}

@media (max-width: 520px) {
    .site-features-dialog { width: calc(100vw / var(--page-zoom-factor, 1) - 1rem); max-height: calc(92dvh / var(--page-zoom-factor, 1)); }
    .site-features-content { max-height: calc(92dvh / var(--page-zoom-factor, 1) - 6rem); }
}

.periodic-table-trigger {
    width: 100%;
    margin-top: .55rem;
}

.periodic-table-dialog {
    width: min(calc(94vw / var(--page-zoom-factor, 1)), 1040px);
    max-height: min(calc(88dvh / var(--page-zoom-factor, 1)), 820px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--fg);
    border: 1px solid color-mix(in srgb, var(--glass-border) 55%, var(--neon) 45%);
    border-radius: 20px;
    background: var(--panel-surface);
    box-shadow: var(--shadow);
}

.periodic-table-dialog::backdrop {
    background: rgba(2, 5, 14, .78);
    backdrop-filter: blur(8px) saturate(.8);
}

.periodic-table-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--glass-border);
    background: var(--panel-surface);
}
.periodic-table-header button { flex: 0 0 auto; min-height: var(--menu-control-height); }

.periodic-table-header h2 { margin: 0; }
.periodic-table-dialog > .settings-help { padding: .85rem 1.1rem 0; }

.periodic-table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: .55rem;
    max-height: calc(min(88dvh / var(--page-zoom-factor, 1), 820px) - 10.5rem);
    padding: 1rem 1.1rem;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.periodic-element-button {
    display: grid;
    grid-template-columns: 1fr auto;
    min-height: 88px;
    padding: .45rem;
    overflow: hidden;
    color: var(--fg);
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--element-color) 42%, var(--glass-border));
    border-radius: 11px;
    background: radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--element-color) 22%, transparent), transparent 48%), rgba(255,255,255,.035);
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--element-color) 8%, transparent);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.periodic-element-button[data-element-family="0"] { --element-color: var(--neon); }
.periodic-element-button[data-element-family="1"] { --element-color: var(--accent); }
.periodic-element-button[data-element-family="2"] { --element-color: var(--accent-2); }
.periodic-element-button[data-element-family="3"] { --element-color: #ff78d5; }
.periodic-element-button[data-element-family="4"] { --element-color: #ffd166; }
.periodic-element-button[data-element-family="5"] { --element-color: #7fa8ff; }

.periodic-element-button:hover,
.periodic-element-button:focus-visible {
    z-index: 1;
    outline: none;
    transform: translateY(-2px) scale(1.025);
    border-color: var(--element-color);
    box-shadow: 0 0 20px color-mix(in srgb, var(--element-color) 34%, transparent), inset 0 0 20px color-mix(in srgb, var(--element-color) 12%, transparent);
}

.periodic-element-button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--element-color) 65%, white 35%);
    background-color: color-mix(in srgb, var(--element-color) 18%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--element-color) 20%, transparent), 0 0 24px color-mix(in srgb, var(--element-color) 42%, transparent);
}

.periodic-number,
.periodic-mass { color: var(--muted); font-size: .67rem; }
.periodic-mass { text-align: right; }
.periodic-element-button strong { grid-column: 1 / -1; color: var(--element-color); font-size: 1.35rem; line-height: 1; }
.periodic-name { overflow: hidden; color: var(--fg); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.periodic-table-status { margin: 0; padding: .75rem 1.1rem 1rem; color: var(--accent-2); font-size: .85rem; }

@media (max-width: 520px) {
    .periodic-table-dialog { width: calc(96vw / var(--page-zoom-factor, 1)); max-height: calc(92dvh / var(--page-zoom-factor, 1)); }
    .periodic-table-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: calc(92dvh / var(--page-zoom-factor, 1) - 11rem); }
    .periodic-table-header { align-items: flex-start; }
}

.container {
    width: min(1200px, 92vw);
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 75;
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.1));
    border-bottom: 1px solid var(--glass-border);
}

.header-inner {
    width: min(1200px, 92%);
    container-type: inline-size;
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}

/* The temporary fullscreen host leaves zoom and visual effects to its page. */
html.fullscreen-host {
    zoom: 1 !important;
    overflow: hidden;
}
html.fullscreen-host body {
    margin: 0;
    min-height: 100dvh;
    filter: none !important;
}
html.fullscreen-host body > :not(#fullscreenPageFrame) {
    display: none !important;
}
#fullscreenPageFrame {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 100;
    background: var(--bg);
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    order: -1;
}

    .menu-toggle::before {
        content: "";
        width: 1.4rem;
        height: 1.4rem;
        background: currentColor;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        opacity: .85;
    }

.sigil {
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .4rem;
    text-decoration: none;
}

    .sigil img {
        width: clamp(56px, 7vw, 72px);
        height: auto;
        display: block;
        filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--neon) 25%, transparent));
        transition: transform .3s ease;
    }

    .sigil:hover img {
        transform: scale(1.02) rotate(-2deg);
    }

.effects-dock {
    order: 3;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    position: static;
}

    .effects-dock .sigil {
        margin: 0;
    }

.fx-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 12;
    display: none;
    align-items: flex-start;
    gap: .35rem;
    overflow: visible;
}

.effects-dock.is-expanded .fx-panel,
.effects-dock[data-expanded="true"] .fx-panel {
    display: flex;
    width: min(48rem, 100%);
    max-width: 100%;
    max-height: min(28rem, calc(100dvh / var(--page-zoom-factor, 1) - var(--header-controls-height, 5rem) - 1rem));
    overflow: auto;
    padding: .35rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--panel-surface);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

.fx-panel .toggles {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding: .2rem;
    scrollbar-width: thin;
}

    .fx-panel .toggles::-webkit-scrollbar {
        height: 6px;
    }

    .fx-panel .toggles::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 999px;
    }

    .fx-panel .toggles .btn-ghost {
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
    }

        .fx-panel .toggles .btn-ghost::before {
            content: "";
            width: 22px;
            height: 22px;
            background: currentColor;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;
        }

.effects-dock .fx-collapse {
    display: inline-flex;
}

.fx-collapse {
    width: 48px;
    flex: 0 0 auto;
    z-index: 1;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: transform .2s ease;
    color: var(--accent);
    background: rgba(255,255,255,.08);
    border: 1px solid var(--glass-border);
}

    .fx-collapse::before {
        content: "";
        width: 20px;
        height: 20px;
        background: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.7 4.8L19 8.5l-4 3.1 1.5 5.2L12 14.6 7.5 16.8 9 11.6l-4-3.1 5.3-1.7z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.7 4.8L19 8.5l-4 3.1 1.5 5.2L12 14.6 7.5 16.8 9 11.6l-4-3.1 5.3-1.7z'/%3E%3C/svg%3E");
        transition: transform .25s ease, -webkit-mask-image .25s ease, mask-image .25s ease;
    }

.comet-launch {
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--glass-border);
    color: var(--accent-2);
    transition: transform .2s ease;
    order: -2;
    margin: 0;
}

.orb-launch,
.orb-remove {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
}

.orb-launch.btn-ghost,
.orb-remove.btn-ghost,
.fullscreen-launch.btn-ghost,
.starfield-rewind-launch.btn-ghost,
.comet-launch.btn-ghost,
.fx-collapse.btn-ghost,
.menu-toggle.btn-ghost {
    padding: 0;
}

.fullscreen-launch {
    width: 40px;
    height: 40px;
    position: relative;
    flex: 0 0 auto;
}

.starfield-rewind-launch {
    width: 40px;
    height: 40px;
    padding: 0;
    position: relative;
    flex: 0 0 auto;
}

.starfield-rewind-launch::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 9px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 17px solid var(--accent-2);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-2) 70%, transparent));
}

.starfield-rewind-launch[aria-pressed="true"] {
    background: color-mix(in srgb, var(--accent) 22%, var(--control-surface));
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 34%, transparent);
}

.fullscreen-launch::before,
.fullscreen-launch::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 2px solid var(--accent-2);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 65%, transparent));
}

.fullscreen-launch::before { border-right-color: transparent; border-bottom-color: transparent; }
.fullscreen-launch::after { border-left-color: transparent; border-top-color: transparent; }
.fullscreen-launch[aria-pressed="true"] { box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 24%, transparent); }

.orb-launch::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid var(--neon);
    border-radius: 50%;
    box-shadow: 0 0 9px color-mix(in srgb, var(--neon) 65%, transparent), inset 0 0 7px color-mix(in srgb, var(--accent) 55%, transparent);
}

.orb-remove::before,
.orb-remove::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-2);
    box-shadow: 0 0 7px color-mix(in srgb, var(--accent-2) 72%, transparent);
}

.orb-remove::before { transform: rotate(45deg); }
.orb-remove::after { transform: rotate(-45deg); }

.scene-dock {
    order: 2;
    margin-left: auto;
}
.scene-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--menu-control-height);
    padding: .55rem .75rem;
    border-radius: 12px;
}
.scene-menu-icon {
    width: 18px;
    height: 18px;
    border: 1px solid var(--neon);
    border-radius: 50%;
    box-shadow: inset 0 0 6px var(--panel-glow), 0 0 8px var(--panel-glow);
}
.scene-menu-chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.scene-menu-toggle[aria-expanded="true"] .scene-menu-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}
.scene-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    width: min(22rem, 100%);
    max-height: min(28rem, calc(100dvh / var(--page-zoom-factor, 1) - var(--header-controls-height, 5rem) - 1rem));
    overflow-y: auto;
    padding: .85rem;
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    background: var(--panel-surface);
    box-shadow: var(--shadow), 0 0 20px var(--panel-glow);
}
.scene-menu[hidden] { display: none; }
.scene-menu > * { min-width: 0; max-width: 100%; }
.scene-menu > button { min-height: var(--menu-control-height); }
.scene-menu select { width: 100%; min-height: var(--menu-control-height); box-shadow: none; }
.scene-menu .scene-action {
    width: 100%;
    height: auto;
    min-height: var(--menu-control-height);
    padding: .65rem .75rem .65rem 2.8rem;
    border-radius: 10px;
    text-align: left;
    line-height: 1.3;
}
.scene-menu .fullscreen-launch::before,
.scene-menu .fullscreen-launch::after,
.scene-menu .orb-launch::before {
    inset: auto;
    left: 12px;
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
}
.scene-menu .starfield-rewind-launch::before { left: 12px; top: calc(50% - 10px); }
.scene-menu .orb-remove::before,
.scene-menu .orb-remove::after { left: 12px; right: auto; top: calc(50% - 1px); width: 20px; }
.scene-orb-status {
    margin-top: .2rem;
    padding: .65rem .3rem .1rem;
    border-top: 1px solid var(--glass-border);
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}
.scene-preset-label {
    margin-top: .35rem;
    padding-top: .85rem;
    border-top: 1px solid var(--glass-border);
    color: var(--fg);
    font-size: .85rem;
    font-weight: 700;
}
#scenePresetApply {
    border-color: var(--control-border);
    background: color-mix(in srgb, var(--accent) 12%, var(--control-surface));
}

@container (max-width: 18rem) {
    .scene-menu-toggle { width: 48px; padding: 0; gap: 0; }
    .scene-menu-toggle > span:not(.scene-menu-icon) { display: none; }
}

.cosmic-tooltip {
    position: fixed;
    z-index: 1400;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: .65rem .8rem;
    pointer-events: none;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-surface);
    color: var(--fg);
    box-shadow: var(--shadow), 0 0 16px var(--panel-glow);
    font-size: .85rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.cosmic-tooltip[hidden] { display: none !important; }
.cosmic-tooltip-action { display: block; font-weight: 600; }
.cosmic-tooltip-aside { display: block; margin-top: .3rem; color: var(--muted); font-size: .78rem; }

.floating-orb-scene {
    position: fixed;
    right: clamp(24px, 7vw, 100px);
    top: 50%;
    z-index: 22;
    width: clamp(200px, 27vw, 300px);
    height: clamp(200px, 27vw, 300px);
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    pointer-events: none;
}

.floating-orb-scene .orb { pointer-events: auto; }

.orb-touch-hint {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    padding: .3rem .55rem;
    border: 1px solid var(--control-border);
    border-radius: 1rem;
    font-size: .72rem;
    white-space: nowrap;
    color: var(--fg);
    background: var(--control-surface);
    pointer-events: none;
}

@media (pointer: coarse) { .orb-touch-hint { display: block; } }

.orb.is-released,
.orb.is-released.is-copy,
.orb.is-released:not(.is-copy) {
    position: fixed;
    left: var(--orb-scene-x);
    top: var(--orb-scene-y);
    z-index: 0;
    width: min(calc(var(--orb-size, 320px) * var(--orb-release-scale, 1)), 88vw);
    margin: 0 !important;
    transform: translate(-50%, -50%);
    cursor: default;
}

.orb.is-released[hidden] { display: none; }

.orb-context-menu {
    --orb-control-height: max(44px, calc(44px / var(--page-zoom-factor, 1)));
    position: fixed;
    z-index: 80;
    width: min(360px, calc(100vw / var(--page-zoom-factor, 1) - 24px));
    padding: 1rem;
    max-height: calc(100dvh / var(--page-zoom-factor, 1) - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    background: var(--panel-surface);
    box-shadow: var(--shadow), 0 0 24px color-mix(in srgb, var(--neon) 12%, transparent), inset 0 1px var(--glass-border);
    backdrop-filter: blur(24px) saturate(1.25);
}

.orb-context-menu[hidden] { display: none; }
.orb-context-menu::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--neon), var(--accent), var(--accent-2));
    box-shadow: 0 0 16px color-mix(in srgb, var(--neon) 62%, transparent);
}
.orb-context-header,
.orb-context-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .85rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
}
.orb-context-menu h3 {
    margin: 0;
    color: var(--fg);
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.orb-context-header .orb-context-close,
.orb-context-heading .orb-context-close {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 var(--orb-control-height);
    width: var(--orb-control-height);
    height: var(--orb-control-height);
    min-width: var(--orb-control-height);
    padding: 0;
    border-radius: 50%;
    color: var(--fg);
    line-height: 1;
    box-shadow: none;
}
.orb-context-close::before,
.orb-context-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}
.orb-context-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#orbSettingsFields { min-width: 0; }
#orbSettingsFields[hidden],
.orb-empty-state[hidden] { display: none; }
#orbSettingsStatus {
    display: block;
    margin: .3rem 0 .8rem;
    padding: .55rem .65rem;
    border-left: 2px solid var(--accent);
    border-radius: 0 8px 8px 0;
    color: var(--muted);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    font-size: .8rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.orb-empty-state {
    display: grid;
    gap: .8rem;
    padding: .6rem .2rem .2rem;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.6;
}
.orb-empty-state p { margin: 0; }
.orb-empty-state button { width: 100%; min-height: var(--orb-control-height); }
.orb-context-menu a {
    display: inline-flex;
    align-items: center;
    min-height: var(--orb-control-height);
    color: var(--neon);
    text-decoration: underline;
    text-underline-offset: .2em;
    font-size: .85rem;
    line-height: 1.4;
}
.orb-context-menu button:focus-visible,
.orb-context-menu a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}
.orb-context-menu label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: center;
    min-height: var(--orb-control-height);
    gap: .8rem;
    margin: .55rem 0;
    color: var(--muted);
    font-size: .86rem;
}
.orb-context-menu input[type="range"] { width: 100%; min-width: 0; margin: 0; }
.orb-context-menu input[type="number"],
.orb-context-menu input[type="text"],
.orb-context-menu select {
    width: 132px;
    min-height: var(--orb-control-height);
    font-size: 16px;
    min-width: 0;
    padding: .4rem .55rem;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    background-color: var(--control-surface);
    color: var(--fg);
    -webkit-text-fill-color: var(--fg);
    caret-color: var(--neon);
}
.orb-context-menu select { padding-right: 2.6rem; }
.orb-context-menu select option { color: var(--fg); background: var(--bg-2); }
.orb-context-menu input:focus-visible,
.orb-context-menu select:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.orb-context-menu input[type="checkbox"] {
    justify-self: end;
    width: max(22px, calc(22px / var(--page-zoom-factor, 1)));
    height: max(22px, calc(22px / var(--page-zoom-factor, 1)));
    accent-color: var(--neon);
}
.orb-release-help { margin: .65rem 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.orb-context-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--glass-border); }
.orb-context-actions button { flex: 1 1 120px; min-height: var(--orb-control-height); padding: .55rem .65rem; font-size: .85rem; }

@media (max-width: 380px) {
    .orb-context-menu label { grid-template-columns: minmax(0, 1fr) minmax(0, 120px); gap: .5rem; }
    .orb-context-menu input[type="number"], .orb-context-menu input[type="text"], .orb-context-menu select { width: 100%; }
}

    .comet-launch::before {
        content: "☄";
        font-size: 1.05rem;
        line-height: 1;
        color: currentColor;
        text-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 55%, transparent);
    }

    .comet-launch[aria-pressed="true"] {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon) 18%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 44%, transparent);
        transform: translateY(-1px);
    }

.effects-dock.is-expanded .fx-collapse::before,
.effects-dock[data-expanded="true"] .fx-collapse::before {
    transform: rotate(90deg);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v2H4zm0 7h16v2H4zm0 7h16v2H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v2H4zm0 7h16v2H4zm0 7h16v2H4z'/%3E%3C/svg%3E");
}

.nav {
    order: 1;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    margin: 0 auto;
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: normal;
    min-width: 0;
    align-content: center;
    row-gap: .12rem;
    padding: .15rem 0;
}

    .nav a {
        color: var(--fg);
        opacity: .9;
        text-decoration: none;
        padding: .5rem .75rem;
        border-radius: 8px;
    }

        .nav a:hover {
            background: var(--glass);
        }

        .nav a.active {
            box-shadow: inset 0 0 0 2px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 38%, transparent);
        }

    .nav .nav-break {
        flex-basis: 100%;
        height: 0;
    }

    .nav .nav-secondary-row {
        flex-basis: 100%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: .3rem;
    }

    .nav a.nav-secondary {
        text-align: center;
        opacity: .8;
        font-size: .9rem;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

.header-inner.effects-open .nav {
    justify-content: center;
    margin: 0 auto;
}

.toggles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    order: 2;
    margin-left: auto;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.site-header.nav-open .menu-toggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 5.3 5.3 6.4 10.9 12l-5.6 5.6 1.1 1.1L12 13.1l5.6 5.6 1.1-1.1-5.6-5.6 5.6-5.6-1.1-1.1L12 10.9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 5.3 5.3 6.4 10.9 12l-5.6 5.6 1.1 1.1L12 13.1l5.6 5.6 1.1-1.1-5.6-5.6 5.6-5.6-1.1-1.1L12 10.9z'/%3E%3C/svg%3E");
}

@media (min-width: 961px) {
    .menu-toggle {
        display: none !important;
    }

    .header-inner {
        position: relative;
    }

    .site-header .nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        width: max-content;
        max-width: min(760px, calc(100% - 340px));
        justify-content: center;
        align-content: center;
    }
}

@media (max-width: 1160px) and (min-width: 961px) {
    .site-header .nav {
        position: static;
        transform: none;
        max-width: 100%;
        width: auto;
        margin: 0 auto;
    }
}

.toggles .btn-ghost {
    margin-left: .35rem;
    width: 40px;
    height: 40px;
    padding: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .toggles .btn-ghost::before {
        content: "";
        width: 1.2rem;
        height: 1.2rem;
        background: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        opacity: .9;
    }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.site-header.glass {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

main {
    flex: 1;
    width: 100%;
    padding: 1.5rem 0 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.hero {
    width: min(1100px, 95vw);
    margin: 1.2rem auto 0;
    padding: 2.2rem 2rem;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
    align-items: center;
}

.hero-inner > * { min-width: 0; }

.hero-copy {
    text-align: left;
}

    .hero-copy h1 {
        font-size: clamp(2.4rem, 6vw, 4rem);
        margin: 0;
        letter-spacing: .5px;
    }

.hero .spark {
    color: var(--neon);
    text-shadow: 0 0 12px color-mix(in srgb, var(--neon) 55%, transparent);
}

.hero .glow {
    color: var(--accent);
    text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);
}

.headline {
    margin: .65rem 0 .35rem;
    font-weight: 600;
    color: var(--fg);
    opacity: .9;
}

.hero-copy .headline {
    text-align: left;
}

.subtext {
    color: var(--muted);
    margin-bottom: 1.1rem;
}

.hero-copy .subtext {
    text-align: left;
}

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.site-features-prompt {
    display: grid;
    justify-items: start;
    gap: .55rem;
    margin-top: .9rem;
}

.site-features-prompt p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}

.quick-facts {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: .4rem;
}

    .quick-facts a {
        color: var(--neon);
        text-decoration: none;
    }

.badges {
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.eyebrow {
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: 2px;
    color: var(--accent-2);
    margin-bottom: .75rem;
    display: inline-block;
}

.hero-right {
    display: grid;
    place-items: center;
    position: relative;
}

.orb.is-copy {
    position: absolute;
    width: min(var(--orb-size, 190px), 88vw);
    z-index: 0;
    opacity: .72;
}

.orb:not(.is-copy) { z-index: 1; }

.orb.is-copy:nth-of-type(2) { margin: -48% 0 0 -58%; }
.orb.is-copy:nth-of-type(3) { margin: 44% -62% 0 0; }
.orb.is-copy:nth-of-type(4) { margin: -55% -58% 0 0; }

.orb {
    --orb-primary: var(--neon);
    --orb-secondary: var(--accent);
    --orb-tertiary: var(--accent-2);
    --orb-x: 0px;
    --orb-y: 0px;
    --orb-dynamics-x: 0px;
    --orb-dynamics-y: 0px;
    --orb-depth-scale: 1;
    --orb-tilt-x: 0deg;
    --orb-tilt-y: 0deg;
    --orb-light-x: 32%;
    --orb-light-y: 27%;
    --orb-parallax-x: 0px;
    --orb-parallax-y: 0px;
    position: relative;
    width: min(var(--orb-size, 320px), 88vw);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--orb-primary) 30%, transparent), transparent 50%), radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--orb-secondary) 25%, transparent), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--orb-tertiary) 18%, transparent), color-mix(in srgb, var(--orb-secondary) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--orb-primary) 35%, white 15%);
    box-shadow: 0 0 60px color-mix(in srgb, var(--orb-primary) 18%, transparent), inset 0 0 60px color-mix(in srgb, var(--orb-secondary) 12%, transparent);
    cursor: grab;
    touch-action: none;
    transform: translate3d(calc(var(--orb-x) + var(--orb-dynamics-x)), calc(var(--orb-y) + var(--orb-dynamics-y)), 0) perspective(700px) rotateX(var(--orb-tilt-x)) rotateY(var(--orb-tilt-y)) scale(var(--orb-depth-scale));
    transform-style: preserve-3d;
    transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, opacity .25s ease;
    will-change: transform;
    pointer-events: auto;
}

.orb.is-dragging { cursor: grabbing; transition: background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.orb:is(:focus-visible, .is-interacting, .is-dragging) {
    border-color: color-mix(in srgb, var(--orb-secondary) 65%, transparent);
    box-shadow: 0 0 70px color-mix(in srgb, var(--orb-primary) 28%, transparent), inset 0 0 50px color-mix(in srgb, var(--orb-secondary) 16%, transparent);
}
.orb:focus-visible { outline: 2px solid var(--orb-secondary); outline-offset: 7px; }

.runes {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.orb,
.orb * {
    user-select: none;
    -webkit-user-select: none;
}

/* Lit spherical material: pointer movement shifts light without spinning the ring. */
.orb-saturn-ring {
    position: absolute;
    width: var(--orb-disk-size, 100%);
    height: var(--orb-disk-size, 100%);
    fill: none;
    stroke: var(--orb-secondary);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 5px var(--orb-primary));
    animation: none;
    transition: filter .18s ease, stroke .18s ease;
}
.orb-saturn-ring ellipse, .orb-saturn-ring path { vector-effect: non-scaling-stroke; }
.orb-saturn-ring--back { z-index: 1; }
.orb-saturn-ring--front { z-index: 3; }
.orb-body {
    position: relative;
    z-index: 2;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--orb-tertiary);
    isolation: isolate;
    transform: translate3d(calc(var(--orb-parallax-x) * .28), calc(var(--orb-parallax-y) * .28), 0);
    box-shadow: 0 10px 24px #0008, 0 0 34px color-mix(in srgb, var(--orb-primary) 38%, transparent), inset 0 0 1px 1px color-mix(in srgb, var(--orb-secondary) 78%, transparent);
    transition: transform .14s ease-out, box-shadow .18s ease;
}
.orb-material, .orb-space-grains, .orb-limb { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.orb-material {
    inset: -7%;
    background: radial-gradient(ellipse at 28% 22%, color-mix(in srgb, var(--orb-secondary) 70%, transparent), transparent 44%), repeating-linear-gradient(165deg, var(--orb-primary) 0 8%, var(--orb-tertiary) 12%, var(--orb-primary) 19%);
    transform: translate3d(calc(var(--orb-parallax-x) * -.45), calc(var(--orb-parallax-y) * -.45), 0);
    transition: transform .14s ease-out;
}
.orb-space-grains {
    inset: -5%;
    opacity: .6;
    background: radial-gradient(circle at 24% 38%, var(--orb-secondary) 0 .45%, transparent 1.5%), radial-gradient(circle at 68% 60%, var(--orb-secondary) 0 .55%, transparent 1.6%), radial-gradient(circle at 42% 76%, var(--orb-secondary) 0 .7%, transparent 1.9%), radial-gradient(circle at 76% 24%, var(--orb-primary) 0 .5%, transparent 1.6%), radial-gradient(ellipse at 35% 39%, #fff3, transparent 35%);
    transform: translate3d(calc(var(--orb-parallax-x) * .65), calc(var(--orb-parallax-y) * .65), 0);
    transition: transform .14s ease-out;
}
.orb-limb {
    z-index: 2;
    background: radial-gradient(circle at var(--orb-light-x) var(--orb-light-y), #fff1 0, transparent 24%, #0002 43%, #0008 69%, #000e 100%);
    box-shadow: inset 0 0 14px #0009, inset 0 0 2px 1px color-mix(in srgb, var(--orb-secondary) 70%, transparent);
}
.orb-body::before, .orb-body::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
.orb-body::before {
    z-index: 3;
    background: radial-gradient(ellipse at var(--orb-light-x) var(--orb-light-y), #ffff 0, #fff9 2%, #fff4 6%, transparent 19%), radial-gradient(ellipse at var(--orb-light-x) var(--orb-light-y), color-mix(in srgb, var(--orb-secondary) 48%, transparent), transparent 48%);
    opacity: calc(.6 + var(--orb-interaction-strength) * .16);
    mix-blend-mode: screen;
    transition: opacity .18s ease;
}
.orb-body::after {
    z-index: 4;
    background: radial-gradient(circle at 50% 50%, transparent 70%, color-mix(in srgb, var(--orb-primary) 65%, transparent) 89%, color-mix(in srgb, var(--orb-secondary) 75%, white) 98%, transparent 100%);
    opacity: .72;
}
.orb[data-element-visual="stellar"] .orb-material { background: radial-gradient(ellipse at 27% 24%, var(--orb-secondary), transparent 36%), repeating-radial-gradient(ellipse at 62% 65%, color-mix(in srgb, var(--orb-primary) 70%, var(--orb-secondary)) 0 2%, var(--orb-primary) 3% 5%, var(--orb-tertiary) 9%, var(--orb-primary) 12%); }
.orb[data-element-visual="stellar"] .orb-space-grains { background: radial-gradient(ellipse at 34% 42%, #fff8, transparent 16%), radial-gradient(ellipse at 68% 67%, var(--orb-secondary), transparent 20%), repeating-conic-gradient(from 24deg at 38% 46%, transparent 0deg 20deg, color-mix(in srgb, var(--orb-secondary) 60%, transparent) 21deg 24deg, transparent 25deg 49deg); opacity: .45; }
.orb[data-element-visual="metallic"] .orb-material { background: linear-gradient(128deg, var(--orb-tertiary) 4%, var(--orb-secondary) 24%, var(--orb-primary) 37%, var(--orb-tertiary) 54%, var(--orb-secondary) 69%, var(--orb-primary) 85%); }
.orb[data-element-visual="metallic"] .orb-space-grains { background: repeating-linear-gradient(128deg, #fff0 0 1px, #fff2 2px, #0001 3px, #fff0 4px 7px); opacity: .35; }
.orb[data-element-visual="mineral"] .orb-material { background: conic-gradient(from 35deg at 37% 43%, var(--orb-primary) 0deg 35deg, var(--orb-tertiary) 35deg 88deg, var(--orb-secondary) 88deg 131deg, var(--orb-primary) 131deg 186deg, var(--orb-tertiary) 186deg 252deg, var(--orb-primary) 252deg 320deg, var(--orb-secondary) 320deg); }
.orb[data-element-visual="mineral"] .orb-space-grains { background: conic-gradient(from 105deg at 65% 64%, #fff0 0deg 86deg, #fff3 86deg 139deg, #0003 139deg 246deg, #fff0 246deg), radial-gradient(circle at 24% 38%, #fffc 0 .4%, transparent 1.1%), radial-gradient(circle at 70% 45%, #fff8 0 .6%, transparent 1.4%); }
.orb[data-element-visual="liquid"] .orb-material { background: repeating-radial-gradient(ellipse at 28% 35%, var(--orb-secondary) 0 2%, var(--orb-primary) 6%, var(--orb-tertiary) 11%, var(--orb-primary) 15%); }
.orb[data-element-visual="liquid"] .orb-space-grains { background: radial-gradient(ellipse at 34% 48%, #fff0 22%, #fff7 23%, #fff0 25%), radial-gradient(ellipse at 75% 69%, #fff0 16%, #fff5 17%, #fff0 20%); opacity: .45; }
.orb[data-element-visual="energetic"] .orb-material { background: radial-gradient(ellipse at 65% 38%, var(--orb-secondary), transparent 26%), conic-gradient(from 28deg, var(--orb-primary), var(--orb-tertiary), var(--orb-secondary), var(--orb-primary)); }
.orb[data-element-visual="energetic"] .orb-space-grains { background: repeating-conic-gradient(from 20deg at 56% 48%, #fff0 0deg 34deg, #fff5 35deg 36deg, #fff0 38deg 64deg), radial-gradient(circle at 56% 48%, #fff8, transparent 14%); opacity: .6; }
.orb:is(.is-interacting, .is-dragging, :focus-visible) .orb-body { box-shadow: 0 12px 28px #0009, 0 0 42px color-mix(in srgb, var(--orb-primary) 55%, transparent), inset 0 0 1px 1px var(--orb-secondary); }
.orb:is(.is-interacting, .is-dragging, :focus-visible) .orb-saturn-ring { filter: drop-shadow(0 0 7px var(--orb-primary)); }
/* Subtle static motifs are clipped inside the circular element mass, beneath
   its reflected light and shaded limb. Actual space objects belong to the
   starfield; these surface details never replace its material or shape. */
.orb-object-art {
    position: absolute;
    top: 4%;
    left: 4%;
    z-index: 1;
    width: 92%;
    height: 92%;
    overflow: hidden;
    color: var(--orb-secondary);
    fill: none;
    opacity: .48;
    pointer-events: none;
    animation: none;
    filter: none;
    transform: translate3d(calc(var(--orb-parallax-x) * .22), calc(var(--orb-parallax-y) * .22), 0);
    transition: transform .14s ease-out;
}
.orb-object-art .depiction-cloud { fill: var(--orb-primary); stroke: var(--orb-primary); }
.orb-object-art :is(.depiction-core, .depiction-stars) { fill: var(--orb-secondary); }
.orb-object-art :is(.depiction-tail, .depiction-filaments, .depiction-corona, .depiction-jets, .depiction-accretion) { stroke: var(--orb-secondary); }
.orb-object-art .depiction-dust { fill: var(--orb-tertiary); stroke: var(--orb-tertiary); }
.orb-object-art .depiction-rock { fill: var(--orb-primary); }
.orb-object-art .depiction-rock-light { fill: var(--orb-secondary); }
.orb-object-art .depiction-craters { stroke: var(--orb-tertiary); }
.orb-object-art .depiction-shadow { fill: color-mix(in srgb, var(--orb-tertiary) 30%, #03050b); stroke: none; }
.orb-object-art .depiction-terrain { fill: var(--orb-primary); }
.orb-object-art .depiction-ice { fill: var(--orb-secondary); }
.orb-object-art [fill="none"] { fill: none; }
@media (prefers-reduced-motion: reduce) {
    .orb-object-art { transform: none; transition: none; }
}

.orb-element-name {
    position: absolute;
    top: 83%;
    z-index: 4;
    max-width: 76%;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .06em;
    overflow-wrap: anywhere;
    text-align: center;
    color: var(--orb-secondary);
    text-shadow: 0 1px 4px #000, 0 0 8px var(--orb-primary);
}
.pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 70px color-mix(in srgb, var(--orb-secondary) 20%, transparent);
}

.orb-impact-canvas {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.orb .runes,
.orb .pulse { transition: opacity .18s ease, transform .28s ease; }
.orb.is-shattered .runes,
.orb.is-shattered .pulse { opacity: 0; transform: scale(.72); }


.section {
    width: min(1100px, 95vw);
    padding: 1.6rem 1.6rem;
    margin: 0 auto;
    text-align: center;
}

    .section .center-wrap {
        width: min(1000px, 92vw);
        margin: 0 auto;
    }

h3 {
    margin: .2rem 0 1rem;
    font-size: 1.4rem;
    letter-spacing: .5px;
}

h4 {
    margin: .25rem 0 .5rem;
}

/* Release history keeps each version easy to scan and expand with the keyboard. */
.updates-intro .center-wrap { width: 100%; }

.updates-intro h1 {
    margin: 0 0 .55rem;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    line-height: 1.2;
    letter-spacing: .02em;
}

.updates-intro .muted { max-width: 42rem; margin: 0 auto; }

#release-history .center-wrap {
    width: 100%;
    min-width: 0;
}

#release-history,
.release-disclosure > summary { scroll-margin-top: 11rem; }

#release-history h2,
#release-history h3 {
    margin: 0 0 .5rem;
}

.release-history-list {
    display: grid;
    gap: .75rem;
    width: 100%;
    min-width: 0;
    margin: 1.25rem 0 0;
    padding: 0;
    text-align: left;
    list-style: none;
}

.release-history-list > li { min-width: 0; }

.release-disclosure {
    min-width: 0;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel-surface) 94%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-border) 65%, transparent);
    transition: border-color .2s ease, background-color .2s ease;
}

.release-disclosure:hover,
.release-disclosure[open] {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-border));
}

.release-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding: .85rem 1rem;
    border-radius: 13px;
    color: var(--fg);
    text-align: left;
    list-style: none;
    cursor: pointer;
}

.release-disclosure > summary::-webkit-details-marker { display: none; }

.release-disclosure > summary::after {
    content: '';
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    margin: 0 .15rem .2rem 0;
    border-right: 2px solid var(--neon);
    border-bottom: 2px solid var(--neon);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.release-disclosure[open] > summary::after { transform: rotate(225deg); }

.release-disclosure > summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.release-heading {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem .7rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.release-version {
    color: var(--fg);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.release-name { color: var(--muted); font-size: .95rem; }

.release-status {
    padding: .12rem .5rem;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--glass-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--fg);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.5;
}

.release-notes {
    margin: 0 1rem 1rem;
    padding: .85rem .25rem 0 1.2rem;
    border-top: 1px solid var(--glass-border);
    color: var(--muted);
    line-height: 1.65;
    text-align: left;
    overflow-wrap: anywhere;
    list-style: disc;
}

.release-notes li + li { margin-top: .45rem; }
.release-notes li::marker { color: var(--accent); }
.release-notes strong { color: var(--fg); }

@media (max-width: 540px) {
    .release-history-list { gap: .65rem; }
    .release-disclosure > summary { gap: .75rem; padding: .8rem .85rem; }
    .release-heading { column-gap: .55rem; }
    .release-notes { margin: 0 .85rem .85rem; font-size: .9rem; }
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .9rem;
    justify-items: center;
    margin-top: 1.1rem;
}

    .info-grid > div {
        width: 100%;
        padding: .75rem .85rem;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.08);
        background: rgba(255,255,255,.03);
        text-align: left;
    }

    .info-grid .label {
        display: block;
        font-size: .8rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        opacity: .7;
        color: var(--neon);
        margin-bottom: .35rem;
    }

.skills-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 1.5rem;
    align-items: center;
    justify-items: center;
}

    .skills-layout canvas {
        width: min(100%, 500px);
        max-width: 100%;
        height: auto;
        display: block;
    }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.chip, .badge {
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 600;
    background: rgba(125,249,255,.12);
    border: 1px solid rgba(125,249,255,.25);
    color: var(--fg);
}

.badge {
    background: rgba(178,146,255,.12);
    border-color: rgba(178,146,255,.25);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
    align-items: stretch;
}

.info-card {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    box-shadow: var(--shadow);
    text-align: left;
    min-width: 0;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    height: 100%;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

.service {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid var(--glass-border);
    text-align: left;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.filters {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    justify-content: center;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    justify-content: center;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

.card {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: .9rem;
    box-shadow: var(--shadow);
    text-align: left;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
    gap: .55rem;
    height: 100%;
}

.project-grid .card h4 {
    margin: 0;
}

.card .tags {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.project-grid .card .tags {
    margin-top: 0;
    justify-content: flex-start;
}

.card .desc {
    color: var(--muted);
    margin: 0;
}

.project-grid .card ul {
    margin: .4rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
    display: grid;
    gap: .35rem;
}

    .project-grid .card ul li::marker {
        color: var(--accent);
    }

.timeline {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    border-left: 2px dashed rgba(255,255,255,.15);
    padding-left: 1rem;
    width: min(800px, 95%);
    text-align: left;
}

    .timeline li {
        margin: .85rem 0;
        position: relative;
    }

        .timeline li::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--accent);
            position: absolute;
            left: calc(-1rem - 5px);
            top: .4rem;
            box-shadow: 0 0 12px rgba(178,146,255,.6);
        }

    .timeline h4 {
        margin: 0;
    }

    .experience-disclosure {
        border: 1px solid transparent;
        border-radius: 12px;
        transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    }

    .experience-disclosure:hover,
    .experience-disclosure[open] {
        border-color: var(--glass-border);
        background: color-mix(in srgb, var(--glass) 82%, transparent);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
    }

    .experience-disclosure > summary {
        position: relative;
        display: grid;
        gap: .18rem;
        padding: .65rem 2.6rem .65rem .75rem;
        cursor: pointer;
        list-style: none;
    }

    .experience-disclosure > summary::-webkit-details-marker {
        display: none;
    }

    .experience-disclosure > summary::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 1rem;
        width: .65rem;
        height: .65rem;
        border-right: 2px solid var(--neon);
        border-bottom: 2px solid var(--neon);
        transform: translateY(-70%) rotate(45deg);
        transition: transform .2s ease;
    }

    .experience-disclosure[open] > summary::after {
        transform: translateY(-30%) rotate(225deg);
    }

    .experience-disclosure > summary:focus-visible {
        outline: 2px solid var(--neon);
        outline-offset: 2px;
        border-radius: 10px;
    }

    .experience-disclosure[open] > ul {
        padding-right: .75rem;
        padding-bottom: .7rem;
    }

    .timeline .meta {
        color: var(--muted);
        font-size: .95rem;
        margin-bottom: .35rem;
        display: block;
    }

    .experience-disclosure > summary .meta {
        margin-bottom: 0;
    }

    .timeline ul {
        list-style: none;
        margin: .45rem 0 0;
        padding: 0 0 0 1.4rem;
        display: grid;
        gap: .35rem;
    }

        .timeline ul li {
            position: relative;
            color: var(--muted);
        }

            .timeline ul li::before {
                content: "";
                position: absolute;
                top: .55rem;
                left: -1.4rem;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--accent);
                box-shadow: 0 0 10px rgba(178,146,255,.45);
            }

.edu-list {
    list-style: none;
    padding: 0;
    width: min(800px, 95%);
    margin: 0 auto;
    text-align: left;
}

    .edu-list li {
        margin: .6rem 0;
    }

    .edu-list .meta {
        color: var(--muted);
        font-size: .95rem;
        display: inline-block;
        margin-left: .35rem;
    }

.contact-form {
    display: grid;
    gap: .75rem;
    width: min(800px, 95%);
    margin: 0 auto;
}

.contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.contact-cards .contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    padding: 1rem 1.2rem;
    min-width: 0;
    width: 100%;
}

.contact-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(125,249,255,.08);
    border: 1px solid rgba(125,249,255,.25);
    box-shadow: 0 8px 20px rgba(17,31,48,.35);
    flex-shrink: 0;
}

    .contact-icon svg {
        width: 22px;
        height: 22px;
        fill: var(--neon);
    }

.contact-head h4 {
    margin: 0;
    flex: 0 0 auto;
}

.contact-detail {
    text-align: left;
    margin: .45rem 0 0;
    color: var(--muted);
}

.contact-cards {
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.contact-detail a {
    color: var(--neon);
}

    .contact-detail a:hover {
        text-decoration: underline;
    }

.contact-head .contact-detail {
    margin: 0;
    flex: 1 1 100%;
    width: 100%;
    margin-top: .35rem;
}

.contact-form .row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .75rem;
}

    .contact-form .row.actions-row {
        display: flex;
        justify-content: center;
        gap: .75rem;
    }

.contact-form label {
    display: grid;
    gap: .35rem;
    text-align: left;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    background: var(--control-surface);
    color: var(--fg);
    border: 1px solid var(--control-border);
    border-radius: 10px;
    padding: .6rem .7rem;
}

.contact-form textarea { min-height: 8rem; resize: vertical; }

    .contact-form input:focus, .contact-form textarea:focus {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
        border-color: var(--neon);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 15%, transparent);
    }

.btn-primary, .btn-secondary, .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    text-decoration: none;
    cursor: pointer;
    padding: .6rem .85rem;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .2px;
    border: 1px solid transparent;
    color: var(--bg);
    background: var(--neon);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--neon) 28%, transparent);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.btn-secondary {
    background: var(--accent);
    color: var(--bg);
}

.btn-ghost {
    background: rgba(255,255,255,.08);
    color: var(--fg);
    border-color: var(--glass-border);
}

    .btn-ghost[aria-pressed="true"] {
        background: color-mix(in srgb, var(--neon) 16%, transparent);
        border-color: color-mix(in srgb, var(--neon) 45%, transparent);
        color: var(--accent);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon) 12%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 38%, transparent);
    }

    .btn-primary:focus-visible,
    .btn-secondary:focus-visible,
    .btn-ghost:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }

.btn-primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--neon) 42%, transparent);
}

.btn-secondary:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 42%, transparent);
}

.btn-ghost:hover {
    background: rgba(255,255,255,.12);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 26%, transparent);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled {
    opacity: .55;
    filter: none;
    box-shadow: none;
}

.site-footer {
    border-top: 1px solid var(--glass-border);
    color: var(--muted);
    padding: 1.2rem 0;
    flex-shrink: 0;
    text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.2));
    margin-top: 2rem;
}

    .site-footer .container {
        display: flex;
        justify-content: center;
    }

    .site-footer .footer-main {
        display: grid;
        grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
        align-items: center;
        gap: .5rem;
        width: 100%;
        max-width: min(1100px, 90vw);
    }

    .site-footer .footer-brand {
        justify-self: start;
        text-align: left;
    }

    .site-footer .footer-copy {
        justify-self: center;
        text-align: center;
    }

    .site-footer .footer-copy a {
        color: var(--neon);
        font-weight: 700;
        text-decoration: none;
    }

    .site-footer .footer-copy a:hover,
    .site-footer .footer-copy a:focus-visible {
        text-decoration: underline;
    }

    .site-footer .footer-version {
        justify-self: end;
        text-align: right;
    }

    .site-footer .sep {
        opacity: .5;
        margin: 0 .4rem;
    }

    .site-footer .footer-sep-brand,
    .site-footer .footer-sep-version {
        display: none;
    }

.muted {
    color: var(--muted);
    font-size: .95rem;
}

.fx-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity .45s ease;
}

    .fx-layer.fx-scanlines {
        background-image: repeating-linear-gradient( to bottom, rgba(255,255,255,.2) 0, rgba(255,255,255,.2) 1px, transparent 3px );
        mix-blend-mode: screen;
    }

body.scanlines-active .fx-scanlines {
    opacity: .2;
}

.fx-layer.fx-vignette {
    background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.65) 100%);
    mix-blend-mode: multiply;
    z-index: 5;
}

body.vignette-active .fx-vignette {
    opacity: .75;
}


.fx-layer.fx-comet {
    z-index: 6;
    pointer-events: none;
    mix-blend-mode: screen;
}

.fx-layer.fx-aurora {
    background: radial-gradient(160% 80% at 20% 20%, color-mix(in srgb, var(--neon) 28%, transparent) 0%, transparent 60%), radial-gradient(140% 120% at 80% 30%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 65%), radial-gradient(200% 120% at 50% 80%, color-mix(in srgb, var(--accent-2) 20%, transparent) 0%, transparent 70%);
    background-size: 120% 120%;
    mix-blend-mode: screen;
    animation: auroraFlow 18s ease-in-out infinite alternate;
    z-index: 2;
}

body.aurora-active .fx-aurora {
    opacity: .55;
}

body.focus-active .glass {
    border-color: color-mix(in srgb, var(--neon) 45%, var(--glass-border));
    box-shadow: 0 20px 60px color-mix(in srgb, var(--neon) 20%, transparent), inset 0 0 32px color-mix(in srgb, var(--neon) 10%, transparent);
}

body.mono-active main,
body.mono-active .glass {
    filter: saturate(.55) contrast(1.05);
}

body.mono-active .spark,
body.mono-active .glow {
    filter: saturate(1.2);
}

@keyframes auroraFlow {
    0% {
        background-position: 0% 0%;
        opacity: .45;
    }

    50% {
        background-position: 100% 100%;
        opacity: .6;
    }

    100% {
        background-position: 0% 100%;
        opacity: .48;
    }
}

/* Layout helpers */
.gridlines::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

.fx-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='8' y='18' width='4' height='4' fill='%23ffffff' opacity='.2'/%3E%3Crect x='58' y='6' width='3' height='3' fill='%23ffffff' opacity='.14'/%3E%3Crect x='96' y='26' width='5' height='5' fill='%23ffffff' opacity='.18'/%3E%3Crect x='18' y='74' width='4' height='4' fill='%23ffffff' opacity='.15'/%3E%3Crect x='74' y='62' width='3' height='3' fill='%23ffffff' opacity='.18'/%3E%3Crect x='102' y='88' width='4' height='4' fill='%23ffffff' opacity='.16'/%3E%3Crect x='46' y='98' width='3' height='3' fill='%23ffffff' opacity='.14'/%3E%3Crect x='28' y='40' width='3' height='3' fill='%23ffffff' opacity='.16'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity .45s ease;
}

body.noise-active .fx-noise {
    opacity: .16;
}

body.bloom-active #starfield,
body.bloom-active #matrix {
    filter: saturate(1.12) brightness(1.04);
}

body.bloom-active .glass {
    box-shadow: 0 20px 58px color-mix(in srgb, var(--neon) 20%, transparent);
    border-color: var(--control-border);
}

    body.bloom-active .spark,
    body.bloom-active .glow {
        text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);
    }

    body.bloom-active .site-header {
        box-shadow: 0 12px 40px rgba(0,0,0,.45);
    }

/* matrix canvas hidden state */
#matrix[hidden] {
    display: none !important;
}

/* Responsive */
@media (max-width: 960px) {
    .header-inner {
        flex-wrap: wrap;
        gap: .3rem;
        align-items: flex-start;
    }

    .menu-toggle {
        display: inline-flex;
        order: -1;
    }

    .nav {
        order: 4;
        flex-basis: 100%;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
        padding: .7rem;
        margin: 0;
        background: var(--panel-surface);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        box-shadow: 0 18px 44px rgba(0,0,0,.55);
        white-space: normal;
    }

    .site-header.nav-open .nav {
        display: flex;
        max-height: calc(100dvh / var(--page-zoom-factor, 1) - var(--header-controls-height, 5rem) - 1rem);
        overflow-y: auto;
    }

    .nav a {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .nav .nav-break {
        display: none;
    }

    .nav .nav-secondary-row {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .2rem;
    }

    .nav a.nav-secondary {
        width: 100%;
        text-align: left;
        padding-left: 1rem;
        opacity: .88;
    }

    .effects-dock {
        order: 3;
        margin-left: 0;
        position: static;
    }

    .comet-launch {
        order: -2;
        margin: 0;
    }

    .header-inner.effects-open .nav {
        justify-content: flex-start;
        margin: 0;
    }

    .effects-dock.is-expanded .fx-panel,
    .effects-dock[data-expanded="true"] .fx-panel {
        width: min(32.5rem, 100%);
        max-width: 100%;
        right: 0;
    }

    .fx-panel .toggles {
        flex-wrap: wrap;
        gap: .4rem;
        justify-content: flex-end;
    }

        .fx-panel .toggles .btn-ghost {
            width: 56px;
            height: 56px;
        }
}

@media (max-width: 1050px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-copy {
        text-align: center;
    }

        .hero-copy .headline, .hero-copy .subtext {
            text-align: center;
        }

    .hero .cta {
        justify-content: center;
    }

    .hero .site-features-prompt {
        justify-items: center;
    }

    .badges {
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .section {
        width: min(1000px, 96vw);
    }

        .section .center-wrap {
            width: 100%;
        }
}

@media (max-width: 780px) {
    .hero {
        padding: 1.8rem 1.4rem;
    }

    .info-grid > div {
        text-align: center;
    }
}

@media (max-width: 640px) {
    .contact-form .row {
        grid-template-columns: 1fr;
    }

        .contact-form .row.actions-row {
            flex-direction: column;
        }
}

@media (max-width: 720px) {
    .card-grid, .service-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nav {
        justify-content: flex-start;
        gap: .25rem;
    }

        .nav a {
            padding: .45rem .6rem;
            font-size: .92rem;
        }

    .contact-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 540px) {
    .section {
        padding: 1.3rem 1rem;
    }

    .card-grid, .service-grid {
        gap: .8rem;
    }

    .info-card, .service {
        padding: .85rem .9rem;
    }

    .contact-cards .contact-card {
        gap: .4rem;
    }

    .timeline {
        padding-left: .85rem;
    }

        .timeline ul {
            padding-left: 1.1rem;
        }

            .timeline ul li::before {
                left: -1.1rem;
            }

    .effects-dock.is-expanded .fx-panel,
    .effects-dock[data-expanded="true"] .fx-panel {
        max-width: 100%;
    }

    .fx-panel .toggles {
        justify-content: flex-start;
    }

        .fx-panel .toggles .btn-ghost {
            width: 64px;
            height: 64px;
        }

    .comet-launch {
        width: 44px;
        height: 44px;
        margin-left: 0;
    }

    .site-footer .footer-brand,
    .site-footer .footer-version {
        display: none;
    }

    .site-footer .footer-copy {
        justify-self: center;
        display: block;
    }
}

@media (max-width: 480px) {
    .contact-icon {
        width: 40px;
        height: 40px;
    }

        .contact-icon svg {
            width: 18px;
            height: 18px;
        }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 541px) {
    .site-footer .footer-brand,
    .site-footer .footer-version {
        display: inline;
    }
}

@media (max-width: 640px) {
    .skills-layout canvas {
        width: min(100%, 340px);
    }
}

@media (max-width: 480px) {
    .skills-layout canvas {
        width: min(100%, 280px);
    }
}

@media (max-width: 540px) {
    .site-footer .footer-brand,
    .site-footer .footer-version,
    .site-footer .footer-sep-brand,
    .site-footer .footer-sep-version {
        display: none;
    }

    .site-footer .footer-copy {
        display: inline-block;
    }
}

.contact-card.contact-full {
    grid-column: 1 / -1;
    width: 100%;
}

    .contact-card.contact-full .contact-detail {
        margin: .45rem 0 0;
    }

.contact-card--hours .contact-head {
    flex-direction: row;
    align-items: center;
}

.fx-panel .toggles #themeToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 5.2H19l-4.2 3.2 1.6 5.4L12 13.4 7.6 15.8l1.6-5.4L5 7.2h5.2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 5.2H19l-4.2 3.2 1.6 5.4L12 13.4 7.6 15.8l1.6-5.4L5 7.2h5.2z'/%3E%3C/svg%3E");
}

.fx-panel .toggles #matrixToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h2v16H5zm6 2h2v14h-2zm6-1h2v15h-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h2v16H5zm6 2h2v14h-2zm6-1h2v15h-2z'/%3E%3C/svg%3E");
}

.fx-panel .toggles #gridToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6v6H4zm10 0h6v6h-6zM4 14h6v6H4zm10 0h6v6h-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6v6H4zm10 0h6v6h-6zM4 14h6v6H4zm10 0h6v6h-6z'/%3E%3C/svg%3E");
}

.fx-panel .toggles #noiseToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h2v2H5zm6-1h2v3h-2zm7 3h2v2h-2zm-4 4h2v2h-2zM5 13h2v2H5zm6 6h2v2h-2zm7-3h2v2h-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h2v2H5zm6-1h2v3h-2zm7 3h2v2h-2zm-4 4h2v2h-2zM5 13h2v2H5zm6 6h2v2h-2zm7-3h2v2h-2z'/%3E%3C/svg%3E");
}

.fx-panel .toggles #bloomToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2 3.8 4.3.6-3 3 1 4.6-4.3-2.1-4.3 2.1 1-4.6-3-3 4.3-.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2 3.8 4.3.6-3 3 1 4.6-4.3-2.1-4.3 2.1 1-4.6-3-3 4.3-.6z'/%3E%3C/svg%3E");
}

.fx-panel .toggles #scanToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E");
}

.fx-panel .toggles #vignetteToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E");
}

.fx-panel .toggles #auroraToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17c2.2-7 4.4-7 6.6 0 2.1 7 4.3 7 6.4 0 2.1-7 4.3-7 6.5 0v3H3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17c2.2-7 4.4-7 6.6 0 2.1 7 4.3 7 6.4 0 2.1-7 4.3-7 6.5 0v3H3z'/%3E%3C/svg%3E");
}

.fx-panel .toggles #focusToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v3h3v2h-3v4h3v2h-3v3h-2v-3H8v-2h3v-4H8V7h3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v3h3v2h-3v4h3v2h-3v3h-2v-3H8v-2h3v-4H8V7h3z'/%3E%3C/svg%3E");
}

.fx-panel .toggles #monoToggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 0 0 0 16z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 0 0 0 16z'/%3E%3C/svg%3E");
}

.settings-dialog {
    border: 1px solid var(--glass-border);
    background: var(--panel-surface);
    color: var(--fg);
    border-radius: 18px;
    padding: 0;
    width: min(94vw, 560px);
    max-height: 85dvh;
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: var(--shadow), 0 0 28px var(--panel-glow);
}

    .settings-dialog::backdrop {
        background: rgba(2, 6, 18, .72);
        backdrop-filter: blur(3px);
    }

.settings-form {
    display: grid;
    gap: .85rem;
    padding: 1.2rem;
    text-align: left;
}

.settings-block {
    border: 1px solid color-mix(in srgb, var(--control-border) 55%, var(--glass-border));
    border-radius: 16px;
    padding: 1rem;
    background: color-mix(in srgb, var(--panel-surface) 88%, transparent);
    display: grid;
    gap: .65rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.settings-block:hover,
.settings-block:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.settings-subgroup {
    display: grid;
    gap: .65rem;
    margin-top: .25rem;
    padding-top: .85rem;
    border-top: 1px solid var(--glass-border);
}

.settings-subgroup h4 {
    margin: 0;
}

.settings-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    min-height: var(--menu-control-height);
    padding: .1rem .2rem;
    border-radius: 8px;
}
.settings-disclosure > summary:hover { color: var(--neon); }

.settings-disclosure > summary::-webkit-details-marker {
    display: none;
}

.settings-disclosure > summary h3 {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.4;
}

.settings-disclosure-icon {
    width: .75rem;
    height: .75rem;
    flex: 0 0 auto;
    border-right: 2px solid var(--neon);
    border-bottom: 2px solid var(--neon);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.settings-disclosure[open] > summary {
    margin-bottom: .35rem;
}

.settings-disclosure[open] > summary .settings-disclosure-icon {
    transform: rotate(225deg);
}

.settings-disclosure > summary:focus-visible {
    outline: 2px solid var(--neon);
    outline-offset: .35rem;
    border-radius: 4px;
}

.settings-form h3 {
    margin: 0 0 .2rem;
}

.settings-form h4 {
    margin: .2rem 0 .1rem;
    color: var(--accent);
    font-size: .95rem;
}

.settings-form label {
    display: grid;
    gap: .4rem;
    font-size: .92rem;
}

.settings-form select,
.settings-form input[type="number"],
.settings-form input[type="text"] {
    width: 100%;
    min-width: 0;
    min-height: var(--menu-control-height);
    border-radius: 10px;
    border: 1px solid var(--control-border);
    background-color: var(--control-surface);
    color: var(--fg);
    padding: .5rem .6rem;
}

.settings-form select { padding-right: 2.6rem; }
.settings-form input:focus-visible {
    border-color: var(--neon);
    box-shadow: 0 0 16px color-mix(in srgb, var(--neon) 12%, transparent);
}
.settings-form :is(select, input[type="text"], input[type="number"]) { font-size: 16px; font-variant-numeric: tabular-nums; }
.settings-form :is(summary, label, input, select, button) { scroll-margin-top: calc(var(--header-controls-height, 5rem) + 1rem); }
.settings-form :is(input[type="text"], input[type="number"]) { caret-color: var(--neon); }
.settings-help--wide {
    padding: .8rem 1rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--accent) 7%, var(--panel-surface));
}

.settings-form .setting-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    min-height: var(--menu-control-height);
    padding: .3rem .4rem;
    border-radius: 8px;
}
.settings-form .setting-row:not(.star-type):has(input:checked) { background: color-mix(in srgb, var(--neon) 6%, transparent); }
.settings-form .setting-row:focus-within { outline: 1px solid var(--control-border); }

.star-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.direction-pad {
    display: grid;
    grid-template-columns: repeat(3, minmax(5.5rem, 1fr));
    grid-template-areas:
      "slower up forward"
      "left diagonal right"
      "faster down backward";
    gap: .65rem;
    width: min(100%, 36rem);
    margin: .25rem auto;
}

.direction-button--slower { grid-area: slower; }
.direction-button--faster { grid-area: faster; }

.page-view-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(7rem, 1fr)) auto;
    align-items: center;
    gap: .75rem;
}

.direction-controls .page-view-controls {
    display: grid;
    gap: .65rem;
    margin-top: .35rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
}

.page-view-actions output {
    min-width: 4.5rem;
    padding: .55rem .7rem;
    color: var(--accent);
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--glass-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--neon) 16%, transparent);
}

@media (max-width: 520px) {
    .page-view-actions { grid-template-columns: 1fr 1fr; }
    .page-view-actions output { grid-column: 1 / -1; }
}

.direction-button {
    position: relative;
    min-height: 3.1rem;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}

.direction-button--up { grid-area: up; }
.direction-button--forward { grid-area: forward; }
.direction-button--left { grid-area: left; }
.direction-button--diagonal { grid-area: diagonal; }
.direction-button--right { grid-area: right; }
.direction-button--backward { grid-area: backward; }
.direction-button--down { grid-area: down; }

.direction-button[aria-pressed="true"] {
    color: var(--fg);
    border-color: color-mix(in srgb, var(--neon) 76%, white 24%);
    background: linear-gradient(135deg, color-mix(in srgb, var(--neon) 24%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon) 14%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 46%, transparent), inset 0 0 18px color-mix(in srgb, var(--neon) 10%, transparent);
    transform: translateY(-2px);
}

.star-type {
    position: relative;
    overflow: hidden;
    min-height: 3.25rem;
    padding: .65rem .75rem;
    border: 1px solid color-mix(in srgb, var(--glass-border) 70%, var(--star-type-color, var(--neon)) 30%);
    border-radius: 12px;
    background: radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--star-type-color, var(--neon)) 24%, transparent), transparent 38%), rgba(255,255,255,.035);
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--star-type-color, var(--neon)) 7%, transparent);
}

.star-type--big { --star-type-color: #fff4c2; }
.star-type--shiny { --star-type-color: #e8fbff; }
.star-type--colored { --star-type-color: #ff78d5; }
.star-type--glowing { --star-type-color: var(--neon); }
.star-type--pulsar { --star-type-color: #66a7ff; }
.star-type--crossflare { --star-type-color: #ff8bdc; }
.star-type--soft { --star-type-color: #c9b8ff; }
.star-type--nova { --star-type-color: #ff9b66; }
.star-type--dwarf { --star-type-color: #8de8ff; }
.star-type--neutron { --star-type-color: #a9a1ff; }
.star-type--binary { --star-type-color: #7dffc9; }
.star-type--supernova { --star-type-color: #ffcf70; }
.star-type--variable { --star-type-color: #d991ff; }

.setting-copy {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.setting-info {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.35;
}

.star-type input[type="checkbox"] {
    flex: 0 0 auto;
    margin-left: .65rem;
}

.star-type:has(input:checked) {
    border-color: color-mix(in srgb, var(--star-type-color) 72%, white 28%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--star-type-color) 24%, transparent), inset 0 0 24px color-mix(in srgb, var(--star-type-color) 10%, transparent);
}

.settings-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem .85rem;
}

.space-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: .65rem;
    margin: .85rem 0;
}

.space-telemetry-grid > div {
    padding: .7rem .8rem;
    border: 1px solid color-mix(in srgb, var(--glass-border) 82%, var(--accent) 18%);
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--neon) 7%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
}

.space-telemetry-grid .space-telemetry-distance {
    grid-column: 1 / -1;
}

.space-telemetry-grid dt {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
}

.space-telemetry-grid dd {
    margin: .2rem 0 0;
    color: var(--accent);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.starfield-transport {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.starfield-transport button[aria-pressed="true"] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 36%, transparent);
}

.global-rewind-toggle {
    position: fixed;
    right: clamp(14px, 2vw, 28px);
    bottom: calc(clamp(14px, 2vw, 28px) + var(--footer-dock-offset, 0px));
    z-index: 70;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--control-surface) 88%, transparent);
    box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 18px color-mix(in srgb, var(--neon) 24%, transparent);
    backdrop-filter: blur(14px);
}

.global-rewind-toggle::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin: auto;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 15px solid var(--neon);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--neon) 70%, transparent));
    transform: translateX(-2px);
}

.global-rewind-toggle[aria-pressed="true"] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 20%, var(--control-surface));
    animation: rewind-control-pulse 1.25s ease-in-out infinite;
}

@keyframes rewind-control-pulse {
    50% { box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 28px color-mix(in srgb, var(--accent) 56%, transparent); }
}

@media (max-width: 480px) {
    .space-telemetry-grid {
        grid-template-columns: 1fr;
    }

    .space-telemetry-grid .space-telemetry-distance {
        grid-column: auto;
    }

    .starfield-transport {
        grid-template-columns: 1fr;
    }
}

.shortcut-grid {
    margin-top: .2rem;
}

    .shortcut-grid .settings-help {
        margin: 0;
    }

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: .4rem;
}

.preset-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}
.preset-actions button { min-width: 0; }
.preset-actions #applyPresetButton { border-color: var(--control-border); background: color-mix(in srgb, var(--accent) 12%, var(--control-surface)); }

.preset-lesson {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr);
    gap: 1.25rem;
    align-items: center;
    margin-top: 1rem;
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--control-surface) 88%, transparent);
    box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 28px var(--panel-glow);
}

.preset-lesson[hidden] { display: none; }
.preset-lesson-source { grid-column: 1 / -1; }
.preset-lesson h4 { margin: .25rem 0 .65rem; color: var(--fg); }
.preset-lesson ul { margin: .8rem 0 0; padding-left: 1.2rem; color: var(--muted); }
.preset-lesson li + li { margin-top: .45rem; }
.preset-lesson img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: var(--bg-2);
}

@media (max-width: 760px) {
    .preset-lesson { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .settings-actions,
    .preset-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .preset-actions { grid-template-columns: minmax(0, 1fr); }

    .settings-actions .btn-primary,
    .settings-actions .btn-ghost,
    .preset-actions .btn-ghost {
        width: 100%;
        text-align: center;
    }

    .star-type-grid {
        grid-template-columns: 1fr;
    }

    .direction-pad {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "up down"
          "left right"
          "forward backward"
          "diagonal diagonal"
          "slower faster";
    }
}

.settings-help {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.5;
}

.settings-help--small {
    font-size: .8rem;
}

.settings-form hr {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--glass-border);
    margin: .2rem 0;
}

.notification-tests {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.notify-stack {
    position: fixed;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: .5rem;
    column-gap: .5rem;
    max-height: calc(100vh - 2rem);
    max-width: calc(100vw - 2rem);
    pointer-events: auto;
}

    .notify-stack.pos-top-right {
        top: 1rem;
        right: 1rem;
    }

    .notify-stack.pos-top-left {
        top: 1rem;
        left: 1rem;
    }

    .notify-stack.pos-bottom-right {
        bottom: 1rem;
        right: 1rem;
    }

    .notify-stack.pos-bottom-left {
        bottom: 1rem;
        left: 1rem;
    }

    .notify-stack.pos-top-center {
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .notify-stack.pos-bottom-center {
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .notify-stack.pos-top-right,
    .notify-stack.pos-bottom-right {
        align-content: flex-end;
    }

    .notify-stack.pos-top-left,
    .notify-stack.pos-bottom-left {
        align-content: flex-start;
    }

    .notify-stack.pos-top-center,
    .notify-stack.pos-bottom-center {
        align-content: center;
    }

.notify-item {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--notify-fade, .25s) ease, transform var(--notify-fade, .25s) ease;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: .75rem 2.8rem .75rem 1rem;
    background: var(--panel-surface);
    color: var(--fg);
    box-shadow: 0 10px 28px rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    position: relative;
    text-align: center;
    pointer-events: auto;
    max-width: min(420px, calc(100vw - 2rem));
}

.notify-text {
    min-width: 0;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notify-close {
    position: absolute;
    right: .45rem;
    top: 50%;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: transparent;
    color: var(--fg);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    opacity: .88;
    padding: 0;
    transform: translateY(-50%);
    pointer-events: auto;
}

.notify-close::before,
.notify-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}
.notify-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.notify-close:hover {
    opacity: 1;
    background: rgba(255,255,255,.09);
    box-shadow: 0 0 0 1px var(--control-border), 0 0 14px color-mix(in srgb, var(--neon) 25%, transparent);
}

    .notify-item::before {
        font-size: 1rem;
        line-height: 1;
    }

    .notify-item.type-info::before {
        content: "ℹ️";
    }

    .notify-item.type-success::before {
        content: "✅";
    }

    .notify-item.type-warning::before {
        content: "⚠️";
    }

    .notify-item.type-error::before {
        content: "⛔";
    }

    .notify-item.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .notify-item.type-info {
        border-color: color-mix(in srgb, var(--neon) 45%, transparent);
    }

    .notify-item.type-success {
        border-color: rgba(118,255,166,.45);
    }

    .notify-item.type-warning {
        border-color: rgba(255,211,110,.5);
    }

    .notify-item.type-error {
        border-color: rgba(255,122,122,.5);
    }

    .notify-item.size-small {
        font-size: .82rem;
        min-width: 180px;
    }

    .notify-item.size-medium {
        font-size: .92rem;
        min-width: 240px;
    }

    .notify-item.size-large {
        font-size: 1rem;
        min-width: min(320px, calc(100vw - 2rem));
    }

    .notify-item.fx-fade {
        transform: none;
    }

    .notify-item.fx-glow {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 18%, transparent), 0 0 24px color-mix(in srgb, var(--neon) 25%, transparent);
    }

.settings-form select option {
    color: var(--fg);
    background-color: color-mix(in srgb, var(--bg) 92%, black 8%);
}

.settings-form select:focus option:checked {
    background-color: color-mix(in srgb, var(--accent) 30%, var(--bg) 70%);
    color: var(--fg);
}

.celestial-dialog {
    width: min(880px, calc(100vw - 2rem));
    max-width: none;
    padding: 0;
    overflow: hidden;
    color: var(--fg);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
    border-radius: 24px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 20%, transparent),
        0 0 72px color-mix(in srgb, var(--accent) 38%, transparent);
}

.celestial-dialog::backdrop {
    background: radial-gradient(circle at 50% 45%, rgba(31, 17, 62, .62), rgba(1, 3, 12, .94));
    backdrop-filter: blur(10px);
}

.celestial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

.celestial-header h2 { margin: 0; }

.celestial-canvas {
    display: block;
    width: 100%;
    height: min(62vh, 560px);
    cursor: grab;
    touch-action: none;
}

.celestial-canvas:active { cursor: grabbing; }

.celestial-help {
    margin: 0;
    padding: .85rem 1.2rem 1rem;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 600px) {
    .celestial-dialog { width: calc(100vw - 1rem); }
    .celestial-canvas { height: 55vh; }
}

/* Keep settings controls within their grid cells on narrow screens. */
.settings-page-panel {
    width: min(1100px, calc(96vw / var(--page-zoom-factor, 1)));
    padding: clamp(.75rem, 2vw, 1.6rem);
}
.settings-form, .settings-block, .settings-form label, .setting-copy { min-width: 0; }
.settings-form .setting-row > input[type="checkbox"] { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; }
.settings-form button { min-height: var(--menu-control-height); white-space: normal; overflow-wrap: anywhere; }
.direction-controls { background: linear-gradient(145deg, color-mix(in srgb, var(--neon) 12%, var(--bg)), var(--control-surface)); }
.direction-controls .starfield-transport { padding-top: .85rem; border-top: 1px solid var(--glass-border); }
.variables-dialog { max-height: calc(85dvh / var(--page-zoom-factor, 1)); width: min(calc(94vw / var(--page-zoom-factor, 1)), 760px); }
.variables-heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--panel-surface); border-bottom: 1px solid var(--glass-border); }
.variables-heading h2 { margin: 0; }
.variables-heading button { flex: 0 0 auto; min-height: var(--menu-control-height); }
.variables-dialog > .settings-help { padding: .8rem 1rem 1rem; }
.variables-dialog > [data-diagnostics-export] { margin: 0 1rem 1rem; max-width: calc(100% - 2rem); min-height: var(--menu-control-height); }
.variables-table-wrap { overflow-x: auto; padding: 0 1rem 1rem; }
.variables-table-wrap table { width: 100%; border-collapse: collapse; }
.variables-table-wrap th, .variables-table-wrap td { text-align: left; padding: .65rem; border-bottom: 1px solid var(--glass-border); overflow-wrap: anywhere; }
.variables-table-wrap thead { color: var(--accent); }
.variables-table-wrap tbody tr:nth-child(even) { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.variables-table-wrap tbody tr:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.variables-table-wrap th:first-child, .variables-table-wrap td:first-child { width: 62%; }
.variables-table-wrap td { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
    .settings-form { padding: .65rem; }
    .settings-block { padding: .7rem; }
    .settings-two-col { grid-template-columns: minmax(0, 1fr); }
    .notification-tests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .preset-actions .btn-primary { width: 100%; }
}

.notify-item--confirm { flex-wrap: wrap; }
.notify-item--confirm .notify-text { flex-basis: calc(100% - 2rem); }
.notify-actions { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; padding-right: 1.5rem; }
.notify-actions button { flex: 1 1 120px; min-height: 44px; white-space: normal; }

/* Scrollbars follow the active theme in the document, dialogs, and overflow panels. */
html, body, * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid var(--scrollbar-track);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
@media (forced-colors: active) {
    html, body, * { scrollbar-color: auto; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: Canvas; }
    ::-webkit-scrollbar-thumb { background: CanvasText; border-color: Canvas; }
}

.settings-disclosure-content { display: grid; gap: .85rem; min-width: 0; }
.star-types-section { margin-top: .5rem; padding-top: 1rem; gap: .85rem; }
.settings-form input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Shared viewing controls stay visible on every page, beside rewind. */
.global-view-control {
    position: fixed;
    right: calc(clamp(14px, 2vw, 28px) + 60px);
    bottom: calc(clamp(14px, 2vw, 28px) + var(--footer-dock-offset, 0px));
    z-index: 70;
    display: grid;
    gap: .35rem;
    width: 232px;
    max-width: calc(100vw - 100px);
    padding: .45rem;
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    color: var(--fg);
    background: var(--panel-surface);
    box-shadow: var(--shadow), 0 0 20px var(--panel-glow);
}
.global-view-control > button.star-view-model-toggle {
    --view-toggle-fill: var(--neon);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: .5rem .35rem;
    border: 1px solid var(--neon);
    border-radius: 10px;
    background: var(--view-toggle-fill);
    color: var(--bg);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: box-shadow .2s ease, filter .2s ease;
}
.global-view-control > button.star-view-model-toggle:not(:disabled):hover {
    background: var(--view-toggle-fill);
    filter: none;
    box-shadow: 0 0 16px color-mix(in srgb, var(--neon) 28%, transparent);
}
.global-view-control > button.star-view-model-toggle[aria-pressed="false"] {
    --view-toggle-fill: var(--accent);
    border-color: var(--accent);
    background: var(--view-toggle-fill);
}
html.theme-mystic .global-view-control > button.star-view-model-toggle[aria-pressed="false"] {
    --view-toggle-fill: color-mix(in srgb, var(--accent) 80%, var(--fg));
}
.global-view-control > label {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    padding-left: .25rem;
    font-size: .85rem;
}
.global-view-control select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: .35rem 2.6rem .35rem .4rem;
    color: var(--fg);
    background-color: var(--control-surface);
    border: 1px solid var(--glass-border);
    font: inherit;
}
.global-view-control select:disabled { color: var(--muted); opacity: .65; box-shadow: none; }
.global-view-control select:focus-visible,
.global-view-control > button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
@media (max-width: 480px) {
    .global-view-control { right: 74px; bottom: calc(14px + var(--footer-dock-offset, 0px)); width: 220px; }
    .global-view-control > button { font-size: .78rem; }
}

.global-view-control {
    width: 320px;
    max-width: calc(100vw / var(--page-zoom-factor, 1) - 100px);
    max-height: calc(100dvh / var(--page-zoom-factor, 1) - var(--footer-dock-offset, 0px) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .65rem;
    gap: .5rem;
}
.global-view-control[hidden],
.global-motion-controls[hidden] { display: none; }
.stellar-control-launch,
.stellar-control-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-width: 0;
}
.stellar-control-heading {
    position: sticky;
    top: -.65rem;
    z-index: 2;
    justify-content: flex-start;
    padding: .4rem .35rem .6rem;
    border-bottom: 1px solid var(--glass-border);
    background: var(--panel-surface);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .035em;
}
.stellar-control-heading > span:not(.stellar-control-emblem) { flex: 1 1 auto; min-width: 0; }
.stellar-control-close {
    flex: 0 0 auto;
    min-height: var(--menu-control-height);
    min-width: var(--menu-control-height);
    margin-left: auto;
    padding: .4rem .5rem;
    font-size: .8rem;
}
.stellar-control-emblem {
    position: relative;
    display: inline-block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--neon) 55%, transparent);
    border-radius: 50%;
    background: radial-gradient(circle, var(--neon) 0 8%, transparent 12%),
        linear-gradient(transparent 48%, color-mix(in srgb, var(--neon) 30%, transparent) 49% 51%, transparent 52%),
        linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--neon) 30%, transparent) 49% 51%, transparent 52%);
    box-shadow: inset 0 0 10px var(--panel-glow), 0 0 12px var(--panel-glow);
}
.stellar-control-emblem::before,
.stellar-control-emblem::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
.stellar-control-emblem::before {
    inset: 7px -5px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    transform: rotate(-28deg);
    box-shadow: 0 0 5px var(--panel-glow);
}
.stellar-control-emblem::after {
    width: 4px;
    height: 4px;
    top: 2px;
    right: 4px;
    border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 7px var(--neon);
}
.view-travel-readout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .65rem;
    margin: .35rem 0;
    padding: .5rem;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}
.view-travel-readout dt { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.view-travel-readout dd { margin: .2rem 0 0; font-size: .9rem; font-variant-numeric: tabular-nums; line-height: 1.4; overflow-wrap: anywhere; }
.global-motion-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
}
.global-playback-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
}
.global-speed-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
}
.stellar-speed-setting {
    grid-column: 1 / -1;
    padding: .2rem .35rem;
    color: var(--muted);
    font-size: .75rem;
    text-align: center;
    overflow-wrap: anywhere;
}
.stellar-orb-controls {
    --orb-control-height: max(44px, calc(44px / var(--page-zoom-factor, 1)));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .4rem;
    padding: .65rem .35rem .35rem;
    border-top: 1px solid var(--glass-border);
}
.stellar-orb-heading,
.stellar-orb-status {
    grid-column: 1 / -1;
    margin: 0;
    overflow-wrap: anywhere;
}
.stellar-orb-heading {
    color: var(--fg);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .025em;
}
.stellar-orb-status { color: var(--muted); font-size: .75rem; line-height: 1.45; }
.stellar-orb-controls button {
    min-width: 0;
    min-height: var(--orb-control-height);
    padding: .5rem .35rem;
    font-size: .8rem;
    line-height: 1.4;
}
.stellar-orb-controls button[aria-controls="orbSettingsPanel"] {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--accent) 65%, var(--control-border));
    background: color-mix(in srgb, var(--accent) 12%, var(--control-surface));
    font-weight: 700;
}
.stellar-orb-controls button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.global-motion-controls button,
.global-playback-controls button,
.global-speed-controls button { min-width: 0; min-height: var(--menu-control-height); padding: .4rem; font-size: .8rem; }
.global-motion-controls button[aria-pressed="true"],
.global-playback-controls button[aria-pressed="true"] { border-color: var(--neon); box-shadow: inset 0 0 12px var(--panel-glow); }

.effects-dock.is-expanded .fx-panel,
.effects-dock[data-expanded="true"] .fx-panel { width: max-content; max-width: calc(100vw / var(--page-zoom-factor, 1) - 32px); padding: .65rem; border-color: var(--panel-border); border-radius: 18px; box-shadow: var(--shadow); }
.fx-panel .toggles { display: grid; grid-template-columns: repeat(5, max(56px, calc(44px / var(--page-zoom-factor, 1)))); gap: .5rem; width: max-content; max-width: 100%; }
.fx-panel .toggles .btn-ghost { width: max(56px, calc(44px / var(--page-zoom-factor, 1))); height: max(56px, calc(44px / var(--page-zoom-factor, 1))); box-shadow: none; }
.fx-panel .toggles .btn-ghost[aria-pressed="true"] { border-color: var(--neon); background: color-mix(in srgb, var(--neon) 15%, var(--control-surface)); }
.fx-panel .toggles > [hidden] { display: none; }
@media (max-width: 600px) {
    .fx-panel .toggles { grid-template-columns: repeat(5, var(--menu-control-height)); gap: .4rem; }
    .fx-panel .toggles .btn-ghost { width: var(--menu-control-height); height: var(--menu-control-height); border-radius: 11px; }
}

.scene-menu .btn-ghost,
.global-view-control .btn-ghost,
.orb-context-menu .btn-ghost,
.variables-dialog .btn-ghost,
.settings-form .btn-ghost { box-shadow: none; }
.site-features-dialog.glass, .periodic-table-dialog.glass { background: var(--panel-surface); box-shadow: var(--shadow); }
:is(.scene-menu, .global-view-control, .orb-context-menu, .variables-dialog, .settings-form) .btn-ghost:not(:disabled, .star-view-model-toggle):hover {
    border-color: var(--control-border);
    background: color-mix(in srgb, var(--accent) 12%, var(--control-surface));
}
.global-view-control > :is(button, label > select) { min-height: var(--menu-control-height); }
.global-view-control > button.star-view-model-toggle { min-height: var(--menu-control-height); }
.global-view-control select { border-radius: 10px; font-size: 16px; box-shadow: none; }
.orb-context-menu :is(input, select) { box-shadow: none; }
:is(.scene-menu, .global-view-control, .orb-context-menu, .settings-form) :is(input, select):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-color: var(--neon);
}
@media (max-width: 960px) {
    .nav a { min-height: var(--menu-control-height); }
    .menu-toggle, .fx-collapse { width: var(--menu-control-height); height: var(--menu-control-height); }
}

/* Clear theme-colored sigils keep motion light and the starfield in focus. */
svg.cosmic-icon {
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    overflow: visible;
    fill: none;
    color: color-mix(in srgb, var(--neon) 65%, var(--fg));
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    filter: none;
    animation: none;
    transform-origin: center;
    transition: transform .18s ease;
}
button[data-cosmic-icon]::before,
button[data-cosmic-icon]::after,
.stellar-control-emblem[data-cosmic-icon]::before,
.stellar-control-emblem[data-cosmic-icon]::after { content: none; display: none; }
button[data-cosmic-icon]:is(:hover, :focus-visible, [aria-pressed="true"], [aria-expanded="true"]) .cosmic-icon,
button:is(:hover, :focus-visible, [aria-pressed="true"], [aria-expanded="true"]) > [data-cosmic-icon] .cosmic-icon {
    color: color-mix(in srgb, var(--accent) 60%, var(--fg));
}
button[data-cosmic-icon]:is(:hover, :focus-visible) .cosmic-icon,
button:is(:hover, :focus-visible) > [data-cosmic-icon] .cosmic-icon {
    transform: translateY(-1px) rotate(-5deg) scale(1.06);
}
button[data-cosmic-icon]:disabled .cosmic-icon,
button:disabled > [data-cosmic-icon] .cosmic-icon { color: var(--muted); }
/* Filled view controls need the theme's dark ink for readable contrast. */
.global-view-control > button.star-view-model-toggle:not(:disabled) .cosmic-icon { color: var(--bg); }
.scene-menu-icon[data-cosmic-icon],
.stellar-control-emblem[data-cosmic-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    color: var(--neon);
    background: none;
    box-shadow: none;
}
.scene-menu-icon[data-cosmic-icon] .cosmic-icon,
.stellar-control-emblem[data-cosmic-icon] .cosmic-icon { width: 30px; height: 30px; }
.scene-menu-toggle { gap: .5rem; }
.scene-menu-toggle[aria-expanded="true"] .scene-menu-icon[data-cosmic-icon] { color: var(--accent); }
.fx-panel .toggles .cosmic-icon { width: 24px; height: 24px; }
.scene-menu .scene-action[data-cosmic-icon] { position: relative; justify-content: flex-start; }
.scene-menu .scene-action[data-cosmic-icon] > .cosmic-icon {
    position: absolute;
    left: 12px;
    top: calc(50% - 11px);
}
.global-view-control button[data-cosmic-icon] { gap: .35rem; flex-wrap: wrap; }
.global-playback-controls .cosmic-icon { width: 18px; height: 18px; }
.global-view-control > button[data-cosmic-icon] .cosmic-icon,
.stellar-orb-controls .cosmic-icon { width: 20px; height: 20px; }
.has-cosmic-icon { gap: .4rem; }
.notify-item[data-cosmic-icon]::before { content: none; display: none; }
.scene-menu-chevron[data-cosmic-icon],
.settings-disclosure-icon[data-cosmic-icon] { width: 18px; height: 18px; border: 0; transform: none; }
.scene-menu-chevron .cosmic-icon,
.settings-disclosure-icon .cosmic-icon { width: 18px; height: 18px; }
.scene-menu-toggle[aria-expanded="true"] .scene-menu-chevron[data-cosmic-icon],
.settings-disclosure[open] > summary .settings-disclosure-icon[data-cosmic-icon] { transform: rotate(180deg); }
.scene-menu-icon > .cosmic-icon,
#fxCollapse > .cosmic-icon { animation: cosmic-control-drift 8s ease-in-out infinite; }
.scene-menu-toggle:is(:hover, :focus-visible) .scene-menu-icon > .cosmic-icon,
#fxCollapse:is(:hover, :focus-visible) > .cosmic-icon { animation: none; }
[hidden] .cosmic-icon,
button:disabled > .cosmic-icon,
button:disabled > [data-cosmic-icon] .cosmic-icon { animation: none !important; transform: none; }
@keyframes cosmic-control-drift {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-2px) rotate(3deg) scale(1.04); }
}

/* Leave user-controlled canvas playback intact; reduce decorative CSS motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .orb-body, .orb-material, .orb-space-grains { transform: none; }
    .cosmic-icon,
    .cosmic-icon-core,
    .contact-icon svg { animation: none !important; }
    .cosmic-icon { transform: none !important; transition: none; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.orb-context-menu .orb-target-picker,
.orb-context-menu .orb-element-picker { grid-template-columns: 1fr; gap: .35rem; }
.orb-target-picker > span { color: var(--fg); font-weight: 600; }
.orb-context-menu .orb-target-picker select,
.orb-context-menu .orb-element-picker select { width: 100%; }
.orb-setting-scope { margin: .6rem 0 .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--glass-border); color: var(--muted); font-size: .8rem; line-height: 1.5; }
.orb-context-menu .orb-main-settings { display: flex; justify-content: center; margin-top: .8rem; }

.orb-context-header { position: sticky; top: -1rem; z-index: 2; padding-top: .35rem; background: inherit; backdrop-filter: none; }
.orb-context-menu { scroll-padding-top: calc(var(--orb-control-height) + 1.5rem); }
.orb-context-menu input, .orb-context-menu select { scroll-margin-top: calc(var(--orb-control-height) + 1.5rem); }