/* B · Bento — all the content in tiles of different sizes. */
:root {
  --bg: #ebe7dd; --s: #faf8f3; --l: #d6cfbf; --i: #1b1a17; --m: #5f5b52; --acc: #b83a17;
  /* Dark tiles: ink on cream in light mode, near black in dark mode. */
  --dk: #1b1a17; --dk-fg: #ebe7dd; --dk-dim: #b8b2a4;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fondo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Ccircle cx='-20' cy='-10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='-20' cy='-10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='-20' cy='-10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-20' cy='-10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-20' cy='-10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='20' cy='-10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='20' cy='-10' r='18.5' fill='none' stroke='%23e6d0c2' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='-10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='20' cy='-10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='20' cy='-10' r='4.5' fill='none' stroke='%23e6d0c2' stroke-width='1'/%3E%3Ccircle cx='60' cy='-10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='60' cy='-10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='-10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='60' cy='-10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='60' cy='-10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='100' cy='-10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='100' cy='-10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='100' cy='-10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='100' cy='-10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='100' cy='-10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='140' cy='-10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='140' cy='-10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='140' cy='-10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='140' cy='-10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='140' cy='-10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='180' cy='-10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='180' cy='-10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='180' cy='-10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='180' cy='-10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='180' cy='-10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='-40' cy='0' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='-40' cy='0' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='-40' cy='0' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-40' cy='0' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-40' cy='0' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='0' cy='0' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='0' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='40' cy='0' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='40' cy='0' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='40' cy='0' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='40' cy='0' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='40' cy='0' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='80' cy='0' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='80' cy='0' r='18.5' fill='none' stroke='%23e6d0c2' stroke-width='1.6'/%3E%3Ccircle cx='80' cy='0' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='80' cy='0' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='80' cy='0' r='4.5' fill='none' stroke='%23e6d0c2' stroke-width='1'/%3E%3Ccircle cx='120' cy='0' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='120' cy='0' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='120' cy='0' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='120' cy='0' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='120' cy='0' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='160' cy='0' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='160' cy='0' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='160' cy='0' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='160' cy='0' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='160' cy='0' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='200' cy='0' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='200' cy='0' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='200' cy='0' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='200' cy='0' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='200' cy='0' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='-20' cy='10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='-20' cy='10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='-20' cy='10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-20' cy='10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-20' cy='10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='20' cy='10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='20' cy='10' r='18.5' fill='none' stroke='%23e6d0c2' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='20' cy='10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='20' cy='10' r='4.5' fill='none' stroke='%23e6d0c2' stroke-width='1'/%3E%3Ccircle cx='60' cy='10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='60' cy='10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='60' cy='10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='60' cy='10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='100' cy='10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='100' cy='10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='100' cy='10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='100' cy='10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='100' cy='10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='140' cy='10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='140' cy='10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='140' cy='10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='140' cy='10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='140' cy='10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='180' cy='10' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='180' cy='10' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='180' cy='10' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='180' cy='10' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='180' cy='10' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='-40' cy='20' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='-40' cy='20' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='-40' cy='20' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-40' cy='20' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-40' cy='20' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='0' cy='20' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='0' cy='20' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='20' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='0' cy='20' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='0' cy='20' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='40' cy='20' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='40' cy='20' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='40' cy='20' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='40' cy='20' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='40' cy='20' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='80' cy='20' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='80' cy='20' r='18.5' fill='none' stroke='%23e6d0c2' stroke-width='1.6'/%3E%3Ccircle cx='80' cy='20' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='80' cy='20' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='80' cy='20' r='4.5' fill='none' stroke='%23e6d0c2' stroke-width='1'/%3E%3Ccircle cx='120' cy='20' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='120' cy='20' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='120' cy='20' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='120' cy='20' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='120' cy='20' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='160' cy='20' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='160' cy='20' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='160' cy='20' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='160' cy='20' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='160' cy='20' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='200' cy='20' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='200' cy='20' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='200' cy='20' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='200' cy='20' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='200' cy='20' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='-20' cy='30' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='-20' cy='30' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='-20' cy='30' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-20' cy='30' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-20' cy='30' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='20' cy='30' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='20' cy='30' r='18.5' fill='none' stroke='%23e6d0c2' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='30' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='20' cy='30' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='20' cy='30' r='4.5' fill='none' stroke='%23e6d0c2' stroke-width='1'/%3E%3Ccircle cx='60' cy='30' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='60' cy='30' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='30' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='60' cy='30' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='60' cy='30' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='100' cy='30' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='100' cy='30' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='100' cy='30' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='100' cy='30' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='100' cy='30' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='140' cy='30' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='140' cy='30' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='140' cy='30' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='140' cy='30' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='140' cy='30' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='180' cy='30' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='180' cy='30' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='180' cy='30' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='180' cy='30' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='180' cy='30' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='-40' cy='40' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='-40' cy='40' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='-40' cy='40' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-40' cy='40' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-40' cy='40' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='0' cy='40' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='40' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='40' cy='40' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='40' cy='40' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='80' cy='40' r='18.5' fill='none' stroke='%23e6d0c2' stroke-width='1.6'/%3E%3Ccircle cx='80' cy='40' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='4.5' fill='none' stroke='%23e6d0c2' stroke-width='1'/%3E%3Ccircle cx='120' cy='40' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='120' cy='40' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='120' cy='40' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='120' cy='40' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='120' cy='40' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='160' cy='40' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='160' cy='40' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='160' cy='40' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='160' cy='40' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='160' cy='40' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='200' cy='40' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='200' cy='40' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='200' cy='40' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='200' cy='40' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='200' cy='40' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='-20' cy='50' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='-20' cy='50' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='-20' cy='50' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-20' cy='50' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='-20' cy='50' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='20' cy='50' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='20' cy='50' r='18.5' fill='none' stroke='%23e6d0c2' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='50' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='20' cy='50' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='20' cy='50' r='4.5' fill='none' stroke='%23e6d0c2' stroke-width='1'/%3E%3Ccircle cx='60' cy='50' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='60' cy='50' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='50' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='60' cy='50' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='60' cy='50' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='100' cy='50' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='100' cy='50' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='100' cy='50' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='100' cy='50' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='100' cy='50' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='140' cy='50' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='140' cy='50' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='140' cy='50' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='140' cy='50' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='140' cy='50' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3Ccircle cx='180' cy='50' r='20' fill='%23ebe7dd'/%3E%3Ccircle cx='180' cy='50' r='18.5' fill='none' stroke='%23dcd4c3' stroke-width='1.6'/%3E%3Ccircle cx='180' cy='50' r='14' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='180' cy='50' r='9.5' fill='none' stroke='%23e3ddd0' stroke-width='1'/%3E%3Ccircle cx='180' cy='50' r='4.5' fill='none' stroke='%23dcd4c3' stroke-width='1'/%3E%3C/svg%3E");
  --gato-dormido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'%3E%3Cpath fill='%232a2723' d='M12 64C8 44 24 24 58 22c34-2 54 14 52 34-1 7-6 9-12 9H18c-3 0-5-0-6-1z'/%3E%3Cpath fill='%232a2723' d='M14 62c-4-10-2-20 4-26l-3-17 12 10c4-1 8-1 12 0l11-11-1 18c5 6 6 16 2 24-3 5-10 6-19 6s-15-1-18-4z'/%3E%3Cpath fill='%23c98a7a' d='M18 31l-1-8 6 5zM44 27l1-8-6 6z'/%3E%3Cpath fill='none' stroke='%232a2723' stroke-width='8' stroke-linecap='round' d='M104 60c8 6-2 11-22 11-14 0-26-1-34-3'/%3E%3Cpath fill='none' stroke='%23ebe7dd' stroke-width='2' stroke-linecap='round' d='M21 45q4 3 8 0M35 45q4 3 8 0'/%3E%3Cpath fill='%23c98a7a' d='M30.5 51h3l-1.5 2z'/%3E%3C/svg%3E");
  --madera: #a8703f; --madera-borde: #6e4423;
  --mantel: #2f3d5c; --mantel-2: #34446a;
  --gato-pelo: #1f1d1a;
  color-scheme: light;
  --acc-fg: #fff; --vivo: #7bd88f;
}
:root[data-theme="dark"] {
  --bg: #141310; --s: #1e1c18; --l: #3a352c; --i: #efe9dc; --m: #a8a193; --acc: #e0643c;
  --dk: #0b0a08; --dk-fg: #efe9dc; --dk-dim: #a8a193;
  --fondo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Ccircle cx='-20' cy='-10' r='20' fill='%23141310'/%3E%3Ccircle cx='-20' cy='-10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='-20' cy='-10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-20' cy='-10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-20' cy='-10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='20' cy='-10' r='20' fill='%23141310'/%3E%3Ccircle cx='20' cy='-10' r='18.5' fill='none' stroke='%232e2019' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='-10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='20' cy='-10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='20' cy='-10' r='4.5' fill='none' stroke='%232e2019' stroke-width='1'/%3E%3Ccircle cx='60' cy='-10' r='20' fill='%23141310'/%3E%3Ccircle cx='60' cy='-10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='-10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='60' cy='-10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='60' cy='-10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='100' cy='-10' r='20' fill='%23141310'/%3E%3Ccircle cx='100' cy='-10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='100' cy='-10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='100' cy='-10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='100' cy='-10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='140' cy='-10' r='20' fill='%23141310'/%3E%3Ccircle cx='140' cy='-10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='140' cy='-10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='140' cy='-10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='140' cy='-10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='180' cy='-10' r='20' fill='%23141310'/%3E%3Ccircle cx='180' cy='-10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='180' cy='-10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='180' cy='-10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='180' cy='-10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='-40' cy='0' r='20' fill='%23141310'/%3E%3Ccircle cx='-40' cy='0' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='-40' cy='0' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-40' cy='0' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-40' cy='0' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='20' fill='%23141310'/%3E%3Ccircle cx='0' cy='0' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='0' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='40' cy='0' r='20' fill='%23141310'/%3E%3Ccircle cx='40' cy='0' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='40' cy='0' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='40' cy='0' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='40' cy='0' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='80' cy='0' r='20' fill='%23141310'/%3E%3Ccircle cx='80' cy='0' r='18.5' fill='none' stroke='%232e2019' stroke-width='1.6'/%3E%3Ccircle cx='80' cy='0' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='80' cy='0' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='80' cy='0' r='4.5' fill='none' stroke='%232e2019' stroke-width='1'/%3E%3Ccircle cx='120' cy='0' r='20' fill='%23141310'/%3E%3Ccircle cx='120' cy='0' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='120' cy='0' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='120' cy='0' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='120' cy='0' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='160' cy='0' r='20' fill='%23141310'/%3E%3Ccircle cx='160' cy='0' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='160' cy='0' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='160' cy='0' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='160' cy='0' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='200' cy='0' r='20' fill='%23141310'/%3E%3Ccircle cx='200' cy='0' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='200' cy='0' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='200' cy='0' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='200' cy='0' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='-20' cy='10' r='20' fill='%23141310'/%3E%3Ccircle cx='-20' cy='10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='-20' cy='10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-20' cy='10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-20' cy='10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='20' cy='10' r='20' fill='%23141310'/%3E%3Ccircle cx='20' cy='10' r='18.5' fill='none' stroke='%232e2019' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='20' cy='10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='20' cy='10' r='4.5' fill='none' stroke='%232e2019' stroke-width='1'/%3E%3Ccircle cx='60' cy='10' r='20' fill='%23141310'/%3E%3Ccircle cx='60' cy='10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='60' cy='10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='60' cy='10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='100' cy='10' r='20' fill='%23141310'/%3E%3Ccircle cx='100' cy='10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='100' cy='10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='100' cy='10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='100' cy='10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='140' cy='10' r='20' fill='%23141310'/%3E%3Ccircle cx='140' cy='10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='140' cy='10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='140' cy='10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='140' cy='10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='180' cy='10' r='20' fill='%23141310'/%3E%3Ccircle cx='180' cy='10' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='180' cy='10' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='180' cy='10' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='180' cy='10' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='-40' cy='20' r='20' fill='%23141310'/%3E%3Ccircle cx='-40' cy='20' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='-40' cy='20' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-40' cy='20' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-40' cy='20' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='0' cy='20' r='20' fill='%23141310'/%3E%3Ccircle cx='0' cy='20' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='20' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='0' cy='20' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='0' cy='20' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='40' cy='20' r='20' fill='%23141310'/%3E%3Ccircle cx='40' cy='20' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='40' cy='20' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='40' cy='20' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='40' cy='20' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='80' cy='20' r='20' fill='%23141310'/%3E%3Ccircle cx='80' cy='20' r='18.5' fill='none' stroke='%232e2019' stroke-width='1.6'/%3E%3Ccircle cx='80' cy='20' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='80' cy='20' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='80' cy='20' r='4.5' fill='none' stroke='%232e2019' stroke-width='1'/%3E%3Ccircle cx='120' cy='20' r='20' fill='%23141310'/%3E%3Ccircle cx='120' cy='20' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='120' cy='20' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='120' cy='20' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='120' cy='20' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='160' cy='20' r='20' fill='%23141310'/%3E%3Ccircle cx='160' cy='20' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='160' cy='20' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='160' cy='20' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='160' cy='20' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='200' cy='20' r='20' fill='%23141310'/%3E%3Ccircle cx='200' cy='20' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='200' cy='20' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='200' cy='20' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='200' cy='20' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='-20' cy='30' r='20' fill='%23141310'/%3E%3Ccircle cx='-20' cy='30' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='-20' cy='30' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-20' cy='30' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-20' cy='30' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='20' cy='30' r='20' fill='%23141310'/%3E%3Ccircle cx='20' cy='30' r='18.5' fill='none' stroke='%232e2019' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='30' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='20' cy='30' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='20' cy='30' r='4.5' fill='none' stroke='%232e2019' stroke-width='1'/%3E%3Ccircle cx='60' cy='30' r='20' fill='%23141310'/%3E%3Ccircle cx='60' cy='30' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='30' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='60' cy='30' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='60' cy='30' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='100' cy='30' r='20' fill='%23141310'/%3E%3Ccircle cx='100' cy='30' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='100' cy='30' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='100' cy='30' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='100' cy='30' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='140' cy='30' r='20' fill='%23141310'/%3E%3Ccircle cx='140' cy='30' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='140' cy='30' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='140' cy='30' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='140' cy='30' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='180' cy='30' r='20' fill='%23141310'/%3E%3Ccircle cx='180' cy='30' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='180' cy='30' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='180' cy='30' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='180' cy='30' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='-40' cy='40' r='20' fill='%23141310'/%3E%3Ccircle cx='-40' cy='40' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='-40' cy='40' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-40' cy='40' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-40' cy='40' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='20' fill='%23141310'/%3E%3Ccircle cx='0' cy='40' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='40' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='0' cy='40' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='20' fill='%23141310'/%3E%3Ccircle cx='40' cy='40' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='40' cy='40' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='20' fill='%23141310'/%3E%3Ccircle cx='80' cy='40' r='18.5' fill='none' stroke='%232e2019' stroke-width='1.6'/%3E%3Ccircle cx='80' cy='40' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='80' cy='40' r='4.5' fill='none' stroke='%232e2019' stroke-width='1'/%3E%3Ccircle cx='120' cy='40' r='20' fill='%23141310'/%3E%3Ccircle cx='120' cy='40' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='120' cy='40' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='120' cy='40' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='120' cy='40' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='160' cy='40' r='20' fill='%23141310'/%3E%3Ccircle cx='160' cy='40' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='160' cy='40' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='160' cy='40' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='160' cy='40' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='200' cy='40' r='20' fill='%23141310'/%3E%3Ccircle cx='200' cy='40' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='200' cy='40' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='200' cy='40' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='200' cy='40' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='-20' cy='50' r='20' fill='%23141310'/%3E%3Ccircle cx='-20' cy='50' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='-20' cy='50' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-20' cy='50' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='-20' cy='50' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='20' cy='50' r='20' fill='%23141310'/%3E%3Ccircle cx='20' cy='50' r='18.5' fill='none' stroke='%232e2019' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='50' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='20' cy='50' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='20' cy='50' r='4.5' fill='none' stroke='%232e2019' stroke-width='1'/%3E%3Ccircle cx='60' cy='50' r='20' fill='%23141310'/%3E%3Ccircle cx='60' cy='50' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='50' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='60' cy='50' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='60' cy='50' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='100' cy='50' r='20' fill='%23141310'/%3E%3Ccircle cx='100' cy='50' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='100' cy='50' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='100' cy='50' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='100' cy='50' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='140' cy='50' r='20' fill='%23141310'/%3E%3Ccircle cx='140' cy='50' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='140' cy='50' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='140' cy='50' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='140' cy='50' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3Ccircle cx='180' cy='50' r='20' fill='%23141310'/%3E%3Ccircle cx='180' cy='50' r='18.5' fill='none' stroke='%23221f19' stroke-width='1.6'/%3E%3Ccircle cx='180' cy='50' r='14' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='180' cy='50' r='9.5' fill='none' stroke='%231b1915' stroke-width='1'/%3E%3Ccircle cx='180' cy='50' r='4.5' fill='none' stroke='%23221f19' stroke-width='1'/%3E%3C/svg%3E");
  --gato-dormido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'%3E%3Cpath fill='%236d665a' d='M12 64C8 44 24 24 58 22c34-2 54 14 52 34-1 7-6 9-12 9H18c-3 0-5-0-6-1z'/%3E%3Cpath fill='%236d665a' d='M14 62c-4-10-2-20 4-26l-3-17 12 10c4-1 8-1 12 0l11-11-1 18c5 6 6 16 2 24-3 5-10 6-19 6s-15-1-18-4z'/%3E%3Cpath fill='%23b0766a' d='M18 31l-1-8 6 5zM44 27l1-8-6 6z'/%3E%3Cpath fill='none' stroke='%236d665a' stroke-width='8' stroke-linecap='round' d='M104 60c8 6-2 11-22 11-14 0-26-1-34-3'/%3E%3Cpath fill='none' stroke='%23141310' stroke-width='2' stroke-linecap='round' d='M21 45q4 3 8 0M35 45q4 3 8 0'/%3E%3Cpath fill='%23b0766a' d='M30.5 51h3l-1.5 2z'/%3E%3C/svg%3E");
  --madera: #5b3b22; --madera-borde: #2e1c0f;
  --mantel: #18202f; --mantel-2: #1c2536;
  --gato-pelo: #3a362f;
  color-scheme: dark;
}
/* Patterns and drawings. The ones on the dark and terracotta tiles are
   translucent white because those tiles are dark in both themes; the drawings
   are masks so they can be tinted with the theme's color. */
