:root {
    --dwse-bg: #f7f8fc;
    --dwse-surface: rgba(255, 255, 255, 0.84);
    --dwse-surface-solid: #ffffff;
    --dwse-text: #131522;
    --dwse-text-soft: #5d6377;
    --dwse-border: rgba(17, 24, 39, 0.08);
    --dwse-brand: #5b5df0;
    --dwse-brand-2: #7c3aed;
    --dwse-shadow: 0 20px 50px rgba(17, 24, 39, 0.10);
    --dwse-radius: 22px;
    --dwse-container: 1240px;
    --dwse-header-height: 84px;
    --dwse-transition: 240ms ease;
}

html[data-theme='dark'] {
    --dwse-bg: #090b14;
    --dwse-surface: rgba(17, 19, 31, 0.84);
    --dwse-surface-solid: #101321;
    --dwse-text: #f3f6ff;
    --dwse-text-soft: #a7b0c4;
    --dwse-border: rgba(255, 255, 255, 0.08);
    --dwse-brand: #8b5cf6;
    --dwse-brand-2: #38bdf8;
    --dwse-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--dwse-text);
    background:
        radial-gradient(circle at top left, rgba(91, 93, 240, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.10), transparent 24%),
        var(--dwse-bg);
    transition: background var(--dwse-transition), color var(--dwse-transition);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

code {
    background: rgba(127, 127, 127, 0.12);
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    font-size: 0.92em;
}

.dwse-container {
    width: min(calc(100% - 2rem), var(--dwse-container));
    margin-inline: auto;
}