.bbf-anki{
  --bg:#F3F5F7; --surface:#FFFFFF; --ink:#22313F; --muted:#586A7B; --line:#D3DAE1;
  --slate:#34495E; --on-slate:#FFFFFF; --yellow:#F1C40F; --on-yellow:#22313F;
  --soft:#FCF3CF; --link:#2B4E73; --curve-bad:#B5533C;
  --display:"Arvo",Rockwell,Georgia,serif;
  --body:"Alice",Georgia,"Times New Roman",serif;
}
.bbf-anki *{box-sizing:border-box}
.bbf-anki{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.6;margin:0}
.bbf-anki .wrap{max-width:780px;margin:0 auto;padding-inline:20px;padding-block:0 72px;display:flex;flex-direction:column;gap:56px}
.bbf-anki h1,.bbf-anki h2,.bbf-anki h3{font-family:var(--display);font-weight:700;line-height:1.2;margin:0;text-wrap:balance}
.bbf-anki h1{font-size:clamp(2rem,6vw,3rem)}
.bbf-anki h2{font-size:clamp(1.5rem,4.5vw,2rem)}
.bbf-anki h3{font-size:1.2rem}
.bbf-anki p{margin:0}
.bbf-anki a{color:var(--link);text-underline-offset:3px}
.bbf-anki a:focus-visible,.bbf-anki button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.bbf-anki strong{font-weight:400;font-family:var(--display);font-size:.92em}
.bbf-anki .stack{display:flex;flex-direction:column;gap:16px}
.bbf-anki .eyebrow{font-family:var(--display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bbf-anki .hero{background:var(--slate);color:var(--on-slate);margin-inline:-20px;padding:56px 20px 48px}
.bbf-anki .hero .in{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.bbf-anki .hero .eyebrow{color:var(--yellow)}
.bbf-anki .hero p{max-width:34em;font-size:1.15rem}
.bbf-anki .hero h1 span{box-shadow:inset 0 -.35em 0 rgba(241,196,15,.55)}
.bbf-anki .jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.bbf-anki .jump a{font-family:var(--display);font-size:.9rem;color:var(--on-yellow);background:var(--yellow);text-decoration:none;padding:9px 16px;border-radius:4px}
.bbf-anki .road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:r}
.bbf-anki .road li{counter-increment:r;position:relative;text-align:center;padding-top:50px;font-family:var(--display);font-size:.85rem;line-height:1.3}
.bbf-anki .road li::before{content:counter(r);position:absolute;top:0;left:50%;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;font-size:1rem;z-index:1}
.bbf-anki .road li::after{content:"";position:absolute;top:18px;left:50%;width:100%;height:3px;background:var(--line)}
.bbf-anki .road li:last-child::after{display:none}
.bbf-anki .road small{display:block;font-family:var(--body);font-size:.85rem;color:var(--muted);margin-top:2px}
@media (max-width:620px){.bbf-anki .road{grid-template-columns:1fr;gap:14px}
.bbf-anki .road li{text-align:left;padding:6px 0 6px 54px;font-size:1rem}
.bbf-anki .road li::before{left:0;transform:none}
.bbf-anki .road li::after{top:38px;left:18px;width:3px;height:100%}

}
.bbf-anki .part{border-top:4px solid var(--slate);padding-top:18px}
.bbf-anki .part .eyebrow{display:block;margin-bottom:6px}
.bbf-anki .steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:44px;counter-reset:s}
.bbf-anki .steps>li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px}
.bbf-anki .steps>li::before{content:counter(s);font-family:var(--display);font-weight:700;font-size:1.3rem;width:48px;height:48px;border-radius:50%;background:var(--slate);color:var(--yellow);display:grid;place-items:center}
.bbf-anki .steps .body{display:flex;flex-direction:column;gap:14px;min-width:0;padding-top:8px}
@media (max-width:520px){.bbf-anki .steps>li{grid-template-columns:minmax(0,1fr);row-gap:10px}
.bbf-anki .steps .body{padding-top:0}

}
.bbf-anki .body ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.bbf-anki figure{margin:6px 0 0;display:flex;flex-direction:column;gap:8px}
.bbf-anki .shot{position:relative;align-self:flex-start;max-width:100%;line-height:0}
.bbf-anki .shot img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
.bbf-anki .shot.sq{width:460px}
.bbf-anki .shot.sm{width:210px}
.bbf-anki figcaption{font-size:.95rem;color:var(--muted);line-height:1.45}
.bbf-anki .pin{position:absolute;width:clamp(26px,8%,46px);aspect-ratio:1;border-radius:50%;border:3px solid var(--yellow);transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(34,49,63,.75),inset 0 0 0 2px rgba(34,49,63,.75);pointer-events:none}
.bbf-anki .pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--yellow);animation:bbfping 1.8s ease-out infinite}
@keyframes bbfping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2);opacity:0}}
.bbf-anki .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bbf-anki .pair .shot{width:auto}
@media (max-width:520px){.bbf-anki .pair{grid-template-columns:minmax(0,1fr)}
}
.bbf-anki h4{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.3;margin:10px 0 0;padding-top:14px;border-top:1px dashed var(--line)}
.bbf-anki .phones{display:grid;grid-template-columns:repeat(2,minmax(0,230px));gap:16px;align-items:start}
.bbf-anki .phones .shot{width:auto}
.bbf-anki .phones .shot.nar{max-width:150px}
.bbf-anki .shot.ph{width:230px}
.bbf-anki .shot.mid{width:360px}
.bbf-anki ul,.bbf-anki ol{font-size:inherit}
.bbf-anki li,.bbf-anki p{font-family:inherit}
.bbf-anki button{font-family:inherit}
.bbf-anki .btw{background:var(--soft);border-left:5px solid var(--yellow);padding:14px 18px;font-size:1rem;line-height:1.5}
.bbf-anki .btw b{font-family:var(--display);font-weight:700;font-size:.9rem;display:block;margin-bottom:2px}
.bbf-anki .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:520px){.bbf-anki .two{grid-template-columns:minmax(0,1fr)}
}
.bbf-anki .opt{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;font-size:1rem;line-height:1.5}
.bbf-anki .opt h3{font-size:1.05rem}
.bbf-anki .tag{font-family:var(--display);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bbf-anki .types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:680px){.bbf-anki .types{grid-template-columns:minmax(0,1fr)}
}
.bbf-anki .type{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:10px;font-size:1rem;line-height:1.45}
.bbf-anki .type .q{font-family:var(--display);font-size:1rem}
.bbf-anki .type .a{color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}
.bbf-anki .gap{color:var(--curve-bad);font-family:var(--display)}
.bbf-anki .btns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:680px){.bbf-anki .btns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.bbf-anki .btns div{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px;font-size:.98rem;line-height:1.4;display:flex;flex-direction:column;gap:4px}
.bbf-anki .btns b{font-family:var(--display);font-size:1.05rem}
.bbf-anki .btns i{font-style:normal;color:var(--muted);font-size:.9rem}
.bbf-anki .try{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:640px){.bbf-anki .try{grid-template-columns:minmax(0,1fr);justify-items:center}
}
.bbf-anki .phone{width:270px;max-width:100%;background:#1F2A36;border-radius:34px;padding:12px;box-shadow:0 10px 30px rgba(34,49,63,.25)}
.bbf-anki .screen{background:#2C2C2E;color:#fff;border-radius:24px;height:400px;display:flex;flex-direction:column;overflow:hidden;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif}
.bbf-anki .screen .top{font-size:.7rem;text-align:center;padding:10px 8px;color:#B8C0C8;border-bottom:1px solid #444}
.bbf-anki .face{flex:1;border:0;background:transparent;color:inherit;font:inherit;font-size:1.25rem;line-height:1.35;padding:20px 16px;cursor:pointer;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;text-align:center}
.bbf-anki .face .ans{font-size:1rem;color:#F1C40F}
.bbf-anki .face .tap{font-size:.75rem;color:#B8C0C8}
.bbf-anki .face .red{color:#FF5B5B}
.bbf-anki .rate{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:10px;border-top:1px solid #444}
.bbf-anki .rate button{border:0;border-radius:14px;background:#5A5A5E;color:#fff;font:inherit;font-size:.78rem;padding:8px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.bbf-anki .rate button span{font-size:.62rem;color:#D5D9DD}
.bbf-anki .result{min-height:5.5em}
.bbf-anki .result b{font-family:var(--display)}
.bbf-anki .chart{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;overflow-x:auto}
.bbf-anki .chart svg{display:block;width:100%;min-width:480px;height:auto}
.bbf-anki .chart text{font-family:var(--display);font-size:12px;fill:var(--muted)}
.bbf-anki .chart .lbl{fill:var(--ink)}
.bbf-anki #bbf-good{fill:none;stroke:var(--slate);stroke-width:3.5;stroke-linejoin:round}
.bbf-anki #bbf-bad{fill:none;stroke:var(--curve-bad);stroke-width:2.5;stroke-dasharray:6 6}
.bbf-anki .draw{stroke-dasharray:1;animation:bbfdraw 5s ease-in-out 1}
@keyframes bbfdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.bbf-anki .dot{fill:var(--yellow);stroke:var(--on-yellow);stroke-width:2}
.bbf-anki .replay{align-self:flex-start;font-family:var(--display);font-size:.9rem;background:var(--slate);color:var(--on-slate);border:0;border-radius:4px;padding:9px 16px;cursor:pointer}
.bbf-anki .legend{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.95rem;color:var(--muted)}
.bbf-anki .legend span::before{content:"";display:inline-block;width:26px;height:0;border-top:3px solid var(--ink);vertical-align:middle;margin-right:8px}
.bbf-anki .legend .b::before{border-top:3px dashed var(--curve-bad)}
.bbf-anki details{border-bottom:1px solid var(--line);padding:12px 0}
.bbf-anki summary{font-family:var(--display);font-size:1.02rem;cursor:pointer}
.bbf-anki details p{margin-top:8px;font-size:1rem}
.bbf-anki footer{color:var(--muted);font-size:.95rem;border-top:1px solid var(--line);padding-top:18px}
@media (prefers-reduced-motion: reduce){.bbf-anki .pin::after,.bbf-anki .draw{animation:none}
}

.bbf-anki [hidden]{display:none!important}
.bbf-anki img{max-width:100%;height:auto}
.bbf-anki{text-align:left}