:root {
  --asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='51.96' viewBox='0 0 30 51.96'%3E%3Cpath d='M-30 51.96L-45.0 60.62M-45.0 77.94L-60 51.96M45.0 -25.98L30.0 -17.32M75.0 77.94L60.0 51.96M75.0 25.98L90.0 34.64M30.0 51.96L30.0 69.28M75.0 25.98L60.0 17.32M15.0 -25.98L0.0 -17.32M60 0.0L90 0.0M60 0.0L45.0 8.66M-30 0.0L0 0.0M-60 0.0L-30 0.0M75.0 25.98L90.0 17.32M90 0.0L75.0 -8.66M75.0 25.98L60.0 0.0M0 51.96L15.0 60.62M60 51.96L45.0 60.62M0 51.96L-15.0 43.3M-30 0.0L-15.0 8.66M45.0 25.98L30.0 17.32M15.0 77.94L0.0 51.96M30 0.0L45.0 8.66M60 51.96L45.0 43.3M45.0 -25.98L60.0 -17.32M90.0 0.0L75.0 -25.98M0 51.96L15.0 43.3M45.0 -25.98L45.0 -8.66M45.0 25.98L30.0 0.0M-45.0 -25.98L-45.0 -8.66M75.0 77.94L75.0 60.62M15.0 25.98L45.0 25.98M-60 0.0L-45.0 8.66M90.0 0.0L90.0 17.32M75.0 25.98L60.0 51.96M105.0 77.94L90.0 51.96M45.0 -25.98L30.0 0.0M75.0 77.94L105.0 77.94M30 0.0L15.0 -8.66M75.0 25.98L75.0 8.66M-60 51.96L-45.0 60.62M0 0.0L-15.0 25.98M0.0 51.96L0.0 34.64M60 0.0L45.0 25.98M0 51.96L-15.0 77.94M-15.0 77.94L15.0 77.94M-30 51.96L0 51.96M45.0 25.98L30.0 51.96M-30 0.0L-45.0 25.98M-15.0 77.94L0.0 69.28M75.0 -25.98L60.0 0.0M90.0 0.0L90.0 -17.32M30.0 0.0L15.0 -25.98M-60 51.96L-45.0 43.3M60 51.96L45.0 77.94M45.0 -25.98L75.0 -25.98M0 0.0L-15.0 8.66M75.0 25.98L105.0 25.98M0 51.96L-15.0 60.62M45.0 25.98L45.0 8.66M45.0 25.98L30.0 34.64M-30 0.0L-45.0 8.66M-45.0 -25.98L-15.0 -25.98M15.0 25.98L0.0 34.64M-15.0 77.94L-30.0 51.96M75.0 -25.98L60.0 -17.32M-15.0 25.98L-15.0 8.66M30.0 0.0L30.0 17.32M90 0.0L75.0 8.66M15.0 25.98L0.0 17.32M-30.0 51.96L-45.0 25.98M30 51.96L15.0 77.94M60 51.96L75.0 60.62M0 0.0L15.0 8.66M-15.0 25.98L15.0 25.98M60 0.0L75.0 8.66M15.0 25.98L0.0 0.0M0.0 0.0L0.0 17.32M60.0 51.96L60.0 69.28M105.0 25.98L90.0 51.96M45.0 25.98L60.0 34.64M15.0 25.98L30.0 34.64M-45.0 25.98L-45.0 43.3M45.0 77.94L60.0 69.28M30.0 0.0L30.0 -17.32M75.0 -25.98L75.0 -8.66M30.0 51.96L30.0 34.64M60 51.96L75.0 43.3M30 51.96L15.0 60.62M90.0 51.96L90.0 69.28M105.0 -25.98L90.0 0.0M-15.0 -25.98L-15.0 -8.66M45.0 25.98L60.0 17.32M-30.0 51.96L-30.0 34.64M15.0 25.98L30.0 17.32M15.0 25.98L15.0 43.3M105.0 25.98L90.0 34.64M30 51.96L15.0 43.3M30 0.0L60 0.0M0.0 0.0L0.0 -17.32M105.0 -25.98L90.0 -17.32M105.0 25.98L90.0 17.32M15.0 25.98L0.0 51.96M-45.0 -25.98L-60 0.0M-30 51.96L-15.0 60.62M90 51.96L75.0 77.94M30 51.96L45.0 60.62M-30.0 51.96L-30.0 69.28M30 0.0L45.0 -8.66M90 0.0L75.0 25.98M105.0 25.98L90.0 0.0M0 0.0L30 0.0M0 51.96L30 51.96M-15.0 -25.98L15.0 -25.98M-30 51.96L-15.0 43.3M-45.0 25.98L-30.0 34.64M90 51.96L75.0 60.62M75.0 -25.98L105.0 -25.98M30 51.96L45.0 43.3M45.0 77.94L30.0 69.28M45.0 25.98L75.0 25.98M75.0 77.94L60.0 69.28M-15.0 25.98L-30.0 0.0M45.0 77.94L45.0 60.62M-45.0 -25.98L-30.0 -17.32M-45.0 25.98L-30.0 17.32M75.0 -25.98L90.0 -17.32M-45.0 25.98L-60 0.0M60.0 0.0L60.0 17.32M90 51.96L75.0 43.3M0.0 51.96L-15.0 25.98M-15.0 25.98L-15.0 43.3M15.0 77.94L15.0 60.62M60.0 51.96L45.0 25.98M15.0 77.94L0.0 69.28M30 51.96L60 51.96M30 0.0L15.0 25.98M-60 51.96L-30 51.96M-45.0 77.94L-30.0 69.28M75.0 77.94L90.0 69.28M60.0 0.0L60.0 -17.32M0 0.0L-15.0 -8.66M-15.0 25.98L-30.0 51.96M15.0 -25.98L45.0 -25.98M60 0.0L45.0 -8.66M-30 51.96L-45.0 43.3M15.0 77.94L45.0 77.94M-30 0.0L-45.0 -8.66M-45.0 25.98L-60 51.96M30 0.0L15.0 8.66M15.0 77.94L30.0 69.28M0.0 0.0L-15.0 -25.98M-15.0 -25.98L-30.0 0.0M15.0 -25.98L30.0 -17.32M60.0 0.0L45.0 -25.98M-15.0 25.98L-30.0 34.64M-30 0.0L-15.0 -8.66M-45.0 25.98L-45.0 8.66M45.0 77.94L30.0 51.96M-30.0 0.0L-45.0 -25.98M0.0 51.96L0.0 69.28M30.0 51.96L15.0 25.98M105.0 77.94L90.0 69.28M60.0 51.96L60.0 34.64M-15.0 -25.98L-30.0 -17.32M-15.0 25.98L-30.0 17.32M75.0 25.98L75.0 43.3M15.0 25.98L15.0 8.66M15.0 -25.98L15.0 -8.66M0 0.0L15.0 -8.66M60 0.0L75.0 -8.66M-45.0 25.98L-15.0 25.98M-45.0 77.94L-45.0 60.62M-30.0 0.0L-30.0 17.32M90.0 51.96L90.0 34.64M60 51.96L90 51.96M-60 0.0L-45.0 -8.66M-15.0 25.98L0.0 34.64M45.0 77.94L75.0 77.94M45.0 25.98L45.0 43.3M-30 51.96L-45.0 77.94M-15.0 77.94L-15.0 60.62M-45.0 77.94L-15.0 77.94M-15.0 77.94L-30.0 69.28M-15.0 -25.98L0.0 -17.32M-15.0 25.98L0.0 17.32M75.0 25.98L60.0 34.64M15.0 -25.98L0.0 0.0M-30.0 0.0L-30.0 -17.32M90.0 51.96L75.0 25.98' fill='none' stroke='rgba%28255,255,255,.07%29' stroke-width='.8'/%3E%3C/svg%3E");
  --shippo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='rgba%28255,255,255,.16%29' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='18'/%3E%3Ccircle cx='36' cy='0' r='18'/%3E%3Ccircle cx='0' cy='36' r='18'/%3E%3Ccircle cx='36' cy='36' r='18'/%3E%3Ccircle cx='18' cy='18' r='18'/%3E%3C/g%3E%3C/svg%3E");
  --nigiri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cg fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 40c0-8 8-10 34-10s34 2 34 10v6c0 6-6 10-34 10S16 52 16 46z'/%3E%3Cpath d='M10 34c6-16 26-24 46-22 18 2 32 10 36 20 1 4-3 6-8 5-10-2-22-3-36-3s-26 1-34 3c-3 1-5-1-4-3z'/%3E%3Cpath d='M30 18c4 4 6 10 6 15M46 14c4 5 6 11 6 17M62 15c4 5 5 11 5 17M76 21c3 3 4 8 4 12' stroke-width='3.2' opacity='.6'/%3E%3Cpath d='M44 32v24M56 32v24' stroke-width='2'/%3E%3Cpath d='M24 48h.1M34 51h.1M68 51h.1M76 47h.1' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  --gato-duerme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'%3E%3Cpath fill='%232a2723' d='M12 64C8 44 24 24 58 22c34-2 54 14 52 34-1 7-6 9-12 9H18c-3 0-5-0-6-1z'/%3E%3Cpath fill='%232a2723' d='M14 62c-4-10-2-20 4-26l-3-17 12 10c4-1 8-1 12 0l11-11-1 18c5 6 6 16 2 24-3 5-10 6-19 6s-15-1-18-4z'/%3E%3Cpath fill='%23c98a7a' d='M18 31l-1-8 6 5zM44 27l1-8-6 6z'/%3E%3Cpath fill='none' stroke='%232a2723' stroke-width='8' stroke-linecap='round' d='M104 60c8 6-2 11-22 11-14 0-26-1-34-3'/%3E%3Cpath fill='none' stroke='%23ebe7dd' stroke-width='2' stroke-linecap='round' d='M21 45q4 3 8 0M35 45q4 3 8 0'/%3E%3Cpath fill='%23c98a7a' d='M30.5 51h3l-1.5 2z'/%3E%3C/svg%3E");
  --hashi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='black'%3E%3Cpath d='M2 6.2l40 5.4a1.2 1.2 0 0 1-.3 2.4L2 9.2A1.5 1.5 0 0 1 2 6.2z'/%3E%3Cpath d='M2 12.6l40 1.6a1.2 1.2 0 0 1 0 2.4L2 15.6a1.5 1.5 0 0 1 0-3z'/%3E%3Cpath d='M30 16h12a3 3 0 0 1 0 6H30a3 3 0 0 1 0-6z' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--fondo) 0 0 / 160px 40px, var(--bg); color: var(--i); font-family: "Geist", system-ui, sans-serif; line-height: 1.5; }
