diff --git a/brainsnn-r3f-app/index.html b/brainsnn-r3f-app/index.html index 9624874..0d70f1c 100644 --- a/brainsnn-r3f-app/index.html +++ b/brainsnn-r3f-app/index.html @@ -3,19 +3,19 @@ - BrainSNN | Decision Engine for Brand Content + GaugeGap Foundry | Play with the impossible - - + + - - - + + + @@ -23,8 +23,8 @@ - - + + @@ -32,11 +32,13 @@ { "@context": "https://schema.org", "@type": "SoftwareApplication", - "name": "BrainSNN", - "applicationCategory": "BusinessApplication", - "description": "Scan brand content for AI-estimated attention, trust, manipulation risk and rewrite direction before publishing.", + "name": "GaugeGap Foundry", + "alternateName": "BrainSNN Interactive Foundry", + "applicationCategory": "EducationalApplication", + "description": "An interactive science, research and publishing platform with playable simulations and reproducible shared run states.", "url": "https://brainsnn.com/", - "operatingSystem": "Web" + "operatingSystem": "Web", + "isAccessibleForFree": true } diff --git a/brainsnn-r3f-app/src/app/GaugeGapLanding.jsx b/brainsnn-r3f-app/src/app/GaugeGapLanding.jsx new file mode 100644 index 0000000..fa64288 --- /dev/null +++ b/brainsnn-r3f-app/src/app/GaugeGapLanding.jsx @@ -0,0 +1,283 @@ +import React, { useEffect, useRef } from 'react'; +import { + ArrowRight, + BrainCircuit, + CheckCircle2, + ChevronDown, + FlaskConical, + Gauge, + Layers3, + LockKeyhole, + Microscope, + Play, + Share2, + Sparkles, + WandSparkles, + Zap, +} from 'lucide-react'; +import { Button } from '../components/ui/Button.jsx'; +import { AttractorPlayground } from '../features/gaugegap/AttractorPlayground.jsx'; +import { track } from '../lib/analytics.js'; +import '../styles/gaugegap.css'; + +const CONTENT_SAMPLE = 'Everyone says this breakthrough changes everything. Here is what the evidence actually shows, what remains uncertain, and the one result worth paying attention to.'; + +const LABS = [ + { + id: 'attractor', + eyebrow: 'Live now', + title: 'Butterfly Effect Lab', + description: 'Change the rules of a chaotic system, capture the result and challenge someone to beat your discovery score.', + icon: Gauge, + action: 'Play now', + }, + { + id: 'soliton', + eyebrow: 'Research engine', + title: 'Soliton Collision Lab', + description: 'Launch nonlinear waves, change their amplitude and watch them pass through one another without losing identity.', + icon: Zap, + action: 'Open research lab', + }, + { + id: 'content', + eyebrow: 'BrainSNN crossover', + title: 'Mind-Hack Autopsy', + description: 'Paste viral content and expose the emotional pressure, trust cost and attention mechanics hiding inside it.', + icon: BrainCircuit, + action: 'Scan a viral claim', + }, + { + id: 'claim', + eyebrow: 'Coming next', + title: 'Claim Boundary Game', + description: 'Build the strongest claim the evidence allows. Push too far and the model breaks your argument in public.', + icon: LockKeyhole, + action: 'Join the first run', + }, +]; + +const LOOP = [ + { number: '01', title: 'Play', text: 'Touch the variables before reading the lesson. The system teaches through response.' }, + { number: '02', title: 'Discover', text: 'Find an unusual state, score it and preserve the exact parameters that produced it.' }, + { number: '03', title: 'Publish', text: 'Export the visual, the short clip, the challenge link and the explanation from one run.' }, +]; + +export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) { + const playgroundRef = useRef(null); + + useEffect(() => { + document.title = 'GaugeGap Foundry | Play with the impossible'; + track('gaugegap_landing_viewed'); + }, []); + + function scrollToPlayground() { + track('gaugegap_hero_play_clicked'); + document.getElementById('playground')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + + function openLab(id) { + track('gaugegap_lab_clicked', { labId: id }); + if (id === 'attractor') scrollToPlayground(); + if (id === 'soliton') onNavigate?.('research'); + if (id === 'content') onStart?.(CONTENT_SAMPLE); + if (id === 'claim') onOpenReconstruct?.(); + } + + return ( +
+
+ + +
+ + +
+
+ +
+
+
+
+
+
+

Science you can touch, remix and publish

+

Don’t just learn the universe. Play with it.

+

+ GaugeGap turns difficult research into live experiments, visual challenges and shareable discoveries. + Change one rule. Watch reality respond. Publish what you find. +

+
+ + +
+
+
LiveBrowser simulations
+
1-clickPosters and clips
+
ExactShareable run states
+
OpenAssumptions and limits
+
+
+ +
+
+ Challenge live + #001 +
+ +
+

Find the most beautiful edge of chaos.

+ Current community score to beat + 90+ +
+ +
+ + +
+ +
+ +
+ +
+
+

The audience growth engine

+

Every experiment becomes content.

+

A simulator should not end when the user closes the tab. It should produce the next video, challenge, lesson and research trail.

+
+
+ {LOOP.map((item) => ( +
+ {item.number} +

{item.title}

+

{item.text}

+
+ ))} +
+
+ One run creates + Interactive link + 6-second clip + Poster + Score challenge + Research state +
+
+ +
+
+
+

Foundry experiments

+

Come for the spectacle. Stay for the instrument.

+
+

Each lab starts as a visual game, then opens into equations, assumptions, reproducible states and exportable evidence.

+
+
+ {LABS.map((lab, index) => { + const Icon = lab.icon; + return ( +
+ +
+

{lab.eyebrow}

+

{lab.title}

+ {lab.description} + +
+
+ ); + })} +
+
+ +
+
+ +
+
+

Your first discovery is already running

+

Change one variable. Make something nobody has seen.

+

Then turn the result into the clip, challenge and explanation that brings the next person into the lab.

+ +
+
+ + +
+ ); +} diff --git a/brainsnn-r3f-app/src/app/LandingPage.jsx b/brainsnn-r3f-app/src/app/LandingPage.jsx index 5acc87d..5c88848 100644 --- a/brainsnn-r3f-app/src/app/LandingPage.jsx +++ b/brainsnn-r3f-app/src/app/LandingPage.jsx @@ -1,370 +1 @@ -import React, { useEffect, useMemo, useState } from 'react'; -import { Activity, ArrowRight, BrainCircuit, CheckCircle2, FlaskConical, Pause, Play, RadioTower, Sparkles, Zap } from 'lucide-react'; -import { Button } from '../components/ui/Button.jsx'; -import { Brain3D } from '../features/brain3d/Brain3D.jsx'; -import { ClassicsGallery } from '../features/scan/ClassicsGallery.jsx'; -import { EXAMPLES } from '../features/scan/ExampleSelector.jsx'; -import { track } from '../lib/analytics.js'; -import { LAYER_CATALOG } from '../lib/layerCatalog.js'; -import { CLASSIC_PRESETS } from '../lib/classicPresets.js'; -import { SOCIAL_EMBEDS, SocialEmbedCard } from '../features/social/SocialEmbedCard.jsx'; - -const PERSONAS = [ - { - id: 'creators', - label: 'Creators', - job: 'Know if the hook earns the first three seconds — before the algorithm decides for you.', - cta: 'Scan a hook', - sample: CLASSIC_PRESETS.find((preset) => preset.id === 'curiosity-gap-hook')?.content || '', - }, - { - id: 'marketers', - label: 'Marketers', - job: 'Preflight ads and campaigns for trust cost and brand-safety risk before spend goes live.', - cta: 'Scan an ad', - sample: CLASSIC_PRESETS.find((preset) => preset.id === 'luxury-scarcity-ad')?.content || '', - }, - { - id: 'founders', - label: 'Founders', - job: 'Make launch posts and investor updates land as confident, not desperate.', - cta: 'Scan a launch post', - sample: EXAMPLES.find((example) => example.id === 'founder-post')?.content || EXAMPLES[2]?.content || '', - }, - { - id: 'safety', - label: 'Trust & safety', - job: 'Expose manipulation pressure, forced urgency and scam patterns with evidence you can cite.', - cta: 'Scan a scam email', - sample: CLASSIC_PRESETS.find((preset) => preset.id === 'account-phishing-email')?.content || '', - }, -]; - -const DEMO_SAMPLES = [ - { - id: 'social-hook', - label: 'Creator hook', - title: 'Proof-led social post', - preset: 'trustful', - content: EXAMPLES.find((example) => example.id === 'social-hook')?.content || EXAMPLES[0].content, - verdict: 'Strong trust signal. Hook needs more contrast.', - scores: { hook: 78, trust: 86, risk: 18 }, - timeline: [38, 44, 62, 76, 81, 72, 69, 74, 79, 83], - }, - { - id: 'paid-ad', - label: 'Ad preflight', - title: 'Paid campaign claim', - preset: 'mixed', - content: EXAMPLES.find((example) => example.id === 'paid-ad')?.content || EXAMPLES[1].content, - verdict: 'Clear promise. Add one proof point before the CTA.', - scores: { hook: 84, trust: 73, risk: 29 }, - timeline: [42, 59, 74, 86, 80, 77, 75, 82, 86, 79], - }, - { - id: 'sales-email', - label: 'Trust repair', - title: 'Outbound email opener', - preset: 'baseline', - content: EXAMPLES.find((example) => example.id === 'sales-email')?.content || EXAMPLES[3].content, - verdict: 'Useful empathy. Reduce pressure in the second sentence.', - scores: { hook: 69, trust: 81, risk: 24 }, - timeline: [33, 39, 54, 64, 67, 73, 70, 75, 71, 77], - }, - { - id: 'pressure-pitch', - label: 'Pressure alert', - title: 'High-pressure sales pitch', - preset: 'high-pressure', - content: 'Last chance! Prices double at midnight and only 3 spots remain. Act now or regret it forever.', - verdict: 'Manipulation pressure is carrying the message. The brain desynchronizes.', - scores: { hook: 88, trust: 31, risk: 86 }, - timeline: [55, 78, 92, 88, 71, 52, 44, 39, 33, 28], - }, -]; - -function DemoTimeline({ values }) { - const points = values.map((value, index) => { - const x = (index / Math.max(values.length - 1, 1)) * 100; - const y = 100 - value; - return `${x.toFixed(1)},${y.toFixed(1)}`; - }).join(' '); - return ( - - - - ); -} - -function LandingBrain({ sample, paused }) { - const nodes = useMemo(() => [ - { id: 'hook', label: 'Hook', x: 28, y: 42, value: sample.scores.hook, color: '#00f5ff' }, - { id: 'trust', label: 'Trust', x: 62, y: 38, value: sample.scores.trust, color: '#22c55e' }, - { id: 'risk', label: 'Risk', x: 48, y: 64, value: sample.scores.risk, color: '#ef4444' }, - { id: 'memory', label: 'Context', x: 72, y: 66, value: 58, color: '#a855f7' }, - ], [sample]); - - return ( -
-
- - {nodes.map((node) => ( - - ))} -
- ); -} - -export function LandingPage({ onStart, onNavigate, onOpenReconstruct }) { - const [activeIndex, setActiveIndex] = useState(0); - const [paused, setPaused] = useState(false); - const activeSample = DEMO_SAMPLES[activeIndex]; - - useEffect(() => { - document.title = 'BrainSNN | Decision Engine for Brand Content'; - track('landing_viewed'); - }, []); - - useEffect(() => { - if (paused) return undefined; - const timer = window.setInterval(() => { - setActiveIndex((index) => (index + 1) % DEMO_SAMPLES.length); - }, 4200); - return () => window.clearInterval(timer); - }, [paused]); - - function start(sample = activeSample) { - track('landing_scan_cta_clicked', { sampleId: sample.id }); - onStart(sample.content); - } - - function goTo(id) { - if (onNavigate) onNavigate(id); - else onStart(''); - } - - return ( -
-
- -
- -
-
-
-
- -
-
-
-
-

- Know how your content will land - before you publish. -

-

- Paste a post, ad, email or script. BrainSNN scores attention, trust, emotional charge and - manipulation risk — then helps you rewrite it. Scans run instantly in your browser; the - {' '}{LAYER_CATALOG.length}-layer research engine is there when you want to go deeper. -

-

- Will it hook? Will it backfire? See the viral pull and the trust cost before you post. -

-
- - -
-
-
- Scan time - ~5s - Free, no signup -
-
- Trust lift - +31 - Avg. rewrite target -
-
- Analysis layers - {LAYER_CATALOG.length} - Deterministic engine -
-
-
- - -
- -
-
-

Scan the classics

-

See how infamous formulas score.

-

One click runs a real scan on the archetypes everyone recognizes — from luxury ads to scam emails.

-
- { track('classic_preset_selected', { presetId: preset?.id, surface: 'landing' }); onStart(content); }} /> -
- -
-
-

Built for

-

Whatever you publish, scan it first.

-
-
- {PERSONAS.map((persona) => ( -
- {persona.label} -

{persona.job}

- -
- ))} -
-
- - {SOCIAL_EMBEDS.length ? ( -
-
-

See it in action

-

Watch real scans on social.

-
-
- {SOCIAL_EMBEDS.map((embed) => ( - - ))} -
-
- ) : null} - -
-
-
-
-
-
-
-
- -
-
-
- Product - - - -
-
- Plans - -
-
- Deep end - -
-
-

- Results are AI-estimated content-response signals, not literal brain, biometric or EEG measurements. - Your drafts and history stay in this browser unless you connect persistence. -

-

© {new Date().getFullYear()} BrainSNN · hello@brainsnn.com

-
-
- ); -} +export { GaugeGapLanding as LandingPage } from './GaugeGapLanding.jsx'; diff --git a/brainsnn-r3f-app/src/features/gaugegap/AttractorPlayground.jsx b/brainsnn-r3f-app/src/features/gaugegap/AttractorPlayground.jsx new file mode 100644 index 0000000..8a16a0f --- /dev/null +++ b/brainsnn-r3f-app/src/features/gaugegap/AttractorPlayground.jsx @@ -0,0 +1,376 @@ +import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { Copy, Download, Pause, Play, RotateCcw, Share2, Sparkles, Video } from 'lucide-react'; + +const PRESETS = [ + { id: 'classic', label: 'Classic butterfly', sigma: 10, rho: 28, beta: 2.667, speed: 1 }, + { id: 'storm', label: 'Electric storm', sigma: 14, rho: 36, beta: 2.2, speed: 1.35 }, + { id: 'edge', label: 'Edge of chaos', sigma: 10, rho: 24.74, beta: 2.667, speed: 0.82 }, + { id: 'soft', label: 'Soft orbit', sigma: 7.2, rho: 21.5, beta: 3.1, speed: 0.7 }, +]; + +const DEFAULT_PRESET = PRESETS[0]; + +function clamp(value, min, max) { + return Math.min(max, Math.max(min, value)); +} + +function round(value, places = 2) { + const factor = 10 ** places; + return Math.round(value * factor) / factor; +} + +function parseSharedRun() { + if (typeof window === 'undefined') return null; + const raw = new URLSearchParams(window.location.search).get('run'); + if (!raw) return null; + const [sigma, rho, beta, speed] = raw.split(',').map(Number); + if (![sigma, rho, beta, speed].every(Number.isFinite)) return null; + return { + sigma: clamp(sigma, 4, 22), + rho: clamp(rho, 10, 50), + beta: clamp(beta, 1, 5), + speed: clamp(speed, 0.35, 2), + }; +} + +function scoreRun(params) { + const onset = clamp((params.rho - 20) / 18, 0, 1); + const turbulence = clamp((Math.abs(params.sigma - 10) / 11) + (Math.abs(params.beta - 2.667) / 3.3), 0, 1); + const balance = clamp(1 - Math.abs(params.rho - 28) / 25, 0, 1); + const chaos = Math.round((onset * 0.76 + turbulence * 0.24) * 100); + const beauty = Math.round((balance * 0.58 + (1 - turbulence) * 0.42) * 100); + const discovery = Math.round(clamp(chaos * 0.46 + beauty * 0.34 + params.speed * 10, 0, 100)); + return { chaos, beauty, discovery }; +} + +function formatValue(key, value) { + if (key === 'speed') return `${round(value, 2)}×`; + return round(value, key === 'beta' ? 3 : 2); +} + +export function AttractorPlayground() { + const shared = useMemo(() => parseSharedRun(), []); + const [params, setParams] = useState(shared || DEFAULT_PRESET); + const [paused, setPaused] = useState(false); + const [recording, setRecording] = useState(false); + const [notice, setNotice] = useState(shared ? 'Shared run loaded — remix it.' : 'Drag any control. The field responds instantly.'); + const [frameStats, setFrameStats] = useState({ x: 0.1, y: 0, z: 0, steps: 0 }); + const canvasRef = useRef(null); + const paramsRef = useRef(params); + const pausedRef = useRef(paused); + const stateRef = useRef({ x: 0.1, y: 0, z: 0, steps: 0 }); + const resetSignalRef = useRef(0); + + useEffect(() => { paramsRef.current = params; }, [params]); + useEffect(() => { pausedRef.current = paused; }, [paused]); + + const scores = useMemo(() => scoreRun(params), [params]); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return undefined; + const context = canvas.getContext('2d', { alpha: false }); + if (!context) return undefined; + + let width = 0; + let height = 0; + let frameId = 0; + let lastReset = resetSignalRef.current; + let lastStatsAt = 0; + + function resize() { + const rect = canvas.getBoundingClientRect(); + const ratio = Math.min(window.devicePixelRatio || 1, 2); + width = Math.max(320, rect.width); + height = Math.max(320, rect.height); + canvas.width = Math.floor(width * ratio); + canvas.height = Math.floor(height * ratio); + context.setTransform(ratio, 0, 0, ratio, 0, 0); + context.fillStyle = '#030309'; + context.fillRect(0, 0, width, height); + } + + const observer = new ResizeObserver(resize); + observer.observe(canvas); + resize(); + + function resetField() { + stateRef.current = { + x: 0.08 + Math.random() * 0.12, + y: Math.random() * 0.08, + z: Math.random() * 0.05, + steps: 0, + }; + context.fillStyle = '#030309'; + context.fillRect(0, 0, width, height); + } + + function integrate(dt) { + const current = stateRef.current; + const active = paramsRef.current; + const dx = active.sigma * (current.y - current.x); + const dy = current.x * (active.rho - current.z) - current.y; + const dz = current.x * current.y - active.beta * current.z; + current.x += dx * dt; + current.y += dy * dt; + current.z += dz * dt; + current.steps += 1; + return current; + } + + function project(point) { + const scale = Math.min(width, height) / 58; + const rotation = point.steps * 0.00012; + const cos = Math.cos(rotation); + const sin = Math.sin(rotation); + const rx = point.x * cos - point.y * sin; + const ry = point.x * sin + point.y * cos; + return { + x: width * 0.5 + rx * scale, + y: height * 0.53 + (point.z - 25) * scale * 0.72 + ry * scale * 0.08, + }; + } + + function render(now) { + if (lastReset !== resetSignalRef.current) { + lastReset = resetSignalRef.current; + resetField(); + } + + if (!pausedRef.current) { + context.fillStyle = 'rgba(3, 3, 9, 0.065)'; + context.fillRect(0, 0, width, height); + + const active = paramsRef.current; + const passes = Math.max(4, Math.floor(12 * active.speed)); + const dt = 0.0048 * active.speed; + let before = project(stateRef.current); + + context.lineWidth = 1.15; + context.lineCap = 'round'; + for (let index = 0; index < passes; index += 1) { + const nextState = integrate(dt); + if (![nextState.x, nextState.y, nextState.z].every(Number.isFinite) || Math.abs(nextState.x) > 120) { + resetField(); + before = project(stateRef.current); + continue; + } + const after = project(nextState); + const hue = 178 + clamp((nextState.z / 52) * 118, 0, 118); + const alpha = 0.38 + clamp(Math.abs(nextState.x) / 42, 0, 0.46); + context.strokeStyle = `hsla(${hue}, 92%, 67%, ${alpha})`; + context.beginPath(); + context.moveTo(before.x, before.y); + context.lineTo(after.x, after.y); + context.stroke(); + before = after; + } + } + + if (now - lastStatsAt > 220) { + lastStatsAt = now; + setFrameStats({ ...stateRef.current }); + } + frameId = window.requestAnimationFrame(render); + } + + frameId = window.requestAnimationFrame(render); + return () => { + observer.disconnect(); + window.cancelAnimationFrame(frameId); + }; + }, []); + + function updateParam(key, value) { + setParams((current) => ({ ...current, [key]: Number(value) })); + setNotice('Live run changed. Share it when the shape feels yours.'); + } + + function loadPreset(preset) { + setParams(preset); + resetSignalRef.current += 1; + setPaused(false); + setNotice(`${preset.label} loaded. Now break it.`); + } + + function resetRun() { + resetSignalRef.current += 1; + setNotice('Same rules, new initial condition. Watch the future diverge.'); + } + + function getShareUrl() { + const url = new URL(window.location.href); + url.searchParams.set('run', [params.sigma, params.rho, params.beta, params.speed].map((value) => round(value, 3)).join(',')); + url.hash = 'playground'; + return url.toString(); + } + + async function shareRun() { + const url = getShareUrl(); + const shareData = { + title: `My GaugeGap chaos score: ${scores.discovery}`, + text: `I found a ${scores.chaos}% chaos run in GaugeGap Foundry. Can you beat my discovery score?`, + url, + }; + try { + if (navigator.share) await navigator.share(shareData); + else { + await navigator.clipboard.writeText(url); + setNotice('Challenge link copied. Send it to someone who thinks they can beat you.'); + } + } catch (error) { + if (error?.name !== 'AbortError') setNotice('Sharing was blocked. Use Copy challenge link instead.'); + } + } + + async function copyRun() { + try { + await navigator.clipboard.writeText(getShareUrl()); + setNotice('Challenge link copied. Your exact parameters are inside it.'); + } catch { + setNotice('Copy was blocked by the browser. Use the Share button.'); + } + } + + function downloadPoster() { + const canvas = canvasRef.current; + if (!canvas) return; + canvas.toBlob((blob) => { + if (!blob) return; + const link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = `gaugegap-run-${scores.discovery}.png`; + link.click(); + window.setTimeout(() => URL.revokeObjectURL(link.href), 1000); + setNotice('Poster saved. Post it with your score and challenge link.'); + }, 'image/png'); + } + + async function recordClip() { + const canvas = canvasRef.current; + if (!canvas || !canvas.captureStream || !window.MediaRecorder || recording) { + setNotice('Clip recording is not supported in this browser. Save a poster instead.'); + return; + } + const stream = canvas.captureStream(30); + const chunks = []; + let recorder; + try { + recorder = new MediaRecorder(stream, { mimeType: 'video/webm' }); + } catch { + recorder = new MediaRecorder(stream); + } + recorder.ondataavailable = (event) => { if (event.data?.size) chunks.push(event.data); }; + recorder.onstop = () => { + const blob = new Blob(chunks, { type: recorder.mimeType || 'video/webm' }); + const link = document.createElement('a'); + link.href = URL.createObjectURL(blob); + link.download = `gaugegap-chaos-${scores.discovery}.webm`; + link.click(); + window.setTimeout(() => URL.revokeObjectURL(link.href), 1000); + stream.getTracks().forEach((track) => track.stop()); + setRecording(false); + setNotice('Six-second clip saved. Add a hook and post the experiment.'); + }; + setRecording(true); + setPaused(false); + setNotice('Recording six seconds of your run…'); + recorder.start(); + window.setTimeout(() => { + if (recorder.state !== 'inactive') recorder.stop(); + }, 6000); + } + + const controls = [ + { key: 'sigma', label: 'Stretch', min: 4, max: 22, step: 0.1 }, + { key: 'rho', label: 'Chaos', min: 10, max: 50, step: 0.1 }, + { key: 'beta', label: 'Damping', min: 1, max: 5, step: 0.01 }, + { key: 'speed', label: 'Time', min: 0.35, max: 2, step: 0.05 }, + ]; + + return ( +
+
+
+

+

Find the most beautiful edge of chaos.

+

Every line is generated live from the Lorenz system. Change one rule and the future splits.

+
+
Running in your browser
+
+ +
+
+ +
+
dx = σ(y−x) · dy = x(ρ−z)−y · dz = xy−βz
+ +
+
+
Chaos{scores.chaos}
+
Beauty{scores.beauty}
+
Discovery{scores.discovery}
+
+
+ + +
+
+ ); +} diff --git a/brainsnn-r3f-app/src/styles/gaugegap.css b/brainsnn-r3f-app/src/styles/gaugegap.css new file mode 100644 index 0000000..159651f --- /dev/null +++ b/brainsnn-r3f-app/src/styles/gaugegap.css @@ -0,0 +1,1600 @@ +.gg-site { + --gg-bg: #030308; + --gg-panel: rgba(12, 12, 25, 0.82); + --gg-panel-strong: rgba(15, 15, 31, 0.94); + --gg-line: rgba(171, 196, 255, 0.14); + --gg-line-strong: rgba(125, 249, 255, 0.34); + --gg-text: #f7f7ff; + --gg-muted: #a4a8bd; + --gg-cyan: #7df9ff; + --gg-blue: #5aa8ff; + --gg-purple: #8b5cf6; + --gg-pink: #ff4fd8; + min-height: 100vh; + color: var(--gg-text); + background: + radial-gradient(circle at 78% 5%, rgba(91, 94, 255, 0.16), transparent 28%), + radial-gradient(circle at 14% 22%, rgba(0, 245, 255, 0.08), transparent 25%), + linear-gradient(180deg, #030308 0%, #070711 42%, #040408 100%); + overflow: hidden; +} + +.gg-site *, +.gg-site *::before, +.gg-site *::after { + box-sizing: border-box; +} + +.gg-site button, +.gg-site input { + font: inherit; +} + +.gg-site button { + color: inherit; +} + +.gg-nav { + position: relative; + z-index: 20; + width: min(100% - 40px, 1320px); + min-height: 92px; + margin: 0 auto; + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 28px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.gg-brand { + display: inline-flex; + align-items: center; + gap: 13px; + padding: 0; + border: 0; + background: transparent; + text-align: left; + cursor: pointer; +} + +.gg-brand-mark { + width: 52px; + height: 52px; + display: grid; + place-items: center; + flex: 0 0 auto; + border: 1px solid rgba(125, 249, 255, 0.42); + border-radius: 15px; + color: #021013; + background: + radial-gradient(circle at 28% 28%, #ffffff, transparent 23%), + linear-gradient(135deg, var(--gg-cyan), var(--gg-blue) 38%, var(--gg-purple) 72%, var(--gg-pink)); + box-shadow: 0 0 34px rgba(125, 249, 255, 0.22), inset 0 0 12px rgba(255, 255, 255, 0.5); + font-family: var(--bsn-font-display, "Space Grotesk", sans-serif); + font-size: 1.55rem; + font-weight: 900; +} + +.gg-brand-copy strong, +.gg-brand-copy small { + display: block; +} + +.gg-brand-copy strong { + font-family: var(--bsn-font-display, "Space Grotesk", sans-serif); + font-size: 1.08rem; + letter-spacing: -0.02em; +} + +.gg-brand-copy small { + margin-top: 4px; + color: var(--gg-muted); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.68rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.gg-brand em { + align-self: flex-start; + margin-top: 2px; + padding: 4px 7px; + border: 1px solid rgba(139, 92, 246, 0.32); + border-radius: 999px; + color: #d9c7ff; + background: rgba(139, 92, 246, 0.11); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.63rem; + font-style: normal; + text-transform: uppercase; +} + +.gg-nav-links, +.gg-nav-actions { + display: flex; + align-items: center; +} + +.gg-nav-links { + justify-content: center; + gap: 4px; +} + +.gg-nav-links button, +.gg-brain-link { + min-height: 42px; + padding: 0 14px; + border: 0; + border-radius: 999px; + color: #c6cad8; + background: transparent; + cursor: pointer; +} + +.gg-nav-links button:hover, +.gg-brain-link:hover { + color: white; + background: rgba(255, 255, 255, 0.055); +} + +.gg-nav-actions { + justify-content: flex-end; + gap: 10px; +} + +.gg-nav-actions .bsn-button { + min-height: 44px; + border-radius: 999px; + padding-inline: 20px; +} + +.gg-hero { + position: relative; + isolation: isolate; + width: min(100% - 40px, 1320px); + min-height: calc(100svh - 92px); + margin: 0 auto; + display: grid; + grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.88fr); + align-items: center; + gap: clamp(42px, 6vw, 88px); + padding: clamp(70px, 9vh, 110px) 0 90px; +} + +.gg-hero-grid { + position: absolute; + z-index: -3; + inset: 0; + background: + linear-gradient(rgba(125, 249, 255, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(139, 92, 246, 0.032) 1px, transparent 1px); + background-size: 42px 42px; + mask-image: radial-gradient(circle at 62% 48%, black, transparent 74%); +} + +.gg-hero-orb { + position: absolute; + z-index: -2; + border-radius: 50%; + filter: blur(10px); + pointer-events: none; +} + +.gg-hero-orb-one { + width: 460px; + height: 460px; + right: 8%; + top: 13%; + background: radial-gradient(circle, rgba(125, 249, 255, 0.13), transparent 67%); +} + +.gg-hero-orb-two { + width: 340px; + height: 340px; + left: 20%; + bottom: -3%; + background: radial-gradient(circle, rgba(255, 79, 216, 0.1), transparent 68%); +} + +.gg-kicker { + width: fit-content; + max-width: 100%; + display: inline-flex; + align-items: center; + gap: 8px; + margin: 0; + color: var(--gg-cyan); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.76rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.gg-hero-copy h1, +.gg-section-heading h2, +.gg-playground-head h2, +.gg-depth-copy h2, +.gg-final-cta h2 { + font-family: var(--bsn-font-display, "Space Grotesk", sans-serif); + letter-spacing: -0.055em; +} + +.gg-hero-copy h1 { + max-width: 12ch; + margin: 24px 0 24px; + font-size: clamp(4rem, 7.25vw, 7.3rem); + line-height: 0.88; +} + +.gg-hero-copy h1 span { + display: block; + background: linear-gradient(96deg, var(--gg-cyan), var(--gg-blue) 34%, #a471ff 68%, var(--gg-pink)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + filter: drop-shadow(0 0 28px rgba(125, 249, 255, 0.12)); +} + +.gg-hero-lead { + max-width: 660px; + margin: 0; + color: #b6bbcf; + font-size: clamp(1.08rem, 1rem + 0.42vw, 1.34rem); + line-height: 1.65; +} + +.gg-hero-actions, +.gg-depth-actions { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.gg-hero-actions { + margin-top: 32px; +} + +.gg-hero-actions .bsn-button, +.gg-depth-actions .bsn-button, +.gg-final-cta .bsn-button { + min-height: 56px; + padding-inline: 26px; + border-radius: 12px; +} + +.gg-hero-proof { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 18px; + margin-top: 38px; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.gg-hero-proof strong, +.gg-hero-proof span { + display: block; +} + +.gg-hero-proof strong { + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 1.08rem; +} + +.gg-hero-proof span { + margin-top: 5px; + color: var(--gg-muted); + font-size: 0.78rem; + line-height: 1.35; +} + +.gg-hero-challenge { + position: relative; + min-width: 0; + padding: 20px; + border: 1px solid rgba(125, 249, 255, 0.18); + border-radius: 26px; + background: + linear-gradient(180deg, rgba(16, 17, 34, 0.95), rgba(5, 5, 12, 0.92)), + radial-gradient(circle at 50% 20%, rgba(125, 249, 255, 0.16), transparent 42%); + box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5), 0 0 80px rgba(125, 249, 255, 0.07); + overflow: hidden; +} + +.gg-hero-challenge::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background: linear-gradient(125deg, transparent 16%, rgba(255, 255, 255, 0.055) 42%, transparent 68%); + transform: translateX(-75%); + animation: gg-card-sweep 8s ease-in-out infinite; +} + +.gg-challenge-topline, +.gg-challenge-topline span { + display: flex; + align-items: center; +} + +.gg-challenge-topline { + justify-content: space-between; + gap: 12px; + color: var(--gg-muted); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.72rem; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.gg-challenge-topline span { + gap: 8px; +} + +.gg-challenge-topline i { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--gg-cyan); + box-shadow: 0 0 15px rgba(125, 249, 255, 0.85); + animation: gg-pulse 1.8s ease-in-out infinite; +} + +.gg-mini-attractor { + position: relative; + aspect-ratio: 1.24; + margin: 14px 0 8px; + border-radius: 18px; + background: + radial-gradient(circle at center, rgba(139, 92, 246, 0.12), transparent 50%), + linear-gradient(rgba(125, 249, 255, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(125, 249, 255, 0.035) 1px, transparent 1px), + #05050d; + background-size: auto, 28px 28px, 28px 28px, auto; + overflow: hidden; +} + +.gg-mini-attractor svg { + width: 100%; + height: 100%; +} + +.gg-mini-attractor circle, +.gg-orbit-path { + fill: none; + stroke: url(#gg-path-gradient); + filter: url(#gg-glow); +} + +.gg-mini-attractor circle { + fill: var(--gg-cyan); + stroke: none; +} + +.gg-orbit-path { + stroke-width: 2; + stroke-linecap: round; + stroke-dasharray: 7 5; +} + +.gg-orbit-a { + animation: gg-dash 11s linear infinite; +} + +.gg-orbit-b { + opacity: 0.58; + animation: gg-dash-reverse 8s linear infinite; +} + +.gg-mini-label { + position: absolute; + padding: 5px 8px; + border: 1px solid rgba(125, 249, 255, 0.2); + border-radius: 999px; + color: #d6fbff; + background: rgba(3, 3, 8, 0.76); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.63rem; + text-transform: uppercase; +} + +.gg-mini-label-a { + left: 8%; + bottom: 12%; +} + +.gg-mini-label-b { + right: 7%; + top: 15%; +} + +.gg-challenge-copy { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 4px 18px; + align-items: end; + padding: 16px 4px 18px; +} + +.gg-challenge-copy p, +.gg-challenge-copy span { + margin: 0; +} + +.gg-challenge-copy p { + grid-column: 1 / -1; + font-family: var(--bsn-font-display, "Space Grotesk", sans-serif); + font-size: 1.35rem; + font-weight: 800; +} + +.gg-challenge-copy span { + color: var(--gg-muted); + font-size: 0.82rem; +} + +.gg-challenge-copy strong { + grid-row: 2; + grid-column: 2; + color: var(--gg-cyan); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 2rem; +} + +.gg-hero-challenge > button { + width: 100%; + min-height: 52px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 9px; + border: 1px solid rgba(125, 249, 255, 0.38); + border-radius: 12px; + color: #061013; + background: linear-gradient(100deg, var(--gg-cyan), #9fe8ff 48%, #c3b5ff); + font-weight: 900; + cursor: pointer; + box-shadow: 0 0 32px rgba(125, 249, 255, 0.16); +} + +.gg-hero-challenge > button:hover { + transform: translateY(-1px); + box-shadow: 0 0 42px rgba(125, 249, 255, 0.24); +} + +.gg-scroll-cue { + position: absolute; + left: 0; + bottom: 22px; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 0; + border: 0; + color: #777d93; + background: transparent; + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.68rem; + letter-spacing: 0.1em; + text-transform: uppercase; + cursor: pointer; +} + +.gg-scroll-cue svg { + animation: gg-bob 1.8s ease-in-out infinite; +} + +.gg-playground, +.gg-loop, +.gg-labs, +.gg-depth, +.gg-final-cta, +.gg-footer { + position: relative; + z-index: 1; + width: min(100% - 40px, 1320px); + margin-inline: auto; +} + +.gg-playground { + scroll-margin-top: 20px; + padding: 110px 0 70px; +} + +.gg-playground-head, +.gg-section-heading-wide { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: end; + gap: 28px; +} + +.gg-playground-head h2, +.gg-section-heading h2, +.gg-depth-copy h2, +.gg-final-cta h2 { + margin: 16px 0 14px; + line-height: 0.98; +} + +.gg-playground-head h2, +.gg-section-heading h2, +.gg-depth-copy h2 { + font-size: clamp(2.65rem, 4.8vw, 5.15rem); +} + +.gg-playground-head > div > p:last-child, +.gg-section-heading > p, +.gg-section-heading-wide > p, +.gg-depth-copy > p, +.gg-final-cta > p { + color: var(--gg-muted); + line-height: 1.65; +} + +.gg-playground-head > div > p:last-child { + max-width: 700px; + margin: 0; +} + +.gg-live-badge { + display: inline-flex; + align-items: center; + gap: 9px; + padding: 10px 14px; + border: 1px solid rgba(125, 249, 255, 0.2); + border-radius: 999px; + color: #c8fbff; + background: rgba(125, 249, 255, 0.055); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.7rem; + text-transform: uppercase; +} + +.gg-live-badge span { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--gg-cyan); + box-shadow: 0 0 14px rgba(125, 249, 255, 0.9); +} + +.gg-lab-frame { + margin-top: 34px; + display: grid; + grid-template-columns: minmax(0, 1.58fr) minmax(320px, 0.62fr); + border: 1px solid var(--gg-line); + border-radius: 24px; + background: rgba(5, 5, 12, 0.8); + box-shadow: 0 44px 120px rgba(0, 0, 0, 0.5); + overflow: hidden; +} + +.gg-canvas-panel { + position: relative; + min-height: 690px; + background: #030309; + overflow: hidden; +} + +.gg-attractor-canvas { + width: 100%; + height: 100%; + display: block; + cursor: crosshair; +} + +.gg-canvas-overlay { + position: absolute; + top: 18px; + left: 18px; + right: 18px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + pointer-events: none; +} + +.gg-equation { + max-width: calc(100% - 56px); + padding: 9px 12px; + border: 1px solid rgba(125, 249, 255, 0.14); + border-radius: 9px; + color: rgba(214, 251, 255, 0.72); + background: rgba(3, 3, 9, 0.72); + backdrop-filter: blur(10px); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.68rem; + letter-spacing: 0.02em; +} + +.gg-icon-button { + width: 42px; + height: 42px; + display: grid; + place-items: center; + border: 1px solid rgba(125, 249, 255, 0.22); + border-radius: 50%; + color: var(--gg-cyan); + background: rgba(3, 3, 9, 0.78); + backdrop-filter: blur(10px); + pointer-events: auto; + cursor: pointer; +} + +.gg-scoreboard { + position: absolute; + left: 18px; + bottom: 18px; + display: grid; + grid-template-columns: repeat(3, minmax(90px, 1fr)); + gap: 8px; +} + +.gg-scoreboard div { + min-width: 100px; + padding: 12px 14px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + background: rgba(4, 4, 12, 0.75); + backdrop-filter: blur(12px); +} + +.gg-scoreboard span, +.gg-scoreboard strong { + display: block; +} + +.gg-scoreboard span { + color: var(--gg-muted); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.62rem; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.gg-scoreboard strong { + margin-top: 5px; + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 1.5rem; +} + +.gg-scoreboard .gg-discovery-score { + border-color: rgba(125, 249, 255, 0.3); + box-shadow: inset 0 0 24px rgba(125, 249, 255, 0.08), 0 0 26px rgba(125, 249, 255, 0.06); +} + +.gg-scoreboard .gg-discovery-score strong { + color: var(--gg-cyan); +} + +.gg-control-panel { + min-width: 0; + padding: 24px; + border-left: 1px solid var(--gg-line); + background: + radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.12), transparent 36%), + linear-gradient(180deg, rgba(15, 15, 30, 0.96), rgba(7, 7, 16, 0.98)); +} + +.gg-control-intro span, +.gg-control-intro strong { + display: block; +} + +.gg-control-intro span { + color: var(--gg-pink); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.68rem; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.gg-control-intro strong { + margin-top: 8px; + font-family: var(--bsn-font-display, "Space Grotesk", sans-serif); + font-size: 1.35rem; + line-height: 1.25; +} + +.gg-presets { + display: flex; + flex-wrap: wrap; + gap: 7px; + margin-top: 20px; +} + +.gg-presets button { + min-height: 34px; + padding: 0 11px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 999px; + color: #aeb3c6; + background: rgba(255, 255, 255, 0.025); + font-size: 0.72rem; + cursor: pointer; +} + +.gg-presets button:hover, +.gg-presets button.active { + border-color: rgba(125, 249, 255, 0.34); + color: #d8fdff; + background: rgba(125, 249, 255, 0.07); +} + +.gg-sliders { + display: grid; + gap: 18px; + margin-top: 24px; +} + +.gg-sliders label { + display: grid; + gap: 9px; +} + +.gg-sliders label > span { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + color: #c4c8d7; + font-size: 0.78rem; +} + +.gg-sliders label strong { + color: var(--gg-cyan); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); +} + +.gg-sliders input[type="range"] { + width: 100%; + height: 5px; + appearance: none; + border-radius: 999px; + outline: none; + background: linear-gradient(90deg, rgba(125, 249, 255, 0.88), rgba(139, 92, 246, 0.84), rgba(255, 255, 255, 0.08)); +} + +.gg-sliders input[type="range"]::-webkit-slider-thumb { + width: 17px; + height: 17px; + appearance: none; + border: 3px solid #071016; + border-radius: 50%; + background: var(--gg-cyan); + box-shadow: 0 0 14px rgba(125, 249, 255, 0.72); + cursor: grab; +} + +.gg-sliders input[type="range"]::-moz-range-thumb { + width: 13px; + height: 13px; + border: 3px solid #071016; + border-radius: 50%; + background: var(--gg-cyan); + box-shadow: 0 0 14px rgba(125, 249, 255, 0.72); + cursor: grab; +} + +.gg-run-data { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 7px; + margin-top: 24px; +} + +.gg-run-data div { + min-width: 0; + padding: 9px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 9px; + background: rgba(0, 0, 0, 0.18); +} + +.gg-run-data span, +.gg-run-data strong { + display: block; + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); +} + +.gg-run-data span { + color: #6f7488; + font-size: 0.58rem; + text-transform: uppercase; +} + +.gg-run-data strong { + margin-top: 4px; + overflow: hidden; + color: #d7d9e3; + font-size: 0.7rem; + text-overflow: ellipsis; +} + +.gg-reset-button { + width: 100%; + min-height: 42px; + margin-top: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + border: 1px dashed rgba(255, 255, 255, 0.14); + border-radius: 10px; + color: #b5b9c9; + background: rgba(255, 255, 255, 0.025); + font-size: 0.76rem; + cursor: pointer; +} + +.gg-reset-button:hover { + border-color: rgba(125, 249, 255, 0.3); + color: var(--gg-cyan); +} + +.gg-publish-actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px; + margin-top: 18px; +} + +.gg-publish-actions button { + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 7px; + border: 1px solid rgba(125, 249, 255, 0.17); + border-radius: 10px; + color: #d3d7e5; + background: rgba(125, 249, 255, 0.045); + font-size: 0.72rem; + cursor: pointer; +} + +.gg-publish-actions button:first-child { + border-color: rgba(125, 249, 255, 0.42); + color: #061013; + background: linear-gradient(100deg, var(--gg-cyan), #a6dcff); + font-weight: 900; +} + +.gg-publish-actions button:hover:not(:disabled) { + transform: translateY(-1px); + border-color: rgba(125, 249, 255, 0.44); +} + +.gg-publish-actions button:disabled { + opacity: 0.58; + cursor: wait; +} + +.gg-notice { + min-height: 38px; + margin: 16px 0 0; + color: #8f95aa; + font-size: 0.72rem; + line-height: 1.45; +} + +.gg-loop, +.gg-labs, +.gg-depth { + padding: 110px 0; +} + +.gg-loop { + border-top: 1px solid rgba(255, 255, 255, 0.07); +} + +.gg-section-heading { + max-width: 880px; +} + +.gg-section-heading > p { + max-width: 720px; + margin: 0; +} + +.gg-loop-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; + margin-top: 42px; +} + +.gg-loop-grid article { + min-height: 270px; + padding: 28px; + border: 1px solid var(--gg-line); + border-radius: 18px; + background: + radial-gradient(circle at 100% 0%, rgba(125, 249, 255, 0.08), transparent 36%), + rgba(11, 11, 23, 0.68); +} + +.gg-loop-grid article > span { + color: var(--gg-cyan); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.78rem; +} + +.gg-loop-grid h3 { + margin: 62px 0 10px; + font-family: var(--bsn-font-display, "Space Grotesk", sans-serif); + font-size: 2rem; +} + +.gg-loop-grid p { + margin: 0; + color: var(--gg-muted); + line-height: 1.6; +} + +.gg-output-ribbon { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 9px; + margin-top: 16px; + padding: 18px; + border: 1px solid rgba(139, 92, 246, 0.18); + border-radius: 14px; + background: rgba(139, 92, 246, 0.045); +} + +.gg-output-ribbon span { + margin-right: 6px; + color: #8c91a5; + font-size: 0.78rem; + text-transform: uppercase; +} + +.gg-output-ribbon strong { + padding: 8px 11px; + border: 1px solid rgba(255, 255, 255, 0.09); + border-radius: 999px; + color: #dadce8; + background: rgba(255, 255, 255, 0.025); + font-size: 0.72rem; +} + +.gg-labs { + border-top: 1px solid rgba(255, 255, 255, 0.07); +} + +.gg-section-heading-wide { + grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.6fr); +} + +.gg-section-heading-wide > p { + margin: 0 0 14px; +} + +.gg-lab-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + margin-top: 42px; +} + +.gg-lab-card { + min-height: 310px; + display: grid; + grid-template-columns: minmax(180px, 0.68fr) minmax(0, 1fr); + border: 1px solid var(--gg-line); + border-radius: 20px; + background: rgba(10, 10, 22, 0.7); + overflow: hidden; +} + +.gg-lab-card-art { + position: relative; + display: grid; + place-items: center; + min-height: 100%; + border-right: 1px solid var(--gg-line); + background: + radial-gradient(circle, rgba(125, 249, 255, 0.18), transparent 45%), + linear-gradient(rgba(125, 249, 255, 0.045) 1px, transparent 1px), + linear-gradient(90deg, rgba(139, 92, 246, 0.04) 1px, transparent 1px), + #070711; + background-size: auto, 24px 24px, 24px 24px, auto; + color: var(--gg-cyan); +} + +.gg-lab-card-art::before, +.gg-lab-card-art::after { + content: ""; + position: absolute; + border: 1px solid rgba(125, 249, 255, 0.26); + border-radius: 50%; +} + +.gg-lab-card-art::before { + width: 126px; + height: 126px; + animation: gg-slow-spin 18s linear infinite; +} + +.gg-lab-card-art::after { + width: 82px; + height: 82px; + border-style: dashed; + animation: gg-slow-spin-reverse 12s linear infinite; +} + +.gg-lab-card-art span { + position: absolute; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--gg-cyan); + box-shadow: 0 0 15px rgba(125, 249, 255, 0.9); +} + +.gg-lab-card-art span:nth-of-type(1) { left: 24%; top: 28%; } +.gg-lab-card-art span:nth-of-type(2) { right: 25%; top: 38%; background: var(--gg-purple); } +.gg-lab-card-art span:nth-of-type(3) { left: 43%; bottom: 23%; background: var(--gg-pink); } + +.gg-lab-card-2 .gg-lab-card-art, +.gg-lab-card-4 .gg-lab-card-art { + color: #d19cff; + background: + radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 46%), + linear-gradient(rgba(139, 92, 246, 0.045) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 79, 216, 0.035) 1px, transparent 1px), + #080711; + background-size: auto, 24px 24px, 24px 24px, auto; +} + +.gg-lab-card-copy { + padding: 28px; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.gg-lab-card-copy > p { + margin: 0; + color: var(--gg-cyan); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.66rem; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.gg-lab-card-copy h3 { + margin: 14px 0 12px; + font-family: var(--bsn-font-display, "Space Grotesk", sans-serif); + font-size: 1.7rem; + line-height: 1.08; +} + +.gg-lab-card-copy > span { + color: var(--gg-muted); + line-height: 1.6; +} + +.gg-lab-card-copy button { + min-height: 42px; + margin-top: auto; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 0; + border: 0; + color: var(--gg-cyan); + background: transparent; + font-weight: 800; + cursor: pointer; +} + +.gg-lab-card-copy button:hover { + gap: 12px; +} + +.gg-depth { + display: grid; + grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1fr); + gap: clamp(50px, 8vw, 120px); + align-items: center; + border-top: 1px solid rgba(255, 255, 255, 0.07); +} + +.gg-depth-visual { + position: relative; + aspect-ratio: 1; + display: grid; + place-items: center; + border-radius: 50%; + background: radial-gradient(circle, rgba(125, 249, 255, 0.09), transparent 62%); +} + +.gg-depth-ring { + position: absolute; + border: 1px solid rgba(125, 249, 255, 0.2); + border-radius: 50%; +} + +.gg-depth-ring-one { + width: 76%; + height: 76%; + border-style: dashed; + animation: gg-slow-spin 24s linear infinite; +} + +.gg-depth-ring-two { + width: 48%; + height: 48%; + border-color: rgba(139, 92, 246, 0.35); + animation: gg-slow-spin-reverse 16s linear infinite; +} + +.gg-depth-core { + width: 118px; + height: 118px; + display: grid; + place-items: center; + border: 1px solid rgba(125, 249, 255, 0.42); + border-radius: 30px; + color: #071014; + background: linear-gradient(135deg, var(--gg-cyan), #9ac1ff, #c3a5ff); + box-shadow: 0 0 54px rgba(125, 249, 255, 0.22); + transform: rotate(45deg); +} + +.gg-depth-core svg { + transform: rotate(-45deg); +} + +.gg-depth-node { + position: absolute; + padding: 8px 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 999px; + color: #d8dbe7; + background: rgba(7, 7, 16, 0.88); + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.66rem; + text-transform: uppercase; +} + +.gg-depth-node-one { top: 12%; left: 39%; } +.gg-depth-node-two { right: 7%; top: 47%; } +.gg-depth-node-three { bottom: 10%; left: 38%; } +.gg-depth-node-four { left: 5%; top: 47%; } + +.gg-depth-copy > p { + max-width: 700px; +} + +.gg-depth-copy ul { + display: grid; + gap: 12px; + margin: 28px 0 0; + padding: 0; + list-style: none; +} + +.gg-depth-copy li { + display: flex; + align-items: flex-start; + gap: 10px; + color: #d6d8e3; +} + +.gg-depth-copy li svg { + margin-top: 2px; + flex: 0 0 auto; + color: var(--gg-cyan); +} + +.gg-depth-actions { + margin-top: 30px; +} + +.gg-final-cta { + margin-top: 48px; + padding: 96px 40px; + border: 1px solid rgba(125, 249, 255, 0.17); + border-radius: 28px; + background: + radial-gradient(circle at 50% 0%, rgba(125, 249, 255, 0.12), transparent 44%), + radial-gradient(circle at 82% 100%, rgba(255, 79, 216, 0.1), transparent 38%), + rgba(10, 10, 22, 0.78); + text-align: center; + overflow: hidden; +} + +.gg-final-glow { + position: absolute; + width: 420px; + height: 420px; + left: 50%; + top: -300px; + border-radius: 50%; + background: rgba(125, 249, 255, 0.16); + filter: blur(80px); + transform: translateX(-50%); + pointer-events: none; +} + +.gg-final-cta .gg-kicker { + position: relative; + justify-content: center; +} + +.gg-final-cta h2 { + position: relative; + max-width: 920px; + margin-inline: auto; + font-size: clamp(3rem, 6vw, 6rem); +} + +.gg-final-cta > p:not(.gg-kicker) { + position: relative; + max-width: 720px; + margin: 0 auto 28px; +} + +.gg-final-cta .bsn-button { + position: relative; +} + +.gg-footer { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 28px; + align-items: center; + padding: 84px 0 40px; +} + +.gg-footer > div, +.gg-footer > div p { + display: flex; + align-items: center; +} + +.gg-footer > div { + gap: 14px; +} + +.gg-footer > div p { + margin: 0; + flex-direction: column; + align-items: flex-start; +} + +.gg-footer strong, +.gg-footer small { + display: block; +} + +.gg-footer small { + margin-top: 4px; + color: var(--gg-muted); +} + +.gg-footer nav { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + gap: 4px; +} + +.gg-footer nav button { + min-height: 38px; + padding: 0 10px; + border: 0; + color: #a8adbf; + background: transparent; + cursor: pointer; +} + +.gg-footer nav button:hover { + color: white; +} + +.gg-footer-note, +.gg-footer-legal { + grid-column: 1 / -1; + margin: 0; + color: #777d91; + line-height: 1.55; +} + +.gg-footer-note { + max-width: 860px; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.07); + font-size: 0.82rem; +} + +.gg-footer-legal { + font-family: var(--bsn-font-mono, "JetBrains Mono", monospace); + font-size: 0.68rem; + text-transform: uppercase; +} + +@keyframes gg-dash { + to { stroke-dashoffset: -180; } +} + +@keyframes gg-dash-reverse { + to { stroke-dashoffset: 180; } +} + +@keyframes gg-pulse { + 0%, 100% { opacity: 0.62; transform: scale(0.82); } + 50% { opacity: 1; transform: scale(1.16); } +} + +@keyframes gg-bob { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(4px); } +} + +@keyframes gg-card-sweep { + 0%, 35% { transform: translateX(-85%); } + 60%, 100% { transform: translateX(105%); } +} + +@keyframes gg-slow-spin { + to { transform: rotate(360deg); } +} + +@keyframes gg-slow-spin-reverse { + to { transform: rotate(-360deg); } +} + +@media (max-width: 1120px) { + .gg-nav { + grid-template-columns: auto 1fr; + } + + .gg-nav-links { + display: none; + } + + .gg-hero { + grid-template-columns: 1fr; + padding-top: 72px; + } + + .gg-hero-copy h1 { + max-width: 11ch; + } + + .gg-hero-challenge { + width: min(100%, 720px); + } + + .gg-scroll-cue { + display: none; + } + + .gg-lab-frame { + grid-template-columns: 1fr; + } + + .gg-control-panel { + border-left: 0; + border-top: 1px solid var(--gg-line); + } + + .gg-canvas-panel { + min-height: 620px; + } + + .gg-depth { + grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr); + gap: 48px; + } +} + +@media (max-width: 860px) { + .gg-nav { + width: min(100% - 28px, 1320px); + grid-template-columns: 1fr auto; + } + + .gg-brand-copy small, + .gg-brand em, + .gg-brain-link { + display: none; + } + + .gg-hero, + .gg-playground, + .gg-loop, + .gg-labs, + .gg-depth, + .gg-final-cta, + .gg-footer { + width: min(100% - 28px, 1320px); + } + + .gg-hero-copy h1 { + font-size: clamp(3.35rem, 12vw, 5.2rem); + } + + .gg-hero-proof, + .gg-loop-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .gg-playground-head, + .gg-section-heading-wide, + .gg-depth { + grid-template-columns: 1fr; + } + + .gg-live-badge { + justify-self: start; + } + + .gg-lab-grid { + grid-template-columns: 1fr; + } + + .gg-depth-visual { + width: min(100%, 520px); + margin: 0 auto; + } + + .gg-footer { + grid-template-columns: 1fr; + } + + .gg-footer nav { + justify-content: flex-start; + } +} + +@media (max-width: 620px) { + .gg-nav { + min-height: 76px; + } + + .gg-brand-mark { + width: 44px; + height: 44px; + border-radius: 13px; + } + + .gg-brand-copy strong { + font-size: 0.92rem; + } + + .gg-nav-actions .bsn-button { + min-height: 40px; + padding-inline: 14px; + font-size: 0.75rem; + } + + .gg-hero { + min-height: auto; + padding: 58px 0 76px; + } + + .gg-kicker { + font-size: 0.64rem; + } + + .gg-hero-copy h1 { + margin-top: 18px; + font-size: clamp(3.05rem, 15vw, 4.25rem); + } + + .gg-hero-actions, + .gg-depth-actions { + display: grid; + } + + .gg-hero-actions .bsn-button, + .gg-depth-actions .bsn-button, + .gg-final-cta .bsn-button { + width: 100%; + } + + .gg-hero-proof { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .gg-hero-challenge { + padding: 14px; + border-radius: 20px; + } + + .gg-playground, + .gg-loop, + .gg-labs, + .gg-depth { + padding: 78px 0; + } + + .gg-playground-head h2, + .gg-section-heading h2, + .gg-depth-copy h2 { + font-size: clamp(2.45rem, 12vw, 3.7rem); + } + + .gg-canvas-panel { + min-height: 500px; + } + + .gg-equation { + font-size: 0.55rem; + } + + .gg-scoreboard { + right: 12px; + left: 12px; + bottom: 12px; + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .gg-scoreboard div { + min-width: 0; + padding: 10px; + } + + .gg-scoreboard strong { + font-size: 1.18rem; + } + + .gg-control-panel { + padding: 20px; + } + + .gg-run-data { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .gg-loop-grid, + .gg-lab-card { + grid-template-columns: 1fr; + } + + .gg-loop-grid article { + min-height: 220px; + } + + .gg-loop-grid h3 { + margin-top: 38px; + } + + .gg-lab-card-art { + min-height: 190px; + border-right: 0; + border-bottom: 1px solid var(--gg-line); + } + + .gg-final-cta { + padding: 72px 22px; + } + + .gg-final-cta h2 { + font-size: clamp(2.75rem, 13vw, 4rem); + } + + .gg-footer > div { + align-items: flex-start; + } +} + +@media (prefers-reduced-motion: reduce) { + .gg-site *, + .gg-site *::before, + .gg-site *::after { + scroll-behavior: auto !important; + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + } +}