html { scroll-behavior: smooth; }
body {
    font-family: 'Manrope', sans-serif;
    background-color: #000000;
    transition: background-color 0.1s ease;
    /* Add padding to prevent content from being hidden by fixed banners */
    padding-top: 64px; /* Height of the top banner */
    padding-bottom: 56px; /* Height of the bottom banner */
}
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Hide number input arrows */
input[type=number] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Custom Color Picker Popup */
.picker_wrapper {
    box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05);
    border: 1px solid #333;
}

/* Clock Ticks */
.tick {
    position: absolute;
    background-color: white;
    left: 50%;
    top: 50%;
    transform-origin: center;
}
.major-tick { width: 4px; height: 24px; }
.minor-tick { width: 2px; height: 12px; }

/* Custom input and button styles for consistency */
.control-input {
        background-color: #111;
        border: 1px solid #333;
        color: #fff;
}
.control-input:disabled { opacity: 0.5; cursor: not-allowed; }
.control-btn {
    background-color: #222;
    color: #eee;
    border: 1px solid #444;
    transition: all 0.2s ease;
}
.control-btn:hover:not(:disabled) { background-color: #333; border-color: #555; }
.control-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.control-btn-primary { background-color: #fff; color: #000; border-color: #fff; }
.control-btn-primary:hover:not(:disabled) { background-color: #ddd; }