:root {
    --text-color: #3c4252;
    --muted-color: #858ca3;
    --border-color: #e3e6f0;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-alt: rgba(255, 255, 255, 0.98);

    --accent-1: #ff5e7e;
    --accent-glow: rgba(255, 122, 90, 0.16);

    --button-gradient: linear-gradient(120deg, #ff5e7e, #ff9a3d);
    --button-shadow: rgba(255, 110, 90, 0.35);
    --button-shadow-hover: rgba(255, 110, 90, 0.45);

    --thumb-gradient: linear-gradient(135deg, #ff5e7e, #ff9a3d);
    --range-track: #eceef5;

    --progress-gradient: linear-gradient(90deg, #ff5e7e, #ff9a3d, #f0c93d);

    --spinner-track: rgba(255, 110, 90, 0.2);
    --spinner-accent: #ff9a3d;

    --preview-shadow: rgba(76, 82, 105, 0.18);
}

body {
    color: var(--text-color);
    background:
        radial-gradient(38rem 30rem at 12% -5%, rgba(255, 122, 90, 0.18), transparent 65%),
        radial-gradient(36rem 30rem at 105% 5%, rgba(255, 190, 60, 0.2), transparent 60%),
        radial-gradient(42rem 34rem at 50% 115%, rgba(84, 227, 172, 0.16), transparent 65%),
        linear-gradient(180deg, #fdf7f2 0%, #f7f6fb 100%);
}

h1 {
    background: linear-gradient(120deg, #ff5e7e, #ff9a3d 55%, #f7b23d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h1::after {
    content: "";
    display: block;
    height: 5px;
    width: min(220px, 55%);
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff5e7e, #ff9a3d, #54e3ac);
}

h2 {
    color: #2d3242;
}

h2::before {
    content: "";
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.6rem;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff5e7e, #ff9a3d);
    transform: rotate(12deg);
}

p:first-of-type a {
    background: var(--accent-glow);
    padding: 0.05em 0.35em;
    border-radius: 6px;
}

.widget {
    background: var(--surface);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 40px rgba(76, 82, 105, 0.12);
}

.progress-bar {
    background: #eceef5;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 3px rgba(76, 82, 105, 0.12);
}

a {
    color: #e4526f;
    text-decoration: none;
    border-bottom: #e4526f 0.09em solid;
    transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover {
    color: #ff7a5a;
    border-color: #ff7a5a;
}