@import url(https://fonts.bunny.net/css?family=oxanium:400,700|big-shoulders-text:400);

:root {
    --border: #424448;
    --cubic-ease: cubic-bezier(0.4, 0, 0.1, 1);
    --cubic-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --menu-bg: #202328;
    --menu-bg-muted: #2e3339;
    --text: #fff;
    --text-muted: #a1acba;
    --primary: #007bee;
    --view-transition-duration: 2s;
    --dialog-transition-duration: 350ms;
}

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

html {
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    hanging-punctuation: first allow-end last;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    word-break: break-word;
}

body {
    color: var(--text);
    display: grid;
    font-family: 'Oxanium', system-ui;
    height: 100%;
    overflow: hidden;
}

button {
    cursor: pointer;
    font-family: inherit;
}

p {
    line-height: 1.5;
}

p:not(:last-child) {
    margin-bottom: 1rem;
}

ul {
    padding-left: 1.5rem;
}

.bullet-list {
    list-style-type: none;
}
.bullet-list li {
    padding-left: 0.75rem;
    position: relative;
}
.bullet-list li::before {
    /* background: red; */
    background-image: url("data:image/svg+xml;utf8,<svg style='opacity:0.75' xmlns='http://www.w3.org/2000/svg' width='20px' height='14px' viewBox='0 0 20 14' stroke-width='1.5' stroke='%23a1acb1' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2l4 5l-4 5' style='opacity:0.4'/><path d='M8 2l4 5l-4 5' style='opacity:0.7'/><path d='M14 2l4 5l-4 5'/></svg>");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 1.375rem;
    left: -1.5rem;
    position: absolute;
    top: 0rem;
    width: 1.375rem;
}

/* --------------------------------------------- */
/* Loading screen                                */
/* --------------------------------------------- */

.loading-screen {
    align-items: center;
    background:
        linear-gradient(
                -45deg,
                rgba(0, 0, 0, 0.1) 10%,
                transparent 10%,
                transparent 40%,
                rgba(0, 0, 0, 0.1) 40%,
                rgba(0, 0, 0, 0.1) 60%,
                transparent 60%,
                transparent 90%,
                rgba(0, 0, 0, 0.1) 90%
            )
            repeat 0px 0px/8px 8px,
        hsl(217, 11%, 14%);
    display: flex;
    grid-area: 1 / 1 / 2 / 2;
    isolation: isolate;
    justify-content: center;
    overflow: hidden;
    padding: 4vw;
    transition: all var(--view-transition-duration) var(--cubic-ease);
}

.loading-svg {
    border-radius: 100%;
    box-shadow:
        0 1rem 3rem -1.5rem #fff1,
        0 -1rem 3rem -1.5rem #0008;
    max-width: min(38rem, min(80vw, 80vh));
    transition: all var(--view-transition-duration) var(--cubic-ease);
    user-select: none;
}

.rim div {
    background: #25282d;
    border-radius: 100%;
    box-shadow:
        inset 0 0.25rem 0.5rem #0002,
        inset 0 -0.5rem 0.25rem -0.375rem #fff2;
    height: 100%;
    width: 100%;
}

.dial-bg {
    filter: drop-shadow(#0003 0 0.25rem 0.25rem);
}

.dial-bg div {
    background: #202328;
    background-image: linear-gradient(#0000, #0003);
    border-radius: 100%;
    box-shadow:
        inset 0 -0.5rem 1rem -0.25rem #0002,
        inset 0 0.25rem 0.25rem -0.125rem rgba(146, 202, 255, 0.2);
    height: 100%;
    width: 100%;
}

.center {
    filter: drop-shadow(#0003 0 0.25rem 0.25rem);
}

.readout {
    background: #25282d;
    background-image: linear-gradient(#0000, #0003);
    border-radius: 100%;
    box-shadow:
        inset 0 -0.5rem 1rem -0.25rem #0002,
        inset 0 0.5rem 0.25rem -0.375rem rgba(146, 202, 255, 0.2);
    font-family: 'Big Shoulders Text', monospace;
    height: 100%;
    text-align: center;
    width: 100%;
}

#progress-readout {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 5rem;
    height: 100%;
    justify-content: center;
    text-shadow: 0 0.125rem 0.5rem #000c;
    width: 100%;
}

.readout-percent-sign {
    font-size: 1.75rem;
    color: #fff4;
    margin-top: -3.5rem;
    text-shadow: 0 0.125rem 0.25rem #0008;
}

.lines-border,
.loading-svg line {
    stroke: #fffc;
    stroke-linecap: round;
    stroke-width: var(--thickness, 1.75);
    transform-origin: center;
}

.lines-border {
    fill: none;
    stroke-dasharray: var(--sda);
    transform: rotate(calc((-90 - (180 * var(--pct) / 100)) * 1deg));
}

.lines {
    transform: rotate(0deg);
}

.loading-svg line {
    --l: 0;
    stroke-dasharray: var(--line-sm, 16) 100;
    transform: rotate(calc(var(--l) * 1deg));
}

.loading-svg line:nth-child(5n + 1) {
    stroke-dasharray: var(--line-lg, 32) 1080;
}

.lines-lights {
    fill: none;
    stroke: #fff;
    stroke-dasharray: var(--sda);
    stroke-width: 14;
    transform: rotate(calc((-90 - (180 * var(--length) / 100) + var(--gap)) * 1deg));
    transform-origin: center;
}

.lines-lights-fill-outer,
.lines-lights-fill-inner {
    fill: none;
    transform: rotate(calc((-90 - (180 * var(--pct) / 100)) * 1deg));
    transform-origin: center;
    stroke-dasharray: var(--progress) 360.01;
    transition: stroke-dasharray 250ms cubic-bezier(0.3, 0, 0.2, 1);
}

.lines-lights-fill-outer {
    stroke: #007bee;
    stroke-width: 14;
}

.lines-lights-fill-inner {
    filter: blur(0.1rem);
    stroke: #fff;
    stroke-width: 6;
}

.lines-lights-bg {
    fill: none;
    stroke: #0006;
    stroke-dasharray: var(--sda);
    stroke-width: 14;
    transform: rotate(calc((-90 - (180 * var(--length) / 100) + var(--gap)) * 1deg));
    transform-origin: center;
}

.lines-lights-glow {
    filter: blur(0.75rem);
    fill: none;
    transform: rotate(calc((-90 - (180 * var(--pct) / 100)) * 1deg));
    transform-origin: center;
    stroke: #007bee;
    stroke-dasharray: var(--progress) 1080;
    stroke-width: 14;
    transition: stroke-dasharray 250ms cubic-bezier(0.3, 0, 0.2, 1);
}

.numbers g {
    transform: rotate(calc(var(--n) * 1deg));
    transform-origin: center;
}

.numbers text {
    fill: #fffc;
    font-family: 'Big Shoulders Text', monospace;
    font-size: 1.5rem;
    transform: rotate(calc(var(--n) * -1deg));
    transform-box: content-box;
    transform-origin: center;
}

.pin {
    transform: rotate(calc((0 - (var(--pct) / 100 * 180) + (360 * (var(--pct) / 100) * var(--progress) / 100)) * 1deg));
    transform-origin: center;
    transition: transform 250ms cubic-bezier(0.3, 0, 0.2, 1);
}

.pin-outer {
    fill: #007bee;
    filter: drop-shadow(0 0 1rem #007bee);
    stroke: #007bee;
    stroke-linejoin: round;
    stroke-width: 3;
}

.pin-inner {
    fill: #fff;
    filter: blur(0.1875rem);
}

.pin-border {
    fill: none;
    stroke: #202328;
    stroke-linejoin: round;
    stroke-width: 8;
}

.start-button {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.start-button button {
    align-items: center;
    border: 0;
    background:
        radial-gradient(100% 50% at 50% 0%, rgba(165, 212, 255, 0.33), rgba(0, 0, 0, 0)),
        radial-gradient(100% 50% at 50% 100%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
    background-color: #007bee;
    border-radius: 1.625rem;
    box-shadow:
        inset 0 0.125rem 0.0625rem rgba(165, 212, 255, 0.33),
        inset 0 -0.125rem 0.0625rem rgba(0, 0, 0, 0.25),
        inset 0 -0.375rem 1.5rem rgba(0, 0, 0, 0.2),
        0 0.125rem 0.375rem -0.25rem var(--color, rgba(0, 0, 0, 0.75)),
        0 0.125rem 0.5rem -0.3125rem rgba(0, 0, 0, 0.75),
        0 0.25rem 1rem -0.5rem var(--color, rgba(0, 0, 0, 0.5));
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Big Shoulders Text', monospace;
    letter-spacing: 0.1em;
    font-size: 1.5rem;
    height: 3.25rem;
    justify-content: center;
    margin-top: 65%;
    min-width: 9rem;
    outline-offset: 0.125rem;
    padding-inline: 1em;
    position: relative;
    text-transform: uppercase;
    text-shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.2);
    transition:
        background-color 200ms ease-in-out,
        transform 150ms cubic-bezier(0.3, 0, 0.2, 1);
}

.start-button button:hover,
.start-button button:focus-visible {
    background-color: #188fff;
}

.start-button button:focus-visible {
    outline: 0.125rem solid #fff;
}

.start-button button::before {
    animation: glow-pulse infinite 2s cubic-bezier(0.37, 0, 0.63, 1);
    border-radius: 1.625rem;
    box-shadow: 0 0 2.25rem #007bee;
    content: '';
    inset: 0;
    position: absolute;
    z-index: -1;
}

@keyframes glow-pulse {
    0%,
    100% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.75;
    }
}

.start-button button[disabled] {
    background-color: #202328;
    cursor: default;
    opacity: 0.5;
}

.start-button button[disabled]::before {
    animation: none;
    opacity: 0;
}

.start-button button:not(:disabled):active {
    transform: scale(0.98);
    transition-duration: 67ms, 67ms;
}

[data-body-state='loaded'] .loading-svg {
    transform: scale(1.5);
}

/* --------------------------------------------- */
/* Configurator                                  */
/* --------------------------------------------- */

.configurator {
    /* background: oklch(50% 0.5 210 / 50%); */
    background:
        linear-gradient(
                -45deg,
                rgba(0, 0, 0, 0.04) 10%,
                transparent 10%,
                transparent 40%,
                rgba(0, 0, 0, 0.04) 40%,
                rgba(0, 0, 0, 0.04) 60%,
                transparent 60%,
                transparent 90%,
                rgba(0, 0, 0, 0.04) 90%
            )
            repeat 0px 0px/8px 8px,
        radial-gradient(circle, #575c60 0%, #34363a 100%);
    clip-path: circle(0%);
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
    text-box-trim: trim-both;
    transition: all var(--view-transition-duration) var(--cubic-ease);
}

[data-body-state='loaded'] .configurator,
[data-body-state='tour'] .configurator {
    clip-path: circle(75%);
}

.dopple {
    height: calc(100% - 6.25rem);
    position: relative;
    transform: scale(1.25);
    transition: all var(--view-transition-duration) var(--cubic-ease);
    width: 100%;
}

[data-body-state='loaded'] .dopple {
    transform: scale(1);
}
[data-body-state='tour'] .dopple {
    transform: scale(1) translateY(-18%);
}

.config-menu {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    transform: translateY(100%);
    transition: all calc(var(--view-transition-duration) / 2) var(--cubic-ease);
    width: 100%;
}
[data-body-state='loaded'] .config-menu {
    transform: translateY(0);
    transition-delay: calc(var(--view-transition-duration) / 2);
}
.nav {
    --highlight-color: var(--menu-bg);
    --line-color: #56688155;
    --top-padding: 1rem;
    display: flex;
    height: 3.75rem;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.nav::after,
.nav::before {
    align-self: flex-end;
    border-bottom: 1px solid var(--line-color);
    content: '';
    display: block;
    height: 10px;
    width: 16rem;
}
.nav::after {
    mask-image: linear-gradient(to left, transparent, black);
}
.nav::before {
    mask-image: linear-gradient(to right, transparent, black);
}
.nav-left,
.nav-right,
.nav-middle {
    flex: 0 0 auto;
}
.nav-right {
    transform: scaleX(-100%);
}
.nav-middle {
    align-items: center;
    background: var(--menu-bg);
    border-top: 1px solid var(--line-color);
    display: flex;
    position: relative;
    z-index: 1;
}
.nav-middle::before {
    background: radial-gradient(ellipse at 50% -20%, #898d9244 0%, transparent 70%);
    content: '';
    display: block;
    height: 0.625rem;
    left: 0;
    right: 0;
    position: absolute;
    top: 0;
}
.nav-items {
    background: linear-gradient(to bottom, #0005, #0001);
    border: 1px solid var(--line-color);
    border-radius: 0.75rem;
    display: none;
    flex-wrap: nowrap;
    list-style-type: none;
    margin: var(--top-padding) 0 0;
    padding: 0.25rem;
    position: relative;
}
.nav-items::before {
    background: radial-gradient(ellipse at 50% -20%, #55677f44 0%, transparent 70%);
    content: '';
    display: block;
    height: 1rem;
    left: 0;
    right: 0;
    position: absolute;
    top: 100%;
}
.nav-item {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    height: 2rem;
    letter-spacing: 0.0625em;
    line-height: 1;
    padding: 0.125rem 1.5rem 0;
    position: relative;
    text-shadow: 0 0.0625rem 0.0625rem #000;
    text-transform: uppercase;
    transition: color 350ms var(--cubic-ease-out);
}
.nav-item[data-active='true'],
.nav-item:hover,
.nav-item:focus-visible {
    color: var(--text);
}
.nav-item-highlight {
    background: linear-gradient(0, #61708377 0%, #69758544 100%);
    clip-path: inset(0.25rem var(--offset-r) 0.25rem var(--offset-l) round 0.5rem);
    inset: 0;
    opacity: 0.75;
    position: absolute;
    pointer-events: none;
    transition: all 350ms var(--cubic-ease-out);
}
.nav-items:has([data-active='true']:hover) .nav-item-highlight {
    opacity: 1;
}
.mobile-nav {
    align-items: center;
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
}
.mobile-nav-button {
    align-items: center;
    background: linear-gradient(180deg, #fff2 0%, #0004), #353941;
    box-shadow:
        0 0 0 0.1875rem var(--menu-bg),
        0 0.25rem 0.75rem -0.3125rem #eef8,
        0 0.1875rem 0.3125rem 0.25rem #eef1,
        0 -0.1875rem 0.3125rem 0.25rem #0006,
        0 0.1875rem 0.125rem #eef6;
    border: 0.125rem;
    border-radius: 1.5rem;
    color: #aeb1b9;
    display: flex;
    height: 2.25rem;
    justify-content: center;
    transition: all 350ms var(--cubic-ease-out);
    width: 2.25rem;
}
.mobile-nav-button:disabled {
    background: linear-gradient(180deg, #fff2 0%, #0004), #35394122;
    color: #54565c;
    cursor: default;
}
.mobile-nav-items {
    display: grid;
    place-items: center;
}
.mobile-nav-item {
    color: #c4c7ce;
    grid-area: 1 / 1 / 2 / 2;
    text-shadow: 0 0.0625rem 0.0625rem #000;
    transition: all var(--dialog-transition-duration) var(--cubic-ease);
}
.mobile-nav-item:not([data-active='true']) {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85);
}
.mobile-nav-icon {
    fill: none;
    filter: drop-shadow(0 -1px 1px #000);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.decorator-line {
    fill: var(--menu-bg);
    stroke: var(--line-color);
}
.decorator-slants {
    fill: var(--highlight-color);
    stroke: var(--line-color);
}
.config-sections {
    background: var(--menu-bg);
    /* box-shadow: inset 0 0 1rem red; */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0.5rem;
    position: relative;
}
.config-sections::after,
.config-sections::before {
    --smooth-fade:
        hsl(217, 11%, 14%) 0%, hsla(217, 11%, 14%, 0.9) 0.7%, hsla(217, 11%, 14%, 0.801) 2.5%,
        hsla(217, 11%, 14%, 0.704) 5.6%, hsla(217, 11%, 14%, 0.609) 9.7%, hsla(217, 11%, 14%, 0.519) 14.8%,
        hsla(217, 11%, 14%, 0.432) 20.8%, hsla(217, 11%, 14%, 0.351) 27.6%, hsla(217, 11%, 14%, 0.276) 35.1%,
        hsla(217, 11%, 14%, 0.208) 43.2%, hsla(217, 11%, 14%, 0.148) 51.9%, hsla(217, 11%, 14%, 0.097) 60.9%,
        hsla(217, 11%, 14%, 0.056) 70.4%, hsla(217, 11%, 14%, 0.025) 80.1%, hsla(217, 11%, 14%, 0.007) 90%,
        hsla(217, 11%, 14%, 0) 100%;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 1.75rem;
    z-index: 1;
}
.config-sections::after {
    background-image: linear-gradient(to left, var(--smooth-fade));
    right: 0;
}
.config-sections::before {
    background-image: linear-gradient(to right, var(--smooth-fade));
    left: 0;
}
[data-section] {
    align-items: center;
    display: flex;
    grid-area: 1 / 1 / 2 / 2;
    max-width: 100%;
    opacity: 0;
    overflow-x: auto;
    padding: 1rem 0;
    scrollbar-width: thin;
    transform: translateY(1rem);
    transition: all 350ms var(--cubic-ease-out);
    visibility: hidden;
}
.config-menu:has([data-section-target='body'][data-active='true']) [data-section='body'],
.config-menu:has([data-section-target='frame'][data-active='true']) [data-section='frame'],
.config-menu:has([data-section-target='decals'][data-active='true']) [data-section='decals'],
.config-menu:has([data-section-target='handlebars'][data-active='true']) [data-section='handlebars'],
.config-menu:has([data-section-target='seat'][data-active='true']) [data-section='seat'],
.config-menu:has([data-section-target='wheels'][data-active='true']) [data-section='wheels'],
.config-menu:has([data-section-target='add-ons'][data-active='true']) [data-section='add-ons'] {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 100ms;
}
[data-section] > *,
[data-section] > .swatches,
[data-section] > .pills {
    margin-left: auto;
    margin-right: auto;
}
.config-section-groups {
    align-items: center;
    display: flex;
    gap: 2rem;
    padding: 0 1.5rem;
}
.config-section-group {
    display: flex;
}
.config-section-group-title {
    color: var(--text-muted);
    padding-top: 0.875rem;
    text-shadow: 0 0.0625rem 0.0625rem #000;
    white-space: nowrap;
}
.swatches,
.pills {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    list-style-type: none;
    margin: 0;
    padding: 0 1.5rem 1.5rem;
}
:where(.swatch, .pill) {
    position: relative;
}
:where(.swatch, .pill) label {
    align-items: center;
    border-radius: 3rem;
    box-shadow:
        0 0 0 0.1875rem var(--menu-bg),
        0 0.25rem 0.75rem -0.3125rem var(--color, #fff8),
        0 0.1875rem 0.3125rem 0.25rem #fff1,
        0 -0.1875rem 0.3125rem 0.25rem #0006,
        0 0.1875rem 0.125rem #fff6;
    cursor: pointer;
    display: flex;
    height: 2.25rem;
}
.swatch label {
    width: 2.25rem;
}
.tour input,
.config-section input {
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.swatch-handle,
.pill-handle {
    align-items: center;
    background: linear-gradient(180deg, #fff2 0%, #0004), var(--img, none), var(--color, none);
    border-radius: 3rem;
    /*   box-shadow: inset 0 0 0 0.0625rem #0002; */
    display: inline-flex;
    height: 100%;
    position: relative;
    transition: all 250ms var(--cubic-ease-out);
    width: 100%;
}
.swatch-handle {
    background-size: cover;
    background-position: 50% 50%;
}
.pill-handle {
    background: linear-gradient(180deg, #fff2 0%, #0004);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.0625em;
    padding: 0 1.5rem;
    text-shadow: 0 0.0625rem 0.0625rem #000;
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
}
:where(.swatch-handle, .pill-handle):active {
    transform: scale(0.95);
}
:where(.swatch, .pill)::after,
:where(.swatch, .pill)::before {
    border-radius: 1rem;
    bottom: -1.5rem;
    content: '';
    display: block;
    height: 0.75rem;
    left: 50%;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: all 250ms var(--cubic-ease-out);
    width: 0.75rem;
}
:where(.swatch, .pill)::after {
    background: radial-gradient(circle at center, #fff, var(--primary));
    box-shadow:
        0 0 0.75rem 0.0625rem var(--primary),
        0 0 0.375rem var(--primary);
    opacity: 0;
}
:where(.swatch, .pill)::before {
    background: linear-gradient(180deg, #fff2 0%, #0006), #0006;
    box-shadow:
        0 -0.125rem 0.125rem #0006,
        0 -0.1875rem 0.375rem #0006,
        0 0.125rem 0.125rem #fff2,
        0 0.1875rem 0.375rem #fff2;
}
:where(.swatch, .pill):has(:checked) .pill-handle {
    color: var(--text);
}
:where(.swatch, .pill):has(:checked)::after {
    opacity: 1;
}
.logo {
    background: red;
    background:
        radial-gradient(circle at center, transparent 20%, #000 22%) 50% 50% / 0.5rem 0.5rem,
        radial-gradient(
                circle at center,
                hsl(0deg 0% 100%) 0%,
                hsl(0deg 0% 89%) 1.4%,
                hsl(0deg 0% 77%) 5.6%,
                hsl(0deg 0% 63%) 13.3%,
                hsl(0deg 0% 45%) 27.3%,
                hsl(0deg 0% 0%) 70%
            )
            center / 100% 100%;
    /*   mask:
	radial-gradient(circle at center, transparent 24%, #000 26%) 50% 50% / 0.5rem 0.5rem,
	radial-gradient(circle at center, hsl(0deg 0% 100%) 0%, hsl(0deg 0% 89%) 1.4%, hsl(0deg 0% 77%) 5.6%, hsl(0deg 0% 63%) 13.3%, hsl(0deg 0% 45%) 27.3%, hsl(0deg 0% 0%) 70%) center / 100% 100%;
  mask-mode: luminance; */
    height: 48rem;
    width: 64rem;
}

.backdrop {
    inset: 5.75rem 0 0 0;
    position: fixed;
}

.dots-overlay {
    --blur-size: 50vw;
    /*   background: radial-gradient(circle at center, #000 20%, transparent 22%) 50% 50% / 0.5rem 0.5rem; */
    inset: 0;
    mask: radial-gradient(circle at center, #000 20%, transparent 20%) 50% 50% / 10px 10px;
    /*   padding: calc(var(--blur-size) * 2); */
    position: absolute;
}

/* ------------- */
/* Actions       */
/* ------------- */
.actions {
    --initial-delay: 1.5s;
    --incremental-delay: 0s;
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    justify-content: center;
    left: 0;
    padding: 0.5rem;
    pointer-events: none;
    position: fixed;
    transform: translateX(7rem);
    width: 100%;
    z-index: 1;
}
[data-body-state='loaded'] .actions {
    transform: translateX(0);
    transition: transform 350ms var(--cubic-ease-out);
    transition-delay: 1.5s;
}
.action-button-wrapper {
    pointer-events: initial;
}
.action-button,
.dialog-action-button,
.tour-action-button {
    align-items: center;
    background-color: #202328;
    background-image: linear-gradient(to bottom, #34383fee, #202328ee);
    border: none;
    border-radius: 2rem;
    box-shadow:
        inset 0 0 0 1px #ffffff28,
        inset 0 0.125rem 0 -0.0625rem #fff3,
        0 0.0625rem 0.0625rem #0002,
        0 0.125rem 0.1875rem #0002,
        0 0.25rem 0.5rem #0002;
    color: #fff;
    display: flex;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    text-shadow: 0 0.0625rem 0.0625rem #000;
    transition: all 250ms var(--cubic-ease-out);
    white-space: nowrap;
}
@media (pointer: fine) {
    .action-button:hover,
    .action-button:focus-visible,
    .tour-action-button:hover,
    .tour-action-button:focus-visible,
    .dialog-action-button:hover,
    .dialog-action-button:focus-visible {
        background-color: #89909c;
    }
}
.action-button:active,
.tour-action-button:active,
.dialog-action-button:active {
    transform: scale(0.97);
}
.action-button:disabled,
.dialog-action-button:disabled,
.tour-action-button:disabled {
    cursor: default;
    opacity: 0.6;
}
.action-button:disabled:hover,
.action-button:disabled:focus-visible,
.dialog-action-button:disabled:hover,
.dialog-action-button:disabled:focus-visible,
.tour-action-button:disabled:hover,
.tour-action-button:disabled:focus-visible {
    background-color: #202328;
}
dialog .dialog-action-button,
.tour-action-button {
    border-radius: 0.5rem;
    padding-top: 0.0625rem;
}
.tour-action-button .line-icon {
    margin-top: -0.0625rem;
}
.tour-action-button .line-icon {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.action-button-wrapper {
    transition: all 350ms var(--cubic-ease-out);
    transition-delay: var(--initial-delay);
}
.action-button-wrapper:not(:first-child) {
    transform: translateX(11rem);
}
.action-button-wrapper:not(:first-child) .action-button {
    width: 9.5rem;
}
.actions[data-state='open'] .action-button-wrapper {
    --incremental-delay: 25ms;
}
.actions[data-state='open'] .action-button-wrapper:not(:first-child)  {
    transform: translateX(0);
}
.action-button-wrapper:nth-child(2) {
    transition-delay: calc(var(--initial-delay));
}
.action-button-wrapper:nth-child(3) {
    transition-delay: calc(var(--initial-delay) + calc(var(--incremental-delay) * 1));
}
.action-button-wrapper:nth-child(4) {
    transition-delay: calc(var(--initial-delay) + calc(var(--incremental-delay) * 2));
}
.action-button-wrapper:nth-child(5) {
    transition-delay: calc(var(--initial-delay) + calc(var(--incremental-delay) * 3));
}
.action-button-wrapper:nth-child(6) {
    transition-delay: calc(var(--initial-delay) + calc(var(--incremental-delay) * 4));
}
.action-button-wrapper:nth-child(7) {
    transition-delay: calc(var(--initial-delay) + calc(var(--incremental-delay) * 5));
}
.action-button-wrapper:nth-child(8) {
    transition-delay: calc(var(--initial-delay) + calc(var(--incremental-delay) * 6));
}
.action-button-text {
    padding-top: 0.0625rem;
}
.line-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.25;
}
.action-button .line-icon {
    filter: drop-shadow(0 0.0625rem 0.0625rem #000);
}
[data-dialog] {
    background: var(--menu-bg);
    border: 0;
    border-radius: 1rem;
    box-shadow:
        inset 0 0 0 1px #ffffff28,
        inset 0 0.125rem 0 -0.0625rem #fff2,
        inset 0 0.75rem 0.75rem -0.75rem #fff2,
        inset 0 -0.75rem 0.75rem -0.75rem #0005,
        0 0.0625rem 0.0625rem #0002,
        0 0.125rem 0.1875rem #0002,
        0 0.25rem 0.5rem #0002;
    color: var(--text-muted);
    margin: auto;
    max-width: calc(100% - 1.5rem);
    opacity: 0;
    padding: 1.5rem;
    scrollbar-width: thin;
    transform: scale(0.96);
    transition:
        display var(--dialog-transition-duration) var(--cubic-ease-out) allow-discrete,
        opacity var(--dialog-transition-duration) var(--cubic-ease-out),
        overlay var(--dialog-transition-duration) var(--cubic-ease-out) allow-discrete,
        transform var(--dialog-transition-duration) var(--cubic-ease-out);
    width: 32rem;
}
[data-dialog]:open {
    opacity: 1;
    transform: scale(1);
}
@starting-style {
    [data-dialog]:open {
        opacity: 0;
        transform: scale(0.96);
    }
}
[data-dialog]::backdrop {
    background-color: transparent;
    transition:
        background-color var(--dialog-transition-duration),
        display var(--dialog-transition-duration) allow-discrete,
        overlay var(--dialog-transition-duration) allow-discrete;
}
[data-dialog]:open::backdrop {
    background: hsl(220deg 30% 3% / 0.45);
}
@starting-style {
    [data-dialog]:open::backdrop {
        background-color: transparent;
    }
}
[data-dialog-action='close'] {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 0.25rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-family: inherit;
    justify-content: center;
    margin: 0;
    padding: 0.25rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: all 150ms ease;
    z-index: 1;
}
[data-dialog-action='close']:hover,
[data-dialog-action='close']:focus-visible {
    background: var(--menu-bg-muted);
    color: var(--text);
}
[data-dialog-action='close'] svg {
    fill: none;
    height: 1.25rem;
    max-width: unset;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1.25rem;
}
[data-dialog-action='close']:hover svg,
[data-dialog-action='close']:focus-visible svg {
    stroke: currentColor;
}
.dialog-heading {
    color: var(--text);
    font-size: 1.5rem;
    margin: 0;
    padding: 0 2rem 0 0;
}
.dialog-description {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0.5rem 0 1rem;
}
.dialog-action-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}
.dopple-logo {
    border-radius: 0.125rem;
    left: 0.875rem;
    outline-width: 0.125rem;
    position: fixed;
    top: 0.875rem;
    transition: all 200ms ease-in-out;
    width: 5rem;
    z-index: 2;
}
.dopple-logo:hover,
.dopple-logo:focus-visible {
    filter: drop-shadow(0 0 0.375rem #4ca8ffbb);
}
.dopple-logo:focus-visible {
    outline-offset: 0.25rem;
    outline: 0.125rem solid #fff;
}
.dopple-logo path {
    fill: #fffb;
    transition: fill 200ms ease-in-out;
}
.dopple-logo:hover path,
.dopple-logo:focus-visible path {
    fill: #fff;
}
.dopple-logo-icon {
    fill: #a7abb40c;
    height: auto;
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -55%);
    width: min(100vh, 120vw);
}
@media (min-width: 68rem) {
    .dopple-logo {
        left: 1rem;
        top: 1rem;
        width: 6rem;
    }
    .actions {
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
    }
    .actions,
    [data-body-state='loaded'] .actions {
        transform: translateX(0);
        transition-duration: 0s;
        transition-delay: 0s;
    }
    .action-button-wrapper {
        --incremental-delay: 25ms;
        transform: translateY(-3.5rem);
        transition: all 1s var(--cubic-ease-out);
    }
    .action-button-wrapper:first-child {
        display: none;
    }
    .action-button-wrapper:not(:first-child) {
        transform: translateY(-3.5rem);
    }
    [data-body-state='loaded'] .action-button-wrapper {
        transform: translateY(0);
    }
    .action-button-wrapper:not(:first-child) .action-button {
        width: auto;
    }
}

/* Share (Mini UI) */
#dopple-share-link {
    background: var(--menu-bg-muted);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
    height: 8rem;
    line-height: 1.5;
    padding: 0.75rem 1rem;
    resize: none;
    width: 100%;
}

/* Controls & Gestures (Mini UI) */
[data-dialog='controls'] {
    width: 32rem;
}
[data-controls-section='touch'],
[data-controls-section='mouse'] {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 1.875rem;
    gap: 2rem;
    justify-content: center;
    margin: 1.5rem 0 0;
    position: relative;
    text-align: center;
    user-select: none;
    z-index: 1;
}
[data-controls-section='mouse'] {
    display: none;
}
.control-icon {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    gap: 0.5rem;
    margin: 0;
    width: 3rem;
}
@media (hover: hover) {
    [data-controls-section='touch'] {
        display: none;
    }
    [data-controls-section='mouse'] {
        display: flex;
    }
}
[data-controls-section='keyboard'] {
    display: none;
}
.control-keyboard-item {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    gap: 0.5rem;
    margin: 0 auto;
    text-align: center;
}
.control-keyboard-item,
.control-icon img {
    max-width: 100%;
}
.controls-dialog-divider {
    display: none;
}
@media (min-width: 34rem) {
    [data-controls-section='keyboard'] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
    .controls-dialog-divider {
        background: var(--border);
        border: 0;
        display: block;
        height: 1px;
        margin: 1.5rem 0;
    }
}
@media (min-width: 64rem) {
    .control-icon {
        width: 3.75rem;
    }
}

/* Snapshot (Mini UI) */
[data-dialog='snapshot'] {
    width: 26rem;
}
.snapshot-options {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    gap: 0.75rem 1.5rem;
    margin: 1rem 0;
}
.snapshot-option {
    flex: 1 1 auto;
}
.snapshot-option label {
    color: var(--text-muted);
    cursor: pointer;
    display: inline-block;
    width: 3.5rem;
}
.snapshot-input-wrapper {
    align-items: center;
    display: flex;
}
.snapshot-input-postfix,
.snapshot-input {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    height: 2.25rem;
}
.snapshot-input {
    background: var(--menu-bg);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    color: var(--text);
    flex: 1 1 auto;
    font-family: inherit;
    font-size: inherit;
    max-width: 100%;
    padding: 0.0625rem 0.625rem 0;
    position: relative;
    width: 100%;
}
.snapshot-input-postfix {
    align-items: center;
    background: #ffffff08;
    border-bottom-left-radius: 0;
    border-left: 0;
    border-top-left-radius: 0;
    color: var(--text-muted);
    display: flex;
    padding: 0 0.625rem;
    white-space: nowrap;
}

/* Augmented Reality (Mini UI)*/
#dopple-ar-qr-code {
    margin: 0 auto;
    max-width: 100%;
}
[data-dialog='ar'] {
    width: 24rem;
}

/* Tour */
.tour {
    background: var(--menu-bg);
    border-top: 1px solid var(--border);
    bottom: 0;
    box-shadow:
        0 0 0.125rem 0.125rem #0003,
        0 0 0.75rem 0.75rem #0001;
    left: 0;
	isolation: isolate;
    position: fixed;
	transform: translateY(100%);
	transition: all 500ms var(--cubic-ease-out);
	visibility: hidden;
    width: 100%;
}
[data-body-state='tour'] .tour {
	transform: translateY(0);
	visibility: visible;
}
.tour h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.tour p,
.tour li,
#tour-current-step,
.toggle-switch-text {
    font-size: 0.875rem;
}
.tour p,
.tour li {
    color: var(--text-muted);
}
.tour li:not(:last-child) {
    margin-bottom: 0.375rem;
}
.tour-steps,
.tour-actions {
    max-width: 44rem;
    margin: 0 auto;
}
.tour-steps {
    display: grid;
    padding: 1.5rem;
}
.tour-actions,
.tour-actions > div {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}
.tour-actions {
    padding: 0 1.5rem 1.5rem;
}
.tour-actions > div .action-button-text {
    display: none;
}
[data-tour-step] {
    grid-area: 1 / 1 / 2 / 2;
    font-size: 1.25rem;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 350ms var(--cubic-ease-out);
    visibility: hidden;
}
[data-tour-step][data-state='active'] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 100ms;
    visibility: visible;
}

.toggle-switches {
    display: flex;
    flex-direction: column;
}
.toggle-switch {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 0.75rem;
    margin-block: 0.375rem;
    position: relative;
}
.toggle-switch-handle,
.toggle-switch-handle::after {
    transition: all 200ms var(--cubic-ease);
}
.toggle-switch-handle {
    --glow: transparent;
    --radius: 0.375rem;
    background-color: #202328;
    background-image: linear-gradient(to bottom, #2c2f3566, #3b3f4866);
    border-radius: var(--radius);
    box-shadow:
        0 0 1rem -0.125rem var(--glow),
        inset 0 0 0 1px #ffffff28,
        inset 0 0.125rem 0 -0.0625rem #fff3,
        0 0.0625rem 0.0625rem #0002,
        0 0.125rem 0.1875rem #0002,
        0 0.25rem 0.5rem #0002;
    display: flex;
    flex: 0 0 auto;
    height: 1.5rem;
    outline-offset: 4px;
    position: relative;
    width: 2.5rem;
}
.toggle-switch-handle::after {
    background: linear-gradient(to bottom, #e4e5e9, #7e848d);
    border-radius: calc(var(--radius) - 0.125rem);
    box-shadow:
        inset 0 0 0 1px #fff6,
        0 0.0625rem 0.125rem #13151888;
    content: '';
    display: block;
    height: 1.125rem;
    left: 0.1875rem;
    position: absolute;
    top: 0.1875rem;
    transform: translateX(0);
    width: 1.125rem;
}
.toggle-switch input:checked ~ .toggle-switch-handle {
    --glow: #287ff8;
    background-color: var(--glow);
}
.toggle-switch input:checked ~ .toggle-switch-handle::after {
    transform: translateX(1rem);
}
table {
    border-collapse: collapse;
    width: 100%;
}
td, th {
    padding: 0.375rem 0.625rem;
    text-align: left;
    transition: all 100ms ease-in-out;
}
tr:not(:last-child) td,
tr:not(:last-child) th {
    border-bottom: 1px solid var(--border);
}
th {
    color: var(--text);
}
td {
    font-size: 0.875rem;
}
tr:hover td,
tr:hover th {
    background: #ffffff08;
    color: #fff;
}
@media (min-width: 48rem) {
    td, th {
        padding: 0.5rem 0.875rem;
    }
}

@media (min-width: 78rem) {
    .dopple {
        height: calc(100% - 7.5rem);
    }
    .mobile-nav {
        display: none;
    }
    .nav-items {
        display: flex;
    }
    .swatches,
    .pills {
        gap: 1rem;
        padding-bottom: 1.75rem;
    }
    :where(.swatch, .pill) label {
        height: 2.5rem;
    }
    .swatch label {
        width: 2.5rem;
    }
    :where(.swatch, .pill)::after,
    :where(.swatch, .pill)::before {
        bottom: -1.5rem;
    }
    .action-button,
    .dialog-action-button,
    .tour-action-button {
        height: 2.5rem;
        padding: 0 1.125rem;
    }
    .tour h2 {
        font-size: 1.625rem;
    }
    .tour p,
    .tour li,
    #tour-current-step,
    .toggle-switch-text {
        font-size: 1.125rem;
    }
    .tour-actions,
    .tour-actions > div {
        gap: 1.5rem;
    }
    .tour-action-button .line-icon {
        margin-left: 0;
        margin-right: 0;
    }
    .tour-action-button .line-icon:first-child {
        margin-left: -0.375rem;
    }
    .tour-action-button .line-icon:last-child {
        margin-right: -0.375rem;
    }
    .tour-actions > div .action-button-text {
        display: inline;
    }
}
@media (min-width: 87.5rem) {
    .swatches,
    .pills {
        padding-bottom: 2rem;
    }
    :where(.swatch, .pill) label {
        height: 3rem;
    }
    .swatch label {
        width: 3rem;
    }
    :where(.swatch, .pill)::after,
    :where(.swatch, .pill)::before {
        bottom: -1.75rem;
    }
}