Spaces:
Running
Running
| * { box-sizing:border-box; } | |
| :root { --teal:#0f766e; --highlight:#a8e1d9; --line:#e0e8e6; --quiet:#7d8b88; } | |
| body { margin:0; background:#fff; color:#222c2a; font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } | |
| main { width:min(1320px,calc(100% - 64px)); margin:24px auto; } | |
| header { color:var(--teal); font-size:18px; font-weight:650; } | |
| h1 { max-width:980px; margin:16px 0 12px; font-size:clamp(23px,3vw,28px); font-weight:550; letter-spacing:-.6px; line-height:1.3; } | |
| h2 { margin:0; font-size:17px; font-weight:650; } | |
| button,a { -webkit-tap-highlight-color:transparent; } | |
| button { font:inherit; cursor:pointer; border:0; border-radius:8px; background:#222c2a; color:#fff; padding:10px 18px; white-space:nowrap; } | |
| button:hover { background:var(--teal); } | |
| button:disabled { cursor:default; opacity:.45; } | |
| button>span { margin-left:10px; font-size:11px; } | |
| .controls { display:flex; align-items:center; gap:14px; } | |
| #speed { font:inherit; font-size:13px; color:#667570; border:0; background:transparent; padding:8px 2px; cursor:pointer; } | |
| #clear { background:none; color:#667570; padding:8px 0; font-size:13px; } | |
| :focus-visible { outline:2px solid var(--teal); outline-offset:4px; } | |
| .standalone-guide { color:#667570; font-size:13px; margin-bottom:28px; } | |
| .relay-bar { display:flex; align-items:center; gap:24px; padding-bottom:16px; border-bottom:1px solid var(--line); } | |
| .topology { display:flex; flex:1; min-width:0; gap:25px; margin:0; padding:0; list-style:none; } | |
| .topology li { position:relative; display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:12px; } | |
| .topology strong { display:grid; place-items:center; flex-shrink:0; width:23px; height:23px; background:#f1f5f4; border-radius:50%; color:#5f706a; font-size:11px; } | |
| .topology span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } | |
| .topology li:not(:last-child)::after { content:"→"; position:absolute; right:-19px; color:#8c9b97; font-size:16px; } | |
| .topology li.reached strong { background:#d5eeea; color:var(--teal); } | |
| .method { margin-top:22px; } | |
| .method-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; } | |
| .method-name,.run-status { display:flex; align-items:center; gap:12px; } | |
| .channel-label { font-size:12px; color:#6b7974; } | |
| #rclc-title { color:var(--teal); } | |
| .activity { display:flex; align-items:center; gap:6px; font-size:11px; color:#7d8b88; } | |
| .activity::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; } | |
| .activity.running::before { animation:pulse 1.2s ease-in-out infinite; } | |
| .activity.complete { color:var(--teal); } | |
| .time { min-width:78px; text-align:right; font-size:19px; line-height:1; letter-spacing:-.4px; font-variant-numeric:tabular-nums; } | |
| #rclc-time { color:var(--teal); } | |
| .row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } | |
| .chunk { position:relative; height:320px; min-width:0; border-top:1px solid var(--line); padding-top:12px; display:flex; flex-direction:column; } | |
| .source-title { display:flex; justify-content:space-between; gap:8px; margin:0 0 12px; color:#53665f; font-size:11px; font-weight:600; } | |
| .source-title>span { color:#90a09a; font-weight:400; white-space:nowrap; } | |
| .document-body,.message-body { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#c9d4d0 transparent; padding-right:10px; white-space:pre-wrap; overflow-wrap:anywhere; } | |
| .document-body { font:11.5px/1.85 Georgia,"Times New Roman",serif; color:#68776f; } | |
| mark { color:#104f47; background:var(--highlight); box-decoration-break:clone; -webkit-box-decoration-break:clone; } | |
| .source.is-selecting mark { animation:highlight var(--selection-duration,.3s) ease-out both; } | |
| .source.is-selecting .document-body { background:linear-gradient(180deg,transparent,#eef9f6 50%,transparent) 0 -300px/100% 150px no-repeat; animation:scan var(--selection-duration,.3s) linear both; } | |
| .position-map { width:100%; height:13px; display:block; margin:12px 0 0; border-radius:2px; } | |
| .position-map rect { fill:#e7edeb; } | |
| .position-map rect.selected { fill:var(--teal); } | |
| .source.is-selecting .position-map { animation:pulse .65s ease-in-out infinite; } | |
| .source>.position-map { margin:0; flex-shrink:0; } | |
| .source>.handoff { margin-bottom:12px; } | |
| .handoff { display:flex; align-items:center; gap:8px; position:relative; height:29px; flex-shrink:0; color:#95a49e; font-size:10px; } | |
| .handoff>span { position:relative; z-index:1; background:white; padding-right:8px; } | |
| .handoff::after { content:"→"; position:absolute; right:-18px; color:#b3c2bc; font-size:16px; } | |
| .handoff-track { position:absolute; left:0; right:-13px; bottom:5px; height:1px; background:#e7eeeb; } | |
| .packet { position:absolute; left:0; top:-4px; display:flex; gap:2px; opacity:0; } | |
| .packet i { width:5px; height:9px; border-radius:1px; background:var(--teal); } | |
| .source.has-passed .handoff { color:var(--teal); } | |
| .source.has-passed .handoff::after { color:var(--teal); } | |
| .source.has-passed .packet { animation:pass-state 1.1s cubic-bezier(.2,.6,.3,1) both; } | |
| .message-body { font-size:12px; line-height:1.75; color:#56665f; } | |
| .message-title { color:#788980; } | |
| .message-card.is-writing .message-body::after { content:""; display:inline-block; height:1em; width:2px; background:#55665e; vertical-align:text-bottom; margin-left:3px; animation:cursor .8s steps(1) infinite; } | |
| .message-card .handoff::after { color:#9ca9a3; } | |
| .message-card.has-passed .handoff { color:#53665f; } | |
| .placeholder { color:#a4afa9; font-size:11px; line-height:1.65; white-space:normal; margin:0; } | |
| .waiting-state { display:flex; gap:5px; margin:24px 0 12px; } | |
| .waiting-state i { width:6px; height:6px; background:#e2e9e6; border-radius:50%; } | |
| .is-writing .waiting-state i { animation:pulse .9s ease-in-out infinite; } | |
| .answer { padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#f9fbfa; } | |
| .answer .source-title { margin-bottom:12px; } | |
| .answer-check { margin:0 0 12px; font-size:16px; font-weight:650; line-height:1.45; color:var(--teal); } | |
| .answer.complete { background:#f1f9f7; border-color:#c9e7df; } | |
| .answer.unresolved { background:#fcfaf6; border-color:#ece4d4; } | |
| .unresolved .answer-check { color:#956724; font-size:14px; } | |
| .answer.is-writing .source-title { color:var(--teal); } | |
| .answer .message-body { font-size:12px; } | |
| strong { font-weight:650; } | |
| footer { display:flex; justify-content:space-between; gap:20px; margin-top:24px; font-size:10px; color:#8a9992; } | |
| footer p { margin:0; } | |
| footer a { flex-shrink:0; } | |
| a { color:inherit; text-underline-offset:3px; } | |
| #error { color:#8e2b1d; } | |
| .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } | |
| .embedded header,.embedded #question,.embedded .standalone-guide { display:none; } | |
| .embedded main { margin:20px auto; } | |
| @keyframes highlight { from { background-color:transparent; color:#68776f; } to { background-color:var(--highlight); color:#104f47; } } | |
| @keyframes scan { to { background-position:0 400px; } } | |
| @keyframes pulse { 50% { opacity:.4; } } | |
| @keyframes cursor { 50% { opacity:0; } } | |
| @keyframes pass-state { 0% { left:0; opacity:0; } 15% { opacity:1; } 80% { opacity:1; } 100% { left:calc(100% - 24px); opacity:0; } } | |
| @media(max-width:900px) { | |
| main { width:calc(100% - 36px); } | |
| .relay-bar { gap:16px; } | |
| .topology { gap:16px; } | |
| .topology li { gap:5px; font-size:10px; } | |
| .topology li:not(:last-child)::after { right:-12px; font-size:13px; } | |
| .controls { gap:8px; } | |
| button { padding:9px 12px; } | |
| .row { gap:16px; } | |
| .handoff::after { right:-13px; } | |
| .handoff-track { right:-8px; } | |
| .source-title>span { display:none; } | |
| } | |
| @media(max-width:680px) { | |
| .relay-bar { flex-wrap:wrap; } | |
| .topology { flex-basis:100%; } | |
| .controls { margin-left:auto; } | |
| .method-heading { align-items:flex-start; } | |
| .method-name { align-items:flex-start; flex-direction:column; gap:2px; } | |
| .run-status { flex-direction:column-reverse; align-items:flex-end; gap:7px; } | |
| .time { font-size:18px; } | |
| .row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } | |
| .chunk { height:280px; } | |
| .chunk:nth-child(2) .handoff::after { right:0; content:"↓"; } | |
| .chunk:nth-child(2) .handoff-track { right:5px; } | |
| footer { flex-direction:column; gap:8px; } | |
| } | |
| @media(max-width:420px) { | |
| main { width:calc(100% - 28px); } | |
| .row { gap:14px; } | |
| .document-body { font-size:10.5px; } | |
| .message-body { font-size:11px; } | |
| .channel-label { font-size:10px; } | |
| .source-title { font-size:10px; } | |
| .topology span { font-size:9px; } | |
| .topology strong { width:18px; height:18px; font-size:9px; } | |
| .answer { padding-inline:10px; } | |
| .answer-check { font-size:14px; } | |
| } | |
| @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none ; } } | |