:root{
    --bg:#070a16;
    --panel:#10162a;
    --line:#26334f;

    --text:#eef3ff;
    --muted:#8994ad;

    /* Ocean blue */
    --ocean:#18aee8;
    --ocean-light:#66d9ff;
    --ocean-dark:#0877ad;

    /* Bright solar orange */
    --sun:#ff9b22;
    --sun-light:#ffd166;
    --sun-hot:#ff6b16;
}


*{
    box-sizing:border-box;
}


html,
body{
    margin:0;
    min-height:100%;
}


body{
    min-height:100vh;

    background:
        radial-gradient(
            circle at 50% 42%,
            black 0,
            transparent 42%
        ),
        var(--bg);

    color:var(--text);

    font-family: "Space Grotesk", sans-serif;
}


/* =========================================
   MAIN
   ========================================= */

main{
    width:min(1000px,94vw);

    min-height:100vh;

    margin:auto;

    display:flex;
    flex-direction:column;

    padding:14px 0 12px;
}


/* =========================================
   TOP INFORMATION
   ========================================= */

.info{
    text-align:center;

    overflow:hidden;

    transition:
        max-height .45s ease,
        opacity .3s ease;
}


.info-summary{
    cursor:pointer;
}


.info.collapsed{
    max-height:65px;
}


.info.expanded{
    max-height:220px;
}


.info small{
    color:var(--ocean-light);

    letter-spacing:.25em;

    font-size:.65rem;

    font-weight:700;
}


.info h1{
    font-size:clamp(1.35rem,4vw,2.2rem);

    margin:3px 0 7px;
}


.info p{
    color:var(--muted);

    margin:8px auto;

    max-width:650px;

    line-height:1.5;
}


.info-details{
    opacity:0;

    transition:opacity .3s ease;
}


.info.expanded .info-details{
    opacity:1;
}


#status{
    display:inline-block;

    /* border:1px solid var(--line); */

    border-radius:20px;

    padding:5px 10px;

    font-size:.68rem;
}


/* =========================================
   CLOCK AREA
   ========================================= */

.clock-area{
    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:0;

    padding:4px 0;
}


/* =========================================
   ORBIT
   ========================================= */

.orbit{
    position:relative;

    width:min(76vw,500px);

    max-height:58vh;

    aspect-ratio:1;

    cursor:pointer;

    user-select:none;

    -webkit-tap-highlight-color:transparent;
}


.orbit:before{
    content:"";

    position:absolute;

    inset:8%;

    border-radius:50%;

    border:1px solid #53627d66;
}


/* =========================================
   OCEAN BLUE ORBITAL TRAIL
   ========================================= */

.trail{
    content:"";

    position:absolute;

    inset:8%;

    border-radius:50%;

    background:
        conic-gradient(
            from -90deg,
            #18aee808,
            #18aee855,
            #18aee810
        );

    mask:
        radial-gradient(
            circle,
            transparent 66%,
            #000 67%,
            #000 68%,
            transparent 69%
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 66%,
            #000 67%,
            #000 68%,
            transparent 69%
        );
}


/* =========================================
   BRIGHTER SUN
   ========================================= */

.sun{
    position:absolute;

    width:15%;

    aspect-ratio:1;

    left:42.5%;

    top:42.5%;

    border-radius:50%;

    background:#FFC30E;

    box-shadow:
        0 0 25px #ffb52eaa,
        0 0 55px #ff8a1e88,
        0 0 110px #ff751e44;
}


/* =========================================
   OCEAN BLUE EARTH
   ========================================= */

.earth{
    position:absolute;

    width:4.8%;
    aspect-ratio:1;

    border-radius:50%;

    background:
       #66d9ff;

    transform:translate(-50%,-50%);

    opacity:.9;

    transition:
        left 1.2s cubic-bezier(.22,.61,.36,1),
        top 1.2s cubic-bezier(.22,.61,.36,1);

    box-shadow:
        0 0 12px #18bfff88,
        0 0 28px #0ca9e833;

    animation:
    earthPulse 4.5s ease-in-out infinite;
}


/* =========================================
   CONTINUOUS EARTH PULSE
   ========================================= */

@keyframes earthPulse{

    0%{
        transform:
            translate(-50%,-50%)
            scale(1);

        opacity:.88;

        filter:
            brightness(.96)
            saturate(1);

        box-shadow:
            0 0 12px #18bfff70,
            0 0 25px #0ca9e828;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.07);

        opacity:.98;

        filter:
            brightness(1.05)
            saturate(1.04);

        box-shadow:
            0 0 15px #18cfff88,
            0 0 31px #0ca9e838;
    }

    100%{
        transform:
            translate(-50%,-50%)
            scale(1);

        opacity:.88;

        filter:
            brightness(.96)
            saturate(1);

        box-shadow:
            0 0 12px #18bfff70,
            0 0 25px #0ca9e828;
    }
}


