:root {
    /* Compliance terms from DESIGN.md: Playfair-Elegant System* System:** (Google Fonts Interaction System* System:** Intersection Observer. When SVG's parent hexagon enters the viewport (threshold: 0.3 */
    --void: #0D0A1A;
    --teal-void: #0A1A1A;
    --rose: #FF6B9D;
    --lemon: #FFE66D;
    --mint: #C8FFD4;
    --lavender: #C3AED6;
    --aqua: #45E3FF;
    --border: #1E1533;
    --bg-hue: 270;
    --hex-width: 280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: clamp(14px, 1.4vw, 16px); }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: hsl(var(--bg-hue), 42%, 7%);
    color: #C8FFD4;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.02em;
    cursor: default;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 18%, rgba(255,107,157,0.12), transparent 28%),
        radial-gradient(circle at 83% 40%, rgba(69,227,255,0.09), transparent 28%),
        linear-gradient(135deg, rgba(30,21,51,0.8), rgba(13,10,26,0.88));
}

main { scroll-snap-type: y proximity; }

.chamber {
    position: relative;
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
}

.chamber h2 {
    position: absolute;
    top: clamp(1.3rem, 4vw, 3rem);
    left: clamp(1.3rem, 4vw, 3rem);
    z-index: 3;
    font-family: "Playfair Display", serif;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-style: italic;
    line-height: 0.95;
    color: #FF6B9D;
    text-shadow: 0 0 24px rgba(255,107,157,0.32);
}

.chamber-prompt, .chamber-garden, .chamber-greenhouse, .chamber-bloom { background: rgba(13,10,26,0.68); }
.chamber-aquarium { background: rgba(10,26,26,0.72); }

.hex {
    position: relative;
    width: clamp(220px, 25vw, 340px);
    aspect-ratio: 1;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background:
        linear-gradient(135deg, rgba(255,107,157,0.05), rgba(255,230,109,0.035)),
        rgba(30,21,51,0.72);
    border: 1px solid #1E1533;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(1rem, 2vw, 1.8rem);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16"><text x="0" y="14" font-size="14" fill="%23FF6B9D" font-family="monospace">_</text></svg>') 0 12, auto;
    backdrop-filter: blur(8px);
}

.hex:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: #FF6B9D;
    box-shadow: 0 12px 32px rgba(255,107,157,0.15), 0 4px 12px rgba(69,227,255,0.1);
}

.terminal-bar {
    position: absolute;
    top: 18%;
    left: 16%;
    right: 16%;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #1E1533;
    color: #C3AED6;
    font-size: 0.66rem;
}

