.week12{--ink:#17212b;--muted:#50545a;--line:#e7e1dc;--coral:#e95f4b;--soft:#fff0eb;color:var(--ink);font:16px/1.7 Arial,Helvetica,sans-serif;max-width:1100px;margin:auto}
.week12 *{box-sizing:border-box}
.week12 h1,.week12 h2,.week12 h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2}
.week12 h1{font-size:clamp(36px,5vw,62px);margin:8px 0 14px}
.week12 h2{font-size:clamp(25px,3vw,35px);margin:0}
.week12 h3{font-size:22px;margin:0 0 10px}
.week12 p{margin:0 0 15px}
.week12 a{color:#a33627;text-underline-offset:3px}
.week12 a:focus-visible{outline:3px solid #2563eb;outline-offset:4px}
.week12 .eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:13px;font-weight:bold}
.week12 .hero,.week12 .two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.week12 .hero{padding:20px 0 30px}
.week12 .hero img{display:block;width:100%;height:320px;object-fit:cover;border-radius:14px}
.week12 .dek{font:25px/1.35 Georgia,serif}
.week12 .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0 38px}
.week12 .card{padding:21px;border:1px solid var(--line);border-radius:13px;background:#fffdfa;min-width:0}
.week12 .card p{color:var(--muted)}
.week12 .bubble{display:grid;place-items:center;width:48px;height:48px;background:#fde1da;border-radius:50%;font-size:23px;margin-bottom:13px}
.week12 .section{margin:42px 0}
.week12 .heading{display:flex;gap:16px;align-items:center;margin-bottom:20px}
.week12 .number{font:bold 44px/1 Georgia,serif;color:var(--coral)}
.week12 .rule{width:42px;height:3px;background:var(--coral);margin-top:10px}
.week12 .compare-grid,.week12 .resources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.week12 .compare{padding:14px;border:1px solid var(--line);background:white;border-radius:12px}
.week12 .compare img{width:100%;height:100px;object-fit:cover;border-radius:6px}
.week12 .bad,.week12 .good{padding:12px;border-radius:7px}
.week12 .bad{background:#eee;color:#888}
.week12 .bad h3{color:#888}
.week12 .good{background:#172832;color:white}
.week12 .good h3{color:white}
.week12 .code{padding:22px;border-radius:12px;background:#20272d;color:white;overflow-wrap:anywhere}
.week12 .code h3{color:#ff9a87}
.week12 pre{white-space:pre-wrap;overflow-x:auto;padding:15px;background:#151a1e;color:#bde8f7;border-radius:8px;font:13px/1.6 monospace}
.week12 .button{display:inline-block;padding:12px 18px;background:var(--coral);color:white;border-radius:7px;font-weight:bold;text-decoration:none}
.week12 .challenge,.week12 .note{padding:22px;background:var(--soft);border:1px solid #f4ddd5;border-radius:12px}
.week12 .elements{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;text-align:center}
.week12 .element-icon{display:block;font-size:27px;margin-bottom:6px}
.week12 .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.week12 .checklist{list-style:none;padding:0}
.week12 .checklist li{margin:10px 0}
.week12 .checklist li:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;background:var(--coral);color:white;border-radius:50%;margin-right:8px}
.week12 .resource{display:block;padding:17px;border:1px solid var(--line);border-radius:10px;background:white;font-weight:bold}
.week12 .resource small{font-weight:normal}
@media(max-width:760px){.week12 .hero,.week12 .two{grid-template-columns:1fr}.week12 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.week12 .steps{grid-template-columns:1fr}.week12 .hero img{height:250px}}
@media(max-width:480px){.week12 .grid,.week12 .compare-grid,.week12 .resources{grid-template-columns:1fr}.week12 .elements{grid-template-columns:repeat(2,minmax(0,1fr))}}