*,
: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.17 | 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 Variable, ui-sans-serif, system-ui, 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: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, 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
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    position: relative;
    min-height: 100vh;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--bg)/var(--tw-bg-opacity, 1));
    font-family: Figtree Variable, ui-sans-serif, system-ui, sans-serif;
    --tw-text-opacity: 1;
    color: rgb(var(--ink)/var(--tw-text-opacity, 1));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
    transition: background-color .3s
}

h1,
h2,
h3,
h4 {
    font-family: Bricolage Grotesque Variable, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.02em;
    text-wrap: balance
}

p {
    text-wrap: pretty
}

::-moz-selection {
    background: rgb(var(--hot)/.35)
}

::selection {
    background: rgb(var(--hot)/.35)
}

optgroup,
option {
    background: #fff;
    color: #12261b
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: rgb(var(--mute)/.75)
}

input::placeholder,
textarea::placeholder {
    color: rgb(var(--mute)/.75)
}

:focus-visible {
    outline: 2px solid rgb(var(--active, var(--hot)));
    outline-offset: 3px;
    border-radius: 12px
}

video {
    background: #0b1a12
}

[hidden] {
    display: none !important
}

.glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: inset 0 1px 0 var(--shine), inset 0 -1px 0 hsla(0, 0%, 100%, .06)
}

.glass,
.glass-strong {
    border: 1px solid var(--glass-line);
    border-radius: 28px
}

.glass-strong {
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    backdrop-filter: blur(26px) saturate(1.5);
    box-shadow: inset 0 1px 0 var(--shine)
}

.glass-pill {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 var(--shine), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    position: relative
}

.glass-pill:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 20%, transparent 42%, transparent 62%, var(--rim-lo) 84%, var(--rim-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .glass-pill {
        background: var(--glass-strong)
    }
}

.glass-pill {
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    background-color: var(--glass);
    background-image: none;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: inset 0 1px 1px var(--rim-hi)
}

.glass-pill:before {
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 16%, transparent 40%, transparent 70%, var(--rim-lo) 100%)
}

html[data-theme=fotsy] :is(.glass-pill, .glass-strong),
html[data-theme=saina] :is(.glass-pill, .glass-strong) {
    -webkit-backdrop-filter: blur(34px) saturate(1.9);
    backdrop-filter: blur(34px) saturate(1.9);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .75)
}

.glass-pill {
    border-radius: 999px
}

.glass,
.glass-strong {
    position: relative
}

.glass-strong:before,
.glass:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 20%, transparent 42%, transparent 62%, var(--rim-lo) 84%, var(--rim-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {

    .glass,
    .glass-pill {
        background: var(--glass-strong)
    }
}

.\!btn,
.btn {
    display: inline-flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    white-space: nowrap;
    border-radius: 999px;
    padding: .625rem 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-decoration-line: none;
    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: .2s
}

.\!btn {
    cursor: pointer !important;
    border: 1px solid transparent !important
}

.btn {
    cursor: pointer;
    border: 1px solid transparent
}

.\!btn:active {
    transform: scale(.97) !important
}

.btn:active {
    transform: scale(.97)
}

.btn-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--brand)/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(var(--onbrand)/var(--tw-text-opacity, 1));
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .35)
}

.btn-primary:hover {
    filter: brightness(1.08)
}

.btn-hot {
    background: rgb(var(--cta));
    color: rgb(var(--oncta));
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .35)
}

.btn-hot:hover {
    filter: brightness(1.06)
}

.btn-ghost {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 var(--shine), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    position: relative
}

.btn-ghost:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 20%, transparent 42%, transparent 62%, var(--rim-lo) 84%, var(--rim-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.btn-ghost {
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    background-color: var(--glass);
    background-image: none;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: inset 0 1px 1px var(--rim-hi)
}

.btn-ghost:before {
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 16%, transparent 40%, transparent 70%, var(--rim-lo) 100%)
}

html[data-theme=fotsy] :is(.btn-ghost, .glass-strong),
html[data-theme=saina] :is(.btn-ghost, .glass-strong) {
    -webkit-backdrop-filter: blur(34px) saturate(1.9);
    backdrop-filter: blur(34px) saturate(1.9);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .75)
}

.btn-ghost {
    border-radius: 999px
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .btn-ghost {
        background: var(--glass-strong)
    }
}

.btn-ghost {
    --tw-text-opacity: 1;
    color: rgb(var(--ink)/var(--tw-text-opacity, 1));
    box-shadow: inset 0 1px 0 var(--shine)
}

.btn-ghost:hover {
    background: var(--glass-strong)
}

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

.btn-icon {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 var(--shine), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    position: relative
}

.btn-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 20%, transparent 42%, transparent 62%, var(--rim-lo) 84%, var(--rim-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.btn-icon {
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    background-color: var(--glass);
    background-image: none;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: inset 0 1px 1px var(--rim-hi)
}

.btn-icon:before {
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 16%, transparent 40%, transparent 70%, var(--rim-lo) 100%)
}

html[data-theme=fotsy] :is(.btn-icon, .glass-strong),
html[data-theme=saina] :is(.btn-icon, .glass-strong) {
    -webkit-backdrop-filter: blur(34px) saturate(1.9);
    backdrop-filter: blur(34px) saturate(1.9);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .75)
}

.btn-icon {
    border-radius: 999px
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .btn-icon {
        background: var(--glass-strong)
    }
}

.btn-icon {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    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;
    cursor: pointer
}

.btn-icon:hover {
    background: var(--glass-strong)
}

.\!btn[disabled] {
    opacity: .45 !important;
    cursor: not-allowed !important
}

.btn[disabled] {
    opacity: .45;
    cursor: not-allowed
}

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

.field::-moz-placeholder {
    color: rgb(var(--mute)/.7)
}

.field::placeholder {
    color: rgb(var(--mute)/.7)
}

.field {
    background: rgb(var(--ink)/.06);
    border: 1px solid rgb(var(--ink)/.18);
    transition: border-color .15s, background .15s
}

.field:focus {
    outline: none;
    border-color: rgb(var(--active, var(--hot)));
    background: rgb(var(--ink)/.09)
}

select.field {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem
}

.label {
    margin-bottom: .375rem;
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600
}

.hint {
    margin-top: .25rem;
    --tw-text-opacity: 1;
    color: rgb(var(--mute)/var(--tw-text-opacity, 1))
}

.chip,
.hint {
    font-size: .75rem;
    line-height: 1rem
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: 999px;
    padding: .25rem .625rem;
    font-weight: 600;
    background: rgb(var(--ink)/.09)
}

.chip-ok {
    background: rgb(var(--ok)/.16);
    color: rgb(var(--ok))
}

.chip-hot {
    background: rgb(var(--err)/.16);
    color: rgb(var(--err))
}

.chip-mute {
    color: rgb(var(--mute))
}

.dot {
    display: inline-block;
    height: .5rem;
    width: .5rem;
    border-radius: 9999px;
    background-color: currentColor
}

.tbl {
    width: 100%;
    text-align: left;
    font-size: .875rem;
    line-height: 1.25rem
}

.tbl th {
    padding: .75rem 1rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--mute)/var(--tw-text-opacity, 1))
}

.tbl td {
    padding: .75rem 1rem;
    vertical-align: middle;
    border-top: 1px solid rgb(var(--ink)/.1)
}

.tbl tbody tr:hover {
    background: rgb(var(--ink)/.04)
}

[data-tip] {
    position: relative
}

[data-tip]:after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translate(-50%, -4px) scale(.96);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 70;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(var(--ink));
    background: var(--glass-strong);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: none;
    transition: opacity .16s, transform .16s
}

[data-tip]:focus-visible:after,
[data-tip]:hover:after {
    opacity: 1;
    transform: translate(-50%) scale(1)
}

[data-tip-up]:after {
    top: auto;
    bottom: calc(100% + 10px)
}

.kpi {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 var(--shine), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    position: relative
}

.kpi:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 20%, transparent 42%, transparent 62%, var(--rim-lo) 84%, var(--rim-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .kpi {
        background: var(--glass-strong)
    }
}

.kpi {
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    background-color: var(--glass);
    background-image: none;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: inset 0 1px 1px var(--rim-hi)
}

.kpi:before {
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 16%, transparent 40%, transparent 70%, var(--rim-lo) 100%)
}

html[data-theme=fotsy] :is(.kpi, .glass-strong),
html[data-theme=saina] :is(.kpi, .glass-strong) {
    -webkit-backdrop-filter: blur(34px) saturate(1.9);
    backdrop-filter: blur(34px) saturate(1.9);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .75)
}

.kpi {
    padding: 1.25rem
}

.kpi b {
    display: block;
    font-family: Bricolage Grotesque Variable, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    letter-spacing: -.025em
}

.flash {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 var(--shine), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    position: relative
}

.flash:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 20%, transparent 42%, transparent 62%, var(--rim-lo) 84%, var(--rim-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.flash {
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    background-color: var(--glass);
    background-image: none;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: inset 0 1px 1px var(--rim-hi)
}

.flash:before {
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 16%, transparent 40%, transparent 70%, var(--rim-lo) 100%)
}

html[data-theme=fotsy] :is(.flash, .glass-strong),
html[data-theme=saina] :is(.flash, .glass-strong) {
    -webkit-backdrop-filter: blur(34px) saturate(1.9);
    backdrop-filter: blur(34px) saturate(1.9);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .75)
}

.flash {
    border-radius: 999px
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .flash {
        background: var(--glass-strong)
    }
}

.flash {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600
}

.flash-err {
    color: rgb(var(--err))
}

.prose-cwas p {
    margin-bottom: 1rem;
    line-height: 1.625
}

.hdr-bar.on-dark,
.media-dark {
    --logo-ring: #fff;
    --logo-drop: #fff;
    --rim-hi: hsla(0, 0%, 100%, .5);
    --rim-lo: hsla(0, 0%, 100%, .14);
    --ink: 255 255 255;
    --mute: 226 238 231;
    --glass: hsla(0, 0%, 100%, .1);
    --glass-strong: rgba(8, 30, 19, .9);
    --glass-line: hsla(0, 0%, 100%, .3);
    --shine: hsla(0, 0%, 100%, .26);
    --shade: rgba(0, 0, 0, .4);
    --brand: 255 255 255;
    --onbrand: 4 74 36;
    --hot: 255 214 209;
    --ok: 172 240 202;
    color-scheme: dark
}

.hdr-bar {
    color: rgb(var(--ink));
    transition: background .35s, border-color .35s, color .35s
}

.hdr {
    position: fixed;
    inset: 14px 0 auto 0;
    z-index: 60;
    padding: 0 14px
}

.hdr-bar {
    max-width: 1240px;
    margin: 0 auto;
    gap: 12px;
    padding: 8px 10px 8px 16px;
    border-radius: 999px
}

.hdr-bar,
.nav-item {
    display: flex;
    align-items: center
}

.nav-item {
    position: relative
}

.nav-item>a,
.nav-item>button {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 999px;
    padding: .5rem .875rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-decoration-line: none;
    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;
    cursor: pointer
}

.nav-item.is-active>a,
.nav-item.open>button,
.nav-item>a:hover,
.nav-item>button:hover {
    background: rgb(var(--ink)/.1)
}

.nav-item>.nav-caret {
    width: 32px;
    height: 32px;
    margin-left: -2px;
    padding: 0;
    justify-content: center
}

.nav-caret .icon {
    width: 14px;
    height: 14px;
    transition: transform .2s
}

.nav-item.open>.nav-caret .icon {
    transform: rotate(180deg)
}

.nav-item>a:focus-visible,
.nav-item>button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

.nav-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 14px);
    width: 340px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .18s;
    z-index: 65
}

.menu.open>.nav-panel,
.nav-item.open>.nav-panel {
    opacity: 1;
    visibility: visible;
    transform: none
}

@media (hover:hover) and (pointer:fine) {
    .nav-item:hover>.nav-panel {
        opacity: 1;
        visibility: visible;
        transform: none
    }
}

.nav-panel a {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border-radius: 1rem;
    padding: .75rem;
    text-decoration-line: none;
    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
}

.nav-panel a:hover {
    background: rgb(var(--ink)/.09)
}

.nav-panel .ico {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(var(--ink)/.1)
}

.menu {
    position: relative
}

.menu>.nav-panel {
    left: auto;
    right: 0;
    width: 230px
}

.flag,
.swatch {
    width: 22px;
    height: 22px;
    border-radius: 99px;
    flex: none
}

.swatch {
    border: 2px solid rgb(var(--ink)/.35);
    display: inline-block;
    overflow: hidden;
    position: relative
}

.swatch i {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 34% 1fr;
    grid-template-rows: 1fr 1fr
}

.swatch i b:first-child {
    grid-row: 1/3
}

.sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    padding: 80px 16px 16px;
    overflow: auto
}

.icon {
    width: 1.25em;
    height: 1.25em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none
}

.vid {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.scrim,
.vid {
    position: absolute;
    inset: 0
}

.scrim {
    background: var(--scrim)
}

.shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 96px 18px
}

:where(.shell) :where(.grid) {
    grid-template-columns: minmax(0, 1fr)
}

.side {
    position: sticky;
    top: 96px;
    align-self: start;
    padding: 12px
}

.side a {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: 999px;
    padding: .625rem 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-decoration-line: none;
    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
}

.side a:hover {
    background: rgb(var(--ink)/.09)
}

.side a[aria-current=page] {
    background: rgb(var(--brand));
    color: rgb(var(--onbrand))
}

.bottomnav {
    display: none
}

@media (max-width:1023px) {
    .shell {
        grid-template-columns: minmax(0, 1fr);
        padding: 88px 12px 110px
    }

    .side {
        display: none
    }

    .bottomnav {
        display: flex;
        position: fixed;
        inset: auto 12px 12px 12px;
        z-index: 60;
        justify-content: space-around;
        padding: 8px;
        border-radius: 999px
    }

    .bottomnav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .125rem;
        border-radius: 999px;
        padding: .375rem .75rem;
        font-size: 11px;
        font-weight: 600;
        text-decoration-line: none
    }

    .bottomnav a[aria-current=page] {
        background: rgb(var(--brand));
        color: rgb(var(--onbrand))
    }
}

.slot {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 var(--shine), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    position: relative
}

.slot:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 20%, transparent 42%, transparent 62%, var(--rim-lo) 84%, var(--rim-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.slot {
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    background-color: var(--glass);
    background-image: none;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: inset 0 1px 1px var(--rim-hi)
}

.slot:before {
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 16%, transparent 40%, transparent 70%, var(--rim-lo) 100%)
}

html[data-theme=fotsy] :is(.slot, .glass-strong),
html[data-theme=saina] :is(.slot, .glass-strong) {
    -webkit-backdrop-filter: blur(34px) saturate(1.9);
    backdrop-filter: blur(34px) saturate(1.9);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .75)
}

.slot {
    border-radius: 999px
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .slot {
        background: var(--glass-strong)
    }
}

.slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    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;
    cursor: pointer
}

.slot small {
    font-size: 11px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(var(--mute)/var(--tw-text-opacity, 1))
}

.slot:hover {
    background: var(--glass-strong)
}

.slot[data-state=blocked],
.slot[data-state=full] {
    opacity: .45;
    cursor: not-allowed
}

input:checked+.slot {
    background: rgb(var(--brand));
    color: rgb(var(--onbrand));
    border-color: transparent
}

input:checked+.slot small {
    color: inherit;
    opacity: .85
}

input:focus-visible+.slot {
    outline: 2px solid rgb(var(--active, var(--hot)));
    outline-offset: 2px
}

.pick {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 var(--shine), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    position: relative
}

.pick:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 20%, transparent 42%, transparent 62%, var(--rim-lo) 84%, var(--rim-hi) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.pick {
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 hsla(0, 0%, 100%, .06);
    background-color: var(--glass);
    background-image: none;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: inset 0 1px 1px var(--rim-hi)
}

.pick:before {
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 16%, transparent 40%, transparent 70%, var(--rim-lo) 100%)
}

html[data-theme=fotsy] :is(.pick, .glass-strong),
html[data-theme=saina] :is(.pick, .glass-strong) {
    -webkit-backdrop-filter: blur(34px) saturate(1.9);
    backdrop-filter: blur(34px) saturate(1.9);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .75)
}

.pick {
    border-radius: 999px
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .pick {
        background: var(--glass-strong)
    }
}

.pick {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
    cursor: pointer
}

input:checked+.pick {
    background: rgb(var(--brand));
    color: rgb(var(--onbrand))
}

@keyframes rise {
    0% {
        opacity: 0;
        transform: translateY(22px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.rise {
    animation: rise .8s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--i, 0)*90ms)
}

.flash {
    position: relative;
    padding-right: .6rem;
    max-width: min(560px, calc(100vw - 24px));
    background: var(--glass-strong)
}

.toast-x {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 999px;
    border: 1px solid rgb(var(--ink)/.4);
    color: rgb(var(--ink));
    background: transparent;
    cursor: pointer;
    transition: background .15s, transform .15s
}

.toast-x:hover {
    background: rgb(var(--ink)/.14);
    transform: scale(1.08)
}

.toast-x .icon {
    width: 11px;
    height: 11px;
    stroke-width: 2.4
}

.snd .off,
.snd[data-sound=off] .on {
    display: none
}

.snd[data-sound=off] .\!on {
    display: none !important
}

.snd[data-sound=off] .off,
.switch {
    display: inline-flex
}

.switch {
    position: relative;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px
}

.switch i {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgb(var(--ink)/.22);
    border: 1px solid rgb(var(--ink)/.3);
    position: relative;
    transition: background .2s;
    flex: none
}

.switch i:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 99px;
    background: rgb(var(--ink));
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35)
}

.switch input:checked+i {
    background: rgb(var(--ok)/.85);
    border-color: transparent
}

.switch input:checked+i:after {
    transform: translateX(18px);
    background: #fff
}

.switch input:focus-visible+i {
    outline: 2px solid rgb(var(--active, var(--hot)));
    outline-offset: 2px
}

.vid-toggle {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .42);
    border: 1px solid hsla(0, 0%, 100%, .4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: transform .15s, background .15s
}

.vid-toggle:hover {
    background: rgba(0, 0, 0, .62);
    transform: scale(1.08)
}

.vid-toggle .icon {
    width: 14px;
    height: 14px
}

.vid-toggle [data-i=play] {
    display: none
}

.vid-toggle[data-paused=true] [data-i=play] {
    display: block
}

.vid-toggle[data-paused=true] [data-i=pause] {
    display: none
}

dialog.modal {
    border: 0;
    background: transparent;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    color: rgb(var(--ink));
    overflow: visible
}

dialog.modal::backdrop {
    background: rgba(2, 10, 6, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

dialog.modal[open] {
    animation: pop .28s cubic-bezier(.2, .9, .3, 1.2)
}

@keyframes pop {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(.96)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.printer {
    width: min(360px, 88vw);
    margin: 0 auto;
    perspective: 1100px
}

.p-body,
.printer {
    position: relative
}

.p-body {
    z-index: 3;
    height: 150px;
    border-radius: 30px 30px 20px 20px;
    transform: rotateX(7deg);
    transform-origin: 50% 100%;
    background: repeating-linear-gradient(90deg, hsla(0, 0%, 100%, .07) 0 1px, rgba(0, 0, 0, .05) 1px 2px), linear-gradient(180deg, #f5f6f7, #d5d8dc 14%, #a7adb5 46%, #8b9199 70%, #5f656d);
    box-shadow: inset 0 2px 0 hsla(0, 0%, 100%, .95), inset 0 -4px 8px rgba(0, 0, 0, .4), inset 3px 0 6px hsla(0, 0%, 100%, .35), inset -3px 0 6px rgba(0, 0, 0, .25), 0 3px 0 #4b5057, 0 26px 46px -16px rgba(0, 0, 0, .65), 0 8px 14px rgba(0, 0, 0, .25);
    overflow: hidden
}

.p-body:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 46%;
    border-radius: 30px 30px 60% 60%/30px 30px 30% 30%;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .75), hsla(0, 0%, 100%, 0));
    pointer-events: none
}

.p-body:after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    width: 26%;
    left: -40%;
    background: linear-gradient(100deg, transparent, hsla(0, 0%, 100%, .55), transparent);
    transform: skewX(-18deg);
    animation: sheen 5.5s ease-in-out infinite
}

