:root{ --blue:#0F6E7F; --dark:#0B3040; --light:#FFF7ED; --accent:#F59E0B; }
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--dark); background:linear-gradient(180deg,#fff 0%,#f8fafc 100%); }
.wrap{ max-width:1200px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:16px; }
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand img{width:32px; height:32px; border-radius:6px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-left:auto; }
.toolbar label{ font-size:12px; color:#475569; display:flex; flex-direction:column; gap:4px; }
.toolbar input[type="range"]{ width:120px }
.toolbar .file input{ width:200px }
.toolbar .btn{ background:var(--blue); color:#fff; border:none; border-radius:10px; padding:8px 12px; font-weight:600; box-shadow:0 2px 6px rgba(15,110,127,.2); cursor:pointer; }
.toolbar .btn.secondary{ background:#fff; color:var(--blue); border:1px solid #cbd5e1; }
.toolbar .spacer{ flex:1 }

main{ display:grid; grid-template-columns:1fr; }
.stage{ position:relative; width:100%; max-width:min(92vw, 900px); margin:20px auto; aspect-ratio:1/1; background:
  radial-gradient(circle at 20px 20px, rgba(15,110,127,.06) 2px, transparent 3px),
  radial-gradient(circle at 60px 60px, rgba(245,158,11,.06) 2px, transparent 3px);
  background-size:80px 80px, 80px 80px; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; touch-action:none; }
canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.hud{ position:absolute; left:12px; bottom:12px; display:flex; gap:8px; align-items:center; background:rgba(255,255,255,.85); border:1px solid #e2e8f0; border-radius:12px; padding:8px 10px; box-shadow:0 10px 30px rgba(0,0,0,.08); }
.hud label{ font-size:12px; color:#334155 }
.status{ position:absolute; top:12px; left:12px; right:12px; max-width:420px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.92); border:1px solid #e2e8f0; box-shadow:0 10px 30px rgba(0,0,0,.08); color:#334155; font-size:13px; line-height:1.4; }
.btn.rot{ background:var(--accent); color:#111; border:1px solid #eab308; }
.footer{ max-width:1200px; margin:0 auto 20px; padding:14px 16px; color:#64748b; font-size:12px; text-align:center }
@media (max-width:720px){
  .toolbar{gap:8px}
  .wrap{flex-wrap:wrap}
  .hud{ left:8px; right:8px; bottom:8px; flex-wrap:wrap; justify-content:flex-start; }
  .status{ left:8px; right:8px; top:8px; max-width:none; }
}