.earth b{
    position:absolute;

    left:170%;
    top:50%;

    transform:
        translateY(-50%);

    white-space:nowrap;

    color:#66d9ff;

    font-size:.65rem;

    font-weight:600;
}


.earth b{
    position:absolute;

    left:170%;

    top:50%;

    transform:translateY(-50%);

    white-space:nowrap;

    color:var(--ocean-light);

    font-size:.65rem;

    font-weight:600;
}


/* =========================================
   CLOCK NUMBERS
   ========================================= */

.marker{
    position:absolute;

    color:#66718a;

    font-size:.7rem;

    font-weight:600;

    pointer-events:none;
}


.m12{
    top:1%;
    left:50%;

    transform:translateX(-50%);
}


.m3{
    right:1%;
    top:50%;

    transform:translateY(-50%);
}


.m6{
    bottom:1%;
    left:50%;

    transform:translateX(-50%);
}


.m9{
    left:1%;
    top:50%;

    transform:translateY(-50%);
}


/* =========================================
   VALUE
   ========================================= */

#value{
    font-size:clamp(2rem,7vw,4rem);

    font-weight:750;

    margin-top:4px;
	
	border: 0.5px solid #3d3939;
    padding: 2px 10px;
    border-radius: 10px;
    margin-bottom: 7px;
}


#label{
    font-size:.65rem;

    color:var(--ocean-light);

    letter-spacing:.2em;

    font-weight:700;
}


#detail{
    color:var(--muted);

    font-size:.8rem;

    margin:5px 0 10px;
}


/* =========================================
   MODE BUTTONS
   ========================================= */

nav{
    display:flex;

    justify-content:center;

    gap:8px;
}


button{
    padding:7px 13px;

    border:1px solid var(--line);

    border-radius:20px;

    background:transparent;

    color:#aeb9d0;

    cursor:pointer;

    font-size:.75rem;
}


button.on{
    background:#18aee820;

    border-color:#18aee877;

    color:white;
}

/* =========================================
   COSMIC EVENT ALERTS — MODE 1
   ========================================= */

#cosmicAlerts {
    width: min(620px, 94%);
    margin: 8px auto 4px;
    color: var(--text);
    font-size: 0.76rem;
	opacity:0.3;
}

#cosmicAlerts[hidden],
#cosmicFeatured[hidden],
#cosmicAlertList[hidden] {
    display: none !important;
}


@keyframes cosmicAlertPulse {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

#cosmicAlerts.cosmicAlertPulse {
    animation: cosmicAlertPulse 1s ease-in-out;
}


#cosmicFeatured {
    padding: 11px 14px;
    border: 1px solid  #524d4d;
    border-left: 2px solid gray;
    border-radius: 10px;
    background: linear-gradient(
        110deg,
        #10162add,
        #080d1bcc
    );
}

.cosmic-alert-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: white;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

#cosmicAlertStatus {
    color: var(--muted);
    text-align: right;
    letter-spacing: 0.04em;
}

#cosmicAlertTitle {
    margin: 6px 0 4px;
    font-size: 0.88rem;
    font-weight: 100;
    line-height: 1.35;
}

#cosmicAlertDescription {
    margin: 0;
    color: #aeb9d0;
    font-size: 0.72rem;
    line-height: 1.45;
}

.cosmic-alert-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.62rem;
}

#cosmicAlertLink {
    color: var(--ocean-light);
    text-decoration: none;
}

#cosmicAlertLink:hover {
    text-decoration: underline;
}

#cosmicAlertList {
    margin-top: 6px;
    border-top: 1px solid #26334f99;
    padding-top: 6px;
}

#cosmicAlertList summary {
    color: var(--muted);
    font-size: 0.67rem;
    cursor: pointer;
    user-select: none;
}

#cosmicAlertCount {
    display: inline-block;
    margin-left: 5px;
    color: var(--ocean-light);
}

#cosmicAlertItems {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.cosmic-alert-item {
    padding: 8px 10px;
    border: 1px solid #26334f;
    border-radius: 7px;
    background: #10162a88;
}

.cosmic-alert-item strong {
    display: block;
    margin-bottom: 3px;
    font-size: 0.72rem;
    font-weight: 600;
}

