@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800;900&display=swap";

:root {
    --font-sans: "Outfit", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --caret-width: 2px;
    --caret-height: 1.75em;
    --caret-underline-width: .92em;
    --caret-underline-height: 2px;
    --typing-font-size: 1.55rem;
    --typing-line-height: 2.45rem;
    --typing-word-min-height: 5.5rem;
    --typing-word-gap-x: .5rem;
    --typing-word-gap-y: .25rem;
}

.theme-page {
    /* background: var(--bg); */
    /* color: var(--text) */
}

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

.theme-text-soft {
    color: var(--muted)
}

.theme-muted {
    color: var(--muted-dark)
}

.theme-accent {
    color: var(--blue)
}

.theme-divider {
    color: var(--border)
}

.theme-layout {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex
}

.theme-card-wrap {
    width: 100%;
    /* max-width: 860px; */
    position: relative
}

.theme-card-inner {
    /* padding: 32px 36px; */
    position: relative;
    /* overflow: hidden */
}

.theme-test-card {
    cursor: text;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 860px;
    padding: 28px 32px;
    transition: border-color .25s, box-shadow .25s;
    display: flex;
    position: relative;
    overflow: hidden
}

.theme-stack {
    z-index: 1;
    flex-direction: column;
    gap: 16px;
    display: flex;
    position: relative
}

.theme-hint {
    background: var(--surface);
    border-radius: 999px;
    padding: 6px 10px
}

@supports (color:color-mix(in lab, red, red)) {
    .theme-hint {
        background: color-mix(in oklab, var(--surface) 92%, transparent)
    }
}

.theme-hint {
    border: 1px solid var(--border);
    color: var(--muted);
    letter-spacing: .06em;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-weight: 700
}

.theme-header-row {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    display: flex
}

.theme-header-meta {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex
}

.theme-header-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600
}

.theme-header-value {
    color: var(--text);
    ;
    font-family: JetBrains Mono, monospace;
    font-size: 12px;
    font-weight: 600
}

.theme-header-accent {
    color: var(--blue);
    font-family: JetBrains Mono, monospace;
    font-size: 12px;
    font-weight: 700
}

.theme-header-inc {
    color: var(--muted-dark);
    font-size: 11px
}

.theme-live-row {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    display: flex
}

.theme-live-group {
    flex-wrap: wrap;
    gap: 10px;
    display: flex
}

.live-stat {
    background: var(--surface);
    border-radius: 8px;
    align-items: baseline;
    gap: 6px;
    padding: 4px 12px;
    display: flex
}

@supports (color:color-mix(in lab, red, red)) {
    .live-stat {
        background: color-mix(in oklab, var(--surface) 90%, var(--blue) 10%)
    }
}

.live-stat {
    border: 1px solid var(--border)
}

.live-stat__label {
    color: var(--muted-dark);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700
}

.live-stat__value {
    color: var(--blue);
    font-family: JetBrains Mono, monospace;
    font-size: 22px;
    font-weight: 800;
    line-height: 1
}

.live-stat__value--pause {
    color: var(--red)
}

.live-stat__value--target {
    color: var(--yellow)
}

.theme-pause-hint {
    color: var(--red);
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    animation: .6s step-end infinite legendaryBlink;
    display: flex
}

.theme-footer-text {
    color: var(--color-ink);
    align-items: center;
    gap: 6px;
    font-size: 11px;
    display: flex
}

.theme-footer-alert {
    color: var(--red);
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    display: flex
}

.theme-footer-dot {
    background: var(--red);
    border-radius: 50%;
    width: 5px;
    height: 5px;
    animation: 1s step-end infinite legendaryBlink;
    display: inline-block
}

.typing-root {
    font-family: Outfit, sans-serif
}

.typing-dark-card {
    /* background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 4px; */
    transition: border-color .25s, box-shadow .25s, background .25s
}

.typing-dark-card.focus-within-glow:focus-within {
    border-color: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .typing-dark-card.focus-within-glow:focus-within {
        border-color: color-mix(in oklab, var(--blue) 45%, var(--border))
    }
}

.typing-dark-card.focus-within-glow:focus-within {
    box-shadow: var(--glow)
}

.words-dark {
    background: var(--surface) !important
}

@supports (color:color-mix(in lab, red, red)) {
    .words-dark {
        background: color-mix(in oklab, var(--surface) 94%, transparent) !important
    }
}

.words-dark {
    transition: box-shadow .2s;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important
}

.words-container {
    height: fit-content;
    overflow: hidden
}

#words {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: var(--typing-font-size);
    line-height: var(--typing-line-height);
    max-height: calc(var(--typing-line-height) * 2 + var(--typing-word-gap-y) + 12px);
    gap: var(--typing-word-gap-y) var(--typing-word-gap-x);
    padding-block: 6px;
    overflow: hidden
}

#words .word {
    font-size: inherit;
    line-height: inherit
}

.pause-ring {
    box-shadow: 0 0 0 2px var(--red) !important
}

@supports (color:color-mix(in lab, red, red)) {
    .pause-ring {
        box-shadow: 0 0 0 2px color-mix(in oklab, var(--red) 50%, transparent) !important
    }
}

.word {
    display: inline
}

.word span {
    color: var(--color-ink);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

.word.typed span {
    opacity: .55
}

.word span.correct {
    color: var(--muted)
}

.word span.incorrect {
    color: var(--red);
    text-decoration: underline;
    -webkit-text-decoration-color: var(--red);
    text-decoration-color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .word span.incorrect {
        -webkit-text-decoration-color: color-mix(in oklab, var(--red) 50%, transparent);
        text-decoration-color: color-mix(in oklab, var(--red) 50%, transparent)
    }
}

.word span.extra {
    color: var(--orange)
}

.word_section .word span.correct {
    color: var(--green);
    background: var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .word_section .word span.correct {
        background: color-mix(in oklab, var(--green) 12%, transparent)
    }
}

.word_section .word span.correct {
    border-radius: 2px
}

.word_section .word span.incorrect {
    color: var(--red);
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .word_section .word span.incorrect {
        background: color-mix(in oklab, var(--red) 12%, transparent)
    }
}

.word_section .word span.incorrect {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--red);
    text-decoration-color: var(--red);
    border-radius: 2px
}

