/* Hype Network colours */
:root {
  /* surfaces */
  --hype-ground: #000000;      /* every screen's ground */
  --hype-sheet: #09080b;       /* sheets over the ground */
  --hype-raise: #121114;       /* raised panels, chips */
  --hype-track: #2a282e;       /* empty tracks, gauges' unlit segments */
  --hype-hair: rgba(255, 255, 255, 0.09);  /* hairlines, rails */
  /* ink */
  --hype-ink: #ffffff;
  --hype-ink-2: rgba(255, 255, 255, 0.62);
  --hype-ink-3: rgba(255, 255, 255, 0.38);
  /* accent: violet only for progress, active and the boost */
  --hype-violet: #7a1ae6;
  --hype-violet-hi: #a97bff;
  /* states */
  --hype-gain: #3ddc97;
  --hype-warn: #ffc56b;
  /* space */
  --hype-space-gap: 6px;       /* the fin gap: parts separate by space, never by borders */
  --hype-space-row: 15px;
  --hype-space-screen: 20px;
  --hype-space-section: 26px;
  /* shape: 30deg corner cuts, the 60deg flight axis */
  --hype-cut-x: 16px;
  --hype-cut-y: 9.24px;
  --hype-chip-cut-x: 8px;
  --hype-chip-cut-y: 4.62px;
  --hype-lean: 4px;
}
/* the brand's cut: top-left and bottom-right corners cut at 30deg */
.hype-cut {
  clip-path: polygon(var(--hype-cut-x) 0, 100% 0, 100% calc(100% - var(--hype-cut-y)), calc(100% - var(--hype-cut-x)) 100%, 0 100%, 0 var(--hype-cut-y));
}