/* One ordered entry keeps Vite from splitting the app's cascade across pages. */

: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;
}

.methodRail {
    min-width: 0;
    min-height: 0;
    position: relative;
    z-index: var(--z-ui);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--c-surface-glass);
    border-right: var(--border-2) solid var(--c-border);
}

.methodRail__brand,
.methodRail__nav,
.methodRail__settings {
    display: flex;
    align-items: center;
    justify-content: center;
}

.methodRail__brand,
.methodRail__settings {
    flex: 0 0 auto;
    width: 100%;
    min-height: var(--navbar);
}

.methodRail__brand {
    border-bottom: var(--border-1) solid var(--c-border);
}

.brandButton {
    width: var(--method-btn-size);
    height: var(--method-btn-size);
    aspect-ratio: 1 / 1;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--c-icon);
    cursor: pointer;
    background: transparent;
}

.methodRail__nav {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
}

.methodRail__nav.is-scrollable {
    justify-content: flex-start;
}

.methodRail__navItem {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.methodRail__navItem + .methodRail__navItem {
    border-top: var(--border-1) solid var(--c-border);
}

.methodRail__settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: calc(var(--navbar) / 2);
    min-height: 0;
    border-top: var(--border-1) solid var(--c-border);
}

.methodRailUtilityButton {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--c-font-muted);
    background: var(--c-surface-interactive);
    border-radius: 0;
    transition: color var(--ease-fast), background-color var(--ease-fast);
}

.methodRailUtilityButton + .methodRailUtilityButton {
    border-left: var(--border-1) solid var(--c-border);
}

.methodRailUtilityButton:hover,
.methodRailUtilityButton:focus-visible {
    color: var(--c-font);
    background: var(--c-surface-interactive);
}

.methodRailSettingsButton__icon {
    width: 18px;
    height: 18px;
    display: block;
    background: currentColor;
    mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M13.476,2.108c-0.233,1.559%200.499,3.516%201.388,3.944c0.889,0.428%202.875,-0.22%203.949,-1.374c0.724,0.674%201.344,1.45%201.84,2.307c-1.364,0.79%20-2.437,2.582%20-2.219,3.545c0.22,0.963%201.964,2.111%203.536,2.231c-0.074,0.986%20-0.297,1.956%20-0.657,2.877c-1.469,-0.574%20-3.539,-0.296%20-4.154,0.476c-0.616,0.772%20-0.425,2.852%200.461,4.156c-0.818,0.556%20-1.714,0.988%20-2.659,1.282c-0.467,-1.506%20-1.975,-2.951%20-2.962,-2.951c-0.987,0%20-2.495,1.445%20-2.962,2.951c-0.945,-0.293%20-1.841,-0.725%20-2.659,-1.282c0.886,-1.304%201.077,-3.384%200.461,-4.156c-0.616,-0.772%20-2.686,-1.049%20-4.154,-0.476c-0.36,-0.921%20-0.581,-1.891%20-0.657,-2.877c1.572,-0.12%203.317,-1.268%203.536,-2.231c0.22,-0.963%20-0.854,-2.754%20-2.219,-3.545c0.496,-0.856%201.116,-1.633%201.84,-2.307c1.074,1.154%203.06,1.803%203.949,1.374c0.889,-0.428%201.621,-2.385%201.388,-3.944c0.978,-0.146%201.974,-0.146%202.951,0l0.001,0Zm-1.476,4.359c-3.068,0%20-5.557,2.49%20-5.557,5.557c0,3.068%202.49,5.557%205.557,5.557c3.068,0%205.557,-2.49%205.557,-5.557c0,-3.068%20-2.49,-5.557%20-5.557,-5.557Z'%20style='stroke:%23000;stroke-width:0.5px;'/%3e%3c/svg%3e") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M13.476,2.108c-0.233,1.559%200.499,3.516%201.388,3.944c0.889,0.428%202.875,-0.22%203.949,-1.374c0.724,0.674%201.344,1.45%201.84,2.307c-1.364,0.79%20-2.437,2.582%20-2.219,3.545c0.22,0.963%201.964,2.111%203.536,2.231c-0.074,0.986%20-0.297,1.956%20-0.657,2.877c-1.469,-0.574%20-3.539,-0.296%20-4.154,0.476c-0.616,0.772%20-0.425,2.852%200.461,4.156c-0.818,0.556%20-1.714,0.988%20-2.659,1.282c-0.467,-1.506%20-1.975,-2.951%20-2.962,-2.951c-0.987,0%20-2.495,1.445%20-2.962,2.951c-0.945,-0.293%20-1.841,-0.725%20-2.659,-1.282c0.886,-1.304%201.077,-3.384%200.461,-4.156c-0.616,-0.772%20-2.686,-1.049%20-4.154,-0.476c-0.36,-0.921%20-0.581,-1.891%20-0.657,-2.877c1.572,-0.12%203.317,-1.268%203.536,-2.231c0.22,-0.963%20-0.854,-2.754%20-2.219,-3.545c0.496,-0.856%201.116,-1.633%201.84,-2.307c1.074,1.154%203.06,1.803%203.949,1.374c0.889,-0.428%201.621,-2.385%201.388,-3.944c0.978,-0.146%201.974,-0.146%202.951,0l0.001,0Zm-1.476,4.359c-3.068,0%20-5.557,2.49%20-5.557,5.557c0,3.068%202.49,5.557%205.557,5.557c3.068,0%205.557,-2.49%205.557,-5.557c0,-3.068%20-2.49,-5.557%20-5.557,-5.557Z'%20style='stroke:%23000;stroke-width:0.5px;'/%3e%3c/svg%3e") center / contain no-repeat;
}

.methodRailThemeButton__icon {
    width: 18px;
    height: 18px;
    display: block;
    background: currentColor;
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-width='2'%3e%3ccircle%20cx='12'%20cy='12'%20r='4'/%3e%3cpath%20d='M12%202v2M12%2020v2M2%2012h2M20%2012h2M4.93%204.93l1.42%201.42M17.65%2017.65l1.42%201.42M19.07%204.93l-1.42%201.42M6.35%2017.65l-1.42%201.42'/%3e%3c/g%3e%3c/svg%3e") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cg%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-width='2'%3e%3ccircle%20cx='12'%20cy='12'%20r='4'/%3e%3cpath%20d='M12%202v2M12%2020v2M2%2012h2M20%2012h2M4.93%204.93l1.42%201.42M17.65%2017.65l1.42%201.42M19.07%204.93l-1.42%201.42M6.35%2017.65l-1.42%201.42'/%3e%3c/g%3e%3c/svg%3e") center / contain no-repeat;
}

body[data-theme="light"] .methodRailThemeButton__icon {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20d='M20.5%2014.1A8.5%208.5%200%200%201%209.9%203.5a8.5%208.5%200%201%200%2010.6%2010.6Z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='none'%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20d='M20.5%2014.1A8.5%208.5%200%200%201%209.9%203.5a8.5%208.5%200%201%200%2010.6%2010.6Z'/%3e%3c/svg%3e");
}

.navMethodBtn {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad-1) 0;
    position: relative;
    color: var(--c-icon-muted);
    background: transparent;
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast);
}

.navMethodBtn::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 0;
    left: calc(100% - var(--border-1));
    height: 100%;
    display: grid;
    align-items: center;
    padding: 0 calc(var(--pad-1) * 2);
    background: var(--c-surface-interactive);
    border: var(--border-1) solid var(--c-border);
    border-left: none;
    border-radius: 0 var(--radius-2) var(--radius-2) 0;
    color: var(--c-font);
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: var(--title-letter-spacing);
    white-space: nowrap;
    box-shadow: var(--shadow-1);
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition:
        opacity var(--ease-fast),
        transform var(--ease-fast),
        color var(--ease-fast);
}

.navMethodBtn:hover,
.navMethodBtn.is-active {
    color: var(--c-accent);
}

.navMethodBtn:disabled,
.navMethodBtn[aria-disabled="true"] {
    cursor: default;
    color: var(--c-icon-muted);
    opacity: var(--opacity-disabled);
}

.navMethodBtn:hover {
    background: transparent;
}

.navMethodBtn:hover::after,
.navMethodBtn:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

.navMethodBtn__icon {
    width: var(--method-btn-size);
    height: auto;
    aspect-ratio: 1 / 0.6;
    flex: 0 0 auto;
    display: block;
    background-color: currentColor;
    -webkit-mask-image: var(--method-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--method-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.navMethodBtn[data-command-arg="viewer"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M49,3.64L49,26.36C49,27.817%2047.817,29%2046.36,29L3.64,29C2.183,29%201,27.817%201,26.36L1,3.64C1,2.183%202.183,1%203.64,1L46.36,1C47.817,1%2049,2.183%2049,3.64Z'/%3e%3c/svg%3e");
}

.navMethodBtn[data-command-arg="columns"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M15,3.8C15,2.255%2013.745,1%2012.2,1L3.8,1C2.255,1%201,2.255%201,3.8L1,26.2C1,27.745%202.255,29%203.8,29L12.2,29C13.745,29%2015,27.745%2015,26.2L15,3.8Z'/%3e%3cg%20transform='matrix(1.07143,0,0,1,15.9286,0)'%3e%3cpath%20d='M15,4C15,2.344%2013.745,1%2012.2,1L3.8,1C2.255,1%201,2.344%201,4L1,26C1,27.656%202.255,29%203.8,29L12.2,29C13.745,29%2015,27.656%2015,26L15,4Z'/%3e%3c/g%3e%3cg%20transform='matrix(1.07143,0,0,1,32.9286,0)'%3e%3cpath%20d='M15,4C15,2.344%2013.745,1%2012.2,1L3.8,1C2.255,1%201,2.344%201,4L1,26C1,27.656%202.255,29%203.8,29L12.2,29C13.745,29%2015,27.656%2015,26L15,4Z'/%3e%3c/g%3e%3c/svg%3e");
}

.navMethodBtn[data-command-arg="rows"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M49,3.6C49,2.165%2047.835,1%2046.4,1L3.6,1C2.165,1%201,2.165%201,3.6L1,11.4C1,12.835%202.165,14%203.6,14L46.4,14C47.835,14%2049,12.835%2049,11.4L49,3.6Z'/%3e%3cg%20transform='matrix(1,0,0,1,0,15)'%3e%3cpath%20d='M49,3.6C49,2.165%2047.835,1%2046.4,1L3.6,1C2.165,1%201,2.165%201,3.6L1,11.4C1,12.835%202.165,14%203.6,14L46.4,14C47.835,14%2049,12.835%2049,11.4L49,3.6Z'/%3e%3c/g%3e%3c/svg%3e");
}

.navMethodBtn[data-command-arg="grid"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M24,4.25C24,2.456%2022.544,1%2020.75,1L4.25,1C2.456,1%201,2.456%201,4.25L1,10.75C1,12.544%202.456,14%204.25,14L20.75,14C22.544,14%2024,12.544%2024,10.75L24,4.25Z'/%3e%3cg%20transform='matrix(1,0,0,1,0,15)'%3e%3cpath%20d='M24,4.25C24,2.456%2022.544,1%2020.75,1L4.25,1C2.456,1%201,2.456%201,4.25L1,10.75C1,12.544%202.456,14%204.25,14L20.75,14C22.544,14%2024,12.544%2024,10.75L24,4.25Z'/%3e%3c/g%3e%3cg%20transform='matrix(1,0,0,1,25,0)'%3e%3cpath%20d='M24,4.25C24,2.456%2022.544,1%2020.75,1L4.25,1C2.456,1%201,2.456%201,4.25L1,10.75C1,12.544%202.456,14%204.25,14L20.75,14C22.544,14%2024,12.544%2024,10.75L24,4.25Z'/%3e%3c/g%3e%3cg%20transform='matrix(1,0,0,1,25,15)'%3e%3cpath%20d='M24,4.25C24,2.456%2022.544,1%2020.75,1L4.25,1C2.456,1%201,2.456%201,4.25L1,10.75C1,12.544%202.456,14%204.25,14L20.75,14C22.544,14%2024,12.544%2024,10.75L24,4.25Z'/%3e%3c/g%3e%3c/svg%3e");
}

.navMethodBtn[data-command-arg="swipeColumns"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M17,21L17,29L3.5,29C2.12,29%201,27.88%201,26.5L1,3.5C1,2.12%202.12,1%203.5,1L17,1L17,9L16,9C14.896,9%2014,9.896%2014,11L14,19C14,20.104%2014.896,21%2016,21L17,21Z'/%3e%3cpath%20d='M19,9L19,1L45.5,1C46.88,1%2048,2.12%2048,3.5L48,26.5C48,27.88%2046.88,29%2045.5,29L19,29L19,21L20,21C21.104,21%2022,20.104%2022,19L22,11C22,9.896%2021.104,9%2020,9L19,9Z'/%3e%3crect%20x='-4'%20y='3'%20width='4'%20height='22'/%3e%3cpath%20d='M20,12L20,18C20,18.552%2019.552,19%2019,19L17,19C16.448,19%2016,18.552%2016,18L16,12C16,11.448%2016.448,11%2017,11L19,11C19.552,11%2020,11.448%2020,12Z'/%3e%3c/svg%3e");
}

.navMethodBtn[data-command-arg="swipeRows"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M19,17L1,17L1,3.5C1,2.12%202.12,1%203.5,1L46.5,1C47.88,1%2049,2.12%2049,3.5L49,17L31,17L31,16C31,14.896%2030.104,14%2029,14L21,14C19.896,14%2019,14.896%2019,16L19,17Z'/%3e%3cpath%20d='M31,19L49,19L49,26.5C49,27.88%2047.88,29%2046.5,29L3.5,29C2.12,29%201,27.88%201,26.5L1,19L19,19L19,20C19,21.104%2019.896,22%2021,22L29,22C30.104,22%2031,21.104%2031,20L31,19Z'/%3e%3cpath%20d='M28,20L22,20C21.448,20%2021,19.552%2021,19L21,17C21,16.448%2021.448,16%2022,16L28,16C28.552,16%2029,16.448%2029,17L29,19C29,19.552%2028.552,20%2028,20Z'/%3e%3c/svg%3e");
}

.navMethodBtn[data-command-arg="swipeGrid"],
.navMethodBtn[data-method-id="swipeGrid"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cg%20transform='matrix(-1,1.22465e-16,-1.22465e-16,-1,50,30)'%3e%3cpath%20d='M21,10L15,16L1,16L1,3.5C1,2.12%202.12,1%203.5,1L21,1M23,1L46.5,1C47.88,1%2049,2.12%2049,3.5L49,16L29,16L23,10'/%3e%3c/g%3e%3cg%20transform='matrix(-1,1.22465e-16,-1.22465e-16,-1,50,30)'%3e%3cpath%20d='M21,29L3.5,29C2.12,29%201,27.88%201,26.5L1,18L15,18L21,24M23,24L29,18L49,18L49,26.5C49,27.88%2047.88,29%2046.5,29L23,29'/%3e%3c/g%3e%3cg%20transform='matrix(0.603553,-0.603553,1.20711,1.20711,-11.231,3.9467)'%3e%3crect%20x='21'%20y='18'%20width='8'%20height='4'/%3e%3c/g%3e%3c/svg%3e");
}

.navMethodBtn[data-command-arg="overlay"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M31,24.928L35.532,5L46.5,5C47.88,5%2049,6.12%2049,7.5L49,22.5C49,23.88%2047.88,25%2046.5,25L31,24.928Z'/%3e%3cpath%20d='M34,1L28,29L3.5,29C2.12,29%201,27.88%201,26.5L1,3.5C1,2.12%202.12,1%203.5,1L34,1Z'/%3e%3c/svg%3e");
}

.navMethodBtn[data-command-arg="difference"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M11,3.8c0,-1.545%20-1.255,-2.8%20-2.8,-2.8l-4.4,0c-1.545,0%20-2.8,1.255%20-2.8,2.8l0,22.4c0,1.545%201.255,2.8%202.8,2.8l4.4,0c1.545,0%202.8,-1.255%202.8,-2.8l0,-22.4Z'/%3e%3cpath%20d='M49,4c0,-1.656%20-1.345,-3%20-3,-3l-4,0c-1.655,0%20-3,1.344%20-3,3l0,22c0,1.656%201.345,3%203,3l4,0c1.655,0%203,-1.344%203,-3l0,-22Z'/%3e%3cpath%20d='M37,4l0,22c0,1.656%20-1.345,3%20-3,3l-18,0c-1.655,0%20-3,-1.344%20-3,-3l0,-22c0,-1.656%201.345,-3%203,-3l18,0c1.655,0%203,1.344%203,3Zm-10.846,7l-8.155,0c-0.552,0%20-1,0.448%20-1,1c0,0.552%200.448,1%201,1l7,0l-2.309,4l-4.69,0c-0.552,0%20-1,0.448%20-1,1c0,0.552%200.448,1%201,1l3.535,0l-2.057,3.563c-0.276,0.478%20-0.112,1.09%200.366,1.366c0.478,0.276%201.09,0.112%201.366,-0.366l2.634,-4.563l8.155,0c0.552,0%201,-0.448%201,-1c0,-0.552%20-0.448,-1%20-1,-1l-7.001,0l2.309,-4l4.69,0c0.552,0%201,-0.448%201,-1c0,-0.552%20-0.448,-1%20-1,-1l-3.535,0l2.057,-3.563c0.276,-0.478%200.112,-1.09%20-0.366,-1.366c-0.478,-0.276%20-1.09,-0.112%20-1.366,0.366l-2.634,4.563Z'/%3e%3c/svg%3e");
}

.navMethodBtn[data-method-id="flicker"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M48,3.64L48,26.36C48,27.817%2046.817,29%2045.36,29L3.64,29C2.183,29%201,27.817%201,26.36L1,3.64C1,2.183%202.183,1%203.64,1L45.36,1C46.817,1%2048,2.183%2048,3.64ZM14.277,21.85L16.09,21.85L16.09,15.392L23.211,15.392L23.211,21.85L25.024,21.85L25.024,8.15L23.211,8.15L23.211,13.776L16.09,13.776L16.09,8.15L14.277,8.15L14.277,21.85ZM26.939,21.85L35.724,21.85L35.724,20.401L31.135,20.401C30.475,20.401%2029.768,20.43%2029.014,20.486L30.051,19.336L35.425,13.037L35.425,11.925L27.313,11.925L27.313,13.29L31.36,13.29C31.908,13.29%2032.54,13.271%2033.257,13.234L26.939,20.486L26.939,21.85Z'/%3e%3c/svg%3e");
}

.navMethodBtn[data-method-id="canvas"] {
    --method-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2050%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M32,9L32,5L46.36,5C47.817,5%2049,6.183%2049,7.64L49,26.36C49,27.817%2047.817,29%2046.36,29L14.659,29C13.202,29%2012.019,27.817%2012.019,26.36L12.019,19L18,19L18,21.377C18,22.973%2019.341,24.011%2020.535,24.011L39.371,24.011C40.828,24.011%2042.011,22.828%2042.011,21.371L42.011,11.64C42.011,10.183%2040.828,9%2039.371,9L32,9Z'/%3e%3cpath%20d='M17.895,17L3.64,17C2.183,17%201,15.817%201,14.36L1,3.64C1,2.183%202.183,1%203.64,1L27.37,1C28.827,1%2030.01,2.183%2030.01,3.64L30.01,9.044L20.535,9.044C19.078,9.044%2017.895,10.227%2017.895,11.684L17.895,17Z'/%3e%3cpath%20d='M40,13.64L40,19.36C40,20.817%2038.817,22%2037.36,22L22.601,22C21.144,22%2019.961,20.817%2019.961,19.36L19.961,13.64C19.961,12.183%2021.144,11%2022.601,11L37.36,11C38.817,11%2040,12.183%2040,13.64Z'/%3e%3c/svg%3e");
}

.scrollOverflowHint {
    --scroll-overflow-hint-size: var(--navbar);
}

.scrollOverflowHint[data-scroll-hint-axis="x"].has-overflow-before.has-overflow-after {
    mask-image: linear-gradient(to right, transparent, #000 var(--scroll-overflow-hint-size), #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--scroll-overflow-hint-size), #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
}

.scrollOverflowHint[data-scroll-hint-axis="x"].has-overflow-before:not(.has-overflow-after) {
    mask-image: linear-gradient(to right, transparent, #000 var(--scroll-overflow-hint-size));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--scroll-overflow-hint-size));
}

.scrollOverflowHint[data-scroll-hint-axis="x"].has-overflow-after:not(.has-overflow-before) {
    mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
}

.scrollOverflowHint[data-scroll-hint-axis="y"].has-overflow-before.has-overflow-after {
    mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-overflow-hint-size), #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-overflow-hint-size), #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
}

.scrollOverflowHint[data-scroll-hint-axis="y"].has-overflow-before:not(.has-overflow-after) {
    mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-overflow-hint-size));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-overflow-hint-size));
}

.scrollOverflowHint[data-scroll-hint-axis="y"].has-overflow-after:not(.has-overflow-before) {
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--scroll-overflow-hint-size)), transparent);
}

.brandButton,
.startupLogo {
    --brand-logo-accent: var(--c-accent);
    --brand-logo-finish: var(--c-font);
    --brand-logo-path-length: 7821.54638671875px;
    --brand-logo-complete-offset: 15643.0927734375px;
    --brand-logo-duration: 1.5s;
    --brand-logo-ease: ease-in-out;
}

.brandButton {
    --brand-logo-base: color-mix(in srgb, var(--c-font) 16%, transparent);
}

.brandLogo {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.startupLogoGlow {
    width: clamp(360px, 70vmin, 800px);
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--c-accent) 16%, transparent) 0%,
        color-mix(in srgb, var(--c-accent) 10%, transparent) 28%,
        color-mix(in srgb, var(--c-accent) 4%, transparent) 55%,
        transparent 82%
    );
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.72);
    transform-origin: center;
}

.appStartup {
    /* Startup intro timing. */
    --startup-logo-reveal-duration: .66s;
    --startup-logo-reveal-hold-duration: 330ms;
    --startup-logo-erase-duration: 1s;
    --startup-logo-reveal-ease: cubic-bezier(0.5, 0, 0.75, 0);
    --startup-logo-erase-ease: ease-in-out;
    --startup-logo-reveal-offset-1: 100ms;
    --startup-logo-reveal-offset-2: 200ms;
    --startup-logo-reveal-offset-3: 300ms;
    --startup-logo-reveal-offset-4: 400ms;
    --startup-logo-erase-offset-1: -100ms;
    --startup-logo-erase-offset-2: -200ms;
    --startup-logo-erase-offset-3: -300ms;
    --startup-logo-erase-offset-4: -400ms;
}

.startupLogo {
    width: clamp(180px, 28vmin, 360px);
    height: auto;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.appShell {
    --startup-intro-fade-duration: 333ms;
    --startup-intro-fade-ease: ease;
}

.appStartup {
    display: none;
}

html.has-js .appStartup {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--startup-intro-fade-duration) var(--startup-intro-fade-ease),
        visibility 0s linear var(--startup-intro-fade-duration);
}

html.has-js .appShell > :not(.appBackgroundCanvas):not(.appStartup) {
    transition: opacity var(--startup-intro-fade-duration) var(--startup-intro-fade-ease);
}

html.has-js .appShell:not(.is-ready) > :not(.appBackgroundCanvas):not(.appStartup) {
    opacity: 0;
    pointer-events: none;
}

