Spaces:
Sleeping
Sleeping
| """Custom MO§ES dark/gold CSS — pushes past default Gradio (Off Brand badge).""" | |
| CSS = """ | |
| :root { | |
| --moses-gold: #C4923A; | |
| --moses-bg: #15130F; | |
| --moses-card: #1E1B15; | |
| --moses-line: #3A3324; | |
| --moses-ink: #E8E0CF; | |
| --moses-dim: #8a7f68; | |
| --species-throughput: #6b7280; | |
| --species-converter: #3b82f6; | |
| --species-architect: #8b5cf6; | |
| --species-cascade: #C4923A; | |
| } | |
| .gradio-container, .gradio-container * { font-family: ui-monospace, "SF Mono", Menlo, monospace !important; } | |
| .gradio-container { background: var(--moses-bg) !important; max-width: 1100px !important; margin: 0 auto !important; overflow-x: hidden !important; } | |
| .dark .gradio-container, body { background: var(--moses-bg) !important; } | |
| #moses-hero { | |
| border-bottom: 1px solid var(--moses-gold); | |
| padding: 10px 0 4px; | |
| margin-bottom: 0; | |
| position: relative; | |
| } | |
| /* kill the dead space: Blocks root column adds a 16px gap between hero and tabs */ | |
| .column:has(> #moses-hero) { gap: 4px !important; } | |
| .tab-wrapper { margin: 0 0 2px 0 !important; padding: 0 !important; } | |
| #moses-hero h1 { | |
| color: var(--moses-gold) !important; | |
| font-size: 66px !important; | |
| letter-spacing: 0.14em !important; | |
| font-weight: 800 !important; | |
| margin: 0 !important; | |
| } | |
| #moses-hero p { color: var(--moses-dim) !important; font-size: 12px !important; margin: 6px 0 0 !important; } | |
| /* stat strip */ | |
| #moses-stat-strip { | |
| display: flex; gap: 24px; margin-top: 10px; | |
| font-size: 11px; color: var(--moses-dim); letter-spacing: 0.04em; | |
| } | |
| #moses-stat-strip span { color: var(--moses-ink); font-weight: 700; } | |
| /* Tab padding layout stabilization overrides */ | |
| .tabs { background: transparent !important; border: none !important; } | |
| .tabitem { | |
| background: transparent !important; | |
| border: none !important; | |
| padding: 2px 0px !important; | |
| } | |
| .tabitem > div { gap: 10px !important; } | |
| button.selected { color: var(--moses-gold) !important; border-bottom: 2px solid var(--moses-gold) !important; } | |
| /* centered nav links (Gradio 6.x uses .tab-container, not .tab-nav) */ | |
| .tab-nav, .tab-container { justify-content: center !important; gap: 6px; } | |
| .tab-nav button, .tab-container > button { color: var(--moses-dim) !important; font-size: 14px !important; | |
| letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700 !important; padding: 8px 16px !important; } | |
| .dataframe, table { background: var(--moses-card) !important; color: var(--moses-ink) !important; | |
| border: 1px solid var(--moses-line) !important; font-size: 12px !important; width: 100% !important; } | |
| .dataframe thead th, table thead th { background: var(--moses-bg) !important; color: var(--moses-gold) !important; | |
| border-bottom: 1px solid var(--moses-gold) !important; font-size: 10px !important; | |
| letter-spacing: 0.06em !important; text-transform: uppercase; padding: 8px 6px !important; } | |
| .dataframe tbody td, table tbody td { border-bottom: 1px solid var(--moses-line) !important; | |
| color: var(--moses-dim) !important; padding: 8px 6px !important; } | |
| .dataframe tbody tr:first-child td, table tbody tr:first-child td { color: var(--moses-ink) !important; | |
| background: rgba(196,146,58,0.08) !important; } | |
| input, textarea, .gr-input, .gr-text-input { | |
| background: var(--moses-bg) !important; color: var(--moses-ink) !important; | |
| border: 1px solid var(--moses-line) !important; font-family: ui-monospace, monospace !important; } | |
| input:focus, textarea:focus { border-color: var(--moses-gold) !important; box-shadow: 0 0 0 1px var(--moses-gold) !important; } | |
| label span { color: var(--moses-dim) !important; font-size: 12px !important; letter-spacing: 0.04em; } | |
| button.primary, .gr-button-primary, #compute-btn { | |
| background: var(--moses-gold) !important; color: var(--moses-bg) !important; | |
| border: none !important; font-weight: 700 !important; letter-spacing: 0.06em !important; } | |
| button.primary:hover, #compute-btn:hover { background: #d8a449 !important; } | |
| #moses-profile { background: var(--moses-card) !important; border: 1px solid var(--moses-line) !important; | |
| border-radius: 10px !important; padding: 4px 18px !important; } | |
| #moses-profile h2 { color: var(--moses-gold) !important; letter-spacing: 0.08em; } | |
| #moses-profile blockquote { border-left: 3px solid var(--moses-gold) !important; color: var(--moses-ink) !important; | |
| background: rgba(196,146,58,0.06); padding: 10px 14px; margin: 10px 0; } | |
| #moses-profile table { font-size: 12px !important; } | |
| #moses-profile th, #moses-profile td { color: var(--moses-ink) !important; } | |
| .prose, .md, #moses-foot { color: var(--moses-dim) !important; font-size: 11px !important; } | |
| #moses-foot { border-top: 1px solid var(--moses-line); padding-top: 10px; margin-top: 16px; line-height: 1.7; } | |
| /* Structural Board Alignment Layout */ | |
| .moses-board { font-family: ui-monospace, monospace; margin-top: 6px; width: 100% !important; box-sizing: border-box !important; | |
| border: 1px solid var(--moses-line); border-radius: 8px; overflow: hidden; } | |
| .mb-head, .mb-row { display: grid; grid-template-columns: 26px 1.5fr 0.5fr 0.55fr 0.5fr 0.55fr 0.5fr 0.6fr 0.85fr; | |
| align-items: center; gap: 8px; padding: 7px 12px; width: 100%; box-sizing: border-box; } | |
| .mb-head > span, .mb-row > span { min-width: 0; } /* let cells shrink so nothing overflows */ | |
| .mb-row b { font-size: 12px !important; } | |
| .mb-op b { white-space: nowrap; } | |
| .mb-ledger { color: #7a7060; font-size: 10px; font-family: ui-monospace, monospace; text-align: right; | |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 1px solid #2c2718; padding-left: 8px; } | |
| .mb-head .mb-ledger { color: #C4923A; } | |
| /* sharp tabular separators between numeric columns */ | |
| .mb-head .mb-num, .mb-row .mb-num, .mb-head .mb-y, .mb-row .mb-y { | |
| border-left: 1px solid #2c2718; padding-left: 8px; } | |
| .mb-head { color: #C4923A; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; | |
| border-bottom: 1px solid #C4923A; } | |
| .mb-row { border-bottom: 1px solid #3A3324; color: #8a7f68; font-size: 12px; } | |
| .mb-row.you { background: rgba(196,146,58,0.10); color: #E8E0CF; } | |
| .mb-row.you b { color: #C4923A; } | |
| .mb-row.rank1 { | |
| border-left: 3px solid var(--moses-gold); | |
| background: rgba(196,146,58,0.12) !important; | |
| color: var(--moses-ink) !important; | |
| } | |
| .mb-row.rank1 .mb-yval { color: var(--moses-gold); font-size: 14px; } | |
| /* Species Classification Left Highlights */ | |
| .mb-row.species-throughput { border-left: 3px solid var(--species-throughput); } | |
| .mb-row.species-converter { border-left: 3px solid var(--species-converter); } | |
| .mb-row.species-architect { border-left: 3px solid var(--species-architect); } | |
| .mb-row.species-cascade { border-left: 3px solid var(--species-cascade); } | |
| .mb-rank-1 { color: var(--moses-gold); font-weight: 700; } | |
| .mb-rank-2 { color: #a0a0a0; } | |
| .mb-rank-3 { color: #8a6a3a; } | |
| .mb-row b { color: #E8E0CF; font-family: var(--font-sans, sans-serif); font-size: 13px; } | |
| .mb-raw { color: #7a7060; font-size: 9.5px; } | |
| .mb-num { text-align: right; } | |
| .mb-y { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 6px; | |
| min-height: 20px; overflow: hidden; border-radius: 3px; } | |
| .mb-bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 14px; | |
| background: linear-gradient(90deg, rgba(196,146,58,0.28), rgba(196,146,58,0.72)); border-radius: 2px; } | |
| .mb-row.you .mb-bar { background: linear-gradient(90deg, rgba(196,146,58,0.4), #C4923A); } | |
| .mb-yval { position: relative; z-index: 2; color: #E8E0CF; font-weight: 700; font-size: 12px; padding-right: 4px; } | |
| /* warmer, more inviting rows: subtle gold wash on hover, breathing room for the ledger line */ | |
| .mb-row { transition: background 0.12s ease; } | |
| .mb-row:hover { background: rgba(196,146,58,0.07); } | |
| .mb-raw { display: inline-block; margin-top: 3px; letter-spacing: 0.02em; opacity: 0.82; } | |
| /* warm focus ring on the operator pickers */ | |
| #op-pick input:focus, #cmp-pick input:focus { box-shadow: 0 0 0 1px var(--moses-gold) !important; } | |
| /* ---------- VS / compare table ---------- */ | |
| .cmp-table { width: 100%; border-collapse: collapse; background: var(--moses-card); | |
| border: 1px solid var(--moses-line); border-radius: 6px; overflow: hidden; margin-top: 6px; } | |
| .cmp-table th, .cmp-table td { padding: 10px 12px; text-align: right; font-size: 13px; | |
| border-bottom: 1px solid var(--moses-line); } | |
| .cmp-table thead th { color: var(--moses-gold); text-transform: uppercase; font-size: 11px; | |
| letter-spacing: 0.05em; border-bottom: 1px solid var(--moses-gold); } | |
| .cmp-table th.cmp-op { color: var(--moses-ink); font-weight: 700; } | |
| .cmp-rowlabel { text-align: left !important; color: var(--moses-dim); text-transform: uppercase; | |
| font-size: 10px; letter-spacing: 0.05em; } | |
| .cmp-win { color: var(--moses-bg) !important; background: var(--moses-gold) !important; | |
| font-weight: 700; } | |
| .cmp-empty { padding: 26px; text-align: center; color: var(--moses-dim); | |
| border: 1px dashed var(--moses-line); border-radius: 6px; background: rgba(196,146,58,0.03); } | |
| .cmp-note { color: var(--moses-dim); font-size: 10px; margin-top: 8px; } | |
| @media (max-width: 700px) { .cmp-table th, .cmp-table td { padding: 7px 6px; font-size: 11px; } } | |
| /* ---------- Home / landing ---------- */ | |
| .hm-lead { color: var(--moses-dim); font-size: 11px; letter-spacing: 0.04em; | |
| text-transform: uppercase; margin: 2px 2px 6px; } | |
| .pm-wrap { overflow: hidden; border: 1px solid var(--moses-line); border-radius: 6px; | |
| background: var(--moses-card); padding: 8px 0; margin-bottom: 14px; } | |
| .pm-track { display: flex; gap: 10px; width: max-content; animation: pm-scroll 70s linear infinite; } | |
| .pm-wrap:hover .pm-track { animation-play-state: paused; } | |
| @keyframes pm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } | |
| .pm-chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; white-space: nowrap; | |
| border-left: 3px solid var(--moses-line); background: rgba(196,146,58,0.04); border-radius: 4px; } | |
| .pm-chip.species-throughput { border-left-color: var(--species-throughput); } | |
| .pm-chip.species-converter { border-left-color: var(--species-converter); } | |
| .pm-chip.species-architect { border-left-color: var(--species-architect); } | |
| .pm-chip.species-cascade { border-left-color: var(--species-cascade); } | |
| .pm-rank { color: var(--moses-dim); font-size: 10px; font-weight: 700; } | |
| .pm-name { color: var(--moses-ink); font-size: 12px; font-weight: 700; } | |
| .pm-stat { color: var(--moses-gold); font-size: 11px; font-weight: 700; } | |
| .pm-lev { color: var(--moses-dim); font-size: 10px; } | |
| .hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } | |
| .hm-box { cursor: pointer; border: 1px solid var(--moses-line); border-radius: 6px; background: var(--moses-card); | |
| padding: 16px 18px; transition: border-color 0.12s ease, background 0.12s ease; } | |
| .hm-box:hover { border-color: var(--moses-gold); background: rgba(196,146,58,0.06); } | |
| .hm-title { color: var(--moses-gold); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; } | |
| .hm-sub { color: var(--moses-ink); font-size: 12px; font-weight: 600; margin-top: 3px; } | |
| .hm-desc { color: var(--moses-dim); font-size: 11px; margin-top: 6px; line-height: 1.45; } | |
| .hm-cta { color: var(--moses-gold); font-size: 10px; text-transform: uppercase; | |
| letter-spacing: 0.06em; margin-top: 12px; } | |
| @media (max-width: 700px) { .hm-grid { grid-template-columns: 1fr; } } | |
| /* metric standard (feature row) */ | |
| .mf-head { text-align: center; color: var(--moses-ink); font-size: 26px; font-weight: 800; | |
| letter-spacing: 0.01em; margin: 0 0 14px; line-height: 1.2; } | |
| .mf-head span { color: var(--moses-gold); text-shadow: 0 0 18px rgba(196,146,58,0.35); } | |
| @media (max-width: 700px) { .mf-head { font-size: 20px; } } | |
| .mf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; } | |
| /* live-status box (sits between SNR and 10x) */ | |
| .mf-status { text-align: left; } | |
| .ms-title { color: #4ade80; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; | |
| text-transform: uppercase; margin-bottom: 8px; } | |
| .ms-dot { color: #22c55e; } | |
| .ms-grid { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 11px; align-items: baseline; } | |
| .ms-grid > span:nth-child(odd) { color: var(--moses-dim); text-transform: uppercase; letter-spacing: 0.03em; } | |
| .ms-grid > span:nth-child(even) { text-align: right; font-weight: 800; } | |
| .ms-tot { color: var(--moses-ink); } | |
| .mf-box { border: 1px solid var(--moses-gold); border-radius: 6px; background: rgba(196,146,58,0.06); | |
| padding: 12px; text-align: center; } | |
| .mf-sym { color: var(--moses-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } | |
| .mf-big { color: var(--moses-gold); font-size: 32px; font-weight: 800; line-height: 1.05; margin: 4px 0 2px; | |
| text-shadow: 0 0 16px rgba(196,146,58,0.3); } | |
| .mf-form { color: var(--moses-dim); font-size: 9.5px; font-family: ui-monospace, monospace; } | |
| .mf-tag { color: var(--moses-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; } | |
| @media (max-width: 700px) { .mf-grid { grid-template-columns: 1fr 1fr; } } | |
| /* mini samples inside section boxes */ | |
| .hm-sample { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--moses-line); | |
| border-radius: 4px; background: var(--moses-bg); font-size: 11px; } | |
| .sm-row { display: flex; gap: 8px; align-items: center; padding: 2px 0; } | |
| .sm-rk { color: var(--moses-dim); font-size: 10px; width: 22px; } | |
| .sm-nm { color: var(--moses-ink); font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .sm-y { color: var(--moses-gold); font-weight: 700; } | |
| .sm-y2 { color: var(--moses-dim); font-weight: 700; } | |
| .sm-card .sm-nm { font-size: 12px; } | |
| .sm-kv { color: var(--moses-dim); font-size: 10px; margin-top: 3px; } | |
| .sm-vs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } | |
| .sm-vsx { color: var(--moses-gold); font-size: 10px; text-transform: uppercase; } | |
| .sm-create { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } | |
| .sm-create code { color: var(--moses-dim); font-size: 10px; } | |
| .sm-arrow { color: var(--moses-gold); } | |
| /* home footer: demo video + steps + links */ | |
| .hm-foot { display: grid; grid-template-columns: 1fr 1.4fr 0.8fr; gap: 16px; margin-top: 14px; | |
| padding-top: 14px; border-top: 1px solid var(--moses-line); } | |
| .hf-h { color: var(--moses-gold); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } | |
| .hf-btn { display: inline-block; background: var(--moses-gold); color: var(--moses-bg) !important; | |
| padding: 8px 14px; border-radius: 5px; font-weight: 700; font-size: 12px; text-decoration: none; } | |
| .hf-steps { margin: 0; padding-left: 18px; color: var(--moses-dim); font-size: 11px; line-height: 1.7; } | |
| .hf-steps code { color: var(--moses-ink); font-size: 10px; } | |
| .hf-steps b { color: var(--moses-gold); } | |
| .hf-link { display: block; color: var(--moses-gold) !important; font-size: 12px; margin-bottom: 6px; text-decoration: none; } | |
| .hf-link:hover { text-decoration: underline; } | |
| @media (max-width: 700px) { .hm-foot { grid-template-columns: 1fr; } } | |
| /* ---------- mini page thumbnails (real HTML scaled down) ---------- */ | |
| .mini { border-radius: 8px; overflow: hidden; background: var(--moses-card); | |
| border: 1px solid var(--moses-line); box-shadow: 0 6px 20px rgba(0,0,0,0.5); margin-bottom: 12px; } | |
| .mini-chrome { display: flex; align-items: center; gap: 5px; padding: 6px 9px; | |
| border-bottom: 1px solid var(--moses-line); background: linear-gradient(90deg,#241f17,#15130f); } | |
| .mini-chrome span { width: 7px; height: 7px; border-radius: 50%; background: #3A3324; flex: none; } | |
| .mini-cap { margin-left: auto; font-size: 8.5px; text-transform: uppercase; | |
| letter-spacing: 0.08em; color: var(--moses-dim); } | |
| .mini-view { position: relative; height: 190px; overflow: hidden; background: var(--moses-bg); } | |
| .mini-scale { position: absolute; top: 0; left: 0; width: 323%; | |
| transform: scale(0.31); transform-origin: top left; pointer-events: none; } | |
| /* per-section accent on the chrome dot + frame + glow */ | |
| .mini-gold { border-color: rgba(196,146,58,0.55); } .mini-gold .mini-chrome span:first-child { background: #C4923A; } | |
| .mini-purple { border-color: rgba(139,92,246,0.55); } .mini-purple .mini-chrome span:first-child { background: #8b5cf6; } | |
| .mini-blue { border-color: rgba(59,130,246,0.55); } .mini-blue .mini-chrome span:first-child { background: #3b82f6; } | |
| .mini-green { border-color: rgba(34,197,94,0.55); } .mini-green .mini-chrome span:first-child { background: #22c55e; } | |
| /* colorful section accents */ | |
| .hm-gold { border-top: 3px solid #C4923A; } .hm-gold .hm-title { color: #C4923A; } | |
| .hm-purple { border-top: 3px solid #8b5cf6; } .hm-purple .hm-title { color: #a78bfa; } | |
| .hm-blue { border-top: 3px solid #3b82f6; } .hm-blue .hm-title { color: #60a5fa; } | |
| .hm-green { border-top: 3px solid #22c55e; } .hm-green .hm-title { color: #4ade80; } | |
| .hm-gold:hover { box-shadow: 0 0 0 1px #C4923A, 0 10px 26px rgba(196,146,58,0.18); border-color: #C4923A; } | |
| .hm-purple:hover { box-shadow: 0 0 0 1px #8b5cf6, 0 10px 26px rgba(139,92,246,0.18); border-color: #8b5cf6; } | |
| .hm-blue:hover { box-shadow: 0 0 0 1px #3b82f6, 0 10px 26px rgba(59,130,246,0.18); border-color: #3b82f6; } | |
| .hm-green:hover { box-shadow: 0 0 0 1px #22c55e, 0 10px 26px rgba(34,197,94,0.18); border-color: #22c55e; } | |
| /* create-tab mock (rendered inside its thumbnail) */ | |
| .cr-mock { padding: 16px; font-size: 14px; } | |
| .cr-code { color: #4ade80; background: #0f0d0a; padding: 10px 12px; border-radius: 5px; | |
| font-family: ui-monospace, monospace; } | |
| .cr-box { color: var(--moses-dim); border: 1px dashed var(--moses-line); padding: 12px; | |
| margin: 10px 0; border-radius: 5px; } | |
| .cr-box b { color: var(--moses-ink); } | |
| .cr-btn { background: var(--moses-gold); color: var(--moses-bg); text-align: center; | |
| padding: 10px; border-radius: 5px; font-weight: 800; } | |
| .cr-res { color: var(--moses-gold); margin-top: 10px; font-weight: 800; text-align: center; } | |
| /* ---------- metrics explainer (SigRank vs standard) ---------- */ | |
| .mx-wrap { margin-top: 8px; } | |
| .mx-analogy { color: var(--moses-ink); font-size: 14px; line-height: 1.55; text-align: center; | |
| max-width: 760px; margin: 0 auto 18px; } | |
| .mx-analogy .mx-gold, .mx-bottom .mx-gold { color: var(--moses-gold); font-weight: 700; } | |
| .mx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } | |
| .mx-col { border: 1px solid var(--moses-line); border-radius: 8px; padding: 14px 16px; background: var(--moses-card); } | |
| .mx-col-sig { border-color: rgba(196,146,58,0.5); background: rgba(196,146,58,0.05); } | |
| .mx-col-head { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; | |
| margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--moses-line); } | |
| .mx-col-std .mx-col-head { color: var(--moses-dim); } | |
| .mx-col-sig .mx-col-head { color: var(--moses-gold); } | |
| .mx-item { padding: 9px 0; border-bottom: 1px solid #2c2718; } | |
| .mx-item:last-of-type { border-bottom: 0; } | |
| .mx-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } | |
| .mx-name { color: var(--moses-ink); font-weight: 700; font-size: 12.5px; } | |
| .mx-form { color: var(--moses-gold); font-family: ui-monospace, monospace; font-size: 11px; } | |
| .mx-desc { color: var(--moses-dim); font-size: 11.5px; line-height: 1.45; margin-top: 3px; } | |
| .mx-vs { color: #a89e85; font-size: 11.5px; line-height: 1.45; margin-top: 4px; } | |
| .mx-vs b { color: var(--moses-dim); } | |
| .mx-result { color: var(--moses-gold); font-size: 11.5px; margin-top: 3px; font-weight: 600; } | |
| .mx-foot { color: var(--moses-dim); font-size: 11px; margin-top: 12px; padding-top: 10px; | |
| border-top: 1px dashed var(--moses-line); } | |
| .mx-foot b { color: var(--moses-ink); } | |
| .mx-table { width: 100%; border-collapse: collapse; margin: 18px 0; background: var(--moses-card); | |
| border: 1px solid var(--moses-line); border-radius: 8px; overflow: hidden; } | |
| .mx-table th, .mx-table td { padding: 10px 12px; text-align: left; font-size: 12px; | |
| border-bottom: 1px solid var(--moses-line); } | |
| .mx-table thead th { color: var(--moses-gold); text-transform: uppercase; font-size: 10.5px; | |
| letter-spacing: 0.05em; border-bottom: 1px solid var(--moses-gold); } | |
| .mx-table .mx-aspect { color: var(--moses-dim); font-weight: 700; text-transform: uppercase; | |
| font-size: 10px; letter-spacing: 0.04em; } | |
| .mx-table td { color: #a89e85; } | |
| .mx-table .mx-win { color: var(--moses-ink); font-weight: 600; background: rgba(196,146,58,0.06); } | |
| .mx-thermo { border-left: 3px solid var(--moses-gold); background: rgba(196,146,58,0.05); | |
| border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 16px 0; color: #a89e85; font-size: 12px; line-height: 1.6; } | |
| .mx-thermo b { color: var(--moses-ink); } | |
| .mx-thermo-h { color: var(--moses-gold); font-weight: 800; font-size: 12px; letter-spacing: 0.03em; margin-bottom: 6px; } | |
| .mx-bottom { text-align: center; color: var(--moses-ink); font-size: 13px; line-height: 1.55; | |
| max-width: 760px; margin: 16px auto 0; } | |
| @media (max-width: 700px) { .mx-cols { grid-template-columns: 1fr; } .mx-analogy { font-size: 13px; } } | |
| /* ---------- MO§ES logo (CSS-drawn: gold § in concentric rings on a dark disc) ---------- */ | |
| .moses-logo { position: relative; width: 82px; height: 82px; border-radius: 50%; | |
| background: #0F0D0A; border: 2px solid var(--moses-gold); display: flex; | |
| align-items: center; justify-content: center; box-shadow: 0 0 18px rgba(196,146,58,0.45); } | |
| .moses-logo::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; | |
| border: 1px solid rgba(196,146,58,0.4); } | |
| .ml-s { color: var(--moses-gold); font-family: Georgia, "Times New Roman", serif; | |
| font-size: 48px; font-weight: 700; line-height: 1; } | |
| /* ---------- middle nav link (Leaders) emphasized ---------- */ | |
| .tab-container > button:nth-child(3), .tab-nav > button:nth-child(3) { | |
| color: var(--moses-gold) !important; font-size: 17px !important; font-weight: 800 !important; | |
| text-shadow: 0 0 14px rgba(196,146,58,0.4); } | |
| /* ---------- hero status + live counters (top-right) ---------- */ | |
| .hero-stat { text-align: right; font-size: 10px; letter-spacing: 0.06em; line-height: 1.65; | |
| font-weight: 700; color: var(--moses-dim); white-space: nowrap; min-width: 196px; | |
| margin-top: 34px; } /* clear the HF Space pill (burnmydays/sigrank ♡) in embedded view */ | |
| .hs-row { display: flex; justify-content: space-between; gap: 16px; } | |
| .hs-div { height: 1px; background: var(--moses-line); margin: 5px 0; } | |
| .hs-burn { color: #ef6b6b; } .hs-build { color: #4ade80; } .hs-tenx { color: var(--moses-gold); } | |
| @media (max-width: 700px) { .hero-stat { display: none; } } | |
| /* ---------- equation boxes: median/avg + hover description ---------- */ | |
| .mf-box { position: relative; cursor: help; } | |
| .mf-stat { color: var(--moses-dim); font-size: 9.5px; margin-top: 5px; letter-spacing: 0.02em; } | |
| .mf-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); | |
| width: 220px; max-width: 70vw; background: #0f0d0a; color: var(--moses-ink); | |
| border: 1px solid var(--moses-gold); border-radius: 6px; padding: 10px 12px; font-size: 11px; | |
| line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; transition: opacity 0.15s ease; | |
| z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,0.6); } | |
| .mf-box:hover .mf-tip, .mf-box:focus .mf-tip { opacity: 1; visibility: visible; } | |
| .mf-sub { text-align: center; color: var(--moses-dim); font-size: 10px; margin: -4px 0 14px; } | |
| /* ---------- reports: learn-from insights ---------- */ | |
| .ins-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } | |
| .ins-block { border: 1px solid var(--moses-line); border-radius: 6px; padding: 12px 14px; } | |
| .ins-good { border-left: 3px solid #4ade80; background: rgba(34,197,94,0.05); } | |
| .ins-avoid { border-left: 3px solid #ef6b6b; background: rgba(239,107,107,0.05); } | |
| .ins-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; margin-bottom: 6px; } | |
| .ins-good .ins-h { color: #4ade80; } .ins-avoid .ins-h { color: #ef6b6b; } | |
| .ins-block ul { margin: 0; padding-left: 16px; } | |
| .ins-block li { color: var(--moses-dim); font-size: 11.5px; line-height: 1.5; margin-bottom: 4px; } | |
| @media (max-width: 700px) { .ins-wrap { grid-template-columns: 1fr; } } | |
| .mb-foot { color: #5f573f; font-size: 10.5px; padding: 10px 8px 0; line-height: 1.6; } | |
| /* composition bar */ | |
| .comp-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 6px 0 10px; width: 100%; } | |
| .comp-read { background: var(--moses-gold); } | |
| .comp-create { background: #8a6a3a; } | |
| .comp-output { background: #5a7a5a; } | |
| .comp-input { background: #3a4a5a; } | |
| /* trading card */ | |
| .sig-card { | |
| width: 380px; min-height: 500px; | |
| background: linear-gradient(160deg, #1E1B15 60%, #2a2318); | |
| border-radius: 12px; | |
| padding: 28px 24px 20px; | |
| font-family: ui-monospace, monospace; | |
| position: relative; | |
| } | |
| .sig-card.species-throughput { border: 1px solid var(--species-throughput); box-shadow: 0 0 20px rgba(107,114,128,0.12); } | |
| .sig-card.species-converter { border: 1px solid var(--species-converter); box-shadow: 0 0 24px rgba(59,130,246,0.15); } | |
| .sig-card.species-architect { border: 1px solid var(--species-architect); box-shadow: 0 0 28px rgba(139,92,246,0.18); } | |
| .sig-card.species-cascade { border: 1px solid var(--species-cascade); box-shadow: 0 0 40px rgba(196,146,58,0.22), inset 0 1px 0 rgba(196,146,58,0.15); } | |
| .sig-card-watermark { | |
| position: absolute; top: 14px; right: 16px; | |
| font-size: 9px; color: var(--moses-dim); letter-spacing: 0.1em; | |
| } | |
| .sig-card-name { color: var(--moses-ink); font-size: 22px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 4px; } | |
| .sig-card-archetype { | |
| display: inline-block; font-size: 10px; letter-spacing: 0.08em; | |
| border: 1px solid var(--moses-gold); color: var(--moses-gold); | |
| padding: 2px 8px; border-radius: 2px; margin-bottom: 20px; text-transform: uppercase; | |
| } | |
| .sig-card-yield { font-size: 52px; font-weight: 700; color: var(--moses-ink); line-height: 1; } | |
| .sig-card-yield-label { font-size: 10px; color: var(--moses-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; } | |
| .sig-card-rank { font-size: 13px; color: var(--moses-dim); margin-bottom: 16px; } | |
| .sig-card-rank span { color: var(--moses-ink); font-weight: 700; } | |
| .sig-card-cascade { | |
| display: flex; align-items: center; gap: 6px; | |
| font-size: 11px; margin-bottom: 16px; | |
| } | |
| .sig-card-cascade-box { | |
| border: 1px solid #3A3324; padding: 4px 8px; border-radius: 3px; | |
| color: var(--moses-ink); text-align: center; min-width: 52px; | |
| } | |
| .sig-card-cascade-box small { display: block; color: var(--moses-dim); font-size: 9px; } | |
| .sig-card-cascade-arrow { color: var(--moses-dim); } | |
| .sig-card-quote { | |
| font-size: 11px; color: var(--moses-dim); | |
| border-left: 2px solid var(--moses-gold); | |
| padding: 8px 12px; margin-top: 16px; line-height: 1.5; | |
| font-style: italic; | |
| } | |
| .sig-card-rarity { display: inline-block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: 2px; margin-bottom: 8px; } | |
| .sig-card-rarity.species-throughput { color: var(--species-throughput); border: 1px solid var(--species-throughput); } | |
| .sig-card-rarity.species-converter { color: var(--species-converter); border: 1px solid var(--species-converter); } | |
| .sig-card-rarity.species-architect { color: var(--species-architect); border: 1px solid var(--species-architect); } | |
| .sig-card-rarity.species-cascade { color: var(--species-cascade); border: 1px solid var(--species-cascade); } | |
| .sig-card-passive { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--moses-dim); margin: 12px 0 4px; } | |
| .sig-card-effect { font-size: 10px; color: var(--moses-dim); font-style: italic; border-left: 2px solid #3A3324; padding: 6px 10px; margin-bottom: 14px; line-height: 1.5; } | |
| .sig-card.species-cascade .sig-card-yield { color: var(--species-cascade); } | |
| .sig-card.species-cascade .sig-card-name { color: var(--species-cascade); } | |
| .sig-card-footer { | |
| position: absolute; bottom: 16px; left: 24px; right: 24px; | |
| font-size: 9px; color: #5f573f; letter-spacing: 0.06em; | |
| border-top: 1px solid #3A3324; padding-top: 8px; | |
| display: flex; justify-content: space-between; | |
| } | |
| /* parsing mode badge on trading card */ | |
| .sig-card-mode { | |
| font-size: 8px; color: var(--moses-dim); letter-spacing: 0.06em; | |
| margin-bottom: 10px; padding: 2px 6px; | |
| border: 1px dashed var(--moses-line); border-radius: 2px; | |
| display: inline-block; | |
| } | |
| /* estimation asterisk on board rows */ | |
| .mb-est { color: var(--moses-gold); font-weight: 700; font-size: 10px; cursor: help; } | |
| /* greatest hits table */ | |
| .greatest-hits { margin: 16px 0; } | |
| .greatest-hits h4 { color: var(--moses-gold); font-size: 13px; letter-spacing: 0.08em; margin-bottom: 8px; } | |
| .greatest-hits table { width: 100%; border-collapse: collapse; font-size: 11px; } | |
| .greatest-hits th { | |
| color: var(--moses-gold); font-size: 9px; letter-spacing: 0.06em; | |
| text-transform: uppercase; text-align: left; padding: 6px 8px; | |
| border-bottom: 1px solid var(--moses-gold); | |
| } | |
| .greatest-hits td { | |
| color: var(--moses-dim); padding: 6px 8px; | |
| border-bottom: 1px solid var(--moses-line); | |
| } | |
| .greatest-hits tr:first-child td { color: var(--moses-ink); } | |
| /* HF login button styling */ | |
| #hf-login-btn { margin-bottom: 8px; } | |
| /* "Rank by" radio -> horizontal pill / segmented control (not a gray form) */ | |
| #rank-by { border: none !important; background: transparent !important; padding: 0 !important; } | |
| #rank-by .wrap { display: flex !important; flex-wrap: wrap; gap: 6px; justify-content: center !important; } | |
| #rank-by .wrap label { | |
| flex: 1 1 0; max-width: 150px; text-align: center; | |
| background: var(--moses-card); border: 1px solid var(--moses-line); | |
| border-radius: 16px; padding: 5px 12px; color: var(--moses-dim); | |
| font-size: 11px; cursor: pointer; margin: 0 !important; } | |
| #rank-by .wrap label.selected, #rank-by .wrap label:has(input:checked) { | |
| border-color: var(--moses-gold) !important; color: var(--moses-gold) !important; | |
| background: rgba(196,146,58,0.12) !important; } | |
| #rank-by input[type="radio"] { display: none !important; } | |
| /* primary-path clone code block — match the dark terminal */ | |
| #clone-code, #clone-code * { background: var(--moses-bg) !important; color: var(--moses-ink) !important; } | |
| #clone-code { border: 1px solid var(--moses-line) !important; border-radius: 8px !important; } | |
| /* operator picker dropdown */ | |
| #op-pick input { background: var(--moses-bg) !important; color: var(--moses-ink) !important; } | |
| /* ghost / unminted placeholder card */ | |
| #ghost-card { opacity: 0.45; border-style: dashed !important; } | |
| footer { display: none !important; } | |
| /* ---------- metrics key (collapsible legend under the board) ---------- */ | |
| .metric-key { margin: 10px 2px 0; border: 1px solid #3A3324; border-radius: 6px; | |
| background: rgba(196,146,58,0.04); } | |
| .metric-key summary { cursor: pointer; padding: 9px 12px; color: #C4923A; | |
| font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; | |
| list-style: none; } | |
| .metric-key summary::-webkit-details-marker { display: none; } | |
| .metric-key summary::before { content: "▸ "; color: #8a7f68; } | |
| .metric-key[open] summary::before { content: "▾ "; } | |
| .metric-key .mk-hint { color: #8a7f68; font-weight: 400; text-transform: none; | |
| letter-spacing: 0; font-size: 11px; } | |
| .mk-legend { padding: 4px 12px 12px; } | |
| .mk-note { color: #8a7f68; font-size: 11px; margin: 2px 0 10px; } | |
| .mk-note b { color: #C4923A; } | |
| .mk-row { display: grid; grid-template-columns: 96px 150px 130px 1fr; gap: 8px; | |
| align-items: baseline; padding: 6px 0; border-top: 1px solid #2c2718; } | |
| .mk-name { color: #E8E0CF; font-weight: 700; font-size: 12px; } | |
| .mk-form { color: #C4923A; font-family: ui-monospace, monospace; font-size: 11px; } | |
| .mk-alias { color: #8a7f68; font-size: 11px; font-style: italic; } | |
| .mk-desc { color: #a89e85; font-size: 11px; line-height: 1.45; } | |
| @media (max-width: 700px) { | |
| /* stack each metric into a card on phones */ | |
| .mk-row { grid-template-columns: 1fr; gap: 2px; } | |
| .mk-form { font-size: 10px; } | |
| } | |
| @media (max-width: 700px) { | |
| /* mobile: collapse both boards to rank · operator · Υ. The numeric middle | |
| columns drop out entirely instead of being crushed into too-few tracks. | |
| !important beats the slim board's inline grid-template-columns. */ | |
| .mb-head, .mb-row { | |
| grid-template-columns: 22px 1fr 72px !important; | |
| gap: 6px !important; | |
| font-size: 11px; | |
| } | |
| .mb-num { display: none !important; } | |
| .mb-head span:nth-child(3), .mb-head span:nth-child(4), | |
| .mb-row span:nth-child(3), .mb-row span:nth-child(4) { display: none !important; } | |
| .mb-op { min-width: 0; overflow-wrap: anywhere; } | |
| .mb-raw { font-size: 9px; line-height: 1.35; } | |
| .mb-ledger { display: none !important; } | |
| .mb-y, .mb-yval { font-size: 11px !important; } | |
| } | |
| @media (max-width: 700px) { | |
| /* Mobile overflow fix. Two real causes (found via live DOM inspection): | |
| 1) Gradio's fillable container + flex children (default min-width:auto) refuse | |
| to shrink below content, pinning the page at ~1100px and scrolling sideways. | |
| 2) the marquee track is ~5000px wide; its wrapper must hard-clip. | |
| min-width:0 lets the flex children collapse to the viewport. */ | |
| html, body { overflow-x: hidden !important; max-width: 100vw !important; } | |
| .gradio-container, .main, .wrap, .contain, .column, .block { | |
| max-width: 100% !important; min-width: 0 !important; } | |
| .pm-wrap { max-width: 100% !important; overflow: hidden !important; } | |
| .gradio-container { padding-left: 8px !important; padding-right: 8px !important; } | |
| #moses-hero h1 { font-size: 34px !important; letter-spacing: 0.08em !important; } | |
| #moses-hero { padding-top: 26px; } /* clear the HF Space pill on phones */ | |
| #moses-hero p { font-size: 12px !important; } | |
| #rank-by, #rank-by .wrap { flex-wrap: wrap !important; } /* Rank-by chips wrap, not overflow */ | |
| } | |
| """ | |