/* v177: Lesson 01 visual redesign / makeover */
.bb-around-makeover{position:relative}
.bb-around-makeover:before{content:"";position:absolute;inset:0 0 auto 0;height:420px;pointer-events:none;background:radial-gradient(circle at 15% 0,rgba(255,225,167,.16),transparent 35%),radial-gradient(circle at 85% 10%,rgba(173,94,177,.15),transparent 28%)}
.bb-around-banner{margin:10px 0 24px}
.bb-around-banner img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 24px rgba(20,4,24,.45))}
.bb-around .bb-around-hero{align-items:stretch;gap:22px}
.bb-around .bb-around-hero.bb-hero{background:linear-gradient(150deg,#fdf7ec,#f3ddbb 55%,#e7c289);box-shadow:inset 0 0 0 5px #fff0cc,0 16px 34px #1b07204d}
.bb-hero-stack{display:grid;gap:15px;align-content:center}
.bb-mini-panel{border:2px solid #d0a063;border-radius:18px;background:linear-gradient(180deg,rgba(255,250,240,.96),rgba(251,236,210,.95));padding:18px 18px 16px;box-shadow:inset 0 0 0 3px rgba(255,246,220,.72)}
.bb-mini-panel--soft{background:linear-gradient(180deg,rgba(255,248,230,.96),rgba(244,223,190,.96))}
.bb-mini-kicker{margin:0 0 7px;color:#904884;font:700 .74rem/1.2 Georgia,serif;letter-spacing:.14em}
.bb-mini-panel h2{margin:0 0 10px;font:700 1.65rem/1.05 'Cormorant Garamond',Georgia,serif;color:#69245f}
.bb-mini-panel p{margin:0;font:1rem/1.58 Georgia,serif;color:#5f2a55}
.bb-mini-list{margin:0;padding-left:18px;display:grid;gap:8px;color:#5a2550;font:1rem/1.5 Georgia,serif}
.bb-welcome--framed{padding-top:28px}
.bb-panel-heading{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.bb-panel-heading p{margin:0 0 5px;color:#914f84;font:700 .76rem/1.2 Georgia,serif;letter-spacing:.15em}
.bb-panel-heading h2{margin:0;color:#69235c;font:700 clamp(2rem,3.8vw,2.85rem)/1.05 'Cormorant Garamond',Georgia,serif}
.bb-panel-gem{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(160deg,#7d3675,#4a1955);color:#ffe1ad;border:2px solid #ddb06e;box-shadow:0 4px 12px rgba(78,25,85,.3);font-size:1.2rem}
.bb-before-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:20px;align-items:start}
.bb-side-note{border:2px solid #c89a5a;border-radius:18px;background:linear-gradient(180deg,#fffaf0,#f8e7c7);padding:18px;box-shadow:0 8px 20px rgba(47,16,56,.08)}
.bb-side-note h3{margin:0 0 10px;color:#6e275f;font:700 1.35rem/1.1 Georgia,serif}
.bb-side-note p{margin:0 0 8px;font:1rem/1.45 Georgia,serif}
.bb-side-note .bb-trust{margin-top:10px}
.bb-cheatsheet{margin:28px 0;border:4px ridge #cfa15b;border-radius:24px;background:linear-gradient(140deg,#fff8eb,#f6e4c3 58%,#eec891);padding:clamp(22px,4vw,34px);box-shadow:0 14px 30px rgba(27,8,42,.25)}
.bb-cheatsheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bb-cheatsheet-grid article{border:1px solid #d7ab6f;border-radius:16px;background:rgba(255,249,237,.9);padding:16px 16px 15px;min-width:0;box-shadow:inset 0 0 0 2px rgba(255,244,222,.75)}
.bb-cheatsheet-grid kbd{display:inline-block;margin-bottom:12px;padding:5px 11px;border-radius:999px;background:#f0d3ac;border:1px solid #c5965d;color:#67285c;font-weight:700}
.bb-cheatsheet-grid h3{margin:0 0 7px;color:#68255d;font:700 1.22rem/1.1 Georgia,serif}
.bb-cheatsheet-grid p{margin:0;color:#5d2b55;font:0.98rem/1.48 Georgia,serif}
.bb-around-jump a{position:relative;overflow:hidden;box-shadow:0 8px 16px rgba(31,8,39,.22)}
.bb-around-jump a:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-100%);transition:transform .5s ease}
.bb-around-jump a:hover:before,.bb-around-jump a:focus-visible:before{transform:translateX(100%)}
.bb-around .bb-lesson{background:linear-gradient(145deg,#fffaf1,#f7e6ca 64%,#efd2a8);box-shadow:0 14px 30px rgba(27,8,42,.2)}
.bb-around .bb-lesson:after{content:"";position:absolute;top:18px;right:22px;width:66px;height:18px;background:url('images/v62-divider-jewel.webp') no-repeat center/contain;opacity:.33;pointer-events:none}
.bb-callout--sparkle{position:relative;padding-left:22px}
.bb-callout--sparkle:before{content:"✦";position:absolute;left:7px;top:13px;color:#88407d;font-size:1.05rem}
.bb-practice-card{border:2px solid #d2a76f;border-radius:18px;background:linear-gradient(180deg,rgba(255,251,241,.95),rgba(249,232,201,.95));padding:18px;box-shadow:inset 0 0 0 3px rgba(255,246,226,.8)}
.bb-steps--checks{gap:18px}
.bb-steps--checks li:before{content:"✓";background:linear-gradient(180deg,#fff6e7,#f2d8ac);color:#6c275f;font-size:1.2rem}
.bb-reference{background:radial-gradient(circle at 50% 0,#fff7e6,#f0d9b0 78%,#e5be86)}
.bb-around-next{margin-top:33px}
@media(max-width:980px){.bb-before-grid{grid-template-columns:1fr}.bb-cheatsheet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.bb-around .bb-around-hero{grid-template-columns:1fr}.bb-hero-stack{grid-template-columns:1fr}.bb-around-banner{margin-top:4px}}
@media(max-width:600px){.bb-cheatsheet{padding:20px 16px}.bb-cheatsheet-grid{grid-template-columns:1fr}.bb-panel-heading{align-items:flex-start}.bb-panel-gem{width:42px;height:42px}.bb-mini-panel h2{font-size:1.45rem}}