.plugin-shell{--plugin-accent:#c5acf7;isolation:isolate;color:#f4f4f7;background:#101319;border:1px solid #53555b;width:min(580px,100vw - 24px);height:min(760px,100dvh - 24px);max-height:calc(100dvh - 24px);position:relative}.plugin-shell:before{content:"";z-index:-2;background-image:linear-gradient(180deg,#05080d0f,#07090d7a 48%,#07090dd6),var(--plugin-art);pointer-events:none;background-position:top;background-size:cover;position:absolute;inset:0}.plugin-shell:after{content:"";z-index:-1;pointer-events:none;border:1px solid #ffffff0c;border-radius:12px;position:absolute;inset:5px}.plugin-shell[data-plugin=eq]{--plugin-accent:#8ee4be}.plugin-shell[data-plugin=compressor],.plugin-shell[data-plugin=delay]{--plugin-accent:#efc579}.plugin-shell[data-plugin=noise-gate]{--plugin-accent:#70d9b7}.plugin-shell[data-plugin=phaser]{--plugin-accent:#7ae7df}.plugin-shell[data-plugin=reverb]{--plugin-accent:#87bffa}.plugin-shell[data-plugin=mixer]{--plugin-accent:#c8d9e8}.plugin-shell[data-plugin=dj-deck]{--plugin-accent:#f693a7}.plugin-shell[data-plugin=drive]{--plugin-accent:#f2ac79}.plugin-shell[data-plugin=remix]{--plugin-accent:#d0e988}.plugin-shell[data-plugin=sampler]{--plugin-accent:#f2b5a4}.plugin-shell[data-plugin=interblend]{--plugin-accent:#a7dceb}.plugin-shell[data-plugin=dubstep]{--plugin-accent:#d9f76e}.plugin-shell[data-plugin=slices]{--plugin-accent:#83e2f2}.plugin-shell[data-plugin=versions]{--plugin-accent:#c6bbff}.plugin-shell>.modal-header{background:linear-gradient(#080b10b3,#080b101a);border-bottom:1px solid #ffffff1c;align-items:center;gap:8px;min-height:64px;padding:12px 16px 10px}.plugin-shell .modal-header h2{letter-spacing:-.035em;font-size:25px}.plugin-shell .modal-header .eyebrow{color:var(--plugin-accent);letter-spacing:.12em;text-overflow:ellipsis;white-space:nowrap;max-width:70vw;margin:0 0 3px;font-size:10px;overflow:hidden}.plugin-shell .modal-header .icon-button{background:#13171bd9;border:1px solid #ffffff30;border-radius:50%;flex:0 0 44px;width:44px;height:44px}.plugin-shell>.modal-content{flex-direction:column;flex:1;gap:8px;min-height:0;padding:12px 14px;display:flex;overflow:auto}.plugin-shell>.modal-footer{background:#090c10e8;border-top:1px solid #ffffff24;flex-wrap:nowrap;gap:8px;min-height:60px;padding:8px 12px;display:flex}.plugin-shell .modal-footer>button{flex:1;min-height:44px;padding:8px;font-size:12px}.plugin-shell button,.plugin-shell input,.plugin-shell select{font-family:inherit}.plugin-shell button{touch-action:manipulation}.plugin-shell button:focus-visible,.plugin-shell input:focus-visible,.plugin-shell select:focus-visible{outline:2px solid var(--plugin-accent);outline-offset:3px}.plugin-shell :is(button,input,select):disabled,.plugin-shell fieldset:disabled{opacity:.48}.plugin-shell :is(p,small){line-height:1.35}.plugin-shell p{color:#c2c8d0;margin:5px 0;font-size:12px}.plugin-shell select{color:#f5f5f8;background:#10151ee8;border:1px solid #68717d80;border-radius:8px;width:100%;min-width:0;min-height:44px;padding:7px 9px;font-size:13px}.plugin-shell fieldset{background:#0c1018a6;border:1px solid #ffffff1c;border-radius:10px;min-width:0;margin:0;padding:8px}.plugin-shell legend{color:var(--plugin-accent);text-transform:uppercase;letter-spacing:.08em;padding:0 6px;font-size:11px}.plugin-shell .plugin-tabs{background:#090d13d9;border:1px solid #ffffff20;border-radius:10px;flex:none;gap:3px;padding:3px;display:flex}.plugin-shell .plugin-tabs>button{color:#aab3c1;background:0 0;border:0;border-radius:7px;flex:1;min-width:0;min-height:40px;padding:5px 3px;font-size:12px;font-weight:650}.plugin-shell .plugin-tabs>button[aria-selected=true]{background:color-mix(in srgb,var(--plugin-accent,#c5acf7) 16%,#171c25);color:var(--plugin-accent,#c5acf7);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plugin-accent,#c5acf7) 40%,transparent)}.plugin-shell .plugin-knob-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:8px;display:grid}.plugin-shell .plugin-knob{align-content:start;justify-items:center;gap:2px;min-width:0;padding:3px 0;display:grid}.plugin-shell .plugin-knob__label{text-align:center;color:#d5dce5;max-width:100%;min-height:14px;font-size:11px;font-weight:650;line-height:14px}.plugin-shell .plugin-knob .plugin-knob__dial{touch-action:none;cursor:ns-resize;width:58px;min-width:58px;height:58px;min-height:58px;box-shadow:none;background:0 0;border:0;border-radius:50%;padding:0;position:relative}.plugin-shell .plugin-knob__ring{background:conic-gradient(from 225deg,var(--plugin-accent,#c5acf7) 0 var(--knob-fill),#414957 var(--knob-fill) 270deg,transparent 270deg);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(#0000 64%,#000 66%);mask:radial-gradient(#0000 64%,#000 66%)}.plugin-shell .plugin-knob__cap{transform:rotate(var(--knob-turn));background:radial-gradient(at 30% 20%,#56616f,#252c37 48%,#111720 85%);border:1px solid #8e98a759;border-radius:50%;position:absolute;inset:7px;box-shadow:0 4px 8px #000b,inset 0 1px 2px #d5edff44}.plugin-shell .plugin-knob__cap i{background:var(--plugin-accent,#c5acf7);width:3px;height:12px;box-shadow:0 0 6px color-mix(in srgb,var(--plugin-accent,#c5acf7) 50%,transparent);border-radius:2px;position:absolute;top:3px;left:calc(50% - 1.5px)}.plugin-shell .plugin-knob__readout{min-width:0;color:var(--plugin-accent,#c5acf7);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;gap:2px;font-size:10px;display:flex}.plugin-shell .plugin-knob__readout input{appearance:textfield;text-align:center;width:59px;min-width:0;height:26px;min-height:26px;color:inherit;background:#070b11a8;border:1px solid #8194af36;border-radius:5px;padding:2px 3px;font-size:12px}.plugin-shell .plugin-knob__readout input::-webkit-inner-spin-button{appearance:none;margin:0}.plugin-shell .plugin-knob__readout input::-webkit-outer-spin-button{appearance:none;margin:0}.plugin-shell .plugin-slider{background:#090e16a6;border:1px solid #ffffff18;border-radius:9px;min-width:0;padding:4px 8px}.plugin-shell .plugin-slider .recording-parameter{gap:0;margin:0;display:grid}.plugin-shell .plugin-slider .recording-parameter>span{justify-content:space-between;gap:8px;font-size:11px;line-height:16px;display:flex}.plugin-shell .plugin-slider output{color:var(--plugin-accent,#c5acf7);font-variant-numeric:tabular-nums}.plugin-shell .plugin-slider input[type=range]{width:100%;height:36px;min-height:36px;accent-color:var(--plugin-accent,#c5acf7);touch-action:pan-y;margin:0;padding:0}.plugin-shell .plugin-page{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex}.plugin-shell .plugin-help{font-size:13px;line-height:1.4}.plugin-shell .plugin-surface{background:#0a0f17b3;border:1px solid #ffffff20;border-radius:12px;padding:10px}@media (max-width:640px){.modal-backdrop.plugin-backdrop{align-items:center;padding:0}.modal-sheet.plugin-shell{width:100%;height:100dvh;max-height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);border-width:0;border-radius:0}.plugin-shell:after{border-radius:0}.plugin-shell>.modal-content{padding:8px 12px}.plugin-shell>.modal-footer{padding-bottom:8px}}@media (max-height:680px) and (min-height:500px){.plugin-shell>.modal-header{min-height:56px;padding-top:7px;padding-bottom:6px}.plugin-shell .modal-header h2{font-size:22px}.plugin-shell .plugin-knob{gap:0}.plugin-shell .plugin-knob .plugin-knob__dial{width:52px;min-width:52px;height:52px;min-height:52px}.plugin-shell .plugin-tabs>button{min-height:38px}}@media (prefers-reduced-motion:reduce){.plugin-shell{animation:none}}.plugin-backdrop{overscroll-behavior:contain}body:has(.plugin-backdrop){overflow:hidden}.plugin-shell>.modal-footer>.recording-sound-playback{flex:100%;grid-template-columns:1fr 1fr .7fr;width:100%;max-width:none;display:grid}.plugin-shell>.modal-footer>.recording-sound-playback>button{grid-column:auto;min-height:44px;padding:6px;font-size:12px}.plugin-shell>.modal-footer>.recording-sound-playback>button:last-child{grid-column:auto}