:root {
            --paper: #FAF9F6;
            --black: #0F172A;
            --white: #FFFFFF;
            --red: #FF4949;
            --blue: #3B82F6;
            --green: #22C55E;
            --yellow: #FACC15;
            --cyan: #06B6D4;
            --orange: #F97316;
            --pink: #EC4899;
            --water-deep: #001525;
            --water-mid: #002A4A;
            --border: 3px solid #0F172A;
            --border-light: 2px solid #0F172A;
            --shadow: 4px 4px 0 #0F172A;
            --shadow-hover: 2px 2px 0 #0F172A;
            --shadow-active: 0px 0px 0 #0F172A;
            --mono: 'JetBrains Mono', monospace;
            --serif: 'Space Grotesk', sans-serif;
            --sans: 'Space Grotesk', sans-serif;
        }

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

        html {
            scroll-behavior: smooth
        }

        body {
            background: var(--paper);
            color: var(--black);
            font-family: var(--sans);
            overflow-x: hidden
        }

        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
            border-left: var(--border-light);
            border-top: var(--border-light);
        }

        ::-webkit-scrollbar-track {
            background: var(--paper)
        }

        ::-webkit-scrollbar-thumb {
            background: var(--black);
            border: 2px solid var(--paper);
        }

        /* NAV */
        nav {
            background: var(--white);
            color: var(--black);
            padding: 12px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: var(--border);
            position: sticky;
            top: 0;
            z-index: 2000
        }

        .logo {
            font-size: 1.4rem;
            font-weight: 900;
            letter-spacing: -0.05em;
            text-transform: uppercase;
        }

        .logo em {
            color: var(--blue);
            font-style: normal;
        }

        .logo span {
            color: var(--red);
        }

        .nav-pills {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .pill {
            font-size: 0.65rem;
            font-family: var(--mono);
            font-weight: 800;
            padding: 6px 14px;
            background: var(--white);
            border: var(--border-light);
            color: var(--black);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow: var(--shadow-hover);
            transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
        }

        .pill:hover,
        .pill.active {
            background: var(--yellow);
            color: var(--black);
            transform: translate(2px, 2px);
            box-shadow: var(--shadow-active);
        }

        .sys-status {
            font-size: 0.55rem;
            color: var(--green);
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap
        }

        .dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--green);
            animation: blink 1.4s infinite
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: 0.2
            }
        }

        /* TICKER */
        .ticker {
            background: var(--black);
            overflow: hidden;
            height: 28px;
            border-bottom: var(--border);
            display: flex;
            align-items: center
        }

        .ticker-track {
            display: flex;
            gap: 64px;
            animation: tick 40s linear infinite;
            white-space: nowrap;
            font-size: 0.58rem;
            color: rgba(255, 255, 255, 0.55);
            padding: 0 32px
        }

        @keyframes tick {
            from {
                transform: translateX(0)
            }

            to {
                transform: translateX(-50%)
            }
        }

        .tv {
            color: var(--cyan);
            font-weight: 900
        }

        /* HERO */
        .hero {
            background: var(--yellow);
            color: var(--black);
            padding: 40px 32px 32px;
            border-bottom: var(--border);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            align-items: end;
        }

        .hero-left {}

        .hero-title {
            font-size: clamp(2.2rem, 5vw, 4.5rem);
            font-family: var(--serif);
            line-height: 0.92;
            font-weight: 900;
            letter-spacing: -0.02em;
        }

        .hero-title .c {
            color: var(--blue);
        }

        .hero-title .r {
            color: var(--red);
        }

        .hero-tag {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: rgba(0, 0, 0, 0.7);
            font-weight: 800;
            margin-top: 12px;
        }

        .hero-right {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .hero-stat {
            background: var(--white);
            border: var(--border);
            padding: 14px;
            position: relative;
            box-shadow: var(--shadow-hover);
        }

        .hero-stat::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 8px;
            background: var(--blue);
            border-right: var(--border);
        }

        .hs-label {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--black);
            font-weight: 800;
            margin-left: 10px;
        }

        .hs-val {
            font-size: 1.6rem;
            font-weight: 900;
            color: var(--black);
            line-height: 1.1;
            margin-left: 10px;
        }

        .hs-unit {
            font-size: 0.6rem;
            color: rgba(0, 0, 0, 0.6);
            font-weight: 700;
        }

        /* MAIN LAYOUT */
        .main-wrap {
            display: grid;
            grid-template-columns: 300px 1fr;
            min-height: 100vh;
            border-bottom: var(--border)
        }

        /* SIDEBAR */
        .sidebar {
            border-right: var(--border);
            background: var(--paper);
            overflow-y: auto;
            position: sticky;
            top: 50px;
            max-height: calc(100vh - 50px)
        }

        .sg {
            border-bottom: 2px solid var(--black);
            padding: 14px
        }

        .sg-title {
            font-size: 0.58rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--red);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .sg-title::before {
            content: '■';
            font-size: 0.4rem
        }

        .cr {
            margin-bottom: 8px
        }

        .cl {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: rgba(0, 0, 0, 0.55);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3px
        }

        .cv {
            color: var(--blue);
            font-weight: 900;
            font-size: 0.6rem
        }

        input[type=range] {
            width: 100%;
            height: 6px;
            appearance: none;
            background: var(--white);
            border: var(--border-light);
            cursor: pointer;
            margin-top: 6px;
            box-shadow: 2px 2px 0 var(--black);
        }

        input[type=range]::-webkit-slider-thumb {
            appearance: none;
            width: 16px;
            height: 16px;
            background: var(--blue);
            border: var(--border);
            cursor: pointer;
        }

        select {
            width: 100%;
            background: var(--white);
            color: var(--black);
            border: var(--border-light);
            padding: 6px 8px;
            font-family: var(--mono);
            font-size: 0.65rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 6px;
            box-shadow: 2px 2px 0 var(--black);
        }

        .btn {
            display: block;
            width: 100%;
            padding: 10px;
            border: var(--border);
            font-family: var(--sans);
            font-size: 0.65rem;
            font-weight: 900;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            box-shadow: var(--shadow-hover);
            transition: transform 0.1s, box-shadow 0.1s;
            margin-top: 10px;
            text-align: center;
        }

        .btn:hover, .btn:active {
            transform: translate(2px, 2px);
            box-shadow: var(--shadow-active);
        }

        .btn-y {
            background: var(--yellow);
            color: var(--black)
        }

        .btn-r {
            background: var(--red);
            color: var(--white);
        }

        .btn-b {
            background: var(--blue);
            color: var(--white);
        }

        .btn-g {
            background: var(--green);
            color: var(--black)
        }

        .chk-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 5px;
            font-size: 0.58rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            cursor: pointer
        }

        input[type=checkbox] {
            width: 16px;
            height: 16px;
            accent-color: var(--blue);
            border: var(--border);
            cursor: pointer;
        }

        /* RENDER AREA */
        .ra {
            display: flex;
            flex-direction: column
        }

        /* SECTION HEADERS */
        .sh {
            border-bottom: var(--border);
            padding: 16px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            background: var(--white);
        }

        .sn {
            width: 32px;
            height: 32px;
            border: var(--border-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 0.8rem;
            background: var(--black);
            color: var(--white);
            box-shadow: var(--shadow-hover);
            flex-shrink: 0
        }

        .st {
            font-size: 1.1rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: var(--black);
        }

        .ss {
            font-size: 0.6rem;
            color: rgba(0,0,0,0.5);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-top: 2px;
        }

        .sh-right {
            margin-left: auto;
            font-size: 0.65rem;
            color: var(--blue);
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            background: rgba(59, 130, 246, 0.1);
            padding: 4px 8px;
            border: var(--border-light);
            box-shadow: 2px 2px 0 var(--blue);
        }

        /* WATER RENDER */
        .water-wrap {
            position: relative;
            background: var(--water-deep);
            border-bottom: var(--border)
        }

        #waterCanvas {
            display: block;
            width: 100%;
            height: 550px;
            cursor: grab
        }

        #waterCanvas:active {
            cursor: grabbing
        }

        .water-hud {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none
        }

        .hud-tl,
        .hud-tr,
        .hud-bl,
        .hud-br {
            position: absolute;
            padding: 12px;
            font-size: 0.6rem;
            font-weight: 700;
            color: var(--black);
            line-height: 1.8;
            background: var(--white);
            border: var(--border-light);
            box-shadow: var(--shadow-hover);
        }

        .hud-tl {
            top: 12px;
            left: 12px;
            border-left: 2px solid var(--cyan)
        }

        .hud-tr {
            top: 12px;
            right: 12px;
            border-right: 2px solid var(--red);
            text-align: right
        }

        .hud-bl {
            bottom: 12px;
            left: 12px;
            border-left: 2px solid var(--green)
        }

        .hud-br {
            bottom: 12px;
            right: 12px;
            text-align: right
        }

        .hv {
            color: var(--cyan);
            font-weight: 900
        }

        .hv.r {
            color: var(--red)
        }

        .hv.g {
            color: var(--green)
        }

        .hv.y {
            color: var(--yellow)
        }

        .crosshair {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            opacity: 0.25
        }

        .crosshair::before,
        .crosshair::after {
            content: '';
            position: absolute;
            background: var(--cyan)
        }

        .crosshair::before {
            width: 30px;
            height: 1px;
            top: 0;
            left: -15px
        }

        .crosshair::after {
            width: 1px;
            height: 30px;
            top: -15px;
            left: 0
        }

        .scan-line {
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 238, 0.3), transparent);
            animation: scan 4s linear infinite;
            pointer-events: none
        }

        @keyframes scan {
            0% {
                top: 0;
                opacity: 0
            }

            10% {
                opacity: 1
            }

            90% {
                opacity: 1
            }

            100% {
                top: 100%;
                opacity: 0
            }
        }

        /* ALGAE SIM */
        .algae-section {
            border-bottom: var(--border);
            background: #050A05
        }

        .algae-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-top: 0
        }

        .algae-panel {
            position: relative;
            border-right: var(--border)
        }

        .algae-panel:last-child {
            border-right: 0
        }

        #algaeCanvas {
            display: block
        }

        .ap-label {
            position: absolute;
            top: 12px;
            left: 12px;
            font-size: 0.6rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 6px 12px;
            border: var(--border);
            background: var(--white);
            color: var(--black);
            box-shadow: 2px 2px 0 var(--black);
        }

        .ap-label.c {
            background: var(--blue);
            color: var(--white);
        }

        .ap-label.g {
            background: var(--green);
            color: var(--black);
        }

        .ap-label.r {
            background: var(--red);
            color: var(--white);
        }

        .ap-label.y {
            background: var(--yellow);
            color: var(--black);
        }

        .ap-stats {
            position: absolute;
            bottom: 12px;
            right: 12px;
            font-size: 0.55rem;
            font-weight: 700;
            color: var(--black);
            text-align: right;
            line-height: 1.7;
            background: var(--yellow);
            padding: 8px 12px;
            border: var(--border);
            box-shadow: 2px 2px 0 var(--black);
        }

        /* SPECTRAL STREAMS */
        .spectral-section {
            border-bottom: var(--border)
        }

        .spectral-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            border-top: 0
        }

        .spec-panel {
            position: relative;
            border-right: var(--border);
            background: #000;
            overflow: hidden
        }

        .spec-panel:last-child {
            border-right: 0
        }

        .spec-panel canvas {
            display: block
        }

        .spec-label {
            position: absolute;
            top: 12px;
            left: 12px;
            font-size: 0.55rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 6px 12px;
            background: var(--white);
            color: var(--black);
            border: var(--border);
            box-shadow: 2px 2px 0 var(--black);
        }

        .wavelength-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px
        }

        /* WORKER NODE 3D */
        .node-section {
            border-bottom: var(--border);
            background: #030308
        }

        .node-dual {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-top: 0
        }

        .node-pane {
            border-right: var(--border);
            position: relative
        }

        .node-pane:last-child {
            border-right: 0
        }

        #nodeCanvas {
            display: block
        }

        #internalsCanvas {
            display: block
        }

        .node-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none
        }

        /* INTERNALS SVG */
        .internals-pane {
            background: #030308;
            position: relative;
            overflow: hidden
        }

        .int-label {
            font-size: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 3px 7px;
            border: 1px solid;
            background: rgba(0, 0, 0, 0.8);
            position: absolute;
            white-space: nowrap;
            pointer-events: none
        }

        /* NODE PLACEMENT MAP */
        .map-section {
            border-bottom: var(--border);
            background: #030510
        }

        #mapCanvas {
            display: block;
            width: 100%
        }

        /* PYTHON CODE */
        .py-section {
            border-bottom: var(--border)
        }

        .py-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-top: 0
        }

        .py-pane {
            border-right: var(--border);
            overflow: auto;
            max-height: 520px
        }

        .py-pane:last-child {
            border-right: 0
        }

        .code {
            background: var(--white);
            color: var(--black);
            padding: 24px;
            font-family: var(--mono);
            font-size: 0.65rem;
            font-weight: 700;
            line-height: 1.8;
            white-space: pre;
            min-height: 520px;
        }

        .kw { color: var(--blue); font-weight: 900; }
        .fn { color: var(--red); font-weight: 900; }
        .st { color: var(--green); }
        .nm { color: var(--orange); font-weight: 800; }
        .cm { color: rgba(0, 0, 0, 0.5); font-style: normal; }
        .cls { color: var(--cyan); font-weight: 900; }
        .op { color: var(--black); font-weight: 900; }
        .dc { color: rgba(0, 0, 0, 0.6); }

        /* INDICES */
        .indices-wrap {
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px
        }

        .idx-card {
            border: var(--border);
            padding: 16px;
            box-shadow: var(--shadow-hover);
            background: var(--white);
            position: relative;
            overflow: hidden;
            transition: transform 0.1s, box-shadow 0.1s;
        }

        .idx-card:hover {
            transform: translate(2px, 2px);
            box-shadow: var(--shadow-active);
        }

        .idx-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: var(--black);
            border-top: var(--border);
        }

        .idx-name {
            font-size: 0.65rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--black);
            margin-bottom: 4px;
        }

        .idx-formula {
            font-size: 0.55rem;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 8px;
            font-style: normal;
            font-family: var(--mono);
        }

        .idx-val {
            font-size: 2.2rem;
            font-weight: 900;
            font-family: var(--serif);
            line-height: 1;
            color: var(--black);
            margin-bottom: 4px;
        }

        .idx-sub {
            font-size: 0.55rem;
            color: rgba(0, 0, 0, 0.6);
            margin-top: 2px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 800;
        }

        .idx-bar {
            height: 8px;
            background: var(--paper);
            margin-top: 12px;
            position: relative;
            border: var(--border-light);
        }

        .idx-fill {
            height: 100%;
            transition: width 0.8s ease, background 0.8s ease;
            border-right: var(--border-light);
        }

        .idx-status {
            font-size: 0.6rem;
            font-weight: 900;
            margin-top: 8px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* FOOTER */
        footer {
            background: var(--white);
            color: var(--black);
            padding: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            border-top: var(--border);
        }

        footer a {
            color: var(--blue);
            text-decoration: none;
            border-bottom: 2px solid var(--blue);
        }

        footer a:hover {
            color: var(--red);
            border-color: var(--red);
        }

        /* RESPONSIVE */
        @media(max-width:960px) {
            .main-wrap {
                grid-template-columns: 1fr
            }

            .sidebar {
                position: static;
                max-height: none
            }

            .node-dual,
            .algae-grid {
                grid-template-columns: 1fr
            }

            .node-pane {
                border-right: 0;
                border-bottom: var(--border)
            }

            .spectral-grid {
                grid-template-columns: 1fr 1fr
            }

            .hero {
                grid-template-columns: 1fr
            }

            .py-grid {
                grid-template-columns: 1fr
            }

            .py-pane {
                border-right: 0;
                border-bottom: var(--border)
            }

            .indices-wrap {
                grid-template-columns: 1fr 1fr
            }
        }