Spaces:
Running
Running
| /* ========================================================================== | |
| CARTPOLE-V1 PHYSICAL AI LAB | HWIHWA LAB | |
| Masterclass Industrial Bento Architecture (Left 40% : Right 60%) | |
| 3-Layer Elevated Glassmorphism, Modular Hardware Strips & Ambient Tint | |
| ========================================================================== */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap'); | |
| :root { | |
| /* Matte Obsidian & Deep Indigo Slate System */ | |
| --bg-primary: #07080d; | |
| --bg-secondary: #0d1019; | |
| --bg-card: linear-gradient(180deg, rgba(16, 22, 38, 0.96) 0%, rgba(10, 13, 24, 0.98) 100%); | |
| --bg-surface: rgba(14, 19, 32, 0.85); | |
| --bg-tile: rgba(22, 30, 48, 0.7); | |
| --border-color: rgba(255, 255, 255, 0.08); | |
| --border-glow: rgba(56, 189, 248, 0.35); | |
| /* Cybernetic Neon Accents */ | |
| --neon-cyan: #00f2fe; | |
| --neon-blue: #38bdf8; | |
| --neon-purple: #c084fc; | |
| --neon-pink: #f43f5e; | |
| --neon-green: #10b981; | |
| --neon-amber: #fbbf24; | |
| --neon-red: #ef4444; | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --text-dim: #64748b; | |
| --font-ui: 'Outfit', 'Inter', -apple-system, sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: var(--bg-primary); | |
| background-image: | |
| radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.06) 0%, transparent 45%), | |
| radial-gradient(circle at 85% 85%, rgba(192, 132, 252, 0.06) 0%, transparent 45%), | |
| radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.02) 0%, transparent 60%), | |
| linear-gradient(180deg, #07080d 0%, #0b0e17 100%); | |
| color: var(--text-main); | |
| font-family: var(--font-ui); | |
| height: 100vh; | |
| width: 100vw; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| line-height: 1.35; | |
| font-size: 13.5px; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ========================================================================== | |
| Header Bar (52px Luxurious Titanium Glassmorphism) | |
| ========================================================================== */ | |
| .header-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 1.5rem; | |
| background: rgba(12, 16, 28, 0.98); | |
| backdrop-filter: blur(16px); | |
| border-bottom: 1px solid var(--border-color); | |
| height: 52px; | |
| flex-shrink: 0; | |
| z-index: 100; | |
| } | |
| .brand-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.85rem; | |
| } | |
| .brand-badge-icon { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 8px; | |
| background: rgba(56, 189, 248, 0.12); | |
| border: 1px solid rgba(56, 189, 248, 0.35); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--neon-cyan); | |
| box-shadow: 0 0 12px rgba(0, 242, 254, 0.25); | |
| } | |
| .brand-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1px; | |
| } | |
| .title-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.65rem; | |
| } | |
| .title-row h1 { | |
| font-size: 1.05rem; | |
| font-weight: 800; | |
| letter-spacing: 0.04em; | |
| background: linear-gradient(135deg, #ffffff 40%, var(--neon-cyan) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .brand-sub { | |
| font-size: 0.72rem; | |
| font-family: var(--font-mono); | |
| color: #94a3b8; | |
| letter-spacing: 0.02em; | |
| } | |
| .gym-badge { | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| padding: 2px 8px; | |
| background: rgba(56, 189, 248, 0.14); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| color: var(--neon-blue); | |
| font-weight: 600; | |
| } | |
| .header-metrics { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-left: 0.25rem; | |
| } | |
| .header-link-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| padding: 5px 11px; | |
| border-radius: 6px; | |
| font-family: var(--font-mono); | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| text-decoration: none; | |
| transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| white-space: nowrap; | |
| } | |
| .header-link-btn.hf-btn { | |
| background: rgba(255, 210, 30, 0.12); | |
| border: 1px solid rgba(255, 210, 30, 0.35); | |
| color: #fbbf24; | |
| } | |
| .header-link-btn.hf-btn:hover { | |
| background: rgba(255, 210, 30, 0.22); | |
| border-color: #fbbf24; | |
| box-shadow: 0 0 12px rgba(251, 191, 36, 0.35); | |
| transform: translateY(-1px); | |
| } | |
| .header-link-btn.gh-btn { | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.22); | |
| color: #f1f5f9; | |
| } | |
| .header-link-btn.gh-btn:hover { | |
| background: rgba(255, 255, 255, 0.16); | |
| border-color: rgba(255, 255, 255, 0.45); | |
| box-shadow: 0 0 12px rgba(255, 255, 255, 0.2); | |
| transform: translateY(-1px); | |
| } | |
| .metric-pill { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 5px 12px; | |
| border-radius: 6px; | |
| background: rgba(18, 24, 40, 0.9); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| font-size: 0.78rem; | |
| font-family: var(--font-mono); | |
| } | |
| .pill-status { | |
| color: var(--neon-green); | |
| border-color: rgba(16, 185, 129, 0.3); | |
| } | |
| .pill-k { | |
| color: var(--text-muted); | |
| } | |
| .pill-v { | |
| font-weight: 700; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--neon-green); | |
| box-shadow: 0 0 8px var(--neon-green); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| 100% { opacity: 1; } | |
| } | |
| /* ========================================================================== | |
| Main Laboratory Viewport: Top Stage (44%) + Bottom Bento (56%) | |
| ========================================================================== */ | |
| .lab-main { | |
| flex: 1; | |
| display: grid; | |
| grid-template-rows: 46% 54%; | |
| gap: 8px; | |
| padding: 6px 12px 6px; | |
| height: calc(100vh - 52px); | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| /* ========================================================================== | |
| 🌟 TOP TIER: Physical Stage (Clean, Expansive, Zero Dead-Band) | |
| ========================================================================== */ | |
| .stage-section { | |
| display: flex; | |
| flex-direction: column; | |
| background: radial-gradient(circle at 50% 55%, #131726 0%, #080a10 88%); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); | |
| min-height: 0; | |
| } | |
| .canvas-viewport-area { | |
| flex: 1; | |
| position: relative; | |
| min-height: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| #simCanvas { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| cursor: crosshair; | |
| touch-action: none; | |
| } | |
| #simCanvas:active { | |
| cursor: grabbing; | |
| } | |
| .hud-overlay-tag { | |
| position: absolute; | |
| top: 10px; | |
| left: 14px; | |
| font-family: var(--font-mono); | |
| font-size: 0.76rem; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| color: var(--neon-blue); | |
| background: rgba(14, 18, 30, 0.9); | |
| backdrop-filter: blur(10px); | |
| padding: 4px 10px; | |
| border-radius: 5px; | |
| border: 1px solid rgba(56, 189, 248, 0.35); | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| .hud-interactive-hint { | |
| position: absolute; | |
| top: 10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-family: var(--font-mono); | |
| font-size: 0.70rem; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| color: var(--neon-cyan); | |
| background: rgba(14, 18, 32, 0.88); | |
| backdrop-filter: blur(8px); | |
| padding: 3px 10px; | |
| border-radius: 4px; | |
| border: 1px solid rgba(0, 242, 254, 0.3); | |
| box-shadow: 0 0 10px rgba(0, 242, 254, 0.15); | |
| pointer-events: none; | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .hud-interactive-hint span { | |
| color: var(--neon-amber); | |
| } | |
| .hud-shock-banner { | |
| position: absolute; | |
| top: 10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-family: var(--font-mono); | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| color: #ffffff; | |
| background: rgba(244, 63, 94, 0.92); | |
| backdrop-filter: blur(10px); | |
| padding: 5px 14px; | |
| border-radius: 6px; | |
| border: 1px solid var(--neon-pink); | |
| box-shadow: 0 0 18px rgba(244, 63, 94, 0.6); | |
| pointer-events: none; | |
| z-index: 20; | |
| display: none; | |
| animation: shockPulse 0.4s infinite alternate; | |
| } | |
| @keyframes shockPulse { | |
| 0% { transform: translateX(-50%) scale(1); } | |
| 100% { transform: translateX(-50%) scale(1.06); } | |
| } | |
| .hud-force-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 14px; | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| background: rgba(14, 18, 30, 0.9); | |
| backdrop-filter: blur(10px); | |
| padding: 4px 10px; | |
| border-radius: 5px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| .hud-equilibrium-chip { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 14px; | |
| font-family: var(--font-mono); | |
| font-size: 0.74rem; | |
| color: var(--text-muted); | |
| background: rgba(14, 18, 30, 0.9); | |
| backdrop-filter: blur(10px); | |
| padding: 3px 9px; | |
| border-radius: 5px; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| pointer-events: none; | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .hud-divider { | |
| color: rgba(255, 255, 255, 0.2); | |
| } | |
| .hud-score-hero { | |
| position: absolute; | |
| bottom: 10px; | |
| right: 16px; | |
| background: rgba(14, 18, 30, 0.9); | |
| backdrop-filter: blur(10px); | |
| padding: 4px 12px; | |
| border-radius: 6px; | |
| border: 1px solid rgba(0, 242, 254, 0.35); | |
| pointer-events: none; | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .score-lbl { | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| color: var(--text-dim); | |
| font-weight: 600; | |
| } | |
| .score-vals { | |
| font-family: var(--font-mono); | |
| font-size: 1.3rem; | |
| font-weight: 800; | |
| color: var(--neon-cyan); | |
| } | |
| .score-max { | |
| color: var(--text-dim); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| } | |
| /* ========================================================================== | |
| 🍱 BOTTOM TIER: High-Density Robotics Bento (Left 40% : Right 60%) | |
| ========================================================================== */ | |
| .bento-deck-golden { | |
| display: grid; | |
| grid-template-columns: 40% calc(60% - 8px); | |
| gap: 8px; | |
| height: 100%; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| .bento-panel { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(16px); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 8px 10px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| overflow: hidden; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); | |
| min-height: 0; | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 5px; | |
| padding-bottom: 4px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| flex-shrink: 0; | |
| } | |
| .card-title { | |
| font-size: 0.96rem; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: #ffffff; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| text-shadow: 0 0 10px rgba(0, 242, 254, 0.4); | |
| } | |
| .card-title svg { | |
| color: var(--neon-cyan); | |
| filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.5)); | |
| } | |
| /* ========================================================================== | |
| 🍱 BENTO PANEL 1 (Left 40%) : Controller Arena & Mission Control | |
| ========================================================================== */ | |
| .ctrl-grid-2x2 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 5px; | |
| margin-bottom: 5px; | |
| flex-shrink: 0; | |
| } | |
| .btn-ctrl-card { | |
| height: 46px; | |
| background: rgba(20, 26, 44, 0.9); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 6px; | |
| padding: 5px 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| cursor: pointer; | |
| transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); | |
| text-align: left; | |
| color: var(--text-main); | |
| } | |
| .btn-ctrl-card:hover { | |
| background: rgba(28, 36, 60, 0.95); | |
| border-color: rgba(56, 189, 248, 0.4); | |
| transform: translateY(-1px); | |
| } | |
| .card-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| overflow: hidden; | |
| } | |
| .ctrl-dot { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .dot-trained { background: var(--neon-green); box-shadow: 0 0 7px var(--neon-green); } | |
| .dot-lqr { background: var(--neon-cyan); box-shadow: 0 0 7px var(--neon-cyan); } | |
| .dot-undercooked { background: var(--neon-amber); box-shadow: 0 0 7px var(--neon-amber); } | |
| .dot-manual { background: var(--neon-purple); box-shadow: 0 0 7px var(--neon-purple); } | |
| .ctrl-titles { | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .ctrl-titles strong { | |
| font-size: 0.84rem; | |
| font-weight: 700; | |
| white-space: nowrap; | |
| } | |
| .ctrl-titles small { | |
| font-size: 0.66rem; | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| white-space: nowrap; | |
| } | |
| .card-tag { | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| font-weight: 700; | |
| padding: 2.5px 6px; | |
| border-radius: 4px; | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| } | |
| .tag-trained { color: var(--neon-green); border-color: rgba(16, 185, 129, 0.3); } | |
| .tag-lqr { color: var(--neon-cyan); border-color: rgba(0, 242, 254, 0.3); } | |
| .tag-undercooked { color: var(--neon-amber); border-color: rgba(251, 191, 36, 0.3); } | |
| .tag-manual { color: var(--neon-purple); border-color: rgba(192, 132, 252, 0.3); } | |
| .btn-ctrl-card.active-trained { | |
| background: rgba(16, 185, 129, 0.16); | |
| border-color: var(--neon-green); | |
| box-shadow: 0 0 12px rgba(16, 185, 129, 0.25); | |
| } | |
| .btn-ctrl-card.active-trained strong { color: var(--neon-green); } | |
| .btn-ctrl-card.active-lqr { | |
| background: rgba(0, 242, 254, 0.16); | |
| border-color: var(--neon-cyan); | |
| box-shadow: 0 0 12px rgba(0, 242, 254, 0.25); | |
| } | |
| .btn-ctrl-card.active-lqr strong { color: var(--neon-cyan); } | |
| .btn-ctrl-card.active-undercooked { | |
| background: rgba(251, 191, 36, 0.16); | |
| border-color: var(--neon-amber); | |
| box-shadow: 0 0 12px rgba(251, 191, 36, 0.25); | |
| } | |
| .btn-ctrl-card.active-undercooked strong { color: var(--neon-amber); } | |
| .btn-ctrl-card.active-manual { | |
| background: rgba(192, 132, 252, 0.16); | |
| border-color: var(--neon-purple); | |
| box-shadow: 0 0 12px rgba(192, 132, 252, 0.25); | |
| } | |
| .btn-ctrl-card.active-manual strong { color: var(--neon-purple); } | |
| /* Mission Control Action Deck */ | |
| .ctrl-actions-deck { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| background: rgba(12, 16, 28, 0.95); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 6px; | |
| padding: 6px 8px; | |
| margin-bottom: 5px; | |
| flex-shrink: 0; | |
| } | |
| .action-row-shock { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 6px; | |
| } | |
| .action-row-tools { | |
| display: grid; | |
| grid-template-columns: 1.15fr 0.95fr 1.05fr 1.35fr; | |
| gap: 4px; | |
| align-items: center; | |
| } | |
| /* Cybernetic Action Buttons */ | |
| .btn-action { | |
| height: 28px; | |
| border-radius: 4px; | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| transition: all 0.15s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| outline: none; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: rgba(20, 26, 42, 0.85); | |
| color: var(--text-main); | |
| } | |
| .btn-shock { | |
| height: 30px; | |
| background: rgba(251, 191, 36, 0.08); | |
| border: 1px solid rgba(251, 191, 36, 0.35); | |
| color: var(--neon-amber); | |
| font-size: 0.72rem; | |
| font-weight: 800; | |
| } | |
| .btn-shock:hover { | |
| background: rgba(251, 191, 36, 0.2); | |
| border-color: var(--neon-amber); | |
| box-shadow: 0 0 10px rgba(251, 191, 36, 0.35); | |
| } | |
| .btn-shock:active { | |
| transform: scale(0.97); | |
| background: rgba(251, 191, 36, 0.3); | |
| } | |
| .btn-pause { | |
| background: rgba(16, 185, 129, 0.12); | |
| border: 1px solid rgba(16, 185, 129, 0.4); | |
| color: var(--neon-green); | |
| } | |
| .btn-pause:hover { | |
| background: rgba(16, 185, 129, 0.22); | |
| border-color: var(--neon-green); | |
| box-shadow: 0 0 10px rgba(16, 185, 129, 0.35); | |
| } | |
| .btn-pause.btn-start-glow { | |
| background: rgba(16, 185, 129, 0.16); | |
| border-color: var(--neon-green); | |
| box-shadow: 0 0 10px rgba(16, 185, 129, 0.35); | |
| } | |
| .btn-reset { | |
| background: rgba(56, 189, 248, 0.1); | |
| border: 1px solid rgba(56, 189, 248, 0.35); | |
| color: var(--neon-cyan); | |
| } | |
| .btn-reset:hover { | |
| background: rgba(56, 189, 248, 0.22); | |
| border-color: var(--neon-cyan); | |
| box-shadow: 0 0 10px rgba(0, 242, 254, 0.35); | |
| } | |
| .btn-reset:active { | |
| transform: scale(0.97); | |
| } | |
| .hotkey-pill { | |
| background: rgba(0, 0, 0, 0.5); | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| color: var(--text-muted); | |
| font-size: 0.58rem; | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| font-family: var(--font-mono); | |
| font-weight: 600; | |
| margin-left: 2px; | |
| } | |
| .speed-menu-wrap { | |
| position: relative; | |
| height: 28px; | |
| background: rgba(20, 28, 48, 0.85); | |
| border: 1px solid rgba(56, 189, 248, 0.35); | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 4px 0 6px; | |
| transition: all 0.15s ease; | |
| } | |
| .speed-menu-wrap:hover { | |
| background: rgba(28, 38, 64, 0.95); | |
| border-color: var(--neon-cyan); | |
| box-shadow: 0 0 8px rgba(0, 242, 254, 0.3); | |
| } | |
| .spd-menu-icon { | |
| font-size: 0.68rem; | |
| color: var(--neon-cyan); | |
| margin-right: 3px; | |
| flex-shrink: 0; | |
| } | |
| .neon-speed-select { | |
| background: transparent; | |
| border: none; | |
| color: var(--neon-cyan); | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| font-weight: 800; | |
| cursor: pointer; | |
| outline: none; | |
| width: 100%; | |
| height: 100%; | |
| padding-right: 1px; | |
| } | |
| .neon-speed-select option { | |
| background: #0d1222; | |
| color: #f8fafc; | |
| font-family: var(--font-mono); | |
| font-size: 0.72rem; | |
| padding: 4px; | |
| } | |
| .stress-tools-cluster { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2px; | |
| background: rgba(255, 255, 255, 0.04); | |
| padding: 2px; | |
| border-radius: 5px; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| height: 30px; | |
| align-items: center; | |
| } | |
| .btn-tool { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| font-size: 0.64rem; | |
| font-weight: 700; | |
| height: 100%; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 3px; | |
| transition: all 0.15s ease; | |
| white-space: nowrap; | |
| } | |
| .btn-tool:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: #ffffff; | |
| } | |
| .btn-tool.active, | |
| .btn-tool.active-wind { | |
| background: rgba(244, 63, 94, 0.25); | |
| color: var(--neon-pink); | |
| box-shadow: 0 0 8px rgba(244, 63, 94, 0.4); | |
| } | |
| .btn-tool.active-dr { | |
| background: rgba(16, 185, 129, 0.25); | |
| color: var(--neon-green); | |
| box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); | |
| } | |
| /* 4-DOF State Telemetry (Modular Hardware Strips) */ | |
| .telemetry-deck-dense { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| background: rgba(10, 14, 26, 0.9); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: 6px; | |
| padding: 4px 6px; | |
| margin-bottom: 4px; | |
| flex: 1; | |
| justify-content: space-around; | |
| } | |
| .tele-meter-row { | |
| display: grid; | |
| grid-template-columns: 130px 1fr 85px; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(255, 255, 255, 0.025); | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| border-radius: 4px; | |
| padding: 2px 6px; | |
| height: 24px; | |
| transition: all 0.15s ease; | |
| } | |
| .tele-meter-row:hover { | |
| background: rgba(255, 255, 255, 0.04); | |
| border-color: rgba(56, 189, 248, 0.25); | |
| } | |
| .tele-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .tm-name { | |
| font-size: 0.70rem; | |
| font-family: var(--font-mono); | |
| font-weight: 700; | |
| color: #cbd5e1; | |
| white-space: nowrap; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .tm-bullet { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .tm-bullet-cyan { background: var(--neon-cyan); box-shadow: 0 0 5px var(--neon-cyan); } | |
| .tm-bullet-purple { background: var(--neon-purple); box-shadow: 0 0 5px var(--neon-purple); } | |
| .tm-bullet-pink { background: var(--neon-pink); box-shadow: 0 0 5px var(--neon-pink); } | |
| .tm-bullet-green { background: var(--neon-green); box-shadow: 0 0 5px var(--neon-green); } | |
| .tm-range { | |
| font-size: 0.58rem; | |
| font-family: var(--font-mono); | |
| color: #64748b; | |
| white-space: nowrap; | |
| } | |
| .tm-gauge-wrap { | |
| position: relative; | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .tm-gauge-center { | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: rgba(255, 255, 255, 0.35); | |
| z-index: 2; | |
| } | |
| .tm-gauge-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--neon-cyan), var(--neon-blue)); | |
| border-radius: 3px; | |
| transition: width 0.06s ease-out; | |
| } | |
| .tm-num { | |
| font-size: 0.92rem; | |
| font-family: var(--font-mono); | |
| font-weight: 800; | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| white-space: nowrap; | |
| } | |
| /* Controller Spec Footer (3 Micro-Card Glass Capsules) */ | |
| .ctrl-spec-footer { | |
| display: grid; | |
| grid-template-columns: 1.3fr 1fr 1fr; | |
| gap: 5px; | |
| padding: 0; | |
| background: transparent; | |
| border: none; | |
| flex-shrink: 0; | |
| } | |
| .spec-chip { | |
| background: rgba(20, 28, 48, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 5px; | |
| padding: 3px 6px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| gap: 1px; | |
| height: 32px; | |
| transition: all 0.15s ease; | |
| } | |
| .spec-chip:hover { | |
| background: rgba(28, 38, 64, 0.85); | |
| border-color: rgba(56, 189, 248, 0.35); | |
| } | |
| .chip-law { border-left: 3px solid var(--neon-green); } | |
| .chip-duty { border-left: 3px solid var(--neon-cyan); } | |
| .chip-freq { border-left: 3px solid var(--neon-amber); } | |
| .sc-k { | |
| font-family: var(--font-mono); | |
| font-size: 0.60rem; | |
| color: #94a3b8; | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| } | |
| .sc-v { | |
| font-family: var(--font-mono); | |
| font-size: 0.74rem; | |
| font-weight: 800; | |
| color: #ffffff; | |
| white-space: nowrap; | |
| } | |
| /* ========================================================================== | |
| 🍱 BENTO PANEL 2 (Right 60%) : Sim-to-Real Lab & Dual Benchmark | |
| ========================================================================== */ | |
| .simreal-tuner-strip { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| margin-bottom: 4px; | |
| flex-shrink: 0; | |
| } | |
| .sliders-4col { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr 1fr; | |
| gap: 5px; | |
| } | |
| .slider-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: 5px; | |
| padding: 4px 7px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| transition: all 0.15s ease; | |
| } | |
| .slider-card:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: rgba(56, 189, 248, 0.25); | |
| } | |
| .sc-length { border-top: 2px solid var(--neon-pink); } | |
| .sc-masspole { border-top: 2px solid var(--neon-amber); } | |
| .sc-masscart { border-top: 2px solid var(--neon-purple); } | |
| .sc-gravity { border-top: 2px solid var(--neon-cyan); } | |
| .dot-ind { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 4px; | |
| } | |
| .dot-pink { background: var(--neon-pink); box-shadow: 0 0 5px var(--neon-pink); } | |
| .dot-amber { background: var(--neon-amber); box-shadow: 0 0 5px var(--neon-amber); } | |
| .dot-purple { background: var(--neon-purple); box-shadow: 0 0 5px var(--neon-purple); } | |
| .dot-cyan { background: var(--neon-cyan); box-shadow: 0 0 5px var(--neon-cyan); } | |
| .sb-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: var(--font-mono); | |
| font-size: 0.64rem; | |
| font-weight: 700; | |
| color: #cbd5e1; | |
| } | |
| .sb-meta strong { | |
| font-size: 0.74rem; | |
| font-weight: 800; | |
| } | |
| .neon-slider { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.12); | |
| border-radius: 2px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| .neon-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 11px; | |
| height: 11px; | |
| border-radius: 50%; | |
| background: var(--neon-cyan); | |
| box-shadow: 0 0 7px var(--neon-cyan); | |
| cursor: pointer; | |
| transition: transform 0.1s ease; | |
| } | |
| .neon-slider::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| } | |
| .slider-pink::-webkit-slider-thumb { background: var(--neon-pink); box-shadow: 0 0 7px var(--neon-pink); } | |
| .slider-amber::-webkit-slider-thumb { background: var(--neon-amber); box-shadow: 0 0 7px var(--neon-amber); } | |
| .slider-purple::-webkit-slider-thumb { background: var(--neon-purple); box-shadow: 0 0 7px var(--neon-purple); } | |
| .slider-cyan::-webkit-slider-thumb { background: var(--neon-cyan); box-shadow: 0 0 7px var(--neon-cyan); } | |
| /* Engineering Load Presets Selector */ | |
| .grav-selector-strip { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| background: rgba(255, 255, 255, 0.025); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 5px; | |
| padding: 3px 8px; | |
| } | |
| .grav-title-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| font-family: var(--font-mono); | |
| font-size: 0.64rem; | |
| color: var(--text-dim); | |
| } | |
| .gt-dot { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 50%; | |
| background: var(--neon-cyan); | |
| box-shadow: 0 0 6px var(--neon-cyan); | |
| } | |
| .grav-title-cell strong { | |
| font-size: 0.70rem; | |
| } | |
| .grav-btn-row { | |
| display: flex; | |
| gap: 3px; | |
| } | |
| .btn-planet { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| font-weight: 700; | |
| padding: 2px 7px; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .btn-planet:hover, .btn-planet.active { | |
| background: rgba(0, 242, 254, 0.2); | |
| border-color: var(--neon-cyan); | |
| color: var(--neon-cyan); | |
| box-shadow: 0 0 8px rgba(0, 242, 254, 0.25); | |
| } | |
| .btn-load-moon:hover, .btn-load-moon.active { | |
| background: rgba(192, 132, 252, 0.2); | |
| border-color: var(--neon-purple); | |
| color: var(--neon-purple); | |
| box-shadow: 0 0 8px rgba(192, 132, 252, 0.35); | |
| } | |
| .btn-load-mars:hover, .btn-load-mars.active { | |
| background: rgba(244, 63, 94, 0.2); | |
| border-color: var(--neon-pink); | |
| color: var(--neon-pink); | |
| box-shadow: 0 0 8px rgba(244, 63, 94, 0.35); | |
| } | |
| .btn-load-earth:hover, .btn-load-earth.active { | |
| background: rgba(0, 242, 254, 0.2); | |
| border-color: var(--neon-cyan); | |
| color: var(--neon-cyan); | |
| box-shadow: 0 0 8px rgba(0, 242, 254, 0.35); | |
| } | |
| .btn-load-jupiter:hover, .btn-load-jupiter.active { | |
| background: rgba(251, 191, 36, 0.2); | |
| border-color: var(--neon-amber); | |
| color: var(--neon-amber); | |
| box-shadow: 0 0 8px rgba(251, 191, 36, 0.35); | |
| } | |
| .btn-reset-gym { | |
| background: rgba(251, 191, 36, 0.15); | |
| border: 1px solid rgba(251, 191, 36, 0.4); | |
| color: var(--neon-amber); | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| font-weight: 700; | |
| padding: 2px 7px; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .btn-reset-gym:hover { | |
| background: rgba(251, 191, 36, 0.28); | |
| box-shadow: 0 0 8px rgba(251, 191, 36, 0.35); | |
| } | |
| /* Dual Benchmark Split (Phase Portrait Radar + Reward Chart & Stats) */ | |
| .dual-benchmark-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 6px; | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .benchmark-cell { | |
| background: rgba(10, 14, 26, 0.9); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: 6px; | |
| padding: 5px 8px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| .cell-hdr-mini { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: var(--font-mono); | |
| font-size: 0.72rem; | |
| font-weight: 800; | |
| color: #f1f5f9; | |
| margin-bottom: 3px; | |
| padding-bottom: 2px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| flex-shrink: 0; | |
| } | |
| .chart-actions-mini { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .btn-clear-stats { | |
| font-family: var(--font-mono); | |
| font-size: 0.60rem; | |
| font-weight: 700; | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| background: rgba(251, 191, 36, 0.12); | |
| border: 1px solid rgba(251, 191, 36, 0.35); | |
| color: var(--neon-amber); | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .btn-clear-stats:hover { | |
| background: rgba(251, 191, 36, 0.25); | |
| box-shadow: 0 0 6px rgba(251, 191, 36, 0.3); | |
| } | |
| .phase-coords-mini { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .coord-pill { | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| font-weight: 600; | |
| } | |
| .pill-pitch { | |
| background: rgba(0, 242, 254, 0.1); | |
| border: 1px solid rgba(0, 242, 254, 0.25); | |
| color: var(--neon-cyan); | |
| } | |
| .pill-omega { | |
| background: rgba(244, 63, 94, 0.1); | |
| border: 1px solid rgba(244, 63, 94, 0.25); | |
| color: var(--neon-pink); | |
| } | |
| .phase-radar-wrap { | |
| flex: 1; | |
| position: relative; | |
| min-height: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| #phaseCanvas { | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| } | |
| .phase-radar-hud { | |
| position: absolute; | |
| bottom: 2px; | |
| left: 4px; | |
| right: 4px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-family: var(--font-mono); | |
| font-size: 0.60rem; | |
| pointer-events: none; | |
| background: rgba(7, 9, 16, 0.9); | |
| backdrop-filter: blur(6px); | |
| padding: 1px 5px; | |
| border-radius: 3px; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .hud-pill-status { | |
| font-weight: 700; | |
| color: var(--neon-green); | |
| } | |
| .hud-radius-text { | |
| color: var(--text-muted); | |
| } | |
| .hud-radius-text strong { | |
| color: var(--neon-cyan); | |
| } | |
| /* 4 Stat Badges (Neon-Accented Glass Tiles) */ | |
| .stats-hero-row { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 4px; | |
| margin-bottom: 4px; | |
| flex-shrink: 0; | |
| } | |
| .stat-badge { | |
| background: var(--bg-tile); | |
| border: 1px solid rgba(255, 255, 255, 0.07); | |
| border-radius: 4px; | |
| padding: 2px 4px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); | |
| transition: all 0.15s ease; | |
| } | |
| .stat-badge:hover { | |
| background: rgba(30, 40, 64, 0.85); | |
| transform: translateY(-1px); | |
| } | |
| .sb-score { border-top: 2px solid var(--neon-cyan); } | |
| .sb-best { border-top: 2px solid var(--neon-green); } | |
| .sb-equil { border-top: 2px solid var(--neon-purple); } | |
| .sb-ep { border-top: 2px solid var(--neon-amber); } | |
| .sb-k { | |
| font-family: var(--font-mono); | |
| font-size: 0.58rem; | |
| color: #94a3b8; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .sb-v { | |
| font-family: var(--font-mono); | |
| font-size: 1.05rem; | |
| font-weight: 800; | |
| color: var(--neon-cyan); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .chart-wrapper-dense { | |
| flex: 1; | |
| position: relative; | |
| min-height: 0; | |
| } | |
| #rewardChart { | |
| width: 100% ; | |
| height: 100% ; | |
| } | |
| .online-tag { | |
| color: var(--neon-green); | |
| font-weight: 700; | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| } | |