@font-face {
    font-family: 'Outfit';
    src: url('../../assets/fonts/outfit-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;

    --color-primary: #2ecc71;
    --color-primary-light: #62d994;
    --color-base: #414754;
    --intro-scrim: rgb(20 22 26 / 0.88);
    --color-bg: #14161a;
    --color-fg: #f2f4f7;
    --color-surface: #1d2027;
    --color-muted: #9aa1ac;
    --color-border: #2b2f38;

    --vh: 1vh;

    --buzzer-rim-offset: 15px;
    --buzzer-rim-spread: 20px;
    --buzzer-base-offset: 40px;
    --buzzer-base-spread: 30px;
    --buzzer-ratio: 3.75;
    --buzzer-vh-cap: 18;

    --buzzer-height: min(
        calc((90vw - var(--buzzer-base-spread) * 2) / var(--buzzer-ratio)),
        80px,
        calc(var(--buzzer-vh-cap) * var(--vh))
    );
    --buzzer-width: calc(var(--buzzer-height) * var(--buzzer-ratio));

    --buzzer-cap: var(--buzzer-height);
    --buzzer-clearance: calc(var(--buzzer-base-offset) + var(--buzzer-base-spread));

    --recolour: 0.4s ease;
    --retheme: 0.3s ease;
}

@supports (height: 1svh) {
    :root {
        --vh: 1svh;
    }
}

@supports (color: color-mix(in srgb, red, white)) {
    :root {
        --color-primary-light: color-mix(in srgb, var(--color-primary), white 25%);
    }
}

[data-theme='light'] {
    color-scheme: light;

    --color-base: #b5b5b5;
    --intro-scrim: rgb(244 244 244 / 0.88);
    --color-bg: #f4f4f4;
    --color-fg: #111;
    --color-surface: #e6e6e6;
    --color-muted: #555;
    --color-border: #d0d0d0;
}

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

[hidden] {
    display: none !important;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-fg);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--retheme), color var(--retheme);
}

[data-t] {
    display: none;
}

html[lang='en'] [data-t='en'],
html[lang='es'] [data-t='es'] {
    display: inline;
}

.content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, calc(4 * var(--vh)), 2.5rem);
    padding: 1rem;
}

header {
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: clamp(1.25rem, 6vw, 2.75rem);
}

.stray header span {
    display: block;
}

.stray header span[lang='es'] {
    font-size: 0.62em;
    color: var(--color-muted);
}

.stray p {
    margin: 0;
}

.stray a {
    color: var(--color-primary);
    text-underline-offset: 0.2em;
}

.noscript-note {
    margin: 0 1rem;
    padding: 0.75em 1em;
    text-align: center;
    font-size: 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.stage {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--buzzer-cap);
    padding-bottom: var(--buzzer-clearance);
    padding-inline: var(--buzzer-base-spread);
}

.navbar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 14px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--retheme), border-color var(--retheme);
}

.lang-toggle {
    display: flex;
    gap: 0.25em;
}

.lang-btn {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font: inherit;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    cursor: pointer;
}

html[lang='es'] .lang-btn[data-lang='es'],
html[lang='en'] .lang-btn[data-lang='en'] {
    color: var(--color-fg);
    border-color: var(--color-primary);
}

.icon-btn {
    background: none;
    border: none;
    color: var(--color-fg);
    cursor: pointer;
    display: flex;
    padding: 0.25em;
}

.icon {
    display: none;
}

[data-theme='dark'] .icon--sun,
[data-theme='light'] .icon--moon {
    display: block;
}

.haptics-btn[aria-pressed='true'] .icon--buzz-on,
.haptics-btn[aria-pressed='false'] .icon--buzz-off {
    display: block;
}

.intro {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    text-align: center;
    background: var(--intro-scrim);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity 0.4s ease;
}

.intro.is-gone {
    opacity: 0;
    pointer-events: none;
}

.intro__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    max-width: 22rem;
    animation: intro-rise 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.intro__mark {
    width: clamp(56px, 16vw, 84px);
    height: auto;
}

.intro__mark-ring {
    fill: var(--color-base);
}

.intro__mark-cap {
    fill: var(--color-primary);
}

.intro__brand {
    margin: 0;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-fg);
}

.intro__title {
    margin: 0;
    font-size: clamp(0.95rem, 3.6vw, 1.15rem);
    line-height: 1.45;
    color: var(--color-muted);
}

.intro__hint {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.intro__note {
    margin: 0.2rem 0 0;
    max-width: 20rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-muted);
    opacity: 0.72;
}

@keyframes intro-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

.color-control {
    position: relative;
}

.color-trigger {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.75em 0.35em 0.4em;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-fg);
    font: inherit;
    font-size: 0.75em;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.color-trigger[aria-expanded='true'] {
    border-color: var(--color-primary);
}

.color-trigger__dot {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
    transition: background-color var(--recolour);
}

.color-panel {
    position: absolute;
    top: calc(100% + 0.6em);
    right: 0;
    z-index: 3;
    display: grid;
    gap: 0.75em;
    min-width: 13.5em;
    max-height: calc(100svh - 5em);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.85em;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.28);
}