@keyframes sheen {

    0%,
    55% {
        left: -40%
    }

    to {
        left: 140%
    }
}

.p-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 0
}

.p-brand {
    font: 800 11px/1 ui-sans-serif, system-ui;
    letter-spacing: .22em;
    color: #3b4148;
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .8)
}

.p-lcd {
    margin-left: auto;
    min-width: 96px;
    padding: 5px 10px;
    border-radius: 7px;
    font: 700 11px/1.2 ui-monospace, Menlo, monospace;
    letter-spacing: .1em;
    color: #7cffb2;
    background: #07130c;
    text-shadow: none;
    box-shadow: inset 0 2px 5px #000, 0 1px 0 hsla(0, 0%, 100%, .85), 0 0 0 2px #2a2f35
}

.p-led {
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: #ff4a3d;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4);
    flex: none
}

.printer[data-state=printing] .p-led {
    background: #22e07a;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4);
    animation: blink .35s steps(2) infinite
}

@keyframes blink {
    50% {
        opacity: .35
    }
}

.p-keys {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    padding: 12px 18px 0
}

.p-keys i {
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 35% 28%, #fff, #c3c8ce 45%, #7b828a);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .45), inset 0 -2px 3px rgba(0, 0, 0, .3)
}

.p-keys i,
.p-slot {
    border-radius: 99px
}

.p-slot {
    z-index: 2;
    left: 20px;
    right: 20px;
    bottom: 18px;
    height: 14px;
    background: #040506;
    box-shadow: inset 0 4px 7px #000, 0 1px 0 hsla(0, 0%, 100%, .9), 0 -1px 0 rgba(0, 0, 0, .35)
}

.p-foot,
.p-slot {
    position: absolute
}

.p-foot {
    z-index: 1;
    left: 22px;
    right: 22px;
    bottom: -8px;
    height: 12px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #3d4248, #17191c)
}

.paper-window {
    position: relative;
    z-index: 2;
    margin: -4px 26px 0;
    overflow: hidden;
    padding-bottom: 44px
}

.paper {
    background: #fbfbf8;
    color: #1a1a1a;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 22px 20px 26px;
    transform: translateY(-101%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 20px 40px -12px rgba(0, 0, 0, .35);
    position: relative
}

.paper:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 10px;
    background: #fbfbf8;
    clip-path: polygon(0 0, 100% 0, 100% 0, 97.92% 100%, 95.83% 0, 93.75% 100%, 91.67% 0, 89.58% 100%, 87.5% 0, 85.42% 100%, 83.33% 0, 81.25% 100%, 79.17% 0, 77.08% 100%, 75% 0, 72.92% 100%, 70.83% 0, 68.75% 100%, 66.67% 0, 64.58% 100%, 62.5% 0, 60.42% 100%, 58.33% 0, 56.25% 100%, 54.17% 0, 52.08% 100%, 50% 0, 47.92% 100%, 45.83% 0, 43.75% 100%, 41.67% 0, 39.58% 100%, 37.5% 0, 35.42% 100%, 33.33% 0, 31.25% 100%, 29.17% 0, 27.08% 100%, 25% 0, 22.92% 100%, 20.83% 0, 18.75% 100%, 16.67% 0, 14.58% 100%, 12.5% 0, 10.42% 100%, 8.33% 0, 6.25% 100%, 4.17% 0, 2.08% 100%, 0 0)
}

.printer[data-state=printing] .paper {
    animation: feed 3.6s steps(24) forwards
}

.printer[data-state=done] .paper {
    transform: none
}

.printer[data-state=torn] .paper {
    transform: translate(18px, 130%) rotate(5deg);
    opacity: 0;
    transition: transform .9s cubic-bezier(.5, 0, .8, .4), opacity .9s
}

@keyframes feed {
    to {
        transform: none
    }
}

.paper hr {
    border-top: 1px dashed #b9b9b0;
    margin: 10px 0
}

.paper .row {
    gap: 12px
}

.paper .\!row {
    gap: 12px !important
}

.paper .tot {
    font-size: 16px
}

.bars {
    display: flex;
    height: 34px;
    align-items: stretch;
    gap: 1px;
    margin-top: 10px
}

.bars i {
    display: block;
    background: #1a1a1a
}

@media print {
    body * {
        visibility: hidden
    }

    .paper-window,
    .paper-window * {
        visibility: visible
    }

    .paper-window {
        position: absolute;
        left: 50%;
        top: 10mm;
        width: 86mm;
        margin: 0;
        padding: 0;
        overflow: visible;
        transform: translateX(-50%)
    }

    .paper {
        transform: none !important;
        box-shadow: none;
        border: 1px solid #9a9a9a;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }

    .paper:after {
        display: none
    }
}

.\!lab {
    display: grid !important;
    gap: 22px !important;
    grid-template-columns: 300px minmax(0, 1fr) 340px !important;
    align-items: start !important
}

.lab {
    display: grid;
    gap: 22px;
    grid-template-columns: 300px minmax(0, 1fr) 340px;
    align-items: start
}

@media (max-width:1180px) {
    .\!lab {
        grid-template-columns: minmax(0, 1fr) !important
    }

    .lab {
        grid-template-columns: minmax(0, 1fr)
    }
}

.stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(100svh - 190px);
    padding: 10px 0 30px;
    border-radius: 32px;
    background: rgb(var(--ink)/.05);
    border: 1px solid var(--glass-line);
    overflow: hidden
}

.stage:before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 26px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    filter: blur(22px)
}

.rig {
    position: relative;
    transform-origin: 50% 50%;
    transform: scale(var(--s, 1));
    transition: transform .4s
}

.\!lab {
    touch-action: manipulation !important
}

.lab {
    touch-action: manipulation
}

@media (pointer:coarse) {
    .\!lab :is(.stage, .os-view) :is(input, textarea, select) {
        font-size: max(16px, 1em) !important
    }

    .lab :is(.stage, .os-view) :is(input, textarea, select) {
        font-size: max(16px, 1em)
    }
}

.stage.is-typing {
    position: fixed;
    z-index: 65;
    left: 8px;
    right: 8px;
    top: calc(var(--vv-top, 0px) + 8px);
    height: calc(var(--vv-h, 100dvh) - 16px);
    min-height: 0;
    padding: 6px 0;
    background-color: var(--menu-bg);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5)
}

.flipper {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(.3, .8, .2, 1);
    width: var(--w);
    height: var(--h)
}

.flipper.flipped {
    transform: rotateY(180deg)
}

.face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

.face.back {
    transform: rotateY(180deg)
}

.body {
    background: var(--phone-body);
    box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .35), inset 0 0 0 5px rgba(0, 0, 0, .18), inset 0 0 22px rgba(0, 0, 0, .28), 0 34px 60px -20px rgba(0, 0, 0, .6), 0 6px 0 var(--phone-edge)
}

.body,
.body:before {
    position: absolute;
    inset: 0
}

.body:before {
    content: "";
    border-radius: inherit;
    background: linear-gradient(115deg, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, 0) 26%, hsla(0, 0%, 100%, 0) 70%, rgba(0, 0, 0, .24));
    pointer-events: none
}

.hw {
    position: absolute;
    z-index: 6;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: var(--phone-edge);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .5), 0 1px 2px rgba(0, 0, 0, .5);
    transition: transform .08s
}

.hw:active {
    transform: scale(.92)
}

.hw.l {
    left: -4px;
    width: 5px;
    border-radius: 3px 0 0 3px
}

.hw.r {
    right: -4px;
    width: 5px;
    border-radius: 0 3px 3px 0
}

.hw.\!r {
    right: -4px !important;
    width: 5px !important;
    border-radius: 0 3px 3px 0 !important
}

.bezel {
    inset: 7px;
    background: #040404;
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .08)
}

.bezel,
.screen {
    position: absolute
}

.screen {
    inset: 10px;
    overflow: hidden;
    background: #000;
    color: #fff;
    font-family: Figtree Variable, system-ui, sans-serif
}

.screen.off:after {
    content: "";
    background: #020202;
    z-index: 50
}

.glare,
.screen.off:after {
    position: absolute;
    inset: 0
}

.glare {
    pointer-events: none;
    z-index: 60;
    background: linear-gradient(120deg, hsla(0, 0%, 100%, .14), hsla(0, 0%, 100%, 0) 32%);
    mix-blend-mode: screen
}

.dev-nova .body {
    border-radius: 50px
}

.dev-nova .bezel {
    border-radius: 44px
}

.dev-nova .screen {
    border-radius: 38px
}

.dev-max .body {
    border-radius: 46px
}

.dev-max .bezel {
    border-radius: 40px
}

.dev-max .screen {
    border-radius: 35px
}

.dev-lite .body {
    border-radius: 30px 30px 44px 44px
}

.notch {
    position: absolute;
    z-index: 70;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 26px;
    background: #040404;
    border-radius: 0 0 18px 18px
}

.notch:before {
    left: 24%;
    top: 9px;
    width: 30%;
    height: 5px;
    border-radius: 9px;
    background: #15171a
}

.notch:after,
.notch:before {
    content: "";
    position: absolute
}

.notch:after {
    right: 16%;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a4a63, #0a0d14 70%)
}

.punch {
    z-index: 70;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    background: radial-gradient(circle at 35% 30%, #3a4a63, #000 70%);
    box-shadow: 0 0 0 2px #000
}

.lens,
.punch {
    position: absolute;
    border-radius: 50%
}

.lens {
    background: radial-gradient(circle at 34% 30%, #5b6f92, #101827 46%, #02040a 74%);
    box-shadow: 0 0 0 3px #1b1d21, 0 0 0 5px hsla(0, 0%, 100%, .28), inset 0 0 6px rgba(0, 0, 0, .9)
}

.lens:after {
    content: "";
    position: absolute;
    inset: 26% 46% 46% 26%;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, .55);
    filter: blur(1px)
}

.plate {
    position: absolute;
    background: rgba(0, 0, 0, .34);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .4), 0 8px 16px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.flash-led {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff, #e8e2c8 60%, #a79f7d)
}

.wb-mark {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font: 800 15px/1 Bricolage Grotesque Variable, system-ui;
    letter-spacing: .26em;
    color: hsla(0, 0%, 100%, .72);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .25)
}

.dev-max .wb-mark,
.dev-nova .wb-mark {
    color: rgba(0, 0, 0, .34);
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .4)
}

[data-theme=maitso] .dev-max .wb-mark,
[data-theme=maitso] .dev-nova .wb-mark,
[data-theme=mena] .dev-max .wb-mark,
[data-theme=mena] .dev-nova .wb-mark {
    color: hsla(0, 0%, 100%, .7);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .3)
}

.lite-screen {
    position: absolute;
    left: 36px;
    right: 36px;
    top: 46px;
    height: 215px;
    background: #04140b;
    border-radius: 10px;
    box-shadow: 0 0 0 4px #0b0d0f, 0 0 0 6px hsla(0, 0%, 100%, .35), inset 0 0 12px #000;
    overflow: hidden
}

.lite-screen.off:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #020202;
    z-index: 9
}

.lite-speaker {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 7px;
    border-radius: 9px;
    background: #0a0a0a;
    box-shadow: inset 0 2px 3px #000, 0 1px 0 hsla(0, 0%, 100%, .45)
}

.softkeys {
    position: absolute;
    left: 34px;
    right: 34px;
    top: 284px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.sk {
    width: 64px;
    height: 30px;
    border-radius: 15px;
    border: 0;
    cursor: pointer;
    color: #e8ece9;
    font: 700 11px/1 ui-sans-serif, system-ui;
    background: linear-gradient(180deg, #2c3034, #0d0f11);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .28), 0 2px 3px rgba(0, 0, 0, .5)
}

.dpad {
    position: absolute;
    left: 50%;
    top: 268px;
    transform: translateX(-50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #3a4045, #0a0c0e 70%);
    box-shadow: 0 0 0 4px var(--phone-accent), 0 0 0 6px rgba(0, 0, 0, .4), 0 4px 8px rgba(0, 0, 0, .5);
    display: grid;
    place-items: center
}

.dpad button {
    position: absolute;
    border: 0;
    background: transparent;
    color: #cfd6d2;
    cursor: pointer;
    font-size: 10px
}

.dpad .ok {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, #4b5157, #101315);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .3), 0 2px 3px rgba(0, 0, 0, .5)
}

.dpad .\!ok {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 40% 30%, #4b5157, #101315) !important;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .3), 0 2px 3px rgba(0, 0, 0, .5) !important
}

.dpad .u {
    top: 3px
}

.dpad .d,
.dpad .u {
    left: 32px;
    width: 20px;
    height: 18px
}

.dpad .d {
    bottom: 3px
}

.dpad .\!d {
    bottom: 3px !important;
    left: 32px !important;
    width: 20px !important;
    height: 18px !important
}

.dpad .lf {
    left: 3px
}

.dpad .lf,
.dpad .rt {
    top: 32px;
    width: 18px;
    height: 20px
}

.dpad .rt {
    right: 3px
}

.keys {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 366px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.k {
    height: 38px;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    color: #f1f4f2;
    background: linear-gradient(180deg, #30353a, #121416);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .3), 0 2px 0 #050607, 0 4px 6px rgba(0, 0, 0, .4);
    font: 700 15px/1 ui-sans-serif, system-ui;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform .06s, box-shadow .06s
}

.k small {
    font-size: 7px;
    font-weight: 600;
    color: #a9b2ad;
    letter-spacing: .06em
}

.k.hit,
.k:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .2), 0 0 0 #050607
}

.k.call {
    background: linear-gradient(180deg, #2fbf5a, #16793a)
}

.k.end {
    background: linear-gradient(180deg, #e0483d, #8f1f17)
}

.os {
    font-size: 13px
}

.os,
.os-wall {
    position: absolute;
    inset: 0
}

.os-wall {
    display: grid;
    grid-template-columns: 34% 1fr;
    grid-template-rows: 1fr 1fr
}

.os-wall i:first-child {
    grid-row: 1/3;
    background: var(--f1)
}

.os-wall i:nth-child(2) {
    background: var(--f2)
}

.os-wall i:nth-child(3) {
    background: var(--f3)
}

.os-wall:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 70% at 50% 0, hsla(0, 0%, 100%, .16), rgba(0, 0, 0, .28))
}

.os-status {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: 0;
    height: 34px;
    padding: 8px 22px 0;
    justify-content: space-between;
    font-weight: 700;
    font-size: 12px;
    color: var(--os-ink, #fff)
}

.os-status,
.os-status .r {
    display: flex;
    align-items: center
}

.os-status .r {
    gap: 6px
}

.os-status .\!r {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important
}

.batt {
    display: inline-block;
    width: 22px;
    height: 11px;
    border: 1.5px solid;
    border-radius: 3.5px;
    position: relative;
    padding: 1px
}

.batt:after {
    content: "";
    position: absolute;
    right: -4px;
    top: 2.5px;
    width: 2px;
    height: 4px;
    border-radius: 0 2px 2px 0
}

.batt b,
.batt:after {
    background: currentColor
}

.batt b {
    display: block;
    height: 100%;
    width: 80%;
    border-radius: 1.5px
}

.os-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--os-bg, #fff);
    color: var(--os-fg, #111);
    transform-origin: var(--ox, 50%) var(--oy, 50%);
    transition: transform .34s cubic-bezier(.25, .9, .3, 1), opacity .28s;
    padding-top: 34px
}

.os-view.away {
    opacity: 0;
    pointer-events: none;
    transform: scale(.6)
}

.os-view.dark {
    --os-bg: #0f1412;
    --os-fg: #f2f5f3
}

.os-home {
    padding: 56px 16px 96px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: min-content;
    gap: 18px 8px;
    align-content: start
}

.app,
.os-home {
    background: transparent;
    color: #fff
}

.app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 0;
    cursor: pointer;
    font: 600 10.5px/1 Figtree Variable, system-ui;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6)
}

.app-ico {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .35), inset 0 1px 0 hsla(0, 0%, 100%, .3);
    transition: transform .12s
}

.app:active .app-ico {
    transform: scale(.88)
}

.app-ico svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round
}

.dock {
    z-index: 20;
    left: 12px;
    right: 12px;
    bottom: 26px;
    height: 74px;
    border-radius: 26px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: hsla(0, 0%, 100%, .2);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid hsla(0, 0%, 100%, .3)
}

.dock,
.home-bar {
    position: absolute
}

.home-bar {
    z-index: 45;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 34%;
    height: 5px;
    border-radius: 9px;
    background: hsla(0, 0%, 100%, .85);
    border: 0;
    cursor: pointer;
    padding: 0
}

.os-lock {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 76px;
    color: #fff;
    transition: transform .5s cubic-bezier(.3, .8, .2, 1), opacity .4s;
    background: transparent;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4)
}

.os-lock.gone {
    transform: translateY(-105%);
    opacity: 0;
    pointer-events: none
}

.os-lock .time {
    font: 700 68px/1 Bricolage Grotesque Variable, system-ui;
    letter-spacing: -.03em
}

.os-lock .date {
    font-weight: 600;
    opacity: .92;
    margin-top: 6px
}

.os-lock .hint {
    position: absolute;
    bottom: 28px;
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
    animation: pulse 2s ease-in-out infinite
}

@keyframes pulse {
    50% {
        opacity: .4
    }
}

.banner {
    position: absolute;
    z-index: 80;
    left: 10px;
    right: 10px;
    top: 10px;
    padding: 10px 12px;
    border-radius: 20px;
    background: rgba(245, 247, 246, .94);
    color: #111;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
    transform: translateY(-140%);
    transition: transform .4s cubic-bezier(.2, .9, .3, 1.1);
    cursor: pointer
}

.banner.show {
    transform: none
}

.banner b,
.banner span {
    font-size: 12px
}

.banner span {
    color: #333;
    display: block;
    line-height: 1.25
}

.banner .app-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex: none
}

.banner .app-ico svg {
    width: 17px;
    height: 17px
}

.app-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 10px;
    font: 700 18px/1 Bricolage Grotesque Variable, system-ui
}

.app-head .bk {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: hsla(0, 0%, 50%, .18);
    color: inherit;
    cursor: pointer;
    display: grid;
    place-items: center
}

.dial-out {
    padding: 6px 24px;
    font: 600 28px/1.2 Bricolage Grotesque Variable, system-ui;
    text-align: center;
    min-height: 44px;
    letter-spacing: .02em;
    word-break: break-all
}

.pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 8px 26px
}

.pad button {
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: hsla(0, 0%, 50%, .16);
    color: inherit;
    font: 600 22px/1 Figtree Variable, system-ui;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform .06s, background .1s
}

.pad button small {
    font-size: 8px;
    letter-spacing: .1em;
    opacity: .6
}

.pad button:active {
    transform: scale(.92);
    background: hsla(0, 0%, 50%, .34)
}

