/* --- Root Variables & Container --- */
.geode-container, .geode-prose-container {
    --bg-rock: #1c1c1f;
    --text-primary: #f0f0f0;
    --text-faded: #a0a0a0;
    --inactive-ink: #656565;
    --inactive-border: rgba(101, 101, 101, 0.3);
    --accent-emerald: linear-gradient(135deg, #0575E6, #00F260);
    --font-display: 'Oswald', sans-serif;
    --font-label: 'Poppins', sans-serif;

    font-family: var(--font-label);
    background-color: var(--bg-rock);
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    color: var(--text-primary);
    padding: clamp(20px, 5vw, 40px);
    border-radius: 8px;
    max-width: 1100px;
    margin: 20px auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border: 1px solid var(--inactive-border);
}

/* === Master Clock Header === */
.geode-header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--inactive-border); }
.header__title { font-family: var(--font-label); font-weight: 600; font-size: 1rem; letter-spacing: 2px; color: var(--text-faded); margin: 0 0 10px 0; text-transform: uppercase; }
.header__time { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--text-primary); margin: 0; }

/* === Asymmetrical Console Layout === */
.geode-console { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(15px, 3vw, 25px); }
.console-side-column { display: flex; flex-direction: column; gap: clamp(15px, 3vw, 25px); }
.timeline-node { padding: 20px; border: 1px solid var(--inactive-border); transition: all 0.4s ease; background-color: rgba(40,40,40,0.3); clip-path: polygon(0% 10%, 100% 0%, 100% 90%, 0% 100%); }

/* --- Node Content Styling --- */
.node-title { font-family: var(--font-label); font-weight: 600; font-size: 0.9rem; margin: 0 0 15px 0; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; }
.node-display { display: flex; justify-content: center; align-items: center; gap: clamp(10px, 2vw, 20px); }
.value-group { display: flex; align-items: center; justify-content: center; }
.node-sign { display: inline-block; width: 0.8em; text-align: right; }
.node-complication span, .node-primary span { font-feature-settings: 'tnum'; }

/* --- Main vs. Side Pods --- */
.node--main {
    padding: 30px 40px;
    border-image: var(--accent-emerald) 1;
    color: var(--text-primary);
}
.node--main .node-title { font-size: 1.1rem; background: var(--accent-emerald); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.node--main .node-primary { font-family: var(--font-display); font-size: clamp(3.5rem, 10vw, 5.5rem); line-height: 1; }
.node--main .node-complication { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; }
.node--main .node-separator { animation: blink 2s infinite ease-in-out; margin: 0 5px; }

.node--side { color: white; }
.node--side.is-active { color: var(--text-primary); border-color: var(--inactive-border); }
.node--side.is-active .node-title { color: var(--text-faded); }
.node--side .node-title { color: var(--text-faded); }
.node--side .node-primary { font-size: 1.5rem; }
.node--side .node-complication { font-size: 1rem; }
.node--side .node-complication label { font-size: 0.6rem; }

@keyframes blink { 50% { opacity: 0.3; } }

/* === Responsive Layout Shift === */
@media (max-width: 900px) {
    .geode-console { display: block; }
    .node--main { order: -1; margin-bottom: 25px; }
    .console-side-column { margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .console-side-column { grid-template-columns: 1fr; }
}

/* === Content Section Styling === */
.geode-prose-container { margin-top: 40px; padding: 40px; border: 1px solid var(--inactive-border); clip-path: polygon(0% 2%, 100% 0%, 100% 98%, 0% 100%); }
.prose-title { font-family: var(--font-label); font-size: 1.8rem; text-align: center; letter-spacing: 2px; margin: 0 0 20px 0; text-transform: uppercase; background: var(--accent-emerald); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; }
.geode-prose-container h3 { font-family: var(--font-label); font-size: 1.8rem; letter-spacing: 1px; color: var(--text-primary); margin: 30px 0 10px 0; font-weight: 600; }
.geode-prose-container p { font-size: 1.1rem; line-height: 1.7; font-weight: 400; color: var(--text-faded); text-align: justify; }
.prose-divider { border: 0; height: 1px; background-image: linear-gradient(to right, transparent, var(--inactive-border), transparent); margin: 40px auto; width: 60%; }