.cosmic-alert-item span {
    color: var(--muted);
    font-size: 0.63rem;
    line-height: 1.4;
}

.cosmic-alert-item a {
    color: var(--ocean-light);
    text-decoration: none;
}


/* =========================================
   BOTTOM INFORMATION
   ========================================= */

.bottom-info{
    border-top:1px solid var(--line);

    margin-top:8px;

    overflow:hidden;

    transition:max-height .45s ease;
}


.bottom-summary{
    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    color:var(--muted);

    font-size:.65rem;

    letter-spacing:.16em;

    cursor:pointer;

    user-select:none;
}


.expand-symbol{
    font-size:1rem;

    color:#66718a;

    transition:transform .3s ease;
}


.bottom-info.expanded .expand-symbol{
    transform:rotate(45deg);
}


.bottom-info.collapsed{
    max-height:38px;
}


.bottom-info.expanded{
    max-height:450px;
}


.bottom-details{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;

    padding:4px 0 10px;

    opacity:0;

    transition:opacity .3s ease;
}


.bottom-info.expanded .bottom-details{
    opacity:1;
}


.bottom-details article{
    padding:15px;

    border:1px solid var(--line);

    border-radius:15px;

    background:#0c112299;
}


.bottom-details h2{
    font-size:.7rem;

    color:var(--muted);

    letter-spacing:.12em;

    margin-top:0;
}


.bottom-details p{
    font-size:.78rem;

    color:#b1bbd0;

    line-height:1.5;
}


.bottom-details strong{
    float:right;

    color:var(--ocean-light);
}


/* =========================================
   HOW IT WORKS BUTTON
   ========================================= */

.info-button{
    margin-top:5px;

    color:var(--ocean-light);

    border-color:#18aee855;

    background:#18aee810;
}


.info-button:hover{
    background:#18aee822;
}


/* =========================================
   FOOTER
   ========================================= */

footer{
    display:flex;

    justify-content:space-between;

    color:#66718a;

    font-size:.62rem;

    padding-top:5px;
}


/* =========================================
   SYNOPSIS OVERLAY
   ========================================= */

.overlay{
    position:fixed;

    inset:0;

    z-index:1000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:#02040bcc;

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.overlay.open{
    opacity:1;

    visibility:visible;
}


.overlay-panel{
    width:min(850px,94vw);

    max-height:88vh;

    display:flex;

    flex-direction:column;

    border:1px solid var(--line);

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            #10182d,
            #090e1e
        );

    box-shadow:
        0 20px 80px #000000aa;

    overflow:hidden;

    transform:translateY(15px);

    transition:transform .3s ease;
}


.overlay.open .overlay-panel{
    transform:translateY(0);
}


.overlay-header{
    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding:20px 22px;

    border-bottom:1px solid var(--line);
}


.overlay-header small{
    color:var(--ocean-light);

    letter-spacing:.2em;

    font-size:.6rem;
}


.overlay-header h2{
    margin:5px 0 0;

    font-size:1.25rem;
}


.close-button{
    flex:none;

    width:34px;
    height:34px;

    padding:0;

    border-radius:50%;

    font-size:1.5rem;

    line-height:1;

    color:#aeb9d0;
}


.synopsis-content{
    overflow-y:auto;

    padding:20px 22px 28px;

    color:#c5cee0;

    line-height:1.55;
}


.synopsis-content section{
    margin-bottom:28px;
}


.synopsis-content h3{
    margin:0 0 7px;

    color:var(--ocean-light);

    font-size:1rem;
}


.synopsis-content h4{
    margin:12px 0 5px;

    color:#dce8f8;

    font-size:.82rem;
}


.synopsis-content p{
    margin:6px 0;

    font-size:.82rem;
}


.synopsis-content ul{
    padding-left:20px;

    margin-top:7px;
}


.synopsis-content li{
    margin:5px 0;

    font-size:.82rem;
}


.synopsis-content .formula{
    padding:10px 14px;

    margin:10px 0;

    border-left:2px solid var(--ocean);

    background:#18aee808;

    color:var(--ocean-light);

    font-family:monospace;

    font-size:.78rem;
}

/* =========================================================
   DISPLAY MODE SELECTOR
   Phase 1
   ========================================================= */

#modeSelector {
    position: fixed;

    top: 50%;
    right: 0;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;

    z-index: 10000;

    border-radius: 10px 0 0 10px;
    overflow: hidden;

    opacity: 0.75;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    pointer-events: auto;
}


/* Hidden after inactivity */

