@layer components{.x-asset-loading-frame>.x-asset-soft{z-index:0;object-fit:cover;opacity:1;width:100%;height:100%;position:absolute;inset:0}.x-asset-loading-frame>.x-asset-soft[data-blur]{filter:blur(10px);transform:scale(1.1)}.x-asset-loading-frame[data-loaded]>.x-asset-soft,.x-asset-loading-frame[data-failed]>.x-asset-soft{display:none}:where(.x-asset-loading-frame){border-radius:inherit;background:0 0;place-items:center;min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.x-asset-loading-frame[data-loading]:not([data-soft]){background:linear-gradient(135deg, color-mix(in oklch, var(--fg), transparent 88%), color-mix(in oklch, var(--fg), transparent 94%))}.x-asset-loading-frame:before{content:"";z-index:2;border-radius:inherit;opacity:0;pointer-events:none;position:absolute;inset:0}.x-asset-loading-frame[data-failed]{background:color-mix(in oklch, var(--danger), transparent 92%);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--danger), transparent 74%)}.x-asset-loading-frame[data-failed]:before{opacity:0;animation:none}.x-asset-loading-frame>:is(img,video,audio):not(.x-asset-soft){z-index:1;opacity:0;transition:opacity var(--motion-fast) ease;position:relative}.x-asset-loading-frame>[data-loading-visible],.x-asset-loading-frame[data-loaded]>:is(img,video,audio):not([data-hidden]):not(.x-asset-soft){opacity:1}.x-asset-loading-frame:is([data-loaded],[data-failed])>[data-loading-visible]{display:none}:where(.x-media-player){--player-accent:var(--alpha);--player-rail:82px;--player-rail-thickness:4px;--player-thumb:12px;width:100%;min-width:0;color:var(--text);align-items:center;gap:.75em;padding:.5em .75em;display:flex}.x-media-player[data-floating]{z-index:2;opacity:0;transition:opacity var(--motion-fast) ease;background:linear-gradient(#0000,#000c);border-end-end-radius:inherit;border-end-start-radius:inherit;position:absolute;inset-block-end:0;inset-inline:0}:is(video,audio):hover~.x-media-player[data-floating],.x-media-player[data-floating]:is(:hover,:focus-within){opacity:1}.x-media-player[data-floating][data-resting],:is(video,audio):hover~.x-media-player[data-floating][data-resting]{opacity:0;pointer-events:none}.x-media-player-play{border:1px solid color-mix(in oklch, var(--player-accent), transparent 55%);width:2.25em;height:2.25em;color:var(--bg);background:var(--player-accent);cursor:pointer;transition:transform var(--motion-fast) var(--ease-sticky), box-shadow var(--motion-fast) ease;border-radius:50%;flex:none;place-items:center;padding:0;display:grid}.x-media-player-play svg{width:1.15em;height:1.15em}.x-media-player-idle{--player-accent:var(--alpha);z-index:2;border:1px solid color-mix(in oklch, var(--player-accent), transparent 55%);width:3.5em;height:3.5em;color:var(--bg);background:color-mix(in oklch, var(--player-accent), transparent 12%);box-shadow:var(--shadow-soft);cursor:pointer;transition:transform var(--motion-fast) var(--ease-sticky);border-radius:50%;place-items:center;margin:auto;padding:0;display:grid;position:absolute;inset:0}.x-media-player-idle svg{width:1.6em;height:1.6em}.x-media-player-idle:is(:hover,:focus-visible){outline:none;transform:scale(1.06)}.x-media-player-spin{animation:.85s linear infinite x-media-player-spin}@keyframes x-media-player-spin{to{transform:rotate(360deg)}}.x-media-player-play:is(:hover,:focus-visible){box-shadow:0 0 0 4px color-mix(in oklch, var(--player-accent), transparent 78%);transform:translateY(var(--motion-hover-y));outline:none}.x-media-player-play:active{transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}.x-media-player-track{background:var(--surface-control-solid);min-width:0;height:.5em;box-shadow:inset 0 0 0 1px var(--line-soft);cursor:pointer;touch-action:none;border-radius:999px;flex:auto;position:relative}.x-media-player-playhead{background:var(--player-accent);pointer-events:none;border-radius:2px;width:2px;margin-left:-1px;position:absolute;inset-block:-.3em;box-shadow:0 0 .4em #000a}.x-media-player-volume{flex:none;align-items:center;gap:.25em;display:flex}.x-media-player-mute{width:2em;height:2em;color:var(--text);cursor:pointer;transition:color var(--motion-fast) ease, background var(--motion-fast) ease;background:0 0;border:0;border-radius:50%;flex:none;place-items:center;padding:0;display:grid}.x-media-player-mute svg{width:1.15em;height:1.15em}.x-media-player-mute:is(:hover,:focus-visible){color:var(--fg);background:var(--ella-hover-surface);outline:none}.x-media-player-volume[data-muted] .x-media-player-mute{color:var(--muted)}.x-media-player .x-media-player-level{appearance:none;width:var(--player-rail);height:var(--player-thumb);box-shadow:none;cursor:pointer;background:0 0;border:0;border-radius:0;flex:none;margin:0;padding:0}.x-media-player-level::-webkit-slider-runnable-track{height:var(--player-rail-thickness);border-radius:var(--player-rail-thickness);background:color-mix(in oklch, var(--fg), transparent 82%)}.x-media-player-level::-webkit-slider-thumb{appearance:none;width:var(--player-thumb);height:var(--player-thumb);margin-top:calc((var(--player-rail-thickness) - var(--player-thumb)) / 2);background:var(--player-accent);border:0;border-radius:50%}.x-media-player-level::-moz-range-track{height:var(--player-rail-thickness);border-radius:var(--player-rail-thickness);background:color-mix(in oklch, var(--fg), transparent 82%)}.x-media-player-level::-moz-range-thumb{width:var(--player-thumb);height:var(--player-thumb);background:var(--player-accent);border:0;border-radius:50%}.x-media-player .x-media-player-level:focus-visible{box-shadow:none;outline:none}.x-media-player .x-media-player-level:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in oklch, var(--player-accent), transparent 70%)}}
