:root {
    /* inspired by https://www.iamsajid.com/ui-colors/ */
    --hue: 300;
    --hue-secondary: calc(var(--hue) + 180);
    --chroma: 0.1;
    --chroma-bg: calc(var(--chroma) * 0.5);
    --chroma-text: min(var(--chroma), 0.1);
    --chroma-action: max(var(--chroma), 0.1);
    --chroma-alert: max(var(--chroma), 0.05);

    --bg-dark: oklch(0.1 var(--chroma-bg) var(--hue));
    --bg: oklch(0.15 var(--chroma-bg) var(--hue));
    --bg-light: oklch(0.2 var(--chroma-bg) var(--hue));

    --gradient: linear-gradient(0deg, var(--bg) 97%, var(--bg-light));
    --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

    --text: oklch(0.96 var(--chroma-text) var(--hue));
    --text-muted: oklch(0.76 var(--chroma-text) var(--hue));

    --highlight: oklch(0.5 var(--chroma) var(--hue));
    --border: oklch(0.4 var(--chroma) var(--hue));
    --border-muted: oklch(0.3 var(--chroma) var(--hue));
    --border-card: solid 1px var(--border-muted);

    --primary: oklch(0.76 var(--chroma-action) var(--hue));
    --secondary: oklch(0.76 var(--chroma-action) var(--hue-secondary));

    --danger: oklch(0.7 var(--chroma-alert) 30);
    --warning: oklch(0.7 var(--chroma-alert) 100);
    --success: oklch(0.7 var(--chroma-alert) 160);
    --info: oklch(0.7 var(--chroma-alert) 260);

    --shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.content h1 {
    font-size: 4rem;
    color: var(--primary);
    text-shadow: var(--shadow);
    letter-spacing: 0.1em;
}

#graph {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.color-controls {
    background: var(--bg-light), 0.1;
    backdrop-filter: blur(5px);
    border: var(--border-card);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: var(--shadow);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.control-group:last-child {
    margin-bottom: 0;
}

.control-group label {
    color: var(--text);
    min-width: 60px;
    text-align: left;
}

.slider-container {
    flex: 1;
    position: relative;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
}

.control-group input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    outline: none;
    appearance: none;
    cursor: pointer;
    z-index: 2;
}

.control-group input[type="range"]::-webkit-slider-thumb,
.control-group input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    background: var(--text);
    width: 20px;
    height: 20px;
    border: 3px solid var(--bg);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border), var(--shadow);
    cursor: pointer;
    z-index: 3;
}

.control-group input[type="range"]::-moz-range-track {
    background: transparent;
    height: 24px;
    border-radius: 12px;
}

.slider-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    z-index: 1;
}

.hue-track {
    background: linear-gradient(
        90deg,
        oklch(0.6 var(--chroma) 20),
        oklch(0.6 var(--chroma) 60),
        oklch(0.6 var(--chroma) 100),
        oklch(0.6 var(--chroma) 140),
        oklch(0.6 var(--chroma) 180),
        oklch(0.6 var(--chroma) 220),
        oklch(0.6 var(--chroma) 260),
        oklch(0.6 var(--chroma) 300),
        oklch(0.6 var(--chroma) 340)
    );
}

.chroma-track {
    background: linear-gradient(
        to right,
        oklch(0.76 0 var(--hue)),
        oklch(0.76 0.1 var(--hue)),
        oklch(0.76 0.2 var(--hue)),
        oklch(0.76 0.3 var(--hue)),
        oklch(0.76 0.37 var(--hue))
    );
}

.control-group span {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border-muted);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    min-width: 42px;
    font-family: monospace;
    font-size: 0.85rem;
    text-align: right;
}