.callbtn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 0;
    background: #25b35a;
    color: #fff;
    display: grid;
    place-items: center;
    margin: 6px auto;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .28)
}

.callbtn svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ussd-sheet {
    position: absolute;
    z-index: 60;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: grid;
    place-items: center;
    padding: 22px;
    animation: pop .25s
}

.ussd-card {
    width: 100%;
    border-radius: 22px;
    background: #f4f6f5;
    color: #111;
    padding: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5)
}

.ussd-card pre {
    white-space: pre-wrap;
    word-break: break-word;
    font: 500 13px/1.45 ui-monospace, Menlo, monospace;
    margin: 0 0 12px;
    max-height: 260px;
    overflow: auto
}

.ussd-card input {
    width: 100%;
    border: 0;
    border-bottom: 2px solid #111;
    background: transparent;
    font: 600 16px/1.6 ui-monospace, Menlo, monospace;
    color: #111;
    outline: none
}

.ussd-card .row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    justify-content: flex-end
}

.ussd-card .\!row {
    display: flex !important;
    gap: 10px !important;
    margin-top: 12px !important;
    justify-content: flex-end !important
}

.ussd-card button {
    border: 0;
    background: transparent;
    color: #111;
    font: 700 13px/1 system-ui;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 10px
}

.ussd-card button:hover {
    background: rgba(0, 0, 0, .06)
}

.thread {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    flex: 1
}

.sms-b,
.thread {
    padding: 8px 12px
}

.sms-b {
    max-width: 80%;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word
}

.sms-in {
    background: #e6e9e8;
    color: #111;
    border-bottom-left-radius: 5px;
    align-self: flex-start
}

.sms-out {
    background: #2f7bff;
    color: #fff;
    border-bottom-right-radius: 5px;
    align-self: flex-end
}

.compose {
    display: flex;
    gap: 8px;
    padding: 8px 10px 26px
}

.compose input {
    flex: 1;
    border: 0;
    border-radius: 20px;
    padding: 9px 14px;
    background: hsla(0, 0%, 50%, .18);
    color: inherit;
    font: 500 13px Figtree Variable, system-ui;
    outline: none
}

.compose button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #2f7bff;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center
}

.list-i {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-top: 1px solid hsla(0, 0%, 50%, .2);
    color: inherit;
    width: 100%;
    text-align: left;
    font: 500 14px Figtree Variable, system-ui
}

.list-i small {
    display: block;
    font-size: 11px;
    opacity: .6;
    margin-top: 2px
}

.list-i:hover {
    background: hsla(0, 0%, 50%, .1)
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    flex: none
}

.lite-os {
    position: absolute;
    inset: 0;
    background: #fff;
    color: #111;
    font: 600 12px/1.35 ui-monospace, Menlo, monospace;
    display: flex;
    flex-direction: column
}

.lite-os[data-state=home],
.lite-os[data-state=menu] {
    background: #fff url(/static/media/hero/hero-base-port.webp) 50%/cover
}

.lite-os:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none
}

.lite-os[data-state=home]:before {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .62))
}

.lite-os[data-state=menu]:before {
    background: hsla(0, 0%, 100%, .3)
}

.lite-os>* {
    position: relative
}

.lite-os .bar {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    background: hsla(0, 0%, 100%, .94);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    font-size: 10px
}

.lite-os .main {
    flex: 1;
    padding: 8px;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word
}

.lite-os .foot {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    background: hsla(0, 0%, 100%, .94);
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: 11px;
    color: #111
}

.lite-os .sel {
    background: #111;
    color: #fff;
    border-radius: 2px;
    padding: 0 3px
}

.lite-os .big {
    font-size: 36px;
    font-weight: 800;
    text-align: center;
    margin-top: 26px;
    letter-spacing: .04em
}

.lite-os input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #111;
    color: #111;
    font: inherit;
    outline: none
}

.chat-shell {
    display: grid;
    gap: 16px;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: stretch;
    height: calc(100svh - 190px);
    min-height: 520px
}

@media (max-width:1023px) {
    .chat-shell {
        grid-template-columns: 1fr;
        height: auto
    }

    .chat-list {
        max-height: 170px
    }
}

.chat-list {
    overflow-y: auto;
    padding: 10px
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer
}

.chat-item:hover {
    background: rgb(var(--ink)/.09)
}

.chat-item[aria-current=true] {
    background: rgb(var(--brand));
    color: rgb(var(--onbrand))
}

.chat-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.chat-item .x {
    opacity: 0;
    width: 22px;
    height: 22px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer
}

.chat-item .\!x {
    opacity: 0 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 99px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    cursor: pointer !important
}

.chat-item:focus-within .x,
.chat-item:hover .x {
    opacity: 1
}

.chat-item:focus-within .\!x,
.chat-item:hover .\!x {
    opacity: 1 !important
}

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    gap: 12px
}

.chat-log,
.msg {
    display: flex;
    flex-direction: column
}

.msg {
    max-width: min(720px, 88%);
    gap: 6px
}

.msg.me {
    align-self: flex-end;
    align-items: flex-end
}

.msg.\!me {
    align-self: flex-end !important;
    align-items: flex-end !important
}

.msg .bubble {
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%
}

.msg.me .bubble {
    background: rgb(var(--brand));
    color: rgb(var(--onbrand));
    border-bottom-right-radius: 6px
}

.msg.\!me .bubble {
    background: rgb(var(--brand)) !important;
    color: rgb(var(--onbrand)) !important;
    border-bottom-right-radius: 6px !important
}

.msg.ai .bubble {
    background: rgb(var(--ink)/.1);
    border-bottom-left-radius: 6px
}

.msg .meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    color: rgb(var(--mute))
}

.msg .mini {
    width: 24px;
    height: 24px;
    border-radius: 99px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgb(var(--ink)/.28);
    background: transparent;
    color: inherit;
    cursor: pointer
}

.msg .mini:hover {
    background: rgb(var(--ink)/.12)
}

.msg .mini .icon {
    width: 12px;
    height: 12px
}

.att {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.att a,
.att div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 14px;
    border: 1px solid rgb(var(--ink)/.22);
    background: rgb(var(--ink)/.06);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    max-width: 260px
}

.att img {
    width: 54px;
    height: 54px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 10px
}

.composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--glass-line)
}

.composer textarea {
    flex: 1;
    max-height: 130px;
    resize: none
}

.\!typing {
    display: inline-flex !important;
    gap: 4px !important;
    padding: 12px 15px !important
}

.typing {
    display: inline-flex;
    gap: 4px;
    padding: 12px 15px
}

.\!typing i {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: rgb(var(--ink)/.55) !important;
    animation: bob 1s infinite !important
}

.typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(var(--ink)/.55);
    animation: bob 1s infinite
}

.\!typing i:nth-child(2) {
    animation-delay: .15s !important
}

.typing i:nth-child(2) {
    animation-delay: .15s
}

.\!typing i:nth-child(3) {
    animation-delay: .3s !important
}

.typing i:nth-child(3) {
    animation-delay: .3s
}

@keyframes bob {
    50% {
        transform: translateY(-5px);
        opacity: .4
    }
}

.mic-on {
    background: rgb(var(--hot)) !important;
    color: #fff !important;
    animation: pulse 1s infinite
}

.legal {
    display: grid;
    gap: 28px;
    grid-template-columns: 240px minmax(0, 1fr)
}

@media (max-width:900px) {
    .legal {
        grid-template-columns: 1fr
    }
}

.legal nav {
    position: sticky;
    top: 100px;
    align-self: start
}

.legal nav a:hover {
    background: transparent !important;
    text-decoration: underline;
    text-underline-offset: .18em
}

.legal h2 {
    scroll-margin-top: 110px
}

.legal .sec p {
    margin: .55rem 0;
    line-height: 1.75
}

.js main {
    animation: pagein .6s ease both
}

@keyframes pagein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.js [data-reveal] {
    transition: opacity .45s ease var(--d, 0ms), transform .55s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms)
}

.js [data-reveal]:not(.in) {
    opacity: 0;
    transform: translateY(14px)
}

.js [data-reveal].in {
    opacity: 1;
    transform: none
}

.js [data-reveal].done {
    clip-path: none;
    transition: none
}

.tw {
    overflow: hidden;
    vertical-align: top;
    padding: .06em .02em .16em;
    margin: -.06em -.02em -.16em
}

.tc,
.tw {
    display: inline-block
}

.tc {
    will-change: transform
}

.js [data-type]:not(.in) .tc {
    transform: translateY(112%) rotate(7deg)
}

.js [data-type] .tc {
    transition: transform .9s cubic-bezier(.2, .9, .2, 1) calc(var(--i)*24ms)
}

.js [data-type].in .tc {
    transform: none
}

.tframe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 0;
    height: .78em;
    margin: 0;
    border-radius: .4em;
    background: rgb(var(--cta));
    overflow: hidden;
    transition: width .9s cubic-bezier(.7, 0, .2, 1) .5s, margin .9s .5s
}

html[data-theme=saina] .tframe {
    background: #ea2839
}

.tframe svg {
    width: .6em;
    height: .6em;
    flex: none;
    transform: scale(0) rotate(-90deg);
    transition: transform .8s cubic-bezier(.2, .9, .2, 1) 1.2s
}

.install-card.is-in {
    animation: ic-pop .9s cubic-bezier(.2, .9, .25, 1.2) both, ic-hover 6s ease-in-out .9s infinite
}

.install-card:after {
    content: "";
    position: absolute;
    inset: -35%;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(38% 48% at 22% 32%, rgba(0, 132, 63, .32), transparent 70%), radial-gradient(34% 44% at 78% 68%, rgba(234, 40, 57, .28), transparent 70%), radial-gradient(30% 40% at 55% 20%, hsla(0, 0%, 100%, .5), transparent 70%);
    filter: blur(14px);
    animation: ic-liquid 10s ease-in-out infinite alternate
}

@keyframes ic-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, calc(100% + 24px)) scale(.9)
    }

    55% {
        opacity: 1;
        transform: translate(-50%, -10px) scale(1.02)
    }

    78% {
        transform: translate(-50%, 3px) scale(.995)
    }

    to {
        opacity: 1;
        transform: translate(-50%) scale(1)
    }
}

@keyframes ic-hover {

    0%,
    to {
        transform: translate(-50%)
    }

    50% {
        transform: translate(-50%, -5px)
    }
}

@keyframes ic-liquid {
    0% {
        transform: translate(-8%, -6%) rotate(0deg) scale(1)
    }

    50% {
        transform: translate(4%, 6%) rotate(18deg) scale(1.08)
    }

    to {
        transform: translate(8%, -2%) rotate(-10deg) scale(.96)
    }
}

@media (prefers-reduced-motion:reduce) {

    .install-card.is-in,
    .install-card:after {
        animation: none
    }
}

[data-type].in .tframe {
    width: 1.5em;
    margin: 0 .18em
}

[data-type].in .tframe svg {
    transform: none
}

.install-card {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: min(460px, calc(100vw - 24px));
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 32px;
    grid-template-areas: "icon copy x" "icon actions actions";
    -moz-column-gap: 14px;
    column-gap: 14px;
    row-gap: 10px;
    align-items: center;
    padding: 14px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    color: rgb(var(--ink));
    background-color: var(--glass-strong);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(30px) saturate(1.9);
    backdrop-filter: blur(30px) saturate(1.9);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .55), inset 0 -1px 0 hsla(0, 0%, 100%, .12), 0 28px 70px -28px rgba(0, 0, 0, .55);
    opacity: 0;
    transform: translate(-50%, calc(100% + 24px)) scale(.96);
    transition: opacity .35s ease, transform .55s cubic-bezier(.2, .9, .2, 1)
}

.install-card.is-in {
    opacity: 1;
    transform: translate(-50%) scale(1)
}

.install-card [hidden],
.install-card[hidden] {
    display: none
}

.install-card:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, .75), #00843f, #ea2839, hsla(0, 0%, 100%, .75), #00843f);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: .7;
    animation: ic-rim 7s linear infinite
}

@keyframes ic-rim {
    to {
        background-position: -300% 0
    }
}

@keyframes ic-sheen {

    0%,
    20% {
        background-position: 120% 0
    }

    60%,
    to {
        background-position: -40% 0
    }
}

@keyframes ic-float {
    50% {
        transform: translateY(-3px) rotate(-2deg)
    }
}

.ic-icon {
    grid-area: icon;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
    animation: ic-float 5s ease-in-out infinite
}

.ic-copy {
    grid-area: copy;
    min-width: 0
}

.ic-title {
    margin: 0;
    font: 800 1.05rem/1.2 Bricolage Grotesque Variable, system-ui
}

.ic-text {
    margin: 2px 0 0;
    font-size: .86rem;
    line-height: 1.35;
    color: rgb(var(--mute))
}

.ic-x {
    grid-area: x;
    align-self: start;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--glass-line);
    background: rgb(var(--ink)/.06);
    color: rgb(var(--ink));
    cursor: pointer
}

.ic-x:hover {
    background: rgb(var(--ink)/.12)
}

.ic-x .icon {
    width: 14px;
    height: 14px
}

.ic-actions .\!btn {
    padding: 8px 16px !important;
    font-size: .9rem !important
}

.ic-actions .btn {
    padding: 8px 16px;
    font-size: .9rem
}

@media (max-width:1023px) {
    body:has(.more-sheet) .install-card {
        bottom: calc(92px + env(safe-area-inset-bottom, 0px))
    }
}

@media (prefers-reduced-motion:reduce) {
    .install-card {
        transition: opacity .2s
    }

    .install-card,
    .install-card.is-in {
        transform: translate(-50%)
    }

    .ic-icon,
    .ic-sheen,
    .install-card:before {
        animation: none
    }
}

@media print {
    .install-card {
        display: none !important
    }
}

.tframe use {
    color: #fff
}

.is-liquid {
    filter: url(#liquid)
}

.tn-head [data-liquid],
.gt-copy [data-liquid] {
    pointer-events: auto;
    touch-action: pan-y
}


html[data-theme=saina]:root {
    --glass: hsla(0, 0%, 100%, .1);
    --glass-strong: hsla(0, 0%, 100%, .16)
}

html[data-theme=saina] :is(.gt-copy, .install-card) {
    --glass-strong: hsla(0, 0%, 100%, .56)
}

.tilt {
    transition: transform .35s cubic-bezier(.2, .9, .2, 1), box-shadow .35s;
    will-change: transform
}

.tilt.on {
    transition: transform .08s linear
}

.tilt.\!on {
    transition: transform .08s linear !important
}

.bar-grow {
    transform-origin: 50% 100%;
    transition: transform 1s cubic-bezier(.2, .9, .2, 1);
    transition-delay: calc(var(--i, 0)*70ms)
}

[data-scroll-latest] {
    scroll-behavior: auto
}

.js [data-bars]:not(.in) .bar-grow {
    transform: scaleY(0)
}

.side a {
    transition: background .2s, transform .3s cubic-bezier(.2, .9, .2, 1)
}

.side a:hover {
    transform: translateX(5px)
}

.bottomnav a .icon,
.side a .icon {
    transition: transform .35s cubic-bezier(.2, .9, .2, 1)
}

.side a:hover .icon {
    transform: rotate(-10deg) scale(1.18)
}

.ring .icon {
    animation: bell 1.1s ease
}

@keyframes bell {

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

    15% {
        transform: rotate(16deg)
    }

    30% {
        transform: rotate(-14deg)
    }

    45% {
        transform: rotate(10deg)
    }

    60% {
        transform: rotate(-8deg)
    }

    75% {
        transform: rotate(4deg)
    }
}

.hv {
    position: relative;
    overflow: hidden;
    isolation: isolate
}

.hv-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    text-decoration: none;
    background: rgb(var(--brand));
    color: rgb(var(--onbrand));
    pointer-events: none
}

.hv:focus-within .hv-layer,
.hv:hover .hv-layer {
    pointer-events: auto
}

.hv-in {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 26px;
    text-align: center
}

.hv-in .icon {
    width: 54px;
    height: 54px;
    stroke-width: 1.4
}

.hv-in b {
    font: 800 1.5rem/1.1 Bricolage Grotesque Variable, system-ui
}

.hv-in span {
    font-size: .85rem;
    font-weight: 600;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 1px solid;
    border-radius: 999px;
    padding: 6px 14px
}

.hv-diagonal .hv-layer {
    clip-path: polygon(0 0, 0 0, 0 0);
    transition: clip-path .75s cubic-bezier(.7, 0, .2, 1)
}

.hv-diagonal:focus-within .hv-layer,
.hv-diagonal:hover .hv-layer {
    clip-path: polygon(0 0, 320% 0, 0 320%)
}

.hv-diagonal .hv-in {
    transform: translate(-44px, 44px);
    transition: transform .75s cubic-bezier(.7, 0, .2, 1)
}

.hv-diagonal:focus-within .hv-in,
.hv-diagonal:hover .hv-in {
    transform: none
}

.hv-swing .hv-layer {
    transform-origin: 50% 100%;
    transform: translateY(104%) rotate(-11deg);
    transition: transform .75s cubic-bezier(.2, .9, .2, 1)
}

.hv-swing:focus-within .hv-layer,
.hv-swing:hover .hv-layer {
    transform: none
}

.hv-swing .hv-in {
    transform: rotate(11deg) scale(1.9);
    transition: transform .9s cubic-bezier(.2, .9, .2, 1)
}

.hv-swing:focus-within .hv-in,
.hv-swing:hover .hv-in {
    transform: none
}

.hv-bloom .hv-layer {
    clip-path: circle(0 at 50% 50%);
    transform: scale(.45) rotate(-28deg);
    transition: clip-path .8s cubic-bezier(.2, .9, .2, 1), transform .8s cubic-bezier(.2, .9, .2, 1)
}

.hv-bloom:focus-within .hv-layer,
.hv-bloom:hover .hv-layer {
    clip-path: circle(80% at 50% 50%);
    transform: none
}

.hv-bloom .hv-in {
    transform: rotate(28deg) scale(.6);
    transition: transform .9s cubic-bezier(.2, .9, .2, 1)
}

.hv-bloom:focus-within .hv-in,
.hv-bloom:hover .hv-in {
    transform: none
}

.hv-placard .hv-layer {
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform .5s cubic-bezier(.7, 0, .2, 1)
}

.hv-placard:focus-within .hv-layer,
.hv-placard:hover .hv-layer {
    transform: none
}

.hv-placard .hv-in {
    opacity: 0;
    transform: translateY(34px) scale(.86);
    transition: opacity .5s ease .38s, transform .6s cubic-bezier(.2, .9, .2, 1) .38s
}

.hv-placard:focus-within .hv-in,
.hv-placard:hover .hv-in {
    opacity: 1;
    transform: none
}

.hv-wipe .hv-layer {
    clip-path: inset(0 0 0 100%);
    transition: clip-path .65s cubic-bezier(.7, 0, .2, 1)
}

.hv-wipe:focus-within .hv-layer,
.hv-wipe:hover .hv-layer {
    clip-path: inset(0 0 0 0)
}

.hv-wipe .hv-in {
    opacity: 0;
    transform: translateX(46px);
    transition: opacity .5s ease .3s, transform .6s cubic-bezier(.2, .9, .2, 1) .3s
}

.hv-wipe:focus-within .hv-in,
.hv-wipe:hover .hv-in {
    opacity: 1;
    transform: none
}

.lts {
    perspective: 700px
}

.lt,
.lts {
    display: inline-block
}

.lt {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2, .9, .2, 1) calc(var(--i)*32ms)
}

.lt b {
    font-weight: inherit
}

.lt b,
.lt i {
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden
}

