/* Oscrient - Gradient Generator Styles */

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --bg-primary: #000;
    --accent: #3ce0ff;
    --text-primary: #fff;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: "IBM Plex Mono", "SF Mono", "Consolas", monospace;
}

#gradient-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}

.lil-gui-host {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 20;
    max-height: calc(100vh - 24px);
    overflow: auto;
    border-radius: 14px;
}

.lil-gui-host .lil-gui {
    --background-color: rgba(20, 20, 20, 0.96);
    --title-background-color: rgba(28, 28, 28, 0.98);
    --widget-color: rgba(10, 10, 10, 0.96);
    --hover-color: rgba(36, 36, 36, 0.98);
    --focus-color: #3ce0ff;
    --number-color: #3ce0ff;
    --string-color: #fff;
    --text-color: #fff;
    width: min(360px, calc(100vw - 24px));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    backdrop-filter: none;
}

.lil-gui input,
.lil-gui select,
.lil-gui button {
    font-family: inherit;
}