:root{font-family:"Doto",Arial,Helvetica,sans-serif;color:#f5f5f5;background:#000;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:2px solid #474747;color:inherit;background:#000;border-radius:10px;min-height:46px;padding:10px 17px;font-weight:700}button:hover{border-color:#e21b2d}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e21b2d;outline-offset:4px}header{max-width:1200px;margin:auto;padding:25px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #383838}.wordmark{font-size:42px;font-weight:900;letter-spacing:-3px;text-decoration:none;color:#e21b2d}.wordmark span{font-size:16px;letter-spacing:0;color:white;margin-left:14px}.brand{font-size:14px;letter-spacing:2px;font-weight:bold}main{max-width:1200px;margin:0 auto;padding:36px 32px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px}.preview-label{display:flex;justify-content:space-between;font-size:13px;letter-spacing:1px;margin-bottom:12px;color:#b9b9b9}.canvas-wrap{border:3px solid #e21b2d;border-radius:18px;overflow:hidden;background-color:#ddd;background-image:conic-gradient(#eee 25%,#ddd 0 50%,#eee 0 75%,#ddd 0);background-size:24px 24px;aspect-ratio:1}canvas{display:block;width:100%;height:auto}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.yellow{background:#e21b2d;border-color:#e21b2d;color:#fff}.yellow:hover{background:#ff394a}#status{font-size:14px;min-height:20px;color:#bbb}h1{font-size:clamp(30px,4vw,46px);letter-spacing:-1.5px;margin:0 0 24px;line-height:1.1}nav{display:flex;flex-wrap:wrap;gap:8px}nav button{font-size:14px;min-height:42px;padding:8px 12px}nav button[aria-pressed=true]{background:#e21b2d;color:#fff;border-color:#e21b2d}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:28px}h2{font-size:22px;margin:0}label{font-size:14px;display:flex;align-items:center;gap:8px}input{accent-color:#e21b2d;width:19px;height:19px}.styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}.style{padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;background:#eee;color:#000;min-width:0}.style img{width:100%;height:76px;object-fit:contain}.style[aria-pressed=true]{border-color:#e21b2d;box-shadow:0 0 0 2px #e21b2d}.colors{display:flex;gap:12px;flex-wrap:wrap}.swatch{width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;border:3px solid #777;box-shadow:inset 0 0 0 2px #000}.swatch[aria-pressed=true]{outline:3px solid #e21b2d;outline-offset:3px}h3{font-size:15px;margin:25px 0 15px}footer{max-width:1200px;margin:auto;padding:10px 32px 30px;color:#999;font-size:13px}@media(max-width:760px){header{padding:16px 20px}.brand{font-size:12px;letter-spacing:1px}.wordmark{font-size:36px}.wordmark span{font-size:14px}main{grid-template-columns:1fr;padding:24px 20px;gap:20px}.preview{max-width:520px;width:100%;margin:auto}.editor{min-width:0}h1{margin-bottom:18px}.styles{grid-template-columns:repeat(4,minmax(0,1fr))}footer{padding:24px 20px}}@media(max-width:380px){.brand{display:none}.styles{grid-template-columns:repeat(3,minmax(0,1fr))}.actions button{padding:10px 12px}}

.wordmark{letter-spacing:-1px}h1{letter-spacing:0}body{font-weight:600}

/* Become Wun typography */
body,button,a,label,h1,h2,h3,p,nav,header,footer,.brand,.preview-label,#status,.style,nav button[aria-pressed=true]{color:#ff3344;font-weight:900}
.wordmark{font-size:clamp(26px,4vw,40px);letter-spacing:0;color:#ff3344;font-weight:900}
.yellow,nav button[aria-pressed=true]{background:#000;color:#ff3344;border-color:#ff3344}
.yellow:hover{background:#111}
.style{background:#000;color:#ff3344}