/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */

@layer properties {
    @supports (((-webkit-hyphens: none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-rotate-x:initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-ease: initial
        }
    }
}

@layer theme {
    :root {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-red-500: oklch(63.7% .237 25.331);
        --color-orange-400: oklch(75% .183 55.934);
        --color-orange-500: oklch(70.5% .213 47.604);
        --color-orange-700: oklch(55.3% .195 38.402);
        --color-yellow-500: oklch(79.5% .184 86.047);
        --color-green-500: oklch(72.3% .219 149.579);
        --color-green-700: oklch(52.7% .154 150.069);
        --color-blue-400: oklch(70.7% .165 254.624);
        --color-blue-500: oklch(62.3% .214 259.815);
        --color-gray-100: oklch(96.7% .003 264.542);
        --color-gray-900: oklch(21% .034 264.665);
        --text-xs: .75rem;
        --text-sm: .875rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-3xl: 1.875rem;
        --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
        --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
        --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
        --ease-in: cubic-bezier(.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {
    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }
    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }
    html {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }
    h1,
    h2,
    h3,
    h4 {
        font-size: inherit;
        font-weight: inherit
    }
    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }
    b,
    strong {
        font-weight: bolder
    }
    code,
    kbd,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }
    small {
        font-size: 80%
    }
    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }
    progress {
        vertical-align: baseline
    }
    summary {
        display: list-item
    }
    ol,
    ul,
    menu {
        list-style: none
    }
    img,
    svg,
    video,
    canvas,
    audio,
    embed,
    object {
        vertical-align: middle;
        display: block
    }
    img,
    video {
        max-width: 100%;
        height: auto
    }
    button,
    input,
    select,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }
    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }
    ::file-selector-button {
        margin-inline-end: 4px
    }
    ::placeholder {
        opacity: 1
    }
    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }
        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }
    textarea {
        resize: vertical
    }
    ::-webkit-search-decoration {
        -webkit-appearance: none
    }
    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }
    ::-webkit-datetime-edit {
        display: inline-flex
    }
    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }
    ::-webkit-datetime-edit {
        padding-block: 0
    }
    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }
    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }
    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }
    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }
    ::file-selector-button {
        appearance: button
    }
    ::-webkit-inner-spin-button {
        height: auto
    }
    ::-webkit-outer-spin-button {
        height: auto
    }
}

@layer components;
@layer utilities {
    .collapse {
        visibility: collapse
    }
    .visible {
        visibility: visible
    }
    .absolute {
        position: absolute
    }
    .fixed {
        position: fixed
    }
    .relative {
        position: relative
    }
    .static {
        position: static
    }
    .container {
        width: 100%
    }
    @media(min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }
    @media(min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }
    @media(min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }
    @media(min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }
    @media(min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }
    .block {
        display: block
    }
    .flex {
        display: flex
    }
    .grid {
        display: grid
    }
    .hidden {
        display: none
    }
    .inline {
        display: inline
    }
    .table {
        display: table
    }
    .grow {
        flex-grow: 1
    }
    .transform {
        transform: var(--tw-rotate-x, )var(--tw-rotate-y, )var(--tw-rotate-z, )var(--tw-skew-x, )var(--tw-skew-y, )
    }
    .resize {
        resize: both
    }
    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }
    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .ring {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }
    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
    }
    .filter {
        filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
    }
    .backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, )
    }
    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }
    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }
}

@font-face {
    font-family: Halfre;
    src: url(/fonts/halfre.woff2)format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

:root {
    --color-black-900: #191818;
    --color-blue-500: #1b5def;
    --color-blue-400: #4a7ff7;
    --color-orange-500: #e25327;
    --color-orange-400: #e8734b;
    --color-green-500: #22c55e;
    --color-cream-100: #f4f4f4;
    --color-sand-100: #f0ece4;
    --color-red-500: #ff5f57;
    --color-yellow-500: #ffbd2e;
    --color-green-700: #15803d;
    --color-orange-700: #c2410c;
    --color-diff-added: #15803d;
    --color-diff-changed: #b8860b;
    --color-diff-removed: #d44a6a;
    --color-bg-primary: var(--color-cream-100);
    --color-bg-secondary: var(--color-black-900);
    --color-bg-tertiary: var(--color-sand-100);
    --color-text-primary: var(--color-black-900);
    --color-text-secondary: var(--color-black-900)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-text-secondary: color-mix(in srgb, var(--color-black-900)70%, transparent)
    }
}

:root {
    --color-text-tertiary: var(--color-black-900)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-text-tertiary: color-mix(in srgb, var(--color-black-900)50%, transparent)
    }
}