#modeSelector.hidden {
    opacity: 0;

    transform:
        translate(100%, -50%);

    pointer-events: none;
}


/* Individual buttons */

.modeButton {
    width: 42px;
    height: 42px;

    padding: 0;
    margin: 0;

    border: none;
    border-bottom:
        1px solid rgba(255, 255, 255, 0.15);

    background:
        rgba(22, 25, 59, 0.75);

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    -webkit-tap-highlight-color: transparent;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


/* Remove border from last button */

.modeButton:last-child {
    border-bottom: none;
}


/* Mouse hover */

.modeButton:hover {
    background:
        rgba(22, 25, 59, 0.95);

    color: white;
}


/* Press */

.modeButton:active {
    transform: scale(0.94);
}


/* Current mode */

.modeButton.active {
    background:
        rgba(255, 255, 255, 0.18);

    color: white;

    box-shadow:
        inset 3px 0 0
        rgba(255, 255, 255, 0.8);
}

/* =========================================================
   MODE 2
   Phase 2
   ========================================================= */


/* ---------------------------------------------------------
   Main floating display
   --------------------------------------------------------- */

/* ==========================================
   MODE 2 DISPLAY
   ========================================== */
/* ==========================================
   MODE 2 — MINIMAL VISUAL OBJECT
   ========================================== */

#mode2Display {
    position: fixed;

    left: 50%;
    top: 50%;

    width: 300px;
    height: 300px;

    transform: translate(-50%, -50%);

    z-index: 9000;

    display: none;

    background: #000000;

    overflow: visible;

    user-select: none;

    touch-action: none;

    cursor: grab;
	
	border-radius: 50%;
	
	opacity:0.9;
}

#mode2Display.active {
    display: block;
}


#mode2Display.dragging {
    cursor: grabbing;
}

#mode2Visual {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;
}


#mode2Orbit {

    position: relative;

    width: 70%;
    height: 70%;

    border: 1px solid rgba(22, 138, 173, 0.3);;

    border-radius: 50%;

    box-sizing: border-box;
}

#mode2Sun {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 30%;

    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background: black;
	
	border:3px solid #FFC30E;
	
	/* background-image:url(https://assets.science.nasa.gov/content/dam/science/psd/photojournal/pia/pia26/pia26681/PIA26681.jpg); */
	
	background-position: 50% 50%;
	
	background-size: 150px;

    box-shadow:
        0 0 15px rgba(255,138,0,0.35);

    pointer-events: none;
}

#mode2Earth {
    position: absolute;

    left: 50%;
    top: 0;

    width: 8%;

    aspect-ratio: 1;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #82BCCD;

    box-shadow:
        0 0 8px rgba(130, 188, 205,0.45);

    pointer-events: none;

    transition:
        left 0.8s linear,
        top 0.8s linear;

    animation:
        earthPulse 2.8s ease-in-out infinite;
}

@keyframes earthPulse {

    0% {
		transform:
            translate(-50%, -50%)
			scale(1);
			
		opacity:.78;

		filter:
            brightness(.86)
            saturate(1);
			
            
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.3);
			
		opacity:.98;

        filter:
            brightness(1.05)
            saturate(1.04);	
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
			
		opacity:.78;

		filter:
            brightness(.86)
            saturate(1);
    }
}

#mode2Earth span {

    position: absolute;

    left: 100%;
    top: 50%;

    margin-left: 6px;

    transform:
        translateY(-50%);

    color: #333;

    font-size: 10px;

    white-space: nowrap;

    pointer-events: none;
}

/* ---------------------------------------------------------
   Mode 2 selector
   --------------------------------------------------------- */

#mode2Selector {

    position: absolute;

    top: 50%;
    right: -42px;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-radius:
        0 8px 8px 0;

    opacity: 0.75;

    pointer-events: auto;
}


/* Buttons */

.mode2Button {

    width: 36px;
    height: 36px;

    padding: 0;
    margin: 0;

    border: none;

    border-bottom:
        1px solid rgba(255,255,255,0.15);

    background:
        rgba(22,25,59,0.75);

    color:
        rgba(255,255,255,0.75);

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    -webkit-tap-highlight-color: transparent;
}


.mode2Button:last-child {
    border-bottom: none;
}


.mode2Button:hover {

    background:
        rgba(22,25,59,0.95);

    color: white;
}


.mode2Button.active {

    background:
        rgba(255,255,255,0.18);

    color: white;

    box-shadow:
        inset -3px 0 0
        rgba(255,255,255,0.8);
}