@supports (color:color-mix(in lab, red, red)) {
    .word_section .word span.incorrect {
        -webkit-text-decoration-color: color-mix(in oklab, var(--red) 55%, transparent);
        text-decoration-color: color-mix(in oklab, var(--red) 55%, transparent)
    }
}

.word_section .word span.extra {
    color: var(--orange);
    background: var(--orange)
}

@supports (color:color-mix(in lab, red, red)) {
    .word_section .word span.extra {
        background: color-mix(in oklab, var(--orange) 10%, transparent)
    }
}

.word_section .word span.extra {
    border-radius: 2px
}

.word.error>span:not(.correct) {
    -webkit-text-decoration-color: var(--red);
    text-decoration-color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .word.error>span:not(.correct) {
        -webkit-text-decoration-color: color-mix(in oklab, var(--red) 30%, transparent);
        text-decoration-color: color-mix(in oklab, var(--red) 30%, transparent)
    }
}

#caret,
#pacer-caret {
    z-index: 10;
    pointer-events: none;
    will-change: transform;
    box-shadow: 0 0 14px var(--blue);
    border-radius: 9999px;
    transition: transform 60ms linear, opacity .12s, background-color .12s, border-color .12s, box-shadow .12s;
    position: absolute
}

@supports (color:color-mix(in lab, red, red)) {

    #caret,
    #pacer-caret {
        box-shadow: 0 0 14px color-mix(in oklab, var(--blue) 35%, transparent)
    }
}

#caret,
#pacer-caret {
    width: var(--caret-width);
    height: var(--caret-height)
}

#caret {
    background: var(--blue)
}

#pacer-caret {
    z-index: 9;
    background: var(--blue);
    filter: hue-rotate(45deg)
}

#caret.caret--line,
#pacer-caret.caret--line {
    width: var(--caret-width);
    height: var(--caret-height)
}

#caret.caret--underline,
#pacer-caret.caret--underline {
    width: var(--caret-underline-width);
    height: var(--caret-underline-height);
    box-shadow: 0 0 10px var(--blue);
    border-radius: 9999px;
    top: 6px
}

@supports (color:color-mix(in lab, red, red)) {

    #caret.caret--underline,
    #pacer-caret.caret--underline {
        box-shadow: 0 0 10px color-mix(in oklab, var(--blue) 35%, transparent)
    }
}

#caret.caret--error,
#pacer-caret.caret--error {
    background: var(--red);
    box-shadow: 0 0 8px var(--red);
    border-color: #0000
}

@supports (color:color-mix(in lab, red, red)) {

    #caret.caret--error,
    #pacer-caret.caret--error {
        box-shadow: 0 0 8px color-mix(in oklab, var(--red) 65%, transparent)
    }
}

.word_section #caret {
    transition: transform 50ms, opacity .12s, background-color .12s, border-color .12s, box-shadow .12s
}

@keyframes legendaryBlink {

    0%,
    49% {
        opacity: 1
    }

    50%,
    to {
        opacity: 0
    }
}

@keyframes blink {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

.blink {
    animation: 1s step-end infinite legendaryBlink
}

.word_section #caret.blink {
    animation: 1s step-end infinite blink
}

.settings-btn-dark {
    cursor: pointer;
    color: var(--color-ink);
    background: 0 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    transition: all .18s
}

.settings-btn-dark:hover {
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-btn-dark:hover {
        background: color-mix(in oklab, var(--blue) 12%, transparent)
    }
}

.settings-btn-dark:hover {
    border-color: var(--active-line);
    color: var(--blue)
}

.settings-body {
    max-height: 364px
}

.restart-btn-dark {
    cursor: pointer;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: var(--active-line);
    color: var(--blue);
    border: 1px solid var(--active-line);
    border-radius: 10px;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-family: Outfit, sans-serif;
    font-size: 12px;
    font-weight: 700;
    transition: all .18s;
    display: inline-flex
}

.restart-btn-dark:hover {
    border-color: var(--blue);
    transform: translateY(-1px)
}

.restart-btn-dark:active {
    transform: scale(.97)
}

.popup-dark {
    cursor: pointer;
    letter-spacing: .04em;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    background: var(--blue) !important;
    border: 1px solid var(--active-line) !important;
    color: var(--bg-soft) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important
}

.kbd-dark {
    background: var(--surface);
    border-radius: 5px;
    padding: 2px 6px
}

@supports (color:color-mix(in lab, red, red)) {
    .kbd-dark {
        background: color-mix(in oklab, var(--surface) 92%, var(--blue) 8%)
    }
}

.kbd-dark {
    border: 1px solid var(--border);
    color: var(--color-ink);
    font-family: JetBrains Mono, monospace;
    font-size: 10px
}

.kbd-dark--error {
    color: var(--red) !important;
    border-color: var(--red) !important
}

@supports (color:color-mix(in lab, red, red)) {
    .kbd-dark--error {
        border-color: color-mix(in oklab, var(--red) 35%, transparent) !important
    }
}

.kbd-dark--error {
    background: var(--red) !important
}

@supports (color:color-mix(in lab, red, red)) {
    .kbd-dark--error {
        background: color-mix(in oklab, var(--red) 12%, transparent) !important
    }
}

.tag-badge {
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 700
}

.tag-badge--blind {
    background: var(--purple)
}

@supports (color:color-mix(in lab, red, red)) {
    .tag-badge--blind {
        background: color-mix(in oklab, var(--purple) 8%, transparent)
    }
}

.tag-badge--blind {
    color: var(--purple);
    border: 1px solid var(--purple)
}

@supports (color:color-mix(in lab, red, red)) {
    .tag-badge--blind {
        border: 1px solid color-mix(in oklab, var(--purple) 20%, transparent)
    }
}

.tag-badge--warn {
    background: var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .tag-badge--warn {
        background: color-mix(in oklab, var(--yellow) 8%, transparent)
    }
}

.tag-badge--warn {
    color: var(--yellow);
    border: 1px solid var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .tag-badge--warn {
        border: 1px solid color-mix(in oklab, var(--yellow) 20%, transparent)
    }
}

.tag-badge--ok {
    background: var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .tag-badge--ok {
        background: color-mix(in oklab, var(--green) 8%, transparent)
    }
}

