:root {
    --bg: #0a0c11;
    --bg-deep: #06080c;
    --panel: #11141b;
    --panel-2: #161a23;
    --field: #0c0f17;
    --ink: #e7ecf3;
    --text: #e7ecf3;
    --muted: #6c7689;
    --dim: #3d4555;
    --line: #1d2230;
    --line-2: #2a3142;
    --line-hot: #ff2d7a;
    --accent: #ff2d7a;
    --accent-2: #00d4ff;
    --hot: #ff2d7a;
    --amber: #ffb000;
    --cyan: #00d4ff;
    --lime: #bfff00;
    --danger: #ff3344;
    --lane-square: #ff2d7a;
    --lane-sine: #00d4ff;
    --lane-sawtooth: #ffb000;
    --lane-triangle: #bfff00;
    --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
    --sans: "Barlow Condensed", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--bg-deep);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

button,
input,
select {
    font: inherit;
}

input,
select {
    font-family: var(--mono);
}

button {
    cursor: pointer;
}

#app {
    min-height: 100vh;
}