html.has-js .appShell.is-ready .appStartup {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.brandLogo__base,
.brandLogo__reveal {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brandLogo__base {
    stroke: var(--brand-logo-base);
    stroke-width: 110px;
}

.brandLogo__reveal {
    stroke-dasharray: var(--brand-logo-path-length);
    stroke-dashoffset: var(--brand-logo-path-length);
    animation-fill-mode: both;
}

.brandLogo__reveal--1 {
    stroke: var(--brand-logo-accent);
    stroke-width: 20px;
    --brand-logo-forward-delay: 100ms;
    --brand-logo-erase-delay: -100ms;
}

.brandLogo__reveal--2 {
    stroke: var(--brand-logo-accent);
    stroke-width: 50px;
    --brand-logo-forward-delay: 200ms;
    --brand-logo-erase-delay: -200ms;
}

.brandLogo__reveal--3 {
    stroke: var(--brand-logo-accent);
    stroke-width: 80px;
    --brand-logo-forward-delay: 300ms;
    --brand-logo-erase-delay: -300ms;
}

.brandLogo__reveal--4 {
    stroke: var(--brand-logo-finish);
    stroke-width: 110px;
    --brand-logo-forward-delay: 400ms;
    --brand-logo-erase-delay: -400ms;
}

.startupLogo .brandLogo__reveal--1 {
    --startup-logo-reveal-delay: var(--startup-logo-reveal-offset-1);
    --startup-logo-erase-delay: var(--startup-logo-erase-offset-1);
}

.startupLogo .brandLogo__reveal--2 {
    --startup-logo-reveal-delay: var(--startup-logo-reveal-offset-2);
    --startup-logo-erase-delay: var(--startup-logo-erase-offset-2);
}

.startupLogo .brandLogo__reveal--3 {
    --startup-logo-reveal-delay: var(--startup-logo-reveal-offset-3);
    --startup-logo-erase-delay: var(--startup-logo-erase-offset-3);
}

.startupLogo .brandLogo__reveal--4 {
    --startup-logo-reveal-delay: var(--startup-logo-reveal-offset-4);
    --startup-logo-erase-delay: var(--startup-logo-erase-offset-4);
}

.startupLogo.is-forward + .startupLogoGlow {
    animation: startup-logo-glow-reveal calc(
        var(--startup-logo-reveal-duration) + var(--startup-logo-reveal-offset-4)
    ) var(--startup-logo-reveal-ease) both;
}

.startupLogo.is-complete + .startupLogoGlow {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
}

.startupLogo.is-erasing + .startupLogoGlow {
    animation: startup-logo-glow-erase var(--startup-logo-erase-duration) var(--startup-logo-erase-ease) both;
}

.brandLogo.is-complete .brandLogo__reveal,
.startupLogo.is-complete .brandLogo__reveal {
    stroke-dashoffset: var(--brand-logo-complete-offset);
}

.brandLogo.is-forward .brandLogo__reveal {
    animation-name: brand-logo-forward;
    animation-duration: var(--brand-logo-duration);
    animation-timing-function: var(--brand-logo-ease);
    animation-delay: var(--brand-logo-forward-delay);
}

.startupLogo.is-forward .brandLogo__reveal {
    animation-name: brand-logo-forward;
    animation-duration: var(--startup-logo-reveal-duration);
    animation-timing-function: var(--startup-logo-reveal-ease);
    animation-delay: var(--startup-logo-reveal-delay);
}

.brandLogo.is-erasing .brandLogo__reveal {
    animation-name: brand-logo-erase;
    animation-duration: var(--brand-logo-duration);
    animation-timing-function: var(--brand-logo-ease);
    animation-delay: var(--brand-logo-erase-delay);
}

.startupLogo.is-erasing .brandLogo__reveal {
    animation-name: brand-logo-erase;
    animation-duration: var(--startup-logo-erase-duration);
    animation-timing-function: var(--startup-logo-erase-ease);
    animation-delay: var(--startup-logo-erase-delay);
}

@keyframes brand-logo-forward {
    from {
        stroke-dashoffset: var(--brand-logo-path-length);
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes brand-logo-erase {
    from {
        stroke-dashoffset: var(--brand-logo-complete-offset);
    }

    to {
        stroke-dashoffset: var(--brand-logo-path-length);
    }
}

@keyframes startup-logo-glow-reveal {
    0%, 24% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
    }

    72% {
        opacity: 0.18;
        transform: translate(-50%, -50%) scale(0.92);
    }

    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes startup-logo-glow-erase {
    from {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .startupLogo.is-forward + .startupLogoGlow,
    .startupLogo.is-complete + .startupLogoGlow,
    .startupLogo.is-erasing + .startupLogoGlow {
        animation: none;
        opacity: 0;
    }
}

.actionButton,
.sidebarPanel__toggle,
.sidebarPanel__collapsedToggle,
.sidebarListSection__toggle {
    min-height: var(--btn-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pad-1);
    background: var(--c-surface-interactive);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    color: var(--c-font);
    font: var(--font-button);
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast),
        border-color var(--ease-fast);
}

.actionButton:hover,
.sidebarPanel__toggle:hover,
.sidebarPanel__collapsedToggle:hover,
.sidebarListSection__toggle:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

.debugPanel {
    width: 100%;
    flex: 0 0 256px;
    min-height: 256px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-surface-glass);
    border: var(--border-2) solid var(--c-border);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
}

.debugPanel[hidden] {
    display: none;
}

.debugPanel__header {
    flex: 0 0 auto;
    height: var(--header);
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 var(--pad-2);
    border-bottom: var(--border-1) solid var(--c-border);
    background: transparent;
}

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

.debugPanel__copyButton,
.debugPanel__clearButton {
    min-height: var(--btn-slim-h);
    padding: 0 var(--pad-1);
    box-shadow: none;
}

.debugPanel__copyButton {
    margin-left: auto;
    border-radius: var(--radius-3) 0 0 var(--radius-3);
}

.debugPanel__clearButton {
    color: var(--c-danger);
    border-left-width: 0;
    border-radius: 0;
}

.debugPanel__clearButton:hover,
.debugPanel__clearButton:focus-visible {
    position: relative;
    z-index: 1;
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface-interactive));
}

.debugPanel__iconButton {
    width: var(--btn-slim-h);
    min-width: var(--btn-slim-h);
    min-height: var(--btn-slim-h);
    padding: 0;
    border-left-width: 0;
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
    box-shadow: none;
}

.debugPanel__copyButton:hover,
.debugPanel__iconButton:hover {
    position: relative;
    z-index: 1;
}

.debugPanel__buttonIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.debugPanel__minimizeButton .debugPanel__buttonIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M15,14c0,0.552%20-0.448,1%20-1,1l-12,0c-0.552,0%20-1,-0.448%20-1,-1c0,-0.552%200.448,-1%201,-1l12,0c0.552,0%201,0.448%201,1Z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M15,14c0,0.552%20-0.448,1%20-1,1l-12,0c-0.552,0%20-1,-0.448%20-1,-1c0,-0.552%200.448,-1%201,-1l12,0c0.552,0%201,0.448%201,1Z'/%3e%3c/svg%3e");
}

.appShell.is-debug-console-collapsed .debugPanel {
    flex-basis: calc(var(--header) + (var(--border-2) * 2));
    min-height: calc(var(--header) + (var(--border-2) * 2));
}

.appShell.is-debug-console-collapsed .debugPanel__header {
    border-bottom: 0;
}

.appShell.is-debug-console-collapsed .debugPanel__body {
    display: none;
}

.appShell.is-debug-console-collapsed .debugPanel__minimizeButton .debugPanel__buttonIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;'%3e%3cpath%20d='M7,2l-5,0l0,5'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3cpath%20d='M9,14l5,0l0,-5'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-miterlimit:3;'/%3e%3cpath%20d='M14,7l0,-5l-5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:6;'/%3e%3cpath%20d='M2,9l0,5l5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:3;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;'%3e%3cpath%20d='M7,2l-5,0l0,5'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3cpath%20d='M9,14l5,0l0,-5'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-miterlimit:3;'/%3e%3cpath%20d='M14,7l0,-5l-5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:6;'/%3e%3cpath%20d='M2,9l0,5l5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:3;'/%3e%3c/svg%3e");
}

.debugPanel__body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: var(--pad-2);
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    color: var(--c-font-muted);
    font: var(--font-console);
    display: block;
}

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

.debugConsole__entry {
    display: grid;
    grid-template-columns: auto var(--border-1) minmax(0, 1fr);
    align-items: start;
    background: var(--c-surface-glass);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.debugConsole__entry + .debugConsole__entry {
    margin-top: var(--gap-1);
}

.debugConsole__entry--error {
    border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
}

.debugConsole__entry--warning {
    border-color: color-mix(in srgb, var(--c-accent) 28%, var(--c-border));
}

.debugConsole__time {
    color: var(--c-font-muted);
    font: var(--font-console);
    font-family: var(--font-numeric);
    white-space: nowrap;
    display: block;
}

.debugConsole__badge {
    display: block;
    color: var(--c-console-level-info);
    font: var(--font-console);
    font-family: var(--font-code);
    text-transform: uppercase;
    letter-spacing: var(--title-letter-spacing);
}

.debugConsole__metaSection {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 1px;
    min-width: 72px;
    padding: var(--pad-1);
}

.debugConsole__divider {
    grid-column: 2;
    align-self: stretch;
    width: var(--border-1);
    background: var(--c-border);
}

.debugConsole__entry--action .debugConsole__badge {
    color: var(--c-console-level-action);
}

.debugConsole__entry--warning .debugConsole__badge {
    color: var(--c-console-level-warning);
}

.debugConsole__entry--error .debugConsole__badge {
    color: var(--c-console-level-error);
}

.debugConsole__entry--system .debugConsole__badge {
    color: var(--c-console-level-system);
}

.debugConsole__contentSection {
    grid-column: 3;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 1px;
    padding: var(--pad-1);
}

.debugConsole__message {
    min-width: 0;
    color: var(--c-font);
    font: var(--font-console);
    word-break: break-word;
}

.debugConsole__meta {
    min-width: 0;
    color: var(--c-font-muted);
    font: var(--font-console);
    word-break: break-word;
}

.viewerPanel {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.viewerPanel__comparePanel {
    width: 100%;
    height: 100%;
}

.comparePanel {
    min-width: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--c-surface-glass);
    border: var(--border-2) solid var(--c-border);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-2);
    cursor: all-scroll;
    touch-action: none;
    overscroll-behavior: contain;
}

.comparePanel.is-empty {
    cursor: pointer;
}

.comparePanel.is-drop-target {
    outline: var(--border-1) solid var(--c-accent);
    outline-offset: -1px;
}

.comparePanel__renderIssue {
    position: absolute;
    left: var(--pad-3);
    right: var(--pad-3);
    bottom: var(--pad-3);
    z-index: calc(var(--z-overlay) + 1);
    display: grid;
    gap: var(--gap-1);
    padding: var(--pad-2) var(--pad-3);
    border: var(--border-1) solid var(--c-console-level-error);
    background: var(--c-surface-solid);
    color: var(--c-font);
    pointer-events: none;
}

.comparePanel__renderIssueTitle {
    display: block;
    font: var(--font-title);
    color: var(--c-console-level-error);
}

.comparePanel__renderIssueMessage {
    display: block;
    font: var(--font-textblock);
    color: var(--c-font-muted);
}

.comparePanel__canvas {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
    overflow: hidden;
    background: transparent;
}

.comparePanel__canvas > .viewportCanvas,
.comparePanel__canvas > .viewport3dCanvas,
.comparePanel__canvas > .viewportSplatCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.comparePanel__canvas > .viewport3dCanvas,
.comparePanel__canvas > .viewportSplatCanvas {
    z-index: 1;
    pointer-events: none;
}

.comparePanel__canvas > .viewport3dCanvas[hidden],
.comparePanel__canvas > .viewportSplatCanvas[hidden] {
    display: none;
}

.viewportSvgLayer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.viewportMagnificationLayer {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 2);
    overflow: hidden;
    pointer-events: none;
}

.viewportMagnificationWindow {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    border: 1px solid var(--c-section-view);
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--c-panel-bg), var(--shadow-1);
}

.viewportMagnificationWindow.has-alignment-crosshair::before,
.viewportMagnificationWindow.has-alignment-crosshair::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--c-section-view);
    transform: translate(-50%, -50%);
}

.viewportMagnificationWindow.has-alignment-crosshair::before {
    width: 11px;
    height: 1px;
}

.viewportMagnificationWindow.has-alignment-crosshair::after {
    width: 1px;
    height: 11px;
}

.viewportGuideOverlay {
    --viewport-guide-color: var(--c-section-view);
    --viewport-guide-line-opacity: 1;
    --viewport-guide-shade-opacity: 0;

    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 1);
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.viewportGuideOverlay[hidden] {
    display: none;
}

.viewportGuideOverlay[data-guide-style="white"] {
    --viewport-guide-color: white;
}

.viewportGuideOverlay[data-guide-style="black"] {
    --viewport-guide-color: black;
}

.viewportGuideOverlay__line {
    fill: none;
    stroke: var(--viewport-guide-color);
    stroke-width: var(--border-1);
    opacity: var(--viewport-guide-line-opacity);
    vector-effect: non-scaling-stroke;
}

.viewportGuideOverlay__shade {
    fill: black;
    opacity: var(--viewport-guide-shade-opacity);
}

.viewportSvgSlot {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
}

.viewportSvgImage {
    position: absolute;
    display: block;
    max-width: none;
    max-height: none;
    transform-origin: 50% 50%;
    user-select: none;
    pointer-events: none;
}

.comparePanel__overlay {
    --panel-action-size: var(--media-action-size);
    --panel-minimized-w: calc(var(--panel-action-size) + (var(--pad-3) * 2));
    --panel-minimized-h: calc(var(--panel-action-size) + (var(--pad-3) * 2));
    position: absolute;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
    overflow: hidden;
    border-radius: 0;
    display: grid;
    grid-template-columns: var(--panel-grid-columns, minmax(0, 1fr));
    grid-template-rows: var(--panel-grid-rows, minmax(0, 1fr));
}

.comparePanelItem--addPlaceholder {
    pointer-events: none;
}

.comparePanelItem--inlineMediaList {
    background: color-mix(in srgb, var(--c-surface-glass) 92%, transparent);
}

.comparePanelAddPlaceholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    gap: var(--gap-1);
    padding: calc(var(--pad-2) * 2);
    border: 0;
    background: color-mix(in srgb, var(--c-surface-glass) 88%, transparent);
    color: var(--c-font-muted);
    text-align: center;
    cursor: pointer;
    transition:
        color var(--ease-fast),
        background-color var(--ease-fast);
}

.comparePanelAddPlaceholder:hover {
    color: var(--c-accent);
    background: var(--c-control-hover-bg);
}

.comparePanelAddPlaceholder__title,
.comparePanelAddPlaceholder__text {
    display: block;
    pointer-events: none;
}

.comparePanelAddPlaceholder__title {
    color: var(--c-font);
    font: var(--font-title);
}

.comparePanelInlineMediaList {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--gap-1);
    padding: var(--pad-2);
    pointer-events: auto;
}

.comparePanelInlineMediaList__header {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.comparePanelInlineMediaList__title,
.comparePanelInlineMediaList__text {
    display: block;
    min-width: 0;
}

.comparePanelInlineMediaList__title {
    color: var(--c-font);
    font: var(--font-title);
}

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

.comparePanelInlineMediaList__surface {
    min-height: 0;
    max-height: calc((var(--media-list-h) * 4) + (var(--gap-1) * 3));
    padding-right: 2px;
    overflow: auto;
    pointer-events: auto;
}

.comparePanelItem,
.comparePanelColumn {
    --panel-action-size: var(--media-action-size);
    --panel-action-grid-w: calc(var(--panel-action-size) * 3);
    --panel-info-button-size: var(--panel-action-size);
    min-width: 0;
    min-height: 0;
    height: 100%;
    position: relative;
    pointer-events: none;
    display: grid;
    container-type: inline-size;
    container-name: panel-item;
}

.comparePanel__overlay--layout-columns .comparePanelItem + .comparePanelItem {
    border-left: var(--border-1) solid var(--c-border);
}

.comparePanel__overlay--layout-rows .comparePanelItem + .comparePanelItem {
    border-top: var(--border-1) solid var(--c-border);
}

.comparePanel__overlay--layout-grid .comparePanelItem {
    border: 0;
}

.comparePanel__overlay--layout-swipe-grid .comparePanelItem {
    border: 0;
}

.comparePanelGridSeparator {
    position: absolute;
    z-index: 1;
    background: var(--c-border);
    pointer-events: none;
}

.comparePanelGridSeparator--vertical {
    width: var(--border-1);
    transform: translateX(-50%);
}

.comparePanelGridSeparator--horizontal {
    height: var(--border-1);
    transform: translateY(-50%);
}

.comparePanelItem__content,
.comparePanelColumn__content {
    min-width: 0;
    min-height: 0;
    grid-area: 1 / 1;
}

.comparePanelItem.is-minimized .comparePanelItem__content,
.comparePanelColumn.is-minimized .comparePanelColumn__content {
    display: none;
}

.viewportCanvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--radius-2);
}

.viewportCanvas.is-render-inactive {
    opacity: 0;
}

.panelChrome {
    position: absolute;
    inset: 0;
    z-index: var(--z-ui);
    pointer-events: none;
}

.comparePanel:not(.is-empty) .panelDropHint {
    display: none;
}

.panelDropHint {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: var(--gap-1);
    padding: calc(var(--pad-2) * 2);
    text-align: center;
    color: var(--c-font-muted);
    font: var(--font-textblock);
    pointer-events: auto;
}

.panelDropHint__title,
.panelDropHint__text {
    display: block;
    pointer-events: none;
}

.panelDropHint__text span {
    display: block;
}

.panelDropHint__title {
    color: var(--c-font);
    font: var(--font-title);
}
.panelDropHint {
    align-content: center;
    overflow: auto;
}

.panelDropHint__hero,
.panelDropHint__guide,
.panelDropHint__formats {
    width: min(100%, 760px);
    margin-inline: auto;
}

.panelDropHint__hero {
    display: grid;
    justify-items: center;
    gap: var(--gap-1);
}

.panelDropHint__title {
    max-width: 680px;
    color: var(--c-font);
    font: 500 clamp(18px, 2.2vw, 26px) / 1.25 var(--font-ui);
    letter-spacing: 0.03em;
}

.panelDropHint__description {
    max-width: 560px;
    margin: 0;
    color: var(--c-font-muted);
    font: var(--font-textblock);
}

.panelDropHint__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-1);
    margin-top: var(--pad-1);
}

.panelDropHint__action {
    min-width: 120px;
    text-decoration: none;
}

.panelDropHint__action--primary {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

.panelDropHint__dropInstruction {
    margin: 0;
    color: var(--c-font-muted);
    font: var(--font-textblock);
}

.panelDropHint__guide {
    display: grid;
    gap: var(--gap-1);
    padding: var(--pad-2);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-1);
    background: var(--c-surface-solid);
    text-align: left;
}

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

.panelDropHint__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.panelDropHint__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--pad-1);
    min-width: 0;
}

.panelDropHint__stepNumber {
    color: var(--c-accent);
    font: var(--font-numeric);
}

.panelDropHint__stepContent {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--c-font-muted);
    font: var(--font-textblock);
}

.panelDropHint__stepContent strong {
    color: var(--c-font);
    font: var(--font-button);
}

.panelDropHint__formats {
    display: grid;
    gap: 2px;
    margin: 0;
    color: var(--c-font-muted);
    font: var(--font-textblock);
}

.swipeDivider {
    position: absolute;
    z-index: calc(var(--z-ui) + 1);
    pointer-events: auto;
    touch-action: none;
    --swipe-divider-line-color: var(--c-border);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
}

.swipeDivider:hover {
    --swipe-divider-line-color: var(--c-accent);
}

.swipeDivider::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 12px;
    height: 34px;
    border: var(--border-1) solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface-interactive);
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-1);
    z-index: 0;
}

.swipeDivider::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 1;
    width: 24px;
    height: 24px;
    background: var(--c-icon-muted);
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2028%208'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cg%20transform='matrix(1.33333,0,0,1.33334,16.6667,0.666665)'%3e%3ccircle%20cx='5.5'%20cy='2.5'%20r='1.5'/%3e%3c/g%3e%3cg%20transform='matrix(1.33333,0,0,1.33333,6.66669,0.666667)'%3e%3ccircle%20cx='5.5'%20cy='2.5'%20r='1.5'/%3e%3c/g%3e%3cg%20transform='matrix(1.33333,0,0,1.33333,-3.33332,0.666667)'%3e%3ccircle%20cx='5.5'%20cy='2.5'%20r='1.5'/%3e%3c/g%3e%3c/svg%3e");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2028%208'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cg%20transform='matrix(1.33333,0,0,1.33334,16.6667,0.666665)'%3e%3ccircle%20cx='5.5'%20cy='2.5'%20r='1.5'/%3e%3c/g%3e%3cg%20transform='matrix(1.33333,0,0,1.33333,6.66669,0.666667)'%3e%3ccircle%20cx='5.5'%20cy='2.5'%20r='1.5'/%3e%3c/g%3e%3cg%20transform='matrix(1.33333,0,0,1.33333,-3.33332,0.666667)'%3e%3ccircle%20cx='5.5'%20cy='2.5'%20r='1.5'/%3e%3c/g%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(90deg);
}

.swipeDivider--columns {
    top: 0;
    bottom: 0;
    left: var(--swipe-divider-x, 50%);
    width: 33px;
    background-image:
        linear-gradient(var(--swipe-divider-line-color), var(--swipe-divider-line-color)),
        linear-gradient(var(--swipe-divider-line-color), var(--swipe-divider-line-color));
    background-position:
        center top,
        center bottom;
    background-size:
        1px calc(50% - ((34px + var(--border-1) + var(--border-1)) * 0.5)),
        1px calc(50% - ((34px + var(--border-1) + var(--border-1)) * 0.5));
    transform: translateX(-50%);
    cursor: ew-resize;
}

.swipeDivider--rows {
    left: 0;
    right: 0;
    top: var(--swipe-divider-y, 50%);
    height: 33px;
    background-image:
        linear-gradient(var(--swipe-divider-line-color), var(--swipe-divider-line-color)),
        linear-gradient(var(--swipe-divider-line-color), var(--swipe-divider-line-color));
    background-position:
        left center,
        right center;
    background-size:
        calc(50% - ((38px + var(--border-1) + var(--border-1)) * 0.5)) 1px,
        calc(50% - ((38px + var(--border-1) + var(--border-1)) * 0.5)) 1px;
    transform: translateY(-50%);
    cursor: ns-resize;
}

.swipeDivider--rows::before {
    transform: translate(-50%, -50%);
}

.swipeDivider--rows::after {
    width: 38px;
    height: 14px;
}

.swipeGridLine {
    position: absolute;
    z-index: calc(var(--z-ui) + 1);
    pointer-events: none;
    background: var(--c-border);
}

.swipeGridLine--columns {
    top: 0;
    bottom: 0;
    left: var(--swipe-divider-x, 50%);
    width: 1px;
    transform: translateX(-50%);
}

.swipeGridLine--rows {
    left: 0;
    right: 0;
    top: var(--swipe-divider-y, 50%);
    height: 1px;
    transform: translateY(-50%);
}

.swipeIntersectionHandle {
    position: absolute;
    left: var(--swipe-divider-x, 50%);
    top: var(--swipe-divider-y, 50%);
    width: 42px;
    height: 42px;
    z-index: calc(var(--z-ui) + 3);
    pointer-events: auto;
    touch-action: none;
    transform: translate(-50%, -50%);
    cursor: move;
    --swipe-divider-line-color: var(--c-font-muted);
}

.swipeIntersectionHandle:hover {
    --swipe-divider-line-color: var(--c-accent);
}

.swipeIntersectionHandle::before,
.swipeIntersectionHandle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--swipe-divider-line-color);
    transform: translate(-50%, -50%);
}

.swipeIntersectionHandle::before {
    width: 22px;
    height: 3px;
}

.swipeIntersectionHandle::after {
    width: 3px;
    height: 22px;
}


@media (max-width: 640px) {
    .panelDropHint {
        align-content: center;
        padding: var(--pad-2);
    }

    .panelDropHint__title {
        font-size: 19px;
    }

    .panelDropHint__actions {
        width: 100%;
        flex-direction: column;
    }

    .panelDropHint__action {
        width: 100%;
    }

    .panelDropHint__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


.timelineStrip {
    --timeline-control-size: var(--btn-slim-h);
    --timeline-control-radius: var(--radius-3);
    --timeline-track-size: var(--pad-3);
    --timeline-thumb-size: calc(var(--icon-size-sm) + (var(--border-1) * 2));
    min-width: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    padding: var(--pad-2);
    position: relative;
    z-index: calc(var(--z-overlay) + 2);
    background: var(--c-surface-glass);
    border: var(--border-2) solid var(--c-border);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
}

.timelineStrip[hidden] {
    display: none;
}

.timelineStrip__primary {
    min-width: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-1);
}

.timelineStrip__transport,
.timelineStrip__tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--gap-1);
}

.timelineStrip__toolCluster {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.timelineStrip__toolCluster > * + * {
    margin-left: calc(-1 * var(--border-1));
}

.timelineStrip__buttonGroup {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.timelineStrip__buttonGroup > * + * {
    border-left-width: 0;
}

.timelineStrip__scrubber {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.timelineStrip__button {
    height: var(--timeline-control-size);
    min-height: var(--timeline-control-size);
    box-shadow: none;
    border-radius: 0;
}

.timelineStrip__button.is-active,
.timelineStrip__button[aria-pressed="true"] {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.timelineStrip__iconButton {
    width: var(--timeline-control-size);
    min-width: var(--timeline-control-size);
    min-height: var(--timeline-control-size);
    padding: 0;
}

.timelineStrip__stepButton {
    padding: 0 var(--pad-1);
    font: var(--font-button);
}

.timelineStrip__buttonGroup > :first-child {
    border-top-left-radius: var(--timeline-control-radius);
    border-bottom-left-radius: var(--timeline-control-radius);
}

.timelineStrip__buttonGroup > :last-child {
    border-top-right-radius: var(--timeline-control-radius);
    border-bottom-right-radius: var(--timeline-control-radius);
}

.timelineStrip__stepIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.timelineStrip__stepIcon--minus {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
}

.timelineStrip__stepIcon--plus {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M8,14l0,-12'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M8,14l0,-12'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
}

.timelineStrip__stepLabel {
    display: inline-block;
    min-width: 0;
    color: inherit;
    font: inherit;
    font-family: var(--font-numeric);
}

.timelineStrip__buttonIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.timelineStrip__playbackButton .timelineStrip__buttonIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M3,2l11,6l-11,6l0,-12Z'%20style='fill-rule:nonzero;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M3,2l11,6l-11,6l0,-12Z'%20style='fill-rule:nonzero;'/%3e%3c/svg%3e");
}

.timelineStrip__playbackButton.is-playing .timelineStrip__buttonIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M11,13l0,-10'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3cpath%20d='M5,13l0,-10'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M11,13l0,-10'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3cpath%20d='M5,13l0,-10'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3c/svg%3e");
}

.timelineStrip__loopButton .timelineStrip__buttonIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:1.5;'%3e%3cpath%20d='M9.5,0.75l4.5,2.25l-4.5,2.25l0,-4.5Z'/%3e%3cpath%20d='M1,8l0,-2c-0.007,-2.011%201.026,-3%203,-3l6.4,0'%20style='fill:none;stroke:%23000;stroke-width:1.5px;'/%3e%3cpath%20d='M6.5,15.25l-4.5,-2.25l4.5,-2.25l-0,4.5Z'/%3e%3cpath%20d='M15,8c0,0%200.007,1.445%200.007,2.008c-0.007,1.995%20-1.063,2.992%20-3.007,2.992l-6.4,0'%20style='fill:none;stroke:%23000;stroke-width:1.5px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:1.5;'%3e%3cpath%20d='M9.5,0.75l4.5,2.25l-4.5,2.25l0,-4.5Z'/%3e%3cpath%20d='M1,8l0,-2c-0.007,-2.011%201.026,-3%203,-3l6.4,0'%20style='fill:none;stroke:%23000;stroke-width:1.5px;'/%3e%3cpath%20d='M6.5,15.25l-4.5,-2.25l4.5,-2.25l-0,4.5Z'/%3e%3cpath%20d='M15,8c0,0%200.007,1.445%200.007,2.008c-0.007,1.995%20-1.063,2.992%20-3.007,2.992l-6.4,0'%20style='fill:none;stroke:%23000;stroke-width:1.5px;'/%3e%3c/svg%3e");
}

.timelineStrip__time,
.timelineStrip__speedLabel {
    color: var(--c-font-muted);
    font: var(--font-console);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.timelineStrip__time {
    font-family: var(--font-numeric);
}

.timelineStrip__timeGroup {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--gap-1) * 0.5);
    padding: 0 var(--pad-1);
}