.tag-badge--ok {
    color: var(--green);
    border: 1px solid var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .tag-badge--ok {
        border: 1px solid color-mix(in oklab, var(--green) 20%, transparent)
    }
}

.tag-badge--error {
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .tag-badge--error {
        background: color-mix(in oklab, var(--red) 8%, transparent)
    }
}

.tag-badge--error {
    color: var(--red);
    border: 1px solid var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .tag-badge--error {
        border: 1px solid color-mix(in oklab, var(--red) 20%, transparent)
    }
}

.info-dot {
    background: var(--blue);
    width: 5px;
    height: 5px;
    box-shadow: 0 0 6px var(--blue);
    border-radius: 50%;
    display: inline-block
}

.noise-overlay {
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: .018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.settings-backdrop {
    background: var(--bg)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-backdrop {
        background: color-mix(in oklab, var(--bg) 88%, transparent)
    }
}

.settings-backdrop {
    -webkit-backdrop-filter: blur(16px)saturate(1.08);
    backdrop-filter: blur(16px)saturate(1.08)
}

[data-settings-panel].settings-panel,
.settings-panel {
    background: var(--surface)
}

@supports (color:color-mix(in lab, red, red)) {

    [data-settings-panel].settings-panel,
    .settings-panel {
        background: color-mix(in oklab, var(--surface) 96%, white 4%)
    }
}

[data-settings-panel].settings-panel,
.settings-panel {
    border: 1px solid var(--border)
}

@supports (color:color-mix(in lab, red, red)) {

    [data-settings-panel].settings-panel,
    .settings-panel {
        border: 1px solid color-mix(in oklab, var(--border) 90%, transparent)
    }
}

[data-settings-panel].settings-panel,
.settings-panel {
    color: var(--text);
    box-shadow: 0 24px 70px #0d19321a, 0 2px 10px #0d19320a
}

.settings-header,
.settings-footer,
.settings-tabs {
    background: var(--surface)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-header,
    .settings-footer,
    .settings-tabs {
        background: color-mix(in oklab, var(--surface) 94%, var(--bg) 6%)
    }
}

.settings-header,
.settings-footer,
.settings-tabs {
    border-color: var(--border) !important
}

.settings-footer,
.settings-tabs {
    background: var(--bg)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-footer,
    .settings-tabs {
        background: color-mix(in oklab, var(--bg) 45%, var(--surface) 55%)
    }
}

.settings-title {
    color: var(--text);
    letter-spacing: -.02em;
    font-weight: 800
}

.settings-subtitle,
.settings-text-muted,
.settings-label {
    color: var(--muted)
}

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

.settings-accent {
    color: var(--blue)
}

.settings-danger {
    color: var(--red)
}

.settings-success {
    color: var(--green)
}

.settings-warning {
    color: var(--yellow)
}

.settings-tab {
    color: var(--muted-dark);
    transition: color .15s, border-color .15s, background .15s
}

.settings-tab:hover {
    color: var(--text)
}

.settings-tab.is-active {
    color: var(--blue);
    border-color: var(--blue);
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-tab.is-active {
        background: color-mix(in oklab, var(--blue) 7%, transparent)
    }
}

.settings-close-btn,
.settings-icon-btn {
    color: var(--muted-dark)
}

.settings-close-btn:hover,
.settings-icon-btn:hover,
.settings-icon-btn.is-active {
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-close-btn:hover,
    .settings-icon-btn:hover,
    .settings-icon-btn.is-active {
        background: color-mix(in oklab, var(--blue) 8%, transparent)
    }
}

.settings-close-btn:hover,
.settings-icon-btn:hover,
.settings-icon-btn.is-active {
    color: var(--blue)
}

.settings-icon-btn--danger:hover {
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-icon-btn--danger:hover {
        background: color-mix(in oklab, var(--red) 10%, transparent)
    }
}

.settings-icon-btn--danger:hover {
    color: var(--red)
}

.settings-toggle[aria-checked=true] {
    background: var(--blue)
}

.settings-toggle[aria-checked=false] {
    background: var(--border)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-toggle[aria-checked=false] {
        background: color-mix(in oklab, var(--border) 78%, var(--surface))
    }
}

.settings-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-toggle:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 18%, transparent)
    }
}

.settings-toggle-thumb {
    background: var(--surface)
}

.settings-row--indent {
    border-color: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-row--indent {
        border-color: color-mix(in oklab, var(--blue) 18%, transparent)
    }
}

.settings-list {
    border-color: var(--border)
}

.settings-list>*+* {
    border-top: 1px solid var(--border)
}

.settings-chip,
.settings-picker-card,
.settings-ghost-btn,
.settings-field,
.settings-subpanel,
.settings-collection-item {
    background: var(--bg)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-chip,
    .settings-picker-card,
    .settings-ghost-btn,
    .settings-field,
    .settings-subpanel,
    .settings-collection-item {
        background: color-mix(in oklab, var(--bg) 35%, var(--surface))
    }
}

.settings-chip,
.settings-picker-card,
.settings-ghost-btn,
.settings-field,
.settings-subpanel,
.settings-collection-item {
    color: var(--muted);
    transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
    border: 1px solid var(--border) !important
}

.settings-chip:hover,
.settings-picker-card:hover,
.settings-ghost-btn:hover,
.settings-collection-item:hover {
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-chip:hover,
    .settings-picker-card:hover,
    .settings-ghost-btn:hover,
    .settings-collection-item:hover {
        background: color-mix(in oklab, var(--blue) 5%, var(--surface))
    }
}

.settings-chip:hover,
.settings-picker-card:hover,
.settings-ghost-btn:hover,
.settings-collection-item:hover {
    border-color: var(--blue) !important
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-chip:hover,
    .settings-picker-card:hover,
    .settings-ghost-btn:hover,
    .settings-collection-item:hover {
        border-color: color-mix(in oklab, var(--blue) 22%, var(--border)) !important
    }
}

.settings-chip:hover,
.settings-picker-card:hover,
.settings-ghost-btn:hover,
.settings-collection-item:hover {
    color: var(--text)
}

.settings-picker-card {
    box-shadow: var(--shadow);
    border-radius: 14px;
    flex-direction: column;
    padding: 12px 14px 14px;
    display: flex
}