#mode2Progress {
    position: absolute;

    left: 50%;
    top: 75%;

    transform: translate(-50%, -50%);

    z-index: 5;

    pointer-events: none;

    text-align: center;

    white-space: nowrap;
}

#mode2ProgressValue {
    display: block;

    color: #82bccd;

    line-height: 1;

    letter-spacing: 0.03em;
	
	font-family: "Space Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.03em;

    text-shadow:
        0 1px 5px rgba(0,0,0,0.9);
		
	border-bottom: 0.1px solid #82bccd;
    padding: 3px 0px;
}


/* ---------------------------------------------------------
   Resize handle
   --------------------------------------------------------- */

#mode2ResizeHandle {

    position: absolute;

    right: -8px;
    bottom: -8px;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid rgba(255,255,255,0.3);

    cursor:
        nwse-resize;

    pointer-events: auto;
}

/* ==========================================
   MODE 2 — MINIMAL VISUAL PRESENTATION
   ========================================== */

body.mode2Minimal {
    perspective: 1200px;
}
body.mode2Minimal::before {
    content: "";

    position: fixed;
    inset: -10%;

    background-image: url("https://assets.science.nasa.gov/content/dam/science/psd/photojournal/pia/pia26/pia26681/PIA26681.jpg");

    background-size: cover;
    background-position: 110%;
    background-repeat: no-repeat;

    transform:
        rotateX(2deg)
        rotateY(-4deg)
        scale(1.08);

    z-index: -1;

    animation: lunarCamera 90s linear infinite;
}

@keyframes lunarCamera {

    from {
        transform:
            rotateX(2deg)
            rotateY(-4deg)
            scale(1.08);
    }

    to {
        transform:
            rotateX(2deg)
            rotateY(4deg)
            scale(1.08);
    }
}

body.mode2Minimal::after {
    content: "";
    position: fixed;

    right: 0vw;
    top: 1vw;

    width: 0;
    aspect-ratio: 1;

    background-image: url("https://assets.science.nasa.gov/dynamicimage/assets/science/esd/eo/content-feature/bluemarble/images/globe_west_2048.jpg?w=2048&h=2048&fit=clip&crop=faces%2Cfocalpoint");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 50%;

    z-index: 0;

    pointer-events: none;

    filter:
        drop-shadow(0 0 18px rgba(0,100,180,0.35));

    opacity: 0.95;
}

body.mode2Minimal #app {
    background: #ffffff;
}

body.mode2Minimal #modeSelector {
    /* Keep temporarily available while developing */
    opacity: 0.65;
}

body.mode2Minimal .mode1Content {
    display: none !important;
}

/* ==========================================
   Mode 2 attribution and lock visibility
   ========================================== */

body:not(.mode2Minimal) #mode2Attribution,
body:not(.mode2Minimal) #mode2Lock {
    display: none;
}

/* ==========================================
   MODE 3
   Transparent Astronomical Visual
   ========================================== */

#mode3Display {

    position: fixed;

    top: 3vh;
    left: 3vw;

    width: min(25vw, 300px);

    height: auto;

    z-index: 8000;

    display: none;

    background: transparent;

    pointer-events: none;

    font-family:
        "Space Grotesk",
        sans-serif;
}


#mode3Display.active {
    display: block;
}


/* ------------------------------------------
   Brand
   ------------------------------------------ */

#mode3Header {

    position: absolute;

    top: 20%;

    left: 50%;

    transform:
        translateX(-50%);

    text-align: center;

    color:
        rgba(255,255,255,1);
		
	font-size: 11px;

    font-weight: 400;

    letter-spacing:
        0.16em;

    white-space: nowrap;
	
	background: black;
    width: auto;
    padding: 1px 3px;
}


/* ------------------------------------------
   Astronomical visual
   ------------------------------------------ */


/* ==========================================
   MODE 3 SANDBOX
   ========================================== */

#mode3Sandbox {
    position: fixed;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    background: transparent;

    pointer-events: none;
}


#mode3SandboxFrame {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: none;

    margin: 0;

    padding: 0;

    background: transparent;

    display: block;
}


/* ==========================================
   MODE 3 ASTRONOMICAL VISUAL
   ========================================== */

#mode3Visual {

    position: absolute;

    left: 3vw;

    top: 3vh;

    width: min(10vw, 300px);

    aspect-ratio: 1;

    z-index: 10;

    background: transparent;

    pointer-events: none;
}


/* ------------------------------------------
   Orbit
   ------------------------------------------ */

#mode3Orbit {

    position: absolute;

    inset: 8%;

    border-radius: 50%;

    border:
        1px solid
        rgba(180,190,200,0.30);

    box-sizing: border-box;
}


