:root{--bg: #0d0d0d;--surface: #1a1a1a;--surface-2: #252525;--border: #333;--text: #e8e8e8;--text-dim: #888;--accent: #ffffff;--btn-on: #ffffff;--btn-on-text: #0d0d0d;--btn-off: #2a2a2a;--btn-off-text:#9a9a9a;--randomize: #e0ff44;--play: #44ff88;--radius: 6px;--gap: 12px;--meter-normal: #44ff88;--meter-hot: #ffcc44;--meter-peak: #ff4444}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.4;min-height:100dvh;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#sk-page{max-width:640px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:20px}#app{display:flex;flex-direction:column;gap:20px}.sk-title-row{text-align:center}.sk-title{font-family:Audiowide,Inter,system-ui,sans-serif;font-size:34px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);-webkit-filter:drop-shadow(0 0 2px #f666ff) drop-shadow(0 0 4px #f666ff60);filter:drop-shadow(0 0 2px #f666ff) drop-shadow(0 0 4px #f666ff60);text-shadow:0 0 2px #f666ff,0 0 4px #f666ff,0 0 7px #f666ff60}.sk-tagline{font-size:11px;color:var(--text-dim);letter-spacing:.08em}.sk-transport{display:flex;gap:var(--gap);justify-content:center}.sk-btn{padding:12px 20px;min-width:120px;min-height:60px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font:inherit;font-size:15px;letter-spacing:.05em;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:background .1s,color .1s}.sk-btn:active{opacity:.75}.sk-btn--play{background:#1a2e1e;color:var(--play);border-color:var(--play)}.sk-btn--pause{color:#fc4;border-color:#fc4}.sk-btn--randomize{width:100%;min-height:56px;font-size:18px;letter-spacing:.1em;background:#232300;color:var(--randomize);border-color:var(--randomize)}.sk-btn--randomize:active{background:#2f2f00}.sk-btn--record{color:#f44;border-color:#f44}.sk-btn--record:active{background:#2e0d0d}.sk-btn--recording{background:#2e0d0d;color:#f44;border-color:#f44;animation:sk-record-pulse 1.2s ease-in-out infinite}@keyframes sk-record-pulse{0%,to{opacity:1}50%{opacity:.55}}.sk-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.sk-effects{gap:20px}.sk-control-group{display:flex;flex-direction:column;gap:4px}.sk-control-group--wide,.sk-control-group--output{grid-column:1 / -1}.sk-output-row{display:flex;gap:6px;align-items:center}.sk-output-row .sk-select{flex:1;min-width:0}.sk-btn--icon{flex-shrink:0;padding:6px 10px;font-size:16px;line-height:1;min-width:unset;touch-action:manipulation}.sk-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:2px}.sk-input{padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;font-size:16px;width:100%}.sk-input:focus{outline:1px solid var(--accent)}.sk-select{padding:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.sk-select:focus{outline:1px solid var(--accent)}.sk-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:var(--surface-2);outline:none;cursor:pointer;touch-action:pan-y}.sk-range::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--accent);cursor:pointer}.sk-range::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}.sk-value{font-size:11px;color:var(--text-dim);text-align:right}.sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}.sk-grid-cell{display:flex;flex-direction:column;gap:4px}.sk-grid-btn{min-height:68px;border-radius:var(--radius);border:1px solid var(--border);background:var(--btn-off);color:var(--btn-off-text);font:inherit;font-size:13px;letter-spacing:.06em;line-height:1.3;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;transition:background .1s,color .1s,border-color .1s;-webkit-user-select:none;user-select:none}.sk-grid-btn--on{background:var(--btn-on);color:var(--btn-on-text);border-color:var(--btn-on);font-weight:700}.sk-grid-btn--disabled{opacity:.25;cursor:default;font-size:10px}.sk-grid-btn:not(.sk-grid-btn--disabled):active{opacity:.7}.sk-slot-mixer{display:flex;flex-direction:column;gap:3px}.sk-meter-track{height:4px;background:var(--surface-2);border-radius:2px;overflow:hidden}.sk-meter-bar{height:100%;width:0%;background:var(--meter-normal);border-radius:2px;transition:width .06s linear}.sk-slot-vol{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--surface-2);outline:none;cursor:pointer;touch-action:pan-y}.sk-slot-vol::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--text-dim);cursor:pointer}.sk-slot-vol::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--text-dim);border:none;cursor:pointer}.sk-debug{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;font-size:11px;color:var(--text-dim)}.sk-debug details summary{cursor:pointer;color:var(--text-dim);letter-spacing:.08em;list-style:none}.sk-debug pre{margin-top:8px;white-space:pre-wrap;word-break:break-all}@media(max-width:520px){#sk-page{padding:12px;gap:16px}#app{gap:16px}.sk-title{font-size:18px}.sk-btn{padding:10px 16px}.sk-btn--randomize{min-height:52px;font-size:15px}.sk-label{font-size:14px}.sk-settings-close{font-size:27px;padding:6px 10px}}@media(max-width:400px){#sk-page{padding:10px;gap:14px}#app{gap:14px}.sk-grid{grid-template-columns:repeat(2,1fr);gap:8px}.sk-grid-btn{min-height:60px;font-size:11px}.sk-controls{grid-template-columns:repeat(3,1fr)}.sk-control-group--wide{grid-column:1 / -1}.sk-slot-vol::-webkit-slider-thumb{width:20px;height:20px}.sk-slot-vol::-moz-range-thumb{width:20px;height:20px}}@media(max-width:340px){.sk-grid-btn{min-height:54px;font-size:10px}.sk-title{font-size:16px;letter-spacing:.08em}}.sk-grid-btn{position:relative}.sk-grid-info-btn{position:absolute;bottom:4px;right:4px;width:22px;height:22px;padding:0;border:none;border-radius:50%;background:var(--btn-on);color:var(--btn-on-text);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .15s;touch-action:manipulation;z-index:1}.sk-grid-info-btn:hover,.sk-grid-info-btn:focus-visible{opacity:.75}.sk-grid-btn--on .sk-grid-info-btn{background:var(--btn-off);color:var(--btn-off-text);opacity:1}.sk-grid-btn--on .sk-grid-info-btn:hover,.sk-grid-btn--on .sk-grid-info-btn:focus-visible{opacity:.75}.sk-label-row{display:flex;align-items:center;gap:4px}.sk-fx-info-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:50%;background:var(--btn-on);color:var(--btn-on-text);font-size:16px;line-height:1;cursor:pointer;opacity:1;vertical-align:middle;transition:opacity .15s}.sk-fx-info-btn:hover,.sk-fx-info-btn:focus-visible{opacity:.75}.sk-settings-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:200}.sk-settings-overlay--open{display:block}.sk-settings-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,100vw);background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:201;transform:translate(100%);transition:transform .25s ease;overscroll-behavior:contain}.sk-settings-panel--open{transform:translate(0)}.sk-settings-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;padding:4px 8px;line-height:1}.sk-settings-close:hover{color:var(--text)}.sk-settings-title{padding:16px 44px 12px 16px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border);flex-shrink:0}.sk-settings-body{flex:1;overflow-y:auto;padding:12px 16px 24px;display:flex;flex-direction:column;gap:20px}.sk-settings-section{display:flex;flex-direction:column;gap:12px}.sk-settings-section-heading{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);padding-bottom:4px}.sk-settings-row{display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:8px}.sk-settings-row .sk-label{font-size:11px;white-space:nowrap}.sk-settings-control{display:flex;align-items:center}.sk-settings-control .sk-range,.sk-settings-control .sk-select{width:100%;font-size:14px}.sk-settings-control .sk-range{height:4px}.sk-settings-control .sk-range::-webkit-slider-thumb{width:14px;height:14px}.sk-settings-control .sk-range::-moz-range-thumb{width:14px;height:14px}.sk-settings-val{font-size:10px;color:var(--text-dim);text-align:right;min-width:52px;white-space:nowrap}.sk-title-narrow,.sk-controls-layout,.sk-main-layout,.sk-bottom-layout,.sk-col-left,.sk-col-right{display:flex;flex-direction:column;gap:20px}.sk-controls-layout{padding-bottom:8px}@media(min-width:1025px){#sk-page{max-width:1280px;padding:20px 24px}.sk-title-narrow{max-width:640px;margin-left:auto;margin-right:auto;width:100%}.sk-controls-layout,.sk-main-layout,.sk-bottom-layout{display:grid;grid-template-columns:3fr 2fr;gap:calc(var(--gap) * 3);align-items:start}.sk-controls-layout{align-items:end}.sk-main-layout{margin-top:20px;margin-bottom:20px}}.sk-info-section,.sk-contact-section{display:flex;flex-direction:column;gap:10px}.sk-section-title{font-size:14px;font-weight:600;font-family:Audiowide,Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:6px}.sk-info-body{font-size:14px;line-height:1.7;color:var(--text-dim)}.sk-contact-links{display:flex;flex-wrap:wrap;gap:20px;align-items:center}.sk-contact-link{display:flex;align-items:center;gap:8px;color:var(--text-dim);text-decoration:none;font-size:14px;transition:color .15s}.sk-contact-link:hover,.sk-contact-link:focus-visible{color:var(--accent)}.sk-welcome-overlay{display:none;position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:640px;z-index:900}.sk-welcome-overlay.is-open{display:block}.sk-welcome-banner{background:#f0f0f0;border-top:1px solid #ccc;padding:20px 24px 28px;cursor:default;animation:sk-welcome-up .45s cubic-bezier(.25,.46,.45,.94)}@keyframes sk-welcome-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sk-welcome-close{position:absolute;top:12px;right:14px;display:flex;align-items:center;gap:5px;background:none;border:none;color:#555;font:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:4px 6px;border-radius:var(--radius);transition:color .15s}.sk-welcome-close:hover,.sk-welcome-close:focus-visible{color:#000}.sk-welcome-text{font-size:14px;line-height:1.65;color:#333;padding-right:72px}.sk-welcome-contact{font-size:14px;line-height:1.9;color:#333;margin-top:10px}.sk-welcome-link{color:#111;text-decoration:none;transition:color .15s}.sk-welcome-link:hover,.sk-welcome-link:focus-visible{color:#000}.sk-welcome-link--social{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}#btn-playpause.sk-beat-downbeat,#btn-playpause.sk-beat-beat{transition:background .1s,color .1s}@keyframes sk-beat-downbeat{0%{border-color:#ff2020;box-shadow:0 0 18px 6px #ff2020d9,0 0 0 2px #ff2020}to{border-color:#fc4;box-shadow:none}}@keyframes sk-beat-beat{0%{border-color:#f80;box-shadow:0 0 14px 4px #f80c,0 0 0 2px #f80}to{border-color:#fc4;box-shadow:none}}#btn-playpause.sk-beat-downbeat{animation:sk-beat-downbeat .35s ease-out forwards}#btn-playpause.sk-beat-beat{animation:sk-beat-beat .35s ease-out forwards}