:root {
  --bg-1: #07120d;
  --bg-2: #12331f;
  --ink: #eef3df;
  --ink-dim: #bbc7ad;
  --ink-faint: #77836f;
  --accent: #e8c96d;
  --accent-2: #8bd8c5;
  --warm: #d99d70;
  --good: #9edb78;
  --stillness: #bca8f2;
  --stillness-2: #7dd7ca;
  --bad: #df8b8f;
  --panel: rgba(4, 16, 10, 0.84);
  --panel-edge: rgba(201, 220, 166, 0.22);
  --panel-soft: rgba(22, 46, 28, 0.38);
  --panel-etched: rgba(232, 201, 109, 0.09);
  --panel-ornament-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c9dca6' stroke-opacity='.065' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16C26 26 37 37 48 48'/%3E%3Cpath d='M48 48C58 35 74 34 84 46C70 52 58 53 48 48Z'/%3E%3Cpath d='M48 48C35 58 34 74 46 84C52 70 53 58 48 48Z'/%3E%3C/g%3E%3C/svg%3E");
  --panel-ornament-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c9dca6' stroke-opacity='.065' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 16C70 26 59 37 48 48'/%3E%3Cpath d='M48 48C38 35 22 34 12 46C26 52 38 53 48 48Z'/%3E%3Cpath d='M48 48C61 58 62 74 50 84C44 70 43 58 48 48Z'/%3E%3C/g%3E%3C/svg%3E");
  --panel-ornament-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c9dca6' stroke-opacity='.065' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 80C70 70 59 59 48 48'/%3E%3Cpath d='M48 48C38 61 22 62 12 50C26 44 38 43 48 48Z'/%3E%3Cpath d='M48 48C61 38 62 22 50 12C44 26 43 38 48 48Z'/%3E%3C/g%3E%3C/svg%3E");
  --panel-ornament-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c9dca6' stroke-opacity='.065' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 80C26 70 37 59 48 48'/%3E%3Cpath d='M48 48C58 61 74 62 84 50C70 44 58 43 48 48Z'/%3E%3Cpath d='M48 48C35 38 34 22 46 12C52 26 53 38 48 48Z'/%3E%3C/g%3E%3C/svg%3E");
  --global-bg-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23c9dca6' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M67-43C173 173 29 356 151 562C231 734 39 907 96 1123'/%3E%3Cpath d='M1853-43C1747 173 1891 356 1769 562C1689 734 1881 907 1824 1123'/%3E%3C/g%3E%3Cg stroke='%23c9dca6' stroke-opacity='.13' stroke-width='1.05'%3E%3Cpath d='M126 78c34-18 68-14 99 14c-36 13-69 8-99-14Z'/%3E%3Cpath d='M116 189c-31 20-43 51-34 86c31-20 43-52 34-86Z'/%3E%3Cpath d='M137 294c37-15 72-7 101 24c-38 10-72 2-101-24Z'/%3E%3Cpath d='M111 402c-27 24-34 57-19 90c28-24 35-58 19-90Z'/%3E%3Cpath d='M146 505c38-9 70 4 93 39c-39 5-70-8-93-39Z'/%3E%3Cpath d='M134 618c-23 28-24 62-4 92c24-28 25-63 4-92Z'/%3E%3Cpath d='M155 725c37-13 71-4 99 27c-38 9-72 0-99-27Z'/%3E%3Cpath d='M124 835c-26 25-31 59-15 91c27-25 32-59 15-91Z'/%3E%3Cpath d='M149 941c38-9 70 4 94 38c-39 5-70-8-94-38Z'/%3E%3Cpath d='M1794 78c-34-18-68-14-99 14c36 13 69 8 99-14Z'/%3E%3Cpath d='M1804 189c31 20 43 51 34 86c-31-20-43-52-34-86Z'/%3E%3Cpath d='M1783 294c-37-15-72-7-101 24c38 10 72 2 101-24Z'/%3E%3Cpath d='M1809 402c27 24 34 57 19 90c-28-24-35-58-19-90Z'/%3E%3Cpath d='M1774 505c-38-9-70 4-93 39c39 5 70-8 93-39Z'/%3E%3Cpath d='M1786 618c23 28 24 62 4 92c-24-28-25-63-4-92Z'/%3E%3Cpath d='M1765 725c-37-13-71-4-99 27c38 9 72 0 99-27Z'/%3E%3Cpath d='M1796 835c26 25 31 59 15 91c-27-25-32-59-15-91Z'/%3E%3Cpath d='M1771 941c-38-9-70 4-94 38c39 5 70-8 94-38Z'/%3E%3C/g%3E%3Cg stroke='%23e8c96d' stroke-opacity='.13' stroke-width='.95'%3E%3Cg transform='translate(172 184) rotate(10)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='9'/%3E%3Cellipse cx='6' cy='-4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='4' rx='3' ry='9' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='9'/%3E%3Cellipse cx='-6' cy='4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-4' rx='3' ry='9' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(158 423) rotate(-8)'%3E%3Cellipse cx='0' cy='-8' rx='3' ry='10'/%3E%3Cellipse cx='7' cy='-4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='7' cy='4' rx='3' ry='10' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='8' rx='3' ry='10'/%3E%3Cellipse cx='-7' cy='4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='-7' cy='-4' rx='3' ry='10' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(178 661) rotate(12)'%3E%3Cellipse cx='0' cy='-8' rx='3' ry='10'/%3E%3Cellipse cx='7' cy='-4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='7' cy='4' rx='3' ry='10' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='8' rx='3' ry='10'/%3E%3Cellipse cx='-7' cy='4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='-7' cy='-4' rx='3' ry='10' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(166 899) rotate(-5)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='9'/%3E%3Cellipse cx='6' cy='-4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='4' rx='3' ry='9' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='9'/%3E%3Cellipse cx='-6' cy='4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-4' rx='3' ry='9' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(1748 184) rotate(-10)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='9'/%3E%3Cellipse cx='6' cy='-4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='4' rx='3' ry='9' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='9'/%3E%3Cellipse cx='-6' cy='4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-4' rx='3' ry='9' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(1762 423) rotate(8)'%3E%3Cellipse cx='0' cy='-8' rx='3' ry='10'/%3E%3Cellipse cx='7' cy='-4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='7' cy='4' rx='3' ry='10' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='8' rx='3' ry='10'/%3E%3Cellipse cx='-7' cy='4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='-7' cy='-4' rx='3' ry='10' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(1742 661) rotate(-12)'%3E%3Cellipse cx='0' cy='-8' rx='3' ry='10'/%3E%3Cellipse cx='7' cy='-4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='7' cy='4' rx='3' ry='10' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='8' rx='3' ry='10'/%3E%3Cellipse cx='-7' cy='4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='-7' cy='-4' rx='3' ry='10' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(1754 899) rotate(5)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='9'/%3E%3Cellipse cx='6' cy='-4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='4' rx='3' ry='9' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='9'/%3E%3Cellipse cx='-6' cy='4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-4' rx='3' ry='9' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(346 1032) rotate(-8)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(653 1038) rotate(-2)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(960 1042) rotate(4)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(1267 1038) rotate(10)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(1574 1032) rotate(16)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --global-bg-vine-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 1080'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M66-43C172 173 28 356 150 562C230 734 38 907 95 1123' stroke='%23c9dca6' stroke-opacity='.16' stroke-width='1.2'/%3E%3Cg stroke='%23c9dca6' stroke-opacity='.13' stroke-width='1.05'%3E%3Cpath d='M125 78c34-18 68-14 99 14c-36 13-69 8-99-14Z'/%3E%3Cpath d='M115 189c-31 20-43 51-34 86c31-20 43-52 34-86Z'/%3E%3Cpath d='M136 294c37-15 72-7 101 24c-38 10-72 2-101-24Z'/%3E%3Cpath d='M110 402c-27 24-34 57-19 90c28-24 35-58 19-90Z'/%3E%3Cpath d='M145 505c38-9 70 4 93 39c-39 5-70-8-93-39Z'/%3E%3Cpath d='M133 618c-23 28-24 62-4 92c24-28 25-63 4-92Z'/%3E%3Cpath d='M154 725c37-13 71-4 99 27c-38 9-72 0-99-27Z'/%3E%3Cpath d='M123 835c-26 25-31 59-15 91c27-25 32-59 15-91Z'/%3E%3Cpath d='M148 941c38-9 70 4 94 38c-39 5-70-8-94-38Z'/%3E%3C/g%3E%3Cg stroke='%23e8c96d' stroke-opacity='.13' stroke-width='.95'%3E%3Cg transform='translate(126 184) rotate(10)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='9'/%3E%3Cellipse cx='6' cy='-4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='4' rx='3' ry='9' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='9'/%3E%3Cellipse cx='-6' cy='4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-4' rx='3' ry='9' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(112 423) rotate(-8)'%3E%3Cellipse cx='0' cy='-8' rx='3' ry='10'/%3E%3Cellipse cx='7' cy='-4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='7' cy='4' rx='3' ry='10' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='8' rx='3' ry='10'/%3E%3Cellipse cx='-7' cy='4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='-7' cy='-4' rx='3' ry='10' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(132 661) rotate(12)'%3E%3Cellipse cx='0' cy='-8' rx='3' ry='10'/%3E%3Cellipse cx='7' cy='-4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='7' cy='4' rx='3' ry='10' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='8' rx='3' ry='10'/%3E%3Cellipse cx='-7' cy='4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='-7' cy='-4' rx='3' ry='10' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(120 899) rotate(-5)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='9'/%3E%3Cellipse cx='6' cy='-4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='4' rx='3' ry='9' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='9'/%3E%3Cellipse cx='-6' cy='4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-4' rx='3' ry='9' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --global-bg-vine-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 1080'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M114-43C8 173 152 356 30 562C-50 734 142 907 85 1123' stroke='%23c9dca6' stroke-opacity='.16' stroke-width='1.2'/%3E%3Cg stroke='%23c9dca6' stroke-opacity='.13' stroke-width='1.05'%3E%3Cpath d='M55 78c-34-18-68-14-99 14c36 13 69 8 99-14Z'/%3E%3Cpath d='M65 189c31 20 43 51 34 86c-31-20-43-52-34-86Z'/%3E%3Cpath d='M44 294c-37-15-72-7-101 24c38 10 72 2 101-24Z'/%3E%3Cpath d='M70 402c27 24 34 57 19 90c-28-24-35-58-19-90Z'/%3E%3Cpath d='M35 505c-38-9-70 4-93 39c39 5 70-8 93-39Z'/%3E%3Cpath d='M47 618c23 28 24 62 4 92c-24-28-25-63-4-92Z'/%3E%3Cpath d='M26 725c-37-13-71-4-99 27c38 9 72 0 99-27Z'/%3E%3Cpath d='M57 835c26 25 31 59 15 91c-27-25-32-59-15-91Z'/%3E%3Cpath d='M32 941c-38-9-70 4-94 38c39 5 70-8 94-38Z'/%3E%3C/g%3E%3Cg stroke='%23e8c96d' stroke-opacity='.13' stroke-width='.95'%3E%3Cg transform='translate(54 184) rotate(-10)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='9'/%3E%3Cellipse cx='6' cy='-4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='4' rx='3' ry='9' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='9'/%3E%3Cellipse cx='-6' cy='4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-4' rx='3' ry='9' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(68 423) rotate(8)'%3E%3Cellipse cx='0' cy='-8' rx='3' ry='10'/%3E%3Cellipse cx='7' cy='-4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='7' cy='4' rx='3' ry='10' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='8' rx='3' ry='10'/%3E%3Cellipse cx='-7' cy='4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='-7' cy='-4' rx='3' ry='10' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(48 661) rotate(-12)'%3E%3Cellipse cx='0' cy='-8' rx='3' ry='10'/%3E%3Cellipse cx='7' cy='-4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='7' cy='4' rx='3' ry='10' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='8' rx='3' ry='10'/%3E%3Cellipse cx='-7' cy='4' rx='3' ry='10' transform='rotate(60)'/%3E%3Cellipse cx='-7' cy='-4' rx='3' ry='10' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3Cg transform='translate(60 899) rotate(5)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='9'/%3E%3Cellipse cx='6' cy='-4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='4' rx='3' ry='9' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='9'/%3E%3Cellipse cx='-6' cy='4' rx='3' ry='9' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-4' rx='3' ry='9' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --global-bg-bottom-flowers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 740 96'%3E%3Cg fill='none' stroke='%23e8c96d' stroke-opacity='.12' stroke-width='.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(78 50) rotate(-8)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(224 56) rotate(-2)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(370 60) rotate(4)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(516 56) rotate(10)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(662 50) rotate(16)'%3E%3Cellipse cx='0' cy='-7' rx='3' ry='8'/%3E%3Cellipse cx='6' cy='-3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='6' cy='3' rx='3' ry='8' transform='rotate(120)'/%3E%3Cellipse cx='0' cy='7' rx='3' ry='8'/%3E%3Cellipse cx='-6' cy='3' rx='3' ry='8' transform='rotate(60)'/%3E%3Cellipse cx='-6' cy='-3' rx='3' ry='8' transform='rotate(120)'/%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --global-bg-ornament: none;
  --card-bg-ornament: none;
  --game-left: 0px;
  --game-top: 0px;
  --game-right: 0px;
  --game-bottom: 0px;
  --game-width: 100vw;
  --game-height: 100vh;
  --game-center-x: 50vw;
  --game-center-y: 50vh;
  --game-scale: 1;
  --practice-panel-width: 570px;
  --practice-tab-width: 64px;
  --practice-tab-closed-offset: 0px;
  --hint-font-size: 17px;
  --font-soft: "Quicksand", "Segoe UI Rounded", "Avenir Next Rounded", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: #030805; color: var(--ink);
  font-family: var(--font-soft);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button,
input,
select,
textarea {
  font-family: var(--font-soft);
}
#app { position: fixed; inset: 0; }
canvas#scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; cursor: crosshair;
}
#ui-layer {
  position: absolute;
  left: var(--game-left);
  top: var(--game-top);
  width: 1920px;
  height: 1080px;
  transform: scale(var(--game-scale));
  transform-origin: 0 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
  visibility: hidden;
}
#ui-layer.viewport-ready {
  visibility: visible;
}
#ui-layer > * {
  pointer-events: auto;
}
#stage-progress {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 840px;
  z-index: 12;
  color: rgba(238, 243, 223, 0.76);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.stage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.stage-track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(2,10,6,0.52);
  border: 1px solid rgba(95,132,88,0.14);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.16);
}
.stage-track > div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(82,128,91,0.58), rgba(111,158,111,0.56), rgba(157,176,112,0.52));
  box-shadow: 0 0 12px rgba(95,132,88,0.16);
  transition: width 0.2s ease;
}
.panel {
  position: absolute;
  background:
    var(--panel-ornament-tr) right -18px top -20px / 96px 96px no-repeat,
    var(--panel-ornament-br) right -18px bottom -20px / 96px 96px no-repeat,
    var(--panel-ornament-bl) left -18px bottom -20px / 96px 96px no-repeat,
    var(--panel-ornament-tl) left -18px top -20px / 96px 96px no-repeat,
    linear-gradient(145deg, rgba(255,255,255,0.022), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 12% 0%, rgba(139,216,197,0.045), rgba(139,216,197,0) 34%),
    var(--panel);
  border: 1px solid var(--panel-edge);
  backdrop-filter: blur(16px) saturate(1.10);
  -webkit-backdrop-filter: blur(16px) saturate(1.10);
  border-radius: 10px;
  padding: 24px 26px;
  font-size: 18px;
  line-height: 1.5;
  box-shadow:
    0 18px 56px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(238,243,223,0.045),
    inset 0 0 0 1px rgba(232,201,109,0.035);
}
.panel h2 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}
.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.panel-title-row h2 {
  margin: 0;
}
.panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
#help-click-hint {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 108px;
  padding: 7px 8px;
  border: 1px solid rgba(232,201,109,0.24);
  border-radius: 8px;
  background: rgba(8,25,16,0.82);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.18;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 26px rgba(232,201,109,0.11);
  transition: opacity 0.65s ease, visibility 0s linear 0.65s;
}
#help-click-hint.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.65s ease, visibility 0s linear 0s;
}
.help-button {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(232,201,109,0.32);
  background: rgba(232,201,109,0.16);
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(232,201,109,0);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.help-button:hover {
  background: rgba(232,201,109,0.24);
  border-color: rgba(232,201,109,0.50);
  transform: translateY(-1px);
}
.help-button.needs-attention {
  animation: help-soft-blink 3.8s ease-in-out infinite;
}
.menu-button {
  font-size: 14px;
  padding-bottom: 2px;
}
@keyframes help-soft-blink {
  0%, 100% {
    border-color: rgba(232,201,109,0.24);
    box-shadow: 0 0 0 rgba(232,201,109,0);
    opacity: 0.72;
  }
  50% {
    border-color: rgba(232,201,109,0.62);
    box-shadow: 0 0 28px rgba(232,201,109,0.30), 0 0 54px rgba(139,216,197,0.13);
    opacity: 1;
  }
}
#resource-panel { top: 18px; left: 18px; width: 360px; z-index: 70; }
.resource-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(201,220,166,0.12);
}
.panel-title-row + .resource-section {
  border-top: none;
  padding-top: 0;
}
.resource-section-icon {
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 14px;
  align-items: center;
}
.resource-section-body {
  min-width: 0;
}
.hud-info-icon {
  width: 52px;
  height: 52px;
  justify-self: center;
  align-self: center;
  object-fit: contain;
  opacity: 0.92;
  pointer-events: none;
}
.res-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  gap: 16px;
}
.res-label { color: var(--ink); font-size: 18px; font-weight: 750; letter-spacing: 0; }
.res-value { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.res-value.boosted-value {
  color: var(--good);
  text-shadow: 0 0 14px rgba(158,219,120,0.28);
}
.res-sub { color: var(--ink-faint); font-size: var(--hint-font-size); }
.status-value { transition: color 0.2s ease, text-shadow 0.2s ease; }
.status-value.good { color: var(--good); text-shadow: 0 0 14px rgba(158,219,120,0.24); }
.status-value.bad { color: var(--bad); text-shadow: 0 0 12px rgba(223,139,143,0.2); }
.bar {
  height: 8px; background: rgba(3,13,8,0.46); border-radius: 999px;
  overflow: hidden; margin-top: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.bar > div { height: 100%; transition: width 0.2s ease; }
.bar-presence > div {
  background: var(--stillness);
  box-shadow: 0 0 12px rgba(188,168,242,0.18);
}
.bar-stillness > div { background: linear-gradient(90deg, var(--stillness-2), var(--stillness)); }
.bar-clarity > div { background: linear-gradient(90deg, #d7eee3, var(--accent)); }
.bar.empty > div { background: linear-gradient(90deg, var(--bad), #c98484) !important; }
.res-label.muted { color: var(--bad); transition: color 0.3s ease; }
.res-label.boosted {
  color: var(--good);
  text-shadow: 0 0 14px rgba(158,219,120,0.28);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.res-label-stillness { color: var(--stillness); }

#upgrade-panel {
  position: absolute;
  top: 0; right: 0;
  height: 1080px;
  width: var(--practice-panel-width);
  padding: 24px 26px;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--panel-edge);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,220,166,0.30) transparent;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 30;
  box-shadow:
    -18px 0 58px rgba(0,0,0,0.46),
    inset 1px 0 0 rgba(238,243,223,0.045),
    inset 8px 0 28px rgba(139,216,197,0.025);
}
#upgrade-panel.open {
  right: 0;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
#upgrade-toggle {
  position: absolute;
  top: 50%; right: var(--practice-tab-closed-offset);
  transform: translateY(-50%);
  width: var(--practice-tab-width); height: 168px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-right: none;
  border-radius: 10px 0 0 10px;
  color: var(--accent);
  cursor: pointer;
  z-index: 31;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.16em;
  transition: all 0.25s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-transform: uppercase;
}
#upgrade-toggle:hover { background: rgba(232,201,109,0.16); width: 68px; }
#upgrade-panel.open ~ #upgrade-toggle { right: var(--practice-panel-width); }
#upgrade-toggle.practice-needs-attention {
  animation: practice-soft-blink 3.8s ease-in-out infinite;
}
#practice-buy-hint {
  position: absolute;
  top: 50%;
  right: calc(var(--practice-tab-width) + 16px);
  transform: translateY(-50%);
  z-index: 31;
  pointer-events: none;
  color: var(--accent);
  background: rgba(8,25,16,0.82);
  border: 1px solid rgba(232,201,109,0.22);
  border-radius: 8px;
  padding: 8px 13px 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 0 22px rgba(232,201,109,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.65s ease, visibility 0s linear 0.65s;
}
#practice-buy-hint > span {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.practice-buy-hotkey {
  margin-top: 3px;
  color: rgba(238,243,223,0.72);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.practice-buy-hotkey > span {
  color: var(--accent-2);
}
#practice-buy-hint.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.65s ease, visibility 0s linear 0s;
}
#upgrade-panel.open ~ #practice-buy-hint {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.65s ease, visibility 0s linear 0.65s;
}
@keyframes practice-soft-blink {
  0%, 100% {
    border-color: rgba(232,201,109,0.20);
    box-shadow: 0 0 0 rgba(232,201,109,0), 0 0 0 rgba(139,216,197,0);
    color: rgba(232,201,109,0.72);
  }
  50% {
    border-color: rgba(232,201,109,0.64);
    box-shadow: 0 0 20px rgba(232,201,109,0.22), 0 0 34px rgba(139,216,197,0.10);
    color: var(--accent);
  }
}
.practice-tab-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1;
  opacity: 0.85;
}
.practice-tab-arrow {
  flex: 0 0 16px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}
