:root {
    /* Padding */
    --pad-1:                6px;                                             /* app shell, buttons, compact UI */
    --pad-2:                8px;                                             /* panel content and overlay inset */
    --pad-3:                4px;                                             /* dense media-list controls */

    /* Gap */
    --gap-1:                6px;                                             /* standard layout and UI gaps */

    /* Radius */
    --radius-1:             8px;                                             /* main panels */
    --radius-2:             6px;                                             /* nested panels and buttons */
    --radius-3:             3px;                                             /* dense media-list controls */
    
    /* Borders */
    --border-1:             1px;                                             /* controls and internal separators */
    --border-2:             2px;                                             /* main panels */

    /* Interaction States */
    --opacity-disabled:     0.48;

    /* Layout */
    --navbar:               58px;
    --header:               calc(var(--btn-slim-h) + 2 * var(--pad-2));
    --footer:               32px;
    --sidebar-control-cell: var(--sidebar-control-height);
    --sidebar-control-grid-w: calc((var(--sidebar-control-cell) * 8) + (var(--gap-1) * 7));
    --sidebar:              calc(var(--sidebar-control-grid-w) + (var(--pad-2) * 2) + var(--border-2));
    --sidebar-closed:       var(--navbar);

    /* Typography */
    --font-main:            system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-numeric:         ui-monospace, "Cascadia Code", "Menlo", monospace;
    --font-code:            ui-monospace, "Cascadia Code", "Menlo", monospace;
    --font-ui:              var(--font-main);
    --fs-title:             12px;
    --fs-button:            11px;
    --fs-text:              11px;
    --fs-console:           10px;
    --lh-title:             15px;
    --lh-button:            15px;
    --lh-text:              16px;
    --lh-console:           12px;
    --title-letter-spacing: 0.12em;
    --font-title:           400 var(--fs-title) / var(--lh-title) var(--font-ui);
    --font-button:          400 var(--fs-button) / var(--lh-button) var(--font-ui);
    --font-textblock:       400 var(--fs-text) / var(--lh-text) var(--font-ui);
    --font-console:         400 var(--fs-console) / var(--lh-console) var(--font-ui);

    /* Component Sizes */
    --btn-h:                32px;
    --btn-slim-h:           20px;
    --icon-size-sm:         calc(var(--btn-h) / 2);
    --icon-size-md:         calc(var(--btn-h) / 2);
    --media-list-h:         56px;
    --media-action-size:    calc((var(--media-list-h) - (var(--pad-3) * 2)) * 0.5);
    --method-btn-size:      calc(var(--navbar) - (var(--pad-2) * 2));
    --media-list-min-slots:  3;
    --sidebar-control-height: 39px;
    --sidebar-control-inset: 2px;
    --sidebar-control-icon: calc(var(--sidebar-control-height) - ((var(--sidebar-control-inset) + var(--border-1)) * 2));
    --sidebar-control-icon-radius: calc(var(--radius-2) - var(--sidebar-control-inset));
    --sidebar-control-slider-height: 12px;
    --sidebar-control-slider-radius: 2px;
    --sidebar-control-segment-height: var(--sidebar-control-icon);
    --sidebar-section-header-height: 34px;
    --sidebar-section-icon-size: 18px;
    --scrollbar-width:       5px;
    --scrollbar-thumb-width: 3px;
    --scrollbar-radius:      999px;

    /* Motion */
    --ease-fast:            140ms ease;
    --ease-shell:           180ms ease;

    /* Effects */
    --shadow-1:             0 2px 8px rgba(0, 0, 0, 0.24);
    --filter-blur-ui:       blur(16px);

    /* Layering */
    --z-base:               1;
    --z-ui:                 10;
    --z-overlay:            20;
    --z-modal:              100;

    /* 3D Curvature Visualization */
    --c-curvature-neutral:   rgb(196, 196, 196);
    --c-curvature-concave:   rgb(0, 164, 255);
    --c-curvature-convex:    rgb(255, 64, 16);

}

