/* ==========================================================================
   Srusan v2 — Sirus page and knowledge base, minimal
   Author: Sanjay Sivakumar (github.com/SruSanCyborg)
   Loaded after v2.css and sirus.css; maps their tokens onto paper and ink.
   ========================================================================== */

:root {
  /* Tokens the shared Sirus components read, set for paper. */
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: #e2e0d9;
  --ink-2: #4a4945;
  --muted: #8f8d86;
  --line-2: rgba(11, 11, 10, .22);
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --term: #0b0b0a;
  --allow: #13915a;
  --verify: #3d5afe;
  --constrain: #c77a00;
  --block: #ff3b2f;
  --cyan: var(--red);
  --violet: var(--red);
  --grad: linear-gradient(90deg, var(--red), var(--red));
}

/* Terminals stay dark: give their contents the dark-side tokens back. */
.term, .docs pre {
  --ink: #f3f1ec; --ink-2: #c9c7c1; --muted: #7d7c77; --line: rgba(243, 241, 236, .12); --line-2: rgba(243, 241, 236, .22);
  --allow: #1fb26b; --verify: #5b8cff; --constrain: #ffb020;
}
.term { background: var(--term); color: var(--ink); border-color: transparent; box-shadow: none; }

.mono { font-family: var(--f-mono); font-weight: 500; font-style: normal; color: var(--red); letter-spacing: -.06em; word-spacing: -.3em; font-size: .86em; }
.wrap { width: 100%; max-width: none; padding-left: var(--g); padding-right: var(--g); }
.footer .wrap { padding-left: 0; padding-right: 0; }

/* ---------- Page frame ---------- */
.sx { padding: 0; }
.sx-sec { padding: clamp(100px, 13vw, 190px) var(--g) 0; }
.sx-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.sx-split > * { min-width: 0; }
.sx-p { margin-top: 26px; max-width: 56ch; color: var(--ink-2); font-size: clamp(15px, 1.15vw, 18px); }
.sx-note { margin-top: 14px; font-size: 13px; color: var(--mute); }
.sx-note code, .sx-p code { font-family: var(--f-mono); font-size: .9em; }

/* ---------- Hero ---------- */
.sx-hero { padding: 120px var(--g) 0; }
.crumbs i { background: var(--line-2); }
.crumbs span { color: var(--ink); }
.sx-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(28px, 4vw, 52px); }
.sx-hero-grid > * { min-width: 0; }
.sx-badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.sx-title { margin-top: 22px; font-size: clamp(2.8rem, 6.4vw, 7.4rem); }
.sx-lede { margin-top: 28px; max-width: 50ch; color: var(--ink-2); font-size: clamp(15px, 1.15vw, 18px); }
.sx-install { margin-top: 30px; }
.cmd { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 440px; padding: 6px 6px 6px 18px; border: 1px solid var(--line-2); border-radius: 10px; }
.cmd + .cmd { margin-top: 10px; }
.cmd code { font-family: var(--f-mono); font-size: 15px; white-space: nowrap; overflow-x: auto; }
.cmd code span { color: var(--red); margin-right: 6px; }
.cmd code i { font-style: normal; }
.cmd-copy { flex-shrink: 0; padding: 9px 14px; border-radius: 6px; font-family: var(--f-mono); font-size: 12px; background: var(--paper-2); transition: background-color .3s; }
.cmd-copy:hover { background: #dedcd5; }
.sx-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.sx-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 100px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; transition: background-color .3s; }
.sx-btn:hover { background: var(--red); }
.sx-btn svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.sx-btn-ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.sx-btn-ghost:hover { background: var(--ink); color: var(--paper); }
.sx-btn-ghost:hover svg { transform: rotate(45deg); }
.feed-rows { height: 280px; }
.feed-sum { border-top-color: rgba(243, 241, 236, .12); }