.settings-chip,
.settings-collection-item {
    border-radius: 12px
}

.settings-chip.is-active,
.settings-picker-card.is-active,
.settings-collection-item.is-active {
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-chip.is-active,
    .settings-picker-card.is-active,
    .settings-collection-item.is-active {
        background: color-mix(in oklab, var(--blue) 10%, var(--surface))
    }
}

.settings-chip.is-active,
.settings-picker-card.is-active,
.settings-collection-item.is-active {
    border-color: var(--blue) !important
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-chip.is-active,
    .settings-picker-card.is-active,
    .settings-collection-item.is-active {
        border-color: color-mix(in oklab, var(--blue) 42%, var(--border)) !important
    }
}

.settings-chip.is-active,
.settings-picker-card.is-active,
.settings-collection-item.is-active {
    color: var(--blue);
    box-shadow: 0 8px 24px var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-chip.is-active,
    .settings-picker-card.is-active,
    .settings-collection-item.is-active {
        box-shadow: 0 8px 24px color-mix(in oklab, var(--blue) 10%, transparent)
    }
}

.settings-badge {
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-badge {
        background: color-mix(in oklab, var(--blue) 10%, transparent)
    }
}

.settings-badge {
    color: var(--blue)
}

.settings-dot {
    background: var(--border2)
}

.settings-dot.is-active {
    background: var(--blue)
}

.settings-field,
.settings-searchbar {
    background: var(--bg)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-field,
    .settings-searchbar {
        background: color-mix(in oklab, var(--bg) 28%, var(--surface))
    }
}

.settings-field,
.settings-searchbar {
    color: var(--text);
    border-color: var(--border) !important
}

.settings-field:hover,
.settings-field.is-focused,
.settings-searchbar.is-focused,
.settings-field:focus-within,
.settings-field:focus {
    border-color: var(--blue) !important
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-field:hover,
    .settings-field.is-focused,
    .settings-searchbar.is-focused,
    .settings-field:focus-within,
    .settings-field:focus {
        border-color: color-mix(in oklab, var(--blue) 40%, var(--border)) !important
    }
}

.settings-field:hover,
.settings-field.is-focused,
.settings-searchbar.is-focused,
.settings-field:focus-within,
.settings-field:focus {
    box-shadow: 0 0 0 3px var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-field:hover,
    .settings-field.is-focused,
    .settings-searchbar.is-focused,
    .settings-field:focus-within,
    .settings-field:focus {
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 10%, transparent)
    }
}

.settings-field::placeholder,
[data-settings-panel] input::placeholder,
[data-settings-panel] textarea::placeholder {
    color: var(--muted-dark);
    opacity: .7
}

.settings-field__input {
    color: var(--text);
    border-color: var(--border) !important
}

.settings-stepper-btn {
    color: var(--muted-dark)
}

.settings-stepper-btn:hover {
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-stepper-btn:hover {
        background: color-mix(in oklab, var(--blue) 7%, transparent)
    }
}

.settings-stepper-btn:hover {
    color: var(--blue)
}

.settings-library-card {
    border: 1px solid var(--border) !important;
}

.settings-primary-btn {
    background: var(--blue);
    color: var(--bg);
    box-shadow: 0 12px 26px var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-primary-btn {
        box-shadow: 0 12px 26px color-mix(in oklab, var(--blue) 18%, transparent)
    }
}

.settings-primary-btn:hover {
    filter: brightness(1.03);
    transform: translateY(-1px)
}

.settings-search-overlay {
    background: var(--surface)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-search-overlay {
        background: color-mix(in oklab, var(--surface) 96%, transparent)
    }
}

