*,
:after,
:before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}

:after,
:before {
    --tw-content: ""
}

:host,
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

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;
    text-decoration: inherit
}

b,
strong {
    font-weight: bolder
}

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

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

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

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

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

progress {
    vertical-align: baseline
}

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

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

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

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0
}

fieldset,
legend {
    padding: 0
}

menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

    input::-moz-placeholder,
    textarea::-moz-placeholder {
        opacity: 1;
        color: #9ca3af
    }

    input::placeholder,
    textarea::placeholder {
        opacity: 1;
        color: #9ca3af
    }

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

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

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

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

@font-face {
    font-family: Figtree;
    src: url(../assets/fonts/Figtree-VariableFont_wght.ttf) format("truetype-variations"), url(../assets/fonts/Figtree-VariableFont_wght.ttf) format("truetype");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap
}

:root {
    color-scheme: light;
    --color-cream: 253 248 240;
    --color-sand: 255 243 220;
    --color-line: 232 217 194;
    --color-ink: 43 21 8;
    --color-footer: 34 26 22;
    --color-ink-soft: 90 66 50;
    --color-maroon: 140 29 24;
    --color-maroon-dark: 107 21 18;
    --color-saffron: 194 65 12;
    --color-saffron-dark: 151 51 9;
    --color-flame-tint: 250 240 236;
    --color-marigold: 242 169 59;
    --color-marigold-soft: 252 227 174;
    --color-cta-start: 239 79 95;
    --color-cta-end: 245 158 66;
    --color-cta-start-hover: 224 64 80;
    --color-cta-end-hover: 232 144 58;
    --color-topic-idol: 140 29 24;
    --color-topic-aarti: 166 57 11;
    --color-topic-modak: 138 81 22;
    --color-topic-eco: 31 107 59;
    --color-topic-visarjan: 31 78 121;
    --color-admin-bg: 244 245 247;
    --color-admin-surface: 255 255 255;
    --color-admin-line: 216 220 224;
    --color-admin-ink: 26 29 33;
    --color-admin-ink-soft: 91 101 112;
    --color-admin-accent: 194 65 12;
    --color-admin-focus: 32 78 138;
    --color-admin-pending: 138 90 0;
    --color-admin-approved: 31 107 59;
    --color-admin-rejected: 163 42 34;
    --color-golu-deep: 38 17 14;
    --color-golu-warm: 246 204 148;
    --color-golu-ivory: 250 245 236;
    --color-silk-saffron: 180 83 9;
    --color-silk-green: 31 107 59;
    --color-silk-crimson: 159 24 42;
    --color-silk-purple: 91 42 107;
    --color-silk-teal: 22 94 94
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem
}

body {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-cream)/var(--tw-bg-opacity, 1));
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body,
h1,
h2,
h3 {
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    --tw-text-opacity: 1
}

h1,
h2,
h3 {
    font-weight: 700;
    color: rgb(var(--color-maroon)/var(--tw-text-opacity, 1));
    text-wrap: balance
}

:focus-visible {
    border-radius: .125rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-saffron)/var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: rgb(var(--color-cream)/1)
}

.admin-page :focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-admin-ink-soft)/var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-color: rgb(var(--color-admin-bg)/1)
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    :after,
    :before {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

[data-show-in][data-show-in],
[hidden][hidden] {
    display: none
}

.container {
    width: 100%
}

@media (min-width:640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width:1536px) {
    .container {
        max-width: 1536px
    }
}

.container-page {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem
}

@media (min-width:640px) {
    .container-page {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

@media (min-width:1024px) {
    .container-page {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

.\!section {
    padding-top: 3rem;
    padding-bottom: 3rem
}

@media (min-width:768px) {
    .\!section {
        padding-top: 5rem;
        padding-bottom: 5rem
    }
}

.section {
    padding-top: 3rem;
    padding-bottom: 3rem
}

@media (min-width:768px) {
    .section {
        padding-top: 5rem;
        padding-bottom: 5rem
    }
}

.section-band {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.section-head {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    max-width: 42rem;
    text-align: left
}

@media (min-width:768px) {
    .section-head {
        margin-bottom: 3rem;
        text-align: center
    }
}

.section-actions {
    margin-top: 2.5rem;
    text-align: left
}

@media (min-width:768px) {
    .section-actions {
        text-align: center
    }
}

.display-title {
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 800
}

@media (min-width:640px) {
    .display-title {
        font-size: 3rem;
        line-height: 1.2
    }
}

.section-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

@media (min-width:640px) {
    .section-title {
        font-size: 2.25rem;
        line-height: 2.5rem
    }
}

@media (min-width:768px) {
    .section-title {
        font-size: 3rem;
        line-height: 1
    }
}

.card-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600
}

@media (min-width:768px) {
    .card-title {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

.\!body,
.body {
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.625;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.\!body,
.body,
.body-sm {
    font-weight: 400;
    --tw-text-opacity: 1
}

.body-sm {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1.625;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.\!caption,
.caption {
    line-height: 1rem;
    font-weight: 400;
    line-height: 1.5
}

.\!caption,
.caption,
.meta-label {
    font-size: .75rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.meta-label {
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em
}

.countdown-digit {
    display: block;
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 800;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
}

@media (min-width:640px) {
    .countdown-digit {
        font-size: 1.5rem;
        line-height: 2rem
    }
}

.stat-number {
    display: block;
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

@media (min-width:768px) {
    .stat-number {
        font-size: 1.875rem;
        line-height: 2.25rem
    }
}

.stat-label {
    margin-top: .375rem;
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
    line-height: 1.375;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.eyebrow {
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
}

.eyebrow,
.eyebrow-quiet {
    margin-bottom: .5rem;
    display: block;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    --tw-text-opacity: 1
}

.eyebrow-quiet {
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.section-intro {
    margin-left: auto;
    margin-right: auto;
    margin-top: .5rem;
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.625;
    color: rgb(var(--color-ink-soft)/.8)
}

@media (min-width:768px) {
    .section-intro {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

.\!btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

@media (min-width:768px) {
    .\!btn {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

@media (min-width:768px) {
    .btn {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

@media (min-width:768px) {
    .btn-primary {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.btn-primary:disabled,
.btn-primary[aria-disabled=true] {
    cursor: not-allowed
}

    .btn-primary:disabled,
    .btn-primary:disabled:hover,
    .btn-primary[aria-disabled=true],
    .btn-primary[aria-disabled=true]:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-line)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
    }

.btn-primary:disabled,
.btn-primary[aria-disabled=true] {
    background-image: none
}

.btn-primary {
    overflow: hidden;
    border-width: 2px;
    border-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    background-image: linear-gradient(90deg, rgb(var(--color-cta-start)), rgb(var(--color-cta-end)));
    background-origin: border-box
}

    .btn-primary:hover {
        background-image: linear-gradient(90deg, rgb(var(--color-cta-start-hover)), rgb(var(--color-cta-end-hover)))
    }

.text-gradient-cta {
    background-image: linear-gradient(90deg, rgb(var(--color-cta-start)), rgb(var(--color-cta-end)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

@media (min-width:768px) {
    .btn-secondary {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.btn-secondary:disabled,
.btn-secondary[aria-disabled=true] {
    cursor: not-allowed
}

    .btn-secondary:disabled,
    .btn-secondary:disabled:hover,
    .btn-secondary[aria-disabled=true],
    .btn-secondary[aria-disabled=true]:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-line)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
    }

.btn-secondary:disabled,
.btn-secondary[aria-disabled=true] {
    background-image: none
}

.btn-secondary {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1));
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
}

    .btn-secondary:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-saffron)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity, 1))
    }

.btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

@media (min-width:768px) {
    .btn-quiet {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.btn-quiet:disabled,
.btn-quiet[aria-disabled=true] {
    cursor: not-allowed
}

    .btn-quiet:disabled,
    .btn-quiet:disabled:hover,
    .btn-quiet[aria-disabled=true],
    .btn-quiet[aria-disabled=true]:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-line)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
    }

.btn-quiet:disabled,
.btn-quiet[aria-disabled=true] {
    background-image: none
}

.btn-quiet {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

    .btn-quiet:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
    }

.btn-sm {
    padding: .5rem 1rem;
    font-size: .875rem;
    line-height: 1.25rem
}

.btn-shine {
    position: relative;
    overflow: hidden
}

    .btn-shine:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 45%, hsla(0, 0%, 100%, .55) 50%, transparent 55%);
        background-size: 250% 100%;
        background-position: 150% 0;
        animation: btn-shine 3s ease-in-out infinite;
        pointer-events: none
    }

@keyframes btn-shine {

    0%, 35% {
        background-position: 150% 0
    }

    65%, to {
        background-position: -50% 0
    }
}

.btn-disabled,
.btn:disabled,
.btn[aria-disabled=true] {
    cursor: not-allowed
}

    .\!btn:disabled,
    .\!btn[aria-disabled=true],
    .btn-disabled,
    .btn-disabled:hover,
    .btn:disabled,
    .btn:disabled:hover,
    .btn[aria-disabled=true],
    .btn[aria-disabled=true]:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-line)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
    }

.\!btn:disabled,
.\!btn[aria-disabled=true] {
    cursor: not-allowed
}

    .\!btn:disabled:hover,
    .\!btn[aria-disabled=true]:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-line)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
    }

.btn-disabled,
.btn:disabled,
.btn[aria-disabled=true] {
    background-image: none
}

.\!btn:disabled,
.\!btn[aria-disabled=true] {
    background-image: none !important
}

.btn-disabled.btn-shine:after,
.btn-shine:disabled:after,
.btn-shine[aria-disabled=true]:after {
    display: none
}

.\!card,
.card {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.card-pad {
    padding: 1.25rem
}

@media (min-width:768px) {
    .card-pad {
        padding: 1.5rem
    }
}

.\!panel {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: 1.5rem
}

@media (min-width:768px) {
    .\!panel {
        padding: 2rem
    }
}

.\!panel {
    max-width: 68ch
}

.panel {
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: 1.5rem
}

@media (min-width:768px) {
    .panel {
        padding: 2rem
    }
}

.panel {
    max-width: 68ch
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: 9999px;
    padding: .25rem .75rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.tag--idol-mandap {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-topic-idol)/var(--tw-bg-opacity, 1))
}

.tag--aarti-celebration {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-topic-aarti)/var(--tw-bg-opacity, 1))
}

.tag--modak-prasad {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-topic-modak)/var(--tw-bg-opacity, 1))
}

.tag--eco-friendly {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-topic-eco)/var(--tw-bg-opacity, 1))
}

.tag--visarjan {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-topic-visarjan)/var(--tw-bg-opacity, 1))
}

.live-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-maroon)/var(--tw-bg-opacity, 1));
    padding: .25rem .625rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: .025em;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .375rem .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(var(--color-ink-soft)/.8);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .filter-pill:hover {
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
    }

    .filter-pill[aria-pressed=true] {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-saffron)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity, 1))
    }

.share-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 30;
    margin-bottom: .5rem;
    width: 13rem;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .5rem;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.share-option {
    display: block;
    width: 100%;
    border-radius: .5rem;
    padding: .5rem .75rem;
    text-align: left;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

    .media-frame,
    .share-option:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-sand)/var(--tw-bg-opacity, 1))
    }

.media-frame {
    position: relative;
    overflow: hidden;
    border-radius: .75rem
}

.collage-glow {
    pointer-events: none;
    inset: -2.5rem;
    z-index: -10;
    border-radius: 9999px;
    --tw-blur: blur(64px);
    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);
    background: radial-gradient(closest-side, rgb(var(--color-marigold)/.35), transparent 70%)
}

.circle-print,
.collage-glow {
    position: absolute
}

.circle-print {
    z-index: 0
}

@keyframes float-soft {

    0%, to {
        translate: 0 0
    }

    50% {
        translate: 0 -6px
    }
}

.circle-print {
    animation: float-soft 6s ease-in-out infinite;
    overflow: hidden;
    border-radius: 9999px;
    border-width: 4px;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgb(var(--color-marigold)/0.7);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s
}

    .circle-print:hover {
        z-index: 20;
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .circle-print:nth-child(2) {
        animation-delay: -4.5s
    }

    .circle-print:nth-child(3) {
        animation-delay: -3s
    }

    .circle-print:nth-child(4) {
        animation-delay: -1.5s
    }

    .circle-print:hover {
        animation-play-state: paused
    }

    .circle-print img {
        display: block;
        height: 100%;
        width: 100%;
        border-radius: 9999px;
        -o-object-fit: cover;
        object-fit: cover
    }

.festive-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem
}

@media (min-width:768px) {
    .festive-divider {
        gap: 1.5rem
    }
}

.festive-divider:after,
.festive-divider:before {
    display: block;
    height: 1px;
    width: 4rem;
    flex: none;
    --tw-content: "";
    content: var(--tw-content)
}

@media (min-width:768px) {

    .festive-divider:after,
    .festive-divider:before {
        width: 8rem
    }
}

.festive-divider:after,
.festive-divider:before {
    background: linear-gradient(to right, transparent, rgb(var(--color-marigold)), transparent)
}

.thumb {
    position: relative;
    display: block;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: .375rem;
    border-width: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-sand)/var(--tw-bg-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

@media (min-width:768px) {
    .thumb {
        height: 2.5rem;
        width: 2.5rem
    }
}

.thumb[aria-current=true] {
    --tw-shadow: 0 0 0 2px rgb(var(--color-saffron)/1);
    --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.reel-card {
    display: flex;
    height: 100dvh;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0;
    border-width: 1px 0 0;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding-top: .75rem;
    padding-bottom: .25rem
}

@media (min-width:768px) {
    .reel-card {
        display: block;
        height: auto;
        border-radius: .5rem;
        border-width: 1px;
        padding-top: 0;
        padding-bottom: 0
    }
}

.reel-media-frame {
    overflow: hidden;
    border-radius: .75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-sand)/var(--tw-bg-opacity, 1));
    position: relative;
    min-height: 0;
    width: 100%;
    flex: 1 1 0%;
    border-radius: 0
}

