Spaces:
Running
Running
| :root { | |
| --bg: #0b1020; | |
| --bg-soft: #121a33; | |
| --card: #161f3d; | |
| --border: #2a3663; | |
| --text: #e8ecf8; | |
| --muted: #9aa6c8; | |
| --accent: #7c8cff; | |
| --accent-2: #f472b6; | |
| --smaug: #6d7cff; | |
| --base: #f59e0b; | |
| --ok: #34d399; | |
| --warn: #fbbf24; | |
| --bad: #f87171; | |
| --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| background: radial-gradient(1200px 600px at 20% -10%, #1b2a5e 0%, var(--bg) 55%) no-repeat, var(--bg); | |
| color: var(--text); | |
| font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| } | |
| a { color: var(--accent); } | |
| code { font-family: var(--mono); font-size: 0.92em; background: #0d1330; padding: 1px 5px; border-radius: 5px; } | |
| .hero { padding: 28px 24px 8px; max-width: 1240px; margin: 0 auto; } | |
| .hero h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -0.3px; } | |
| .hero .sub { margin: 0 0 12px; color: var(--muted); max-width: 70ch; } | |
| .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; } | |
| .badge { | |
| font-size: 12.5px; padding: 3px 10px; border-radius: 999px; | |
| background: #1a2450; border: 1px solid var(--border); color: var(--text); | |
| } | |
| .hublive { color: var(--muted); font-size: 13px; margin: 6px 0 0; } | |
| .tabs { | |
| display: flex; flex-wrap: wrap; gap: 6px; max-width: 1240px; margin: 18px auto 0; | |
| padding: 0 24px; border-bottom: 1px solid var(--border); | |
| } | |
| .tab { | |
| background: transparent; border: 1px solid transparent; border-bottom: none; | |
| color: var(--muted); padding: 9px 14px; border-radius: 10px 10px 0 0; cursor: pointer; | |
| font-size: 14.5px; | |
| } | |
| .tab:hover { color: var(--text); background: #141c3c; } | |
| .tab.active { color: var(--text); background: var(--card); border-color: var(--border); } | |
| main { max-width: 1240px; margin: 0 auto; padding: 22px 24px 60px; } | |
| .panel { display: none; } | |
| .panel.active { display: block; } | |
| h2 { margin: 30px 0 10px; font-size: 21px; } | |
| h3 { margin: 22px 0 8px; font-size: 16.5px; } | |
| p, li { max-width: 96ch; } | |
| table { border-collapse: collapse; width: 100%; font-size: 14px; } | |
| .table-wrap { overflow-x: auto; margin: 12px 0 18px; } | |
| th, td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; } | |
| th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; } | |
| td:nth-child(n+2), th:nth-child(n+2) { text-align: right; white-space: nowrap; } | |
| table.kv td { text-align: left; white-space: normal; } | |
| table.kv td:first-child { color: var(--muted); width: 210px; } | |
| .callout { | |
| background: #14204a; border: 1px solid var(--border); border-left: 3px solid var(--accent); | |
| padding: 12px 14px; border-radius: 10px; margin: 14px 0; font-size: 14.5px; | |
| } | |
| .callout.warn { border-left-color: var(--warn); background: #2a2312; } | |
| .note { color: var(--muted); font-size: 13.5px; } | |
| .stats { font-family: var(--mono); font-size: 13px; color: var(--text); white-space: pre-wrap; margin: 8px 0; } | |
| .notes { color: var(--muted); font-size: 14px; } | |
| .status { font-size: 13.5px; color: var(--warn); } | |
| .badge-ok { color: var(--ok); } | |
| .badge-bad { color: var(--bad); } | |
| .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; } | |
| .controls { gap: 16px; } | |
| .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } | |
| .two-col.wide-left { grid-template-columns: 1.05fr 1fr; } | |
| .two-col.wide-right { grid-template-columns: 360px 1fr; } | |
| @media (max-width: 900px) { | |
| .two-col, .two-col.wide-left, .two-col.wide-right { grid-template-columns: 1fr; } | |
| } | |
| .field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); flex: 1 1 180px; } | |
| .field input[type="text"], .field input[type="password"], .field input[type="number"], | |
| .field select, .field textarea, textarea.code { | |
| background: #0d1330; color: var(--text); border: 1px solid var(--border); | |
| border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; | |
| } | |
| textarea.code { font-family: var(--mono); font-size: 12.8px; line-height: 1.5; resize: vertical; } | |
| textarea.mono-out { color: #cfe3ff; } | |
| .field input[type="range"] { width: 100%; } | |
| label.check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); } | |
| button { | |
| border-radius: 9px; padding: 9px 15px; font-size: 14px; cursor: pointer; | |
| border: 1px solid var(--border); background: #1b2450; color: var(--text); | |
| } | |
| button.primary { background: linear-gradient(180deg, var(--accent), #5b6bf0); border-color: #5b6bf0; color: #fff; font-weight: 600; } | |
| button.ghost { background: transparent; color: var(--muted); } | |
| button:hover { filter: brightness(1.12); } | |
| button:disabled { opacity: 0.55; cursor: default; } | |
| details { margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #101736; } | |
| summary { cursor: pointer; color: var(--text); font-size: 14px; } | |
| .chart { min-height: 220px; margin: 10px 0 20px; } | |
| .figure { width: 100%; border: 1px solid var(--border); border-radius: 10px; margin: 12px 0; background: #fff; } | |
| .recipe { position: relative; } | |
| .recipe pre { | |
| background: #0d1330; border: 1px solid var(--border); border-radius: 10px; | |
| padding: 14px; overflow-x: auto; font-family: var(--mono); font-size: 12.8px; line-height: 1.55; | |
| } | |
| .recipe .copy { position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 12px; } | |
| .chat-col { display: flex; flex-direction: column; } | |
| .chat-log { | |
| border: 1px solid var(--border); border-radius: 10px; background: #0d1330; | |
| padding: 12px; height: 420px; overflow-y: auto; margin-bottom: 10px; | |
| } | |
| .msg { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; white-space: pre-wrap; word-wrap: break-word; } | |
| .msg.user { background: #1d2a63; border: 1px solid #2c3d8a; } | |
| .msg.assistant { background: #131b3a; border: 1px solid var(--border); } | |
| .msg.error { background: #3a1b1b; border: 1px solid #7a2c2c; color: #ffd7d7; } | |
| .msg .who { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-family: var(--mono); } | |
| footer { | |
| max-width: 1240px; margin: 0 auto; padding: 20px 24px 50px; | |
| border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; | |
| } | |