a { color: var(--i); }
.wrap { width: min(1184px, 100% - 32px); margin-inline: auto; }
.serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }
.mono { font-family: "Geist Mono", monospace; }
.lbl { font: 500 11px "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--m); }
/* .hero p and .contacto p enlarge paragraphs: the label must not inherit that. */
.tile p.lbl { font-size: 11px; max-width: none; }

.top { display: flex; align-items: center; gap: 16px; padding: 24px 0 18px; }
.top .marca-ac { --marca-tam: 44px; margin-right: auto; }
.pills { display: flex; gap: 4px; padding: 4px; background: var(--s); border-radius: 999px; }
.pills a { font-size: 14px; font-weight: 500; text-decoration: none; height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; }
.pills a:hover { background: var(--bg); }
.pills a.on { background: var(--i); color: var(--bg); }
.top [data-prefs] { --p-fg: var(--i); --p-bg: var(--s); --p-line: transparent; --p-hover-bg: var(--i); --p-hover-fg: var(--bg); --p-font: "Geist Mono", monospace; }
.top .prefs__btn { min-width: 48px; height: 48px; }

[data-rueda] {
  --r-bg: var(--s); --r-fg: var(--i); --r-muted: var(--m); --r-acc: var(--acc); --r-line: var(--l);
  --r-radius: 999px; --r-font: "Geist Mono", monospace; --r-btn-radius: 999px; --r-btn-bg: var(--i); --r-btn-fg: var(--bg);
}

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
/* container-type: when shuffling, a tile may land in a narrower slot and its
   titles are sized with cqi (the tile's width), not the window's. */
.tile { background: var(--s); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; min-width: 0; container-type: inline-size; }
.dark { background: var(--asanoha) 0 0 / 30px auto, var(--dk); color: var(--dk-fg); }
.dark .lbl { color: var(--dk-dim); }
.s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; background: var(--i); color: var(--bg); border: 1px solid var(--i); white-space: nowrap; transition: background .2s, border-color .2s; }
.btn:hover { background: var(--acc); border-color: var(--acc); color: var(--acc-fg); }
.ghost { background: transparent; color: var(--i); border-color: var(--l); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--bg); white-space: nowrap; }
.pills-lista { display: flex; flex-wrap: wrap; gap: 6px; }