.settings-search-overlay {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.settings-search-surface {
    background: var(--surface);
    box-shadow: var(--shadow);
    border-color: var(--border) !important
}

.settings-search-header {
    background: var(--surface)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-search-header {
        background: color-mix(in oklab, var(--surface) 95%, var(--blue) 3%)
    }
}

.settings-search-header {
    border-color: var(--border) !important
}

.settings-option {
    color: var(--muted)
}

.settings-option:hover,
.settings-option.is-active {
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {

    .settings-option:hover,
    .settings-option.is-active {
        background: color-mix(in oklab, var(--blue) 8%, var(--surface))
    }
}

.settings-option:hover,
.settings-option.is-active {
    color: var(--blue)
}

.settings-feature-card {
    --feature: var(--blue);
    background: var(--surface)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-feature-card {
        background: color-mix(in oklab, var(--surface) 92%, var(--feature) 4%)
    }
}

.settings-feature-card {
    border: 1px solid var(--feature) !important
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-feature-card {
        border: 1px solid color-mix(in oklab, var(--feature) 22%, var(--border)) !important
    }
}

.settings-feature-card {
    box-shadow: var(--shadow);
    border-radius: 14px
}

.settings-feature-card--violet,
.settings-feature-card--sky,
.settings-feature-card--blue {
    --feature: var(--blue)
}

.settings-feature-card--amber {
    --feature: var(--yellow)
}

.settings-feature-card--emerald {
    --feature: var(--green)
}

.settings-feature-card--rose {
    --feature: var(--red)
}

.settings-feature-card--gray {
    --feature: var(--muted-dark)
}

.settings-feature-icon {
    background: var(--feature)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-feature-icon {
        background: color-mix(in oklab, var(--feature) 10%, var(--surface))
    }
}

.settings-feature-icon {
    color: var(--feature)
}

.settings-feature-toggle {
    border-color: var(--border)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-feature-toggle {
        border-color: color-mix(in oklab, var(--feature) 18%, var(--border))
    }
}

.settings-feature-toggle {
    color: var(--feature)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-feature-toggle {
        color: color-mix(in oklab, var(--feature) 72%, var(--text))
    }
}

.settings-note {
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-note {
        background: color-mix(in oklab, var(--blue) 6%, var(--surface))
    }
}

.settings-note {
    color: var(--muted);
    border: 1px solid var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-note {
        border: 1px solid color-mix(in oklab, var(--blue) 10%, var(--border))
    }
}

.settings-note--danger {
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-note--danger {
        background: color-mix(in oklab, var(--red) 8%, var(--surface))
    }
}

.settings-note--danger {
    color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-note--danger {
        color: color-mix(in oklab, var(--red) 76%, var(--text))
    }
}

.settings-note--danger {
    border: 1px solid var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-note--danger {
        border: 1px solid color-mix(in oklab, var(--red) 14%, var(--border))
    }
}

.settings-ramp-preview {
    background: var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-ramp-preview {
        background: color-mix(in oklab, var(--yellow) 7%, var(--surface))
    }
}

.settings-ramp-preview {
    color: var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-ramp-preview {
        color: color-mix(in oklab, var(--yellow) 72%, var(--text))
    }
}

.settings-ramp-preview {
    border: 1px solid var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-ramp-preview {
        border: 1px solid color-mix(in oklab, var(--yellow) 12%, var(--border))
    }
}

.settings-ramp-track {
    background: var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-ramp-track {
        background: color-mix(in oklab, var(--yellow) 12%, var(--surface))
    }
}

.settings-ramp-fill {
    background: linear-gradient(90deg, var(--yellow), var(--yellow))
}

@supports (color:color-mix(in lab, red, red)) {
    .settings-ramp-fill {
        background: linear-gradient(90deg, color-mix(in oklab, var(--yellow) 40%, var(--surface)), color-mix(in oklab, var(--yellow) 82%, var(--blue) 10%))
    }
}

.settings-caret-preview {
    color: var(--muted-dark)
}

.settings-caret-line {
    background: var(--blue)
}

.settings-range {
    accent-color: var(--blue);
    background: var(--blue)
}

@keyframes resultFadeIn {
    to {
        opacity: 1;
        transform: none
    }
}

.result-grid-card {
    background: var(--surface)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-grid-card {
        background: color-mix(in oklab, var(--surface) 92%, var(--blue) 8%)
    }
}

.result-grid-card {
    border: 1px solid var(--border);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 4px;
    padding: 12px;
    transition: border-color .2s, transform .2s
}

.result-grid-card:hover {
    border-color: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-grid-card:hover {
        border-color: color-mix(in oklab, var(--blue) 35%, var(--border))
    }
}

.result-grid-card:hover {
    transform: translateY(-1px)
}

.mono {
    font-family: JetBrains Mono, monospace
}

.stat-label {
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-dark);
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700
}

.stat-value {
    color: var(--muted);
    font-family: JetBrains Mono, monospace;
    font-weight: 800;
    line-height: 1
}

.result-restart-btn {
    cursor: pointer;
    letter-spacing: .05em;
    background: var(--active-line);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 12px;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: Outfit, sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: all .2s;
    display: inline-flex
}

.result-restart-btn:hover {
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-restart-btn:hover {
        background: color-mix(in oklab, var(--blue) 18%, transparent)
    }
}

.result-restart-btn:hover {
    color: var(--text);
    border-color: var(--blue)
}

.result-restart-btn:hover {
    transform: translateY(-1px)
}

#words {
    transition: top 50ms
}

.gradient {
    background-image: linear-gradient(to bottom right, var(--surface), var(--bg))
}

@supports (color:color-mix(in lab, red, red)) {
    .gradient {
        background-image: linear-gradient(to bottom right, color-mix(in oklab, var(--surface) 90%, transparent), color-mix(in oklab, var(--bg) 90%, transparent))
    }
}

.gradient-1 {
    background-image: linear-gradient(to bottom right, var(--surface), var(--bg), var(--surface))
}

@supports (color:color-mix(in lab, red, red)) {
    .gradient-1 {
        background-image: linear-gradient(to bottom right, color-mix(in oklab, var(--surface) 80%, transparent), color-mix(in oklab, var(--bg) 60%, transparent), color-mix(in oklab, var(--surface) 80%, transparent))
    }
}

.gradient-2 {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops))
}

.white {
    background: var(--surface)
}

.pbb-100 {
    padding: calc(var(--spacing) * 6);
    border: 1px solid var(--border)
}

.result-root {
    width: 100%;
    max-width: 1080px;
    color: var(--text);
    font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
    margin: 0 auto;
}

.result-root,
.result-root * {
    box-sizing: border-box
}

/* .result-root {
    color: var(--text);
    font-family: Outfit, sans-serif
} */

.result-fade-in {
    opacity: 0;
    animation: .5s cubic-bezier(.16, 1, .3, 1) forwards resultFadeIn;
    transform: translateY(16px)
}

.result-card {
    background: var(--surface)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-card {
        background: color-mix(in oklab, var(--surface) 94%, var(--blue) 6%)
    }
}

.result-card {
    border: 1px solid var(--border);
    /* box-shadow: var(--shadow); */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    transition: transform .2s, border-color .2s, background .2s
}

.result-card:hover {
    border-color: var(--blue);
    transform: translateY(-1px)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-card:hover {
        border-color: color-mix(in oklab, var(--blue) 30%, var(--border))
    }
}

.result-card--soft {
    background: linear-gradient(180deg, var(--bg), var(--bg))
}

@supports (color:color-mix(in lab, red, red)) {
    .result-card--soft {
        background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 98%, var(--blue) 2%), var(--bg))
    }
}

.result-card--hero {
    padding: 18px 20px 16px
}

.result-card--compact {
    padding: 16px 16px 14px
}

.result-card--center {
    align-items: center;
    gap: 14px;
    display: flex
}

.result-section-title {
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800
}

.result-muted {
    color: var(--muted-dark)
}

.result-copy {
    color: var(--muted);
    line-height: 1.45
}

.result-hero-grid {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: stretch;
    gap: 20px;
    margin-top: 16px;
    display: grid
}

.result-hero-headline {
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    display: flex
}

.result-hero-side {
    align-items: stretch;
    min-width: 0;
    display: flex
}

.result-hero-chart {
    border: 1px solid var(--border);
    border-radius: 14px;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    min-width: 0;
    padding: 12px 14px 6px;
    display: flex
}

@supports (color:color-mix(in lab, red, red)) {
    .result-hero-chart {
        border: 1px solid color-mix(in oklab, var(--border) 70%, transparent)
    }
}

.result-hero-chart {
    background: var(--bg)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-hero-chart {
        background: color-mix(in oklab, var(--bg) 55%, transparent)
    }
}

.result-hero-history {
    align-self: flex-end;
    width: 100%
}

