518 lines · 8.5 KB · CSS
RawDownload
/* Dark GitHub-ish palette. */body {  font:    15px/1.55 ui-sans-serif,    system-ui;  margin: 0;  color: #d7dce5;  background: #0b0f17;}.page {  max-width: 920px;  margin: 0 auto;  padding: 24px;}a {  color: #58a6ff;  text-decoration: none;}h1 {  font-size: 17px;  margin: 0 0 4px;}.hint {  color: #6b7785;  font-size: 13px;  margin-top: 2px;}.dim {  color: #3d4651;}.stamp {  color: #3d4651;  font-size: 12px;  margin-top: 1.2rem;}.ok-text {  color: #7ee787;}.error-text {  color: #ff7b72;} /* matrix */table {  border-collapse: collapse;  width: 100%;  margin-top: 1rem;}th,td {  padding: 0.5rem 0.7rem;  border-bottom: 1px solid #161b22;  text-align: left;  font-size: 14px;}th {  color: #6b7785;  font-weight: 600;}a.watch {  display: inline-block;  padding: 0.2rem 0.55rem;  border: 1px solid #21262d;  border-radius: 7px;  background: #0f1620;  white-space: nowrap;  font-weight: 600;}a.watch:hover {  border-color: #388bfd;  background: #101a2a;}a.watch.ok {  color: #7ee787;}a.watch.no {  color: #ff7b72;}.d {  color: #6b7785;  font-weight: 400;  font-size: 12px;} /* run page */.topbar {  display: flex;  justify-content: space-between;  align-items: center;  margin-bottom: 12px;}.tool-link {  font-size: 13px;  border: 1px solid #21262d;  border-radius: 7px;  background: #0f1620;  padding: 0.25rem 0.7rem;  margin-left: 8px;}.tool-link:hover {  border-color: #388bfd;}.errbox {  background: #160b0b;  border: 1px solid #6e2a2a;  color: #ff7b72;  border-radius: 8px;  padding: 0.7rem 0.9rem;  font-size: 12.5px;  overflow: auto;  max-height: 320px;  white-space: pre-wrap;}.hero-video {  display: block;  width: 100%;  margin-top: 0.8rem;  border: 1px solid #21262d;  border-radius: 10px;  background: #010409;}.shots {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  gap: 12px;  margin-top: 1rem;}.shots figure {  margin: 0;}.shots img {  display: block;  width: 100%;  border: 1px solid #21262d;  border-radius: 8px;}.shots figcaption {  color: #8b98a9;  font-size: 12.5px;  margin-top: 4px;} /* test source (monaco) */.section {  font-size: 13px;  color: #6b7785;  font-weight: 600;  margin: 1.2rem 0 0.5rem;  text-transform: uppercase;  letter-spacing: 0.04em;}.code {  border: 1px solid #21262d;  border-radius: 8px;  overflow: hidden;} /* run-page tabs (video / source) */.tabs {  display: flex;  gap: 6px;  margin: 1rem 0 0.6rem;  border-bottom: 1px solid #161b22;}.tab {  font: inherit;  font-size: 13px;  color: #6b7785;  background: none;  border: none;  border-bottom: 2px solid transparent;  padding: 0.35rem 0.7rem;  cursor: pointer;}.tab:hover {  color: #d7dce5;}.tab.active {  color: #d7dce5;  border-bottom-color: #388bfd;} .cast-player {  margin-top: 12px;  border-radius: 8px;  overflow: hidden;  border: 1px solid #2a2a2a;} /* session player — synthetic window chrome + synced two-recording stage */.player {  margin-top: 0.8rem;}.chrome {  display: flex;  align-items: center;  gap: 10px;  background: #161b22;  border: 1px solid #21262d;  border-bottom: none;  border-radius: 10px 10px 0 0;  padding: 7px 12px;  min-height: 22px;}.chrome .lights {  display: inline-flex;  gap: 6px;}.chrome .lights i {  width: 11px;  height: 11px;  border-radius: 50%;  background: #2d333b;}.chrome.browser .lights i:nth-child(1) {  background: #ff5f57;}.chrome.browser .lights i:nth-child(2) {  background: #febc2e;}.chrome.browser .lights i:nth-child(3) {  background: #28c840;}.chrome.terminal .lights i:nth-child(1) {  background: #ff5f57;}.chrome.terminal .lights i:nth-child(2) {  background: #febc2e;}.chrome.terminal .lights i:nth-child(3) {  background: #28c840;}.urlbar {  flex: 1;  font:    12.5px ui-monospace,    SFMono-Regular,    Menlo,    monospace;  color: #aeb8c4;  background: #0b0f17;  border: 1px solid #21262d;  border-radius: 7px;  padding: 4px 10px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}.urlbar .lock {  color: #58a6ff;  margin-right: 7px;}.termtitle {  flex: 1;  text-align: center;  font-size: 12.5px;  color: #6b7785;}.chrome-link {  font-size: 12px;  color: #58a6ff;  white-space: nowrap;}/* Fixed 16:10 stage (the browser records at 1280x800): the size never   changes when the act cuts between terminal and browser — both   recordings letterbox into the same box, like one screen. */.stage {  border: 1px solid #21262d;  border-radius: 0 0 10px 10px;  overflow: hidden;  background: #010409;  aspect-ratio: 16 / 10;  position: relative;}.stage .layer {  position: absolute;  inset: 0;  display: flex;  align-items: center;  justify-content: center;}.stage .layer video {  display: block;  max-width: 100%;  max-height: 100%;}.stage .layer .cast-stage {  width: 100%;  max-height: 100%;  overflow: hidden;}.cast-stage :is(.ap-player) {  border-radius: 0;} /* transport bar */.transport {  display: flex;  align-items: center;  gap: 12px;  margin-top: 10px;}.playbtn {  font: inherit;  font-size: 14px;  width: 38px;  height: 30px;  color: #d7dce5;  background: #0f1620;  border: 1px solid #21262d;  border-radius: 7px;  cursor: pointer;}.playbtn:hover {  border-color: #388bfd;}.scrub {  position: relative;  flex: 1;  height: 22px;  cursor: pointer;}.scrub .seg {  position: absolute;  top: 8px;  height: 6px;  border-radius: 3px;}.scrub .seg.terminal {  background: #1f3d2b;}.scrub .seg.browser {  background: #1d3a5f;}.scrub .tick {  position: absolute;  top: 5px;  width: 2px;  height: 12px;  background: #d29922;  opacity: 0.85;}.scrub .head {  position: absolute;  top: 2px;  width: 2px;  height: 18px;  background: #e6edf3;  box-shadow: 0 0 6px #58a6ff;}.clock {  font:    12px ui-monospace,    SFMono-Regular,    Menlo,    monospace;  color: #6b7785;  min-width: 86px;  text-align: right;} /* timeline-aligned trace table */.trace-now td {  background: #14222e;}.seeklink {  font:    12px ui-monospace,    SFMono-Regular,    Menlo,    monospace;  color: #58a6ff;  background: none;  border: none;  padding: 0;  cursor: pointer;}.seeklink:hover {  text-decoration: underline;} /* session player split: stage left, trace rail right */.page:has(.player-split) {  max-width: 1340px;}.player-split {  display: flex;  gap: 14px;  align-items: stretch;}.player-main {  flex: 1;  min-width: 0;}.trace-rail {  width: 300px;  flex: none;  max-height: 700px;  overflow-y: auto;  border: 1px solid #21262d;  border-radius: 10px;  background: #0d1219;}.rail-head {  position: sticky;  top: 0;  background: #161b22;  border-bottom: 1px solid #21262d;  padding: 7px 12px;  font-size: 12px;  font-weight: 600;  color: #6b7785;  text-transform: uppercase;  letter-spacing: 0.04em;  display: flex;  justify-content: space-between;  align-items: baseline;  z-index: 1;}.rail-sub {  font-weight: 400;  text-transform: none;  letter-spacing: 0;  font-size: 11px;  color: #3d4651;}.trace-row {  padding: 6px 12px 7px;  border-bottom: 1px solid #141a22;  cursor: pointer;}.trace-row:hover {  background: #101722;}.trace-row.now {  background: #14222e;  box-shadow: inset 2px 0 0 #388bfd;}.trace-line {  display: flex;  align-items: baseline;  gap: 8px;  font:    11.5px ui-monospace,    SFMono-Regular,    Menlo,    monospace;}.trace-at {  color: #58a6ff;  flex: none;}.trace-path {  flex: 1;  min-width: 0;  color: #8b98a9;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}.trace-ms {  flex: none;  color: #7ee787;}.trace-ms.slow {  color: #d29922;  font-weight: 700;}.trace-ms.err {  color: #ff7b72;  font-weight: 700;}.trace-meter {  display: flex;  align-items: center;  gap: 8px;  margin-top: 4px;}.trace-meter .trace-bar {  display: block;  height: 4px;  border-radius: 2px;  background: #2ea04366;  border-right: 2px solid #2ea043;}.trace-meter .trace-bar.slow {  background: #d2992266;  border-right-color: #d29922;}.trace-id {  margin-left: auto;  font:    10.5px ui-monospace,    SFMono-Regular,    Menlo,    monospace;  color: #3d4651;}.trace-id:hover {  color: #58a6ff;

Lines 1–500 of 518.