/* Build With Me pages (loaded after /notes/assets/notes.css, which gives the shared dark theme) */
body { -webkit-user-select:text; user-select:text; }
code { font-family:Consolas,'Cascadia Mono',ui-monospace,monospace; font-size:.92em; background:rgba(96,165,250,.12);
  color:#BFDBFE; padding:1px 6px; border-radius:6px; }
.bw-sec { margin-top:44px; }
.bw-sec > h2 { font-size:clamp(22px,3.4vw,30px); color:#F8FAFC; margin:0 0 14px; }
.bw-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.bw-meta span { border:1px solid rgba(96,165,250,.25); background:rgba(15,23,42,.6); border-radius:999px; padding:6px 14px;
  font-size:14px; font-weight:600; color:#CBD5E1; }
.bw-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; align-items:start; }
.bw-hero video { width:100%; max-width:300px; border-radius:18px; display:block; margin-left:auto;
  border:1px solid rgba(96,165,250,.25); background:#000; }
@media (max-width:760px) { .bw-hero { grid-template-columns:1fr; } .bw-hero video { margin:0 auto; } }
.bw-learn { margin:18px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.bw-learn li { color:#CBD5E1; line-height:1.6; padding-left:26px; position:relative; }
.bw-learn li::before { content:"✓"; position:absolute; left:0; color:#34D399; font-weight:800; }

/* final result + playground frames */
.bw-final { height:360px; border-radius:16px; overflow:hidden; border:1px solid rgba(96,165,250,.25); background:#fff; }
.bw-final iframe, .bw-prev iframe { width:100%; height:100%; border:0; display:block; background:#fff; }

/* steps */
.bw-step { border:1px solid rgba(96,165,250,.2); background:rgba(15,23,42,.55); border-radius:18px; padding:20px; margin-top:16px; }
.bw-step h3 { margin:0; font-size:19px; color:#F8FAFC; display:flex; gap:12px; align-items:center; }
.bw-step h3 b { background:#2563EB; color:#fff; border-radius:999px; min-width:32px; height:32px; display:inline-grid;
  place-items:center; font-size:15px; }
.bw-step h3 small { font-weight:600; color:#60A5FA; font-size:13px; margin-left:auto; font-family:Consolas,monospace; }
.bw-step ul { margin:14px 0 0; padding-left:20px; color:#CBD5E1; line-height:1.65; }
.bw-snip { margin-top:14px; position:relative; }
.bw-snip pre { margin:0; background:#1e1e2e; color:#cdd6f4; border-radius:12px; padding:16px; overflow:auto; font:14px/1.6 Consolas,'Cascadia Mono',monospace; }
.bw-snip .row { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.tg{color:#89b4fa}.at{color:#f9e2af}.st{color:#a6e3a1}.sel{color:#f9e2af}.pr{color:#89dceb}.vl{color:#fab387}.pu{color:#9399b2}.cm{color:#6c7086;font-style:italic}

/* playground */
.bw-play { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; border:1px solid rgba(96,165,250,.25);
  border-radius:18px; overflow:hidden; background:#1e1e2e; min-height:520px; }
.bw-ed { display:flex; flex-direction:column; min-width:0; }
.bw-tabs { display:flex; background:#181825; overflow-x:auto; }
.bw-tab { font:600 14px Consolas,monospace; color:#a6adc8; background:none; border:0; padding:13px 18px; cursor:pointer;
  border-top:3px solid transparent; white-space:nowrap; }
.bw-tab.on { color:#cdd6f4; background:#1e1e2e; border-top-color:#f9e2af; }
.bw-only-m { display:none; }
#bw-code { flex:1; width:100%; min-height:460px; resize:none; border:0; outline:none; background:#1e1e2e; color:#cdd6f4;
  font:15px/1.6 Consolas,'Cascadia Mono',ui-monospace,monospace; padding:16px; tab-size:2; white-space:pre; overflow:auto; }
.bw-prev { background:#fff; min-height:460px; position:relative; }
.bw-prev::before { content:"LIVE"; position:absolute; right:10px; top:10px; z-index:1; background:#d0344f; color:#fff;
  font:700 11px Inter,sans-serif; padding:3px 9px; border-radius:999px; letter-spacing:.08em; pointer-events:none; }
.bw-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.bw-bar .st2 { margin-left:auto; color:#64748B; font-size:13px; }
@media (max-width:760px) {
  .bw-play { grid-template-columns:1fr; }
  .bw-only-m { display:block; }
  .bw-prev { display:none; }
  body.bw-show-prev .bw-prev { display:block; }
  body.bw-show-prev #bw-code { display:none; }
}

/* tasks */
.bw-tasks { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.bw-tasks label { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; cursor:pointer;
  border:1px solid rgba(96,165,250,.2); background:rgba(15,23,42,.55); color:#E2E8F0; line-height:1.55; }
.bw-tasks input { width:20px; height:20px; margin-top:2px; accent-color:#22C55E; flex:none; }
.bw-tasks a { color:#60A5FA; }
.bw-share { margin-top:16px; border:1px solid rgba(52,211,153,.4); background:rgba(6,78,59,.35); border-radius:16px; padding:18px; color:#D1FAE5; line-height:1.6; }

/* roadmap cards (index + next) */
.bw-days { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.bw-day { display:block; text-decoration:none; border:1px solid rgba(96,165,250,.22); background:rgba(15,23,42,.6);
  border-radius:18px; padding:18px; transition:transform .15s, border-color .15s; }
a.bw-day:hover { transform:translateY(-3px); border-color:#3B82F6; }
.bw-day .d { font-size:12px; font-weight:800; letter-spacing:.18em; color:#60A5FA; }
.bw-day .t { font-size:19px; font-weight:800; color:#F8FAFC; margin-top:6px; }
.bw-day .s { font-size:14px; color:#94A3B8; margin-top:6px; line-height:1.5; }
.bw-day.lock { opacity:.55; }
.bw-day .tag { display:inline-block; margin-top:10px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px;
  background:rgba(34,197,94,.15); color:#4ADE80; }
.bw-day.lock .tag { background:rgba(148,163,184,.15); color:#94A3B8; }