/* choutes.com, help.choutes.com, packages.choutes.com: one stylesheet, light and dark.
   The theme is set on <html data-theme="dark|light"> before the page is drawn (common6.py):
   the visitor's choice, or the theme of the device (dark when the device has none). */

@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

/* ---- cursors (begin) */
/* The mouse pointer of Choutes Project: Bibata Modern Classic by Abdulkaiz Khatri, GPL-3.0,
   https://github.com/ful1e5/Bibata_Cursor (made by make-cursors.py). */
:root {
  --cur-default: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M201.163 133.54L201.149 133.528L201.134 133.515L91.6855 36.4935C86.5144 31.7659 81.4269 27.9549 76.5421 25.525C71.7671 23.1497 66.0861 21.5569 60.4133 23.1213C54.3118 24.8039 50.4875 29.4674 48.3639 34.759C46.3122 39.8715 45.4999 46.2787 45.4999 53.5383L45.4999 200.431V200.493L45.5008 200.555C45.6218 208.862 50.4279 217.843 55.9963 223.894C58.8934 227.043 62.5163 229.986 66.6704 231.742C70.9172 233.537 76.217 234.254 81.4691 231.884C85.7536 229.951 89.6754 226.055 92.8565 222.651C94.6841 220.695 96.8336 218.252 99.0355 215.749C100.71 213.847 102.414 211.91 104.03 210.126C112.189 201.122 121.346 192.286 132.161 187.407C143.013 182.511 155.809 181.375 167.963 181.146C170.959 181.089 173.85 181.087 176.65 181.085H176.663H176.686C179.447 181.083 182.164 181.081 184.662 181.019C189.231 180.906 194.643 180.609 198.777 178.88C208.711 174.723 210.972 163.838 210.753 156.445C210.521 148.596 207.57 139.272 201.163 133.54Z' fill='%23000000' stroke='%23FFFFFF' stroke-width='17'/%3E%3C/svg%3E") 5 2, default;
  --cur-pointer: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M120.764 243.559C106.064 243.654 94.9315 234.669 87.33 226.47C79.4457 217.966 72.2147 206.838 65.6646 196.382C64.2676 194.152 62.8936 191.939 61.5335 189.749C56.2005 181.16 51.0808 172.915 45.6262 165.321C38.7567 155.756 32.4011 148.765 26.3033 144.633L15.5723 137.361L19.7447 125.088L21.19 121.644C21.9919 119.999 23.1992 117.834 24.9231 115.515C28.3468 110.91 34.2913 105.096 43.5504 102.37C55.11 98.9669 67.7847 101.278 81.7607 109.426V53.5426C81.7607 33.8583 92.6922 13.7197 113.92 13.7197C135.148 13.7197 146.079 33.8583 146.079 53.5426V68.5677C148.285 68.8131 150.453 69.277 152.536 69.9474C157.658 71.5961 162.433 74.4963 166.346 78.4184C171.172 77.2686 176.261 77.2401 181.23 78.443C187.462 79.9516 192.776 83.1349 196.914 87.5425C202.677 86.2935 208.508 86.7836 213.723 88.5338C228.189 93.3895 238.812 108.053 236.948 126.259L225.329 242.882L120.764 243.559Z' fill='%23FFFFFF'/%3E%3Cpath d='M120.654 226.56L209.928 225.982L220.035 124.547C222.154 103.987 196.764 95.4317 189.716 114.404C189.805 91.6041 166.436 88.7513 159.398 104.26C160.279 85.423 136.433 78.1324 129.079 94.1164V53.5431C129.079 23.1126 98.7605 23.1126 98.7605 53.5431V144.834C48.2297 94.1168 35.8398 130.561 35.8398 130.561C70.1776 153.83 91.1807 226.751 120.654 226.56Z' fill='%23000000'/%3E%3C/svg%3E") 11 2, pointer;
  --cur-grab: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6822 129.306C17.9142 128.737 18.2237 128.029 18.6212 127.22C19.4074 125.619 20.5888 123.517 22.2747 121.268C25.6285 116.795 31.4352 111.177 40.4538 108.547C49.9972 105.764 60.2881 106.957 71.4261 112.134L62.4414 58.6843C60.8294 49.3309 63.9295 40.6043 68.759 34.3679C73.6032 28.1125 81.2692 22.9561 90.6807 22.1174L90.8223 22.1048L90.9641 22.0945C96.5492 21.6909 102.027 22.8772 106.89 25.2756C112.328 18.0399 120.747 13.0682 130.119 12.4974C137.915 12.0139 145.424 14.6381 151.345 19.2813C156.26 15.3869 162.302 12.9011 168.762 12.499C178.496 11.8817 187.04 16.0978 192.777 21.7858C197.756 26.7223 201.675 33.8207 202.203 42.0306C203.897 41.6272 205.632 41.3651 207.394 41.2567C218.449 40.4961 227.733 46.0028 233.371 52.7116C239.007 59.4173 242.879 69.5748 240.075 80.404L225.593 138.14C222.913 148.824 220.644 170.418 219.052 190.7C218.278 200.551 217.694 209.658 217.304 216.307L215.959 243.204L114.324 243.559C100.059 243.639 89.2654 235.043 81.9284 227.234C74.3328 219.149 67.3923 208.592 61.1496 198.746C59.813 196.638 58.5002 194.549 57.2019 192.484L57.2002 192.481C52.1173 184.394 47.2583 176.662 42.0744 169.535C35.5479 160.56 29.5477 154.059 23.8231 150.227L12.9668 142.959L17.1948 130.598L17.6822 129.306Z' fill='%23FFFFFF'/%3E%3Cpath d='M131.161 29.4654C123.564 29.9227 117.078 37.2105 117.566 44.7415L121.494 112.736C121.69 116.132 118.607 116.829 118.171 114.234L107.597 51.3314C106.558 44.2169 99.4208 38.5277 92.1898 39.0503C84.2336 39.7593 77.8367 48.0202 79.1993 55.8246L93.7003 142.091C93.7496 143.308 93.9506 144.519 94.3044 145.685C93.7371 147.965 93.3986 149.579 93.3986 149.579C45.0621 101.653 33.28 136.1 33.28 136.1C66.1267 158.088 86.0504 226.74 114.244 226.56L199.738 226.26C199.738 226.26 202.925 158.636 209.104 134.004L223.605 76.193C225.925 67.3805 217.66 57.5471 208.499 58.221C202.303 58.5729 196.62 63.3112 195.207 69.3037L182.821 118.128C182.149 120.778 181.503 119.715 181.612 117.529L185.238 44.7419C185.767 36.6115 178.03 28.9402 169.83 29.4654C162.742 29.9001 156.519 36.2081 156.236 43.244L152.913 109.741C152.743 113.12 150.399 113.186 150.194 109.442L146.568 43.2444C146.262 35.6092 138.852 28.9826 131.161 29.4654Z' fill='%23000000'/%3E%3C/svg%3E") 14 7, grab;
  --cur-grabbing: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M138.019 58.8846C133.638 54.856 127.743 52.4693 121.621 52.8519C113.738 53.3327 106.781 58.3167 103.207 65.0978C99.4171 62.8672 94.9982 61.7027 90.4943 62.0296L90.4231 62.0348L90.352 62.0411C83.8326 62.6245 78.3733 66.2379 74.8581 70.7949C71.355 75.3362 69.2441 81.5154 70.3437 87.9529L72.8497 103.546L71.8703 104.281C71.4687 104.582 71.0401 104.899 70.5893 105.233C66.353 108.368 60.1525 112.958 55.8777 119.277C50.6702 126.975 48.473 136.798 52.3513 149.075C56.3948 161.875 64.2957 175.615 72.9454 186.198C77.2856 191.508 82.0271 196.286 86.8381 199.81C91.423 203.168 97.1306 206.169 103.204 206.137C103.211 206.137 103.218 206.137 103.225 206.137L184.685 205.851L190.143 205.832L192.396 200.861C207.033 168.573 206.368 139.051 205.876 117.24C205.806 114.159 205.74 111.232 205.722 108.472V91.8606V91.8337L205.721 91.8068C205.683 85.7953 203.765 79.5047 200.044 74.6089C196.228 69.5891 190.094 65.6308 182.27 66.182C180.452 66.2918 178.671 66.637 176.963 67.1882C175.864 63.2435 173.673 59.7636 170.979 57.0826C166.804 52.9264 160.723 49.9915 153.986 50.4211C147.668 50.8142 141.894 54.0836 138.019 58.8846Z' fill='%23000000' stroke='%23FFFFFF' stroke-width='17'/%3E%3C/svg%3E") 12 6, grabbing;
  --cur-text: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M127.93 223.209C136.047 229.785 146.386 233.751 157.637 233.751H163.861C170.212 233.751 175.361 228.603 175.361 222.251V209.684C175.361 203.333 170.212 198.184 163.861 198.184H157.637C151.115 198.184 145.654 192.795 145.654 186.021V69.2299C145.654 62.4559 151.115 57.0668 157.637 57.0668H163.861C170.212 57.0668 175.361 51.9181 175.361 45.5668V33C175.361 26.6487 170.212 21.5 163.861 21.5H157.637C146.386 21.5 136.047 25.4666 127.93 32.0427C119.813 25.4666 109.475 21.5 98.2233 21.5H91.9998C85.6485 21.5 80.4998 26.6487 80.4998 33V45.5668C80.4998 51.9181 85.6485 57.0668 91.9998 57.0668H98.2233C104.746 57.0668 110.207 62.4559 110.207 69.2299V186.021C110.207 192.795 104.746 198.184 98.2233 198.184H91.9998C85.6485 198.184 80.4998 203.333 80.4998 209.684V222.251C80.4998 228.603 85.6484 233.751 91.9998 233.751H98.2233C109.475 233.751 119.813 229.785 127.93 223.209Z' fill='%23000000' stroke='%23FFFFFF' stroke-width='17'/%3E%3C/svg%3E") 12 12, text;
  --cur-help: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M90.6113 178.503C84.3023 184.191 81.1803 191.658 81.1803 200.184C81.1803 208.709 84.2994 216.183 90.551 221.936L90.6128 221.993L90.6757 222.048C96.9047 227.557 104.563 230.151 113.06 230.151C121.555 230.151 129.206 227.556 135.378 221.996L135.385 221.989C141.737 216.253 144.939 208.764 144.939 200.184C144.939 191.628 141.752 184.165 135.381 178.501C129.227 172.868 121.576 170.216 113.06 170.216C104.514 170.216 96.8343 172.884 90.6113 178.503ZM90.6113 178.503C90.6131 178.502 90.615 178.5 90.6169 178.498L96.3066 184.813L90.6094 178.505C90.6101 178.504 90.6106 178.504 90.6113 178.503ZM119.474 94.2754L119.466 94.2861L119.458 94.2968C116.826 97.8862 112.693 102.188 106.8 107.205C100.025 112.972 93.8947 119.946 90.4502 128.95C87.509 136.566 86.7181 146.312 86.3905 156.287C86.1361 164.033 92.4281 170.067 99.8063 170.067H125.691C133.16 170.067 138.686 164.183 139.307 157.489C139.655 153.738 140.312 150.864 141.13 148.719L141.14 148.693L141.15 148.666C142.191 145.883 144.191 142.809 147.578 139.497L161.907 125.952L161.976 125.887L162.043 125.821C168.603 119.338 173.7 112.671 176.99 105.782C180.341 98.7671 181.946 91.1034 181.946 82.9368C181.946 64.897 176.104 49.9102 163.59 39.2557C151.377 28.7852 134.762 24.1338 114.935 24.1338C94.863 24.1338 78.0551 29.2491 65.6936 40.5855C54.5504 50.7273 48.6162 64.3744 47.4054 80.6914C46.8067 88.7603 53.3763 94.8666 60.7233 94.8666H93.0614C100.662 94.8666 105.756 88.9203 106.766 82.9346C107.259 80.0118 108.217 78.0464 109.356 76.6698C110.763 74.9698 112.368 74.161 114.935 74.161C118.64 74.161 119.993 75.1877 120.64 75.9513C121.516 76.9846 122.688 79.4465 122.688 84.8423C122.688 88.1949 121.694 91.2672 119.474 94.2754Z' fill='%23000000' stroke='%23FFFFFF' stroke-width='17'/%3E%3C/svg%3E") 4 8, help;
  --cur-progress: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M141.269 109.497L162.13 110.056L147.596 95.0801L82.2756 27.7773C70.7037 15.8542 50.5001 24.0464 50.5001 40.6618L50.5 134.895L50.5 160.434L65.8046 139.989L89.6654 108.115L141.269 109.497Z' fill='%23000000' stroke='%23FFFFFF' stroke-width='17'/%3E%3Ccircle cx='118' cy='162' r='70.5' fill='%23000000' stroke='%23FFFFFF' stroke-width='17'/%3E%3Cpath d='M123.081 113.655L118 162L166.345 167.081C167.012 160.733 166.422 154.315 164.609 148.194C162.796 142.073 159.795 136.369 155.778 131.408C151.761 126.447 146.805 122.326 141.195 119.28C135.585 116.234 129.43 114.323 123.081 113.655Z' fill='%23F05024' fill-opacity='0.8'/%3E%3Cpath d='M114.609 210.493L118 162L166.493 165.391C166.047 171.759 164.352 177.977 161.504 183.69C158.655 189.403 154.71 194.499 149.892 198.687C145.074 202.875 139.478 206.073 133.425 208.099C127.371 210.125 120.977 210.938 114.609 210.493Z' fill='%23FCB813' fill-opacity='0.8'/%3E%3Cpath d='M116.304 210.582L118 162L69.4185 160.304C69.1957 166.683 70.2317 173.045 72.4674 179.024C74.703 185.003 78.0945 190.484 82.4481 195.153C86.8018 199.821 92.0324 203.587 97.8413 206.234C103.65 208.882 109.924 210.359 116.304 210.582Z' fill='%237EBA41' fill-opacity='0.8'/%3E%3Cpath d='M118 113.389V162H69.3889C69.3889 155.616 70.6463 149.295 73.0892 143.397C75.5321 137.5 79.1128 132.141 83.6268 127.627C88.1407 123.113 93.4996 119.532 99.3973 117.089C105.295 114.646 111.616 113.389 118 113.389Z' fill='%2332A0DA' fill-opacity='0.8'/%3E%3C/svg%3E") 5 2, progress;
  --cur-move: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M106.501 158.103V158.149L106.502 158.194C106.51 158.941 106.409 159.366 106.334 159.58C106.272 159.755 106.196 159.885 106.036 160.045L93.2947 172.786C83.6153 182.466 83.6153 198.159 93.2947 207.838L109.417 223.96C119.096 233.64 134.789 233.64 144.469 223.96L160.591 207.838C170.27 198.159 170.27 182.466 160.591 172.786L147.749 159.944C147.2 159.396 146.751 158.792 146.473 158.268C146.313 157.966 146.258 157.785 146.242 157.723V148.111L157.872 148.141L157.928 148.141L157.985 148.14C158.757 148.132 159.5 148.435 160.045 148.981L172.786 161.722C182.466 171.401 198.159 171.401 207.839 161.722L223.96 145.6C233.64 135.92 233.64 120.227 223.96 110.548L207.839 94.4256C198.159 84.7462 182.466 84.7462 172.786 94.4256L159.944 107.268C159.413 107.799 158.696 108.1 157.945 108.108L146.329 108.233L146.429 98.3746L146.43 98.2859L146.429 98.1973C146.421 97.4254 146.724 96.6828 147.269 96.137L160.01 83.396C169.69 73.7166 169.69 58.0232 160.01 48.3438L144.656 32.9896C134.977 23.3102 119.283 23.3102 109.604 32.9896L101.543 41.0506L93.482 49.1115C83.8026 58.7909 83.8026 74.4843 93.482 84.1637L105.557 96.2383C106.368 97.0492 106.685 98.0541 106.689 98.4374L106.69 98.4873L106.691 98.5372L106.921 108.774H96.0586H96.013L95.9673 108.775C95.1954 108.783 94.4528 108.48 93.907 107.934L81.166 95.1933C71.4866 85.5139 55.7932 85.5139 46.1138 95.1933L30.7595 110.548C21.0802 120.227 21.0802 135.972 30.7595 145.651L30.7692 145.661L46.8815 161.722C46.883 161.723 46.8846 161.725 46.8861 161.726C56.5659 171.401 72.2558 171.4 81.9337 161.722L94.0082 149.647C94.5318 149.124 95.237 148.823 95.9764 148.807H106.501V158.103Z' fill='%23000000' stroke='%23FFFFFF' stroke-width='17'/%3E%3C/svg%3E") 12 12, move;
  --cur-not-allowed: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M127.32 226.14C181.344 226.14 225.14 182.344 225.14 128.32C225.14 74.2955 181.344 30.5 127.32 30.5C73.2955 30.5 29.5 74.2955 29.5 128.32C29.5 182.344 73.2955 226.14 127.32 226.14Z' fill='%23FE0000' stroke='%23FFFFFF' stroke-width='17'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M113.149 129.398L82.4062 98.6557L96.0697 84.9922L126.812 115.735L157.555 84.9922L171.219 98.6556L140.476 129.398L171.219 160.141L157.555 173.805L126.812 143.062L96.0697 173.805L82.4063 160.141L113.149 129.398Z' fill='white'/%3E%3C/svg%3E") 12 12, not-allowed;
}
html { cursor: var(--cur-default); }
:where(p, li, h1, h2, h3, h4, h5, h6, td, th, dd, dt, blockquote, figcaption, pre, code, kbd) { cursor: var(--cur-text); }
:where(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], textarea, [contenteditable=true]) { cursor: var(--cur-text); }
:where(a[href], button, summary, select, label[for], [role=button], input[type=checkbox], input[type=radio], input[type=submit], input[type=button], input[type=range]) { cursor: var(--cur-pointer); }
:where(a[href], button, summary, label[for], [role=button]) :where(*) { cursor: inherit; }
:where(button:disabled, input:disabled, select:disabled) { cursor: var(--cur-default); }
/* ---- cursors (end) */

