/* DIBUAT web\_buat_bingkai.py - jangan disunting tangan. Bingkai HUD sudut-terpotong (SVG 9-iris). */
:root{
  --b-besar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2814%2C34%2C120%2C.50%29'/%3E%3Cstop offset='1' stop-color='rgba%285%2C12%2C52%2C.62%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M27.7 1.7H92.3L118.3 27.7V92.3L92.3 118.3H27.7L1.7 92.3V27.7Z' fill='url%28%23g%29' stroke='%232fd8ff' stroke-opacity='1.00' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M31.2 7.7H88.8L112.3 31.2V88.8L88.8 112.3H31.2L7.7 88.8V31.2Z' fill='none' stroke='%232fd8ff' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E");
  --b-lembar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2810%2C26%2C96%2C.98%29'/%3E%3Cstop offset='1' stop-color='rgba%285%2C12%2C52%2C.98%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M27.7 1.7H92.3L118.3 27.7V92.3L92.3 118.3H27.7L1.7 92.3V27.7Z' fill='url%28%23g%29' stroke='%232fd8ff' stroke-opacity='1.00' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M31.2 7.7H88.8L112.3 31.2V88.8L88.8 112.3H31.2L7.7 88.8V31.2Z' fill='none' stroke='%232fd8ff' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E");
  --b-ubin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2822%2C54%2C170%2C.62%29'/%3E%3Cstop offset='1' stop-color='rgba%289%2C24%2C92%2C.70%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%232fd8ff' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M13.9 5.5H46.1L54.5 13.9V46.1L46.1 54.5H13.9L5.5 46.1V13.9Z' fill='none' stroke='%232fd8ff' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-ubin-redup:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2816%2C40%2C130%2C.40%29'/%3E%3Cstop offset='1' stop-color='rgba%288%2C20%2C78%2C.48%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.3 1.3H48.7L58.7 11.3V48.7L48.7 58.7H11.3L1.3 48.7V11.3Z' fill='url%28%23g%29' stroke='%232fd8ff' stroke-opacity='0.42' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-ubin-magenta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%28120%2C24%2C140%2C.50%29'/%3E%3Cstop offset='1' stop-color='rgba%2856%2C10%2C84%2C.60%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%23ff5fd2' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M13.9 5.5H46.1L54.5 13.9V46.1L46.1 54.5H13.9L5.5 46.1V13.9Z' fill='none' stroke='%23ff5fd2' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-ubin-hijau:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2812%2C110%2C92%2C.46%29'/%3E%3Cstop offset='1' stop-color='rgba%286%2C52%2C60%2C.58%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%233dffb0' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M13.9 5.5H46.1L54.5 13.9V46.1L46.1 54.5H13.9L5.5 46.1V13.9Z' fill='none' stroke='%233dffb0' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-ubin-kuning:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%28120%2C90%2C12%2C.44%29'/%3E%3Cstop offset='1' stop-color='rgba%2856%2C40%2C8%2C.56%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%23ffd166' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M13.9 5.5H46.1L54.5 13.9V46.1L46.1 54.5H13.9L5.5 46.1V13.9Z' fill='none' stroke='%23ffd166' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-ubin-merah:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%28130%2C22%2C44%2C.46%29'/%3E%3Cstop offset='1' stop-color='rgba%2864%2C10%2C26%2C.58%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%23ff6b7a' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M13.9 5.5H46.1L54.5 13.9V46.1L46.1 54.5H13.9L5.5 46.1V13.9Z' fill='none' stroke='%23ff6b7a' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-ubin-emas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%28110%2C78%2C8%2C.50%29'/%3E%3Cstop offset='1' stop-color='rgba%2846%2C30%2C6%2C.62%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%23ffc23d' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M13.9 5.5H46.1L54.5 13.9V46.1L46.1 54.5H13.9L5.5 46.1V13.9Z' fill='none' stroke='%23ffc23d' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-ubin-ungu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2870%2C48%2C170%2C.50%29'/%3E%3Cstop offset='1' stop-color='rgba%2830%2C18%2C92%2C.62%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%239b83ff' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M13.9 5.5H46.1L54.5 13.9V46.1L46.1 54.5H13.9L5.5 46.1V13.9Z' fill='none' stroke='%239b83ff' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-okt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2822%2C54%2C170%2C.66%29'/%3E%3Cstop offset='1' stop-color='rgba%289%2C24%2C92%2C.74%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M21.5 1.5H50.5L70.5 21.5V50.5L50.5 70.5H21.5L1.5 50.5V21.5Z' fill='url%28%23g%29' stroke='%232fd8ff' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M23.9 5.5H48.1L66.5 23.9V48.1L48.1 66.5H23.9L5.5 48.1V23.9Z' fill='none' stroke='%232fd8ff' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-okt-magenta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%28120%2C24%2C140%2C.54%29'/%3E%3Cstop offset='1' stop-color='rgba%2856%2C10%2C84%2C.64%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M21.5 1.5H50.5L70.5 21.5V50.5L50.5 70.5H21.5L1.5 50.5V21.5Z' fill='url%28%23g%29' stroke='%23ff5fd2' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M23.9 5.5H48.1L66.5 23.9V48.1L48.1 66.5H23.9L5.5 48.1V23.9Z' fill='none' stroke='%23ff5fd2' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-okt-emas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%28110%2C78%2C8%2C.54%29'/%3E%3Cstop offset='1' stop-color='rgba%2846%2C30%2C6%2C.66%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M21.5 1.5H50.5L70.5 21.5V50.5L50.5 70.5H21.5L1.5 50.5V21.5Z' fill='url%28%23g%29' stroke='%23ffc23d' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M23.9 5.5H48.1L66.5 23.9V48.1L48.1 66.5H23.9L5.5 48.1V23.9Z' fill='none' stroke='%23ffc23d' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-okt-hijau:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2812%2C110%2C92%2C.50%29'/%3E%3Cstop offset='1' stop-color='rgba%286%2C52%2C60%2C.62%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M21.5 1.5H50.5L70.5 21.5V50.5L50.5 70.5H21.5L1.5 50.5V21.5Z' fill='url%28%23g%29' stroke='%233dffb0' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3Cpath d='M23.9 5.5H48.1L66.5 23.9V48.1L48.1 66.5H23.9L5.5 48.1V23.9Z' fill='none' stroke='%233dffb0' stroke-opacity='0.50' stroke-width='1'/%3E%3C/svg%3E");
  --b-okt-redup:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2816%2C40%2C130%2C.30%29'/%3E%3Cstop offset='1' stop-color='rgba%288%2C20%2C78%2C.38%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M21.3 1.3H50.7L70.7 21.3V50.7L50.7 70.7H21.3L1.3 50.7V21.3Z' fill='url%28%23g%29' stroke='%232fd8ff' stroke-opacity='0.38' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-tombol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2847%2C216%2C255%2C.26%29'/%3E%3Cstop offset='1' stop-color='rgba%2830%2C120%2C220%2C.16%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%232fd8ff' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-tombol-nyala:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%28120%2C236%2C255%2C.98%29'/%3E%3Cstop offset='1' stop-color='rgba%2828%2C168%2C255%2C.96%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%23b4f6ff' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-tombol-redup:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2860%2C110%2C220%2C.16%29'/%3E%3Cstop offset='1' stop-color='rgba%2840%2C80%2C180%2C.10%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.2 1.2H48.8L58.8 11.2V48.8L48.8 58.8H11.2L1.2 48.8V11.2Z' fill='url%28%23g%29' stroke='%232fd8ff' stroke-opacity='0.36' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-tombol-merah:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%28255%2C107%2C122%2C.22%29'/%3E%3Cstop offset='1' stop-color='rgba%28160%2C30%2C54%2C.16%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%23ff6b7a' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-tombol-emas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%28255%2C214%2C110%2C.98%29'/%3E%3Cstop offset='1' stop-color='rgba%28240%2C160%2C30%2C.96%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11.5 1.5H48.5L58.5 11.5V48.5L48.5 58.5H11.5L1.5 48.5V11.5Z' fill='url%28%23g%29' stroke='%23ffe29a' stroke-opacity='1.00' stroke-width='2.0' stroke-linejoin='round'/%3E%3C/svg%3E");
  --b-besar-emas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2860%2C42%2C6%2C.52%29'/%3E%3Cstop offset='1' stop-color='rgba%2816%2C12%2C30%2C.66%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M27.7 1.7H92.3L118.3 27.7V92.3L92.3 118.3H27.7L1.7 92.3V27.7Z' fill='url%28%23g%29' stroke='%23ffc23d' stroke-opacity='1.00' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M31.2 7.7H88.8L112.3 31.2V88.8L88.8 112.3H31.2L7.7 88.8V31.2Z' fill='none' stroke='%23ffc23d' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E");
  --b-lembar-emas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba%2840%2C30%2C10%2C.98%29'/%3E%3Cstop offset='1' stop-color='rgba%2812%2C10%2C26%2C.98%29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M27.7 1.7H92.3L118.3 27.7V92.3L92.3 118.3H27.7L1.7 92.3V27.7Z' fill='url%28%23g%29' stroke='%23ffc23d' stroke-opacity='1.00' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M31.2 7.7H88.8L112.3 31.2V88.8L88.8 112.3H31.2L7.7 88.8V31.2Z' fill='none' stroke='%23ffc23d' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E");
}