:root{
  --bg:#0c0d10; --bg-accent:#12151a; --ink:#e9e0cf; --ink-dim:#b9b19f; --brass:#cda35f; --brass-deep:#8b6a3e; --copper:#b6663a; --teal:#0f2a36; --cyan:#79d5f2; --cyan-dim:#95b6c3; --accent:#ff7a3d;
}
.sk-bg{ background: radial-gradient(1000px 600px at 10% -10%, rgba(205,163,95,.15), transparent), linear-gradient(180deg, var(--bg) 0%, #0a0b0e 60%, #07080a 100%); color:var(--ink); min-height:100dvh; }
.sk-container{ max-width:1200px; margin:0 auto; padding:28px; }
.sk-header{ margin-bottom:16px; }
.sk-title{ font-size:clamp(28px,3.2vw,40px); letter-spacing:.5px; margin:0; }
.sk-panel{ background:linear-gradient(180deg, var(--bg-accent), #0a0d12); border:1px solid #14161b; border-radius:22px; box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); padding:28px; }
.sk-grid{ display:grid; grid-template-columns: minmax(300px, 560px) 1fr; gap:28px; align-items:start; }
.sk-radio{ width:100%; height:auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.sk-lcd{ fill:#041823; stroke:#031118; }
.sk-lcd-text{ fill:var(--cyan); font: 700 34px ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 0 12px rgba(121,213,242,.35); }
.sk-lcd-mini{ fill:var(--cyan-dim); font: 500 18px ui-monospace, SFMono-Regular, Menlo, monospace; }
.sk-grill{ fill:#0e1f27; stroke:#0a1419; }
.sk-knobs .sk-knob{ fill:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><linearGradient id="g" x1="0" x2="1"><stop offset="0" stop-color="%23cda35f"/><stop offset="0.5" stop-color="%238b6a3e"/><stop offset="1" stop-color="%23d4b378"/></linearGradient></svg>#g'); stroke:#1a120d; }
.sk-needle{ stroke:#1a120d; stroke-width:4; stroke-linecap:round; }
.sk-knob-label{ fill:#d9c9a8; font: 600 12px system-ui, sans-serif; letter-spacing:1px; }
.soft{ fill:#e2e0d8; stroke:#6e4f2c; stroke-width:1.5; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); transition: transform .06s ease, fill .15s ease, filter .15s ease; }
.soft:hover{ transform: translateY(-1px); }
.soft.is-active{ transform: translateY(1px); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); fill:#d3bfa4; }
.soft-dw.is-active{ fill:var(--accent); stroke:#7a3a1c; }
.soft + .soft-label{ fill:#1e1410; font:600 14px system-ui,sans-serif; }
.sk-controls{ font: 500 18px system-ui, sans-serif; }
.sk-formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sk-label{ color:var(--ink); font-size:16px; display:block; margin-bottom:6px; }
.sk-select{ width:100%; background:#151920; color:var(--ink); border:1px solid #2b2f36; border-radius:12px; padding:12px 14px; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.sk-range{ width:100%; margin-top:10px; accent-color: var(--copper); }
.sk-buttons{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.sk-btn{ background:linear-gradient(180deg, #efe6d2, #d6c4a3); border:1px solid #6e4f2c; border-bottom-color:#3d2b18; color:#1c120b; padding:12px 16px; border-radius:12px; font-weight:700; letter-spacing:.3px; box-shadow: 0 2px 0 #3d2b18, 0 8px 20px rgba(0,0,0,.25); cursor:pointer; transition: transform .06s ease, box-shadow .15s ease; }
.sk-btn:hover{ transform: translateY(-1px); }
.sk-btn:active{ transform: translateY(1px); box-shadow: 0 0 0 #3d2b18, 0 2px 10px rgba(0,0,0,.2); }
.sk-ghost{ background:linear-gradient(180deg, #171b21, #12161b); color:var(--ink); border:1px solid #2b2f36; }
.sk-field{ margin-top:16px; }
.sk-textarea{ width:100%; background:#12161b; color:var(--ink); border:1px solid #2b2f36; border-radius:12px; padding:14px; min-height:90px; resize:vertical; }
.sk-actions{ display:flex; gap:10px; margin-top:10px; }
.sk-asr{ display:flex; gap:10px; margin:8px 0; }
.flag-btn{ width:40px; height:28px; border-radius:6px; border:2px solid transparent; box-shadow: 0 2px 10px rgba(0,0,0,.25); background:#000; object-fit:cover; cursor:pointer; }
.flag-btn:hover{ transform: translateY(-1px); }
.flag-btn.active{ border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,122,61,.25), 0 6px 16px rgba(0,0,0,.35); }
.sk-note{ color:var(--ink-dim); font: 400 14px system-ui, sans-serif; margin-top:10px; }
.sk-dw{ fill:#e2e0d8; font:700 12px system-ui, sans-serif; }
@media (max-width: 980px){ .sk-grid{ grid-template-columns:1fr; } }
.sk-numpad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.sk-numpad .np {
  background:linear-gradient(180deg,#efe6d2,#d6c4a3);
  border:1px solid #6e4f2c; border-radius:8px;
  padding:10px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 0 #3d2b18;
}
.sk-numpad .np:active { transform:translateY(1px); box-shadow:none; }
#numpadDisplay { margin:6px 0; font:700 22px monospace; color:var(--cyan); }

.sk-numpad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.sk-numpad .np {
  background:linear-gradient(180deg,#efe6d2,#d6c4a3);
  border:1px solid #6e4f2c; border-radius:8px;
  padding:10px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 0 #3d2b18;
}
.sk-numpad .np:active { transform:translateY(1px); box-shadow:none; }
.sk-npdisp {
  margin:6px 0 0; padding:6px 10px; min-height:34px;
  background:#041823; border:1px solid #031118; border-radius:8px;
  font:700 18px ui-monospace, SFMono-Regular, Menlo, monospace; color:#79d5f2;
  letter-spacing:1px;
}