@media (min-width:768px) {
    .reel-media-frame {
        aspect-ratio: 1/1;
        height: auto;
        flex: none
    }
}

@media (max-width:767px) {
    html {
        scroll-snap-type: y proximity
    }

    .reel-card {
        scroll-snap-align: start;
        scroll-margin-top: -5rem
    }
}

.reel-track {
    display: flex;
    height: 100%;
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    --tw-scroll-snap-strictness: mandatory;
    overflow-x: auto;
    scrollbar-width: none
}

    .reel-track::-webkit-scrollbar {
        display: none
    }

[data-reel-thumbs] {
    scrollbar-width: none
}

    [data-reel-thumbs]::-webkit-scrollbar {
        display: none
    }

.reel-slide {
    position: relative;
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start
}

.hero-photo-fade {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fff, #fff, hsla(0, 0%, 100%, .9) 10%, transparent 30%, transparent 100%, hsla(0, 0%, 100%, 0) 0)
}

.hero-stat-card {
    position: relative;
    z-index: 20;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0;
    display: none;
    align-items: center;
    gap: .75rem;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem 1rem;
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .hero-stat-card,
    .hero-stat-card:hover {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

        .hero-stat-card:hover {
            --tw-translate-y: -0.125rem;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
            --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
        }

@media (min-width:1024px) {
    .hero-stat-card {
        position: absolute;
        bottom: 2rem;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        display: flex
    }
}

.hero-stat-text {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.hero-next-card {
    position: relative;
    z-index: 20;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 1.5rem;
    display: block;
    width: auto;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: 1rem;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .hero-next-card,
    .hero-next-card:hover {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

        .hero-next-card:hover {
            --tw-translate-y: -0.125rem;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
            --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)
        }

@media (min-width:1024px) {
    .hero-next-card {
        position: absolute;
        bottom: 2rem;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        width: 320px
    }

    .hero-next-card,
    .hero-stat-card {
        right: calc(max(0px, (100% - 1280px) / 2) + 2rem)
    }
}

.photo-wall {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-sand)/var(--tw-bg-opacity, 1));
    padding: 2rem .75rem
}

@media (min-width:640px) {
    .photo-wall {
        padding: 2.5rem 2rem
    }
}

.photo-wall {
    background-image: radial-gradient(circle at center, rgb(var(--color-line)/.3) .5px, transparent 1.5px), repeating-linear-gradient(45deg, rgb(var(--color-line)/.22) 0, rgb(var(--color-line)/.22) 1px, transparent 1px, transparent 10px), repeating-linear-gradient(-45deg, rgb(var(--color-line)/.22) 0, rgb(var(--color-line)/.22) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px, auto, auto
}

.photo-wall-line {
    pointer-events: none;
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 4rem;
    height: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-line)/var(--tw-bg-opacity, 1))
}

@media (min-width:640px) {
    .photo-wall-line {
        left: 2.5rem;
        right: 2.5rem
    }
}

.photo-wall-card {
    position: relative;
    display: flex;
    width: 8rem;
    flex: none;
    flex-direction: column;
    border-radius: .125rem;
    border-width: 1px;
    border-color: rgb(var(--color-line)/.6);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .375rem .375rem .5rem;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s
}

@media (min-width:640px) {
    .photo-wall-card {
        width: 11rem;
        padding: .5rem .5rem .75rem
    }
}

@media (min-width:1024px) {
    .photo-wall-card {
        width: 12rem
    }
}

.photo-wall-card:nth-child(odd) {
    transform: rotate(-2.5deg)
}

.photo-wall-card:nth-child(2n) {
    transform: rotate(2deg)
}

.photo-wall-card:hover {
    z-index: 20;
    transform: rotate(0deg) translateY(-8px) scale(1.04)
}

.photo-wall-peg {
    position: absolute;
    top: -.75rem;
    left: 50%;
    height: 1.25rem;
    width: .75rem;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: .125rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-marigold)/var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgba(0, 0, 0, .1)
}

.photo-wall-caption {
    margin-top: .375rem;
    display: block;
    padding-left: .125rem;
    padding-right: .125rem;
    text-align: center;
    font-size: 11px;
    font-style: italic;
    line-height: 1.375;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

@media (min-width:640px) {
    .photo-wall-caption {
        margin-top: .5rem;
        padding-left: .25rem;
        padding-right: .25rem;
        font-size: .75rem;
        line-height: 1rem
    }
}

.photo-wall-slot {
    position: relative;
    display: flex;
    width: 8rem;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .125rem;
    border-width: 1px;
    border-color: rgb(var(--color-line)/.6);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .375rem .375rem .5rem;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s
}

    .photo-wall-slot:hover {
        --tw-translate-y: -0.25rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

@media (min-width:640px) {
    .photo-wall-slot {
        width: 11rem;
        padding: .5rem .5rem .75rem
    }
}

@media (min-width:1024px) {
    .photo-wall-slot {
        width: 12rem
    }
}

.photo-wall-slot-inner {
    display: flex;
    width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    border-radius: .125rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-marigold)/var(--tw-border-opacity, 1));
    padding: 1rem .5rem
}

@media (min-width:640px) {
    .photo-wall-slot-inner {
        gap: .5rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem
    }
}

.reel-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .75rem .75rem
}

@media (min-width:768px) {
    .reel-header {
        padding: .75rem
    }
}

.reel-nav {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: flex;
    height: 2rem;
    width: 2rem;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(var(--color-ink)/.5);
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .reel-nav:hover {
        background-color: rgb(var(--color-ink)/.7)
    }

    .reel-nav:disabled {
        pointer-events: none;
        opacity: 0
    }

.reel-nav--prev {
    left: .5rem
}

.reel-nav--next {
    right: .5rem;
    --tw-rotate: 180deg
}

.reel-nav--next,
.video-play-overlay {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.video-play-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 20;
    display: flex;
    height: 3rem;
    width: 3rem;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(var(--color-ink)/.5);
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .video-play-overlay:hover {
        background-color: rgb(var(--color-ink)/.7)
    }

.video-mute-btn {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    z-index: 20;
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(var(--color-ink)/.5);
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .video-mute-btn:hover {
        background-color: rgb(var(--color-ink)/.7)
    }

.reel-icon-btn {
    display: inline-flex;
    min-height: 40px;
    min-width: 40px;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    padding: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .reel-icon-btn:hover {
        --tw-text-opacity: 1;
        color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
    }

.avatar,
.circle-badge {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px
}

.avatar {
    position: relative;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-marigold-soft)/var(--tw-bg-opacity, 1));
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-maroon)/var(--tw-text-opacity, 1))
}

.avatar-img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.avatar--sm {
    height: 2rem;
    width: 2rem;
    font-size: .75rem;
    line-height: 1rem
}

.avatar--idol-mandap {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-topic-idol)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.avatar-stack {
    display: flex;
    align-items: center
}

    .avatar-stack > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(-.5rem*var(--tw-space-x-reverse));
        margin-left: calc(-.5rem*(1 - var(--tw-space-x-reverse)))
    }

    .avatar-stack .avatar {
        height: 2rem;
        width: 2rem;
        flex-shrink: 0;
        font-size: .75rem;
        line-height: 1rem;
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(255 255 255/var(--tw-ring-opacity, 1))
    }

    .avatar-stack .avatar,
    .avatar-stack--sm .avatar {
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
    }

.avatar-stack--sm .avatar {
    height: 18px;
    width: 18px;
    font-size: 7px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}

.step-marker {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 9999px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1));
    background-color: transparent;
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 800;
    --tw-text-opacity: 1
}

.criteria-icon,
.step-marker {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
}

.criteria-icon {
    border-radius: 9999px;
    height: 3rem;
    width: 3rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-flame-tint)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.group:hover .criteria-icon {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-saffron)/var(--tw-bg-opacity, 1))
}

.group:hover .criteria-icon,
.media-control {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.media-control {
    border-radius: 9999px;
    background-color: rgb(var(--color-ink)/.8);
    padding: .5rem .75rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600
}

.\!field,
.field {
    margin-bottom: 1.25rem
}

.field-label,
.label {
    margin-bottom: .5rem;
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.\!input {
    width: 100%;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .\!input::-moz-placeholder {
        color: rgb(var(--color-ink-soft)/.7)
    }

    .\!input::placeholder {
        color: rgb(var(--color-ink-soft)/.7)
    }

    .\!input:hover {
        border-color: rgb(var(--color-ink-soft)/.4)
    }

.input,
.select,
.textarea {
    width: 100%;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .input::-moz-placeholder,
    .select::-moz-placeholder,
    .textarea::-moz-placeholder {
        color: rgb(var(--color-ink-soft)/.7)
    }

    .input::placeholder,
    .select::placeholder,
    .textarea::placeholder {
        color: rgb(var(--color-ink-soft)/.7)
    }

    .input:hover,
    .select:hover,
    .textarea:hover {
        border-color: rgb(var(--color-ink-soft)/.4)
    }

.\!select {
    width: 100%;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .\!select::-moz-placeholder {
        color: rgb(var(--color-ink-soft)/.7)
    }

    .\!select::placeholder {
        color: rgb(var(--color-ink-soft)/.7)
    }

    .\!select:hover {
        border-color: rgb(var(--color-ink-soft)/.4)
    }

.btn-neutral {
    border-color: rgb(var(--color-ink)/.7);
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

    .btn-neutral:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-ink)/var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-ink)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity, 1))
    }

.textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.625
}

.\!select,
.select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    padding-right: 2.5rem
}

.\!select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235A4232' stroke-width='1.8' viewBox='0 0 20 20'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right .85rem center !important;
    background-size: 1.25rem 1.25rem !important
}

.select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235A4232' stroke-width='1.8' viewBox='0 0 20 20'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .85rem center;
    background-size: 1.25rem 1.25rem
}

.checkbox {
    margin-top: .125rem;
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    border-radius: .25rem;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    accent-color: rgb(var(--color-saffron)/1)
}

.topic-option {
    display: block;
    cursor: pointer
}

.topic-option-frame {
    position: relative;
    display: flex;
    height: 100%;
    align-items: flex-start;
    gap: .75rem;
    border-radius: .75rem;
    border-width: 2px;
    border-color: rgb(var(--color-ink)/.1);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .topic-option-frame:hover {
        --tw-translate-y: -0.125rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

@media (min-width:768px) {
    .topic-option-frame {
        gap: 1rem;
        border-radius: 1rem;
        padding: 1rem
    }
}

.topic-option:hover .topic-option-frame {
    border-color: rgb(var(--color-ink)/.25)
}

.topic-option input:checked ~ .topic-option-frame {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-flame-tint)/var(--tw-bg-opacity, 1))
}

.topic-option input:focus-visible ~ .topic-option-frame {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-saffron)/var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff
}

.topic-option-media {
    height: 3rem;
    width: 3rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-sand)/var(--tw-bg-opacity, 1))
}

@media (min-width:768px) {
    .topic-option-media {
        height: 5rem;
        width: 5rem;
        border-radius: .75rem
    }
}

.topic-option-media img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.topic-option-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: .125rem;
    padding-right: .5rem
}

@media (min-width:768px) {
    .topic-option-body {
        gap: .25rem
    }
}

.topic-option-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

@media (min-width:768px) {
    .topic-option-title {
        font-size: 1.125rem;
        line-height: 1.25rem
    }
}

.topic-option-desc {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1.375;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

@media (min-width:768px) {
    .topic-option-desc {
        font-size: .9375rem
    }
}

.topic-option-check {
    position: absolute;
    right: -.5rem;
    top: -.5rem;
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-saffron)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    opacity: 0;
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.topic-option input:checked ~ .topic-option-frame .topic-option-check,
.topic-option-check {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.topic-option input:checked ~ .topic-option-frame .topic-option-check {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    opacity: 1
}

.field-error {
    margin-top: .25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(var(--color-maroon)/var(--tw-text-opacity, 1))
}

.\!input[aria-invalid=true],
.\!select[aria-invalid=true],
.input[aria-invalid=true],
.select[aria-invalid=true],
.textarea[aria-invalid=true] {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-maroon)/var(--tw-border-opacity, 1));
    background-color: rgb(var(--color-maroon)/.03)
}

.file-drop {
    display: flex;
    width: 100%;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .75rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: 2rem 1rem;
    text-align: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .file-drop:hover {
        background-color: rgb(var(--color-sand)/.4)
    }

    .file-drop:hover,
    .file-drop[data-dragging=true] {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1))
    }

    .file-drop[data-dragging=true] {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-marigold-soft)/var(--tw-bg-opacity, 1))
    }

.\!counter,
.counter {
    margin-top: .5rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

    .\!counter[data-over=true],
    .counter[data-over=true] {
        font-weight: 600;
        --tw-text-opacity: 1;
        color: rgb(var(--color-maroon)/var(--tw-text-opacity, 1))
    }

.modal {
    position: fixed;
    inset: 0;
    margin: 0;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-width: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: 0;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px
}

@media (min-width:768px) {
    .modal {
        margin: auto;
        height: calc(100vh - 4rem);
        width: min(50rem, calc(100vw - 3rem));
        max-width: 50rem;
        border-radius: 1rem;
        --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
        --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }
}

@media (min-width:768px) {
    .modal {
        transition-property: width, max-width;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .2s
    }
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: rgb(var(--color-ink)/.6)
}

.modal-panel {
    position: absolute;
    inset: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

@media (min-width:768px) {
    .modal-panel {
        margin: auto;
        height: calc(100vh - 4rem);
        width: min(50rem, calc(100vw - 3rem));
        max-width: 50rem;
        border-radius: 1rem;
        --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
        --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }
}

.signin-frame--fixed {
    height: 40rem;
    min-height: 0;
    flex: none
}

@media (min-width:768px) {
    .modal:has([data-entry-confirmation]:not([hidden])) {
        bottom: auto;
        top: 50%;
        height: auto;
        max-height: calc(100vh - 4rem);
        --tw-translate-y: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
}

.modal::backdrop {
    background-color: rgb(var(--color-ink)/.6)
}

.modal-shell {
    display: flex;
    height: 100%;
    flex-direction: column
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem 1.25rem
}

@media (min-width:768px) {
    .modal-header {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

.modal-body {
    min-height: 0;
    flex: 1 1 0%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem
}

@media (min-width:768px) {
    .modal-body {
        padding: 2.5rem 3rem
    }
}

.modal-footer {
    flex-shrink: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem 1.25rem
}

@media (min-width:768px) {
    .modal-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

.modal-close {
    margin-right: -.5rem;
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .modal-close:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-sand)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
    }

.modal-stepper {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    min-width: 0;
    max-width: 24rem
}

.modal-stepper-head {
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem
}

.modal-stepper-label {
    font-weight: 600;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.modal-stepper-label,
.modal-stepper-pct {
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1
}

.modal-stepper-pct {
    font-weight: 500;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.modal-stepper-track {
    height: .5rem;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-line)/var(--tw-bg-opacity, 1))
}

.modal-stepper-bar {
    height: 100%;
    border-radius: 9999px;
    transition-property: width;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
    background-image: linear-gradient(90deg, rgb(var(--color-cta-start)), rgb(var(--color-cta-end)))
}

.modal-step-title {
    font-size: 1.125rem;
    font-weight: 600
}

@media (min-width:768px) {
    .modal-step-title {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

.golu-topic-card .modal-step-title {
    margin-top: 0;
    padding-right: 5rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

@media (min-width:640px) {
    .golu-topic-card .modal-step-title {
        margin-top: .75rem;
        padding-right: 0
    }
}

.golu-topic-card .modal-step-title {
    font-size: 1.125rem;
    line-height: 1.375
}

.modal-step-title {
    margin-bottom: 2rem;
    width: 100%;
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

@media (min-width:768px) {
    .modal-step-title {
        font-size: 1.5rem;
        line-height: 2rem
    }
}

.topic-chip {
    margin-top: -1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity, 1));
    padding: .75rem 1rem;
    font-size: .875rem;
    line-height: 1.25rem
}

.topic-chip-label {
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

    .topic-chip-label strong {
        font-weight: 600;
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
    }

.topic-chip-change {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .topic-chip-change:hover {
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
    }

.confirm-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding-bottom: .5rem;
    text-align: left
}

.confirm-badge {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    position: relative;
    height: 2.75rem;
    width: 2.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-topic-eco)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.confirm-pulse {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-color: rgb(var(--color-topic-eco)/.4)
}

.confirm-thumbs {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem
}

.confirm-thumb {
    height: 4rem;
    width: 4rem;
    overflow: hidden;
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-ink)/var(--tw-bg-opacity, 1))
}

    .confirm-thumb img,
    .confirm-thumb video {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }

.confirm-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    text-align: left
}

.step-marker--sm {
    height: 1.75rem;
    width: 1.75rem;
    border-width: 1px;
    font-size: .875rem;
    line-height: 1.25rem
}

.step-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem
}

@media (min-width:640px) {
    .step-row {
        display: block
    }

        .step-row > .step-marker {
            margin-left: auto;
            margin-right: auto;
            height: 2.5rem;
            width: 2.5rem;
            border-width: 2px;
            font-size: 1.125rem;
            line-height: 1.75rem
        }
}

.confirm-step-text {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    line-height: 1.375;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.confirm-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem
}

.rules-accordion {
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251/var(--tw-bg-opacity, 1))
}

    .rules-accordion[open] .rules-accordion-icon {
        --tw-rotate: 180deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

.rules-accordion-list > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem*var(--tw-space-y-reverse))
}

.rules-accordion-list {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    padding: .75rem 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

    .rules-accordion-list li {
        display: flex;
        align-items: flex-start;
        gap: .5rem
    }

.rules-accordion-tick {
    margin-top: .125rem;
    display: flex;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

    .rules-accordion-tick svg {
        height: .625rem;
        width: .625rem
    }

.file-drop:has(input:focus-visible) {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1));
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-saffron)/var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: rgb(var(--color-cream)/1)
}

.file-drop-hint {
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    line-height: 1.5;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem
}

.file-drop--lg {
    height: 13rem;
    gap: 0;
    border-radius: .75rem;
    border-width: 0;
    background-color: rgb(var(--color-ink)/.04);
    padding: 0 1.5rem 2rem
}

    .file-drop--lg:hover {
        background-color: rgb(var(--color-ink)/.07)
    }

@media (min-width:768px) {
    .file-drop--lg {
        height: 14rem
    }
}

.signin-frame {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    min-height: 20rem;
    width: 100%;
    max-width: 28rem;
    flex: 1 1 0%;
    place-items: center;
    overflow: hidden;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    background-color: rgb(var(--color-ink)/.04)
}

    .signin-frame[data-measured] {
        min-height: 0;
        flex: none
    }

.signin-frame-note {
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    line-height: 1.5;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center
}

.signin-frame iframe {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    border-width: 0
}

.composer {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.composer-media {
    flex-direction: column
}

.composer-media,
.composer-row {
    display: flex;
    min-width: 0;
    align-items: stretch
}

.composer-row {
    max-width: 100%;
    overflow: hidden;
    border-radius: .75rem;
    background-color: rgb(var(--color-ink)/.04)
}

.composer-track {
    display: flex;
    min-width: 0;
    flex: 1 1 0%;
    cursor: grab;
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    --tw-scroll-snap-strictness: mandatory;
    gap: .25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none
}

    .composer-track[data-dragging=true] {
        cursor: grabbing;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        scroll-snap-type: none
    }

    .composer-track::-webkit-scrollbar {
        display: none
    }

.composer-item {
    position: relative;
    height: 13rem;
    width: 17rem;
    flex-shrink: 0;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-ink)/var(--tw-bg-opacity, 1))
}

@media (min-width:768px) {
    .composer-item {
        height: 14rem;
        width: 18.5rem
    }
}

.composer-item img,
.composer-item video {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.composer-link {
    padding-bottom: .5rem;
    padding-top: 1rem
}

.composer-link-row {
    margin-top: .375rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .375rem .375rem .375rem .5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .composer-link-row:focus-within {
        border-color: rgb(var(--color-ink-soft)/.6);
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-color: rgb(var(--color-ink)/0.1)
    }

    .composer-link-row:hover {
        border-color: rgb(var(--color-ink-soft)/.4)
    }

.composer-link-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding-left: .25rem;
    padding-right: .25rem;
    --tw-text-opacity: 1;
    color: rgb(255 0 0/var(--tw-text-opacity, 1))
}

.composer-link-input {
    min-width: 0;
    flex: 1 1 0%;
    border-radius: 0;
    border-width: 0;
    background-color: transparent;
    padding: .25rem
}

    .composer-link-input:hover {
        border-width: 0
    }

    .composer-link-input:focus {
        outline: 2px solid transparent;
        outline-offset: 2px
    }

    .composer-link-input:focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-offset-width: 0px
    }

.composer-link-btn {
    flex-shrink: 0;
    border-radius: .5rem;
    border-width: 1px;
    border-color: rgb(var(--color-ink)/.15);
    background-color: rgb(var(--color-ink)/.06);
    padding: .625rem .875rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .composer-link-btn:hover {
        border-color: rgb(var(--color-ink)/.25);
        background-color: rgb(var(--color-ink)/.12)
    }

    .composer-link-btn:focus-visible {
        outline-style: solid;
        outline-width: 2px;
        outline-offset: 2px;
        outline-color: rgb(var(--color-ink)/1)
    }

.composer-item--link {
    background-color: rgb(var(--color-ink)/.06)
}

    .composer-item--link img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }

.composer-item-badge,
.yt-badge {
    pointer-events: none;
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: .375rem;
    background-color: rgb(var(--color-ink)/.7);
    padding: .125rem .375rem;
    font-size: 11px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.composer-item-play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(var(--color-ink)/.55);
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .composer-item-play:hover {
        background-color: rgb(var(--color-ink)/.75)
    }

    .composer-item-play:focus-visible {
        outline-style: solid;
        outline-width: 2px;
        outline-offset: 2px;
        outline-color: #fff
    }

.composer-item-embed {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    border-width: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity, 1))
}

.confirm-thumb--link {
    position: relative
}

.confirm-thumb-badge {
    position: absolute;
    bottom: .125rem;
    left: .125rem;
    display: flex;
    align-items: center;
    border-radius: .25rem;
    background-color: rgb(var(--color-ink)/.7);
    padding: .125rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.yt-facade {
    position: relative;
    background-color: rgb(var(--color-ink)/var(--tw-bg-opacity, 1))
}

.yt-embed,
.yt-facade {
    height: 100%;
    width: 100%;
    --tw-bg-opacity: 1
}

.yt-embed {
    border-width: 0;
    background-color: rgb(0 0 0/var(--tw-bg-opacity, 1))
}

.composer-item-del {
    position: absolute;
    right: .5rem;
    top: .75rem;
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(var(--color-ink)/.6);
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .composer-item-del:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-maroon)/var(--tw-bg-opacity, 1))
    }

    .composer-item-del:focus-visible {
        outline-style: solid;
        outline-width: 2px;
        outline-offset: 2px;
        outline-color: #fff
    }

@media (min-width:768px) {
    .composer-item-del {
        top: .5rem;
        height: 2rem;
        width: 2rem
    }
}

.composer-add-item {
    display: flex;
    width: 12rem;
    flex-shrink: 0;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border-radius: 0;
    border-width: 0;
    padding-left: .5rem;
    padding-right: .5rem;
    text-align: center;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .composer-add-item:hover {
        background-color: rgb(var(--color-ink)/.07);
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
    }

    .composer-add-item:focus-visible {
        outline-style: solid;
        outline-width: 2px;
        outline-offset: 2px;
        outline-color: rgb(var(--color-saffron)/1)
    }

@media (min-width:640px) {
    .composer-add-item {
        width: 12.5rem;
        font-size: 1rem;
        line-height: 1.5rem
    }
}

@media (min-width:768px) {
    .composer-add-item {
        width: 14rem
    }
}

.composer-side {
    display: flex;
    min-width: 0;
    flex-direction: column
}

.composer-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .5rem
}

.story-input {
    width: 100%;
    resize: none;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .625rem 3rem .625rem .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

    .story-input::-moz-placeholder {
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
    }

    .story-input::placeholder {
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
    }

    .story-input:focus {
        outline: 2px solid transparent;
        outline-offset: 2px
    }

    .story-input:focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px
    }

.story-input {
    min-height: 10rem;
    overflow: hidden
}

    .story-input:focus-visible {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-ink)/var(--tw-border-opacity, 1));
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-offset-width: 0px
    }

.story-field {
    position: relative;
    display: flex;
    flex-direction: column
}

.story-hint-btn {
    position: absolute;
    right: .5rem;
    top: .5rem;
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .story-hint-btn:hover,
    .story-hint-btn[aria-expanded=true] {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-ink-soft)/var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
    }

.story-hint-panel {
    position: absolute;
    right: .5rem;
    top: 2.75rem;
    z-index: 10;
    width: min(20rem, calc(100% - 1rem));
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem;
    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.composer-toolbar {
    margin-top: .375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem
}

.emoji-btn {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .emoji-btn:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-sand)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
    }

.emoji-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 10;
    margin-bottom: .5rem;
    max-height: 16rem;
    width: min(20rem, calc(100vw - 4rem));
    overflow-y: auto;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem;
    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.emoji-cat {
    margin-bottom: .25rem;
    margin-top: .5rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

    .emoji-cat:first-child {
        margin-top: 0
    }

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .25rem
}

.emoji-cell {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .emoji-cell:hover {
        --tw-bg-opacity: 1
    }

    .ad-slot,
    .emoji-cell:hover {
        background-color: rgb(var(--color-sand)/var(--tw-bg-opacity, 1))
    }

.ad-slot {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    border-width: 2px;
    border-style: dashed;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.ad-slot--leaderboard {
    height: 50px;
    max-width: 320px
}

@media (min-width:768px) {
    .ad-slot--leaderboard {
        height: 90px;
        max-width: 728px
    }
}

.ad-slot--rectangle {
    height: 250px;
    max-width: 300px
}

.ad-slot--filled {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: .5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .2s
}

    .ad-slot--filled,
    .ad-slot--filled:hover {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

        .ad-slot--filled:hover {
            --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
            --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)
        }

.sponsor-row {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    height: 90px;
    width: 100%;
    max-width: 728px;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    overflow-x: auto
}

@media (min-width:640px) {
    .sponsor-row {
        justify-content: center
    }
}

.sponsor-row > li {
    height: 100%;
    width: 10rem;
    flex-shrink: 0
}

.sponsor-slot {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    border-radius: .25rem;
    padding-left: .25rem;
    padding-right: .25rem;
    text-align: center;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    line-height: 1.25;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .sponsor-slot:hover {
        --tw-text-opacity: 1;
        color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
    }

@media (min-width:640px) {
    .sponsor-slot {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

.sponsor-logo {
    max-height: 100%;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.sponsor-row--avatars {
    display: flex;
    height: auto;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem
}

@media (min-width:640px) {
    .sponsor-row--avatars {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        overflow: visible
    }
}

.sponsor-row--avatars > li {
    height: auto;
    width: 100%
}

@media (min-width:640px) {
    .sponsor-row--avatars > li {
        width: 21rem;
        flex-shrink: 0
    }
}

.sponsor-avatar-slot {
    display: flex;
    height: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: .75rem;
    text-align: left;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .2s
}

    .sponsor-avatar-slot:hover {
        --tw-translate-y: -0.25rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

@media (min-width:640px) {
    .sponsor-avatar-slot {
        gap: 1rem
    }
}

.sponsor-avatar-card {
    display: flex;
    height: 100%;
    flex-direction: row;
    align-items: flex-start;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(var(--color-line)/.6);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .2s
}

    .sponsor-avatar-card,
    .sponsor-avatar-card:hover {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

        .sponsor-avatar-card:hover {
            --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
            --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)
        }

@media (min-width:640px) {
    .sponsor-avatar-card {
        padding: .875rem 1rem
    }
}

.sponsor-avatar {
    height: 4rem;
    width: 4rem;
    flex-shrink: 0;
    border-radius: 9999px;
    -o-object-fit: cover;
    object-fit: cover;
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-color: rgba(0, 0, 0, .05)
}

@media (min-width:640px) {
    .sponsor-avatar {
        height: 5rem;
        width: 5rem
    }
}

.sponsor-avatar-name-wrap {
    display: flex;
    min-width: 0;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.sponsor-avatar-name {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

@media (min-width:640px) {
    .sponsor-avatar-name {
        font-size: 1rem;
        line-height: 1.5rem;
        line-height: 1
    }
}

.sponsor-avatar-slot:hover .sponsor-avatar-name {
    --tw-text-opacity: 1;
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
}

.sponsor-avatar-location {
    margin-top: .125rem;
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.sponsor-avatar-phone {
    margin-top: .375rem;
    margin-bottom: .375rem;
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    white-space: nowrap;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1.375;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.sponsor-avatar-pin {
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.sponsor-avatar-services {
    margin-top: .25rem;
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    font-size: .75rem;
    line-height: 1rem;
    line-height: 1.375;
    color: rgb(var(--color-ink-soft)/.8)
}

.sponsor-avatar-phone-icon {
    margin-top: .125rem;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.sponsor-avatar-services-icon {
    margin-top: .125rem;
    height: .75rem;
    width: .75rem;
    flex-shrink: 0
}

@keyframes shimmer {
    0% {
        background-position: -500px 0
    }

    to {
        background-position: 500px 0
    }
}

.skeleton {
    animation: shimmer 1.6s linear infinite;
    border-radius: .5rem;
    background-color: rgb(var(--color-line)/.6);
    background-image: linear-gradient(90deg, rgb(var(--color-line)/.6) 0, rgb(var(--color-cream)/.9) 50%, rgb(var(--color-line)/.6) 100%);
    background-size: 500px 100%;
    background-repeat: no-repeat
}

.toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 50;
    display: flex;
    max-width: calc(100vw - 2rem);
    align-items: center;
    gap: .75rem;
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    padding: .75rem;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

@media (min-width:640px) {
    .toast {
        max-width: 24rem
    }
}

.reel-pager {
    pointer-events: none;
    position: fixed;
    right: 1.5rem;
    top: 50%;
    z-index: 40;
    display: none;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

@media (min-width:1024px) {
    .reel-pager {
        display: flex
    }
}

.reel-pager[data-visible] {
    pointer-events: auto;
    opacity: 1
}

.reel-pager-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    height: 3.5rem;
    width: 3.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .reel-pager-btn:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
    }

    .reel-pager-btn:disabled {
        cursor: default;
        --tw-border-opacity: 1;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

        .reel-pager-btn:disabled,
        .reel-pager-btn:disabled:hover {
            border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
            color: rgb(var(--color-ink-soft)/.4)
        }

            .reel-pager-btn:disabled:hover {
                --tw-border-opacity: 1
            }

.scroll-top-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    position: fixed;
    bottom: 6rem;
    right: 1rem;
    z-index: 50;
    height: 2.75rem;
    width: 2.75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .scroll-top-btn:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
    }

.admin-page {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-bg)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
}

.admin-skip-link {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 50;
    --tw-translate-y: -6rem;
    border-radius: .375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-accent)/var(--tw-bg-opacity, 1));
    padding: .5rem 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .admin-skip-link,
    .admin-skip-link:focus {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

        .admin-skip-link:focus {
            --tw-translate-y: 0px
        }

.admin-page h1,
.admin-page h2,
.admin-page h3 {
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
}

.admin-shell {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem
}

@media (min-width:640px) {
    .admin-shell {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

.admin-card {
    border-radius: .5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-surface)/var(--tw-bg-opacity, 1))
}

.admin-meta {
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink-soft)/var(--tw-text-opacity, 1))
}

.admin-entry-list {
    display: grid;
    gap: .75rem
}

.admin-entry-card {
    overflow: hidden;
    border-radius: .5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-surface)/var(--tw-bg-opacity, 1))
}

.admin-entry-summary {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    padding: .75rem .75rem .5rem
}

@media (min-width:640px) {
    .admin-entry-summary {
        gap: 1.5rem
    }
}

.admin-entry-status {
    position: absolute;
    right: .75rem;
    top: .75rem;
    z-index: 10
}

.admin-entry-caption {
    display: block;
    max-width: 48rem;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

@media (min-width:640px) {
    .admin-entry-caption {
        -webkit-line-clamp: 1
    }
}

.admin-entry-name {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
}

.admin-entry-meta {
    margin-top: .25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink-soft)/var(--tw-text-opacity, 1))
}

.admin-entry-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-bottom: .75rem
}

.admin-expanded {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-surface)/var(--tw-bg-opacity, 1));
    padding: 1rem
}

.admin-thumb {
    min-height: 3.5rem;
    width: 4rem;
    flex-shrink: 0;
    align-self: stretch;
    overflow: hidden;
    border-radius: .25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-bg)/var(--tw-bg-opacity, 1))
}

@media (min-width:640px) {
    .admin-thumb {
        width: 6rem
    }
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: .25rem;
    padding: .25rem .5rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.status-badge--pending {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-pending)/var(--tw-bg-opacity, 1))
}

.status-badge--published {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-approved)/var(--tw-bg-opacity, 1))
}

.status-badge--rejected {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-rejected)/var(--tw-bg-opacity, 1))
}

.admin-btn-approve,
.admin-btn-quiet,
.admin-btn-reject {
    display: inline-flex;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .375rem;
    border-width: 1px;
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.admin-btn-approve {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-approved)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-approved)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

    .admin-btn-approve:hover {
        opacity: .9
    }

.admin-btn-reject {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-rejected)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-rejected)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

    .admin-btn-reject:hover {
        opacity: .9
    }

.admin-btn-quiet {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-surface)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
}

    .admin-btn-quiet:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-admin-bg)/var(--tw-bg-opacity, 1))
    }

.admin-btn-sm {
    display: inline-flex;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-surface)/var(--tw-bg-opacity, 1));
    padding-left: .625rem;
    padding-right: .625rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .admin-btn-sm:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-admin-bg)/var(--tw-bg-opacity, 1))
    }

.admin-btn-approve:disabled,
.admin-btn-quiet:disabled,
.admin-btn-reject:disabled {
    cursor: not-allowed;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-line)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink-soft)/var(--tw-text-opacity, 1))
}

    .admin-btn-approve:disabled:hover,
    .admin-btn-quiet:disabled:hover,
    .admin-btn-reject:disabled:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-admin-line)/var(--tw-bg-opacity, 1));
        opacity: 1
    }

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-surface)/var(--tw-bg-opacity, 1));
    padding: .5rem 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink-soft)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .admin-tab:hover {
        --tw-text-opacity: 1;
        color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
    }

    .admin-tab:hover,
    .admin-tab[aria-pressed=true] {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-admin-ink)/var(--tw-border-opacity, 1))
    }

    .admin-tab[aria-pressed=true] {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-admin-ink)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity, 1))
    }

.admin-select {
    height: 2.25rem;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-surface)/var(--tw-bg-opacity, 1));
    background-repeat: no-repeat;
    padding-left: .75rem;
    padding-right: 2.5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
}

@media (min-width:640px) {
    .admin-select {
        width: auto
    }
}

.admin-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235B6570' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right .75rem center;
    background-size: 1rem 1rem
}

.admin-divider {
    display: none;
    height: 1.5rem;
    width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-line)/var(--tw-bg-opacity, 1))
}

@media (min-width:640px) {
    .admin-divider {
        display: block
    }
}

.admin-tablist {
    display: flex;
    gap: 1.5rem;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1))
}

.admin-tab-item {
    margin-bottom: -1px;
    border-bottom-width: 2px;
    border-color: transparent;
    padding: .5rem .25rem .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink-soft)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .admin-tab-item:hover {
        --tw-text-opacity: 1;
        color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
    }

    .admin-tab-item[aria-selected=true] {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-admin-accent)/var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-admin-accent)/var(--tw-text-opacity, 1))
    }

.admin-pick {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink-soft)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .admin-pick:hover {
        --tw-text-opacity: 1;
        color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
    }

    .admin-pick:has(input:checked) {
        --tw-text-opacity: 1;
        color: rgb(var(--color-admin-focus)/var(--tw-text-opacity, 1))
    }

    .admin-pick:has(input:disabled) {
        cursor: not-allowed;
        opacity: .4
    }

        .admin-pick:has(input:disabled):hover {
            --tw-text-opacity: 1;
            color: rgb(var(--color-admin-ink-soft)/var(--tw-text-opacity, 1))
        }

    .admin-pick input {
        height: 1rem;
        width: 1rem;
        flex-shrink: 0;
        accent-color: rgb(var(--color-admin-focus)/1)
    }

.admin-carousel {
    position: relative;
    overflow: hidden;
    border-radius: .25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-bg)/var(--tw-bg-opacity, 1))
}

.admin-carousel-track {
    display: flex;
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    --tw-scroll-snap-strictness: mandatory;
    overflow-x: auto;
    scrollbar-width: none
}

    .admin-carousel-track::-webkit-scrollbar {
        display: none
    }

.admin-carousel-slide {
    aspect-ratio: 16/10;
    max-height: 18rem;
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start
}

.admin-carousel-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    height: 2rem;
    width: 2rem;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(var(--color-admin-ink)/.6);
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .admin-carousel-nav:hover {
        background-color: rgb(var(--color-admin-ink)/.8)
    }

    .admin-carousel-nav:disabled {
        pointer-events: none;
        opacity: 0
    }

.admin-carousel-count {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    z-index: 10;
    border-radius: 9999px;
    background-color: rgb(var(--color-admin-ink)/.6);
    padding: .125rem .5rem;
    font-size: 11px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.admin-reel-frame .admin-carousel-slide,
.admin-reel-frame .admin-carousel-track {
    height: 100%
}

.admin-reel-frame .admin-carousel-slide {
    aspect-ratio: auto
}

.admin-error {
    margin-top: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-rejected)/var(--tw-text-opacity, 1))
}

[data-decide-row][hidden] + [data-reject-panel] {
    margin-top: 0
}

.admin-user-btn {
    display: inline-flex;
    height: 2.25rem;
    align-items: center;
    gap: .5rem;
    border-radius: .375rem;
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .admin-user-btn:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-admin-bg)/var(--tw-bg-opacity, 1))
    }

.admin-user-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 40;
    margin-top: .5rem;
    min-width: 10rem;
    overflow: hidden;
    border-radius: .5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-surface)/var(--tw-bg-opacity, 1));
    padding-top: .25rem;
    padding-bottom: .25rem;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

    .admin-user-menu button {
        display: block;
        width: 100%;
        padding: .5rem 1rem;
        text-align: left;
        font-size: .875rem;
        line-height: 1.25rem;
        --tw-text-opacity: 1;
        color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
    }

        .admin-user-menu button:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(var(--color-admin-bg)/var(--tw-bg-opacity, 1))
        }

.admin-chip-row {
    margin-left: -1rem;
    margin-right: -1rem;
    display: flex;
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    gap: .5rem;
    overflow-x: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: .25rem
}

@media (min-width:640px) {
    .admin-chip-row {
        margin-left: 0;
        margin-right: 0;
        flex-wrap: wrap;
        padding-left: 0;
        padding-right: 0
    }
}

.admin-chip-row {
    scroll-padding-left: 1rem;
    scrollbar-width: none
}

    .admin-chip-row::-webkit-scrollbar {
        display: none
    }

    .admin-chip-row > * {
        flex-shrink: 0;
        scroll-snap-align: start
    }

.footer-social-link {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: hsla(0, 0%, 100%, .6);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .footer-social-link:hover {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity, 1))
    }

.golu-silk-1 {
    --silk: var(--color-silk-saffron)
}

.golu-silk-2 {
    --silk: var(--color-silk-green)
}

.golu-silk-3 {
    --silk: var(--color-silk-crimson)
}

.golu-silk-4 {
    --silk: var(--color-silk-purple)
}

.golu-silk-5 {
    --silk: var(--color-silk-teal)
}

