.right-click-hero-demo .app-container{padding-block:0}.right-click-hero-demo .embedded-converter{min-height:0;padding-block:0}.right-click-hero-demo .converter-layout{--converter-spacing:16px;--converter-format-width:160px;display:grid;grid-template-columns:var(--converter-format-width) minmax(0,1fr) auto;grid-template-rows:minmax(180px,1fr) repeat(4,auto);align-items:stretch;justify-items:stretch;width:100%;aspect-ratio:1;gap:0 var(--converter-spacing)}.right-click-hero-demo .converter-input{grid-area:1/1/2/4;z-index:0;width:auto;min-width:0;min-height:0}.right-click-hero-demo .converter-dropzone{width:100%;height:100%}.right-click-hero-demo :is(.converter-controls,.converter-output,.converter-format-toolbar,.converter-settings,.converter-quality){display:contents}.right-click-hero-demo .converter-preview-panel{grid-area:1/1/2/4;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:32px 48px 48px;pointer-events:none}.right-click-hero-demo .converter-preview-panel>:first-child{display:none;flex:1;min-height:0;height:100%;margin:0}.right-click-hero-demo [data-show-output-preview=true] .converter-preview-panel>:first-child{display:flex}.right-click-hero-demo [data-show-output-preview=true] .converter-source-preview{visibility:hidden}.right-click-hero-demo .converter-input>button{z-index:2}.right-click-hero-demo .converter-interactive-preview{pointer-events:auto}.right-click-hero-demo .converter-format{grid-area:5/1;z-index:2;align-self:center;align-items:stretch;min-width:0}.right-click-hero-demo .converter-settings-button-host{grid-area:5/2;justify-self:start;align-self:center}.right-click-hero-demo .converter-settings-button{width:48px;height:48px}.right-click-hero-demo .converter-settings>label{grid-area:3/1/4/4;justify-self:start;margin-top:var(--converter-spacing)}.right-click-hero-demo .converter-quick-settings{grid-area:4/1/5/4;width:100%;min-width:0;margin:var(--converter-spacing) 0 0;text-align:left}.right-click-hero-demo :is(.converter-format,.converter-settings-button-host,.converter-action){margin-top:var(--converter-spacing)}.right-click-hero-demo .converter-action{grid-area:5/3;justify-self:end;align-self:center}.right-click-hero-demo .converter-action>button{min-width:var(--converter-format-width)}.right-click-hero-demo [data-has-result=true] .converter-action{display:none}.right-click-hero-demo .converter-save-actions{grid-area:5/3;justify-self:end;align-self:center;width:auto;margin-top:var(--converter-spacing)}.right-click-hero-demo .converter-save-primary{flex:none;width:var(--converter-format-width)}.right-click-hero-demo [data-has-result=false] .converter-save-actions{display:none}.right-click-hero-demo .converter-arrow-right{display:block}.right-click-hero-demo .converter-arrow-down{display:none}.right-click-hero-demo .converter-status{grid-area:2/1/3/4;width:100%;margin-top:var(--converter-spacing);text-align:left}.right-click-hero-demo .converter-log{text-align:left;font-size:11px;opacity:.65}.right-click-hero-demo .converter-status[data-log-active=false]:not(:has(.converter-notice)){display:none}@container (max-width: 420px){.right-click-hero-demo .converter-layout{--converter-spacing:12px;--converter-format-width:clamp(100px,calc((100cqw - 72px) / 2),160px)}.right-click-hero-demo .converter-preview-panel{padding:24px 32px 40px}.right-click-hero-demo .converter-action>button{padding-inline:12px}.right-click-hero-demo .converter-arrow-right{margin-left:0}}@container (max-width: 340px){.right-click-hero-demo .converter-layout{--converter-spacing:8px;--converter-format-width:calc((100cqw - 52px) / 2);grid-template-rows:minmax(140px,1fr) repeat(4,auto)}.right-click-hero-demo .converter-settings-button{width:36px;height:36px}.right-click-hero-demo .converter-action>button{padding-inline:8px;gap:4px;font-size:12px}}.right-click-hero-demo .converter-status[data-log-active=false] .converter-log{display:none}.right-click-hero-demo .embedded-converter{--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788)}.right-click-hero-demo .converter-layout .btn{font-weight:500;font-size:14px;box-shadow:none;text-transform:none}.right-click-hero-demo .converter-action>.btn{background:var(--color-primary);color:var(--color-primary-content);border:0}.right-click-hero-demo .converter-settings-button{background:var(--color-base-200);border:0}[data-theme=dark] .right-click-hero-demo .embedded-converter{--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314)}.right-click-demo-playback{opacity:0}.right-click-demo-playback:focus-visible,.right-click-demo-playback[data-paused=true]{opacity:1}@media (hover:hover){.right-click-demo-player:hover .right-click-demo-playback{opacity:1}}@media (prefers-reduced-motion:no-preference){.right-click-demo-playback{transition:opacity .15s}}@media (max-width:767px){.right-click-hero-demo .converter-layout[data-portable-preview=true]{aspect-ratio:auto;grid-template-rows:clamp(300px,65svh,520px) repeat(4,auto)}.right-click-hero-demo [data-portable-preview=true] .converter-input{left:50%;width:100vw;transform:translateX(-50%)}.right-click-hero-demo .portable-editor{border-radius:0}.right-click-hero-demo .portable-split-grip{--portable-grip-inset:21px;width:40px;height:40px}}