Spaces:
Sleeping
Sleeping
| /** | |
| * MaterialForge — Design System v3.0 | |
| * Professional Discovery Lab — Fixed Layout | |
| */ | |
| :root { | |
| --bg-primary: #0a0e14; | |
| --bg-secondary: #111823; | |
| --bg-panel: #161f2d; | |
| --bg-border: #1e293b; | |
| --accent: #00d4aa; | |
| --accent-glow: rgba(0, 212, 170, 0.4); | |
| --accent2: #3b82f6; | |
| --accent3: #f59e0b; | |
| --text-1: #f8fafc; | |
| --text-2: #94a3b8; | |
| --text-3: #64748b; | |
| --atom-A: #ef4444; | |
| --atom-B: #3b82f6; | |
| --atom-C: #f59e0b; | |
| --atom-P: #8b5cf6; | |
| --mono: 'JetBrains Mono', monospace; | |
| --sans: 'Inter', system-ui, sans-serif; | |
| --shadow-sm: 0 4px 12px rgba(0,0,0,0.5); | |
| --glass: rgba(22, 31, 45, 0.7); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background-color: var(--bg-primary); | |
| color: var(--text-1); | |
| font-family: var(--sans); | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* ── HEADER & NAVIGATION ── */ | |
| header { | |
| height: 52px; | |
| min-height: 52px; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--bg-border); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| gap: 24px; | |
| z-index: 100; | |
| flex-shrink: 0; | |
| } | |
| .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } | |
| .logo-icon { | |
| width: 28px; height: 28px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| border-radius: 6px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-weight: 800; color: #000; font-size: 15px; | |
| } | |
| .logo-text { font-size: 15px; font-weight: 700; letter-spacing: -0.5px; } | |
| .logo-sub { font-size: 9px; color: var(--text-3); font-weight: 600; letter-spacing: 1px; margin-top: -2px; } | |
| .nav-tabs { display: flex; height: 100%; align-items: stretch; } | |
| .nav-tab { | |
| background: transparent; border: none; | |
| padding: 0 14px; color: var(--text-2); | |
| font-weight: 600; font-size: 11px; letter-spacing: 0.5px; | |
| cursor: pointer; position: relative; transition: color 0.2s; | |
| white-space: nowrap; | |
| } | |
| .nav-tab:hover { color: var(--text-1); } | |
| .nav-tab.active { color: var(--accent); } | |
| .nav-tab.active::after { | |
| content: ''; position: absolute; bottom: 0; left: 0; right: 0; | |
| height: 3px; background: var(--accent); | |
| box-shadow: 0 0 10px var(--accent-glow); | |
| } | |
| .header-status { margin-left: auto; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.2); padding: 5px 10px; border-radius: 6px; flex-shrink: 0; } | |
| .status-dot { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 8px #22c55e; } | |
| .status-dot.offline { background: #ef4444; box-shadow: 0 0 8px #ef4444; } | |
| #status-text { font-size: 9px; font-weight: 700; color: var(--text-2); white-space: nowrap; } | |
| /* ── TAB CONTENT ENGINE ── */ | |
| .tab-content { display: none; flex: 1; overflow: hidden; position: relative; } | |
| .tab-content.active { display: flex; } | |
| /* ── PLAYGROUND LAYOUT ── */ | |
| /* Main grid: left=lattice+charts, right=sidebar controls */ | |
| .app { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 320px; | |
| grid-template-rows: auto 1fr; | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| /* KPI Strip — spans full width */ | |
| .kpi-strip { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| background: var(--bg-panel); | |
| border-bottom: 1px solid var(--bg-border); | |
| overflow-x: auto; | |
| flex-shrink: 0; | |
| } | |
| .kpi-card { padding: 10px 16px; border-right: 1px solid var(--bg-border); flex: 1; min-width: 100px; } | |
| .kpi-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); font-weight: 700; margin-bottom: 2px; } | |
| .kpi-value { font-size: 17px; font-weight: 700; font-family: var(--mono); color: var(--accent); } | |
| .phase-crystalline { color: var(--accent); } | |
| .phase-polycrystalline { color: var(--accent2); } | |
| .phase-amorphous { color: var(--text-3); } | |
| /* ── MAIN AREA (left) — Lattice + Charts ── */ | |
| .main { | |
| background: var(--bg-primary); | |
| padding: 24px 28px; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| gap: 16px; | |
| } | |
| .viz-area { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| flex: 1; | |
| } | |
| /* Top row: lattice + properties side by side */ | |
| .viz-row-top { | |
| display: grid; | |
| grid-template-columns: minmax(420px, 1fr) minmax(320px, 420px); | |
| gap: 20px; | |
| align-items: stretch; | |
| } | |
| .lattice-stage { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .lattice-wrap { | |
| background: #080a0f; | |
| border-radius: 16px; | |
| padding: 18px; | |
| border: 1px solid var(--bg-border); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| box-shadow: var(--shadow-sm); | |
| width: min(100%, 540px); | |
| margin: 0 auto; | |
| } | |
| .lattice-meta { | |
| font-family: var(--mono); | |
| color: var(--accent); | |
| font-size: 9px; | |
| } | |
| .lattice-title { | |
| align-self: stretch; | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 12px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--text-2); | |
| text-transform: uppercase; | |
| } | |
| #lattice-canvas { | |
| width: min(100%, 380px); | |
| height: auto; | |
| aspect-ratio: 1; | |
| border-radius: 10px; | |
| cursor: crosshair; | |
| image-rendering: pixelated; | |
| box-shadow: 0 0 30px rgba(0,0,0,0.5); | |
| background: radial-gradient(circle at center, rgba(0,212,170,0.07), transparent 60%); | |
| } | |
| .lattice-legend { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 8px; | |
| margin-top: 12px; | |
| align-self: stretch; | |
| } | |
| .legend-item { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; color: var(--text-3); text-transform: uppercase; } | |
| .legend-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; } | |
| .interaction-strip { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .interaction-chip { | |
| padding: 7px 10px; | |
| border-radius: 999px; | |
| background: rgba(255,255,255,0.04); | |
| border: 1px solid rgba(255,255,255,0.06); | |
| color: var(--text-2); | |
| font-size: 9px; | |
| font-weight: 700; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| } | |
| .lattice-summary, | |
| .properties-card { | |
| width: min(100%, 540px); | |
| } | |
| .summary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .summary-block, | |
| .workbench-card { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding: 12px; | |
| border-radius: 10px; | |
| background: rgba(8, 12, 20, 0.7); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .summary-label { | |
| color: var(--text-3); | |
| font-size: 9px; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| .summary-value { | |
| color: var(--text-1); | |
| font-family: var(--mono); | |
| font-size: 15px; | |
| font-weight: 700; | |
| } | |
| /* Chart Cards */ | |
| .chart-card { | |
| background: linear-gradient(180deg, rgba(22, 31, 45, 0.96), rgba(13, 19, 29, 0.96)); | |
| border-radius: 16px; | |
| padding: 18px; | |
| border: 1px solid rgba(148,163,184,0.10); | |
| box-shadow: 0 16px 40px rgba(0,0,0,0.28); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .chart-label { | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: var(--text-3); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /* ── SIDEBAR (right) — Controls ── */ | |
| .sidebar { | |
| background: var(--bg-secondary); | |
| border-left: 1px solid var(--bg-border); | |
| padding: 18px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| overflow-y: auto; | |
| height: 100%; | |
| } | |
| .panel { | |
| background: var(--bg-panel); | |
| border-radius: 10px; | |
| padding: 14px; | |
| border: 1px solid rgba(255,255,255,0.03); | |
| } | |
| .panel-title { | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-3); | |
| margin-bottom: 12px; | |
| border-bottom: 1px solid var(--bg-border); | |
| padding-bottom: 6px; | |
| } | |
| /* ── FORM ELEMENTS ── */ | |
| .fields { display: flex; flex-direction: column; gap: 12px; } | |
| .field label { | |
| display: block; | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: var(--text-3); | |
| margin-bottom: 4px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| select, input[type="range"] { | |
| width: 100%; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--bg-border); | |
| color: #fff; | |
| padding: 8px; | |
| border-radius: 6px; | |
| font-size: 12px; | |
| outline: none; | |
| } | |
| input[type="range"] { padding: 0; } | |
| .btn { | |
| width: 100%; | |
| padding: 10px; | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 700; | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .btn-primary { background: var(--accent); color: #000; box-shadow: 0 4px 12px var(--accent-glow); } | |
| .btn-primary:active { transform: scale(0.98); } | |
| .btn-secondary { background: rgba(255,255,255,0.05); color: var(--text-2); border: 1px solid var(--bg-border); } | |
| .action-tabs { | |
| display: flex; | |
| background: var(--bg-primary); | |
| border-radius: 6px; | |
| padding: 3px; | |
| border: 1px solid var(--bg-border); | |
| } | |
| .action-tab { | |
| flex: 1; | |
| border: none; | |
| padding: 6px; | |
| font-size: 9px; | |
| font-weight: 700; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| background: transparent; | |
| color: var(--text-3); | |
| } | |
| .action-tab.active { background: var(--accent2); color: #fff; } | |
| .atom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } | |
| .atom-btn { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--bg-border); | |
| border-radius: 6px; | |
| padding: 6px 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| transition: transform 0.1s; | |
| } | |
| .atom-btn .symbol { | |
| width: 24px; height: 24px; | |
| border-radius: 5px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-weight: 800; color: #fff; font-size: 12px; | |
| background: var(--bg-border); | |
| } | |
| .atom-btn.selected { border-color: var(--accent); background: rgba(0, 212, 170, 0.05); } | |
| .atom-btn.selected .symbol { color: #000; } | |
| .atom-btn[data-atom="A"].selected .symbol { background: var(--atom-A); } | |
| .atom-btn[data-atom="B"].selected .symbol { background: var(--atom-B); } | |
| .atom-btn[data-atom="C"].selected .symbol { background: var(--atom-C); } | |
| .atom-btn[data-atom="P"].selected .symbol { background: var(--atom-P); } | |
| .atom-btn span:last-child { font-size: 8px; font-weight: 700; color: var(--text-3); text-transform: uppercase; } | |
| .workbench-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 8px; | |
| } | |
| .control-note { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding: 12px; | |
| border-radius: 10px; | |
| background: rgba(0,0,0,0.25); | |
| border: 1px solid var(--bg-border); | |
| color: var(--text-2); | |
| font-size: 11px; | |
| line-height: 1.5; | |
| } | |
| /* Telemetry Box */ | |
| .log-box { | |
| height: 100px; | |
| overflow-y: auto; | |
| background: #000; | |
| border-radius: 6px; | |
| padding: 10px; | |
| font-family: var(--mono); | |
| font-size: 9px; | |
| line-height: 1.6; | |
| } | |
| .log-entry { margin-bottom: 3px; display: flex; border-bottom: 1px solid rgba(255,255,255,0.03); padding-bottom: 3px; } | |
| .log-ts { color: var(--text-3); width: 60px; flex-shrink: 0; } | |
| .log-ok { color: var(--accent); } | |
| .log-err { color: #ef4444; } | |
| /* Progress Meters */ | |
| .prop-meters { display: flex; flex-direction: column; gap: 12px; } | |
| .prop-row { display: flex; flex-direction: column; gap: 4px; } | |
| .prop-header { display: flex; justify-content: space-between; align-items: center; } | |
| .prop-name { font-size: 10px; font-weight: 600; color: var(--text-2); } | |
| .prop-vals { font-size: 11px; font-family: var(--mono); color: var(--text-1); font-weight: 700; } | |
| .prop-bar-bg { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; position: relative; overflow: hidden; } | |
| .prop-bar-fill { height: 100%; transition: width 0.4s ease; border-radius: 3px; } | |
| .prop-bar-target { position: absolute; top: 0; height: 100%; width: 2px; background: #fff; z-index: 2; transition: left 0.4s ease; box-shadow: 0 0 6px #fff; } | |
| /* ── DOCUMENTATION & TABLES ── */ | |
| .doc-container { | |
| flex: 1; overflow-y: auto; padding: 40px 60px; | |
| max-width: 1000px; margin: 0 auto; line-height: 1.6; | |
| } | |
| .doc-container section { margin-bottom: 48px; } | |
| .doc-container h2 { font-size: 24px; margin-bottom: 16px; color: var(--accent); } | |
| .doc-container h3 { font-size: 16px; margin-top: 24px; color: var(--text-1); text-transform: uppercase; letter-spacing: 1px; } | |
| .doc-container p { color: var(--text-2); margin-bottom: 16px; } | |
| .doc-hero { | |
| padding: 28px; | |
| border-radius: 20px; | |
| background: | |
| radial-gradient(circle at top right, rgba(0, 212, 170, 0.16), transparent 30%), | |
| linear-gradient(180deg, rgba(17, 24, 35, 0.95), rgba(10, 14, 20, 0.96)); | |
| border: 1px solid var(--bg-border); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .eyebrow { | |
| display: inline-block; | |
| margin-bottom: 12px; | |
| color: var(--accent); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 1.2px; | |
| text-transform: uppercase; | |
| } | |
| .hero-title { | |
| font-size: clamp(28px, 4vw, 42px); | |
| line-height: 1.08; | |
| letter-spacing: -1.3px; | |
| margin-bottom: 14px; | |
| } | |
| .hero-text { | |
| max-width: 760px; | |
| font-size: 16px; | |
| line-height: 1.75; | |
| color: var(--text-2); | |
| } | |
| .hero-grid, | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 14px; | |
| margin-top: 24px; | |
| } | |
| .stat-tile, | |
| .metric-card { | |
| padding: 16px; | |
| border-radius: 16px; | |
| background: linear-gradient(180deg, rgba(12, 18, 28, 0.92), rgba(8, 12, 20, 0.82)); | |
| border: 1px solid rgba(255,255,255,0.07); | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); | |
| } | |
| .doc-grid, | |
| .readme-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 20px; | |
| align-items: start; | |
| } | |
| .info-card { | |
| padding: 22px; | |
| border-radius: 16px; | |
| background: var(--bg-panel); | |
| border: 1px solid var(--bg-border); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .info-card h2 { | |
| margin-bottom: 10px; | |
| } | |
| .badge-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 14px; | |
| } | |
| .pill { | |
| padding: 7px 10px; | |
| border-radius: 999px; | |
| background: rgba(0, 212, 170, 0.08); | |
| border: 1px solid rgba(0, 212, 170, 0.18); | |
| color: var(--text-1); | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.8px; | |
| text-transform: uppercase; | |
| } | |
| .link-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .link-list a { | |
| color: var(--text-1); | |
| text-decoration: none; | |
| padding: 12px 14px; | |
| border-radius: 10px; | |
| background: var(--bg-panel); | |
| border: 1px solid var(--bg-border); | |
| transition: border-color 0.2s, transform 0.2s, color 0.2s; | |
| } | |
| .link-list a:hover { | |
| color: var(--accent); | |
| border-color: rgba(0, 212, 170, 0.45); | |
| transform: translateY(-1px); | |
| } | |
| .insight-stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .insight-item { | |
| padding: 12px 14px; | |
| border-radius: 12px; | |
| background: rgba(8, 12, 20, 0.68); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| color: var(--text-2); | |
| } | |
| .table-wrap { overflow: hidden; border-radius: 8px; border: 1px solid var(--bg-border); background: var(--bg-panel); margin: 20px 0; } | |
| table { width: 100%; border-collapse: collapse; font-size: 14px; } | |
| th { background: rgba(0,0,0,0.2); padding: 12px 16px; text-align: left; color: var(--text-3); font-weight: 700; text-transform: uppercase; font-size: 11px; } | |
| td { padding: 12px 16px; border-top: 1px solid var(--bg-border); } | |
| tr:hover { background: rgba(255,255,255,0.02); } | |
| #phase-pie-chart, | |
| #scenario-bar-chart, | |
| #reward-chart { | |
| filter: saturate(1.05); | |
| } | |
| code, pre { font-family: var(--mono); background: #000; padding: 4px 8px; border-radius: 4px; font-size: 13px; color: var(--accent2); } | |
| pre { padding: 16px; display: block; border: 1px solid var(--bg-border); margin: 12px 0; overflow-x: auto; color: #fff; } | |
| /* ── FOOTER ── */ | |
| .bottom-bar { | |
| height: 28px; | |
| min-height: 28px; | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--bg-border); | |
| font-size: 9px; | |
| color: var(--text-3); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| flex-shrink: 0; | |
| } | |
| /* Overlay & Toasts */ | |
| .loading-overlay { | |
| position: fixed; inset: 0; | |
| background: var(--bg-primary); | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 20px; | |
| transition: opacity 0.5s, visibility 0.5s; | |
| } | |
| .loading-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } | |
| .spinner { | |
| width: 36px; height: 36px; | |
| border: 3px solid rgba(0, 212, 170, 0.1); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .toast { | |
| position: fixed; | |
| bottom: 40px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(20px); | |
| background: #fff; | |
| color: #000; | |
| padding: 8px 18px; | |
| border-radius: 10px; | |
| font-weight: 700; | |
| font-size: 11px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s; | |
| z-index: 2000; | |
| } | |
| .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } | |
| .toast.success { background: var(--accent); } | |
| .toast.error { background: #ef4444; color: #fff; } | |
| @media (max-width: 1100px) { | |
| .app { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| border-left: none; | |
| border-top: 1px solid var(--bg-border); | |
| } | |
| .viz-row-top { | |
| grid-template-columns: 1fr; | |
| } | |
| .lattice-wrap, | |
| .lattice-summary, | |
| .properties-card { | |
| width: 100%; | |
| } | |
| } | |
| @media (max-width: 700px) { | |
| header { | |
| padding: 0 14px; | |
| gap: 12px; | |
| } | |
| .nav-tabs { | |
| display: none; | |
| } | |
| .main { | |
| padding: 16px; | |
| } | |
| .doc-container { | |
| padding: 24px 18px; | |
| } | |
| .hero-grid, | |
| .metrics-grid, | |
| .doc-grid, | |
| .readme-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .summary-grid, | |
| .workbench-grid, | |
| .lattice-legend { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .header-status { | |
| padding: 5px 8px; | |
| } | |
| } | |