.lt i {
    position: absolute;
    inset: 0;
    font-style: normal;
    color: rgb(var(--hot));
    transform: rotateX(180deg)
}

a:focus-visible .lt,
a:hover .lt {
    transform: rotateX(180deg)
}

.bigmenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: .15em 0;
    font: 800 clamp(2.4rem, 8vw, 6.5rem)/1 Bricolage Grotesque Variable, system-ui;
    letter-spacing: -.03em;
    text-decoration: none;
    border-top: 1px solid var(--glass-line)
}

.bigmenu:last-child {
    border-bottom: 1px solid var(--glass-line)
}

.bigmenu .go {
    width: .7em;
    height: .7em;
    flex: none;
    transition: transform .5s cubic-bezier(.2, .9, .2, 1)
}

.bigmenu .lt i {
    color: var(--accent2)
}

.bigmenu:focus-visible [data-letters]:not(.lts),
.bigmenu:hover [data-letters]:not(.lts) {
    color: var(--accent2)
}

.orbit {
    position: relative;
    height: clamp(400px, 50vw, 540px);
    perspective: 1300px;
    overflow: visible
}

.orbit-stage {
    inset: 0
}

.orb-card,
.orbit-stage {
    position: absolute;
    transform-style: preserve-3d
}

.orb-card {
    left: 50%;
    top: 50%;
    width: 196px;
    height: 236px;
    margin: -118px 0 0 -98px;
    opacity: 0
}

.orbit.live .orb-card {
    opacity: 1
}

.orb-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 26px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.orb-back {
    transform: rotateY(180deg)
}

.orb-back,
.orb-face .ico {
    align-items: center;
    justify-content: center
}

.orb-face .ico {
    display: flex;
    height: 46px;
    width: 46px;
    border-radius: 99px;
    background: rgb(var(--brand));
    color: rgb(var(--onbrand))
}

.orb-face b {
    font: 800 1.25rem/1.15 Bricolage Grotesque Variable, system-ui
}

@media (max-width:640px) {
    .orb-card {
        width: 150px;
        height: 190px;
        margin: -95px 0 0 -75px
    }

    .orb-face {
        padding: 14px
    }

    .orb-face b {
        font-size: 1rem
    }
}

.tunnel {
    position: relative;
    height: 440vh
}

.tn-stick {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    perspective: 900px;
    perspective-origin: 50% 45%
}

.tn-scene {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d
}

.tn-ring {
    width: 92vw;
    height: 64vh;
    margin: -32vh 0 0 -46vw;
    border: 2px solid rgb(var(--ink)/.22);
    border-radius: 36px
}

.tn-frame,
.tn-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0
}

.tn-frame {
    width: min(440px, 84vw);
    margin: -150px 0 0 max(-220px, -42vw);
    will-change: transform, opacity
}

.tn-frame .num {
    font: 800 clamp(4rem, 10vw, 7.5rem)/.8 Bricolage Grotesque Variable, system-ui;
    color: rgb(var(--hot));
    letter-spacing: -.05em
}

.tn-frame .\!num {
    font: 800 clamp(4rem, 10vw, 7.5rem)/.8 Bricolage Grotesque Variable, system-ui !important;
    color: rgb(var(--hot)) !important;
    letter-spacing: -.05em !important
}

.tn-hud {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none
}

.tn-bar {
    width: min(320px, 70vw);
    height: 6px;
    border-radius: 9px;
    background: rgb(var(--ink)/.18);
    overflow: hidden
}

.tn-bar i {
    display: block;
    height: 100%;
    width: 100%;
    background: rgb(var(--hot));
    transform-origin: 0 50%;
    transform: scaleX(0)
}

.tn-head {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 96px;
    text-align: center;
    padding: 0 16px;
    pointer-events: none
}

@media (prefers-reduced-motion:reduce) {

    .tn-stick,
    .tunnel {
        height: auto
    }

    .tn-stick {
        position: static;
        perspective: none;
        padding: 20px 0
    }

    .tn-scene {
        position: static;
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
    }

    .tn-frame {
        position: static;
        margin: 0;
        width: auto;
        opacity: 1 !important;
        transform: none !important
    }

    .tn-head,
    .tn-hud,
    .tn-ring {
        display: none
    }
}

.typeline {
    font: 800 clamp(2.4rem, 8.4vw, 7.4rem)/1.04 Bricolage Grotesque Variable, system-ui;
    letter-spacing: -.04em;
    text-wrap: balance
}

.tl-frame {
    display: inline-block;
    vertical-align: middle;
    width: var(--w, 0);
    height: .86em;
    margin: 0 .04em;
    border-radius: .45em;
    overflow: hidden;
    background: rgb(var(--ink)/.1)
}

.tl-frame img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transform: translateY(var(--y, 0)) scale(var(--s, 1.5))
}

.tl-frame.open {
    margin: 0 .12em
}

.deck {
    position: relative;
    height: 420vh
}

.dk-stick {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden
}

.dk-scene {
    position: absolute;
    inset: 0;
    perspective: 1000px;
    perspective-origin: 50% 46%
}

.dk-grid {
    left: 50%;
    top: 54%;
    width: 0;
    height: 0
}

.dk-card,
.dk-grid {
    position: absolute;
    transform-style: preserve-3d
}

.dk-card {
    --dk: 3;
    left: calc(-98px*var(--dk));
    top: calc(-70px*var(--dk));
    width: calc(196px*var(--dk));
    height: calc(140px*var(--dk));
    will-change: transform, opacity
}

.dk-card>.orb-face {
    zoom: var(--dk);
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

@supports not (zoom:2) {
    .dk-card {
        --dk: 1
    }
}

.dk-card .orb-face {
    padding: 14px
}

.dk-card .orb-face .ico {
    height: 36px;
    width: 36px
}

.dk-card .orb-face b {
    font-size: 1.02rem
}

@media (max-width:560px) {
    .dk-card {
        left: calc(-56px*var(--dk));
        top: calc(-46px*var(--dk));
        width: calc(112px*var(--dk));
        height: calc(92px*var(--dk))
    }

    .dk-card .orb-face {
        padding: 8px
    }

    .dk-card .orb-face .ico {
        height: 26px;
        width: 26px
    }

    .dk-card .orb-face b {
        font-size: .72rem
    }

    .dk-card .orb-face p {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {

    .deck,
    .dk-stick {
        height: auto
    }

    .dk-stick {
        position: static;
        padding: 20px 0
    }

    .dk-scene {
        position: static;
        perspective: none
    }

    .dk-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 14px;
        height: auto
    }

    .dk-card,
    .dk-grid {
        position: static;
        width: auto;
        transform: none !important
    }

    .dk-card {
        height: 140px;
        opacity: 1 !important
    }

    .tn-hud {
        display: none
    }

    .tn-head {
        position: static;
        margin-bottom: 16px
    }
}

.fx-safe [data-reveal],
.fx-safe [data-type] .tc {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important
}

.fx-safe [data-type] .tframe {
    width: 1.5em !important;
    margin: 0 .18em !important
}

.fx-safe .bar-grow,
.fx-safe .tframe svg {
    transform: none !important
}

.fx-safe .orb-card {
    opacity: 1 !important
}

@media (prefers-reduced-motion:reduce) {
    .js [data-reveal]:not(.in) {
        opacity: 1;
        clip-path: none;
        transform: none
    }

    .js [data-type]:not(.in) .tc {
        transform: none
    }

    .tframe {
        width: 1.5em;
        margin: 0 .18em
    }

    .js [data-bars]:not(.in) .bar-grow,
    .tframe svg {
        transform: none
    }

    .orb-card {
        opacity: 1
    }

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

    .printer[data-state=printing] .paper {
        animation: none;
        transform: none
    }
}

.media-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

[data-theme-set] .tick {
    opacity: 0;
    transition: opacity .15s
}

[data-theme-set][aria-pressed=true] .tick {
    opacity: 1
}

.p-brand {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.hero-media {
    z-index: -2;
    overflow: hidden;
    background: #111111
}

.hero-media,
.hm-still {
    position: absolute;
    inset: 0
}

.hm-still {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease
}

.hm-still.is-on {
    opacity: 1
}

.foot-photo {
    z-index: -2;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.foot-photo,
.foot-scrim {
    position: absolute;
    inset: 0
}

.foot-scrim {
    z-index: -1;
    background: rgba(6, 14, 9, .5)
}

.foot-code {
    color: #fff;
    text-decoration: none;
    font-family: JetBrains Mono, ui-monospace, monospace;
    font-weight: 700;
    letter-spacing: -.03em
}

.foot-cta {
    background: #fff;
    color: #0e1a12;
    padding: 14px 26px;
    font-size: 16px
}

.foot-cta:hover {
    background: hsla(0, 0%, 100%, .88)
}

.foot-card {
    border-radius: 36px;
    background: rgba(14, 20, 16, .32);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    border-color: hsla(0, 0%, 100%, .14);
    box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .16), 0 40px 90px -40px rgba(0, 0, 0, .7)
}

.foot-h {
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff
}

.foot-links {
    display: grid;
    gap: 12px;
    font-size: 15px
}

.site-foot {
    --foot-ink: hsla(0, 0%, 100%, .76)
}

.foot-links a {
    color: var(--foot-ink);
    transition: color .2s
}

.foot-links a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .18em
}

.foot-bar {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid hsla(0, 0%, 100%, .14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: hsla(0, 0%, 100%, .68)
}

.foot-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: hsla(0, 0%, 100%, .8);
    transition: background-color .2s, color .2s
}

@media (max-width:479px) {
    .foot-bar :has(>.foot-lang) {
        flex-wrap: nowrap;
        gap: 4px
    }

    .foot-lang {
        gap: 5px;
        padding: 6px 8px;
        font-size: 13px
    }

    .foot-lang :is(img, svg) {
        width: 16px;
        height: 16px
    }
}

.foot-lang .flag {
    width: 18px;
    height: 18px
}

.foot-lang:hover {
    color: #fff
}

.foot-lang[aria-pressed=true] {
    background: hsla(0, 0%, 100%, .15);
    color: #fff;
    box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .22)
}

.mosaic {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
    grid-auto-flow: dense
}

.mosaic-item {
    overflow: hidden;
    border-radius: 28px;
    margin: 0
}

.mosaic-item.tall {
    grid-row: span 2
}

.mosaic-item.wide {
    grid-column: span 2
}

@media (min-width:768px) {
    .mosaic {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 230px
    }
}

@media (prefers-reduced-motion:reduce) {
    .hm-still {
        transition: none
    }
}

.glass,
.glass-strong {
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 hsla(0, 0%, 100%, .06)
}

.glass-strong {
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .16), hsla(0, 0%, 100%, 0) 44%)
}

.brand-word {
    color: var(--logo-ring)
}

.p-body {
    background: repeating-linear-gradient(90deg, hsla(0, 0%, 100%, .06) 0 1px, rgba(0, 0, 0, .03) 1px 2px), linear-gradient(180deg, var(--pc1) 0, var(--pc2) 16%, var(--pc3) 54%, var(--pc4) 100%);
    box-shadow: inset 0 2px 0 hsla(0, 0%, 100%, .85), inset 0 -4px 8px rgba(0, 0, 0, .2), inset 3px 0 6px hsla(0, 0%, 100%, .28), inset -3px 0 6px rgba(0, 0, 0, .12), 0 3px 0 var(--pc-edge), 0 26px 46px -16px rgba(0, 0, 0, .42), 0 8px 14px rgba(0, 0, 0, .12)
}

.p-brand {
    text-shadow: none
}

.p-lcd {
    color: var(--lcd);
    text-shadow: none
}

.printer[data-state=printing] .p-led {
    background: var(--led);
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4)
}

.p-keys i {
    background: radial-gradient(circle at 35% 28%, var(--pc1), var(--pc3) 52%, var(--pc4))
}

.p-foot {
    background: linear-gradient(180deg, var(--pc4), var(--pc-edge))
}

.paper {
    color: #141414;
    font-family: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    line-height: 1.6;
    padding: 22px 22px 24px;
    --logo-ring: var(--rc);
    --logo-drop: var(--rc);
    --logo-arc: var(--rc-arc)
}

.paper,
.paper:after {
    background: #fff
}

.rc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.rc-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 800 22px/1 Bricolage Grotesque Variable, system-ui, sans-serif;
    letter-spacing: -.02em
}

.rc-brand svg {
    width: 30px;
    height: 30px;
    flex: none
}

.rc-kind {
    text-align: right;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #1f1f1f
}

.rc-amount {
    margin-top: 16px;
    font: 800 34px/1 Bricolage Grotesque Variable, system-ui, sans-serif;
    letter-spacing: -.035em;
    color: #111
}

.rc-sub {
    margin-top: 7px;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6d6d6d
}

.paper hr {
    border: 0;
    border-top: 1px dashed #c4c4bc;
    margin: 14px 0
}

.paper .row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px
}

.paper .\!row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important
}

.paper .row>span:first-child {
    color: #737373
}

.paper .\!row>span:first-child {
    color: #737373 !important
}

.paper .row>span:last-child {
    text-align: right;
    color: #141414;
    font-weight: 600
}

.paper .\!row>span:last-child {
    text-align: right !important;
    color: #141414 !important;
    font-weight: 600 !important
}

.paper .tot {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 800
}

.paper .tot>span:first-child {
    color: #141414
}

.rc-stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 5px 13px 5px 10px;
    border: 1.6px solid var(--rc);
    border-radius: 999px;
    color: var(--rc);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    transform: rotate(-3.5deg)
}

.rc-stamp .icon {
    width: 13px;
    height: 13px
}

.rc-bars {
    margin-top: 16px
}

.rc-bars .c128 {
    display: block;
    width: 100%;
    height: 56px;
    fill: currentColor
}

.rc-art {
    width: 58%;
    margin: 16px auto 0;
    color: var(--bc)
}

.rc-art .bc-art {
    display: block;
    width: 100%;
    height: auto
}

.rc-foot {
    margin-top: 8px;
    text-align: center;
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6d6d6d
}

.hm-liquid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none
}

.hm-liquid.is-on {
    opacity: 1
}

.hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(var(--tint)/.3) 0, rgb(var(--tint)/.08) 30%, rgb(var(--tint)/.6) 100%), linear-gradient(90deg, rgb(var(--tint)/.42) 0, rgb(var(--tint)/0) 64%)
}

@media (max-width:639px) {
    .hero-body {
        padding-top: 14.5rem !important
    }
}

.gt-section {
    position: relative;
    height: 260vh;
    margin-top: 7rem
}

.gt-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: grid;
    place-items: center
}

.gt {
    inset: 0;
    perspective: 900px;
    perspective-origin: 50% 50%
}

.gt,
.gt-world {
    position: absolute
}

.gt-world {
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d
}

.gt-tile {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    backface-visibility: hidden;
    will-change: transform, opacity;
    font: 700 clamp(14px, 1.5vw, 22px)/1 JetBrains Mono, ui-monospace, monospace;
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .4)
}

.gt-tile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.gt-a {
    background: var(--gt-a)
}

.gt-a,
.gt-b {
    color: var(--gt-ink)
}

.gt-b {
    background: var(--gt-b)
}

.gt-c {
    background: var(--gt-c);
    color: var(--gt-ink)
}

.gt-copy {
    position: relative;
    z-index: 2;
    max-width: 44rem;
    margin: 0 1rem;
    padding: clamp(24px, 4vw, 44px);
    text-align: center;
    pointer-events: none
}

.gt-fallback {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px
}

.gt-fallback img {
    width: 100%;
    aspect-ratio: 4/3;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 18px
}

.gt-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%
}

.phone-field {
    position: relative
}

.phone-row {
    display: flex;
    gap: 8px;
    align-items: stretch
}

.phone-row .field {
    flex: 1;
    min-width: 0
}

.cc-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 12px;
    border-radius: 16px;
    border: 1px solid var(--glass-line);
    background: rgb(var(--ink)/.05);
    color: rgb(var(--ink));
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    cursor: pointer
}

.cc-btn:hover {
    background: rgb(var(--ink)/.09)
}

.cc-btn img {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    -o-object-fit: cover;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08)
}

.cc-btn .icon {
    width: 14px;
    height: 14px;
    opacity: .7
}

.phone-field.is-email .cc-btn {
    display: none
}

.cc-panel {
    position: absolute;
    z-index: 45;
    left: 0;
    right: 0;
    margin-top: 6px;
    padding: 8px;
    border-radius: 18px;
    border: 1px solid var(--glass-line);
    background-color: var(--menu-bg);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.cc-panel ul {
    max-height: 260px;
    overflow: auto;
    margin: 6px 0 0;
    padding: 0;
    list-style: none
}

.cc-panel [data-r] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 12px;
    text-align: left;
    color: rgb(var(--ink))
}

.cc-panel [data-r]:focus-visible,
.cc-panel [data-r]:hover,
.cc-panel [data-r][aria-selected=true] {
    background: rgb(var(--ink)/.08);
    outline: none
}

.cc-panel [data-r] img {
    width: 22px;
    height: 16px;
    flex: none;
    border-radius: 3px;
    -o-object-fit: cover;
    object-fit: cover
}

.cc-panel [data-r] b {
    margin-left: auto;
    font-weight: 600;
    color: rgb(var(--mute));
    font-variant-numeric: tabular-nums
}

@media (max-width:639px) {
    .gt-fallback {
        grid-template-columns: repeat(2, 1fr)
    }
}

.gt-section.is-static {
    height: auto
}

.gt-section.is-static .gt-sticky {
    position: relative;
    height: auto;
    padding: 40px 0
}

.gt-section.is-static .gt {
    display: none
}

.gt-section.is-static .gt-fallback {
    display: grid
}

.pd-row {
    display: flex;
    justify-content: center;
    gap: 1.8em;
    padding: .5em 0;
    font-size: clamp(8.5px, .9vw, 12.5px)
}

.pd {
    flex: none
}

.pd-row.is-swipe {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    margin-inline: -1rem;
    padding: .5em 1rem 1.2em
}

.pd-row.is-swipe .pd {
    scroll-snap-align: center
}

@media (max-width:1023px) {
    .pd-row {
        font-size: 11px
    }
}

.pd {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1em;
    cursor: pointer;
    outline-offset: 6px;
    -webkit-tap-highlight-color: transparent
}

.pd figcaption {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.3
}

.pd figcaption b {
    display: block;
    font-weight: 700
}

.pd figcaption span {
    font-size: .9em;
    color: rgb(var(--mute))
}

.pd.is-paused .pd-rig {
    filter: saturate(.6) brightness(.92)
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.glass,
.glass-strong {
    background-color: var(--glass);
    background-image: none;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: inset 0 1px 1px var(--rim-hi)
}

.glass-strong {
    background-color: var(--glass-strong)
}

.glass-strong:before,
.glass:before {
    background: linear-gradient(180deg, var(--rim-hi) 0, var(--rim-lo) 16%, transparent 40%, transparent 70%, var(--rim-lo) 100%)
}

.media-dark {
    --glass: rgb(var(--tint)/.34);
    --glass-strong: rgb(var(--tint)/.5);
    --glass-line: hsla(0, 0%, 100%, .16);
    --rim-hi: hsla(0, 0%, 100%, .2);
    --rim-lo: hsla(0, 0%, 100%, .06);
    --brand: 255 255 255;
    --onbrand: 14 26 20
}

[data-theme=maitso] .media-dark {
    --brand: 47 210 122;
    --onbrand: 3 40 20
}

[data-theme=mena] .media-dark {
    --brand: 255 110 98;
    --onbrand: 70 6 3
}

.btn-hot,
.btn-primary {
    background: rgb(var(--fill));
    color: rgb(var(--onfill));
    border: 1px solid var(--fill-line);
    box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .45)
}

