:root{--color1: #614c8c;--color2: #c3ced7;--color3: #454a4e;--color4: #2f3336;--color5: #232527}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html{overflow:hidden;overscroll-behavior-x:none}body{width:100vw;height:100vh;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background-color:#000;overscroll-behavior-x:none;-webkit-text-size-adjust:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overflow:hidden}#app{width:100%;height:100%;position:relative;overflow:hidden}*:focus-visible{outline:none}.modal{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;position:absolute;background-color:var(--color5);color:#fff;z-index:100}.modal .box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 10px 30px;border-radius:10px;background-color:#111;box-shadow:0 0 100px #00000080;max-width:250px}.modal .box img{border-radius:9px}.modal .box h1{color:#fff;font-size:24px;margin-top:0}.modal .box p{margin-top:0;font-size:13px;color:var(--color2);padding:0 20px;margin-bottom:20px;text-align:center}.modal .box button{padding:10px 20px;border:none;border-radius:5px;background-color:var(--color1);color:#fff;width:auto;font-size:16px;cursor:pointer}.modal .box button.disabled{opacity:.3;pointer-events:none}.modal .box button:active{background-color:#4f3f8c}.modal .box a{margin:10px 0;color:var(--color1);text-decoration:none}.modal .box a:hover{color:#fff;text-decoration:underline}.modal.install{background-color:#00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);justify-content:flex-end;align-items:flex-start;transform:translate(20px,-60px)}.modal.install .box{padding:30px 20px;background-color:var(--color1);box-shadow:0 0 100px #00000080;max-width:250px;flex-direction:row;align-items:center;justify-content:center}.modal.install .box button{background-color:var(--color2);color:#111}.modal.install .box p{margin:unset;padding:0 10px}:root{--color1: #614c8c;--color2: #c3ced7;--color3: #454a4e;--color4: #2f3336;--color5: #232527;--color6: #2da7cb;--color7: #555a5e;--top: env(safe-area-inset-top);--right: env(safe-area-inset-right);--bottom: env(safe-area-inset-bottom);--left: env(safe-area-inset-left);--ion-safe-area-top: env(safe-area-inset-top);--ion-safe-area-bottom: env(safe-area-inset-bottom);--ion-safe-area-left: env(safe-area-inset-left);--ion-safe-area-right: env(safe-area-inset-right)}#app[mode=player] .cymatics-wrapper{justify-content:center;align-items:center;height:100vh;display:flex;position:fixed;top:50%;left:0;right:0;overflow:hidden;transform:translateY(-50%)}#app[mode=studio] .cymatics-wrapper{justify-content:center;align-items:center;display:flex;position:fixed;overflow:hidden;top:0;left:0;right:0;bottom:0;height:100vh}.cymatics-wrapper.cover{transform:translate(0);top:0;left:0;width:100vw;height:100vh}p-cymatics{border-radius:1%;width:100vh;height:100vh;transition:all .39s ease-in-out;overflow:hidden;transform:translate(0);opacity:0}#app[mode=studio] p-cymatics{width:100vh;height:100vh;border-radius:0}p-cymatics.ready{opacity:1}.cymatics-wrapper p-cymatics[cover=true]{width:100vw;height:100vh;transition:all .39s ease-in-out;border-radius:0;overflow:hidden}p-cymatics img#frame{position:absolute;top:0;left:0;object-fit:contain;width:100%;height:100%;pointer-events:none}@media screen and (orientation: portrait){p-cymatics{width:100vw!important;height:100vw!important}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#333;border-radius:9px;margin:10px 0;height:4px;padding:unset}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:20px;background:#ccc;cursor:pointer;pointer-events:all}#app[mode=player] .controls{position:fixed;left:0;right:0;z-index:1;bottom:env(safe-area-inset-bottom);display:flex;width:100vw;padding:10px 8px;scroll-snap-type:x mandatory;transition:transform .39s ease-in-out,padding .618s ease-in-out,opacity 1s ease-in-out;overflow:scroll visible;transform:translateY(200px);justify-content:center}@media (max-width: 450px){#app[mode=player] .controls{justify-content:flex-start}}#app[mode=studio] .controls{position:fixed;top:env(safe-area-inset-top);right:0;left:unset;bottom:unset;z-index:3;background:#111;flex-direction:column;width:260px;height:100%;padding:0 5px 0 7px;transform:translate(300px);overflow-x:hidden;overflow-y:auto;transition:transform .39s ease-in-out,padding .618s ease-in-out}.controls .group{display:flex}.controls .group:before{position:absolute}#app[mode=studio] .sticky{position:sticky;bottom:-10px;left:0;right:0;width:245px;z-index:9;background:#111}#app[mode=studio] button[fn=save]{color:#fff;background:#226;border:none;border-radius:9px;width:-webkit-fill-available;min-height:36px;margin:10px;cursor:pointer;transition:all .39s ease-in-out}#app[mode=studio] .controls .group{display:block}summary{text-transform:uppercase;cursor:pointer;color:#fff;height:23px;margin:10px 10px 20px;padding:5px 0 0;font-size:13px;font-weight:700;position:relative}details{width:100%;position:relative}details[open] summary:after{transform:rotate(45deg)}.controls p-knob{margin-top:-20px}.controls hr:after{content:attr(label);color:var(--color7);z-index:1;font-size:12px;position:absolute;top:-28px}.control{flex-direction:column;padding:0;display:flex;width:64px;height:82px;min-width:64px;min-height:64px;border-radius:6px;background:#111;margin:0 1px;justify-content:center;align-items:center;cursor:pointer;scroll-snap-align:center;overflow:hidden}#app[mode=studio] .control{position:relative;width:100%;min-height:unset;padding:10px 0;height:unset}#app[mode=studio] .control input[type=file]{display:none}#app[mode=studio] .control img{border:2px solid #333;max-width:185px;max-height:85px;margin-bottom:10px;border-radius:6px}#app[mode=studio] .control input[type=range]{width:220px}#app[mode=studio] .control input[type=range]:after{content:attr(tooltip);position:absolute;color:var(--color2);left:0;right:0;top:0;font-size:11px;text-align:center}#app[mode=studio] .control input[type=range][disabled=true]{opacity:.3;pointer-events:none;cursor:default}#app[mode=studio] .control label{color:var(--color2);font-size:13px;pointer-events:none}.control.visible input:before{content:" ";position:absolute}.control button{width:100%;height:100%;color:#fff;border:none;border-radius:9px;background:var(--color1)}*::-webkit-scrollbar{background:transparent;height:10px;width:10px}*::-webkit-scrollbar-thumb{background:#002!important;opacity:.3;border-radius:16px}@media (max-width: 620px){#app[mode=studio] .controls{max-height:calc(100% - 60px)}}@media (hover: hover){#app[mode=studio] button[fn=save]:hover{background:#448}}.presets{z-index:1;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 64px);-webkit-backdrop-filter:blur(64px) brightness(.75);backdrop-filter:blur(64px) brightness(.75);scroll-snap-type:x mandatory;background:#614c8c80;width:100vw;padding:10px 8px;transition:transform .39s ease-in-out,padding .618s ease-in-out;display:flex;justify-content:center;position:fixed;overflow:scroll visible;transform:translateY(200px)}#app[mode=studio] .presets{top:env(safe-area-inset-top);left:0;right:unset;bottom:0;z-index:3;background:#111;flex-direction:column;justify-content:flex-start;width:260px;height:100%;overflow:hidden auto;transform:translate(-300px);transform-origin:left top}.presets ul{margin:0;list-style:none;display:flex;flex-direction:row;padding:0 0 0 32px}#app[mode=studio] .presets ul{padding:0;scroll-snap-type:y mandatory;flex-direction:column}.presets ul li{position:relative;cursor:pointer;scroll-snap-align:center;background:#111;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;width:96px;min-width:96px;height:96px;min-height:96px;margin:0 5px;padding:0;display:flex;background-size:60%;background-repeat:no-repeat;background-position:center;transition:all .39s ease-in-out}#app[mode=studio] .presets ul li{cursor:pointer;scroll-snap-align:center;background:#111 9px / 48px no-repeat;border-radius:3px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:auto;min-height:66px;margin:0 5px;padding:15px 0;display:flex;overflow:hidden;border-bottom:1px solid var(--color4)}#app[mode=studio] .presets ul li span{padding-left:70px;color:#ccc;font-size:13px;width:100%}.presets ul li:hover{background-color:var(--color1)!important}.presets ul li.activated{background-color:#226!important}#app[mode=studio] .presets ul li:hover span{color:#fff}.presets ul li button[fn=delete]{position:absolute;top:22px;right:12px;border-radius:50%;background:transparent;width:24px;height:24px;border:none;color:#fff;cursor:pointer}.presets ul li button[fn=delete] svg{fill:var(--color2);pointer-events:none;opacity:.3}.presets ul li button[fn=delete]:hover svg{fill:red;opacity:1}@media (max-width: 620px){#app[mode=studio] .presets{max-height:calc(100% - 60px)}}.preview{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9;justify-content:center;display:flex;align-items:center;transform:scale(1.75);transform-origin:center;pointer-events:none}.preview .point{position:absolute;width:2px;height:2px;display:flex;border-radius:50%;background:#fff}pole-config .editor{z-index:1;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 64px);-webkit-backdrop-filter:blur(64px) brightness(.75);backdrop-filter:blur(64px) brightness(.75);scroll-snap-type:x mandatory;background:#614c8c80;width:100vw;padding:10px 0 0;transition:transform .39s ease-in-out,padding .618s ease-in-out;display:flex;justify-content:center;position:fixed;overflow:scroll visible;transform:translateY(200px)}@media (hover: none){pole-config .editor{bottom:calc(env(safe-area-inset-bottom) + 64px)}}pole-config .editor ul{padding:0;margin:0;list-style:none;display:flex;flex-direction:row}pole-config .editor li{cursor:pointer;scroll-snap-align:center;background:#111;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;width:64px;min-width:64px;height:64px;min-height:64px;margin:0 5px;padding:0;display:flex}pole-config .editor li.activated{background:#226}pole-config .editor li button{cursor:pointer;background:none;border:none;justify-content:center;align-items:center;display:flex}pole-config .editor li button svg{color:var(--color2)}#app[mode=studio] pole-config .editor{justify-content:center;padding:10px 0 0;display:flex;transform:none!important;position:relative!important;background:transparent!important;left:unset!important;right:unset!important;bottom:unset!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;width:auto!important}#app[mode=studio] pole-config .editor ul{width:215px;flex-wrap:wrap;justify-content:space-between}#app[mode=studio] pole-config .editor li{overflow:hidden;justify-content:center;align-items:center;width:42px;min-width:42px;height:42px;min-height:42px;margin:0;padding:1px;display:flex}@media (hover: hover){pole-config .editor li:hover{background:#226}}p-nav{position:fixed;left:0;right:0;height:64px;z-index:2;background:#111;bottom:env(safe-area-inset-bottom)}p-nav ul{padding:0;margin:0;list-style:none;display:flex;justify-content:center}p-nav ul li button{cursor:pointer;border:none;width:48px;height:48px;padding:10px;display:inline-flex;position:relative;transition:all .39s ease-in-out;background:transparent;color:var(--color2);justify-content:center;align-items:center}p-nav ul li button.activated{background:var(--color1)}p-nav ul li button svg{fill:var(--color2);pointer-events:none}#app[mode=studio] p-nav{z-index:2;left:50%;transform:translate(-50%);right:unset;bottom:env(safe-area-inset-bottom);background:#111;border-top-left-radius:9px;border-top-right-radius:9px;height:48px;position:fixed;transition:opacity 1s ease-in-out}#app[mode=studio] p-nav ul li button.activated{background:#226}@media (hover: hover){p-nav ul li button:hover{background:var(--color1);color:#fff}}p-knob{position:relative;display:block;width:48px;height:48px}p-knob .label{position:absolute;left:0;right:0;color:var(--color2);font-size:10px;height:22px;text-align:center;-webkit-font-smoothing:auto;display:inline-flex;align-items:center;justify-content:center}p-knob .knob{flex:0 0 auto}p-knob .knob.envelope-knob{width:48px;height:48px}p-knob .knob.tension-knob{padding:0;width:48px;height:48px}p-knob .knob .knob-input__visual{overflow:visible}p-knob .knob .dial{transform-origin:20px 20px;transition:all .6s ease-out}p-knob .knob .dial-highlight{opacity:0;transition:all .3s ease-out}p-knob .knob.drag-active .dial{transform:scale(.9);filter:brightness(1.2);transition:all .3s ease-out}p-knob .knob.drag-active .dial-highlight{opacity:.05}p-knob .knob .focus-indicator{opacity:0;transition:all .3s ease-out}p-knob .knob.focus-active .focus-indicator{opacity:.8}.knob-input{position:relative}.knob-input__visual{pointer-events:none;width:100%;height:100%}.knob-input__input{cursor:grab;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transform:rotate(-90deg)}body.knob-input__drag-active{cursor:grabbing!important}@media (hover: hover){p-knob .knob:hover .dial{transform:scale(.9);filter:brightness(1.2);transition:all .3s ease-out}p-knob .knob:hover .dial-highlight{opacity:.05}}xy-control{position:relative;display:flex;flex-direction:column}xy-control .grid{position:relative;cursor:pointer;scroll-snap-align:center;background:#111;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;width:96px;min-width:96px;height:95px;min-height:96px;margin:0 5px;padding:0;display:flex;overflow:hidden}xy-control .handle{width:16px;height:16px;border-radius:50%;background:#ccc;position:absolute;left:50%;top:50%;margin-left:-8px;margin-top:-8px;cursor:pointer;transform:translate(0);transform-origin:center}xy-control .handle.selected{border:2px solid white;background:#222}xy-control .buttons{display:none;position:absolute;bottom:3px;left:8px;right:8px;justify-content:space-between}xy-control .buttons.visible{display:flex}xy-control .buttons button{border-radius:6px;cursor:pointer;background:transparent;border:none;width:24px;height:24px;padding:0;margin:0;display:inline-flex;justify-content:center;align-items:center}xy-control .buttons button svg{width:100%;height:100%;color:var(--color2)}xy-control input[type=color]{border-radius:6px;width:24px;height:24px;padding:0}xy-control input[type=color]::-webkit-color-swatch-wrapper{padding:0}xy-control input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}#app[mode=studio] xy-control{width:100%;background:#111}#app[mode=studio] xy-control .grid{border:2px solid #226;margin:auto;z-index:3}#app[mode=studio] xy-control .label{color:var(--color2);font-size:13px;width:100px;margin:5px auto;text-align:center}#app[mode=studio] xy-control .buttons{flex-direction:column;justify-content:space-evenly;align-items:center;width:25px;height:96px;display:none;position:absolute;top:0}#app[mode=studio] xy-control .buttons.left{left:30px}#app[mode=studio] xy-control .buttons.right{right:30px;left:unset;display:flex}#app[mode=studio] xy-control .buttons.visible{display:flex}#app[mode=studio] xy-control .buttons button{font-size:32px;color:#fff}p-audio .options{position:fixed;bottom:48px;left:calc(50% - 120px);right:0;width:240px;padding:10px;background:#111;border-radius:9px}p-audio .options button{cursor:pointer;color:#111;background:var(--color2);border:none;border-radius:3px;width:100%;padding:5px 10px;font-size:13px;font-weight:600;height:32px;margin:5px 0}p-audio .options hr{width:100%;height:1px;background:var(--color4);border:none}p-audio .options button:nth-child(1){color:#fff;background:#136}p-audio .options button:nth-child(4){background:#ff1493}p-audio .options button:nth-child(5){background:#6495ed}p-audio .options button:nth-child(6){background:#8fbc8f}p-audio .options button:nth-child(7){background:#ff8c00}p-equalizer{position:relative;width:240px;height:180px;display:flex;flex-direction:column}p-equalizer .header{display:flex;justify-content:space-between;align-items:center;margin:0 10px 0 15px}p-equalizer label{color:var(--color2);pointer-events:none;font-size:13px}p-equalizer .header span{color:var(--color2);font-size:13px;display:inline-flex;align-items:center}p-equalizer .header input[type=checkbox]{cursor:pointer}p-equalizer .container{width:100%;position:relative}p-equalizer .bands-container{position:absolute;top:-45px;left:45px;transform:rotate(-90deg)}p-equalizer .bands{width:150px;height:240px;padding-top:12px}p-equalizer .bands .slider{display:flex;align-items:center;justify-content:center;height:24px}p-equalizer .bands .slider label{transform:rotate(90deg);color:var(--color2);height:20px;width:20px;font-size:10px;text-align:center}p-equalizer .bands input[type=range]{cursor:ns-resize;width:100px;background:transparent}p-equalizer .bands input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;background:#333;border-radius:10px;margin:10px 0;height:4px}p-equalizer .bands input[type=range]::-moz-range-track{-webkit-appearance:none;background:#333;border-radius:10px;margin:10px 0;height:4px}p-equalizer .bands input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#ccc;border-radius:50%;margin-top:-6px;height:16px;width:16px}p-equalizer .bands input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#111;border-radius:10px;margin-top:-5px;height:20px;width:20px}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;justify-content:center;align-items:center}.modal .modal-box{flex-direction:column;justify-content:center;align-items:center;display:flex;width:250px;background:#111;border-radius:6px;padding:30px}.modal .modal-box p{color:var(--color2);padding:0;margin-top:0}.modal input{font-size:16px;border:none;border-radius:3px;padding:5px 10px;margin:5px;color:#111}.modal button{font-size:13px;font-weight:600;border:none;border-radius:3px;padding:5px 10px;margin:5px;cursor:pointer;width:100%;color:#111;background:var(--color2)}.modal button.primary{color:#eee;background:var(--color1)}.modal hr{width:100%;height:1px;background:var(--color4);border:none}