.terminal-bar span { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.terminal-bar span:nth-child(1) { background: #FF6B9D; }
.terminal-bar span:nth-child(2) { background: #FFE66D; }
.terminal-bar span:nth-child(3) { background: #C8FFD4; }
.terminal-bar em { margin-left: auto; font-family: "Cormorant Garamond", serif; color: #C3AED6; }

.hero-orbit { position: relative; width: min(900px, 92vw); min-height: 78vh; display: grid; place-items: center; }
.hero-hex { width: clamp(300px, 41vw, 500px); box-shadow: 0 0 60px rgba(255,107,157,0.08); }
.hero-command { color: #C8FFD4; font-size: clamp(0.9rem, 1.25vw, 1.15rem); white-space: nowrap; }
.prompt-mark { color: #FF6B9D; font-weight: 500; margin-right: 0.45em; }
.type-text { display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; border-right: 3px solid #FF6B9D; animation: typing 3s steps(28) forwards, blink 1s step-end infinite; }

@keyframes typing { to { width: 28ch; } }
@keyframes blink { 50% { border-color: transparent; } }

.satellite {
    position: absolute;
    width: clamp(94px, 13vw, 150px);
    aspect-ratio: 1;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(69,227,255,0.06);
    border: 1px solid #1E1533;
    display: grid;
    place-items: center;
    animation: floatPulse 3s ease-in-out infinite;
}
.satellite svg { width: 74%; fill: none; stroke: #FFE66D; stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255,230,109,0.25)); }
.satellite-one { left: 3%; top: 16%; }
.satellite-two { right: 5%; top: 22%; animation-delay: .5s; }
.satellite-three { bottom: 10%; left: 63%; animation-delay: 1s; }
.satellite-three svg { stroke: #C8FFD4; }
.satellite-one svg { stroke: #FF6B9D; }

@keyframes floatPulse { 0%,100% { transform: translateY(0) scale(.95); opacity: .64; } 50% { transform: translateY(-12px) scale(1); opacity: 1; } }

.honeycomb {
    width: min(1240px, 96vw);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding-top: clamp(5rem, 10vw, 8rem);
}
.plot-cell { opacity: 0; transform: translateY(24px) scale(.9); }
.plot-cell.is-visible { opacity: 1; transform: translateY(0) scale(1); transition: opacity .7s ease, transform .7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.plot-cell:nth-child(8n+5), .plot-cell:nth-child(8n+6), .plot-cell:nth-child(8n+7), .plot-cell:nth-child(8n+8) { transform: translateX(calc(var(--hex-width) / 2)) translateY(24px) scale(.9); }
.plot-cell.is-visible:nth-child(8n+5), .plot-cell.is-visible:nth-child(8n+6), .plot-cell.is-visible:nth-child(8n+7), .plot-cell.is-visible:nth-child(8n+8) { transform: translateX(calc(var(--hex-width) / 2)) translateY(0) scale(1); }
.plot-cell svg { width: 43%; overflow: visible; fill: none; stroke: #45E3FF; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(69,227,255,0.2)); }
.plot-cell:nth-child(3n+1) svg { stroke: #FF6B9D; }
.plot-cell:nth-child(3n+2) svg { stroke: #FFE66D; }
.plot-cell p { margin-top: 0.8rem; max-width: 70%; text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(0.75rem, 1vw, 0.95rem); color: #C3AED6; line-height: 1.2; }

svg path, svg circle { vector-effect: non-scaling-stroke; }
.draw path, .draw circle { stroke-dasharray: var(--dash, 520); stroke-dashoffset: var(--dash, 520); animation: drawPlot 2.5s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes drawPlot { to { stroke-dashoffset: 0; } }

.water-field { position: relative; min-height: 72vh; width: min(1000px, 92vw); display: grid; place-items: center; }
.terminal-stream { position: relative; z-index: 2; text-align: center; display: grid; gap: 1.5rem; }
.terminal-stream p { color: #C8FFD4; font-size: clamp(0.9rem, 1.2vw, 1.1rem); animation: floatLine 20s linear infinite; }
.terminal-stream p:nth-child(2) { animation-delay: -4s; }
.terminal-stream p:nth-child(3) { animation-delay: -8s; }
.terminal-stream p:nth-child(4) { animation-delay: -12s; }
.terminal-stream p:nth-child(5) { animation-delay: -16s; }
@keyframes floatLine { 0% { transform: translateY(46vh); opacity: 0; } 12%,88% { opacity: .72; } 100% { transform: translateY(-46vh); opacity: 0; } }
.bubble-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.bubble {
    position: absolute;
    bottom: -100px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #C3AED6;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(69,227,255,0.15) 0%, transparent 40%), rgba(69,227,255,0.06);
    box-shadow: inset 0 0 20px rgba(200,255,212,0.1), 0 0 12px rgba(69,227,255,0.08);
    animation: rise linear forwards;
}
@keyframes rise { 0% { transform: translateY(100vh) scale(.8); opacity: 0; } 20% { opacity: .7; } 100% { transform: translateY(-10vh) scale(1); opacity: 0; } }

.greenhouse-grid { width: min(1080px, 92vw); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-top: 5rem; }
.console-panel { position: relative; min-height: 340px; padding: 6.5rem 2rem 2rem; background: rgba(30,21,51,.72); border: 1px solid #1E1533; box-shadow: 0 0 40px rgba(69,227,255,.05); }
.console-panel .terminal-bar { top: 1rem; left: 1rem; right: 1rem; }
.console-lines p { margin: .55rem 0; color: #C8FFD4; }
.console-lines b { color: #FFE66D; font-weight: 500; }
.console-lines .success { color: #C8FFD4; text-shadow: 0 0 10px rgba(200,255,212,.25); }
.live-plot { display: grid; place-items: center; min-height: 420px; }
.live-plot svg { width: min(420px, 90vw); fill: none; stroke: #FF6B9D; stroke-width: 1.5; filter: drop-shadow(0 0 18px rgba(255,107,157,.22)); }
.live-plot path:nth-child(2) { stroke: #FFE66D; }
.live-plot path:nth-child(3) { stroke: #C8FFD4; }
.live-plot path:nth-child(4) { stroke: #C3AED6; }
.live-plot circle { stroke: #45E3FF; }

.bloom-hex { width: min(580px, 78vw); border-color: #FF6B9D; box-shadow: 0 0 70px rgba(255,107,157,.12); }
.bloom-hex svg { width: 72%; fill: none; stroke: #FF6B9D; stroke-width: 1.5; opacity: .9; }
.final-flower path:nth-child(2) { stroke: #FFE66D; }
.final-flower path:nth-child(3) { stroke: #C8FFD4; }
.final-flower path:nth-child(4) { stroke: #C3AED6; }
.final-flower path:nth-child(5), .final-flower circle { stroke: #45E3FF; }
.bloom-hex h1 { position: absolute; bottom: 30%; font-family: "Playfair Display", serif; font-size: clamp(2.5rem, 6vw, 5.5rem); color: #FF6B9D; text-shadow: 0 0 30px rgba(255,107,157,.4); }
.bloom-hex p { position: absolute; bottom: 22%; width: 80%; text-align: center; color: #C8FFD4; font-size: clamp(.85rem, 1.2vw, 1.1rem); }

@media (max-width: 1023px) {
    .honeycomb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .plot-cell:nth-child(n) { transform: translateY(24px) scale(.9); }
    .plot-cell.is-visible:nth-child(n) { transform: translateY(0) scale(1); }
    .plot-cell:nth-child(6n+4), .plot-cell:nth-child(6n+5), .plot-cell:nth-child(6n+6) { transform: translateX(calc(var(--hex-width) / 2)) translateY(24px) scale(.9); }
    .plot-cell.is-visible:nth-child(6n+4), .plot-cell.is-visible:nth-child(6n+5), .plot-cell.is-visible:nth-child(6n+6) { transform: translateX(calc(var(--hex-width) / 2)) translateY(0) scale(1); }
}

@media (max-width: 760px) {
    .greenhouse-grid { grid-template-columns: 1fr; }
    .satellite { opacity: .5; }
}

@media (max-width: 640px) {
    .chamber { min-height: 100vh; padding: 2rem 1rem; align-items: start; padding-top: 7rem; }
    .chamber h2 { font-size: clamp(2rem, 13vw, 3.5rem); }
    .hero-orbit { min-height: 65vh; }
    .satellite { position: relative; inset: auto; width: 82px; margin: .4rem; display: inline-grid; }
    .honeycomb { grid-template-columns: 1fr; place-items: center; padding-top: 1rem; }
    .plot-cell:nth-child(n), .plot-cell.is-visible:nth-child(n) { transform: none; }
    .terminal-bar em { display: none; }
    .bloom-hex h1 { bottom: 31%; font-size: clamp(2rem, 12vw, 3.2rem); }
}