.btn-hot:hover,
.btn-primary:hover {
    filter: none;
    background: rgb(var(--fill)/.9)
}

[data-theme=fotsy] .btn-hot:hover,
[data-theme=fotsy] .btn-primary:hover {
    background: #2b2b2b
}

.btn-ghost {
    color: rgb(var(--ink));
    border: 1px solid var(--glass-line)
}

.bottomnav a[aria-current=page],
.side a[aria-current=page],
input:checked+.pick,
input:checked+.slot {
    background: rgb(var(--fill));
    color: rgb(var(--onfill));
    border: 1px solid var(--fill-line);
    box-shadow: none
}

[data-theme=fotsy] .bottomnav a[aria-current=page],
[data-theme=fotsy] .side a[aria-current=page],
[data-theme=fotsy] input:checked+.pick,
[data-theme=fotsy] input:checked+.slot {
    box-shadow: none
}

.tframe {
    background: rgb(var(--fill));
    color: rgb(var(--onfill));
    border: 1px solid var(--fill-line)
}

.tframe use {
    color: inherit
}

.lnk {
    color: rgb(var(--link));
    font-weight: 650;
    text-decoration: none;
    border-radius: .3em;
    transition: color .15s
}

.lnk:hover {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: .18em;
    box-shadow: none
}

.lnk:active {
    background: transparent;
    box-shadow: none
}

.lnk:focus-visible {
    outline: 2px solid rgb(var(--link));
    outline-offset: 3px
}

.nav-panel,
.sheet {
    --ink: var(--t-ink);
    --mute: var(--t-mute);
    --brand: var(--t-brand);
    color: rgb(var(--ink));
    background-color: var(--menu-bg) !important;
    border-color: var(--glass-line) !important
}

.nav-panel .ico {
    background: rgb(var(--brand)/.14);
    color: rgb(var(--brand))
}

[data-theme=maitso] .nav-panel .ico,
[data-theme=mena] .nav-panel .ico {
    background: hsla(0, 0%, 100%, .14);
    color: #fff
}

.logo-tile {
    display: inline-grid;
    place-items: center;
    flex: none;
    border-radius: 28%;
    background: var(--tile);
    border: 1px solid var(--tile-line);
    box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .5), 0 6px 16px -8px rgba(0, 0, 0, .45);
    --logo-ring: var(--tile-ring);
    --logo-drop: var(--tile-drop);
    --logo-arc: var(--tile-arc)
}

.logo-tile svg {
    width: 74%;
    height: 74%
}

.brand-word,
.hero-card {
    color: rgb(var(--ink))
}

.hero-card {
    --ink: var(--t-ink);
    --mute: var(--t-mute);
    background: var(--menu-bg);
    border: 1px solid var(--glass-line)
}

[data-theme=fotsy] .hero-card {
    --brand: 17 17 17;
    --ok: 0 118 54;
    --glass: hsla(0, 0%, 7%, .05);
    --glass-strong: hsla(0, 0%, 7%, .09);
    --glass-line: hsla(0, 0%, 7%, .14)
}

[data-theme=maitso] .hero-card {
    background: rgba(0, 90, 43, .62)
}

[data-theme=mena] .hero-card {
    background: rgba(150, 24, 16, .62)
}

.hero-card .chip-ok {
    background: rgb(var(--ok)/.16);
    color: rgb(var(--ok))
}

@media (max-width:639px) {
    .hero-body {
        padding-top: 9rem !important
    }
}

.hv-in {
    gap: 8px;
    padding: 18px;
    max-width: 100%
}

.hv-in .icon {
    width: 34px;
    height: 34px
}

.hv-in b {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.15;
    text-wrap: balance
}

.hv-in span {
    font-size: .8rem;
    padding: 5px 12px;
    white-space: nowrap
}

.p-body {
    background: var(--pb);
    border: 1px solid var(--pb-line);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    backdrop-filter: blur(26px) saturate(1.5);
    box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, .7), inset 0 -10px 24px -14px rgba(0, 0, 0, .25), 0 30px 60px -28px rgba(0, 0, 0, .45)
}

.p-body:before {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .55), hsla(0, 0%, 100%, 0))
}

.p-keys i {
    background: radial-gradient(circle at 35% 28%, hsla(0, 0%, 100%, .95), hsla(0, 0%, 100%, .35) 60%, rgba(0, 0, 0, .08));
    border: 1px solid var(--pb-line)
}

.p-foot {
    background: var(--pc-edge);
    opacity: .55
}

.p-brand {
    color: var(--pc-ink)
}

.rc-stamp {
    background: var(--stamp);
    border-color: var(--stamp);
    color: #fff
}

.rc-art {
    padding: 10px;
    border-radius: 14px;
    background: var(--bc-panel)
}

.foot-top {
    display: grid;
    justify-items: center;
    gap: 0
}

.follow {
    display: flex;
    align-items: center;
    gap: 6px;
    width: min(420px, 100%);
    padding: 5px 5px 5px 20px;
    border-radius: 999px;
    background: hsla(0, 0%, 100%, .1);
    border: 1px solid hsla(0, 0%, 100%, .22);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.follow input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-size: 15px
}

.follow input::-moz-placeholder {
    color: hsla(0, 0%, 100%, .72)
}

.follow input::placeholder {
    color: hsla(0, 0%, 100%, .72)
}

.follow button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    color: #0e1a14;
    cursor: pointer;
    flex: none
}

.follow:focus-within {
    border-color: #fff
}

.foot-cta {
    background: rgb(var(--fill));
    color: rgb(var(--onfill));
    border: 1px solid var(--fill-line)
}

.foot-cta:hover {
    background: rgb(var(--fill)/.88)
}

.foot-big {
    margin-top: 44px;
    font: 800 clamp(72px, 21vw, 290px)/.8 Bricolage Grotesque Variable, system-ui, sans-serif;
    letter-spacing: -.05em;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: linear-gradient(100deg, var(--big) 0, var(--big) 38%, var(--big2) 50%, var(--big) 62%, var(--big) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: bigflow 7s ease-in-out infinite
}

@keyframes bigflow {

    0%,
    to {
        background-position: 100% 0
    }

    50% {
        background-position: 0 0
    }
}

.foot-bar {
    justify-content: space-between
}

.os-wall {
    background: #0b1a12 url(/static/media/hero/hero-base-port.webp) 50%/cover
}

.os-wall i {
    display: none
}

.os-wall:after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .42))
}

.os-lock {
    background: #0b1a12 url(/static/media/hero/hero-base-port.webp) 50%/cover
}

.os-lock:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .5))
}

.os-lock {
    isolation: isolate
}

.os-lock .hint {
    bottom: 34px
}

html[data-theme="saina"] .os-lock .hint,
html[data-theme="fotsy"] .os-lock .hint {
    color: #fff
}

.os.locked .dock,
.os.locked .home-bar,
.os.locked .os-home {
    opacity: 0;
    visibility: hidden
}

.dock,
.os-home {
    transition: opacity .35s ease .12s, visibility .35s
}

[data-theme=fotsy] .dev-max .wb-mark,
[data-theme=fotsy] .dev-nova .wb-mark {
    color: rgba(0, 0, 0, .28)
}

.cans {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 14px
}

.can {
    position: relative;
    width: 58px;
    aspect-ratio: 176/247;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: transparent;
    transition: transform .2s
}

.can:hover {
    transform: translateY(-3px)
}

.can img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none
}

.can .ce {
    filter: none;
    opacity: 1;
  }

.can .cf {
    filter: saturate(.88) brightness(.91) contrast(1.08);
    opacity: .9;
    -webkit-mask: url(/static/img/objects/jerrycan-water-interior.svg) center/contain no-repeat;
    mask: url(/static/img/objects/jerrycan-water-interior.svg) center/contain no-repeat;
  }

.can .cf,
.can .cw {
    clip-path: inset(calc(92% - var(--f, 0)*72%) 0 0 0);
    transition: clip-path 1s cubic-bezier(.2, .9, .2, 1);
  }

.can .cw {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(36, 43, 25, .16) 6%, rgba(255, 255, 255, .025) 27%, transparent 42%, rgba(255, 255, 255, .045) 68%, rgba(29, 40, 23, .13) 95%), linear-gradient(180deg, transparent 8%, rgba(43, 52, 30, .025) 60%, rgba(37, 48, 27, .07));
    -webkit-mask: url(/static/img/objects/jerrycan-water-interior.svg) center/contain no-repeat;
    mask: url(/static/img/objects/jerrycan-water-interior.svg) center/contain no-repeat;
    clip-path: inset(calc(92% - var(--f, 0)*72%) 0 0 0);
    transition: clip-path 1s cubic-bezier(.2, .9, .2, 1);
  }

.can .cl {
    position: absolute;
    left: 22%;
    right: 21%;
    height: 2px;
    bottom: calc(8% + var(--f, 0)*72%);
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48) 19%, rgba(43, 52, 33, .56) 49%, rgba(255, 255, 255, .54) 81%, transparent);
    box-shadow: 0 1px 1px rgba(49, 56, 37, .22);
    opacity: clamp(0, calc(var(--f, 0)*4), 1);
    transition: bottom 1s cubic-bezier(.2, .9, .2, 1), opacity .6s;
    animation: slosh 2.6s ease-in-out infinite;
  }

@keyframes slosh {
    50% {
        transform: translateY(-1.5px) rotate(-1.2deg)
    }
}

.can:focus-visible {
    outline: 2px solid rgb(var(--active, var(--hot)));
    outline-offset: 4px;
    border-radius: 10px
}

.need {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgb(var(--ink)/.14);
    background: rgb(var(--ink)/.04);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600
}

.need input {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: rgb(var(--brand))
}

.need:has(input:checked) {
    border-color: rgb(var(--brand));
    background: rgb(var(--brand)/.12)
}

select.field option {
    background: #fff;
    color: #0e1a14
}

@media (max-width:1023px) {
    .bottomnav {
        align-items: center
    }

    .bottomnav a,
    .bottomnav summary {
        flex: 1;
        min-width: 0
    }

    .bottomnav summary {
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer
    }

    .bottomnav summary::-webkit-details-marker {
        display: none
    }

    .more {
        position: static;
        flex: 1;
        display: flex
    }

    .more[open] summary {
        background: rgb(var(--ink)/.12)
    }

    .more-sheet {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 84px;
        z-index: 61;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 10px;
        border-radius: 28px;
        max-height: 70vh;
        overflow: auto
    }

    .more-sheet a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 18px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        color: rgb(var(--ink))
    }

    .more-sheet a[aria-current=page] {
        background: rgb(var(--fill));
        color: rgb(var(--onfill))
    }

    .more:not([open]) .more-sheet {
        display: none
    }
}

@media (min-width:1024px) {
    .more {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {

    .can .cl,
    .foot-big {
        animation: none
    }
}

.sms-logo {
    width: 34px;
    height: 34px;
    border-radius: 30%
}

.banner .sms-logo {
    width: 30px;
    height: 30px
}

.sms-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 10px;
    border-bottom: 1px solid hsla(0, 0%, 50%, .2)
}

.sms-head b {
    display: block;
    font-weight: 700;
    line-height: 1.1
}

.sms-head small {
    display: block;
    font-size: 11px;
    opacity: .6
}

@media (max-width:1023px) {
    .more-sheet {
        --ink: var(--t-ink);
        --brand: var(--t-brand);
        background-color: var(--menu-bg) !important;
        box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55);
        background: var(--sheet-solid) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }

    .more-sheet a {
        flex-direction: row;
        justify-content: flex-start;
        font-size: 14px
    }
}

.pd-rig {
    position: relative;
    flex: none;
    width: calc(var(--w)*var(--s, .6));
    height: calc(var(--h)*var(--s, .6))
}

.pd-rig>.flipper {
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(var(--s, .6));
    transform-origin: 0 0;
    transition: none
}

.pd-rig * {
    pointer-events: none
}

.pd-row {
    align-items: flex-end;
    gap: clamp(12px, 2vw, 26px)
}

.os.in-app .dock,
.os.in-app .os-home {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s
}

.dial-row {
    position: relative;
    padding: 0 64px
}

.dial-row .dial-out {
    padding: 6px 0
}

.dial-del {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer
}

.pad button.hit,
.pad button:active {
    transform: scale(.92);
    background: hsla(0, 0%, 50%, .34)
}

.callbtn.hit,
.compose button.hit,
.ussd-card button.hit {
    transform: scale(.9)
}

.k.hit {
    transform: translateY(2px)
}

.btn-ghost:hover {
    background: rgb(var(--ink)/.14);
    border-color: rgb(var(--ink)/.4);
}

.auth-side,
.foot-big {
    text-align: center
}

.auth-side {
    position: sticky;
    top: 96px;
    height: calc(100svh - 120px);
    min-height: 520px;
    border-radius: 32px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.auth-side .hero-media {
    z-index: -2
}

.auth-copy {
    position: relative;
    padding: 44px;
    max-width: 44rem
}

.auth-copy,
.auth-copy p {
    margin-inline: auto
}

.os-view input::-moz-placeholder,
.os-view textarea::-moz-placeholder,
.ussd-card input::-moz-placeholder {
    color: rgba(0, 0, 0, .45)
}

.os-view input::placeholder,
.os-view textarea::placeholder,
.ussd-card input::placeholder {
    color: rgba(0, 0, 0, .45)
}

.os-view.dark input::-moz-placeholder,
.os-view.dark textarea::-moz-placeholder {
    color: hsla(0, 0%, 100%, .5)
}

.os-view.dark input::placeholder,
.os-view.dark textarea::placeholder {
    color: hsla(0, 0%, 100%, .5)
}

.rc-art .bc-art.bc-bw {
    display: none
}

[data-theme=fotsy] .rc-art .bc-art.bc-bw {
    display: block
}

[data-theme=fotsy] .rc-art .bc-art:not(.bc-bw) {
    display: none
}


.other-src {
    display: none
}

form:has(select[name=home_source] option[value=other]:checked) .other-src {
    display: block
}

.cw-ico {
    background: var(--tile) !important;
    border: 1px solid var(--tile-line);
    --logo-ring: var(--tile-ring);
    --logo-drop: var(--tile-drop);
    --logo-arc: var(--tile-arc)
}

.os.in-app .os-status {
    color: #111
}

.dial-row {
    padding: 0 46px
}

.dial-row .dial-out {
    white-space: nowrap;
    overflow: hidden;
    font-size: 26px
}

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

.paper,
.paper:after {
    background: var(--paper)
}

.paper hr {
    border-top-color: var(--paper-rule)
}

.paper .row>span:last-child,
.paper .tot>span:first-child,
.rc-amount,
.rc-kind {
    color: var(--paper-ink)
}

.paper .\!row>span:last-child {
    color: var(--paper-ink) !important
}

.paper .row>span:first-child,
.rc-foot,
.rc-sub {
    color: var(--paper-mute)
}

.paper .\!row>span:first-child {
    color: var(--paper-mute) !important
}

.rc-brand {
    color: var(--rc)
}

.rc-stamp {
    color: var(--stamp-ink)
}

.rc-bars {
    background: #fff;
    color: #111;
    padding: 8px 10px;
    border-radius: 8px
}

@media print {
    .paper {
        --paper: #fff;
        --paper-ink: #141414;
        --paper-mute: #737373;
        --paper-rule: #c4c4bc;
        --rc: #111;
        --rc-arc: #111;
        --stamp: #111;
        --stamp-ink: #fff;
        --bc: #111
    }
}

.bigcan {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 14px;
    padding: 18px 18px 14px;
    border-radius: 24px;
    background: rgb(var(--ink)/.05);
    border: 1px solid var(--glass-line)
}

.can.can-lg {
    width: clamp(150px, 18vw, 210px);
    cursor: default
}

.can.can-lg:hover {
    transform: none
}

.can.can-lg .cl {
    height: 4px
}

.bigcan-scale {
    position: absolute;
    left: 18px;
    bottom: 14px;
    width: clamp(150px, 18vw, 210px);
    aspect-ratio: 176/247;
    pointer-events: none
}

.bigcan-scale span {
    position: absolute;
    right: calc(100% + 8px);
    transform: translateY(50%);
    font: 600 11px/1 JetBrains Mono, ui-monospace, monospace;
    color: rgb(var(--mute));
    white-space: nowrap
}

.bigcan-scale span:after {
    content: "";
    position: absolute;
    left: calc(100% + 3px);
    top: 50%;
    width: 6px;
    height: 1.5px;
    background: currentColor;
    opacity: .6
}

.bigcan-val {
    align-self: center;
    display: grid;
    gap: 4px
}

.bigcan-val b {
    font: 800 clamp(2.4rem, 5vw, 3.6rem)/1 Bricolage Grotesque Variable, system-ui;
    letter-spacing: -.03em
}

.bigcan-val span {
    font-weight: 650
}

.bigcan-val small {
    color: rgb(var(--mute));
    font-size: .85rem
}

.bigcan {
    padding-left: 58px
}

.bigcan-scale {
    left: 58px
}

[data-theme=saina] body:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    background: linear-gradient(90deg, var(--f1) 0 34%, transparent 34%), linear-gradient(180deg, var(--f2) 0 50%, var(--f3) 50% 100%)
}

@media (max-width:767px) {
    [data-theme=saina] body:before {
        background: linear-gradient(90deg, var(--f1) 0 22%, transparent 22%), linear-gradient(180deg, var(--f2) 0 50%, var(--f3) 50% 100%)
    }
}

[data-theme=saina] .btn-hot {
    background: rgb(var(--cta));
    color: rgb(var(--oncta))
}

[data-theme=saina] .btn-hot:hover {
    background: rgb(var(--cta)/.9)
}

[data-theme=saina] .hero-card {
    --brand: 0 132 63;
    --ok: 0 118 54;
    --glass: rgba(21, 41, 28, .05);
    --glass-strong: rgba(21, 41, 28, .09);
    --glass-line: rgba(21, 41, 28, .14)
}

[data-theme=saina] .bottomnav a[aria-current=page],
[data-theme=saina] .side a[aria-current=page],
[data-theme=saina] input:checked+.pick,
[data-theme=saina] input:checked+.slot {
    box-shadow: none
}

[data-theme=saina] .dev-max .wb-mark,
[data-theme=saina] .dev-nova .wb-mark {
    color: rgba(255, 255, 255, .72)
}

.ltw {
    white-space: nowrap
}

.rc-compact .printer {
    width: min(330px, 86vw)
}

.rc-compact .paper {
    padding: 16px 18px 18px;
    line-height: 1.45
}

.rc-compact .rc-brand {
    font-size: 19px
}

.rc-compact .rc-brand svg {
    width: 26px;
    height: 26px
}

.rc-compact .rc-amount {
    margin-top: 10px;
    font-size: 28px
}

.rc-compact .paper hr {
    margin: 9px 0
}

.rc-compact .rc-stamp {
    margin-top: 10px
}

.rc-compact .rc-art {
    width: 40%;
    margin-top: 10px;
    padding: 6px
}

.rc-compact .rc-foot {
    margin-top: 6px
}

@media (max-width:359px) {
    .bigmenu {
        font-size: 2rem
    }
}

.auth-side .hero-scrim {
    background: radial-gradient(120% 90% at 50% 50%, rgba(4, 18, 10, .52), rgba(4, 18, 10, .26))
}

.seal {
    display: block;
    height: auto;
    color: var(--seal)
}

.seal .acc {
    color: var(--seal-2)
}

.seal circle {
    fill: none;
    stroke: currentColor
}

.seal text {
    fill: currentColor
}

.seal-big {
    font: 800 20px/1 Bricolage Grotesque Variable, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.01em
}

.seal-sm {
    font: 700 7.6px/1 Figtree Variable, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .14em
}

.seal-arc {
    font: 700 7.2px/1 Figtree Variable, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .1em
}

.lite-title {
    margin: -8px -8px 8px;
    padding: 3px 8px;
    background: hsla(0, 0%, 100%, .94);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
    font: 700 11.5px/1.3 system-ui, sans-serif
}

.lite-apps {
    grid-template-columns: 1fr 1fr;
    gap: 8px 6px
}

.lite-app,
.lite-apps {
    display: grid;
    justify-items: center
}

.lite-app {
    gap: 3px;
    width: 100%;
    padding: 4px 2px;
    border-radius: 12px;
    white-space: normal
}

.lite-app.on {
    background: hsla(0, 0%, 100%, .92);
    box-shadow: 0 0 0 2px #111
}

.lite-app.\!on {
    background: hsla(0, 0%, 100%, .92) !important;
    box-shadow: 0 0 0 2px #111 !important
}

.lite-app .app-ico {
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3), inset 0 1px 0 hsla(0, 0%, 100%, .3)
}

.lite-app .app-ico svg {
    width: 19px;
    height: 19px
}

.lite-app small {
    font: 600 9px/1.2 system-ui, sans-serif;
    padding: 1px 5px;
    border-radius: 6px;
    background: hsla(0, 0%, 100%, .88)
}

.auth-side {
    height: calc(100svh - 160px)
}

.role-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgb(var(--ink)/.16);
    background: rgb(var(--ink)/.05)
}

.role-tabs label {
    position: relative;
    display: flex;
    min-width: 0;
    cursor: pointer
}

.role-tabs input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer
}

.role-tabs span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 999px;
    text-align: center;
    font-size: .85rem;
    font-weight: 650;
    line-height: 1.2;
    color: rgb(var(--mute));
    transition: background-color .2s ease, color .2s ease
}

.role-tabs input:checked+span {
    background: rgb(var(--fill));
    color: rgb(var(--onfill))
}

.role-tabs input:focus-visible+span {
    outline: 2px solid rgb(var(--active, var(--hot)));
    outline-offset: 2px
}

@media (hover:hover) and (pointer:fine) {
    .role-tabs label:hover input:not(:checked)+span {
        color: rgb(var(--ink))
    }
}

@supports selector(:has(*)) {
    .coord-only {
        display: none
    }

    form:has(input[name=role][value=coordinator]:checked) .coord-only {
        display: block
    }

    form:has(input[name=role][value=coordinator]:checked) .hh-only {
        display: none
    }
}

.foot-seals {
    --seal: hsla(0, 0%, 100%, .9);
    --seal-2: var(--seal-foot);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 3vw, 32px);
    margin: 48px 0 0;
    padding: 0;
    list-style: none
}

.foot-seals .seal {
    width: clamp(58px, 6vw, 72px)
}

.foot-seals+.foot-big {
    margin-top: 24px
}

[data-device][aria-pressed=true] {
    outline: 2px solid rgb(var(--active, var(--hot)));
    outline-offset: 0
}

[data-theme=saina] [data-device][aria-pressed=true] {
    outline-color: #111
}

.os-widget {
    grid-column: 1/-1;
    margin-bottom: 6px;
    padding: 14px 16px;
    border-radius: 22px;
    color: #111;
    background: hsla(0, 0%, 100%, .74);
    border: 1px solid hsla(0, 0%, 100%, .6);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4)
}

.os-widget b {
    display: block;
    font: 700 34px/1 Bricolage Grotesque Variable, system-ui, sans-serif
}

.os-widget span {
    display: block;
    margin-top: 4px;
    font-weight: 600
}

.lite-os[data-state=menu]:before {
    background: hsla(0, 0%, 100%, .72)
}

.lite-app small {
    background: none;
    padding: 0;
    font-weight: 700;
    color: #111
}

.lite-app .app-ico,
.lite-app.on {
    box-shadow: none
}

.lite-app.on {
    background: hsla(0, 0%, 7%, .06);
    outline: 1px solid hsla(0, 0%, 7%, .28);
    outline-offset: -1px
}

.lite-app.\!on {
    background: hsla(0, 0%, 7%, .06) !important;
    box-shadow: none !important;
    outline: 1px solid hsla(0, 0%, 7%, .28) !important;
    outline-offset: -1px !important
}

.rg.is-live {
    height: 250vh
}

.rg.is-live .rg-stick {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding: clamp(84px, 12vh, 104px) 0 clamp(16px, 3vh, 32px)
}

.rg.is-live .rg-field {
    height: 100%;
    display: flex;
    flex-direction: column
}

.rg.is-live .mosaic {
    flex: 1;
    min-height: 0;
    margin-top: clamp(12px, 2.4vh, 28px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    grid-auto-rows: auto;
    perspective: 1400px;
    perspective-origin: 50% 30%
}

.rg.is-live .rg-item {
    will-change: transform, opacity
}

.rg.is-live .rg-item img {
    will-change: transform
}

.rg.is-live .rg-item:first-child {
    grid-column: 1/5;
    grid-row: 1/4
}

.rg.is-live .rg-item:nth-child(2) {
    grid-column: 5/8;
    grid-row: 1/7
}

.rg.is-live .rg-item:nth-child(3) {
    grid-column: 8/10;
    grid-row: 2/6
}

.rg.is-live .rg-item:nth-child(4) {
    grid-column: 10/13;
    grid-row: 1/3
}

.rg.is-live .rg-item:nth-child(5) {
    grid-column: 1/5;
    grid-row: 4/7
}

.rg.is-live .rg-item:nth-child(6) {
    grid-column: 10/13;
    grid-row: 3/7
}

@media (max-width:767px) {
    .rg.is-live {
        height: 210vh
    }

    .rg.is-live .mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(7, minmax(0, 1fr));
        gap: 8px
    }

    .rg.is-live .rg-item {
        border-radius: 18px
    }

    .rg.is-live .rg-item:first-child {
        grid-column: 1/2;
        grid-row: 1/3
    }

    .rg.is-live .rg-item:nth-child(2) {
        grid-column: 2/3;
        grid-row: 1/4
    }

    .rg.is-live .rg-item:nth-child(3) {
        grid-column: 1/2;
        grid-row: 3/6
    }

    .rg.is-live .rg-item:nth-child(4) {
        grid-column: 2/3;
        grid-row: 4/6
    }

    .rg.is-live .rg-item:nth-child(5) {
        grid-column: 2/3;
        grid-row: 6/8
    }

    .rg.is-live .rg-item:nth-child(6) {
        grid-column: 1/2;
        grid-row: 6/8
    }
}

.foot-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--foot-ink)
}

.foot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px
}

.foot-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 11px;
    border-radius: 999px;
    border: 1px solid hsla(0, 0%, 100%, .2);
    background: hsla(0, 0%, 100%, .06);
    font-size: 15px;
    line-height: 1.3;
    color: var(--foot-ink);
    transition: color .2s, background-color .2s, border-color .2s
}

.foot-chip .icon {
    width: 16px;
    height: 16px;
    flex: none
}

.foot-chip:hover {
    color: #fff;
    border-color: hsla(0, 0%, 100%, .38);
    background: hsla(0, 0%, 100%, .1)
}

.foot-chip:focus-visible,
.foot-links a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px
}

.foot-bar .foot-copy {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--foot-ink)
}

.gd {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 40px);
    align-items: center
}

.gd-item {
    margin: 0;
    min-width: 0;
    perspective: 1600px
}

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

    .gd-desk {
        grid-column: 1/-1
    }

    .gd-phone {
        width: min(280px, 100%)
    }
}

@media (min-width:1100px) {
    .gd {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .gd-a {
        grid-column: 1/9
    }

    .gd-b {
        grid-column: 9/13
    }

    .gd-c {
        grid-column: 1/5;
        grid-row: 2
    }

    .gd-d {
        grid-column: 5/13;
        grid-row: 2
    }

    .gd-phone {
        width: min(300px, 100%)
    }
}

.gd-frame {
    overflow: hidden;
    background: rgb(var(--ink)/.05);
    border: 1px solid var(--glass-line)
}

.gd-screen {
    position: relative;
    overflow: hidden;
    background: rgb(var(--ink)/.06)
}

.gd-desk .gd-screen {
    aspect-ratio: 16/10
}

.gd-phone .gd-screen {
    aspect-ratio: 390/844;
    border-radius: 32px
}

.gd-screen picture {
    display: contents
}

.gd-screen img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center
}

.gd-desk .gd-frame {
    border-radius: 16px;
    box-shadow: none
}

.gd-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    background: rgb(var(--ink)/.07);
    border-bottom: 1px solid var(--glass-line)
}

.gd-bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(var(--ink)/.24)
}

.gd-phone .gd-frame {
    padding: 8px;
    border-radius: 40px;
    background: #0e1110;
    border-color: #0e1110;
    box-shadow: 0 40px 90px -48px rgba(0, 0, 0, .55)
}

.gd-item figcaption {
    margin-top: 14px;
    text-align: center;
    font-size: .92rem;
    font-weight: 650;
    color: rgb(var(--mute))
}

.gd.is-live .gd-move {
    transition: transform 1s cubic-bezier(.16, 1, .3, 1);
    transform-origin: 50% 80%
}

.gd.is-live .gd-item:not(.is-in) .gd-move {
    transform: translate3d(0, 48px, -420px) rotateX(10deg)
}

.sheet-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px
}

.sheet-caret {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s
}

.sheet a[aria-current=page],
.sheet-caret:hover {
    background: rgb(var(--ink)/.1)
}

.sheet-caret .icon {
    width: 22px;
    height: 22px;
    transition: transform .2s
}

.sheet-row.open .sheet-caret .icon {
    transform: rotate(180deg)
}

.sheet-sub {
    grid-column: 1/-1;
    display: none;
    gap: 2px;
    padding: 0 0 10px 12px
}

.sheet-row.open .sheet-sub {
    display: grid
}

.sheet-sub a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px
}

.sheet-sub a:hover {
    background: rgb(var(--ink)/.1)
}

.sheet-sub .ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgb(var(--brand)/.14);
    color: rgb(var(--brand))
}

[data-theme=maitso] .sheet-sub .ico,
[data-theme=mena] .sheet-sub .ico {
    background: hsla(0, 0%, 100%, .14);
    color: #fff
}

.sheet a:focus-visible,
.sheet-caret:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

.chip-link {
    transition: background-color .15s
}

.chip-link:hover {
    background: rgb(var(--ink)/.12)
}

.chip-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

.dialog[popover] {
    inset: 0;
    margin: auto;
    width: min(680px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 0;
    border: 1px solid var(--glass-line);
    border-radius: 28px;
    background-color: var(--menu-bg);
    color: rgb(var(--ink));
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .5)
}

.dialog[popover]::backdrop {
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

.user-form [data-village] {
    display: none
}

.user-form:has(select[name=role] option[value=member]:checked) [data-village] {
    display: block
}

@media (max-width:400px) {
    .hdr {
        padding: 0 8px
    }

    .hdr-bar {
        gap: 8px;
        padding: 6px 6px 6px 12px
    }

    .hdr-bar .btn-icon {
        width: 36px;
        height: 36px
    }
}

@media (max-width:639px) {
    .field {
        font-size: 16px
    }
}

html[data-theme=fotsy],
html[data-theme=saina] {
    --glass: hsla(0, 0%, 100%, .3);
    --glass-strong: hsla(0, 0%, 100%, .44)
}

html[data-theme=fotsy] :is(.glass, .glass-strong),
html[data-theme=saina] :is(.glass, .glass-strong) {
    -webkit-backdrop-filter: blur(34px) saturate(1.9);
    backdrop-filter: blur(34px) saturate(1.9);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .75)
}

html[data-theme=fotsy] .hero-card,
html[data-theme=saina] .hero-card {
    --ink: 255 255 255;
    --mute: 228 236 231;
    --brand: 255 255 255;
    --ok: 134 239 172;
    --glass: hsla(0, 0%, 100%, .12);
    --glass-strong: hsla(0, 0%, 100%, .2);
    --glass-line: hsla(0, 0%, 100%, .3);
    color: #fff;
    background: hsla(0, 0%, 100%, .1);
    border-color: hsla(0, 0%, 100%, .3)
}

.cc-flag {
    display: inline-block;
    flex: none;
    width: 22px;
    height: 16px;
    border-radius: 0;
    background-image: var(--flags);
    background-repeat: no-repeat;
    background-size: 352px 256px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08)
}

.hdr-bar .btn-icon:active,
.hdr-bar .btn-icon:focus-visible,
.hdr-bar .btn-icon:hover,
.hdr-bar .btn-icon[aria-expanded=true] {
    background: var(--glass);
    box-shadow: inset 0 1px 0 var(--rim-hi), 0 6px 16px -8px rgba(0, 0, 0, .45)
}

.hdr-bar .btn-icon:focus-visible {
    outline: 2px solid rgb(var(--ink)/.45);
    outline-offset: 2px;
    border-radius: 999px
}

.hdr-bar [data-tip]:after {
    color: rgb(var(--ink));
    background: transparent;
    border-color: var(--glass-line);
    box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .45)
}

.hdr-bar .menu>.nav-panel:has([data-theme-set]),
.hdr-bar .menu>form.nav-panel {
    --ink: inherit;
    --mute: inherit;
    --brand: inherit;
    color: rgb(var(--ink));
    background-color: transparent !important;
    border-color: var(--glass-line) !important
}

.hdr-bar .menu>.nav-panel:has([data-theme-set]) button:hover,
.hdr-bar .menu>form.nav-panel button:hover {
    background: transparent
}

html.no-install .install-card,
html:not(.js) .install-card {
    display: none
}

.install-card {
    width: min(400px, calc(100vw - 24px));
    grid-template-columns: 40px minmax(0, 1fr) auto 30px;
    grid-template-areas: "icon copy go x";
    -moz-column-gap: 10px;
    column-gap: 10px;
    row-gap: 0;
    padding: 10px 10px 10px 12px;
    border-radius: 22px;
    opacity: 1;
    transform: translate(-50%);
    transition: opacity .25s ease, transform .3s ease;
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6)
}

.install-card,
.install-card.is-in {
    animation: none
}

.install-card.is-out {
    opacity: 0;
    transform: translate(-50%, calc(100% + 24px));
    pointer-events: none
}

.install-card:before {
    background: linear-gradient(90deg, hsla(0, 0%, 100%, .8), #00843f 40%, hsla(0, 0%, 100%, .8) 70%, #00843f);
    background-size: 100% 100%;
    animation: none;
    opacity: .85
}

.install-card:after {
    display: none
}

.install-card .ic-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    animation: none
}

.install-card .ic-title {
    font-size: .95rem
}