/* ---- tokens ---- */
:root {
  --font-display: "Poppins", "Inter", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --head-h: 64px;
  --radius-s: 10px; --radius-m: 16px; --radius-l: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --violet: #7C3AED; --iris: #A78BFA;
}
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08080C; --bg-alt: #0D0D13; --surface: #121219; --surface-2: #17171F; --raised: #1C1C26;
  --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .14);
  --text: #F3F3F7; --muted: #A2A2B3; --faint: #74748A;
  --accent: #8B5CF6; --accent-hover: #9D74F8; --accent-text: #B79CFF; --on-accent: #FFFFFF;
  --tint: rgba(139, 92, 246, .12); --tint-strong: rgba(139, 92, 246, .22);
  --code-bg: rgba(255, 255, 255, .07);
  --glow-a: rgba(124, 58, 237, .32); --glow-b: rgba(59, 76, 230, .22);
  --grid-line: rgba(255, 255, 255, .045);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-l: 0 40px 120px rgba(0, 0, 0, .55);
  --header-bg: rgba(8, 8, 12, .74);
  --ok: #34D399; --bad: #F87171;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF; --bg-alt: #F7F7FA; --surface: #FFFFFF; --surface-2: #F6F6F9; --raised: #FFFFFF;
  --line: #E7E7EE; --line-strong: #D6D6E0;
  --text: #0C0C14; --muted: #5A5A6B; --faint: #7E7E8F;
  --accent: #6D28D9; --accent-hover: #5B21B6; --accent-text: #6D28D9; --on-accent: #FFFFFF;
  --tint: rgba(109, 40, 217, .07); --tint-strong: rgba(109, 40, 217, .13);
  --code-bg: #F1F0F6;
  --glow-a: rgba(124, 58, 237, .16); --glow-b: rgba(59, 130, 246, .10);
  --grid-line: rgba(12, 12, 20, .05);
  --shadow: 0 1px 2px rgba(16, 16, 32, .05), 0 10px 28px rgba(16, 16, 32, .06);
  --shadow-l: 0 30px 80px rgba(30, 20, 70, .16);
  --header-bg: rgba(255, 255, 255, .8);
  --ok: #059669; --bad: #DC2626;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html.theme-anim body, html.theme-anim body * { transition: background-color .3s ease, border-color .3s ease, color .3s ease !important; }
