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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;

    background: #05070a;
}

body {
    font-family: Arial, sans-serif;
}

canvas {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    touch-action: none;

    cursor: crosshair;
}

.ui {
    position: fixed;

    top: 20px;
    left: 20px;

    padding: 10px 14px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(255,255,255,0.7);

    background: rgba(10,12,16,0.82);

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 8px;

    font-size: 13px;

    user-select: none;

    backdrop-filter: blur(8px);
}

.ui button {
    padding: 7px 13px;

    border-radius: 5px;

    border: 1px solid rgba(255,255,255,0.15);

    background: rgba(255,255,255,0.08);

    color: white;

    cursor: pointer;

    transition: background 0.2s;
}

.ui button:hover {
    background: rgba(255,255,255,0.16);
}

.ui input[type="range"] {
    width: 120px;

    cursor: pointer;
}

#gravityValue {
    min-width: 35px;

    font-variant-numeric: tabular-nums;

    color: rgba(255,255,255,0.9);
}

.hint {
    margin-left: 8px;

    color: rgba(255,255,255,0.4);
}