.bro-main { max-width:1180px; margin:auto; padding:42px 44px 0; }
.bro-back { font-size:12px; font-weight:600; text-decoration:none; }
.bro-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:center; min-height:400px; }
.bro-hero h1 { margin:17px 0 20px; max-width:650px; color:#612388; font:italic clamp(38px,4.8vw,60px)/1.04 var(--display); text-transform:uppercase; text-shadow:3px 3px #ff82d9,-2px -2px #fff; letter-spacing:-1.5px; }
.bro-intro { max-width:510px; color:#4c345f; font-size:16px; line-height:1.8; }
.bro-pills { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.bro-pills span { border:1px solid #b581ce; background:#fff4fd; padding:5px 9px; font:10px var(--mono); color:#51207c; }
.bro-hero .learn-action { display:inline-flex; gap:15px; padding:13px 18px; text-decoration:none; }
.bro-portrait { position:relative; isolation:isolate; margin:0; padding-top:12px; text-align:center; }
.bro-portrait img { position:relative; display:block; width:100%; height:auto; max-height:420px; object-fit:contain; filter:drop-shadow(5px 5px 0 #e197d9); }
.bro-sunset { position:absolute; z-index:-1; width:80%; aspect-ratio:1; border-radius:50%; top:0; left:12%; background:linear-gradient(#fff48d,#ff9c52 30%,#ff62c8 65%,#cd74f1); -webkit-mask:repeating-linear-gradient(#000 0 24px,transparent 24px 30px); mask:repeating-linear-gradient(#000 0 24px,transparent 24px 30px); }
.bro-portrait figcaption { position:relative; display:inline-block; margin-top:-10px; padding:9px 16px; background:#51207c; color:white; font:italic 22px var(--display); transform:rotate(-2deg); box-shadow:4px 4px #ff78d5; }
.bro-portrait figcaption span { display:block; font:10px/1.8 var(--mono); }
.bro-method { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:42px 0; padding:24px; border:1px solid #ad7ac7; border-left:4px solid #f344b7; background:linear-gradient(100deg,#fff5da,#ffe6f8); box-shadow:4px 4px #d4b4ed; }
.bro-method b { color:#572275; font:700 11px var(--mono); }
.bro-method p { margin:8px 0 0; font-size:13px; line-height:1.7; }
.bro-picker { scroll-margin-top:110px; }
.bro-areas { display:flex; flex-wrap:wrap; gap:9px; padding:6px 0 28px; }
.bro-areas button { min-height:44px; padding:8px 12px; border:1px solid #ad7ac7; border-radius:3px; color:#51207c; background:#fff5ff; font-size:12px; box-shadow:2px 2px #d4b4ed; }
.bro-areas button[aria-pressed=true] { background:#7131a8; color:#fff; border-color:#7131a8; box-shadow:3px 3px #ff78d5; }
.bro-lesson { scroll-margin-top:110px; padding:30px; border:1px solid #b581ce; border-top:5px solid #f344b7; background:#fff8ff; box-shadow:5px 5px #d4b4ed; }
.bro-lesson-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.bro-lesson h2 { margin:8px 0 15px; color:#4f2172; font:700 clamp(26px,3.5vw,36px)/1.2 var(--sans); letter-spacing:-.7px; }
#broLessonTitle { scroll-margin-top:110px; }
.bro-format { flex-shrink:0; padding:5px 9px; color:#315361; background:#dcfaf6; font:10px/1.7 var(--mono); }
.bro-lesson-summary { color:var(--body); font-size:16px; }
.bro-lesson .article-section { margin-top:30px; }
.bro-lesson h3 { color:#51207c; font-size:22px; line-height:1.3; }
.bro-outcomes { padding:16px 18px; background:#eefdfa; border:1px solid #b5d9d0; }
.bro-outcomes ul { margin:8px 0 0; padding-left:20px; font-size:13px; }
.bro-chapters { display:grid; gap:16px; margin:24px 0; }
.bro-chapter { border:1px solid #d0b2e1; background:#fcf6ff; padding:18px; }
.bro-chapter h4 { margin:0 0 12px; color:#4f2172; font-size:17px; }
.bro-chapter p { margin:12px 0 0; font-size:14px; line-height:1.85; }
.bro-board { padding:14px 16px; border-left:3px solid #038789; background:#eee0fc; font:12px/1.7 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.bro-board b { display:block; margin-bottom:8px; color:#51207c; font-size:11px; text-transform:uppercase; }
.bro-practice { padding:22px; background:linear-gradient(110deg,#e1fffa,#f0ddff); border:1px solid #b581ce; border-left:4px solid #038789; }
.bro-practice h3 { margin-top:0; }
.bro-practice p { font-size:14px; line-height:1.8; }
.bro-prompt { max-height:260px; overflow:auto; white-space:pre-wrap; padding:18px; font:12px/1.9 var(--mono); color:#351747; background:#fff8ff; border:1px solid #c7a4db; }
.bro-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; align-items:center; }
.bro-actions a { font-size:12px; }
.bro-lesson .copy-btn { min-height:44px; }
.bro-creator-note { font-size:12px; line-height:1.8; color:#664e7b; }
.bro-videos { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bro-videos .video-card { min-width:0; padding:20px; }
.bro-videos h4 { font-size:22px; }
.bro-videos .video-watch { display:inline-flex; min-height:44px; align-items:center; gap:8px; padding:9px 12px; font-size:12px; text-decoration:none; }
.bro-source-list { font-size:12px; line-height:1.9; padding-left:20px; overflow-wrap:anywhere; }
.bro-banner { display:grid; grid-template-columns:130px 1fr; gap:24px; align-items:center; padding:18px 24px; margin:0 0 30px; border:1px solid #ad7ac7; border-left:4px solid #ef41b6; background:linear-gradient(110deg,#dcfffa,#f0d9ff); box-shadow:4px 4px #d4b4ed; }
.bro-banner img { width:130px; height:125px; object-fit:contain; }
.bro-banner h2 { color:#51207c; font:400 23px/1.3 var(--display); letter-spacing:-.5px; margin:5px 0 9px; }
.bro-banner p { font-size:13px; line-height:1.7; margin:0 0 14px; }
.bro-banner a { font-size:12px; font-weight:650; }
.bro-path-intro { display:grid; grid-template-columns:85px 1fr; align-items:center; gap:16px; padding:16px; border:1px solid #b581ce; background:linear-gradient(110deg,#e1fffa,#f0ddff); margin-bottom:25px; }
.bro-path-intro img { width:85px; height:95px; object-fit:contain; }
.bro-path-intro p { margin:5px 0; font-size:13px; line-height:1.7; }
.bro-path-intro a { font-weight:650; font-size:13px; }
.vibe-bro-advice { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:start; gap:17px; margin:23px 0; padding:18px; border:1px solid #b581ce; border-left:4px solid #ef41b6; border-radius:6px; background:linear-gradient(110deg,#e1fffa,#f5e5ff); }
.vibe-bro-advice img { display:block; width:72px; height:80px; object-fit:contain; }
.vibe-bro-advice p { margin:0 0 9px; color:#4c345f; font-size:13px; line-height:1.75; overflow-wrap:anywhere; }
.vibe-bro-advice .vibe-bro-advice-label { color:#612388; font:700 10px/1.6 var(--mono); letter-spacing:.5px; }
.vibe-bro-advice .vibe-bro-encouragement { margin-bottom:0; color:#51207c; font-weight:650; }
.learning-step .vibe-bro-step-tip { margin:15px 0; padding:11px 13px; border-left:3px solid #038789; background:#f0fffc; font-size:12px; }
.vibe-bro-step-tip strong { color:#51207c; }
.learning-step .vibe-bro-step-win { margin:13px 0 0; padding:10px 13px; color:#51207c; background:#f5e5ff; border-radius:4px; font-size:12px; font-weight:650; }
.vibe-bro-step-win[hidden] { display:none; }
@media(max-width:850px) { .bro-main { padding:30px 24px 0; } .bro-hero { grid-template-columns:1.15fr 1fr; gap:15px; } .bro-hero h1 { font-size:42px; } .bro-hero .bro-intro { font-size:14px; } .bro-method { gap:14px; padding:18px; } }
@media(max-width:600px) {
  .bro-page .header-inner { gap:8px; } .bro-page .bro-back { font-size:10px; }
  .bro-main { padding:25px 18px 0; } .bro-hero { grid-template-columns:1fr; gap:16px; } .bro-hero h1 { font-size:clamp(36px,9vw,48px); } .bro-portrait { width:min(310px,100%); justify-self:center; }
  .bro-portrait img { max-height:280px; } .bro-hero .learn-action { font-size:12px; } .bro-method { grid-template-columns:1fr; gap:17px; margin:32px 0; }
  .bro-lesson { padding:21px 16px; } .bro-lesson-header { flex-direction:column; gap:0; } .bro-format { order:-1; margin-bottom:8px; }
  .bro-videos { grid-template-columns:1fr; } .bro-chapter { padding:15px; } .bro-practice { padding:18px; }
  .bro-banner { grid-template-columns:74px 1fr; gap:14px; padding:17px; } .bro-banner img { width:74px; height:105px; } .bro-banner h2 { font-size:19px; }
  .bro-path-intro { grid-template-columns:55px 1fr; padding:13px; gap:12px; } .bro-path-intro img { width:55px; height:80px; }
  .vibe-bro-advice { grid-template-columns:46px minmax(0,1fr); padding:14px 12px; gap:10px; }
  .vibe-bro-advice img { width:46px; height:60px; }
}