:root { color-scheme: dark; font: 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; background:#111; color:#d4d4d4; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; } header { height:58px; display:flex; gap:22px; align-items:center; padding:0 20px; border-bottom:1px solid #303030; background:#181818; } .brand { color:#fff; text-decoration:none; font-weight:750; font-size:18px; letter-spacing:-.3px; } .brand span { color:#6ca7dd; font-weight:500; } form { display:flex; gap:8px; flex:1; max-width:750px; } input { min-width:0; flex:1; border:1px solid #4a4a4a; color:inherit; background:#242424; padding:8px 10px; border-radius:5px; } button { border:0; border-radius:5px; background:#1769aa; color:white; padding:8px 12px; cursor:pointer; } button:hover { background:#2781c8; } .welcome { max-width:720px; margin:15vh auto; padding:0 24px; } h1 { font-size:34px; letter-spacing:-.8px; line-height:1.15; } code { color:#9cdcfe; } #app { height:calc(100vh - 58px); display:grid; grid-template-columns:280px 1fr; } #sidebar { border-right:1px solid #303030; padding:16px 12px; overflow:auto; } #repo-name { color:#fff; font-weight:650; overflow-wrap:anywhere; padding:0 8px 12px; } #status { color:#aaa; padding:0 8px 12px; font-size:13px; } #diagram-list { display:grid; gap:4px; } .diagram { width:100%; text-align:left; background:transparent; color:#d4d4d4; padding:9px 8px; } .diagram:hover,.diagram.active { background:#2a2d2e; } .diagram small { display:block; color:#999; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; } #viewer { position:relative; min-width:0; } #diagram-frame { border:0; display:block; width:100%; height:100%; background:#1e1e1e; } #source { position:absolute; inset:0 0 0 auto; width:min(54%,760px); background:#171717; border-left:1px solid #484848; display:flex; flex-direction:column; box-shadow:-8px 0 24px #0006; } .source-title { padding:10px 12px; border-bottom:1px solid #363636; display:flex; gap:12px; align-items:center; color:#9cdcfe; font:12px ui-monospace,monospace; overflow:hidden; } #source-path { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; } #close-source { padding:0 7px; background:transparent; font-size:20px; line-height:1; } #source-code { margin:0; padding:12px 16px; overflow:auto; white-space:pre; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; } .line { display:block; padding:0 8px; margin:0 -8px; } .line.focus { background:rgba(255,213,0,.18); border-left:3px solid #ffd500; padding-left:5px; } .sr-only { position:absolute; clip:rect(0,0,0,0); } @media (max-width:720px) { header { padding:0 10px; gap:10px; } .brand span { display:none; } #app { grid-template-columns:185px 1fr; } #source { width:100%; } }