Spaces:
Running
Running
| :root { | |
| --bg: #ffffff; | |
| --paper: #fdfcf9; | |
| --panel: #ffffff; | |
| --ink: #1f2937; | |
| --muted: #6b7280; | |
| --line: #e5e7eb; | |
| --accent: #f97316; | |
| --accent-strong: #ea580c; | |
| --accent-soft: #fff7ed; | |
| --accent-line: rgba(249, 115, 22, 0.16); | |
| --grid-line: rgba(31, 41, 55, 0.045); | |
| --code-bg: #f3f4f6; | |
| --radius: 12px; | |
| --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif; | |
| --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, | |
| sans-serif; | |
| --mono: "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, | |
| ui-monospace, monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--ink); | |
| font-family: var(--sans); | |
| font-size: 16px; | |
| line-height: 1.65; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| #app { | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| /* ---- sidebar (composition-book cover) ---- */ | |
| #sidebar { | |
| width: 280px; | |
| flex: 0 0 280px; | |
| background: #17181c; | |
| color: #e7e7ea; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| overflow-y: auto; | |
| padding: 22px 16px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #book-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px; | |
| margin-bottom: 12px; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| transition: background 0.12s; | |
| } | |
| #book-head:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| #book-head.active #book-title { | |
| color: #fdba74; | |
| } | |
| #book-logo { | |
| width: 40px; | |
| height: 40px; | |
| object-fit: contain; | |
| flex: 0 0 auto; | |
| } | |
| #book-title { | |
| font-weight: 700; | |
| font-size: 15px; | |
| letter-spacing: -0.01em; | |
| color: #ffffff; | |
| } | |
| #tree { | |
| flex: 1; | |
| padding-top: 8px; | |
| } | |
| #tree a { | |
| display: block; | |
| padding: 6px 10px; | |
| border-radius: 8px; | |
| color: #c3c4cb; | |
| text-decoration: none; | |
| font-size: 14px; | |
| transition: background 0.12s, color 0.12s; | |
| } | |
| #tree a:hover { | |
| background: rgba(255, 255, 255, 0.06); | |
| color: #ffffff; | |
| } | |
| #tree a.active { | |
| background: rgba(249, 115, 22, 0.16); | |
| color: #fdba74; | |
| font-weight: 600; | |
| } | |
| #tree .depth-1 { | |
| padding-left: 22px; | |
| } | |
| #tree .depth-2 { | |
| padding-left: 34px; | |
| } | |
| #tree .depth-3 { | |
| padding-left: 46px; | |
| } | |
| /* ---- content ---- */ | |
| #content { | |
| flex: 1; | |
| min-width: 0; | |
| display: flex; | |
| justify-content: center; | |
| padding: 48px 40px 120px; | |
| background-color: var(--paper); | |
| background-image: | |
| linear-gradient(var(--grid-line) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); | |
| background-size: 26px 26px; | |
| background-position: center top; | |
| } | |
| #page { | |
| width: 100%; | |
| min-width: 0; | |
| max-width: 760px; | |
| } | |
| #page h1 { | |
| font-family: var(--serif); | |
| font-size: 34px; | |
| line-height: 1.15; | |
| letter-spacing: -0.02em; | |
| margin: 0 0 8px; | |
| overflow-wrap: anywhere; | |
| } | |
| #page h2 { | |
| font-family: var(--serif); | |
| font-size: 24px; | |
| margin: 36px 0 10px; | |
| } | |
| #page h3 { | |
| font-size: 17px; | |
| font-weight: 700; | |
| margin: 26px 0 2px; | |
| letter-spacing: -0.01em; | |
| } | |
| #page h3::before { | |
| content: ""; | |
| display: inline-block; | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 2px; | |
| background: var(--accent); | |
| margin-right: 10px; | |
| vertical-align: middle; | |
| transform: translateY(-1px); | |
| } | |
| #page p { | |
| margin: 10px 0; | |
| } | |
| #page blockquote { | |
| margin: 14px 0; | |
| padding: 2px 16px; | |
| border-left: 3px solid #fdba74; | |
| color: var(--muted); | |
| } | |
| #page hr { | |
| border: none; | |
| border-top: 1px solid var(--line); | |
| margin: 30px 0 0; | |
| } | |
| #page code { | |
| font-family: var(--mono); | |
| font-size: 0.86em; | |
| background: var(--code-bg); | |
| padding: 2px 6px; | |
| border-radius: 6px; | |
| } | |
| #page pre { | |
| max-width: 100%; | |
| background: var(--code-bg); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| padding: 14px 16px; | |
| overflow-x: auto; | |
| } | |
| #page pre code { | |
| background: none; | |
| padding: 0; | |
| font-size: 11.5px; | |
| } | |
| /* ---- code blocks + collapsible accordion ---- */ | |
| #page pre.hl { | |
| background: #17181c; | |
| border: none; | |
| color: #e7e7ea; | |
| font-size: 13px; | |
| line-height: 1.58; | |
| } | |
| #page pre.hl code { | |
| color: inherit; | |
| font-family: var(--mono); | |
| } | |
| .code-accordion { | |
| border: 1px solid rgba(249, 115, 22, 0.2); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| margin: 12px 0; | |
| background: #17181c; | |
| } | |
| .code-accordion summary { | |
| list-style: none; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| padding: 9px 12px; | |
| font-family: var(--mono); | |
| font-size: 11.5px; | |
| font-weight: 700; | |
| color: #e7e7ea; | |
| background: #1e2027; | |
| user-select: none; | |
| overflow-wrap: anywhere; | |
| } | |
| .code-accordion summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .code-accordion summary::before { | |
| content: "▸"; | |
| color: var(--accent); | |
| transition: transform 0.12s; | |
| } | |
| .code-accordion[open] summary::before { | |
| transform: rotate(90deg); | |
| } | |
| .code-accordion .code-ico { | |
| color: var(--accent); | |
| font-weight: 700; | |
| } | |
| .code-accordion pre.hl { | |
| margin: 0; | |
| border-radius: 0; | |
| border: none; | |
| border-top: 1px solid rgba(249, 115, 22, 0.16); | |
| } | |
| .tok-comment { | |
| color: #7a7d87; | |
| font-style: italic; | |
| } | |
| .tok-string { | |
| color: #a5d6a7; | |
| } | |
| .tok-keyword { | |
| color: #fdba74; | |
| } | |
| .tok-number { | |
| color: #7fd0e0; | |
| } | |
| #page a { | |
| color: var(--accent); | |
| } | |
| #page ul { | |
| padding-left: 20px; | |
| } | |
| .ts { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| color: var(--muted); | |
| background: none; | |
| padding: 0; | |
| } | |
| /* ---- notebook-style cells ---- */ | |
| .cell { | |
| max-width: 100%; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.86); | |
| margin: 18px 0; | |
| overflow: hidden; | |
| box-shadow: 0 2px 10px rgba(31, 41, 55, 0.035); | |
| } | |
| .cell-head { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 16px; | |
| align-items: center; | |
| padding: 14px 18px; | |
| background: rgba(255, 255, 255, 0.92); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .cell-head.no-title { | |
| justify-content: flex-end; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| } | |
| .cell-title { | |
| flex: 1; | |
| min-width: 0; | |
| font-size: 15.5px; | |
| font-weight: 650; | |
| color: var(--ink); | |
| line-height: 1.35; | |
| overflow-wrap: anywhere; | |
| } | |
| .cell-meta { | |
| flex: 0 0 auto; | |
| font-family: var(--sans); | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .cell-body { | |
| min-width: 0; | |
| padding: 14px 18px 18px; | |
| } | |
| #page .cell-body h1, | |
| #page .cell-body h2 { | |
| font-family: var(--sans); | |
| font-size: 17px; | |
| font-weight: 700; | |
| letter-spacing: -0.01em; | |
| line-height: 1.35; | |
| margin: 22px 0 6px; | |
| } | |
| #page .cell-body > :first-child { | |
| margin-top: 0; | |
| } | |
| #page .cell-body > :last-child { | |
| margin-bottom: 0; | |
| } | |
| .cell.code .cell-head { | |
| background: #fbfbfc; | |
| } | |
| .figure-frame { | |
| display: block; | |
| width: 100%; | |
| min-height: 420px; | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| background: #fff; | |
| } | |
| .figure-frame[hidden], | |
| .figure-raw[hidden] { | |
| display: none; | |
| } | |
| .fig-switch { | |
| position: relative; | |
| display: inline-flex; | |
| flex: 0 0 auto; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: var(--code-bg); | |
| padding: 2px; | |
| } | |
| .fig-switch button { | |
| position: relative; | |
| z-index: 1; | |
| flex: 1; | |
| min-width: 62px; | |
| border: none; | |
| background: none; | |
| font-family: var(--sans); | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| padding: 3px 12px; | |
| border-radius: 999px; | |
| cursor: pointer; | |
| transition: color 0.15s; | |
| } | |
| .fig-switch button.active { | |
| color: var(--accent-strong); | |
| } | |
| .fig-switch-thumb { | |
| position: absolute; | |
| top: 2px; | |
| bottom: 2px; | |
| left: 2px; | |
| width: calc(50% - 2px); | |
| border-radius: 999px; | |
| background: var(--panel); | |
| border: 1px solid rgba(249, 115, 22, 0.35); | |
| box-shadow: 0 1px 4px rgba(31, 41, 55, 0.08); | |
| transition: transform 0.18s ease; | |
| } | |
| .fig-switch.raw .fig-switch-thumb { | |
| transform: translateX(100%); | |
| } | |
| #page .figure-raw pre { | |
| margin: 0; | |
| max-height: 420px; | |
| overflow: auto; | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| line-height: 1.55; | |
| background: var(--code-bg); | |
| border: 1px solid var(--line); | |
| border-radius: 8px; | |
| padding: 12px 14px; | |
| } | |
| /* ---- copyable snippets ---- */ | |
| .snippet { | |
| position: relative; | |
| } | |
| .copy-snippet { | |
| position: absolute; | |
| top: 7px; | |
| right: 8px; | |
| width: 24px; | |
| height: 24px; | |
| border: none; | |
| border-radius: 6px; | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #9a9da8; | |
| font-size: 12px; | |
| line-height: 1; | |
| cursor: pointer; | |
| opacity: 0; | |
| transition: opacity 0.12s, color 0.12s, background 0.12s; | |
| } | |
| .snippet:hover .copy-snippet, | |
| .jp-out:hover .copy-snippet, | |
| .figure-raw:hover .copy-snippet, | |
| .code-accordion summary:hover .copy-snippet { | |
| opacity: 1; | |
| } | |
| .copy-snippet:hover { | |
| color: #ffffff; | |
| background: rgba(255, 255, 255, 0.16); | |
| } | |
| .copy-snippet.copied { | |
| color: #52d08a; | |
| opacity: 1; | |
| } | |
| .code-accordion .code-name { | |
| user-select: text; | |
| cursor: text; | |
| } | |
| .jp-out, | |
| .figure-raw { | |
| position: relative; | |
| } | |
| .jp-out .copy-snippet, | |
| .figure-raw .copy-snippet { | |
| background: var(--code-bg); | |
| color: var(--muted); | |
| border: 1px solid var(--line); | |
| } | |
| .jp-out .copy-snippet:hover, | |
| .figure-raw .copy-snippet:hover { | |
| color: var(--accent-strong); | |
| background: var(--panel); | |
| } | |
| /* ---- jupyter-style code cells ---- */ | |
| .jp { | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin: 12px 0; | |
| background: var(--panel); | |
| } | |
| .jp-gutter { | |
| flex: 0 0 46px; | |
| padding: 13px 0 0 13px; | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| user-select: none; | |
| } | |
| .jp-in { | |
| display: flex; | |
| background: #17181c; | |
| } | |
| .jp-in .jp-gutter { | |
| color: #6f727d; | |
| } | |
| .jp-in-body { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| #page .jp-in-body pre.hl { | |
| margin: 0; | |
| border: none; | |
| border-radius: 0; | |
| background: none; | |
| padding: 12px 16px 12px 0; | |
| } | |
| .jp-in-body .code-accordion { | |
| margin: 0; | |
| border: none; | |
| border-top: 1px solid rgba(255, 255, 255, 0.09); | |
| border-radius: 0; | |
| background: none; | |
| } | |
| .jp-in-body .code-accordion summary { | |
| background: none; | |
| padding: 9px 16px 9px 0; | |
| } | |
| .jp-in-body .code-accordion pre.hl { | |
| border-top: 1px solid rgba(255, 255, 255, 0.09); | |
| } | |
| .jp-meta { | |
| padding: 5px 14px; | |
| font-family: var(--mono); | |
| font-size: 11.5px; | |
| color: var(--muted); | |
| background: #fbfbfc; | |
| border-top: 1px solid var(--line); | |
| } | |
| .jp-out { | |
| display: flex; | |
| border-top: 1px solid var(--line); | |
| background: var(--panel); | |
| } | |
| .jp-out .jp-gutter { | |
| color: var(--accent-strong); | |
| } | |
| #page .jp-out-pre { | |
| flex: 1; | |
| min-width: 0; | |
| margin: 0; | |
| border: none; | |
| border-radius: 0; | |
| background: none; | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| line-height: 1.55; | |
| padding: 12px 16px 12px 0; | |
| white-space: pre; | |
| overflow-x: auto; | |
| overflow-y: auto; | |
| max-height: 26em; | |
| } | |
| .trackio-embed { | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| background: var(--panel); | |
| } | |
| .trackio-cell-meta { | |
| display: flex; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| } | |
| /* ---- unfurl cards ---- */ | |
| .unfurl { | |
| display: block; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| background: var(--panel); | |
| margin: 12px 0; | |
| overflow: hidden; | |
| text-decoration: none; | |
| color: inherit; | |
| transition: border-color 0.14s, box-shadow 0.14s; | |
| } | |
| .unfurl:hover { | |
| border-color: #cfcbe6; | |
| box-shadow: 0 4px 18px rgba(30, 20, 80, 0.06); | |
| } | |
| .unfurl-body { | |
| padding: 13px 16px; | |
| display: flex; | |
| gap: 12px; | |
| align-items: flex-start; | |
| } | |
| .unfurl-ico { | |
| font-size: 20px; | |
| line-height: 1.3; | |
| flex: 0 0 auto; | |
| } | |
| .unfurl-main { | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .unfurl-kind { | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .unfurl-title { | |
| font-weight: 650; | |
| font-size: 15px; | |
| margin: 1px 0 2px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .unfurl-desc { | |
| color: var(--muted); | |
| font-size: 13.5px; | |
| line-height: 1.45; | |
| } | |
| .unfurl-meta { | |
| margin-top: 6px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .chip { | |
| font-size: 11.5px; | |
| background: var(--code-bg); | |
| border-radius: 999px; | |
| padding: 2px 9px; | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| } | |
| .unfurl-raw { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| color: var(--muted); | |
| border-top: 1px solid var(--line); | |
| padding: 7px 16px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .unfurl.embed { | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .embed-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .embed-head .unfurl-kind { | |
| flex: 0 0 auto; | |
| } | |
| .embed-title { | |
| flex: 1; | |
| min-width: 0; | |
| font-weight: 650; | |
| font-size: 14px; | |
| color: var(--ink); | |
| text-decoration: none; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .embed-title:hover { | |
| color: var(--accent); | |
| } | |
| .embed-open { | |
| flex: 0 0 auto; | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| .embed-frame { | |
| display: block; | |
| width: 100%; | |
| height: 560px; | |
| border: 0; | |
| background: var(--code-bg); | |
| } | |
| .unfurl.image { | |
| padding: 0; | |
| } | |
| .unfurl.image img { | |
| display: block; | |
| width: 100%; | |
| height: auto; | |
| max-height: 460px; | |
| object-fit: contain; | |
| background: var(--code-bg); | |
| } | |
| .artifact-chip { | |
| border: 1px solid var(--line); | |
| background: var(--panel); | |
| border-radius: var(--radius); | |
| padding: 10px 14px; | |
| margin: 8px 0; | |
| font-size: 14px; | |
| } | |
| .artifact-chip code { | |
| color: var(--accent); | |
| } | |
| /* ---- task board ---- */ | |
| .board-wrap { | |
| overflow-x: auto; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| margin: 12px 0 20px; | |
| background: var(--panel); | |
| } | |
| table.board { | |
| border-collapse: collapse; | |
| width: 100%; | |
| font-size: 14px; | |
| } | |
| table.board th, | |
| table.board td { | |
| text-align: left; | |
| padding: 9px 14px; | |
| border-bottom: 1px solid var(--line); | |
| vertical-align: top; | |
| } | |
| table.board thead th { | |
| background: var(--accent-soft); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: #9a4a12; | |
| font-weight: 600; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| table.board tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| table.board .col-check { | |
| text-align: center; | |
| width: 92px; | |
| white-space: nowrap; | |
| } | |
| table.board tr.section-row td { | |
| background: var(--accent-soft); | |
| text-align: center; | |
| font-weight: 700; | |
| font-size: 13px; | |
| color: var(--accent-strong); | |
| padding: 7px 14px; | |
| letter-spacing: 0.02em; | |
| } | |
| .box { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 18px; | |
| height: 18px; | |
| border: 1.5px solid #cfcbe0; | |
| border-radius: 5px; | |
| font-size: 12px; | |
| color: #fff; | |
| line-height: 1; | |
| } | |
| .box.on { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| .who-chip { | |
| display: inline-block; | |
| padding: 3px 12px; | |
| border-radius: 999px; | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| } | |
| .who-chip.muted { | |
| background: var(--code-bg); | |
| color: var(--muted); | |
| font-weight: 500; | |
| } | |
| /* ---- status badges + clickable rows ---- */ | |
| table.board .col-status { | |
| width: 130px; | |
| white-space: nowrap; | |
| } | |
| .badge { | |
| display: inline-block; | |
| padding: 3px 11px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| letter-spacing: 0.01em; | |
| } | |
| .badge.gray { | |
| background: var(--code-bg); | |
| color: var(--muted); | |
| } | |
| .badge.amber { | |
| background: var(--accent-soft); | |
| color: #b45309; | |
| } | |
| .badge.green { | |
| background: #e6f7ee; | |
| color: #1a8a55; | |
| } | |
| .badge.red { | |
| background: #fde8ec; | |
| color: #c62a4b; | |
| } | |
| table.board tr.linked-row { | |
| cursor: pointer; | |
| } | |
| table.board tr.linked-row:hover td { | |
| background: var(--accent-soft); | |
| } | |
| table.board tr.linked-row a { | |
| color: var(--ink); | |
| font-weight: 600; | |
| text-decoration: none; | |
| } | |
| table.board tr.linked-row:hover a { | |
| color: var(--accent-strong); | |
| } | |
| /* ---- agent read hint ---- */ | |
| .agent-hint { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin: 4px 0 22px; | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| } | |
| #page .agent-hint code { | |
| background: var(--code-bg); | |
| padding: 2px 9px; | |
| border-radius: 6px; | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--ink); | |
| } | |
| .agent-hint .copy { | |
| flex: 0 0 auto; | |
| background: none; | |
| color: var(--muted); | |
| border: 1px solid var(--line); | |
| border-radius: 6px; | |
| width: 22px; | |
| height: 22px; | |
| font-size: 11px; | |
| line-height: 1; | |
| cursor: pointer; | |
| transition: color 0.12s, border-color 0.12s; | |
| } | |
| .agent-hint .copy:hover { | |
| color: var(--accent-strong); | |
| border-color: var(--accent); | |
| } | |
| .agent-hint .copy.copied { | |
| color: #1a8a55; | |
| border-color: #1a8a55; | |
| } | |
| .agent-hint-note { | |
| margin-left: auto; | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| /* ---- inline resource chips ---- */ | |
| #page .res-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| max-width: 100%; | |
| padding: 0 9px 0 6px; | |
| margin: 0 1px; | |
| border: 1px solid var(--line); | |
| border-radius: 999px; | |
| background: var(--panel); | |
| font-family: var(--mono); | |
| font-size: 0.78em; | |
| font-weight: 600; | |
| color: var(--ink); | |
| text-decoration: none; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| vertical-align: middle; | |
| line-height: 1.65; | |
| transform: translateY(-0.08em); | |
| transition: border-color 0.12s, background 0.12s, color 0.12s; | |
| } | |
| .res-chip-ico { | |
| font-size: 1.05em; | |
| line-height: 1; | |
| } | |
| #page .res-chip:hover, | |
| #page .res-chip.res-hl { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| color: var(--accent-strong); | |
| } | |
| #page a.res-link.res-hl { | |
| background: var(--accent-soft); | |
| border-radius: 4px; | |
| } | |
| .rail-item.res-hl { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| box-shadow: 0 3px 12px rgba(249, 115, 22, 0.14); | |
| } | |
| .rail-item.res-hl .rail-title { | |
| color: var(--accent-strong); | |
| } | |
| .rail-item.rail-local { | |
| cursor: default; | |
| } | |
| .artifact-chip.res-hl { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| /* ---- resources rail ---- */ | |
| #rail { | |
| width: 248px; | |
| flex: 0 0 248px; | |
| margin-left: 36px; | |
| position: sticky; | |
| top: 48px; | |
| align-self: flex-start; | |
| max-height: calc(100vh - 72px); | |
| overflow-y: auto; | |
| } | |
| #rail[hidden] { | |
| display: block; | |
| visibility: hidden; | |
| } | |
| .rail-section { | |
| margin-bottom: 24px; | |
| } | |
| .rail-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| font-weight: 600; | |
| color: var(--muted); | |
| margin-bottom: 8px; | |
| } | |
| .rail-head .rail-ico { | |
| font-size: 13px; | |
| } | |
| .rail-count { | |
| margin-left: 4px; | |
| color: var(--accent); | |
| } | |
| .rail-item { | |
| display: block; | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| background: var(--panel); | |
| padding: 9px 12px; | |
| margin-bottom: 8px; | |
| text-decoration: none; | |
| color: inherit; | |
| transition: border-color 0.14s, box-shadow 0.14s; | |
| } | |
| .rail-item:hover { | |
| border-color: rgba(249, 115, 22, 0.45); | |
| box-shadow: 0 3px 12px rgba(31, 41, 55, 0.06); | |
| } | |
| .rail-title { | |
| font-family: var(--mono); | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| color: var(--ink); | |
| overflow-wrap: anywhere; | |
| line-height: 1.4; | |
| } | |
| .rail-item:hover .rail-title { | |
| color: var(--accent-strong); | |
| } | |
| .rail-meta { | |
| font-size: 11.5px; | |
| color: var(--muted); | |
| margin-top: 2px; | |
| } | |
| @media (max-width: 1180px) { | |
| #content { | |
| flex-wrap: wrap; | |
| } | |
| #rail { | |
| width: 100%; | |
| flex: 1 1 100%; | |
| margin-left: 0; | |
| margin-top: 28px; | |
| position: static; | |
| max-height: none; | |
| max-width: 760px; | |
| } | |
| #rail[hidden] { | |
| display: none; | |
| } | |
| } | |
| /* ---- connect footer + modal ---- */ | |
| #sidebar-foot { | |
| margin-top: auto; | |
| padding-top: 14px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| #connect-btn { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: rgba(255, 255, 255, 0.05); | |
| color: #c3c4cb; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 9px; | |
| padding: 9px 12px; | |
| font-size: 13.5px; | |
| font-family: var(--sans); | |
| cursor: pointer; | |
| transition: background 0.12s, color 0.12s, border-color 0.12s; | |
| } | |
| #connect-btn:hover { | |
| background: rgba(249, 115, 22, 0.14); | |
| border-color: rgba(249, 115, 22, 0.4); | |
| color: #fdba74; | |
| } | |
| #connect-btn .ico { | |
| font-size: 15px; | |
| } | |
| #modal[hidden] { | |
| display: none; | |
| } | |
| #modal { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 100; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| } | |
| .modal-backdrop { | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(20, 18, 30, 0.5); | |
| backdrop-filter: blur(2px); | |
| } | |
| .modal-card { | |
| position: relative; | |
| background: var(--panel); | |
| border-radius: 16px; | |
| width: 100%; | |
| max-width: 620px; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| box-shadow: 0 24px 70px rgba(20, 15, 50, 0.28); | |
| } | |
| .modal-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 18px 22px; | |
| border-bottom: 1px solid var(--line); | |
| position: sticky; | |
| top: 0; | |
| background: var(--panel); | |
| } | |
| .modal-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-family: var(--serif); | |
| font-size: 21px; | |
| letter-spacing: -0.01em; | |
| } | |
| .modal-logo { | |
| width: 26px; | |
| height: 26px; | |
| object-fit: contain; | |
| } | |
| .modal-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn { | |
| font-family: var(--sans); | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| border: 1px solid var(--line); | |
| background: var(--panel); | |
| color: var(--ink); | |
| border-radius: 9px; | |
| padding: 8px 13px; | |
| cursor: pointer; | |
| transition: background 0.12s, border-color 0.12s, color 0.12s; | |
| } | |
| .btn:hover { | |
| border-color: var(--accent); | |
| color: var(--accent-strong); | |
| } | |
| .btn.copied { | |
| border-color: #1a8a55; | |
| color: #1a8a55; | |
| } | |
| .btn.icon { | |
| font-size: 18px; | |
| line-height: 1; | |
| padding: 6px 11px; | |
| font-weight: 400; | |
| } | |
| .modal-body { | |
| padding: 20px 22px 26px; | |
| } | |
| .modal-intro { | |
| margin: 0 0 20px; | |
| color: var(--muted); | |
| line-height: 1.55; | |
| } | |
| #connect-steps { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #connect-steps li { | |
| margin-bottom: 18px; | |
| } | |
| .step-title { | |
| font-weight: 600; | |
| font-size: 14.5px; | |
| margin-bottom: 8px; | |
| } | |
| .codeblock { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: #17181c; | |
| border-radius: 10px; | |
| padding: 11px 12px 11px 15px; | |
| } | |
| .codeblock code { | |
| flex: 1; | |
| min-width: 0; | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| color: #f0efff; | |
| background: none; | |
| padding: 0; | |
| } | |
| .codeblock .copy { | |
| flex: 0 0 auto; | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #c3c4cb; | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| border-radius: 7px; | |
| width: 30px; | |
| height: 30px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: background 0.12s, color 0.12s; | |
| } | |
| .codeblock .copy:hover { | |
| background: rgba(249, 115, 22, 0.2); | |
| color: #fdba74; | |
| } | |
| .codeblock .copy.copied { | |
| color: #52d08a; | |
| } | |
| @media (max-width: 720px) { | |
| #app { | |
| flex-direction: column; | |
| } | |
| #sidebar { | |
| width: 100%; | |
| flex: none; | |
| height: auto; | |
| position: static; | |
| } | |
| #content { | |
| display: block; | |
| width: 100%; | |
| padding: 28px 20px 80px; | |
| overflow-x: hidden; | |
| } | |
| #page { | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| #page h1 { | |
| font-size: 30px; | |
| } | |
| .cell-head { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| } | |