Spaces:
Sleeping
Sleeping
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap'); | |
| /* ── Design tokens ──────────────────────────────────────────────────────────── */ | |
| :root { | |
| --bg: #07090f; | |
| --bg2: #0d1117; | |
| --bg3: #161b22; | |
| --border: #30363d; | |
| --text: #e6edf3; | |
| --text2: #8b949e; | |
| --green: #00ff88; | |
| --green-dim: #00cc6a; | |
| --red: #ff4040; | |
| --red-dim: #cc2020; | |
| --yellow: #ffd700; | |
| --blue: #58a6ff; | |
| --purple: #bc8cff; | |
| --mono: 'JetBrains Mono', 'Fira Code', monospace; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .app { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 4rem; } | |
| /* ── Hero ───────────────────────────────────────────────────────────────────── */ | |
| .hero { | |
| text-align: center; | |
| padding: 3.5rem 0 2rem; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 2.5rem; | |
| } | |
| .hero-positioning { | |
| display: inline-block; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--green); | |
| border: 1px solid var(--green-dim); | |
| background: #00ff8810; | |
| padding: 0.25rem 1rem; | |
| border-radius: 999px; | |
| margin-bottom: 1rem; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2rem, 5vw, 3.2rem); | |
| font-weight: 800; | |
| letter-spacing: -0.04em; | |
| margin-bottom: 1rem; | |
| } | |
| .hero-sub { | |
| color: var(--text2); | |
| font-size: 1.05rem; | |
| max-width: 580px; | |
| margin: 0 auto 1.5rem; | |
| } | |
| .hero-sub strong { color: var(--text); } | |
| .hero-badges { | |
| display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; | |
| margin-bottom: 2rem; | |
| } | |
| .badge { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 999px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .badge-green { background: #00ff8820; color: var(--green); border: 1px solid var(--green-dim); } | |
| .badge-yellow { background: #ffd70020; color: var(--yellow); border: 1px solid #aa9000; } | |
| .badge-blue { background: #58a6ff20; color: var(--blue); border: 1px solid #2070cc; } | |
| .badge-red { background: #ff404020; color: var(--red); border: 1px solid var(--red-dim); } | |
| /* ── Tabs ───────────────────────────────────────────────────────────────────── */ | |
| .tabs { display: flex; justify-content: center; gap: 0.5rem; } | |
| .tab, .tab-active { | |
| padding: 0.5rem 1.5rem; | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| font-family: inherit; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .tab { background: transparent; color: var(--text2); } | |
| .tab:hover { background: var(--bg3); color: var(--text); } | |
| .tab-active { background: var(--green); color: #000; border-color: var(--green); } | |
| /* ── Buttons ────────────────────────────────────────────────────────────────── */ | |
| .btn-launch { | |
| width: 100%; | |
| padding: 0.9rem; | |
| background: var(--green); | |
| color: #000; | |
| border: none; | |
| border-radius: 10px; | |
| font-family: inherit; | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| margin-top: 0.5rem; | |
| } | |
| .btn-launch:hover:not(:disabled) { background: #00ffaa; transform: translateY(-1px); } | |
| .btn-launch:disabled { opacity: 0.5; cursor: not-allowed; } | |
| .btn-primary, .btn-secondary { | |
| padding: 0.6rem 1.4rem; | |
| border-radius: 8px; | |
| font-family: inherit; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| border: 1px solid var(--border); | |
| } | |
| .btn-primary { background: var(--green); color: #000; border-color: var(--green); } | |
| .btn-primary:hover { background: #00ffaa; } | |
| .btn-secondary { background: var(--bg3); color: var(--text); } | |
| .btn-secondary:hover { background: var(--border); } | |
| /* ── Launch Modal ───────────────────────────────────────────────────────────── */ | |
| .modal-overlay { | |
| position: fixed; inset: 0; z-index: 100; | |
| background: rgba(0,0,0,0.75); | |
| backdrop-filter: blur(4px); | |
| display: flex; align-items: center; justify-content: center; | |
| padding: 1rem; | |
| animation: fade-in 0.15s ease-out; | |
| } | |
| @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } | |
| .modal { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| max-width: 540px; | |
| width: 100%; | |
| position: relative; | |
| animation: slide-up 0.2s ease-out; | |
| } | |
| @keyframes slide-up { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .modal-close { | |
| position: absolute; top: 1rem; right: 1rem; | |
| background: none; border: none; | |
| color: var(--text2); font-size: 1.1rem; cursor: pointer; | |
| transition: color 0.15s; | |
| } | |
| .modal-close:hover { color: var(--text); } | |
| .modal h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .modal-sub { | |
| font-size: 0.82rem; | |
| color: var(--text2); | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-option { | |
| display: flex; align-items: flex-start; gap: 1rem; | |
| width: 100%; | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| cursor: pointer; | |
| text-align: left; | |
| font-family: inherit; | |
| color: var(--text); | |
| transition: all 0.2s; | |
| } | |
| .modal-option:last-child { margin-bottom: 0; } | |
| .modal-option:hover { transform: translateY(-1px); } | |
| .modal-option--demo:hover { border-color: var(--green); box-shadow: 0 0 15px #00ff8820; } | |
| .modal-option--live:hover { border-color: var(--blue); box-shadow: 0 0 15px #58a6ff20; } | |
| .modal-option-icon { | |
| font-size: 1.5rem; | |
| min-width: 2rem; | |
| text-align: center; | |
| margin-top: 0.1rem; | |
| } | |
| .modal-option--demo .modal-option-icon { color: var(--green); } | |
| .modal-option--live .modal-option-icon { color: var(--blue); } | |
| .modal-option-body strong { | |
| display: block; | |
| font-size: 1rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .modal-option-body p { | |
| font-size: 0.8rem; | |
| color: var(--text2); | |
| line-height: 1.5; | |
| margin-top: 0.35rem; | |
| } | |
| .modal-time { | |
| display: inline-block; | |
| padding: 0.15rem 0.6rem; | |
| border-radius: 999px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| font-family: var(--mono); | |
| letter-spacing: 0.03em; | |
| } | |
| .modal-time--fast { background: #00ff8820; color: var(--green); border: 1px solid #00ff8840; } | |
| .modal-time--slow { background: #58a6ff20; color: var(--blue); border: 1px solid #58a6ff40; } | |
| /* Live status bar */ | |
| .live-status { | |
| display: flex; align-items: center; gap: 0.6rem; | |
| margin-top: 0.75rem; | |
| padding: 0.6rem 1rem; | |
| background: #58a6ff10; | |
| border: 1px solid #58a6ff30; | |
| border-radius: 8px; | |
| font-size: 0.82rem; | |
| color: var(--blue); | |
| font-family: var(--mono); | |
| } | |
| .live-dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--blue); | |
| flex-shrink: 0; | |
| animation: pulse-dot 1s ease-in-out infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0%,100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.4; transform: scale(0.7); } | |
| } | |
| /* ── Config Card ────────────────────────────────────────────────────────────── */ | |
| .config-card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .config-card h2 { font-size: 1.25rem; margin-bottom: 1.5rem; color: var(--text2); } | |
| .config-row { margin-bottom: 1.5rem; } | |
| .config-row > label { | |
| display: block; font-weight: 600; margin-bottom: 0.75rem; font-size: 0.9rem; | |
| color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; | |
| } | |
| .hint { font-weight: 400; font-size: 0.8rem; color: var(--text2); margin-left: 0.5rem; text-transform: none; letter-spacing: 0; } | |
| .type-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 0.75rem; | |
| } | |
| .type-card { | |
| display: flex; align-items: flex-start; gap: 0.75rem; | |
| padding: 1rem; | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-size: 0.85rem; | |
| } | |
| .type-card:hover { border-color: var(--green-dim); } | |
| .type-card--active { border-color: var(--green); background: #00ff8812; } | |
| .type-card span { font-size: 1.3rem; flex-shrink: 0; } | |
| .type-card strong { display: block; margin-bottom: 0.2rem; font-size: 0.85rem; } | |
| .type-card p { color: var(--text2); font-size: 0.78rem; line-height: 1.3; } | |
| .steps-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } | |
| .step-btn { | |
| padding: 0.4rem 1rem; | |
| border-radius: 6px; | |
| border: 1px solid var(--border); | |
| background: var(--bg3); | |
| color: var(--text2); | |
| font-family: var(--mono); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .step-btn:hover { border-color: var(--green-dim); color: var(--green); } | |
| .step-btn--active { border-color: var(--green); background: #00ff8820; color: var(--green); } | |
| /* ── Battlefield ────────────────────────────────────────────────────────────── */ | |
| .bf-section { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .bf-section h2 { color: var(--text2); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; } | |
| .battlefield { | |
| display: grid; | |
| grid-template-columns: 220px 1fr 220px; | |
| gap: 1.5rem; | |
| align-items: start; | |
| min-height: 340px; | |
| } | |
| /* ── Attacker side ──────────────────────────────────────────────────────────── */ | |
| .bf-attacker { display: flex; flex-direction: column; gap: 1rem; } | |
| .attacker-box { | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.25rem; | |
| text-align: center; | |
| transition: all 0.3s; | |
| } | |
| .attacker-box--active { | |
| border-color: var(--green); | |
| box-shadow: 0 0 20px #00ff8830; | |
| } | |
| .attacker-avatar { font-size: 2.5rem; margin-bottom: 0.5rem; } | |
| .attacker-title { font-weight: 700; font-size: 0.95rem; } | |
| .attacker-meta { font-size: 0.75rem; color: var(--text2); font-family: var(--mono); } | |
| .payload-box { | |
| background: #000; | |
| border: 1px solid var(--green-dim); | |
| border-radius: 8px; | |
| padding: 0.75rem; | |
| font-family: var(--mono); | |
| font-size: 0.75rem; | |
| } | |
| .payload-box-label { | |
| font-size: 0.65rem; | |
| color: var(--green-dim); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| margin-bottom: 0.5rem; | |
| } | |
| .typewriter-output { | |
| color: #b0e8ff; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| min-height: 60px; | |
| line-height: 1.5; | |
| } | |
| .cursor { color: var(--green); animation: blink 0.7s step-end infinite; } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| /* ── Reward Graph ───────────────────────────────────────────────────────────── */ | |
| .reward-graph-wrap { | |
| background: #000; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 0.75rem; | |
| } | |
| .reward-graph-label { | |
| font-size: 0.65rem; | |
| color: var(--text2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| margin-bottom: 0.5rem; | |
| } | |
| .reward-svg { display: block; width: 100%; } | |
| .reward-axis-labels { | |
| display: flex; justify-content: space-between; | |
| font-size: 0.6rem; color: var(--text2); font-family: var(--mono); | |
| margin-top: 0.25rem; | |
| } | |
| /* ── Middle section ─────────────────────────────────────────────────────────── */ | |
| .bf-middle { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| position: relative; | |
| } | |
| /* Beam track */ | |
| .beam-track { | |
| position: relative; | |
| height: 24px; | |
| overflow: hidden; | |
| } | |
| .beam { | |
| position: absolute; | |
| top: 50%; transform: translateY(-50%); | |
| left: 0; height: 2px; | |
| background: linear-gradient(to right, var(--green), transparent); | |
| transition: width 0.1s linear; | |
| } | |
| /* Phase widths */ | |
| .beam--phase-idle { width: 0; } | |
| .beam--phase-generating { width: 0; } | |
| .beam--phase-pg2 { width: 30%; animation: grow-beam 0.6s ease-out forwards; } | |
| .beam--phase-agent { width: 62%; background: linear-gradient(to right, var(--green), var(--green), transparent); transition: width 0.8s linear; } | |
| .beam--phase-fw { width: 95%; transition: width 0.8s linear; } | |
| .beam--phase-done { width: 95%; } | |
| @keyframes grow-beam { | |
| from { width: 0; } | |
| to { width: 30%; } | |
| } | |
| .beam-head { | |
| position: absolute; | |
| top: 50%; transform: translateY(-50%); | |
| color: var(--green); | |
| font-size: 1rem; | |
| transition: left 0.8s linear; | |
| } | |
| .beam-head--phase-generating { left: -2%; opacity: 0; } | |
| .beam-head--phase-pg2 { left: 27%; opacity: 1; } | |
| .beam-head--phase-agent { left: 59%; opacity: 1; } | |
| .beam-head--phase-fw { left: 92%; opacity: 1; } | |
| .beam-head--phase-done { left: 92%; opacity: 0.5; } | |
| /* ── Walls row ──────────────────────────────────────────────────────────────── */ | |
| .walls-row { | |
| display: flex; | |
| gap: 0.75rem; | |
| align-items: stretch; | |
| } | |
| /* ── Firewall wall ──────────────────────────────────────────────────────────── */ | |
| .fw-wall { | |
| flex: 1; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 0.5rem 0.6rem; | |
| border-radius: 10px; | |
| border: 2px solid var(--border); | |
| background: var(--bg3); | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| min-height: 140px; | |
| } | |
| .fw-wall-bricks { | |
| position: absolute; inset: 0; | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| gap: 2px; | |
| padding: 4px; | |
| opacity: 0.12; | |
| transition: opacity 0.3s; | |
| } | |
| .fw-brick { background: currentColor; border-radius: 2px; } | |
| .fw-wall--idle { color: var(--text2); } | |
| .fw-wall--scanning { border-color: var(--blue); box-shadow: 0 0 20px #58a6ff40; color: var(--blue); animation: wall-pulse 0.6s ease-in-out infinite; } | |
| .fw-wall--bypassed { border-color: var(--green); box-shadow: 0 0 25px #00ff8840; color: var(--green); } | |
| .fw-wall--bypassed .fw-wall-bricks { opacity: 0.06; } | |
| .fw-wall--blocked { border-color: var(--red); box-shadow: 0 0 25px #ff404040; color: var(--red); } | |
| /* SecAlign binding defense — gold when it holds */ | |
| .fw-wall--binding { border-color: #aa8800; } | |
| .fw-wall--binding.fw-wall--blocked { | |
| border-color: var(--yellow); | |
| box-shadow: 0 0 35px #ffd70055; | |
| color: var(--yellow); | |
| animation: binding-hold 1s ease-in-out infinite; | |
| } | |
| @keyframes binding-hold { | |
| 0%,100% { box-shadow: 0 0 25px #ffd70040; } | |
| 50% { box-shadow: 0 0 50px #ffd70090; } | |
| } | |
| .fw-binding-badge { | |
| font-size: 0.55rem; | |
| font-family: var(--mono); | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--yellow); | |
| border: 1px solid #aa8800; | |
| background: #ffd70012; | |
| padding: 0.1rem 0.4rem; | |
| border-radius: 4px; | |
| margin-top: 0.2rem; | |
| } | |
| .fw-held { | |
| background: #ffd70020 ; | |
| color: var(--yellow) ; | |
| border: 1px solid var(--yellow) ; | |
| font-size: 0.72rem; | |
| font-weight: 800; | |
| } | |
| @keyframes wall-pulse { | |
| 0%,100% { box-shadow: 0 0 15px #58a6ff30; } | |
| 50% { box-shadow: 0 0 30px #58a6ff60; } | |
| } | |
| .fw-scan-ray { | |
| position: absolute; inset: 0; | |
| background: linear-gradient(to bottom, transparent 0%, #58a6ff20 50%, transparent 100%); | |
| animation: scan-ray 0.8s linear infinite; | |
| } | |
| @keyframes scan-ray { | |
| from { transform: translateY(-100%); } | |
| to { transform: translateY(100%); } | |
| } | |
| .fw-wall-label { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; flex-direction: column; align-items: center; gap: 0.3rem; | |
| text-align: center; | |
| } | |
| .fw-icon { font-size: 1.6rem; } | |
| .fw-wall-label strong { font-size: 0.75rem; } | |
| .fw-subtitle { font-size: 0.65rem; color: var(--text2); font-family: var(--mono); } | |
| .fw-breach, .fw-block-flash { | |
| position: relative; z-index: 1; | |
| font-family: var(--mono); | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| padding: 0.2rem 0.5rem; | |
| border-radius: 4px; | |
| letter-spacing: 0.05em; | |
| animation: pop-in 0.3s ease-out; | |
| } | |
| .fw-breach { background: #00ff8820; color: var(--green); border: 1px solid var(--green); } | |
| .fw-block-flash { background: #ff404020; color: var(--red); border: 1px solid var(--red); } | |
| @keyframes pop-in { | |
| from { transform: scale(0.7); opacity: 0; } | |
| to { transform: scale(1); opacity: 1; } | |
| } | |
| /* ── Score chips ────────────────────────────────────────────────────────────── */ | |
| .score-row { display: flex; gap: 0.5rem; } | |
| .score-chip { | |
| flex: 1; text-align: center; | |
| padding: 0.3rem 0.4rem; | |
| border-radius: 6px; | |
| font-family: var(--mono); | |
| font-size: 0.65rem; | |
| animation: pop-in 0.3s ease-out; | |
| } | |
| .score-green { background: #00ff8812; color: var(--green); border: 1px solid #00ff8840; } | |
| .score-red { background: #ff404012; color: var(--red); border: 1px solid #ff404040; } | |
| /* ── Agent side ─────────────────────────────────────────────────────────────── */ | |
| .bf-agent { display: flex; flex-direction: column; gap: 1rem; } | |
| .agent-box { | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.25rem; | |
| text-align: center; | |
| transition: all 0.4s; | |
| } | |
| .agent-box--compromised { | |
| border-color: var(--red); | |
| box-shadow: 0 0 25px #ff404040; | |
| animation: shake 0.4s ease-in-out; | |
| } | |
| @keyframes shake { | |
| 0%,100% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 75% { transform: translateX(5px); } | |
| } | |
| .agent-avatar { font-size: 2.5rem; margin-bottom: 0.5rem; } | |
| .agent-title { font-weight: 700; font-size: 0.95rem; } | |
| .agent-meta { font-size: 0.75rem; color: var(--text2); font-family: var(--mono); } | |
| .agent-output { | |
| border-radius: 8px; | |
| padding: 0.75rem; | |
| font-size: 0.78rem; | |
| line-height: 1.5; | |
| animation: pop-in 0.35s ease-out; | |
| border: 1px solid; | |
| } | |
| .agent-output--safe { | |
| background: #00ff8808; | |
| border-color: #00ff8840; | |
| color: var(--text2); | |
| } | |
| .agent-output--malicious { | |
| background: #ff400008; | |
| border-color: #ff404040; | |
| color: var(--red); | |
| } | |
| .agent-output-label { | |
| font-weight: 700; | |
| font-size: 0.72rem; | |
| margin-bottom: 0.5rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .agent-output-text { | |
| font-family: var(--mono); | |
| font-size: 0.72rem; | |
| color: var(--text2); | |
| white-space: pre-wrap; | |
| } | |
| .agent-blocked-reason { | |
| margin-top: 0.5rem; | |
| font-size: 0.68rem; | |
| color: var(--red); | |
| font-family: var(--mono); | |
| } | |
| /* ── Result summary ─────────────────────────────────────────────────────────── */ | |
| .result-summary { | |
| border-radius: 14px; | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| margin-bottom: 2rem; | |
| animation: pop-in 0.4s ease-out; | |
| } | |
| .result-summary--partial .result-summary-header { background: #1a2a1a; border-bottom: 1px solid var(--green-dim); } | |
| .result-summary--full .result-summary-header { background: #2a1a1a; border-bottom: 1px solid var(--red); } | |
| .result-summary-header { | |
| padding: 1rem 1.5rem; | |
| font-weight: 700; | |
| font-size: 1.1rem; | |
| letter-spacing: -0.01em; | |
| } | |
| .result-summary-body { padding: 1.5rem; background: var(--bg2); } | |
| .verdict-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } | |
| .verdict-chip { | |
| padding: 0.35rem 0.85rem; | |
| border-radius: 999px; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| border: 1px solid; | |
| } | |
| .chip-green { background: #00ff8810; color: var(--green); border-color: var(--green-dim); } | |
| .chip-red { background: #ff404010; color: var(--red); border-color: var(--red-dim); } | |
| .result-insight { | |
| font-size: 0.88rem; | |
| color: var(--text2); | |
| line-height: 1.6; | |
| margin-bottom: 1.25rem; | |
| padding: 1rem; | |
| background: var(--bg3); | |
| border-radius: 8px; | |
| border-left: 3px solid var(--green-dim); | |
| } | |
| .result-insight strong { color: var(--text); } | |
| .result-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } | |
| /* ── Dashboard ──────────────────────────────────────────────────────────────── */ | |
| .dashboard { padding-bottom: 2rem; } | |
| .dash-header { margin-bottom: 1.75rem; } | |
| .dashboard h2 { font-size: 1.4rem; margin-bottom: 0.5rem; } | |
| .dashboard-intro { color: var(--text2); font-size: 0.88rem; } | |
| /* Stats cards */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.1rem 1rem; | |
| text-align: center; | |
| } | |
| .stat-card--green { border-top: 3px solid var(--green-dim); } | |
| .stat-card--yellow { border-top: 3px solid #aa8800; } | |
| .stat-card--blue { border-top: 3px solid #2070cc; } | |
| .stat-value { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| font-family: var(--mono); | |
| margin-bottom: 0.2rem; | |
| letter-spacing: -0.02em; | |
| } | |
| .stat-card--green .stat-value { color: var(--green); } | |
| .stat-card--yellow .stat-value { color: var(--yellow); } | |
| .stat-card--blue .stat-value { color: var(--blue); } | |
| .stat-label { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.2rem; } | |
| .stat-sub { font-size: 0.7rem; color: var(--text2); line-height: 1.3; } | |
| /* Results table */ | |
| .results-table-wrap { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .results-table-wrap h3 { font-size: 1rem; margin-bottom: 0.4rem; } | |
| .table-note { font-size: 0.78rem; color: var(--text2); margin-bottom: 1rem; line-height: 1.5; } | |
| .results-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.85rem; | |
| } | |
| .results-table th, .results-table td { | |
| padding: 0.6rem 1rem; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .results-table th { | |
| color: var(--text2); | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| font-weight: 600; | |
| } | |
| .results-table tr:last-child td { border-bottom: none; } | |
| .results-table td { font-family: var(--mono); } | |
| .results-table td:first-child { font-family: inherit; color: var(--text2); } | |
| .th-rl, .td-rl { color: var(--green) ; } | |
| .td-rl { background: #00ff8806; } | |
| .table-footnote { | |
| margin-top: 1rem; | |
| font-size: 0.75rem; | |
| color: var(--text2); | |
| line-height: 1.5; | |
| border-top: 1px solid var(--border); | |
| padding-top: 0.75rem; | |
| } | |
| /* Plots section */ | |
| .plots-heading { | |
| font-size: 1rem; | |
| color: var(--text2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| margin-bottom: 1rem; | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.25rem; | |
| } | |
| .plot-card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .plot-card-title { | |
| padding: 0.75rem 1rem 0; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--text2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| } | |
| .plot-img-wrap { position: relative; background: var(--bg3); min-height: 160px; } | |
| .plot-img { | |
| width: 100%; | |
| display: block; | |
| } | |
| .plot-img--hidden { display: none; } | |
| .plot-loading { | |
| position: absolute; inset: 0; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 0.8rem; color: var(--text2); | |
| } | |
| .plot-error { color: #ff8040; } | |
| .plot-caption { | |
| padding: 0.6rem 1rem 0.9rem; | |
| font-size: 0.78rem; | |
| color: var(--text2); | |
| line-height: 1.5; | |
| } | |
| /* ── Live Reward Panel ──────────────────────────────────────────────────────── */ | |
| .reward-panel { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| padding: 1.25rem 1.5rem 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .reward-panel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| margin-bottom: 0.75rem; | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--text2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| } | |
| .reward-panel-chips { display: flex; gap: 0.5rem; } | |
| .rp-chip { | |
| padding: 0.2rem 0.65rem; | |
| border-radius: 999px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| font-family: var(--mono); | |
| } | |
| .rp-chip--dim { background: #ffffff10; color: var(--text2); border: 1px solid var(--border); } | |
| .rp-chip--green { background: #00ff8820; color: var(--green); border: 1px solid #00ff8840; } | |
| .rp-chip--blue { background: #58a6ff20; color: var(--blue); border: 1px solid #58a6ff40; } | |
| /* Taller graph when standalone */ | |
| .reward-panel .reward-graph-wrap { | |
| background: transparent; | |
| border: none; | |
| padding: 0; | |
| } | |
| .reward-panel .reward-svg { | |
| height: 100px; | |
| } | |
| /* ── Fast mode badge ────────────────────────────────────────────────────────── */ | |
| .fast-badge { | |
| margin-left: 0.75rem; | |
| padding: 0.15rem 0.55rem; | |
| background: #ffd70020; | |
| color: var(--yellow); | |
| border: 1px solid #aa8800; | |
| border-radius: 999px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| font-family: var(--mono); | |
| vertical-align: middle; | |
| text-transform: none; | |
| letter-spacing: 0; | |
| } | |
| /* ── Instant demo modal option ──────────────────────────────────────────────── */ | |
| .modal-option--fast { } | |
| .modal-option--fast:hover { border-color: var(--yellow); box-shadow: 0 0 15px #ffd70020; } | |
| .modal-option--fast .modal-option-icon { color: var(--yellow); } | |
| .modal-time--instant { background: #ffd70020; color: var(--yellow); border: 1px solid #aa8800; } | |
| /* ── Inline Results ──────────────────────────────────────────────────────────── */ | |
| .inline-results { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| margin-bottom: 2rem; | |
| animation: pop-in 0.4s ease-out; | |
| } | |
| .inline-results-header { | |
| padding: 0.85rem 1.5rem; | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| color: var(--text2); | |
| border-bottom: 1px solid var(--border); | |
| background: var(--bg3); | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| } | |
| .inline-results-body { padding: 1.5rem; } | |
| .inline-stats { | |
| display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; | |
| } | |
| .inline-stat { | |
| display: flex; flex-direction: column; align-items: center; | |
| padding: 0.6rem 1rem; | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| min-width: 90px; | |
| text-align: center; | |
| } | |
| .inline-stat--green { border-top: 2px solid var(--green-dim); } | |
| .inline-stat--yellow { border-top: 2px solid #aa8800; } | |
| .inline-stat--blue { border-top: 2px solid #2070cc; } | |
| .inline-stat-val { | |
| font-family: var(--mono); font-size: 1.1rem; font-weight: 800; | |
| line-height: 1; | |
| } | |
| .inline-stat--green .inline-stat-val { color: var(--green); } | |
| .inline-stat--yellow .inline-stat-val { color: var(--yellow); } | |
| .inline-stat--blue .inline-stat-val { color: var(--blue); } | |
| .inline-stat-lbl { font-size: 0.68rem; color: var(--text2); margin-top: 0.3rem; } | |
| .inline-plots { | |
| display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; | |
| } | |
| .inline-plot { } | |
| .inline-plot-title { | |
| font-size: 0.72rem; color: var(--text2); margin-bottom: 0.4rem; | |
| text-transform: uppercase; letter-spacing: 0.06em; | |
| } | |
| .inline-note { | |
| font-size: 0.8rem; color: var(--text2); line-height: 1.6; | |
| } | |
| .inline-more-btn { | |
| background: none; border: none; color: var(--green); font-size: 0.8rem; | |
| cursor: pointer; margin-left: 0.5rem; text-decoration: underline; | |
| font-family: inherit; padding: 0; | |
| } | |
| .inline-more-btn:hover { color: #00ffaa; } | |
| @media (max-width: 600px) { | |
| .inline-plots { grid-template-columns: 1fr; } | |
| } | |
| /* ── Footer ─────────────────────────────────────────────────────────────────── */ | |
| .footer { | |
| text-align: center; | |
| padding: 2.5rem 0 1rem; | |
| border-top: 1px solid var(--border); | |
| color: var(--text2); | |
| font-size: 0.85rem; | |
| } | |
| .footer a { | |
| color: var(--text2); text-decoration: none; margin: 0 0.5rem; | |
| transition: color 0.2s; | |
| } | |
| .footer a:hover { color: var(--green); } | |
| .footer-note { margin-top: 0.5rem; font-size: 0.75rem; color: #555; } | |
| /* ── Responsive ─────────────────────────────────────────────────────────────── */ | |
| @media (max-width: 768px) { | |
| .battlefield { | |
| grid-template-columns: 1fr; | |
| } | |
| .walls-row { | |
| flex-direction: row; | |
| } | |
| .fw-wall { min-height: 100px; } | |
| .beam-track { display: none; } | |
| .hero h1 { font-size: 1.8rem; } | |
| .type-grid { grid-template-columns: 1fr 1fr; } | |
| } | |
| @media (max-width: 480px) { | |
| .type-grid { grid-template-columns: 1fr; } | |
| .walls-row { flex-direction: column; } | |
| } | |