:root{
  --bg:#0a0a0c;
  --panel:#111114;
  --line:#26262c;
  --ink:#f2f2f4;
  --dim:#84848f;
  --acid:#e8ff2f;
  --hot:#ff2d78;
  --display:'Arial Black','Archivo Black',Impact,system-ui,sans-serif;
}
*{box-sizing:border-box}
/* The #dropHint/#calib/#err rule below sets display, which would otherwise beat
   the UA stylesheet's [hidden]{display:none} and leave invisible overlays
   swallowing every click on the canvas. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

header{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 18px; border-bottom:1px solid var(--line); background:#08080a;
}
.brand{display:flex; align-items:baseline; gap:12px; min-width:0}
.logo{
  font-family:var(--display); font-size:30px; letter-spacing:-1.5px; line-height:1;
  color:var(--acid); text-shadow:3px 3px 0 var(--hot);
}
.tag{color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:2.5px}
.head-right{display:flex; align-items:center; gap:14px}
.privacy{color:#555560; font-size:11px; text-transform:uppercase; letter-spacing:1.5px}

main{flex:1 1 auto; display:flex; min-height:0}

#stage{
  position:relative; flex:1 1 auto; min-width:0; display:flex;
  align-items:center; justify-content:center; padding:22px;
  background:
    radial-gradient(circle at 50% 40%, #17171c 0%, #0a0a0c 70%),
    repeating-linear-gradient(0deg,transparent 0 39px,#ffffff05 39px 40px);
}
#gl{
  max-width:100%; max-height:100%; display:block; border-radius:2px;
  box-shadow:0 24px 60px #000a, 0 0 0 1px #ffffff12;
  cursor:crosshair; touch-action:none;
}
#gl.empty{display:none}

#brushRing{
  position:fixed; pointer-events:none; border:2px solid var(--acid);
  border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:difference; z-index:5;
}

#dropHint,#calib,#err{position:absolute; inset:22px; display:flex; align-items:center; justify-content:center}
#dropHint{pointer-events:none}
.dh-inner{
  text-align:center; padding:44px 56px; border:3px dashed #2e2e36; border-radius:4px;
}
.dh-inner b{display:block; font-family:var(--display); font-size:34px; letter-spacing:-1px; color:#3f3f4a}
.dh-inner span{display:block; margin-top:10px; color:#33333c; font-size:13px}
body.has-image #dropHint{display:none}
body.dragging .dh-inner{border-color:var(--acid)}
body.dragging .dh-inner b{color:var(--acid)}

#calib{align-items:flex-end; pointer-events:none}
#calibDots{position:absolute; inset:0}
#calibDots i{
  position:fixed; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--acid); box-shadow:0 0 0 2px #000, 0 0 14px #e8ff2f99;
}
#calibBar{
  pointer-events:auto; display:flex; align-items:center; gap:16px;
  padding:14px 18px; background:#0c0c0ff2; border:1px solid var(--line); border-radius:3px;
  backdrop-filter:blur(6px);
}
#calibBar b{font-family:var(--display); font-size:16px; letter-spacing:.5px; color:var(--acid)}
#calibBar span{color:var(--dim); font-size:12px}
body.calibrating #gl{cursor:cell}

#err{
  color:var(--hot); font-family:var(--display); font-size:16px; text-align:center;
  padding:0 40px; line-height:1.6; pointer-events:none;
}

#panel{
  flex:0 0 344px; background:var(--panel); border-left:1px solid var(--line);
  overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:22px;
}
#panel.locked{opacity:.32; pointer-events:none; filter:saturate(0)}
.sect h2{
  margin:0 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:2.5px;
  color:var(--dim); font-weight:600;
}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.grid.tools{grid-template-columns:repeat(4,1fr)}
.grid.tools .btn{font-size:10px; padding:11px 4px; letter-spacing:0}
.grid.acts{margin-top:10px}
.hint{margin:10px 0 0; color:#5b5b66; font-size:11.5px; line-height:1.5}
.hint b{color:var(--dim)}

.btn{
  font-family:var(--display); font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--ink); background:#191920; border:2px solid #2c2c34; border-radius:2px;
  padding:11px 10px; cursor:pointer; transition:transform .07s, box-shadow .07s, background .12s, color .12s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.btn:hover{background:var(--acid); color:#000; border-color:var(--acid); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--hot)}
.btn:active{transform:translate(1px,1px); box-shadow:0 0 0 var(--hot)}
.btn.small{padding:7px 12px; font-size:11px}
.btn.wide{width:100%; margin-top:10px; padding:14px}
.btn.ghost{background:transparent; border-color:#2c2c34; color:var(--dim)}
.btn.ghost:hover{color:#000}
.btn.primary{background:var(--acid); color:#000; border-color:var(--acid)}
.btn.primary:hover{background:#fff; border-color:#fff; box-shadow:4px 4px 0 var(--hot)}
.btn.tool.on{background:var(--acid); color:#000; border-color:var(--acid)}
.btn.nuke{
  width:100%; margin-top:8px; padding:16px; font-size:16px; letter-spacing:1px;
  background:var(--hot); border-color:var(--hot); color:#fff;
}
.btn.nuke:hover{background:#fff; color:#000; border-color:#fff; box-shadow:5px 5px 0 var(--acid)}
.btn[disabled]{opacity:.35; pointer-events:none}

.slider{display:flex; align-items:center; gap:10px; margin-top:8px}
.slider label{width:34px; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:1px}
.slider output{
  width:52px; text-align:right; font-family:var(--display); font-size:12px; color:var(--acid);
}
input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:2px;
  background:#2c2c34; outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:22px; border-radius:2px;
  background:var(--acid); border:2px solid #000; cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:14px; height:20px; border-radius:2px; background:var(--acid); border:2px solid #000; cursor:grab;
}

.check{display:flex; align-items:center; gap:9px; color:var(--dim); font-size:12.5px; cursor:pointer}
.check input{accent-color:var(--acid); width:15px; height:15px}

@media (max-width:900px){
  main{flex-direction:column}
  #panel{flex:0 0 auto; border-left:0; border-top:1px solid var(--line); max-height:46vh}
  #stage{padding:12px}
  .privacy{display:none}
  #dropHint,#calib,#err{inset:12px}
  #calibBar{flex-wrap:wrap; gap:8px 14px}
  #calibBar span{flex:1 0 100%}
}