/* =========================================================
   GLOBAL INTERACTIVE ELEMENT OVERRIDES
   Targets: select, button, input[type="color"]
   Uses !important to ensure live override
   ========================================================= */

/* -------------------------------
   1. Base Interactive Reset
-------------------------------- */
select,
button,
input[type="color"] {
  font-family: 'Arial' !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;

  background-color: #000 !important;
  color: #bdbdbd !important;

  border: 1px solid #222 !important;
  border-radius: 8px !important;

  padding: 10px 10px !important;
  outline: none !important;

  transition: all 0.15s ease !important;
}

/* -------------------------------
   2. Hover State
-------------------------------- */
select:hover,
button:hover,
input[type="color"]:hover {
  border-color: #2a2a2a !important;
}

/* -------------------------------
   3. Active / Press State
-------------------------------- */
button:active {
  transform: translateY(1px) !important;
}

/* -------------------------------
   4. Focus State
-------------------------------- */
select:focus,
button:focus,
input[type="color"]:focus {
  border-color: #3a3a3a !important;
  box-shadow: none !important;
}

/* -------------------------------
   5. Disabled State
-------------------------------- */
button:disabled,
select:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* -------------------------------
   6. Color Input Specific
-------------------------------- */
input[type="color"] {
  height: 30px !important;
  width: 100% !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* -------------------------------
   7. Range Input Styling
-------------------------------- */
input[type="range"] {
  width: 100% !important;
  accent-color: #5a5a5a !important;
  cursor: pointer !important;
}

/* -------------------------------
   8. Optional: Make All Controls
      Slightly More Brutal / Clean
-------------------------------- */
select,
button {
  text-transform: uppercase !important;
}
/* =========================================================
   FONT TOKENS — CENTRALIZED FONT STYLES
   Update here to change fonts everywhere
   ========================================================= */

/* — Primary UI Font (controls, labels, buttons) — */
:root {
  --font-ui: 'Arial' !important;
  --font-display: 'Arial', sans-serif !important;
  --font-mono: 'Arial' !important;

  --font-size-small: 10px !important;
  --font-size-ui: 12px !important;
  --font-size-display: 1.15rem !important;

  --letter-spacing-ui: 1px !important;
  --letter-spacing-display: 2px !important;
}

/* — Apply to interactive elements — */
select,
button,
input[type="color"] {
  font-family: var(--font-ui) !important;
  font-size: var(--font-size-ui) !important;
  letter-spacing: var(--letter-spacing-ui) !important;
}

/* — Apply monospace to code-like outputs — */
.row output,
.row .val,
.meta,
.statusbar {
  font-family: var(--font-mono) !important;
}

/* — Display / Headline fonts — */
.frtick {
  font-family: var(--font-display) !important;
  font-size: var(--font-size-display) !important;
  letter-spacing: var(--letter-spacing-display) !important;
}
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 600px;
    padding: 50px !important;
    background: #111;
    border-left: none;
    backdrop-filter: none;
    overflow: auto;
    transform: translateX(100%);
    transition: transform 1s ease !important;
    z-index: 50;
}
.wrap {
   background: #000 !important;
}
.statusbar {
   display: none !important;
}
.row2 {
       display: inherit !important;
}

.housing::before {
    content: 'AmitR9 · 002.A';
    position: absolute;
    top: 0px;
    left: 10px;
    font-size: 10px;
    color: #fff;
    letter-spacing: 0px;
    text-transform: uppercase;
    user-select: none;
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
}