/* ui-legacy.css */
/* Generated by scripts/ui-legacy.py: the older stylesheets' colours on new-look pages
   (body.ui), by role. Older pages keep the fallbacks. Do not edit by hand. */
html:has(>body.ui),body.ui{--kb-00000010:color-mix(in srgb,var(--ui-text) 6%,transparent);--kb-00000021:color-mix(in srgb,var(--ui-text) 13%,transparent);--kb-00000055:color-mix(in srgb,var(--ui-text) 33%,transparent);--kb-000000b8:color-mix(in srgb,var(--ui-text) 72%,transparent);--kb-0002:color-mix(in srgb,var(--ui-text) 13%,transparent);--kb-000:var(--ui-bg);--kb-020203:var(--ui-bg);--kb-050506:var(--ui-bg);--kb-050507d9:color-mix(in srgb,var(--ui-text) 85%,transparent);--kb-070708:var(--ui-bg);--kb-08070a:var(--ui-bg);--kb-09070bc9:color-mix(in srgb,var(--ui-text) 79%,transparent);--kb-09080b:var(--ui-bg);--kb-09090b:var(--ui-bg);--kb-0a0a0c:var(--ui-bg);--kb-0b0a0d:var(--ui-well);--kb-0b0a0e:var(--ui-well);--kb-0c0913e0:color-mix(in srgb,var(--ui-text) 88%,transparent);--kb-0c0a0e:var(--ui-well);--kb-0c0b0e:var(--ui-well);--kb-0c0c0e:var(--ui-well);--kb-0d0c0f:var(--ui-well);--kb-0d0c10:var(--ui-well);--kb-0d0d10:var(--ui-well);--kb-0e0c10:var(--ui-well);--kb-0e0d10:var(--ui-well);--kb-0f0c13:var(--ui-accent-soft);--kb-0f0e12:var(--ui-card);--kb-0f0f12:var(--ui-card);--kb-100d14:var(--ui-card);--kb-100e12:var(--ui-card);--kb-101012:var(--ui-card);--kb-101014:var(--ui-card);--kb-110e14:var(--ui-card);--kb-110e16:var(--ui-accent-soft);--kb-111013:var(--ui-card);--kb-111014:var(--ui-card);--kb-11101514:color-mix(in srgb,var(--ui-text) 8%,transparent);--kb-111015:var(--ui-card);--kb-111114:var(--ui-card);--kb-111114e6:color-mix(in srgb,var(--ui-text) 90%,transparent);--kb-121015:var(--ui-card);--kb-121115:var(--ui-card);--kb-131016:var(--ui-card);--kb-131216:var(--ui-card);--kb-131317:var(--ui-card);--kb-132418:var(--ui-well2);--kb-141017:var(--ui-card);--kb-141116:var(--ui-card);--kb-141217f2:color-mix(in srgb,var(--ui-text) 95%,transparent);--kb-141318:var(--ui-card);--kb-141417:var(--ui-card);--kb-151019e8:color-mix(in srgb,var(--ui-text) 91%,transparent);--kb-151218:var(--ui-card);--kb-151318:var(--ui-card);--kb-151412:var(--ui-card);--kb-151518:var(--ui-card);--kb-16101f:var(--ui-accent-soft);--kb-16111c:var(--ui-accent-soft);--kb-161319:var(--ui-card);--kb-161419:var(--ui-card);--kb-16161a:var(--ui-card);--kb-16211a:var(--ui-well2);--kb-17101fe0:color-mix(in srgb,var(--ui-text) 88%,transparent);--kb-17121d:var(--ui-accent-soft);--kb-17131c:var(--ui-card);--kb-17141c:var(--ui-card);--kb-17141ce8:color-mix(in srgb,var(--ui-text) 91%,transparent);--kb-17151c:var(--ui-card);--kb-17171b:var(--ui-card);--kb-17241d:var(--ui-well2);--kb-18121f:var(--ui-accent-soft);--kb-18131d:var(--ui-card);--kb-18131e:var(--ui-accent-soft);--kb-19131f:var(--ui-accent-soft);--kb-19131ff7:color-mix(in srgb,var(--ui-text) 97%,transparent);--kb-19161c:var(--ui-card);--kb-1a1321:var(--ui-accent-soft);--kb-1a1422:var(--ui-accent-soft);--kb-1b1421:var(--ui-accent-soft);--kb-1b1624:var(--ui-accent-soft);--kb-1b1820:var(--ui-well2);--kb-1b1b1f:var(--ui-well2);--kb-1c1821:var(--ui-well2);--kb-1c1c21:var(--ui-well2);--kb-1d1923:var(--ui-well2);--kb-1d1924:var(--ui-well2);--kb-1d1b21:var(--ui-well2);--kb-1d1d23:var(--ui-well2);--kb-1f1626:var(--ui-accent-soft);--kb-201627:var(--ui-accent-soft);--kb-201827:var(--ui-accent-soft);--kb-201b25:var(--ui-well2);--kb-211829:var(--ui-accent-soft);--kb-211929:var(--ui-accent-soft);--kb-211a29:var(--ui-accent-soft);--kb-211c26:var(--ui-well2);--kb-211e26:var(--ui-well2);--kb-212126:var(--ui-well2);--kb-221e29:var(--ui-well2);--kb-232328:var(--ui-well2);--kb-24192e:var(--ui-accent-soft);--kb-24192f55:color-mix(in srgb,var(--ui-accent) 33%,transparent);--kb-241a31:var(--ui-accent-soft);--kb-241c2c:var(--ui-accent-soft);--kb-24202b:var(--ui-well2);--kb-251b30:var(--ui-accent-soft);--kb-251c2e:var(--ui-accent-soft);--kb-281b31:var(--ui-accent-soft);--kb-281c3655:color-mix(in srgb,var(--ui-accent) 33%,transparent);--kb-28282e:var(--ui-well2);--kb-292032:var(--ui-well2);--kb-29232f:var(--ui-well2);--kb-2a1416:var(--ui-well2);--kb-2b1e36:var(--ui-accent-soft);--kb-2b2035:var(--ui-accent-soft);--kb-2b2135:var(--ui-accent-soft);--kb-2c2138:var(--ui-accent-soft);--kb-2c2537:var(--ui-well2);--kb-2e2e34:var(--ui-well2);--kb-32243e:var(--ui-accent-soft);--kb-32253e:var(--ui-accent-soft);--kb-33213e44:color-mix(in srgb,var(--ui-accent) 27%,transparent);--kb-33263f:var(--ui-accent-soft);--kb-34243f:var(--ui-accent-soft);--kb-342d3a:var(--ui-well2);--kb-352640:var(--ui-accent-soft);--kb-35283f:var(--ui-accent-soft);--kb-37303f:var(--ui-well2);--kb-392c48:var(--ui-accent-soft);--kb-3a3640:var(--ui-well2);--kb-3b2648:var(--ui-accent-soft);--kb-414149:var(--ui-well2);--kb-422e55:var(--ui-accent-soft);--kb-46424e:var(--ui-well2);--kb-4a4552:var(--ui-well2);--kb-7f68aa:var(--ui-accent);--kb-9570b3:var(--ui-accent);--kb-a47dcc:var(--ui-accent);--kb-aa80ce55:color-mix(in srgb,var(--ui-accent) 33%,transparent);--kb-aa80ce:var(--ui-accent);--kb-ac80c9:var(--ui-accent);--kb-b58df40d:color-mix(in srgb,var(--ui-accent) 5%,transparent);--kb-b58df414:color-mix(in srgb,var(--ui-accent) 8%,transparent);--kb-b58df41f:color-mix(in srgb,var(--ui-accent) 12%,transparent);--kb-b888e418:color-mix(in srgb,var(--ui-accent) 9%,transparent);--kb-ba91e0:var(--ui-accent);--kb-bfa0de:var(--ui-accent);--kb-c4a5ed0c:color-mix(in srgb,var(--ui-accent) 5%,transparent);--kb-c4a5ed33:color-mix(in srgb,var(--ui-accent) 20%,transparent);--kb-c4a5ed3d:color-mix(in srgb,var(--ui-accent) 24%,transparent);--kb-c4a5ed:var(--ui-accent);--kb-c7a0e9:var(--ui-accent);--kb-c7a4ef:var(--ui-accent);--kb-cfb4f2:var(--ui-accent);--kb-d0acf0:var(--ui-accent);--kb-d6b5f0:var(--ui-accent);--kb-dfc7f6:var(--ui-accent);--kb-dfcaef:var(--ui-accent);--kb-e5c5ff:var(--ui-accent);--kb-ede3f6:var(--ui-accent);--kb-f4f0f8:var(--ui-accent);--kb-f5f0f8:var(--ui-accent);--kb-f8f5ffdf:color-mix(in srgb,var(--ui-accent) 87%,transparent);--kb-ffffff03:color-mix(in srgb,var(--ui-text) 1%,transparent);--kb-ffffff05:color-mix(in srgb,var(--ui-text) 2%,transparent);--kb-ffffff06:color-mix(in srgb,var(--ui-text) 2%,transparent);--kb-ffffff07:color-mix(in srgb,var(--ui-text) 3%,transparent);--kb-ffffff08:color-mix(in srgb,var(--ui-text) 3%,transparent);--kb-ffffff09:color-mix(in srgb,var(--ui-text) 4%,transparent);--kb-ffffff0a:color-mix(in srgb,var(--ui-text) 4%,transparent);--kb-ffffff0c:color-mix(in srgb,var(--ui-text) 5%,transparent);--kb-ffffff0d:color-mix(in srgb,var(--ui-text) 5%,transparent);--kb-ffffff0e:color-mix(in srgb,var(--ui-text) 5%,transparent);--kb-ffffff10:color-mix(in srgb,var(--ui-text) 6%,transparent);--kb-ffffff12:color-mix(in srgb,var(--ui-text) 7%,transparent);--kb-ffffff14:color-mix(in srgb,var(--ui-text) 8%,transparent);--kb-ffffff1f:color-mix(in srgb,var(--ui-text) 12%,transparent);--kb-ffffff20:color-mix(in srgb,var(--ui-text) 13%,transparent);--kb-ffffff40:color-mix(in srgb,var(--ui-text) 25%,transparent);--kg-0d0d10:var(--ui-card);--kg-111114:var(--ui-card);--kg-150c20:var(--ui-card);--kg-b58df4:var(--ui-link);--kg-c4a5ed:var(--ui-link);--kg-dbb3ff:var(--ui-link);--kg-e6d5ff:var(--ui-link);--kg-ebe8f0:color-mix(in srgb,var(--ui-text) 78%,transparent);--kg-f5f4f7:color-mix(in srgb,var(--ui-text) 78%,transparent);--kg-ffffff12:color-mix(in srgb,var(--ui-text) 7%,transparent);--kg-ffffff1a:color-mix(in srgb,var(--ui-text) 10%,transparent);--kg-ffffff1f:color-mix(in srgb,var(--ui-text) 12%,transparent);--kg-ffffff26:color-mix(in srgb,var(--ui-text) 15%,transparent);--kg-ffffff2e:color-mix(in srgb,var(--ui-text) 18%,transparent);--kg-ffffff40:color-mix(in srgb,var(--ui-text) 25%,transparent);--kg-ffffff47:color-mix(in srgb,var(--ui-text) 28%,transparent);--kg-ffffff61:color-mix(in srgb,var(--ui-text) 38%,transparent);--kg-ffffff7a:color-mix(in srgb,var(--ui-text) 48%,transparent);--kl-0000002e:color-mix(in srgb,var(--ui-text) 18%,transparent);--kl-0b0a0d33:color-mix(in srgb,var(--ui-text) 20%,transparent);--kl-0b0a0d:var(--ui-line);--kl-1110:color-mix(in srgb,var(--ui-text) 0%,transparent);--kl-111:var(--ui-line);--kl-14121740:color-mix(in srgb,var(--ui-text) 25%,transparent);--kl-141217:var(--ui-line);--kl-222226:var(--ui-line);--kl-26262c:var(--ui-line);--kl-29272e:var(--ui-line-strong);--kl-2a2a30:var(--ui-line-strong);--kl-2b2531:var(--ui-line-strong);--kl-2c4a33:color-mix(in srgb,var(--ui-green) 40%,transparent);--kl-2c5236:color-mix(in srgb,var(--ui-green) 40%,transparent);--kl-2e2e34:var(--ui-line-strong);--kl-302737:var(--ui-line-strong);--kl-312638:var(--ui-line-strong);--kl-312737:var(--ui-line-strong);--kl-322b39:var(--ui-line-strong);--kl-342b3b:var(--ui-line-strong);--kl-38343f:var(--ui-line-strong);--kl-38383f:var(--ui-line-strong);--kl-3a3046:var(--ui-line-strong);--kl-3a3a42:var(--ui-line-strong);--kl-3b2c44:var(--ui-line-strong);--kl-3b2e4c:var(--ui-btn2-line);--kl-3b3150:var(--ui-btn2-line);--kl-403547:var(--ui-line-strong);--kl-414149:var(--ui-line-strong);--kl-42634d:var(--ui-line-strong);--kl-45394d:var(--ui-line-strong);--kl-483451:var(--ui-line-strong);--kl-4a3b56:var(--ui-line-strong);--kl-4a3e22:color-mix(in srgb,var(--ui-amber) 40%,transparent);--kl-4a3f22:color-mix(in srgb,var(--ui-amber) 40%,transparent);--kl-4a4a53:var(--ui-line-strong);--kl-4b3c55:var(--ui-line-strong);--kl-4b3e5e:var(--ui-line-strong);--kl-51425c:var(--ui-line-strong);--kl-51425e:var(--ui-line-strong);--kl-514458:var(--ui-line-strong);--kl-51445e:var(--ui-line-strong);--kl-514958:var(--ui-line-strong);--kl-52425f:var(--ui-line-strong);--kl-52475f:var(--ui-line-strong);--kl-543e65:var(--ui-btn2-line);--kl-55292c:color-mix(in srgb,var(--ui-red) 40%,transparent);--kl-574065:var(--ui-btn2-line);--kl-574267:var(--ui-line-strong);--kl-584361:var(--ui-line-strong);--kl-594266:var(--ui-line-strong);--kl-5a2a2a:color-mix(in srgb,var(--ui-red) 40%,transparent);--kl-5a2a30:color-mix(in srgb,var(--ui-red) 40%,transparent);--kl-5a5a64:var(--ui-line-strong);--kl-5c2c30:color-mix(in srgb,var(--ui-red) 40%,transparent);--kl-5d4a77:var(--ui-btn2-line);--kl-5d4c6a:var(--ui-line-strong);--kl-634575:var(--ui-btn2-line);--kl-65516f:var(--ui-line-strong);--kl-675174:var(--ui-line-strong);--kl-684672:var(--ui-btn2-line);--kl-695474:var(--ui-line-strong);--kl-6a547c:var(--ui-line-strong);--kl-6b5a86:var(--ui-line-strong);--kl-705780:var(--ui-line-strong);--kl-70607e:var(--ui-line-strong);--kl-8c689f:var(--ui-accent);--kl-8c6ba5:var(--ui-accent);--kl-9045e8:var(--ui-accent);--kl-9472b9:var(--ui-accent);--kl-9664b7:var(--ui-accent);--kl-9870b5:var(--ui-accent);--kl-9b74b5:var(--ui-accent);--kl-9f79c1:var(--ui-accent);--kl-a77fc076:color-mix(in srgb,var(--ui-accent) 46%,transparent);--kl-aa83c9:var(--ui-accent);--kl-aa85cd:var(--ui-accent);--kl-ad87cf40:color-mix(in srgb,var(--ui-accent) 25%,transparent);--kl-b486d9:var(--ui-accent);--kl-b48ada:var(--ui-accent);--kl-b48bdd:var(--ui-accent);--kl-b587df99:color-mix(in srgb,var(--ui-accent) 60%,transparent);--kl-b58df4:var(--ui-accent);--kl-b68bde55:color-mix(in srgb,var(--ui-accent) 33%,transparent);--kl-b794cb:var(--ui-accent);--kl-b887d7:var(--ui-accent);--kl-b991d25c:color-mix(in srgb,var(--ui-accent) 36%,transparent);--kl-bda1e0:var(--ui-accent);--kl-c2a0dc:var(--ui-accent);--kl-c4a5ed:var(--ui-accent);--kl-c59be9:var(--ui-accent);--kl-c799ff80:color-mix(in srgb,var(--ui-accent) 50%,transparent);--kl-c799ff:var(--ui-accent);--kl-c8a4eb:var(--ui-accent);--kl-d4b7f5:var(--ui-accent);--kl-d5a8fb:var(--ui-accent);--kl-dcc0ff:var(--ui-accent);--kl-dcc5f9:var(--ui-accent);--kl-dcc8f7:var(--ui-accent);--kl-dfcaef:var(--ui-accent);--kl-e6d6fa:var(--ui-accent);--kl-f4f0f8:var(--ui-accent);--kl-ffffff14:color-mix(in srgb,var(--ui-text) 8%,transparent);--kl-ffffff15:color-mix(in srgb,var(--ui-text) 8%,transparent);--kl-ffffff17:color-mix(in srgb,var(--ui-text) 9%,transparent);--kl-ffffff18:color-mix(in srgb,var(--ui-text) 9%,transparent);--kl-ffffff1f:color-mix(in srgb,var(--ui-text) 12%,transparent);--kl-ffffff20:color-mix(in srgb,var(--ui-text) 13%,transparent);--kl-ffffff22:color-mix(in srgb,var(--ui-text) 13%,transparent);--kl-ffffff24:color-mix(in srgb,var(--ui-text) 14%,transparent);--kl-ffffff25:color-mix(in srgb,var(--ui-text) 15%,transparent);--kl-ffffff26:color-mix(in srgb,var(--ui-text) 15%,transparent);--kl-ffffff27:color-mix(in srgb,var(--ui-text) 15%,transparent);--kl-ffffff2b:color-mix(in srgb,var(--ui-text) 17%,transparent);--kl-ffffff2e:color-mix(in srgb,var(--ui-text) 18%,transparent);--kl-ffffff30:color-mix(in srgb,var(--ui-text) 19%,transparent);--kl-ffffff3c:color-mix(in srgb,var(--ui-text) 24%,transparent);--kl-ffffff3d:color-mix(in srgb,var(--ui-text) 24%,transparent);--kl-ffffff40:color-mix(in srgb,var(--ui-text) 25%,transparent);--kl-ffffff50:color-mix(in srgb,var(--ui-text) 31%,transparent);--kl-ffffff70:color-mix(in srgb,var(--ui-text) 44%,transparent);--kl-ffffff8a:color-mix(in srgb,var(--ui-text) 54%,transparent);--ks-00000059:rgba(0,0,0,0.14);--ks-0002:rgba(0,0,0,0.13);--ks-0003:rgba(0,0,0,0.14);--ks-0004:rgba(0,0,0,0.14);--ks-0005:rgba(0,0,0,0.14);--ks-0006:rgba(0,0,0,0.14);--ks-0007:rgba(0,0,0,0.14);--ks-0008:rgba(0,0,0,0.14);--ks-0009:rgba(0,0,0,0.14);--ks-000:transparent;--ks-000c:rgba(0,0,0,0.14);--ks-100b2020:rgba(0,0,0,0.13);--ks-a96bda10:color-mix(in srgb,var(--ui-accent) 6%,transparent);--ks-b288d309:color-mix(in srgb,var(--ui-accent) 4%,transparent);--ks-b38ae86e:color-mix(in srgb,var(--ui-accent) 43%,transparent);--ks-b785ed20:color-mix(in srgb,var(--ui-accent) 13%,transparent);--ks-b879e310:color-mix(in srgb,var(--ui-accent) 6%,transparent);--ks-b879e32e:color-mix(in srgb,var(--ui-accent) 18%,transparent);--ks-c4a5ed12:color-mix(in srgb,var(--ui-accent) 7%,transparent);--ks-c4a5ed1f:color-mix(in srgb,var(--ui-accent) 12%,transparent);--ks-fff0:color-mix(in srgb,var(--ui-text) 0%,transparent);--ks-ffffff08:color-mix(in srgb,var(--ui-text) 3%,transparent);--ks-ffffff0a:color-mix(in srgb,var(--ui-text) 4%,transparent);--ks-ffffff0b:color-mix(in srgb,var(--ui-text) 4%,transparent);--ks-ffffff0d:color-mix(in srgb,var(--ui-text) 5%,transparent);--ks-ffffff0e:color-mix(in srgb,var(--ui-text) 5%,transparent);--ks-ffffff10:color-mix(in srgb,var(--ui-text) 6%,transparent);--ks-ffffff12:color-mix(in srgb,var(--ui-text) 7%,transparent);--ks-ffffff14:color-mix(in srgb,var(--ui-text) 8%,transparent);--ks-ffffff17:color-mix(in srgb,var(--ui-text) 9%,transparent);--ks-ffffff1c:color-mix(in srgb,var(--ui-text) 11%,transparent);--ks-ffffff26:color-mix(in srgb,var(--ui-text) 15%,transparent);--ks-ffffff2e:color-mix(in srgb,var(--ui-text) 18%,transparent);--ks-ffffff59:color-mix(in srgb,var(--ui-text) 35%,transparent);--ks-ffffffcc:color-mix(in srgb,var(--ui-text) 80%,transparent);--kt-215238:color-mix(in srgb,var(--ui-green) 40%,transparent);--kt-392645:var(--ui-link);--kt-5f5b68:var(--ui-faint);--kt-6d6a75:var(--ui-faint);--kt-6f6a79:var(--ui-faint);--kt-8d8a96:var(--ui-faint);--kt-8d8d97:var(--ui-faint);--kt-93839f:var(--ui-faint);--kt-9fd3a8:var(--ui-green);--kt-a18aad:var(--ui-dim);--kt-a1a1aa:var(--ui-dim);--kt-a4a1ab:var(--ui-dim);--kt-a7e3b4:var(--ui-green);--kt-ae97bd:var(--ui-link);--kt-b4b4bc:var(--ui-dim);--kt-b58df4:var(--ui-link);--kt-b7a1ca:var(--ui-link);--kt-ba91d9:var(--ui-link);--kt-baa2c9:var(--ui-link);--kt-bea1d7:var(--ui-link);--kt-c2a0dd:var(--ui-link);--kt-c4a5ed:var(--ui-link);--kt-c8a4eb:var(--ui-link);--kt-c9afd9:var(--ui-link);--kt-cbbbe3:var(--ui-link);--kt-d1b1e7:var(--ui-link);--kt-d2b3f4:var(--ui-link);--kt-d8c2f5:var(--ui-link);--kt-d8d5de:var(--ui-text);--kt-d9c3f7:var(--ui-link);--kt-d9c4f5:var(--ui-link);--kt-d9d4e2:var(--ui-text);--kt-dcc6f7:var(--ui-link);--kt-dcd8e3:var(--ui-text);--kt-dcd9e1:var(--ui-text);--kt-dedae4:var(--ui-text);--kt-dfc9f5:var(--ui-link);--kt-e2d7eb:var(--ui-link);--kt-e2dee8:var(--ui-text);--kt-e4dceb:var(--ui-link);--kt-e8def1:var(--ui-link);--kt-f08a8a:var(--ui-red);--kt-f3d58f:var(--ui-amber);--kt-f4f4f6:var(--ui-text);--kt-ffa3a3:var(--ui-red);--kt-ffb0a8:var(--ui-red);--kt-fff:var(--ui-text);--kt-ffffff59:color-mix(in srgb,var(--ui-text) 35%,transparent);--kt-ffffff80:color-mix(in srgb,var(--ui-text) 50%,transparent);--kt-ffffffe0:color-mix(in srgb,var(--ui-text) 88%,transparent);--kx-0003:color-mix(in srgb,var(--ui-text) 20%,transparent)}
/* pages-ui.css */
/* Account, sign-in, contact, legal, install, feedback and 404 pages in the new look
   (2026-10-24). Their own stylesheets follow light and dark through ui-legacy.css; this
   file holds the page-level fixes. Loaded last on every static page. */
