*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;font-family:Inter,system-ui,Arial,sans-serif;background:#081628;color:#f4f8ff}main{max-width:1200px;margin:auto;padding:18px}header{display:flex;justify-content:space-between;gap:20px;align-items:center}h1{margin:0;color:#67e8f9}p{color:#bac9dd}button{background:#3d2c87;color:#fff;border:1px solid #8c78eb;border-radius:12px;padding:12px 18px;cursor:pointer}section{height:min(70vh,680px);min-height:350px;border:1px solid #334766;border-radius:18px;overflow:hidden}footer{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;padding:16px;color:#c9d9ee}@media(max-width:600px){header{align-items:flex-start}h1{font-size:1.6rem}section{height:62vh}}nav{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}nav button[aria-pressed=true]{outline:2px solid #67e8f9}nav button{padding:9px 12px;text-transform:capitalize}.editor-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;color:#dce8f7}.editor-controls input{width:min(320px,100%);accent-color:#67e8f9}section canvas{touch-action:none}nav strong{align-self:center;margin-left:8px;font-size:.95rem}@media(max-width:600px){nav strong{width:100%;margin:5px 0}section{height:65vh}}