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: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, 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; | |
| 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%; | |
| max-width: 760px; | |
| } | |
| #page h1 { | |
| font-family: var(--serif); | |
| font-size: 34px; | |
| line-height: 1.15; | |
| letter-spacing: -0.02em; | |
| margin: 0 0 8px; | |
| } | |
| #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 { | |
| 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; | |
| } | |
| /* ---- code blocks + collapsible accordion ---- */ | |
| #page pre.hl { | |
| background: #17181c; | |
| border: none; | |
| color: #e7e7ea; | |
| font-size: 12.5px; | |
| line-height: 1.55; | |
| } | |
| #page pre.hl code { | |
| color: inherit; | |
| font-family: var(--mono); | |
| } | |
| .code-accordion { | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| margin: 12px 0; | |
| background: #17181c; | |
| } | |
| .code-accordion summary { | |
| list-style: none; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 9px; | |
| padding: 10px 14px; | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| color: #e7e7ea; | |
| background: #1e2027; | |
| user-select: none; | |
| } | |
| .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; | |
| } | |
| .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; | |
| } | |
| /* ---- 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); | |
| } | |
| /* ---- 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 { | |
| padding: 28px 20px 80px; | |
| } | |
| } | |