body.ui{background:var(--ui-bg);color:var(--ui-text)}
/* The footer spans the page even when the body centres its children (sign-in, 404). */
body.ui>footer.sp-footer{box-sizing:border-box;width:100%;align-self:stretch;justify-self:stretch}
body.ui.sp-not-found{display:block;font-family:var(--ui-font)}
body.ui.sp-not-found main h1{font-weight:500;letter-spacing:-.03em}
body.ui.sp-not-found main a{color:var(--ui-link)}

/* Main actions are the glossy purple pill; second actions the lavender glass. */
body.ui #send-message,body.ui .auth-primary,body.ui .button.send,body.ui #verification-action{box-sizing:border-box;border:.8px solid var(--ui-btn-line);border-radius:999px;background:var(--ui-btn-bg);color:var(--ui-btn-fg);font-family:var(--ui-font);font-weight:500;letter-spacing:-.02em;box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .15s,filter .15s}
body.ui #send-message:hover,body.ui .auth-primary:hover:not(:disabled),body.ui .button.send:hover,body.ui #verification-action:hover{background:var(--ui-btn-bg);border-color:var(--ui-btn-line);color:var(--ui-btn-fg);transform:translateY(-1px);filter:brightness(1.03) saturate(1.05);box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75)}
body.ui .auth-primary:disabled,body.ui #send-message:disabled{opacity:.55;box-shadow:none;transform:none;filter:none}
body.ui .button.reinstall,body.ui .button.support{border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);box-shadow:none}
/* Fields: the card colour with a hairline; a purple edge in dark mode (--ui-field-line). */
body.ui #contact-form input,body.ui #contact-form textarea,body.ui [data-email-auth] input,body.ui #feedback-form textarea,body.ui #feedback-form input{border:.8px solid var(--ui-field-line);border-radius:12px;background:var(--ui-card);color:var(--ui-text)}
body.ui #contact-form input:focus,body.ui #contact-form textarea:focus,body.ui [data-email-auth] input:focus{border-color:var(--ui-accent);box-shadow:0 0 0 4px var(--ui-accent-soft)}
body.ui .breadcrumb,body.ui .breadcrumbs{display:none}

