:root { --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f0f2f8; --line: #e3e6ef; --text: #1c2230; --muted: #6b7280; --brand: #3b5bdb; --brand-ink: #2f49ad; --brand-soft: #eaeefb; --ok: #1f9d57; --bad: #d6455b; --warn: #c2820a; --radius: 12px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04); --shadow-lg: 0 8px 28px rgba(16,24,40,.10); color-scheme: light; } /* ── dark theme (toggled via ) ── */ :root[data-theme="dark"] { --bg: #0e1220; --surface: #171c2b; --surface-2: #1f2638; --line: #2b3349; --text: #e7e9f3; --muted: #9aa3b8; --brand: #6f8bff; --brand-ink: #93a8ff; --brand-soft: #1d2742; --ok: #3fbf78; --bad: #ef6b80; --warn: #e0a23a; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); --shadow-lg: 0 10px 30px rgba(0,0,0,.55); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 28px; margin: 4px 0 6px; letter-spacing: -.01em; } h2 { font-size: 20px; margin: 26px 0 12px; letter-spacing: -.01em; } h3 { font-size: 16px; margin: 18px 0 8px; } p { margin: 10px 0; } .muted { color: var(--muted); } .small { font-size: 13px; } /* ── top bar ── */ .topbar { display: flex; align-items: center; gap: 26px; padding: 12px 26px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .brand { font-weight: 700; color: var(--text); font-size: 17px; display: flex; align-items: center; gap: 7px; } .brand:hover { text-decoration: none; } .brand-mark { color: var(--brand); } .mainnav { display: flex; gap: 20px; } .mainnav a { color: var(--muted); font-weight: 500; } .mainnav a:hover { color: var(--text); text-decoration: none; } .mainnav a.op { color: var(--brand); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .userbox { display: flex; align-items: center; gap: 12px; } .userbox .email { color: var(--muted); font-size: 13px; } /* theme toggle */ .theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 9px; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; transition: border-color .12s, background-color .12s, color .12s; } .theme-toggle:hover { border-color: var(--brand); color: var(--brand); } .theme-toggle:focus-visible { outline: 2px solid var(--brand-soft); border-color: var(--brand); } .theme-ico { font-size: 16px; transition: transform .2s ease; } .theme-toggle:hover .theme-ico { transform: rotate(-18deg) scale(1.06); } /* ── workspace sub bar ── */ .subbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 53px; z-index: 15; } .subbar-inner { max-width: 1060px; margin: 0 auto; padding: 0 26px; display: flex; align-items: center; gap: 22px; height: 46px; } .ws-name { font-weight: 600; color: var(--text); } .subnav { display: flex; gap: 18px; } .subnav a { color: var(--muted); font-size: 14px; padding: 12px 0; border-bottom: 2px solid transparent; } .subnav a:hover { color: var(--text); text-decoration: none; } .subnav a.active { color: var(--brand); border-bottom-color: var(--brand); } .subnav a.op { color: var(--brand); margin-left: auto; } /* ── layout ── */ .container { max-width: 1060px; margin: 0 auto; padding: 30px 26px 70px; } .foot { max-width: 1060px; margin: 0 auto; padding: 24px 26px 40px; color: var(--muted); font-size: 12.5px; } .foot .env { color: var(--warn); font-weight: 600; text-transform: uppercase; } /* ── cards & grids ── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 16px 0; box-shadow: var(--shadow); } .card.narrow { max-width: 640px; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } @media (max-width: 820px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; color: var(--text); transition: border-color .12s, box-shadow .12s, transform .12s; } a.tile:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .tile .tile-ico { font-size: 22px; } .tile h3 { margin: 0; } .tile .tile-sub { color: var(--muted); font-size: 13px; } /* link cards by type */ .linkcard { display: flex; gap: 13px; align-items: flex-start; } .linkcard .ico { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-size: 18px; flex: none; } .linkcard .meta { min-width: 0; } .linkcard .meta .lbl { font-weight: 600; } .linkcard .meta .url { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── stats ── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 16px 0; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } .stat .num { font-size: 26px; font-weight: 700; } .stat .lbl { color: var(--muted); font-size: 13px; } /* ── buttons ── */ .btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 9px 15px; border-radius: 9px; cursor: pointer; font-size: 14px; font-family: inherit; font-weight: 500; } .btn:hover { border-color: var(--brand); text-decoration: none; } .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { background: var(--brand-ink); } .btn.ghost { background: transparent; } .btn.danger { background: #fff; border-color: #f0c4cb; color: var(--bad); } .btn.sm { padding: 6px 11px; font-size: 13px; } /* ── forms ── */ .field { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; } .field > span { font-size: 13px; color: var(--muted); font-weight: 500; } input, select, textarea { background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: 9px 11px; border-radius: 9px; font: inherit; width: 100%; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); } textarea { resize: vertical; } textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; } .row .field { flex: 1; min-width: 150px; margin: 6px 0; } .inline { display: flex; gap: 8px; align-items: center; } .check { display: inline-flex; gap: 7px; align-items: center; } .check input { width: auto; } /* ── tables ── */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .table-wrap { overflow-x: auto; } /* ── badges / chips ── */ .badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; } .badge.ok { background: #e6f6ee; color: var(--ok); } .badge.bad { background: #fbe9ec; color: var(--bad); } .badge.warn { background: #fdf3e0; color: var(--warn); } .badge.muted { background: var(--surface-2); color: var(--muted); } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 2px 10px; font-size: 12px; color: var(--muted); } /* ── flash ── */ .flash { padding: 12px 15px; border-radius: 10px; margin: 14px 0; border: 1px solid; } .flash.error { background: #fbe9ec; border-color: #f0c4cb; color: var(--bad); } .flash.notice { background: var(--brand-soft); border-color: #c9d4f6; color: var(--brand-ink); } /* ── rendered content ── */ .content { font-size: 15.5px; } .content h2 { margin-top: 28px; } .content img, .content figure.image img { max-width: 100%; border-radius: 10px; } .content figure { margin: 18px 0; } .content figure.image.bordered img { border: 1px solid var(--line); } .content figure.image.stretched img { width: 100%; } .content figcaption { color: var(--muted); font-size: 13px; margin-top: 6px; text-align: center; } .content blockquote { margin: 0; padding: 4px 16px; border-left: 3px solid var(--brand); color: #374151; } .content pre.code, .content pre { background: #0f1426; color: #e7e9f3; padding: 14px 16px; border-radius: 10px; overflow-x: auto; font-size: 13px; } .content pre code { background: none; color: inherit; padding: 0; } .content code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; } .content hr.delimiter { border: none; text-align: center; margin: 22px 0; } .content hr.delimiter::before { content: "* * *"; color: var(--muted); letter-spacing: .4em; } .content table.content-table td, .content table.content-table th { border: 1px solid var(--line); } .content ul.checklist { list-style: none; padding-left: 4px; } /* embeds */ .embed { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .embed-fallback a { font-weight: 600; } /* docs/repo browser */ .filelist { list-style: none; padding: 0; margin: 0; } .filelist li { border-bottom: 1px solid var(--line); } .filelist li a { display: flex; gap: 10px; align-items: center; padding: 9px 6px; color: var(--text); } .filelist li a:hover { text-decoration: none; background: var(--surface-2); } .filelist .fi { width: 18px; color: var(--muted); } .breadcrumb { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13.5px; margin: 8px 0 14px; } .breadcrumb a { color: var(--brand); } .sidebar-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; } @media (max-width: 860px) { .sidebar-layout { grid-template-columns: 1fr; } } .highlight { background: #f7f8fc; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: 13px; } .highlight pre { margin: 0; } /* landing */ .hero { text-align: center; padding: 60px 20px 30px; } .hero h1 { font-size: 34px; } .hero p { color: var(--muted); font-size: 17px; max-width: 560px; margin: 12px auto 26px; } .pagehead { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; flex-wrap: wrap; } .actions { display: flex; gap: 8px; flex-wrap: wrap; } .divider { height: 1px; background: var(--line); margin: 22px 0; border: 0; } .empty { text-align: center; color: var(--muted); padding: 30px; } /* ── dark-mode fixes for the few hardcoded light colours ── */ :root[data-theme="dark"] .btn.danger { background: var(--surface); border-color: #5a2a33; } :root[data-theme="dark"] .flash.error { background: #34141b; border-color: #5a2a33; } :root[data-theme="dark"] .flash.notice { border-color: #2f3e6e; } :root[data-theme="dark"] .badge.ok { background: #13301f; } :root[data-theme="dark"] .badge.bad { background: #341820; } :root[data-theme="dark"] .badge.warn { background: #332611; } :root[data-theme="dark"] .content blockquote { color: #c3cad8; } :root[data-theme="dark"] .highlight { background: var(--surface-2); } /* Keep the authoring surface light (Notion-like) even in dark mode. */ :root[data-theme="dark"] .editor-holder { background: #fff; color: #1c2230; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; } :root[data-theme="dark"] .editor-holder a { color: var(--brand-ink); } /* ── education smart filtering ── */ .edu-controls { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; margin: 16px 0 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px; } .edu-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; row-gap: 9px; } .edu-row.groupby { border-bottom: 1px dashed var(--line); padding-bottom: 18px; } .edu-ctrl-label { min-width: 96px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding-top: 6px; } .edu-chiprow { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; align-items: center; } /* selectable blocks: rectangular with one cut corner (top-right) */ .edu-facet, .edu-groupbtn { --chamfer: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); padding: 7px 14px; border-radius: 3px; font: inherit; font-size: 13px; cursor: pointer; clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .12s ease; } .edu-facet:hover, .edu-groupbtn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); } .edu-facet:active, .edu-groupbtn:active { transform: translateY(0); } .edu-facet:focus-visible, .edu-groupbtn:focus-visible { outline: 2px solid var(--brand-soft); } .edu-facet.active { background: var(--brand); border-color: var(--brand); color: #fff; } .edu-groupbtn.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; } /* "View all" block leads each row; subtly distinct (dashed until active) */ .edu-viewall { background: transparent; color: var(--muted); border-style: dashed; } .edu-viewall:hover { color: var(--brand); } .edu-viewall.active { background: var(--surface-2); border-style: solid; border-color: var(--brand); color: var(--brand-ink); font-weight: 600; } .edu-clear { margin-left: auto; } .edu-group-title { display: flex; align-items: baseline; gap: 9px; font-size: 18px; margin: 28px 0 14px; letter-spacing: -.01em; animation: eduRise .18s ease both; } .edu-group-title .edu-count { color: var(--muted); font-size: 13px; font-weight: 500; } .edu-noresults { text-align: center; color: var(--muted); padding: 38px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); animation: eduRise .18s ease both; } #edu-results .grid { animation: eduRise .2s ease both; } @keyframes eduRise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .tile-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; } .tile-tag { background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px 9px; font-size: 11.5px; color: var(--muted); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); } .edu-fieldgroup { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .edu-fieldgroup > .edu-dim-label { font-size: 13px; color: var(--muted); font-weight: 600; } .edu-checkrow { display: flex; gap: 14px; flex-wrap: wrap; } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { .edu-facet, .edu-groupbtn, .edu-group-title, .edu-noresults, #edu-results .grid, .theme-ico, .tile { transition: none !important; animation: none !important; } }