html[lang="ms"] [lang="en"], html[lang="en"] [lang="ms"] { display: none !important; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.022em; margin: 0 0 .5em; color: var(--text); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--code-bg); padding: 1px 6px; border-radius: 6px; }
pre { font-family: var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; overflow-x: auto; font-size: .9rem; }
pre code { background: none; padding: 0; }
::selection { background: var(--tint-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
.eyebrow, .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font: 600 .78rem/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); line-height: 1.6; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid transparent; font: 600 .95rem/1 var(--font-text); text-decoration: none;
  cursor: var(--cur-pointer); white-space: nowrap; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-light, .btn-violet {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 24px -8px var(--glow-a);
}
.btn-light:hover, .btn-violet:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-glass, .btn-outline { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-glass:hover, .btn-outline:hover { border-color: var(--accent); color: var(--text); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--tint); color: var(--text); }
.btn-small { height: 36px; padding: 0 14px; font-size: .88rem; border-radius: 10px; }
.btn-small svg { width: 16px; height: 16px; }
.btn-big { height: 52px; padding: 0 24px; font-size: 1rem; border-radius: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .btn-row { justify-content: center; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--head-h);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.site-header.scrolled, .site-header.open {
  background: var(--header-bg); border-bottom-color: var(--line);
  backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
}
.site-header.open { background: var(--bg); }
.bar { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; }
.logo-light { display: none !important; }
:root[data-theme="light"] .logo-dark { display: none !important; }
:root[data-theme="light"] .logo-light { display: block !important; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav-link {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 9px;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: .94rem; transition: color .15s, background-color .15s;
}
.nav-link:hover { color: var(--text); background: var(--tint); }
.nav-link[aria-current="page"] { color: var(--text); }
.nav-link svg { display: none; }
.nav-only-mobile, .nav-foot { display: none !important; }
.bar-end { display: flex; align-items: center; gap: 8px; flex: none; }
.lang { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.lang button {
  border: 0; background: transparent; color: var(--muted); font: 600 .78rem/1 var(--font-text); letter-spacing: .04em;
  height: 28px; min-width: 34px; padding: 0 8px; border-radius: 7px; cursor: var(--cur-pointer);
}
.lang button[aria-pressed="true"] { background: var(--tint-strong); color: var(--text); }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: var(--cur-pointer); padding: 0;
  transition: border-color .15s, background-color .15s;
}
.icon-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }
.menu-toggle { display: none !important; }
.menu-toggle svg + svg { display: none; }
.open .menu-toggle svg { display: none; }
.open .menu-toggle svg + svg { display: block; }

/* theme picker */
.theme { position: relative; }
.theme-btn .ti { display: none; }
:root[data-theme-pref="system"] .theme-btn .ti-system,
:root[data-theme-pref="light"] .theme-btn .ti-light,
:root[data-theme-pref="dark"] .theme-btn .ti-dark { display: block; }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 184px; padding: 6px; margin: 0; list-style: none;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-l);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; z-index: 120;
}
.theme.open .theme-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.theme-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font: 500 .92rem/1.2 var(--font-text); cursor: var(--cur-pointer); text-align: left;
}
.theme-menu button:hover { background: var(--tint); color: var(--text); }
.theme-menu button svg { width: 17px; height: 17px; flex: none; }
.theme-menu button .tick { margin-left: auto; opacity: 0; color: var(--accent-text); }
.theme-menu button[aria-checked="true"] { color: var(--text); }
.theme-menu button[aria-checked="true"] .tick { opacity: 1; }