.golu-silk-6 {
    --silk: var(--color-maroon)
}

.golu-band-cream {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-cream)/var(--tw-bg-opacity, 1))
}

.golu-band-ivory {
    background-color: rgb(var(--color-golu-ivory))
}

.golu-head {
    position: relative;
    margin-bottom: 2.5rem;
    max-width: 42rem;
    border-left-width: 4px;
    padding-left: 1.25rem
}

@media (min-width:768px) {
    .golu-head {
        margin-bottom: 3.5rem
    }
}

.golu-head {
    border-color: rgb(var(--silk, var(--color-saffron)))
}

.golu-step-label {
    margin-bottom: .5rem;
    font-weight: 600;
    color: rgb(var(--silk, var(--color-saffron)))
}

.golu-kicker,
.golu-step-label {
    display: block;
    font-size: .75rem;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: .22em
}

.golu-kicker {
    margin-bottom: .75rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
}

.golu-kicker--dark {
    color: rgb(var(--color-golu-warm))
}

.golu-display {
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em
}

@media (min-width:640px) {
    .golu-display {
        font-size: 3rem;
        line-height: 1
    }
}

@media (min-width:1024px) {
    .golu-display {
        font-size: 3.75rem;
        line-height: 1
    }
}

.golu-display {
    color: inherit;
    text-wrap: balance
}

    .golu-display > span {
        display: block
    }

.golu-display--sm {
    font-size: 1.875rem;
    line-height: 2.25rem
}

@media (min-width:640px) {
    .golu-display--sm {
        font-size: 2.25rem;
        line-height: 2.5rem
    }
}

@media (min-width:1024px) {
    .golu-display--sm {
        font-size: 3rem;
        line-height: 1
    }
}

.golu-title {
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

@media (min-width:640px) {
    .golu-title {
        font-size: 2.25rem;
        line-height: 2.5rem
    }
}

@media (min-width:768px) {
    .golu-title {
        font-size: 2.75rem
    }
}

.golu-title {
    text-wrap: balance
}

.golu-lead {
    margin-top: .5rem;
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.golu-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    line-height: 1
}

@media (min-width:768px) {
    .golu-btn-ghost {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

.golu-btn-ghost:disabled,
.golu-btn-ghost[aria-disabled=true] {
    cursor: not-allowed
}

    .golu-btn-ghost:disabled,
    .golu-btn-ghost:disabled:hover,
    .golu-btn-ghost[aria-disabled=true],
    .golu-btn-ghost[aria-disabled=true]:hover {
        --tw-border-opacity: 1;
        border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-line)/var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
    }

.golu-btn-ghost:disabled,
.golu-btn-ghost[aria-disabled=true] {
    background-image: none
}

.golu-btn-ghost {
    border-width: 2px;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    border-color: hsla(0, 0%, 100%, .5)
}

    .golu-btn-ghost,
    .golu-btn-ghost:hover {
        --tw-text-opacity: 1
    }

        .golu-btn-ghost:hover {
            color: rgb(var(--color-ink)/var(--tw-text-opacity, 1));
            background-color: hsla(0, 0%, 100%, .92);
            border-color: hsla(0, 0%, 100%, .92)
        }

.app-download-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: rgb(var(--color-ink)/.5)
}

@media (min-width:640px) {
    .app-download-backdrop {
        display: none
    }
}

.app-download-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    max-height: 85vh;
    overflow-y: auto;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

@media (min-width:640px) {
    .app-download-panel {
        left: auto;
        right: auto;
        bottom: auto;
        max-height: none;
        width: 26rem;
        border-radius: 1rem
    }
}

.app-download-header {
    align-items: flex-start;
    border-bottom-width: 1px;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    padding: 1.25rem 1.25rem 1rem
}

.app-download-header,
.app-download-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    --tw-border-opacity: 1
}

.app-download-row {
    align-items: center;
    border-radius: .75rem;
    border-width: 1px;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    background-color: rgb(var(--color-flame-tint)/.7);
    padding: .75rem .875rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .app-download-row:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(var(--color-flame-tint)/var(--tw-bg-opacity, 1))
    }

.app-download-store-btn {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .app-download-store-btn,
    .app-download-store-btn:hover {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

        .app-download-store-btn:hover {
            --tw-scale-x: 1.05;
            --tw-scale-y: 1.05;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
            --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)
        }

.golu nav[aria-label="Contest sections"] a.is-active {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
}

.golu-rail-nav {
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 50%;
    z-index: 30;
    display: none;
    width: 3.5rem;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    padding-left: 1rem
}

@media (min-width:1024px) {
    .golu-rail-nav {
        display: block
    }

    .golu .container-page {
        padding-left: 5rem
    }
}

.golu-rail-nav ol {
    display: flex;
    flex-direction: column-reverse;
    gap: .625rem
}

.golu-rail-nav a {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .125rem;
    padding-bottom: .125rem
}

.golu-rail-bar {
    display: block;
    height: 3px;
    border-radius: 9999px;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    width: var(--w, 1rem);
    background-color: rgb(var(--color-ink)/.18)
}

.golu-rail-nav a:hover .golu-rail-bar {
    background-color: rgb(var(--color-ink)/.4)
}

.golu-rail-nav a.is-climbed .golu-rail-bar {
    background-color: rgb(var(--silk, var(--color-saffron))/.55)
}

.golu-rail-nav a.is-current .golu-rail-bar {
    height: .25rem;
    background-color: rgb(var(--color-marigold));
    box-shadow: 0 0 12px 1px rgb(var(--color-marigold)/.6)
}

.golu-rail-name {
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .2s;
    color: rgb(var(--color-ink-soft))
}

.golu-rail-nav a:focus-visible .golu-rail-name,
.golu-rail-nav a:hover .golu-rail-name {
    opacity: 1
}

.golu-rail-nav.on-dark .golu-rail-bar {
    background-color: hsla(0, 0%, 100%, .25)
}

.golu-rail-nav.on-dark .golu-rail-name {
    color: hsla(0, 0%, 100%, .8)
}

.golu-hero-grid {
    position: relative;
    z-index: 10;
    display: grid;
    align-items: center;
    gap: 2.5rem
}

@media (min-width:1024px) {
    .golu-hero-grid {
        grid-template-columns: minmax(0, 42%) minmax(0, 58%);
        gap: 1.5rem
    }
}

.golu-stage-copy {
    position: relative;
    z-index: 20;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.golu-stage-lead {
    margin-top: 1.25rem;
    max-width: 28rem;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.625;
    color: hsla(0, 0%, 100%, .8)
}

@media (min-width:768px) {
    .golu-stage-lead {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

.golu-hero-dates {
    margin-top: 1.25rem;
    max-width: 28rem;
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1.625;
    color: hsla(0, 0%, 100%, .6)
}

.golu-stage-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem
}

.golu-hero[data-step="7"] .golu-stage-actions .golu-btn-ghost {
    opacity: .6
}

.golu-hero[data-step="7"] .golu-stage-actions .btn-primary {
    box-shadow: 0 0 0 4px rgb(var(--color-marigold)/.28)
}

.golu-hero {
    position: relative;
    overflow: hidden;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

@media (min-width:768px) {
    .golu-hero {
        padding-top: 3rem;
        padding-bottom: 3rem
    }
}

.golu-hero {
    background-color: rgb(var(--color-golu-deep))
}

@media (min-width:1024px) {
    .golu-hero {
        min-height: 34rem;
        max-height: 600px
    }
}

.golu-hero:after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: radial-gradient(75% 65% at 70% 45%, rgb(var(--color-maroon)/.38), transparent 78%)
}

.golu-hero-wave {
    z-index: 10;
    line-height: 1
}

    .golu-hero-wave,
    .golu-hero-wave:after {
        pointer-events: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0
    }

        .golu-hero-wave:after {
            content: "";
            display: block;
            height: 2px;
            background-color: rgb(var(--color-cream))
        }

        .golu-hero-wave svg {
            display: block;
            height: 32px;
            width: 100%;
            transform: scaleX(-1) scaleY(-1)
        }

        .golu-hero-wave path {
            fill: rgb(var(--color-cream))
        }

.golu-strip-hero {
    position: relative;
    min-width: 0
}

.golu-strip-title {
    margin-bottom: .75rem;
    display: block;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: hsla(0, 0%, 100%, .45)
}

@media (min-width:1024px) {
    .golu-strip-track {
        margin-right: min(-2rem, calc(608px - 50vw));
        padding-right: 2rem
    }
}

.golu-strip-track {
    display: flex;
    min-width: 0;
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    --tw-scroll-snap-strictness: mandatory;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: none;
    scroll-behavior: smooth
}

    .golu-strip-track::-webkit-scrollbar {
        display: none
    }

@media (prefers-reduced-motion:reduce) {
    .golu-strip-track {
        scroll-behavior: auto
    }
}

.golu-strip-card {
    display: flex;
    flex-shrink: 0;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-radius: .75rem;
    text-align: left;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    width: 13.75rem;
    background-color: rgba(0, 0, 0, .35);
    filter: brightness(.82);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.golu-strip-card,
.golu-strip-media {
    position: relative;
    overflow: hidden
}

.golu-strip-media {
    aspect-ratio: 6/5
}

.golu-strip-card img,
.golu-strip-media {
    display: block;
    width: 100%
}

.golu-strip-card img {
    position: absolute;
    inset: 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    scale: 1.3
}

.golu-strip-body {
    display: block;
    padding: .875rem 1rem 1rem;
    border-top: 2px solid transparent
}

.golu-strip-step {
    margin-bottom: .375rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: rgb(var(--color-marigold)/.8)
}

.golu-strip-line,
.golu-strip-step {
    display: block;
    font-weight: 600
}

.golu-strip-line {
    min-height: 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1.375;
    color: hsla(0, 0%, 100%, .85)
}

.golu-strip-theme {
    margin-top: .625rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
    border-top-width: 1px;
    padding-top: .625rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    border-color: hsla(0, 0%, 100%, .12)
}

.golu-strip-theme-name {
    display: block;
    min-height: 1.875rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    color: rgb(var(--color-marigold)/.55)
}

.golu-strip-card.is-active .golu-strip-theme-name {
    color: rgb(var(--color-marigold))
}

.golu-strip-share {
    white-space: nowrap;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    opacity: 0;
    visibility: hidden
}

    .golu-strip-share:hover {
        color: rgb(var(--color-golu-warm))
    }

.golu-strip-card.is-active {
    filter: brightness(1);
    background-color: rgb(var(--color-golu-deep)/.95);
    box-shadow: 0 24px 48px -26px #000
}

    .golu-strip-card.is-active .golu-strip-body {
        border-top-color: rgb(var(--color-marigold))
    }

    .golu-strip-card.is-active .golu-strip-line {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity, 1))
    }

    .golu-strip-card.is-active .golu-strip-share {
        opacity: 1;
        visibility: visible
    }

.golu-strip-card:hover {
    filter: brightness(.95)
}

.golu-strip-card:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgb(var(--color-marigold))
}

.golu-strip-controls {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem
}

.golu-strip-progress {
    gap: .375rem
}

    .golu-strip-progress,
    .golu-strip-progress button {
        display: flex;
        flex: 1 1 0%;
        align-items: center
    }

        .golu-strip-progress button {
            position: relative;
            height: 1.5rem;
            max-width: 1.25rem
        }

            .golu-strip-progress button:before {
                content: "";
                display: block;
                height: 3px;
                width: 100%;
                border-radius: 9999px;
                transition-property: all;
                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
                transition-duration: .3s;
                background-color: hsla(0, 0%, 100%, .22)
            }

            .golu-strip-progress button:hover:before {
                background-color: hsla(0, 0%, 100%, .45)
            }

            .golu-strip-progress button[aria-current=true] {
                max-width: 1.75rem
            }

                .golu-strip-progress button[aria-current=true]:before {
                    background-color: rgb(var(--color-marigold))
                }

.golu-strip-arrows {
    display: flex;
    flex-shrink: 0;
    gap: .5rem
}

    .golu-strip-arrows button {
        display: flex;
        height: 2.75rem;
        width: 2.75rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border-width: 1px;
        color: hsla(0, 0%, 100%, .7);
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .15s;
        border-color: hsla(0, 0%, 100%, .25)
    }

        .golu-strip-arrows button:hover {
            --tw-text-opacity: 1;
            color: rgb(255 255 255/var(--tw-text-opacity, 1));
            border-color: rgb(var(--color-marigold)/.7);
            background-color: hsla(0, 0%, 100%, .06)
        }

        .golu-strip-arrows button[disabled] {
            cursor: not-allowed;
            opacity: .3
        }

@media (max-width:1023px) {
    .golu-strip-card {
        width: 12rem
    }
}

#how-it-works .golu-head {
    border-left-width: 0;
    padding-left: 0
}

@media (min-width:768px) {
    #how-it-works .golu-head {
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }
}

#how-it-works .golu-head {
    margin-bottom: 1.5rem
}

@media (min-width:768px) {
    #how-it-works .golu-head {
        margin-bottom: 2rem
    }
}

#stories .golu-head {
    border-left-width: 0;
    padding-left: 0
}

@media (min-width:768px) {
    #stories .golu-head {
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }
}

.golu-kolam-rule {
    margin: 1rem auto;
    height: 1px;
    width: 100%;
    max-width: 9rem;
    background-image: radial-gradient(circle, rgb(var(--color-marigold)/.7) 1px, transparent 1.5px);
    background-size: 14px 1px;
    background-repeat: repeat-x;
    background-position: 50%
}