.hero { padding: 40px; justify-content: space-between; gap: 20px; }
.hero h1 { font-size: clamp(40px, 10.5cqi, 60px); line-height: 1; }
.hero h1 em { color: var(--acc); }
.hero p { font-size: 19px; max-width: 540px; }

.remoto { padding: 40px; }
.remoto .datos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; margin-top: auto; }
.remoto .estado { grid-column: span 2; display: flex; align-items: center; gap: 10px; font-size: clamp(24px, 6.5cqi, 32px); }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--vivo); animation: late 2.4s ease-out infinite; }
@keyframes late { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vivo) 60%, transparent); } 80%,100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--vivo) 0%, transparent); } }
.remoto dd { font-family: "Instrument Serif", serif; font-size: clamp(20px, 5.4cqi, 26px); line-height: 1.1; }

.thumb { aspect-ratio: 16 / 9; background: var(--bg); border-radius: 14px; display: grid; place-items: center; overflow: hidden; font: 400 12px "Geist Mono", monospace; color: var(--m); }
.thumb video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.proyecto h2 { font-size: clamp(28px, 8cqi, 40px); line-height: 1; margin-top: 8px; }
.proyecto p { color: var(--m); flex-grow: 1; }

.tile-cinta { padding: 28px 0 8px; }
.tile-cinta .lbl { padding: 0 32px; }
.tile-cinta .cinta { --c-fg: var(--i); --c-muted: var(--m); --c-line: var(--l); --c-font: "Geist Mono", monospace; }