body {
    --c-slider-track: color-mix(in srgb, var(--c-border) 48%, var(--c-surface-solid));
    --c-slider-fill: color-mix(in srgb, var(--c-accent) 72%, var(--c-font-muted));
    --c-slider-marker: var(--c-font);
    --c-control-hover-bg: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-interactive));
    --c-control-active-bg: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-interactive));
    --c-control-hover-bg-solid: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-solid));
    --c-control-active-bg-solid: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-solid));
    --c-control-hover-border: color-mix(in srgb, var(--c-accent) 72%, var(--c-border));
    --c-focus-ring: color-mix(in srgb, var(--c-accent) 82%, var(--c-font));
    --c-icon: var(--c-font);
    --c-icon-muted: var(--c-font-muted);
}

body:not([data-theme]),
body[data-theme="dark"] {
    color-scheme: dark;

    /* Color Layers */
    --c-bg:                  rgb(12, 12, 12);           /* App fallback background when ambient background is off */
    --c-surface-solid:       rgb(18, 18, 18);          /* Solid surface for overlapping UI that must fully block what sits behind it */
    --c-surface-glass:       rgba(22, 22, 22, 0.4);    /* Translucent structural surface for glass panels and chrome */
    --c-surface-interactive: rgba(28, 28, 28, 0.4);    /* Interactive surface for buttons, inputs, and controls */
    --c-border:              rgb(48, 48, 48);          /* Default border color */

    /* Accent Colors */
    --c-theme-accent:        rgb(164, 255, 0);
    --c-accent:              var(--c-theme-accent);
    --c-danger:              rgb(255, 64, 96);
    --c-alarm:               rgb(255, 188, 64);

    /* Sidebar Section Colors */
    --c-section-media-list:  var(--c-accent);
    --c-section-file:        rgb(72, 164, 255);
    --c-section-filter:      rgb(190, 112, 255);
    --c-section-analytics:   rgb(40, 204, 212);
    --c-section-controls:    rgb(225, 188, 64);
    --c-section-view:        rgb(92, 208, 132);
    --c-section-3d-camera:   rgb(32, 204, 255);
    --c-section-lighting:    rgb(255, 140, 72);
    --c-section-shading:     rgb(232, 64, 168);
    --c-section-3d-mesh:     rgb(196, 255, 12);
    --c-section-3d-splat:    rgb(168, 112, 255);

    /* Console Colors */
    --c-console-level-info:    var(--c-section-file);
    --c-console-level-action:  var(--c-section-view);
    --c-console-level-warning: var(--c-section-controls);
    --c-console-level-error:   var(--c-danger);
    --c-console-level-system:  var(--c-font);

    /* Text And Icons */
    --c-font:                rgb(255, 255, 255);
    --c-font-muted:          rgba(255, 255, 255, 0.64);
    --c-panel-zoom-neutral:  rgba(255, 255, 255, 0.75);

    /* 3D View Colors */
    --c-grid-minor:          rgba(255, 255, 255, 0.10);
    --c-grid-major:          rgba(255, 255, 255, 0.24);
    --c-axis-x:              rgba(255, 80, 80, 0.68);
    --c-axis-y:              rgba(72, 212, 116, 0.68);
    --c-axis-z:              rgba(72, 132, 255, 0.68);

    /* Effects */
    --shadow-2:              0 4px 18px rgba(0, 0, 0, 0.24);
    --shadow-panel-file-label: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.4);
    --shadow-zoom-label:     0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.5);

    /* Background */
    --bg-contour-line-opacity: 0.08;
}

