*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#180200,#330902 48%,#110100);color:#fff}
.page{width:min(1200px,95%);margin:auto;padding:26px 0 44px}
.hero{text-align:center;margin-bottom:20px}
.badge{display:inline-block;padding:8px 14px;border-radius:999px;background:#ffbc19;color:#230700;font-weight:900}
h1{margin:12px 0 8px;color:#ffd448;font-size:clamp(30px,5vw,56px);text-transform:uppercase}
p{color:#ffe1b0;line-height:1.5}
.app{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.canvas-wrap,.controls{background:rgba(255,255,255,.05);border:1px solid rgba(255,200,80,.24);border-radius:22px;padding:15px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
canvas{display:block;width:100%;height:auto;border-radius:14px;background:#000}
.controls{position:sticky;top:15px}
label{display:block;margin:14px 0 7px;color:#ffe1b7;font-weight:800}
input[type=file],input[type=range]{width:100%}
input[type=file]{background:#fff;color:#111;padding:10px;border-radius:12px}
input[type=file]::file-selector-button{background:#ffb300;color:#1c0600;border:0;padding:10px 14px;border-radius:8px;font-weight:800;cursor:pointer}
button{width:100%;border:0;border-radius:12px;padding:14px;margin-top:12px;background:#ffb300;color:#220700;font-weight:900;font-size:15px;cursor:pointer}
button.secondary{background:#fff}
.note{margin-top:15px;background:rgba(255,188,25,.09);padding:13px;border-radius:14px;color:#ffe4b7;font-size:13px;line-height:1.45}
.note p{margin:.45rem 0}
@media(max-width:900px){.app{grid-template-columns:1fr}.controls{position:static}}