.timelineStrip__timeSeparator {
    color: var(--c-font-muted);
    font: var(--font-console);
    font-family: var(--font-numeric);
    white-space: nowrap;
}

.timelineStrip__speedDropdown {
    width: fit-content;
    min-width: calc((var(--timeline-speed-width-ch, 4) * 1ch) + (var(--pad-1) * 2));
    z-index: calc(var(--z-overlay) + 3);
}

.timelineStrip__speedDropdown[open] {
    z-index: var(--z-modal);
}

.timelineStrip__speedDropdownTrigger.sidebarExampleDropdown__trigger {
    height: var(--timeline-control-size);
    min-height: var(--timeline-control-size);
    padding: 0 var(--pad-1);
    border-radius: var(--timeline-control-radius);
    box-shadow: none;
}

.timelineStrip__toolCluster > :first-child .timelineStrip__speedDropdownTrigger.sidebarExampleDropdown__trigger {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.timelineStrip__toolCluster > :last-child.timelineStrip__button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.timelineStrip__speedDropdown .sidebarExampleDropdown__text {
    gap: 0;
}

.timelineStrip__speedDropdown .sidebarExampleDropdown__label {
    font-family: var(--font-numeric);
}

.timelineStrip__speedDropdown .sidebarExampleDropdown__label {
    text-align: center;
}


.timelineStrip__speedDropdownMenu.sidebarExampleDropdown__menu {
    top: auto;
    bottom: calc(100% + var(--gap-1));
    left: 0;
    right: auto;
    min-width: 100%;
    width: 100%;
    z-index: 1;
}

.timelineStrip__speedDropdown.is-disabled > .sidebarExampleDropdown__trigger {
    color: var(--c-font-muted);
    border-color: var(--c-border);
    background: var(--c-surface-interactive);
    opacity: var(--opacity-disabled);
    cursor: default;
    pointer-events: none;
}

.timelineStrip__range {
    min-width: 0;
    flex: 1 1 auto;
    position: relative;
    height: var(--timeline-control-size);
}

.timelineStrip__rangeTrack,
.timelineStrip__rangeFill,
.timelineStrip__rangeThumb {
    position: absolute;
    display: block;
}

.timelineStrip__rangeTrack,
.timelineStrip__rangeFill {
    top: 50%;
    height: var(--timeline-track-size);
    border-radius: 999px;
    transform: translateY(-50%);
}

.timelineStrip__rangeTrack {
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--c-font-muted) 58%, transparent);
}

.timelineStrip__rangeFill {
    left: 0;
    width: 0;
    background: color-mix(in srgb, var(--c-accent) 82%, var(--c-font-muted));
}

.timelineStrip__rangeThumb {
    top: 50%;
    left: 0;
    width: var(--timeline-thumb-size);
    height: var(--timeline-thumb-size);
    border: var(--border-1) solid color-mix(in srgb, var(--c-font) 92%, transparent);
    border-radius: 50%;
    background: var(--c-surface-solid);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-surface-interactive) 55%, transparent);
    transform: translate(-50%, -50%);
}

.timelineStrip__rangeInput {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.timelineStrip__rangeInput::-webkit-slider-runnable-track {
    height: var(--timeline-track-size);
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.timelineStrip__rangeInput::-moz-range-track {
    height: var(--timeline-track-size);
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.timelineStrip__rangeInput::-webkit-slider-thumb {
    width: var(--timeline-thumb-size);
    height: var(--timeline-thumb-size);
    margin-top: calc((var(--timeline-track-size) - var(--timeline-thumb-size)) * 0.5);
    border: 0;
    border-radius: 50%;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.timelineStrip__rangeInput::-moz-range-thumb {
    width: var(--timeline-thumb-size);
    height: var(--timeline-thumb-size);
    border: 0;
    border-radius: 50%;
    background: transparent;
}

.timelineStrip__rangeInput:focus {
    outline: none;
}

.timelineStrip__range:focus-within .timelineStrip__rangeThumb {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 58%, transparent);
}

.timelineStrip__button:disabled,
.timelineStrip__rangeInput:disabled {
    cursor: default;
}

.timelineStrip__button:disabled {
    color: var(--c-font-muted);
    border-color: var(--c-border);
    background: var(--c-surface-interactive);
    opacity: var(--opacity-disabled);
}

.panelOverlayLine {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: var(--border-1);
    background: var(--c-border);
    pointer-events: none;
}

.panelOverlayLine--top {
    top: 0;
}

.panelOverlayLine--bottom {
    bottom: 0;
}

.panelActionGrid {
    position: absolute;
    top: var(--pad-3);
    right: var(--pad-3);
    z-index: calc(var(--z-ui) + 2);
    display: grid;
    grid-template-columns: repeat(3, var(--panel-action-size));
    grid-template-rows: repeat(2, var(--panel-action-size));
    gap: 0;
    width: var(--panel-action-grid-w);
    height: calc(var(--panel-action-size) * 2);
    pointer-events: auto;
}

.panelActionGrid--compact {
    grid-template-columns: repeat(2, var(--panel-action-size));
    grid-template-rows: repeat(2, var(--panel-action-size));
    width: calc(var(--panel-action-size) * 2);
}

.panelActionGrid--compact .panelActionGrid__button:nth-child(2),
.panelActionGrid--compact .panelActionGrid__button:nth-child(4) {
    border-left-width: 0;
}

.panelActionGrid--compact .panelActionGrid__button:nth-child(3),
.panelActionGrid--compact .panelActionGrid__button:nth-child(4) {
    border-top-width: 0;
}

.panelActionGrid--compact .panelActionGrid__button:nth-child(2) {
    border-top-right-radius: var(--radius-3);
}

.panelActionGrid--compact .panelActionGrid__button:nth-child(3) {
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--radius-3);
}

.panelActionGrid--compact .panelActionGrid__button:nth-child(4) {
    border-bottom-right-radius: var(--radius-3);
}

.panelActionGrid__button,
.panelInfoButton {
    width: var(--panel-action-size);
    height: var(--panel-action-size);
    min-width: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: var(--border-1) solid var(--c-border);
    border-radius: 0;
    background: var(--c-surface-interactive);
    color: var(--c-font-muted);
    cursor: pointer;
    transition:
        color var(--ease-fast),
        border-color var(--ease-fast),
        background-color var(--ease-fast);
}

.panelActionGrid__button:nth-child(2),
.panelActionGrid__button:nth-child(3),
.panelActionGrid__button:nth-child(5),
.panelActionGrid__button:nth-child(6) {
    border-left-width: 0;
}

.panelActionGrid__button:nth-child(n + 4) {
    border-top-width: 0;
}

.panelActionGrid__button:nth-child(1) {
    border-top-left-radius: var(--radius-3);
}

.panelActionGrid__button:nth-child(3) {
    border-top-right-radius: var(--radius-3);
}

.panelActionGrid__button:nth-child(4) {
    border-bottom-left-radius: var(--radius-3);
}

.panelActionGrid__button:nth-child(6) {
    border-bottom-right-radius: var(--radius-3);
}

.panelActionGrid__button:hover,
.panelInfoButton:hover {
    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.panelActionGrid__button.is-active,
.panelInfoButton.is-active {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.panelActionGrid__button:disabled {
    opacity: var(--opacity-disabled);
    cursor: default;
}

.panelActionGrid__button:disabled:hover {
    color: var(--c-font-muted);
    border-color: var(--c-border);
    background: var(--c-surface-interactive);
}

.comparePanel__overlay--layout-columns .comparePanelItem.is-minimized .panelActionGrid,
.comparePanel__overlay--layout-columns .comparePanelColumn.is-minimized .panelActionGrid {
    left: var(--pad-3);
    right: auto;
    grid-template-columns: var(--panel-action-size);
    grid-template-rows: repeat(3, var(--panel-action-size));
    width: var(--panel-action-size);
    height: calc(var(--panel-action-size) * 3);
}

.panelAlignmentPoints {
    display: grid;
    gap: var(--gap-1);
    padding: var(--pad-1);
}

.panelAlignmentPoints__controlGrid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
    min-width: 0;
}

.panelAlignmentPoints__controlGrid > .sidebarControl {
    min-width: 0;
}

.panelAlignmentPoints__instruction {
    min-height: 0;
    display: flex;
    align-items: center;
    padding: var(--pad-1) var(--pad-2);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: var(--c-surface-solid);
    margin: 0;
    color: var(--c-font);
    font: var(--font-button);
    line-height: 1.35;
}

.alignmentPointMarker {
    position: absolute;
    z-index: 5;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: var(--border-1) solid var(--c-accent);
    border-radius: var(--radius-2);
    background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), var(--c-accent) calc(50% - 0.5px), var(--c-accent) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(transparent calc(50% - 0.5px), var(--c-accent) calc(50% - 0.5px), var(--c-accent) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-surface-solid) 72%, transparent), var(--shadow-1);
    pointer-events: auto;
    cursor: move;
    transform: translate(-50%, -50%);
}

.is-magnification-active .alignmentPointMarker.is-dragging {
    opacity: 0;
}

.alignmentPointMarker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    border: var(--border-1) solid var(--c-accent);
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
}

.alignmentPointMarker__label {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--c-accent);
    color: var(--c-surface-solid);
    font: var(--font-button);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.alignmentPointMarker--ghost {
    border-color: var(--c-font-muted);
    background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), var(--c-font-muted) calc(50% - 0.5px), var(--c-font-muted) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(transparent calc(50% - 0.5px), var(--c-font-muted) calc(50% - 0.5px), var(--c-font-muted) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    color: var(--c-font-muted);
    opacity: 0.72;
    pointer-events: none;
}

.alignmentPointMarker--ghost::after {
    border-color: var(--c-font-muted);
}

.alignmentPointMarker--ghost .alignmentPointMarker__label {
    background: var(--c-font-muted);
}

.comparePanel__overlay--layout-columns .comparePanelItem.is-minimized .panelActionGrid__button,
.comparePanel__overlay--layout-columns .comparePanelColumn.is-minimized .panelActionGrid__button {
    border-left-width: var(--border-1);
    border-radius: 0;
}

.comparePanel__overlay--layout-columns .comparePanelItem.is-minimized .panelActionGrid__button:nth-child(n + 2),
.comparePanel__overlay--layout-columns .comparePanelColumn.is-minimized .panelActionGrid__button:nth-child(n + 2) {
    border-top-width: 0;
}

.comparePanel__overlay--layout-columns .comparePanelItem.is-minimized .panelActionGrid__button:nth-child(n + 4),
.comparePanel__overlay--layout-columns .comparePanelColumn.is-minimized .panelActionGrid__button:nth-child(n + 4) {
    display: none;
}

.comparePanel__overlay--layout-columns .comparePanelItem.is-minimized .panelActionGrid__button:nth-child(1),
.comparePanel__overlay--layout-columns .comparePanelColumn.is-minimized .panelActionGrid__button:nth-child(1) {
    border-top-left-radius: var(--radius-3);
    border-top-right-radius: var(--radius-3);
}

.comparePanel__overlay--layout-columns .comparePanelItem.is-minimized .panelActionGrid__button:nth-child(3),
.comparePanel__overlay--layout-columns .comparePanelColumn.is-minimized .panelActionGrid__button:nth-child(3) {
    border-bottom-left-radius: var(--radius-3);
    border-bottom-right-radius: var(--radius-3);
}

.comparePanel__overlay--layout-rows .comparePanelItem.is-minimized .panelActionGrid,
.comparePanel__overlay--layout-rows .comparePanelItem.is-peer-maximized .panelActionGrid {
    grid-template-columns: repeat(3, var(--panel-action-size));
    grid-template-rows: var(--panel-action-size);
    width: var(--panel-action-grid-w);
    height: var(--panel-action-size);
}

.comparePanel__overlay--layout-rows .comparePanelItem.is-minimized .panelActionGrid__button,
.comparePanel__overlay--layout-rows .comparePanelItem.is-peer-maximized .panelActionGrid__button {
    border-top-width: var(--border-1);
    border-radius: 0;
}

.comparePanel__overlay--layout-rows .comparePanelItem.is-minimized .panelActionGrid__button:nth-child(2),
.comparePanel__overlay--layout-rows .comparePanelItem.is-minimized .panelActionGrid__button:nth-child(3),
.comparePanel__overlay--layout-rows .comparePanelItem.is-peer-maximized .panelActionGrid__button:nth-child(2),
.comparePanel__overlay--layout-rows .comparePanelItem.is-peer-maximized .panelActionGrid__button:nth-child(3) {
    border-left-width: 0;
}

.comparePanel__overlay--layout-rows .comparePanelItem.is-minimized .panelActionGrid__button:nth-child(n + 4),
.comparePanel__overlay--layout-rows .comparePanelItem.is-peer-maximized .panelActionGrid__button:nth-child(n + 4) {
    display: none;
}

.comparePanel__overlay--layout-rows .comparePanelItem.is-minimized .panelActionGrid__button:nth-child(1),
.comparePanel__overlay--layout-rows .comparePanelItem.is-peer-maximized .panelActionGrid__button:nth-child(1) {
    border-top-left-radius: var(--radius-3);
    border-bottom-left-radius: var(--radius-3);
}

.comparePanel__overlay--layout-rows .comparePanelItem.is-minimized .panelActionGrid__button:nth-child(3),
.comparePanel__overlay--layout-rows .comparePanelItem.is-peer-maximized .panelActionGrid__button:nth-child(3) {
    border-top-right-radius: var(--radius-3);
    border-bottom-right-radius: var(--radius-3);
}

.panelMinimizedLabel {
    position: absolute;
    left: 50%;
    bottom: var(--pad-2);
    z-index: 2;
    max-height: calc(100% - (var(--pad-2) * 2) - (var(--panel-action-size) * 3) - var(--gap-1));
    color: var(--c-font-muted);
    font: var(--font-button);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.panelMinimizedLabel--columns {
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    text-orientation: mixed;
}

.comparePanel__overlay--layout-rows .panelMinimizedLabel {
    left: var(--pad-2);
    bottom: 50%;
    max-width: calc(100% - (var(--pad-2) * 2) - (var(--panel-action-size) * 3) - var(--gap-1));
    transform: translateY(50%);
}

.comparePanel__overlay--layout-rows .panelMinimizedLabel--columns {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

.panelActionGrid__icon,
.panelInfoButton__icon {
    width: calc(var(--panel-action-size) * 0.62);
    height: calc(var(--panel-action-size) * 0.62);
    display: inline-block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.panelActionGrid__button--icon-minimize .panelActionGrid__icon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M15,14c0,0.552%20-0.448,1%20-1,1l-12,0c-0.552,0%20-1,-0.448%20-1,-1c0,-0.552%200.448,-1%201,-1l12,0c0.552,0%201,0.448%201,1Z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M15,14c0,0.552%20-0.448,1%20-1,1l-12,0c-0.552,0%20-1,-0.448%20-1,-1c0,-0.552%200.448,-1%201,-1l12,0c0.552,0%201,0.448%201,1Z'/%3e%3c/svg%3e");
}

.panelActionGrid__button--icon-maximize .panelActionGrid__icon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;'%3e%3cpath%20d='M7,2l-5,0l0,5'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3cpath%20d='M9,14l5,0l0,-5'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-miterlimit:3;'/%3e%3cpath%20d='M14,7l0,-5l-5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:6;'/%3e%3cpath%20d='M2,9l0,5l5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:3;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;'%3e%3cpath%20d='M7,2l-5,0l0,5'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3cpath%20d='M9,14l5,0l0,-5'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-miterlimit:3;'/%3e%3cpath%20d='M14,7l0,-5l-5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:6;'/%3e%3cpath%20d='M2,9l0,5l5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:3;'/%3e%3c/svg%3e");
}

.panelActionGrid__button--icon-close .panelActionGrid__icon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cpath%20d='M2,2l12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2.4px;'/%3e%3cpath%20d='M14,2l-12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cpath%20d='M2,2l12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2.4px;'/%3e%3cpath%20d='M14,2l-12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2px;'/%3e%3c/svg%3e");
}

.panelActionGrid__button--remove:hover {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface-interactive));
}

.panelActionGrid__button--icon-alignment .panelActionGrid__icon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cg%20transform='matrix(1,0,0,0.909091,0,0.181818)'%3e%3cpath%20d='M7,2.66C7,2.296%206.731,2%206.4,2L2.6,2C2.269,2%202,2.296%202,2.66L2,12.34C2,12.704%202.269,13%202.6,13L6.4,13C6.731,13%207,12.704%207,12.34L7,2.66Z'/%3e%3c/g%3e%3cg%20transform='matrix(1,0,0,0.909091,-1.77636e-15,1.27273)'%3e%3cpath%20d='M14,3.66C14,3.296%2013.731,3%2013.4,3L9.6,3C9.269,3%209,3.296%209,3.66L9,13.34C9,13.704%209.269,14%209.6,14L13.4,14C13.731,14%2014,13.704%2014,13.34L14,3.66Z'/%3e%3c/g%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cg%20transform='matrix(1,0,0,0.909091,0,0.181818)'%3e%3cpath%20d='M7,2.66C7,2.296%206.731,2%206.4,2L2.6,2C2.269,2%202,2.296%202,2.66L2,12.34C2,12.704%202.269,13%202.6,13L6.4,13C6.731,13%207,12.704%207,12.34L7,2.66Z'/%3e%3c/g%3e%3cg%20transform='matrix(1,0,0,0.909091,-1.77636e-15,1.27273)'%3e%3cpath%20d='M14,3.66C14,3.296%2013.731,3%2013.4,3L9.6,3C9.269,3%209,3.296%209,3.66L9,13.34C9,13.704%209.269,14%209.6,14L13.4,14C13.731,14%2014,13.704%2014,13.34L14,3.66Z'/%3e%3c/g%3e%3c/svg%3e");
}

.panelActionGrid__button--icon-download .panelActionGrid__icon {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='currentColor'%20d='M11%203h2v9.17l3.59-3.58L18%2010l-6%206-6-6%201.41-1.41L11%2012.17V3ZM5%2018h14v2H5v-2Z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='currentColor'%20d='M11%203h2v9.17l3.59-3.58L18%2010l-6%206-6-6%201.41-1.41L11%2012.17V3ZM5%2018h14v2H5v-2Z'/%3e%3c/svg%3e");
}

.panelActionGrid__button--alignment.has-offset .panelActionGrid__icon {
    color: var(--c-accent);
}

.panelActionGrid__button--icon-fx .panelActionGrid__icon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M9,1.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-7,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l7,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M7.013,7.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-5.013,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l5.013,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M10.175,5.55l4.732,8.9c0.162,0.304%200.046,0.55%20-0.257,0.55l-1.1,0c-0.304,0%20-0.681,-0.246%20-0.842,-0.55l-4.733,-8.9c-0.161,-0.304%20-0.046,-0.55%200.258,-0.55l1.1,0c0.303,0%200.68,0.246%200.842,0.55Z'/%3e%3cpath%20d='M14.819,5.556l-6.458,8.888c-0.223,0.307%20-0.653,0.556%20-0.959,0.556l-1.112,0c-0.306,0%20-0.375,-0.249%20-0.152,-0.556l6.458,-8.888c0.223,-0.307%200.653,-0.556%200.96,-0.556l1.111,0c0.307,0%200.375,0.249%200.152,0.556Z'/%3e%3cpath%20d='M2.5,15l-1,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-13c0,-0.276%200.224,-0.5%200.5,-0.5l1,0c0.276,0%200.5,0.224%200.5,0.5l0,13c0,0.276%20-0.224,0.5%20-0.5,0.5Z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M9,1.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-7,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l7,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M7.013,7.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-5.013,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l5.013,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M10.175,5.55l4.732,8.9c0.162,0.304%200.046,0.55%20-0.257,0.55l-1.1,0c-0.304,0%20-0.681,-0.246%20-0.842,-0.55l-4.733,-8.9c-0.161,-0.304%20-0.046,-0.55%200.258,-0.55l1.1,0c0.303,0%200.68,0.246%200.842,0.55Z'/%3e%3cpath%20d='M14.819,5.556l-6.458,8.888c-0.223,0.307%20-0.653,0.556%20-0.959,0.556l-1.112,0c-0.306,0%20-0.375,-0.249%20-0.152,-0.556l6.458,-8.888c0.223,-0.307%200.653,-0.556%200.96,-0.556l1.111,0c0.307,0%200.375,0.249%200.152,0.556Z'/%3e%3cpath%20d='M2.5,15l-1,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-13c0,-0.276%200.224,-0.5%200.5,-0.5l1,0c0.276,0%200.5,0.224%200.5,0.5l0,13c0,0.276%20-0.224,0.5%20-0.5,0.5Z'/%3e%3c/svg%3e");
}

.panelActionGrid__button--reserved {
    cursor: default;
}

.panelActionGrid__button--reserved:hover {
    color: var(--c-font-muted);
    border-color: var(--c-border);
    background: var(--c-surface-interactive);
}

.panelInfoCluster {
    position: absolute;
    left: var(--pad-3);
    bottom: var(--pad-3);
    z-index: 3;
    display: inline-flex;
    align-items: flex-end;
    gap: var(--gap-1);
    max-width: calc(100% - (var(--pad-3) * 2) - 84px);
    pointer-events: none;
}

.panelZoomCluster {
    position: absolute;
    right: var(--pad-3);
    bottom: var(--pad-3);
    z-index: 3;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
}

.panelFileNameLabel {
    min-width: 0;
    color: var(--c-font-muted);
    font: var(--font-button);
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    padding-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--shadow-panel-file-label);
    pointer-events: none;
    flex: 0 1 auto;
}

.panelInfoButton {
    position: relative;
    width: var(--panel-info-button-size);
    height: var(--panel-info-button-size);
    border-radius: var(--radius-3);
    pointer-events: auto;
    flex: 0 0 auto;
}

.panelInfoButton__icon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2030%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M18.584,10.453l-7.095,0.89l-0.253,1.175l1.394,0.258c0.91,0.216%201.089,0.546%200.892,1.452l-2.286,10.742c-0.602,2.778%200.325,4.086%202.502,4.086c1.689,0%203.649,-0.781%204.539,-1.851l0.272,-1.29c-0.621,0.546%20-1.524,0.762%20-2.126,0.762c-0.85,0%20-1.161,-0.597%20-0.941,-1.651l3.102,-14.573Zm0.216,-6.467c-0,1.698%20-1.399,3.097%20-3.097,3.097c-1.7,-0%20-3.099,-1.399%20-3.099,-3.097c0,-1.698%201.399,-3.097%203.099,-3.097c1.698,0%203.097,1.399%203.097,3.097'%20style='fill-rule:nonzero;'%20/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2030%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M18.584,10.453l-7.095,0.89l-0.253,1.175l1.394,0.258c0.91,0.216%201.089,0.546%200.892,1.452l-2.286,10.742c-0.602,2.778%200.325,4.086%202.502,4.086c1.689,0%203.649,-0.781%204.539,-1.851l0.272,-1.29c-0.621,0.546%20-1.524,0.762%20-2.126,0.762c-0.85,0%20-1.161,-0.597%20-0.941,-1.651l3.102,-14.573Zm0.216,-6.467c-0,1.698%20-1.399,3.097%20-3.097,3.097c-1.7,-0%20-3.099,-1.399%20-3.099,-3.097c0,-1.698%201.399,-3.097%203.099,-3.097c1.698,0%203.097,1.399%203.097,3.097'%20style='fill-rule:nonzero;'%20/%3e%3c/svg%3e");
}

.panelZoomButton {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: var(--panel-zoom-color, var(--c-panel-zoom-neutral));
    font: var(--font-button);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: var(--shadow-zoom-label);
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.96;
    transition:
        opacity var(--ease-fast),
        color var(--ease-fast);
}

.panelZoomButton:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: var(--border-1);
    text-underline-offset: 2px;
}

.panelInfoPopover {
    position: absolute;
    left: var(--pad-3);
    bottom: var(--pad-3);
    z-index: 4;
    width: min(230px, calc(100% - (var(--pad-3) * 2)));
    max-width: calc(100% - (var(--pad-3) * 2));
    max-height: calc(100% - (var(--pad-3) * 2));
    padding: calc(var(--pad-3) * 2);
    overflow: auto;
    border: var(--border-1) solid var(--c-accent);
    border-radius: var(--radius-3);
    background: var(--c-surface-interactive);
    backdrop-filter: var(--filter-blur-ui);
    -webkit-backdrop-filter: var(--filter-blur-ui);
    box-shadow: var(--shadow-2);
    color: var(--c-font);
    cursor: pointer;
    pointer-events: auto;
}

