/* icons */
.ico {
  display: inline-block; width: 18px; height: 18px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.ico-cube { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 2.4 21 7.2v9.6l-9 4.8-9-4.8V7.2l9-4.8Z'/%3E%3Cpath d='m3 7.2 9 5 9-5M12 22.2V12.2'/%3E%3C/svg%3E"); }
.ico-walk { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.2' cy='4.1' r='2.1'/%3E%3Cpath d='m11.2 8.2-1.8 5.4 3.1 2.1 1.7 5.4M9.4 13.6l-2.8 5.6M11.2 8.2l4.1 1.2 2.6 4.2M12.5 15.7l-3.9 3.6'/%3E%3C/svg%3E"); }
.ico-play-min { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5.3v13.4L19 12 8 5.3Z'/%3E%3C/svg%3E"); }
.ico-sun { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Cpath d='M12 2v2.4M12 19.6V22M2 12h2.4M19.6 12H22M4.9 4.9l1.7 1.7M17.4 17.4l1.7 1.7M19.1 4.9l-1.7 1.7M6.6 17.4l-1.7 1.7'/%3E%3C/svg%3E"); }
.ico-moon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.4 14.6A8.9 8.9 0 0 1 9.4 3.6a8.9 8.9 0 1 0 11 11Z'/%3E%3C/svg%3E"); }
.ico-sound { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.2h3.4L12.5 5v14l-5.1-4.2H4a1 1 0 0 1-1-1v-3.6a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M16 8.2a5.3 5.3 0 0 1 0 7.6M18.9 5.5a9.1 9.1 0 0 1 0 13'/%3E%3C/svg%3E"); }
.ico-help { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M9.4 9.1a2.8 2.8 0 1 1 3.9 2.6c-.9.4-1.3 1-1.3 2.1M12 17.2v.1'/%3E%3C/svg%3E"); }
.ico-buildings { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M4 21V8.7L11 4v17M11 21V11l9-4v14M2.5 21h19'/%3E%3Cpath d='M7 9.5v1.2M7 13v1.2M7 16.5v1.2M14.5 12v1.1M14.5 15v1.1M17.3 11v1.1M17.3 14v1.1'/%3E%3C/svg%3E"); }
.ico-road { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M8 3 4.4 21M16 3l3.6 18M12 3v3M12 9v3M12 15v3M12 21'/%3E%3C/svg%3E"); }
.ico-leaf { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C11 4 5.4 7 5 13.5c-.1 2.2 1.6 4.2 3.8 4.2C15.4 17.7 18.8 11 20 4Z'/%3E%3Cpath d='M4 21c1.5-4.5 5-8.4 10-11'/%3E%3C/svg%3E"); }
.ico-light { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18.2h6M9.7 21h4.6M8 14.5a6.3 6.3 0 1 1 8 0c-.9.6-1.3 1.4-1.3 2.3H9.3c0-.9-.4-1.7-1.3-2.3Z'/%3E%3Cpath d='M12 2.6V1M3.7 6.2 2.5 5.5M20.3 6.2l1.2-.7'/%3E%3C/svg%3E"); }
.ico-pin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M19 10.2c0 5-7 11.3-7 11.3S5 15.2 5 10.2a7 7 0 1 1 14 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ico-reset { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5v6h6M4.6 10.5A8 8 0 1 1 4 14'/%3E%3C/svg%3E"); }
.ico-arrow { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M8 5h11v11'/%3E%3C/svg%3E"); }
.ico-exit { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H4v16h6M14 8l4 4-4 4M18 12H8'/%3E%3C/svg%3E"); }
.ico-play { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5.3v13.4L19 12 8 5.3Z'/%3E%3C/svg%3E"); }
.ico-pause { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='7' y='5' width='3.4' height='14' rx='.5'/%3E%3Crect x='13.6' y='5' width='3.4' height='14' rx='.5'/%3E%3C/svg%3E"); }