.mas { background: var(--nigiri) 28px 26px / 92px auto no-repeat, var(--shippo) 0 0 / 36px 36px, var(--acc); color: var(--acc-fg); text-decoration: none; justify-content: flex-end; min-height: 220px; transition: transform .3s var(--ease); }
.mas:has(.estirado:hover) { transform: translateY(-3px); }
.mas .serif { font-size: clamp(30px, 11cqi, 44px); line-height: 1; }
.ir { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 999px; background: var(--bg); color: var(--i); display: grid; place-items: center; transition: transform .3s var(--ease); }
.mas .ir { background: color-mix(in srgb, var(--acc-fg) 20%, transparent); color: var(--acc-fg); }
.tile:has(.estirado:hover) .ir { transform: rotate(45deg); }

.gh { text-decoration: none; }
.ghchart { width: 100%; margin-top: auto; display: block; }
.gh .mono { font-size: 12px; color: var(--m); }
[data-theme="dark"] .ghchart { filter: invert(1) hue-rotate(180deg) brightness(.9); }

.contacto { justify-content: space-between; }
.contacto p { font-size: 18px; max-width: 520px; }
.contacto .mail { font-size: clamp(24px, 7cqi, 44px); line-height: 1.05; color: var(--dk-fg); text-decoration-thickness: 1px; text-underline-offset: 8px; overflow-wrap: anywhere; }
.contacto .mail:hover { color: var(--acc); }