body[data-theme="light"] {
    color-scheme: light;

    /* Color Layers */
    --c-bg:                  rgb(255, 255, 255);       /* App fallback background when ambient background is off */
    --c-surface-solid:       rgb(245, 245, 245);       /* Solid surface for overlapping UI that must fully block what sits behind it */
    --c-surface-glass:       rgba(245, 245, 245, 0.4); /* Translucent structural surface for glass panels and chrome */
    --c-surface-interactive: rgba(255, 255, 255, 0.6); /* Interactive surface for buttons, inputs, and controls */
    --c-border:              rgb(96, 96, 96);           /* Default border color */

    /* Accent Colors */
    --c-theme-accent:        rgb(149, 230, 0);
    --c-accent:              var(--c-theme-accent);
    --c-danger:              rgb(170, 25, 50);
    --c-alarm:               rgb(125, 70, 0);

    /* Sidebar Section Colors */
    --c-section-media-list:  var(--c-accent);
    --c-section-file:        rgb(0, 80, 160);
    --c-section-filter:      rgb(100, 40, 160);
    --c-section-analytics:   rgb(0, 90, 100);
    --c-section-controls:    rgb(105, 75, 0);
    --c-section-view:        rgb(10, 95, 45);
    --c-section-3d-camera:   rgb(0, 82, 125);
    --c-section-lighting:    rgb(145, 55, 10);
    --c-section-shading:     rgb(155, 20, 100);
    --c-section-3d-mesh:     rgb(60, 90, 0);
    --c-section-3d-splat:    rgb(92, 42, 145);

    /* Console Colors */
    --c-console-level-info:    var(--c-section-file);
    --c-console-level-action:  var(--c-section-view);
    --c-console-level-warning: var(--c-section-controls);
    --c-console-level-error:   var(--c-danger);
    --c-console-level-system:  var(--c-font);

    /* Text And Icons */
    --c-font:                rgb(0, 0, 0);
    --c-font-muted:          rgba(0, 0, 0, 0.64);
    --c-panel-zoom-neutral:  rgba(0, 0, 0, 0.75);

    /* 3D View Colors */
    --c-grid-minor:          rgba(0, 0, 0, 0.10);
    --c-grid-major:          rgba(0, 0, 0, 0.24);
    --c-axis-x:              rgb(170, 25, 50);
    --c-axis-y:              rgb(10, 95, 45);
    --c-axis-z:              rgb(0, 80, 160);

    /* Effects */
    --shadow-2:              0 6px 18px rgba(0, 0, 0, 0.24);
    --shadow-panel-file-label: 0 1px 3px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.4);
    --shadow-zoom-label:     0 1px 3px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.5);

    /* Background */
    --bg-contour-line-opacity: 0.33;
}

@media (max-width: 640px) {
    :root {
        --pad-1: 3px;
        --pad-2: 6px;
        --pad-3: 3px;
        --gap-1: 3px;
        --navbar: 56px;
        --sidebar: 320px;
        --sidebar-closed: calc(var(--navbar) + (var(--pad-1) * 2));
        --btn-slim-h: 28px;
        --method-btn-size: calc(var(--navbar) - 3 * var(--pad-1));
        --media-list-min-slots: 2;
    }
}





body[data-theme-variant="magenta"] {
    --c-theme-accent: rgb(196, 64, 255);
    --c-accent: var(--c-theme-accent);
}

body[data-theme-variant="cyan"] {
    --c-theme-accent: rgb(16, 255, 228);
    --c-accent: var(--c-theme-accent);
}

.appShell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        var(--c-bg),
        color-mix(in srgb, var(--c-bg) 50%, black)
    );
}

.appShell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("./neutral-dither-C06MaH9x.svg") repeat;
    background-size: 64px 64px;
}

.appShell > * {
    position: relative;
    z-index: 1;
}

.appShell > .appBackgroundCanvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.appShell > .appBackgroundCanvas[hidden] {
    display: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-user-select: none;
    user-select: none;
}

body {
    overflow: hidden;
    font: var(--font-textblock);
    background: var(--c-bg);
    color: var(--c-font);
}

/* Shared app scrollbar: a slim button-colored track with an accent thumb. */
.appScrollRegion {
    scrollbar-color: var(--c-accent) var(--c-surface-interactive);
}

@supports selector(::-webkit-scrollbar) {
    .appScrollRegion {
        scrollbar-width: auto;
    }
}

@supports not selector(::-webkit-scrollbar) {
    .appScrollRegion {
        scrollbar-width: thin;
    }
}

.appScrollRegion::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

.appScrollRegion::-webkit-scrollbar-track {
    background: var(--c-surface-interactive);
}

