@font-face {
    font-family: Archivo;
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(../media/09f44d58a7ba7137-s.07m3ipc68q_ge.woff2)format("woff2");
    unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: Archivo;
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(../media/ecb967cca72aaa3f-s.3pnix8lf_tss7.woff2)format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Archivo;
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(../media/113fa3cd4dc959e6-s.p.41entnodl3flq.woff2)format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Archivo;
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(../media/a2947afc6a06879b-s.1gyfqm5yhhzs7.woff2)format("woff2");
    unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: Archivo;
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(../media/651aaf1801011892-s.357dd_6abeqge.woff2)format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Archivo;
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(../media/75affa71d1e2f6a7-s.p.17-aodiw50953.woff2)format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Archivo Fallback;
    src: local(Arial);
    ascent-override: 88.96%;
    descent-override: 21.28%;
    line-gap-override: 0.0%;
    size-adjust: 98.7%
}

.vJPt9G_className {
    font-family: Archivo, Archivo Fallback
}

.vJPt9G_variable {
    --font-archivo: "Archivo", "Archivo Fallback"
}

@font-face {
    font-family: Archivo Black;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../media/316b6682b406c2db-s.1_k7aq_c5drf2.woff2)format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Archivo Black;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../media/5e4d537aaa9e154b-s.1ewykk74tw0il.woff2)format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Archivo Black Fallback;
    src: local(Arial);
    ascent-override: 70.78%;
    descent-override: 16.93%;
    line-gap-override: 0.0%;
    size-adjust: 124.05%
}

.HHuUba_className {
    font-family: Archivo Black, Archivo Black Fallback;
    font-style: normal;
    font-weight: 400
}

.HHuUba_variable {
    --font-archivo-black: "Archivo Black", "Archivo Black Fallback"
}

@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        :root,
        :host {
            --fiw-px: 0px;
            --iw-px: 0px
        }

        *,
        :before,
        :after,
        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-duration: initial;
            --tw-ease: initial
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: var(--font-archivo), "Helvetica Neue", Arial, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-archivo), "Helvetica Neue", Arial, sans-serif;
        --default-mono-font-family: var(--font-mono);
        --font-display: var(--font-archivo-black), "Helvetica Neue", Arial, sans-serif
    }
}