.panelInfoPopover__title {
    min-width: 0;
    padding-bottom: var(--pad-1);
    margin-bottom: var(--gap-1);
    border-bottom: var(--border-1) solid var(--c-border);
    color: var(--c-font);
    font: var(--font-button);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panelInfoPopover__status {
    margin: var(--gap-1) 0 0;
    color: var(--c-font-muted);
    font: var(--font-button);
}

.panelInfoPopover__status--calculating {
    opacity: 0;
    animation: panel-info-reveal-calculating 0ms linear 180ms forwards;
}

@keyframes panel-info-reveal-calculating {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panelInfoPopover__status--calculating {
        opacity: 1;
        animation: none;
    }
}

.panelInfoPopover__list {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    column-gap: calc(var(--gap-1) * 2);
    row-gap: calc(var(--gap-1) * 0.75);
    margin: 0;
    font: var(--font-button);
}

.panelInfoPopover__details {
    display: none;
    margin-top: var(--gap-1);
}

.panelInfoPopover.is-expanded .panelInfoPopover__details {
    display: block;
}

.panelInfoPopover__toggle {
    width: 100%;
    min-height: calc(var(--panel-info-button-size) * 0.85);
    margin-top: var(--gap-1);
    padding: var(--pad-1) 0 0;
    border: 0;
    border-top: var(--border-1) solid var(--c-border);
    background: transparent;
    color: var(--c-font);
    font: var(--font-button);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.panelInfoPopover__toggle:hover {
    color: var(--c-accent);
}

.panelInfoPopover__label {
    min-width: 0;
    margin: 0;
    color: var(--c-font-muted);
    font-weight: 700;
}

.panelInfoPopover__value {
    min-width: 0;
    margin: 0;
    color: var(--c-font);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alignmentPointTray {
    position: absolute;
    left: 50%;
    bottom: var(--pad-3);
    z-index: 3;
    width: min(520px, calc(100% - (var(--pad-3) * 2)));
    max-height: calc(100% - (var(--pad-3) * 2));
    overflow: auto;
    border: var(--border-1) solid var(--c-accent);
    border-radius: var(--radius-3);
    background: var(--c-surface-interactive);
    backdrop-filter: var(--filter-blur-ui);
    -webkit-backdrop-filter: var(--filter-blur-ui);
    box-shadow: var(--shadow-2);
    color: var(--c-font);
    pointer-events: auto;
    transform: translateX(-50%);
}

.viewCube {
    --view-cube-face-x: rgb(184, 190, 198);
    --view-cube-face-y: rgb(224, 228, 232);
    --view-cube-face-z: rgb(204, 210, 216);
    --view-cube-face-edge: rgba(24, 28, 34, 0.88);
    --view-cube-axis-label: rgb(18, 20, 24);

    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: var(--border-1) solid color-mix(in srgb, var(--c-border) 72%, transparent);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-solid) 78%, transparent);
    box-shadow: var(--shadow-1);
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.viewCube--panel {
    position: absolute;
    right: var(--pad-3);
    bottom: var(--pad-3);
    z-index: calc(var(--z-ui) + 3);
    width: min(96px, calc(100% - (var(--pad-3) * 2)));
    height: min(86px, calc(100% - (var(--pad-3) * 2)));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
}

.viewCube,
.viewCube * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.viewCube [role="button"]:focus,
.viewCube [role="button"]:focus-visible {
    outline: none;
}

.viewCube--sidebar {
    width: 100%;
    height: 116px;
    border-color: color-mix(in srgb, var(--c-border) 54%, transparent);
    background: color-mix(in srgb, var(--c-surface-solid) 54%, transparent);
    box-shadow: none;
    overflow: visible;
}

.viewCube__svg {
    display: block;
    max-width: none;
    overflow: visible;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.24));
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.viewCube--panel .viewCube__svg {
    width: 96px;
    height: 84px;
}

.viewCube--sidebar .viewCube__svg {
    width: 116px;
    height: 100px;
}

.viewCube__toggle {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: var(--panel-action-size);
    height: var(--panel-action-size);
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--c-font-muted);
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

.viewCube__toggle:hover,
.viewCube__toggle:focus-visible {
    color: var(--c-font);
    outline: none;
}

.viewCube__toggleIcon {
    width: calc(var(--panel-action-size) * 0.62);
    height: calc(var(--panel-action-size) * 0.62);
    display: block;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cpath%20d='M2,2l12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2.4px;'/%3e%3cpath%20d='M14,2l-12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2px;'/%3e%3c/svg%3e") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cpath%20d='M2,2l12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2.4px;'/%3e%3cpath%20d='M14,2l-12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2px;'/%3e%3c/svg%3e") center / contain no-repeat;
}

.viewCube.is-collapsed .viewCube__svg {
    display: none;
}

.viewCube.is-collapsed .viewCube__toggleIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M8,14l0,-12'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M8,14l0,-12'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
}

.viewCube__face,
.viewCube__edge,
.viewCube__corner,
.viewCube__axisControl {
    cursor: pointer;
    transition:
        fill var(--ease-fast),
        stroke var(--ease-fast),
        opacity var(--ease-fast),
        filter var(--ease-fast);
}

.viewCube__axisControl {
    pointer-events: visiblePainted;
}

.viewCube__face {
    stroke: var(--view-cube-face-edge);
    stroke-width: 2.5;
    stroke-linejoin: round;
    pointer-events: visiblePainted;
}

.viewCube__face--left,
.viewCube__face--right {
    fill: var(--view-cube-face-x);
}

.viewCube__face--top,
.viewCube__face--bottom {
    fill: var(--view-cube-face-y);
}

.viewCube__face--front,
.viewCube__face--back {
    fill: var(--view-cube-face-z);
}

.viewCube__face:hover,
.viewCube__face:focus-visible,
.viewCube__face.is-active {
    fill: color-mix(in srgb, var(--c-accent) 40%, var(--view-cube-face-z));
    stroke: color-mix(in srgb, var(--c-accent) 86%, white);
    filter: brightness(1.05);
    outline: none;
}

.viewCube__edge {
    fill: var(--view-cube-face-edge);
    opacity: 0;
    pointer-events: all;
}

.viewCube__edge:hover,
.viewCube__edge:focus-visible {
    fill: color-mix(in srgb, var(--c-accent) 72%, transparent);
    opacity: 1;
    outline: none;
}

.viewCube__corner {
    fill: var(--view-cube-face-edge);
    stroke: transparent;
    stroke-width: 1.5;
    opacity: 0;
    pointer-events: all;
}

.viewCube__corner:hover,
.viewCube__corner:focus-visible {
    fill: color-mix(in srgb, var(--c-accent) 78%, white);
    stroke: color-mix(in srgb, var(--c-accent) 88%, white);
    opacity: 1;
    outline: none;
}

.viewCube__axisLine {
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.72;
    pointer-events: none;
    transition: opacity var(--ease-fast);
}

.viewCube__axisLine--x {
    stroke: var(--c-axis-x);
}

.viewCube__axisLine--y {
    stroke: var(--c-axis-y);
}

.viewCube__axisLine--z {
    stroke: var(--c-axis-z);
}

.viewCube__axisButton {
    stroke: color-mix(in srgb, currentColor 78%, black);
    stroke-width: 1.5;
}

.viewCube__axisControl--x {
    color: var(--c-axis-x);
}

.viewCube__axisControl--y {
    color: var(--c-axis-y);
}

.viewCube__axisControl--z {
    color: var(--c-axis-z);
}

.viewCube__axisControl .viewCube__axisButton {
    fill: currentColor;
}

.viewCube__axisControl:hover .viewCube__axisButton,
.viewCube__axisControl:focus-visible .viewCube__axisButton,
.viewCube__axisControl.is-active .viewCube__axisButton {
    stroke: color-mix(in srgb, var(--c-accent) 88%, white);
    stroke-width: 3;
    filter: brightness(1.2);
}

.viewCube__axisControl:focus-visible {
    outline: none;
}

.viewCube__axisLabel {
    fill: var(--view-cube-axis-label);
    font: 700 var(--fs-console) / 1 var(--font-ui);
    pointer-events: none;
}

.sidebarControl.sidebarControl--viewCube {
    height: auto;
    min-height: calc((var(--sidebar-control-height) * 4) + (var(--gap-1) * 3));
    grid-row: span 4;
    align-items: stretch;
    padding: var(--sidebar-control-inset);
}

.sidebarViewCube__header {
    min-width: 0;
    min-height: var(--sidebar-control-height);
    display: flex;
    align-items: center;
    padding: 0 calc(var(--sidebar-control-inset) * 3);
    pointer-events: none;
}

.sidebarViewCube__header .sidebarControl__text {
    width: 100%;
    text-align: left;
}

@container panel-item (max-width: 225px) {
    .viewCube--panel {
        display: none;
    }
}

@media (max-height: 480px) {
    .viewCube--panel {
        display: none;
    }
}

@media (max-width: 640px) {
    .viewCube--panel {
        width: min(124px, calc(100% - (var(--pad-3) * 2)));
        height: min(110px, calc(100% - (var(--pad-3) * 2)));
    }

    .viewCube--panel .viewCube__svg {
        width: 124px;
        height: 108px;
    }
}

.sidebarPanel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
    padding: 0;
    transition:
        width var(--ease-shell),
        min-width var(--ease-shell),
        max-width var(--ease-shell);
}

.sidebarPanel__collapsedToggle {
    width: var(--navbar);
    min-width: var(--navbar);
    max-width: var(--navbar);
    height: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    display: none;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    color: var(--c-icon-muted);
    background: var(--c-surface-glass);
    border: 0;
    border-left: var(--border-2) solid var(--c-border);
    border-radius: 0;
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast);
}

.sidebarPanel__collapsedToggle:hover,
.sidebarPanel__collapsedToggle:focus-visible {
    color: var(--c-accent);
    background: transparent;
}

.sidebarPanel__content {
    width: 100%;
    min-width: 0;
    max-width: var(--sidebar);
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-surface-glass);
    border: 0;
    border-left: var(--border-2) solid var(--c-border);
    border-radius: 0;
    box-shadow: none;
}

.sidebarPanel__header {
    flex: 0 0 auto;
    height: var(--header);
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    border-bottom: var(--border-1) solid var(--c-border);
    background: transparent;
}

.sidebarPanel__toggleGroup {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
}

.sidebarPanel__toggleGroup > * + * {
    position: relative;
}

.sidebarPanel__toggleGroup > * + *::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--border-1);
    background: var(--c-border);
    pointer-events: none;
}

.sidebarPanel__mediaTabs {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebarPanel__mediaTab {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pad-2);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--c-font-muted);
    font: var(--font-button);
    cursor: pointer;
    transition: background var(--ease-fast), color var(--ease-fast);
}

.sidebarPanel__mediaTab + .sidebarPanel__mediaTab {
    border-left: var(--border-1) solid var(--c-border);
}

.sidebarPanel__mediaTab:hover,
.sidebarPanel__mediaTab.is-active {
    color: var(--c-font);
}

.sidebarPanel__mediaTab.is-active {
    background: var(--c-control-active-bg);
}

.sidebarPanel__toggle {
    gap: var(--gap-1);
    min-width: calc(var(--navbar) - (var(--pad-1) * 2));
    min-height: 0;
    padding: 0 var(--pad-1);
    border-radius: 0;
    box-shadow: none;
    border: 0;
}

.sidebarPanel__toggle--close {
    width: var(--navbar);
    min-width: var(--navbar);
    padding: 0;
    flex: 0 0 var(--navbar);
}

.sidebarPanel__infoButton {
    width: var(--header);
    min-width: var(--header);
    padding: 0;
    flex: 0 0 var(--header);
}

.sidebarPanel__infoIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2030%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M18.584,10.453l-7.095,0.89l-0.253,1.175l1.394,0.258c0.91,0.216%201.089,0.546%200.892,1.452l-2.286,10.742c-0.602,2.778%200.325,4.086%202.502,4.086c1.689,0%203.649,-0.781%204.539,-1.851l0.272,-1.29c-0.621,0.546%20-1.524,0.762%20-2.126,0.762c-0.85,0%20-1.161,-0.597%20-0.941,-1.651l3.102,-14.573Zm0.216,-6.467c-0,1.698%20-1.399,3.097%20-3.097,3.097c-1.7,-0%20-3.099,-1.399%20-3.099,-3.097c0,-1.698%201.399,-3.097%203.099,-3.097c1.698,0%203.097,1.399%203.097,3.097'%20style='fill-rule:nonzero;'%20/%3e%3c/svg%3e") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2030%2030'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M18.584,10.453l-7.095,0.89l-0.253,1.175l1.394,0.258c0.91,0.216%201.089,0.546%200.892,1.452l-2.286,10.742c-0.602,2.778%200.325,4.086%202.502,4.086c1.689,0%203.649,-0.781%204.539,-1.851l0.272,-1.29c-0.621,0.546%20-1.524,0.762%20-2.126,0.762c-0.85,0%20-1.161,-0.597%20-0.941,-1.651l3.102,-14.573Zm0.216,-6.467c-0,1.698%20-1.399,3.097%20-3.097,3.097c-1.7,-0%20-3.099,-1.399%20-3.099,-3.097c0,-1.698%201.399,-3.097%203.099,-3.097c1.698,0%203.097,1.399%203.097,3.097'%20style='fill-rule:nonzero;'%20/%3e%3c/svg%3e") center / contain no-repeat;
}

.sidebarPanel__toggleGlyph {
    width: calc(var(--navbar) - (var(--pad-1) * 2));
    height: calc(var(--navbar) - (var(--pad-1) * 2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M3,14l10,-6l-10,-6c4.049,4%204.071,8%200,12Z'%20style='stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 18px 18px;
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M3,14l10,-6l-10,-6c4.049,4%204.071,8%200,12Z'%20style='stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 18px 18px;
    transition: transform var(--ease-shell);
}

.sidebarPanel__collapsedToggle .sidebarPanel__toggleGlyph {
    transform: rotate(180deg);
}

.sidebarPanel__main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

.sidebarPanel__scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 0;
    padding-block-end: var(--pad-2);
    scroll-padding-block-end: var(--pad-2);
    scrollbar-gutter: auto;
    overscroll-behavior: contain;
}

.sidebarPanel__scroll.is-scrollable {
    scrollbar-gutter: stable;
}

.sidebarModule,
.panel {
    display: grid;
    gap: calc(var(--gap-1) * 2);
    padding: calc(var(--pad-2) * 2);
    background: var(--c-surface-glass);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
}

.sidebarModule__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-1);
}

.sidebarModule__title,
.sidebarControlSection__title,
.panel h2 {
    margin: 0;
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: var(--title-letter-spacing);
}

.sidebarSection {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

.sidebarSection--list {
    padding: var(--pad-2);
}

.sidebarSection--controls {
    padding: 0;
    overflow: visible;
}

.sidebarListSection__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-1);
}

.sidebarPanel__scroll > .sidebarSection:not([hidden]) + .sidebarSection:not([hidden]) {
    border-top: var(--border-1) solid var(--c-border);
}

.sidebarPanel__scroll > .sidebarSection--list:not([hidden]) ~ .sidebarMediaTabPanel:not([hidden]) {
    border-top: var(--border-1) solid var(--c-border);
}

.sidebarListSection__toggle {
    min-height: var(--btn-slim-h);
    padding: 0 var(--pad-1);
    border-radius: var(--radius-3);
    font: var(--font-button);
    box-shadow: var(--shadow-1);
}

.sidebarListSection__toggle:disabled {
    opacity: var(--opacity-disabled);
    cursor: default;
}

.sidebarListSection__toggle.is-active {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

.sidebarImageList {
    flex: 0 0 auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-1);
}

.sidebarImageList.is-expanded {
    overflow-y: hidden;
}

.sidebarImageList--comparePanel {
    flex: 1 1 auto;
    align-content: flex-start;
}

.sidebarImageRow {
    --sidebar-slot-action-size: var(--media-action-size);
    --sidebar-slot-action-cluster-w: calc(var(--sidebar-slot-action-size) * 3);
    --media-list-type-icon-size: var(--sidebar-slot-action-size);
    width: 100%;
    position: relative;
}

.sidebarControlsLayout {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.sidebarMediaTabPanel[hidden] {
    display: none;
}

.sidebarControl {
    --sidebar-control-panel-bg: color-mix(in srgb, var(--c-surface-solid) 86%, transparent);
    --sidebar-control-icon-color: color-mix(in srgb, var(--c-icon) 72%, transparent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-icon) 6%, transparent);

    min-width: 0;
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    display: grid;
    align-items: center;
    gap: var(--gap-1);
    padding: var(--sidebar-control-inset);
    color: var(--c-font);
    font: var(--font-button);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: var(--c-surface-interactive);
    box-shadow: var(--shadow-1);
    transition:
        background-color var(--ease-fast),
        border-color var(--ease-fast),
        box-shadow var(--ease-fast),
        color var(--ease-fast),
        opacity var(--ease-fast);
}

.sidebarControl--button,
.sidebarControl--toggle {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.sidebarControl--placeholder {
    cursor: default;
    user-select: none;
}

.sidebarControl--withIcon {
    grid-template-columns: var(--sidebar-control-icon) minmax(0, 1fr);
    gap: var(--sidebar-control-inset);
    text-align: left;
}

.sidebarControl--textLeft {
    text-align: left;
}

.sidebarControl--textLeft .sidebarControl__text {
    justify-self: stretch;
    margin-left: calc(var(--sidebar-control-inset) * 3);
    text-align: left;
}

.sidebarControl--button.sidebarControl--withIcon:not(.sidebarControl--iconOnly) .sidebarControl__text,
.sidebarControl--toggle.sidebarControl--withIcon:not(.sidebarControl--iconOnly) .sidebarControl__text,
.sidebarControl--button.sidebarControl--loading .sidebarControl__text,
.sidebarControl--toggle.sidebarControl--loading .sidebarControl__text {
    margin-left: calc(var(--sidebar-control-inset) * 3);
}

.sidebarControl--textCenter {
    text-align: center;
}

.sidebarControl--textCenter .sidebarControl__text {
    justify-self: center;
    text-align: center;
}

.sidebarControl--iconOnly {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.sidebarControl--hover:hover {
    --sidebar-control-icon-color: var(--c-font);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-font) 9%, transparent);

    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.sidebarControl--active,
.sidebarControl--button:active,
.sidebarControl--toggle:active {
    --sidebar-control-icon-color: var(--c-accent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-accent) 12%, transparent);

    color: var(--c-font);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
    box-shadow: var(--shadow-1);
}

.sidebarControl--variant-primary {
    --sidebar-control-icon-color: var(--c-accent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-accent) 10%, transparent);

    color: var(--c-font);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-active-bg);
}

.sidebarControl--variant-secondary {
    background: color-mix(in srgb, var(--c-surface-solid) 72%, var(--c-surface-interactive));
}

.sidebarControl--variant-ghost {
    box-shadow: none;
    background: transparent;
}

.sidebarControl:focus-visible,
.sidebarControlSegment:focus-visible,
.sidebarControl__range:focus-visible,
.sidebarControl__numberInput:focus-visible {
    outline: var(--border-2) solid var(--c-focus-ring);
    outline-offset: var(--border-1);
}

.sidebarControl--alarm,
.sidebarControl--variant-alarm {
    --sidebar-control-icon-color: var(--c-alarm);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-alarm) 10%, transparent);

    color: var(--c-alarm);
    border-color: color-mix(in srgb, var(--c-alarm) 68%, var(--c-border));
    background: color-mix(in srgb, var(--c-alarm) 12%, var(--c-surface-interactive));
}

.sidebarControl__icon {
    width: calc(var(--sidebar-control-icon) - (var(--sidebar-control-inset) * 2));
    height: calc(var(--sidebar-control-icon) - (var(--sidebar-control-inset) * 2));
    display: grid;
    place-items: center;
    margin: var(--sidebar-control-inset);
    color: var(--sidebar-control-icon-color, var(--c-icon-muted));
    border-radius: var(--sidebar-control-icon-radius);
    background: var(
        --sidebar-control-icon-bg,
        color-mix(in srgb, var(--c-icon) 6%, transparent)
    );
    transition: color var(--ease-fast), background-color var(--ease-fast);
}

.sidebarControl__iconGlyph,
.sidebarControl__iconImage {
    width: calc(100% - var(--pad-1));
    height: calc(100% - var(--pad-1));
    display: block;
}

.sidebarControl__iconGlyph {
    background: currentColor;
    -webkit-mask-image: var(--sidebar-control-icon-source);
    mask-image: var(--sidebar-control-icon-source);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-mode: alpha;
}

.sidebarControl__iconImage {
    object-fit: contain;
}

.sidebarControl__text {
    min-width: 0;
    display: grid;
    gap: 1px;
    padding: 0;
}

.sidebarControl__title,
.sidebarControl__subtitle,
.sidebarControl__value,
.sidebarControl__numberInput,
.sidebarControlSegment__title,
.sidebarControlSegment {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.sidebarControl--slider {
    grid-template-columns: minmax(0, 1fr) minmax(44px, auto);
    gap: 1px;
    height: auto;
    min-height: var(--sidebar-control-height);
    padding: var(--pad-1) 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl--slider .sidebarControl__title {
    color: var(--c-font-muted);
}

.sidebarControl__value {
    min-width: 44px;
    justify-self: end;
    color: var(--c-accent);
    font: var(--font-console);
    font-family: var(--font-numeric);
    text-align: right;
}

.sidebarSlider {
    grid-column: 1 / -1;
    --slider-percent: 50%;
    --slider-track-size: var(--sidebar-control-slider-height);
    --slider-marker-width: 2px;
    --slider-hit-width: 12px;
    display: block;
    position: relative;
    height: var(--sidebar-control-slider-height);
    width: 100%;
}

.sidebarSlider__track,
.sidebarSlider__fill,
.sidebarSlider__marker {
    position: absolute;
    top: 50%;
    display: block;
    transform: translateY(-50%);
}

.sidebarSlider__track {
    inset-inline: 0;
    height: var(--slider-track-size);
    border-radius: var(--sidebar-control-slider-radius);
    background: var(--c-slider-track);
}

.sidebarSlider__fill {
    left: 0;
    width: var(--slider-percent);
    height: var(--slider-track-size);
    border-radius: var(--sidebar-control-slider-radius) 0 0 var(--sidebar-control-slider-radius);
    background: var(--c-slider-fill);
}

.sidebarSlider__marker {
    left: var(--slider-percent);
    width: var(--slider-marker-width);
    height: var(--slider-track-size);
    background: var(--c-slider-marker);
    transform: translate(-50%, -50%);
}

.sidebarControl__range {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: var(--slider-track-size);
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}

.sidebarControl__range::-webkit-slider-runnable-track {
    height: var(--slider-track-size);
    border: 0;
    background: transparent;
}

.sidebarControl__range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--slider-hit-width);
    height: var(--slider-track-size);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl__range::-moz-range-thumb {
    width: var(--slider-hit-width);
    height: var(--slider-track-size);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl__range::-moz-range-track {
    height: var(--slider-track-size);
    border: 0;
    background: transparent;
}

.sidebarSlider:focus-within .sidebarSlider__fill {
    background: var(--c-accent);
}


.sidebarControl__numberInput {
    width: 76px;
    min-height: calc(var(--sidebar-control-height) - ((var(--sidebar-control-inset) + var(--border-1)) * 2));
    padding: 0 var(--sidebar-control-inset);
    color: var(--c-font);
    font: var(--font-button);
    font-family: var(--font-numeric);
    text-align: right;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-solid) 82%, transparent);
}

.sidebarControl__numberInput:focus {
    border-color: var(--c-accent);
    outline: none;
}


.sidebarControlSegment {
    --sidebar-control-icon-color: color-mix(in srgb, var(--c-icon) 72%, transparent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-icon) 6%, transparent);

    min-height: var(--sidebar-control-segment-height);
    color: var(--c-font-muted);
    font: var(--font-button);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 82%, transparent);
    cursor: pointer;
}

.sidebarControlSegment:hover {
    --sidebar-control-icon-color: var(--c-font);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-font) 9%, transparent);

    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.sidebarControlSegment:active,
.sidebarControlSegment.sidebarControl--active,
.sidebarControlSegment.is-active {
    --sidebar-control-icon-color: var(--c-accent);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-accent) 12%, transparent);

    color: var(--c-font);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarControl--segmentedSelector {
    grid-template-columns:
        minmax(0, var(--segmented-label-weight, 1fr))
        repeat(var(--segmented-options, 3), minmax(0, 1fr));
    gap: 0;
    padding: var(--sidebar-control-inset);
}

.sidebarControl--segmentedSelectorNoLabel {
    grid-template-columns: repeat(var(--segmented-options, 3), minmax(0, 1fr));
}

.sidebarControl--segmentedSelectorSquareOptions {
    grid-template-columns:
        minmax(0, 1fr)
        repeat(var(--segmented-options, 3), var(--sidebar-control-segment-height));
}

.sidebarSegmentedSelector__label,
.sidebarSegmentedSelector__option {
    min-width: 0;
    min-height: var(--sidebar-control-segment-height);
}

.sidebarSegmentedSelector__label {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 0 var(--pad-3);
    color: var(--c-font);
    border: 0;
    background: transparent;
}

.sidebarSegmentedSelector__label .sidebarControl__title {
    color: var(--c-font);
}

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

.sidebarSegmentedSelector__label--withIcon,
.sidebarSegmentedSelector__option--withIcon {
    grid-template-columns:
        calc(var(--sidebar-control-segment-height) - (var(--pad-1) * 2))
        minmax(0, 1fr);
    gap: var(--sidebar-control-inset);
    text-align: left;
}