.result-hero-row {
    align-items: flex-end;
    gap: 12px;
    display: flex
}

.result-hero-value {
    letter-spacing: -.05em;
    text-shadow: 0 6px 18px var(--blue);
    font-size: clamp(72px, 12vw, 112px);
    font-weight: 900;
    line-height: .9
}

@supports (color:color-mix(in lab, red, red)) {
    .result-hero-value {
        text-shadow: 0 6px 18px color-mix(in oklab, var(--blue) 12%, transparent)
    }
}

.result-hero-value--lightning {
    color: var(--yellow)
}

.result-hero-value--blazing {
    color: var(--green)
}

.result-hero-value--solid {
    color: var(--blue)
}

.result-hero-value--building,
.result-hero-value--keep {
    color: var(--text)
}

.result-hero-unit {
    color: var(--muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: 800
}

.result-hero-hint {
    color: var(--muted-dark);
    margin-top: 8px;
    font-size: 13px
}

.result-badge {
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid #0000;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex
}

.result-badge--lightning {
    color: var(--yellow);
    background: var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-badge--lightning {
        background: color-mix(in oklab, var(--yellow) 12%, transparent)
    }
}

.result-badge--lightning {
    border-color: var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-badge--lightning {
        border-color: color-mix(in oklab, var(--yellow) 24%, var(--border))
    }
}

.result-badge--blazing {
    color: var(--green);
    background: var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-badge--blazing {
        background: color-mix(in oklab, var(--green) 12%, transparent)
    }
}

.result-badge--blazing {
    border-color: var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-badge--blazing {
        border-color: color-mix(in oklab, var(--green) 24%, var(--border))
    }
}

.result-badge--solid {
    color: var(--blue);
    background: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-badge--solid {
        background: color-mix(in oklab, var(--blue) 12%, transparent)
    }
}

.result-badge--solid {
    border-color: var(--blue)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-badge--solid {
        border-color: color-mix(in oklab, var(--blue) 24%, var(--border))
    }
}

.result-badge--building,
.result-badge--keep {
    color: var(--muted-dark);
    background: var(--muted-dark)
}

@supports (color:color-mix(in lab, red, red)) {

    .result-badge--building,
    .result-badge--keep {
        background: color-mix(in oklab, var(--muted-dark) 10%, var(--bg))
    }
}

.result-badge--building,
.result-badge--keep {
    border-color: var(--muted-dark)
}

@supports (color:color-mix(in lab, red, red)) {

    .result-badge--building,
    .result-badge--keep {
        border-color: color-mix(in oklab, var(--muted-dark) 18%, var(--border))
    }
}

.result-history__title {
    margin-bottom: 8px
}

.result-history__meta {
    justify-content: space-between;
    margin-top: 4px;
    display: flex
}

.result-sparkline {
    width: 100%;
    display: block
}

.result-sparkline--blue {
    color: var(--blue)
}

.result-sparkline--green {
    color: var(--green)
}

.result-sparkline--yellow {
    color: var(--yellow)
}

.result-sparkline--red {
    color: var(--red)
}

.result-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
    display: grid
}

.result-stat {
    min-height: 118px
}

.result-stat__value {
    color: var(--text);
    margin-top: 8px;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.02
}

.result-stat__note {
    color: var(--muted-dark);
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45
}

.result-ring {
    display: block;
    transform: rotate(-90deg)
}

.result-ring__track {
    fill: none;
    stroke: var(--border);
    stroke-width: 6px
}

.result-ring__progress {
    fill: none;
    stroke: currentColor;
    stroke-width: 6px;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-ring__progress {
        filter: drop-shadow(0 0 6px color-mix(in oklab, currentColor 35%, transparent))
    }
}

.result-ring__progress {
    transition: stroke-dasharray 1.2s cubic-bezier(.34, 1.56, .64, 1)
}

.result-ring--good {
    color: var(--green)
}

.result-ring--warn {
    color: var(--yellow)
}

.result-ring--bad {
    color: var(--red)
}

.result-ring__value {
    font-size: 16px;
    font-weight: 900
}

.result-ring__value--good {
    color: var(--green)
}

.result-ring__value--warn {
    color: var(--yellow)
}

.result-ring__value--bad {
    color: var(--red)
}

.result-consistency__value {
    margin-top: 8px;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.02
}

.result-consistency__value--good {
    color: var(--green)
}

.result-consistency__value--warn {
    color: var(--yellow)
}

.result-consistency__value--bad {
    color: var(--red)
}

.result-consistency__percent {
    color: var(--muted-dark);
    font-size: 16px;
    font-weight: 700
}

.result-progress {
    background: var(--surface3);
    border: 1px solid var(--border);
    border-radius: 9999px;
    width: 100%;
    height: 8px;
    margin-top: 10px;
    overflow: hidden
}

.result-progress__fill {
    height: 100%;
    width: var(--progress-width, 0%);
    border-radius: inherit;
    transition: width 1.1s cubic-bezier(.34, 1.56, .64, 1)
}

.result-progress__fill--success {
    background: linear-gradient(90deg, var(--green), var(--green))
}

@supports (color:color-mix(in lab, red, red)) {
    .result-progress__fill--success {
        background: linear-gradient(90deg, color-mix(in oklab, var(--green) 72%, white), var(--green))
    }
}

.result-progress__fill--success {
    box-shadow: 0 0 10px var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-progress__fill--success {
        box-shadow: 0 0 10px color-mix(in oklab, var(--green) 18%, transparent)
    }
}

.result-progress__fill--warn {
    background: linear-gradient(90deg, var(--yellow), var(--yellow))
}

@supports (color:color-mix(in lab, red, red)) {
    .result-progress__fill--warn {
        background: linear-gradient(90deg, color-mix(in oklab, var(--yellow) 72%, white), var(--yellow))
    }
}

.result-progress__fill--warn {
    box-shadow: 0 0 10px var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-progress__fill--warn {
        box-shadow: 0 0 10px color-mix(in oklab, var(--yellow) 18%, transparent)
    }
}

.result-progress__fill--error {
    background: linear-gradient(90deg, var(--red), var(--red))
}

@supports (color:color-mix(in lab, red, red)) {
    .result-progress__fill--error {
        background: linear-gradient(90deg, color-mix(in oklab, var(--red) 72%, white), var(--red))
    }
}