@layer base {

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

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring:where(:not(iframe)) {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .pointer-events-none {
        pointer-events: none
    }

    .visible {
        visibility: visible
    }

    .sr-only {
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        overflow: hidden
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .inset-0 {
        inset: 0
    }

    .inset-x-0 {
        inset-inline: 0
    }

    .top-0 {
        top: 0
    }

    .top-1\/2 {
        top: 50%
    }

    .top-\[90\%\] {
        top: 90%
    }

    .right-0 {
        right: 0
    }

    .bottom-0 {
        bottom: 0
    }

    .left-1\/2 {
        left: 50%
    }

    .z-20 {
        z-index: 20
    }

    .z-30 {
        z-index: 30
    }

    .z-50 {
        z-index: 50
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .h-\[4\.3vh\] {
        height: 4.3vh
    }

    .h-\[10\.4vh\] {
        height: 10.4vh
    }

    .h-dvh {
        height: 100dvh
    }

    .h-full {
        height: 100%
    }

    .min-h-\[32px\] {
        min-height: 32px
    }

    .min-h-\[64px\] {
        min-height: 64px
    }

    .w-full {
        width: 100%
    }

    .-translate-x-1\/2 {
        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-y-1\/2 {
        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .resize {
        resize: both
    }

    .grid-cols-\[1fr_auto_1fr\] {
        grid-template-columns: 1fr auto 1fr
    }

    .items-center {
        align-items: center
    }

    .gap-\[10px\] {
        gap: 10px
    }

    .justify-self-end {
        justify-self: flex-end
    }

    .justify-self-start {
        justify-self: flex-start
    }

    .overflow-hidden {
        overflow: hidden
    }

    .rounded-full {
        border-radius: 2147483647px
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-ink {
        border-color: var(--ink)
    }

    .bg-brand {
        background-color: var(--brand)
    }

    .px-\[2\.2vw\] {
        padding-inline: 2.2vw
    }

    .px-\[19px\] {
        padding-inline: 19px
    }

    .py-\[5px\] {
        padding-block: 5px
    }

    .text-\[12px\] {
        font-size: 12px
    }

    .text-\[13px\] {
        font-size: 13px
    }

    .text-\[14px\] {
        font-size: 14px
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .tracking-\[0\.04em\] {
        --tw-tracking: .04em;
        letter-spacing: .04em
    }

    .tracking-\[0\.06em\] {
        --tw-tracking: .06em;
        letter-spacing: .06em
    }

    .tracking-\[0\.08em\] {
        --tw-tracking: .08em;
        letter-spacing: .08em
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .text-brand-ink {
        color: var(--brand-ink)
    }

    .text-ink {
        color: var(--ink)
    }

    .uppercase {
        text-transform: uppercase
    }

    .italic {
        font-style: italic
    }

    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    .opacity-0 {
        opacity: 0
    }

    .opacity-100 {
        opacity: 1
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .filter {
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }
}

:root {
    --paper: #0c0c0e;
    --ink: #f2f2ee;
    --mute: #8a8984;
    --line: #26262a;
    --brand: #e63946;
    --brand-ink: #ffffff;
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark
}

html,
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans)
}

body {
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden
}

.wall {
    background-color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='37' viewBox='0 0 46 37'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.04' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='23' cy='21' r='4.5'/%3E%3Cpath d='M23 16.5 V14.5 c0-1.6 2.2-1.8 2.2-3.2'/%3E%3C/g%3E%3C/svg%3E");
    background-position: top;
    transition: background-color .9s
}

.rail {
    height: var(--rod);
    z-index: 200;
    position: absolute;
    transform: translateY(-50%)
}

.rail-tube {
    border-radius: calc(var(--rod) / 2);
    background: linear-gradient(90deg, #0000 32%, #28282647 37%, #2828261a 44%, #0000 50% 82%, #28282640 88%, #0000 93%), linear-gradient(#7d7e7a 0%, #c9cac5 18%, #fbfbf8 38%, #e2e3df 55%, #9c9d98 80%, #5f605c 100%);
    position: absolute;
    inset: 0 14px;
    box-shadow: 0 5px 6px -3px #14141238
}

.rail-end {
    width: 14px;
    height: 34px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.rail-end.l {
    left: 0
}

.rail-end.r {
    right: 0
}

.rail-plate {
    background: linear-gradient(90deg, #cfd0cc, #f1f1ee 45%, #d6d7d3);
    border-radius: 3px;
    position: absolute;
    inset: 0 3px;
    box-shadow: 0 1px 2px #1414122e, inset 0 0 0 .5px #14141226
}

.rail-plate:before,
.rail-plate:after {
    content: "";
    background: radial-gradient(circle at 35% 35%, #f4f4f2, #8e8f8b);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    position: absolute;
    left: 50%
}

.rail-plate:before {
    top: 4px
}

.rail-plate:after {
    bottom: 4px
}

.rail-cap {
    width: 10px;
    height: calc(var(--rod) + 5px);
    background: linear-gradient(#6c6d69 0%, #bdbeb9 22%, #f6f6f3 42%, #c4c5c0 62%, #7a7b77 100%);
    border-radius: 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.rail-end.l .rail-cap {
    left: 12px
}

.rail-end.r .rail-cap {
    right: 12px
}

.garment {
    transform-origin: 0 0;
    perspective: 900px;
    width: 0;
    height: 0;
    perspective-origin: 0 calc(var(--iw) * .6);
    position: absolute;
    top: 0;
    left: 0
}

.garment-card {
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 0
}

.garment-layer {
    width: var(--iw);
    pointer-events: none;
    position: absolute
}

.garment-piece {
    position: absolute;
    inset: 0
}

.garment-layer img {
    -webkit-user-drag: none;
    width: 100%;
    height: 100%;
    display: block
}

.focus {
    --fy: 12vh;
    --g-hem: 48px;
    --g-pill: 24px;
    --g-cta: 24px;
    --name-h: 32px;
    --pill-h: 32px;
    --cta-h: 16px;
    --stack: calc(var(--name-h) + var(--g-pill) + var(--pill-h) + var(--g-cta) + var(--cta-h));
    --fit-h: calc(100vh - max(4.3vh, 32px) - 16px - var(--fy) - var(--g-hem) - var(--stack));
    --fiw: min(45vh, 70vw, 100vw - 480px, var(--fit-h) / var(--stage));
    --fiw-px: var(--fiw);
    z-index: 40;
    position: absolute;
    inset: 0
}

@property --fiw-px {
    syntax: "<length>";
    inherits: true;
    initial-value: 0
}

.focus-backdrop {
    position: absolute;
    inset: 0
}

.focus-anchor {
    left: 50%;
    top: var(--fy);
    width: 0;
    height: 0;
    position: absolute
}

.focus-slide {
    filter: drop-shadow(0 8px 10px #1414121a);
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0
}

.fg {
    transform-origin: 0 0;
    perspective: 1200px;
    width: 0;
    height: 0;
    perspective-origin: 0 calc(var(--fiw) * .6);
    position: absolute;
    top: 0;
    left: 0
}

.fg-card {
    transform-origin: 0 0;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0
}

.fg-face {
    backface-visibility: hidden
}

.fg-layer {
    pointer-events: none;
    position: absolute
}

.fg-piece {
    position: absolute;
    inset: 0
}

.fg-layer img {
    -webkit-user-drag: none;
    width: 100%;
    height: 100%;
    display: block
}

.fg-shade {
    pointer-events: none;
    position: absolute;
    inset: 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

.fg-dye {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.focus-garment-area {
    left: calc(var(--fiw) * -.42);
    top: calc(var(--fiw) * -.06);
    width: calc(var(--fiw) * .84);
    height: calc(var(--fiw) * 1.24);
    position: absolute
}

.focus-arrow {
    top: calc(var(--fy) + var(--fiw) * .62);
    width: 48px;
    height: 48px;
    color: var(--ink);
    cursor: pointer;
    z-index: 5;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    margin-top: -24px;
    display: grid;
    position: absolute
}

.focus-arrow:before {
    content: "";
    border: 1px solid var(--ink);
    border-radius: 50%;
    transition: background-color .2s;
    position: absolute;
    inset: 4px
}

.focus-arrow:hover:before {
    background: #15151314
}

.focus-arrow svg {
    position: relative
}

.focus-arrow.l {
    left: 6vw
}

.focus-arrow.r {
    right: 6vw
}

.focus a:focus-visible,
.focus button:focus-visible,
header a:focus-visible,
header button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: 4px
}

.focus-arrow:focus-visible {
    border-radius: 50%
}

.focus-info {
    left: 0;
    right: 0;
    top: calc(var(--fy) + var(--fiw) * var(--stage) + var(--g-hem));
    pointer-events: none;
    justify-content: center;
    display: flex;
    position: absolute
}

.info {
    text-align: center;
    pointer-events: auto;
    justify-items: center;
    display: grid
}

.info-name {
    height: var(--name-h);
    max-width: calc(88vw - 128px);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: var(--name-h);
    letter-spacing: -.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
    margin: 0;
    overflow: hidden
}

.seg {
    margin-top: var(--g-pill);
    height: var(--pill-h);
    box-sizing: border-box;
    border: 1px solid var(--ink);
    border-radius: 999px;
    grid-template-columns: 1fr 1fr;
    width: 152px;
    padding: 3px;
    display: grid;
    position: relative
}

.seg-knob {
    background: var(--ink);
    border-radius: 999px;
    width: calc(50% - 3px);
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px
}

.seg-animate .seg-knob {
    transition: transform .25s
}

.seg-animate button {
    transition: color .25s
}

.seg button {
    z-index: 1;
    letter-spacing: .14em;
    color: var(--ink);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0;
    font-size: 10px;
    position: relative
}

.seg button.lit {
    color: var(--paper)
}

.seg button:after,
.info-cta:after {
    content: "";
    height: 48px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%)
}

.info-cta {
    margin-top: var(--g-cta);
    height: var(--cta-h);
    letter-spacing: .14em;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    font-size: 10.5px;
    line-height: 14px;
    text-decoration: none;
    position: relative
}

.info-cta:hover {
    opacity: .65
}

.focus-tags-wrap {
    left: calc(var(--fiw) * .44);
    top: calc(var(--fiw) * .08);
    --tag-string: 34px;
    --tag-step: 22px;
    position: absolute
}

.tags {
    pointer-events: none;
    gap: 6px;
    display: flex
}

.tag-hit {
    pointer-events: auto;
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    margin-inline: -1px;
    padding: 0;
    display: flex
}

.tagwrap {
    transform-origin: 50% 0;
    pointer-events: none;
    animation: 3.6s ease-in-out infinite sway;
    position: relative
}

.tagwrap .string {
    background: var(--ink);
    opacity: .55;
    width: 1px;
    margin-inline: auto
}

.tag {
    box-sizing: border-box;
    clip-path: polygon(22% 0, 78% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
    background: #ffffff24;
    width: 46px;
    height: 96px;
    padding: 1px;
    transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
    display: block;
    position: relative
}

.tag-face {
    box-sizing: border-box;
    background: var(--c);
    width: 100%;
    height: 100%;
    color: var(--fgc);
    letter-spacing: .12em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    clip-path: polygon(22% 0, 78% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
    padding: 13px 0 7px;
    font-size: 8.5px;
    display: block;
    position: relative
}

.tag-face:before {
    content: "";
    background: var(--paper);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    position: absolute;
    top: 4px;
    left: 50%;
    box-shadow: inset 0 0 0 1px #00000040
}

.tag-hit:hover .tag {
    transform: rotate(-7deg)
}

.tagwrap.on .tag {
    transform: translateY(14px)
}

.tagwrap.on .tag-face:after {
    content: "";
    background: currentColor;
    height: 2px;
    position: absolute;
    inset: auto 5px 5px
}

@keyframes sway {

    0%,
    to {
        transform: rotate(2.2deg)
    }

    50% {
        transform: rotate(-2.2deg)
    }
}

@media (max-width:640px) {
    .focus {
        --fiw: min(40vh, 58vw, var(--fit-h) / var(--stage));
        --fy: 14vh;
        --name-h: 48px
    }

    .info-name {
        white-space: normal;
        text-wrap: balance;
        max-width: calc(100vw - 32px);
        font-size: 20px;
        line-height: 24px
    }

    .focus-arrow {
        margin-top: 0;
        top: auto;
        bottom: calc(max(4.3vh, 32px) + 16px)
    }

    .focus-tags-wrap {
        left: calc(var(--fiw) * var(--tag-x) + 8px);
        top: calc(var(--fiw) * .12)
    }

    .tags {
        flex-direction: column;
        gap: 0
    }

    .tagwrap .string {
        height: 8px !important
    }

    .tagwrap:first-child .string {
        height: 20px !important
    }

    .tag-hit {
        width: 48px;
        margin-inline: 0
    }

    .tag {
        width: 28px;
        height: 64px
    }

    .tag-face {
        padding: 10px 0 4px;
        font-size: 7px
    }

    .tag-face:before {
        width: 4px;
        height: 4px;
        margin-left: -2px;
        top: 3px
    }

    .tagwrap.on .tag {
        transform: translateY(4px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .tagwrap {
        animation: none
    }
}

.marquee-track {
    white-space: pre;
    animation: 72s linear infinite marquee;
    display: inline-flex
}

@keyframes marquee {
    to {
        transform: translate(-50%)
    }
}

@media (prefers-reduced-motion:reduce) {
    .marquee-track {
        animation: none
    }
}

.rack {
    --iw: min(36vh, 22.5vw);
    --iw-px: 0;
    --rail-y: 27.2%;
    --rail-w: 74.5%;
    --rod: calc(var(--iw) * .03039 - 1px);
    --pitch: calc(var(--iw) * .33);
    position: absolute;
    inset: 0
}

@property --iw-px {
    syntax: "<length>";
    inherits: true;
    initial-value: 0
}

.rack {
    --iw-px: var(--iw)
}

.rack-rail {
    left: calc((100% - var(--rail-w)) / 2);
    width: var(--rail-w);
    top: var(--rail-y)
}

.rack-item {
    top: calc(var(--rail-y) - var(--rod) / 2);
    left: calc(50% + var(--i) * var(--pitch));
    width: 0;
    height: 0;
    position: absolute
}

.rack-layer {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0
}

.rack-caption {
    top: calc(var(--rail-y) + var(--iw) * var(--hem) + 28px);
    left: calc(50% + var(--i) * var(--pitch));
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: .01em;
    color: #66645e;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    transition: opacity .15s;
    position: absolute;
    transform: translate(-50%)
}

@media (max-width:640px) {
    .rack-caption {
        display: none
    }
}

.rack-garment {
    filter: drop-shadow(0 6px 8px #14141214)
}

.hook-contact-line {
    filter: blur(.4px);
    background: #1414124d;
    border-radius: 1px;
    width: 10px;
    height: 1.5px;
    position: absolute;
    top: 0;
    left: -5px
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}
/* Dark Theme Enhancements */
.tag-face {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.info-name {
    color: var(--ink);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.seg {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.info-cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: calc(var(--g-cta) + 10px) !important;
    min-width: 220px !important;
    height: 48px !important;
    padding: 0 28px !important;
    border-radius: 100px !important;
    text-decoration: none !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #f5f5f7 !important;
    cursor: pointer !important;
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
    background: linear-gradient(135deg, #181820 0%, #2e2e3a 25%, #606075 50%, #2e2e3a 75%, #181820 100%) !important;
    background-size: 250% 250% !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 8px 30px rgba(230, 57, 70, 0.45), 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
    animation: liquidMetalShift 5s ease-in-out infinite !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
    overflow: hidden !important;
    z-index: 50 !important;
}

@keyframes liquidMetalShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.info-cta:before {
    content: "" !important;
    position: absolute !important;
    inset: 2px !important;
    border-radius: 100px !important;
    background: linear-gradient(180deg, #202028 0%, #0d0d12 100%) !important;
    z-index: -1 !important;
}

.info-cta:after {
    display: none !important;
}

.info-cta:hover {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 14px 40px rgba(230, 57, 70, 0.65), 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}

.info-cta:active {
    transform: translateY(1px) scale(0.97) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 2px 5px rgba(0, 0, 0, 0.7) !important;
}