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

    :root {
      --brand:    #8B3A0F;
      --brand-d:  #6e2d0b;
      --surface:  #ffffff;
      --surface2: #f8f7f6;
      --surface3: #f1efed;
      --border:   #e4e0dc;
      --border2:  #ccc8c3;
      --text:     #1a1816;
      --text2:    #5a5652;
      --text3:    #9b9590;
      --accent:   #1a5fb4;
      --green:    #2a7a38;
      --red:      #c0392b;
      --r:        5px;
      --r2:       8px;
      --shadow:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
      --shadow2:  0 4px 16px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
    }

    body {
      background: var(--surface2);
      display: flex; flex-direction: column;
      height: 100vh; overflow: hidden;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 12px; color: var(--text);
      -webkit-font-smoothing: antialiased;
    }