/* Subpages: projects grid header and contact details. */
.cabecera { padding: 40px; gap: 16px; }
.cabecera h1 { font-size: clamp(48px, 12cqi, 96px); line-height: 1; }
.cabecera h1 em { color: var(--acc); }
.cabecera p:last-child { color: var(--m); max-width: 560px; font-size: 18px; }
/* No links yet: it looks like a muted pill, not a button that goes nowhere. */
.pronto { font: 500 12px "Geist Mono", monospace; color: var(--m); border: 1px dashed var(--l); background: transparent; }
.mas .lbl { color: color-mix(in srgb, var(--acc-fg) 75%, transparent); }

.pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 60px 0 40px; font: 400 13px "Geist Mono", monospace; color: var(--m); }

@media (max-width: 900px) {
  .s4, .s5, .s6, .s7, .s8 { grid-column: span 12; }
}
@media (max-width: 600px) {
  /* The record and the settings share the first row; the sections drop below. */
  .top { flex-wrap: wrap; }
  .top .pills { order: 1; }
  .pills a { height: 36px; padding: 0 12px; font-size: 13px; }
  .top .prefs__btn { min-width: 40px; height: 40px; }
  .tile, .hero, .remoto, .cabecera { padding: 24px; }
  .tile-cinta { padding: 22px 0 6px; }
  .tile-cinta .lbl { padding: 0 24px; }
}