:root {
    --color-text-inverse: var(--color-cream-100);
    --color-action-primary: var(--color-blue-500);
    --color-accent-signal: var(--color-orange-500);
    --color-border: var(--color-black-900)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-border: color-mix(in srgb, var(--color-black-900)10%, transparent)
    }
}

:root {
    --color-border-subtle: var(--color-black-900)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-border-subtle: color-mix(in srgb, var(--color-black-900)8%, transparent)
    }
}

:root {
    --color-surface-ghost: var(--color-black-900)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-surface-ghost: color-mix(in srgb, var(--color-black-900)2%, transparent)
    }
}

:root {
    --color-surface-subtle: var(--color-black-900)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-surface-subtle: color-mix(in srgb, var(--color-black-900)5%, transparent)
    }
}

:root {
    --color-shadow: var(--color-black-900)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-shadow: color-mix(in srgb, var(--color-black-900)25%, transparent)
    }
}

:root {
    --color-blue-ghost: #3080ff0d
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-blue-ghost: color-mix(in srgb, var(--color-blue-500)5%, transparent)
    }
}

:root {
    --color-blue-subtle: #3080ff1a
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-blue-subtle: color-mix(in srgb, var(--color-blue-500)10%, transparent)
    }
}

:root {
    --color-blue-tint: #3080ff33
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-blue-tint: color-mix(in srgb, var(--color-blue-500)20%, transparent)
    }
}

:root {
    --color-blue-wash: #3080ff4d
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-blue-wash: color-mix(in srgb, var(--color-blue-500)30%, transparent)
    }
}

:root {
    --color-orange-subtle: #fe6e001a
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-orange-subtle: color-mix(in srgb, var(--color-orange-500)10%, transparent)
    }
}

:root {
    --color-green-ghost: #00c7580d
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-green-ghost: color-mix(in srgb, var(--color-green-500)5%, transparent)
    }
}

:root {
    --color-green-tint: #00c75833
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-green-tint: color-mix(in srgb, var(--color-green-500)20%, transparent)
    }
}

:root {
    --color-green-wash: #00c75866
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-green-wash: color-mix(in srgb, var(--color-green-500)40%, transparent)
    }
}

:root {
    --color-glass-light: var(--color-cream-100)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-glass-light: color-mix(in srgb, var(--color-cream-100)65%, transparent)
    }
}

:root {
    --color-glass: var(--color-cream-100)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-glass: color-mix(in srgb, var(--color-cream-100)80%, transparent)
    }
}

:root {
    --color-glass-heavy: var(--color-cream-100)
}

@supports (color:color-mix(in lab, red, red)) {
    :root {
        --color-glass-heavy: color-mix(in srgb, var(--color-cream-100)95%, transparent)
    }
}

:root {
    --font-display: "Halfre", serif;
    --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --text-2xs: 10px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 28px;
    --text-xxl: 40px;
    --text-3xl: 52px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;
    --badge-padding: 2px var(--space-2);
    --badge-padding-md: var(--space-1)10px;
    --container-max: 1200px;
    --container-pad: var(--space-6);
    --grid-gap: var(--space-5);
    --motion-fast: .16s;
    --motion-medium: .24s;
    --motion-slow: .32s;
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --ease-out-soft: cubic-bezier(0, 0, .2, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-loose: 1.8;
    --letter-spacing-tight: -.02em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: .05em;
    --z-base: 1;
    --z-sticky: 100;
    --z-nav: 999;
    --z-overlay: 1000;
    --z-nav-overlay: 1001;
    --z-modal: 9000;
    --z-cursor: 9997;
    --z-noise: 9998;
    --z-cursor-ring: 9999;
    --z-boot: 10000;
    --shadow-sm: 0 1px 3px #0000001f;
    --shadow-md: 0 4px 12px #00000026;
    --shadow-lg: 0 10px 30px #0003
}

@media(max-width:600px) {
    :root {
        --container-pad: var(--space-5)
    }
}

@media(min-width:1440px) {
    :root {
        --container-max: 1400px;
        --container-pad: var(--space-7)
    }
}

html {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6
}

body {
    min-height: 100vh;
    margin: 0
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    margin: 0;
    font-weight: 400;
    line-height: 1.2
}

code,
pre,
.mono {
    font-family: var(--font-mono)
}

a {
    color: var(--color-action-primary);
    transition: color var(--motion-fast)var(--ease-standard);
    text-decoration: none;
    position: relative
}

a:hover {
    color: var(--color-black-900)
}

a:not(.btn):not(.service-card):not(.project-card):not(.contact-link):not(.nav-link):not(.site-footer__link):after {
    content: "";
    transform-origin: 100%;
    width: 100%;
    height: 1px;
    transition: transform .3s var(--ease-standard);
    background: currentColor;
    position: absolute;
    bottom: -2px;
    left: 0;
    transform: scaleX(0)
}

a:not(.btn):not(.service-card):not(.project-card):not(.contact-link):not(.nav-link):not(.site-footer__link):hover:after {
    transform-origin: 0;
    transform: scaleX(1)
}

.section-scanline {
    background: linear-gradient(90deg, transparent 0%, var(--color-blue-500)20%, var(--color-blue-500)80%, transparent 100%);
    opacity: 0;
    height: 2px;
    transition: opacity .3s var(--ease-out-soft), transform .5s var(--ease-out-soft);
    position: absolute;
    left: 0;
    right: 0;
    transform: scaleX(0)
}

.section-scanline--top {
    top: 0
}

.bg-fade {
    pointer-events: none;
    z-index: 1;
    --fade-color: var(--color-bg-primary);
    position: absolute;
    inset: 0
}

.bg-fade--edges {
    background: linear-gradient(to right, var(--fade-color)0%, transparent 15%, transparent 85%, var(--fade-color)100%), linear-gradient(to bottom, var(--fade-color)0%, transparent 15%, transparent 85%, var(--fade-color)100%)
}

.bg-fade--radial {
    background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, var(--fade-color)80%)
}