@media (max-width: 980px) {
  .bar { gap: 12px; }
  .bar-end { margin-left: auto; }
  .menu-toggle { display: inline-grid !important; }
  .bar-end .lang, .bar-download { display: none !important; }
  .nav {
    position: fixed; left: 0; right: 0; top: var(--head-h); height: calc(100dvh - var(--head-h)); margin: 0; z-index: 99;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
    background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .25s var(--ease), visibility 0s linear .25s;
  }
  .open .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-link {
    height: auto; padding: 17px 2px; border-radius: 0; font: 600 1.2rem/1.2 var(--font-display); letter-spacing: -.01em;
    color: var(--text); border-bottom: 1px solid var(--line); justify-content: space-between; flex: none;
  }
  .nav-link:hover { background: transparent; color: var(--accent-text); }
  .nav-link svg { display: block; width: 18px; height: 18px; color: var(--faint); }
  .nav-link[aria-current="page"] { color: var(--accent-text); }
  .open .nav-link { animation: rise .35s var(--ease) both; }
  .open .nav-link:nth-child(2) { animation-delay: .03s; } .open .nav-link:nth-child(3) { animation-delay: .06s; }
  .open .nav-link:nth-child(4) { animation-delay: .09s; } .open .nav-link:nth-child(5) { animation-delay: .12s; }
  .open .nav-link:nth-child(6) { animation-delay: .15s; }
  .nav-only-mobile { display: flex !important; }
  .nav-foot { display: grid !important; gap: 12px; margin-top: auto; padding-top: 28px; }
  .nav-foot .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .92rem; padding: 4px 2px; }
  .nav-foot .btn { width: 100%; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (max-width: 420px) { .brand img { height: 30px; } .wrap { width: calc(100% - 32px); } }

/* ---- backdrops ---- */
.night, .hero, .page-head { position: relative; isolation: isolate; }
.mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mesh i { position: absolute; border-radius: 50%; filter: blur(80px); }
.mesh i:nth-child(1) { width: 640px; height: 420px; left: 50%; top: -240px; margin-left: -420px; background: var(--glow-a); }
.mesh i:nth-child(2) { width: 520px; height: 380px; left: 50%; top: -180px; margin-left: 20px; background: var(--glow-b); }
.mesh i:nth-child(3), .mesh i:nth-child(4) { display: none; }
.grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
.night { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.night .mesh i:nth-child(1) { top: auto; bottom: -340px; opacity: .6; }
.night .mesh i:nth-child(2) { display: none; }

/* ---- hero ---- */
.hero { margin-top: calc(-1 * var(--head-h)); padding: calc(var(--head-h) + clamp(44px, 8vw, 96px)) 0 0; text-align: center; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 6px 5px 14px; border-radius: 999px; margin-bottom: 28px; max-width: 100%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font-size: .86rem; font-weight: 500; text-decoration: none;
  box-shadow: var(--shadow);
}
.pill:hover { color: var(--text); border-color: var(--accent); }
.pill b { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--tint-strong); color: var(--accent-text); font-weight: 600; font-size: .8rem; white-space: nowrap; }
.pill b svg { width: 14px; height: 14px; }
.logo3d { --rx: 0deg; --ry: 0deg; width: clamp(88px, 11vw, 124px); aspect-ratio: 1; position: relative; perspective: 700px; margin-bottom: 24px; }
.logo3d .l3 { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.logo3d .l3 img, .logo3d .l3 .shine { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo3d .l3 .depth { filter: brightness(.55) saturate(1.2); }
.logo3d .l3 .shine {
  mix-blend-mode: soft-light; pointer-events: none;
  -webkit-mask: url("../img/logo-icon.webp") center / contain no-repeat; mask: url("../img/logo-icon.webp") center / contain no-repeat;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .7), transparent 55%);
}
.logo3d .glow { position: absolute; inset: 8%; border-radius: 30%; background: #7C3AED; filter: blur(34px); opacity: .5; transform: translateY(14%); }
.hero h1 { font-size: clamp(2.3rem, 6.4vw, 4.5rem); line-height: 1.16; letter-spacing: -.03em; max-width: 13em; margin-bottom: 20px; }
.hero h1 .grad { background: linear-gradient(100deg, var(--accent-text) 10%, #60A5FA 90%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lead { max-width: 36em; margin: 0 auto 32px; }
.hero-note { margin: 18px 0 0; color: var(--faint); font-size: .88rem; }
.hero-shot { width: min(1100px, 100%); margin: clamp(44px, 7vw, 76px) auto 0; position: relative; }
.hero-shot::before { content: ""; position: absolute; left: 10%; right: 10%; top: 8%; height: 70%; background: var(--glow-a); filter: blur(80px); z-index: -1; }
.window {
  position: relative; z-index: 5; border-radius: 14px 14px 0 0; overflow: hidden; border: 1px solid var(--line-strong); border-bottom: 0;
  background: var(--surface); box-shadow: var(--shadow-l); transform-origin: 50% 50%; will-change: transform;
  transition: transform .75s var(--ease), opacity .45s ease, border-radius .3s ease, box-shadow .3s ease;
}
.window.floating { border-radius: 12px; border-bottom: 1px solid var(--line-strong); box-shadow: 0 40px 120px rgba(0, 0, 0, .5), 0 0 0 1px var(--line); }
.window.dragging { transition: none; }
.window.is-max { z-index: 150; }
.window.is-min, .window.is-closed { opacity: 0; pointer-events: none; }
.hero { overflow: visible; z-index: 1; }
.win-dock {
  position: absolute; left: 50%; top: clamp(40px, 18%, 160px); z-index: 4; transform: translate(-50%, 16px) scale(.96); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 14px; cursor: var(--cur-pointer);
  background: var(--raised); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--shadow-l);
  font: 500 .85rem/1.25 var(--font-text); text-align: left; transition: opacity .35s ease, transform .45s var(--ease), border-color .15s;
}
.win-dock img { width: 28px; height: 28px; }
.win-dock strong { display: block; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.win-dock span { white-space: nowrap; }
.win-dock span span { color: var(--muted); }
.win-dock:hover { border-color: var(--accent); }
.win-dock.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hero > .mesh, .hero > .grid-bg { overflow: hidden; }
.window-bar { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); cursor: var(--cur-grab); touch-action: none; user-select: none; -webkit-user-select: none; }
.window.dragging .window-bar { cursor: var(--cur-grabbing); }
.window-bar .wc button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: var(--cur-pointer); transition: background-color .15s, color .15s; }
.window-bar .wc button:hover { background: var(--line-strong); }
.window-bar .wc button.close:hover { background: #DA4453; }
.window-bar .wc button.close:hover svg { stroke: #fff; opacity: 1; }
.window-bar .wt { font-size: .78rem; font-weight: 600; color: var(--muted); }
.window-bar .wc { display: flex; align-items: center; gap: 6px; }
.window-bar svg { width: 16px; height: 16px; fill: none; stroke: var(--text); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.window img { width: 100%; height: auto; }
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; padding: 22px 0; color: var(--muted); font-size: .9rem; font-weight: 500; }
.trust-row > span { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 17px; height: 17px; color: var(--accent-text); }
@media (max-width: 560px) {
  .hero .btn-row { width: 100%; flex-direction: column; }
  .hero .btn-row .btn { width: 100%; }
  .window-bar { height: 24px; padding: 0 4px 0 10px; }
  .window-bar .wt { font-size: .66rem; }
  .window-bar .wc { gap: 2px; }
  .window-bar .wc button { width: 20px; height: 20px; }
  .window-bar svg { width: 12px; height: 12px; }
  .window { border-radius: 10px 10px 0 0; }
  .trust-row { gap: 10px 18px; font-size: .84rem; }
}

/* ---- page head (other pages) ---- */
.page-head { margin-top: calc(-1 * var(--head-h)); padding: calc(var(--head-h) + clamp(44px, 7vw, 92px)) 0 clamp(44px, 6vw, 76px); overflow: hidden; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.03em; margin-bottom: 14px; max-width: 18em; }
.page-head .lead { max-width: 44em; margin-bottom: 0; }
.page-head.center h1, .page-head.center .lead { margin-left: auto; margin-right: auto; }
.page-head .btn-row { margin-top: 28px; }

/* ---- sections ---- */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section.white { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.section-head.left { margin-left: 0; text-align: left; }
.split { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split.reverse { grid-template-columns: 1.25fr 1fr; }
.split.reverse .split-text { order: 2; }
.split > * { min-width: 0; }
.split-text p { color: var(--muted); font-size: 1.05rem; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks svg { width: 14px; height: 14px; flex: none; color: var(--accent-text); margin-top: 3px; padding: 4px; border-radius: 6px; background: var(--tint-strong); box-sizing: content-box; }
@media (max-width: 880px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-text { order: 0; }
}

.shot { margin: 0; position: relative; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-l); background: #0B0A14; border: 1px solid var(--line-strong); }
.shot img { width: 100%; height: auto; }
.shot-big { max-width: 1060px; margin: 0 auto; }
.frame { position: relative; padding-bottom: 8%; }
.frame .shot + .shot { position: absolute; width: 52%; right: -3%; bottom: 0; }
@media (max-width: 880px) { .frame { padding-bottom: 0; } .frame .shot + .shot { position: relative; width: 100%; right: 0; margin-top: 14px; } }

/* cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 26px;
  transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease; min-width: 0; overflow-wrap: break-word;
}
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at 0 0, var(--tint), transparent 45%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card h3 { margin: 0 0 8px; }
.card p { color: var(--muted); margin: 0; font-size: .96rem; }
.card .tile { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 18px; background: var(--tint-strong); color: var(--accent-text); border: 1px solid var(--line); }
.card .tile svg { width: 21px; height: 21px; }
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-2px); color: inherit; }
a.card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--accent-text); font-weight: 600; font-size: .92rem; }
a.card .more svg { width: 16px; height: 16px; transition: transform .2s; }
.partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 540px)); justify-content: center; gap: 16px; }
.partner { display: flex; align-items: center; gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); color: inherit; text-decoration: none; transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease; }
.partner:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .35); }
.partner .logo { flex: none; display: grid; place-items: center; width: 112px; height: 88px; border-radius: 14px; background: #11111b; }
.partner .logo img { width: auto; height: 78px; }
.partner .info { min-width: 0; }
.partner h3 { margin: 0 0 4px; }
.partner p { margin: 0; color: var(--muted); }
.partner .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--accent-text); font-weight: 600; font-size: .92rem; }
.partner .more svg { width: 16px; height: 16px; transition: transform .2s; }
.partner:hover .more svg { transform: translateX(3px); }
@media (max-width: 460px) { .partner { flex-direction: column; align-items: flex-start; } .partner .logo { width: 100%; } }
a.card:hover .more svg { transform: translateX(3px); }
@media (max-width: 980px) { .cards, .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards, .cards.two, .cards.four { grid-template-columns: 1fr; } .card { padding: 22px; } }

.chips { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .9rem; font-weight: 500; color: var(--text); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 6vw, 72px); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; }
.fact { padding: 24px 22px; display: grid; gap: 4px; color: var(--muted); font-size: .92rem; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact strong { font: 700 1.7rem/1.1 var(--font-display); color: var(--text); letter-spacing: -.02em; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } .fact:nth-child(3) { border-left: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--line); } }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery figure { margin: 0; min-width: 0; }
.gallery figcaption { margin-top: 10px; color: var(--muted); font-size: .92rem; text-align: center; }
@media (max-width: 880px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

.cta {
  position: relative; isolation: isolate; overflow: hidden; text-align: center; border-radius: var(--radius-l);
  padding: clamp(44px, 7vw, 80px) clamp(22px, 5vw, 56px); border: 1px solid var(--line-strong); background: var(--surface);
}
.cta .mesh i:nth-child(1) { top: auto; bottom: -300px; }
.cta h2 { margin-bottom: 12px; }
.cta .lead { max-width: 36em; margin: 0 auto 28px; }
.cta .mascot-pair { display: flex; justify-content: center; gap: 4px; margin-bottom: 18px; }
.cta .mascot-pair img { width: 52px; height: auto; }
@media (max-width: 560px) { .cta .btn-row { flex-direction: column; } .cta .btn-row .btn { width: 100%; } }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
table.req { width: 100%; border-collapse: collapse; min-width: 560px; }
.req th, .req td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: .95rem; }
.req tr:last-child th, .req tr:last-child td { border-bottom: 0; }
.req thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--surface-2); }
.req tbody th { font-weight: 600; white-space: nowrap; }
.req td { color: var(--muted); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }

/* ---- download page ---- */
.dl { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 5vw, 64px); align-items: start; }
.dl-main h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -.035em; }
.dl-main h1 small { display: block; font: 600 .9rem/1.4 var(--font-text); letter-spacing: 0; color: var(--accent-text); margin-bottom: 10px; }
.dl-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 28px; }
.dl-meta > span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .88rem; color: var(--muted); }
.dl-meta svg { width: 16px; height: 16px; color: var(--accent-text); }
.glass { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.dl-side { padding: 28px; min-width: 0; }
.dl-side h2 { font-size: 1.2rem; margin-bottom: 14px; }
.dl-side .usb { width: 84px; margin: 6px 0 16px; }
.dl-side a.next { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--tint); color: var(--text); text-decoration: none; font-weight: 600; }
.dl-side a.next:hover { background: var(--tint-strong); }
.dl-side a.next svg { width: 18px; height: 18px; color: var(--accent-text); }
.dl-sum { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; min-width: 0; }
.dl-sum > span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dl-sum code { display: block; overflow-wrap: anywhere; font-size: .8rem; line-height: 1.5; padding: 10px 12px; border-radius: 10px; }
.copy { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 600 .84rem/1 var(--font-text); cursor: var(--cur-pointer); }
.copy svg { width: 15px; height: 15px; }
.copy.copied { border-color: var(--ok); color: var(--ok); }
.dl-thanks { display: none; }
.dl-done .dl-start { display: none; }
.dl-done .dl-thanks { display: block; animation: rise .5s var(--ease); }
.dl-thanks h1 span.light { display: block; font: 500 clamp(1.1rem, 2vw, 1.35rem)/1.3 var(--font-text); letter-spacing: 0; color: var(--muted); margin-bottom: 8px; }
.dl-fallback { color: var(--muted); }
.servers { display: none; margin-top: 16px; padding: 10px; }
.servers.show { display: block; animation: rise .35s var(--ease); }
.servers h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-family: var(--font-text); margin: 8px 10px 10px; }
.servers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.servers a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; text-decoration: none; color: var(--text); }
.servers a:hover { background: var(--tint); }
.servers a > span:nth-child(2) { flex: 1; min-width: 0; }
.servers a strong { display: block; }
.servers a small { display: block; color: var(--muted); font-size: .85rem; }
.servers a > svg { width: 17px; height: 17px; color: var(--faint); flex: none; }
.srv-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--tint-strong); color: var(--accent-text); flex: none; }
.srv-icon svg { width: 18px; height: 18px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 920px) { .dl { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dl-start .btn-row .btn, .dl-thanks > .btn { width: 100%; } }

/* the check before the download */
.check {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 5, 12, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s;
}
.check.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.check-box {
  position: relative; width: min(440px, 100%); padding: 32px 26px 22px; border-radius: 22px; overflow: hidden;
  background: var(--raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-l); text-align: center;
  transform: translateY(12px) scale(.98); transition: transform .3s var(--ease);
}
.check.show .check-box { transform: none; }
.check-box::before { content: ""; position: absolute; left: 50%; top: -130px; width: 360px; height: 220px; margin-left: -180px; background: var(--glow-a); filter: blur(60px); pointer-events: none; }
.check-box > * { position: relative; }
.check-x { position: absolute !important; right: 14px; top: 14px; width: 34px; height: 34px; z-index: 2; }
.check-badge { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: var(--tint-strong); color: var(--accent-text); border: 1px solid var(--line); }
.check-badge svg { width: 26px; height: 26px; }
.check-box h2 { font-size: 1.35rem; margin-bottom: 6px; }
.check-box p { color: var(--muted); font-size: .94rem; margin: 0 auto 22px; max-width: 30em; }
.check-q { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; font: 700 2rem/1 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.check-q .n { min-width: 64px; height: 64px; padding: 0 10px; display: grid; place-items: center; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.check-q .op { color: var(--accent-text); }
.check-q .eq { color: var(--faint); }
.check-q .n.ask { color: var(--accent-text); border-style: dashed; border-color: var(--accent); }
.check-q.flip .n { animation: rise .35s var(--ease) both; }
.check-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.check-opts button {
  height: 56px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 700 1.25rem/1 var(--font-display); cursor: var(--cur-pointer); transition: border-color .15s, background-color .15s, transform .15s;
}
.check-opts button:hover { border-color: var(--accent); background: var(--tint); }
.check-opts button:active { transform: scale(.97); }
.check-opts button.wrong { border-color: var(--bad); color: var(--bad); }
.check-opts button.right { border-color: var(--ok); color: var(--ok); background: rgba(52, 211, 153, .1); }
.check-box .check-msg { min-height: 1.5em; margin: 14px 0 0; font-size: .9rem; color: var(--bad); }
.check-foot { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.check-box.shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (max-width: 400px) { .check-opts { grid-template-columns: 1fr 1fr; } .check-q { font-size: 1.7rem; gap: 8px; } .check-q .n { min-width: 54px; height: 54px; } }

/* the countdown */
.moved-view { display: none; text-align: center; }
.check.moved .ask-view { display: none; }
.check.moved .moved-view { display: block; animation: rise .35s var(--ease); }
.moved-icon { display: grid; place-items: center; width: 84px; height: 84px; margin: 4px auto 18px; border-radius: 50%; background: var(--tint); color: var(--accent-text); }
.moved-icon svg { width: 36px; height: 36px; }
.ring { position: relative; width: 148px; height: 148px; margin: 4px auto 20px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .track { stroke: var(--line-strong); }
.ring .arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 0; }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; }
.ring .digits { position: relative; height: 66px; width: 100%; overflow: hidden; }
.ring .digits span { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 700 3.5rem/66px var(--font-display); letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.ring .digits span.enter { animation: digit-in .5s var(--ease) both; }
.ring .digits span.leave { animation: digit-out .5s var(--ease) both; }
@keyframes digit-in { from { transform: translateY(80%); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes digit-out { from { transform: none; opacity: 1; } to { transform: translateY(-80%); opacity: 0; filter: blur(4px); } }
.ok-mark { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(52, 211, 153, .12); color: var(--ok); font-size: .85rem; font-weight: 600; margin-bottom: 16px; }
.ok-mark svg { width: 16px; height: 16px; }
.moved-view h2 { margin-bottom: 6px; }

/* steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 24px; min-width: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; color: var(--accent-text); font: 700 .9rem/1 var(--font-mono); margin-bottom: 14px; }
.steps h3 { font-size: 1.08rem; margin-bottom: 6px; }
.steps p { color: var(--muted); margin: 0; font-size: .95rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

/* ---- legal pages ---- */
.doc { max-width: 800px; margin: 0 auto; }
.doc h2 { font-size: 1.4rem; margin: 2.2em 0 .6em; }
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { font-size: 1.1rem; margin: 1.6em 0 .4em; }
.doc p, .doc li { color: var(--muted); }
.doc ul { padding-left: 1.3em; }
.doc li { margin-bottom: .45em; }
.doc-meta { display: inline-flex; gap: 10px; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: .88rem; color: var(--muted); margin-top: 22px; }
.doc-meta svg { width: 17px; height: 17px; flex: none; color: var(--accent-text); }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px 26px; margin-bottom: 44px; }
.doc .toc h2 { font: 600 .78rem/1 var(--font-text); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: 6px; break-inside: avoid; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent-text); }
@media (max-width: 640px) { .toc ol { columns: 1; } }
.note-box { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px 22px; margin: 22px 0; color: var(--text); }
.note-box p { color: inherit; margin: 0; }
.data-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: .92rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); display: block; overflow-x: auto; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--text); }
.data-table th { background: var(--surface-2); font-size: .82rem; }

/* mascots */

.wave-in { animation: wave-in 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes wave-in { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg) translateY(-3px); } }
@keyframes mascot-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-2deg); } }

