html,body{margin:0;height:100%;background:#05060f;overflow:hidden;font:13px/1.3 "Segoe UI",system-ui,sans-serif;color:#e9e3ff}
  canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
  #panel{position:fixed;right:14px;top:14px;width:250px;padding:14px 14px 10px;border-radius:14px;
    background:linear-gradient(160deg,rgba(46,38,92,.92),rgba(17,14,40,.94));
    border:1px solid rgba(190,170,255,.35);
    box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.45)}
  #panel h1{font-size:14px;margin:0 0 10px;letter-spacing:.04em;color:#fff;text-shadow:0 2px 3px #000}
  .row{display:flex;align-items:center;gap:8px;margin:7px 0}
  .row label{width:74px;color:#cfc6ff}
  .row input[type=range]{flex:1;accent-color:#c88cff}
  .row output{width:30px;text-align:right;color:#fff;font-variant-numeric:tabular-nums}
  .btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  button{flex:1 1 46%;padding:7px 6px;border-radius:9px;border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;
    background:linear-gradient(180deg,#6b4fc9,#3a2585);box-shadow:0 3px 0 #1d1247,0 6px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35);
    text-shadow:0 1px 2px rgba(0,0,0,.6);font:600 12px "Segoe UI",sans-serif}
  button:active{transform:translateY(2px);box-shadow:0 1px 0 #1d1247,inset 0 1px 0 rgba(255,255,255,.2)}
  button.on{background:linear-gradient(180deg,#e07ad0,#8b2f8f)}
  #info{margin-top:8px;color:#9d93d6;font-size:11px}
  body.noui #panel{display:none}