﻿:root {
            /* Palette */
            --paper:      #F4F1EA;
            --ink:        #0E0E0C;
            --ink-soft:   #5A574E;
            --line:       #D9D4C7;
            --verified:   #1E5E3A;
            --signal:     #C7402B;
            --glow:       #9FE3B8;

            /* Typography */
            --font-display: "Fraunces", Georgia, serif;
            --font-body: "Inter", system-ui, sans-serif;
            --font-mono: "JetBrains Mono", ui-monospace, monospace;
            --paper-2: #EEEAE0;
            --maxw: 1240px;
            --gutter: clamp(1.25rem, 4vw, 4rem);
            --ease: cubic-bezier(0.16, 1, 0.3, 1);

            /* Fluid Scale */
            --fs-display: clamp(3rem, 9vw, 9rem);
            --fs-h1:      clamp(2.2rem, 5vw, 4.5rem);
            --fs-h2:      clamp(1.5rem, 3vw, 2.5rem);
            --fs-body:    clamp(1rem, 1.2vw, 1.25rem);
            --fs-mono:    0.85rem;
        }

        body {
            background-color: var(--paper);
            color: var(--ink);
            font-family: var(--font-body);
            overflow-x: hidden;
            /* Subtle film grain texture via CSS */
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
        }

        .font-display { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.1; }
        .font-mono { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.05em; }
        
        .text-display { font-size: var(--fs-display); }
        .text-h1 { font-size: var(--fs-h1); }
        .text-h2 { font-size: var(--fs-h2); }
        .text-body { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }

        /* WebGL Background Canvas */
        #webgl-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            pointer-events: none;
        }

        .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
        .section-padding { padding-top: clamp(6rem, 15vh, 12rem); padding-bottom: clamp(6rem, 15vh, 12rem); }
        
        /* Dark Theme overrides for the Engine section */
        .theme-dark { color: var(--paper); }
        #engine.theme-dark { background-color: var(--ink); }
        .theme-dark .text-body { color: #A09D96; }
        .theme-dark .border-line { border-color: #2A2A28; }

