@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#080808;--paper:#e6e6e6;--muted:#a5a5a5;--line:#343434;--accent:#e45a57}
body{font-family:'IBM Plex Sans',Arial,sans-serif;background:radial-gradient(ellipse at 3% 35%,#1c2025 0,transparent 48%),radial-gradient(ellipse at 100% 85%,#210d0c 0,transparent 45%);background-color:#080808}
main,footer{max-width:1170px;padding-left:42px;padding-right:42px}
h1,h2,h3,.eyebrow,.step-label,.caption,figcaption,.editor-title span{font-family:'Barlow Condensed',Impact,sans-serif}
h1{font-weight:900;line-height:.95;letter-spacing:-1px;text-transform:uppercase}h1 em{font-style:normal;font-weight:900;color:#c63a34}h2{font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:0}h3{font-weight:600;font-size:23px;letter-spacing:.5px}
.eyebrow,.step-label{font-size:13px;letter-spacing:2px}.intro p:first-child{font-weight:500}
.editor{background:linear-gradient(105deg,#1e1e20ed,#151516ed);border-color:#39393b;border-left:2px solid #b62323}
textarea{font-family:'IBM Plex Sans',Arial,sans-serif;background:#101012;border:1px solid #59595c;border-radius:0;min-height:180px}textarea[aria-invalid=true]{border-color:#e45a57}
.button,button{font-family:'IBM Plex Sans',Arial,sans-serif;background:#b62323;color:#fff;border:1px solid #b62323;min-height:46px;border-radius:0;transition:background .18s,border-color .18s}
.button:hover,button:hover{background:#8f1b1b;border-color:#e45a57;color:#fff}button:disabled{opacity:.5;cursor:wait}.secondary{background:#151516;color:#ddd;border-color:#59595c}.secondary:hover{background:#281818}
.strip{background:linear-gradient(125deg,#241919,#17191c 45%,#461c1c);height:190px}.strip div{color:#e6e6e6;background:linear-gradient(0deg,#08080899,transparent)}.panel-index span{background:#171719;border-color:#444;color:#e6e6e6}figure img{background:#101012}
blockquote{font-family:'IBM Plex Sans',Arial,sans-serif;font-style:normal;font-size:20px;background:#171315}pre{font-family:'IBM Plex Sans',Arial,sans-serif;color:#c5c5c5;padding-right:12px}summary{min-height:40px;color:#ddd}.status{color:#e6e6e6!important}.editor-title span{font-size:11px}.notice strong{color:#e45a57}
.guide-nav{max-width:1170px;padding-right:42px;padding-left:42px}.guide-nav a{padding:8px 0;min-height:40px}
.skip-link{position:absolute;left:12px;top:-100px;z-index:10;background:#fff;color:#080808;padding:12px}.skip-link:focus{top:12px}
footer{padding-top:24px;font-size:11px;letter-spacing:1px;flex-wrap:wrap;gap:16px}
@media(max-width:800px){main,footer,.guide-nav{max-width:590px;padding-left:24px;padding-right:24px}.intro,.notice,.step{grid-template-columns:1fr;gap:16px}.step{padding-bottom:48px;margin-bottom:45px}.notice{margin-bottom:50px}.intro{gap:0}.hero h1{font-size:clamp(50px,12vw,80px)}h2{font-size:37px}.strip{height:115px}.completed-example figcaption{font-size:10px;letter-spacing:1px}.specs{gap:10px}.specs strong{font-size:16px}.specs span{font-size:11px}.editor{padding:18px}.editor-title{flex-direction:column;align-items:flex-start;gap:0}.actions button{flex:1 1 auto}.caption{letter-spacing:1px}.completed-example+.hero{padding-top:38px}.guide-nav{gap:22px}}
@media(prefers-reduced-motion:reduce){.button,button{transition:none}}

.strip{grid-template-columns:repeat(10,minmax(0,1fr))}.strip div{min-width:0}@media(max-width:800px){.strip div{padding:8px 3px}}

.library-return{max-width:1170px;margin:0 auto;padding:0 42px 32px}.brand-footer{border-top:1px solid #343434;padding-top:22px;padding-bottom:25px;font:12px/1.6 'IBM Plex Sans',Arial,sans-serif;letter-spacing:2px;color:#9b9b9b}.brand-footer .business-email{color:inherit;text-decoration:underline;text-decoration-color:#b62323;text-underline-offset:4px}@media(max-width:800px){.library-return{max-width:590px;padding:0 24px 28px}.brand-footer{flex-direction:column;align-items:center;text-align:center;font-size:12px;letter-spacing:1.5px}}