:root{
  --bg:#08080a;
  --panel:#121216;
  --panel-2:#17171c;
  --line:#26262e;
  --txt:#e9e9ee;
  --dim:#8a8a96;
  --accent:#ff6a00;
  --red:#ff1e1e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(120% 80% at 50% 0%,#16161b 0%,var(--bg) 60%);
  color:var(--txt);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-user-select:none;user-select:none;
  overflow:hidden;
}
.wrap{
  height:100%;max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;padding:14px 14px 10px;gap:12px;
}
header{display:flex;align-items:center;gap:12px}
.brand{font-weight:800;letter-spacing:.22em;font-size:15px;color:var(--txt)}
.spec{flex:1;color:var(--dim);font-size:12px;letter-spacing:.05em}
.start{
  background:linear-gradient(180deg,#2a2a32,#1a1a20);
  color:var(--txt);border:1px solid var(--line);
  padding:9px 16px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;
}
.start.running{background:linear-gradient(180deg,#ff7a1a,#e25600);border-color:#ff8a3a;color:#140800}
main{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.cluster{
  position:relative;flex:1;min-height:0;
  background:linear-gradient(180deg,var(--panel),#0d0d10);
  border:1px solid var(--line);border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#tach{width:100%;height:100%;display:block}
.digital{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  display:flex;gap:10px;width:92%;
}
.digital .cell{
  flex:1;background:rgba(10,10,13,.72);border:1px solid var(--line);
  border-radius:12px;padding:7px 6px;text-align:center;backdrop-filter:blur(4px);
}
.digital .cell b{display:block;font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.digital .cell.big b{color:var(--accent);font-size:26px}
.digital .cell span{display:block;font-size:9px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.controls{display:flex;flex-direction:column;gap:9px;align-items:center}
.pedal{
  width:100%;padding:20px;border-radius:14px;cursor:pointer;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:14px;
  color:var(--txt);border:1px solid var(--line);
  background:linear-gradient(180deg,#232329,#151519);
  transition:transform .06s ease, background .1s ease;
}
.pedal.down{transform:scale(.98);background:linear-gradient(180deg,#ff7a1a,#cf4e00);color:#160800;border-color:#ff8a3a}
.toggles{display:flex;gap:8px;width:100%}
.toggle{
  flex:1;padding:10px;border-radius:10px;cursor:pointer;font-size:12px;font-weight:600;
  color:var(--dim);background:var(--panel-2);border:1px solid var(--line);
}
.toggle.on{color:#140800;background:var(--accent);border-color:var(--accent)}
.hint{margin:0;color:var(--dim);font-size:11px}
.hint b{color:var(--txt)}
footer{border-top:1px solid var(--line);padding-top:10px}
.engines{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.engines::-webkit-scrollbar{display:none}
.engines button{
  flex:0 0 auto;background:var(--panel-2);border:1px solid var(--line);
  border-radius:11px;padding:8px 11px;cursor:pointer;text-align:left;color:var(--txt);
}
.engines button b{display:block;font-size:12px;font-weight:700;white-space:nowrap}
.engines button span{display:block;font-size:9px;color:var(--dim);white-space:nowrap;margin-top:2px}
.engines button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.engines button.on b{color:var(--accent)}
@media(min-width:600px){
  .wrap{max-width:640px}
}