.golu-timeline {
    position: relative;
    margin-top: .5rem
}

    .golu-timeline:after {
        content: "";
        pointer-events: none;
        position: absolute;
        left: 0;
        right: 0;
        top: -2rem;
        bottom: -2rem;
        z-index: -10;
        border-radius: 9999px;
        --tw-blur: blur(64px);
        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);
        background: radial-gradient(closest-side, rgb(var(--color-marigold)/.09), transparent 70%)
    }

.golu-timeline-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

@media (min-width:768px) {
    .golu-timeline-list {
        gap: 1.25rem
    }
}

.golu-timeline:before {
    content: "";
    position: absolute;
    width: 1px;
    left: .4375rem;
    top: .5rem;
    bottom: .5rem;
    background-color: rgb(var(--color-line))
}

@media (min-width:768px) {
    .golu-timeline:before {
        left: 50%;
        top: .75rem;
        bottom: .75rem;
        transform: translateX(-50%)
    }
}

.golu-timeline-progress {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    width: 1px;
    left: .4375rem;
    top: .5rem;
    height: 0;
    background-color: rgb(var(--color-saffron));
    transition: height 1.3s cubic-bezier(.65, 0, .35, 1)
}

@media (min-width:768px) {
    .golu-timeline-progress {
        left: 50%;
        top: .75rem;
        transform: translateX(-50%)
    }
}

.golu-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem
}

@media (min-width:768px) {
    .golu-timeline-item {
        align-items: center;
        gap: 2rem
    }
}

.golu-timeline-item:nth-child(odd) {
    flex-direction: row-reverse
}

@media (min-width:768px) {
    .golu-timeline-item:nth-child(odd) {
        flex-direction: row
    }
}

.golu-timeline-side {
    display: none
}

.golu-timeline-side--filled {
    display: block
}

@media (min-width:768px) {
    .golu-timeline-side {
        display: block;
        flex: 1 1 0%
    }

    .golu-timeline-side-start {
        text-align: right
    }

    .golu-timeline-side-end {
        text-align: left
    }
}

.golu-timeline-node {
    position: relative;
    z-index: 10;
    margin-top: .25rem;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border-width: 2px;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .5s
}

@media (min-width:768px) {
    .golu-timeline-node {
        margin-top: 0
    }
}

.golu-timeline-node {
    border-color: rgb(var(--color-line));
    background-color: rgb(var(--color-cream))
}

.golu-timeline-item.is-active .golu-timeline-node {
    border-color: rgb(var(--color-saffron));
    background-color: rgb(var(--color-saffron));
    box-shadow: 0 0 0 6px rgb(var(--color-saffron)/.18);
    transform: scale(1.2)
}

.golu-timeline-card {
    max-width: 24rem;
    border-radius: 1rem;
    border-width: 1px;
    padding: .75rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .5s
}

@media (min-width:640px) {
    .golu-timeline-card {
        padding: 1rem
    }
}

.golu-timeline-card {
    border-color: rgb(var(--color-line)/.7);
    background-color: hsla(0, 0%, 100%, .55)
}

@media (min-width:768px) {
    .golu-timeline-side-start .golu-timeline-card {
        margin-left: auto
    }

    .golu-timeline-side-end .golu-timeline-card {
        margin-right: auto
    }
}

.golu-timeline-item.is-active .golu-timeline-card {
    border-color: rgb(var(--color-saffron)/.22);
    background-color: rgb(var(--color-flame-tint));
    box-shadow: 0 16px 32px -16px rgb(var(--color-saffron)/.2)
}

@media (min-width:768px) {
    .golu-timeline-item.is-active .golu-timeline-card {
        transform: translateY(-3px)
    }
}

.golu-timeline-trigger {
    margin-bottom: .375rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: .25rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s
}

    .golu-timeline-trigger:focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px;
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(var(--color-saffron)/var(--tw-ring-opacity, 1));
        --tw-ring-offset-width: 2px;
        --tw-ring-offset-color: rgb(var(--color-cream)/1)
    }

@media (min-width:768px) {
    .golu-timeline-side-start .golu-timeline-trigger {
        flex-direction: row-reverse
    }
}

.golu-timeline-icon {
    display: flex;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .5s;
    color: rgb(var(--color-ink-soft)/.55);
    background-color: rgb(var(--color-line)/.35)
}

    .golu-timeline-icon svg {
        height: 1rem;
        width: 1rem
    }

.golu-timeline-item.is-active .golu-timeline-icon {
    color: #fff;
    background-color: rgb(var(--color-saffron));
    box-shadow: 0 0 0 6px rgb(var(--color-saffron)/.15);
    animation: golu-icon-pop .6s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes golu-icon-pop {
    0% {
        transform: scale(.55)
    }

    to {
        transform: scale(1)
    }
}

.golu-timeline-num {
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgb(var(--color-ink-soft)/.5);
    transition: color .5s
}

.golu-timeline-item.is-active .golu-timeline-num {
    color: rgb(var(--color-saffron))
}

.golu-timeline-title {
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    margin-bottom: .25rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .5s;
    color: rgb(var(--color-maroon)/.55)
}

.golu-timeline-item.is-active .golu-timeline-title {
    color: rgb(var(--color-maroon))
}

.golu-timeline-desc {
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.375;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .5s;
    color: rgb(var(--color-ink-soft)/.65)
}

.golu-timeline-item.is-active .golu-timeline-desc {
    color: rgb(var(--color-ink-soft))
}

.golu-timeline-indicator {
    pointer-events: none;
    position: absolute;
    z-index: 10;
    height: .75rem;
    width: .75rem;
    border-radius: 9999px;
    left: .4375rem;
    transform: translate(-50%, -50%);
    background-color: rgb(var(--color-marigold));
    box-shadow: 0 0 14px 3px rgb(var(--color-marigold)/.75);
    transition: top 1.3s cubic-bezier(.65, 0, .35, 1)
}

@media (min-width:768px) {
    .golu-timeline-indicator {
        left: 50%
    }
}

.golu-timeline-foot {
    margin-top: .5rem;
    display: flex;
    justify-content: center
}

#themes {
    padding-top: 2.5rem
}

@media (min-width:768px) {
    #themes {
        padding-top: 3.5rem
    }
}

@media (min-width:1024px) {
    .golu-topics-layout {
        display: grid;
        grid-template-columns: minmax(280px, 360px) 1fr;
        gap: 4rem
    }

    .golu-topics-head-col {
        height: 100%
    }
}

.golu-topics-head-col .golu-head {
    border-left-width: 0;
    padding-left: 0
}

@media (min-width:768px) {
    .golu-topics-head-col .golu-head {
        border-left-width: 4px;
        padding-left: 1.25rem
    }
}

@media (min-width:1024px) {
    .golu-topics-head-col .golu-head {
        position: sticky;
        top: 6rem
    }
}

.golu-topics-head-col .golu-lead {
    text-wrap: balance
}

.golu-topics-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem
}

.golu-topic-card,
.golu-topics-grid {
    display: grid
}

.golu-topic-card {
    position: relative;
    cursor: pointer;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    -moz-column-gap: .75rem;
    column-gap: .75rem;
    padding: 1.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s
}

    .golu-topic-card:hover {
        --tw-translate-y: -0.125rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

@media (min-width:640px) {
    .golu-topic-card {
        display: flex;
        flex-direction: column;
        -moz-column-gap: 0;
        column-gap: 0
    }
}

.golu-topic-card:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-saffron)/var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: rgb(var(--color-cream)/1)
}

.golu-topic-icon {
    grid-row: span 2/span 2;
    margin-bottom: .25rem;
    display: inline-flex
}

@media (min-width:640px) {
    .golu-topic-icon {
        grid-row: span 1/span 1
    }
}

.golu-topic-icon {
    color: rgb(var(--silk))
}

.golu-topic-num {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .025em;
    color: rgb(var(--silk)/.45)
}

