:root{font-family:Arial,Helvetica,sans-serif;color:#ffffff;background:#000000;--accent:#ffffff;--muted:#a3a3a3}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{touch-action:manipulation}button,.pill{border:1px solid #444444;background:transparent;color:inherit;border-radius:30px;padding:12px 20px;cursor:pointer}button:hover,.pill:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2c8efa;outline-offset:4px}header{min-height:108px;display:flex;align-items:center;justify-content:space-between;padding:24px 5%;gap:24px;border-bottom:1px solid #303030}.brand{font-weight:800;font-size:24px;letter-spacing:-1px;white-space:nowrap}.brand span{display:block;font-size:9px;letter-spacing:2px;margin:9px 0 0 25px;font-weight:400;color:var(--muted)}nav,.actions{display:flex;align-items:center;gap:28px;font-size:13px}.hero{padding:85px 5% 95px;display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);line-height:1.7}h1{font-size:clamp(42px,5.2vw,82px);font-weight:500;letter-spacing:-4px;line-height:1.03;margin:30px 0}em{font-family:Arial,Helvetica,sans-serif;font-weight:900;color:var(--accent)}.intro{font-size:20px;line-height:1.6;color:#cccccc}.primary{display:inline-flex;gap:50px;background:var(--accent);color:#000000;border-radius:32px;padding:18px 25px;margin:24px 0 8px;font-weight:bold}.note{font-size:12px;line-height:1.7;color:var(--muted)}.art{background:#090909;border-radius:12px;transform:rotate(-3deg);border:1px solid #333333;overflow:hidden}.art-label{font-size:10px;letter-spacing:2px;padding:25px}.art svg{width:100%;display:block}.art-caption{display:flex;justify-content:space-between;padding:20px 25px;border-top:1px solid #333333;font-size:13px}.steps{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px;padding:70px 5%;border-block:1px solid #303030}.steps article{padding-top:32px}.steps b{color:var(--accent);font-size:14px}h2{font-size:34px;letter-spacing:-1px;font-weight:400}.steps p,.faq p{color:#bbbbbb;line-height:1.7}.faq{max-width:850px;margin:90px auto;padding:0 25px}.faq details{border-bottom:1px solid #333333;padding:23px 0}.faq summary{cursor:pointer;font-size:18px}footer{display:flex;align-items:center;justify-content:space-between;padding:40px 5%;border-top:1px solid #303030;font-size:13px;color:#aaaaaa}.studio{display:grid;grid-template-columns:1fr 275px;gap:28px;padding:34px 3%;align-items:center}.stage{position:relative;aspect-ratio:16/9;background:#000000;border:1px solid #333333;border-radius:10px;overflow:hidden}.stage canvas{position:absolute;width:100%;height:100%;inset:0}#cursors{pointer-events:none}#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:clamp(26px,4vw,64px);letter-spacing:-2px;text-align:center;pointer-events:none}#empty small{font-size:13px;letter-spacing:0;color:var(--muted);margin-top:25px}aside h1{font-size:48px;letter-spacing:-2px;margin:20px 0}aside p{font-size:13px;color:#bbbbbb;line-height:1.6}#qr{display:block;border-radius:12px;background:white;margin:25px 0}#status{font-size:12px;color:var(--accent);line-height:1.6;min-height:20px}.controller{max-width:540px;padding:25px 20px;margin:auto}.controller .brand{display:block;margin-bottom:24px}.tools{display:flex;gap:8px}.tools button{flex:1;padding:13px 8px;font-size:13px}button[aria-pressed=true]{background:var(--accent);color:#000000;border-color:var(--accent)}.colors{display:flex;gap:12px;align-items:center;margin:24px 0}.colors label{font-size:11px}input[type=color]{width:35px;height:32px;display:block;border:0;padding:0;background:none}.swatch{padding:0;width:32px;height:32px;border:3px solid #444444;background:var(--swatch)}.size{display:flex;align-items:center;gap:14px;font-size:12px;margin-bottom:24px}.size input{flex:1;accent-color:var(--accent)}#pad{position:relative;aspect-ratio:16/9;background:#111111;border:1px solid #555555;border-radius:18px;margin-bottom:20px;touch-action:none;user-select:none;overflow:hidden;display:grid;place-items:center;text-align:center;color:#cccccc;font-size:22px}#pad small{font-size:11px}#pointer{position:absolute;width:18px;height:18px;border:2px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);display:none;pointer-events:none}.stage:fullscreen{border:0;border-radius:0;background:#000000;width:100vw;height:100vh;aspect-ratio:auto}.stage:fullscreen canvas{object-fit:contain} @media(max-width:900px){header{padding:20px 5%}nav>a:not(.pill){display:none}.hero{grid-template-columns:1fr;padding-top:45px;gap:40px}.hero h1{font-size:64px}.art{max-width:600px}.steps{grid-template-columns:1fr 1fr}.studio{grid-template-columns:1fr}.studio aside{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}aside h1{font-size:30px}#qr{grid-column:2;grid-row:1/5;width:180px;height:180px}.actions{gap:8px;flex-wrap:wrap}.actions button{font-size:11px;padding:10px}.actions span{font-size:11px}footer{gap:20px;flex-wrap:wrap}}@media(max-width:500px){.hero h1{font-size:48px;letter-spacing:-2px}.steps{grid-template-columns:1fr;gap:8px}.steps article{padding-top:12px}header{flex-wrap:wrap}.brand{font-size:22px}.studio aside{display:block}#qr{width:200px;height:200px}nav .pill{font-size:11px;padding:10px}}

/* Wonder Palette: black/white controls, logo colors for creative content. */
:root{--red:#f32b25;--orange:#ff8300;--yellow:#ffc900;--green:#59b539;--blue:#2c8efa;--purple:#8a50b7;--spectrum:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple))}.brand{display:block}.brand img{display:block;width:200px;height:auto}.brand span{margin:0;text-align:center;font-size:8px}.hero h1{font-weight:850;letter-spacing:-3px}.hero h1 em{background:var(--spectrum);background-clip:text;-webkit-background-clip:text;color:transparent}.art{transform:rotate(-2deg)}.art:before{content:"";display:block;height:5px;background:var(--spectrum)}.primary{background:white;color:black}.primary:hover{box-shadow:0 0 0 3px var(--blue)}.controller .brand{width:220px;margin:0 auto 20px}.controller .brand img{width:220px}.colors{gap:9px;flex-wrap:wrap}.swatch{flex-shrink:0;width:32px;height:32px;border:2px solid #555}.swatch[aria-pressed=true]{background:var(--swatch);outline:2px solid white;outline-offset:3px;border-color:black}.size input{accent-color:white}#qr[hidden]{display:none}#networkhint{overflow-wrap:anywhere}#pointer{border-color:var(--paint-color,var(--red))}.controller #status:before{content:"● ";color:var(--green)}@media(max-width:500px){header .brand img{width:160px}.controller .brand img{width:190px}.controller .brand{width:190px}.colors{gap:8px}.swatch{width:29px;height:29px}.hero h1{letter-spacing:-2px}}
.art{position:relative;isolation:isolate}.hero-star{position:absolute;width:122%;height:84%;object-fit:fill;left:-11%;top:9%;filter:invert(1);mix-blend-mode:screen;opacity:.2;transform:rotate(9deg);pointer-events:none;z-index:-1}.art svg,.art-label,.art-caption{position:relative}

.studio aside #presence{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:#fff}