.result-progress__fill--error {
    box-shadow: 0 0 10px var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-progress__fill--error {
        box-shadow: 0 0 10px color-mix(in oklab, var(--red) 18%, transparent)
    }
}

.result-progress__fill--muted {
    background: linear-gradient(90deg, var(--muted-dark), var(--muted-dark))
}

@supports (color:color-mix(in lab, red, red)) {
    .result-progress__fill--muted {
        background: linear-gradient(90deg, color-mix(in oklab, var(--muted-dark) 72%, white), var(--muted-dark))
    }
}

.result-progress__fill--muted {
    box-shadow: 0 0 10px var(--muted-dark)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-progress__fill--muted {
        box-shadow: 0 0 10px color-mix(in oklab, var(--muted-dark) 18%, transparent)
    }
}

.result-pill-row {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    display: flex
}

.result-pill {
    flex-wrap: wrap;
    gap: 6px;
    display: inline-flex
}

.result-tag {
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid #0000;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 700
}

.result-tag--weak {
    color: var(--red);
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-tag--weak {
        background: color-mix(in oklab, var(--red) 10%, var(--bg))
    }
}

.result-tag--weak {
    border-color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-tag--weak {
        border-color: color-mix(in oklab, var(--red) 22%, var(--border))
    }
}

.result-tag--improved {
    color: var(--green);
    background: var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-tag--improved {
        background: color-mix(in oklab, var(--green) 10%, var(--bg))
    }
}

.result-tag--improved {
    border-color: var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-tag--improved {
        border-color: color-mix(in oklab, var(--green) 22%, var(--border))
    }
}

.result-tag--key {
    color: var(--red);
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-tag--key {
        background: color-mix(in oklab, var(--red) 10%, var(--bg))
    }
}

.result-tag--key {
    border-color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-tag--key {
        border-color: color-mix(in oklab, var(--red) 22%, var(--border))
    }
}

.result-breakdown {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.result-breakdown__row {
    align-items: center;
    gap: 10px;
    display: flex
}

.result-breakdown__icon {
    border: 1px solid #0000;
    border-radius: 8px;
    flex-shrink: 0;
    place-items: center;
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-weight: 900;
    display: grid
}

.result-breakdown__icon--success {
    color: var(--green);
    background: var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__icon--success {
        background: color-mix(in oklab, var(--green) 12%, var(--bg))
    }
}

.result-breakdown__icon--success {
    border-color: var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__icon--success {
        border-color: color-mix(in oklab, var(--green) 28%, var(--border))
    }
}

.result-breakdown__icon--error {
    color: var(--red);
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__icon--error {
        background: color-mix(in oklab, var(--red) 12%, var(--bg))
    }
}

.result-breakdown__icon--error {
    border-color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__icon--error {
        border-color: color-mix(in oklab, var(--red) 28%, var(--border))
    }
}

.result-breakdown__icon--warn {
    color: var(--yellow);
    background: var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__icon--warn {
        background: color-mix(in oklab, var(--yellow) 12%, var(--bg))
    }
}

.result-breakdown__icon--warn {
    border-color: var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__icon--warn {
        border-color: color-mix(in oklab, var(--yellow) 28%, var(--border))
    }
}

.result-breakdown__icon--muted {
    color: var(--muted);
    background: var(--muted-dark)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__icon--muted {
        background: color-mix(in oklab, var(--muted-dark) 12%, var(--bg))
    }
}

.result-breakdown__icon--muted {
    border-color: var(--muted-dark)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__icon--muted {
        border-color: color-mix(in oklab, var(--muted-dark) 28%, var(--border))
    }
}

.result-breakdown__label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700
}

.result-breakdown__value {
    font-size: 13px;
    font-weight: 900
}

.result-breakdown__value--success {
    color: var(--green)
}

.result-breakdown__value--error {
    color: var(--red)
}

.result-breakdown__value--warn {
    color: var(--yellow)
}

.result-breakdown__value--muted {
    color: var(--muted)
}

.result-breakdown__bar {
    background: var(--surface3);
    border: 1px solid var(--border);
    border-radius: 9999px;
    height: 5px;
    overflow: hidden
}

.result-breakdown__fill {
    width: var(--progress-width, 0%);
    border-radius: inherit;
    height: 100%;
    transition: width 1s cubic-bezier(.34, 1.56, .64, 1)
}

.result-breakdown__fill--success {
    background: var(--green);
    box-shadow: 0 0 8px var(--green)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__fill--success {
        box-shadow: 0 0 8px color-mix(in oklab, var(--green) 18%, transparent)
    }
}

.result-breakdown__fill--error {
    background: var(--red);
    box-shadow: 0 0 8px var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__fill--error {
        box-shadow: 0 0 8px color-mix(in oklab, var(--red) 18%, transparent)
    }
}

.result-breakdown__fill--warn {
    background: var(--yellow);
    box-shadow: 0 0 8px var(--yellow)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__fill--warn {
        box-shadow: 0 0 8px color-mix(in oklab, var(--yellow) 18%, transparent)
    }
}

.result-breakdown__fill--muted {
    background: var(--muted-dark);
    box-shadow: 0 0 8px var(--muted-dark)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-breakdown__fill--muted {
        box-shadow: 0 0 8px color-mix(in oklab, var(--muted-dark) 18%, transparent)
    }
}

