.liquid-glass{--glass-zoom:1.19;--glass-blur:7;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(155deg,#ffffff28,#ffffff08 55%,#ffffff22);border-color:#ffffffa6;box-shadow:0 18px 40px -14px #27264238,0 5px 12px -5px #0000001a,inset 0 1px 1px #ffffffe8,inset 0 -1px 1px #ffffff8a;backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);-webkit-tap-highlight-color:transparent}
.liquid-glass[data-glass-ready]{backdrop-filter:none;-webkit-backdrop-filter:none}
.liquid-glass>[data-glass-layer]{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;border-radius:inherit}
.liquid-glass::after{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:0;pointer-events:none;background:radial-gradient(ellipse at var(--glass-light-x,40%) var(--glass-light-y,0%),#fff7,transparent 65%);opacity:.6;transition:opacity .3s}
.liquid-glass:hover::after{opacity:.6}
.liquid-glass:is(button,a):active{transform:translateY(0) scale(.98);transition:transform .12s}
.liquid-glass:focus-visible{outline:2px solid #b63718;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.liquid-glass::after{transition:none}.liquid-glass:is(button,a):active{transform:none;transition:none}}

/* Keep optical pixels above the surface fill and every control above the optics. */
:where(.liquid-glass)>:where(:not([data-glass-layer])){position:relative;z-index:1}

/* Touch scrolling runs on the compositor. Keep glass there too; a captured
   canvas cannot follow Safari's asynchronous scroll position reliably. */
@media(any-pointer:coarse){
 .liquid-glass,.liquid-glass[data-glass-ready]{backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15)}
 .liquid-glass>[data-glass-layer]{display:none!important}
}

/* Shared website interaction appearance. Keep native control behavior. */
:where(*){-webkit-tap-highlight-color:transparent}
:where(:focus,:focus-visible,:focus-within){outline:none!important;outline-offset:0!important}
:where(:focus,:focus-visible){box-shadow:none!important}
:where(:focus,:focus-visible,:focus-within)::before,
:where(:focus,:focus-visible,:focus-within)::after{outline:none!important;outline-offset:0!important}
button::-moz-focus-inner,input::-moz-focus-inner{border:0}

/* Important layered rules also override future unlayered component overrides. */
@layer la-interaction-policy{
 :where(:focus,:focus-visible,:focus-within){outline:none!important;outline-offset:0!important}
 :where(:focus,:focus-visible){box-shadow:none!important}
 :where(:focus,:focus-visible,:focus-within)::before,
 :where(:focus,:focus-visible,:focus-within)::after{outline:none!important;outline-offset:0!important}
}
.play-circle{background:linear-gradient(145deg,#ff4b1f,#ff4b1f)!important}
.switch-control[aria-checked="false"] .switch-track,
.la-toggle-switch[aria-checked="false"] .la-toggle-track{background:linear-gradient(to right,#e8e5dc,#72757d)!important}

/* Header faces use their own family names so tool bundles cannot redefine them. */
@font-face{font-family:LoudnessHeaderText;src:url('/assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:LoudnessHeaderText;src:url('/assets/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:LoudnessHeaderText;src:url('/assets/fonts/switzer-600.woff2') format('woff2');font-weight:600 900;font-style:normal;font-display:block}
@font-face{font-family:LoudnessHeaderBrand;src:url('/assets/fonts/cabinet-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:block}

/* Includes desktop navigation, mobile rows, account labels, search and submenus. */
:root .la-site-header,:root .la-site-header *,
:root .la-site-header.la-reference-header,:root .la-site-header.la-reference-header *{font-family:LoudnessHeaderText,Arial,sans-serif!important;font-synthesis:none}
/* The wordmark retains its existing brand lettering on every route. */
:root .la-site-header.la-reference-header .la-brand,
:root .la-site-header.la-reference-header .la-brand *{font-family:LoudnessHeaderBrand,Arial,sans-serif!important}

/* Heading weights retain the site's existing physical Cabinet faces. */
@font-face{font-family:LoudnessSiteHeading;src:url('/assets/fonts/cabinet-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:LoudnessSiteHeading;src:url('/assets/fonts/cabinet-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:LoudnessSiteHeading;src:url('/assets/fonts/cabinet-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:LoudnessSiteReadout;src:url('/assets/fonts/spline-sans-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:LoudnessSiteReadout;src:url('/assets/fonts/spline-sans-mono-500.woff2') format('woff2');font-weight:500 900;font-style:normal;font-display:block}

/* Important declarations in this shared layer outrank tool-local font overrides.
   Component styles retain ownership of every other visual and layout property. */
@layer loudness-site-typography {
/* Shared footer and account surfaces use the same protected faces as the header.
   Set only the family: their established sizes, weights and layouts remain owned
   by the footer/account stylesheets, including each responsive breakpoint. */
:root .la-site-footer,:root .la-site-footer *,
:root .la-account-dialog,:root .la-account-dialog *,
:root .la-account-main,:root .la-account-main *,
:root .la-account-card,:root .la-account-card *{font-family:LoudnessHeaderText,Arial,sans-serif!important;font-synthesis:none}
:root .la-site-header .la-brand,:root .la-site-header .la-brand *,
:root .la-site-footer .la-brand,:root .la-site-footer .la-brand *{font-family:LoudnessHeaderBrand,Arial,sans-serif!important}

/* Descriptive text has one face even when a tool only defines local aliases. */
:root :is(p,figcaption,summary,small),
:root :is(p,figcaption,summary,small) *,
:root :is(.faq,.faq-section,.faq-item,.ae-faq,.faq-list) button,
:root :is(.faq,.faq-section,.faq-item,.ae-faq,.faq-list) button *,
:root :is(.help-text,.helper-text,.tool-description,.lab-help,.lab-hint,.lab-note,.sk-note,[data-help-text],[data-description]),
:root :is(.help-text,.helper-text,.tool-description,.lab-help,.lab-hint,.lab-note,.sk-note,[data-help-text],[data-description]) *{font-family:LoudnessHeaderText,Arial,sans-serif!important;font-synthesis:none}

/* Both current locales and the reusable breadcrumb classes share the text face. */
:root :is(nav[aria-label="Breadcrumb" i],nav[aria-label="Ruta de navegación"],.breadcrumb,.breadcrumbs,.hub-crumb,.guide-crumb,.lab-crumb,.lm-crumb,.sk-crumb,.cw-crumb,.tt-crumb,[data-breadcrumb],[data-site-breadcrumb]),
:root :is(nav[aria-label="Breadcrumb" i],nav[aria-label="Ruta de navegación"],.breadcrumb,.breadcrumbs,.hub-crumb,.guide-crumb,.lab-crumb,.lm-crumb,.sk-crumb,.cw-crumb,.tt-crumb,[data-breadcrumb],[data-site-breadcrumb]) *{font-family:LoudnessHeaderText,Arial,sans-serif!important;font-synthesis:none}

/* All controls inherit the same text face, including their styled child labels. */
:root body,:root body *,
:root body :is(button,input,textarea,select,option,label,[role="button"],[role="switch"]),
:root body :is(button,input,textarea,select,option,label,[role="button"],[role="switch"]) *{font-family:LoudnessHeaderText,Arial,sans-serif!important;font-synthesis:none}

/* Processing, playback clocks and measured values share a protected mono face.
   Semantic output/data markers also cover newly added tools and result states. */
:root body :is(output,[data-site-readout],[data-processing-title],[data-transfer-label],[data-status],[data-mic-status],[data-current-time],[data-duration],[data-time-range],.lm-status,.am-status,.sm-status,.sm-current>span,.clean-process-status,.lm-reading,.lm-metric strong,.lm-file-details>div,.lm-inline-meter-ticks span,.lm-check-row small,.lm-comparison td:not(:first-child),.lm-inline-processing-reading,.sk-reading,.sk-code,.cw-center,.cw-center-small,.cw-segment text,[data-match-name],.sk-bpm-processing-reading,.sk-bpm-reading,.sk-bpm-metadata,.sk-bpm-tiles strong,.am-reading,.mic-reading,.tt-value,.tt-stats dd,.loading-region strong,.loading-overlay>span,.lab-notice,.lab-progress>span,.lab-dynamic-readout dd,.lab-stats dd,.lab-duration-summary strong,.lab-duration-summary small,.lab-transport>p,.lab-eq-x,.lab-eq-y,.lab-ruler>span,.lab-range-labels>span,.lab-transfer-top,.lab-transfer-y,.lab-transfer-axis span,.lab-reduction-value,.lab-keep>span,.lab-recording>p,.lab-mixer-track p,.lab-cross-track p,.clip-duration,.total-duration,.playback-time,.file-copy>span,.recording-copy>span,.clip-copy>span,.volume-control>span,.time-ruler>span,.ruler>span,.edge-time,.edge-value,.point-time,.clip-length,.sequence-boundary>span,.recording-boundary b,.playhead>span,.output-meta,.zoom-control>span),
:root body :is(output,[data-site-readout],[data-processing-title],[data-transfer-label],[data-status],[data-mic-status],[data-current-time],[data-duration],[data-time-range],.lm-status,.am-status,.sm-status,.sm-current>span,.clean-process-status,.lm-reading,.lm-metric strong,.lm-file-details>div,.lm-inline-meter-ticks span,.lm-check-row small,.lm-comparison td:not(:first-child),.lm-inline-processing-reading,.sk-reading,.sk-code,.cw-center,.cw-center-small,.cw-segment text,[data-match-name],.sk-bpm-processing-reading,.sk-bpm-reading,.sk-bpm-metadata,.sk-bpm-tiles strong,.am-reading,.mic-reading,.tt-value,.tt-stats dd,.loading-region strong,.loading-overlay>span,.lab-notice,.lab-progress>span,.lab-dynamic-readout dd,.lab-stats dd,.lab-duration-summary strong,.lab-duration-summary small,.lab-transport>p,.lab-eq-x,.lab-eq-y,.lab-ruler>span,.lab-range-labels>span,.lab-transfer-top,.lab-transfer-y,.lab-transfer-axis span,.lab-reduction-value,.lab-keep>span,.lab-recording>p,.lab-mixer-track p,.lab-cross-track p,.clip-duration,.total-duration,.playback-time,.file-copy>span,.recording-copy>span,.clip-copy>span,.volume-control>span,.time-ruler>span,.ruler>span,.edge-time,.edge-value,.point-time,.clip-length,.sequence-boundary>span,.recording-boundary b,.playhead>span,.output-meta,.zoom-control>span) :is(span,strong,b,em,small){font-family:LoudnessSiteReadout,monospace!important;font-synthesis:none}

/* The site-wide heading default also covers future H5/H6 and shared UI titles. */
:root body :is(h1,h2,h3,h4,h5,h6),:root body :is(h1,h2,h3,h4,h5,h6) *,
:root .la-site-footer :is(h1,h2,h3,h4,h5,h6),:root .la-site-footer :is(h1,h2,h3,h4,h5,h6) *,
:root .la-account-card :is(h1,h2,h3,h4,h5,h6),:root .la-account-card :is(h1,h2,h3,h4,h5,h6) *,
:root .la-site-header.la-reference-header :is(h1,h2,h3,h4,h5,h6),
:root .la-site-header.la-reference-header :is(h1,h2,h3,h4,h5,h6) *{font-family:LoudnessSiteHeading,Arial,sans-serif!important;font-synthesis:none}
}

/* Control captions retain Switzer beside their mono measurement values. */
@layer loudness-site-typography {
:root body :is(.editor-layout.cutter-result-layout .zoom-control>span,.selection-edge .edge-time .edge-label,.sequence-boundary>span>small){font-family:LoudnessHeaderText,Arial,sans-serif!important;font-synthesis:none}
}

/* One brand geometry; surrounding header/footer sizing remains shared. */
@layer loudness-site-brand {
 .la-brand .la-brand-accent{color:#ff4b1f!important}
 .la-brand>span{letter-spacing:-.03em!important}
 .la-logo-mark{flex-shrink:0;overflow:visible}
 .la-logo-bar{transform-box:fill-box;transform-origin:center;animation:la-logo-reveal 1.4s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--la-bar-index)*60ms)}
 @keyframes la-logo-reveal{0%{transform:scaleY(.12);opacity:.25}45%{transform:scaleY(1.18);opacity:1}75%{transform:scaleY(.9)}100%{transform:scaleY(1);opacity:1}}
 @keyframes la-logo-pulse{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.66)}65%{transform:scaleY(1.12)}}
 @media(hover:hover) and (pointer:fine){.la-brand:hover .la-logo-bar,.la-brand:focus-visible .la-logo-bar{animation:la-logo-pulse .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--la-bar-index)*35ms)}}
 @media(prefers-reduced-motion:reduce){.la-logo-bar,.la-brand:hover .la-logo-bar,.la-brand:focus-visible .la-logo-bar{animation:none;transform:none;opacity:1}}
}

/* Text roles only. Artwork retains its own paint and light controls retain theirs. */
@layer la-site-text-colors{
 [data-site-text-tone="white"]{color:#ffffff!important}
 [data-site-text-tone="link"]{color:#ff4b1f!important}
 [data-site-text-tone="native"]{color:var(--la-native-text-color)!important}
 [data-site-icon-tone]{color:var(--la-native-icon-color)!important}
 [data-site-pseudo-tone]::before{color:var(--la-native-before-color)!important}
 [data-site-pseudo-tone]::after{color:var(--la-native-after-color)!important}
}

/* Shared responsive tool states. Keep engine-owned state and native controls. */
#loudness-turnstile-gate{box-sizing:border-box!important;width:100%!important;max-width:100vw!important;min-width:0!important;padding:16px!important;overflow:auto!important}
#loudness-turnstile-gate>div{box-sizing:border-box!important;flex:none!important;width:min(420px,100%)!important;max-width:100%!important;min-width:0!important;padding:22px!important;overflow-wrap:anywhere}
#loudness-turnstile-title{font-size:24px!important;line-height:1.2!important;white-space:normal!important}
#loudness-turnstile-gate>div>p:not(#loudness-turnstile-title){font-size:14px!important;line-height:1.5!important;white-space:normal!important}
#loudness-turnstile-widget{width:100%;max-width:100%;min-width:0}
main :is(.la-separation-download,.lm-download,.sk-download,.am-preview-actions [data-download]){display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;max-width:100%;padding:11px 22px!important;border:1px solid #000!important;border-radius:999px!important;background:#000!important;color:#fff!important;text-decoration:none!important;text-align:center;font-size:14px!important;line-height:1.4!important;white-space:normal;overflow-wrap:anywhere}
main .la-separation-results{min-width:0}
main .la-separation-track{min-width:0;text-align:left}
main .la-separation-track strong{font-size:17px;line-height:1.3;overflow-wrap:anywhere}
main .la-separation-track audio{display:block;width:100%;min-width:0;max-width:100%;height:44px}
#category-tools-root .category-tool-card :is(.lm-output,.sk-result){min-width:0}
#category-tools-root .category-tool-card[data-phase]:not([data-phase=idle]) .editor-card-dropzone,
#category-tools-root .category-tool-card[data-category-active=true]:not([data-separation-tool]) .editor-card-dropzone,
#category-tools-root [data-separation-tool][aria-busy=true] .editor-card-dropzone{display:none!important}
#category-tools-root [data-separation-tool][data-category-active=true]:not([aria-busy=true]) .editor-card-dropzone{min-height:0!important;padding:0!important;margin:14px 0!important;border:0!important;background:transparent!important}
#category-tools-root [data-separation-tool][data-category-active=true]:not([aria-busy=true]) .editor-card-dropzone>:is(svg,p){display:none!important}
#category-tools-root [data-separation-tool][data-category-active=true]:not([aria-busy=true]) .editor-card-choose{width:auto!important;min-height:44px!important;font-size:14px!important}
#category-tools-root .category-tool-card.sk-bpm[data-phase=done] .sk-result,
#category-tools-root .category-tool-card.lm-inline[data-phase=done] .lm-output{padding:0!important;margin:0!important;border:0}
#category-tools-root .am-file-row p{min-width:0;font-size:12px;line-height:1.5;text-align:left}
#category-tools-root .am-file-row button{flex:none;display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;border:1px solid #b1b6c180;border-radius:999px;background:#ffffff40;color:#000;font-size:22px}
#category-tools-root .am-preview-actions{justify-content:center}
#category-tools-root .am-preview-actions [data-download]{flex:none;width:auto;min-width:170px}
#category-tools-root .am-workspace .am-preview-actions [data-download]{background:#000!important;border-color:#000!important;color:#fff!important;border-radius:999px!important}
main .la-processing-stage{box-sizing:border-box;width:100%;min-width:0;min-height:300px!important;padding:18px!important;gap:16px!important;border:0;border-radius:18px;background:#000 radial-gradient(circle,#ff94781c 2px,transparent 2.5px) 0 0/18px 18px!important;color:#fff;flex-direction:column;justify-content:space-between!important;align-items:stretch!important}
main .la-processing-visual{flex:1;min-width:0;width:100%!important;min-height:140px!important;max-height:200px;object-fit:contain}
main .la-processing-stage>canvas{width:100%!important;height:180px!important;min-height:140px!important;flex:1}
main .la-processing-stage .am-processing-staff svg{width:100%;height:180px;max-height:100%}
main .la-processing-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap;gap:10px!important;padding:10px 12px!important;border-radius:12px;background:#ffffff0d;text-align:left!important;min-width:0;max-width:100%;margin:0!important}
main .la-processing-controls>div{min-width:0;max-width:100%}
main .la-processing-controls :is([data-transfer-label],[data-processing-title],[data-site-readout]){font-size:12px!important;line-height:1.5!important;letter-spacing:0!important;overflow-wrap:anywhere}
main .la-processing-controls [data-transfer-label]{display:block;font-size:16px!important;color:#fff}
main .la-processing-controls button{flex:none;min-height:36px!important;max-width:100%;margin:0!important;padding:7px 14px!important;border:1px solid #ffffff45!important;border-radius:999px!important;background:transparent!important;color:#fff!important;font-size:12px!important;line-height:1.4!important}
main .la-processing-controls progress{flex-basis:100%;width:100%;height:5px;margin:0;accent-color:#ff4b1f}
main .la-separation-processing{display:none}
main [data-separation-tool][aria-busy=true] .la-separation-processing{display:flex}
main [data-separation-tool][aria-busy=true]>[data-status]{display:none}
.la-processing-bars{display:flex;align-items:center;justify-content:center;gap:9px;min-height:160px;flex:1}
.la-processing-bars span{width:6px;height:var(--bar-height);border-radius:999px;background:#ff9478;animation:la-tool-bars 1.2s ease-in-out infinite alternate;animation-delay:var(--bar-delay)}
@keyframes la-tool-bars{from{transform:scaleY(.4);opacity:.5}to{transform:scaleY(1);opacity:1}}
@media(max-width:620px){
 #category-tools-root .category-tool-card{padding-inline:14px!important}
 main .la-processing-stage{min-height:260px!important;padding:14px!important}
 main .la-processing-visual,main .la-processing-stage>canvas{min-height:130px!important;height:150px!important}
 main .la-processing-stage .am-processing-staff svg{height:150px}
 #category-tools-root .am-result-head{padding:14px 12px}
 #category-tools-root .am-staff{height:138px;margin-top:8px}
 #category-tools-root .am-listen-tabs{display:flex;width:fit-content;max-width:100%;margin:10px auto;gap:4px;padding:4px}
 #category-tools-root .am-listen-tabs button{min-width:0;min-height:36px;padding:7px 14px;font-size:12px}
 #category-tools-root .am-midi-player{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;grid-template-rows:18px 14px;gap:0 7px;padding:6px;min-height:46px}
 #category-tools-root .am-midi-player button{width:36px;height:36px;min-height:36px;padding:8px;grid-row:1/3}
 #category-tools-root .am-midi-player [data-play]{grid-column:1}
 #category-tools-root .am-midi-player [data-mute]{grid-column:3}
 #category-tools-root .am-midi-player [data-seek]{grid-column:2;grid-row:1;width:100%;height:18px;min-width:0}
 #category-tools-root .am-midi-player :is([data-current-time],[data-duration]){grid-column:2;grid-row:2;font-size:10px;min-width:0}
 #category-tools-root .am-midi-player [data-current-time]{justify-self:start}
 #category-tools-root .am-midi-player [data-duration]{justify-self:end}
 #category-tools-root .am-midi-player [data-volume]{display:none}
 main .la-separation-track{padding:14px}
 main .la-separation-download{font-size:13px!important;padding:10px 18px!important}
}
@media(max-width:380px){#loudness-turnstile-gate{padding:12px!important}#loudness-turnstile-gate>div{padding:18px 16px!important}#loudness-turnstile-title{font-size:21px!important}}
@media(prefers-reduced-motion:reduce){.la-processing-bars span{animation:none}}
#category-tools-root .la-link-arrow,main .la-link-arrow,.la-link-arrow{display:inline-block!important;width:1em!important;height:1em!important;vertical-align:-.12em;flex:none;overflow:visible;fill:none!important;stroke:currentColor!important;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

.la-reference-header .la-ref-view-all>img{object-fit:contain}
.editor-card-requirement>dl{min-width:0;flex:1;margin:0}