/* ---------- Numbers ---------- */
.sx-nums { display: grid; grid-template-columns: repeat(5, 1fr); margin: clamp(80px, 10vw, 140px) var(--g) 0; border-top: 1.5px solid var(--ink); }
.sx-num { padding: 26px 20px 0 0; }
.sx-num b { display: block; font-family: var(--f-display); font-variation-settings: "wdth" 100; font-weight: 600; font-size: clamp(2.6rem, 5vw, 5.6rem); line-height: .9; letter-spacing: -.06em; }
.sx-num:first-child b { color: var(--red); }
.sx-num > span { display: block; margin-top: 12px; font-size: 13px; color: var(--mute); max-width: 20ch; }

/* ---------- Verdicts ---------- */
.vlist { margin-top: clamp(40px, 5vw, 70px); border-top: 1.5px solid var(--ink); }
.v { display: grid; grid-template-columns: 180px 1fr auto; align-items: baseline; gap: 20px; padding: clamp(20px, 2.2vw, 30px) 0; border-bottom: 1px solid var(--line); }
.v-tag { font-family: var(--f-mono); font-size: clamp(16px, 1.5vw, 22px); font-weight: 500; letter-spacing: .02em; }
.v-a .v-tag { color: var(--allow); } .v-v .v-tag { color: var(--verify); } .v-c .v-tag { color: var(--constrain); } .v-b .v-tag { color: var(--block); }
.v-t { font-family: var(--f-display); font-variation-settings: "wdth" 100; font-weight: 600; font-size: clamp(1.2rem, 2vw, 2rem); letter-spacing: -.035em; line-height: 1.1; }
.v-e { font-family: var(--f-mono); font-size: 12px; color: var(--mute); text-align: right; }

/* ---------- Six checks ---------- */
.checks6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 70px); }
.c6 { border-top: 1.5px solid var(--ink); padding: 22px 0 48px; }
.c6-n { font-family: var(--f-mono); font-size: 12px; color: var(--red); }
.c6 h3 { margin: 26px 0 10px; font-family: var(--f-display); font-variation-settings: "wdth" 100; font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.4rem); letter-spacing: -.045em; }
.c6 p { color: var(--ink-2); font-size: 15px; }
.c6 code { display: block; margin-top: 16px; font-family: var(--f-mono); font-size: 12px; color: var(--red); }

/* ---------- Injection (pinned) ---------- */
.sx-inject { padding: clamp(100px, 13vw, 190px) var(--g) 0; }
.sx-inject .h2 { font-size: clamp(2rem, 4vw, 4.4rem); }
.inject-steps li { border-top-color: var(--line); color: var(--mute); }
.inject-steps li b { color: var(--ink-2); }
.inject-steps li.is-on { color: var(--ink-2); }
.inject-steps li.is-on b { color: var(--ink); }
.ladder .ln.is-now { background: rgba(243, 241, 236, .06); }