.bg-fade--bottom {
    background: linear-gradient(to bottom, transparent 0%, transparent 60%, var(--fade-color)100%)
}

.bg-fade--top {
    background: linear-gradient(to top, transparent 0%, transparent 60%, var(--fade-color)100%)
}

.section-scanline.is-active {
    opacity: .6;
    transform: scaleX(1)
}

@keyframes glitch-effect-1 {
    0%,
    to {
        opacity: 0;
        transform: translate(0)
    }
    20% {
        opacity: .8;
        transform: translate(-3px)
    }
    40% {
        opacity: .8;
        transform: translate(3px)
    }
    60% {
        opacity: .4;
        transform: translate(-2px)
    }
    80% {
        opacity: .2;
        transform: translate(1px)
    }
}

@keyframes glitch-effect-2 {
    0%,
    to {
        opacity: 0;
        transform: translate(0)
    }
    20% {
        opacity: .8;
        transform: translate(3px)
    }
    40% {
        opacity: .8;
        transform: translate(-3px)
    }
    60% {
        opacity: .4;
        transform: translate(2px)
    }
    80% {
        opacity: .2;
        transform: translate(-1px)
    }
}

.card-glow-pulse {
    position: relative
}

.card-glow-pulse:before {
    content: "";
    background: linear-gradient(45deg, var(--color-blue-500), transparent, var(--color-blue-500));
    opacity: 0;
    z-index: -1;
    transition: opacity .3s var(--ease-standard);
    background-size: 200% 200%;
    position: absolute;
    inset: -1px
}

.card-glow-pulse:hover:before {
    opacity: .2;
    animation: 2s linear infinite glow-rotate
}

@keyframes glow-rotate {
    0% {
        background-position: 0%
    }
    50% {
        background-position: 100%
    }
    to {
        background-position: 0%
    }
}

.copy-feedback {
    position: relative;
    overflow: hidden
}

.copy-feedback:before {
    content: "";
    background: var(--color-blue-500);
    opacity: 0;
    transition: opacity .3s var(--ease-standard);
    z-index: 0;
    position: absolute;
    inset: 0
}

.copy-feedback:after {
    content: "✓ Copied!";
    background: var(--color-blue-500);
    color: var(--color-cream-100);
    padding: var(--space-2)var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .05em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease-standard), transform .3s var(--ease-out-soft);
    z-index: 2;
    border-radius: 2px;
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)scale(.8)
}

.copy-feedback>* {
    z-index: 1;
    position: relative
}

.copy-feedback.is-copied {
    animation: copy-flash .6s var(--ease-out-soft)
}

.copy-feedback.is-copied:before {
    opacity: .15;
    animation: copy-glow 1.2s var(--ease-out-soft)
}

.copy-feedback.is-copied:after {
    opacity: 1;
    animation: copy-pop .4s var(--ease-out-soft);
    transform: translate(-50%, -50%)scale(1)
}

@keyframes copy-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%)scale(.5)
    }
    50% {
        transform: translate(-50%, -50%)scale(1.15)
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%)scale(1)
    }
}

@keyframes copy-flash {
    0% {
        transform: scale(1)
    }
    15% {
        transform: scale(.98)
    }
    30% {
        transform: scale(1.02)
    }
    to {
        transform: scale(1)
    }
}

@keyframes copy-glow {
    0% {
        opacity: .3
    }
    to {
        opacity: 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .card-glow-pulse:before {
        animation: none
    }
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

.status-bar[data-astro-cid-gpv52hdq] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .02em;
    user-select: none
}

.status-bar__inner[data-astro-cid-gpv52hdq] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--color-cream-100) 97%, transparent);
    border-top: 1px solid var(--color-border)
}

