/* ============================================================
   オリジナルアイコン - 絵文字の置き換え
   このファイルは tools/build-icons.js が icons/*.svg から自動生成します。
   直接編集せず、icons/ の SVG を直してから生成し直してください。
   ============================================================ */
.ic {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: 50% / contain no-repeat;
  flex-shrink: 0;
}

/* 左右反転(クリア画面のクラッカーを対にして並べるのに使う) */
.ic.flip { transform: scaleX(-1); }

.ic-back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 4.6 3.6 9.4l4.8 4.8' fill='none' stroke='%231f4e79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.6 9.4h9.2a6.4 6.4 0 0 1 0 12.8H8.8' fill='none' stroke='%231f4e79' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-beginner { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 3.4 21.2h8.6z' fill='%233f9d68'/%3E %3Cpath d='M12 2.6 20.6 21.2H12z' fill='%23e8a33d'/%3E%3C/svg%3E"); }
.ic-book { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 5.2c2.9-1.5 5.8-1.5 8.7 0v14c-2.9-1.5-5.8-1.5-8.7 0z' fill='%232f74c0'/%3E %3Cpath d='M21.4 5.2c-2.9-1.5-5.8-1.5-8.7 0v14c2.9-1.5 5.8-1.5 8.7 0z' fill='%231f4e79'/%3E %3Crect x='11.1' y='4' width='1.8' height='15.6' rx='0.9' fill='%23e8a33d'/%3E%3C/svg%3E"); }
.ic-bulb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4a6.8 6.8 0 0 0-4 12.3c.6.4.9 1 .9 1.7v.4h6.2v-.4c0-.7.3-1.3.9-1.7A6.8 6.8 0 0 0 12 2.4z' fill='%23e8a33d'/%3E %3Crect x='8.8' y='17.8' width='6.4' height='2.1' rx='1.05' fill='%231f4e79'/%3E %3Crect x='9.8' y='20.3' width='4.4' height='1.9' rx='0.95' fill='%231f4e79'/%3E%3C/svg%3E"); }
.ic-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.4' fill='%233f9d68'/%3E %3Cpath d='M7.4 12.4 10.6 15.6 16.6 9.2' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ic-crown { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.2 7.6 7 11.2 12 5l5 6.2 3.8-3.6-1.5 9.8H4.7z' fill='%23e8a33d' stroke='%23c07f1d' stroke-width='1.3' stroke-linejoin='round'/%3E %3Crect x='4.3' y='18.4' width='15.4' height='2.7' rx='1.35' fill='%23c07f1d'/%3E%3C/svg%3E"); }
.ic-draw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8v10.2M8 9.4 12 13.4l4-4' fill='none' stroke='%231f4e79' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M3.6 14.2v4a2.8 2.8 0 0 0 2.8 2.8h11.2a2.8 2.8 0 0 0 2.8-2.8v-4' fill='none' stroke='%231f4e79' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-forward { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.6 4.6 20.4 9.4l-4.8 4.8' fill='none' stroke='%231f4e79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20.4 9.4h-9.2a6.4 6.4 0 0 0 0 12.8h4' fill='none' stroke='%231f4e79' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-help { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.4' fill='%232f74c0'/%3E %3Cpath d='M9.2 9.3a2.9 2.9 0 0 1 5.6 1c0 1.9-2.8 2.3-2.8 4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E %3Ccircle cx='12' cy='17.4' r='1.35' fill='%23fff'/%3E%3C/svg%3E"); }
.ic-home { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.8 11.4 12 3.4l9.2 8' fill='none' stroke='%231f4e79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M5.4 11.8v7.6a1.6 1.6 0 0 0 1.6 1.6h10a1.6 1.6 0 0 0 1.6-1.6v-7.6' fill='%23fdf8ec' stroke='%231f4e79' stroke-width='2.2' stroke-linejoin='round'/%3E %3Crect x='10' y='14.6' width='4' height='6.4' rx='1' fill='%23d64339'/%3E%3C/svg%3E"); }
.ic-key { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='5.2' fill='none' stroke='%23e8a33d' stroke-width='2.6'/%3E %3Ccircle cx='8' cy='8' r='1.5' fill='%23e8a33d'/%3E %3Cpath d='M11.7 11.7 20.6 20.6' stroke='%23e8a33d' stroke-width='2.6' stroke-linecap='round'/%3E %3Cpath d='M17.6 17.6 15.2 20M15 15 12.8 17.2' stroke='%23e8a33d' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-library { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6.2' width='4.6' height='14.8' rx='1.4' fill='%232f74c0'/%3E %3Crect x='8.5' y='4' width='4.6' height='17' rx='1.4' fill='%23d64339'/%3E %3Crect x='14' y='6.8' width='4.6' height='14.2' rx='1.4' fill='%23e8a33d'/%3E %3Crect x='3' y='11' width='4.6' height='1.7' fill='%23fdf8ec'/%3E %3Crect x='8.5' y='9' width='4.6' height='1.7' fill='%23fdf8ec'/%3E %3Crect x='14' y='11.6' width='4.6' height='1.7' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.ic-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.7 10.2V7.8a4.3 4.3 0 0 1 8.6 0v2.4' fill='none' stroke='%231f4e79' stroke-width='2.4' stroke-linecap='round'/%3E %3Crect x='4.4' y='10.2' width='15.2' height='10.8' rx='3.2' fill='%23e8a33d'/%3E %3Ccircle cx='12' cy='14.9' r='1.9' fill='%231f4e79'/%3E %3Crect x='11.1' y='15.2' width='1.8' height='3.4' rx='0.9' fill='%231f4e79'/%3E%3C/svg%3E"); }
.ic-mouse { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.8' y='2.4' width='12.4' height='19.2' rx='6.2' fill='%23fdf8ec' stroke='%231f4e79' stroke-width='2.2'/%3E %3Cpath d='M6 11.2h12' stroke='%231f4e79' stroke-width='1.8'/%3E %3Cpath d='M12 2.6v3.2' stroke='%231f4e79' stroke-width='1.8'/%3E %3Crect x='11' y='5.8' width='2' height='4' rx='1' fill='%23d64339'/%3E%3C/svg%3E"); }
.ic-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.4 14.4 12 4 18.6z' fill='%231f4e79'/%3E%3Crect x='16.6' y='5.4' width='3' height='13.2' rx='1.5' fill='%23d64339'/%3E%3C/svg%3E"); }
.ic-palette { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8c5.3 0 9.4 3.7 9.4 8.3 0 2.9-2.2 4.5-4.5 4.5h-1.7c-1 0-1.8.8-1.8 1.8 0 .5.2.9.4 1.2.3.4.4.8.4 1.2 0 1-.8 1.8-1.8 1.8-5.7 0-10.2-4.4-10.2-9.4S6.3 2.8 12 2.8z' fill='%23fdf8ec' stroke='%231f4e79' stroke-width='1.6' stroke-linejoin='round'/%3E %3Ccircle cx='7.6' cy='10.2' r='1.5' fill='%23d64339'/%3E %3Ccircle cx='11' cy='7' r='1.5' fill='%23e8a33d'/%3E %3Ccircle cx='15.4' cy='7.8' r='1.5' fill='%232f74c0'/%3E %3Ccircle cx='7.4' cy='15' r='1.5' fill='%233f9d68'/%3E%3C/svg%3E"); }
.ic-party { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 21.4 8.4 7.8 16.2 15.6z' fill='%23d64339'/%3E %3Cpath d='M8.4 7.8 16.2 15.6' stroke='%23a83027' stroke-width='1.2' opacity='0.5'/%3E %3Ccircle cx='17.4' cy='4.6' r='1.6' fill='%23e8a33d'/%3E %3Ccircle cx='21' cy='9.6' r='1.3' fill='%232f74c0'/%3E %3Ccircle cx='13.2' cy='2.8' r='1.3' fill='%233f9d68'/%3E %3Ccircle cx='20.8' cy='3' r='1.1' fill='%23d64339'/%3E%3C/svg%3E"); }
.ic-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='1.8' width='13' height='20.4' rx='3.4' fill='%231f4e79'/%3E %3Crect x='7.6' y='4.6' width='8.8' height='12' rx='1.8' fill='%23fdf8ec'/%3E %3Crect x='9.3' y='7' width='5.4' height='2' rx='1' fill='%23d64339'/%3E %3Crect x='9.3' y='10.8' width='5.4' height='2' rx='1' fill='%232f74c0'/%3E %3Ccircle cx='12' cy='19.4' r='1.4' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.ic-practice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7.6' y='9.4' width='8.8' height='5.2' rx='1.4' fill='%231f4e79'/%3E %3Crect x='3.8' y='5.2' width='4.8' height='13.6' rx='2' fill='%232f74c0'/%3E %3Crect x='15.4' y='5.2' width='4.8' height='13.6' rx='2' fill='%232f74c0'/%3E %3Crect x='0.9' y='8.2' width='3' height='7.6' rx='1.5' fill='%231f4e79'/%3E %3Crect x='20.1' y='8.2' width='3' height='7.6' rx='1.5' fill='%231f4e79'/%3E%3C/svg%3E"); }
.ic-puzzle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 4.2h2.4a2.4 2.4 0 0 1 4.8 0h2.4a2.2 2.2 0 0 1 2.2 2.2v2.4a2.4 2.4 0 0 0 0 4.8v2.4a2.2 2.2 0 0 1-2.2 2.2h-2.4a2.4 2.4 0 0 0-4.8 0H6.4a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2z' fill='%231f4e79'/%3E%3C/svg%3E"); }
.ic-report { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-6.1L6.6 21.2v-3.6H6a3 3 0 0 1-3-3z' fill='%232f74c0'/%3E %3Crect x='11' y='6.8' width='2' height='5.4' rx='1' fill='%23fdf8ec'/%3E %3Ccircle cx='12' cy='14.4' r='1.2' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.ic-reset { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.2 12a8.2 8.2 0 1 1-2.7-6.1' fill='none' stroke='%231f4e79' stroke-width='2.4' stroke-linecap='round'/%3E %3Cpath d='M20.6 3v4.6H16' fill='none' stroke='%231f4e79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ic-robot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='3.2' r='1.7' fill='%23d64339'/%3E %3Crect x='11.2' y='4.2' width='1.6' height='3.2' fill='%231f4e79'/%3E %3Crect x='3.6' y='7' width='16.8' height='12.6' rx='4.2' fill='%231f4e79'/%3E %3Ccircle cx='8.9' cy='13' r='2.1' fill='%23fdf8ec'/%3E %3Ccircle cx='15.1' cy='13' r='2.1' fill='%23fdf8ec'/%3E %3Crect x='1' y='11' width='2.2' height='4.6' rx='1.1' fill='%231f4e79'/%3E %3Crect x='20.8' y='11' width='2.2' height='4.6' rx='1.1' fill='%231f4e79'/%3E%3C/svg%3E"); }
.ic-save { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 5.6a2.2 2.2 0 0 1 2.2-2.2h9.8l5.2 5.2v9.8a2.2 2.2 0 0 1-2.2 2.2H5.6a2.2 2.2 0 0 1-2.2-2.2z' fill='%231f4e79'/%3E %3Crect x='7.4' y='3.4' width='8' height='5.6' rx='1' fill='%23fdf8ec'/%3E %3Crect x='11.9' y='4.4' width='2.4' height='3.6' rx='0.7' fill='%232f74c0'/%3E %3Crect x='6.8' y='12.6' width='10.4' height='8' rx='1.4' fill='%23fdf8ec'/%3E %3Cpath d='M9 15h6M9 17.6h4' stroke='%231f4e79' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-sort { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 6.4h9.2M3.4 12h6.6M3.4 17.6h4.2' stroke='%231f4e79' stroke-width='2.3' stroke-linecap='round'/%3E %3Cpath d='M17.8 4.6v14.8M17.8 19.4l-3.2-3.4M17.8 19.4l3.2-3.4' fill='none' stroke='%23d64339' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ic-sparkle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2.4 11.8 7.6 17 9.4 11.8 11.2 10 16.4 8.2 11.2 3 9.4 8.2 7.6z' fill='%23e8a33d'/%3E %3Cpath d='M17.6 14.4 18.6 17.2 21.4 18.2 18.6 19.2 17.6 22 16.6 19.2 13.8 18.2 16.6 17.2z' fill='%23e8a33d' opacity='0.7'/%3E%3C/svg%3E"); }
.ic-tap { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9.7' y='2.4' width='4.6' height='10.6' rx='2.3' fill='%23fdf8ec' stroke='%231f4e79' stroke-width='1.8'/%3E %3Cpath d='M9.7 10.8h5.5a5.6 5.6 0 0 1 5.6 5.6v1.2a4.2 4.2 0 0 1-4.2 4.2h-5.2a4.2 4.2 0 0 1-3.2-1.5l-3.1-3.7a1.9 1.9 0 0 1 2.8-2.6l1.8 1.7z' fill='%23e8a33d' stroke='%231f4e79' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ic-trash { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 6.6h16.8' stroke='%231f4e79' stroke-width='2.3' stroke-linecap='round'/%3E %3Cpath d='M9.4 3.2h5.2a1.4 1.4 0 0 1 1.4 1.4v1.8H8V4.6a1.4 1.4 0 0 1 1.4-1.4z' fill='%231f4e79'/%3E %3Cpath d='M5.9 8.6h12.2l-.9 10.7a2 2 0 0 1-2 1.8H8.8a2 2 0 0 1-2-1.8z' fill='%23d64339'/%3E %3Cpath d='M10.3 11.9v5.6M13.7 11.9v5.6' stroke='%23fdf8ec' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-trophy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 3h10.4v6.2a5.2 5.2 0 0 1-10.4 0z' fill='%23e8a33d'/%3E %3Cpath d='M6.8 4.8H4.2v1.6a3.4 3.4 0 0 0 3.4 3.4M17.2 4.8h2.6v1.6a3.4 3.4 0 0 1-3.4 3.4' fill='none' stroke='%23e8a33d' stroke-width='1.8' stroke-linecap='round'/%3E %3Crect x='10.6' y='13.6' width='2.8' height='3.8' fill='%231f4e79'/%3E %3Crect x='6.8' y='17.2' width='10.4' height='3.6' rx='1.5' fill='%231f4e79'/%3E%3C/svg%3E"); }
.ic-user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.8' r='4.4' fill='%231f4e79'/%3E %3Cpath d='M3.8 21.2a8.2 8.2 0 0 1 16.4 0z' fill='%232f74c0'/%3E%3C/svg%3E"); }
.ic-warn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 3.4a1.6 1.6 0 0 1 2.8 0l8 14.5a1.6 1.6 0 0 1-1.4 2.4H4a1.6 1.6 0 0 1-1.4-2.4z' fill='%23e8a33d'/%3E %3Crect x='11' y='8' width='2' height='6.2' rx='1' fill='%235a3c00'/%3E %3Ccircle cx='12' cy='16.8' r='1.3' fill='%235a3c00'/%3E%3C/svg%3E"); }
.ic-wave { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-14 12 13)'%3E %3Crect x='6.2' y='6.4' width='2.7' height='9' rx='1.35' fill='%23e8a33d'/%3E %3Crect x='9.5' y='4.2' width='2.7' height='11.2' rx='1.35' fill='%23e8a33d'/%3E %3Crect x='12.8' y='4.8' width='2.7' height='10.6' rx='1.35' fill='%23e8a33d'/%3E %3Crect x='16.1' y='7' width='2.7' height='8.4' rx='1.35' fill='%23e8a33d'/%3E %3Cpath d='M6.2 12.4h12.6v3.4a5.6 5.6 0 0 1-5.6 5.6h-1.4a5.6 5.6 0 0 1-5.6-5.6z' fill='%23e8a33d'/%3E %3Cpath d='M6.6 14.4 4 11a1.6 1.6 0 0 1 2.5-2l2.2 2.6' fill='%23e8a33d'/%3E %3C/g%3E%3C/svg%3E"); }
.ic-zoom-in { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.4' cy='10.4' r='6.6' fill='%23fdf8ec' stroke='%231f4e79' stroke-width='2.2'/%3E%3Cpath d='M15.3 15.3 20.8 20.8' stroke='%231f4e79' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M7.4 10.4h6M10.4 7.4v6' stroke='%23d64339' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-zoom-out { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.4' cy='10.4' r='6.6' fill='%23fdf8ec' stroke='%231f4e79' stroke-width='2.2'/%3E%3Cpath d='M15.3 15.3 20.8 20.8' stroke='%231f4e79' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M7.4 10.4h6' stroke='%23d64339' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* 濃紺ボタンなど暗い背景に載せる場合。<i class="ic ic-draw on-dark"> のように付ける */
.on-dark.ic-back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 4.6 3.6 9.4l4.8 4.8' fill='none' stroke='%23fdf8ec' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.6 9.4h9.2a6.4 6.4 0 0 1 0 12.8H8.8' fill='none' stroke='%23fdf8ec' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.on-dark.ic-book { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 5.2c2.9-1.5 5.8-1.5 8.7 0v14c-2.9-1.5-5.8-1.5-8.7 0z' fill='%232f74c0'/%3E %3Cpath d='M21.4 5.2c-2.9-1.5-5.8-1.5-8.7 0v14c2.9-1.5 5.8-1.5 8.7 0z' fill='%23fdf8ec'/%3E %3Crect x='11.1' y='4' width='1.8' height='15.6' rx='0.9' fill='%23e8a33d'/%3E%3C/svg%3E"); }
.on-dark.ic-bulb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4a6.8 6.8 0 0 0-4 12.3c.6.4.9 1 .9 1.7v.4h6.2v-.4c0-.7.3-1.3.9-1.7A6.8 6.8 0 0 0 12 2.4z' fill='%23e8a33d'/%3E %3Crect x='8.8' y='17.8' width='6.4' height='2.1' rx='1.05' fill='%23fdf8ec'/%3E %3Crect x='9.8' y='20.3' width='4.4' height='1.9' rx='0.95' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.on-dark.ic-draw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8v10.2M8 9.4 12 13.4l4-4' fill='none' stroke='%23fdf8ec' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M3.6 14.2v4a2.8 2.8 0 0 0 2.8 2.8h11.2a2.8 2.8 0 0 0 2.8-2.8v-4' fill='none' stroke='%23fdf8ec' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.on-dark.ic-forward { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.6 4.6 20.4 9.4l-4.8 4.8' fill='none' stroke='%23fdf8ec' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20.4 9.4h-9.2a6.4 6.4 0 0 0 0 12.8h4' fill='none' stroke='%23fdf8ec' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.on-dark.ic-home { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.8 11.4 12 3.4l9.2 8' fill='none' stroke='%23fdf8ec' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M5.4 11.8v7.6a1.6 1.6 0 0 0 1.6 1.6h10a1.6 1.6 0 0 0 1.6-1.6v-7.6' fill='%23fdf8ec' stroke='%23fdf8ec' stroke-width='2.2' stroke-linejoin='round'/%3E %3Crect x='10' y='14.6' width='4' height='6.4' rx='1' fill='%23d64339'/%3E%3C/svg%3E"); }
.on-dark.ic-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.7 10.2V7.8a4.3 4.3 0 0 1 8.6 0v2.4' fill='none' stroke='%23fdf8ec' stroke-width='2.4' stroke-linecap='round'/%3E %3Crect x='4.4' y='10.2' width='15.2' height='10.8' rx='3.2' fill='%23e8a33d'/%3E %3Ccircle cx='12' cy='14.9' r='1.9' fill='%23fdf8ec'/%3E %3Crect x='11.1' y='15.2' width='1.8' height='3.4' rx='0.9' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.on-dark.ic-mouse { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.8' y='2.4' width='12.4' height='19.2' rx='6.2' fill='%23fdf8ec' stroke='%23fdf8ec' stroke-width='2.2'/%3E %3Cpath d='M6 11.2h12' stroke='%23fdf8ec' stroke-width='1.8'/%3E %3Cpath d='M12 2.6v3.2' stroke='%23fdf8ec' stroke-width='1.8'/%3E %3Crect x='11' y='5.8' width='2' height='4' rx='1' fill='%23d64339'/%3E%3C/svg%3E"); }
.on-dark.ic-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.4 14.4 12 4 18.6z' fill='%23fdf8ec'/%3E%3Crect x='16.6' y='5.4' width='3' height='13.2' rx='1.5' fill='%23d64339'/%3E%3C/svg%3E"); }
.on-dark.ic-palette { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8c5.3 0 9.4 3.7 9.4 8.3 0 2.9-2.2 4.5-4.5 4.5h-1.7c-1 0-1.8.8-1.8 1.8 0 .5.2.9.4 1.2.3.4.4.8.4 1.2 0 1-.8 1.8-1.8 1.8-5.7 0-10.2-4.4-10.2-9.4S6.3 2.8 12 2.8z' fill='%23fdf8ec' stroke='%23fdf8ec' stroke-width='1.6' stroke-linejoin='round'/%3E %3Ccircle cx='7.6' cy='10.2' r='1.5' fill='%23d64339'/%3E %3Ccircle cx='11' cy='7' r='1.5' fill='%23e8a33d'/%3E %3Ccircle cx='15.4' cy='7.8' r='1.5' fill='%232f74c0'/%3E %3Ccircle cx='7.4' cy='15' r='1.5' fill='%233f9d68'/%3E%3C/svg%3E"); }
.on-dark.ic-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='1.8' width='13' height='20.4' rx='3.4' fill='%23fdf8ec'/%3E %3Crect x='7.6' y='4.6' width='8.8' height='12' rx='1.8' fill='%23fdf8ec'/%3E %3Crect x='9.3' y='7' width='5.4' height='2' rx='1' fill='%23d64339'/%3E %3Crect x='9.3' y='10.8' width='5.4' height='2' rx='1' fill='%232f74c0'/%3E %3Ccircle cx='12' cy='19.4' r='1.4' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.on-dark.ic-practice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7.6' y='9.4' width='8.8' height='5.2' rx='1.4' fill='%23fdf8ec'/%3E %3Crect x='3.8' y='5.2' width='4.8' height='13.6' rx='2' fill='%232f74c0'/%3E %3Crect x='15.4' y='5.2' width='4.8' height='13.6' rx='2' fill='%232f74c0'/%3E %3Crect x='0.9' y='8.2' width='3' height='7.6' rx='1.5' fill='%23fdf8ec'/%3E %3Crect x='20.1' y='8.2' width='3' height='7.6' rx='1.5' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.on-dark.ic-puzzle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 4.2h2.4a2.4 2.4 0 0 1 4.8 0h2.4a2.2 2.2 0 0 1 2.2 2.2v2.4a2.4 2.4 0 0 0 0 4.8v2.4a2.2 2.2 0 0 1-2.2 2.2h-2.4a2.4 2.4 0 0 0-4.8 0H6.4a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2z' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.on-dark.ic-reset { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.2 12a8.2 8.2 0 1 1-2.7-6.1' fill='none' stroke='%23fdf8ec' stroke-width='2.4' stroke-linecap='round'/%3E %3Cpath d='M20.6 3v4.6H16' fill='none' stroke='%23fdf8ec' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.on-dark.ic-robot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='3.2' r='1.7' fill='%23d64339'/%3E %3Crect x='11.2' y='4.2' width='1.6' height='3.2' fill='%23fdf8ec'/%3E %3Crect x='3.6' y='7' width='16.8' height='12.6' rx='4.2' fill='%23fdf8ec'/%3E %3Ccircle cx='8.9' cy='13' r='2.1' fill='%23fdf8ec'/%3E %3Ccircle cx='15.1' cy='13' r='2.1' fill='%23fdf8ec'/%3E %3Crect x='1' y='11' width='2.2' height='4.6' rx='1.1' fill='%23fdf8ec'/%3E %3Crect x='20.8' y='11' width='2.2' height='4.6' rx='1.1' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.on-dark.ic-save { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 5.6a2.2 2.2 0 0 1 2.2-2.2h9.8l5.2 5.2v9.8a2.2 2.2 0 0 1-2.2 2.2H5.6a2.2 2.2 0 0 1-2.2-2.2z' fill='%23fdf8ec'/%3E %3Crect x='7.4' y='3.4' width='8' height='5.6' rx='1' fill='%23fdf8ec'/%3E %3Crect x='11.9' y='4.4' width='2.4' height='3.6' rx='0.7' fill='%232f74c0'/%3E %3Crect x='6.8' y='12.6' width='10.4' height='8' rx='1.4' fill='%23fdf8ec'/%3E %3Cpath d='M9 15h6M9 17.6h4' stroke='%23fdf8ec' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.on-dark.ic-sort { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 6.4h9.2M3.4 12h6.6M3.4 17.6h4.2' stroke='%23fdf8ec' stroke-width='2.3' stroke-linecap='round'/%3E %3Cpath d='M17.8 4.6v14.8M17.8 19.4l-3.2-3.4M17.8 19.4l3.2-3.4' fill='none' stroke='%23d64339' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.on-dark.ic-tap { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9.7' y='2.4' width='4.6' height='10.6' rx='2.3' fill='%23fdf8ec' stroke='%23fdf8ec' stroke-width='1.8'/%3E %3Cpath d='M9.7 10.8h5.5a5.6 5.6 0 0 1 5.6 5.6v1.2a4.2 4.2 0 0 1-4.2 4.2h-5.2a4.2 4.2 0 0 1-3.2-1.5l-3.1-3.7a1.9 1.9 0 0 1 2.8-2.6l1.8 1.7z' fill='%23e8a33d' stroke='%23fdf8ec' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.on-dark.ic-trash { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 6.6h16.8' stroke='%23fdf8ec' stroke-width='2.3' stroke-linecap='round'/%3E %3Cpath d='M9.4 3.2h5.2a1.4 1.4 0 0 1 1.4 1.4v1.8H8V4.6a1.4 1.4 0 0 1 1.4-1.4z' fill='%23fdf8ec'/%3E %3Cpath d='M5.9 8.6h12.2l-.9 10.7a2 2 0 0 1-2 1.8H8.8a2 2 0 0 1-2-1.8z' fill='%23d64339'/%3E %3Cpath d='M10.3 11.9v5.6M13.7 11.9v5.6' stroke='%23fdf8ec' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.on-dark.ic-trophy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.8 3h10.4v6.2a5.2 5.2 0 0 1-10.4 0z' fill='%23e8a33d'/%3E %3Cpath d='M6.8 4.8H4.2v1.6a3.4 3.4 0 0 0 3.4 3.4M17.2 4.8h2.6v1.6a3.4 3.4 0 0 1-3.4 3.4' fill='none' stroke='%23e8a33d' stroke-width='1.8' stroke-linecap='round'/%3E %3Crect x='10.6' y='13.6' width='2.8' height='3.8' fill='%23fdf8ec'/%3E %3Crect x='6.8' y='17.2' width='10.4' height='3.6' rx='1.5' fill='%23fdf8ec'/%3E%3C/svg%3E"); }
.on-dark.ic-user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.8' r='4.4' fill='%23fdf8ec'/%3E %3Cpath d='M3.8 21.2a8.2 8.2 0 0 1 16.4 0z' fill='%232f74c0'/%3E%3C/svg%3E"); }
.on-dark.ic-zoom-in { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.4' cy='10.4' r='6.6' fill='%23fdf8ec' stroke='%23fdf8ec' stroke-width='2.2'/%3E%3Cpath d='M15.3 15.3 20.8 20.8' stroke='%23fdf8ec' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M7.4 10.4h6M10.4 7.4v6' stroke='%23d64339' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.on-dark.ic-zoom-out { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.4' cy='10.4' r='6.6' fill='%23fdf8ec' stroke='%23fdf8ec' stroke-width='2.2'/%3E%3Cpath d='M15.3 15.3 20.8 20.8' stroke='%23fdf8ec' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M7.4 10.4h6' stroke='%23d64339' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }