/* v162: scoped only to Lesson 03; standard Lesson 01/02 layout is reused intact. */
.bb-transform .bb-welcome a{color:#793364;font-weight:700}
.bb-transform .bb-around-jump{grid-template-columns:repeat(6,minmax(0,1fr))}
.bb-transform-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:14px 0 8px}
.bb-transform-card{min-width:0;text-align:center;background:linear-gradient(155deg,#3d234a,#592f63);border:3px ridge #dfae72;border-radius:17px;box-shadow:inset 0 0 0 3px #daae7344;padding:17px 12px 19px;color:#fff1d7}
.bb-transform-illustration{display:grid;place-items:center;height:130px;margin:0 auto 10px;border-radius:11px;background:radial-gradient(ellipse at 50% 55%,#9f629533,transparent 72%)}
.bb-transform-illustration svg{width:100%;height:auto;max-height:130px;display:block}
.bb-transform-card h3{font:bold 1.49rem/1.2 Georgia,serif;color:#ffe1ad;margin:0 0 9px}
.bb-transform-card p{font:1rem/1.5 Georgia,serif;margin:0 auto;max-width:24ch}
.bb-transform-card kbd{color:#62295f;background:#ffedc9;border:1px solid #d5ac73;border-radius:8px;padding:4px 9px;font-size:1rem}
.bb-transform-axis-guide{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:center;background:linear-gradient(135deg,#3b2645,#583665);border:3px ridge #d9a96b;border-radius:18px;color:#ffeacf;margin:23px 0 2px;padding:20px}
.bb-transform-axis-guide h3{font:700 1.44rem Georgia,serif;color:#fbdca3;margin:0 0 10px}
.bb-transform-axis-guide p{font:1rem/1.55 Georgia,serif;margin:0 0 8px}
.bb-axis-x-text{color:#ff9292}.bb-axis-y-text{color:#a5eda9}.bb-axis-z-text{color:#9eceff}
.bb-transform-axis-glyph{position:relative;height:167px;max-width:190px;width:100%;margin:auto;color:white;font:bold 1.24rem Georgia,serif}
.bb-transform-axis-glyph::before{content:'';position:absolute;left:50%;top:45%;height:2px;width:65px;transform:rotate(153deg);transform-origin:left;background:#ee6c7b}
.bb-transform-axis-glyph::after{content:'';position:absolute;left:50%;top:45%;height:2px;width:65px;transform:rotate(27deg);transform-origin:left;background:#95da94}
.bb-axis-node{position:absolute;left:calc(50% - 8px);top:calc(45% - 12px);color:#fce4a6;font-size:23px}
.bb-axis-x,.bb-axis-y,.bb-axis-z{position:absolute}.bb-axis-x{left:17px;top:98px;color:#ff9191}.bb-axis-y{right:5px;top:97px;color:#a8f2aa}.bb-axis-z{left:calc(50% - 14px);top:0;color:#9dcfff}
.bb-axis-z::after{content:'';position:absolute;top:25px;left:14px;height:47px;width:2px;background:#88bfff}
.bb-transform-keys{font-weight:700}
.bb-transform-example{display:flex;align-items:center;gap:17px;padding:18px 20px;margin:22px 0 0;background:#fff4db;border:2px solid #c79461;border-radius:14px}
.bb-transform-example-mark{flex:none;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;border:2px ridge #d9ae6e;background:linear-gradient(145deg,#83437e,#4d205b);color:#ffe1a5;font:700 2.2rem Georgia,serif}
.bb-transform-example h3{font:700 1.32rem Georgia,serif;color:#742963;margin:0 0 6px}
.bb-transform-example p{font:1rem/1.55 Georgia,serif;margin:0}
.bb-transform-project-art{margin:10px 0 25px;border:3px ridge #d5a568;border-radius:18px;padding:20px 12px 14px;background:radial-gradient(circle at 45% 30%,#5a3a6b,#301c3b);display:flex;align-items:center;flex-direction:column;color:#f7dbac}
.bb-transform-project-art svg{width:100%;max-width:700px;height:auto;display:block}
.bb-transform-project-art p{font:italic 1rem/1.5 Georgia,serif;text-align:center;margin:8px 9px 2px}
.bb-transform .bb-lesson p,.bb-transform .bb-lesson li{overflow-wrap:break-word}
@media(max-width:950px){.bb-transform .bb-around-jump{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.bb-transform-card-grid{grid-template-columns:1fr}.bb-transform-card{display:grid;grid-template-columns:145px minmax(0,1fr);text-align:left;column-gap:14px;align-items:center}.bb-transform-illustration{grid-row:1/3;margin:0;height:104px}.bb-transform-card h3{align-self:end;margin-bottom:3px}.bb-transform-card p{margin:0;max-width:none;align-self:start}.bb-transform-axis-guide{grid-template-columns:1fr;gap:7px;text-align:center}.bb-transform-axis-glyph{max-width:170px;height:146px}.bb-transform .bb-around-jump{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.bb-transform-card{grid-template-columns:110px minmax(0,1fr);padding:13px 10px;column-gap:8px}.bb-transform-card h3{font-size:1.16rem}.bb-transform-card p{font-size:.9rem}.bb-transform-illustration{height:95px}.bb-transform .bb-around-jump{grid-template-columns:1fr}.bb-transform-example{padding:14px 12px;gap:12px}.bb-transform-example-mark{width:48px;height:48px;font-size:1.6rem}}