/* Kmath SuperBrain page (build_superbrain.py). Tokens come from site.css. */
.sb-hero{padding:32px 0 28px}
.sb-hero-grid{display:grid;gap:22px;align-items:center}
.sb-hero .btns{flex-direction:column;align-items:stretch}
.sb-art{display:flex;justify-content:center}
.sb-loop{width:min(78vw,300px);height:auto;display:block}
.sb-two{display:grid;gap:12px;max-width:900px}
.sb-box{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px}
.sb-box h3{font:600 19px/1.3 var(--ui);color:var(--ink);margin:0 0 6px}
.sb-box p{margin:0;font:400 16px/1.5 var(--ui);color:var(--ink-soft)}
.sb-box.sb-brain{background:var(--navy);border-color:var(--navy);border-top:4px solid var(--gold)}
.sb-box.sb-brain h3{color:var(--white)}
.sb-box.sb-brain p{color:#EDE7D8}
.sb-cycle{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:sb}
.sb-step{counter-increment:sb;position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px}
.sb-step .sb-ico{grid-row:span 2}
.sb-ico{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--page);border:1px solid var(--line)}
.sb-ico svg{width:26px;height:26px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sb-no{position:absolute;right:14px;top:12px;font:700 13px/1 var(--ui);color:var(--muted)}
.sb-no::before{content:counter(sb)}
.sb-step h3{font:600 17px/1.3 var(--ui);color:var(--ink);margin:0 28px 4px 0}
.sb-step p{margin:0;font:400 15px/1.5 var(--ui);color:var(--ink-soft)}
.sb-repeat{margin:16px 0 0;font:600 16px/1.4 var(--ui);color:var(--navy);display:flex;align-items:center;gap:8px}
.sb-repeat::before{content:"";width:22px;height:22px;flex:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.5-5.8'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E")}
.sb-see{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sb-see li{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:14px;padding:16px;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px}
.sb-see .sb-ico{grid-row:span 2}
.sb-see h3{font:600 17px/1.3 var(--ui);color:var(--ink);margin:0 0 4px}
.sb-see p{margin:0;font:400 15px/1.5 var(--ui);color:var(--ink-soft)}
.sb-rules{max-width:760px}
@media (min-width:700px){.sb-hero .btns{flex-direction:row;align-items:center}.sb-hero .btn{width:auto}.sb-two{grid-template-columns:1fr 1fr}.sb-see{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.sb-hero{padding:48px 0 40px}.sb-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px}.sb-loop{width:340px}.sb-cycle{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:no-preference){.sb-step,.sb-see li{transition:border-color .2s}.sb-step:hover{border-color:var(--line-strong)}}