/* The account card (scripts/account-card.html), embedded on the account and install pages:
   it follows the theme of the page around it (public/theme.js). */
html:has(>body.ui.account-card-page){background:var(--ui-card)}
body.ui.account-card-page{--line:var(--ui-line);--line2:var(--ui-line-strong);--dim:var(--ui-dim);--faint:var(--ui-faint);background:var(--ui-card);color:var(--ui-text);font-family:var(--ui-font)}
body.ui.account-card-page button.primary:not(#google),body.ui.account-card-page .auth-primary{box-sizing:border-box;border:.8px solid var(--ui-btn-line);border-radius:999px;background:var(--ui-btn-bg);color:var(--ui-btn-fg);font-weight:500;box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75)}
body.ui.account-card-page button.secondary,body.ui.account-card-page button.quiet{border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);box-shadow:none}
body.ui.account-card-page #google{border-radius:999px}
body.ui.account-card-page #close{color:var(--ui-text);border-radius:999px}

/* Account page (account-dashboard.js): no rails or handles; pills instead of keycaps;
   Add to Chrome is the same purple pill as the homepage and header. */
.ui .ft{border-inline:0}
.ui .ft-sec+.ft-sec::before,.ui .ft-sec+.ft-sec::after,.ui .ft-rule::before,.ui .ft-rule::after{display:none}
body.ui .acct-key{height:36px;padding:0 14px;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);font:500 14px/1 var(--ui-font);letter-spacing:-.02em;box-shadow:none}
body.ui .acct-key:hover{border-color:var(--ui-btn2-line);background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);transform:translateY(-1px);filter:brightness(1.03);box-shadow:none}
body.ui .acct-key:active{transform:none}
body.ui .acct-key-light,body.ui .acct-key-light:hover,body.ui .acct-install,body.ui .acct-install:hover{border-color:var(--ui-btn-line);background:var(--ui-btn-bg);color:var(--ui-btn-fg);box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75)}
body.ui .acct-install .install-free-badge,body.ui .acct-install>svg{display:none}
body.ui .acct-install img{width:18px;height:18px}
/* site-header.css */
/* Shared header, tooltips and design tokens for every website page.
   New look (2026-10-24): Woblo's calm layout in Sitepeel purple, light and dark (public/theme.js).
   --ui-* are the new tokens; --sp-* stay for pages that have not moved to the new look yet
   (they are locked to dark mode with data-theme-lock="dark"). */
