:root{
  --void:#0B0E1A;
  --panel:#151B2C;
  --panel-2:#1B2236;
  --panel-3:#222a42;
  --line:#2B3350;
  --star:#E7E9F0;
  --star-dim:#8A93B3;
  --signal:#E8A33D;
  --signal-dim:#8F6A2E;
  --alert:#C4443C;
  --ok:#46E07A;
  --blue:#4A90D9;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --mono:ui-monospace,'Cascadia Code',Consolas,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--void);color:var(--star);font-family:var(--font);}
body{overflow:hidden;}
canvas{display:block;}
.hidden{display:none !important;}
button{font-family:inherit;}

.btn{
  background:transparent;border:1px solid var(--line);color:var(--star);
  font:600 12px/1 var(--font);letter-spacing:.02em;padding:9px 14px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
}
.btn:hover{border-color:var(--signal);color:var(--signal);}
.btn:disabled{opacity:.45;cursor:default;border-color:var(--line);color:var(--star-dim);}
.btn.primary{background:var(--signal);border-color:var(--signal);color:#171208;}
.btn.primary:hover{background:#f0b25a;color:#171208;}
.btn.danger{border-color:#5a2a2a;color:#e07b73;}
.btn.danger:hover{background:var(--alert);color:#fff;border-color:var(--alert);}
.btn.active{border-color:var(--signal);color:var(--signal);background:rgba(232,163,61,.1);}
.btn.sm{padding:6px 9px;font-size:11px;}

.panel-box{background:var(--panel);border:1px solid var(--line);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--star-dim);margin-bottom:6px;}
input,select,textarea{
  background:var(--void);border:1px solid var(--line);color:var(--star);
  padding:8px 10px;font-size:13px;font-family:inherit;width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signal);}
input[type=checkbox]{width:auto;accent-color:var(--signal);}
input[type=range]{padding:0;accent-color:var(--signal);}
input[type=color]{padding:1px;height:30px;}

#toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--signal);padding:10px 20px;
  font-size:13px;z-index:200;opacity:0;transition:opacity .35s ease;pointer-events:none;max-width:80vw;
}
#toast.show{opacity:1;}

.touch-joystick{
  position:fixed;left:28px;bottom:28px;width:120px;height:120px;border-radius:50%;
  border:2px solid rgba(231,233,240,.35);background:rgba(11,14,26,.35);z-index:40;touch-action:none;
}
.touch-joystick .knob{
  position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:rgba(232,163,61,.8);
}