/* Scoped VEKTE browser demo. */
.vkt-demo{--vkt-accent:#d4ff00;background:#060706;border:1px solid #272a23;border-radius:7px;padding:18px;color:#b0b2aa;font-family:"Plus Jakarta Sans",Arial,sans-serif;min-width:0;isolation:isolate}
.vkt-demo button{font:inherit;cursor:pointer;border-radius:4px;transition:background-color .12s,color .12s,border-color .12s}
.vkt-demo button:focus-visible,.vkt-demo [role=slider]:focus-visible{outline:2px solid var(--vkt-accent);outline-offset:3px}
.vkt-demo-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 14px}
.vkt-demo-title{font-size:11px;font-weight:700;letter-spacing:.04em;color:#97a086}
.vkt-demo .vkt-audio-button{height:44px;padding:0 12px;display:flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid #34382d;background:#141611;color:#aeb4a0;font-size:10px;font-weight:700;letter-spacing:.025em}
.vkt-audio-button svg{width:18px;height:18px;fill:currentColor}
.vkt-demo .vkt-audio-button.is-active{color:var(--vkt-accent);border-color:#5a6b08;background:#1e2407}
.vkt-demo button:hover{border-color:#7b8e12;color:var(--vkt-accent)}
.vkt-demo .vkt-audio-button.is-muted{color:#d4ff00;border-color:#718718;background:#263008;animation:vkt-unmute-pulse 2s ease-in-out infinite}
@keyframes vkt-unmute-pulse{0%,100%{background:#263008;color:#d4ff00;border-color:#718718;box-shadow:0 0 0 rgba(212,255,0,0)}50%{background:#d4ff00;color:#090d00;border-color:#d4ff00;box-shadow:0 0 12px rgba(212,255,0,.2)}}
.vkt-note-lane{border:1px solid #25291f;border-radius:5px;background:#0a0c09;overflow:hidden}
.vkt-lane-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:13px;padding:11px 11px 0}
.vkt-dials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;justify-items:center;gap:10px;padding:7px 14px 22px}
.vkt-dial-wrap{display:flex;flex-direction:column;align-items:center;gap:0;min-width:0}
.vkt-dial{position:relative;width:72px;height:72px;color:var(--vkt-accent);cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:50%}
.vkt-dial svg{display:block;width:100%;height:100%}
.vkt-dial>span{position:absolute;inset:0;display:grid;place-items:center;padding-top:2px;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em;pointer-events:none}
.vkt-dial-label{font-size:10px;line-height:1.2;font-weight:700;color:#939c86;letter-spacing:.025em}
.vkt-note-display{min-width:0;align-self:center}
.vkt-grid-wrap{display:grid;grid-template-columns:29px minmax(0,1fr)}
.vkt-pitch-ruler{display:grid;grid-template-rows:repeat(8,minmax(0,1fr));height:224px;font-size:8px;font-weight:600;color:#737d64;align-items:center;text-align:left}
.vkt-piano-grid{display:block;width:100%;height:224px;background:#070a07;border:1px solid #191e15;border-radius:0}
.vkt-step-ruler{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));padding:7px 0 10px 29px;font-size:9px;font-weight:600;color:#536045;font-variant-numeric:tabular-nums;text-align:center}
.vkt-step-ruler .is-current{color:var(--vkt-accent)}
.vkt-demo-bottom{display:flex;align-items:center;gap:10px;padding:13px 2px 0;flex-wrap:wrap}
.vkt-voice-label{color:#707968;font-size:9px;font-weight:700;letter-spacing:.07em}
.vkt-voices{display:flex;gap:4px;min-width:0}
.vkt-demo .vkt-voices button{min-height:37px;padding:8px 13px;border:1px solid #282f20;background:#11160e;color:#868f7a;font-size:10px;font-weight:700;letter-spacing:.025em}
.vkt-demo .vkt-voices button.is-active{background:#2e3900;border-color:#6b8112;color:var(--vkt-accent)}
.vkt-demo .vkt-tie{margin-left:auto;min-height:37px;padding:8px 13px;border:1px solid #343c27;background:#141a0d;color:#909b7e;font-size:10px;font-weight:700}
.vkt-demo .vkt-tie.is-active{border-color:#849a16;background:#303d00;color:#d4ff00}
.vkt-demo .vkt-reset{min-height:37px;padding:8px 12px;border:1px solid #2e3426;background:#10140d;color:#87917b;font-size:9px;font-weight:700;letter-spacing:.025em}
.vkt-demo-caption{font-size:10px!important;line-height:1.7!important;margin:14px 2px 0!important;padding-top:12px;border-top:1px solid #20261b;color:#818978!important;max-width:none!important}
.site-footer .footer-patent{max-width:920px;margin:20px auto 0;text-align:center}
@media(max-width:900px) and (min-width:651px){.vkt-lane-workspace{grid-template-columns:180px minmax(0,1fr)}.vkt-dials{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:4px;gap:7px}.vkt-dial{width:64px;height:64px}}
@media(max-width:650px){.vkt-demo{padding:12px}.vkt-demo-header{padding-bottom:12px;gap:9px}.vkt-demo-title{font-size:9px;letter-spacing:.015em}.vkt-demo .vkt-audio-button{padding-inline:9px;font-size:9px;gap:5px}.vkt-audio-button svg{width:16px}.vkt-lane-workspace{display:flex;flex-direction:column;gap:6px;padding:6px 7px 0}.vkt-dials{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 0;padding:4px 0 9px}.vkt-dial{width:clamp(42px,14vw,60px);height:clamp(42px,14vw,60px)}.vkt-dial>span{font-size:16px}.vkt-dial-label{font-size:8px}.vkt-note-display{width:100%}.vkt-grid-wrap{grid-template-columns:26px minmax(0,1fr)}.vkt-piano-grid{height:184px}.vkt-pitch-ruler{height:184px;font-size:7px}.vkt-step-ruler{font-size:8px;padding:6px 0 6px 26px}.vkt-demo-bottom{gap:7px}.vkt-voice-label{width:100%;padding:0 1px 2px}.vkt-voices{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.vkt-demo .vkt-voices button{min-height:44px;padding:7px 2px;font-size:9px}.vkt-demo .vkt-reset,.vkt-demo .vkt-tie{min-height:40px;margin-top:3px;font-size:9px}.vkt-demo-caption{font-size:10px!important;margin-top:10px!important;padding-top:10px}}
@media(prefers-reduced-motion:reduce){.vkt-demo button{transition:none}.vkt-demo .vkt-audio-button.is-muted{animation:none;background:#d4ff00;color:#090d00;border-color:#d4ff00}}
