Spaces:
Sleeping
Sleeping
| /* ═══════════════════════════════════════════════════════════════ | |
| DAEDALUS — Dashboard Design System | |
| Single-viewport, no-scroll simulation dashboard | |
| ═══════════════════════════════════════════════════════════════ */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); | |
| :root { | |
| --bg: #06060f; | |
| --bg2: #0a0a16; | |
| --bg3: #0e0e1e; | |
| --card: rgba(255,255,255,0.025); | |
| --card2: rgba(255,255,255,0.04); | |
| --card3: rgba(255,255,255,0.06); | |
| --cyan: #00d4ff; | |
| --purple: #7c3aed; | |
| --emerald: #10b981; | |
| --amber: #f59e0b; | |
| --rose: #f43f5e; | |
| --blue: #3b82f6; | |
| --indigo: #6366f1; | |
| --t1: #e2e8f0; | |
| --t2: #94a3b8; | |
| --t3: #64748b; | |
| --t4: #475569; | |
| --border: rgba(255,255,255,0.06); | |
| --border2: rgba(255,255,255,0.1); | |
| --grad1: linear-gradient(135deg, var(--cyan), var(--purple)); | |
| --grad2: linear-gradient(135deg, var(--emerald), var(--cyan)); | |
| --font: 'Inter', system-ui, sans-serif; | |
| --mono: 'JetBrains Mono', monospace; | |
| --r: 8px; | |
| --r2: 12px; | |
| } | |
| *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } | |
| html, body { height:100%; overflow:hidden; font-family:var(--font); background:var(--bg); color:var(--t1); font-size:14px; -webkit-font-smoothing:antialiased; } | |
| ::-webkit-scrollbar { width:4px; height:4px; } | |
| ::-webkit-scrollbar-track { background:transparent; } | |
| ::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; } | |
| /* ── App Shell ─────────────────────────────────────── */ | |
| .app { display:grid; grid-template-rows:46px 1fr; height:100vh; width:100vw; } | |
| /* ── Header ────────────────────────────────────────── */ | |
| .header { | |
| display:flex; align-items:center; gap:12px; | |
| padding:0 16px; background:rgba(6,6,15,0.92); | |
| border-bottom:1px solid var(--border); | |
| backdrop-filter:blur(20px); z-index:100; | |
| } | |
| .logo { font-size:1rem; font-weight:800; letter-spacing:3px; background:var(--grad1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; flex-shrink:0; } | |
| .header-sep { width:1px; height:24px; background:var(--border); flex-shrink:0; } | |
| .tabs { display:flex; gap:4px; } | |
| .tab-btn { | |
| font-family:var(--font); font-size:0.72rem; font-weight:600; | |
| padding:5px 12px; border-radius:6px; border:1px solid transparent; | |
| background:transparent; color:var(--t3); cursor:pointer; | |
| transition:all 150ms; letter-spacing:0.5px; | |
| } | |
| .tab-btn:hover { color:var(--t2); background:var(--card); } | |
| .tab-btn.active { color:var(--cyan); background:rgba(0,212,255,0.08); border-color:rgba(0,212,255,0.15); } | |
| .header-spacer { flex:1; } | |
| .header-actions { display:flex; gap:6px; align-items:center; } | |
| .h-btn { | |
| font-family:var(--font); font-size:0.72rem; font-weight:600; | |
| padding:4px 14px; border-radius:6px; border:none; cursor:pointer; transition:all 150ms; | |
| } | |
| .h-btn-primary { background:var(--grad1); color:#fff; } | |
| .h-btn-primary:hover { box-shadow:0 0 12px rgba(0,212,255,0.3); } | |
| .h-btn-secondary { background:var(--card); color:var(--t2); border:1px solid var(--border); } | |
| .h-btn-secondary:hover { background:var(--card2); color:var(--t1); } | |
| .round-info { | |
| font-family:var(--mono); font-size:0.72rem; color:var(--cyan); | |
| background:rgba(0,212,255,0.06); padding:3px 10px; border-radius:6px; | |
| border:1px solid rgba(0,212,255,0.12); | |
| } | |
| .composite-info { | |
| font-family:var(--mono); font-size:0.72rem; font-weight:700; | |
| padding:3px 10px; border-radius:6px; | |
| } | |
| /* ── Tab Panels ────────────────────────────────────── */ | |
| .tab-panel { display:none; overflow:hidden; } | |
| .tab-panel.active { display:flex; flex-direction:column; } | |
| /* ── Simulation Dashboard ──────────────────────────── */ | |
| .sim-dashboard { | |
| display:grid; | |
| grid-template-columns:210px 1fr 270px; | |
| grid-template-rows:1fr 90px; | |
| gap:8px; padding:8px; | |
| height:100%; overflow:hidden; | |
| } | |
| /* ── Controls Sidebar ──────────────────────────────── */ | |
| .controls { | |
| grid-row:1/3; | |
| background:var(--card); border:1px solid var(--border); border-radius:var(--r2); | |
| padding:10px; display:flex; flex-direction:column; gap:8px; | |
| overflow-y:auto; overflow-x:hidden; | |
| } | |
| .ctrl-group { } | |
| .ctrl-title { | |
| font-size:0.62rem; font-weight:700; letter-spacing:1.5px; | |
| text-transform:uppercase; color:var(--t3); margin-bottom:6px; | |
| display:flex; align-items:center; gap:5px; | |
| } | |
| .ctrl-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } | |
| .ctrl-label { font-size:0.72rem; color:var(--t2); } | |
| .ctrl-select { | |
| background:var(--bg3); border:1px solid var(--border); border-radius:4px; | |
| color:var(--t1); font-family:var(--font); font-size:0.72rem; | |
| padding:3px 6px; cursor:pointer; outline:none; width:100%; | |
| } | |
| .ctrl-select:focus { border-color:var(--cyan); } | |
| .toggle-row { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:4px; } | |
| .toggle-chip { | |
| font-family:var(--font); font-size:0.6rem; font-weight:500; | |
| padding:2px 7px; border-radius:4px; | |
| border:1px solid var(--border); background:transparent; | |
| color:var(--t4); cursor:pointer; transition:all 100ms; | |
| } | |
| .toggle-chip.active { background:rgba(0,212,255,0.1); border-color:rgba(0,212,255,0.25); color:var(--cyan); } | |
| .slider-row { margin-bottom:6px; } | |
| .slider-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; } | |
| .slider-lbl { font-size:0.68rem; color:var(--t2); } | |
| .slider-val { font-family:var(--mono); font-size:0.65rem; color:var(--cyan); } | |
| input[type="range"] { | |
| -webkit-appearance:none; width:100%; height:3px; border-radius:2px; | |
| background:rgba(255,255,255,0.06); outline:none; cursor:pointer; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance:none; width:10px; height:10px; border-radius:50%; | |
| background:var(--cyan); cursor:pointer; box-shadow:0 0 4px rgba(0,212,255,0.4); | |
| } | |
| .ctrl-sep { height:1px; background:var(--border); margin:4px 0; } | |
| /* ── Auction Arena ─────────────────────────────────── */ | |
| .arena { | |
| background:var(--card); border:1px solid var(--border); border-radius:var(--r2); | |
| padding:10px; display:flex; flex-direction:column; overflow:hidden; | |
| } | |
| .arena-header { | |
| display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; | |
| flex-shrink:0; | |
| } | |
| .arena-title { font-size:0.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--t2); } | |
| .arena-grid { | |
| display:grid; grid-template-columns:repeat(4,1fr); gap:6px; | |
| flex:1; min-height:0; | |
| } | |
| .agent-cell { | |
| display:flex; flex-direction:column; align-items:center; | |
| padding:6px 4px; border-radius:var(--r); | |
| background:rgba(255,255,255,0.01); border:1px solid transparent; | |
| transition:all 200ms; gap:2px; min-height:0; | |
| } | |
| .agent-cell.winner { border-color:var(--cyan); background:rgba(0,212,255,0.04); box-shadow:0 0 10px rgba(0,212,255,0.1); } | |
| .agent-cell.out { opacity:0.25; } | |
| .agent-dot { | |
| width:28px; height:28px; border-radius:50%; | |
| display:flex; align-items:center; justify-content:center; | |
| font-size:0.6rem; font-weight:700; color:#fff; flex-shrink:0; | |
| } | |
| .agent-label { font-size:0.6rem; font-weight:600; color:var(--t2); } | |
| .agent-type { font-size:0.5rem; color:var(--t4); text-transform:uppercase; letter-spacing:0.5px; } | |
| .agent-status { font-size:0.5rem; font-weight:600; } | |
| .bid-wrap { | |
| width:100%; height:44px; background:rgba(255,255,255,0.015); | |
| border-radius:4px; position:relative; overflow:hidden; | |
| display:flex; align-items:flex-end; flex-shrink:0; | |
| } | |
| .bid-fill { | |
| width:100%; border-radius:4px 4px 0 0; | |
| transition:height 0.5s cubic-bezier(.4,0,.2,1); | |
| } | |
| .val-line { | |
| position:absolute; left:0; right:0; height:1px; | |
| border-top:1.5px dashed rgba(255,255,255,0.15); | |
| transition:bottom 0.5s cubic-bezier(.4,0,.2,1); | |
| } | |
| .bid-nums { | |
| display:flex; justify-content:space-between; width:100%; | |
| font-family:var(--mono); font-size:0.55rem; padding:0 2px; flex-shrink:0; | |
| } | |
| .bid-nums .bn-bid { font-weight:600; } | |
| .bid-nums .bn-val { color:var(--t4); } | |
| .paired-tag { font-size:0.45rem; color:var(--rose); } | |
| /* ── Metrics Panel ─────────────────────────────────── */ | |
| .metrics { | |
| display:flex; flex-direction:column; gap:8px; | |
| overflow:hidden; | |
| } | |
| .metrics-top { | |
| background:var(--card); border:1px solid var(--border); border-radius:var(--r2); | |
| padding:10px; flex-shrink:0; | |
| } | |
| .metrics-title { font-size:0.62rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--t3); margin-bottom:8px; } | |
| .m-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; } | |
| .m-box { | |
| text-align:center; padding:6px; | |
| border-radius:var(--r); background:rgba(255,255,255,0.015); border:1px solid var(--border); | |
| } | |
| .m-val { font-family:var(--mono); font-size:1.1rem; font-weight:700; line-height:1.2; } | |
| .m-lbl { font-size:0.55rem; color:var(--t4); text-transform:uppercase; letter-spacing:0.8px; margin-top:1px; } | |
| .m-bar { height:3px; border-radius:2px; background:rgba(255,255,255,0.04); margin-top:4px; overflow:hidden; } | |
| .m-bar-fill { height:100%; border-radius:2px; transition:width 0.5s ease; } | |
| .composite-box { | |
| text-align:center; padding:8px; | |
| border-radius:var(--r); border:1px solid rgba(0,212,255,0.1); | |
| background:rgba(0,212,255,0.03); | |
| } | |
| .comp-label { font-size:0.55rem; color:var(--t3); text-transform:uppercase; letter-spacing:1px; } | |
| .comp-value { font-family:var(--mono); font-size:1.4rem; font-weight:800; background:var(--grad1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } | |
| .charts-panel { | |
| background:var(--card); border:1px solid var(--border); border-radius:var(--r2); | |
| padding:10px; flex:1; min-height:0; | |
| display:flex; flex-direction:column; gap:6px; overflow:hidden; | |
| } | |
| .chart-box { flex:1; min-height:0; display:flex; flex-direction:column; } | |
| .chart-head { font-size:0.55rem; font-weight:600; color:var(--t4); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:2px; flex-shrink:0; } | |
| .chart-box canvas { width:100% ; flex:1; min-height:0; } | |
| /* ── Timeline / Logs ───────────────────────────────── */ | |
| .timeline-bar { | |
| grid-column:2/4; | |
| background:var(--card); border:1px solid var(--border); border-radius:var(--r2); | |
| padding:8px 10px; display:flex; flex-direction:column; overflow:hidden; | |
| } | |
| .timeline-head { | |
| display:flex; align-items:center; justify-content:space-between; | |
| margin-bottom:4px; flex-shrink:0; | |
| } | |
| .timeline-title { font-size:0.62rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--t3); } | |
| .timeline-scroll { | |
| display:flex; gap:6px; overflow-x:auto; flex:1; align-items:stretch; | |
| } | |
| .t-event { | |
| flex-shrink:0; min-width:130px; padding:6px 8px; | |
| border-radius:var(--r); border:1px solid var(--border); | |
| background:rgba(255,255,255,0.01); font-size:0.65rem; | |
| } | |
| .t-event .t-round { font-family:var(--mono); font-size:0.55rem; color:var(--cyan); margin-bottom:1px; } | |
| .t-event .t-action { color:var(--t1); font-weight:600; margin-bottom:1px; } | |
| .t-event .t-impact { font-family:var(--mono); font-size:0.55rem; } | |
| .t-impact.pos { color:var(--emerald); } | |
| .t-impact.neg { color:var(--rose); } | |
| /* ── Architecture Tab ──────────────────────────────── */ | |
| .doc-scroll { overflow-y:auto; padding:24px 40px; max-width:1100px; margin:0 auto; height:100%; } | |
| .doc-scroll h2 { font-size:1.4rem; font-weight:800; margin:0 0 8px; } | |
| .doc-scroll h3 { font-size:1rem; font-weight:700; margin:20px 0 6px; color:var(--cyan); } | |
| .doc-scroll p { font-size:0.85rem; color:var(--t2); line-height:1.7; margin-bottom:10px; max-width:800px; } | |
| .doc-scroll strong { color:var(--t1); } | |
| .doc-scroll code { | |
| font-family:var(--mono); font-size:0.78rem; background:var(--card2); | |
| padding:1px 5px; border-radius:3px; color:var(--cyan); | |
| } | |
| .doc-scroll pre { | |
| background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); | |
| padding:12px 16px; overflow-x:auto; margin:8px 0 16px; | |
| font-family:var(--mono); font-size:0.75rem; color:var(--t2); line-height:1.6; | |
| } | |
| /* Diagrams in docs */ | |
| .inv-row { display:grid; grid-template-columns:1fr 60px 1fr; gap:12px; align-items:center; margin:16px 0; } | |
| .inv-card { | |
| padding:16px; border-radius:var(--r2); border:1px solid var(--border); | |
| text-align:center; | |
| } | |
| .inv-card.old { background:rgba(239,68,68,0.04); border-color:rgba(239,68,68,0.12); } | |
| .inv-card.new { background:rgba(0,212,255,0.04); border-color:rgba(0,212,255,0.12); } | |
| .inv-card h4 { font-size:0.95rem; margin-bottom:4px; } | |
| .inv-card p { font-size:0.8rem; color:var(--t2); margin:0; } | |
| .inv-arrow { text-align:center; color:var(--t4); font-size:1.4rem; } | |
| .layer-box { border-radius:var(--r2); padding:12px; margin-bottom:6px; border:1px solid; } | |
| .layer-box.l1 { background:rgba(0,212,255,0.03); border-color:rgba(0,212,255,0.1); } | |
| .layer-box.l2 { background:rgba(16,185,129,0.03); border-color:rgba(16,185,129,0.1); margin:8px 0; } | |
| .layer-box.l3 { background:rgba(245,158,11,0.03); border-color:rgba(245,158,11,0.1); } | |
| .layer-tag { font-size:0.6rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; } | |
| .layer-desc { font-size:0.78rem; color:var(--t2); line-height:1.5; } | |
| .agent-chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; } | |
| .a-chip { | |
| padding:10px 14px; border-radius:var(--r); border:1px solid var(--border); | |
| background:var(--card); min-width:160px; flex:1; | |
| } | |
| .a-chip h5 { font-size:0.8rem; margin-bottom:3px; } | |
| .a-chip p { font-size:0.7rem; color:var(--t3); margin:0; line-height:1.4; } | |
| .reward-eq { | |
| font-family:var(--mono); font-size:1.2rem; font-weight:600; | |
| text-align:center; padding:16px; | |
| background:var(--card); border:1px solid var(--border); border-radius:var(--r2); | |
| margin:12px 0; letter-spacing:2px; | |
| } | |
| .term-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:12px 0; } | |
| .term-card { | |
| padding:10px; border-radius:var(--r); border:1px solid var(--border); | |
| background:var(--card); text-align:center; | |
| } | |
| .term-card .tc-sym { font-family:var(--mono); font-size:1.3rem; font-weight:700; } | |
| .term-card .tc-name { font-size:0.7rem; font-weight:600; margin-top:2px; } | |
| .term-card .tc-desc { font-size:0.6rem; color:var(--t3); margin-top:4px; line-height:1.4; } | |
| /* Curriculum stages in training tab */ | |
| .stage-row { display:flex; gap:8px; margin:12px 0; overflow-x:auto; } | |
| .stage-box { | |
| flex:1; min-width:160px; padding:12px; | |
| border-radius:var(--r2); border:1px solid var(--border); background:var(--card); | |
| } | |
| .stage-box .sb-num { font-family:var(--mono); font-size:0.6rem; font-weight:700; letter-spacing:1px; margin-bottom:4px; } | |
| .stage-box h5 { font-size:0.8rem; margin-bottom:4px; } | |
| .stage-box p { font-size:0.7rem; color:var(--t3); margin:0; line-height:1.4; } | |
| .arch-flow { | |
| display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr; gap:0; | |
| align-items:center; margin:16px 0; | |
| } | |
| .arch-node { | |
| padding:14px; border-radius:var(--r2); border:1px solid var(--border); | |
| background:var(--card); text-align:center; | |
| } | |
| .arch-node h5 { font-size:0.85rem; margin-bottom:4px; } | |
| .arch-node p { font-size:0.7rem; color:var(--t3); margin:0; line-height:1.4; } | |
| .arch-arr { text-align:center; color:var(--t4); font-size:1.2rem; } | |
| /* ── Color Utilities ───────────────────────────────── */ | |
| .c-cyan { color:var(--cyan); } | |
| .c-purple { color:var(--purple); } | |
| .c-emerald { color:var(--emerald); } | |
| .c-amber { color:var(--amber); } | |
| .c-rose { color:var(--rose); } | |
| .c-blue { color:var(--blue); } | |
| /* ── Responsive ────────────────────────────────────── */ | |
| @media (max-width:1100px) { | |
| .sim-dashboard { grid-template-columns:180px 1fr 240px; } | |
| } | |
| @media (max-width:900px) { | |
| .sim-dashboard { grid-template-columns:1fr; grid-template-rows:auto auto auto; } | |
| .controls { grid-row:auto; flex-direction:row; flex-wrap:wrap; } | |
| .timeline-bar { grid-column:auto; } | |
| .arena-grid { grid-template-columns:repeat(2,1fr); } | |
| } | |
| .active-ai { | |
| border-color: var(--cyan) ; | |
| color: var(--cyan) ; | |
| background: rgba(0, 212, 255, 0.05) ; | |
| box-shadow: 0 0 15px rgba(0, 212, 255, 0.1); | |
| } | |