/* Oculopus design system v3. Type: grotesk sans (Inter) for headlines/body, mono (JetBrains Mono) for nav, labels, code and data — the Bittensor pairing. Brand colors: purple (head), orange (eye), earth (tentacles). Theme via data-theme on . */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root, :root[data-theme="dark"] { --bg: #0c0a12; --card: #14111f; --card-2: #191527; --line: #251f38; --line-strong: #362d52; --text: #ece9f4; --dim: #948da8; --accent: #9d7bf5; /* purple — primary */ --accent-2: #fb923c; /* orange — numerals, highlights */ --earth: #b08968; /* earth — tertiary, mascot tentacles */ --accent-soft: rgba(157, 123, 245, 0.12); --accent-ink: #0c0a12; --good: #34d399; --bad: #f87171; --warn: #fbbf24; --code-bg: #0f0c18; } :root[data-theme="light"] { --bg: #f7f5f2; --card: #ffffff; --card-2: #fbfaf8; --line: #e6e2da; --line-strong: #cfc8bc; --text: #1a1523; --dim: #6b6478; --accent: #6d4fd8; --accent-2: #ea720d; --earth: #8b5e3c; --accent-soft: rgba(109, 79, 216, 0.1); --accent-ink: #ffffff; --good: #0f8a5f; --bad: #c93a3a; --warn: #a06e06; --code-bg: #efece7; } * { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font: 15px/1.7 "Inter", system-ui, sans-serif; transition: background 0.25s, color 0.25s; } .mono, pre, code, .meta, .pill, .addr, .eyebrow, .num, .feed-item, .theme-toggle { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- header ------------------------------------------------------------- */ header { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); position: sticky; top: 0; backdrop-filter: blur(10px); z-index: 10; } .nav { display: flex; align-items: center; gap: 20px; height: 62px; } .brand { display: flex; align-items: center; gap: 11px; color: var(--text); } .brand:hover { text-decoration: none; } .brand b { font-family: "JetBrains Mono", monospace; font-weight: 700; letter-spacing: 3px; font-size: 14px; } .nav .links { margin-left: auto; display: flex; gap: 22px; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.5px; } .nav .links a { color: var(--dim); } .nav .links a.on { color: var(--accent); } .nav .links a:hover { color: var(--text); text-decoration: none; } /* Theme toggle — segmented control */ .theme-toggle { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; padding: 2px; cursor: pointer; background: var(--card); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; } .theme-toggle span { padding: 4px 11px; border-radius: 99px; color: var(--dim); transition: all 0.2s; } .theme-toggle span.active { background: var(--accent); color: var(--accent-ink); } .theme-toggle:hover { border-color: var(--line-strong); } /* ---- shared blocks ------------------------------------------------------ */ .section { padding: 76px 0; border-bottom: 1px solid var(--line); } .section:last-of-type { border-bottom: none; } .eyebrow { display: inline-block; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); border-radius: 99px; padding: 4px 14px; margin-bottom: 18px; background: var(--accent-soft); } h1 { font-size: 42px; line-height: 1.15; font-weight: 800; letter-spacing: -1.2px; } h2 { font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -0.6px; margin-bottom: 12px; } h3 { font-size: 15px; font-weight: 700; } .lead { color: var(--dim); font-size: 16px; max-width: 62ch; } .dim { color: var(--dim); } .small { font-size: 13px; } .meta { display: flex; gap: 16px; color: var(--dim); font-size: 11.5px; flex-wrap: wrap; } .btn { display: inline-block; font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 9px; border: 1px solid var(--line-strong); color: var(--text); transition: all 0.2s; } .btn:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.primary:hover { filter: brightness(1.08); } .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px; transition: border-color 0.2s, transform 0.2s; } .card:hover { border-color: var(--line-strong); transform: translateY(-2px); } .card .num { font-size: 11px; color: var(--accent-2); font-weight: 700; letter-spacing: 2px; } .card p { font-size: 13.5px; } .grid { display: grid; gap: 14px; } .grid.cols3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid.cols4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; } .stat-card .v { font-family: "JetBrains Mono", monospace; font-size: 26px; font-weight: 700; color: var(--accent-2); } .stat-card .l { font-size: 12px; color: var(--dim); margin-top: 4px; } pre, code.block { display: block; background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; font-size: 12.5px; line-height: 1.75; overflow-x: auto; color: var(--text); } code.inline { background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 12.5px; font-family: "JetBrains Mono", monospace; } pre .c { color: var(--dim); } pre .k { color: var(--accent); } pre .g { color: var(--good); } pre .r { color: var(--bad); } table.t { width: 100%; border-collapse: collapse; font-size: 13px; } table.t th, table.t td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } table.t th { color: var(--dim); font-weight: 500; font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; } table.t td:first-child { white-space: nowrap; } .pill { display: inline-block; font-size: 10.5px; letter-spacing: 0.5px; border: 1px solid var(--line); border-radius: 4px; padding: 1px 8px; color: var(--dim); } .pill.good { color: var(--good); border-color: var(--good); } .pill.bad { color: var(--bad); border-color: var(--bad); } .pill.accent { color: var(--accent); border-color: var(--accent); } /* ---- hero --------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 46px; align-items: center; } @media (max-width: 880px) { .hero { grid-template-columns: 1fr; } } /* ---- editor (the "agent at work" window, VS Code style) ------------------ */ .editor { background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28); font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; } :root[data-theme="light"] .editor { box-shadow: 0 14px 36px rgba(26, 21, 35, 0.1); } .ed-tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--line); } .ed-tab { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 11.5px; color: var(--text); background: var(--code-bg); border-right: 1px solid var(--line); border-top: 2px solid var(--accent); } .ed-tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); } .ed-tab-ghost { flex: 1; } .ed-body { padding: 16px 18px; font-size: 12.5px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; } .ed-body .cmd { color: var(--text); } .ed-body .out { color: var(--dim); } .ed-body .ok { color: var(--good); } .ed-body .err { color: var(--bad); } .ed-body .hi { color: var(--accent); } .ed-status { display: flex; gap: 18px; align-items: center; padding: 5px 14px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; letter-spacing: 0.5px; } .ed-status span { display: inline-flex; align-items: center; gap: 5px; } .cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---- mascot animations --------------------------------------------------- */ .mascot .pupil { animation: look 9s ease-in-out infinite; } @keyframes look { 0%, 22% { transform: translateX(0); } 30%, 44% { transform: translateX(2px); } 52%, 70% { transform: translateX(-3px); } 78%, 100% { transform: translateX(0); } } .mascot .lid { transform: scaleY(0); transform-origin: center 41%; animation: lid 7s linear infinite; } @keyframes lid { 0%, 91%, 100% { transform: scaleY(0); } 93.5%, 96.5% { transform: scaleY(1); } } .mascot .t1 { animation: bob 3.2s ease-in-out infinite; } .mascot .t2 { animation: bob 2.7s ease-in-out 0.4s infinite; } .mascot .t3 { animation: bob 3.6s ease-in-out 0.9s infinite; } .mascot .t4 { animation: bob 2.9s ease-in-out 0.2s infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.45px); } } @media (prefers-reduced-motion: reduce) { .mascot .pupil, .mascot .lid, .mascot .t1, .mascot .t2, .mascot .t3, .mascot .t4, .cursor { animation: none; } } /* ---- dashboard ---------------------------------------------------------- */ .score-num { font-family: "JetBrains Mono", monospace; font-size: 34px; font-weight: 700; } .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 3px; transition: width 0.6s, background 0.6s; } .addr { color: var(--dim); font-size: 11px; word-break: break-all; } .feed-item { border-left: 2px solid var(--line); padding: 6px 12px; font-size: 12.5px; color: var(--dim); margin-bottom: 2px; } .feed-item b { color: var(--text); font-weight: 600; } .ok-txt { color: var(--good); } .bad-txt { color: var(--bad); } .empty { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 40px 24px; text-align: center; color: var(--dim); font-size: 13.5px; line-height: 2.1; } footer { padding: 36px 0 48px; color: var(--dim); font-size: 12.5px; line-height: 2; border-top: 1px solid var(--line); } footer a { color: var(--dim); text-decoration: underline; } footer .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }