.sfui {
    --bg: #080C18;
    --bg-2: #0F1321;
    --surface: #141A2E;
    --surface-sunk: #0F1321;
    --border: rgba(255, 255, 255, .12);
    --border-strong: rgba(255, 255, 255, .22);
    --ink: #FFFFFF;
    --ink-2: #94A3B8;
    --ink-3: #64748B;
    --brand: #3B82F6;
    --brand-strong: #60A5FA;
    --brand-ink: #93C5FD;
    --brand-soft: rgba(59, 130, 246, .16);
    --brand-softer: rgba(59, 130, 246, .09);
    --claim: #22C55E;
    --claim-soft: rgba(34, 197, 94, .15);
    --warn: #F59E0B;
    --warn-soft: rgba(245, 158, 11, .14);
    --warn-border: rgba(245, 158, 11, .32);
    --danger: #F87171;
    --danger-soft: rgba(239, 68, 68, .15);
    --dot: rgba(255, 255, 255, .05);
    --ring: 0 0 0 3px rgba(59, 130, 246, .35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 4px 20px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --r-xs: 8px;
    --r-sm: 10px;
    --r: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --container: 1120px;
    --prose: 720px;
    --nav-h: 68px;
    color-scheme: dark
}

.sfui[data-theme=light] {
    --bg: #F5F7FA;
    --bg-2: #EEF1F6;
    --surface: #FFFFFF;
    --surface-sunk: #F1F3F7;
    --border: rgba(11, 16, 32, .12);
    --border-strong: rgba(11, 16, 32, .22);
    --ink: #0B1020;
    --ink-2: #434B5C;
    --ink-3: #5F6875;
    --brand: #2563EB;
    --brand-strong: #1D4ED8;
    --brand-ink: #1E40AF;
    --brand-soft: rgba(37, 99, 235, .1);
    --brand-softer: rgba(37, 99, 235, .06);
    --claim: #047857;
    --claim-soft: rgba(4, 120, 87, .1);
    --warn: #92400E;
    --warn-soft: rgba(180, 83, 9, .1);
    --warn-border: rgba(180, 83, 9, .28);
    --danger: #B91C1C;
    --danger-soft: rgba(220, 38, 38, .1);
    --dot: rgba(27, 36, 48, .045);
    --ring: 0 0 0 3px rgba(37, 99, 235, .28);
    --shadow-sm: 0 1px 2px rgba(20, 26, 36, .05);
    --shadow: 0 4px 16px rgba(20, 26, 36, .07), 0 1px 3px rgba(20, 26, 36, .05);
    --shadow-lg: 0 20px 48px rgba(20, 26, 36, .14), 0 4px 12px rgba(20, 26, 36, .06);
    color-scheme: light
}

.sfui,
.sfui *,
.sfui *:before,
.sfui *:after {
    box-sizing: border-box
}

.sfui [hidden] {
    display: none !important
}

.sfui {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    background-color: var(--bg);
    background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
    background-size: 24px 24px;
    background-position: -12px -12px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

.sfui.sfui--fill {
    min-height: 100vh
}

.sfui img,
.sfui svg {
    display: block;
    max-width: 100%
}

.sfui a {
    color: var(--brand-strong);
    text-decoration: none
}

.sfui a:hover {
    color: var(--brand-ink)
}

.sfui button {
    font-family: inherit
}

.sfui h1,
.sfui h2,
.sfui h3,
.sfui h4 {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.01em
}

.sfui p {
    margin: 0
}

.sfui :focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--r-xs)
}

.sfui .container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px
}

.sfui .section {
    padding: 88px 0
}

.sfui .section--tight {
    padding: 56px 0
}

.sfui .center {
    text-align: center
}

.sfui .prose {
    max-width: var(--prose);
    margin: 0 auto
}

.sfui .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-strong)
}

.sfui .lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--ink-2)
}

.sfui .muted {
    color: var(--ink-3)
}

.sfui .display {
    font-family: var(--serif);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.08
}

.sfui h1.display {
    font-size: clamp(2.4rem, 5.4vw, 4rem)
}

.sfui h2.display {
    font-size: clamp(1.9rem, 3.6vw, 2.9rem)
}

.sfui h3.display {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem)
}

.sfui .btn {
    --btn-bg: var(--brand);
    --btn-ink: #fff;
    --btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-ink);
    border: 1.5px solid var(--btn-bd);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease
}

.sfui .btn svg {
    width: 18px;
    height: 18px
}

.sfui .btn:hover {
    color: #fff
}

.sfui .btn:active {
    transform: translateY(1px)
}

.sfui .btn--primary {
    box-shadow: var(--shadow-sm)
}

.sfui .btn--primary:hover {
    background: var(--brand-strong)
}

.sfui .btn--secondary {
    --btn-bg: var(--surface);
    --btn-ink: var(--ink);
    --btn-bd: var(--border-strong);
    box-shadow: var(--shadow-sm)
}

.sfui .btn--secondary:hover {
    --btn-bg: var(--surface);
    color: var(--ink);
    border-color: var(--brand)
}

.sfui .btn--ghost {
    --btn-bg: transparent;
    --btn-ink: var(--brand-strong);
    --btn-bd: transparent;
    padding-left: 8px;
    padding-right: 8px
}

.sfui .btn--ghost:hover {
    color: var(--brand-ink)
}

.sfui .btn--lg {
    padding: 17px 30px;
    font-size: 17px
}

.sfui .btn--block {
    width: 100%
}

.sfui .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.sfui .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow)
}

.sfui .card--pad {
    padding: 28px
}

.sfui .pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 700;
    line-height: 1
}

.sfui .pill--brand {
    background: var(--brand-soft);
    color: var(--brand-ink)
}

.sfui .pill--warn {
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid var(--warn-border)
}

.sfui .pill--dot:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor
}

.sfui .token {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 6px 12px 6px 7px;
    border-radius: var(--r-xs);
    background: var(--claim-soft);
    border: 1px solid color-mix(in srgb, var(--claim) 30%, transparent)
}

.sfui .token__amt {
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-size: 15px
}

.sfui .token__sym {
    font-weight: 700;
    color: var(--claim);
    font-size: 12px;
    letter-spacing: .02em
}

.sfui .token__ic {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    align-self: center;
    overflow: hidden
}

.sfui .token__ic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block
}

.sfui .mono {
    font-family: var(--mono)
}

.sfui .banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--r)
}

.sfui .banner svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px
}

.sfui .banner__title {
    color: var(--ink);
    font-weight: 700
}

.sfui .banner--warn {
    background: var(--warn-soft);
    border: 1px solid var(--warn-border);
    color: var(--ink-2)
}

.sfui .banner--warn svg {
    color: var(--warn)
}

.sfui .banner--info {
    background: var(--brand-softer);
    border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
    color: var(--ink-2)
}

.sfui .banner--info svg {
    color: var(--brand-strong)
}

.sfui .banner--soft {
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    color: var(--ink-2)
}

.sfui .banner--danger {
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    color: var(--ink-2)
}

.sfui .banner--danger svg {
    color: var(--danger)
}

.sfui .field {
    margin-bottom: 20px
}

.sfui .field__label {
    display: block;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 7px;
    font-size: 15px
}

.sfui .field__hint {
    font-size: 13.5px;
    color: var(--ink-3);
    margin-top: 7px;
    line-height: 1.5
}

.sfui .input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 16px;
    transition: border-color .15s ease, box-shadow .15s ease
}

.sfui .input::placeholder {
    color: var(--ink-3)
}

.sfui .input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring)
}

.sfui .input.is-error {
    border-color: var(--danger)
}

.sfui .input.mono {
    font-family: var(--mono)
}

.sfui textarea.input {
    resize: none;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-all
}

.sfui textarea.input--addr {
    min-height: 5.4em
}

.sfui .field__error {
    display: none;
    margin-top: 7px;
    font-size: 13.5px;
    color: var(--danger);
    font-weight: 600
}

.sfui .field__error.show {
    display: block
}

.sfui .check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer
}

.sfui .check input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--brand);
    flex-shrink: 0
}

.sfui .check span {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2)
}

.sfui .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--nav-h);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border)
}

.sfui .nav__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.sfui .nav__inner .brand {
    flex-shrink: 0
}

.sfui .brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -.01em
}

.sfui .brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 100%);
    color: #fff;
    box-shadow: var(--shadow-sm)
}

.sfui .brand__mark svg {
    width: 19px;
    height: 19px
}

.sfui .brand__name {
    font-size: 17px;
    white-space: nowrap
}

.sfui .brand__name b {
    font-weight: 800
}

.sfui .brand__name span {
    color: var(--ink-3);
    font-weight: 600
}

.sfui .brand__logo {
    height: 26px;
    width: auto;
    flex-shrink: 0
}

.sfui .theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s
}

.sfui .theme-toggle:hover {
    color: var(--ink);
    border-color: var(--border-strong)
}

.sfui .theme-toggle svg {
    width: 18px;
    height: 18px
}

.sfui .theme-toggle .ic-moon {
    display: none
}

.sfui .theme-toggle .ic-sun {
    display: block
}

.sfui[data-theme=light] .theme-toggle .ic-sun {
    display: none
}

.sfui[data-theme=light] .theme-toggle .ic-moon {
    display: block
}

.sfui .nav__links {
    display: flex;
    align-items: center;
    gap: 22px
}

.sfui .nav__links a {
    color: var(--ink-2);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap
}

.sfui .nav__links a:hover {
    color: var(--ink)
}

.sfui .nav__cta {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap
}

.sfui .nav__cta a {
    white-space: nowrap
}

@media(max-width:1300px) {
    .sfui .nav__links {
        display: none
    }
}

.sfui .lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--r-pill);
    color: var(--ink-2);
    transition: border-color .15s, color .15s
}

.sfui .lang:hover {
    color: var(--ink);
    border-color: var(--border-strong)
}

.sfui .lang:focus-within {
    border-color: var(--brand);
    box-shadow: var(--ring)
}

.sfui .lang>svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.sfui .lang__select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 0 18px 0 0;
    cursor: pointer
}

.sfui .lang__select:focus-visible {
    outline: none;
    box-shadow: none
}

.sfui .lang__chev {
    position: absolute;
    right: 11px;
    width: 14px !important;
    height: 14px !important;
    pointer-events: none;
    color: var(--ink-3)
}

.sfui .verified {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-ink);
    background: var(--brand-soft);
    padding: 6px 12px;
    border-radius: var(--r-pill)
}

.sfui .verified svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0
}

.sfui .tip-wrap {
    position: relative;
    display: inline-flex
}

.sfui .tip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: 300px;
    padding: 12px 14px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease
}

.sfui .tip b {
    display: block;
    color: var(--ink);
    margin-bottom: 4px
}

.sfui .tip .mono {
    color: var(--ink)
}

.sfui .tip-wrap:hover .tip,
.sfui .tip-wrap:focus-within .tip {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

@media(max-width:560px) {
    .sfui .verified span {
        display: none
    }
}

.sfui .hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 72px
}

.sfui .hero__glow {
    position: absolute;
    inset: -30% 0 auto;
    height: 620px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(60% 60% at 18% 0%, rgba(59, 130, 246, .16), transparent 70%), radial-gradient(50% 50% at 88% 8%, rgba(37, 99, 235, .12), transparent 70%)
}

.sfui .hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px
}

.sfui .hero h1 {
    margin: 22px 0 20px
}

.sfui .hero .lead {
    max-width: 620px
}

.sfui .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px
}

.sfui .hero__assure {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    font-size: 14.5px;
    color: var(--ink-3)
}

.sfui .hero__assure svg {
    width: 18px;
    height: 18px;
    color: var(--brand);
    flex-shrink: 0
}

.sfui .hero__req {
    margin-top: 14px;
    font-size: 13px;
    color: var(--ink-3);
    max-width: 620px;
    line-height: 1.55
}

.sfui .specs {
    margin-top: 28px;
    padding: 24px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg)
}

.sfui .specs__head {
    display: flex;
    gap: 16px;
    align-items: flex-start
}

.sfui .specs__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r);
    background: var(--brand-soft);
    color: var(--brand-strong)
}

.sfui .specs__icon svg {
    width: 22px;
    height: 22px
}

.sfui .specs__title {
    margin: 2px 0 4px;
    font-family: var(--sans);
    letter-spacing: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3
}

.sfui .specs__lead {
    margin: 0;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 620px
}

.sfui .specs__grid {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden
}

.sfui .specs__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    background: var(--surface-sunk);
    margin: 0
}

.sfui .specs__item+.specs__item {
    border-left: 1px solid var(--border)
}

.sfui .specs__item--critical {
    background: var(--warn-soft);
    box-shadow: inset 0 0 0 1px var(--warn-border)
}

.sfui .specs__top {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.sfui .specs__top svg {
    width: 18px;
    height: 18px;
    color: var(--brand-strong);
    flex-shrink: 0
}

.sfui .specs__item--critical .specs__top svg {
    color: var(--warn)
}

.sfui .specs__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-3)
}

.sfui .specs__badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid var(--warn-border)
}

.sfui .specs__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3
}

.sfui .specs__note {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5
}

.sfui .specs__foot {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.5
}