/* ------------------------------------------
   Sun
   ------------------------------------------ */

#mode3Sun {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 17%;

    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background: transparent;

    border:
        2px solid
        rgba(255,255,255,0.90);

    box-shadow:
        0 0 0 1px
        rgba(0,0,0,0.85);

    box-sizing: border-box;
}


/* ------------------------------------------
   Earth
   ------------------------------------------ */

#mode3Earth {

    position: absolute;

    left: 50%;
    top: 8%;

    width: 7%;

    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        #79c9df;

    box-shadow:
        0 0 8px
        rgba(121,201,223,0.40);

    animation:
        mode3EarthPulse
        3.2s
        ease-in-out
        infinite;
}


@keyframes mode3EarthPulse {

    0% {
        transform:
            translate(-50%, -50%)
            scale(1);
			
		opacity:.78;

		filter:
            brightness(.86)
            saturate(0.7);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.30);
			
		opacity:.98;

        filter:
            brightness(1.05)
            saturate(1.04);
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
			
		opacity:.78;

		filter:
            brightness(.86)
            saturate(0.7);
    }
}


/* ------------------------------------------
   Earth label
   ------------------------------------------ */

#mode3EarthLabel {

    position: absolute;

    left: 100%;
    top: 50%;

    margin-left: 5px;

    transform:
        translateY(-50%);

    color:
        rgba(255,255,255,0.60);

    font-size: 8px;

    white-space: nowrap;
}


/* ------------------------------------------
   Progress
   ------------------------------------------ */

#mode3Progress {

    position: absolute;

    left: 50%;
    bottom: 15%;

    transform:
        translateX(-50%);

    white-space: nowrap;

    text-align: center;
}


#mode3ProgressValue {

    color:
        #79c9df;

    font-size: 14px;

    font-weight: 800;

    letter-spacing:
        0.04em;

 /*   text-shadow:
        0 1px 4px
        rgba(0,0,0,0.45); */
}

#mode3Fullscreen {
    position: fixed;
    right: 14px;
    bottom: 14px;

    width: 30px;
    height: 30px;

    padding: 0;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 6px;

    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.45);

    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1;

    cursor: pointer;

    opacity: 0.35;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        opacity 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;

    z-index: 10001;

    -webkit-tap-highlight-color: transparent;
	
	pointer-events: auto;
}

#mode3Fullscreen:hover {
    opacity: 0.8;
    background: rgba(0,0,0,0.35);
    color: #ffffff;
}

#mode3Fullscreen:active {
    transform: scale(0.92);
}

#mode4UnderConstruction {

    position: fixed;

    inset: 0;

    z-index: 9000;

    display: none;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    color: #16193B;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 18px;

    font-weight: 400;

    letter-spacing: 0.08em;

    text-transform: lowercase;

    pointer-events: none;
}

#mode4UnderConstruction.active {
    display: flex;
}


#mode2Attribution {
    position: fixed;
    left: 10px;
    bottom: 7px;

    color: rgba(255,255,255,0.28);

    font-family: "Space Grotesk", sans-serif;
    font-size: 7px;
    letter-spacing: 0.03em;

    pointer-events: none;
    z-index: 8001;
}

#mode2Lock {
    position: fixed;

    top: 10px;
    left: 10px;

    width: 30px;
    height: 30px;

    padding: 0;

    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;

    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.40);

    font-size: 14px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    opacity: 0.35;

    transition:
        opacity 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;

    z-index: 10001;

    -webkit-tap-highlight-color: transparent;
}

#mode2Lock:hover {
    opacity: 0.8;

    background: rgba(0,0,0,0.35);

    color: #ffffff;
}

#mode2Lock:active {
    transform: scale(0.92);
}

/* ==========================================
   MODE 4
   ========================================== */

#mode4Display {
    position: fixed;
    inset: 0;
    display: block;
    overflow: hidden;
    background: #02050a;
}

#mode4Scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#mode4Scene canvas {
    display: block;
    width: 100%;
    height: 100%;
}




#mode4BackToOrbit {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
   left: max(16px, env(safe-area-inset-left));
    z-index: 10;
    display: none;
    min-height: 44px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: rgba(10, 10, 11);
    color: gray;
    font-size: 14px;
    cursor: pointer;
    touch-action: manipulation;
}

#mode4SunInfo {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);

    color: rgba(235, 225, 210, 0.85);
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    white-space: nowrap;

    pointer-events: none;
    display: none;
    z-index: 10;
	left: 50%;
    width: calc(100% - 32px);
    text-align: center;
    white-space: normal;
}