.appScrollRegion::-webkit-scrollbar-thumb {
    min-height: 28px;
    border: calc((var(--scrollbar-width) - var(--scrollbar-thumb-width)) / 2) solid transparent;
    border-radius: var(--scrollbar-radius);
    background: var(--c-accent);
    background-clip: content-box;
}

.appScrollRegion::-webkit-scrollbar-corner {
    background: var(--c-surface-interactive);
}

button {
    font: var(--font-button);
}

input,
textarea,
select {
    font: var(--font-textblock);
    -webkit-user-select: text;
    user-select: text;
}

[contenteditable]:not([contenteditable="false"]),
[contenteditable="plaintext-only"],
[data-allow-selection="true"],
.allow-selection {
    -webkit-user-select: text;
    user-select: text;
}

button {
    border: 0;
    background: none;
    color: inherit;
}

img,
svg {
    display: block;
    max-width: 100%;
}

code,
kbd {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--lh-console) + 2px);
    padding: 0 calc(var(--pad-3) + 1px);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-3);
    background: var(--c-surface-interactive);
    color: var(--c-font);
    font-family: var(--font-code);
    font-size: 0.95em;
    line-height: 1;
}

kbd {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--c-border) 72%, transparent);
}

:focus-visible {
    outline: var(--border-2) solid var(--c-focus-ring);
    outline-offset: var(--border-1);
}

.appShell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--navbar) minmax(0, 1fr) var(--sidebar);
    grid-template-rows: minmax(0, 1fr) auto;
}

.methodRail {
    grid-column: 1;
    grid-row: 1;
}

.contentArea {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    padding: var(--pad-1);
    overflow: hidden;
}

.sidebarPanel {
    grid-column: 3;
    grid-row: 1;
}

.appFooter {
    --app-footer-social-size: calc(var(--footer) - 12px);
    position: relative;
    overflow: hidden;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    height: var(--footer);
    min-height: var(--footer);
    display: flex;
    align-items: center;
    padding: 0 var(--pad-1);
    background: var(--c-surface-glass);
    border-top: var(--border-2) solid var(--c-border);
}

.appFooter__content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-1);
}

