:root {
  color-scheme: dark;

  --bg:            #04080D;
  --sky:           #000C21;
  --surface:       #0A1017;
  --panel:         #0B1119;
  --chip:          rgba(255, 255, 255, .08);
  --chip-hover:    rgba(255, 255, 255, .15);
  --backdrop:      rgba(2, 5, 10, .70);

  --ink:           #FBFCFD;
  --ink-2:         #EDEFF2;
  --ink-3:         #9DA0A5;
  --card-ink:      #FBFCFD;

  --accent:        #D4AD7F;

  --display-halo:  rgba(0, 6, 14, .78);

  --glow-line:      rgba(168, 200, 250, .88);
  --glow-line-soft: rgba(130, 170, 240, .30);
  --glow-halo:      rgba( 28, 105, 255, .55);
  --glow-spark:     rgba(228, 241, 255, .95);

  --badge-ink:     #D4AD7F;
  --card-accent:   #D4AD7F;
  --accent-soft:   rgba(212, 173, 127, .10);
  --accent-line:   rgba(212, 173, 127, .42);
  --icon-ink:      var(--accent);
  --hairline:      rgba(255, 255, 255, .13);
  --edge:          rgba(255, 255, 255, .17);
  --panel-edge:    rgba(212, 173, 127, .40);
  --focus:         #7FB2FF;

  --cta-1:         #4473E6;
  --cta-2:         #1B3E9B;
  --cta-3:         #001545;
  --cta-edge:      rgba(154, 194, 255, .40);
  --cta-glow:      rgba(12, 52, 158, .36);
  --cta-sheen:     rgba(255, 255, 255, .28);
  --on-brand:      #fff;

  --icon-ring:     rgba(255, 255, 255, .82);

  --card-veil-1:   rgba(3, 6, 11, .86);
  --card-veil-2:   rgba(3, 6, 11, .44);
  --card-veil-3:   rgba(3, 6, 11, 0);

  --panel-veil-1:  rgba(11, 17, 25, 0);
  --panel-veil-2:  rgba(11, 17, 25, .62);

  --shadow-card:       0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, .44);
  --shadow-card-hover: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .55);

  --photo-bottom:  -430;
  --photo-width:   100;
  --photo-shift:   0;
  --photo-filter:  none;

  --shade-height: 700;
  --shade: linear-gradient(to bottom,
    rgba(3, 9, 18, .72)    0%,
    rgba(3, 9, 18, .66) 11.2%,
    rgba(3, 9, 18, .62) 22.1%,
    rgba(3, 9, 18, .58) 34.1%,
    rgba(4, 10, 20, .53) 46.1%,
    rgba(4, 10, 20, .46) 58.0%,
    rgba(4, 10, 20, .30) 70.0%,
    rgba(4, 10, 20, .15) 83.1%,
    rgba(4, 10, 20, .05) 92.9%,
    rgba(4, 10, 20, 0)  100%);

  --fade-height: 660;
  --fade: linear-gradient(to top,
    #04080D              0%,
    rgba(4, 8, 13, .97) 15%,
    rgba(4, 8, 13, .90) 30%,
    rgba(4, 8, 13, .78) 41%,
    rgba(4, 8, 13, .70) 48%,
    rgba(4, 8, 13, .58) 53%,
    rgba(4, 8, 13, .38) 69%,
    rgba(4, 8, 13, .18) 84%,
    rgba(4, 8, 13, 0)  100%);

  --ambient:       #02060B;
  --ambient-image: url(../images/bg.avif);
  --ambient-blur:  90px;
  --ambient-dim:   .62;
  --ambient-veil:  radial-gradient(110% 80% at 50% 46%,
                     rgba(2, 6, 11, 0)   42%,
                     rgba(1, 4, 9, .55)  78%,
                     rgba(1, 4, 9, .82) 100%);
}

.canvas__grade {
  background: linear-gradient(100deg,
    rgba(2, 6, 12, .10)  0%,
    rgba(2, 6, 12, .04) 30%,
    rgba(2, 6, 12, 0)   55%);
}