/* Kira Dulu V10 — "Kopitiam Tile" foundation (Dainer chose this direction on 3 Oct 2026).
   Opt-in only: every selector is scoped to body.kd-v10, so pages without that class are untouched.
   Legacy tokens (--ink, --coral ...) are remapped on body.kd-v10 so existing components adopt the
   palette without markup changes; V10-only tokens use the --k10- namespace.
   V10 pages must keep html[data-v2-surface="light"]: the dark glass theme is not part of V10.
   Tile data URIs are generated from the Peranakan tile in DNS/work/kira-v10-20261002/tilegen.mjs. */

body.kd-v10{
  --k10-marble:#fbfaf6; --k10-white:#fff; --k10-ink:#1f2430; --k10-ink-2:#4e5563; --k10-grout:#e4e1d8;
  --k10-jade:#0e7c66; --k10-jade-deep:#0a5c4c; --k10-jade-soft:#e3f1ec;
  --k10-cobalt:#23439e; --k10-rose:#c94a6e; --k10-rose-text:#ab3858; --k10-mustard:#e3a92b;
  --k10-wa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230b3d1f' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 2s.8 2.3.9 2.5c.1.2 1.6 2.5 4 3.5 1.5.6 2 .7 2.8.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.2-.2-.5-.3z'/%3E%3C/svg%3E");
  /* ICONS:BEGIN generated by DNS/work/kira-v10-20261002/icongen.py */
  --k10-ic-house:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M7 23 24 9l17 14' fill='none' stroke='%23c94a6e' stroke-width='4.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='11.5' y='21' width='25' height='19' rx='2.5' fill='%2323439e'/%3E%3Crect x='21.5' y='28' width='7.5' height='12' rx='1.5' fill='%23e3a92b'/%3E%3Crect x='14.5' y='25' width='5' height='5' rx='1' fill='%23ffffff'/%3E%3Crect x='31' y='25' width='3.5' height='5' rx='1' fill='%23ffffff'/%3E%3Ccircle cx='24' cy='14.5' r='1.6' fill='%23e3a92b'/%3E%3C/svg%3E");
  --k10-ic-car:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M6 31l3.4-9.2C10.3 19.5 12 18 14.6 18h18.8c2.6 0 4.3 1.5 5.2 3.8L42 31v6.5H6z' fill='%2323439e'/%3E%3Cpath d='M12.8 22.2c.5-1.3 1.3-1.9 2.6-1.9h17.2c1.3 0 2.1.6 2.6 1.9l1.6 5.3H11.2z' fill='%23ffffff'/%3E%3Crect x='23.3' y='20.3' width='1.6' height='7.2' fill='%2323439e'/%3E%3Ccircle cx='15' cy='37.5' r='4.6' fill='%231f2430'/%3E%3Ccircle cx='15' cy='37.5' r='1.8' fill='%23e3a92b'/%3E%3Ccircle cx='33' cy='37.5' r='4.6' fill='%231f2430'/%3E%3Ccircle cx='33' cy='37.5' r='1.8' fill='%23e3a92b'/%3E%3Crect x='6.5' y='30' width='5' height='2.6' rx='1.3' fill='%23e3a92b'/%3E%3Crect x='36.5' y='30' width='5' height='2.6' rx='1.3' fill='%23e3a92b'/%3E%3C/svg%3E");
  --k10-ic-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='5' y='11' width='38' height='26' rx='4.5' fill='%230e7c66'/%3E%3Crect x='5' y='16.5' width='38' height='4.5' fill='%230a5c4c'/%3E%3Crect x='10' y='24' width='9' height='7' rx='1.6' fill='%23e3a92b'/%3E%3Cpath d='M10 27.5h9M14.5 24v7' stroke='%230a5c4c' stroke-width='.9'/%3E%3Crect x='25' y='29' width='13' height='2.4' rx='1.2' fill='%23ffffff' opacity='.85'/%3E%3Ccircle cx='34' cy='25' r='1.6' fill='%23c94a6e'/%3E%3Ccircle cx='37.5' cy='25' r='1.6' fill='%23c94a6e'/%3E%3C/svg%3E");
  --k10-ic-gauge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 34a16 16 0 0 1 5-11.6' fill='none' stroke='%230e7c66' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M15.6 20.2a16 16 0 0 1 16.8 0' fill='none' stroke='%23e3a92b' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M35 22.4A16 16 0 0 1 40 34' fill='none' stroke='%23c94a6e' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M24 34 31.5 22' stroke='%231f2430' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='34' r='3.6' fill='%231f2430'/%3E%3Ccircle cx='24' cy='34' r='1.4' fill='%23ffffff'/%3E%3C/svg%3E");
  --k10-ic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 6 39 11v11c0 9.5-6.3 16.7-15 20-8.7-3.3-15-10.5-15-20V11z' fill='%230e7c66'/%3E%3Cpath d='M24 9.4 36 13.4v8.8c0 7.6-4.9 13.5-12 16.4z' fill='%230a5c4c' opacity='.35'/%3E%3Cpath d='m16.5 24 5 5 10-11' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --k10-ic-coins:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cellipse cx='17' cy='40' rx='10' ry='3.6' fill='%23c48d1d'/%3E%3Crect x='7' y='35.4' width='20' height='4.6' fill='%23e3a92b'/%3E%3Cellipse cx='17' cy='35.4' rx='10' ry='3.6' fill='%23f0c05a'/%3E%3Cellipse cx='17' cy='34.5' rx='10' ry='3.6' fill='%23c48d1d'/%3E%3Crect x='7' y='29.9' width='20' height='4.6' fill='%23e3a92b'/%3E%3Cellipse cx='17' cy='29.9' rx='10' ry='3.6' fill='%23f0c05a'/%3E%3Cellipse cx='17' cy='29' rx='10' ry='3.6' fill='%23c48d1d'/%3E%3Crect x='7' y='24.4' width='20' height='4.6' fill='%23e3a92b'/%3E%3Cellipse cx='17' cy='24.4' rx='10' ry='3.6' fill='%23f0c05a'/%3E%3Cellipse cx='31' cy='40' rx='10' ry='3.6' fill='%23c48d1d'/%3E%3Crect x='21' y='35.4' width='20' height='4.6' fill='%23e3a92b'/%3E%3Cellipse cx='31' cy='35.4' rx='10' ry='3.6' fill='%23f0c05a'/%3E%3Cellipse cx='31' cy='34.5' rx='10' ry='3.6' fill='%23c48d1d'/%3E%3Crect x='21' y='29.9' width='20' height='4.6' fill='%23e3a92b'/%3E%3Cellipse cx='31' cy='29.9' rx='10' ry='3.6' fill='%23f0c05a'/%3E%3Cellipse cx='31' cy='29.9' rx='10' ry='3.6' fill='%23f0c05a'/%3E%3Ccircle cx='34' cy='14' r='6.5' fill='%230e7c66'/%3E%3Cpath d='M34 10.5v7M31.2 13.2 34 10.5l2.8 2.7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --k10-ic-growth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='8' y='29' width='7' height='11' rx='1.5' fill='%230e7c66'/%3E%3Crect x='18.5' y='23' width='7' height='17' rx='1.5' fill='%2323439e'/%3E%3Crect x='29' y='16' width='7' height='24' rx='1.5' fill='%23e3a92b'/%3E%3Cpath d='m8 22 9-7 7 4 14-10' fill='none' stroke='%23c94a6e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33 8.5h6v6' fill='none' stroke='%23c94a6e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --k10-ic-wallet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='14' width='34' height='25' rx='4' fill='%23c94a6e'/%3E%3Cpath d='M10 14 31 7.5c1.6-.5 3.1.7 3.1 2.4V14' fill='%2323439e'/%3E%3Crect x='28' y='22' width='14' height='10' rx='3' fill='%23e3a92b'/%3E%3Ccircle cx='33' cy='27' r='2' fill='%23ffffff'/%3E%3C/svg%3E");
  --k10-ic-shop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='9' y='20' width='30' height='20' fill='%2323439e'/%3E%3Crect x='20.5' y='28' width='7' height='12' rx='1' fill='%23e3a92b'/%3E%3Crect x='12.5' y='27' width='5.5' height='6' rx='1' fill='%23ffffff'/%3E%3Crect x='30' y='27' width='5.5' height='6' rx='1' fill='%23ffffff'/%3E%3Cpath d='M7 13h34l-2 6H9z' fill='%23ffffff' stroke='%231f2430' stroke-width='1.2'/%3E%3Cpath d='M7.0 13h3.4l-.4 6h-3.4z' fill='%23c94a6e'/%3E%3Cpath d='M13.8 13h3.4l-.4 6h-3.4z' fill='%23c94a6e'/%3E%3Cpath d='M20.6 13h3.4l-.4 6h-3.4z' fill='%23c94a6e'/%3E%3Cpath d='M27.4 13h3.4l-.4 6h-3.4z' fill='%23c94a6e'/%3E%3Cpath d='M34.2 13h3.4l-.4 6h-3.4z' fill='%23c94a6e'/%3E%3Cpath d='M9 19a3 3 0 0 0 6 0' fill='%23c94a6e' stroke='%231f2430' stroke-width='.8'/%3E%3Cpath d='M15 19a3 3 0 0 0 6 0' fill='%23ffffff' stroke='%231f2430' stroke-width='.8'/%3E%3Cpath d='M21 19a3 3 0 0 0 6 0' fill='%23c94a6e' stroke='%231f2430' stroke-width='.8'/%3E%3Cpath d='M27 19a3 3 0 0 0 6 0' fill='%23ffffff' stroke='%231f2430' stroke-width='.8'/%3E%3Cpath d='M33 19a3 3 0 0 0 6 0' fill='%23c94a6e' stroke='%231f2430' stroke-width='.8'/%3E%3C/svg%3E");
  --k10-ic-payslip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M11 6h20l7 7v29H11z' fill='%23ffffff' stroke='%2323439e' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M31 6v7h7' fill='none' stroke='%2323439e' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M16 18h11M16 23h16M16 28h16' stroke='%2323439e' stroke-width='2.2' stroke-linecap='round' opacity='.55'/%3E%3Ccircle cx='32' cy='35' r='6.5' fill='%23e3a92b'/%3E%3Cpath d='M30 32.5v5M30 32.5h2.2a1.4 1.4 0 0 1 0 2.8H30m2 0 1.6 1.9' fill='none' stroke='%231f2430' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --k10-ic-refinance:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M37 19a14 14 0 0 0-25.5-3' fill='none' stroke='%230e7c66' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M9.5 9.5 11.5 16l6.5-1.8' fill='none' stroke='%230e7c66' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 29a14 14 0 0 0 25.5 3' fill='none' stroke='%23c94a6e' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M38.5 38.5 36.5 32 30 33.8' fill='none' stroke='%23c94a6e' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='24' r='5' fill='%23e3a92b'/%3E%3C/svg%3E");
  --k10-ic-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='7' y='10' width='34' height='31' rx='4' fill='%23ffffff' stroke='%2323439e' stroke-width='2.4'/%3E%3Cpath d='M7 14a4 4 0 0 1 4-4h26a4 4 0 0 1 4 4v5H7z' fill='%23c94a6e'/%3E%3Crect x='14' y='6' width='3.2' height='8' rx='1.6' fill='%231f2430'/%3E%3Crect x='30.8' y='6' width='3.2' height='8' rx='1.6' fill='%231f2430'/%3E%3Ccircle cx='14' cy='26' r='2' fill='%2323439e'/%3E%3Ccircle cx='21' cy='26' r='2' fill='%2323439e'/%3E%3Ccircle cx='28' cy='26' r='2' fill='%2323439e'/%3E%3Ccircle cx='35' cy='26' r='2' fill='%2323439e'/%3E%3Ccircle cx='14' cy='33' r='2' fill='%2323439e'/%3E%3Ccircle cx='21' cy='33' r='2' fill='%2323439e'/%3E%3Ccircle cx='35' cy='33' r='2' fill='%2323439e'/%3E%3Ccircle cx='28' cy='33' r='3' fill='%23e3a92b'/%3E%3C/svg%3E");
  --k10-ic-rate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 22 22 8h17v17L25 39a3 3 0 0 1-4.2 0L8 26.2a3 3 0 0 1 0-4.2z' fill='%23e3a92b'/%3E%3Ccircle cx='32' cy='15' r='2.8' fill='%23ffffff'/%3E%3Ccircle cx='19' cy='23' r='2.6' fill='none' stroke='%231f2430' stroke-width='2'/%3E%3Ccircle cx='26' cy='30' r='2.6' fill='none' stroke='%231f2430' stroke-width='2'/%3E%3Cpath d='m18 31 9-9' stroke='%231f2430' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --k10-ic-calc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='11' y='6' width='26' height='36' rx='4' fill='%231f2430'/%3E%3Crect x='15' y='10' width='18' height='8' rx='1.5' fill='%230e7c66'/%3E%3Crect x='15.0' y='22' width='4.5' height='4' rx='1' fill='%23ffffff'/%3E%3Crect x='15.0' y='28' width='4.5' height='4' rx='1' fill='%23ffffff'/%3E%3Crect x='15.0' y='34' width='4.5' height='4' rx='1' fill='%23ffffff'/%3E%3Crect x='21.5' y='22' width='4.5' height='4' rx='1' fill='%23ffffff'/%3E%3Crect x='21.5' y='28' width='4.5' height='4' rx='1' fill='%23ffffff'/%3E%3Crect x='21.5' y='34' width='4.5' height='4' rx='1' fill='%23ffffff'/%3E%3Crect x='28.0' y='22' width='4.5' height='4' rx='1' fill='%23e3a92b'/%3E%3Crect x='28.0' y='28' width='4.5' height='4' rx='1' fill='%23e3a92b'/%3E%3Crect x='28.0' y='34' width='4.5' height='4' rx='1' fill='%23e3a92b'/%3E%3C/svg%3E");
  --k10-ic-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 13c-4-3-10-4-16-3v27c6-1 12 0 16 3z' fill='%2323439e'/%3E%3Cpath d='M24 13c4-3 10-4 16-3v27c-6-1-12 0-16 3z' fill='%230e7c66'/%3E%3Cpath d='M12 16c3-.4 6 0 8 1M12 21c3-.4 6 0 8 1M28 17c2-1 5-1.4 8-1M28 22c2-1 5-1.4 8-1' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M24 13v27' stroke='%23e3a92b' stroke-width='2'/%3E%3C/svg%3E");
  --k10-ic-talk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 12a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v15a4 4 0 0 1-4 4H20l-8 7v-7a4 4 0 0 1-4-4z' fill='%230e7c66'/%3E%3Ccircle cx='17' cy='19.5' r='2.6' fill='%23ffffff'/%3E%3Ccircle cx='24' cy='19.5' r='2.6' fill='%23ffffff'/%3E%3Ccircle cx='31' cy='19.5' r='2.6' fill='%23ffffff'/%3E%3C/svg%3E");
  --k10-batik-rose:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23fdf3f6'/%3E%3Cpath d='M40 4c6 2 9 7 8 12-5-1-9-5-8-12z' fill='%23f3c9d6' opacity='.55'/%3E%3Cpath d='M2 40c6-1 11 2 12 8-6 0-11-3-12-8z' fill='%23f3c9d6' opacity='.55'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f3c9d6' transform='rotate(0 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f3c9d6' transform='rotate(72 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f3c9d6' transform='rotate(144 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f3c9d6' transform='rotate(216 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f3c9d6' transform='rotate(288 16 16)'/%3E%3Ccircle cx='16' cy='16' r='2.4' fill='%23c94a6e'/%3E%3Ccircle cx='16.0' cy='3.5' r='0.9' fill='%23c94a6e'/%3E%3Ccircle cx='23.3' cy='5.9' r='0.9' fill='%23c94a6e'/%3E%3Ccircle cx='27.9' cy='12.1' r='0.9' fill='%23c94a6e'/%3E%3Ccircle cx='27.9' cy='19.9' r='0.9' fill='%23c94a6e'/%3E%3Ccircle cx='23.3' cy='26.1' r='0.9' fill='%23c94a6e'/%3E%3Ccircle cx='16.0' cy='28.5' r='0.9' fill='%23c94a6e'/%3E%3Ccircle cx='8.7' cy='26.1' r='0.9' fill='%23c94a6e'/%3E%3Ccircle cx='4.1' cy='19.9' r='0.9' fill='%23c94a6e'/%3E%3Ccircle cx='4.1' cy='12.1' r='0.9' fill='%23c94a6e'/%3E%3Ccircle cx='8.7' cy='5.9' r='0.9' fill='%23c94a6e'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f3c9d6' transform='rotate(0 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f3c9d6' transform='rotate(72 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f3c9d6' transform='rotate(144 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f3c9d6' transform='rotate(216 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f3c9d6' transform='rotate(288 44 44)'/%3E%3Ccircle cx='44' cy='44' r='1.7999999999999998' fill='%23c94a6e'/%3E%3Ccircle cx='44.0' cy='34.6' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='49.5' cy='36.4' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='52.9' cy='41.1' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='52.9' cy='46.9' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='49.5' cy='51.6' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='44.0' cy='53.4' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='38.5' cy='51.6' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='35.1' cy='46.9' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='35.1' cy='41.1' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='38.5' cy='36.4' r='0.675' fill='%23c94a6e'/%3E%3Ccircle cx='44' cy='16' r='1.4' fill='%23c94a6e'/%3E%3Ccircle cx='16' cy='44' r='1.4' fill='%23c94a6e'/%3E%3Ccircle cx='30' cy='30' r='1.4' fill='%23c94a6e'/%3E%3C/svg%3E");
  --k10-batik-jade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23f2faf7'/%3E%3Cpath d='M40 4c6 2 9 7 8 12-5-1-9-5-8-12z' fill='%23c6e6dc' opacity='.55'/%3E%3Cpath d='M2 40c6-1 11 2 12 8-6 0-11-3-12-8z' fill='%23c6e6dc' opacity='.55'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23c6e6dc' transform='rotate(0 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23c6e6dc' transform='rotate(72 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23c6e6dc' transform='rotate(144 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23c6e6dc' transform='rotate(216 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23c6e6dc' transform='rotate(288 16 16)'/%3E%3Ccircle cx='16' cy='16' r='2.4' fill='%230e7c66'/%3E%3Ccircle cx='16.0' cy='3.5' r='0.9' fill='%230e7c66'/%3E%3Ccircle cx='23.3' cy='5.9' r='0.9' fill='%230e7c66'/%3E%3Ccircle cx='27.9' cy='12.1' r='0.9' fill='%230e7c66'/%3E%3Ccircle cx='27.9' cy='19.9' r='0.9' fill='%230e7c66'/%3E%3Ccircle cx='23.3' cy='26.1' r='0.9' fill='%230e7c66'/%3E%3Ccircle cx='16.0' cy='28.5' r='0.9' fill='%230e7c66'/%3E%3Ccircle cx='8.7' cy='26.1' r='0.9' fill='%230e7c66'/%3E%3Ccircle cx='4.1' cy='19.9' r='0.9' fill='%230e7c66'/%3E%3Ccircle cx='4.1' cy='12.1' r='0.9' fill='%230e7c66'/%3E%3Ccircle cx='8.7' cy='5.9' r='0.9' fill='%230e7c66'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23c6e6dc' transform='rotate(0 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23c6e6dc' transform='rotate(72 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23c6e6dc' transform='rotate(144 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23c6e6dc' transform='rotate(216 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23c6e6dc' transform='rotate(288 44 44)'/%3E%3Ccircle cx='44' cy='44' r='1.7999999999999998' fill='%230e7c66'/%3E%3Ccircle cx='44.0' cy='34.6' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='49.5' cy='36.4' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='52.9' cy='41.1' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='52.9' cy='46.9' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='49.5' cy='51.6' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='44.0' cy='53.4' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='38.5' cy='51.6' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='35.1' cy='46.9' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='35.1' cy='41.1' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='38.5' cy='36.4' r='0.675' fill='%230e7c66'/%3E%3Ccircle cx='44' cy='16' r='1.4' fill='%230e7c66'/%3E%3Ccircle cx='16' cy='44' r='1.4' fill='%230e7c66'/%3E%3Ccircle cx='30' cy='30' r='1.4' fill='%230e7c66'/%3E%3C/svg%3E");
  --k10-batik-cobalt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23f4f6fd'/%3E%3Cpath d='M40 4c6 2 9 7 8 12-5-1-9-5-8-12z' fill='%23cfd8f2' opacity='.55'/%3E%3Cpath d='M2 40c6-1 11 2 12 8-6 0-11-3-12-8z' fill='%23cfd8f2' opacity='.55'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23cfd8f2' transform='rotate(0 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23cfd8f2' transform='rotate(72 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23cfd8f2' transform='rotate(144 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23cfd8f2' transform='rotate(216 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23cfd8f2' transform='rotate(288 16 16)'/%3E%3Ccircle cx='16' cy='16' r='2.4' fill='%2323439e'/%3E%3Ccircle cx='16.0' cy='3.5' r='0.9' fill='%2323439e'/%3E%3Ccircle cx='23.3' cy='5.9' r='0.9' fill='%2323439e'/%3E%3Ccircle cx='27.9' cy='12.1' r='0.9' fill='%2323439e'/%3E%3Ccircle cx='27.9' cy='19.9' r='0.9' fill='%2323439e'/%3E%3Ccircle cx='23.3' cy='26.1' r='0.9' fill='%2323439e'/%3E%3Ccircle cx='16.0' cy='28.5' r='0.9' fill='%2323439e'/%3E%3Ccircle cx='8.7' cy='26.1' r='0.9' fill='%2323439e'/%3E%3Ccircle cx='4.1' cy='19.9' r='0.9' fill='%2323439e'/%3E%3Ccircle cx='4.1' cy='12.1' r='0.9' fill='%2323439e'/%3E%3Ccircle cx='8.7' cy='5.9' r='0.9' fill='%2323439e'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23cfd8f2' transform='rotate(0 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23cfd8f2' transform='rotate(72 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23cfd8f2' transform='rotate(144 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23cfd8f2' transform='rotate(216 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23cfd8f2' transform='rotate(288 44 44)'/%3E%3Ccircle cx='44' cy='44' r='1.7999999999999998' fill='%2323439e'/%3E%3Ccircle cx='44.0' cy='34.6' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='49.5' cy='36.4' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='52.9' cy='41.1' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='52.9' cy='46.9' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='49.5' cy='51.6' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='44.0' cy='53.4' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='38.5' cy='51.6' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='35.1' cy='46.9' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='35.1' cy='41.1' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='38.5' cy='36.4' r='0.675' fill='%2323439e'/%3E%3Ccircle cx='44' cy='16' r='1.4' fill='%2323439e'/%3E%3Ccircle cx='16' cy='44' r='1.4' fill='%2323439e'/%3E%3Ccircle cx='30' cy='30' r='1.4' fill='%2323439e'/%3E%3C/svg%3E");
  --k10-batik-mustard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23fffaf0'/%3E%3Cpath d='M40 4c6 2 9 7 8 12-5-1-9-5-8-12z' fill='%23f6dfa6' opacity='.55'/%3E%3Cpath d='M2 40c6-1 11 2 12 8-6 0-11-3-12-8z' fill='%23f6dfa6' opacity='.55'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f6dfa6' transform='rotate(0 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f6dfa6' transform='rotate(72 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f6dfa6' transform='rotate(144 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f6dfa6' transform='rotate(216 16 16)'/%3E%3Cellipse cx='16' cy='9' rx='4.6' ry='7.2' fill='%23f6dfa6' transform='rotate(288 16 16)'/%3E%3Ccircle cx='16' cy='16' r='2.4' fill='%23c48d1d'/%3E%3Ccircle cx='16.0' cy='3.5' r='0.9' fill='%23c48d1d'/%3E%3Ccircle cx='23.3' cy='5.9' r='0.9' fill='%23c48d1d'/%3E%3Ccircle cx='27.9' cy='12.1' r='0.9' fill='%23c48d1d'/%3E%3Ccircle cx='27.9' cy='19.9' r='0.9' fill='%23c48d1d'/%3E%3Ccircle cx='23.3' cy='26.1' r='0.9' fill='%23c48d1d'/%3E%3Ccircle cx='16.0' cy='28.5' r='0.9' fill='%23c48d1d'/%3E%3Ccircle cx='8.7' cy='26.1' r='0.9' fill='%23c48d1d'/%3E%3Ccircle cx='4.1' cy='19.9' r='0.9' fill='%23c48d1d'/%3E%3Ccircle cx='4.1' cy='12.1' r='0.9' fill='%23c48d1d'/%3E%3Ccircle cx='8.7' cy='5.9' r='0.9' fill='%23c48d1d'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f6dfa6' transform='rotate(0 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f6dfa6' transform='rotate(72 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f6dfa6' transform='rotate(144 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f6dfa6' transform='rotate(216 44 44)'/%3E%3Cellipse cx='44' cy='38.75' rx='3.4499999999999997' ry='5.4' fill='%23f6dfa6' transform='rotate(288 44 44)'/%3E%3Ccircle cx='44' cy='44' r='1.7999999999999998' fill='%23c48d1d'/%3E%3Ccircle cx='44.0' cy='34.6' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='49.5' cy='36.4' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='52.9' cy='41.1' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='52.9' cy='46.9' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='49.5' cy='51.6' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='44.0' cy='53.4' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='38.5' cy='51.6' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='35.1' cy='46.9' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='35.1' cy='41.1' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='38.5' cy='36.4' r='0.675' fill='%23c48d1d'/%3E%3Ccircle cx='44' cy='16' r='1.4' fill='%23c48d1d'/%3E%3Ccircle cx='16' cy='44' r='1.4' fill='%23c48d1d'/%3E%3Ccircle cx='30' cy='30' r='1.4' fill='%23c48d1d'/%3E%3C/svg%3E");
  /* ICONS:END */
  --k10-tiger:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Crect width='22' height='16' fill='%23e3a92b'/%3E%3Cpath d='M5 -2 9 18' stroke='%231f2430' stroke-width='3'/%3E%3Cpath d='M12 -2 15 18' stroke='%231f2430' stroke-width='1.4'/%3E%3Cpath d='M18 -2 20.5 18' stroke='%231f2430' stroke-width='.9'/%3E%3C/svg%3E");
  --k10-songket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 1 27 14 14 27 1 14z' fill='none' stroke='%23e3a92b' stroke-width='.9' opacity='.32'/%3E%3Cpath d='M14 8 20 14 14 20 8 14z' fill='none' stroke='%23e3a92b' stroke-width='.6' opacity='.2'/%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%23e3a92b' opacity='.55'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='%23e3a92b' opacity='.6'/%3E%3Ccircle cx='28' cy='28' r='1.2' fill='%23e3a92b' opacity='.6'/%3E%3C/svg%3E");
  --k10-tile-strip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='0' r='17' fill='%2323439e'/%3E%3Ccircle cx='0' cy='0' r='9' fill='%23ffffff'/%3E%3Ccircle cx='100' cy='0' r='17' fill='%2323439e'/%3E%3Ccircle cx='100' cy='0' r='9' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='100' r='17' fill='%2323439e'/%3E%3Ccircle cx='0' cy='100' r='9' fill='%23ffffff'/%3E%3Ccircle cx='100' cy='100' r='17' fill='%2323439e'/%3E%3Ccircle cx='100' cy='100' r='9' fill='%23ffffff'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%2323439e' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%2323439e' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%2323439e' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%2323439e' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%23e3a92b'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%23ffffff'/%3E%3C/svg%3E");
  --k10-tile-foot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%230a5c4c'/%3E%3Ccircle cx='0' cy='0' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='0' cy='0' r='9' fill='%230a5c4c'/%3E%3Ccircle cx='100' cy='0' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='100' cy='0' r='9' fill='%230a5c4c'/%3E%3Ccircle cx='0' cy='100' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='0' cy='100' r='9' fill='%230a5c4c'/%3E%3Ccircle cx='100' cy='100' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='100' cy='100' r='9' fill='%230a5c4c'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23c94a6e' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23c94a6e' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23c94a6e' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23c94a6e' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%23c94a6e'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%230a5c4c'/%3E%3C/svg%3E");
  --k10-tile-cobalt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23fbfaf6'/%3E%3Ccircle cx='0' cy='0' r='17' fill='%2323439e'/%3E%3Ccircle cx='0' cy='0' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='100' cy='0' r='17' fill='%2323439e'/%3E%3Ccircle cx='100' cy='0' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='0' cy='100' r='17' fill='%2323439e'/%3E%3Ccircle cx='0' cy='100' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='100' cy='100' r='17' fill='%2323439e'/%3E%3Ccircle cx='100' cy='100' r='9' fill='%23fbfaf6'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%2323439e' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%2323439e' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%2323439e' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%2323439e' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%23e3a92b'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%23fbfaf6'/%3E%3C/svg%3E");
  --k10-tile-rose:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23fbfaf6'/%3E%3Ccircle cx='0' cy='0' r='17' fill='%23c94a6e'/%3E%3Ccircle cx='0' cy='0' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='100' cy='0' r='17' fill='%23c94a6e'/%3E%3Ccircle cx='100' cy='0' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='0' cy='100' r='17' fill='%23c94a6e'/%3E%3Ccircle cx='0' cy='100' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='100' cy='100' r='17' fill='%23c94a6e'/%3E%3Ccircle cx='100' cy='100' r='9' fill='%23fbfaf6'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23c94a6e' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23c94a6e' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23c94a6e' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23c94a6e' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%2323439e' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%2323439e' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%2323439e' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%2323439e' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%2323439e'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%23fbfaf6'/%3E%3C/svg%3E");
  --k10-tile-jade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23fbfaf6'/%3E%3Ccircle cx='0' cy='0' r='17' fill='%230e7c66'/%3E%3Ccircle cx='0' cy='0' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='100' cy='0' r='17' fill='%230e7c66'/%3E%3Ccircle cx='100' cy='0' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='0' cy='100' r='17' fill='%230e7c66'/%3E%3Ccircle cx='0' cy='100' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='100' cy='100' r='17' fill='%230e7c66'/%3E%3Ccircle cx='100' cy='100' r='9' fill='%23fbfaf6'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%230e7c66' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%230e7c66' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%230e7c66' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%230e7c66' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23e3a92b' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%23e3a92b'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%23fbfaf6'/%3E%3C/svg%3E");
  --k10-tile-mustard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23fbfaf6'/%3E%3Ccircle cx='0' cy='0' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='0' cy='0' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='100' cy='0' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='100' cy='0' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='0' cy='100' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='0' cy='100' r='9' fill='%23fbfaf6'/%3E%3Ccircle cx='100' cy='100' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='100' cy='100' r='9' fill='%23fbfaf6'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%2323439e' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%2323439e' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%2323439e' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%2323439e' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%2323439e'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%23fbfaf6'/%3E%3C/svg%3E");
  --k10-tile-feature:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%230e7c66'/%3E%3Ccircle cx='0' cy='0' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='0' cy='0' r='9' fill='%230e7c66'/%3E%3Ccircle cx='100' cy='0' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='100' cy='0' r='9' fill='%230e7c66'/%3E%3Ccircle cx='0' cy='100' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='0' cy='100' r='9' fill='%230e7c66'/%3E%3Ccircle cx='100' cy='100' r='17' fill='%23e3a92b'/%3E%3Ccircle cx='100' cy='100' r='9' fill='%230e7c66'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='10' ry='19' fill='%23e3a92b' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23c94a6e' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23c94a6e' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23c94a6e' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='31' rx='4.5' ry='9' fill='%23c94a6e' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%23c94a6e'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%230e7c66'/%3E%3C/svg%3E");

  --cream:var(--k10-marble); --paper:var(--k10-white); --card:var(--k10-white);
  --ink:var(--k10-ink); --ink-soft:var(--k10-ink-2); --ink-faint:#5f6673;
  --coral:var(--k10-jade); --coral-deep:var(--k10-jade-deep); --blush:#f8e1e8;
  --mint:var(--k10-jade); --mint-deep:var(--k10-jade-deep); --mint-soft:var(--k10-jade-soft);
  --sky:var(--k10-cobalt); --sky-soft:#e5eaf7; --lemon:var(--k10-mustard); --lemon-soft:#fbf0d4;
  --grape:var(--k10-rose); --grape-soft:#f8e1e8;
  --line:var(--k10-grout); --line-strong:#d3cfc3;
  --shadow-sm:none; --shadow-md:0 1px 2px rgba(31,36,48,.06); --shadow-lg:0 2px 8px rgba(31,36,48,.07);
  --r-sm:8px; --r-md:8px; --r-lg:10px; --r-xl:12px;
  background:var(--k10-marble); color:var(--k10-ink);
}
body.kd-v10 h1,body.kd-v10 h2,body.kd-v10 h3{font-weight:700}
/* visual-v2.css forces a var(--coral) outline with !important; restate it with higher specificity.
   Cobalt reads on marble/white; the deep-jade footer gets a light mustard ring instead. */
body.kd-v10 :where(a,button,input,select,summary):focus-visible{outline:3px solid var(--k10-cobalt)!important;outline-offset:3px}
body.kd-v10 footer :where(a,button,input,select,summary):focus-visible{outline:3px solid #f3d58a!important}

/* Tile utilities for later page groups */
body.kd-v10 .k10-frame{padding:14px;border-radius:6px;background:var(--k10-tile-cobalt) 0 0/28px 28px repeat}
body.kd-v10 .k10-frame>*{background:var(--k10-white);border-radius:2px}

/* Header (.nav-shell variant used by every page except home) */
body.kd-v10 .nav-shell{padding:0;background:var(--k10-white);backdrop-filter:none;-webkit-backdrop-filter:none}
body.kd-v10 .nav-shell::after{content:"";display:block;height:10px;background:var(--k10-tile-strip) 0 0/10px 10px repeat-x}
body.kd-v10 .nav{width:min(1180px,calc(100% - 32px));max-width:none;margin:0 auto;min-height:64px;padding:8px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
body.kd-v10 .brand .blob{border-radius:50%;background:var(--k10-jade);color:#fff}
body.kd-v10 .nav-links a{min-height:44px;border-radius:8px;color:var(--k10-ink-2);font-weight:600}
body.kd-v10 .nav-links a:hover,body.kd-v10 .nav-links a[aria-current="page"]{background:var(--k10-jade-soft);color:var(--k10-jade-deep)}
body.kd-v10 .nav-cta-primary{background:var(--k10-jade);color:#fff;border-radius:999px;box-shadow:none}
body.kd-v10 .nav-cta-primary:hover{background:var(--k10-jade-deep)}
body.kd-v10 .kd-lang-toggle{border-color:var(--k10-grout)}
/* V10 is light-only; the glass theme switch has nothing to switch to (it also crowded the brand on phones). */
body.kd-v10 .kd-theme-toggle{display:none!important}
body.kd-v10 .nav>.brand{min-width:0;overflow:hidden;white-space:nowrap}

/* Tool dock under the header */
body.kd-v10 .kd-tool-dock{margin:10px auto 0;border:0;border-radius:0;background:transparent;box-shadow:none}
body.kd-v10 .kd-tool-dock a{border-radius:999px;color:var(--k10-ink-2)}
body.kd-v10 .kd-tool-dock a:hover,body.kd-v10 .kd-tool-dock a[aria-current="page"]{background:var(--k10-jade);color:#fff}

/* Decorative fake browser bar: removed, it pushed every tool ~70px down. */
body.kd-v10 .kd-window-bar{display:none}

/* Buttons */
body.kd-v10 .btn-coral{background:var(--k10-jade);color:#fff;box-shadow:none}
body.kd-v10 .btn-coral:hover{background:var(--k10-jade-deep)}
body.kd-v10 .btn-soft{background:var(--k10-white);border:1.5px solid var(--k10-grout);color:var(--k10-ink)}

/* Footer */
body.kd-v10 footer{position:relative;background:var(--k10-jade-deep);color:#d6ebe4}
body.kd-v10 footer::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--k10-tile-foot) 0 0/14px 14px repeat-x}
body.kd-v10 footer a{color:#fff}
/* playful.css .foot-col a:hover uses --coral-deep, which V10 maps to the footer's own deep jade. */
body.kd-v10 footer a:hover,body.kd-v10 footer .foot-col a:hover{color:#f3d58a}
body.kd-v10 footer h3{color:#f3d58a}
body.kd-v10 footer .foot-bottom{border-color:rgba(255,255,255,.18)}

/* Phone menu built by assets/v10.js (button hidden on desktop). */
body.kd-v10 .k10-menu-btn{display:none}
body.kd-v10 .k10-menu[hidden]{display:none!important}

@media (max-width:880px){
  /* 880px matches the breakpoint where visual-v2.css switches to its stacked grid menu. */
  /* Header: brand + action on one row, links in one swipe row (was 3-4 stacked rows, ~250px).
     !important is required: playful.css/visual-v2.css force display:grid!important here. */
  body.kd-v10 .nav-shell{position:relative!important}
  body.kd-v10 .nav{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px 8px!important;min-height:0!important;padding:8px 0 6px!important}
  body.kd-v10 .nav>.brand{grid-column:1!important;grid-row:1!important}
  body.kd-v10 .nav-right{grid-column:2!important;grid-row:1!important;justify-self:end!important;display:flex!important;gap:6px!important;margin:0!important}
  body.kd-v10 .nav-cta-primary{max-width:160px!important;min-width:0!important;padding:9px 13px!important;font-size:12.5px!important;flex:0 1 auto!important}
  body.kd-v10 .nav-links{grid-column:1/-1!important;grid-row:2!important;display:flex!important;justify-content:flex-start!important;gap:2px!important;overflow-x:auto;scrollbar-width:none;width:100%!important;margin:0!important}
  body.kd-v10 .nav-links::-webkit-scrollbar{display:none}
  body.kd-v10 .nav-links a{flex:0 0 auto!important;min-height:44px!important;padding:8px 11px!important;font-size:13px!important}
  /* The language link already sits in the action row as the BM/EN toggle. */
  body.kd-v10 .nav:has(.kd-lang-toggle) .nav-links a[href="/ms/"],body.kd-v10 .nav:has(.kd-lang-toggle) .nav-links a[href="/"]:last-child{display:none!important}
  /* WhatsApp float (styled inline by consent.js): a 48px round chat button on phones so it stops covering
     right-aligned values. Same link, data-cta and aria-label, so click tracking is unchanged. */
  /* With assets/v10.js running: brand · language · Menu on one compact sticky row; the CTA, main links
     and calculator shortcuts live in the drop-down panel (moved there by the script, never duplicated).
     Without JS the swipe row above stays as the fallback so every link remains reachable. */
  body.kd-v10.k10-menu-ready .nav-shell{position:sticky!important;top:0;z-index:60}
  body.kd-v10.k10-menu-ready .nav,body.kd-v10.k10-menu-ready .rail-in{position:static!important}
  body.kd-v10.k10-menu-ready .rail{position:sticky;top:0}
  body.kd-v10.k10-menu-ready .rail-in{flex-wrap:nowrap!important;padding-block:8px!important}
  body.kd-v10.k10-menu-ready .rail .ctl,body.kd-v10.k10-menu-ready .rail-in>span:not(.brand){display:none!important}
  body.kd-v10 .k10-menu-btn{order:9;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin-left:auto;border:1.5px solid var(--k10-grout);border-radius:999px;
    background:var(--k10-white);color:var(--k10-ink);font:700 14px "Plus Jakarta Sans",system-ui,sans-serif;cursor:pointer}
  body.kd-v10 .k10-menu-btn i{position:relative;width:16px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
  body.kd-v10.k10-menu-open .k10-menu-btn{background:var(--k10-jade);border-color:var(--k10-jade);color:#fff}
  body.kd-v10.k10-menu-open .k10-menu-btn i{height:0;box-shadow:none}
  body.kd-v10.k10-menu-open .k10-menu-btn i::before,body.kd-v10.k10-menu-open .k10-menu-btn i::after{content:"";position:absolute;left:0;top:-1px;width:16px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
  body.kd-v10.k10-menu-open .k10-menu-btn i::after{transform:rotate(-45deg)}
  body.kd-v10 .k10-menu{position:absolute;left:0;right:0;top:100%;z-index:80;max-height:calc(100vh - 84px);overflow-y:auto;overscroll-behavior:contain;
    padding:14px 16px 20px;background:var(--k10-white);border-top:1px solid var(--k10-grout);box-shadow:0 18px 30px -18px rgba(31,36,48,.35)}
  body.kd-v10 .k10-menu .nav-cta-primary,body.kd-v10 .k10-menu #primary-nav a.btn-coral{display:flex!important;justify-content:center;align-items:center;width:100%;max-width:none!important;min-height:48px!important;margin:0 0 8px;padding:0 16px!important;font-size:15px!important;border-radius:999px!important}
  body.kd-v10 .k10-menu #primary-nav{display:flex!important;flex-direction:column;align-items:stretch;gap:0!important;width:100%!important;margin:0!important;padding:0!important;overflow:visible}
  body.kd-v10 .k10-menu #primary-nav a{display:flex!important;align-items:center;justify-content:flex-start!important;text-align:left;min-height:48px!important;padding:0 6px!important;border-bottom:1px solid var(--k10-grout);border-radius:0;font-size:16px!important;font-weight:600;color:var(--k10-ink)}
  body.kd-v10 .k10-menu #primary-nav a[aria-current]{color:var(--k10-jade-deep);background:transparent;box-shadow:inset 3px 0 0 var(--k10-jade);padding-left:12px!important}
  /* The language toggle already sits in the top row, so the plain BM/EN link is not repeated in the menu. */
  body.kd-v10 .nav:has(.kd-lang-toggle) .k10-menu #primary-nav a[href="/ms/"],body.kd-v10 .nav:has(.kd-lang-toggle) .k10-menu #primary-nav a[href="/"]:last-child{display:none!important}
  body.kd-v10 .rail-in .k10-lang-chip{order:8;display:grid!important;place-items:center;width:44px;height:44px;min-height:44px!important;padding:0!important;margin-left:auto;border:1.5px solid var(--k10-grout);border-radius:50%;background:var(--k10-white);color:var(--k10-ink);font-size:13px!important;font-weight:700}
  body.kd-v10 .rail-in .k10-lang-chip~.k10-menu-btn{margin-left:8px}
  body.kd-v10 .k10-menu-heading{margin:16px 0 8px;font-size:13px;font-weight:700;color:var(--k10-rose-text)}
  body.kd-v10 .k10-menu .kd-tool-dock{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:auto!important;margin:0!important;padding:0!important;overflow:visible!important;border:0}
  body.kd-v10 .k10-menu .kd-tool-dock::after{display:none!important}
  body.kd-v10 .k10-menu .kd-tool-dock a{min-width:0!important;min-height:44px;padding:4px!important;border:1px solid var(--k10-grout);border-radius:8px;background:var(--k10-marble);font-size:12px!important;text-align:center;white-space:normal;line-height:1.2}
  body.kd-v10 .k10-menu .kd-tool-dock a[aria-current="page"]{background:var(--k10-jade);border-color:var(--k10-jade);color:#fff}
  body.kd-v10 a[data-kd-whatsapp]{display:grid!important;place-items:center;width:48px;height:48px;padding:0!important;border-radius:50%!important;font-size:0!important;right:12px!important;bottom:14px!important}
  body.kd-v10 a[data-kd-whatsapp]::before{content:"";width:24px;height:24px;background:var(--k10-wa-icon) center/contain no-repeat}
  body.kd-v10 footer{padding-bottom:64px}
}

/* ═══ Page components (all page types share these legacy class names) ═══ */

/* EN home's V9 rail header, restyled to match the standard header on every page. */
body.kd-v10 .rail{position:sticky;top:0;z-index:70;background:var(--k10-white);border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
body.kd-v10 .rail::after{content:"";display:block;height:10px;background:var(--k10-tile-strip) 0 0/10px 10px repeat-x}
body.kd-v10 .rail-in{min-height:64px;height:auto}
body.kd-v10 .rail nav a{color:var(--k10-ink-2);font-weight:600;border-radius:8px}
body.kd-v10 .rail nav a:hover,body.kd-v10 .rail nav a[aria-current]{background:var(--k10-jade-soft);color:var(--k10-jade-deep)}
body.kd-v10 .rail nav a.btn-coral,body.kd-v10 .rail nav a.nav-cta-primary{background:var(--k10-jade);color:#fff;border-radius:999px}

/* Section and hero type */
/* Heading tracking stays as in the legacy layers: their tight tracking keeps line breaks identical between the
   system fallback and Bricolage, so the web-font swap does not shift the page (CLS). */
body.kd-v10 .hero-h,body.kd-v10 .compare-hero h1,body.kd-v10 .page-hero h1,body.kd-v10 .guide-h1{color:var(--k10-ink);font-weight:700}
body.kd-v10.kd-calculator .hero-h,body.kd-v10 .compare-hero h1,body.kd-v10 .page-hero h1{font-size:clamp(34px,4.8vw,60px);line-height:1.04}
body.kd-v10 .hero-sub,body.kd-v10 .sec-desc{color:var(--k10-ink-2)}
body.kd-v10 .eyebrow,body.kd-v10 .pill,body.kd-v10 .kicker{background:var(--k10-jade-soft);color:var(--k10-jade-deep);border:0;border-radius:999px}
body.kd-v10 .kicker,body.kd-v10 #lab-kicker{background:transparent;color:var(--k10-rose-text);padding:0}
body.kd-v10 .eyebrow .dot,body.kd-v10 .live i{background:var(--k10-rose)}
body.kd-v10 .sec-h{color:var(--k10-ink)}
body.kd-v10 .kd-method-note,body.kd-v10 .answer-block{background:var(--k10-white);border:1px solid var(--k10-grout);border-radius:8px;box-shadow:none;backdrop-filter:none}
body.kd-v10 .kd-privacy-signal{background:var(--k10-white);border:1px solid var(--k10-grout);box-shadow:none;color:var(--k10-ink-2)}
body.kd-v10 .kd-privacy-signal i{background:var(--k10-jade);box-shadow:0 0 0 3px var(--k10-jade-soft)}

/* Calculator input card */
body.kd-v10 .panel,body.kd-v10 .faq,body.kd-v10 .lead-box,body.kd-v10 .contact-card,body.kd-v10 .handoff-card,body.kd-v10 .compare-hub-card,body.kd-v10 .faq-list article,body.kd-v10 .article-grid article{
  background:var(--k10-white);border:1px solid var(--k10-grout);border-radius:8px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.kd-v10 .panel-h{flex-wrap:wrap;row-gap:6px;border-bottom:1px solid var(--k10-grout)}
body.kd-v10 .panel-h b{color:var(--k10-ink);font-weight:700}
body.kd-v10 .panel-h .live{flex:1 1 auto;justify-content:flex-end;text-align:right;min-width:0;color:var(--k10-jade-deep)}
body.kd-v10 .field{display:flow-root}
body.kd-v10 .field-top label{color:var(--k10-ink);font-weight:600}
body.kd-v10 .field-top .v{color:var(--k10-ink)}
body.kd-v10 input[type=range]{accent-color:var(--k10-jade)}
body.kd-v10 .panel-note,body.kd-v10 .disclaimer{border-top:1px dashed var(--k10-grout);color:var(--k10-ink-2)}
/* Rate stepper floated right without clearing, so the next field rode up beside it. */
body.kd-v10 .kd-exact-control{float:none;display:grid;width:min(100%,260px);margin:10px 0 4px auto;border:1.5px solid var(--k10-grout);border-radius:8px;background:var(--k10-white)}
body.kd-v10 .kd-exact-control button{background:var(--k10-jade-soft);color:var(--k10-jade-deep)}
body.kd-v10 .seg,body.kd-v10 .seg-4{border-radius:8px}
body.kd-v10 .seg .on,body.kd-v10 .seg button[aria-pressed="true"]{background:var(--k10-jade);color:#fff}
body.kd-v10 .seg .on *,body.kd-v10 .seg button[aria-pressed="true"] *,body.kd-v10 button.on small{color:#fff!important}
body.kd-v10 .text-input,body.kd-v10 .select-input,body.kd-v10 .num-input,body.kd-v10 .compare-controls select{border:1.5px solid var(--k10-grout);border-radius:8px;background:var(--k10-white);color:var(--k10-ink)}

/* Result: tile-framed white card (border holds the tile, inset shadow paints the inside white). */
body.kd-v10 .chart-card,body.kd-v10 .result{border:14px solid transparent;border-radius:6px;background:var(--k10-white);background-image:var(--k10-tile-cobalt)!important;background-size:28px 28px;background-repeat:repeat;
  box-shadow:inset 0 0 0 4000px var(--k10-white);backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
body.kd-v10.kd-home-loan .chart-card{background-image:var(--k10-tile-rose)!important}
/* Result header: deep jade band with a gold songket lattice (premium, Malaysian), white figure. */
body.kd-v10 .chart-card>.res-hero,body.kd-v10 .result>.res-hero,body.kd-v10 .res-hero{position:relative;margin:0;padding:22px 24px 20px;color:#fff;
  background:var(--k10-songket) 0 0/28px 28px repeat,var(--k10-jade-deep);border-bottom:3px solid var(--k10-mustard)}
body.kd-v10 .res-hero .lab,body.kd-v10 .chart-card .res-hero .lab,body.kd-v10 .result .res-hero .lab{color:#e3f1ec}
body.kd-v10 .res-amt,body.kd-v10 .chart-card .res-amt,body.kd-v10 .result .res-amt{color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(0,0,0,.18)}
body.kd-v10 .res-meta,body.kd-v10 .chart-card .res-meta,body.kd-v10 .result .res-meta{color:#d6ebe4}
body.kd-v10 .res-amt .pre{color:#f3d58a}
body.kd-v10 .res-hero .pill{background:rgba(255,255,255,.14);color:#fff}
body.kd-v10 .res-hero .live{color:#f3d58a}
/* A changed figure gets a brief gold underline sweep (assets/v10.js adds .k10-tick). */
body.kd-v10 .res-amt{position:relative}
body.kd-v10 .res-amt::after{content:"";position:absolute;left:0;bottom:-6px;width:0;max-width:100%;height:3px;border-radius:2px;background:var(--k10-mustard);transition:width .5s ease}
body.kd-v10 .res-amt.k10-tick::after{width:7.5em}
/* Result rows: songket diamond bullet, values never wrap. */
body.kd-v10 .metric-grid{grid-template-columns:1fr!important;gap:0;margin:8px 24px 14px;padding:0;border-top:0}
body.kd-v10 .metric{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;background:transparent;border:0;border-bottom:1px solid var(--k10-grout);border-radius:0;padding:12px 0}
body.kd-v10 .metric span{flex:1 1 auto;min-width:0;color:var(--k10-ink-2);text-transform:none;letter-spacing:0;font-size:14px;font-weight:500}
body.kd-v10 .metric span::before{content:"";display:inline-block;width:7px;height:7px;margin:0 9px 1px 1px;background:var(--k10-mustard);transform:rotate(45deg)}
body.kd-v10 .metric b{flex:0 0 auto;color:var(--k10-ink);margin:0;text-align:right;white-space:nowrap;font-size:clamp(15px,4.3vw,19px)}
body.kd-v10 .metric:last-child b{color:var(--k10-jade-deep)}
/* Harimau bar (assets/v10.js): principal vs interest; the interest part wears tiger stripes. */
body.kd-v10 .k10-split{margin:4px 24px 16px}
body.kd-v10 .k10-split-bar{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--k10-grout);box-shadow:inset 0 0 0 1px rgba(31,36,48,.08)}
body.kd-v10 .k10-split-bar i{display:block;height:100%;transition:width .5s cubic-bezier(.2,.8,.2,1)}
body.kd-v10 .k10-split-bar .k10-base{background:var(--k10-cobalt)}
body.kd-v10 .k10-split-bar .k10-extra{background:var(--k10-tiger) 0 0/22px 16px repeat}
body.kd-v10 .k10-split-key{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:13px;color:var(--k10-ink-2)}
body.kd-v10 .k10-split-key b{color:var(--k10-ink);font-variant-numeric:tabular-nums}
body.kd-v10 .k10-split-key span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px;background:var(--k10-cobalt)}
body.kd-v10 .k10-split-key span+span::before{background:var(--k10-tiger) 0 0/14px 10px repeat}
body.kd-v10 .chart-wrap{background:var(--k10-white);border:1px solid var(--k10-grout);border-radius:8px}
body.kd-v10 .source-line{color:var(--k10-ink-2)}
body.kd-v10 .source-line a,body.kd-v10 .source-link,body.kd-v10 .guide-sources a{color:var(--k10-cobalt)}
body.kd-v10 .btn-soft,body.kd-v10 .scenario-btn{background:var(--k10-white);border:1.5px solid var(--k10-grout);color:var(--k10-ink);box-shadow:none}
body.kd-v10 .faq h3{color:var(--k10-ink)}
body.kd-v10 .faq p{color:var(--k10-ink-2)}

/* Tool lists (home, hub, services, partners): a tiled floor; each card carries a subject icon
   (house, car, card, gauge...) on a bunga raya batik medallion. The icon is picked from the link target,
   so no page markup changes. Motion: batik drifts and the icon lifts on hover; icons pop in on scroll. */
body.kd-v10 .tool-grid{gap:4px;background:var(--k10-grout);border:4px solid var(--k10-grout);border-radius:8px;overflow:hidden}
body.kd-v10 .tool-card,body.kd-v10 .compare-hub-card{--k10-card-ic:var(--k10-ic-calc);--k10-card-batik:var(--k10-batik-jade)}
body.kd-v10 .tool-card{position:relative;overflow:hidden;background:var(--k10-white);border:0!important;border-radius:0;box-shadow:none;padding:22px 110px 22px 22px!important;min-height:150px}
body.kd-v10 .tool-card:hover{background:var(--k10-marble);transform:none;box-shadow:none;padding-inline-start:22px!important}
body.kd-v10 .tool-card h3{color:var(--k10-ink);letter-spacing:-.015em}
body.kd-v10 .tool-card p{color:var(--k10-ink-2)}
body.kd-v10 .tool-card .tag{position:static;display:inline-block;margin-bottom:10px;background:#fbf0d4;color:#6b4c07;border:0;border-radius:999px}
body.kd-v10 .tool-card .cic,body.kd-v10 .compare-hub-card::after{position:absolute;top:20px;right:20px;bottom:auto;left:auto;width:76px;height:76px;margin:0;border-radius:50%;font-size:0;color:transparent!important;
  background:var(--k10-card-batik) 0 0/30px 30px repeat!important;box-shadow:0 0 0 3px var(--k10-white),0 0 0 4px var(--k10-grout);transition:background-position 1.6s ease}
body.kd-v10 .tool-card .cic *{display:none}
body.kd-v10 .tool-card .cic::after,body.kd-v10 .compare-hub-card::before{content:"";position:absolute;inset:14%;background:var(--k10-card-ic) center/contain no-repeat;transition:transform .45s cubic-bezier(.2,.9,.25,1.25)}
body.kd-v10 .compare-hub-card{position:relative;overflow:hidden;padding-right:110px!important}
body.kd-v10 .compare-hub-card::after{content:""}
body.kd-v10 .compare-hub-card::before{inset:calc(20px + 76px*.14) calc(20px + 76px*.14) auto auto;width:calc(76px*.72);height:calc(76px*.72);z-index:1}
body.kd-v10 .tool-card:hover .cic,body.kd-v10 .tool-card:focus-visible .cic,body.kd-v10 .compare-hub-card:hover::after{background-position:30px 15px!important}
body.kd-v10 .tool-card:hover .cic::after,body.kd-v10 .tool-card:focus-visible .cic::after{transform:translateY(-4px) scale(1.08) rotate(-4deg)}
body.kd-v10 .compare-hub-card:hover::before{transform:translateY(-4px) scale(1.08) rotate(-4deg)}
/* Subject by link target (later rules win: "card" must follow "car"). */
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="guides"],[href*="panduan"],[href*="blog"]){--k10-card-ic:var(--k10-ic-book);--k10-card-batik:var(--k10-batik-cobalt)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="dsr"]){--k10-card-ic:var(--k10-ic-gauge);--k10-card-batik:var(--k10-batik-mustard)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="eligib"],[href*="kelayakan"],[href*="affordability"],[href*="loan-rejected"],[href*="ccris"],[href*="akpk"]){--k10-card-ic:var(--k10-ic-shield);--k10-card-batik:var(--k10-batik-rose)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="epf"],[href*="kwsp"]){--k10-card-ic:var(--k10-ic-coins);--k10-card-batik:var(--k10-batik-jade)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="investment"],[href*="pelaburan"]){--k10-card-ic:var(--k10-ic-growth);--k10-card-batik:var(--k10-batik-cobalt)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="personal"],[href*="peribadi"]){--k10-card-ic:var(--k10-ic-wallet);--k10-card-batik:var(--k10-batik-rose)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="sme"]){--k10-card-ic:var(--k10-ic-shop);--k10-card-batik:var(--k10-batik-cobalt)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="home"],[href*="rumah"],[href*="perumahan"]){--k10-card-ic:var(--k10-ic-house);--k10-card-batik:var(--k10-batik-rose)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="car"],[href*="kereta"]){--k10-card-ic:var(--k10-ic-car);--k10-card-batik:var(--k10-batik-jade)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="card"],[href*="kad-kredit"]){--k10-card-ic:var(--k10-ic-card);--k10-card-batik:var(--k10-batik-cobalt)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="flat-vs-reducing"],[href*="tool=rates"]){--k10-card-ic:var(--k10-ic-rate);--k10-card-batik:var(--k10-batik-mustard)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="tool=salary"]){--k10-card-ic:var(--k10-ic-payslip);--k10-card-batik:var(--k10-batik-mustard)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="tool=refinance"]){--k10-card-ic:var(--k10-ic-refinance);--k10-card-batik:var(--k10-batik-jade)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href*="tool=schedule"]){--k10-card-ic:var(--k10-ic-calendar);--k10-card-batik:var(--k10-batik-cobalt)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href$="calculator-lab"],[href$="calculator-lab/"]){--k10-card-ic:var(--k10-ic-calc);--k10-card-batik:var(--k10-batik-mustard)}
body.kd-v10 :is(.tool-card,.compare-hub-card):is([href="#talk"]){--k10-card-ic:var(--k10-ic-talk);--k10-card-batik:var(--k10-batik-jade)}
body.kd-v10.kd-home .tool-card:first-child,body.kd-v10.kd-hub .tool-card:first-child{background:var(--k10-jade);color:#fff}
body.kd-v10.kd-home .tool-card:first-child h3,body.kd-v10.kd-home .tool-card:first-child p,body.kd-v10.kd-hub .tool-card:first-child h3,body.kd-v10.kd-hub .tool-card:first-child p{color:#fff}
body.kd-v10.kd-home .tool-card:first-child .cic,body.kd-v10.kd-hub .tool-card:first-child .cic{background:var(--k10-card-batik) 0 0/30px 30px repeat!important;width:104px;height:104px;box-shadow:0 0 0 3px var(--k10-jade-deep),0 0 0 5px var(--k10-mustard)}
@supports (animation-timeline:view()){
  @keyframes k10-pop{from{transform:scale(.55) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
  body.kd-v10 .tool-card .cic::after,body.kd-v10 .compare-hub-card::before{animation:k10-pop linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
body.kd-v10 .trust-item .ti-ic{background:var(--k10-jade-soft);color:var(--k10-jade-deep)}

/* Home showcase: the live DSR box was a dark green panel with white text (visual-v2 #home-calc rules,
   id specificity). V10 makes it a white card inside the tile frame, so every light-on-dark colour is restated. */
/* Desktop home: the four decision cards are absolute at the bottom of .hero-copy (visual-v2.css). visual-v2.js then
   injects `.kd-home .hero-copy{padding-bottom:24px}` for >=1121px, so with the fluid headline the hook pills ran into
   the cards at >=1400px (also on main). Reserve the cards' height (2x44 + 7 gap + 12 bottom) plus a 23px gap; this
   rule outranks the injected one by specificity, so the padding is the same before and after that stylesheet arrives. */
@media (min-width:1121px){
  body.kd-v10.kd-home .hero-copy{padding-bottom:130px}
}
body.kd-v10.kd-home .browser-frame{border:14px solid transparent;border-radius:6px;background:var(--k10-white);background-image:var(--k10-tile-cobalt)!important;
  background-size:28px 28px;box-shadow:inset 0 0 0 4000px var(--k10-white);transform:none!important}
body.kd-v10 .browser-bar{display:none}
body.kd-v10.kd-home #home-calc{background:var(--k10-white);background-image:none!important;color:var(--k10-ink);border:0;box-shadow:none}
body.kd-v10.kd-home #home-calc .pill{background:var(--k10-jade-soft);color:var(--k10-jade-deep)}
body.kd-v10.kd-home #home-calc .live{color:var(--k10-jade-deep)}
body.kd-v10.kd-home #home-calc .field-top label,body.kd-v10.kd-home #home-calc .source-line{color:var(--k10-ink-2)}
body.kd-v10.kd-home #home-calc .res-hero .lab,body.kd-v10.kd-home #home-calc .res-meta{color:#e3f1ec}
body.kd-v10.kd-home #home-calc .field-top .v{color:var(--k10-ink)}
body.kd-v10.kd-home #home-calc input[type="range"]{background:var(--k10-grout) content-box;background-clip:content-box}
body.kd-v10.kd-home #home-calc .res-amt{color:#fff}
body.kd-v10.kd-home #home-calc .btn{background:var(--k10-jade);color:#fff}
body.kd-v10.kd-home #home-calc .seg button:not(.on){background:var(--k10-white);color:var(--k10-ink);border:1.5px solid var(--k10-grout)}
body.kd-v10 .harimau-band{background:transparent}

/* Comparison pages */
body.kd-v10 .compare-panel{background:transparent;border:0;box-shadow:none;padding-inline:0}
body.kd-v10 .compare-disclaimer{background:var(--k10-white);border:1px solid var(--k10-grout);border-left:6px solid var(--k10-mustard);border-radius:8px;color:var(--k10-ink-2)}
body.kd-v10 .compare-disclaimer strong{color:var(--k10-ink)}
body.kd-v10 .compare-controls label{color:var(--k10-ink);font-weight:600}
body.kd-v10 .compare-count{color:var(--k10-ink-2)}
body.kd-v10 .compare-table-wrap,body.kd-v10 .rates-table-wrap{border:1px solid var(--k10-grout);border-radius:8px;background:var(--k10-white)}
body.kd-v10 .compare-table th,body.kd-v10 .rates-table th{background:#f3f1ea;color:var(--k10-ink-2);border-bottom:2px solid var(--k10-ink)}
body.kd-v10 .compare-table td,body.kd-v10 .rates-table td{border-bottom:1px solid var(--k10-grout)}
body.kd-v10 .compare-table tbody tr:nth-child(even) td,body.kd-v10 .rates-table tbody tr:nth-child(even) td{background:var(--k10-marble)}
body.kd-v10 .compare-table td ul{font-size:12.5px}
/* Long unbroken values (e.g. "12/18/24/30/...") spilled into the next column on main too. */
body.kd-v10 .compare-table td{overflow-wrap:anywhere}
body.kd-v10 .compare-card{background:var(--k10-white);border:1px solid var(--k10-grout);border-radius:8px;box-shadow:none}
body.kd-v10 .compare-card-metric{background:var(--k10-marble);border:1px solid var(--k10-grout);border-radius:8px}
body.kd-v10 .compare-card-metric span{color:var(--k10-ink-2)}
body.kd-v10 .compare-hub-card{position:relative;overflow:hidden}

/* Guides and long reads */
body.kd-v10 .guide-tldr{background:var(--k10-white);border:1px solid var(--k10-grout);border-left:6px solid var(--k10-mustard);border-radius:8px;box-shadow:none}
body.kd-v10 .guide-article a:not(.btn){color:var(--k10-cobalt)}
body.kd-v10 a.btn-coral,body.kd-v10 a.btn-coral:visited{color:#fff}
body.kd-v10 .guide-byline{color:var(--k10-ink-2)}

@media (max-width:880px){
  /* EN home rail: one swipe row of links like every other page (burger + sheet stay unused). */
  body.kd-v10 .rail-in{flex-wrap:wrap;row-gap:4px;padding-block:8px 6px}
  body.kd-v10 .rail nav{display:flex!important;order:3;flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none}
  body.kd-v10 .rail nav::-webkit-scrollbar{display:none}
  body.kd-v10 .rail nav a{flex:0 0 auto}
  body.kd-v10 .burger{display:none!important}
  body.kd-v10 .tool-card{min-height:0;padding-right:92px!important}
  body.kd-v10.kd-home .tool-card:first-child,body.kd-v10.kd-hub .tool-card:first-child{padding-right:112px!important}
  body.kd-v10.kd-home .tool-card:first-child .cic,body.kd-v10.kd-hub .tool-card:first-child .cic{width:80px;height:80px;top:20px;right:18px}
  body.kd-v10 .tool-card .cic,body.kd-v10 .compare-hub-card::after{width:62px;height:62px;top:18px;right:16px}
  body.kd-v10 .compare-hub-card::before{top:calc(18px + 62px*.14);right:calc(16px + 62px*.14);width:calc(62px*.72);height:calc(62px*.72)}
  body.kd-v10 .compare-hub-card{padding-right:92px!important}
  body.kd-v10 .chart-card,body.kd-v10 .result,body.kd-v10.kd-home .browser-frame{border-width:10px;background-size:20px 20px}
  body.kd-v10 .res-hero{padding:18px 16px 4px}
  body.kd-v10 .metric-grid{margin:6px 16px 12px}
  body.kd-v10 .k10-split{margin:4px 16px 14px}
}

@media (prefers-reduced-motion:reduce){
  body.kd-v10 .tool-card .cic,body.kd-v10 .tool-card .cic::after,body.kd-v10 .compare-hub-card::after,body.kd-v10 .compare-hub-card::before,body.kd-v10 .res-amt::after,body.kd-v10 .k10-split-bar i{transition:none!important;animation:none!important}
}

/* ═══ No layout shift. html.k10-js is set by the first line of v10.js (loaded without defer), i.e. only when the
   script actually runs. Then the final layout is drawn from the first paint and v10.js fills space reserved here
   (Lighthouse CLS reached 0.4–0.9 when the script rearranged pages after load). If v10.js fails to load, none
   of these rules apply and the plain links/introductions stay visible. ═══ */
/* The long hero explanation is folded into <details> by script; reserve the folded height now. */
/* The calculator dock (added by visual-v2.js after the header) is moved into the menu by v10.js; hide it at any
   position between header and <main>, because visual-v2.js also parks the consent banner right after the header
   on phones, which otherwise made the dock show for one frame (CLS 0.16-0.24). */
html.k10-js body.kd-v10 .hero .wrap > .answer-block{box-sizing:border-box;height:59px;max-width:1280px;margin:18px auto 0!important;padding:0!important;overflow:hidden;visibility:hidden;border:0!important}
/* Harimau bar: hold its space under the result rows until v10.js inserts it. */
html.k10-js body.kd-v10 .metric-grid:is(:has(#loan):has(#interest),:has(#contributed):has(#earned),:has(#contrib):has(#growth)):not(.k10-split-done){margin-bottom:73px}
@media (max-width:560px){
  html.k10-js body.kd-v10 .hero .wrap > .answer-block{margin-top:8px!important}
}
@media (max-width:880px){
  html.k10-js body.kd-v10 .metric-grid:is(:has(#loan):has(#interest),:has(#contributed):has(#earned),:has(#contrib):has(#growth)):not(.k10-split-done){margin-bottom:69px}
  html.k10-js body.kd-v10 .nav > #primary-nav,html.k10-js body.kd-v10 .rail-in > #primary-nav,html.k10-js body.kd-v10 .nav-right > .nav-cta-primary,html.k10-js body.kd-v10 .nav-shell ~ .kd-tool-dock{display:none!important}
  html.k10-js body.kd-v10 .nav-shell{position:sticky!important;top:0;z-index:60}
  html.k10-js body.kd-v10 .nav,html.k10-js body.kd-v10 .rail-in{position:static!important}
  html.k10-js body.kd-v10 .rail{position:sticky;top:0}
  html.k10-js body.kd-v10 .rail-in{flex-wrap:nowrap!important;padding-block:8px!important}
  html.k10-js body.kd-v10 .rail .ctl,html.k10-js body.kd-v10 .rail-in>span:not(.brand){display:none!important}
  /* Placeholders for the Menu button (and the EN home language chip) until v10.js adds them. */
  html.k10-js body.kd-v10:not(.k10-menu-ready) .nav-right::after{content:"";order:9;flex:0 0 92px;height:44px}
  html.k10-js body.kd-v10:not(.k10-menu-ready) .rail-in::after{content:"";flex:0 0 144px;height:44px;margin-left:auto}
  /* Room for the BM/EN button that lang-toggle.js adds; released on the two pages that never get one. */
  html.k10-js body.kd-v10:not(.k10-no-lang) .nav-right:not(:has(.kd-lang-toggle))::before{content:"";flex:0 0 44px;height:44px}
}
/* Privacy choices: visual-v2.js moves the banner into the page flow on phones, which pushed every page down
   ~230px after load. V10 keeps it as a fixed bottom panel at every width. Same text, buttons and consent
   behaviour (consent.js untouched); only its position changes. */
body.kd-v10 .consent-banner{position:fixed!important;left:50%!important;right:auto!important;bottom:12px!important;transform:translateX(-50%)!important;width:min(760px,calc(100% - 24px))!important;margin:0!important;z-index:1000!important;
  background:var(--k10-white);border:1px solid var(--k10-grout);border-top:4px solid var(--k10-mustard);border-radius:10px;box-shadow:0 18px 40px -18px rgba(31,36,48,.45)}
/* Comparison tables are built by compare.js after first paint; hold room only until the table exists. */
html.k10-js body.kd-v10 [data-compare-root]:not(:has(.compare-count)){min-height:1400px}

/* Guide columns were 68ch wide; "ch" depends on the loaded font (685px in the fallback, 796px in Plus Jakarta),
   so the column slid sideways when the web font arrived. Pin the same widths in pixels. */
body.kd-v10 .guide-hero-inner{max-width:796px}
body.kd-v10 .guide-article{max-width:821px}