/* =========================================================
   Build your bento: swappable tiles, patterns and cats
   ========================================================= */

/* Tiles that are links: the link covers the whole tile with ::after, so the
   drag handle can be a sibling button (it can't go inside an <a>). */
.estirado { display: flex; flex-direction: column; gap: 14px; flex: 1; color: inherit; text-decoration: none; }
.estirado::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.estirado:focus-visible { outline: none; }
.tile:has(.estirado:focus-visible) { outline: 2px solid var(--acc); outline-offset: 3px; }
.mas .estirado { justify-content: flex-end; }

/* ---------- build bar ---------- */
.armado { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 76px; position: relative; z-index: 2; padding: 8px 8px 8px 20px; background: var(--s); border-radius: 999px; }
.armado__icono { width: 40px; height: 20px; background: var(--m); -webkit-mask: var(--hashi) center / contain no-repeat; mask: var(--hashi) center / contain no-repeat; flex: none; }
.armado__texto { font: 500 12px "Geist Mono", monospace; color: var(--m); margin-right: auto; }
.armado__texto b { color: var(--i); font-weight: 500; }
.armado .btn { height: 40px; padding: 0 16px; font-size: 13px; }
.armado .btn:disabled { opacity: .4; pointer-events: none; }

/* ---------- dragging ---------- */
.bento { position: relative; }
html.moviendo, html.moviendo * { cursor: grabbing !important; user-select: none; }
.tile.arrastrando { z-index: 20; pointer-events: none; scale: 1.03; rotate: -1.2deg; box-shadow: 0 30px 60px -24px rgba(27, 26, 23, .5); transition: scale .2s var(--ease), rotate .2s var(--ease), box-shadow .2s; }
.tile.volviendo { transition: translate .35s var(--ease); }
.tile.destino { outline: 2px dashed var(--acc); outline-offset: 4px; }
.tile.agarrado { outline: 2px solid var(--acc); outline-offset: 4px; }
/* The slot a lifted tile leaves behind: an ichimatsu checkerboard. */
.hueco { position: absolute; z-index: 0; pointer-events: none; border-radius: 24px; border: 2px dashed var(--l);
  background: conic-gradient(var(--l) 25%, transparent 0 50%, var(--l) 0 75%, transparent 0) 0 0 / 28px 28px; opacity: .55; }

/* ---------- drop-in on load ---------- */
/* Replaces rueda.js's generic cascade (.sube) on the tiles. */
.tile.cae { animation: cae .75s var(--ease) backwards; animation-delay: calc(var(--caida, 0) * 70ms + 80ms); }
@keyframes cae {
  0% { opacity: 0; transform: translateY(-70px) rotate(var(--giro, -4deg)) scale(.96); }
  60% { opacity: 1; transform: translateY(6px) rotate(0deg) scale(1); }
  80% { transform: translateY(-2px); }
  100% { transform: none; }
}

/* Screen reader announcement when moving tiles with the keyboard. */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
  .armado { border-radius: 24px; padding: 14px 16px; }
  .armado__texto { flex-basis: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .tile.cae { animation: none; }
  .gato .parpado, .punto { animation: none; }
  .tile.arrastrando, .tile.volviendo, .gato, .gato-patas { transition: none; }
}

/* ---------- background: vignette on the table ---------- */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, transparent 55%, rgba(60, 40, 20, .14) 100%); }
[data-theme="dark"] body::before { background: radial-gradient(ellipse at 50% 35%, transparent 50%, rgba(0, 0, 0, .45) 100%); }

/* ---------- bento box ---------- */
/* The grid sits in .caja (written in the HTML) so the tablecloth and the cat can go behind it. */
.caja { position: relative; isolation: isolate; }
/* Indigo table runner with sashiko stitching. It crosses the page behind the
   top of the box and has a fixed height: if it wrapped the box, it would
   resize with every shuffle (row heights depend on which tile lands in them). */
html { overflow-x: clip; }
.caja::before { content: ""; position: absolute; top: 70px; left: 50%; width: 100vw; height: 420px; translate: -50% 0; z-index: -2;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.08) 3px 4px),
    linear-gradient(var(--mantel-2), var(--mantel));
  border-block: 10px solid transparent;
  outline: 1.5px dashed rgba(255, 255, 255, .35); outline-offset: -14px;
  box-shadow: 0 18px 40px -24px rgba(20, 20, 40, .55), 0 -18px 40px -30px rgba(20, 20, 40, .35); }

