Spaces:
Running
Running
| :root { | |
| --canvas: #f7f7f5; | |
| --paper: #ffffff; | |
| --ink: #171817; | |
| --muted: #747873; | |
| --line: #dedfdb; | |
| --line-strong: #c9cbc6; | |
| --soft: #f0f1ee; | |
| --accent: #1d6751; | |
| --accent-soft: #e4f2ed; | |
| --warn: #936b0b; | |
| --warn-soft: #fff4d8; | |
| --danger: #a7433d; | |
| --danger-soft: #fae9e7; | |
| --code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; | |
| --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| } | |
| * { box-sizing: border-box } | |
| html, body { height: 100% } | |
| body { | |
| margin: 0; | |
| color: var(--ink); | |
| background: var(--canvas); | |
| font: 14px/1.45 var(--sans); | |
| } | |
| button, textarea, input { font: inherit } | |
| button { cursor: pointer } | |
| .shell { | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: minmax(480px, 1fr) minmax(420px, 46vw); | |
| } | |
| .workspace { | |
| min-width: 0; | |
| display: grid; | |
| grid-template-rows: 58px 1fr auto; | |
| background: var(--paper); | |
| } | |
| .topbar { | |
| border-bottom: 1px solid var(--line); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 16px; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| font-weight: 760; | |
| letter-spacing: -0.01em; | |
| } | |
| .mark { | |
| width: 25px; | |
| height: 25px; | |
| display: grid; | |
| place-items: center; | |
| border: 1px solid var(--ink); | |
| border-radius: 7px; | |
| font: 700 13px var(--code); | |
| } | |
| .meta { | |
| color: var(--muted); | |
| font: 12px var(--code); | |
| } | |
| .meta a { | |
| color: inherit; | |
| text-decoration: underline; | |
| text-underline-offset: 0.12em; | |
| } | |
| .meta a:hover { color: var(--accent) } | |
| .button { | |
| border: 1px solid var(--line-strong); | |
| background: var(--paper); | |
| color: var(--ink); | |
| border-radius: 7px; | |
| padding: 7px 11px; | |
| font-weight: 620; | |
| } | |
| .button:hover { background: var(--soft) } | |
| .button.primary { | |
| color: white; | |
| border-color: var(--accent); | |
| background: var(--accent); | |
| } | |
| .button.primary:hover { background: #165441 } | |
| .button:disabled { | |
| opacity: 0.55; | |
| cursor: wait; | |
| } | |
| .article-pane { | |
| min-height: 0; | |
| display: grid; | |
| grid-template-rows: 42px 1fr; | |
| } | |
| .pane-head { | |
| border-bottom: 1px solid var(--line); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 14px; | |
| } | |
| .pane-title { font-weight: 680 } | |
| .pane-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .text-button { | |
| border: 0; | |
| background: transparent; | |
| color: var(--accent); | |
| padding: 3px; | |
| font-weight: 640; | |
| } | |
| textarea.article { | |
| width: 100%; | |
| height: 100%; | |
| resize: none; | |
| display: block; | |
| border: 0; | |
| outline: 0; | |
| color: #2f3430; | |
| background: #fbfbfa; | |
| padding: 16px 18px; | |
| font: 14px/1.6 var(--sans); | |
| } | |
| textarea.article:focus { box-shadow: inset 3px 0 var(--accent) } | |
| .askbar { | |
| border-top: 1px solid var(--line); | |
| padding: 12px 14px; | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .ask-row { display: flex; gap: 8px } | |
| .ask-row .button.primary { | |
| margin-left: auto; | |
| padding: 8px 14px; | |
| } | |
| .hint { color: var(--muted); font-size: 12px } | |
| .hint.error { color: var(--danger) } | |
| .response { | |
| min-width: 0; | |
| border-left: 1px solid var(--line); | |
| background: var(--paper); | |
| display: grid; | |
| grid-template-rows: 58px 1fr; | |
| } | |
| .response-head { | |
| border-bottom: 1px solid var(--line); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 18px; | |
| } | |
| .response-title { | |
| font-size: 12px; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| font-weight: 750; | |
| } | |
| .response-body { | |
| min-height: 0; | |
| overflow: auto; | |
| padding: 18px; | |
| } | |
| .empty { | |
| height: 100%; | |
| display: grid; | |
| place-items: center; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .empty strong { | |
| display: block; | |
| color: #555a55; | |
| font-size: 18px; | |
| margin-bottom: 5px; | |
| } | |
| .para { | |
| margin: 0; | |
| color: #2f3430; | |
| font: 14px/1.6 var(--sans); | |
| animation: para-in 280ms ease both; | |
| } | |
| .para + .para { | |
| margin-top: 1rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--soft); | |
| } | |
| @keyframes para-in { | |
| from { opacity: 0; transform: translateY(4px) } | |
| to { opacity: 1; transform: none } | |
| } | |
| .foot { | |
| margin: 16px 0 0; | |
| color: var(--muted); | |
| font: 11px var(--code); | |
| } | |
| .error { | |
| color: var(--danger); | |
| margin: 0; | |
| } | |
| @media (max-width: 900px) { | |
| .shell { display: block; height: auto } | |
| .workspace { height: 80vh } | |
| .response { | |
| min-height: 70vh; | |
| border-left: 0; | |
| border-top: 1px solid var(--line); | |
| } | |
| } | |