.result-key-grid {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.result-key {
    background: var(--red);
    border: 1px solid #0000;
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 42px;
    padding: 6px 10px;
    display: flex;
    box-shadow: inset 0 1px #ffffff59
}

@supports (color:color-mix(in lab, red, red)) {
    .result-key {
        background: color-mix(in oklab, var(--red) 18%, var(--bg))
    }
}

.result-key {
    border-color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-key {
        border-color: color-mix(in oklab, var(--red) 20%, var(--border))
    }
}

.result-key--2 {
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-key--2 {
        background: color-mix(in oklab, var(--red) 24%, var(--bg))
    }
}

.result-key--2 {
    border-color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-key--2 {
        border-color: color-mix(in oklab, var(--red) 28%, var(--border))
    }
}

.result-key--3 {
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-key--3 {
        background: color-mix(in oklab, var(--red) 30%, var(--bg))
    }
}

.result-key--3 {
    border-color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-key--3 {
        border-color: color-mix(in oklab, var(--red) 36%, var(--border))
    }
}

.result-key--4 {
    background: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-key--4 {
        background: color-mix(in oklab, var(--red) 38%, var(--bg))
    }
}

.result-key--4 {
    border-color: var(--red)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-key--4 {
        border-color: color-mix(in oklab, var(--red) 46%, var(--border))
    }
}

.result-key__label {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    color: var(--red);
    font-size: 15px;
    font-weight: 800;
    line-height: 1
}

.result-key__count {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700
}

.result-chart-card {
    padding: 16px 18px 14px
}

.result-chart-title {
    margin-bottom: 10px
}

.result-chart-wrap {
    position: relative;
    overflow: visible
}

.result-chart {
    width: 100%;
    height: auto;
    color: var(--blue);
    display: block;
    overflow: visible
}

.result-chart--blue {
    color: var(--blue)
}

.result-chart--green {
    color: var(--green)
}

.result-chart--yellow {
    color: var(--yellow)
}

.result-chart--red {
    color: var(--red)
}

.result-chart text {
    fill: var(--muted-dark);
    font-family: var(--font-mono, "JetBrains Mono", monospace)
}

.result-chart__tooltip {
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
    position: absolute
}

.result-chart__tooltip-card {
    background: var(--bg);
    border: 1px solid var(--border);
    text-align: center;
    border-radius: 10px;
    min-width: 88px;
    padding: 8px 10px;
    box-shadow: 0 10px 24px #0f172a1a
}

.result-chart__tooltip-time {
    color: var(--blue);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800
}

.result-chart__tooltip-value {
    color: var(--text);
    font-size: 16px;
    font-weight: 900
}

.result-chart__tooltip-unit {
    color: var(--muted-dark);
    margin-left: 4px;
    font-size: 10px;
    font-weight: 800
}

.result-chart__point {
    cursor: pointer;
    outline: none;
    transition: r .12s, opacity .12s, transform .12s
}

.result-chart__line {
    stroke: currentColor;
    fill: none;
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round
}

.result-chart__area {
    fill: currentColor;
    fill-opacity: .14
}

.result-chart__grid-line {
    stroke: var(--border);
    stroke-width: 1px
}

.result-chart__circle {
    fill: currentColor;
    stroke: var(--bg)
}

.result-chart__circle--active {
    stroke-width: 1.8px;
    r: 4.2
}

.result-chart__circle--idle {
    stroke-width: 1px;
    r: 2.7
}

.result-button-row {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding-top: 2px;
    display: flex
}

.result-restart-btn {
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--blue);
    color: var(--surface);
    font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
    letter-spacing: .03em;
    box-shadow: 0 8px 18px var(--blue);
    border-radius: 12px;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex
}

@supports (color:color-mix(in lab, red, red)) {
    .result-restart-btn {
        box-shadow: 0 8px 18px color-mix(in oklab, var(--blue) 18%, transparent)
    }
}

.result-restart-btn {
    transition: transform .16s, filter .16s, background .16s, border-color .16s
}

.result-restart-btn:hover {
    filter: brightness(1.03);
    border-color: var(--blue);
    transform: translateY(-1px)
}

@supports (color:color-mix(in lab, red, red)) {
    .result-restart-btn:hover {
        border-color: color-mix(in oklab, var(--blue) 40%, var(--border))
    }
}

.result-restart-btn:active {
    transform: scale(.97)
}

.result-kbd {
    background: var(--surface2);
    border: 1px solid var(--border);
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    color: var(--muted);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 10px
}

.result-empty {
    text-align: center;
    width: 100%;
    max-width: 1080px;
    color: var(--text);
    margin: 0 auto;
    padding: 42px 0
}

.result-empty__icon {
    margin-bottom: 12px;
    font-size: 48px
}

.result-empty__title {
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: 800
}

.result-empty__text {
    color: var(--muted);
    margin-bottom: 28px;
    font-size: 13px
}

.result-grid-2 {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 12px;
    margin-bottom: 12px;
    display: grid
}

.result-grid-2--wide {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr))
}

.result-grid-2--stacked {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    display: grid
}

.result-stack {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.result-inline-note {
    color: var(--muted-dark);
    font-size: 12px
}

.result-minor-meta {
    color: var(--muted-dark);
    font-size: 10px;
    font-family: var(--font-mono, "JetBrains Mono", monospace)
}

.result-wpm-history__range {
    justify-content: space-between;
    margin-top: 4px;
    display: flex
}

.result-wpm-history__range span {
    color: var(--muted-dark);
    font-size: 10px;
    font-family: var(--font-mono, "JetBrains Mono", monospace)
}

.result-history-card__head {
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    display: flex
}

.result-history-card__stats {
    border-top: 1px solid var(--border);
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    display: flex
}

.result-history-card__stats>div {
    flex-direction: column;
    flex: 1;
    align-items: center;
    gap: 3px;
    display: flex
}

.result-history-card__stats>div>span:last-child {
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-dark);
    font-size: 9px;
    font-weight: 700
}

.result-history-card__num {
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    font-family: var(--font-mono, "JetBrains Mono", monospace)
}

.result-level-meta {
    color: var(--muted);
    letter-spacing: .02em;
    font-size: 12px
}

.result-level-meta strong {
    color: var(--text)
}

.result-helper {
    color: var(--muted-dark);
    letter-spacing: .06em;
    font-size: 11px
}

.result-legend {
    flex-wrap: wrap;
    gap: 10px;
    display: flex
}

.result-legend__item {
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.result-legend__swatch {
    background: var(--blue);
    border-radius: 999px;
    width: 10px;
    height: 10px
}

.result-legend__swatch--green {
    background: var(--green)
}

.result-legend__swatch--yellow {
    background: var(--yellow)
}

.result-legend__swatch--red {
    background: var(--red)
}

@media (max-width:860px) {

    .result-hero-grid,
    .result-grid-2 {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .result-card--hero {
        padding: 16px 16px 14px
    }

    .result-card--compact {
        padding: 14px 14px 12px
    }

    .result-hero-row {
        align-items: flex-end;
        gap: 10px
    }

    .result-hero-unit {
        padding-bottom: 8px
    }
}