.bento { position: relative; z-index: 1; padding: 18px; border-radius: 34px;
  /* Wood grain with gradients, not SVG noise: the noise forced costly repaints on scroll. */
  background:
    repeating-linear-gradient(178.6deg, transparent 0 3px, rgba(60, 30, 10, .1) 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(181.2deg, rgba(255, 230, 190, .08) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(179.4deg, rgba(40, 20, 5, .14) 0 1px, transparent 1px 23px, rgba(40, 20, 5, .07) 23px 26px, transparent 26px 41px),
    linear-gradient(170deg, rgba(255, 255, 255, .14), transparent 40%, rgba(0, 0, 0, .12)),
    var(--madera);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .28),
    inset 0 -3px 0 rgba(0, 0, 0, .22),
    inset 0 0 0 2px var(--madera-borde),
    0 2px 0 var(--madera-borde),
    0 34px 60px -30px rgba(40, 20, 5, .65); }
/* Each tile is a compartment sunk into the wood. */
.tile { border-radius: 20px; box-shadow: inset 0 3px 7px rgba(50, 25, 5, .2), 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(60, 30, 10, .35); }
.hueco { border-radius: 20px; }

/* ---------- handle: a tab at the top center of each compartment ---------- */
.asa { position: absolute; z-index: 3; top: 7px; left: 50%; translate: -50% 0; width: 46px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--bg); color: var(--m); cursor: grab; touch-action: none; opacity: 0; transition: opacity .2s, background .2s, color .2s; }
.asa svg { display: block; }
.tile:hover .asa, .asa:focus-visible, .asa[aria-pressed="true"] { opacity: 1; }
.asa:hover { color: var(--i); }
.asa:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.asa[aria-pressed="true"] { background: var(--acc); color: var(--acc-fg); }
.dark .asa { background: rgba(255,255,255,.12); color: var(--dk-dim); }
.mas .asa { background: color-mix(in srgb, var(--acc-fg) 22%, transparent); color: var(--acc-fg); }
@media (hover: none) { .asa { opacity: .85; } }

/* ---------- black cat peeking over the box's edge ---------- */
/* The head stays behind the wood and the paws in front, on the edge. */
.gato, .gato-patas { --g: 150px; position: absolute; right: 88px; width: var(--g); top: calc(var(--g) * -.457); pointer-events: none; }
.gato { z-index: 0; transition: translate .45s var(--ease); }
.gato-patas { z-index: 2; transition: translate .45s var(--ease), opacity .3s; }
.gato svg, .gato-patas svg { display: block; width: 100%; height: auto; overflow: visible; }
.gato .pelo, .gato-patas .pelo { fill: var(--gato-pelo); }
[data-theme="dark"] .gato .pelo, [data-theme="dark"] .gato-patas .pelo { stroke: rgba(239, 233, 220, .22); stroke-width: 1.2; }
.gato .pupila { transition: transform .12s linear; }
.gato .parpado { animation: parpadeo 5s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes parpadeo { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
/* It ducks behind the edge while the tiles move. */
.caja.gato-fuera .gato { translate: 0 62%; transition: translate .25s ease-in; }
.caja.gato-fuera .gato-patas { translate: 0 30%; opacity: 0; transition: translate .25s ease-in, opacity .2s; }

/* Pending GIF: sleeping cat. */
.thumb:not(:has(video))::before { content: ""; width: 110px; height: 66px; background: var(--gato-dormido) center / contain no-repeat; }

@media (max-width: 900px) {
  .bento { padding: 12px; gap: 12px; border-radius: 28px; }
}
@media (max-width: 600px) {
  .caja::before { top: 40px; height: 300px; }
  .bento { padding: 10px; gap: 10px; border-radius: 26px; }
  .tile { border-radius: 18px; }
  .armado { margin-bottom: 60px; }
  .gato, .gato-patas { --g: 104px; right: 28px; }
}

/* ---------- cat: it can be clicked ---------- */
.gato__boton { position: absolute; left: 22%; right: 16%; top: 0; height: 46%; pointer-events: auto; cursor: pointer; border: 0; background: none; border-radius: 40% 40% 0 0; }
.gato__boton:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.gato.salta svg { animation: salto .5s var(--ease); }
@keyframes salto { 0%, 100% { transform: none; } 35% { transform: translateY(-14%); } 60% { transform: translateY(2%); } }
.gato__globo { position: absolute; right: 84%; top: 8%; padding: 6px 12px; border-radius: 14px 14px 2px 14px; background: var(--s); color: var(--i); font: 400 20px/1.1 "Instrument Serif", serif; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(27, 26, 23, .45); opacity: 0; translate: 0 6px; scale: .8; transform-origin: 100% 100%; transition: opacity .2s, translate .25s var(--ease), scale .25s var(--ease); pointer-events: none; }
.gato__globo.visible { opacity: 1; translate: 0 0; scale: 1; }

/* ---------- chopsticks: to the left of the box; on click, they shuffle ---------- */
.palillos { position: absolute; top: 40px; left: -96px; width: 48px; height: 400px; padding: 0; border: 0; background: none; cursor: pointer; rotate: -7deg; }
.palillos svg { display: block; width: 100%; height: 100%; overflow: visible; }
.palillos svg { transition: translate .3s var(--ease); }
/* They pivot near where they're held (not from the top tip) and only open and
   close the tips: turned inwards, they crossed. */
.palillos .palo { transform-box: fill-box; transform-origin: 50% 22%; }
.palillos:hover svg { translate: 0 -4px; }
.palillos:focus-visible { outline: 2px solid var(--acc); outline-offset: 6px; border-radius: 8px; }
/* On click: they lift, open and close the tips twice and go back to their rest. */
.palillos.pinzan svg { animation: levantar 1.1s var(--ease); }
.palillos.pinzan .palo--a { animation: pinza-a .5s ease-in-out .05s 2; }
.palillos.pinzan .palo--b { animation: pinza-b .5s ease-in-out .05s 2; }
@keyframes levantar { 0%, 100% { translate: 0 0; } 20%, 80% { translate: 0 -14px; } }
@keyframes pinza-a { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(2.2deg); } 75% { transform: rotate(-1.3deg); } }
@keyframes pinza-b { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-2.2deg); } 75% { transform: rotate(1.3deg); } }
@media (max-width: 1420px) { .palillos { display: none; } }
@media (prefers-reduced-motion: reduce) { .palillos.pinzan .palo, .palillos.pinzan svg, .gato.salta svg { animation: none; } }

/* ---------- Light mode ---------- */
/* html.ligero (comun/preferencias.js): on slow devices this design drops its
   costliest effects and keeps its look. */
html.ligero .punto, html.ligero .gato .parpado { animation: none; }