#upgrade-panel::-webkit-scrollbar { width: 6px; }
#upgrade-panel::-webkit-scrollbar-thumb { background: rgba(201,220,166,0.30); border-radius: 3px; }
.upgrade {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201,220,166,0.12);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--panel-soft);
}
.upgrade::before,
.level-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--card-bg-ornament) var(--card-ornament-x, 0px) var(--card-ornament-y, 0px) / 1120px 230px no-repeat;
  opacity: 0.48;
  mix-blend-mode: screen;
}
.upgrade > * {
  position: relative;
  z-index: 1;
}
.upgrade:nth-child(6n + 1) { --card-ornament-x: -18px; --card-ornament-y: -22px; }
.upgrade:nth-child(6n + 2) { --card-ornament-x: -96px; --card-ornament-y: -86px; }
.upgrade:nth-child(6n + 3) { --card-ornament-x: -156px; --card-ornament-y: -34px; }
.upgrade:nth-child(6n + 4) { --card-ornament-x: -68px; --card-ornament-y: -118px; }
.upgrade:nth-child(6n + 5) { --card-ornament-x: -210px; --card-ornament-y: -56px; }
.upgrade:nth-child(6n) { --card-ornament-x: -126px; --card-ornament-y: -144px; }
.upgrade:hover:not(.locked):not(.cant-afford) {
  background: rgba(232,201,109,0.070);
  border-color: rgba(232,201,109,0.26);
  transform: translateY(-1px);
}
.upgrade.cant-afford { opacity: 0.55; cursor: not-allowed; }
.upgrade.locked { opacity: 0.62; }
.upgrade.permanent { border-color: rgba(139,216,197,0.20); }
.upgrade-name { font-size: 18px; font-weight: 750; color: var(--ink); }
.global-upgrade-card,
.practice-upgrade-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 14px;
  align-items: center;
}
.global-upgrade-card:has(.global-just-unlocked),
.practice-upgrade-card:has(.practice-just-unlocked) {
  background: rgba(139,216,197,0.070);
  border-color: rgba(201,220,166,0.12);
  box-shadow: none;
}
.global-upgrade-body {
  min-width: 0;
  flex: 1 1 auto;
}
.global-upgrade-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.practice-upgrade-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.global-upgrade-title-row .upgrade-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.practice-upgrade-title-row .upgrade-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-just-unlocked {
  color: var(--good);
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
  text-transform: capitalize;
}
.practice-just-unlocked {
  color: var(--good);
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
  text-transform: capitalize;
}
.card-infographic {
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.global-upgrade-icon,
.practice-upgrade-icon {
  width: 52px;
  height: 52px;
  justify-self: center;
  align-self: center;
  opacity: 0.92;
}
.practice-upgrade-body {
  min-width: 0;
}
.perfect-star {
  color: var(--accent);
  display: inline-block;
  font-size: 18px;
  margin-left: 7px;
  text-shadow: 0 0 14px rgba(232,201,109,0.42);
}
.upgrade.upgrade-blue .upgrade-name { color: #8bd8c5; }
.upgrade.upgrade-green .upgrade-name { color: var(--good); }
.upgrade.upgrade-stillness .upgrade-name { color: var(--stillness); }
.upgrade-desc { font-size: var(--hint-font-size); color: var(--ink-dim); margin-top: 6px; }
.upgrade-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 7px;
  font-size: var(--hint-font-size);
  min-width: 0;
}
.upgrade-cost { color: var(--accent); }
.upgrade-level {
  color: var(--ink-dim);
  flex: 0 0 auto;
  white-space: nowrap;
}

#level-complete-panel {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  text-align: left;
  display: block;
  opacity: 0;
  pointer-events: none;
  z-index: 55;
  transition: opacity 1.8s ease;
  overflow: hidden;
}
#level-complete-panel.show {
  opacity: 1;
  pointer-events: auto;
}
#level-complete-panel > * {
  position: relative;
  z-index: 1;
}
#level-complete-panel.perfect-complete {
  border-color: rgba(232,201,109,0.34);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.38),
    0 0 42px rgba(232,201,109,0.10),
    inset 0 1px 0 rgba(238,243,223,0.070);
}
#level-complete-panel.perfect-complete::before {
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 18%, rgba(232,201,109,0.16), rgba(232,201,109,0.040) 28%, rgba(232,201,109,0) 54%),
    radial-gradient(circle at 28% 86%, rgba(139,216,197,0.12), rgba(139,216,197,0.030) 32%, rgba(139,216,197,0) 58%);
}
#level-complete-panel.perfect-complete .score-row:nth-of-type(4) span:first-child {
  color: var(--accent);
  text-shadow: 0 0 16px rgba(232,201,109,0.24);
}
#between-levels-panel {
  top: 0;
  left: 0;
  transform: none;
  width: 1920px;
  height: 1080px;
  padding: 58px 70px;
  overflow: hidden;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 90;
  border: none;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(139,216,197,0.040), transparent 34%),
    radial-gradient(circle at 72% 16%, rgba(232,201,109,0.020), transparent 28%),
    linear-gradient(145deg, #000302 0%, #031108 48%, #000101 100%);
  transition:
    opacity 0.9s ease,
    visibility 0s linear 0.9s;
}
#between-levels-panel::before,
#between-levels-panel::after {
  content: none;
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--global-bg-ornament) no-repeat;
  background-size: 1920px 1080px;
  opacity: 0.55;
  mix-blend-mode: screen;
}
#between-levels-panel::before {
  background-position: -313px center;
  clip-path: inset(0 300px 0 1160px);
}
#between-levels-panel::after {
  background-position: 669px center;
  clip-path: inset(0 980px 0 640px);
}
#between-levels-panel > :not(.between-popup) {
  position: relative;
  z-index: 1;
}
#between-levels-panel.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.9s ease,
    visibility 0s linear 0s;
}
#between-levels-panel.leaving {
  background: rgba(7, 18, 13, 0.12);
  pointer-events: none;
  transition:
    opacity 0.75s ease,
    background 0.2s ease,
    visibility 0s linear 0.75s;
}
#between-levels-panel.leaving::before {
  opacity: 0.16;
}
#between-levels-panel.leaving::after {
  opacity: 0.16;
}
.global-menu {
  position: absolute;
  z-index: 8;
}
.menu-card.global-menu-open .menu-level-action {
  display: none;
}
.between-popup {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(232,201,109,0.070), transparent 34%),
    rgba(2,6,3,0.58);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0s;
}
.between-popup.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}
.perfect-completion-card {
  position: relative;
  width: 520px;
  padding: 32px 36px 30px;
  text-align: center;
  border-color: rgba(232,201,109,0.32);
  background: rgba(8,25,16,0.90);
  box-shadow:
    0 26px 78px rgba(0,0,0,0.50),
    0 0 44px rgba(232,201,109,0.10),
    inset 0 1px 0 rgba(238,243,223,0.075);
}
.perfect-completion-copy {
  margin-top: 14px;
  color: var(--ink-dim);
  font-size: var(--hint-font-size);
  line-height: 1.55;
}
.perfect-completion-copy p {
  margin: 0 0 10px;
}
.perfect-completion-copy p:last-of-type {
  margin-bottom: 0;
}
.perfect-completion-copy .tip-star {
  color: var(--accent);
  font-weight: 900;
  text-shadow: 0 0 14px rgba(232,201,109,0.28);
}
.perfect-completion-card .primary-action {
  margin-top: 22px;
}
.between-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 750;
  margin-bottom: 10px;
}
.between-header h2 {
  margin: 0;
}
.global-heading-row,
.levels-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 40px;
  margin-bottom: 14px;
}
.levels-heading-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding-right: 48px;
}
.global-heading-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.global-heading-row h2 {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.global-heading-row h2,
.levels-heading-row h2 {
  margin: 0;
}
.levels-heading-row h2 {
  grid-column: 1;
  justify-self: start;
}
.global-heading-row .between-exp-total {
  grid-column: 2;
  justify-self: center;
}
.global-heading-row .between-exp-actions {
  grid-column: 3;
  justify-self: end;
}
.global-heading-row .global-menu {
  right: 0;
  top: 4px;
}
.game-complete-badge {
  display: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  color: var(--accent);
  font-size: 19px;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #e8c96d, #fff8c8, #8bd8c5, #f3e9b8, #e8c96d);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 22px rgba(232,201,109,0.34), 0 0 38px rgba(139,216,197,0.16);
  animation: complete-shimmer 2.4s linear infinite, complete-glow 1.8s ease-in-out infinite alternate;
}
.game-complete-badge.show {
  display: block;
}
.levels-heading-row .level-stars-summary {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}
.levels-heading-row .game-complete-badge.show ~ .level-stars-summary {
  grid-column: 2;
  justify-self: end;
  transform: translateX(calc(100% + 18px));
}
.level-stars-summary {
  color: var(--accent);
  font-size: 16px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(232,201,109,0.22);
}
@keyframes complete-shimmer {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}
@keyframes complete-glow {
  from { filter: drop-shadow(0 0 5px rgba(232,201,109,0.22)); }
  to { filter: drop-shadow(0 0 15px rgba(232,201,109,0.48)); }
}
.between-exp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.between-exp-total {
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tiny-action {
  border: 1px solid rgba(139,216,197,0.22);
  background: rgba(139,216,197,0.16);
  color: var(--accent-2);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}
.tiny-action:hover {
  background: rgba(139,216,197,0.24);
}
.between-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
  position: relative;
  width: 100%;
}
.between-grid > section {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#level-list,
#global-upgrade-list {
  flex: 0 0 auto;
}
.upgrade.selected {
  border-color: rgba(139,216,197,0.38);
  background: rgba(139,216,197,0.065);
}
.level-card {
  position: relative;
  overflow: hidden;
  padding: 13px 16px;
  margin-bottom: 9px;
}
.level-card::before {
  opacity: 0.40;
}
.level-card:nth-child(6n + 1) { --card-ornament-x: -30px; --card-ornament-y: -104px; }
.level-card:nth-child(6n + 2) { --card-ornament-x: -118px; --card-ornament-y: -46px; }
.level-card:nth-child(6n + 3) { --card-ornament-x: -198px; --card-ornament-y: -142px; }
.level-card:nth-child(6n + 4) { --card-ornament-x: -74px; --card-ornament-y: -22px; }
.level-card:nth-child(6n + 5) { --card-ornament-x: -236px; --card-ornament-y: -82px; }
.level-card:nth-child(6n) {
  --card-ornament-x: -144px;
  --card-ornament-y: -168px;
}
.level-card.selected {
  border-color: rgba(232,201,109,0.42);
  box-shadow: inset 0 0 0 1px rgba(232,201,109,0.14), 0 0 22px rgba(232,201,109,0.10);
}
.level-card-fill {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(82,128,91,0.20), rgba(111,158,111,0.19), rgba(157,176,112,0.17));
  border-radius: inherit;
}
.level-card-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}
.level-card-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.level-card-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  opacity: 0.92;
}
.level-card.locked .level-card-icon {
  opacity: 0.42;
}
.level-card .upgrade-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.level-card .perfect-star {
  font-size: 17px;
  margin-left: 6px;
}
.level-status {
  flex: 0 0 auto;
  color: var(--bad);
  font-size: var(--hint-font-size);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.level-card:not(.locked) .level-status {
  color: var(--accent-2);
}
.level-status.recommended {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.level-status.recommended .level-status-main {
  color: var(--good);
  font-size: var(--hint-font-size);
  line-height: 1;
}
.level-status.recommended.ready-recommended .level-status-main {
  color: var(--accent-2);
}
.level-status.recommended .level-status-sub {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: none;
}
.level-card.locked {
  border-color: rgba(201,220,166,0.12);
  background: rgba(20,38,23,0.52);
}
.level-info-box {
  margin-top: 14px;
  border: 1px solid rgba(139,216,197,0.22);
  border-radius: 8px;
  padding: 18px;
  background:
    var(--panel-ornament-tr) right -18px top -20px / 96px 96px no-repeat,
    var(--panel-ornament-br) right -18px bottom -20px / 96px 96px no-repeat,
    var(--panel-ornament-bl) left -18px bottom -20px / 96px 96px no-repeat,
    var(--panel-ornament-tl) left -18px top -20px / 96px 96px no-repeat,
    rgba(7,25,16,0.64);
}
.level-info-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.level-info-title {
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
}
.level-info-best {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: var(--hint-font-size);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.level-info-desc {
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.45;
  margin-top: 6px;
}
.level-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.level-info-tags span {
  border: 1px solid rgba(201,220,166,0.12);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--ink-faint);
  background: rgba(196,218,172,0.035);
  font-size: var(--hint-font-size);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.level-info-progress {
  margin-top: 13px;
}
.level-progress {
  margin-top: 12px;
}
.level-progress > div {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(3,13,8,0.46);
}
.level-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(82,128,91,0.58), rgba(111,158,111,0.56), rgba(157,176,112,0.52));
  box-shadow: 0 0 12px rgba(95,132,88,0.16);
}
.level-progress small {
  display: block;
  margin-top: 7px;
  color: var(--ink-faint);
  font-size: var(--hint-font-size);
  letter-spacing: 0.04em;
}
.score-row,
.score-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.score-row {
  color: var(--ink-dim);
  font-size: 18px;
  padding: 6px 0;
}
.score-row span:last-child,
.score-total strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.score-row .perfect-earned {
  color: var(--accent);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(232,201,109,0.38);
}
.score-row .perfect-missed {
  color: var(--ink-faint);
}
.score-row span.score-star {
  color: var(--accent);
  font-size: 17px;
  margin-left: 5px;
  text-shadow: 0 0 14px rgba(232,201,109,0.42);
}
.score-total {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(201,220,166,0.14);
  color: var(--accent);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.score-total strong {
  color: var(--accent);
  font-size: 30px;
  letter-spacing: 0;
  text-shadow: 0 0 22px rgba(232,201,109,0.28);
}
.primary-action {
  width: 100%;
  margin-top: 16px;
  background: rgba(232,201,109,0.24);
  color: var(--accent);
  border: 1px solid rgba(232,201,109,0.38);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
}
#btn-start-level {
  min-height: 58px;
  font-size: 24px;
  letter-spacing: 0.08em;
}
.primary-action:hover:not(:disabled) {
  background: rgba(232,201,109,0.34);
  border-color: rgba(232,201,109,0.48);
}
.primary-action:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

#intro-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(139,216,197,0.16), transparent 36%),
    radial-gradient(circle at 50% 58%, rgba(232,201,109,0.10), transparent 42%),
    rgba(3,8,5,0.88);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 100;
  cursor: pointer;
  transition: opacity 1s ease;
}
#intro-overlay.hidden { opacity: 0; pointer-events: none; }
#intro-overlay h1 {
  font-weight: 800; letter-spacing: 0.18em;
  font-size: 96px; color: var(--accent);
  margin: 0 0 12px 0;
  text-shadow: 0 0 32px rgba(232,201,109,0.38);
}
#intro-overlay p {
  color: var(--ink-dim); font-size: 17px;
  max-width: 620px; text-align: center;
  line-height: 1.7; margin: 4px 0;
}
#intro-overlay .small {
  color: var(--ink-faint); font-size: var(--hint-font-size); margin-top: 20px;
  letter-spacing: 0.15em;
}

