/* Unit 3 one-off widget styles (were inline). Global, but each is scoped
   under its own unique container (.b3i-*, .algo-clean .*) so nothing leaks. */

/* ── intro-abstraction: zoom widget ── */
.b3i-zoom-btn { flex:1; padding:0.55rem 0.8rem; border-radius:9px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.55); font-family:inherit; font-size:0.85rem; font-weight:700; cursor:pointer; transition:all 0.15s; }
    .b3i-zoom-btn:hover { background:rgba(255,255,255,0.1); color:#fff; }
    .b3i-zoom-btn.b3i-active { background:rgba(247,202,62,0.12); border-color:#F7CA3E; color:#F7CA3E; }

/* ── intro-algorithms: algorithm diagram ── */
    .algo-clean{
      --gold:#F7CE46; --cyan:#75FBFF; --pink:#EA1059;
      --purple:#8E39F2; --green:#6FDB46;
      font-family:'Outfit',sans-serif; text-align:center;
      max-width:1100px; margin:0 auto;
    }
    .algo-clean svg{ width:100%; height:auto; display:block; }

    .algo-clean .definition{
      color:rgba(255,255,255,.95);
      font-size:clamp(1.25rem,2.4vw,1.7rem);
      font-weight:500; line-height:1.4;
      max-width:950px; margin:.25rem auto 1rem;
    }
    .algo-clean .trace-line{
      color:var(--gold); font-weight:600;
      font-size:clamp(1rem,2vw,1.25rem); margin:0 auto 1.25rem;
    }

    .algo-clean .line{ fill:none; stroke:var(--gold); stroke-width:2.5;
      stroke-linecap:round; stroke-linejoin:round; }
    .algo-clean .step{ fill:none; stroke:var(--cyan); stroke-width:2.5; }
    .algo-clean .decision{ fill:none; stroke:var(--pink); stroke-width:2.5;
      stroke-linejoin:round; }
    .algo-clean .terminus{ fill:none; stroke:var(--purple); stroke-width:2.5; }
    .algo-clean text{ font-family:'Outfit',sans-serif; }