.appFooter__socials {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

.appFooter__status {
    grid-column: 2;
    grid-row: 1;
}

.appFooter__links {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.appFooter__socials,
.appFooter__links {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
}

.appFooter__versionGroup {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-1);
    flex: 0 0 auto;
}

.appFooter__socials {
    justify-content: flex-start;
}

.appFooter__links {
    justify-content: flex-end;
}

.appFooter__status {
    display: grid;
    place-items: center;
    min-width: 0;
}

.appFooter__loadingLabel {
    display: block;
    font: var(--font-textblock);
    max-width: min(100%, 32ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34);
}

.appFooter__socialLink,
.appFooter__textLink,
.appFooter__version,
.appFooter__copyright {
    color: var(--c-font-muted);
}

.appFooter__socialLink,
.appFooter__textLink {
    transition: color var(--ease-fast);
}

.appFooter__socialLink:hover,
.appFooter__socialLink:focus-visible,
.appFooter__textLink:hover,
.appFooter__textLink:focus-visible {
    color: var(--c-accent);
}

.appFooter__socialLink {
    width: var(--app-footer-social-size);
    height: var(--app-footer-social-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.appFooter__socialIcon {
    width: 100%;
    height: 100%;
    background: currentColor;
    mask: var(--footer-social-icon) center / contain no-repeat;
    -webkit-mask: var(--footer-social-icon) center / contain no-repeat;
}

.appFooter__socialLink--globe {
    --footer-social-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3ccircle%20cx='12'%20cy='12'%20r='9'/%3e%3cpath%20d='M3%2012h18'/%3e%3cpath%20d='M12%203c2.4%202.5%203.6%205.5%203.6%209s-1.2%206.5-3.6%209c-2.4-2.5-3.6-5.5-3.6-9S9.6%205.5%2012%203Z'/%3e%3c/svg%3e");
}

.appFooter__socialLink--instagram {
    --footer-social-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='tabler-icon%20tabler-icon-brand-instagram%20'%3e%3cpath%20d='M4%208a4%204%200%200%201%204%20-4h8a4%204%200%200%201%204%204v8a4%204%200%200%201%20-4%204h-8a4%204%200%200%201%20-4%20-4z'%3e%3c/path%3e%3cpath%20d='M9%2012a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200'%3e%3c/path%3e%3cpath%20d='M16.5%207.5v.01'%3e%3c/path%3e%3c/svg%3e");
}

.appFooter__socialLink--tiktok {
    --footer-social-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='tabler-icon%20tabler-icon-brand-tiktok%20'%3e%3cpath%20d='M21%207.917v4.034a9.948%209.948%200%200%201%20-5%20-1.951v4.5a6.5%206.5%200%201%201%20-8%20-6.326v4.326a2.5%202.5%200%201%200%204%202v-11.5h4.083a6.005%206.005%200%200%200%204.917%204.917z'%3e%3c/path%3e%3c/svg%3e");
}

.appFooter__socialLink--youtube {
    --footer-social-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='tabler-icon%20tabler-icon-brand-youtube%20'%3e%3cpath%20d='M2%208a4%204%200%200%201%204%20-4h12a4%204%200%200%201%204%204v8a4%204%200%200%201%20-4%204h-12a4%204%200%200%201%20-4%20-4v-8z'%3e%3c/path%3e%3cpath%20d='M10%209l5%203l-5%203z'%3e%3c/path%3e%3c/svg%3e");
}

.appFooter__textLink {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: var(--font-button);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.appFooter__textLink.is-unfinished::after {
    content: "*";
    margin-left: 3px;
    color: var(--c-console-level-error);
    font-size: 1.45em;
    font-weight: 700;
    line-height: 0;
    text-shadow: 0 0 6px color-mix(in srgb, var(--c-console-level-error) 82%, transparent);
}

.appFooter__version {
    font: var(--font-button);
    font-family: var(--font-numeric);
    white-space: nowrap;
}

.appFooter__copyright {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font: var(--font-button);
    white-space: nowrap;
}

.appFooter__separator {
    width: 0;
    height: 12px;
    border-left: var(--border-1) solid var(--c-border);
}

@media (prefers-reduced-motion: reduce) {
    .appFooter__socialLink,
    .appFooter__textLink {
        transition-duration: 0ms;
    }
}

@media (max-width: 640px) {
    .appFooter {
        --app-footer-social-size: calc(var(--btn-slim-h) - 8px);
    }

    .appFooter__content {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    }

    .appFooter__socials {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .appFooter__links {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .appFooter__socials,
    .appFooter__links {
        gap: var(--gap-1);
    }

    .appFooter__status {
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
        min-width: 0;
    }

    .appFooter__version,
    .appFooter__version + .appFooter__separator,
    .appFooter__textLink[data-role="contact-footer-button"] {
        display: none;
    }

    .appFooter:has(.appFooter__loadingLabel:not([hidden])) .appFooter__socials,
    .appFooter:has(.appFooter__loadingLabel:not([hidden])) .appFooter__links {
        display: none;
    }

    .appFooter:has(.appFooter__loadingLabel:not([hidden])) .appFooter__status {
        grid-row: 1 / -1;
        width: 100%;
    }
}

.appFooter__loading {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms linear;
}

.appFooter__loading.is-active {
    opacity: 1;
}

.appFooter__loading.is-fading {
    opacity: 0;
    transition-duration: 1000ms;
}

.appFooter__loadingTrack,
.appFooter__loadingFill {
    position: absolute;
    inset: 0;
}

.appFooter__loadingTrack {
    background: color-mix(in srgb, var(--c-accent) 10%, transparent);
}

.appFooter__loadingFill {
    width: 100%;
    transform: scaleX(var(--footer-loading-progress, 0));
    transform-origin: left center;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--c-accent) 48%, transparent) 0%,
            color-mix(in srgb, var(--c-accent) 88%, white 12%) 72%,
            color-mix(in srgb, var(--c-accent) 60%, transparent) 100%
    );
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 18%, transparent);
    transition: transform var(--footer-loading-transform-duration, 520ms) linear;
}

.appFooter__loading.is-active .appFooter__loadingFill {
    will-change: transform;
}

.appFooter__loading[data-loading-mode="indeterminate"][data-loading-status="active"] .appFooter__loadingFill {
    width: 38%;
    min-width: 96px;
    transform: none;
    transition: none;
    animation: appFooterLoadingSweep 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.appFooter__loading[data-loading-status="complete"] .appFooter__loadingTrack {
    background: color-mix(in srgb, var(--c-accent) 16%, transparent);
}

.appFooter__loading[data-loading-status="complete"] .appFooter__loadingFill {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--c-accent) 62%, transparent) 0%,
            color-mix(in srgb, var(--c-accent) 92%, white 8%) 100%
        );
}

