.hero { display: grid; grid-template-columns: 1fr 280px; align-items: center; gap: var(--space-8); padding-block: 76px 64px; }
.hero h1 { margin-top: var(--space-6); font-size: clamp(48px, 5.8vw, 80px); letter-spacing: -.045em; line-height: 1.03; color: var(--mark); }
.hero h1 span { color: var(--muted); }
.hero-description { margin-top: var(--space-6); color: var(--muted); font-size: 20px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-8); }
.hero-actions .button { background: transparent; }
.hero-actions .button:hover { background: var(--raised); }
.hero-actions .button span { color: var(--accent-text); }
.orrery { position: relative; display: grid; place-items: center; width: 280px; height: 280px; }
.orrery img { width: 88px; height: auto; z-index: 1; }
.orbit { position: absolute; border: 1px solid var(--border-strong); border-radius: 50%; }
.orbit-one { width: 244px; height: 244px; }
.orbit-two { width: 280px; height: 136px; transform: rotate(-38deg); }
.orbit-three { width: 192px; height: 244px; transform: rotate(38deg); border-color: var(--border); }
.orbit-axis { position: absolute; height: 280px; border-left: 1px dashed var(--border); transform: rotate(38deg); }
.orbit-point { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--mark); }
.point-one { top: 39px; right: 62px; background: var(--anchor); }
.point-two { bottom: 44px; left: 50px; }
.point-three { right: 28px; bottom: 107px; width: 4px; height: 4px; background: var(--accent); }
.orbit-caption { position: absolute; bottom: -28px; color: var(--faint); font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.product-figure { margin-block: 0; }
.app-window { overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--panel); font-size: 12px; line-height: 1.5; }
.app-toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.app-mark { height: auto; width: 26px; }
.item-count { padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-chip); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.item-arrows { font-size: 18px; }
.app-item-title { font-weight: 600; font-size: 14px; }
.review-marks { display: flex; gap: var(--space-2); margin-left: auto; white-space: nowrap; }
.review-marks > span { padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); }
.mark-reviewed { color: var(--success); }
.mark-changes { color: var(--warning); }
.review-marks .mark-todo { color: var(--accent-text); background: var(--selected); border-color: var(--accent); }
.toolbar-end { color: var(--faint); padding-left: var(--space-2); font-size: 20px; }
.app-progress { display: flex; gap: var(--space-1); padding-inline: var(--space-3); }
.app-progress span { height: 3px; flex: 1; background: var(--border-strong); border-radius: 2px; }
.app-progress span:first-child { background: var(--mark); }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 388px; }
.app-source { display: flex; flex-direction: column; min-width: 0; background: var(--code-bg); }
.file-tab { display: flex; align-items: center; gap: var(--space-2); align-self: flex-start; padding: var(--space-2) var(--space-4); border-top: 2px solid var(--anchor); border-right: 1px solid var(--border); font-family: var(--mono); font-size: 11px; }
.app-muted { color: var(--faint); font-weight: 400; }
.anchor-icon { color: var(--anchor); }
.source-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.source-path { margin-right: auto; white-space: nowrap; font-size: 11px; }
.source-path .app-muted { margin-left: var(--space-2); }
.app-segments { display: flex; gap: var(--space-1); color: var(--muted); font-size: 11px; }
.app-segments > span { padding: 4px 8px; border-radius: var(--radius-control); }
.app-segments .is-active { color: var(--text); background: var(--bg); outline: 1px solid var(--border); }
.code-editor { padding-block: var(--space-6); }
.code-line { display: grid; grid-template-columns: 56px minmax(0, 1fr); min-height: 28px; line-height: 28px; }
.line-number { padding-right: var(--space-4); text-align: right; color: var(--faint); font-family: var(--mono); font-size: 11px; }
.code-line code { padding-inline: var(--space-4) var(--space-2); border-left: 2px solid transparent; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--syntax-plain); }
.kw { color: var(--syntax-keyword); }
.type { color: var(--syntax-type); }
.fn { color: var(--syntax-function); }
.anchored { background: var(--band); }
.anchored code { border-left-color: var(--anchor); }
.anchored .line-number { color: var(--text); }
.code-footnote { display: flex; gap: var(--space-2); margin-top: auto; padding: var(--space-4); color: var(--muted); font-size: 11px; }
.app-inspector { padding: var(--space-3); border-left: 1px solid var(--border); }
.context-panel { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--raised); }
.app-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .055em; }
.context-panel .app-label { display: flex; justify-content: space-between; margin-bottom: var(--space-3); }
.anchor-chip { display: inline-block; margin-top: var(--space-3); padding: 2px 8px; color: var(--muted); border: 1px solid var(--border-strong); border-radius: var(--radius-chip); font-family: var(--mono); font-size: 10px; }
.discussion-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-4); font-size: 11px; }
.discussion-heading > span:nth-child(2) { margin-left: auto; padding-inline: var(--space-2); }
.comment-card { padding: var(--space-3); background: var(--raised); border: 1px solid var(--accent); border-radius: var(--radius-card); }
.comment-anchor { font-family: var(--mono); color: var(--accent-text); font-size: 10px; }
.comment-author { display: flex; align-items: center; gap: var(--space-2); margin-block: var(--space-3) var(--space-2); font-size: 11px; }
.comment-author .app-muted { margin-left: auto; font-size: 10px; }
.avatar { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--faint); border-radius: 50%; font-size: 9px; color: var(--muted); }
.guest-avatar { color: var(--accent-text); border-color: var(--accent); }
.comment-card p { margin-left: 28px; font-size: 12px; line-height: 1.6; }
.comment-reply { padding-top: var(--space-1); }
.comment-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); margin-left: 28px; }
.comment-actions span { border: 1px solid var(--border-strong); border-radius: var(--radius-chip); padding: 2px 8px; font-size: 10px; }
.app-status { display: flex; justify-content: space-between; gap: var(--space-4); padding: 6px 12px; border-top: 1px solid var(--border); background: var(--bg); font-family: var(--mono); font-size: 10px; }
.app-status > span:first-child { color: var(--success); }
.app-status > span:last-child { color: var(--muted); }
figcaption { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); color: var(--muted); font-size: 12px; }
figcaption > span:last-child { color: var(--faint); }
.native-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2) var(--space-8); padding-block: var(--space-12); color: var(--faint); font-size: 14px; }
.native-strip > p:first-child { color: var(--muted); }
.section-space { padding-block: 88px; }
.section-intro .eyebrow { margin-bottom: var(--space-6); }
.section-intro h2 { color: var(--mark); font-size: clamp(36px, 4vw, 52px); letter-spacing: -.035em; }
.section-intro > p:last-child:not(.eyebrow) { max-width: 392px; margin-top: var(--space-6); color: var(--muted); }
.workflow, .reading { display: grid; grid-template-columns: 1fr 1.1fr; gap: 96px; border-top: 1px solid var(--border); }
.review-file-flow { display: flex; align-items: center; flex-direction: column; justify-content: center; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--panel); }
.review-file { position: relative; display: flex; align-items: flex-start; flex-direction: column; gap: var(--space-3); width: 232px; padding: var(--space-6); border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--raised); }
.review-file img { height: auto; margin-bottom: var(--space-3); }
.review-file > span:not(.file-fold, .file-detail) { font-family: var(--mono); color: var(--mark); font-size: 18px; }
.review-file .file-detail { font-family: var(--ui); font-size: 12px; color: var(--muted); }
.file-fold { position: absolute; top: -1px; right: -1px; width: 28px; height: 28px; border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); background: var(--panel); border-bottom-left-radius: var(--radius-control); }
.flow-connection { display: flex; flex-direction: column; align-items: center; color: var(--anchor); font-family: var(--mono); font-size: 16px; line-height: 1; }
.flow-connection span { width: 1px; height: 24px; background: var(--border-strong); }
.repository { display: flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100%; padding: var(--space-4); border-top: 1px solid var(--border-strong); }
.repo-icon { color: var(--accent-text); font-size: 24px; }
.repository strong { font-size: 14px; }
.repository p { font-size: 12px; color: var(--muted); }
.commit-dots { color: var(--faint); white-space: nowrap; font-size: 12px; }
.reading { gap: 80px; }
.reading-details { min-width: 0; }
.detail-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-8); border-bottom: 1px solid var(--border); }
.detail-row:first-child { padding-top: 0; }
.detail-row:last-child { border: 0; padding-bottom: 0; }
.detail-index { color: var(--faint); font: 11px/24px var(--mono); }
.detail-row h3 { font-size: 21px; }
.detail-row p { margin-top: var(--space-3); color: var(--muted); font-size: 16px; }
.view-list, .shortcuts, .mark-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); font-size: 12px; }
.view-list > span:not(.revision-label) { border: 1px solid var(--border-strong); border-radius: var(--radius-chip); padding: 4px 12px; }
.revision-label { color: var(--faint); }
.shortcuts { gap: var(--space-4); color: var(--muted); }
kbd { display: inline-block; min-width: 28px; padding: 2px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-chip); background: var(--panel); color: var(--text); font-size: 11px; text-align: center; }
.mark-legend span:first-child { color: var(--success); }
.mark-legend span:nth-child(2) { color: var(--warning); }
.mark-legend span:last-child { color: var(--accent-text); }
.live-section { border-block: 1px solid var(--border); background: var(--panel); }
.live-heading { display: grid; grid-template-columns: 1fr 1.1fr; align-items: end; gap: 96px; }
.live-heading > p { max-width: 464px; color: var(--muted); }
.live-heading strong { color: var(--text); }
.live-diagram { display: grid; grid-template-columns: 160px 1fr 96px 1fr 160px; align-items: center; margin-block: 56px; padding: var(--space-8); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); }
.install-node { display: grid; justify-items: center; gap: var(--space-2); padding-block: var(--space-4); color: var(--mark); font-size: 14px; }
.install-node img { width: 32px; height: auto; margin-bottom: var(--space-2); }
.install-node .node-label { font: 10px var(--mono); color: var(--faint); }
.encrypted-line { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; padding-top: var(--space-8); text-align: center; color: var(--accent-text); font: 11px var(--mono); }
.encrypted-line > span:first-child { position: absolute; width: 100%; top: 42%; border-top: 1px solid var(--accent); }
.relay-node { display: grid; justify-items: center; gap: var(--space-2); color: var(--muted); font-size: 12px; }
.relay-orbit { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--faint); font-size: 24px; }
.live-facts { display: grid; grid-template-columns: 1fr 1.1fr; gap: 96px; }
.live-facts h3 { font-size: 20px; }
.live-facts p { max-width: 472px; margin-top: var(--space-4); font-size: 16px; color: var(--muted); }
.closing { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); }
.closing-mark { width: 56px; height: auto; }
.closing .eyebrow { margin-bottom: var(--space-3); }
.closing h2 { color: var(--mark); font-size: clamp(28px, 3vw, 36px); letter-spacing: -.025em; }
.closing h2 + p { max-width: 472px; margin-top: var(--space-4); color: var(--muted); font-size: 16px; }
.access-note { padding-left: var(--space-8); border-left: 1px solid var(--border-strong); }
.access-note > p:last-child { margin-top: var(--space-3); color: var(--muted); font-size: 13px; }
.site-footer a { color: var(--muted); text-decoration: none; }
@media (min-width: 1600px) {
  .hero { padding-block: 96px 80px; }
}
@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr 224px; }
  .orrery { transform: scale(.8); transform-origin: center; width: 224px; }
  .hero-description { font-size: 18px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .app-body { grid-template-columns: minmax(0, 1fr) 264px; }
  .item-arrows, .toolbar-end { display: none; }
  .review-marks > span { padding: 4px 8px; }
  .source-toolbar { gap: var(--space-2); }
  .source-path { width: 100%; }
  .code-line { grid-template-columns: 32px minmax(0, 1fr); }
  .code-line code { padding-left: var(--space-2); font-size: 11px; }
  .line-number { padding-right: var(--space-2); }
  .workflow, .reading, .live-heading, .live-facts { gap: var(--space-12); }
  .repository { gap: var(--space-3); padding-inline: 0; }
  .commit-dots { display: none; }
  .review-file-flow { padding: var(--space-6); }
  .live-diagram { grid-template-columns: 128px 1fr 72px 1fr 128px; padding: var(--space-6) var(--space-3); }
  .closing { gap: var(--space-6); }
}
@media (max-width: 700px) {
  .hero { position: relative; display: block; padding-block: 52px 40px; }
  .hero h1 { font-size: clamp(44px, 8vw, 60px); }
  .hero .eyebrow { max-width: 260px; font-size: 10px; }
  .hero-description { max-width: 440px; font-size: 17px; }
  .desktop-break { display: none; }
  .orrery { display: none; }
  .hero-actions { margin-top: var(--space-6); }
  .hero-actions .status { font-size: 12px; }
  .app-toolbar { flex-wrap: wrap; padding: var(--space-3); gap: var(--space-2); }
  .app-item-title { font-size: 12px; }
  .app-mark { width: 20px; }
  .item-count { font-size: 9px; }
  .review-marks { width: 100%; margin-top: var(--space-1); margin-left: 0; gap: var(--space-2); }
  .review-marks > span { flex: 1; text-align: center; padding: 4px; font-size: 10px; }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-source { min-height: 324px; }
  .app-inspector { border-left: 0; border-top: 1px solid var(--border); }
  .source-toolbar { gap: var(--space-3); }
  .source-path { font-size: 10px; }
  .app-segments { font-size: 10px; gap: 0; }
  .app-segments > span { padding: 4px 6px; }
  .revisions { margin-left: auto; }
  .code-line { min-height: 24px; line-height: 24px; grid-template-columns: 24px minmax(0, 1fr); }
  .code-line code { font-size: 10px; }
  .line-number { font-size: 9px; }
  .code-editor { padding-block: var(--space-4); }
  .code-footnote { padding: var(--space-3); font-size: 10px; }
  .context-panel { padding: var(--space-3); }
  .context-panel > p:not(.app-label) { font-size: 12px; }
  .comment-card p { max-width: 440px; }
  figcaption { flex-direction: column; gap: var(--space-1); font-size: 11px; }
  .native-strip { justify-content: flex-start; flex-direction: column; padding-block: var(--space-8); font-size: 13px; }
  .section-space { padding-block: var(--space-12); }
  .workflow, .reading, .live-heading, .live-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .section-intro h2 { font-size: 38px; }
  .section-intro .eyebrow { margin-bottom: var(--space-4); }
  .section-intro > p:last-child:not(.eyebrow) { max-width: 480px; margin-top: var(--space-4); font-size: 16px; }
  .review-file-flow { padding: var(--space-6) var(--space-4); }
  .repository { gap: var(--space-4); }
  .reading-details { padding-top: var(--space-2); }
  .detail-row { grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-6); }
  .detail-row h3 { font-size: 19px; }
  .detail-row p { font-size: 15px; }
  .view-list { gap: var(--space-2); }
  .view-list .revision-label { flex-basis: 100%; }
  .live-heading > p { font-size: 16px; }
  .live-diagram { grid-template-columns: 1fr; gap: 0; margin-block: var(--space-8); padding: var(--space-6); }
  .install-node { padding: var(--space-3); }
  .encrypted-line { min-height: 56px; padding: 0 0 0 120px; font-size: 10px; }
  .encrypted-line > span:first-child { height: 48px; width: 1px; border: 0; border-left: 1px solid var(--accent); top: 4px; left: 50%; }
  .relay-node { padding-block: var(--space-2); }
  .relay-orbit { width: 36px; height: 36px; font-size: 20px; }
  .live-facts { gap: var(--space-6); }
  .live-facts p { font-size: 15px; margin-top: var(--space-3); }
  .closing { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .closing-mark { width: 40px; }
  .closing h2 { font-size: 32px; }
  .access-note { padding-left: var(--space-4); }
}