#mode4SunInfo span {
    color: #ff9a45;
}


#mode4LocationHUD{
	display:none;
}

/* ==========================================
   AI Explain — discreet interactive terms
   ========================================== */

.aiExplain {
    cursor: pointer;

    background-color: rgba(170, 180, 190, 0.10);
    box-shadow: inset 0 0 0 1px rgba(170, 180, 190, 0.18);

    border-radius: 3px;
    padding: 1px 4px;

    transition:
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.aiExplain:hover {
    background-color: rgba(170, 180, 190, 0.18);
    box-shadow: inset 0 0 0 1px rgba(190, 200, 210, 0.32);
}

.aiExplain:focus-visible {
    outline: 2px solid #9baaba;
    outline-offset: 3px;
}


/* ==========================================
   AI Explain — full-screen overlay
   ========================================== */

.aiExplainOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: grid;
    place-items: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.aiExplainOverlay[hidden] {
    display: none;
}

.aiExplainCard {
    position: relative;

    width: min(390px, 100%);
    max-height: min(80vh, 600px);
    overflow-y: auto;

    padding: 26px;

    color: #e8edf2;
    background: #091321;

    border: 1px solid rgba(170, 185, 200, 0.30);
    border-radius: 12px;

    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5);

    font-family: inherit;
    line-height: 1.65;
}

.aiExplainLabel {
    margin-bottom: 12px;

    color: #a4b2c0;
    font-size: 10px;
    letter-spacing: 0.16em;
}

.aiExplainCard h3 {
    margin: 0 30px 12px 0;

    color: #ffffff;
    font-size: 19px;
    font-weight: 500;
}

.aiExplainCard p {
    margin: 0;

    color: #ccd5df;
    font-size: 14px;
}

.aiExplainClose {
    position: absolute;
    top: 12px;
    right: 15px;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #bdc8d3;

    font-size: 25px;
    cursor: pointer;
}

.aiExplainClose:hover {
    background: rgba(170, 180, 190, 0.12);
    color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
    .aiExplainCard {
        animation: aiExplainAppear 160ms ease-out;
    }

    @keyframes aiExplainAppear {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}



#mode4EarthCameraControls {
    position: absolute;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 13;
    width: min(180px, calc(100% - 20px));
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid rgba(160, 175, 190, 0.16);
    border-radius: 5px;
    background: rgba(2, 5, 10, 0.86);
    color: rgba(220, 230, 240, 0.75);
    font: 10px/1.25 Arial, sans-serif;
    display: none;
}

#mode4EarthCameraControls .earthCameraTitle {
    margin-bottom: 5px;
    color: #8bbde8;
    font-size: 9px;
    letter-spacing: 1.5px;
}

#mode4EarthCameraControls label {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin: 5px 0 3px;
}

#mode4EarthCameraControls label span {
    color: #8bbde8;
    font-variant-numeric: tabular-nums;
}

#mode4EarthCameraControls input[type="range"] {
    display: block;
    width: 100%;
    height: 14px;
    margin: 0;
    accent-color: #8bbde8;
    cursor: pointer;
}

#mode4EarthCameraControls button {
    width: 100%;
    margin-top: 6px;
    padding: 5px;
    border: 1px solid rgba(160, 175, 190, 0.2);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(220, 230, 240, 0.75);
    font-size: 10px;
    cursor: pointer;
}


#earthCameraReset {width:25% !important;}


/* Slim slider track */
#mode4EarthCameraControls input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 14px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

/* Chrome, Edge, Safari */
#mode4EarthCameraControls input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 2px;
    background: rgba(160, 175, 190, 0.35);
}

#mode4EarthCameraControls input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    margin-top: -3px;
    border-radius: 50%;
    background: #8bbde8;
    border: none;
}

/* Firefox */
#mode4EarthCameraControls input[type="range"]::-moz-range-track {
    height: 2px;
    border-radius: 2px;
    background: rgba(160, 175, 190, 0.35);
}

#mode4EarthCameraControls input[type="range"]::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8bbde8;
    border: none;
}

#mode4TapIndicator {
    position: fixed;
    display: none;
    width: 14px;
    height: 14px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
}

#mode4Credits {
    position: absolute;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 0;
    max-width: min(310px, calc(100% - 24px));
    color: gray;
    font: 6px/1.5 Arial, sans-serif;
    letter-spacing: 0.3px;
}

