*{box-sizing:border-box;margin:0;padding:0;}
  :root{
    --bg:#0e0e10; --chassis:#1a1b1f; --chassis-hi:#24252b; --chassis-lo:#121316;
    --wave:#7aa2ff; --wave-dim:#2a3a6e; --press:#ff7ab8; --green:#2ecc71; --cyan:#35d0ba;
    --text:#d6d8dc; --dim:#6e7178; --oled-bg:#050505; --oled-fg:#e8e8e8;
  }
  body{background:radial-gradient(1100px 700px at 50% -10%,#22242a 0%,var(--bg) 60%,#0a0b0c 100%);min-height:100vh;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);display:flex;align-items:flex-start;justify-content:center;padding:28px 14px 80px;}
  .chassis{width:1120px;max-width:100%;background:linear-gradient(160deg,var(--chassis-hi),var(--chassis) 45%,var(--chassis-lo));
    border-radius:20px;padding:24px 26px 20px;border:1px solid #3a3b40;box-shadow:0 28px 55px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);position:relative;}
  .brand{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
  .brand h1{font-size:15px;letter-spacing:3px;color:#fff;font-weight:800;}
  .brand h1 span{color:var(--wave);}
  .brand .sub{font-size:10px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;}
  #oled{background:var(--oled-bg);border-radius:10px;padding:12px 14px;min-height:84px;margin-bottom:16px;
    font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.55;color:var(--oled-fg);
    border:1px solid #000;box-shadow:inset 0 0 18px rgba(0,0,0,.9);white-space:pre;position:relative;overflow:hidden;}
  #oled::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 2px);}
  .ctrl{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px;}
  .btn{background:linear-gradient(180deg,#2c2e33,#1b1d21);border:1px solid #3c3e44;color:var(--text);border-radius:7px;padding:7px 12px;font-size:10px;letter-spacing:1px;cursor:pointer;text-transform:uppercase;font-weight:600;}
  .btn:hover{filter:brightness(1.15);} .btn:active{transform:translateY(1px);}
  .btn.on{background:linear-gradient(180deg,#7aa2ff,#3d6fe0);color:#0a1020;border-color:#9dbcff;}
  .btn.red{background:linear-gradient(180deg,#ff5c4d,#d62f20);color:#2b0d00;}
  select, input[type=range]{accent-color:var(--wave);}
  select{background:#101115;color:var(--text);border:1px solid #33363e;border-radius:6px;padding:5px 8px;font-size:11px;}
  .field{display:flex;flex-direction:column;gap:3px;}
  .field label{font-size:9px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;}
  .keys{display:flex;gap:8px;margin-bottom:16px;padding:14px;background:#17181b;border-radius:12px;border:1px solid #000;}
  .keywave{flex:1;height:190px;border-radius:12px;cursor:crosshair;position:relative;overflow:hidden;
    background:radial-gradient(120% 100% at 50% 0%, #23263a 0%, #171a28 45%, #10121c 100%);
    border:1px solid #2c3050;box-shadow:inset 0 -10px 20px rgba(0,0,0,.4), 0 3px 6px rgba(0,0,0,.4);transition:border-color .1s;}
  .keywave::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 50%, rgba(122,162,255,0.14), transparent 70%);opacity:0;transition:opacity .12s;}
  .keywave.on{border-color:var(--wave);}
  .keywave.on::before{opacity:1;}
  .keywave .wname{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:10px;color:#4a5070;font-weight:700;letter-spacing:1px;pointer-events:none;}
  .keywave .wpress{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(100% 100% at 50% 100%, rgba(255,122,184,.28), transparent 65%);opacity:0;transition:opacity .08s;pointer-events:none;}
  .keywave.pressed .wpress{opacity:1;}
  .glide-lbl{position:absolute;top:6px;left:0;right:0;text-align:center;font-size:8px;color:#3a4060;pointer-events:none;}
  .footer{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-top:6px;}
  .hint{font-size:10px;color:var(--dim);margin-left:auto;text-align:right;line-height:1.6;}
  .status{font-size:10px;font-family:"SF Mono",Menlo,monospace;color:var(--dim);}
  @media (max-width:760px){ .keywave{height:120px;} }