/* Brick Gaf. Generated by brickgaf-web build.mjs (tally). Edit the generator, not this file. */
@font-face{font-family:"Unbounded";src:url(/assets/fonts/unbounded.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(/assets/fonts/nunito-sans.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{--bg:#F7F1E6;--fg:#1C2230;--muted:#4A5160;--panel:#FFFFFF;--link:#1F4FA8;--btn:#B23A2B;--btn-fg:#FFFFFF;--btn-hover:#8F2E22;--focus:#1F4FA8;--red:#B23A2B;--blue:#1F4FA8;--green:#17663F;--on-dark:#FFFFFF;--red-ink:#B23A2B;--green-ink:#17663F;--alt:#FFF8EC;--ribbon:#F2B705;--ribbon-fg:#1C2230;--shadow:#1C2230;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#161B26;--fg:#F7F1E6;--muted:#C5C9D2;--panel:#222A3A;--link:#F2B705;--btn-hover:#C8493A;--focus:#F2B705;--red-ink:#FF8A75;--green-ink:#6FCF97;--alt:#1C2230;--shadow:#000000}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
*{box-sizing:border-box}
body{margin:0;font:400 1.0625rem/1.6 "Nunito Sans",system-ui,sans-serif;color:var(--fg);background-color:var(--bg)}
img{max-width:100%;height:auto}
a{color:var(--link)}
.skip{position:absolute;left:-999px;top:0;padding:.75rem 1rem;color:var(--btn-fg);background-color:var(--btn)}
.skip:focus{left:1rem;top:1rem;z-index:3}
.tri{height:6px;background-image:linear-gradient(90deg,#169B62 0 33.4%,#FFFFFF 33.4% 66.7%,#FF883E 66.7%)}
.wrap{max-width:66rem;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:40rem}
.ribbon{margin:0;padding:.6rem 1.25rem;text-align:center;font-weight:700;color:var(--ribbon-fg);background-color:var(--ribbon)}
.draft{padding:0 .4rem;border-radius:.3rem;font-size:.8rem;font-weight:800;color:var(--ribbon-fg);background-color:var(--ribbon)}
.top{padding:.9rem 0}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;text-decoration:none;font:800 1.3rem/1 "Unbounded",system-ui,sans-serif;color:var(--fg)}
.brand img{display:block;width:56px;height:56px;border-radius:50%}
.nav ul{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .85rem;border-radius:999px;font-weight:800;text-decoration:none;color:var(--fg)}
.nav a:hover{text-decoration:underline}
.nav a[aria-current="page"]{color:var(--btn-fg);background-color:var(--btn)}
h1,h2,h3{font-family:"Unbounded",system-ui,sans-serif;line-height:1.15;margin:0 0 .75rem}
h1{font-size:clamp(2.5rem,8vw,4.6rem);font-weight:900}
h2{font-size:clamp(1.45rem,3.6vw,2rem);font-weight:800}
.w1{color:var(--red-ink);background-color:var(--bg)}
.w2{color:var(--green-ink);background-color:var(--bg)}
.hero{padding:2rem 0 2.5rem}
.hero.slim{padding:1.5rem 0 2rem}
.hero-grid{display:grid;gap:2rem;align-items:center}
.badge{display:block;width:min(78vw,300px);height:auto;margin:0 auto;border-radius:50%;box-shadow:0 12px 0 var(--shadow)}
.lede{font-size:clamp(1.15rem,2.6vw,1.45rem);max-width:40rem;margin:0 0 1.5rem}
.big{font-size:clamp(1.2rem,2.8vw,1.6rem);font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:.75rem 1.4rem;border:0;border-radius:.7rem;font:800 1rem/1.2 "Nunito Sans",system-ui,sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--shadow);color:var(--btn-fg);background-color:var(--btn)}
.btn:hover{color:var(--btn-fg);background-color:var(--btn-hover)}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:800}
.course{height:28px;background-image:url(/assets/bricks.svg);background-repeat:repeat-x;background-size:96px 28px}
.band{padding:2.5rem 0}
.band.alt{color:var(--fg);background-color:var(--alt)}
.tiles,.doors,.rules{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tile{padding:1.6rem 1.4rem;border-radius:1rem;font:800 1.2rem/1.3 "Unbounded",system-ui,sans-serif;box-shadow:6px 6px 0 var(--shadow)}
.t1{color:var(--on-dark);background-color:var(--red)}
.t2{color:var(--on-dark);background-color:var(--blue)}
.t3{color:var(--on-dark);background-color:var(--green)}
.door{display:flex;flex-direction:column;gap:.35rem;height:100%;padding:1.3rem 1.4rem;border:3px solid var(--fg);border-radius:1rem;text-decoration:none;box-shadow:6px 6px 0 var(--shadow);color:var(--fg);background-color:var(--panel)}
.door:hover{color:var(--fg);background-color:var(--alt)}
.door-h{font:800 1.15rem/1.25 "Unbounded",system-ui,sans-serif}
.rules li{padding:1rem 1.2rem;border-left:6px solid var(--green-ink);border-radius:.6rem;font-weight:700;color:var(--fg);background-color:var(--panel)}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:1rem;counter-reset:s}
.steps li{position:relative;padding:1.25rem 1.25rem 1.25rem 4.5rem;border-radius:1rem;box-shadow:6px 6px 0 var(--shadow);color:var(--fg);background-color:var(--panel)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:1.25rem;top:1.2rem;width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:.5rem;font:900 1.15rem/1 "Unbounded",system-ui,sans-serif;color:var(--btn-fg);background-color:var(--btn)}
.steps h2{font-size:1.15rem;margin:0 0 .35rem}
.steps p{margin:0}
details{margin:0 0 .8rem;padding:.9rem 1.1rem;border:2px solid var(--fg);border-radius:.7rem;color:var(--fg);background-color:var(--panel)}
summary{font-weight:800;cursor:pointer}
details p{margin:.6rem 0 0}
.note{color:var(--muted)}
.form label{display:block;margin:1rem 0 .35rem;font-weight:800}
.form input,.form select,.form textarea{display:block;width:100%;padding:.75rem .85rem;border:2px solid var(--fg);border-radius:.6rem;font:inherit;color:var(--fg);background-color:var(--panel)}
.form .btn{margin-top:1.2rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.small{font-size:.95rem}
.strong{font-weight:800}
.prose{max-width:46rem;padding-top:1.5rem;padding-bottom:2rem}
.prose section{margin:0 0 2rem}
footer{padding:1.6rem 0 2.6rem;font-size:.95rem;color:var(--muted);background-color:var(--bg)}
footer p{margin:.4rem 0}
.credit{font-size:.85rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main:focus{outline:none}
@media (min-width:52rem){.hero-grid{grid-template-columns:1.25fr 1fr}.badge{width:300px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.badge{animation:float 6s ease-in-out infinite}.btn,.door{transition:transform .15s ease,background-color .15s ease}.btn:hover,.door:hover{transform:translateY(-2px)}}