#mode4Credits summary {
    cursor: pointer;
    list-style: none;
    padding: 6px 9px;
    border: 1px solid rgba(160, 175, 190, 0.18);
    border-radius: 4px;
    background: rgba(2, 5, 10, 0.72);
    user-select: none;
    -webkit-user-select: none;
}

#mode4Credits summary::-webkit-details-marker {
    display: none;
}

#mode4Credits summary::after {
    content: ' +';
    color: rgba(210, 220, 230, 0.45);
}

#mode4Credits[open] summary::after {
    content: ' −';
}

#mode4Credits > div {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid rgba(160, 175, 190, 0.16);
    border-radius: 4px;
    background: rgba(2, 5, 10, 0.94);
}

#mode4Credits strong {
    color: rgba(225, 235, 245, 0.9);
    font-weight: 500;
}

#mode4Credits a {
    color: #8bbde8;
    text-decoration: none;
}

#mode4Credits a:hover {
    text-decoration: underline;
}

#mode4Credits .mode4CreditsNote {
    color: rgba(190, 200, 210, 0.5);
    font-size: 9px;
}


.icon-normal {
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c0d8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='12' rx='5.2' ry='4.2'/%3E%3Cellipse cx='12' cy='12' rx='8.5' ry='3.2' transform='rotate(-28 12 12)'/%3E%3Ccircle cx='5.2' cy='13.8' r='1.1' fill='%23a8c0d8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-widget {
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c0d8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='2.2'/%3E%3Cellipse cx='12' cy='12' rx='4.2' ry='3.4'/%3E%3Cellipse cx='12' cy='12' rx='6.8' ry='2.6' transform='rotate(-28 12 12)'/%3E%3Ccircle cx='6.8' cy='13.5' r='0.9' fill='%23a8c0d8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-customized {
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c0d8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l1.6 2.2 2.5-.4 1.1 2.4 2.4 1.1-.4 2.5 2.2 1.6-2.2 1.6.4 2.5-2.4 1.1-1.1 2.4-2.5-.4-1.6 2.2-1.6-2.2-2.5.4-1.1-2.4-2.4-1.1.4-2.5-2.2-1.6 2.2-1.6-.4-2.5 2.4-1.1 1.1-2.4 2.5.4z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-holographic {
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c0d8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.5' rx='4.8' ry='2.2'/%3E%3Cpath d='M7.2 6.5 L12 19.5 L16.8 6.5'/%3E%3Cellipse cx='12' cy='19.5' rx='3.2' ry='1.3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* =========================================
   MOBILE
   ========================================= */

@media(max-width:650px){

    main{
        width:94vw;

        padding-top:8px;
    }


    .clock-area{
        padding:0;
    }


    .orbit{
        width:min(82vw,430px);
    }


    .bottom-details{
        grid-template-columns:1fr;
    }


    .bottom-info.expanded{
        max-height:650px;
    }


    footer{
        flex-direction:column;

        gap:3px;

        padding-bottom:3px;
    }


    .overlay{
        padding:10px;
    }


    .overlay-panel{
        max-height:94vh;

        border-radius:18px;
    }


    .overlay-header{
        padding:16px;
    }


    .synopsis-content{
        padding:16px;
    }
	
    #modeSelector {
        opacity: 0.8;
		top:75%;
    }

    .modeButton {
        width: 44px;
        height: 44px;
    }	

	#mode2Display {

        width: 220px;
        height: 220px;
    }
	
	body.mode2Minimal::after {
    content: "";
    position: fixed;

    right: 0vw;
    top: 1vw;

    width: 5%;
	}

    #mode2Selector {

        right: -38px;
    }

    .mode2Button {

        width: 34px;
        height: 34px;
    }
	

  #mode3Display {

        top: 1.5vh;
        left: 3vw;

        width: 27vw;

        min-width: 200px;
    }

    #mode3Header {

        font-size: 9px;

        letter-spacing:
            0.12em;
			
		top:20%;
    }

    #mode3Visual {

        margin-top: 0px;
		width: min(25vw, 300px)
		
    }

    #mode3ProgressValue {

        font-size: 14px;
    }
	
	#mode2Attribution {
	font-size:3px;
	}
	
	#cosmicAlerts {
        width: 94%;
        margin-top: 5px;
    }

    #cosmicFeatured {
        padding: 9px 11px;
    }

    #cosmicAlertTitle {
        font-size: 0.82rem;
    }

    #cosmicAlertDescription {
        font-size: 0.5rem;
    }
	
	.cosmic-alert-footer {
    font-size: 0.5rem;
	}
	
	#mode4Scene canvas {
	 transform: translateY(-60px);
}