:root {
  --splanet-ui-kit-root: "/img/ui/splanet-toy-ui-kit-v1";
  --splanet-ui-ink: #122638;
  --splanet-ui-panel: #f7fbff;
  --splanet-ui-red: #f15945;
  --splanet-ui-blue: #168ff0;
  --splanet-ui-yellow: #f3bc26;
  --splanet-ui-green: #5fbd38;
  --splanet-ui-panel-frame: url("./panel-frame.webp");
  --splanet-ui-badge-capsule: url("./badge-capsule.webp");
  --splanet-ui-badge-ribbon: url("./badge-ribbon.webp");
  --splanet-ui-badge-alert: url("./badge-alert.webp");
  --splanet-ui-badge-token: url("./badge-token.webp");
  --splanet-ui-hud-tray: url("./hud-tray.webp");
  --splanet-ui-board-bg: url("./board-bg.webp");
  --splanet-ui-button-square: url("./button-square.webp");
  --splanet-ui-button-square-active: url("./button-square-active.webp");
  --splanet-ui-button-square-pressed: url("./button-square-pressed.webp");
  --splanet-ui-button-square-disabled: url("./button-square-disabled.webp");
  --splanet-ui-meter-track: url("./meter-track.webp");
  --splanet-ui-minimap-frame: url("./minimap-frame.webp");
  --splanet-ui-command-tray: url("./command-tray.webp");
  --splanet-ui-chip-capsule-small: url("./chip-capsule-small.webp");
  --splanet-ui-notification-plaque: url("./notification-plaque.webp");
  --splanet-ui-panel-frame-border: var(--splanet-ui-panel-frame) 120 fill / 120px / 0 stretch;
  --splanet-ui-badge-capsule-border: var(--splanet-ui-badge-capsule) 54 fill / 54px 86px / 0 stretch;
  --splanet-ui-badge-ribbon-border: var(--splanet-ui-badge-ribbon) 46 fill / 46px 92px 46px 118px / 0 stretch;
  --splanet-ui-badge-alert-border: var(--splanet-ui-badge-alert) 78 96 104 96 fill / 78px 96px 104px / 0 stretch;
  --splanet-ui-hud-tray-border: var(--splanet-ui-hud-tray) 116 fill / 116px 160px 150px / 0 stretch;
  --splanet-ui-meter-track-border: var(--splanet-ui-meter-track) 54 92 fill / 34px 58px / 0 stretch;
  --splanet-ui-minimap-frame-border: var(--splanet-ui-minimap-frame) 92 102 86 102 fill / 46px 52px 44px / 0 stretch;
  --splanet-ui-command-tray-border: var(--splanet-ui-command-tray) 76 118 70 118 fill / 34px 56px / 0 stretch;
  --splanet-ui-chip-capsule-small-border: var(--splanet-ui-chip-capsule-small) 58 120 58 92 fill / 24px 48px / 0 stretch;
  --splanet-ui-notification-plaque-border: var(--splanet-ui-notification-plaque) 76 120 fill / 32px 58px / 0 stretch;
}

.splanet-toy-panel {
  box-sizing: border-box;
  border: 64px solid transparent;
  border-image: var(--splanet-ui-panel-frame) 120 fill / 64px / 0 stretch;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-capsule {
  box-sizing: border-box;
  border: 18px solid transparent;
  border-image: var(--splanet-ui-badge-capsule) 54 fill / 18px 34px / 0 stretch;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-ribbon {
  box-sizing: border-box;
  border: 20px solid transparent;
  border-image: var(--splanet-ui-badge-ribbon) 46 fill / 20px 46px 20px 58px / 0 stretch;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-alert {
  box-sizing: border-box;
  border: 32px solid transparent;
  border-image: var(--splanet-ui-badge-alert) 78 96 104 96 fill / 30px 42px 34px / 0 stretch;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-tray {
  box-sizing: border-box;
  border: 36px solid transparent;
  border-image: var(--splanet-ui-hud-tray) 116 fill / 34px 56px 38px / 0 stretch;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-token {
  display: inline-grid;
  place-items: center;
  color: var(--splanet-ui-ink);
  background: var(--splanet-ui-badge-token) center / 100% 100% no-repeat;
}

.splanet-toy-button-square {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--splanet-ui-ink);
  background: var(--splanet-ui-button-square) center / 100% 100% no-repeat;
}

.splanet-toy-button-square.is-active {
  background-image: var(--splanet-ui-button-square-active);
}

.splanet-toy-button-square.is-pressed {
  background-image: var(--splanet-ui-button-square-pressed);
}

.splanet-toy-button-square.is-disabled {
  background-image: var(--splanet-ui-button-square-disabled);
}

.splanet-toy-meter-track {
  box-sizing: border-box;
  border: 28px solid transparent;
  border-image: var(--splanet-ui-meter-track) 54 92 fill / 26px 48px / 0 stretch;
  min-width: 260px;
  min-height: 42px;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-minimap-frame {
  box-sizing: border-box;
  border: 46px solid transparent;
  border-image: var(--splanet-ui-minimap-frame) 92 102 86 102 fill / 46px 52px 44px / 0 stretch;
  min-width: 300px;
  min-height: 170px;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-command-tray {
  box-sizing: border-box;
  border: 34px solid transparent;
  border-image: var(--splanet-ui-command-tray) 76 118 70 118 fill / 34px 56px / 0 stretch;
  min-width: 420px;
  min-height: 108px;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-surface-command-wheel {
  display: inline-grid;
  width: 256px;
  height: 256px;
  color: var(--splanet-ui-ink);
  border: 3px solid rgba(18, 38, 56, .72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 36px, rgba(255, 255, 255, .96) 37px 100px, transparent 101px),
    repeating-conic-gradient(from -30deg, rgba(18, 38, 56, .18) 0deg 1deg, transparent 1deg 60deg),
    conic-gradient(from -30deg, #f7fbff 0deg 56deg, #deebf4 56deg 60deg, #f7fbff 60deg 116deg, #deebf4 116deg 120deg, #f7fbff 120deg 176deg, #deebf4 176deg 180deg, #f7fbff 180deg 236deg, #deebf4 236deg 240deg, #f7fbff 240deg 296deg, #deebf4 296deg 300deg, #f7fbff 300deg 356deg, #deebf4 356deg 360deg);
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, .72),
    inset 0 -12px 0 rgba(18, 38, 56, .06),
    0 12px 22px rgba(16, 36, 56, .24);
}

.splanet-toy-chip-small {
  box-sizing: border-box;
  border: 24px solid transparent;
  border-image: var(--splanet-ui-chip-capsule-small) 58 120 58 92 fill / 22px 46px / 0 stretch;
  min-width: 180px;
  min-height: 54px;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-notification-plaque {
  box-sizing: border-box;
  border: 34px solid transparent;
  border-image: var(--splanet-ui-notification-plaque) 76 120 fill / 30px 56px / 0 stretch;
  min-width: 260px;
  min-height: 86px;
  color: var(--splanet-ui-ink);
  background: transparent;
}

.splanet-toy-tooltip-plaque {
  box-sizing: border-box;
  border: 2px solid rgba(18, 38, 56, .42);
  border-radius: 12px;
  min-width: 190px;
  min-height: 62px;
  color: var(--splanet-ui-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(235, 244, 250, .96));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .68),
    inset 0 -4px 0 rgba(18, 38, 56, .06),
    0 8px 14px rgba(16, 36, 56, .18);
}