.sidebarSegmentedSelector__labelText,
.sidebarSegmentedSelector__optionText {
    min-width: 0;
    display: grid;
    gap: 0;
}

.sidebarSegmentedSelector__labelText {
    text-align: left;
}

.sidebarSegmentedSelector__optionText {
    text-align: center;
}

.sidebarSegmentedSelector__option {
    display: grid;
    place-items: center;
    padding: 0 var(--sidebar-control-inset);
    border: 0;
    border-left: var(--border-1) solid var(--c-border);
    border-radius: 0;
    background: transparent;
}

.sidebarControl--segmentedSelectorNoLabel .sidebarSegmentedSelector__option:first-child {
    border-left: 0;
}

.sidebarSegmentedSelector__option--withIcon {
    place-items: center stretch;
}

.sidebarSegmentedSelector__option--iconOnly {
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 0;
}

.sidebarSegmentedSelector__option--withIcon .sidebarSegmentedSelector__optionText {
    text-align: left;
}

.sidebarControl--segmentedSelector .sidebarSegmentedSelector__option:hover {
    color: var(--c-accent);
    border-left-color: var(--c-border);
    background: var(--c-control-hover-bg);
}

.sidebarControl--segmentedSelector .sidebarSegmentedSelector__option:active,
.sidebarControl--segmentedSelector .sidebarSegmentedSelector__option.sidebarControl--active,
.sidebarControl--segmentedSelector .sidebarSegmentedSelector__option.is-active {
    color: var(--c-font);
    border-left-color: var(--c-border);
    background: var(--c-control-active-bg);
}

.sidebarSegmentedSelector__icon.sidebarControl__icon {
    width: calc(var(--sidebar-control-segment-height) - (var(--pad-1) * 2));
    height: calc(var(--sidebar-control-segment-height) - (var(--pad-1) * 2));
    margin: 0;
}

.sidebarSegmentedSelector__option--iconOnly .sidebarSegmentedSelector__icon {
    width: var(--sidebar-control-segment-height);
    height: var(--sidebar-control-segment-height);
}

.sidebarSegmentedSelector__subtitle {
    min-width: 0;
    overflow: hidden;
    color: var(--c-font-muted);
    font: var(--font-console);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarSegmentedSelector__option.sidebarControl--active .sidebarSegmentedSelector__subtitle,
.sidebarSegmentedSelector__option.is-active .sidebarSegmentedSelector__subtitle {
    color: color-mix(in srgb, var(--c-accent) 72%, var(--c-font-muted));
}

.sidebarControl--buttonGroup {
    grid-template-columns: repeat(var(--items, 3), minmax(0, 1fr));
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl--buttonGroupWrapped {
    height: auto;
    grid-auto-rows: var(--sidebar-control-segment-height);
}

.sidebarControl--buttonGroup .sidebarControlSegment {
    min-width: 0;
    min-height: var(--sidebar-control-segment-height);
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--c-font-muted);
    font: var(--font-button);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 82%, transparent);
    cursor: pointer;
}

.sidebarControl--buttonGroup .sidebarControlSegment:hover {
    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.sidebarControl--buttonGroup .sidebarControlSegment:active,
.sidebarControl--buttonGroup .sidebarControlSegment.is-active {
    color: var(--c-font);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarControlSegment__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarControl--variant-danger,
.sidebarControl--danger,
.sidebarControl--buttonGroup .sidebarControlSegment.sidebarControl--variant-danger {
    --sidebar-control-icon-color: var(--c-danger);
    --sidebar-control-icon-bg: color-mix(in srgb, var(--c-danger) 10%, transparent);

    color: var(--c-danger);
    border-color: color-mix(in srgb, var(--c-danger) 58%, var(--c-border));
}

.sidebarControl--variant-danger:hover,
.sidebarControl--danger:hover,
.sidebarControl--buttonGroup .sidebarControlSegment.sidebarControl--variant-danger:hover {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface-interactive));
}

.sidebarControl--variant-danger:active,
.sidebarControl--danger:active,
.sidebarControl--buttonGroup .sidebarControlSegment.sidebarControl--variant-danger:active {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 18%, var(--c-surface-interactive));
}

.sidebarControl:disabled,
.sidebarControlSegment:disabled {
    color: var(--c-font-muted);
    filter: saturate(0.45);
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

.sidebarControl--loading {
    grid-template-columns: var(--sidebar-control-icon) minmax(0, 1fr);
    pointer-events: none;
    opacity: 0.78;
}

.sidebarControl__spinner {
    width: calc(var(--sidebar-control-icon) - 2px);
    height: calc(var(--sidebar-control-icon) - 2px);
    border: 2px solid color-mix(in srgb, var(--c-accent) 28%, transparent);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: sidebarControlSpin 800ms linear infinite;
}

@keyframes sidebarControlSpin {
    to { transform: rotate(360deg); }
}

.sidebarControlNested {
    --sidebar-control-panel-bg: var(
        --sidebar-section-content-accent,
        color-mix(in srgb, var(--c-accent) 16%, var(--c-surface-glass))
    );
    --sidebar-control-panel-background: var(
        --sidebar-section-content-background,
        linear-gradient(to bottom, var(--sidebar-control-panel-bg), var(--c-surface-glass))
    );

    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
}

.sidebarControlNested.is-open {
    row-gap: 0;
}

.sidebarAnchoredSubmenuRow {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gap-1);
    row-gap: var(--gap-1);
}

.sidebarAnchoredSubmenuRow.is-open {
    row-gap: 0;
}

.sidebarControlNested--anchoredRow {
    display: contents;
}

.sidebarControl--submenuButton[aria-expanded="true"] {
    grid-column: 1 / -1;
    color: var(--c-font);
    border-color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 24%, var(--c-surface-interactive));
}

.sidebarControlNested.is-open > .sidebarControl--submenuButton {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

.sidebarControl--submenuButton[aria-expanded="false"] {
    grid-column: 1 / -1;
}

.sidebarControlPanel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
    padding: var(--pad-2);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: var(--sidebar-control-panel-background);
    box-shadow: var(--shadow-1);
}

.sidebarGuide {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--gap-1);
    padding: var(--pad-2);
    color: var(--c-font-muted);
    border: 0;
    border-radius: var(--radius-2);
    background: var(--c-control-active-bg);
}

.sidebarGuide[hidden] {
    display: none;
}

.sidebarGuide__title {
    color: var(--c-accent);
    font: var(--font-button);
}

.sidebarGuide__content {
    min-width: 0;
    display: grid;
    gap: var(--gap-1);
    font: var(--font-console);
}

.sidebarGuide__description,
.sidebarGuide__instructions {
    margin: 0;
}

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

.sidebarColorRampLegend {
    min-width: 0;
    margin: 0;
    display: grid;
    gap: var(--gap-1);
}

.sidebarColorRampLegend__ramp {
    width: 100%;
    height: var(--btn-slim-h);
    display: block;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background-size: 100% 100%;
}

.sidebarColorRampLegend__ramp.is-clipped-before {
    border-left-color: var(--c-danger);
    box-shadow: inset 3px 0 0 var(--c-danger);
}

.sidebarColorRampLegend__ramp.is-clipped-after {
    border-right-color: var(--c-danger);
    box-shadow: inset -3px 0 0 var(--c-danger);
}

.sidebarColorRampLegend__ramp.is-clipped-before.is-clipped-after {
    box-shadow: inset 3px 0 0 var(--c-danger), inset -3px 0 0 var(--c-danger);
}

.sidebarColorRampLegend__ticks {
    height: calc(var(--btn-slim-h) * 0.6);
    position: relative;
    display: block;
}

.sidebarColorRampLegend__tick {
    width: var(--border-1);
    height: var(--pad-2);
    position: absolute;
    top: 0;
    display: block;
    background: var(--c-border);
    transform: translateX(-50%);
}

.sidebarColorRampLegend__tickLabel {
    position: absolute;
    top: var(--pad-2);
    left: 50%;
    color: var(--c-font-muted);
    font: var(--font-button);
    transform: translateX(-50%);
    white-space: nowrap;
}

.sidebarColorRampLegend__labels {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-1);
    color: var(--c-font-muted);
    font: var(--font-button);
}

.sidebarColorRampLegend__labels > :last-child {
    text-align: right;
}

.sidebarColorRampLegend__meta {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarControlPanel[hidden] {
    display: none;
}

.sidebarControlGroup {
    min-width: 0;
    display: grid;
    gap: var(--gap-1);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControlGroup + .sidebarControlGroup {
    margin-top: var(--pad-1);
    padding-top: var(--pad-2);
    border-top: var(--border-1) solid color-mix(in srgb, var(--c-border) 72%, transparent);
}

.sidebarControlNested.is-open > .sidebarControlPanel {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
}

.sidebarDropdownIcon,
.exampleFoldableSection__summary::after {
    width: var(--sidebar-control-icon);
    height: var(--sidebar-control-icon);
    display: block;
    flex: 0 0 var(--sidebar-control-icon);
    color: var(--c-icon-muted);
    background: currentColor;
    mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M22,18.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-19,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l19,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M22,11.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-19,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l19,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M22,4.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-19,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l19,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3c/svg%3e") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M22,18.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-19,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l19,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M22,11.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-19,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l19,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M22,4.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-19,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l19,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3c/svg%3e") center / contain no-repeat;
    opacity: 0.72;
    --sidebar-dropdown-icon-rotation: 0deg;
    --sidebar-dropdown-icon-scale-y: 1;
    transform: rotate(var(--sidebar-dropdown-icon-rotation)) scaleY(var(--sidebar-dropdown-icon-scale-y));
    transition: color var(--ease-fast), opacity var(--ease-fast), transform var(--ease-fast);
}

.sidebarPreviewGridSelect__trigger {
    grid-template-columns:
        var(--sidebar-control-segment-height)
        minmax(0, 1fr)
        var(--sidebar-control-icon);
    gap: var(--sidebar-control-inset);
    text-align: left;
}

.sidebarPreviewGridSelect__trigger--withoutPreview {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-control-icon);
}

.sidebarPreviewGridSelect__trigger .sidebarControl__text {
    justify-self: stretch;
    text-align: left;
}

.sidebarPreviewGridSelect__trigger:hover .sidebarDropdownIcon,
.sidebarPreviewGridSelect__trigger[aria-expanded="true"] .sidebarDropdownIcon {
    color: var(--c-accent);
    opacity: 1;
}

.sidebarPreviewGridSelect__trigger[aria-expanded="true"] .sidebarDropdownIcon {
    --sidebar-dropdown-icon-scale-y: 1.08;
}

.sidebarPreviewGridSelect__panel {
    padding: var(--pad-2);
}

.sidebarPreviewGridSelect__grid {
    grid-column: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(var(--preview-grid-columns, 4), minmax(0, 1fr));
    gap: var(--gap-1);
}

.sidebarPreviewGridSelect__groupLabel {
    grid-column: 1 / -1;
    color: var(--c-font-muted);
    font: var(--font-console);
    text-transform: uppercase;
}

.sidebarPreviewGridSelect__option {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--pad-1);
    padding: var(--pad-1);
    color: var(--c-font-muted);
    font: var(--font-console);
    border: var(--border-1) solid color-mix(in srgb, var(--c-border) 82%, transparent);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 78%, transparent);
    cursor: pointer;
    transition:
        color var(--ease-fast),
        border-color var(--ease-fast),
        background-color var(--ease-fast),
        box-shadow var(--ease-fast);
}

.sidebarPreviewGridSelect__option:hover {
    color: var(--c-font);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.sidebarPreviewGridSelect__option.is-selected {
    color: var(--c-font);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
    box-shadow: inset 0 0 0 var(--border-1) color-mix(in srgb, var(--c-accent) 34%, transparent);
}

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

.sidebarPreviewGridSelect__preview {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(circle at 45% 38%, color-mix(in srgb, var(--c-font-muted) 22%, transparent), transparent 66%),
        color-mix(in srgb, var(--c-surface-solid) 84%, transparent);
}

.sidebarPreviewGridSelect__preview--trigger {
    width: var(--sidebar-control-segment-height);
    height: var(--sidebar-control-segment-height);
}

.sidebarPreviewGridSelect__preview--option {
    width: 100%;
    aspect-ratio: 1;
}

.sidebarPreviewGridSelect__preview--option[style*="background-image"] {
    height: var(--sidebar-control-slider-height);
    aspect-ratio: auto;
    border-radius: 0;
}

.sidebarPreviewGridSelect__preview[style*="background-image"] {
    background-size: 100% 100%;
}

.sidebarPreviewGridSelect__canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.sidebarPreviewGridSelect__aspectFrame {
    width: calc(100% - (var(--pad-2) * 2));
    max-height: calc(100% - (var(--pad-2) * 2));
    aspect-ratio: var(--aspect-preview-ratio);
    border: var(--border-1) solid currentColor;
    border-radius: 0;
}

.sidebarPreviewGridSelect__aspectFrame.is-portrait {
    width: auto;
    height: calc(100% - (var(--pad-2) * 2));
}

.sidebarPreviewGridSelect__guideFrame {
    width: calc(100% - (var(--pad-2) * 2));
    max-height: calc(100% - (var(--pad-2) * 2));
    aspect-ratio: var(--aspect-preview-ratio);
    color: currentColor;
    overflow: hidden;
}

.sidebarPreviewGridSelect__guideFrame.is-portrait {
    width: auto;
    height: calc(100% - (var(--pad-2) * 2));
}

.sidebarPreviewGridSelect__preview--trigger .sidebarPreviewGridSelect__guideFrame {
    width: calc(100% - (var(--pad-3) * 2));
    max-height: calc(100% - (var(--pad-3) * 2));
}

.sidebarPreviewGridSelect__preview--trigger .sidebarPreviewGridSelect__guideFrame.is-portrait {
    width: auto;
    height: calc(100% - (var(--pad-3) * 2));
}

.sidebarPreviewGridSelect__guideFrameSvg {
    width: 100%;
    height: 100%;
    display: block;
}

.sidebarPreviewGridSelect__guideFrameSvg rect,
.sidebarPreviewGridSelect__guideFrameSvg line,
.sidebarPreviewGridSelect__guideFrameSvg circle,
.sidebarPreviewGridSelect__guideFrameSvg ellipse,
.sidebarPreviewGridSelect__guideFrameSvg path {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--border-1);
    vector-effect: non-scaling-stroke;
}

.sidebarPreviewGridSelect__optionLabel {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarControlNested--anchoredRow > .sidebarControl--submenuButton {
    min-width: 0;
}

.sidebarControlNested--anchoredRow.is-open > .sidebarControl--submenuButton {
    position: relative;
    z-index: 2;
}

.sidebarControlPanelBridge {
    min-width: 0;
    height: var(--gap-1);
    position: relative;
    z-index: 2;
    display: block;
    background: var(--sidebar-control-panel-bg);
    pointer-events: none;
}

.sidebarControlPanelBridge[hidden] {
    display: none;
}

.sidebarControlNested--anchoredRow.is-anchor-start > .sidebarControlPanelBridge {
    border-left: var(--border-1) solid var(--c-border);
}

.sidebarControlNested--anchoredRow.is-anchor-end > .sidebarControlPanelBridge {
    border-right: var(--border-1) solid var(--c-border);
}

.sidebarControlPanelBridge__corner {
    width: var(--radius-2);
    height: var(--radius-2);
    position: absolute;
    bottom: 0;
    display: block;
    overflow: visible;
}

.sidebarControlPanelBridge__corner.is-start {
    right: 100%;
}

.sidebarControlPanelBridge__corner.is-end {
    left: 100%;
}

.sidebarControlPanelBridge__cornerFill {
    fill: var(--sidebar-control-panel-bg);
}

.sidebarControlPanelBridge__cornerStroke {
    fill: none;
    stroke: var(--c-border);
    stroke-width: var(--border-1);
}

.sidebarControlNested--anchoredRow.has-panel-bridge.is-open > .sidebarControlPanel {
    position: relative;
    z-index: 1;
    margin-top: calc(0px - var(--border-1));
    border-top: var(--border-1) solid var(--c-border);
    border-top-left-radius: var(--radius-2);
    border-top-right-radius: var(--radius-2);
}

.sidebarControlNested--anchoredRow.has-panel-bridge.is-open.is-anchor-start > .sidebarControlPanel {
    border-top-left-radius: 0;
}

.sidebarControlNested--anchoredRow.has-panel-bridge.is-open.is-anchor-end > .sidebarControlPanel {
    border-top-right-radius: 0;
}

.sidebarControlGroup__header {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--gap-1);
    padding: 0 0 var(--pad-1);
}

.sidebarControlGroup__header .sidebarControl__title {
    text-transform: uppercase;
}

.sidebarControlGroup__meta {
    color: var(--c-font-muted);
    font: var(--font-console);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sidebarControlGroup__body {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
}

.sidebarControl--numberStepper {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl--numberStepper .sidebarControl__title {
    color: var(--c-font-muted);
}

.sidebarControl__stepper {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--sidebar-control-segment-height) + var(--sidebar-control-segment-height));
    gap: 0;
    overflow: hidden;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: var(--c-surface-interactive);
}

.sidebarControl__stepperValue {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-1);
    padding-left: var(--pad-2);
    border-right: var(--border-1) solid var(--c-border);
    background: var(--c-surface-interactive);
}

.sidebarControl__stepperValue--titleless {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
}

.sidebarControl__stepperActions {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebarControl__stepperActions .sidebarControl__stepButton + .sidebarControl__stepButton {
    border-left: var(--border-1) solid var(--c-border);
}

.sidebarControl__stepButton,
.sidebarControl__stepperInput {
    min-height: var(--sidebar-control-segment-height);
}

.sidebarControl__stepButton {
    min-width: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
}

.sidebarControl__stepIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: block;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.sidebarControl__stepIcon--minus {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
}

.sidebarControl__stepIcon--plus {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M8,14l0,-12'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M8,14l0,-12'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
}

.sidebarControl__stepperInput {
    width: 100%;
    min-height: var(--sidebar-control-segment-height);
    padding: 0 var(--pad-1);
    border: 0;
    border-radius: 0;
    background: transparent;
    font: var(--font-console);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: right;
    text-overflow: clip;
    appearance: textfield;
    -moz-appearance: textfield;
}

.sidebarControl__stepperInput::-webkit-outer-spin-button,
.sidebarControl__stepperInput::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.sidebarControl--rangeSlider {
    --range-low: 0%;
    --range-high: 100%;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: var(--sidebar-control-height);
    padding: var(--pad-1) 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarControl--rangeSlider .sidebarControl__title {
    color: var(--c-font-muted);
}

.sidebarRangeSlider {
    --range-track-size: var(--sidebar-control-slider-height);
    --range-marker-width: 2px;
    --range-marker-height: var(--sidebar-control-slider-height);
    --range-hit-width: 12px;
    min-width: 0;
    height: var(--range-track-size);
    position: relative;
}

.sidebarRangeSlider__track,
.sidebarRangeSlider__selection,
.sidebarRangeSlider__thumb {
    position: absolute;
    top: 50%;
    display: block;
    transform: translateY(-50%);
}

.sidebarRangeSlider__track {
    left: 0;
    right: 0;
    height: var(--range-track-size);
    border-radius: var(--sidebar-control-slider-radius);
    background: var(--c-slider-track);
}

.sidebarRangeSlider__selection {
    left: var(--range-low);
    right: calc(100% - var(--range-high));
    height: var(--range-track-size);
    border-radius: var(--sidebar-control-slider-radius);
    background: var(--c-slider-fill);
}

.sidebarRangeSlider__thumb {
    width: var(--range-marker-width);
    height: var(--range-marker-height);
    border: 0;
    border-radius: 0;
    background: var(--c-slider-marker);
    box-shadow: none;
}

.sidebarRangeSlider__thumb--low {
    left: var(--range-low);
    transform: translate(-50%, -50%);
}

.sidebarRangeSlider__thumb--high {
    left: var(--range-high);
    transform: translate(-50%, -50%);
}

.sidebarRangeSlider__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--range-track-size);
    margin: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    touch-action: pan-y;
}

.sidebarRangeSlider__input::-webkit-slider-runnable-track {
    height: var(--range-track-size);
    border: 0;
    background: transparent;
}

.sidebarRangeSlider__input::-moz-range-track {
    height: var(--range-track-size);
    border: 0;
    background: transparent;
}

.sidebarRangeSlider__input::-webkit-slider-thumb {
    width: var(--range-hit-width);
    height: var(--range-track-size);
    margin-top: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    cursor: grab;
}

.sidebarRangeSlider__input::-moz-range-thumb {
    width: var(--range-hit-width);
    height: var(--range-track-size);
    border: 0;
    background: transparent;
    pointer-events: auto;
    cursor: grab;
}

.sidebarRangeSlider__input--low {
    z-index: 2;
}

.sidebarRangeSlider__input--high {
    z-index: 3;
}

.sidebarControl--rangeSlider:focus-within .sidebarRangeSlider__selection {
    background: var(--c-accent);
}

.exampleFoldableSection {
    grid-column: 1 / -1;
    overflow: hidden;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 72%, transparent);
}

.exampleFoldableSection__summary {
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-control-icon);
    align-items: center;
    gap: var(--gap-1);
    padding: var(--sidebar-control-inset);
    color: var(--c-font);
    font: var(--font-button);
    cursor: pointer;
    list-style: none;
}

.exampleFoldableSection__summary::-webkit-details-marker {
    display: none;
}

.exampleFoldableSection__summary::after {
    content: "";
}

.exampleFoldableSection__summary:hover::after {
    color: var(--c-accent);
    opacity: 1;
}

.exampleFoldableSection[open] .exampleFoldableSection__summary::after {
    opacity: 1;
    color: var(--c-accent);
    --sidebar-dropdown-icon-scale-y: 1.08;
}

.exampleFoldableSection__body {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
    padding: 0 var(--sidebar-control-inset) var(--sidebar-control-inset);
}

.sidebarPicker {
    --picker-row-h: var(--sidebar-control-height);
    --picker-icon-size: var(--sidebar-control-icon);
    --picker-gap: var(--picker-row-h);
    min-width: 0;
    height: var(--picker-row-h);
    min-height: var(--picker-row-h);
    position: relative;
    outline: none;
    isolation: isolate;
    z-index: 1;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sidebarPicker[data-open="true"] {
    z-index: var(--z-modal);
}

.sidebarPicker--span2 {
    grid-column: span 2;
}

.sidebarPicker--span3 {
    grid-column: span 3;
}

.sidebarPicker--span4 {
    grid-column: span 4;
}

.sidebarPicker--span5 {
    grid-column: span 5;
}

.sidebarPicker--span6 {
    grid-column: span 6;
}

.sidebarPicker--span8 {
    grid-column: 1 / -1;
}

.sidebarPicker:focus-visible .sidebarPicker__option.is-selected {
    outline: var(--border-2) solid var(--c-focus-ring);
    outline-offset: var(--border-1);
}

.sidebarPicker__hintRing {
    position: absolute;
    inset: calc(var(--gap-1) * -1);
    border: var(--border-1) solid transparent;
    border-radius: var(--radius-3);
    pointer-events: none;
    transition: border-color var(--ease-fast);
    z-index: -1;
}

.sidebarPicker[data-open="true"] .sidebarPicker__hintRing {
    border-color: color-mix(in srgb, var(--c-accent) 24%, transparent);
}

.sidebarPicker__option {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    height: var(--picker-row-h);
    display: grid;
    grid-template-columns: var(--picker-icon-size) minmax(0, 1fr) var(--picker-icon-size);
    align-items: center;
    gap: var(--sidebar-control-inset);
    padding: var(--sidebar-control-inset);
    color: var(--c-font);
    font: var(--font-button);
    text-align: left;
    border: var(--border-1) solid var(--c-border);
    border-radius: 0;
    background: var(--c-surface-interactive);
    background-image: none;
    box-shadow: var(--shadow-1);
    transition:
        background-color var(--ease-fast),
        border-color var(--ease-fast),
        box-shadow var(--ease-fast),
        color var(--ease-fast),
        opacity var(--ease-fast);
    cursor: pointer;
    user-select: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(var(--offset) * var(--picker-gap)));
    transition:
        transform var(--ease-fast),
        opacity var(--ease-fast),
        color var(--ease-fast),
        border-color var(--ease-fast),
        background-color var(--ease-fast),
        box-shadow var(--ease-fast),
        filter var(--ease-fast);
    z-index: calc(var(--z-modal) + 1);
}

.sidebarPicker--withoutIcons .sidebarPicker__option {
    grid-template-columns: minmax(0, 1fr) var(--picker-icon-size);
}

.sidebarPicker[data-open="true"] .sidebarPicker__option {
    opacity: 1;
    pointer-events: auto;
}

.sidebarPicker[data-open="false"] .sidebarPicker__option.is-selected {
    opacity: 1;
    pointer-events: auto;
    border-radius: var(--radius-2);
    transform: translateY(0);
}

.sidebarPicker[data-open="true"] .sidebarPicker__option.is-firstVisible {
    border-top-left-radius: var(--radius-2);
    border-top-right-radius: var(--radius-2);
}

.sidebarPicker[data-open="true"] .sidebarPicker__option:not(.is-firstVisible) {
    border-top-width: 0;
}

.sidebarPicker[data-open="true"] .sidebarPicker__option.is-lastVisible {
    border-bottom-left-radius: var(--radius-2);
    border-bottom-right-radius: var(--radius-2);
}