.appFooter__loading[data-loading-status="error"] .appFooter__loadingTrack {
    background: color-mix(in srgb, var(--c-console-level-error) 16%, transparent);
}

.appFooter__loading[data-loading-status="error"] .appFooter__loadingFill {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--c-console-level-error) 72%, transparent) 0%,
            color-mix(in srgb, var(--c-console-level-error) 96%, white 4%) 100%
        );
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-console-level-error) 26%, transparent);
}

.appFooter__loadingLabel {
    color: color-mix(in srgb, var(--c-font) 82%, var(--c-accent) 18%);
}

.appFooter__loading[data-loading-status="complete"] ~ .appFooter__content .appFooter__loadingLabel {
    color: color-mix(in srgb, var(--c-font) 72%, var(--c-accent) 28%);
}

.appFooter__loading[data-loading-status="error"] ~ .appFooter__content .appFooter__loadingLabel {
    color: color-mix(in srgb, var(--c-font) 70%, var(--c-console-level-error) 30%);
}

@keyframes appFooterLoadingSweep {
    from {
        transform: translate3d(-160%, 0, 0);
    }

    to {
        transform: translate3d(420%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .appFooter__loading,
    .appFooter__loadingFill {
        transition-duration: 0ms;
    }

    .appFooter__loading[data-loading-mode="indeterminate"][data-loading-status="active"] .appFooter__loadingFill {
        animation: none;
        width: 28%;
        transform: none;
    }
}

.legalShell.appShell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
}

.legalPage {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    padding: calc(var(--pad-2) * 4) var(--pad-2);
    -webkit-user-select: text;
    user-select: text;
}

.legalPage__document {
    width: min(100%, 820px);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap-1) * 4);
    padding: calc(var(--pad-2) * 3);
    border: var(--border-2) solid var(--c-border);
    border-radius: var(--radius-1);
    background: var(--c-surface-glass);
    box-shadow: var(--shadow-1);
}

.legalPage__header,
.legalPage__section {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

.legalPage__eyebrow {
    color: var(--c-font-muted);
    font: var(--font-button);
    letter-spacing: var(--title-letter-spacing);
    text-transform: uppercase;
}

.legalPage__title {
    margin: 0;
    color: var(--c-font);
    font: var(--font-title);
    letter-spacing: var(--title-letter-spacing);
    text-transform: uppercase;
}

.legalPage__updated,
.legalPage__lead,
.legalPage__paragraph,
.legalPage__list {
    margin: 0;
    color: var(--c-font);
    font: var(--font-textblock);
}

.legalPage__updated {
    color: var(--c-font-muted);
}

.legalPage__sectionTitle {
    margin: 0;
    color: var(--c-font);
    font: var(--font-title);
    letter-spacing: var(--title-letter-spacing);
    text-transform: uppercase;
}

.legalPage__list {
    padding-left: 1.4em;
}

.legalPage__link {
    color: var(--c-accent);
    text-decoration: none;
}

.legalPage__link:hover,
.legalPage__link:focus-visible {
    text-decoration: underline;
}

.legalPage__placeholder {
    color: var(--c-font-muted);
}

.legalPage__address {
    font-style: normal;
}

@media (max-width: 640px) {
    .legalPage {
        padding: var(--pad-2) var(--pad-1);
    }

    .legalPage__document {
        padding: calc(var(--pad-2) * 2);
    }
}