.install-card .ic-text:not([hidden]) {
    font-size: .8rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.install-card .ic-go {
    grid-area: go;
    padding: 7px 14px;
    font-size: .85rem;
    white-space: nowrap
}

.install-card .ic-x {
    align-self: center;
    width: 30px;
    height: 30px
}



html.is-ios .install-card [data-install-ios] {
    display: -webkit-box;
    font-size: .8rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

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

.collapse {
    visibility: collapse
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.inset-x-0 {
    left: 0;
    right: 0
}

.-right-0\.5 {
    right: -.125rem
}

.-top-0\.5 {
    top: -.125rem
}

.right-4 {
    right: 1rem
}

.right-5 {
    right: 1.25rem
}

.top-4 {
    top: 1rem
}

.top-5 {
    top: 1.25rem
}

.top-\[84px\] {
    top: 84px
}

.isolate {
    isolation: isolate
}

.z-\[90\] {
    z-index: 90
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.col-span-full {
    grid-column: 1/-1
}

.-mx-2 {
    margin-left: -.5rem;
    margin-right: -.5rem
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-2 {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.\!mt-0 {
    margin-top: 0 !important
}

.-mt-11 {
    margin-top: -2.75rem
}

.mb-0\.5 {
    margin-bottom: .125rem
}

.mb-1 {
    margin-bottom: .25rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.ml-2 {
    margin-left: .5rem
}

.ml-3 {
    margin-left: .75rem
}

.ml-auto {
    margin-left: auto
}

.mt-0\.5 {
    margin-top: .125rem
}

.mt-1 {
    margin-top: .25rem
}

.mt-1\.5 {
    margin-top: .375rem
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-12 {
    margin-top: 3rem
}

.mt-14 {
    margin-top: 3.5rem
}

.mt-16 {
    margin-top: 4rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-20 {
    margin-top: 5rem
}

.mt-24 {
    margin-top: 6rem
}

.mt-28 {
    margin-top: 7rem
}

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

.mt-9 {
    margin-top: 2.25rem
}

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

.hidden {
    display: none
}

.\!h-11 {
    height: 2.75rem !important
}

.\!h-9 {
    height: 2.25rem !important
}

.h-10 {
    height: 2.5rem
}

.h-11 {
    height: 2.75rem
}

.h-12 {
    height: 3rem
}

.h-3 {
    height: .75rem
}

.h-4 {
    height: 1rem
}

.h-6 {
    height: 1.5rem
}

.h-7 {
    height: 1.75rem
}

.h-9 {
    height: 2.25rem
}

.h-full {
    height: 100%
}

.min-h-0 {
    min-height: 0
}

.min-h-\[100svh\] {
    min-height: 100svh
}

.min-h-\[80vh\] {
    min-height: 80vh
}

.\!w-28 {
    width: 7rem !important
}

.\!w-6 {
    width: 1.5rem !important
}

.\!w-9 {
    width: 2.25rem !important
}

.\!w-auto {
    width: auto !important
}

.w-10 {
    width: 2.5rem
}

.w-11 {
    width: 2.75rem
}

.w-12 {
    width: 3rem
}

.w-14 {
    width: 3.5rem
}

.w-3 {
    width: .75rem
}

.w-3\.5 {
    width: .875rem
}

.w-4 {
    width: 1rem
}

.w-7 {
    width: 1.75rem
}

.w-9 {
    width: 2.25rem
}

.w-\[min\(420px\2c 94vw\)\] {
    width: min(420px, 94vw)
}

.w-full {
    width: 100%
}

.w-max {
    width: -moz-max-content;
    width: max-content
}

.min-w-0 {
    min-width: 0
}

.min-w-\[16px\] {
    min-width: 16px
}

.min-w-\[220px\] {
    min-width: 220px
}

.min-w-full {
    min-width: 100%
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-3xl {
    max-width: 48rem
}

.max-w-\[1500px\] {
    max-width: 1500px
}

.max-w-\[240px\] {
    max-width: 240px
}

.max-w-full {
    max-width: 100%
}

.max-w-md {
    max-width: 28rem
}

.max-w-page {
    max-width: 1240px
}

.max-w-sm {
    max-width: 24rem
}

.max-w-xl {
    max-width: 36rem
}

.max-w-xs {
    max-width: 20rem
}

.flex-1 {
    flex: 1 1 0%
}

.flex-none {
    flex: none
}

.shrink-0 {
    flex-shrink: 0
}

.grow {
    flex-grow: 1
}

.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))
}

.cursor-pointer {
    cursor: pointer
}

.select-all {
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all
}

.resize {
    resize: both
}

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

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.\!justify-start {
    justify-content: flex-start !important
}

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

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-0\.5 {
    gap: .125rem
}

.gap-1 {
    gap: .25rem
}

.gap-1\.5 {
    gap: .375rem
}

.gap-10 {
    gap: 2.5rem
}

.gap-12 {
    gap: 3rem
}

.gap-2 {
    gap: .5rem
}

.gap-2\.5 {
    gap: .625rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-8 {
    gap: 2rem
}

.gap-px {
    gap: 1px
}

.gap-x-5 {
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem
}

.gap-y-2 {
    row-gap: .5rem
}

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

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

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

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

.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-2\.5>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.625rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.625rem*var(--tw-space-y-reverse))
}

.space-y-20>: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-28>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(7rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(7rem*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))
}

.space-y-5>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem*(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem*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-ink\/10>:not([hidden])~:not([hidden]) {
    border-color: rgb(var(--ink)/.1)
}

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

.overflow-hidden {
    overflow: hidden
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-x-clip {
    overflow-x: clip
}

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

.whitespace-normal {
    white-space: normal
}

.whitespace-nowrap {
    white-space: nowrap
}

.whitespace-pre-wrap {
    white-space: pre-wrap
}

.break-all {
    word-break: break-all
}

.\!rounded-3xl {
    border-radius: 1.5rem !important
}

.\!rounded-none {
    border-radius: 0 !important
}

.\!rounded-pill {
    border-radius: 999px !important
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-3xl {
    border-radius: 1.5rem
}

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

.rounded-glass {
    border-radius: 28px
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-pill {
    border-radius: 999px
}

.rounded-sm {
    border-radius: .125rem
}

.rounded-t-2xl {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem
}

.border {
    border-width: 1px
}

.border-2 {
    border-width: 2px
}

.border-b {
    border-bottom-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-current {
    border-color: currentColor
}

.border-ink\/10 {
    border-color: rgb(var(--ink)/.1)
}

.bg-\[\#0b1510\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 21 16/var(--tw-bg-opacity, 1))
}

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

.bg-brand\/90 {
    background-color: rgb(var(--brand)/.9)
}

.bg-current {
    background-color: currentColor
}

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

.bg-hot\/15 {
    background-color: rgb(var(--hot)/.15)
}

.bg-ink\/10 {
    background-color: rgb(var(--ink)/.1)
}

.bg-ink\/\[\.06\] {
    background-color: rgb(var(--ink)/.06)
}

.bg-ink\/\[\.07\] {
    background-color: rgb(var(--ink)/.07)
}

.bg-ok\/15 {
    background-color: rgb(var(--ok)/.15)
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.\!p-3 {
    padding: .75rem !important
}

.p-10 {
    padding: 2.5rem
}

.p-2 {
    padding: .5rem
}

.p-2\.5 {
    padding: .625rem
}

.p-3 {
    padding: .75rem
}

.p-4 {
    padding: 1rem
}

.p-5 {
    padding: 1.25rem
}

.p-6 {
    padding: 1.5rem
}

.p-7 {
    padding: 1.75rem
}

.p-8 {
    padding: 2rem
}

.\!px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important
}

.\!px-7 {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important
}

.\!px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important
}

.\!py-1\.5 {
    padding-top: .375rem !important;
    padding-bottom: .375rem !important
}

.\!py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.\!py-3 {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important
}

.\!py-3\.5 {
    padding-top: .875rem !important;
    padding-bottom: .875rem !important
}

.px-1 {
    padding-left: .25rem;
    padding-right: .25rem
}

.px-1\.5 {
    padding-left: .375rem;
    padding-right: .375rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-1\.5 {
    padding-top: .375rem;
    padding-bottom: .375rem
}

.py-2\.5 {
    padding-top: .625rem;
    padding-bottom: .625rem
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
}

.py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.pb-1 {
    padding-bottom: .25rem
}

.pb-16 {
    padding-bottom: 4rem
}

.pb-24 {
    padding-bottom: 6rem
}

.pb-28 {
    padding-bottom: 7rem
}

.pb-3 {
    padding-bottom: .75rem
}

.pr-1\.5 {
    padding-right: .375rem
}

.pt-10 {
    padding-top: 2.5rem
}

.pt-11 {
    padding-top: 2.75rem
}

.pt-2 {
    padding-top: .5rem
}

.pt-20 {
    padding-top: 5rem
}

.pt-24 {
    padding-top: 6rem
}

.pt-28 {
    padding-top: 7rem
}

.pt-3 {
    padding-top: .75rem
}

.pt-36 {
    padding-top: 9rem
}

.pt-4 {
    padding-top: 1rem
}

.pt-40 {
    padding-top: 10rem
}

.pt-5 {
    padding-top: 1.25rem
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.font-display {
    font-family: Bricolage Grotesque Variable, ui-sans-serif, system-ui, sans-serif
}

.font-mono {
    font-family: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}

.font-sans {
    font-family: Figtree Variable, ui-sans-serif, system-ui, sans-serif
}

.\!text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important
}

.\!text-xs {
    font-size: .75rem !important;
    line-height: 1rem !important
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.text-5xl {
    font-size: 3rem;
    line-height: 1
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1
}

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

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

.text-\[clamp\(2\.6rem\2c 7vw\2c 6rem\)\] {
    font-size: clamp(2.6rem, 7vw, 6rem)
}

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

.uppercase {
    text-transform: uppercase
}

.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-\[\.92\] {
    line-height: .92
}

.leading-\[\.95\] {
    line-height: .95
}

.leading-\[1\.02\] {
    line-height: 1.02
}

.leading-relaxed {
    line-height: 1.625
}

.leading-snug {
    line-height: 1.375
}

.tracking-\[\.22em\] {
    letter-spacing: .22em
}

.tracking-tight {
    letter-spacing: -.025em
}

.tracking-wide {
    letter-spacing: .025em
}

.\!text-hot {
    --tw-text-opacity: 1 !important;
    color: rgb(var(--hot)/var(--tw-text-opacity, 1)) !important
}

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

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

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

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

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

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.text-white\/70 {
    color: hsla(0, 0%, 100%, .7)
}

.text-white\/75 {
    color: hsla(0, 0%, 100%, .75)
}

.text-white\/80 {
    color: hsla(0, 0%, 100%, .8)
}

.text-white\/85 {
    color: hsla(0, 0%, 100%, .85)
}

.no-underline {
    text-decoration-line: none
}

.accent-\[rgb\(var\(--brand\)\)\] {
    accent-color: rgb(var(--brand))
}

.opacity-20 {
    opacity: .2
}

.opacity-60 {
    opacity: .6
}

.opacity-70 {
    opacity: .7
}

.opacity-80 {
    opacity: .8
}

.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)
}

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

.transition {
    transition-property: color, background-color, border-color, 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
}

@font-face {
    font-family: Bricolage Grotesque Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(/static/fonts/bricolage-latin.woff2) format("woff2-variations");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Bricolage Grotesque Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(/static/fonts/bricolage-latin-ext.woff2) format("woff2-variations");
    unicode-range: u+0100-02af, u+0304, u+0308, u+0329, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Figtree Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url(/static/fonts/figtree-latin.woff2) format("woff2-variations");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Figtree Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url(/static/fonts/figtree-latin-ext.woff2) format("woff2-variations");
    unicode-range: u+0100-02af, u+0304, u+0308, u+0329, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

:root,
[data-theme=fotsy] {
    --bg: 250 250 250;
    --ink: 17 17 17;
    --mute: 92 96 94;
    --brand: 17 17 17;
    --onbrand: 255 255 255;
    --hot: 17 17 17;
    --ok: 0 118 54;
    --err: 198 36 28;
    --fill: 17 17 17;
    --onfill: 255 255 255;
    --fill-line: hsla(0, 0%, 100%, .22);
    --link: 0 132 63;
    --t-brand: 17 17 17;
    --t-ink: 17 17 17;
    --t-mute: 92 96 94;
    --glass: hsla(0, 0%, 100%, .58);
    --glass-strong: hsla(0, 0%, 100%, .74);
    --glass-line: hsla(0, 0%, 7%, .11);
    --shine: hsla(0, 0%, 100%, .95);
    --shade: hsla(0, 0%, 7%, .16);
    --f1: #fff;
    --f2: #ffe3e0;
    --f3: #ddf0e5;
    --scrim: hsla(0, 0%, 4%, .5);
    --logo-ring: #111;
    --logo-drop: #111;
    --logo-arc: #ea2839;
    --tile: #fff;
    --tile-ring: #111;
    --tile-drop: #111;
    --tile-arc: #ea2839;
    --tile-line: hsla(0, 0%, 7%, .14);
    --rim-hi: hsla(0, 0%, 100%, .95);
    --rim-lo: hsla(0, 0%, 100%, .4);
    --cta: 17 17 17;
    --oncta: 255 255 255;
    --menu-bg: hsla(0, 0%, 100%, .86);
    --tint: 12 12 12;
    --amb1: hsla(0, 0%, 7%, .035);
    --amb2: hsla(0, 0%, 7%, .03);
    --pb: hsla(0, 0%, 100%, .62);
    --pb-line: hsla(0, 0%, 7%, .12);
    --pc-ink: #111;
    --pc4: #e4e9e6;
    --pc-edge: #c9d1cc;
    --lcd: #f2f2f2;
    --led: #22e07a;
    --rc: #111;
    --rc-arc: #ea2839;
    --stamp: #111;
    --bc: #111;
    --bc-panel: transparent;
    --gt-a: #fff;
    --gt-b: #f1f1f1;
    --gt-c: #e2e2e2;
    --gt-ink: #111;
    --wall-a: #f7f7f7;
    --wall-b: #e2e2e2;
    --wall-ink: #111;
    --phone-body: #fff;
    --phone-edge: #dce1de;
    --phone-accent: #111;
    --phone-ink: #1a1a1a;
    --big: #fff;
    --big2: #ddebe2;
    color-scheme: light
}

[data-theme=maitso] {
    --bg: 5 46 23;
    --ink: 255 255 255;
    --mute: 198 228 210;
    --brand: 25 165 90;
    --onbrand: 255 255 255;
    --hot: 150 236 190;
    --ok: 150 236 190;
    --err: 255 190 184;
    --fill: 0 132 63;
    --onfill: 255 255 255;
    --fill-line: hsla(0, 0%, 100%, .42);
    --link: 255 255 255;
    --t-brand: 47 210 122;
    --t-ink: 255 255 255;
    --t-mute: 198 228 210;
    --glass: rgba(0, 132, 63, .2);
    --glass-strong: rgba(0, 110, 50, .3);
    --glass-line: hsla(0, 0%, 100%, .18);
    --shine: hsla(0, 0%, 100%, .22);
    --shade: rgba(0, 0, 0, .4);
    --f1: #03301a;
    --f2: #00843f;
    --f3: #005a2b;
    --scrim: rgba(0, 28, 12, .5);
    --logo-ring: #fff;
    --logo-drop: #fff;
    --logo-arc: #ea2839;
    --tile: #00843f;
    --tile-ring: #fff;
    --tile-drop: #fff;
    --tile-arc: #ea2839;
    --tile-line: hsla(0, 0%, 100%, .35);
    --rim-hi: hsla(0, 0%, 100%, .42);
    --rim-lo: hsla(0, 0%, 100%, .12);
    --cta: 0 132 63;
    --oncta: 255 255 255;
    --menu-bg: rgba(3, 52, 26, .9);
    --tint: 2 34 16;
    --amb1: transparent;
    --amb2: rgba(0, 0, 0, .25);
    --pb: rgba(0, 132, 63, .72);
    --pb-line: hsla(0, 0%, 100%, .3);
    --pc-ink: #fff;
    --pc4: #005a2b;
    --pc-edge: #003d1d;
    --lcd: #9bf5c2;
    --led: #9bf5c2;
    --rc: #00843f;
    --stamp: #00843f;
    --bc: #00843f;
    --bc-panel: transparent;
    --gt-a: #0e7a3e;
    --gt-b: #0a6433;
    --gt-c: #15914c;
    --gt-ink: #fff;
    --wall-a: #0e7a3e;
    --wall-b: #053d1f;
    --wall-ink: #fff;
    --phone-body: #00843f;
    --phone-edge: #005a2b;
    --phone-accent: #fff;
    --phone-ink: #fff;
    --big: #2fd27a;
    --big2: #00843f;
    color-scheme: dark
}

[data-theme=mena] {
    --bg: 104 12 7;
    --ink: 255 255 255;
    --mute: 255 220 216;
    --brand: 255 96 84;
    --onbrand: 255 255 255;
    --hot: 255 214 208;
    --ok: 150 236 190;
    --err: 255 214 208;
    --fill: 225 38 47;
    --onfill: 255 255 255;
    --fill-line: hsla(0, 0%, 100%, .42);
    --link: 140 242 180;
    --t-brand: 255 120 108;
    --t-ink: 255 255 255;
    --t-mute: 255 220 216;
    --glass: rgba(212, 42, 32, .2);
    --glass-strong: rgba(190, 34, 26, .3);
    --glass-line: hsla(0, 0%, 100%, .2);
    --shine: hsla(0, 0%, 100%, .22);
    --shade: rgba(0, 0, 0, .4);
    --f1: #5e0a06;
    --f2: #ea2839;
    --f3: #b8241b;
    --scrim: rgba(64, 4, 2, .5);
    --logo-ring: #fff;
    --logo-drop: #fff;
    --logo-arc: #34c46f;
    --tile: #e1262f;
    --tile-ring: #fff;
    --tile-drop: #fff;
    --tile-arc: #7cf0a8;
    --tile-line: hsla(0, 0%, 100%, .35);
    --rim-hi: hsla(0, 0%, 100%, .42);
    --rim-lo: hsla(0, 0%, 100%, .12);
    --cta: 225 38 47;
    --oncta: 255 255 255;
    --menu-bg: rgba(84, 9, 5, .9);
    --tint: 48 4 2;
    --amb1: rgba(255, 90, 70, .22);
    --amb2: rgba(0, 0, 0, .25);
    --pb: rgba(212, 42, 32, .74);
    --pb-line: hsla(0, 0%, 100%, .3);
    --pc-ink: #fff;
    --pc4: #9a1e16;
    --pc-edge: #6e130d;
    --lcd: #ffd2cd;
    --led: #ffd2cd;
    --rc: #c8202b;
    --rc-arc: #00843f;
    --stamp: #c8202b;
    --bc: #c8202b;
    --bc-panel: transparent;
    --gt-a: #c8202b;
    --gt-b: #a3221a;
    --gt-c: #e0483d;
    --gt-ink: #fff;
    --wall-a: #c8202b;
    --wall-b: #6e0d08;
    --wall-ink: #fff;
    --phone-body: #e1262f;
    --phone-edge: #9a1e16;
    --phone-accent: #fff;
    --phone-ink: #fff;
    --big: #ff5448;
    --big2: #c8202b;
    color-scheme: dark
}

html[data-theme=saina] {
    --lcd: #9db0ff;
    --bg: 255 255 255;
    --ink: 14 24 56;
    --mute: 82 92 122;
    --brand: 26 32 109;
    --onbrand: 255 255 255;
    --hot: 225 38 47;
    --ok: 0 118 54;
    --err: 198 36 28;
    --fill: 26 32 109;
    --onfill: 255 255 255;
    --fill-line: hsla(0, 0%, 100%, .3);
    --link: 26 32 109;
    --t-brand: 26 32 109;
    --t-ink: 14 24 56;
    --t-mute: 82 92 122;
    --glass: hsla(0, 0%, 100%, .6);
    --glass-strong: hsla(0, 0%, 100%, .76);
    --glass-line: rgba(14, 24, 56, .12);
    --shine: hsla(0, 0%, 100%, .95);
    --shade: rgba(14, 24, 56, .16);
    --f1: #fff;
    --f2: #fff0f1;
    --f3: #eef0fa;
    --scrim: rgba(8, 12, 30, .5);
    --logo-ring: #1a206d;
    --logo-drop: #1a206d;
    --logo-arc: #ea2839;
    --tile: #fff;
    --tile-ring: #1a206d;
    --tile-drop: #1a206d;
    --tile-arc: #ea2839;
    --tile-line: rgba(14, 24, 56, .14);
    --rim-hi: hsla(0, 0%, 100%, .95);
    --rim-lo: hsla(0, 0%, 100%, .4);
    --cta: 225 38 47;
    --oncta: 255 255 255;
    --menu-bg: hsla(0, 0%, 100%, .9);
    --tint: 14 24 56;
    --amb1: transparent;
    --amb2: transparent;
    --pb: hsla(0, 0%, 100%, .66);
    --pb-line: rgba(14, 24, 56, .12);
    --pc-ink: #0e1838;
    --pc4: #e4e7f3;
    --pc-edge: #c6cbe3;
    --rc: #1a206d;
    --rc-arc: #ea2839;
    --stamp: #1a206d;
    --bc: #1a206d;
    --bc-panel: transparent;
    --gt-ink: #0e1838;
    --wall-ink: #0e1838;
    --phone-body: #101313;
    --phone-edge: #070909;
    --phone-accent: #e8f3ed;
    --phone-ink: #f1f4f2;
    --paper: #fff;
    --paper-ink: #0e1838;
    --paper-mute: #5a6380;
    --paper-rule: #cdd2e3;
    --stamp-ink: #fff;
    --accent2: #e1262f;
    --active: 0 132 63;
    --sheet-solid: #fff;
    color-scheme: light
}

@font-face {
    font-family: JetBrains Mono;
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url(/static/fonts/jetbrains-mono.woff2) format("woff2")
}

body {
    background-image: none;
    background-attachment: fixed
}

.theme-swap *,
.theme-swap :after,
.theme-swap :before {
    transition: none !important
}

:root,
[data-theme=fotsy] {
    --sheet-solid: #fff
}

[data-theme=maitso] {
    --sheet-solid: #04391c
}

[data-theme=mena] {
    --sheet-solid: #5e0905
}

:root,
[data-theme=fotsy] {
    --paper: #fff;
    --paper-ink: #141414;
    --paper-mute: #737373;
    --paper-rule: #c4c4bc;
    --stamp-ink: #fff
}

[data-theme=maitso] {
    --paper: #00843f;
    --paper-ink: #fff;
    --paper-mute: hsla(0, 0%, 100%, .74);
    --paper-rule: hsla(0, 0%, 100%, .45);
    --rc: #fff;
    --rc-arc: #ea2839;
    --stamp: #fff;
    --stamp-ink: #00843f;
    --bc: #fff
}

[data-theme=mena] {
    --paper: #e1262f;
    --paper-ink: #fff;
    --paper-mute: hsla(0, 0%, 100%, .76);
    --paper-rule: hsla(0, 0%, 100%, .45);
    --rc: #fff;
    --rc-arc: #7cf0a8;
    --stamp: #fff;
    --stamp-ink: #c8202b;
    --bc: #fff
}

:root,
[data-theme=fotsy] {
    --accent2: #00843f
}

[data-theme=maitso] {
    --accent2: #ea2839
}

[data-theme=mena] {
    --accent2: #34c46f
}

body,
html {
    overscroll-behavior-y: none
}

:root,
[data-theme=fotsy] {
    --seal-foot: hsla(0, 0%, 100%, .9)
}

[data-theme=maitso] {
    --seal-foot: #2fd27a
}

[data-theme=mena] {
    --seal-foot: #ff786c
}

html[data-theme=saina] {
    --seal-foot: #2fd27a
}

@media (hover:none),
(pointer:coarse) {
    body {
        background-attachment: scroll
    }

    [data-theme=saina] body:before {
        bottom: auto;
        height: 100vh;
        height: 100lvh;
        transform: translateZ(0)
    }

    .dk-stick,
    .tn-stick {
        height: 100vh;
        height: 100svh
    }

    .hdr-bar,
    .install-card {
        -webkit-backdrop-filter: blur(16px) saturate(1.5);
        backdrop-filter: blur(16px) saturate(1.5)
    }
}

.hdr-bar.on-dark .menu>.nav-panel:has([data-theme-set]),
.hdr-bar.on-dark .menu>form.nav-panel,
.hdr-bar.on-dark [data-tip]:after {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6)
}

.lite-os .main {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none
}

.lite-os .main::-webkit-scrollbar {
    display: none
}

.lt-caret {
    display: inline-block;
    width: 1.5px;
    height: 1.15em;
    margin: 0 -.75px;
    vertical-align: text-bottom;
    background: currentColor;
    animation: lt-blink 1s steps(1) infinite
}

@keyframes lt-blink {
    50% {
        opacity: 0
    }
}

.lt-big {
    font-size: 12px
}

.lt-row {
    padding: 3px 5px;
    border-radius: 2px;
    white-space: nowrap
}

.lt-row,
.lt-row small {
    overflow: hidden;
    text-overflow: ellipsis
}

.lt-row small {
    display: block;
    font-size: 10px;
    opacity: .65
}

.lite-os .lt-row.sel {
    background: #111;
    color: #fff;
    padding: 3px 5px
}

.lt-sms {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 86%;
    margin: 0 0 6px;
    padding: 4px 6px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 5px
}

.lt-sms.out {
    margin-left: auto;
    background: #111;
    color: #fff;
    border-color: #111
}

.lt-sms small {
    display: block;
    font-size: 9px;
    opacity: .6;
    text-align: right
}

.lt-lab {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    opacity: .6
}

.lt-lab.on {
    opacity: 1;
    font-weight: 800
}

.lt-lab span {
    font-weight: 600
}

.lt-in {
    min-height: 1.4em;
    padding: 2px 0 3px;
    border-bottom: 1px solid rgba(0, 0, 0, .28);
    white-space: pre-wrap;
    word-break: break-all
}

.lt-ph {
    opacity: .45
}

.lt-note {
    display: block;
    margin-top: 8px;
    text-align: center
}

.sms-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 90px
}

.sms-fab {
    position: absolute;
    right: 18px;
    bottom: 30px;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #2f7bff;
    color: #fff;
    box-shadow: 0 12px 26px -10px rgba(47, 123, 255, .7), 0 2px 6px rgba(0, 0, 0, .18);
    cursor: grab;
    touch-action: none
}

.sms-fab svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round
}

.sms-fab:active {
    cursor: grabbing;
    transform: scale(.94)
}

.sms-row {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    text-align: left
}

.sms-row small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sms-at {
    flex: none;
    opacity: .55
}

.sms-new-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0
}

.sms-to {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid hsla(0, 0%, 50%, .2);
    font-size: 13px
}

.sms-to span {
    opacity: .6
}

.sms-to input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: 600 14px Figtree Variable, system-ui;
    outline: none
}

.sms-err {
    margin: 8px 16px 0;
    font-size: 12px;
    opacity: .8
}

.sms-new-form .compose {
    margin-top: auto
}

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

html[data-theme] .dk-card>.orb-face {
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}

.hdr-bar:has([data-menu].open) [data-tip]:after {
    display: none
}

.hover\:bg-ink\/10:hover {
    background-color: rgb(var(--ink)/.1)
}

.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal
}

.focus\:fixed:focus {
    position: fixed
}

.focus\:left-4:focus {
    left: 1rem
}

.focus\:top-4:focus {
    top: 1rem
}

.focus\:z-\[100\]:focus {
    z-index: 100
}

.group[open] .group-open\:rotate-180 {
    --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))
}

@media (min-width:640px) {
    .sm\:col-span-2 {
        grid-column: span 2/span 2
    }

    .sm\:inline-flex {
        display: inline-flex
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (min-width:768px) {
    .md\:col-span-2 {
        grid-column: span 2/span 2
    }

    .md\:col-span-3 {
        grid-column: span 3/span 3
    }

    .md\:mt-20 {
        margin-top: 5rem
    }

    .md\:mt-28 {
        margin-top: 7rem
    }

    .md\:block {
        display: block
    }

    .md\:inline {
        display: inline
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:p-10 {
        padding: 2.5rem
    }

    .md\:p-12 {
        padding: 3rem
    }

    .md\:p-16 {
        padding: 4rem
    }

    .md\:p-8 {
        padding: 2rem
    }

    .md\:py-28 {
        padding-top: 7rem;
        padding-bottom: 7rem
    }

    .md\:py-40 {
        padding-top: 10rem;
        padding-bottom: 10rem
    }

    .md\:pt-32 {
        padding-top: 8rem
    }

    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1
    }

    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1
    }

    .md\:text-7xl {
        font-size: 4.5rem;
        line-height: 1
    }
}

@media (min-width:1024px) {
    .lg\:sticky {
        position: sticky
    }

    .lg\:top-28 {
        top: 7rem
    }

    .lg\:order-1 {
        order: 1
    }

    .lg\:order-2 {
        order: 2
    }

    .lg\:col-span-1 {
        grid-column: span 1/span 1
    }

    .lg\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .lg\:flex {
        display: flex
    }

    .lg\:hidden {
        display: none
    }

    .lg\:max-w-page {
        max-width: 1240px
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:grid-cols-\[\.8fr_1\.2fr\] {
        grid-template-columns: .8fr 1.2fr
    }

    .lg\:grid-cols-\[\.9fr_1\.1fr\] {
        grid-template-columns: .9fr 1.1fr
    }

    .lg\:grid-cols-\[1\.15fr_\.85fr\] {
        grid-template-columns: 1.15fr .85fr
    }

    .lg\:grid-cols-\[1\.1fr_\.9fr\] {
        grid-template-columns: 1.1fr .9fr
    }

    .lg\:grid-cols-\[1\.1fr_1fr\] {
        grid-template-columns: 1.1fr 1fr
    }

    .lg\:grid-cols-\[1\.25fr_\.75fr\] {
        grid-template-columns: 1.25fr .75fr
    }

    .lg\:grid-cols-\[1fr_\.9fr\] {
        grid-template-columns: 1fr .9fr
    }

    .lg\:grid-cols-\[1fr_1\.05fr\] {
        grid-template-columns: 1fr 1.05fr
    }

    .lg\:grid-cols-\[1fr_1\.1fr\] {
        grid-template-columns: 1fr 1.1fr
    }

    .lg\:grid-cols-\[2fr_1fr_1fr_1fr_1fr\] {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr
    }

    .lg\:items-start {
        align-items: flex-start
    }

    .lg\:items-end {
        align-items: flex-end
    }

    .lg\:self-center {
        align-self: center
    }

    .lg\:pb-12 {
        padding-bottom: 3rem
    }

    .lg\:pb-24 {
        padding-bottom: 6rem
    }

    .lg\:pt-24 {
        padding-top: 6rem
    }
}

@media (min-width:1280px) {
    .xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }
}

html[data-theme="saina"] body[data-page="coord_announce"] .side {
    background-color: rgb(var(--bg));
    -webkit-backdrop-filter: none;
    backdrop-filter: none
}


/* Platform mockups: scroll-stacked product screens, with each full capture visible. */
.ps {
  --ps-top: clamp(86px, 12svh, 130px);
  padding-bottom: 26svh;
  isolation: isolate;
}
.ps-card {
  position: sticky;
  top: calc(var(--ps-top) + var(--ps-i) * 9px);
  z-index: calc(10 + var(--ps-i));
  display: grid;
  grid-template-columns: minmax(0, .29fr) minmax(0, .71fr);
  align-items: center;
  gap: clamp(16px, 3.5vw, 54px);
  height: min(74svh, 690px);
  min-height: 365px;
  margin: 0 0 42svh;
  padding: clamp(18px, 3.5vw, 44px);
  border: 1px solid var(--glass-line);
  border-radius: clamp(22px, 3.6vw, 40px);
  background: rgb(var(--bg));
  box-shadow: none;
  transform-origin: 50% 0;
  backface-visibility: hidden;
}
.ps-card:last-child { margin-bottom: 0; }
.ps.is-live .ps-card { transform: scale(var(--ps-scale, 1)); }
.ps-copy { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.ps-number {
  color: rgb(var(--mute));
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}
.ps-card figcaption {
  margin: 0;
  color: rgb(var(--ink));
  font: 800 clamp(1.75rem, 3.3vw, 3.8rem)/1.05 "Bricolage Grotesque Variable", system-ui, sans-serif;
  letter-spacing: -.045em;
  text-align: left;
}
.ps-preview { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; height: 100%; }
.ps-preview .gd-frame { flex: none; max-width: 100%; overflow: hidden; }
.ps .gd-phone { width: auto; }
.ps .gd-desk .gd-frame { width: min(100%, 790px); }
.ps .gd-phone .gd-frame { width: min(260px, 29svh, 60vw); }
.ps .gd-screen img { object-fit: contain; }
@media (max-width: 700px) {
  .ps { --ps-top: clamp(76px, 10svh, 100px); padding-bottom: 15svh; }
  .ps-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    height: min(76svh, 610px);
    min-height: 320px;
    margin-bottom: 30svh;
    padding: 18px 16px;
    border-radius: 24px;
  }
  .ps-copy { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 14px; }
  .ps-card figcaption { font-size: clamp(1.35rem, 5vw, 2.3rem); text-align: right; }
  .ps-number { flex-shrink: 0; font-size: .72rem; }
  .ps-card.gd-desk { height: min(56svh, 480px); min-height: 320px; }
  .ps .gd-phone .gd-frame { width: min(205px, 27svh, 59vw); }
  .ps .gd-desk .gd-frame { width: min(100%, 560px); }
}
@media (max-height: 500px), (prefers-reduced-motion: reduce) {
  .ps { padding-bottom: 0; }
  .ps-card {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    margin-bottom: 22px;
    transform: none !important;
  }
  .ps-preview { min-height: 0; }
  .ps-card:last-child { margin-bottom: 0; }
}


/* Platform tablet mockup: desk screenshots sit inside an unbranded tablet shell that follows the active theme. */
:root {
  --tablet-shell: #f7f7f4;
  --tablet-shell-edge: #d8ddd8;
  --tablet-detail: rgba(15, 24, 20, .52);
  --tablet-shadow: rgba(10, 16, 12, .24);
}
html[data-theme=saina] {
  --tablet-shell: #151c1b;
  --tablet-shell-edge: #2a3431;
  --tablet-detail: rgba(255, 255, 255, .72);
  --tablet-shadow: rgba(0, 0, 0, .42);
}
html[data-theme=maitso] {
  --tablet-shell: #0a7f3a;
  --tablet-shell-edge: #07592a;
  --tablet-detail: rgba(255, 255, 255, .75);
  --tablet-shadow: rgba(0, 64, 26, .30);
}
html[data-theme=mena] {
  --tablet-shell: #cf2b21;
  --tablet-shell-edge: #971d16;
  --tablet-detail: rgba(255, 255, 255, .75);
  --tablet-shadow: rgba(96, 12, 8, .32);
}
html[data-theme=fotsy] {
  --tablet-shell: #ffffff;
  --tablet-shell-edge: #d5e2db;
  --tablet-detail: rgba(12, 24, 18, .55);
  --tablet-shadow: rgba(10, 16, 12, .18);
}
.ps .gd-tablet {
  width: min(100%, 820px);
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 36px 64px color-mix(in srgb, var(--tablet-shadow) 92%, transparent));
}
.ps .gd-tablet-shell {
  position: relative;
  width: 100%;
  padding: clamp(12px, 1.2vw, 14px);
  border-radius: clamp(28px, 3vw, 34px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tablet-shell) 90%, white 10%), var(--tablet-shell));
  border: 1px solid color-mix(in srgb, var(--tablet-shell-edge) 78%, white 22%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -12px 18px rgba(0,0,0,.08);
}
.ps .gd-tablet-shell .gd-frame {
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: #f5f6f5;
  box-shadow: 0 24px 46px -30px rgba(0,0,0,.24);
}
.ps .gd-tablet .gd-screen {
  aspect-ratio: 16 / 10;
}
.ps .gd-tablet-cam,
.ps .gd-tablet-home {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}
.ps .gd-tablet-cam {
  top: 6px;
  width: clamp(7px, .7vw, 8px);
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--tablet-detail) 84%, black 16%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.ps .gd-tablet-home {
  bottom: 7px;
  width: clamp(44px, 5vw, 56px);
  height: clamp(4px, .45vw, 5px);
  background: color-mix(in srgb, var(--tablet-detail) 62%, transparent);
}
/* Theme-aware phone shells in the /platform product gallery */
.ps .gd-phone .gd-frame {
  background: var(--phone-body);
  border-color: var(--phone-edge);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 40px 90px -48px rgba(0,0,0,.55);
}
.ps .gd-phone .gd-screen {
  background: rgb(var(--bg));
}
@media (max-width: 700px) {
  .ps .gd-tablet { width: min(100%, 560px); }
  .ps .gd-tablet-shell { padding: 10px; border-radius: 24px; }
  .ps .gd-tablet-shell .gd-frame { border-radius: 18px; }
}
/* Keep the original solid mockup covers with a black default phone and instant theme updates. */
.ps .gd-phone .gd-frame,
.ps .gd-tablet-shell {
  transition: none !important;
}
html[data-theme=saina] .ps .gd-phone .gd-frame,
html:not([data-theme]) .ps .gd-phone .gd-frame {
  background: #101313;
  border-color: #070909;
}

html[data-theme="saina"] {
  --pb: #14171b;
  --pb-line: rgba(255, 255, 255, .18);
  --pc-ink: #f4f7f5;
  --pc4: #14171b;
  --pc-edge: #07090c;
}

html[data-theme="saina"] .p-body {
  background: linear-gradient(180deg, #33383e, #16191d 42%, #080a0d);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22), inset 0 -10px 24px -14px rgba(0, 0, 0, .5), 0 30px 60px -28px rgba(0, 0, 0, .45);
}

html[data-theme="saina"] .p-body::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), transparent);
}