/* Controls nested inside submenu panels use the compact component radius. */
.sidebarControlPanel .sidebarControl,
.sidebarControlPanel .sidebarControl--buttonGroup .sidebarControlSegment,
.sidebarControlPanel .sidebarControl__stepper,
.sidebarControlPanel .sidebarPreviewGridSelect__option,
.sidebarControlPanel .sidebarPicker[data-open="false"] .sidebarPicker__option.is-selected {
    border-radius: var(--radius-3);
}

.sidebarControlPanel .sidebarPicker[data-open="true"] .sidebarPicker__option.is-firstVisible {
    border-top-left-radius: var(--radius-3);
    border-top-right-radius: var(--radius-3);
}

.sidebarControlPanel .sidebarPicker[data-open="true"] .sidebarPicker__option.is-lastVisible {
    border-bottom-left-radius: var(--radius-3);
    border-bottom-right-radius: var(--radius-3);
}

.sidebarPicker__option.is-selected {
    opacity: 1;
    filter: none;
    z-index: var(--z-modal);
}

.sidebarPicker__option.is-selected.sidebarControl--active {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
    background-image: none;
}

.sidebarPicker[data-open="true"] .sidebarPicker__option:hover {
    opacity: 1;
    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg-solid);
    transform: translateY(calc(var(--offset) * var(--picker-gap)));
}

.sidebarPicker[data-open="true"] .sidebarPicker__option {
    background: var(--c-surface-solid);
}

.sidebarPicker[data-open="true"] .sidebarPicker__option.is-selected.sidebarControl--active {
    background: var(--c-control-active-bg-solid);
}

.sidebarPicker__icon {
    width: auto;
    height: auto;
    max-width: calc(100% - (var(--sidebar-control-inset) * 2));
    max-height: calc(100% - (var(--sidebar-control-inset) * 2));
    display: block;
    margin: var(--sidebar-control-inset);
    border-radius: var(--sidebar-control-icon-radius);
    object-fit: contain;
    opacity: 1;
}

.sidebarPicker__icon--glyph {
    display: grid;
    place-items: center;
    background: var(
        --sidebar-control-icon-bg,
        color-mix(in srgb, var(--c-icon) 6%, transparent)
    );
}

.sidebarPicker__icon--glyph::before {
    width: calc(100% - var(--pad-1));
    height: calc(100% - var(--pad-1));
    content: "";
    background: currentColor;
    -webkit-mask: var(--sidebar-picker-icon-source) center / contain no-repeat;
    mask: var(--sidebar-picker-icon-source) center / contain no-repeat;
}

span.sidebarPicker__icon {
    width: calc(var(--picker-icon-size) - (var(--sidebar-control-inset) * 2));
    height: calc(var(--picker-icon-size) - (var(--sidebar-control-inset) * 2));
    margin: var(--sidebar-control-inset);
}

.sidebarPicker__name {
    min-width: 0;
    margin-left: calc(var(--sidebar-control-inset) * 3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarPicker__text {
    justify-self: stretch;
    margin-left: calc(var(--sidebar-control-inset) * 3);
    text-align: left;
}

.sidebarPicker__dropdownIcon {
    justify-self: end;
}

.sidebarPicker__option:hover .sidebarDropdownIcon,
.sidebarPicker[data-open="true"] .sidebarDropdownIcon {
    color: var(--c-accent);
    opacity: 1;
}

.sidebarPicker[data-open="true"] .sidebarDropdownIcon {
    --sidebar-dropdown-icon-scale-y: 1.08;
}

@media (prefers-reduced-motion: reduce) {
    .sidebarControl__spinner,
    .sidebarPicker__hintRing,
    .sidebarPicker__option,
    .sidebarDropdownIcon,
    .exampleFoldableSection__summary::after {
        animation: none;
        transition: none;
    }
}

.sidebarActionGrid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
    align-items: stretch;
}

.sidebarControlSection,
.sidebarSection.sidebarControlSection {
    --sidebar-section-color: var(--c-accent);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cg%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%3e%3cpath%20d='M1%203h14M1%208h14M1%2013h14'/%3e%3ccircle%20cx='5'%20cy='3'%20r='1.75'%20fill='%23000'/%3e%3ccircle%20cx='11'%20cy='8'%20r='1.75'%20fill='%23000'/%3e%3ccircle%20cx='7'%20cy='13'%20r='1.75'%20fill='%23000'/%3e%3c/g%3e%3c/svg%3e");

    display: grid;
    gap: 0;
    overflow: visible;
    border-top: var(--border-1) solid color-mix(in srgb, var(--c-border) 82%, transparent);
    background: color-mix(in srgb, var(--c-surface-glass) 82%, transparent);
}

.sidebarControlSection[data-section-id="file"] {
    --sidebar-section-color: var(--c-section-file);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpath%20d='M1.25%204.25c0-1.1.9-2%202-2h3l1.5%201.75h5c1.1%200%202%20.9%202%202v6.5c0%20.7-.55%201.25-1.25%201.25h-11c-.7%200-1.25-.55-1.25-1.25V4.25Z'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linejoin='round'/%3e%3cpath%20d='M2%206h12'%20fill='none'%20stroke='%23000'%20stroke-width='1.75'%20stroke-linecap='round'/%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="media-list"] {
    --sidebar-section-color: var(--c-section-media-list);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cg%20fill='%23000'%3e%3crect%20x='1'%20y='2'%20width='3'%20height='3'%20rx='0.75'/%3e%3crect%20x='1'%20y='6.5'%20width='3'%20height='3'%20rx='0.75'/%3e%3crect%20x='1'%20y='11'%20width='3'%20height='3'%20rx='0.75'/%3e%3crect%20x='5.5'%20y='2.5'%20width='9.5'%20height='2'%20rx='1'/%3e%3crect%20x='5.5'%20y='7'%20width='9.5'%20height='2'%20rx='1'/%3e%3crect%20x='5.5'%20y='11.5'%20width='9.5'%20height='2'%20rx='1'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="filter"] {
    --sidebar-section-color: var(--c-section-filter);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpath%20d='M1%202h14L9.75%208v4.25L6.25%2014V8L1%202Z'%20fill='%23000'/%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="analytics"] {
    --sidebar-section-color: var(--c-section-analytics);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpath%20d='M1%2014.5h14'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'/%3e%3crect%20x='2'%20y='9'%20width='3'%20height='4.25'%20rx='0.75'%20fill='%23000'/%3e%3crect%20x='6.5'%20y='5.5'%20width='3'%20height='7.75'%20rx='0.75'%20fill='%23000'/%3e%3crect%20x='11'%20y='2'%20width='3'%20height='11.25'%20rx='0.75'%20fill='%23000'/%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="controls"] {
    --sidebar-section-color: var(--c-section-controls);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cg%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%3e%3cpath%20d='M1%203h14M1%208h14M1%2013h14'/%3e%3ccircle%20cx='5'%20cy='3'%20r='1.75'%20fill='%23000'/%3e%3ccircle%20cx='11'%20cy='8'%20r='1.75'%20fill='%23000'/%3e%3ccircle%20cx='7'%20cy='13'%20r='1.75'%20fill='%23000'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="difference"] {
    --sidebar-section-color: var(--c-section-controls);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cg%20fill='none'%20stroke='%23000'%20stroke-width='2.25'%20stroke-linecap='round'%3e%3cpath%20d='M2%206h12M2%2010h12M11.1%202.1%204.9%2013.9'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="view"] {
    --sidebar-section-color: var(--c-section-view);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpath%20d='M1%208s2.5-4.25%207-4.25S15%208%2015%208s-2.5%204.25-7%204.25S1%208%201%208Z'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linejoin='round'/%3e%3ccircle%20cx='8'%20cy='8'%20r='2.25'%20fill='%23000'/%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="3d-camera"] {
    --sidebar-section-color: var(--c-section-3d-camera);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpath%20d='M2.25%204.5h2L5.5%202.75h5l1.25%201.75h2c.7%200%201.25.55%201.25%201.25v6.5c0%20.7-.55%201.25-1.25%201.25H2.25C1.55%2013.5%201%2012.95%201%2012.25v-6.5c0-.7.55-1.25%201.25-1.25Z'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linejoin='round'/%3e%3ccircle%20cx='8'%20cy='9'%20r='3'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3e%3ccircle%20cx='8'%20cy='9'%20r='1'%20fill='%23000'/%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="3d-camera"] [data-control-id="3d-view-presets"] {
    grid-column: 1 / span 4;
}

.sidebarControlSection[data-section-id="3d-camera"] [data-control-id="3d-frame-all"],
.sidebarControlSection[data-section-id="3d-camera"] [data-control-id="3d-reset-camera"] {
    grid-column: 5 / span 4;
}

.sidebarControlSection[data-section-id="lighting"] {
    --sidebar-section-color: var(--c-section-lighting);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3ccircle%20cx='8'%20cy='8'%20r='3'%20fill='%23000'/%3e%3cg%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%3e%3cpath%20d='M8%201v1.5M8%2013.5V15M1%208h1.5M13.5%208H15M3.05%203.05l1.1%201.1M11.85%2011.85l1.1%201.1M12.95%203.05l-1.1%201.1M4.15%2011.85l-1.1%201.1'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="shading"] {
    --sidebar-section-color: var(--c-section-shading);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3ccircle%20cx='8'%20cy='8'%20r='6.25'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3e%3cpath%20d='M8%201.75a6.25%206.25%200%200%200%200%2012.5V1.75Z'%20fill='%23000'/%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="3d-mesh"] {
    --sidebar-section-color: var(--c-section-3d-mesh);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20d='m8%201%206%203.5v7L8%2015l-6-3.5v-7L8%201Z'/%3e%3cpath%20d='m2%204.5%206%203.5%206-3.5M8%208v7M8%201v7'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarControlSection[data-section-id="3d-splat"] {
    --sidebar-section-color: var(--c-section-3d-splat);
    --sidebar-section-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cg%20fill='none'%20stroke='%23000'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20d='m8%201%206%203.5v7L8%2015l-6-3.5v-7L8%201Z'/%3e%3cpath%20d='m2%204.5%206%203.5%206-3.5M8%208v7M8%201v7'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarControlsLayout > .sidebarControlSection:first-child {
    border-top: 0;
}

.sidebarControlSection__summary {
    min-height: var(--sidebar-section-header-height);
    display: grid;
    grid-template-columns: var(--sidebar-section-icon-size) minmax(0, 1fr) var(--sidebar-section-icon-size);
    align-items: center;
    gap: var(--gap-1);
    padding: 0 var(--pad-2);
    color: var(--c-font-muted);
    background: transparent;
    border-bottom: var(--border-1) solid transparent;
    cursor: pointer;
    list-style: none;
    transition:
        color var(--ease-fast),
        background-color var(--ease-fast),
        border-color var(--ease-fast);
}

.sidebarControlSection__summary::-webkit-details-marker {
    display: none;
}

.sidebarControlSection__summary:hover {
    color: var(--c-font);
    background: color-mix(in srgb, var(--sidebar-section-color) 7%, transparent);
}

.sidebarControlSection__summary:focus-visible {
    outline: var(--border-2) solid color-mix(in srgb, var(--sidebar-section-color) 82%, var(--c-font));
    outline-offset: calc(0px - var(--border-2));
}

.sidebarControlSection[open] > .sidebarControlSection__summary {
    color: var(--c-font);
    border-bottom-color: color-mix(in srgb, var(--sidebar-section-color) 28%, var(--c-border));
    background: linear-gradient(
        90deg,
        var(--c-surface-glass),
        color-mix(in srgb, var(--sidebar-section-color) 32%, var(--c-surface-glass))
    );
}

.sidebarControlSection__icon {
    width: calc(var(--sidebar-section-icon-size) - 2px);
    height: calc(var(--sidebar-section-icon-size) - 2px);
    justify-self: center;
    background: var(--sidebar-section-color);
    -webkit-mask-image: var(--sidebar-section-icon);
    mask-image: var(--sidebar-section-icon);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-mode: alpha;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sidebar-section-color) 18%, transparent));
    opacity: 0.72;
    transition: opacity var(--ease-fast), filter var(--ease-fast);
}

.sidebarControlSection__title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    margin: 0;
    overflow: hidden;
    color: currentColor;
    font: var(--font-button);
    text-transform: uppercase;
    letter-spacing: var(--title-letter-spacing);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarControlSection__title::after {
    content: "";
    min-width: 12px;
    flex: 1;
    height: var(--border-1);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--sidebar-section-color) 32%, var(--c-border)),
        color-mix(in srgb, var(--c-border) 42%, transparent)
    );
    opacity: 0.72;
}

.sidebarControlSection__state {
    width: var(--sidebar-section-icon-size);
    height: var(--sidebar-section-icon-size);
    justify-self: end;
    display: block;
    background: currentColor;
    mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M8,14l0,-12'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M8,14l0,-12'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e") center / contain no-repeat;
    opacity: 0.7;
}

.sidebarControlSection[open] .sidebarControlSection__icon,
.sidebarControlSection__summary:hover .sidebarControlSection__icon {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sidebar-section-color) 34%, transparent));
    opacity: 1;
}

.sidebarControlSection[open] .sidebarControlSection__state {
    color: var(--sidebar-section-color);
    opacity: 0.9;
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M2,8l12,0'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3c/svg%3e");
}

.sidebarSection.sidebarControlSection,
.sidebarSection--list.sidebarControlSection {
    padding: 0;
}

.sidebarControlSection__body {
    --sidebar-section-content-accent: color-mix(
        in srgb,
        var(--sidebar-section-color) 16%,
        var(--c-surface-glass)
    );
    --sidebar-section-content-background: linear-gradient(
        to bottom,
        var(--sidebar-section-content-accent),
        var(--c-surface-glass)
    );
    --c-accent: var(--sidebar-section-color);
    --c-slider-fill: color-mix(in srgb, var(--sidebar-section-color) 72%, var(--c-font-muted));
    --c-control-hover-bg: color-mix(in srgb, var(--sidebar-section-color) 8%, var(--c-surface-interactive));
    --c-control-active-bg: color-mix(in srgb, var(--sidebar-section-color) 12%, var(--c-surface-interactive));
    --c-control-hover-bg-solid: color-mix(in srgb, var(--sidebar-section-color) 8%, var(--c-surface-solid));
    --c-control-active-bg-solid: color-mix(in srgb, var(--sidebar-section-color) 12%, var(--c-surface-solid));
    --c-control-hover-border: color-mix(in srgb, var(--sidebar-section-color) 72%, var(--c-border));
    --c-focus-ring: color-mix(in srgb, var(--sidebar-section-color) 82%, var(--c-font));

    padding: var(--pad-2);
    background: var(--sidebar-section-content-background);
}

.sidebarActionGrid__button {
    min-width: 0;
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-1);
    padding: 0 var(--pad-1);
    overflow: hidden;
    background: var(--c-surface-interactive);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    color: var(--c-font);
    font: var(--font-button);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    isolation: isolate;
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast),
        border-color var(--ease-fast);
}

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

.sidebarActionGrid__button--placeholder {
    cursor: default;
    user-select: none;
}

.sidebarActionGrid__button:not(.sidebarActionGrid__button--placeholder):hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-hover-bg);
}

.sidebarActionGrid__button.is-active {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarActionGrid__item {
    min-width: 0;
}

.sidebarActionGrid__item--span1 {
    grid-column: span 1;
}

.sidebarActionGrid__item--span2 {
    grid-column: span 2;
}

.sidebarActionGrid__item--span3 {
    grid-column: span 3;
}

.sidebarActionGrid__item--span4 {
    grid-column: span 4;
}

.sidebarActionGrid__item--span5 {
    grid-column: span 5;
}

.sidebarActionGrid__item--span6 {
    grid-column: span 6;
}

.sidebarActionGrid__item--span7 {
    grid-column: span 7;
}

.sidebarActionGrid__item--span8 {
    grid-column: 1 / -1;
}

.sidebarActionGrid__button--iconOnly {
    padding: 0;
}

.sidebarActionGrid__button--withIcon {
    justify-content: flex-start;
}

.sidebarActionGrid__icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    display: inline-block;
    flex: 0 0 var(--icon-size-md);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sidebarActionGrid__icon--cursor {
    background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2064%2064'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cpath%20d='M4,4l0,37.5l8.4,-8.2l7.5,18.6l6.2,-2.5l-7.4,-18.6l11.8,0l-26.5,-26.8Z'%20style='fill-rule:nonzero;'/%3e%3cpath%20d='M34,39l24,0'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:4px;'/%3e%3cpath%20d='M34,47l19,0'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:4px;'/%3e%3cpath%20d='M34,55l17,0'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:4px;'/%3e%3c/svg%3e");
}

.sidebarActionGrid__icon--greyscale {
    background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3e%3cg%3e%3cpath%20d='M22,3.2l0,17.609c0,0.662%20-0.538,1.2%20-1.2,1.2l-17.6,0c-0.662,0%20-1.2,-0.538%20-1.2,-1.2l0,-17.609c0,-0.662%200.538,-1.2%201.2,-1.2l17.6,0c0.662,0%201.2,0.538%201.2,1.2Z'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M10.994,21.003l0,-17.995l2.011,-0.011l0.001,18.006l-2.012,0Z'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M10.989,8.018l-7.99,0l-0.005,-2.011l7.995,-0.001l0,2.012Z'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M10.989,13.006l-7.99,0l-0.005,-2.011l7.995,-0.001l0,2.012Z'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M10.994,18.006l-7.99,0l-0.005,-2.011l7.995,-0.001l0,2.012Z'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarActionGrid__icon--pixelated {
    background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M11,1.045l0,21.91c-5.603,-0.506%20-10,-5.221%20-10,-10.955c0,-5.734%204.397,-10.449%2010,-10.955Z'/%3e%3crect%20x='13'%20y='1'%20width='3'%20height='22'/%3e%3crect%20x='15'%20y='4'%20width='4'%20height='16'/%3e%3crect%20x='18'%20y='8'%20width='4'%20height='8'/%3e%3c/svg%3e");
}

.sidebarActionGrid__icon--reset {
    background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2032%2032'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3e%3cpath%20d='M28.289,2.584l-1.098,6.839l-7.132,-0.389'%20style='fill:none;stroke:%23000;stroke-width:3px;'/%3e%3cpath%20d='M28.806,18.203c-1.04,6.126%20-6.379,10.797%20-12.799,10.797c-7.166,0%20-12.983,-5.817%20-12.983,-12.983c0,-7.165%205.817,-12.983%2012.983,-12.983c4.759,0%208.923,2.566%2011.184,6.389'%20style='fill:none;stroke:%23000;stroke-width:3px;'/%3e%3c/svg%3e");
}

.sidebarActionGrid__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarActionGrid__button--slider {
    justify-content: space-between;
}

.sidebarExampleDropdown {
    min-width: 0;
    position: relative;
    z-index: 3;
}

.sidebarExampleDropdown[open] {
    z-index: 5;
}

.sidebarExampleDropdown__trigger {
    min-width: 0;
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sidebar-control-inset);
    padding: var(--sidebar-control-inset);
    background: var(--c-surface-interactive);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    color: var(--c-font);
    font: var(--font-button);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    list-style: none;
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast),
        border-color var(--ease-fast);
}

.sidebarExampleDropdown__trigger::-webkit-details-marker {
    display: none;
}

.sidebarExampleDropdown__trigger:hover,
.sidebarExampleDropdown[open] > .sidebarExampleDropdown__trigger {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

.sidebarExampleDropdown.is-active > .sidebarExampleDropdown__trigger {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarExampleDropdown__text {
    min-width: 0;
    display: grid;
    gap: 1px;
    margin-left: calc(var(--sidebar-control-inset) * 3);
}

.sidebarExampleDropdown__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarExampleDropdown__arrow {
    flex-basis: var(--sidebar-control-icon);
}

.sidebarExampleDropdown__trigger:hover .sidebarDropdownIcon,
.sidebarExampleDropdown[open] > .sidebarExampleDropdown__trigger .sidebarDropdownIcon {
    color: var(--c-accent);
    opacity: 1;
}

.sidebarExampleDropdown[open] > .sidebarExampleDropdown__trigger .sidebarDropdownIcon {
    --sidebar-dropdown-icon-scale-y: 1.08;
}

.sidebarExampleDropdown__menu {
    position: absolute;
    top: calc(100% + var(--gap-1));
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    overflow: hidden;
    background: var(--c-surface-solid);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
}

.sidebarExampleDropdown__item {
    width: 100%;
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sidebar-control-inset);
    padding: var(--sidebar-control-inset);
    background: var(--c-surface-interactive);
    border-radius: 0;
    color: var(--c-font);
    font: var(--font-button);
    text-align: left;
    cursor: pointer;
}

.sidebarExampleDropdown__itemText {
    margin-left: calc(var(--sidebar-control-inset) * 3);
}

.sidebarExampleDropdown__item + .sidebarExampleDropdown__item {
    border-top: var(--border-1) solid var(--c-border);
}

.sidebarExampleDropdown__item:hover {
    color: var(--c-accent);
    background: var(--c-control-hover-bg);
}

.sidebarExampleDropdown__item.is-selected {
    color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarActionGrid__slider {
    min-width: 72px;
    flex: 0 0 72px;
    position: relative;
    height: 14px;
    display: inline-flex;
    align-items: center;
}

.sidebarActionGrid__sliderTrack,
.sidebarActionGrid__sliderThumb {
    position: absolute;
    display: block;
}

.sidebarActionGrid__sliderTrack {
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-font-muted) 60%, transparent);
}

.sidebarActionGrid__sliderThumb {
    top: 50%;
    left: calc(60% - 6px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c-font);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-font) 15%, transparent);
    transform: translateY(-50%);
}

.sidebarMediaListSection__body {
    display: grid;
    gap: var(--gap-1);
}

.sidebarListSection__toggle[hidden] {
    display: none;
}

.sidebarCursorInfo {
    display: contents;
    min-width: 0;
    color: var(--c-font);
    font: var(--font-button);
}

.sidebarCursorInfo__summary,
.sidebarCursorInfo__details {
    grid-column: 1 / -1;
    display: grid;
    min-width: 0;
}

.sidebarCursorInfo__summary {
    order: 1;
}

.sidebarCursorInfo__details {
    order: 3;
    gap: var(--gap-1);
}

.sidebarCursorInfo__details[hidden] {
    display: none;
}

.sidebarControl[data-control-id="cursor-neighborhood-size"],
.sidebarControl[data-control-id="cursor-additional-information"] {
    order: 2;
}

.sidebarCursorInfo__empty {
    margin: 0;
    color: var(--c-font-muted);
}

.sidebarCursorInfo__content,
.sidebarCursorInfo__header,
.sidebarCursorInfo__analysis {
    display: grid;
    gap: var(--gap-1);
    min-width: 0;
}

.sidebarCursorInfo__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
}

.sidebarCursorInfo__header strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarCursorInfo__header span,
.sidebarCursorInfo__values dt,
.sidebarCursorInfo__analysisRow span {
    color: var(--c-font-muted);
}

.sidebarCursorInfo__values {
    display: grid;
    gap: 2px;
    margin: 0;
}

.sidebarCursorInfo__values > div {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    gap: var(--gap-1);
}

.sidebarCursorInfo__values > div[hidden] {
    display: none;
}

.sidebarCursorInfo__values dt,
.sidebarCursorInfo__values dd {
    margin: 0;
}

.sidebarCursorInfo__neighborhood {
    padding-top: var(--pad-1);
    border-top: var(--border-1) solid var(--c-border);
}

.sidebarCursorInfo__additional {
    margin-top: var(--pad-1);
    padding-top: var(--pad-1);
    border-top: var(--border-1) solid var(--c-border);
}

.sidebarCursorInfo__values dd {
    text-align: right;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.sidebarCursorInfo__analysis {
    padding-bottom: var(--pad-1);
    border-bottom: var(--border-1) solid var(--c-border);
}

.sidebarCursorInfo__analysisRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--gap-1);
    min-width: 0;
}

.cursorInfoFloat {
    position: absolute;
    top: 0;
    left: 0;
    z-index: calc(var(--z-overlay) + 2);
    display: grid;
    gap: 2px;
    max-width: min(380px, calc(100% - (var(--pad-2) * 2)));
    padding: var(--pad-2);
    border: var(--border-1) solid var(--c-section-analytics);
    border-radius: var(--radius-3);
    background: var(--c-surface-interactive);
    backdrop-filter: var(--filter-blur-ui);
    -webkit-backdrop-filter: var(--filter-blur-ui);
    box-shadow: var(--shadow-2);
    color: var(--c-font);
    font: var(--font-button);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
}

.cursorInfoFloat[hidden] {
    display: none;
}

.cursorInfoFloat__value {
    min-width: 0;
    color: var(--c-font-muted);
    text-align: right;
    overflow-wrap: anywhere;
}

.cursorInfoFloat__group {
    display: grid;
    gap: 2px;
}

.cursorInfoFloat__group[hidden] {
    display: none;
}

.cursorInfoFloat__row {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) minmax(0, auto);
    gap: var(--gap-2);
    min-width: 0;
}

.cursorInfoFloat__label {
    color: var(--c-font-muted);
    font: var(--font-button);
    white-space: nowrap;
}

.cursorInfoFloat__coordinate .cursorInfoFloat__label,
.cursorInfoFloat__coordinate .cursorInfoFloat__value {
    color: var(--c-font);
    font-weight: 700;
}

.cursorPixelMarker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: calc(var(--z-overlay) + 3);
    min-width: 7px;
    min-height: 7px;
    border: var(--border-1) solid var(--c-section-analytics);
    pointer-events: none;
    transform-origin: center;
}