.help-overlay {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(139,216,197,0.14), transparent 38%),
    rgba(3,8,5,0.34);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0s;
  will-change: opacity;
}
.help-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}
.help-card {
  position: relative;
  width: 560px;
  padding: 30px 32px 28px;
  background: rgba(8,25,16,0.94);
  border-color: rgba(201,220,166,0.22);
}
.menu-card {
  width: 380px;
  background:
    var(--panel-ornament-tr) right -18px top -20px / 96px 96px no-repeat,
    var(--panel-ornament-br) right -18px bottom -20px / 96px 96px no-repeat,
    var(--panel-ornament-bl) left -18px bottom -20px / 96px 96px no-repeat,
    var(--panel-ornament-tl) left -18px top -20px / 96px 96px no-repeat,
    linear-gradient(145deg, rgba(255,255,255,0.022), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 12% 0%, rgba(139,216,197,0.045), rgba(139,216,197,0) 34%),
    rgba(8,25,16,0.94);
}
.help-card h2 {
  margin-bottom: 14px;
}
.help-card p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.55;
}
.help-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.help-list div {
  display: grid;
  grid-template-columns: 142px 1fr;
  gap: 18px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid rgba(201,220,166,0.12);
}
.help-list > div > span {
  color: var(--accent);
  font-size: var(--hint-font-size);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.help-list p {
  grid-column: 2;
  font-size: var(--hint-font-size);
}
.help-list p + p {
  margin-top: -6px;
}
.help-tab-label {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.help-hotkey-label {
  color: var(--accent-2);
}
.help-hint-example {
  cursor: help;
  border-bottom: 1px dashed rgba(232,201,109,0.42);
  padding-bottom: 1px;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.help-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.045);
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.help-close:hover {
  color: var(--ink);
  border-color: rgba(232,201,109,0.34);
  background: rgba(232,201,109,0.10);
}

.pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(168,216,185,0.12);
  color: var(--good);
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-left: 6px;
}
.menu-status {
  min-height: 17px;
  margin-top: 9px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}
.menu-status:empty {
  min-height: 0;
  margin-top: 0;
}
.menu-status.good { color: var(--good); }
.menu-status.bad { color: var(--bad); }
.menu-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}
.audio-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.menu-control-row {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
.desktop-only.hidden {
  display: none;
}
.menu-divider {
  border-top: 1px solid rgba(201,220,166,0.10);
  margin: 16px 0 0;
}
.menu-action {
  flex: 1;
  background: rgba(238,243,223,0.10);
  border: 1px solid rgba(238,243,223,0.16);
  color: var(--ink-dim);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  width: 100%;
}
.audio-row button,
.menu-control-row .menu-action {
  background: rgba(139,216,197,0.18);
  border: 1px solid rgba(139,216,197,0.28);
  color: var(--accent-2);
}
.audio-row button.off {
  color: var(--ink-faint);
  background: rgba(238,243,223,0.075);
  border-color: rgba(238,243,223,0.14);
}
.audio-row input[type="range"] {
  width: 50%;
  justify-self: center;
  accent-color: var(--accent-2);
}
.audio-checkbox-group {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
}
.audio-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  user-select: none;
}
.audio-checkbox-row input {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--accent-2);
}
.audio-checkbox-row:has(input:disabled) {
  opacity: 0.45;
  cursor: default;
}
.menu-card .primary-action {
  margin-top: 18px;
}
.menu-card .menu-action {
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.menu-confirm {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(232,201,109,0.10), transparent 32%),
    rgba(3,8,5,0.62);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0s;
  will-change: opacity;
}
.menu-confirm.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}
.reset-confirm-card {
  position: relative;
  width: 420px;
  padding: 30px 32px 28px;
  text-align: center;
  border-color: rgba(232,201,109,0.28);
  background: rgba(8,25,16,0.86);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.48),
    0 0 38px rgba(232,201,109,0.08),
    inset 0 1px 0 rgba(238,243,223,0.07);
}
.reset-confirm-card h2 {
  margin-bottom: 10px;
}
.reset-confirm-card p {
  max-width: 330px;
  margin: 0 auto;
  color: var(--ink-dim);
  font-size: var(--hint-font-size);
  line-height: 1.55;
}
.reset-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}
.reset-confirm-actions .menu-action {
  font-size: 14px;
  letter-spacing: 0.08em;
}
.reset-confirm-actions .reset-danger {
  color: #c9dca6;
  border-color: rgba(116,169,118,0.38);
  background: rgba(10,39,24,0.72);
}
.reset-confirm-actions .reset-danger:hover {
  color: var(--ink);
  border-color: rgba(223,139,143,0.52);
  background: rgba(223,139,143,0.12);
}
.audio-row button:hover,
.menu-action:hover {
  color: var(--ink);
  background: rgba(18,51,31,0.88);
  border-color: rgba(116,169,118,0.42);
}