.lab > aside:first-child > section.glass-strong {
  box-shadow: inset 0 1px 1px var(--rim-hi);
}
.lab .btn-ghost[data-tour],
.lab .btn-ghost[data-tour]:hover,
.lab .btn-ghost[data-tour]:active {
  box-shadow: none;
}
.lab > aside:first-child > section.glass-strong[data-key-guide],
.lab [data-key-guide] .bg-brand {
  box-shadow: none;
  filter: none;
  text-shadow: none;
}

.lab [data-key-guide],
.lab [data-key-guide] *,
.lab .btn-ghost[data-tour],
.lab .btn-ghost[data-tour]:hover,
.lab .btn-ghost[data-tour]:active,
.lab .btn-ghost[data-tour]:focus,
.lab .btn-ghost[data-tour]:focus-visible {
  box-shadow: none;
  filter: none;
  text-shadow: none;
}
.lab .callbtn,
.lab .callbtn:hover,
.lab .callbtn:active,
.lab .callbtn:focus {
  box-shadow: none;
  filter: none;
}
.lab .dpad {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 4px 8px rgba(0, 0, 0, .3);
}
.lab .dpad button:focus-visible,
.lab .sk:focus-visible,
.lab .k:focus-visible {
  box-shadow: none;
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

:is(.lab, [data-phones]) .ussd-card input {
  font-size: 12px;
  font-weight: 400;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
}
:is(.lab, [data-phones]) .ussd-card input:focus,
:is(.lab, [data-phones]) .ussd-card input:focus-visible {
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
@media (max-width: 639px) {
  .access-phones {
    margin-inline: -1rem;
    padding-inline: 0;
  }
  .access-phones .pd-row.is-swipe {
    margin-inline: 0;
  }
}


/* water points map */
.wp-map { height: 420px; border-radius: 22px; z-index: 0; }
.wp-pin span { display: block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.leaflet-tooltip { font-family: "Figtree Variable", system-ui, sans-serif; border-radius: 12px; }

/* SMS code page */
.otp-field { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 30px; letter-spacing: .32em; text-align: center; font-weight: 700; }
.otp-demo { padding: 10px 12px; border-radius: 14px; background: rgb(var(--brand) / .08); color: rgb(var(--ink)); }
.sms-badge { display: flex; margin-bottom: 18px; }
.sms-bubble { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: rgb(var(--brand) / .1); font-size: 13px; }
.sms-bubble svg, .sms-bubble .ico { grid-row: span 2; width: 22px; height: 22px; color: rgb(var(--brand)); }
.sms-bubble i { font-style: normal; color: rgb(var(--mute)); }

/* Install card, Elements style: smaller type, the button on every device, steps shown in place with the real Share icon */
.install-card .ic-title { font-size: .86rem !important; letter-spacing: -.01em }
.install-card .ic-text:not([hidden]) { font-size: .74rem !important; line-height: 1.35 !important; -webkit-line-clamp: 3 !important }
.install-card.is-steps .ic-text { -webkit-line-clamp: 4 !important }
.install-card .ic-go { font-size: .78rem !important; padding: 6px 13px !important }
.install-card .ic-go[hidden] { display: none !important }
.install-card .ic-share { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

html[data-theme=saina] .p-lcd { background: #080c26 }

.bar-val { font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: rgb(var(--mute)); white-space: nowrap }
/* Default avatar: solid CWAS navy, white initials (same as the app) */
.uav{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:#1A206D;color:#fff;font-family:var(--font-display,inherit);font-weight:800;letter-spacing:.01em;line-height:1}
.side-me{display:flex;align-items:center;gap:10px;padding:8px 10px 14px;margin-bottom:8px;border-bottom:1px solid rgb(var(--ink)/.1);text-decoration:none;color:inherit}
.side-me b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-me small{display:block;font-size:12px;opacity:.65}

/* Ticket number printed under the barcode: makes scanning and manual entry easy */
.rc-code{font:700 15px/1 ui-monospace,'JetBrains Mono',monospace;letter-spacing:.18em;text-align:center;margin:6px 0 2px;color:var(--rc,#1a206d)}


/* Toast close: circular card (matches the app) */
.toast-x{width:30px!important;height:30px!important;background:rgb(var(--ink)/.08)!important;border:1px solid rgb(var(--ink)/.16)!important;box-shadow:0 4px 12px -6px rgb(var(--ink)/.35)}
.toast-x .icon{width:13px!important;height:13px!important}

/* Sign-up location search: same field, glass and radius as every other card */
.reg-search{display:flex;gap:8px;margin:10px 0 8px;align-items:stretch}
.reg-search .field{flex:1;min-width:0}
.reg-results{list-style:none;margin:0 0 8px;padding:6px;border-radius:1.25rem;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--shine),0 18px 36px -22px rgb(var(--ink)/.45)}
.reg-results li button{display:block;width:100%;text-align:left;padding:7px 12px;font-size:.875rem;border-radius:.9rem;font-weight:600;color:rgb(var(--ink));background:transparent;transition:background .15s}
.reg-results li button:hover,.reg-results li button:focus{background:rgb(var(--ink)/.07);outline:none}
.reg-results small{display:block;font-weight:500;color:rgb(var(--mute))}
.reg-mapbox{height:240px;border-radius:1.25rem;overflow:hidden;border:1px solid var(--glass-line);margin-top:8px;box-shadow:inset 0 1px 0 var(--shine)}
.reg-locate{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:rgb(var(--brand));color:rgb(var(--onbrand));font-weight:700;font-size:.8rem;border:1px solid transparent;box-shadow:0 8px 18px -10px rgb(var(--ink)/.5);transition:filter .15s}.reg-locate:hover{filter:brightness(1.12)}.reg-locate svg,.reg-locate .icon{width:15px;height:15px}