.golu-topic-card .card-title {
    margin-top: 0;
    padding-right: 5rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

@media (min-width:640px) {
    .golu-topic-card .card-title {
        margin-top: .75rem;
        padding-right: 0
    }
}

.golu-topic-card .card-title {
    font-size: 1.125rem;
    line-height: 1.375
}

.golu-topic-card .body-sm {
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.375;
    margin-top: .25rem
}

.golu-topic-cta {
    grid-column-start: 2;
    margin-top: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    align-self: flex-start;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600
}

@media (min-width:640px) {
    .golu-topic-cta {
        margin-top: 1rem
    }
}

.golu-topic-cta {
    color: rgb(var(--silk))
}

.golu-topic-card:focus-visible .golu-topic-cta,
.golu-topic-card:hover .golu-topic-cta {
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.golu-topic-cta-icon {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0
}

.golu-rewards-head {
    border-left-width: 0;
    padding-left: 0
}

@media (min-width:768px) {
    .golu-rewards-head {
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }
}

.golu-rewards-stats {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    row-gap: 2rem
}

@media (min-width:640px) {
    .golu-rewards-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width:1024px) {
    .golu-rewards-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

        .golu-rewards-stats > :not([hidden]) ~ :not([hidden]) {
            --tw-divide-x-reverse: 0;
            border-right-width: calc(1px*var(--tw-divide-x-reverse));
            border-left-width: calc(1px*(1 - var(--tw-divide-x-reverse)));
            --tw-divide-opacity: 1;
            border-color: rgb(var(--color-line)/var(--tw-divide-opacity, 1))
        }
}

.golu-reward {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    text-align: left
}

@media (min-width:640px) {
    .golu-reward {
        flex-direction: column;
        align-items: center;
        gap: .375rem;
        padding-left: .5rem;
        padding-right: .5rem;
        text-align: center
    }
}

@media (min-width:1024px) {
    .golu-reward {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

.golu-reward-body {
    min-width: 0;
    flex: 1 1 0%
}

.golu-reward-icon {
    display: flex;
    height: 3.5rem;
    width: 3.5rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px
}

@media (min-width:640px) {
    .golu-reward-icon {
        margin-bottom: .25rem
    }
}

.golu-reward-icon {
    color: rgb(var(--silk, var(--color-saffron)));
    background-color: rgb(var(--silk, var(--color-saffron))/.1)
}

    .golu-reward-icon svg {
        height: 1.5rem;
        width: 1.5rem
    }

.golu-reward-title {
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.golu-reward-desc {
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.375;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.golu.js-motion .golu-reward-icon {
    scale: .55;
    opacity: 0;
    transition: scale .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease-out
}

.golu.js-motion .golu-rewards-stats.is-revealed .golu-reward-icon {
    scale: 1;
    opacity: 1
}

.golu-rewards-stats .golu-reward:first-child .golu-reward-icon {
    transition-delay: 80ms
}

.golu-rewards-stats .golu-reward:nth-child(2) .golu-reward-icon {
    transition-delay: .17s
}

.golu-rewards-stats .golu-reward:nth-child(3) .golu-reward-icon {
    transition-delay: .26s
}

.golu-rewards-stats .golu-reward:nth-child(4) .golu-reward-icon {
    transition-delay: .35s
}

@media (prefers-reduced-motion:reduce) {
    .golu.js-motion .golu-reward-icon {
        scale: 1;
        opacity: 1
    }
}

.golu-rewards-band {
    --rewards-tint: 248 238 227;
    background-color: rgb(var(--rewards-tint))
}

#rewards {
    padding-bottom: 5rem
}

@media (min-width:768px) {
    #rewards {
        padding-bottom: 8rem
    }
}

.golu-wave {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    height: 1.5rem;
    width: 100%
}

@media (min-width:640px) {
    .golu-wave {
        height: 1.75rem
    }
}

@media (min-width:768px) {
    .golu-wave {
        height: 2.5rem
    }
}

@media (min-width:1024px) {
    .golu-wave {
        height: 3rem
    }
}

.golu-wave svg {
    display: block;
    height: 100%;
    width: 100%
}

.golu-wave path {
    fill: rgb(var(--rewards-tint))
}

#themes .golu-wave path {
    fill: rgb(var(--color-golu-ivory))
}

.golu-wave--top {
    top: 0;
    transform: translateY(-100%) scaleY(-1)
}

.golu-wave--bottom {
    bottom: 0;
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

#judging .golu-head {
    border-left-width: 0;
    padding-left: 0
}

@media (min-width:768px) {
    #judging .golu-head {
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }
}

.golu-criteria {
    display: grid;
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
    row-gap: 2.25rem
}

@media (min-width:640px) {
    .golu-criteria {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width:1024px) {
    .golu-criteria {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

.golu-criterion {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s
}

    .golu-criterion .body-sm {
        font-size: 1rem;
        line-height: 1.5rem;
        line-height: 1.375
    }

.golu-criterion-icon {
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s;
    background-color: rgb(var(--color-maroon))
}

    .golu-criterion-icon svg {
        height: 1.25rem;
        width: 1.25rem
    }

.golu.js-motion .golu-criterion-icon {
    scale: .5;
    opacity: 0;
    transition: scale .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease-out;
    transition-delay: inherit
}

.golu.js-motion .golu-criterion.is-revealed .golu-criterion-icon {
    scale: 1;
    opacity: 1
}

.golu-criterion-title {
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    margin-bottom: .25rem;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.golu.js-motion .golu-criteria .golu-criterion:first-child {
    transition-delay: 0ms
}

.golu.js-motion .golu-criteria .golu-criterion:nth-child(2) {
    transition-delay: 90ms
}

.golu.js-motion .golu-criteria .golu-criterion:nth-child(3) {
    transition-delay: .18s
}

.golu.js-motion .golu-criteria .golu-criterion:nth-child(4) {
    transition-delay: .27s
}

.golu.js-motion .golu-criteria .golu-criterion:nth-child(5) {
    transition-delay: .36s
}

.golu.js-motion .golu-criteria .golu-criterion:nth-child(6) {
    transition-delay: .45s
}

.golu-criterion:hover {
    --tw-translate-y: -0.125rem
}

    .golu-criterion:hover,
    .golu-criterion:hover .golu-criterion-icon {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

        .golu-criterion:hover .golu-criterion-icon {
            --tw-scale-x: 1.1;
            --tw-scale-y: 1.1
        }

@media (prefers-reduced-motion:reduce) {
    .golu.js-motion .golu-criterion-icon {
        scale: 1;
        opacity: 1
    }
}

#rules .golu-head {
    margin-left: auto;
    margin-right: auto;
    border-left-width: 0;
    padding-left: 0;
    text-align: center
}

.golu-rules-wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem
}

.golu-faq {
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.golu-faq-item {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1))
}

    .golu-faq-item:last-child {
        border-bottom-width: 0
    }

.golu-faq-summary {
    display: flex;
    cursor: pointer;
    list-style-type: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

    .golu-faq-summary:hover {
        --tw-text-opacity: 1;
        color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
    }

    .golu-faq-summary::-webkit-details-marker {
        display: none
    }

    .golu-faq-summary:after {
        content: "";
        height: .625rem;
        width: .625rem;
        flex-shrink: 0;
        --tw-rotate: 45deg;
        border-bottom-width: 2px;
        border-right-width: 2px;
        border-color: currentColor;
        transition-property: transform;
        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        transition-duration: .2s;
        margin-top: -.25rem
    }

    .golu-faq-item[open] .golu-faq-summary:after,
    .golu-faq-summary:after {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

.golu-faq-item[open] .golu-faq-summary:after {
    --tw-rotate: 225deg;
    margin-top: .25rem
}

.golu-faq-body > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.75rem*var(--tw-space-y-reverse))
}

.golu-faq-body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 1.25rem
}

.golu-faq-list {
    list-style-type: disc
}

    .golu-faq-list > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.5rem*var(--tw-space-y-reverse))
    }

.golu-faq-list {
    padding-left: 1.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.golu-final {
    position: relative;
    overflow: hidden;
    padding-top: 5rem;
    padding-bottom: 5rem;
    text-align: center
}

@media (min-width:768px) {
    .golu-final {
        padding-top: 7rem;
        padding-bottom: 7rem
    }
}

.golu-final {
    background-color: rgb(var(--color-golu-deep))
}

    .golu-final:before {
        content: "";
        pointer-events: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 10;
        height: 1px;
        background-image: radial-gradient(circle, rgb(var(--color-marigold)/.55) 1px, transparent 1px);
        background-size: 14px 1px
    }

.golu-final-copy {
    margin-top: 1.25rem;
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 1.625;
    color: hsla(0, 0%, 100%, .85)
}

@media (min-width:768px) {
    .golu-final-copy {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

.golu-final-inner .btn-primary {
    margin-top: 2rem
}

.golu-final-meta {
    margin-top: 2rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.625;
    letter-spacing: .16em;
    color: hsla(0, 0%, 100%, .6)
}

.golu-steps-cta {
    position: relative;
    overflow: hidden;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    text-align: center
}

@media (min-width:768px) {
    .golu-steps-cta {
        padding-top: 4rem;
        padding-bottom: 4rem
    }
}

.golu-steps-cta {
    background: linear-gradient(160deg, rgb(var(--color-cream)) 0, rgb(var(--color-marigold-soft)/.55) 50%, rgb(var(--color-cream)) 100%)
}

.golu-steps-wave {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    line-height: 1
}

    .golu-steps-wave svg {
        display: block;
        height: 2rem;
        width: 100%
    }

@media (min-width:768px) {
    .golu-steps-wave svg {
        height: 2.5rem
    }
}

.golu-steps-wave-fill {
    fill: rgb(var(--color-golu-ivory))
}

.golu-steps-avatars {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none
}

@media (min-width:1024px) {
    .golu-steps-avatars {
        display: block
    }
}

.golu-steps-avatar-wrap {
    position: absolute
}

.golu-steps-avatar-wrap--1 {
    top: 18%;
    left: 17%
}

.golu-steps-avatar-wrap--3 {
    top: 42%;
    left: 14%
}

.golu-steps-avatar-wrap--2 {
    top: 66%;
    left: 20%
}

.golu-steps-avatar-wrap--4 {
    top: 18%;
    right: 17%
}

.golu-steps-avatar-wrap--5 {
    top: 42%;
    right: 14%
}

.golu-steps-avatar-wrap--6 {
    top: 66%;
    right: 20%
}

.golu-steps-avatar {
    display: block;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    border-radius: 9999px;
    -o-object-fit: cover;
    object-fit: cover;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255/var(--tw-ring-opacity, 1));
    animation: golu-steps-float 6s ease-in-out infinite
}

.golu-steps-avatar--4 {
    width: 56px;
    height: 56px;
    animation-duration: 5.2s;
    animation-delay: 1.8s
}

.golu-steps-avatar--1 {
    width: 64px;
    height: 64px;
    animation-duration: 6.4s;
    animation-delay: 1.4s
}

.golu-steps-avatar--5 {
    width: 76px;
    height: 76px;
    animation-duration: 7.6s;
    animation-delay: 1.1s
}

.golu-steps-avatar--3 {
    width: 84px;
    height: 84px;
    animation-duration: 5.6s;
    animation-delay: .7s
}

.golu-steps-avatar--6 {
    width: 92px;
    height: 92px;
    animation-duration: 6.8s;
    animation-delay: .3s
}

.golu-steps-avatar--2 {
    width: 100px;
    height: 100px;
    animation-duration: 7.2s;
    animation-delay: 0s
}

.golu-steps-inner {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    max-width: 42rem;
    flex-direction: column;
    align-items: center
}

    .golu-steps-inner,
    .golu-steps-inner .golu-display {
        --tw-text-opacity: 1;
        color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
    }

        .golu-steps-inner .golu-display {
            margin-top: 1rem
        }

        .golu-steps-inner .golu-final-copy {
            margin-top: .75rem;
            --tw-text-opacity: 1;
            color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
        }

.golu-steps-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem
}

@media (min-width:640px) {
    .golu-steps-actions {
        flex-direction: row;
        justify-content: center
    }
}

.golu-steps-inner .golu-final-meta {
    margin-top: 1.5rem;
    color: rgb(var(--color-ink-soft)/.7)
}

.golu-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1));
    background-color: hsla(0, 0%, 100%, .95);
    padding: .75rem;
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

@media (min-width:1024px) {
    .golu-sticky-cta {
        display: none
    }
}

.golu-sticky-cta {
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom))
}

.golu.js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease-out, transform .6s ease-out
}

    .golu.js-motion [data-reveal].is-revealed {
        opacity: 1;
        transform: none
    }

@media (prefers-reduced-motion:reduce) {
    .golu.js-motion [data-reveal] {
        opacity: 1;
        transform: none
    }
}

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

.pointer-events-none {
    pointer-events: none
}

.pointer-events-auto {
    pointer-events: auto
}

.\!visible {
    visibility: visible !important
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.collapse {
    visibility: collapse
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.inset-0 {
    inset: 0
}

.inset-x-3 {
    left: .75rem;
    right: .75rem
}

.inset-y-0 {
    top: 0;
    bottom: 0
}

.bottom-24 {
    bottom: 6rem
}

.bottom-\[2\%\] {
    bottom: 2%
}

.bottom-\[8\%\] {
    bottom: 8%
}

.left-2 {
    left: .5rem
}

.left-\[20\%\] {
    left: 20%
}

.left-\[40\%\] {
    left: 40%
}

.left-\[8\%\] {
    left: 8%
}

.right-0 {
    right: 0
}

.right-2 {
    right: .5rem
}

.right-\[4\%\] {
    right: 4%
}

.right-\[8\%\] {
    right: 8%
}

.top-0 {
    top: 0
}

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

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

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

.top-full {
    top: 100%
}

.z-10 {
    z-index: 10
}

.z-40 {
    z-index: 40
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.-m-1 {
    margin: -.25rem
}

.-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem
}

.mx-0 {
    margin-left: 0;
    margin-right: 0
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-14 {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem
}

.-ml-2 {
    margin-left: -.5rem
}

.mb-1 {
    margin-bottom: .25rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.ml-8 {
    margin-left: 2rem
}

.ml-auto {
    margin-left: auto
}

.mt-0 {
    margin-top: 0
}

.mt-0\.5 {
    margin-top: .125rem
}

.mt-1 {
    margin-top: .25rem
}

.mt-1\.5 {
    margin-top: .375rem
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-3 {
    margin-top: .75rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-8 {
    margin-top: 2rem
}

.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.table {
    display: table
}

.\!grid {
    display: grid !important
}

.grid {
    display: grid
}

.contents {
    display: contents
}

.hidden {
    display: none
}

.aspect-\[4\/3\] {
    aspect-ratio: 4/3
}

.aspect-\[4\/5\] {
    aspect-ratio: 4/5
}

.aspect-square {
    aspect-ratio: 1/1
}

.aspect-video {
    aspect-ratio: 16/9
}

.h-1\.5 {
    height: .375rem
}

.h-10 {
    height: 2.5rem
}

.h-12 {
    height: 3rem
}

.h-16 {
    height: 4rem
}

.h-2\.5 {
    height: .625rem
}

.h-20 {
    height: 5rem
}

.h-3\.5 {
    height: .875rem
}

.h-4 {
    height: 1rem
}

.h-5 {
    height: 1.25rem
}

.h-6 {
    height: 1.5rem
}

.h-7 {
    height: 1.75rem
}

.h-8 {
    height: 2rem
}

.h-9 {
    height: 2.25rem
}

.h-\[3\.25rem\] {
    height: 3.25rem
}

.h-full {
    height: 100%
}

.min-h-screen {
    min-height: 100vh
}

.w-1\.5 {
    width: .375rem
}

.w-10 {
    width: 2.5rem
}

.w-12 {
    width: 3rem
}

.w-16 {
    width: 4rem
}

.w-2\.5 {
    width: .625rem
}

.w-20 {
    width: 5rem
}

.w-3\.5 {
    width: .875rem
}

.w-36 {
    width: 9rem
}

.w-4 {
    width: 1rem
}

.w-5 {
    width: 1.25rem
}

.w-6 {
    width: 1.5rem
}

.w-8 {
    width: 2rem
}

.w-9 {
    width: 2.25rem
}

.w-\[26\%\] {
    width: 26%
}

.w-\[30\%\] {
    width: 30%
}

.w-\[32\%\] {
    width: 32%
}

.w-\[40\%\] {
    width: 40%
}

.w-\[46\%\] {
    width: 46%
}

.w-\[60\%\] {
    width: 60%
}

.w-auto {
    width: auto
}

.w-full {
    width: 100%
}

.min-w-0 {
    min-width: 0
}

.min-w-\[56px\] {
    min-width: 56px
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-4xl {
    max-width: 56rem
}

.max-w-lg {
    max-width: 32rem
}

.max-w-md {
    max-width: 28rem
}

.max-w-prose {
    max-width: 68ch
}

.max-w-sm {
    max-width: 24rem
}

.max-w-xl {
    max-width: 36rem
}

.flex-1 {
    flex: 1 1 0%
}

.shrink {
    flex-shrink: 1
}

.shrink-0 {
    flex-shrink: 0
}

.rotate-180 {
    --tw-rotate: 180deg
}

.rotate-180,
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes glow-ring {

    0%, to {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1), 0 0 0 0 hsla(0, 0%, 100%, .7)
    }

    50% {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1), 0 0 0 10px hsla(0, 0%, 100%, 0)
    }
}

.animate-glow-ring {
    animation: glow-ring 2s ease-in-out infinite
}

@keyframes ping {

    75%, to {
        transform: scale(2);
        opacity: 0
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite
}

.cursor-pointer {
    cursor: pointer
}

.resize {
    resize: both
}

.snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness)
}

.snap-mandatory {
    --tw-scroll-snap-strictness: mandatory
}

.snap-start {
    scroll-snap-align: start
}

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

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.flex-row {
    flex-direction: row
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-center {
    align-items: center
}

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

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

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-0 {
    gap: 0
}

.gap-0\.5 {
    gap: .125rem
}

.gap-1 {
    gap: .25rem
}

.gap-1\.5 {
    gap: .375rem
}

.gap-2 {
    gap: .5rem
}

.gap-2\.5 {
    gap: .625rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-8 {
    gap: 2rem
}

.gap-x-10 {
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem
}

.gap-x-3 {
    -moz-column-gap: .75rem;
    column-gap: .75rem
}

.gap-y-2 {
    row-gap: .5rem
}

.gap-y-6 {
    row-gap: 1.5rem
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem*var(--tw-space-y-reverse))
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.75rem*var(--tw-space-y-reverse))
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem*var(--tw-space-y-reverse))
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px*(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px*var(--tw-divide-y-reverse))
}

.divide-line > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-divide-opacity, 1))
}

.overflow-hidden {
    overflow: hidden
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}

.overflow-x-clip {
    overflow-x: clip
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis
}

.truncate,
.whitespace-nowrap {
    white-space: nowrap
}

.whitespace-pre-line {
    white-space: pre-line
}

.text-balance {
    text-wrap: balance
}

.rounded {
    border-radius: .25rem
}

.rounded-2xl {
    border-radius: 1rem
}

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

.rounded-lg {
    border-radius: .5rem
}

.rounded-md {
    border-radius: .375rem
}

.rounded-sm {
    border-radius: .125rem
}