.cursorOverlayClip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: calc(var(--z-overlay) + 2);
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.cursorPixelFootprint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.cursorPixelFootprint polygon {
    fill: color-mix(in srgb, var(--c-section-analytics) 14%, transparent);
    stroke: var(--c-section-analytics);
    stroke-width: 1;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

.cursorPixelFootprint[hidden] {
    display: none;
}

.cursorCrosshairLine {
    position: absolute;
    top: 0;
    left: 0;
    z-index: calc(var(--z-overlay) + 2);
    background: var(--c-section-analytics);
    pointer-events: none;
}

.cursorPixelMarker[hidden],
.cursorCrosshairLine[hidden],
.cursorInfoFloat[hidden],
.cursorOverlayClip[hidden] {
    display: none;
}

.is-cursor-info-hovering .comparePanel {
    cursor: none;
}

@media (max-width: 640px) {
    .cursorCrosshairLine {
        display: none;
    }
}

.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%;
    }
}

.contactFeedbackDialog {
    --contact-feedback-close-size: var(--media-action-size);
    --contact-feedback-close-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cpath%20d='M2,2l12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2.4px;'/%3e%3cpath%20d='M14,2l-12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2px;'/%3e%3c/svg%3e");

    width: min(100% - (var(--pad-2) * 4), 520px);
    max-height: calc(100dvh - (var(--pad-2) * 4));
    padding: 0;
    color: var(--c-font);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-1);
    background: var(--c-surface-glass);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.contactFeedbackDialog::backdrop {
    background: color-mix(in srgb, var(--c-bg) 72%, transparent);
}

.contactFeedbackDialog__panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: inherit;
    background: var(--c-surface-glass);
    backdrop-filter: var(--filter-blur-ui);
    -webkit-backdrop-filter: var(--filter-blur-ui);
}

.contactFeedbackDialog__header,
.contactFeedbackDialog__footer {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    padding: var(--pad-2);
}

.contactFeedbackDialog__header {
    border-bottom: var(--border-1) solid var(--c-border);
}

.contactFeedbackDialog__titleGroup {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.contactFeedbackDialog__eyebrow,
.contactFeedbackDialog__title,
.contactFeedbackDialog__label,
.contactFeedbackDialog__sectionTitle,
.contactFeedbackDialog__hint {
    margin: 0;
}

.contactFeedbackDialog__eyebrow,
.contactFeedbackDialog__hint {
    font: var(--font-console);
}

.contactFeedbackDialog__label,
.contactFeedbackDialog__sectionTitle {
    font: var(--font-button);
}

.contactFeedbackDialog__eyebrow {
    color: var(--c-accent);
    letter-spacing: var(--title-letter-spacing);
    text-transform: uppercase;
}

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

.contactFeedbackDialog__close {
    width: var(--contact-feedback-close-size);
    height: var(--contact-feedback-close-size);
    margin-left: auto;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-font-muted);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-3);
    background: var(--c-surface-interactive);
    cursor: pointer;
    transition: color var(--ease-fast), border-color var(--ease-fast), background-color var(--ease-fast);
}

.contactFeedbackDialog__closeIcon {
    width: calc(var(--contact-feedback-close-size) * 0.62);
    height: calc(var(--contact-feedback-close-size) * 0.62);
    background: currentColor;
    mask: var(--contact-feedback-close-icon) center / contain no-repeat;
    -webkit-mask: var(--contact-feedback-close-icon) center / contain no-repeat;
}

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

.contactFeedbackDialog__body {
    min-height: 0;
    display: grid;
    gap: var(--gap-1);
    padding: var(--pad-2);
    overflow: auto;
}

.contactFeedbackDialog__field {
    display: grid;
    gap: calc(var(--gap-1) * 0.5);
}

.contactFeedbackDialog__fieldRow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-1);
}

.contactFeedbackDialog__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.contactFeedbackDialog__hint {
    color: color-mix(in srgb, var(--c-font-muted) 72%, transparent);
}

.contactFeedbackDialog__contactLead {
    margin: 0;
    color: var(--c-font-muted);
    font: var(--font-textblock);
}

.contactFeedbackDialog__copyGroup {
    display: grid;
    justify-items: center;
    gap: calc(var(--gap-1) * 0.5);
}

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

.contactFeedbackDialog__emailCopy {
    width: 100%;
    max-width: 100%;
    color: var(--c-accent);
    overflow-wrap: anywhere;
}

.contactFeedbackDialog__footer--contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.contactFeedbackDialog__footer--contact .contactFeedbackDialog__button {
    min-width: 112px;
}

.contactFeedbackDialog__required {
    color: var(--c-accent);
}

.contactFeedbackDialog__input,
.contactFeedbackDialog__select,
.contactFeedbackDialog__textarea {
    width: 100%;
    color: var(--c-font);
    font: var(--font-textblock);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-solid) 86%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-border) 36%, transparent);
}

.contactFeedbackDialog__input,
.contactFeedbackDialog__select {
    min-height: var(--btn-h);
    padding: 0 var(--pad-2);
}

.contactFeedbackDialog__select {
    appearance: none;
}

.contactFeedbackDialog__typeSelector {
    --segmented-options: 3;
    --segmented-label-weight: 0.85fr;
    width: 100%;
}

.contactFeedbackDialog__typeSelector [data-feedback-type-option="feedback"] {
    --contact-feedback-type-color: var(--c-console-level-warning);
}

.contactFeedbackDialog__typeSelector [data-feedback-type-option="bug-report"] {
    --contact-feedback-type-color: var(--c-console-level-error);
}

.contactFeedbackDialog__typeSelector [data-feedback-type-option="feature-request"] {
    --contact-feedback-type-color: var(--c-console-level-action);
}

.contactFeedbackDialog__typeSelector .sidebarSegmentedSelector__option {
    min-height: var(--sidebar-control-segment-height);
    color: color-mix(in srgb, var(--contact-feedback-type-color) 76%, var(--c-font-muted));
}

.contactFeedbackDialog__typeSelector .sidebarSegmentedSelector__option:hover,
.contactFeedbackDialog__typeSelector .sidebarSegmentedSelector__option:focus-visible {
    color: var(--contact-feedback-type-color);
}

.contactFeedbackDialog__typeSelector .sidebarSegmentedSelector__option.sidebarControl--active,
.contactFeedbackDialog__typeSelector .sidebarSegmentedSelector__option.is-active {
    color: var(--contact-feedback-type-color);
    background: color-mix(in srgb, var(--contact-feedback-type-color) 14%, transparent);
    box-shadow: inset 0 0 0 var(--border-1) color-mix(in srgb, var(--contact-feedback-type-color) 64%, transparent);
}

.contactFeedbackDialog__textarea {
    min-height: 132px;
    padding: var(--pad-2);
    resize: vertical;
}

.contactFeedbackDialog__input:focus,
.contactFeedbackDialog__select:focus,
.contactFeedbackDialog__textarea:focus {
    border-color: var(--c-accent);
}

.contactFeedbackDialog__options[hidden],
.contactFeedbackDialog__diagnosticDetails[hidden] {
    display: none;
}

.contactFeedbackDialog__options {
    min-width: 0;
    display: grid;
    gap: var(--gap-1);
    margin: 0;
    padding: var(--pad-2);
    border: var(--border-1) solid color-mix(in srgb, var(--c-border) 72%, transparent);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 72%, transparent);
}

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

.contactFeedbackDialog__diagnosticDetails {
    display: grid;
    gap: calc(var(--gap-1) * 0.5);
}

.contactFeedbackDialog__checkbox {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    color: color-mix(in srgb, var(--contact-feedback-diagnostic-color) 76%, var(--c-font-muted));
    font: var(--font-textblock);
}

.contactFeedbackDialog__checkboxText {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.contactFeedbackDialog__checkbox {
    --contact-feedback-diagnostic-color: var(--c-accent);
}

.contactFeedbackDialog__checkbox--media-list {
    --contact-feedback-diagnostic-color: var(--c-section-media-list);
}

.contactFeedbackDialog__checkbox--file {
    --contact-feedback-diagnostic-color: var(--c-section-file);
}

.contactFeedbackDialog__checkbox--filter {
    --contact-feedback-diagnostic-color: var(--c-section-filter);
}

.contactFeedbackDialog__checkbox--analytics {
    --contact-feedback-diagnostic-color: var(--c-section-analytics);
}

.contactFeedbackDialog__checkbox--controls {
    --contact-feedback-diagnostic-color: var(--c-section-controls);
}

.contactFeedbackDialog__checkbox--view {
    --contact-feedback-diagnostic-color: var(--c-section-view);
}

.contactFeedbackDialog__checkbox--3d-mesh {
    --contact-feedback-diagnostic-color: var(--c-section-3d-mesh);
}

.contactFeedbackDialog__checkbox--shading {
    --contact-feedback-diagnostic-color: var(--c-section-shading);
}

.contactFeedbackDialog__checkbox input {
    flex: 0 0 auto;
    accent-color: var(--contact-feedback-diagnostic-color);
}

.contactFeedbackDialog__checkbox input:checked + span {
    color: var(--contact-feedback-diagnostic-color);
}

.contactFeedbackDialog__checkbox input:checked + .contactFeedbackDialog__checkboxText .contactFeedbackDialog__hint {
    color: color-mix(in srgb, var(--contact-feedback-diagnostic-color) 72%, var(--c-font-muted));
}

.contactFeedbackDialog__diagnosticPreviewBody {
    min-height: 132px;
    max-height: 264px;
    display: grid;
    align-content: start;
    gap: var(--gap-1);
    padding: var(--pad-2);
    overflow: auto;
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-solid) 86%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-border) 36%, transparent);
}

.contactFeedbackDialog__diagnosticPreviewSection {
    --contact-feedback-diagnostic-preview-color: var(--c-font-muted);

    display: grid;
    gap: calc(var(--gap-1) * 0.5);
    padding: var(--pad-2);
    border: var(--border-1) solid color-mix(in srgb, var(--contact-feedback-diagnostic-preview-color) 56%, var(--c-border));
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--contact-feedback-diagnostic-preview-color) 10%, transparent);
}

.contactFeedbackDialog__diagnosticPreviewSection:not(.is-included) {
    background: color-mix(in srgb, var(--contact-feedback-diagnostic-preview-color) 4%, transparent);
    opacity: 0.62;
}

.contactFeedbackDialog__diagnosticPreviewSection--file {
    --contact-feedback-diagnostic-preview-color: var(--c-section-file);
}

.contactFeedbackDialog__diagnosticPreviewSection--filter {
    --contact-feedback-diagnostic-preview-color: var(--c-section-filter);
}

.contactFeedbackDialog__diagnosticPreviewSection--analytics {
    --contact-feedback-diagnostic-preview-color: var(--c-section-analytics);
}

.contactFeedbackDialog__diagnosticPreviewSection--controls {
    --contact-feedback-diagnostic-preview-color: var(--c-section-controls);
}

.contactFeedbackDialog__diagnosticPreviewSection--view {
    --contact-feedback-diagnostic-preview-color: var(--c-section-view);
}

.contactFeedbackDialog__diagnosticPreviewSection--shading {
    --contact-feedback-diagnostic-preview-color: var(--c-section-shading);
}

.contactFeedbackDialog__diagnosticPreviewTitle,
.contactFeedbackDialog__diagnosticPreviewContent {
    margin: 0;
}

.contactFeedbackDialog__diagnosticPreviewHeading {
    cursor: pointer;
}

.contactFeedbackDialog__diagnosticPreviewTitle {
    color: var(--contact-feedback-diagnostic-preview-color);
    font: var(--font-button);
}

.contactFeedbackDialog__diagnosticPreviewContent {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    color: color-mix(in srgb, var(--contact-feedback-diagnostic-preview-color) 72%, var(--c-font));
    font: var(--font-console);
}


.contactFeedbackDialog__privacyNote {
    margin: 0;
    color: var(--c-font-muted);
    font: var(--font-console);
}

.contactFeedbackDialog__privacyNote a {
    color: var(--c-font);
}

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

.contactFeedbackDialog__footer {
    justify-content: flex-end;
    border-top: var(--border-1) solid var(--c-border);
}

.contactFeedbackDialog__submitStatus {
    margin-right: auto;
    color: var(--c-font-muted);
    font: var(--font-button);
}

.contactFeedbackDialog__submitStatus.is-success {
    color: var(--c-console-level-action);
}

.contactFeedbackDialog__submitStatus.is-error {
    color: var(--c-danger);
}

.contactFeedbackDialog__button {
    min-width: 96px;
}

.contactFeedbackDialog__button--primary {
    color: var(--c-accent);
}

.contactFeedbackDialog__button:disabled {
    opacity: var(--opacity-disabled);
    cursor: default;
}

.settingsDialog {
    width: min(100% - (var(--pad-2) * 4), 400px);
}

.settingsDialog__body {
    overflow: visible;
}

.settingsDialog__list {
    display: grid;
    gap: var(--gap-1);
}

.settingsDialog__setting {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-1);
    padding: var(--pad-2);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-interactive) 72%, transparent);
    cursor: pointer;
    transition: border-color var(--ease-fast), background-color var(--ease-fast);
}

.settingsDialog__setting:hover,
.settingsDialog__setting:focus-within {
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.settingsDialog__settingCopy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.settingsDialog__switchInput {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}

.settingsDialog__switch {
    width: calc(var(--icon-size-sm) * 2.25);
    height: calc(var(--icon-size-sm) + (var(--border-1) * 2));
    display: flex;
    align-items: center;
    padding: var(--border-1);
    border: var(--border-1) solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface-solid);
    transition: border-color var(--ease-fast), background-color var(--ease-fast);
}

.settingsDialog__switchThumb {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: block;
    border-radius: 50%;
    background: var(--c-icon-muted);
    transition: transform var(--ease-fast), background-color var(--ease-fast);
}

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

.settingsDialog__switchInput:checked + .settingsDialog__switch {
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.settingsDialog__switchInput:checked + .settingsDialog__switch .settingsDialog__switchThumb {
    background: var(--c-accent);
    transform: translateX(calc(var(--icon-size-sm) * 1.05));
}

.settingsDialog__setting--language {
    cursor: default;
}

.settingsDialog__setting--language:hover {
    border-color: var(--c-border);
    background: color-mix(in srgb, var(--c-surface-interactive) 72%, transparent);
}

.settingsDialog__languageSelect {
    width: 112px;
    opacity: var(--opacity-disabled);
    cursor: default;
}

.settingsDialog__deleteButton,
.settingsDialog__deleteButton:hover,
.settingsDialog__deleteButton:focus-visible {
    color: var(--c-danger);
    border-color: var(--c-danger);
}

@media (max-width: 640px) {
    .contactFeedbackDialog {
        width: calc(100% - (var(--pad-2) * 2));
        max-height: calc(100dvh - (var(--pad-2) * 2));
    }

    .contactFeedbackDialog__footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .contactFeedbackDialog__fieldRow {
        grid-template-columns: 1fr;
    }

    .contactFeedbackDialog__submitStatus {
        grid-column: 1 / -1;
        margin-right: 0;
    }

    .contactFeedbackDialog__button {
        min-width: 0;
    }

}
.settingsDialog__themeSelector {
    --segmented-options: 3;
    --segmented-label-weight: 0.85fr;
}
.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;
    }
}

.mediaListSortBar {
    flex: 0 0 auto;
    min-width: 0;
}

.mediaListSortBar__groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-1);
}

.mediaListSortGroup {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: stretch;
}

.mediaListSortGroup__label {
    min-width: 0;
    min-height: var(--btn-slim-h);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 var(--pad-1);
    background: var(--c-surface-interactive);
    border: var(--border-1) solid var(--c-border);
    border-top-left-radius: var(--radius-3);
    border-bottom-left-radius: var(--radius-3);
    color: var(--c-font);
    font: var(--font-button);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: var(--shadow-1);
}

.mediaListSortButton {
    width: calc(var(--btn-slim-h) + 2px);
    min-width: calc(var(--btn-slim-h) + 2px);
    min-height: var(--btn-slim-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--c-surface-interactive);
    border: var(--border-1) solid var(--c-border);
    color: var(--c-font);
    font: var(--font-button);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast),
        border-color var(--ease-fast),
    opacity var(--ease-fast);
}

.mediaListSortGroup .mediaListSortButton {
    border-left-width: 0;
}

.mediaListSortButton:hover {
    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.mediaListSortButton.is-active {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.mediaListSortButton:disabled {
    opacity: var(--opacity-disabled);
    cursor: default;
}

.mediaListSortButton:disabled:hover {
    color: var(--c-font);
    border-color: var(--c-border);
    background: var(--c-surface-interactive);
}

.mediaListSortGroup .mediaListSortButton:last-child {
    border-top-right-radius: var(--radius-3);
    border-bottom-right-radius: var(--radius-3);
}

.mediaListSortButton__arrow {
    display: block;
    font-size: var(--fs-console);
    line-height: 1;
}


.sidebarImageList.is-file-drop-target {
    outline: var(--border-1) solid var(--c-accent);
    outline-offset: -1px;
}

.sidebarImageRow {
    position: relative;
}

.sidebarImageSlot {
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    height: var(--media-list-h);
    min-height: var(--media-list-h);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--gap-1);
    padding: 0 calc((var(--pad-3) * 2) + var(--sidebar-slot-action-cluster-w)) 0 var(--pad-1);
    background: var(--c-surface-interactive);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    color: var(--c-font);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast),
        border-color var(--ease-fast),
        opacity var(--ease-fast);
}

.sidebarImageSlot.is-loaded {
    grid-template-columns: minmax(0, 1fr) var(--media-list-type-icon-size);
    padding-right: calc((var(--pad-3) * 2) + var(--sidebar-slot-action-cluster-w));
}

.sidebarImageList--comparePanel .sidebarImageSlot {
    padding-right: calc((var(--pad-3) * 2) + var(--sidebar-slot-action-size));
}

.sidebarImageList--comparePanel .sidebarImageSlot.is-loaded {
    padding-right: calc((var(--pad-3) * 2) + var(--sidebar-slot-action-size));
}

.sidebarImageSlot:hover {
    color: var(--c-accent);
    outline: var(--border-1) solid var(--c-accent);
    outline-offset: -1px;
}

.sidebarImageSlot.is-loaded {
    cursor: grab;
}

.sidebarImageSlot.is-loaded:active {
    cursor: grabbing;
}

.sidebarImageSlot.is-active {
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarImageSlot.is-dragging {
    opacity: 0.5;
    outline: var(--border-1) solid var(--c-accent);
    outline-offset: -1px;
}

.sidebarImageSlot.is-drop-target {
    outline: var(--border-1) solid var(--c-accent);
    outline-offset: -1px;
}

.sidebarImageSlot.is-file-drop-target {
    color: var(--c-accent);
    outline: var(--border-1) solid var(--c-accent);
    outline-offset: -1px;
}

.sidebarImageSlot__content {
    min-width: 0;
    display: block;
}

.sidebarImageSlot.is-loaded .sidebarImageSlot__content {
    grid-column: 1;
    grid-row: 1;
}

.sidebarImageSlot__typeBadge {
    grid-column: 2;
    grid-row: 1;
    width: var(--media-list-type-icon-size);
    height: var(--media-list-type-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    color: var(--c-font-muted);
}

.sidebarImageSlot.is-active .sidebarImageSlot__typeBadge,
.sidebarImageSlot:hover .sidebarImageSlot__typeBadge {
    color: var(--c-accent);
}

.sidebarImageSlot__typeIcon {
    width: 100%;
    height: 100%;
    display: inline-block;
    background-color: currentColor;
    mask: var(--media-list-type-icon) center / contain no-repeat;
    -webkit-mask: var(--media-list-type-icon) center / contain no-repeat;
}

.sidebarImageSlot__typeBadge--image {
    --media-list-type-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'%3e%3cg%20transform='matrix(1.166667,0,0,1,-1.333333,0)'%3e%3cpath%20d='M14,4.5L14,11.5C14,12.328%2013.424,13%2012.714,13L3.286,13C2.576,13%202,12.328%202,11.5L2,4.5C2,3.672%202.576,3%203.286,3L12.714,3C13.424,3%2014,3.672%2014,4.5ZM13.143,4.5C13.143,4.224%2012.951,4%2012.714,4L3.286,4C3.049,4%202.857,4.224%202.857,4.5L2.857,11.5C2.857,11.776%203.049,12%203.286,12L12.714,12C12.951,12%2013.143,11.776%2013.143,11.5L13.143,4.5Z'/%3e%3c/g%3e%3cg%20transform='matrix(1,0,0,1,6.6466,-0.318495)'%3e%3ccircle%20cx='5.5'%20cy='6.2'%20r='1.1'/%3e%3c/g%3e%3cg%20transform='matrix(1,0,0,1,-0.4932,-0.522212)'%3e%3cpath%20d='M3.493,11.5L6.666,7.504L9.115,10.461L10.5,8.8L13.493,11.5'%20style='fill:none;fill-rule:nonzero;stroke:black;stroke-width:1px;'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarImageSlot__typeBadge--hdr {
    --media-list-type-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;'%3e%3cg%20transform='matrix(0.867785,0,0,0.867785,1.057721,1.057721)'%3e%3ccircle%20cx='8'%20cy='8'%20r='3'%20style='fill:none;stroke:black;stroke-width:1px;'/%3e%3c/g%3e%3cpath%20d='M8,1.495L8,3.8M8,12.2L8,14.505M1.495,8L3.8,8M12.2,8L14.478,8M3.6,3.6L5,5M11,11L12.4,12.4M12.4,3.6L11,5M5,11L3.6,12.4'%20style='fill:none;fill-rule:nonzero;stroke:black;stroke-width:1px;stroke-linecap:round;'/%3e%3cpath%20d='M8,5C9.646,5%2011,6.354%2011,8C11,9.646%209.646,11%208,11L8,5Z'%20style='fill-rule:nonzero;'/%3e%3c/svg%3e");
}

.sidebarImageSlot__typeBadge--video {
    --media-list-type-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;'%3e%3cg%3e%3cpath%20d='M12,5l0,6c0,0.828%20-0.672,1.5%20-1.5,1.5l-8.001,0c-0.827,0%20-1.5,-0.672%20-1.5,-1.5l0,-6c0,-0.828%200.672,-1.5%201.5,-1.5l8.001,0c0.827,0%201.5,0.672%201.5,1.5Zm-1.117,0c0,-0.212%20-0.171,-0.383%20-0.383,-0.383l-8.001,0c-0.211,0%20-0.383,0.171%20-0.383,0.383l0,6c0,0.212%200.171,0.383%200.383,0.383l8.001,0c0.211,0%200.383,-0.171%200.383,-0.383l0,-6Z'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M12,6.2l2.508,-1.7l0,7l-2.508,-1.7l0,-3.6Z'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:1px;'/%3e%3c/g%3e%3cg%3e%3cpath%20d='M5.329,6.642l0,2.715l2.341,-1.358l-2.341,-1.358Z'%20style='fill-rule:nonzero;stroke:%23000;stroke-width:1px;stroke-miterlimit:2;'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarImageSlot__typeBadge--gif {
    --media-list-type-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'%3e%3cg%20transform='matrix(1.166667,0,0,1,-1.333333,0)'%3e%3cpath%20d='M14,4.5L14,11.5C14,12.328%2013.424,13%2012.714,13L3.286,13C2.576,13%202,12.328%202,11.5L2,4.5C2,3.672%202.576,3%203.286,3L12.714,3C13.424,3%2014,3.672%2014,4.5ZM13.143,4.5C13.143,4.224%2012.951,4%2012.714,4L3.286,4C3.049,4%202.857,4.224%202.857,4.5L2.857,11.5C2.857,11.776%203.049,12%203.286,12L12.714,12C12.951,12%2013.143,11.776%2013.143,11.5L13.143,4.5Z'/%3e%3c/g%3e%3cg%20transform='matrix(1.074897,0,0,1.074897,-0.749423,-0.599179)'%3e%3cpath%20d='M8.405,9.8L8.405,6.2M6.444,6.6C6.16,6.405%205.824,6.3%205.48,6.3C4.547,6.3%203.78,7.067%203.78,8C3.78,8.933%204.547,9.7%205.48,9.7C5.824,9.7%206.16,9.595%206.444,9.4L6.444,8L5.395,8M10.4,9.8L10.4,6.2L12.5,6.2M10.4,8L12.2,8'%20style='fill:none;fill-rule:nonzero;stroke:black;stroke-width:0.83px;'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarImageSlot__typeBadge--model-3d {
    --media-list-type-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:5;'%3e%3cpath%20d='M8,1.487l5.641,3.257l0,6.513l-5.641,3.257l-5.641,-3.257l-0,-6.513l5.641,-3.257Z'%20style='fill:none;stroke:%23000;stroke-width:1px;'/%3e%3cpath%20d='M11.648,5.894l-3.648,2.106l0,4.212l-0,-4.212l-3.648,-2.106l3.648,2.106l3.648,-2.106Z'%20style='fill:none;stroke:%23000;stroke-width:1px;stroke-linecap:round;stroke-miterlimit:1.5;'/%3e%3c/svg%3e");
}

.sidebarImageSlot__typeBadge--gaussian-splat {
    --media-list-type-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cg%20fill='%23000'%3e%3cellipse%20cx='5'%20cy='5'%20rx='3.6'%20ry='2.1'%20transform='rotate(-28%205%205)'%20opacity='.72'/%3e%3cellipse%20cx='10.8'%20cy='5.8'%20rx='3.4'%20ry='1.9'%20transform='rotate(34%2010.8%205.8)'%20opacity='.72'/%3e%3cellipse%20cx='8'%20cy='10.7'%20rx='4.1'%20ry='2.2'%20transform='rotate(-8%208%2010.7)'%20opacity='.72'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarImageSlot__typeBadge--svg {
    --media-list-type-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;'%3e%3cpath%20d='M3.986,1L11.373,1L14.173,3.8L14.173,15L3.986,15C2.889,15%201.986,14.097%201.986,13L1.986,3C1.986,1.903%202.889,1%203.986,1ZM3.986,2C3.438,2%202.986,2.451%202.986,3L2.986,13C2.986,13.549%203.438,14%203.986,14L13.173,14L13.173,4.214L10.959,2L3.986,2Z'/%3e%3cpath%20d='M10.751,1.514L10.751,4.514L13.551,4.514M5.763,10.562L4.263,9.062L5.763,7.562M10.396,7.589L11.896,9.089L10.396,10.589M9.177,5.843L7.229,12.277'%20style='fill:none;fill-rule:nonzero;stroke:black;stroke-width:1px;'/%3e%3c/svg%3e");
}

.sidebarImageSlot__name {
    min-width: 0;
    display: block;
    color: inherit;
    font: var(--font-textblock);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebarImageSlot:not(.is-loaded) .sidebarImageSlot__name {
    color: var(--c-font-muted);
}

.sidebarImageSlot__meta {
    display: block;
    margin-top: calc(var(--gap-1) / 2);
    color: var(--c-font-muted);
    font: var(--font-textblock);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebarImageList--comparePanel .sidebarImageSlot__meta {
    margin-top: 0;
}

.sidebarImageSlot__actions {
    position: absolute;
    top: var(--pad-3);
    right: var(--pad-3);
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, var(--sidebar-slot-action-size));
    grid-template-rows: repeat(2, var(--sidebar-slot-action-size));
    gap: 0;
    width: var(--sidebar-slot-action-cluster-w);
    height: calc(var(--sidebar-slot-action-size) * 2);
}

.sidebarImageSlot__actions--comparePanelClose {
    top: var(--pad-3);
    right: var(--pad-3);
    grid-template-columns: var(--sidebar-slot-action-size);
    grid-template-rows: var(--sidebar-slot-action-size);
    width: var(--sidebar-slot-action-size);
    height: var(--sidebar-slot-action-size);
}

.sidebarImageSlot__actions--comparePanelClose .sidebarImageSlot__action {
    border-radius: var(--radius-3);
}

.sidebarImageSlot__actions--comparePanelClose .sidebarImageSlot__action:nth-child(1) {
    border-top-right-radius: var(--radius-3);
    border-bottom-left-radius: var(--radius-3);
    border-bottom-right-radius: var(--radius-3);
}

.sidebarImageSlot__action {
    width: var(--sidebar-slot-action-size);
    height: var(--sidebar-slot-action-size);
    min-width: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: var(--border-1) solid var(--c-border);
    border-radius: 0;
    background: var(--c-surface-interactive);
    color: var(--c-font-muted);
    cursor: pointer;
    transition:
        color var(--ease-fast),
        border-color var(--ease-fast),
        background-color var(--ease-fast);
}

.sidebarImageSlot__action:nth-child(2),
.sidebarImageSlot__action:nth-child(3),
.sidebarImageSlot__action:nth-child(5),
.sidebarImageSlot__action:nth-child(6) {
    border-left-width: 0;
}

.sidebarImageSlot__action:nth-child(n + 4) {
    border-top-width: 0;
}

.sidebarImageSlot__action:nth-child(1) {
    border-top-left-radius: var(--radius-3);
}

.sidebarImageSlot__action:nth-child(3) {
    border-top-right-radius: var(--radius-3);
}

.sidebarImageSlot__action:nth-child(4) {
    border-bottom-left-radius: var(--radius-3);
}

.sidebarImageSlot__action:nth-child(6) {
    border-bottom-right-radius: var(--radius-3);
}

.sidebarImageSlot__action:hover {
    color: var(--c-accent);
    border-color: var(--c-control-hover-border);
    background: var(--c-control-hover-bg);
}

.sidebarImageSlot__action--remove:hover {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface-interactive));
}

.sidebarImageSlot--removalUndo {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-slot-action-cluster-w);
    align-items: center;
    gap: var(--gap-1);
    padding: var(--pad-3);
    border-color: color-mix(in srgb, var(--c-danger) 44%, var(--c-border));
}

.sidebarImageSlot__undoLabel {
    min-width: 0;
    overflow: hidden;
    color: var(--c-font-muted);
    font: var(--font-textblock);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarImageSlot__undoButton {
    width: min(100%, var(--sidebar-slot-action-cluster-w));
    height: calc(var(--sidebar-slot-action-size) * 2);
    color: var(--c-font);
    font: var(--font-button);
    border: var(--border-1) solid var(--c-danger);
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface-interactive));
    cursor: pointer;
}

