/* Technological singularity lesson. All rules scoped under .sng-* */
.sng-sc { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

/* ---------- counters + chart ---------- */
.sng-ctr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sng-ctr > div { display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.sng-ctr small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.sng-ctr b { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--gold); line-height: 1.15; }
.sng-chart svg { display: block; width: 100%; max-width: 360px; margin: 0 auto; }
.sng-bg { fill: var(--surface); stroke: var(--line); }
.sng-ax { stroke: var(--line-strong); stroke-width: 1.5; }
.sng-tk { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--dim); }
.sng-line { fill: none; stroke: var(--violet-bright); stroke-width: 2.5; stroke-linejoin: round; }
.sng-h rect { fill: var(--gold); }
.sng-h circle { fill: #2A1D05; }
.sng-h.sng-over rect { fill: var(--streak); }
.sng-wall line { stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 4; }
.sng-wall text { font-family: var(--sans); font-size: 13px; font-weight: 800; fill: var(--red); }
.sng-set { text-align: center; font-size: 15px; color: var(--dim); }
.sng-set b { font-family: var(--mono); color: var(--gold); font-size: 17px; }
.sng-flash { animation: sngFlash .5s ease-out; }
@keyframes sngFlash { from { transform: scale(1.12); } }

/* ---------- the evidence ---------- */
.sng-ev-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.sng-ev-card b { font-family: var(--serif); font-size: 46px; line-height: 1; color: var(--gold); }
.sng-ev-card span { font-size: 15px; color: var(--text); line-height: 1.3; }
.sng-in { animation: sngIn .4s ease-out; }
@keyframes sngIn { from { opacity: 0; transform: translateY(6px); } }
.sng-tug { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 4px; }
.sng-tug span { font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; }
.sng-tl1 { color: var(--mint); } .sng-tl2 { color: var(--red); }
.sng-tr { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--mint), var(--line-strong) 50%, var(--red)); }
.sng-nd { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 3px solid var(--bg); transform: translate(-50%, -50%); transition: left .6s cubic-bezier(.3,1.4,.6,1); }