.rounded-xl {
    border-radius: .75rem
}

.border {
    border-width: 1px
}

.border-0 {
    border-width: 0
}

.border-2 {
    border-width: 2px
}

.border-y {
    border-top-width: 1px
}

.border-b,
.border-y {
    border-bottom-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-t-0 {
    border-top-width: 0
}

.border-admin-line {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-admin-line)/var(--tw-border-opacity, 1))
}

.border-ink\/10 {
    border-color: rgb(var(--color-ink)/.1)
}

.border-line {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-line)/var(--tw-border-opacity, 1))
}

.border-line\/40 {
    border-color: rgb(var(--color-line)/.4)
}

.border-saffron {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-saffron)/var(--tw-border-opacity, 1))
}

.border-white\/10 {
    border-color: hsla(0, 0%, 100%, .1)
}

.bg-\[\#FAF8F5\] {
    --tw-bg-opacity: 1;
    background-color: rgb(250 248 245/var(--tw-bg-opacity, 1))
}

.bg-admin-surface {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-admin-surface)/var(--tw-bg-opacity, 1))
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity, 1))
}

.bg-cream {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-cream)/var(--tw-bg-opacity, 1))
}

.bg-footer {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-footer)/var(--tw-bg-opacity, 1))
}

.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94/var(--tw-bg-opacity, 1))
}

.bg-ink {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-ink)/var(--tw-bg-opacity, 1))
}

.bg-marigold-soft {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-marigold-soft)/var(--tw-bg-opacity, 1))
}

.bg-topic-eco {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-topic-eco)/var(--tw-bg-opacity, 1))
}

.bg-topic-visarjan {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-topic-visarjan)/var(--tw-bg-opacity, 1))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.bg-white\/95 {
    background-color: hsla(0, 0%, 100%, .95)
}

.fill-cream {
    fill: rgb(var(--color-cream)/1)
}

.fill-white {
    fill: #fff
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.object-bottom {
    -o-object-position: bottom;
    object-position: bottom
}

.p-0 {
    padding: 0
}

.p-1 {
    padding: .25rem
}

.p-2 {
    padding: .5rem
}

.p-3 {
    padding: .75rem
}

.p-4 {
    padding: 1rem
}

.p-5 {
    padding: 1.25rem
}

.px-0 {
    padding-left: 0;
    padding-right: 0
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-2\.5 {
    padding-left: .625rem;
    padding-right: .625rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-1\.5 {
    padding-top: .375rem;
    padding-bottom: .375rem
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.py-2\.5 {
    padding-top: .625rem;
    padding-bottom: .625rem
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.pb-2 {
    padding-bottom: .5rem
}

.pb-6 {
    padding-bottom: 1.5rem
}

.pl-10 {
    padding-left: 2.5rem
}

.pl-2 {
    padding-left: .5rem
}

.pr-1 {
    padding-right: .25rem
}

.pr-12 {
    padding-right: 3rem
}

.pr-14 {
    padding-right: 3.5rem
}

.pr-24 {
    padding-right: 6rem
}

.pt-1 {
    padding-top: .25rem
}

.pt-2 {
    padding-top: .5rem
}

.pt-4 {
    padding-top: 1rem
}

.pt-6 {
    padding-top: 1.5rem
}

.pt-8 {
    padding-top: 2rem
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.font-display {
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif
}

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

.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.font-bold {
    font-weight: 700
}

.font-extrabold {
    font-weight: 800
}

.font-medium {
    font-weight: 500
}

.font-normal {
    font-weight: 400
}

.font-semibold {
    font-weight: 600
}

.tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}

.leading-none {
    line-height: 1
}

.leading-relaxed {
    line-height: 1.625
}

.leading-snug {
    line-height: 1.375
}

.leading-tight {
    line-height: 1.25
}

.text-admin-ink {
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink)/var(--tw-text-opacity, 1))
}

.text-admin-ink-soft {
    --tw-text-opacity: 1;
    color: rgb(var(--color-admin-ink-soft)/var(--tw-text-opacity, 1))
}

.text-ink {
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.text-ink-soft {
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink-soft)/var(--tw-text-opacity, 1))
}

.text-maroon {
    --tw-text-opacity: 1;
    color: rgb(var(--color-maroon)/var(--tw-text-opacity, 1))
}

.text-saffron {
    --tw-text-opacity: 1;
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.text-white\/40 {
    color: hsla(0, 0%, 100%, .4)
}

.text-white\/70 {
    color: hsla(0, 0%, 100%, .7)
}

.opacity-0 {
    opacity: 0
}

.opacity-75 {
    opacity: .75
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline {
    outline-style: solid
}

.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.blur {
    --tw-blur: blur(8px)
}

.blur,
.brightness-0 {
    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)
}

.brightness-0 {
    --tw-brightness: brightness(0)
}

.invert {
    --tw-invert: invert(100%)
}

.filter,
.invert {
    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)
}

.backdrop-blur {
    --tw-backdrop-blur: blur(8px)
}

.backdrop-blur,
.backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

@keyframes golu-breathe {

    0%, to {
        opacity: .75
    }

    50% {
        opacity: 1
    }
}

@keyframes golu-nudge {

    0%, to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(3px)
    }
}

@keyframes golu-steps-float {

    0%, to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

.first\:pt-0:first-child {
    padding-top: 0
}

.last\:pb-0:last-child {
    padding-bottom: 0
}

.hover\:bg-cream:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-cream)/var(--tw-bg-opacity, 1))
}

.hover\:text-ink:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-ink)/var(--tw-text-opacity, 1))
}

.hover\:text-saffron:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-saffron)/var(--tw-text-opacity, 1))
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

@media (min-width:640px) {
    .sm\:-mx-6 {
        margin-left: -1.5rem;
        margin-right: -1.5rem
    }

    .sm\:mt-2 {
        margin-top: .5rem
    }

    .sm\:mt-4 {
        margin-top: 1rem
    }

    .sm\:block {
        display: block
    }

    .sm\:inline {
        display: inline
    }

    .sm\:inline-flex {
        display: inline-flex
    }

    .sm\:hidden {
        display: none
    }

    .sm\:h-44 {
        height: 11rem
    }

    .sm\:h-9 {
        height: 2.25rem
    }

    .sm\:w-72 {
        width: 18rem
    }

    .sm\:w-9 {
        width: 2.25rem
    }

    .sm\:w-\[230px\] {
        width: 230px
    }

    .sm\:w-auto {
        width: auto
    }

    .sm\:w-full {
        width: 100%
    }

    .sm\:min-w-\[64px\] {
        min-width: 64px
    }

    .sm\:max-w-sm {
        max-width: 24rem
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:flex-row {
        flex-direction: row
    }

    .sm\:flex-wrap {
        flex-wrap: wrap
    }

    .sm\:items-center {
        align-items: center
    }

    .sm\:justify-center {
        justify-content: center
    }

    .sm\:justify-between {
        justify-content: space-between
    }

    .sm\:gap-2 {
        gap: .5rem
    }

    .sm\:gap-3 {
        gap: .75rem
    }

    .sm\:gap-5 {
        gap: 1.25rem
    }

    .sm\:gap-6 {
        gap: 1.5rem
    }

    .sm\:gap-8 {
        gap: 2rem
    }

    .sm\:gap-x-10 {
        -moz-column-gap: 2.5rem;
        column-gap: 2.5rem
    }

    .sm\:gap-y-10 {
        row-gap: 2.5rem
    }

    .sm\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .sm\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .sm\:py-2 {
        padding-top: .5rem;
        padding-bottom: .5rem
    }

    .sm\:py-3 {
        padding-top: .75rem;
        padding-bottom: .75rem
    }

    .sm\:pr-28 {
        padding-right: 7rem
    }

    .sm\:text-left {
        text-align: left
    }

    .sm\:text-center {
        text-align: center
    }

    .sm\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .sm\:text-sm {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

@media (min-width:768px) {
    .md\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }

    .md\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .md\:my-16 {
        margin-top: 4rem;
        margin-bottom: 4rem
    }

    .md\:mb-0 {
        margin-bottom: 0
    }

    .md\:ml-0 {
        margin-left: 0
    }

    .md\:mt-0 {
        margin-top: 0
    }

    .md\:mt-8 {
        margin-top: 2rem
    }

    .md\:block {
        display: block
    }

    .md\:inline-flex {
        display: inline-flex
    }

    .md\:grid {
        display: grid
    }

    .md\:hidden {
        display: none
    }

    .md\:h-14 {
        height: 3.5rem
    }

    .md\:h-8 {
        height: 2rem
    }

    .md\:w-14 {
        width: 3.5rem
    }

    .md\:w-auto {
        width: auto
    }

    .md\:max-w-2xl {
        max-width: 42rem
    }

    .md\:max-w-lg {
        max-width: 32rem
    }

    .md\:shrink-0 {
        flex-shrink: 0
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:items-start {
        align-items: flex-start
    }

    .md\:items-center {
        align-items: center
    }

    .md\:justify-center {
        justify-content: center
    }

    .md\:gap-4 {
        gap: 1rem
    }

    .md\:gap-8 {
        gap: 2rem
    }

    .md\:border-l {
        border-left-width: 1px
    }

    .md\:border-t-0 {
        border-top-width: 0
    }

    .md\:p-4 {
        padding: 1rem
    }

    .md\:p-6 {
        padding: 1.5rem
    }

    .md\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    .md\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem
    }

    .md\:pb-8 {
        padding-bottom: 2rem
    }

    .md\:pl-0 {
        padding-left: 0
    }

    .md\:pl-8 {
        padding-left: 2rem
    }

    .md\:pr-8 {
        padding-right: 2rem
    }

    .md\:pt-0 {
        padding-top: 0
    }

    .md\:pt-1 {
        padding-top: .25rem
    }

    .md\:pt-10 {
        padding-top: 2.5rem
    }

    .md\:text-center {
        text-align: center
    }

    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

@media (min-width:1024px) {
    .lg\:ml-auto {
        margin-left: auto
    }

    .lg\:block {
        display: block
    }

    .lg\:inline {
        display: inline
    }

    .lg\:hidden {
        display: none
    }

    .lg\:h-10 {
        height: 2.5rem
    }

    .lg\:h-5 {
        height: 1.25rem
    }

    .lg\:h-6 {
        height: 1.5rem
    }

    .lg\:w-10 {
        width: 2.5rem
    }

    .lg\:w-5 {
        width: 1.25rem
    }

    .lg\:w-6 {
        width: 1.5rem
    }

    .lg\:w-auto {
        width: auto
    }

    .lg\:max-w-md {
        max-width: 28rem
    }

    .lg\:max-w-none {
        max-width: none
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-\[300px_1fr\] {
        grid-template-columns: 300px 1fr
    }

    .lg\:justify-center {
        justify-content: center
    }

    .lg\:gap-12 {
        gap: 3rem
    }

    .lg\:gap-8 {
        gap: 2rem
    }

    .lg\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .lg\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .lg\:py-2 {
        padding-top: .5rem;
        padding-bottom: .5rem
    }

    .lg\:text-sm {
        font-size: .875rem;
        line-height: 1.25rem
    }


    .reels-dynamic .reel-card + .reel-card {
        margin-top: 1rem !important;
    }


    .share-loader-overlay {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, .4);
    }

    .share-loader-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid rgba(255, 255, 255, .35);
        border-top-color: #fff;
        border-radius: 50%;
        animation: share-loader-spin .8s linear infinite;
    }

    @keyframes share-loader-spin {
        to {
            transform: rotate(360deg);
        }
    }




    @media (min-width:1024px) {
        .lg\:ml-auto {
            margin-left: auto
        }

        .lg\:block {
            display: block
        }

        .lg\:inline {
            display: inline
        }

        .lg\:hidden {
            display: none
        }

        .lg\:h-10 {
            height: 2.5rem
        }

        .lg\:h-5 {
            height: 1.25rem
        }

        .lg\:h-6 {
            height: 1.5rem
        }

        .lg\:w-10 {
            width: 2.5rem
        }

        .lg\:w-5 {
            width: 1.25rem
        }

        .lg\:w-6 {
            width: 1.5rem
        }

        .lg\:w-auto {
            width: auto
        }

        .lg\:max-w-md {
            max-width: 28rem
        }

        .lg\:max-w-none {
            max-width: none
        }

        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .lg\:grid-cols-\[300px_1fr\] {
            grid-template-columns: 300px 1fr
        }

        .lg\:justify-center {
            justify-content: center
        }

        .lg\:gap-12 {
            gap: 3rem
        }

        .lg\:gap-8 {
            gap: 2rem
        }

        .lg\:px-4 {
            padding-left: 1rem;
            padding-right: 1rem
        }

        .lg\:px-5 {
            padding-left: 1.25rem;
            padding-right: 1.25rem
        }

        .lg\:py-2 {
            padding-top: .5rem;
            padding-bottom: .5rem
        }

        .lg\:text-sm {
            font-size: .875rem;
            line-height: 1.25rem
        }
    }

    .reels-dynamic .reel-card + .reel-card {
        margin-top: 1rem !important;
    }

    .share-loader-overlay {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, .4);
    }

    .share-loader-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid rgba(255, 255, 255, .35);
        border-top-color: #fff;
        border-radius: 50%;
        animation: share-loader-spin .8s linear infinite;
    }

    @keyframes share-loader-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes like-pop {
        0% {
            transform: scale(1);
        }

        30% {
            transform: scale(1.35);
        }

        60% {
            transform: scale(0.9);
        }

        100% {
            transform: scale(1);
        }
    }

    .like-animate {
        animation: like-pop 0.4s ease;
    }

}