.sidebarImageSlot__undoButton:hover {
    color: var(--c-danger);
    background: color-mix(in srgb, var(--c-danger) 18%, var(--c-surface-interactive));
}

.sidebarImageSlot__action.is-active {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarImageSlot__action:disabled {
    opacity: var(--opacity-disabled);
    cursor: default;
}

.sidebarImageSlot__action:disabled:hover {
    color: var(--c-font-muted);
    border-color: var(--c-border);
    background: var(--c-surface-interactive);
}

.sidebarImageSlot__actionIcon {
    width: calc(var(--sidebar-slot-action-size) * 0.62);
    height: calc(var(--sidebar-slot-action-size) * 0.62);
    display: inline-block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.sidebarImageSlot__action--icon-minimize .sidebarImageSlot__actionIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M15,14c0,0.552%20-0.448,1%20-1,1l-12,0c-0.552,0%20-1,-0.448%20-1,-1c0,-0.552%200.448,-1%201,-1l12,0c0.552,0%201,0.448%201,1Z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M15,14c0,0.552%20-0.448,1%20-1,1l-12,0c-0.552,0%20-1,-0.448%20-1,-1c0,-0.552%200.448,-1%201,-1l12,0c0.552,0%201,0.448%201,1Z'/%3e%3c/svg%3e");
}

.sidebarImageSlot__action--icon-maximize .sidebarImageSlot__actionIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;'%3e%3cpath%20d='M7,2l-5,0l0,5'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3cpath%20d='M9,14l5,0l0,-5'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-miterlimit:3;'/%3e%3cpath%20d='M14,7l0,-5l-5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:6;'/%3e%3cpath%20d='M2,9l0,5l5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:3;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;'%3e%3cpath%20d='M7,2l-5,0l0,5'%20style='fill:none;stroke:%23000;stroke-width:2px;'/%3e%3cpath%20d='M9,14l5,0l0,-5'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-miterlimit:3;'/%3e%3cpath%20d='M14,7l0,-5l-5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:6;'/%3e%3cpath%20d='M2,9l0,5l5,0'%20style='fill:none;stroke:%23000;stroke-width:2px;stroke-linejoin:round;stroke-miterlimit:3;'/%3e%3c/svg%3e");
}

.sidebarImageSlot__action--icon-close .sidebarImageSlot__actionIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cpath%20d='M2,2l12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2.4px;'/%3e%3cpath%20d='M14,2l-12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2px;'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cpath%20d='M2,2l12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2.4px;'/%3e%3cpath%20d='M14,2l-12,12'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2px;'/%3e%3c/svg%3e");
}

.sidebarImageSlot__action--icon-alignment .sidebarImageSlot__actionIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cg%20transform='matrix(1,0,0,0.909091,0,0.181818)'%3e%3cpath%20d='M7,2.66C7,2.296%206.731,2%206.4,2L2.6,2C2.269,2%202,2.296%202,2.66L2,12.34C2,12.704%202.269,13%202.6,13L6.4,13C6.731,13%207,12.704%207,12.34L7,2.66Z'/%3e%3c/g%3e%3cg%20transform='matrix(1,0,0,0.909091,-1.77636e-15,1.27273)'%3e%3cpath%20d='M14,3.66C14,3.296%2013.731,3%2013.4,3L9.6,3C9.269,3%209,3.296%209,3.66L9,13.34C9,13.704%209.269,14%209.6,14L13.4,14C13.731,14%2014,13.704%2014,13.34L14,3.66Z'/%3e%3c/g%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cg%20transform='matrix(1,0,0,0.909091,0,0.181818)'%3e%3cpath%20d='M7,2.66C7,2.296%206.731,2%206.4,2L2.6,2C2.269,2%202,2.296%202,2.66L2,12.34C2,12.704%202.269,13%202.6,13L6.4,13C6.731,13%207,12.704%207,12.34L7,2.66Z'/%3e%3c/g%3e%3cg%20transform='matrix(1,0,0,0.909091,-1.77636e-15,1.27273)'%3e%3cpath%20d='M14,3.66C14,3.296%2013.731,3%2013.4,3L9.6,3C9.269,3%209,3.296%209,3.66L9,13.34C9,13.704%209.269,14%209.6,14L13.4,14C13.731,14%2014,13.704%2014,13.34L14,3.66Z'/%3e%3c/g%3e%3c/svg%3e");
}

.sidebarImageSlot__action--icon-download .sidebarImageSlot__actionIcon {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='currentColor'%20d='M11%203h2v9.17l3.59-3.58L18%2010l-6%206-6-6%201.41-1.41L11%2012.17V3ZM5%2018h14v2H5v-2Z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='currentColor'%20d='M11%203h2v9.17l3.59-3.58L18%2010l-6%206-6-6%201.41-1.41L11%2012.17V3ZM5%2018h14v2H5v-2Z'/%3e%3c/svg%3e");
}

.sidebarImageSlot__action--icon-fx .sidebarImageSlot__actionIcon {
    mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M9,1.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-7,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l7,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M7.013,7.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-5.013,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l5.013,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M10.175,5.55l4.732,8.9c0.162,0.304%200.046,0.55%20-0.257,0.55l-1.1,0c-0.304,0%20-0.681,-0.246%20-0.842,-0.55l-4.733,-8.9c-0.161,-0.304%20-0.046,-0.55%200.258,-0.55l1.1,0c0.303,0%200.68,0.246%200.842,0.55Z'/%3e%3cpath%20d='M14.819,5.556l-6.458,8.888c-0.223,0.307%20-0.653,0.556%20-0.959,0.556l-1.112,0c-0.306,0%20-0.375,-0.249%20-0.152,-0.556l6.458,-8.888c0.223,-0.307%200.653,-0.556%200.96,-0.556l1.111,0c0.307,0%200.375,0.249%200.152,0.556Z'/%3e%3cpath%20d='M2.5,15l-1,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-13c0,-0.276%200.224,-0.5%200.5,-0.5l1,0c0.276,0%200.5,0.224%200.5,0.5l0,13c0,0.276%20-0.224,0.5%20-0.5,0.5Z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2016%2016'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3e%3cpath%20d='M9,1.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-7,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l7,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M7.013,7.5l0,1c0,0.276%20-0.224,0.5%20-0.5,0.5l-5.013,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-1c0,-0.276%200.224,-0.5%200.5,-0.5l5.013,0c0.276,0%200.5,0.224%200.5,0.5Z'/%3e%3cpath%20d='M10.175,5.55l4.732,8.9c0.162,0.304%200.046,0.55%20-0.257,0.55l-1.1,0c-0.304,0%20-0.681,-0.246%20-0.842,-0.55l-4.733,-8.9c-0.161,-0.304%20-0.046,-0.55%200.258,-0.55l1.1,0c0.303,0%200.68,0.246%200.842,0.55Z'/%3e%3cpath%20d='M14.819,5.556l-6.458,8.888c-0.223,0.307%20-0.653,0.556%20-0.959,0.556l-1.112,0c-0.306,0%20-0.375,-0.249%20-0.152,-0.556l6.458,-8.888c0.223,-0.307%200.653,-0.556%200.96,-0.556l1.111,0c0.307,0%200.375,0.249%200.152,0.556Z'/%3e%3cpath%20d='M2.5,15l-1,0c-0.276,0%20-0.5,-0.224%20-0.5,-0.5l0,-13c0,-0.276%200.224,-0.5%200.5,-0.5l1,0c0.276,0%200.5,0.224%200.5,0.5l0,13c0,0.276%20-0.224,0.5%20-0.5,0.5Z'/%3e%3c/svg%3e");
}

.sidebarImageSlot__action--reserved {
    cursor: default;
}

.sidebarImageSlot__action--reserved:hover {
    color: var(--c-font-muted);
    border-color: var(--c-border);
    background: var(--c-surface-interactive);
}

.appShell.is-sidebar-collapsed {
    grid-template-columns: var(--navbar) minmax(0, 1fr) var(--sidebar-closed);
}

.appShell.is-sidebar-collapsed .sidebarPanel {
    justify-content: flex-start;
    padding: 0;
}

.appShell.is-sidebar-collapsed .sidebarPanel__content {
    display: none;
}

.appShell.is-sidebar-collapsed .sidebarPanel__collapsedToggle {
    display: inline-flex;
}

@media (max-width: 640px) {
    /* Phone: app shell */
    .appShell,
    .appShell.is-sidebar-collapsed {
        position: relative;
        --mobile-sidebar-header-height: var(--header);
        --mobile-sidebar-drawer-handle-height: 24px;
        --mobile-sidebar-drawer-top-offset: calc(
            var(--pad-1)
            + (var(--pad-3) * 2)
            + (var(--media-action-size) * 2)
        );
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        padding-top: var(--footer);
        padding-bottom: calc(
            var(--navbar)
            + var(--mobile-sidebar-header-height)
            + (var(--border-2) * 2)
            + (var(--pad-1) * 2)
        );
    }


    /* Phone: method rail */
    .methodRail {
        grid-column: 1;
        grid-row: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        height: var(--navbar);
        min-height: var(--navbar);
        display: flex;
        flex-direction: row;
        align-items: stretch;
        border-right: 0;
        border-top: var(--border-2) solid var(--c-border);
        border-bottom: 0;
        background: var(--c-surface-glass);
        z-index: calc(var(--z-ui) + 3);
    }

    .methodRail__brand {
        display: flex;
        width: var(--navbar);
        min-width: var(--navbar);
        min-height: 44px;
        border-bottom: 0;
        border-right: var(--border-1) solid var(--c-border);
    }

    .methodRail__nav {
        width: auto;
        flex: 1 1 auto;
        min-height: 44px;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .methodRail__navItem {
        width:  calc(var(--navbar) + 2 * var(--pad-2));
        flex: 0 0 auto;
    }

    .methodRail__navItem + .methodRail__navItem {
        border-top: 0;
        border-left: var(--border-1) solid var(--c-border);
    }

    .methodRail__settings {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        width: var(--navbar);
        height: var(--navbar);
        min-width: var(--navbar);
        min-height: var(--navbar);
        border-top: 0;
        border-left: var(--border-1) solid var(--c-border);
    }

    .methodRailUtilityButton {
        width: 100%;
        height: 100%;
    }

    .methodRailUtilityButton + .methodRailUtilityButton {
        border-top: var(--border-1) solid var(--c-border);
        border-left: 0;
    }

    .navMethodBtn {
        min-width: 48px;
        min-height: 44px;
        padding: 0 var(--pad-1);
    }

    .navMethodBtn::after {
        display: none;
    }

    /* Phone: content/compare panel */
    body {
        overflow: hidden;
    }

    .contentArea {
        grid-column: 1;
        grid-row: 1;
        padding: var(--pad-1);
        padding-bottom: 0;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .appShell.is-alignment-workspace-active .panelInfoButton,
    .appShell.is-alignment-workspace-active .panelZoomButton {
        display: none;
    }

    .panelAlignmentPoints__magnification,
    .panelFileNameLabel {
        display: none;
    }
    .timelineStrip {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .timelineStrip__primary {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .timelineStrip__scrubber {
        flex: 1 1 100%;
        order: 2;
    }

    .timelineStrip__timeGroup {
        padding-left: 0;
    }

    .timelineStrip__speedLabel {
        display: none;
    }

    /* Phone: sidebar sheet */
    .sidebarPanel {
        grid-column: 1;
        grid-row: auto;
        position: fixed;
        top: auto;
        right: 0;
        bottom: var(--navbar);
        left: 0;
        width: 100%;
        height: calc(var(--mobile-sidebar-header-height) + (var(--border-2) * 2) + (var(--pad-1) * 2));
        align-items: flex-end;
        max-height: none;
        padding: var(--pad-1);
        z-index: calc(var(--z-ui) + 2);
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        overflow: hidden;
        transition: none;
    }

    .appShell.is-sidebar-open-mobile .sidebarPanel {
        top: auto;
        height: min(
            var(--mobile-sidebar-drawer-height, 56dvh),
            calc(
                100dvh
                - var(--footer)
                - var(--mobile-sidebar-drawer-top-offset)
                - var(--navbar)
            )
        );
        align-items: stretch;
        max-height: calc(
            100dvh
            - var(--footer)
            - var(--mobile-sidebar-drawer-top-offset)
            - var(--navbar)
        );
    }


    .sidebarPanel__content {
        position: relative;
        max-width: none;
        flex-direction: column-reverse;
        height: 100%;
        max-height: 100%;
        border: var(--border-2) solid var(--c-border);
        border-radius: var(--radius-1);
        background: transparent;
        box-shadow: none;
        pointer-events: auto;
        transition: background-color var(--ease-fast), border-color var(--ease-fast);
    }

    .sidebarPanel__header {
        height: var(--mobile-sidebar-header-height);
        border-top: var(--border-1) solid var(--c-border);
        border-bottom: 0;
    }

    .sidebarPanel__main {
        position: relative;
        padding-top: 0;
        background: var(--c-surface-solid);
    }

    .sidebarPanel__drawerHandle {
        position: absolute;
        top: var(--pad-1);
        inset-inline: 0;
        width: 100%;
        height: var(--mobile-sidebar-drawer-handle-height);
        background: var(--c-accent);
        mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2064%204'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cg%3e%3cpath%20d='M13,2l38,0'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2px;'/%3e%3c/g%3e%3cg%3e%3ccircle%20cx='56'%20cy='2'%20r='0.75'/%3e%3c/g%3e%3cg%3e%3ccircle%20cx='60.25'%20cy='2'%20r='0.5'/%3e%3c/g%3e%3cg%3e%3ccircle%20cx='8'%20cy='2'%20r='0.75'/%3e%3c/g%3e%3cg%3e%3ccircle%20cx='3.766'%20cy='2'%20r='0.5'/%3e%3c/g%3e%3c/svg%3e") center / auto 12px no-repeat;
        -webkit-mask: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%2064%204'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20xml:space='preserve'%20xmlns:serif='http://www.serif.com/'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;'%3e%3cg%3e%3cpath%20d='M13,2l38,0'%20style='fill:none;fill-rule:nonzero;stroke:%23000;stroke-width:2px;'/%3e%3c/g%3e%3cg%3e%3ccircle%20cx='56'%20cy='2'%20r='0.75'/%3e%3c/g%3e%3cg%3e%3ccircle%20cx='60.25'%20cy='2'%20r='0.5'/%3e%3c/g%3e%3cg%3e%3ccircle%20cx='8'%20cy='2'%20r='0.75'/%3e%3c/g%3e%3cg%3e%3ccircle%20cx='3.766'%20cy='2'%20r='0.5'/%3e%3c/g%3e%3c/svg%3e") center / auto 12px no-repeat;
        display: none;
        touch-action: none;
        user-select: none;
    }

    .appShell.is-sidebar-open-mobile .sidebarPanel__main {
        padding-top: calc(var(--mobile-sidebar-drawer-handle-height) + (var(--pad-1) * 2));
    }

    .appShell.is-sidebar-open-mobile .sidebarPanel__drawerHandle {
        display: block;
    }

    .sidebarPanel__scroll {
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        padding-block-end: var(--pad-2);
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
        transition: none;
    }

    .appShell:not(.is-sidebar-open-mobile) .sidebarPanel__content {
        max-height: calc(var(--mobile-sidebar-header-height) + (var(--border-2) * 2));
    }

    .appShell:not(.is-sidebar-open-mobile) .sidebarPanel__scroll {
        max-height: 0;
        overflow: hidden;
    }

    .appShell.is-sidebar-collapsed .sidebarPanel {
        justify-content: flex-start;
        padding: var(--pad-1);
    }

    .appShell.is-sidebar-collapsed .sidebarPanel__collapsedToggle {
        display: none;
    }

    .appShell.is-sidebar-collapsed .sidebarPanel__content {
        display: flex;
    }

    .sidebarPanel__toggleGlyph {
        transform: rotate(90deg);
    }

    .appShell:not(.is-sidebar-open-mobile) .sidebarPanel__toggleGlyph {
        transform: rotate(-90deg);
    }

    .sidebarPanel [data-sidebar-peek-gesture^="hold"],
    .sidebarPanel [data-sidebar-peek-gesture^="hold"] > button {
        touch-action: none;
    }

    .sidebarControlSection,
    .sidebarControlPanel,
    .sidebarControlGroup {
        transition:
            background-color var(--ease-fast),
            border-color var(--ease-fast),
            box-shadow var(--ease-fast),
            max-height var(--ease-shell);
    }

    .sidebarPanel.is-peek-through .sidebarPanel__content,
    .sidebarPanel.is-peek-through .sidebarPanel__main,
    .sidebarPanel.is-peek-through .sidebarControlSection,
    .sidebarPanel.is-peek-through .sidebarControlPanel,
    .sidebarPanel.is-peek-through .sidebarControlGroup {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .sidebarPanel.is-peek-through .sidebarPanel__scroll {
        scrollbar-color: transparent transparent;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .sidebarPanel.is-peek-through .sidebarPanel__scroll::-webkit-scrollbar-track,
    .sidebarPanel.is-peek-through .sidebarPanel__scroll::-webkit-scrollbar-thumb {
        background: transparent;
        border-color: transparent;
    }

    .sidebarPanel.is-peek-through .sidebarPanel__content * {
        visibility: hidden;
    }

    .sidebarPanel.is-peek-through .sidebarControl.is-peek-source,
    .sidebarPanel.is-peek-through .sidebarControl.is-peek-source *,
    .sidebarPanel.is-peek-through .sidebarControlSegment.is-peek-source,
    .sidebarPanel.is-peek-through .sidebarControlSegment.is-peek-source *,
    .sidebarPanel.is-peek-through .is-peek-source > .sidebarControl,
    .sidebarPanel.is-peek-through .is-peek-source > .sidebarControl * {
        visibility: visible;
        opacity: 1;
    }

    .sidebarPeekStatus {
        position: fixed;
        right: 0;
        bottom: var(--navbar);
        left: 0;
        z-index: calc(var(--z-ui) + 4);
        display: grid;
        height: calc(
            var(--mobile-sidebar-header-height)
            + (var(--border-2) * 2)
            + (var(--pad-1) * 2)
        );
        padding: var(--pad-1);
        color: var(--c-font);
        pointer-events: none;
    }

    .sidebarPeekStatus[hidden] {
        display: none;
    }

    .sidebarPeekStatus__label {
        display: none;
        min-width: 0;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-inline: var(--pad-2);
        border: var(--border-1) solid var(--c-border);
        border-radius: var(--radius-1);
        background: var(--c-surface-solid);
        color: var(--c-font-muted);
        font: var(--font-button);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebarPeekStatus__choices {
        --sidebar-peek-choice-count: 2;

        width: 100%;
        min-width: 0;
        min-height: 0;
        display: flex;
        align-items: stretch;
        border: var(--border-1) solid var(--c-border);
        border-radius: var(--radius-1);
        background: var(--c-surface-solid);
        overflow: hidden;
    }

    .sidebarPeekStatus__choice {
        min-width: 0;
        min-height: 0;
        flex: 1 1 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        padding-inline: var(--pad-2);
        color: var(--c-font-muted);
        font: var(--font-button);
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: default;
    }

    .sidebarPeekStatus__choices > * + * {
        border-left: var(--border-1) solid var(--c-border);
    }

    .sidebarPeekStatus__choice.is-selected {
        background: color-mix(in srgb, var(--c-accent) 32%, var(--c-surface-solid));
        color: var(--c-font);
    }

    .sidebarPeekStatus__choiceIconSection {
        flex: 0 0 auto;
        height: 100%;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
    }

    .sidebarPeekStatus__choiceIcon.sidebarControl__icon {
        width: var(--sidebar-control-icon);
        height: var(--sidebar-control-icon);
        aspect-ratio: 1;
        margin: 0;
    }

    .sidebarPeekStatus.is-choice {
        display: block;
    }

    .sidebarPeekStatus.is-choice .sidebarPeekStatus__label {
        display: none;
    }

    .sidebarPeekStatus.is-choice .sidebarPeekStatus__choices {
        height: 100%;
    }

    .sidebarPeekStatus__live {
        display: none;
        min-width: 0;
        min-height: 0;
        align-items: center;
        justify-content: center;
        padding-inline: var(--pad-2);
        border: var(--border-1) solid var(--c-accent);
        border-radius: var(--radius-1);
        background: color-mix(in srgb, var(--c-accent) 32%, var(--c-surface-solid));
        color: var(--c-font);
        font: var(--font-button);
    }

    .sidebarPeekStatus.is-drag {
        display: block;
    }

    .sidebarPeekStatus.is-drag .sidebarPeekStatus__label,
    .sidebarPeekStatus.is-drag .sidebarPeekStatus__live {
        display: none;
    }

    .sidebarPeekStatus.is-drag .sidebarPeekStatus__choices {
        display: flex;
        height: 100%;
    }
    /* Phone: fixed footer */
    .appFooter {
        grid-column: 1;
        grid-row: auto;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        height: var(--footer);
        min-height: var(--footer);
        padding: var(--pad-1);
        background: var(--c-surface-solid);
        border-top: 0;
        border-bottom: var(--border-2) solid var(--c-border);
        z-index: calc(var(--z-ui) + 3);
    }
}