.status-bar__live[data-astro-cid-gpv52hdq] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    min-width: 0
}

.status-bar__segment[data-astro-cid-gpv52hdq] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    color: var(--color-text-secondary);
    transition: color var(--motion-fast) var(--ease-standard)
}

.status-bar__mode[data-astro-cid-gpv52hdq] {
    background: var(--color-surface-subtle)
}

.status-bar__mode-label[data-astro-cid-gpv52hdq] {
    color: color-mix(in srgb, var(--color-black-900) 40%, transparent)
}

.status-bar__mode-value[data-astro-cid-gpv52hdq] {
    color: var(--color-blue-500);
    font-weight: 500
}

.status-bar__path[data-astro-cid-gpv52hdq] {
    min-width: 120px
}

.status-bar__path-prefix[data-astro-cid-gpv52hdq] {
    color: color-mix(in srgb, var(--color-black-900) 40%, transparent)
}

.status-bar__path-value[data-astro-cid-gpv52hdq] {
    color: var(--color-text-primary);
    transition: color var(--motion-fast) var(--ease-standard)
}

.status-bar__spacer[data-astro-cid-gpv52hdq] {
    flex: 1
}

.status-bar__nowplaying[data-astro-cid-gpv52hdq] {
    max-width: 200px;
    overflow: hidden
}

.status-bar__np-icon[data-astro-cid-gpv52hdq] {
    color: var(--color-blue-500);
    flex-shrink: 0
}

.status-bar__np-value[data-astro-cid-gpv52hdq] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-secondary)
}

.status-bar__lastgame[data-astro-cid-gpv52hdq] {
    max-width: 180px;
    overflow: hidden
}

.status-bar__lg-icon[data-astro-cid-gpv52hdq] {
    color: var(--color-blue-500);
    flex-shrink: 0;
    font-size: 9px
}

.status-bar__lg-value[data-astro-cid-gpv52hdq] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-secondary)
}

.status-bar__progress[data-astro-cid-gpv52hdq] {
    gap: 6px
}

.status-bar__progress-value[data-astro-cid-gpv52hdq] {
    min-width: 24px;
    text-align: right;
    font-variant-numeric: tabular-nums
}

.status-bar__progress-suffix[data-astro-cid-gpv52hdq] {
    color: color-mix(in srgb, var(--color-black-900) 40%, transparent)
}

.status-bar__progress-bar[data-astro-cid-gpv52hdq] {
    width: 48px;
    height: 3px;
    background: var(--color-border);
    overflow: hidden
}

.status-bar__progress-fill[data-astro-cid-gpv52hdq] {
    height: 100%;
    width: 100%;
    background: var(--color-blue-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 50ms linear
}

.status-bar__time[data-astro-cid-gpv52hdq] {
    font-variant-numeric: tabular-nums
}

.status-bar__time-value[data-astro-cid-gpv52hdq] {
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0
}

.status-bar__digit[data-astro-cid-gpv52hdq] {
    display: inline-block;
    width: 7px;
    text-align: center;
    overflow: hidden;
    position: relative
}

.status-bar__digit[data-astro-cid-gpv52hdq].is-flipping {
    animation: digit-flip .2s var(--ease-standard)
}

.status-bar__time-sep[data-astro-cid-gpv52hdq] {
    opacity: .7;
    width: 5px;
    text-align: center
}

@keyframes digit-flip {
    0% {
        transform: translateY(-100%);
        opacity: 0
    }
    50% {
        transform: translateY(2px);
        opacity: .7
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.status-bar__help[data-astro-cid-gpv52hdq] {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--color-black-900) 15%, transparent);
    cursor: pointer;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard)
}

.status-bar__help[data-astro-cid-gpv52hdq]:hover {
    background: var(--color-orange-500);
    border-color: var(--color-orange-500);
    color: var(--color-black-900)
}

.status-bar__help-icon[data-astro-cid-gpv52hdq] {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: color var(--motion-fast) var(--ease-standard)
}

.status-bar__help[data-astro-cid-gpv52hdq]:hover .status-bar__help-icon[data-astro-cid-gpv52hdq] {
    color: var(--color-black-900)
}

@media(max-width:600px) {
    .status-bar__inner[data-astro-cid-gpv52hdq] {
        padding: var(--space-2) var(--space-3)
    }
    .status-bar__mode[data-astro-cid-gpv52hdq] {
        display: none
    }
    .status-bar__nowplaying[data-astro-cid-gpv52hdq],
    .status-bar__lastgame[data-astro-cid-gpv52hdq] {
        display: none !important
    }
    .status-bar__progress-bar[data-astro-cid-gpv52hdq],
    .status-bar__help[data-astro-cid-gpv52hdq] {
        display: none
    }
}