@media(max-width:760px) {
    .sfui .specs {
        padding: 18px
    }

    .sfui .specs__grid {
        grid-template-columns: 1fr
    }

    .sfui .specs__item+.specs__item {
        border-left: 0;
        border-top: 1px solid var(--border)
    }
}

.sfui .incident {
    max-width: 840px;
    margin: 0 auto 40px;
    text-align: center
}

.sfui .incident__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--warn);
    background: var(--warn-soft);
    border: 1px solid var(--warn-border);
    padding: 6px 13px;
    border-radius: var(--r-pill)
}

.sfui .incident__text {
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink-2)
}

.sfui .incident__text strong {
    color: var(--ink);
    font-weight: 700
}

.sfui .incident__link {
    display: inline-block;
    margin-top: 14px;
    font-weight: 700;
    font-size: 15px
}

.sfui .incident__link svg {
    width: 14px;
    height: 14px;
    display: inline;
    vertical-align: -2px;
    margin-left: 4px
}

.sfui .trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden
}

.sfui .trust__item {
    background: var(--surface);
    padding: 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.sfui .trust__ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: flex;
    align-items: center;
    justify-content: center
}

.sfui .trust__ico svg {
    width: 21px;
    height: 21px
}

.sfui .trust__t {
    color: var(--ink);
    font-weight: 700;
    margin-bottom: 3px
}

.sfui .trust__d {
    font-size: 14.5px;
    color: var(--ink-3);
    line-height: 1.5
}

@media(max-width:820px) {
    .sfui .trust {
        grid-template-columns: 1fr
    }
}

.sfui .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.sfui .step {
    position: relative
}

.sfui .step__n {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--brand-strong);
    margin-bottom: 16px
}

.sfui .step__t {
    color: var(--ink);
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 6px
}

.sfui .step__d {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.55
}

.sfui .step__d a svg {
    width: 14px;
    height: 14px;
    display: inline;
    vertical-align: -2px;
    margin-left: 4px
}

@media(max-width:860px) {
    .sfui .steps {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px
    }
}

@media(max-width:520px) {
    .sfui .steps {
        grid-template-columns: 1fr
    }
}

.sfui .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center
}

@media(max-width:860px) {
    .sfui .split {
        grid-template-columns: 1fr;
        gap: 32px
    }
}

.sfui .stack>*+* {
    margin-top: 16px
}

.sfui .ticklist {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    gap: 14px
}

.sfui .ticklist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--ink-2);
    font-size: 16px
}

.sfui .ticklist svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--claim);
    margin-top: 1px
}

.sfui .preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 22px
}

.sfui .preview__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r)
}

.sfui .preview__row+.preview__row {
    margin-top: 12px
}

.sfui .preview__ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sfui .preview__ico svg {
    width: 20px;
    height: 20px
}

.sfui .preview__grow {
    flex: 1;
    min-width: 0
}

.sfui .preview__name {
    color: var(--ink);
    font-weight: 700
}

.sfui .preview__sub {
    font-size: 13px;
    color: var(--ink-3)
}

.sfui .faq {
    max-width: 760px;
    margin: 0 auto
}

.sfui .qa {
    border-bottom: 1px solid var(--border)
}

.sfui .qa__q {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink)
}

.sfui .qa__q svg {
    width: 22px;
    height: 22px;
    color: var(--ink-3);
    flex-shrink: 0;
    transition: transform .2s ease
}

.sfui .qa[open] .qa__q svg {
    transform: rotate(45deg);
    color: var(--brand-strong)
}

.sfui .qa__a {
    padding: 0 4px 24px;
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.65;
    max-width: 660px
}

.sfui .qa__a a {
    font-weight: 600
}

.sfui .footer {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    padding: 56px 0 40px
}

.sfui .footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between
}

.sfui .footer__note {
    max-width: 420px;
    font-size: 14.5px;
    color: var(--ink-3);
    line-height: 1.6;
    margin-top: 14px
}

.sfui .footer__links {
    display: flex;
    gap: 40px;
    flex-wrap: wrap
}

.sfui .footer__col h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3);
    margin-bottom: 12px
}

.sfui .footer__col a {
    display: block;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 15px;
    padding: 5px 0
}

.sfui .footer__col a:hover {
    color: var(--ink)
}

.sfui .footer__col a svg {
    display: inline;
    vertical-align: -1px;
    margin-left: 4px;
    width: 11px;
    height: 11px
}

.sfui .footer__bottom {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--ink-3);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between
}

.sfui .flow {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.sfui .flow__main {
    flex: 1;
    padding: 48px 0 72px
}

.sfui .flow__landing {
    flex: 1
}

.sfui .flow__card {
    max-width: 640px;
    margin: 0 auto
}

.sfui .stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 40px;
    max-width: 560px
}

.sfui .stepper__item {
    display: flex;
    align-items: center;
    gap: 10px
}

.sfui .stepper__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink-3);
    font-size: 14px;
    font-weight: 700
}

.sfui .stepper__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-3)
}

.sfui .stepper__line {
    width: 30px;
    height: 2px;
    background: var(--border-strong);
    border-radius: 2px
}

.sfui .stepper__item[data-state=active] .stepper__dot {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-soft)
}

.sfui .stepper__item[data-state=active] .stepper__label {
    color: var(--ink)
}

.sfui .stepper__item[data-state=done] .stepper__dot {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff
}

.sfui .stepper__item[data-state=done] .stepper__label {
    color: var(--ink-2)
}

.sfui .stepper__item[data-state=done]+.stepper__line {
    background: var(--brand)
}

@media(max-width:640px) {
    .sfui .stepper__label {
        display: none
    }

    .sfui .stepper__line {
        width: 20px
    }
}

.sfui .step-panel {
    display: none
}

.sfui .step-panel.is-active {
    display: block;
    animation: sfui-fadeUp .3s ease
}

@keyframes sfui-fadeUp {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(prefers-reduced-motion:reduce) {
    .sfui .step-panel.is-active {
        animation: none
    }
}

.sfui .step-head {
    text-align: center;
    margin-bottom: 32px
}

.sfui .step-head h1 {
    margin-bottom: 12px
}

.sfui .step-head p {
    color: var(--ink-2);
    font-size: 17px;
    max-width: 480px;
    margin: 0 auto
}

.sfui .connect-visual {
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--brand-soft), color-mix(in srgb, var(--brand) 12%, transparent));
    color: var(--brand-strong);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent)
}

.sfui .connect-visual svg {
    width: 44px;
    height: 44px
}

.sfui .connect-options {
    display: grid;
    gap: 14px
}

.sfui .qr-box {
    width: 208px;
    height: 208px;
    margin: 4px auto 0;
    padding: 12px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center
}

.sfui .qr-box svg {
    width: 100%;
    height: 100%
}

.sfui .qr-hint {
    text-align: center;
    font-size: 14px;
    color: var(--ink-3);
    margin-top: 12px
}

.sfui .or-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 20px 0
}

.sfui .or-divider:before,
.sfui .or-divider:after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border)
}

.sfui .total-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--claim) 30%, transparent);
    background: var(--claim-soft);
    border-radius: var(--r-lg);
    margin-bottom: 18px
}

.sfui .total-card__label {
    font-weight: 800;
    color: var(--ink);
    font-size: 15px
}

.sfui .total-card__tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end
}

.sfui .proof-visual {
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--brand-soft), color-mix(in srgb, var(--brand) 12%, transparent));
    color: var(--brand-strong);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent)
}

.sfui .proof-visual svg {
    width: 44px;
    height: 44px
}

.sfui .proof-steps {
    max-width: 440px;
    margin: 24px auto 0;
    display: grid;
    gap: 10px;
    text-align: left
}

.sfui .proof-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink-3);
    font-weight: 600;
    font-size: 15px
}

.sfui .proof-step__ico {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box
}

.sfui .proof-step[data-state=active] {
    color: var(--ink);
    border-color: var(--brand)
}

.sfui .proof-step[data-state=active] .proof-step__ico {
    border-color: var(--brand);
    border-top-color: transparent;
    animation: sfui-spin .8s linear infinite
}

.sfui .proof-step[data-state=done] {
    color: var(--ink-2)
}

.sfui .proof-step[data-state=done] .proof-step__ico {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

.sfui .proof-step[data-state=done] .proof-step__ico svg {
    width: 13px;
    height: 13px
}

.sfui .modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #141a2480;
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease
}

.sfui .modal-scrim.show {
    opacity: 1;
    pointer-events: auto
}

.sfui .modal {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    transform: translateY(12px) scale(.98);
    transition: transform .22s cubic-bezier(.3, 1, .5, 1)
}

.sfui .modal-scrim.show .modal {
    transform: none
}

.sfui .modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px
}

.sfui .modal__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink)
}

.sfui .modal__close {
    border: 0;
    background: var(--surface-sunk);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: center
}

.sfui .modal__close:hover {
    background: var(--bg-2)
}

.sfui .modal__sub {
    font-size: 14px;
    color: var(--ink-3);
    margin-bottom: 18px
}

.sfui .wallet-list {
    display: grid;
    gap: 10px
}

.sfui .wallet-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 13px 15px;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease
}

.sfui .wallet-opt:hover {
    border-color: var(--brand);
    background: var(--brand-softer)
}

.sfui .wallet-opt__logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 16px
}

.sfui .wallet-opt__name {
    flex: 1;
    font-weight: 700;
    color: var(--ink)
}

.sfui .wallet-opt__meta {
    font-size: 12.5px;
    color: var(--ink-3);
    font-weight: 600
}

.sfui .checking {
    text-align: center;
    padding: 12px 0
}

.sfui .checking__spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    border-radius: 50%;
    border: 4px solid var(--brand-soft);
    border-top-color: var(--brand);
    animation: sfui-spin .8s linear infinite
}

@keyframes sfui-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(prefers-reduced-motion:reduce) {
    .sfui .checking__spinner {
        animation-duration: 2.4s
    }
}

.sfui .progress {
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    overflow: hidden;
    max-width: 420px;
    margin: 22px auto 10px
}

.sfui .progress__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brand), var(--brand-strong));
    border-radius: var(--r-pill);
    transition: width .2s ease
}

.sfui .checking__status {
    font-size: 15px;
    color: var(--ink-2);
    font-weight: 600
}

.sfui .checking__count {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 4px;
    font-variant-numeric: tabular-nums
}

.sfui .result-wallet {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 14px
}

.sfui .rw__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px
}

.sfui .rw__logo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800
}

.sfui .rw__name {
    flex: 1;
    min-width: 0
}

.sfui .rw__title {
    font-weight: 800;
    color: var(--ink);
    font-size: 17px
}

.sfui .rw__sub {
    font-size: 13px;
    color: var(--ink-3)
}

.sfui .rw__divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0
}

.sfui .claim-row {
    padding: 14px;
    border-radius: var(--r);
    background: var(--surface-sunk);
    border: 1px solid var(--border)
}

.sfui .claim-row+.claim-row {
    margin-top: 10px
}

.sfui .claim-row__tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.sfui .claim-row__from {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-3)
}

.sfui .claim-row__from .mono {
    color: var(--ink-2)
}

.sfui .connect-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--brand-strong);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease
}

.sfui .connect-more:hover {
    border-color: var(--brand);
    background: var(--brand-softer)
}

.sfui .connect-more svg {
    width: 18px;
    height: 18px
}

.sfui .summary {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden
}

.sfui .summary__head {
    padding: 16px 18px;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--border);
    font-weight: 800;
    color: var(--ink)
}

.sfui .summary__body {
    padding: 8px 18px
}

.sfui .summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border)
}

.sfui .summary__row:last-child {
    border-bottom: 0
}

.sfui .summary__label {
    color: var(--ink-2)
}

.sfui .summary__val {
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums
}

.sfui .done {
    text-align: center
}

.sfui .done__check {
    width: 88px;
    height: 88px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--claim-soft);
    color: var(--claim);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--claim) 30%, transparent)
}

.sfui .done__check svg {
    width: 44px;
    height: 44px
}

.sfui .ref {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 4px auto 0;
    padding: 12px 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r);
    background: var(--surface-sunk)
}

.sfui .ref__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3);
    font-weight: 700
}

.sfui .ref__id {
    font-weight: 800;
    color: var(--ink);
    letter-spacing: .02em
}

.sfui .next-list {
    text-align: left;
    max-width: 460px;
    margin: 28px auto 0;
    display: grid;
    gap: 14px;
    padding: 0
}

.sfui .next-list li {
    list-style: none;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--ink-2)
}

.sfui .next-list svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--brand-strong);
    margin-top: 2px
}

.sfui .flow-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px
}

.sfui .flow-actions .btn {
    flex: 1
}

.sfui .flow-actions--end {
    justify-content: flex-end
}

.sfui .segment {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    border-radius: var(--r-pill)
}

.sfui .segment button {
    border: 0;
    background: transparent;
    padding: 8px 18px;
    border-radius: var(--r-pill);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-3);
    cursor: pointer;
    transition: background .12s, color .12s
}

.sfui .segment button[aria-pressed=true] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm)
}

.sfui .seed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px
}

@media(max-width:520px) {
    .sfui .seed-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

.sfui .seed-word {
    position: relative
}

.sfui .seed-word__n {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    pointer-events: none
}

.sfui .seed-word input {
    width: 100%;
    padding: 11px 10px 11px 30px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink);
    box-sizing: border-box
}

.sfui .seed-word input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring)
}

.sfui .seed-word input.is-error {
    border-color: var(--danger)
}

.sfui .seed-entry__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px
}

.sfui .seed-grid.is-masked input {
    -webkit-text-security: disc;
    text-security: disc
}

.sfui .seed-word input::-ms-reveal,
.sfui .seed-word input::-ms-clear {
    display: none
}

.sfui .seed-reveal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-weight: 600;
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    cursor: pointer;
    flex-shrink: 0
}

.sfui .seed-reveal:hover {
    color: var(--ink)
}

.sfui .seed-reveal svg {
    width: 15px;
    height: 15px
}

.sfui .finePrint {
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.5
}

.copy-addr {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    max-width: 100%
}

.copy-addr:hover,
.copy-addr:focus-visible {
    color: var(--brand-strong, #60a5fa)
}

.copy-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 6px);
    background: var(--ink, #0f172a);
    color: var(--bg, #ffffff);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--r-pill, 999px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .35));
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 80;
    transition: opacity .18s ease, transform .18s ease
}

.copy-toast.show {
    opacity: 1;
    transform: translate(-50%)
}

@media(prefers-reduced-motion:reduce) {
    .copy-toast {
        transition: none
    }
}

.sfui .state-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center
}

.sfui .state-icon svg {
    width: 40px;
    height: 40px
}

.sfui .state-icon--info {
    background: var(--brand-soft);
    color: var(--brand-strong);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent)
}

.sfui .state-icon--warn {
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid var(--warn-border)
}

.sfui .state-icon--done {
    background: var(--claim-soft);
    color: var(--claim);
    border: 1px solid color-mix(in srgb, var(--claim) 30%, transparent)
}

.sfui .status-steps {
    display: grid;
    gap: 0;
    margin: 8px 0 4px;
    text-align: left
}

.sfui .status-step {
    display: flex;
    gap: 14px;
    padding-bottom: 22px;
    position: relative
}

.sfui .status-step:last-child {
    padding-bottom: 0
}

.sfui .status-step:before {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: var(--border)
}

.sfui .status-step:last-child:before {
    display: none
}

.sfui .status-step__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink-3);
    z-index: 1;
    box-sizing: border-box
}

.sfui .status-step__dot svg {
    width: 14px;
    height: 14px
}

.sfui .status-step[data-done="1"] .status-step__dot {
    background: var(--claim);
    border-color: var(--claim);
    color: #fff
}

.sfui .status-step[data-current="1"] .status-step__dot {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-soft)
}

.sfui .status-step__t {
    font-weight: 700;
    color: var(--ink)
}

.sfui .status-step__d {
    font-size: 14px;
    color: var(--ink-3);
    margin-top: 2px
}

.sfui .status-step[data-pending="1"] .status-step__t {
    color: var(--ink-3)
}

.sfui .ref-list__label {
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 8px;
    text-align: center
}

.sfui .ref-list {
    display: grid;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    text-align: left
}

.sfui .ref-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r);
    background: var(--surface-sunk)
}

.sfui .ref-item__addr {
    font-size: 12.5px;
    color: var(--ink-3);
    font-family: var(--mono)
}

.sfui .ref-item__ref {
    font-weight: 800;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap
}

.sfui .ref-item__ref:hover {
    color: var(--brand-strong)
}

.sfui .status-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: left
}

.sfui .status-card+.status-card {
    margin-top: 12px
}

.sfui .status-card__ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.sfui .status-card__ico svg {
    width: 22px;
    height: 22px
}

.sfui .status-card__ico--info {
    background: var(--brand-soft);
    color: var(--brand-strong)
}

.sfui .status-card__ico--done {
    background: var(--claim-soft);
    color: var(--claim)
}

.sfui .status-card__ico--warn {
    background: var(--warn-soft);
    color: var(--warn)
}

.sfui .status-card__ico--error {
    background: var(--danger-soft);
    color: var(--danger)
}

.sfui .status-card__body {
    flex: 1;
    min-width: 0
}

.sfui .status-card__ref {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3)
}

.sfui .status-card__title {
    font-weight: 800;
    color: var(--ink);
    font-size: 16px;
    margin-top: 2px
}

.sfui .status-card__desc {
    font-size: 14px;
    color: var(--ink-2);
    margin-top: 3px;
    line-height: 1.5
}

.sfui .status-card__tx {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700
}

.sfui .status-card__tx a svg {
    width: 14px;
    height: 14px;
    display: inline;
    vertical-align: -2px;
    margin-left: 4px
}

.sfui .claim-total {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-sm)
}

.sfui .claim-total__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--claim-soft);
    border-bottom: 1px solid var(--border)
}

.sfui .claim-total__head-label {
    font-weight: 800;
    color: var(--ink);
    font-size: 15px
}

.sfui .claim-total__tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end
}

.sfui .claim-total__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 14px 20px 2px
}

.sfui .claim-total__rows {
    padding: 8px 16px 16px;
    display: grid;
    gap: 10px
}

.sfui .claim-addr {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-sunk)
}

.sfui .claim-addr__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px
}

.sfui .claim-addr__ids {
    min-width: 0;
    flex: 1
}

.sfui .claim-addr__id {
    display: block;
    width: 100%;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-2);
    white-space: normal;
    overflow: visible;
    word-break: break-all
}

.sfui .claim-addr__keyhash {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3);
    word-break: break-all
}

.sfui .claim-addr__tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px
}

.sfui .state-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1
}

.sfui .state-chip--toclaim {
    color: var(--brand-strong);
    background: var(--brand-soft)
}

.sfui .state-chip--submitted {
    color: var(--warn);
    background: var(--warn-soft)
}

.sfui .state-chip--refunded {
    color: var(--claim);
    background: var(--claim-soft)
}

.sfui .state-chip--noclaim {
    color: var(--ink-3);
    background: var(--surface-sunk);
    box-shadow: inset 0 0 0 1px var(--border)
}

.sfui .state-chip--error,
.sfui .state-chip--attacker {
    color: var(--danger);
    background: var(--danger-soft)
}

.sfui .state-chip--whitehat {
    color: var(--claim);
    background: var(--claim-soft)
}

.sfui .state-chip--friend,
.sfui .state-chip--mixed {
    color: var(--ink-3);
    background: var(--surface-sunk);
    box-shadow: inset 0 0 0 1px var(--border)
}

.sfui .claim-addr__none {
    margin-top: 9px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--ink-3)
}

.sfui .claim-addr__nft {
    margin-top: 9px;
    font-size: 12.5px;
    color: var(--ink-2)
}

.sfui .claim-addr__nft ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.sfui .claim-addr--noclaim {
    opacity: .82
}

.sfui .claim-none {
    margin-top: 24px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-sm)
}

.sfui .claim-none__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    cursor: pointer;
    list-style: none
}

.sfui .claim-none__summary::-webkit-details-marker {
    display: none
}

.sfui .claim-none[open] .claim-none__summary {
    border-bottom: 1px solid var(--border)
}

.sfui .claim-none__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-2);
    background: var(--surface-sunk)
}

.sfui .terms-doc {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-sunk);
    padding: 18px 22px;
    max-height: 56vh;
    overflow-y: auto;
    overscroll-behavior: contain
}

.sfui .terms-doc__title {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin: 2px 0 4px
}

.sfui .terms-doc__eff {
    font-size: 12.5px;
    color: var(--ink-3);
    margin: 0 0 14px
}

.sfui .terms-doc h4 {
    font-size: 14.5px;
    color: var(--ink);
    margin: 18px 0 5px
}

.sfui .terms-doc p {
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--ink-2);
    margin: 0 0 8px
}

.sfui .terms-doc strong {
    color: var(--ink)
}

.sfui .terms-doc ul {
    margin: 0 0 8px;
    padding-left: 22px
}

.sfui .terms-doc li {
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--ink-2);
    margin: 0 0 4px
}

.sfui .terms-doc__end {
    text-align: center;
    color: var(--ink-3);
    font-weight: 600;
    margin-top: 16px
}

.sfui .pstep {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px
}

.sfui .pstep__ic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-strong);
    box-sizing: border-box;
    color: #fff
}

.sfui .pstep__ic svg {
    visibility: hidden
}

.sfui .pstep[data-state=active] .pstep__ic {
    border-color: var(--brand);
    border-top-color: transparent;
    animation: sfui-spin .8s linear infinite
}

.sfui .pstep[data-state=done] .pstep__ic {
    background: var(--claim);
    border-color: var(--claim)
}

.sfui .pstep[data-state=done] .pstep__ic svg {
    width: 13px;
    height: 13px;
    visibility: visible
}

.sfui .pstep[data-state=error] .pstep__ic {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 12px;
    font-weight: 800;
    animation: none
}

.sfui .pstep[data-state=error] .pstep__label {
    color: var(--danger)
}

.sfui .pstep__label {
    font-weight: 600;
    color: var(--ink-3)
}

.sfui .pstep[data-state=active] .pstep__label,
.sfui .pstep[data-state=done] .pstep__label {
    color: var(--ink)
}

.sfui .pgroup-label {
    font-weight: 700;
    color: var(--ink);
    margin: 18px 0 6px
}

.sfui .paddr {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-sunk);
    margin-top: 8px
}

.sfui .paddr[data-state=active] {
    border-color: var(--brand);
    background: var(--brand-softer)
}

.sfui .paddr__ring {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--border-strong);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

.sfui .paddr__ring svg {
    visibility: hidden
}

.sfui .paddr[data-state=active] .paddr__ring {
    border-color: var(--brand);
    border-top-color: transparent;
    animation: sfui-spin .8s linear infinite
}

.sfui .paddr[data-state=done] .paddr__ring {
    background: var(--claim);
    border-color: var(--claim)
}

.sfui .paddr[data-state=done] .paddr__ring svg {
    width: 12px;
    height: 12px;
    visibility: visible
}

.sfui .paddr__id {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sfui .paddr[data-state=active] .paddr__id,
.sfui .paddr[data-state=done] .paddr__id {
    color: var(--ink)
}

.sfui .paddr[data-state=error] {
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: var(--danger-soft)
}

.sfui .paddr[data-state=error] .paddr__ring {
    border-color: var(--danger);
    color: var(--danger);
    font-size: 11px;
    font-weight: 800;
    animation: none
}

.sfui .paddr[data-state=error] .paddr__id {
    color: var(--danger)
}

.sfui .paddr__pct {
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    flex-shrink: 0
}

.sfui .spinner-sm {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--brand-soft);
    border-top-color: var(--brand);
    animation: sfui-spin .8s linear infinite;
    display: inline-block;
    flex-shrink: 0
}

@media(prefers-reduced-motion:reduce) {
    .sfui .spinner-sm {
        animation-duration: 2.4s
    }
}

.sfui a.wallet-opt {
    text-decoration: none
}

.sfui .wallet-opt__body {
    flex: 1;
    min-width: 0
}

.sfui .wallet-opt__desc {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-3);
    line-height: 1.5;
    margin-top: 2px
}

.sfui .wallet-opt__chev {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--ink-3)
}

.sfui .wallet-opt--disabled {
    opacity: .55;
    cursor: not-allowed
}

.sfui .wallet-opt--disabled:hover {
    border-color: var(--border);
    background: var(--surface)
}

.sfui .status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-2)
}

.sfui .modal--terms {
    max-width: 680px
}

.sfui .terms-scroll-wrap {
    position: relative
}

.sfui .terms-scroll {
    max-height: min(48vh, 460px);
    overflow-y: auto;
    border-radius: var(--r)
}

.sfui .terms-scroll:focus-visible {
    box-shadow: var(--ring)
}

.sfui .terms-scroll-cue {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 28px 12px 10px;
    border-radius: 0 0 var(--r) var(--r);
    background: linear-gradient(to top, var(--surface-sunk) 34%, color-mix(in srgb, var(--surface-sunk) 78%, transparent) 68%, transparent);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    pointer-events: none
}

.sfui .terms-scroll-cue svg {
    width: 22px;
    height: 22px;
    color: var(--brand-strong);
    animation: sfui-scrollCue 1.35s ease-in-out infinite
}

@keyframes sfui-scrollCue {

    0%,
    to {
        transform: translateY(0);
        opacity: 1
    }

    50% {
        transform: translateY(6px);
        opacity: .55
    }
}

@media(prefers-reduced-motion:reduce) {
    .sfui .terms-scroll-cue svg {
        animation: none
    }
}

.sfui .msg-slot {
    min-height: 24px;
    margin-top: 12px
}

.sfui .msg-slot .field__error {
    margin-top: 0
}

.sfui .msg-slot .msg-slot__ok {
    display: block;
    font-weight: 600;
    color: var(--claim);
    font-size: 14.5px;
    margin: 0
}

.sfui .fade-in {
    animation: sfui-fadeUp .3s ease
}

@media(prefers-reduced-motion:reduce) {
    .sfui .fade-in {
        animation: none
    }
}

.sfui .input-affix {
    position: relative
}

.sfui .input-affix .input {
    padding-right: 52px
}

.sfui .input-affix__btn {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 34px;
    height: 34px;
    border-radius: var(--r-xs);
    border: 0;
    background: transparent;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .15s, background .15s
}

.sfui .input-affix__btn:hover {
    color: var(--ink);
    background: var(--surface-sunk)
}

.sfui .input-affix__btn svg {
    width: 20px;
    height: 20px
}

.sfui .mt-0 {
    margin-top: 0
}

.sfui .mt-8 {
    margin-top: 8px
}

.sfui .mt-16 {
    margin-top: 16px
}

.sfui .mt-24 {
    margin-top: 24px
}

.sfui .mt-32 {
    margin-top: 32px
}

.sfui .mb-8 {
    margin-bottom: 8px
}

.sfui .mb-16 {
    margin-bottom: 16px
}

.sfui .mb-24 {
    margin-bottom: 24px
}

.sfui .hide {
    display: none !important
}

.sfui .text-center {
    text-align: center
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(https://secondfi.io/fonts/inter-vietnamese-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(https://secondfi.io/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: Inter;
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(https://secondfi.io/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(https://secondfi.io/fonts/source-serif-4-vietnamese-opsz-normal.woff2) format("woff2-variations");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(https://secondfi.io/fonts/source-serif-4-latin-ext-opsz-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Source Serif 4";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(https://secondfi.io/fonts/source-serif-4-latin-opsz-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Source Serif 4";
    font-style: italic;
    font-display: swap;
    font-weight: 200 900;
    src: url(https://secondfi.io/fonts/source-serif-4-vietnamese-opsz-italic.woff2) format("woff2-variations");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: "Source Serif 4";
    font-style: italic;
    font-display: swap;
    font-weight: 200 900;
    src: url(https://secondfi.io/fonts/source-serif-4-latin-ext-opsz-italic.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Source Serif 4";
    font-style: italic;
    font-display: swap;
    font-weight: 200 900;
    src: url(https://secondfi.io/fonts/source-serif-4-latin-opsz-italic.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: JetBrains Mono;
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url(https://secondfi.io/fonts/jetbrains-mono-vietnamese-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: JetBrains Mono;
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url(https://secondfi.io/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: JetBrains Mono;
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url(https://secondfi.io/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

:root {
    --trust: oklch(.45 .2 264);
    --trust-hover: oklch(.4 .22 264);
    --trust-light: oklch(.94 .02 264);
    --trust-ring: oklch(.45 .2 264 / .25);
    --surface: oklch(.99 .003 80);
    --surface-alt: oklch(.97 .004 80);
    --border: oklch(.9 .006 80);
    --text-primary: oklch(.2 .015 250);
    --text-secondary: oklch(.48 .015 250);
    --text-muted: oklch(.58 .01 250);
    --success: oklch(.42 .15 145);
    --success-bg: oklch(.97 .025 145);
    --success-border: oklch(.88 .06 145);
    --warn: oklch(.52 .18 55);
    --warn-bg: oklch(.97 .03 80);
    --warn-border: oklch(.85 .1 60);
    --danger: oklch(.55 .22 27);
    --danger-bg: oklch(.97 .02 27);
    --danger-border: oklch(.88 .15 27)
}

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

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

body {
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    background: var(--surface-alt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

:focus-visible {
    outline: 3px solid var(--trust);
    outline-offset: 3px;
    border-radius: 4px
}

h1,
h2,
h3 {
    font-family: "Source Serif 4", Georgia, serif;
    color: var(--text-primary);
    line-height: 1.25
}

code,
pre,
.mono {
    font-family: JetBrains Mono, Fira Code, monospace;
    font-size: .88em
}

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

button:active:not(:disabled) {
    transform: scale(.97);
    transition: transform .12s ease
}

@keyframes step-enter {
    0% {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

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

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 var(--trust-ring)
    }

    70% {
        box-shadow: 0 0 0 8px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes shimmer-slide {
    0% {
        transform: translate(-100%)
    }

    to {
        transform: translate(250%)
    }
}

@keyframes address-glow {

    0%,
    to {
        border-color: var(--border);
        box-shadow: 0 0 0 0 transparent
    }

    50% {
        border-color: var(--warn-border);
        box-shadow: 0 0 12px oklch(.52 .18 55 / .15)
    }
}

.address-pulse {
    animation: address-glow 3s ease-in-out infinite
}

@keyframes milestone-enter {
    0% {
        opacity: 0;
        transform: translate(-12px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes check-draw {
    0% {
        stroke-dashoffset: 24
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes circle-fill {
    0% {
        transform: scale(.6);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

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

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

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

.sr-only:focus,
.sr-only:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal
}

.spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .65s linear infinite;
    vertical-align: -.15em
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: #11171d8c;
    backdrop-filter: blur(2px)
}

.modal {
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75rem;
    border-radius: 16px;
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 20px 60px #11171d2e
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem
}

.modal__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: "Source Serif 4", Georgia, serif;
    color: var(--text-primary)
}

.modal__close {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s
}

.modal__close:hover {
    background: var(--surface-alt);
    color: var(--text-primary)
}

.modal__hint {
    margin: 0 0 1rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text-secondary)
}

.modal__input {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    font: inherit;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    transition: border-color .15s
}

.modal__input:focus {
    outline: none;
    border-color: var(--trust);
    box-shadow: 0 0 0 3px var(--trust-ring)
}

.modal__result {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: center
}

.modal__qr {
    display: block;
    width: 288px;
    max-width: 100%;
    height: auto;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--border)
}

.scanner-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow: hidden
}

@media(min-width:640px) {
    .scanner-panel {
        flex-direction: row;
        align-items: stretch
    }

    .scanner-panel .scanner {
        flex: 1 1 55%;
        min-width: 0
    }

    .scanner-hints {
        flex: 1 1 45%;
        min-width: 0
    }
}

.scanner-hints {
    padding: .25rem .5rem
}

.scanner-hints__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 .75rem
}

.scanner-hints__list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--text-secondary)
}

.scanner-hints__list li+li {
    margin-top: .5rem
}

.scanner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem
}

.scanner__viewport {
    position: relative;
    width: 100%;
    max-width: 360px;
    align-self: stretch;
    margin-inline: auto
}

.scanner__video {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #000;
    border: 1.5px solid var(--border);
    border-radius: 12px
}

.scanner__freeze {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.scanner__freeze-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
    transform: scale(1.08)
}

.scanner__freeze-scrim {
    position: absolute;
    inset: 0;
    background: #00000059
}

.scanner__freeze-btn {
    position: relative;
    z-index: 1
}

.scanner__btn {
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: .7rem 1.5rem;
    color: #fff;
    background: var(--trust);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: background .15s, transform .12s
}

.scanner__btn:hover:not(:disabled) {
    background: var(--trust-hover)
}

.scanner__btn:disabled {
    opacity: .55;
    cursor: default
}

.scanner__btn--secondary {
    color: var(--text-primary);
    background: var(--surface);
    border: 1.5px solid var(--border)
}

.scanner__btn--secondary:hover:not(:disabled) {
    background: var(--trust-light);
    border-color: var(--trust);
    color: var(--trust)
}

.scanner__error {
    margin: 0;
    color: var(--danger);
    font-size: .9rem
}

.address-block {
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--success-border);
    border-radius: 12px;
    background: var(--success-bg)
}

.address-block__label {
    display: block;
    margin-bottom: .4rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--success)
}

.address-block__value {
    display: block;
    font-family: JetBrains Mono, monospace;
    font-size: .85rem;
    line-height: 1.55;
    word-break: break-all;
    user-select: all;
    color: var(--text-primary)
}

.validity {
    font-size: .95rem;
    font-weight: 600
}

.validity--valid {
    color: var(--success)
}

.validity--invalid {
    color: var(--danger)
}

.destination-picker {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.destination-form__heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary)
}

.destination-picker__display {
    padding: .85rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: .3rem
}

.destination-picker__label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em
}

.destination-picker__value {
    font-family: JetBrains Mono, monospace;
    font-size: .85rem;
    word-break: break-all;
    color: var(--text-primary)
}

.destination-picker__placeholder {
    font-size: .9rem;
    color: var(--text-muted);
    font-style: italic
}

.destination-picker__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem
}

.destination-form__input {
    box-sizing: border-box;
    width: 100%;
    padding: .75rem 1rem;
    font-family: JetBrains Mono, monospace;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    transition: border-color .15s
}

.destination-form__input:focus {
    outline: none;
    border-color: var(--trust);
    box-shadow: 0 0 0 3px var(--trust-ring)
}

.destination-form__error {
    font-size: .9rem;
    color: var(--danger)
}

.destination-form__ok {
    font-size: .9rem;
    color: var(--success)
}

.proof-progress {
    font-size: .95rem
}

.proof-progress__list {
    margin: 0;
    padding: 0;
    list-style: none
}

.proof-progress__list--nested {
    margin: .3rem 0 .2rem 1.5rem
}

.proof-progress__item {
    padding: .3rem 0
}

.proof-progress__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .5rem
}

.proof-progress__mark {
    flex-shrink: 0;
    width: 1.2rem;
    font-family: JetBrains Mono, monospace;
    font-weight: 700;
    text-align: center
}

.proof-progress__item--done .proof-progress__mark {
    color: var(--success)
}

.proof-progress__item--active .proof-progress__mark {
    color: var(--trust)
}

.proof-progress__item--error .proof-progress__mark {
    color: var(--danger)
}

.proof-progress__item--pending .proof-progress__label {
    opacity: .5
}

.proof-progress__item--done .proof-progress__label {
    opacity: .8
}

.proof-progress__item--total {
    margin-top: .5rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border)
}

.proof-progress__item--total .proof-progress__label {
    font-weight: 700
}

.proof-progress__frac {
    margin-left: auto;
    font-family: JetBrains Mono, monospace;
    font-size: .8rem;
    font-weight: 700;
    color: var(--trust)
}

.entitlement-breakdown {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: JetBrains Mono, monospace;
    font-size: .85rem;
    line-height: 1.6
}

.entitlement-breakdown__item {
    padding: .6rem 0;
    border-bottom: 1px solid var(--border)
}

.entitlement-breakdown__header {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .75rem;
    justify-content: space-between
}

.entitlement-breakdown__path {
    word-break: break-all
}

.entitlement-breakdown__txs {
    margin: .35rem 0 0 .75rem;
    padding: 0;
    list-style: none
}

.entitlement-breakdown__tx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .15rem 0
}

.entitlement-breakdown__tx-policy {
    font-size: .75rem;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: .02em
}

.entitlement-breakdown__tx-policy--attacker {
    color: var(--danger)
}

.entitlement-breakdown__tx-policy--whitehat {
    color: var(--success)
}

.entitlement-breakdown__tx-policy--friend,
.entitlement-breakdown__tx-policy--mixed {
    color: var(--text-muted)
}

.entitlement-breakdown__tx-link,
.entitlement-breakdown__asset-link {
    color: var(--trust);
    text-decoration: none;
    font-size: .8rem;
    word-break: break-all;
    min-width: 0
}

.entitlement-breakdown__tx-link:hover,
.entitlement-breakdown__asset-link:hover {
    text-decoration: underline
}

.asset-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%
}

.asset-list__row {
    display: flex;
    align-items: center;
    gap: .75rem
}

.asset-list__icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.asset-list__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
    color: var(--text-primary)
}

.asset-list__amount {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--text-primary)
}

.mnemonic-wrap {
    position: relative
}

.mnemonic-input,
.mnemonic-hl {
    box-sizing: border-box;
    width: 100%;
    padding: .85rem 1rem;
    font-family: JetBrains Mono, monospace;
    font-size: 1rem;
    line-height: 1.7;
    border: 1.5px solid transparent;
    border-radius: 10px;
    white-space: pre-wrap;
    overflow-wrap: break-word
}

.mnemonic-hl {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    background: var(--surface)
}

.mnemonic-hl__good {
    color: var(--success)
}

.mnemonic-hl__bad {
    color: var(--danger)
}

.mnemonic-input {
    position: relative;
    z-index: 1;
    resize: vertical;
    color: transparent;
    caret-color: var(--trust);
    background: transparent;
    border-color: var(--border);
    transition: border-color .15s
}

.mnemonic-input::placeholder {
    color: var(--text-muted)
}

.mnemonic-input:focus {
    outline: none;
    border-color: var(--trust);
    box-shadow: 0 0 0 3px var(--trust-ring)
}

.claim-policy-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--danger-border);
    border-radius: 12px;
    background: var(--danger-bg);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .15s
}

.claim-policy-checkbox input {
    margin: .2rem 0 0;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--trust)
}

.claim-policy-checkbox--locked {
    cursor: default;
    opacity: .85
}

.claim-policy-checkbox--warn {
    border-color: var(--warn-border);
    background: var(--warn-bg)
}

.mobile-only {
    display: block
}

.desktop-only {
    display: none
}

@media(min-width:768px) {
    .mobile-only {
        display: none
    }

    .desktop-only {
        display: block
    }
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    padding: .5rem 1rem;
    border-radius: .5rem;
    background: var(--trust);
    color: #fff;
    font-weight: 600;
    text-decoration: none
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    overflow: visible
}

.footer-link {
    font-size: .875rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    transition: color .2s
}

.footer-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--trust);
    text-decoration: none;
    margin-bottom: 1.25rem
}

.back-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px
}

html,
body,
#root {
    margin: 0;
    min-height: 100vh
}