[data-tip],
.perfect-star[data-tip-html],
.level-stars-summary[data-tip-html],
.upgrade[data-tip-html] > .upgrade-name {
  cursor: help;
  border-bottom: 1px dashed rgba(232,201,109,0.34);
  padding-bottom: 1px;
}
#tooltip {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(7,20,13,0.95);
  color: var(--ink);
  border: 1px solid rgba(201,220,166,0.24);
  border-radius: 14px;
  padding: 11px 13px;
  font-size: var(--hint-font-size);
  line-height: 1.55;
  width: max-content;
  max-width: 360px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.48);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  transform: translate3d(12px, 12px, 0);
  will-change: opacity, transform;
  z-index: 200;
}
#tooltip.show { opacity: 1; }
#tooltip .tip-title {
  color: var(--accent);
  font-size: var(--hint-font-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
#tooltip .tip-body p {
  margin: 0 0 8px;
}
#tooltip .tip-body p:last-child {
  margin-bottom: 0;
}
#tooltip .tip-star {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(232,201,109,0.42);
}

@media (max-width: 720px) {
  #stage-progress {
    top: 10px;
    width: 840px;
  }
  #resource-panel {
    top: 18px;
    left: 18px;
    width: 360px;
    padding: 13px 14px;
  }
  #upgrade-panel {
    width: var(--practice-panel-width);
  }
  #upgrade-panel.open ~ #upgrade-toggle {
    right: var(--practice-panel-width);
  }
  .between-grid {
    grid-template-columns: 1fr 1fr;
  }
}