.color-panel__title {
    margin: 0;
    font-size: 0.7em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.color-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5em;
}

.color-swatch {
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.color-swatch[aria-checked='true'] {
    box-shadow:
        inset 0 0 0 1px rgb(0 0 0 / 0.25),
        0 0 0 2px var(--color-bg),
        0 0 0 4px var(--swatch);
}

.color-custom {
    --hue: 145;
    --sat: 63%;
    --lit: 49%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4em;
}

.color-custom__title {
    font-size: 0.7em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.color-custom__value {
    font-size: 0.7em;
    text-align: right;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.color-range {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

.color-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: var(--track);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2);
}

.color-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: var(--track);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2);
}

.color-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -5px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgb(0 0 0 / 0.35);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}

.color-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 1px solid rgb(0 0 0 / 0.35);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
}

.color-range--hue {
    --track: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.color-range--sat {
    --track: linear-gradient(to right,
        hsl(calc(var(--hue) * 1deg) 0% var(--lit)),
        hsl(calc(var(--hue) * 1deg) 100% var(--lit)));
}

.color-range--lit {
    --track: linear-gradient(to right, #000,
        hsl(calc(var(--hue) * 1deg) var(--sat) 50%), #fff);
}

.lang-btn:focus-visible,
.icon-btn:focus-visible,
.color-trigger:focus-visible,
.color-swatch:focus-visible,
.color-range:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

.buzzer {
    position: relative;
    flex: none;
    width: var(--buzzer-width);
    height: var(--buzzer-height);
    border: none;
    border-radius: 50%;
    background-color: var(--color-primary);
    box-shadow:
        0 var(--buzzer-rim-offset) 0 var(--buzzer-rim-spread) var(--color-base),
        0 var(--buzzer-base-offset) 0 var(--buzzer-base-spread) var(--color-bg);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow var(--recolour), background-color var(--recolour);
}

.buzzer:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 6px;
}

.buzzer::before,
.buzzer::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

.buzzer::before {
    z-index: 1;
    bottom: 100%;
    border-radius: 50%;
    background-color: var(--color-primary-light);
    transition: bottom 0.2s ease-out, background-color var(--recolour);
}

.buzzer::after {
    bottom: 50%;
    background-color: var(--color-primary);
    transition: height 0.2s ease-out, background-color var(--recolour);
}

.buzzer.is-pressed::before {
    bottom: 10%;
}

.buzzer.is-pressed::after {
    height: 10%;
}

footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1em;
    background: var(--color-surface);
    color: var(--color-muted);
    font-style: italic;
    border-top: 1px solid var(--color-border);
    transition: background-color var(--retheme), color var(--retheme), border-color var(--retheme);
}

footer a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-muted);
    transition: color 0.2s ease;
}

footer a:focus-visible {
    color: var(--color-primary-light);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 2;
}

.is-theme-sweeping body,
.is-theme-sweeping .navbar,
.is-theme-sweeping .buzzer,
.is-theme-sweeping .color-trigger,
.is-theme-sweeping footer {
    transition: none;
}

@media (pointer: coarse) {
    .lang-btn,
    .icon-btn,
    .color-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .color-swatch {
        min-width: 40px;
    }

    .color-range {
        height: 40px;
    }
}

@media (max-width: 600px) {
    .navbar {
        gap: 12px;
        padding: 8px 10px;
    }

    footer {
        font-size: 0.9em;
        padding: 0.8em;
    }

    .color-trigger {
        padding: 0.35em;
    }

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

    .buzzer::before,
    .buzzer::after {
        transition: bottom 0.15s ease-out, height 0.15s ease-out, background-color var(--recolour);
    }
}

@media (orientation: landscape) and (max-height: 480px) {
    :root {
        --buzzer-vh-cap: 14;
    }

    .intro {
        padding: 1rem;
    }

    .intro__panel {
        gap: 0.45rem;
    }

    .intro__mark {
        width: clamp(40px, calc(12 * var(--vh)), 60px);
    }

    .intro__brand {
        font-size: clamp(1.3rem, calc(6 * var(--vh)), 1.9rem);
    }

    .content {
        gap: 0.6rem;
        padding: 0.5rem;
    }

    header {
        font-size: clamp(1rem, calc(4.5 * var(--vh)), 1.75rem);
    }

    footer {
        padding: 0.5em;
        font-size: 0.85em;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .navbar,
    footer,
    .buzzer,
    .buzzer::before,
    .buzzer::after,
    .color-swatch,
    .color-trigger,
    .color-trigger__dot,
    .intro {
        transition: none;
    }

    .intro__panel {
        animation: none;
    }

    ::view-transition-group(*),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

@media (hover: hover) {
    .icon-btn:hover {
        color: var(--color-primary-light);
    }

    .color-trigger:hover {
        border-color: var(--color-primary);
    }

    .color-swatch:hover {
        transform: scale(1.12);
    }

    footer a:hover {
        color: var(--color-primary-light);
    }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
    .color-swatch:hover {
        transform: none;
    }
}