:root {
      /* Gold — deep, precious, genuine */
      --g1: #96700A;
      --g2: #C49520;
      --g3: #DDB84A;
      --g4: #EDD68C;
      --g5: #FBF5E0;
      --g6: #FFFAEE;
      --gold-grad: linear-gradient(135deg,#7A5800 0%,#B8860B 40%,#D4A843 75%,#EDD050 100%);
      --gold-grad2: linear-gradient(135deg,#96700A 0%,#C49520 100%);
      /* Ink — warm charcoal */
      --ink: #0E0C08;
      --ink1: #1C1912;
      --ink2: #3A3020;
      --ink3: #8A7E68;
      /* Surfaces — warm white / cream */
      --surface: #FFFFFF;
      --bg: #F9F6F0;
      --bg2: #F0EBE0;
      --border: #E6DDD0;
      --border2: #D0C4B0;
      /* Semantic */
      --red: #B83222;
      --green: #1A6B3A;
      --blue: #1A3880;
      /* Sidebar */
      --sb: #0E0C08;
      --sb2: #1A1710;
      --sb-border: rgba(196,149,32,.14);
      /* Layout */
      --sw: 256px;
      --r: 10px;
      --r2: 14px;
      --r3: 20px;
      /* Shadows — stronger, warmer */
      --sh1: 0 1px 4px rgba(60,40,0,.06),0 4px 20px rgba(60,40,0,.07);
      --sh2: 0 4px 20px rgba(60,40,0,.09),0 16px 48px rgba(60,40,0,.08);
      --sh3: 0 8px 40px rgba(60,40,0,.14),0 32px 80px rgba(60,40,0,.10);
      --sh-gold: 0 4px 28px rgba(180,130,10,.28);
      --gold: #C49520;
      --surface2: #F0EBE0;
    }

    *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
    html{font-size:15px}
    body{
      font-family:'Inter',sans-serif;
      background:var(--bg);
      color:var(--ink);
      min-height:100vh;
      display: flex;
      line-height: 1.5
    }

    ::-webkit-scrollbar{width:5px;height:5px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px}
    ::-webkit-scrollbar-thumb:hover{background:var(--g2)}

    @keyframes shimmerSwipe{
      0%  {background-position:-250% center}
      100%{background-position:250% center}
    }
    @keyframes ruleExpand{
      from{width:0;opacity:0}
      to  {width:56px;opacity:1}
    }
    @keyframes cornerDraw{
      from{opacity:0;transform:scale(.6)}
      to  {opacity:1;transform:scale(1)}
    }
    @keyframes dotBreath{
      0%,100%{opacity:.25;transform:scale(1)}
      50%    {opacity:1;transform:scale(1.45)}
    }
    @keyframes tagFadeIn{
      from{opacity:0;letter-spacing:5px}
      to  {opacity:1;letter-spacing:2.5px}
    }
    @keyframes staffIn{
      from{opacity:0;transform:translateX(20px)}
      to  {opacity:1;transform:translateX(0)}
    }
    @keyframes cardIn{
      from{opacity:0;transform:translateY(20px)}
      to  {opacity:1;transform:translateY(0)}
    }
    @keyframes brandIn{
      from{opacity:0;transform:translateY(14px)}
      to  {opacity:1;transform:translateY(0)}
    }
    @keyframes floatUp{
      0%  {transform:translateY(0);opacity:0}
      8%  {opacity:.8}
      85% {opacity:.4}
      100%{transform:translateY(-110vh);opacity:0}
    }
    @keyframes sparkle{
      0%,100%{opacity:0;transform:scale(0) rotate(0deg)}
      30%    {opacity:1;transform:scale(1.3) rotate(30deg)}
      55%    {opacity:.8;transform:scale(1) rotate(60deg)}
      80%    {opacity:.4;transform:scale(.7) rotate(90deg)}
    }
    @keyframes gemFloat{
      0%,100%{transform:translateY(0);filter:drop-shadow(0 8px 20px rgba(150,112,10,.3))}
      50%    {transform:translateY(-7px);filter:drop-shadow(0 16px 32px rgba(150,112,10,.45))}
    }
    @keyframes ringPulse{
      0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(1)}
      50%    {opacity:.15;transform:translate(-50%,-50%) scale(1.08)}
    }
    @keyframes ringPulse2{
      0%,100%{opacity:.15;transform:translate(-50%,-50%) scale(1)}
      50%    {opacity:.06;transform:translate(-50%,-50%) scale(1.14)}
    }

    @keyframes un-spin { to { transform: rotate(360deg); } }

    @keyframes aiDot {

      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: .4
      }

      30% {
        transform: translateY(-5px);
        opacity: 1
      }
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0)
      }

      20%,
      60% {
        transform: translateX(-8px)
      }

      40%,
      80% {
        transform: translateX(8px)
      }
    }