/* ---- footer ---- */
.site-footer { position: relative; background: var(--bg-alt); color: var(--muted); padding: clamp(56px, 7vw, 80px) 0 36px; font-size: .94rem; border-top: 1px solid var(--line); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.foot-top { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.foot-brand img { height: 36px; width: auto; margin-bottom: 14px; }
.foot-brand p { max-width: 26em; }
.foot-cta { max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px 24px; }
.foot-cta p { color: var(--text); }
.site-footer .foot-cta .btn, .site-footer .foot-cta .btn:hover { color: var(--on-accent); }
.site-footer .social { display: flex; gap: 6px; margin-top: 8px; }
.site-footer .social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.site-footer .social a:hover { border-color: var(--line-strong); color: var(--text); }
.site-footer .social svg { width: 18px; height: 18px; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.foot-col h2 { font: 600 .78rem/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 16px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.legal { padding-top: 26px; font-size: .82rem; line-height: 1.65; color: var(--faint); }
.legal p { margin: 0 0 10px; max-width: 78em; }
.site-footer .legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .foot-top { flex-direction: column; } .foot-cta { max-width: none; width: 100%; } .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ---- loading screen: the boot splash on glass (dark in both themes, like the real one) ---- */
#splash { display: none; }
html.splash-on #splash { display: block; }
html.splash-on body { overflow: hidden; }
#splash {
  position: fixed; inset: 0; z-index: 9999; cursor: var(--cur-progress);
  background:
    radial-gradient(1200px 700px at 30% 20%, rgba(106, 34, 240, .30), transparent 60%),
    radial-gradient(900px 600px at 80% 80%, rgba(47, 69, 224, .25), transparent 60%),
    rgba(10, 8, 24, .62);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  transition: opacity .55s ease, visibility 0s linear .55s;
}
#splash canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#splash.out { opacity: 0; visibility: hidden; }

/* the page that starts the download (new tab) */
.start-page { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 32px 16px; position: relative; isolation: isolate; overflow: hidden; }
.start-card { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .55); overflow: hidden; }
.start-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.start-head img { flex: none; width: 44px; height: 44px; }
.start-id { display: grid; min-width: 0; text-align: left; }
.start-id strong { font: 600 1rem/1.3 var(--font-display); }
.start-id span { color: var(--muted); font-size: .86rem; }
.start-main { padding: 30px 26px 22px; text-align: center; }
.start-main .ring { width: 132px; height: 132px; margin: 0 auto 22px; }
.start-main .ring .digits { height: 56px; }
.start-main .ring .digits span { font-size: 3rem; line-height: 56px; }
.start-main h1 { font-size: clamp(1.35rem, 4vw, 1.65rem); margin: 0 0 6px; }
.start-main p { color: var(--muted); margin: 0; }
.start-done { display: none; width: 132px; height: 132px; margin: 0 auto 22px; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.start-done svg { width: 52px; height: 52px; }
.start-card .done-only, .start-card .ready-only { display: none; }
.start-party { display: none; width: 132px; height: 132px; margin: 0 auto 22px; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #EC4899 55%, #F59E0B); color: #fff; box-shadow: 0 18px 50px -12px rgba(139, 92, 246, .65); }
.start-party svg { width: 58px; height: 58px; }
.start-card.ready .wait-only, .start-card.ready .ring { display: none; }
.start-card.ready .ready-only { display: block; animation: rise .4s var(--ease); }
.start-card.ready .start-party { display: grid; animation: party-pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.start-card.ready .start-party svg { animation: party-spin 1.6s var(--ease) .2s both; }
@keyframes party-pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes party-spin { from { transform: rotate(-120deg) scale(.6); } to { transform: none; } }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.start-card.started .wait-only, .start-card.started .ring { display: none; }
.start-card.started .done-only { display: block; }
.start-card.started .start-done { display: grid; animation: rise .35s var(--ease); }
.start-steps { list-style: none; margin: 0 26px; padding: 16px 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px;
  border-top: 1px solid var(--line); counter-reset: none; }
.start-steps li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); min-width: 0; }
.start-steps svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: transparent; box-sizing: border-box; }
.start-steps li.active svg { border-color: var(--accent); border-right-color: transparent; animation: step-spin .8s linear infinite; }
.start-steps li.done { color: var(--text); }
.start-steps li.done svg { background: var(--ok); border-color: var(--ok); color: #fff; animation: none; }
@keyframes step-spin { to { transform: rotate(360deg); } }
.start-next { padding: 18px 22px 22px; background: var(--tint); border-top: 1px solid var(--line); display: grid; gap: 8px; text-align: left; }
.start-next h2 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; font-family: var(--font-text); font-weight: 600; }
.start-next a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.start-next a:hover { border-color: var(--accent); transform: translateY(-1px); }
.start-next .ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tint); color: var(--accent-text); }
.start-next .ico svg { width: 18px; height: 18px; }
.start-next a > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.start-next strong { font-weight: 600; font-size: .95rem; }
.start-next small { color: var(--muted); font-size: .84rem; }
.start-next a > svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
.start-card .fail-view { padding: 30px 26px; text-align: center; }
.start-foot { display: flex; gap: 10px; justify-content: center; margin: 0; font-size: .9rem; color: var(--muted); }
.start-foot a { color: var(--muted); }
.start-foot a:hover { color: var(--text); }
@media (max-width: 520px) {
  .start-steps { margin: 0 22px; gap: 10px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave-in, .help-mascot, .pk-mascot { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ring .digits span.enter, .ring .digits span.leave { animation-duration: .01s; }
  #splash { transition: none; }
}

/* a download link that does not work */
.fail-view { display: none; }
.check.failed .ask-view, .check.failed .moved-view { display: none; }
.check.failed .fail-view { display: block; animation: rise .35s var(--ease); }
.start-card.failed .ok-view { display: none; }
.start-card.failed .fail-view { display: block; animation: rise .35s var(--ease); }
.check-badge.bad { background: rgba(248, 113, 113, .14); color: var(--bad); }
.start-card .fail-view .check-badge { margin-top: 4px; }
.start-card .fail-view h2 { font-size: clamp(1.4rem, 3.6vw, 1.8rem); }
.fail-code { color: var(--faint); white-space: nowrap; }
.fail-more { margin: 16px 0 0; font-size: .92rem; }
.check-box .fail-view p { margin-bottom: 20px; }

/* press kit */
.marks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.marks .mark { grid-column: span 2; }
.marks .mark.wide { grid-column: span 3; }
.mark.wide .mark-art { aspect-ratio: 16 / 7; }
.mark.wide .mark-art img { max-width: 62%; }
.mark { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.mark-art { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 28px; border-bottom: 1px solid var(--line); }
.mark-art.light { background: #F4F3F8; }
.mark-art.dark { background: #15131F; }
.mark-art img { max-width: 78%; max-height: 100%; width: auto; height: auto; }
.mark-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.mark-body h3 { margin-bottom: 4px; }
.mark-body p { color: var(--muted); font-size: .92rem; margin: 0 0 14px; }
.mark-dl { display: flex; gap: 8px; margin-top: auto; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.swatch { display: grid; gap: 4px; text-align: left; padding: 10px 10px 14px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: var(--cur-pointer); font: inherit; }
.swatch:hover { border-color: var(--line-strong); }
.swatch .chip { display: block; height: 72px; border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--line); }
.swatch strong { font-size: .95rem; }
.swatch code { background: none; padding: 0; color: var(--muted); font-size: .82rem; }
.swatch.copied code { color: var(--ok); }
.type-sample { font-size: 3.4rem; line-height: 1; margin-bottom: 14px; color: var(--accent-text); }
.guide ul { margin: 6px 0 0; padding-left: 1.2em; color: var(--muted); }
.guide li { margin-bottom: 6px; }
.guide.do .tile { color: var(--ok); }
.guide.dont .tile { color: var(--bad); }
@media (max-width: 980px) { .marks { grid-template-columns: 1fr 1fr; } .marks .mark, .marks .mark.wide { grid-column: auto; } .mark.wide .mark-art { aspect-ratio: 16 / 10; } .swatches { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .marks { grid-template-columns: 1fr; } .marks .mark:last-child { grid-column: auto; } .swatches { grid-template-columns: repeat(2, 1fr); } }
.shot-credit { font-size: .8rem; color: var(--faint); margin: 14px 0 0; line-height: 1.5; }
figcaption.shot-credit { margin-top: 8px; }

/* logo usage */
.use-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 8px 0 16px; }
.use-title svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; box-sizing: content-box; }
.use-title.ok svg { color: var(--ok); background: rgba(52, 211, 153, .14); }
.use-title.bad { margin-top: 44px; }
.use-title.bad svg { color: var(--bad); background: rgba(248, 113, 113, .14); }
.use-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.use-grid.dont { grid-template-columns: repeat(3, 1fr); }
.use-grid.dont .use-art { aspect-ratio: 16 / 9; }
@media (max-width: 980px) { .use-grid, .use-grid.dont { grid-template-columns: repeat(2, 1fr); } .use-grid.dont .use-art { aspect-ratio: 4 / 3; } }
@media (max-width: 560px) {
  .use-grid, .use-grid.dont { gap: 10px; }
  .use-art { padding: 14px; }
  .use figcaption { padding: 10px 10px 12px; font-size: .8rem; gap: 7px; }
  .use-badge { width: 18px; height: 18px; } .use-badge svg { width: 11px; height: 11px; }
  .mini-mark { font-size: 1.05rem; gap: 6px; } .mini-mark img { width: 28px; height: 28px; }
}
.use { margin: 0; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.use.ok { box-shadow: inset 0 -3px 0 var(--ok); }
.use.bad { box-shadow: inset 0 -3px 0 var(--bad); }
.use-art { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 22px; position: relative; overflow: hidden; }
.use-art.light { background: #F4F3F8; }
.use-art.dark { background: #15131F; }
.use-art.violet { background: linear-gradient(135deg, #6A2DEB, #4A2AD8 60%, #B05AEA); }
.use-art.mix { background: #F4F3F8; }
.use-art img { width: auto; height: auto; max-width: 70%; max-height: 62%; }
.use-art img[src*="logotype"] { max-width: 82%; }
.use figcaption { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 16px; font-size: .92rem; font-weight: 500; color: var(--text); line-height: 1.4; }
.use-badge { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-top: -1px; }
.use-badge svg { width: 14px; height: 14px; }
.use.ok .use-badge { color: #fff; background: var(--ok); }
.use.bad .use-badge { color: #fff; background: var(--bad); }
.clear-box { display: grid; place-items: center; padding: 9%; outline: 1.5px dashed rgba(106, 45, 235, .55); outline-offset: -1px; border-radius: 6px; height: 74%; aspect-ratio: 1; background: repeating-linear-gradient(45deg, rgba(106, 45, 235, .06) 0 6px, transparent 6px 12px); }
.clear-box img { max-width: 100%; max-height: 100%; }
.u-stretch { transform: scaleX(1.55) scaleY(.8); }
.u-recolour { filter: hue-rotate(150deg) saturate(1.6); }
.u-rotate { transform: rotate(-18deg); }
.u-effects { filter: drop-shadow(6px 8px 0 #F59E0B) drop-shadow(0 0 14px rgba(0, 0, 0, .7)); }
.u-contrast { opacity: .9; }
.use-art.dark .u-contrast { filter: brightness(.35); }
.mini-mark { display: inline-flex; align-items: center; gap: 8px; font: 700 1.5rem/1 var(--font-display); color: #1F1B2E; letter-spacing: -.02em; }
.mini-mark img { width: 40px; height: 40px; max-width: none; max-height: none; }
.name-rule { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; margin-top: 44px; padding: 26px 28px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); }
.name-rule h3 { margin-bottom: 6px; }
.name-rule p { margin: 0; color: var(--muted); }
.name-sample { font: 700 clamp(1.6rem, 4vw, 2.4rem)/1.1 var(--font-display); letter-spacing: -.02em; text-align: center; padding: 22px; border-radius: 12px; background: var(--tint); color: var(--accent-text); }
@media (max-width: 760px) { .name-rule { grid-template-columns: 1fr; padding: 22px; } }

/* phones: tables become cards, long commands wrap, cards with an icon get compact */
@media (max-width: 640px) {
  .table-scroll { overflow: visible; border: 0; background: none; }
  table.req, table.req.pk-table { min-width: 0; display: block; }
  .req thead { display: none; }
  .req tbody { display: grid; gap: 10px; }
  .req tr { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; }
  .req th, .req td { display: block; border: 0; padding: 6px 0; white-space: normal !important; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
  .req td * { white-space: normal !important; overflow-wrap: anywhere; }
  .req tr { max-width: 100%; min-width: 0; }
  .req tbody th { font-size: 1rem; padding-top: 10px; }
  .req td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .card:has(> .tile) { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; align-items: start; }
  .card:has(> .tile) > * { grid-column: 2; }
  .card:has(> .tile) > .tile { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
}
.mascot { height: auto; }

/* ---- home: bento ---- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: 16px; }
.bento-tile {
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 26px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none;
  transition: border-color .25s ease, transform .25s var(--ease);
}
.bento-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), var(--tint-strong), transparent 60%); opacity: 0; transition: opacity .3s; }
.bento-tile:hover { border-color: var(--line-strong); color: var(--text); }
.bento-tile:hover::before { opacity: 1; }
a.bento-tile:hover { transform: translateY(-3px); }
.bento-tile h3 { font-size: 1.2rem; margin: 6px 0 2px; }
.bento-tile p { color: var(--muted); margin: 0; font-size: .96rem; }
.bt-icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--tint-strong); color: var(--accent-text); box-sizing: border-box; }
.b-big { grid-column: span 2; grid-row: span 2; }
.b-wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 22px; }
.b-wide .bt-text { flex: 1 1 50%; min-width: 0; }
.bt-shot { margin: 22px -26px -26px 22px; border-top-left-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); border-right: 0; border-bottom: 0; box-shadow: var(--shadow-l); flex: 1; min-height: 0; }
.bt-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.bt-shot.side { flex: 1 1 50%; margin: -26px -26px -26px 0; border-radius: 14px 0 0 14px; border: 1px solid var(--line-strong); border-right: 0; align-self: stretch; }
.bento-tile.stat { justify-content: flex-end; background: linear-gradient(150deg, #6A2DEB, #4A2AD8 55%, #2A1A7A); border: 0; color: #fff; }
.bento-tile.stat strong { font: 700 clamp(2.2rem, 4vw, 3rem)/1 var(--font-display); letter-spacing: -.03em; }
.bento-tile.stat p { color: rgba(255, 255, 255, .82); }
.snap { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 14px 1fr 14px 1fr 14px; align-items: center; row-gap: 6px; }
.snap .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(52, 211, 153, .15); }
.snap .dot.up { background: var(--accent); box-shadow: 0 0 0 4px var(--tint-strong); }
.snap i { height: 2px; background: linear-gradient(90deg, var(--ok), var(--accent)); margin: 0 6px; }
.snap i + .dot + i { background: linear-gradient(90deg, var(--accent), var(--ok)); }
.snap small { grid-row: 2; font-size: .75rem; color: var(--faint); white-space: nowrap; }
.snap small:nth-of-type(1) { grid-column: 1 / span 2; }
.snap small:nth-of-type(2) { grid-column: 2 / span 3; text-align: center; }
.snap small:nth-of-type(3) { grid-column: 4 / span 2; text-align: right; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .b-big, .b-wide { grid-column: span 2; } .b-big { grid-row: auto; } }
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .b-big, .b-wide { grid-column: auto; }
  .b-wide { flex-direction: column; align-items: stretch; }
  .bt-shot, .bt-shot.side { margin: 18px -22px -22px 0; border-radius: 12px 0 0 0; max-height: 200px; border-bottom: 0; }
  .bento-tile { padding: 22px; }
  .bento-tile.stat { min-height: 180px; }
}

/* ---- home: light or dark ---- */
.look-switch { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); margin: 4px 0 6px; }
.look-switch button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 .9rem var(--font-text); cursor: var(--cur-pointer); transition: background-color .2s, color .2s; }
.look-switch button svg { width: 16px; height: 16px; }
.look-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.look-shots .shot { display: grid; }
.look-shots .shot img { grid-area: 1 / 1; transition: opacity .6s ease, transform .6s var(--ease); }
.look-shots .look-light { opacity: 0; transform: scale(1.02); }
.look-shots.light .look-light { opacity: 1; transform: none; }
.look-shots.light .look-dark { opacity: 0; transform: scale(1.02); }

/* ---- home: apps ---- */
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.app { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-width: 0; transition: border-color .2s, transform .2s var(--ease); }
.app:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.app .mono { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; font: 700 1.15rem var(--font-display);
  background: linear-gradient(135deg, hsl(var(--h) 75% 58%), hsl(calc(var(--h) + 40) 70% 45%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.app strong { display: block; font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app span span { display: block; color: var(--muted); font-size: .84rem; }
.app > span:last-child { min-width: 0; }
@media (max-width: 980px) { .apps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 340px) { .apps { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .app { padding: 12px; gap: 10px; } .app .mono { width: 36px; height: 36px; font-size: 1rem; } .app strong { font-size: .88rem; } .app span span { font-size: .78rem; } }

/* ---- home: from download to desktop ---- */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: j; position: relative; }
.journey::before { content: ""; position: absolute; left: 12%; right: 12%; top: 34px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent), transparent); opacity: .5; }
.journey li { counter-increment: j; position: relative; text-align: center; padding: 0 8px; }
.journey li > svg { width: 68px; height: 68px; padding: 20px; border-radius: 50%; margin: 0 auto 16px; display: block; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--accent-text); box-shadow: 0 0 0 8px var(--bg), var(--shadow); position: relative; }
.journey li::after { content: counter(j); position: absolute; top: -4px; left: calc(50% + 18px); width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 .78rem/24px var(--font-text); }
.journey h3 { font-size: 1.08rem; margin-bottom: 4px; }
.journey p { color: var(--muted); font-size: .94rem; margin: 0; }
@media (max-width: 860px) {
  .journey { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .journey::before { display: none; }
}
@media (max-width: 480px) {
  .journey { grid-template-columns: 1fr; }
  .journey li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; text-align: left; align-items: start; padding: 0; }
  .journey li > svg { width: 56px; height: 56px; padding: 15px; margin: 0; grid-row: span 2; box-shadow: var(--shadow); }
  .journey li::after { left: 38px; }
}

/* ---- home: questions ---- */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.faq-wrap .section-head { margin: 0; position: sticky; top: calc(var(--head-h) + 24px); }
.faq { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; transition: border-color .2s; }
.faq-item[open] { border-color: var(--line-strong); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; cursor: var(--cur-pointer); font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .25s var(--ease); }
.faq-item[open] summary svg { transform: rotate(90deg); color: var(--accent-text); }
.faq-item p { margin: 0; padding: 0 20px 18px; color: var(--muted); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } .faq-wrap .section-head { position: static; } }

/* the last call: a glowing border */
.cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--spin, 0deg), transparent 0 60%, var(--accent) 75%, #60A5FA 85%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .cta::after { animation: none; } .look-shots .shot img { transition: none; } }

/* the cookie notice */
.cookie-note {
  position: fixed; left: 16px; bottom: 16px; z-index: 250; width: min(440px, calc(100% - 32px));
  display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start; padding: 16px 18px;
  background: var(--raised); color: var(--text); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-l);
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s ease, transform .4s var(--ease);
}
.cookie-note.show { opacity: 1; transform: none; pointer-events: auto; }
.cookie-note > svg { width: 26px; height: 26px; color: var(--accent-text); margin-top: 2px; }
.cookie-note p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.cookie-note a { white-space: nowrap; }
.cookie-note .btn { grid-column: 2; justify-self: start; }
@media (max-width: 520px) { .cookie-note { left: 12px; right: 12px; bottom: 12px; width: auto; } .cookie-note .btn { grid-column: 1 / -1; justify-self: stretch; } }
@media (prefers-reduced-motion: reduce) { .cookie-note { transition: none; } }
.app .ico { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: #1C1A27; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.app .ico img { width: 36px; height: 36px; object-fit: contain; }
@media (max-width: 480px) { .app .ico { width: 40px; height: 40px; } .app .ico img { width: 30px; height: 30px; } }
.shot-credit.center { text-align: center; max-width: 52em; margin: 22px auto 0; }
@media (max-width: 480px) { .app strong { white-space: normal; overflow: visible; line-height: 1.25; } }