:root {
    color-scheme: dark;
    --bg: #09080d;
    --panel: #111016;
    --panel-strong: #17151d;
    --panel-soft: #0e0d12;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.15);
    --text: #f8f6fb;
    --muted: #a39eab;
    --quiet: #716c79;
    --success: #67dca1;
    --warning: #f4b860;
    --danger: #ff6b78;
    --accent-1: #7034cf;
    --accent-2: #332cd1;
    --accent-3: #ab39cc;
    --accent-1-rgb: 112, 52, 207;
    --accent-2-rgb: 51, 44, 209;
    --accent-3-rgb: 171, 57, 204;
    --radius: 18px;

}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    overflow-x: clip;
    overflow-y: auto;
    background: var(--bg);
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100dvh;
    overflow: visible;
    color: var(--text);
    background: var(--bg);
    font-family: "DM Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
select {
    font: inherit;
}

button,
a,
select {
    -webkit-tap-highlight-color: transparent;
}

button,
select {
    color: inherit;
}

a {
    color: inherit;
}

.icon-mask::before {
    display: block;
    width: 58%;
    height: 58%;
    background-color: currentColor;
    content: "";
    -webkit-mask-image: var(--icon-image);
    mask-image: var(--icon-image);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-mode: alpha;
}

button:focus-visible,
a:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-3);
    outline-offset: 3px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 77% -8%, rgba(var(--accent-1-rgb), 0.2), transparent 32rem),
        radial-gradient(circle at 48% 98%, rgba(var(--accent-3-rgb), 0.07), transparent 34rem);
    transition: background 350ms ease;
}