/* ---------- Meter, table, chain on paper ---------- */
.meter { background: none; border: 0; border-top: 1.5px solid var(--ink); border-radius: 0; padding: 32px 0 0; }
.meter-track { background: var(--paper-2); }
.meter-fill { background: linear-gradient(90deg, rgba(11, 11, 10, .06), rgba(255, 59, 47, .35)); }
.meter-pin { background: var(--ink); }
.meter-out { border-top-color: var(--line); color: var(--ink-2); }
.sx-money { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 32px; }
.sx-money b { display: block; font-family: var(--f-display); font-variation-settings: "wdth" 100; font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 2.2rem); letter-spacing: -.04em; }
.sx-money span { font-size: 13px; color: var(--mute); }
.score-table { margin-top: 6px; }
.score-table th, .score-table td { border-bottom-color: var(--line); }
.score-table td { color: #bdbbb4; }
.score-table th:first-child, .score-table td:first-child { color: var(--ink); }
.row-none td { border-top-color: var(--ink); }
.chain { margin: clamp(40px, 5vw, 64px) 0 24px; }
.blk { background: var(--paper); border-color: var(--line-2); }
.blk b { color: var(--allow); }
.chain.is-tampered .blk-target { background: rgba(255, 59, 47, .08); }
.trail-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trail-out > * { min-width: 0; }

/* ---------- Scan, ops, CI ---------- */
.formula { border-color: var(--line-2); }
.formula i { color: var(--red); }
.sx-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 70px); }
.sx-op { border-top: 1.5px solid var(--ink); padding-top: 24px; }
.sx-op b { display: block; font-family: var(--f-display); font-variation-settings: "wdth" 100; font-weight: 600; font-size: clamp(2.4rem, 4.4vw, 4.6rem); line-height: .95; letter-spacing: -.06em; }
.sx-op span { display: block; margin: 14px 0 16px; color: var(--ink-2); font-size: 15px; max-width: 34ch; }
.sx-op code { font-family: var(--f-mono); font-size: 12px; color: var(--red); }
.exit-table { margin-top: 32px; }
.exit-table td { border-bottom-color: var(--line); color: var(--ink-2); }
.yaml .k { color: #ff8a80; }

/* ---------- Start ---------- */
.sx-start-title { font-family: var(--f-display); font-variation-settings: "wdth" 100; font-weight: 600; font-size: clamp(3.4rem, 11vw, 13rem); line-height: .86; letter-spacing: -.07em; margin-bottom: clamp(40px, 5vw, 70px); }
.tabs { border-color: var(--line-2); }
.tabs button { color: var(--ink-2); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.sx-links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 26px; font-size: 15px; }
.sx-demo { display: block; border-radius: 12px; overflow: hidden; }
.sx-demo img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.sx-demo:hover img { transform: scale(1.03); }

/* ---------- Docs link ---------- */
.sx-docs { padding: clamp(100px, 13vw, 190px) var(--g) clamp(80px, 10vw, 140px); }
.sx-docs-link { display: block; border-top: 1.5px solid var(--ink); padding-top: 28px; }
.sx-docs-title { display: block; max-width: 18em; font-family: var(--f-display); font-variation-settings: "wdth" 100; font-weight: 600; font-size: clamp(2.2rem, 5.6vw, 6.4rem); line-height: .95; letter-spacing: -.05em; transition: color .4s; }
.sx-docs-link:hover .sx-docs-title { color: var(--ink-2); }

/* ==========================================================================
   Knowledge base, on paper
   ========================================================================== */
.docs-page .docs-hero { padding: 120px var(--g) clamp(40px, 5vw, 64px); border-bottom: 1.5px solid var(--ink); }
.docs-page .docs-title { font-variation-settings: "wdth" 100; font-weight: 600; text-transform: none; letter-spacing: -.06em; font-size: clamp(3rem, 8vw, 9rem); }
.docs-page .docs-title .grad { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--red); font-family: var(--f-mono); font-weight: 500; letter-spacing: -.07em; word-spacing: -.3em; font-size: .82em; }
.docs-page .docs-meta span { border-color: var(--line-2); color: var(--ink); }
.docs-page .docs-search { background: transparent; border-color: var(--line-2); }
.docs-page .docs-nav a { border-left-color: var(--line); }
.docs-page .docs-nav a.is-current::before { background: var(--red); }
.docs-page .doc-kicker { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--red); }
.docs-page .docs h2 { font-variation-settings: "wdth" 100; font-weight: 600; text-transform: none; letter-spacing: -.045em; font-size: clamp(2rem, 3.4vw, 3.2rem); }
.docs-page .doc-sec { border-top: 1px solid var(--line); padding-top: 40px; }
.docs-page .docs blockquote { background: none; border-left-color: var(--red); text-transform: none; font-variation-settings: "wdth" 100; font-weight: 600; font-size: 26px; letter-spacing: -.03em; }
.docs-page .docs ul li::before { background: var(--red); }
.docs-page .note { border-color: var(--line-2); background: var(--paper-2); }
.docs-page .note.warn { border-color: rgba(255, 59, 47, .35); background: rgba(255, 59, 47, .05); }
.docs-page .formula-doc { border: 1.5px solid var(--ink); background: none; }
.docs-page .diagram { background: none; border-color: var(--line-2); }
.docs-page .dg-box rect { fill: var(--paper); stroke: var(--ink); }
.docs-page .dg-hl rect { stroke: var(--red); }
.docs-page .principles-list li::before, .docs-page .dec b { color: var(--red); }
.docs-page .docs a:not(.btn):hover { text-decoration-color: var(--red); }
.docs-page .docs code:not(pre code) { background: var(--paper-2); color: var(--ink); }
.docs-page .docs kbd { background: var(--paper); }
.docs-page .tag.t-allow { color: var(--allow); background: rgba(19, 145, 90, .1); }
.docs-page .tag.t-verify { color: var(--verify); background: rgba(61, 90, 254, .1); }
.docs-page .tag.t-constrain { color: var(--constrain); background: rgba(199, 122, 0, .1); }
.docs-page .s-med { color: var(--constrain); }
.docs-page .docs pre .c { color: #7d7c77; }
.docs-page .docs-toggle { background: var(--ink); color: var(--paper); }
.docs-page .docs-side { padding-top: 88px; }
@media (max-width: 1023px) { .docs-page .docs-side { background: var(--paper); border-right-color: var(--line-2); } }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 100px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; }
.btn svg { width: 18px; height: 18px; }
.btn-ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .sx-nums { grid-template-columns: repeat(3, 1fr); } .sx-num { padding-bottom: 26px; } }
@media (max-width: 1023px) {
  .sx-hero-grid, .sx-split { grid-template-columns: 1fr; }
  .checks6, .sx-ops { grid-template-columns: 1fr 1fr; }
  .trail-out { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sx-nums { grid-template-columns: 1fr 1fr; }
  .v { grid-template-columns: 1fr; gap: 6px; }
  .v-e { text-align: left; }
  .checks6, .sx-ops { grid-template-columns: 1fr; }
  .cmd code { font-size: 13px; }
}

/* ---------- Watch it run ---------- */
.watch { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 5vw, 70px); align-items: start; }
.watch-screen { position: relative; border-radius: 14px; overflow: hidden; background: #0b0b0a; }
.watch-video { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 922; object-fit: contain; background: #1e1e1e; }
.watch-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #0b0b0a; color: #f3f1ec; font-family: var(--f-mono); font-size: 12px; }
.watch-play { width: 34px; height: 34px; border-radius: 50%; background: #f3f1ec; color: #0b0b0a; display: grid; place-items: center; flex-shrink: 0; }
.watch-play svg { width: 14px; height: 14px; grid-area: 1 / 1; }
.watch-play .i-pause, .is-playing .watch-play .i-play { display: none; }
.is-playing .watch-play .i-pause { display: block; }
.watch-progress { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(243, 241, 236, .18); cursor: pointer; }
.watch-progress::before { content: ""; position: absolute; inset: -10px 0; }
.watch-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--red); }
.watch-time { color: #8f8d86; white-space: nowrap; }
.watch-sound { padding: 6px 12px; border-radius: 100px; border: 1px solid rgba(243, 241, 236, .3); color: #f3f1ec; font-family: var(--f-mono); font-size: 11px; white-space: nowrap; }
.watch-sound[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.chapters { border-top: 1.5px solid var(--ink); max-height: min(78vh, 760px); overflow-y: auto; }
.ch { display: grid; grid-template-columns: 46px 1fr; gap: 2px 12px; width: 100%; padding: 13px 0; text-align: left; border-bottom: 1px solid var(--line); position: relative; }
.ch-t { grid-row: span 2; font-family: var(--f-mono); font-size: 12px; color: var(--mute); padding-top: 3px; }
.ch-n { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.ch-d { font-size: 13px; color: var(--mute); }
.ch:hover .ch-n { color: var(--red); }
.ch.is-on .ch-t, .ch.is-on .ch-n { color: var(--red); }
.ch.is-on::before { content: ""; position: absolute; left: -14px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
@media (max-width: 1023px) { .watch { grid-template-columns: 1fr; } .chapters { max-height: none; } .ch.is-on::before { display: none; } }
@media (max-width: 767px) { .watch-time { display: none; } }