@font-face{font-family:Inter;src:url('/fonts/inter-latin.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url('/fonts/inter-latin-ext.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist;src:url('/fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url('/fonts/geist-mono-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* Tokens. Light by default; [data-theme=dark] swaps them. */
:root{
  --ui-font:Inter,Geist,ui-sans-serif,system-ui,sans-serif;
  --ui-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui-bg:#FBFBFB;--ui-bg-alt:#FFFFFF;--ui-nav:#F5F5F5;--ui-card:#FFFFFF;--ui-well:#F5F5F5;--ui-well2:#EDEDEF;
  --ui-line:#E9E8EA;--ui-line-soft:rgba(0,0,0,.05);--ui-line-strong:rgba(0,0,0,.15);
  --ui-text:#101013;--ui-dim:#4A4A52;--ui-faint:#626262;--ui-navlink:rgba(0,0,0,.7);
  --ui-link:#7B35DA;--ui-accent:#9045E8;--ui-accent-soft:#F1E8FE;--ui-tag-bg:#101013;--ui-tag-fg:#FFFFFF;
  --ui-frame-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 60px -20px rgba(0,0,0,.18);
  --ui-card-hover:0 14px 34px -18px rgba(0,0,0,.22);
  --ui-pop-shadow:0 24px 70px -20px rgba(16,9,31,.35),0 2px 6px rgba(0,0,0,.06);
  --ui-btn-bg:linear-gradient(#F7F0FF 0%,#EADCFF 18%,#CFAFF9 50%,#BE97F5 80%,#C8A7F7 100%);
  --ui-btn-line:#9C6CE8;--ui-btn-fg:#16091F;--ui-btn-shadow:0 10px 24px rgba(144,69,232,.26);
  --ui-btn2-bg:linear-gradient(#FFFFFF 0%,#FBF8FF 42%,#F3ECFE 100%);--ui-btn2-line:rgba(144,69,232,.26);--ui-btn2-fg:#21122F;
  --ui-tint:#F1E8FE;--ui-tint2:#E6D6FC;--ui-hero-glow:rgba(144,69,232,.08);
  --ui-field-line:var(--ui-line);--ui-scrim:rgba(16,16,19,.45);
  --ui-red:#D93D42;--ui-green:#1E8E4E;--ui-amber:#B45309;
  --ui-tip-bg:#101013;--ui-tip-fg:#FFFFFF;--ui-tip-line:transparent;
  --ui-ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme=dark]{
  --ui-bg:#0B0B0D;--ui-bg-alt:#0F0F12;--ui-nav:#111114;--ui-card:#151518;--ui-well:#1C1C21;--ui-well2:#25252B;
  --ui-line:#26262C;--ui-line-soft:rgba(255,255,255,.06);--ui-line-strong:rgba(255,255,255,.16);
  --ui-text:#F4F4F6;--ui-dim:#B4B4BC;--ui-faint:#8D8D97;--ui-navlink:#F4F4F6;
  --ui-link:#C4A5ED;--ui-accent:#B58DF4;--ui-accent-soft:#241A31;--ui-tag-bg:#F4F4F6;--ui-tag-fg:#101013;
  --ui-frame-shadow:0 1px 2px rgba(0,0,0,.5),0 24px 60px -20px rgba(0,0,0,.75);
  --ui-card-hover:0 14px 34px -18px rgba(0,0,0,.8);
  --ui-pop-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 .8px rgba(255,255,255,.06);
  --ui-btn-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 .5px rgba(215,181,255,.25);
  --ui-btn2-bg:linear-gradient(#2A2234 0%,#231C2C 50%,#1D1725 100%);--ui-btn2-line:rgba(196,165,237,.24);--ui-btn2-fg:#F3ECFC;
  --ui-tint:#1C1527;--ui-tint2:#251B35;--ui-hero-glow:rgba(181,141,244,.09);
  /* Dark mode: fields carry a thin accent edge so they stand out (owner, 2026-10-24). */
  --ui-field-line:rgba(181,141,244,.42);--ui-scrim:rgba(5,5,7,.72);
  --ui-red:#F2555A;--ui-green:#4ADE80;--ui-amber:#F5B76B;
  --ui-tip-bg:#232328;--ui-tip-fg:#F4F4F6;--ui-tip-line:#38383f;
}

/* Older pages' tokens (dark inspector look). */
:root{--sp-text:#fff;--sp-header-height:56px;--sp-page-gap:48px;--sp-page-gutter:clamp(16px,3vw,32px);--sp-section-gap:40px;scroll-padding-top:calc(var(--sp-header-height) + 24px)}
:root{--sp-bg:#0a0a0c;--sp-band:#0d0d10;--sp-well:#0d0d10;--sp-raised:#1b1b1f;--sp-raised-hover:#222227;--sp-ghost:#111114;--sp-ghost-hover:#141418;--sp-line:#222226;--sp-line-soft:#1c1c20;--sp-line-strong:#38383f;--sp-hi:inset 0 1px 0 rgba(255,255,255,.05);--sp-accent:#c4a5ed;--sp-sel:#b58df4;--sp-accent-line:rgba(196,165,237,.3);--sp-accent-ring:rgba(196,165,237,.28);--sp-ease:cubic-bezier(.2,.8,.2,1);--sp-shadow-float:0 2px 0 #000,0 30px 60px -30px rgba(0,0,0,.8);--sp-grid-line:rgba(255,255,255,.05);--sp-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sp-key:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #000;--sp-key-hover:inset 0 1px 0 rgba(255,255,255,.09),0 3px 0 #000;--sp-key-light:inset 0 -1px 0 #d8d3e0,0 2px 0 #77708a;--sp-key-light-hover:inset 0 -1px 0 #d8d3e0,0 3px 0 #77708a}
html{overflow-x:clip}
body.sp-site-page{padding:0}
body.sp-site-page aside nav{top:calc(var(--sp-header-height) + 24px)}
body.sp-site-page article section{scroll-margin-top:0}
body.signin-page .signin-content{padding:var(--sp-page-gap) var(--sp-page-gutter) 40px}
body.sp-not-found{display:block}
body.sp-not-found main{width:min(700px,calc(100% - 2 * var(--sp-page-gutter)));margin:var(--sp-page-gap) auto 40px;padding:0;box-sizing:border-box}
body.sp-not-found main>p:first-child{margin-top:0}
@media(max-width:680px){:root{--sp-page-gap:32px;--sp-section-gap:32px}}

/* Header: a quiet bar, links at 55% ink, the theme switch, Your account and the purple
   Add to Chrome pill (the same glossy button as the homepage hero). */
body header.sp-header{position:sticky;top:0;z-index:90;display:block;flex:none;width:100%;max-width:none;height:var(--sp-header-height);margin:0;padding:0;border:0;border-bottom:.8px solid var(--ui-line-soft);background:var(--ui-nav);color:var(--ui-text);font:400 15px/1.4 var(--ui-font);letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
.sp-header *{box-sizing:border-box}
.sp-header .sp-nav-inner{position:relative;display:flex;align-items:center;gap:24px;width:min(1180px,calc(100% - 40px));height:100%;margin:0 auto;padding:0}
.sp-header a{margin:0;border:0;color:inherit;text-decoration:none}
.sp-header .sp-brand{display:inline-flex;align-items:center;flex:none;gap:8px;font-size:16.5px;font-weight:600;letter-spacing:-.03em;line-height:1}
.sp-header .sp-brand img,.sp-header .sp-brand .sp-logo{display:block;width:28px;height:28px;max-width:none;margin:0;border-radius:7px}
/* The peel (2026-10-25): the logo's corner lifts once when a page opens and on hover
   (lib/site-header-client.js adds .sp-peeling). The hole and the flap scale from the page's corner. */
.sp-header .sp-logo{overflow:visible}
.sp-logo-peel{transform-box:view-box;transform-origin:101px 101px}
.sp-peeling .sp-logo-peel{animation:sp-logo-peel .8s cubic-bezier(.45,0,.25,1)}
@keyframes sp-logo-peel{0%{transform:none}40%,58%{transform:scale(1.62)}100%{transform:none}}
.sp-header .sp-nav{display:flex;align-items:center;gap:2px;margin:0;padding:0;border:0;background:none}
.sp-header .sp-nav a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;color:var(--ui-navlink);font-size:15px;font-weight:500;white-space:nowrap;transition:color .15s,background-color .15s}
.sp-header .sp-nav a:hover{background:var(--ui-well);color:var(--ui-text)}
.sp-header .sp-nav a[aria-current=page]{background:var(--ui-accent-soft);color:var(--ui-link)}
.sp-header .sp-nav .sp-mobile-account{display:none}
.sp-header .sp-nav-actions{display:flex;align-items:center;gap:14px;margin:0 0 0 auto}
.sp-header .sp-account{display:inline-flex;align-items:center;min-height:36px;color:var(--ui-navlink);font-size:15px;font-weight:500;white-space:nowrap;transition:color .15s}
.sp-header .sp-account:hover{color:var(--ui-text)}
.sp-header .sp-theme{display:grid;place-items:center;flex:none;width:34px;height:34px;margin:0;padding:0;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-text);cursor:pointer;transition:transform .15s}
.sp-header .sp-theme:hover{transform:translateY(-1px)}
.sp-header .sp-theme .sp-moon,[data-theme=dark] .sp-header .sp-theme .sp-sun{display:none}
[data-theme=dark] .sp-header .sp-theme .sp-moon{display:block}
[data-theme-lock] .sp-header .sp-theme{display:none}
.sp-header .sp-install{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px 1px 12px;border:.8px solid var(--ui-btn-line);border-radius:999px;background:var(--ui-btn-bg);color:var(--ui-btn-fg);font:500 15px/1 var(--ui-font);letter-spacing:-.03em;white-space:nowrap;box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .15s var(--ui-ease),filter .15s}
.sp-header .sp-install:hover{color:var(--ui-btn-fg);transform:translateY(-1px);filter:brightness(1.03) saturate(1.05)}
.sp-header .sp-install:active{transform:none}
.sp-header .sp-install img{display:block;flex:none;width:18px;height:18px;margin:0}
.sp-header .sp-menu-toggle{display:none;place-items:center;flex:none;width:38px;height:38px;margin:0;padding:0;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-text);cursor:pointer}
.sp-header .sp-menu-cross{display:none}
.sp-header a:focus-visible,.sp-header button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px;border-radius:999px}
@media(min-width:981px) and (max-width:1120px){.sp-header .sp-nav a{padding:0 9px}.sp-header .sp-nav-inner{gap:18px}.sp-header .sp-account{display:none}}
@media(max-width:980px){
  .sp-header .sp-nav-inner{gap:12px;width:calc(100% - 32px)}
  .sp-header .sp-nav-actions{gap:8px}
  .sp-header .sp-account{display:none}
  .sp-header .sp-menu-toggle{display:grid}
  .sp-header .sp-nav{display:none;position:absolute;top:calc(100% + .8px);left:-16px;right:-16px;padding:6px 16px 16px;border-bottom:.8px solid var(--ui-line);background:var(--ui-nav);box-shadow:0 30px 50px -30px rgba(0,0,0,.35)}
  .sp-header.sp-menu-open .sp-nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .sp-header .sp-nav a{min-height:48px;padding:0;border-radius:0;font-size:16px;color:var(--ui-text);background:none}
  .sp-header .sp-nav a:hover{background:none;color:var(--ui-link)}
  .sp-header .sp-nav a[aria-current=page]{background:none}
  .sp-header .sp-nav a+a:not(.sp-mobile-account){box-shadow:0 -.8px 0 var(--ui-line)}
  .sp-header .sp-nav .sp-mobile-account{display:flex;justify-content:center;margin-top:10px;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);font-weight:500}
  .sp-header.sp-menu-open .sp-menu-lines{display:none}
  .sp-header.sp-menu-open .sp-menu-cross{display:block}
}
@media(max-width:600px){.sp-header .sp-nav-inner{width:calc(100% - 24px)}.sp-header .sp-nav{left:-12px;right:-12px;padding-inline:12px}.sp-header .sp-install{padding:0 13px 1px 10px;font-size:14.5px}}
@media(max-width:420px){.sp-header .sp-brand>span{display:none}.sp-header .sp-nav-actions{gap:6px}}
@media(prefers-reduced-motion:reduce){.sp-header .sp-install,.sp-header .sp-theme{transition:none}.sp-header .sp-install:hover,.sp-header .sp-theme:hover{transform:none}.sp-peeling .sp-logo-peel{animation:none}}

/* Shared by older install buttons. */
.install-free-badge{display:inline-flex;align-items:center;flex:none;padding:2px 6px;border:1px solid #99cbaa;border-radius:5px;background:#d4f3dd;color:#215238;font-size:10px;line-height:14px;font-weight:650;letter-spacing:0;white-space:nowrap}

/* Tooltips (lib/site-header-client.js): a small card under the element. */
.sp-tip{position:absolute;z-index:300;max-width:260px;padding:8px 10px;border:.8px solid var(--ui-tip-line);border-radius:8px;background:var(--ui-tip-bg);color:var(--ui-tip-fg);font:500 12.5px/1.45 var(--ui-font);letter-spacing:-.005em;text-align:left;text-transform:none;box-shadow:0 14px 34px -14px rgba(0,0,0,.45);pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s}
.sp-tip.up{transform:translateY(3px)}
.sp-tip.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sp-tip{transition:none;transform:none}}

/* The peel motif's shared colours (the 404 page's peel). The flap is
   the back of the peeled page: light lavender at its tip to Sitepeel purple at the fold, like the
   logo's corner (the one tone shift allowed, owner 2026-10-25). The ink edge keeps it crisp. */
:root{--spf-flap-a:#E6D2FF;--spf-flap-b:#A56DF0;--spf-flap-line:rgba(22,9,31,.55);--spf-under:#16091F;--spf-under-fg:#F4F0FA;--spf-under-dim:#B9A9CC}
[data-theme=dark]{--spf-flap-line:rgba(22,9,31,.9);--spf-under:#121016}
.spf-stop-a{stop-color:var(--spf-flap-a)}.spf-stop-b{stop-color:var(--spf-flap-b)}
.spf-flap{stroke:var(--spf-flap-line);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* site-footer.css */
/* Shared footer (2026-10-24 look): the brand and a line about Sitepeel, three link columns
   with small mono heads, and a bottom line. Uses the --ui-* tokens from site-header.css, so
   it follows light and dark mode. The directory links stay in the page, hidden. */
footer.sp-footer{display:block;margin:0;padding:64px 0 28px;border:0;border-top:.8px solid var(--ui-line-soft);background:var(--ui-bg-alt);color:var(--ui-text);font:400 15px/1.5 var(--ui-font);letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
.sp-footer *{box-sizing:border-box}
.sp-footer .sp-footer-inner{width:min(1180px,calc(100% - 40px));margin:0 auto}
.sp-footer .sp-footer-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,3fr);gap:32px}
.sp-footer .sp-footer-logo{display:inline-flex;align-items:center;gap:8px;color:var(--ui-text);font-size:16.5px;font-weight:600;letter-spacing:-.03em;text-decoration:none}
.sp-footer .sp-footer-logo img{display:block;width:28px;height:28px;border-radius:7px}
.sp-footer .sp-footer-brand p{max-width:280px;margin:14px 0 0;color:var(--ui-faint);font-size:14px;line-height:1.6}
.sp-footer .sp-footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.sp-footer .sp-footer-group h2{margin:4px 0 14px;padding:0;color:var(--ui-faint);font:400 12px/1.5 var(--ui-mono);letter-spacing:0;text-transform:none}
.sp-footer .sp-footer-group ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.sp-footer .sp-footer-group a{color:var(--ui-dim);font-size:14.5px;text-decoration:none;transition:color .15s}
.sp-footer .sp-footer-group a:hover{color:var(--ui-text)}
.sp-footer a:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px;border-radius:4px}
.sp-footer .sp-footer-featured{display:none}
.sp-footer .sp-footer-meta{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:20px;border-top:.8px solid var(--ui-line);color:var(--ui-faint);font:400 12px/1.5 var(--ui-mono);letter-spacing:0}
.sp-footer .sp-footer-meta p{margin:0}
@media (max-width:900px){.sp-footer .sp-footer-main{grid-template-columns:1fr}}
@media (max-width:600px){footer.sp-footer{padding:48px 0 24px}.sp-footer .sp-footer-links{grid-template-columns:1fr 1fr;gap:28px 20px}.sp-footer .sp-footer-group:last-child{grid-column:1 / -1}.sp-footer .sp-footer-meta{flex-direction:column;gap:4px}}
/* field-focus.css */
/* Highlight the existing field edge instead of drawing a second outer box.
   Keep link, button, checkbox and radio keyboard focus styles intact. */
:is(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=tel],input[type=number],textarea,select):focus{
  outline:none;
  outline-offset:0;
  border-color:var(--kl-c4a5ed,#c4a5ed);
  box-shadow:none;
}
.catalog-search:focus-within{border-color:var(--kl-c4a5ed,#c4a5ed)}
@media(forced-colors:active){
  :is(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=tel],input[type=number],textarea,select):focus{border-color:Highlight}
  .catalog-search:focus-within{border-color:Highlight}
}