.systems-page{--green:#9bd7e8}.catalog-topics{display:grid;gap:22px}.ds-course-intro{border-left:2px solid var(--green);padding:5px 0 5px 22px;max-width:850px}.ds-course-intro p+p{margin-top:10px}.ds-course-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ds-course-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:15px;transition:transform .2s,border-color .2s}.ds-course-card:hover{border-color:var(--green);transform:translateY(-3px)}.ds-course-card h2{font-size:1.7rem;line-height:1.2}.ds-course-card p{color:var(--muted);max-width:480px}.ds-course-card .chip-row{margin-top:auto;margin-bottom:5px}.ds-learning-goal{border:1px solid var(--line);border-radius:8px;padding:23px;margin-bottom:25px}.ds-learning-goal p{margin-top:14px;color:var(--muted);font-size:.95rem}.ds-current-lesson{color:var(--ink);font-weight:600}.ds-chapter-link{text-transform:capitalize;padding-left:17px}.systems-page .chapter-link.active{background:#1d3038;color:var(--green)}.systems-page .chapter-link.active .num{color:var(--green)}.ds-controls{display:flex;gap:20px;align-items:end;flex-wrap:wrap;padding:22px;background:#14181a;border-bottom:1px solid var(--line)}.ds-controls .control{flex:1 1 160px;max-width:300px;font-size:.875rem}.ds-controls .check{align-self:center}.ds-controls select{max-width:100%;min-width:0}.ds-controls output{white-space:nowrap}.ds-reset{background:transparent;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:4px;font-size:.8rem;cursor:pointer;padding:5px}.ds-reset:hover{color:var(--green)}.ds-lab .lab-body{min-height:320px}.ds-flow{display:flex;gap:12px;align-items:center;justify-content:center;margin:18px 0 30px;flex-wrap:wrap}.ds-flow .node{flex:1 1 120px;max-width:240px;min-width:0}.ds-node-value{font-family:var(--display);font-size:1.03rem;margin-top:5px;overflow-wrap:anywhere}.ds-flow .node small{font-size:.78rem}.ds-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;padding:24px 0 28px}.ds-stats .stat{border-left:1px solid #41515a;padding-left:17px;min-width:0}.ds-stats .stat strong{font-size:clamp(1.25rem,2.7vw,2rem);overflow-wrap:anywhere;line-height:1.2}.ds-stats small{margin-top:7px;font-size:.8rem}.ds-warning{border-color:var(--orange);background:#30261c}.ds-bars{display:flex;gap:8px;align-items:stretch;min-height:215px;margin:20px 0}.ds-bar-column{flex:1;min-width:0;display:flex;align-items:center;flex-direction:column;text-align:center}.ds-bar-column>.mono{font-size:.78rem;height:26px}.ds-bar-space{height:150px;width:100%;display:flex;align-items:end;padding:0 10px;border-bottom:1px solid var(--line)}.ds-bar-space i{display:block;width:100%;min-height:2px;border-radius:4px 4px 0 0;transition:height .25s}.ds-bar-column small{font-size:.78rem;padding-top:10px;overflow-wrap:anywhere}.ds-trace{margin:25px 0 12px}.ds-trace-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:15px;font-size:.8rem}.ds-trace-track{height:32px;position:relative;background:repeating-linear-gradient(90deg,#273031 0px,#273031 1px,transparent 1px,transparent 20%);border-bottom:1px solid var(--line)}.ds-trace-track i{position:absolute;display:flex;align-items:center;justify-content:center;white-space:nowrap;min-width:2px;height:26px;border-radius:3px;font-size:.75rem;color:#091214;font-style:normal;overflow:visible}.ds-replicas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:20px 0 30px}.ds-replicas .node{padding:14px 8px}.ds-plot svg{width:100%;display:block}.ds-plot text{fill:var(--muted);font:14px var(--font)}.ds-key-grid{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;margin-top:8px}.ds-key-grid span{background:#253032;border-radius:3px;text-align:center;padding:4px 0;font:12px ui-monospace,monospace;color:var(--muted)}.ds-key-grid .moved{background:var(--green);color:#102028}.ds-packets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:22px 0}.ds-packets .token{font-size:.85rem}.ds-window{display:flex;justify-content:space-between;align-items:center;border:1px dashed #658897;border-radius:8px;padding:22px;gap:18px;color:var(--muted)}.ds-window strong{color:var(--green);font-weight:500}.ds-bucket{position:relative;isolation:isolate;margin:20px auto 25px;width:190px;height:170px;border:2px solid #7497a2;border-top-style:dashed;border-radius:5px 5px 25px 25px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.ds-bucket>div{position:absolute;bottom:0;width:100%;background:#345968;z-index:-1;transition:height .3s}.ds-bucket strong{font:500 2.1rem var(--display)}.ds-bucket>span{font-size:.8rem;color:#d5e3e8}.ds-budget{height:24px;background:#213526;border-radius:5px;overflow:hidden;margin:10px 0 15px}.ds-budget i{height:100%;display:block;background:var(--orange);transition:width .2s}.ds-check{margin:26px 0;border:1px solid var(--line);border-radius:8px;padding:24px;background:#15191a}.ds-check h3{margin:12px 0 18px;line-height:1.4}.ds-check .insight{margin-top:17px}.ds-check .ds-reset{margin-top:12px}.systems-page .lab-foot{line-height:1.5}.systems-page .takeaway{grid-template-columns:120px 1fr}.systems-page .formula{background:#1c272c;border-color:#3c535d;color:var(--green)}
@media(max-width:900px){.ds-course-grid{gap:13px}.ds-course-card{padding:23px}.ds-replicas{grid-template-columns:repeat(3,minmax(0,1fr))}.ds-controls{padding:18px}.ds-key-grid{grid-template-columns:repeat(15,1fr)}}
@media(max-width:600px){.ds-course-grid{grid-template-columns:1fr}.ds-course-card h2{font-size:1.5rem}.ds-stats{gap:8px}.ds-stats .stat{padding-left:8px}.ds-stats small{font-size:.75rem}.ds-flow{gap:8px}.ds-flow .op{display:none}.ds-flow .node{flex-basis:calc(50% - 8px);max-width:none}.ds-replicas{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-trace-row{grid-template-columns:85px minmax(0,1fr);font-size:.75rem;gap:8px}.ds-key-grid{grid-template-columns:repeat(10,1fr)}.ds-bar-space{padding:0 3px}.ds-bar-column>.mono{font-size:.75rem}.ds-bars{gap:3px}.ds-course-intro{padding-left:16px}.ds-check{padding:18px}.systems-page .takeaway{grid-template-columns:1fr}.ds-window{flex-direction:column;align-items:start;padding:17px}.systems-page .toplinks{gap:10px;font-size:.75rem}.systems-page .brand{font-size:1.1rem}.ds-plot{overflow-x:auto}.ds-plot svg{min-width:550px}}

.ds-bars-scroll{overflow-x:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:#496a78 #14181a}