@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --bg-top: #fff1e0;
  --bg-mid: #ffe4cc;
  --bg-bottom: #ffd2b3;
  --ink: #3a2210;
  --soft: #785841;
  --accent: #ff7a5c;
  --accent-strong: #ff5f3b;
  --accent-dark: #d94f31;
  --accent-text: #c24024;
  --accent-soft: #fff0e8;
  --on-coral: #591000;
  --card: #ffffff;
  --surface: #f0d9c3;
  --mint: #5fd6a4;
  --mint-dark: #2fa87a;
  --mint-text: #22845b;
  --on-mint: #0b4c35;
  --sky: #6aa9ff;
  --sky-dark: #3c7bd8;
  --on-sky: #00275c;
  --sun: #ffd76e;
  --sun-dark: #dfa01d;
  --on-sun: #6b4a00;
  --lilac: #b48bff;
  --lilac-dark: #8759df;
  --on-lilac: #280070;
  --star: #ffc84d;
  --star-off: #f0ddcd;
  --petrol: #17667a;
  --cream: #fffaf2;
  --shadow: 58 34 16;
  --radius: 28px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-top);
  background-image: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 38%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }
h1, h2, h3 { line-height: 1.12; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; border-radius: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--card); padding: 10px 16px; border-radius: 14px; font-weight: 600; }
.skip:focus { top: 12px; }
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgb(255 241 224 / 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 2px solid rgb(var(--shadow) / 0.06);
}
.top .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 3px 0 var(--accent-dark); }
.brand .do, .wordmark .do { color: var(--accent); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--soft); text-decoration: none; font-weight: 600; font-size: 16px; padding: 8px 12px; border-radius: 12px; }
.nav a:hover { color: var(--ink); background: rgb(255 255 255 / 0.7); }
.lang { display: inline-flex; background: var(--surface); border-radius: 999px; padding: 3px; font-size: 14px; font-weight: 700; }
.lang a, .lang span { padding: 5px 11px; border-radius: 999px; text-decoration: none; color: var(--soft); }
.lang span { background: var(--card); color: var(--ink); box-shadow: 0 2px 0 rgb(var(--shadow) / 0.12); }
.lang a:hover { color: var(--ink); }
@media (max-width: 860px) { .nav { display: none; } .lang { margin-left: auto; } }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 18px; cursor: pointer;
  font-weight: 700; font-size: 18px; text-decoration: none;
  background: var(--card); color: var(--ink);
  box-shadow: 0 5px 0 var(--surface), 0 10px 22px rgb(var(--shadow) / 0.08);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { color: var(--ink); transform: translateY(-1px); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--surface); }
.btn-primary { background: var(--accent-strong); color: #fff; box-shadow: 0 5px 0 var(--accent-dark), 0 12px 26px rgb(255 95 59 / 0.28); }
.btn-primary:hover { color: #fff; }
.btn-primary:active { box-shadow: 0 1px 0 var(--accent-dark); }
.btn svg { width: 22px; height: 22px; flex: none; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; padding: 0; list-style: none; color: var(--soft); font-size: 16px; font-weight: 500; }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 18px; height: 18px; border-radius: 6px; background: var(--mint); box-shadow: inset 0 -3px 0 var(--mint-dark); flex: none; }
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--surface), 0 24px 48px rgb(var(--shadow) / 0.1);
}
section { padding: clamp(48px, 6.5vw, 84px) 0; }
.section-head { max-width: 680px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker { font-size: 15px; font-weight: 700; color: var(--accent-text); letter-spacing: 0.08em; text-transform: uppercase; }
.section-head h2 { font-size: clamp(32px, 4.6vw, 50px); margin-top: 8px; letter-spacing: -0.02em; }
.section-head p { color: var(--soft); font-size: 19px; margin-top: 14px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.step { padding: 26px 26px 30px; }
.step h3 { font-size: 24px; margin-top: 22px; display: flex; gap: 12px; align-items: baseline; }
.step h3::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-strong); color: #fff; font-size: 18px; box-shadow: 0 3px 0 var(--accent-dark); transform: translateY(-2px); }
.step p { color: var(--soft); margin-top: 10px; }
.mini-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: center; align-items: center; padding: 18px 12px 20px; background: var(--accent-soft); border-radius: 20px; min-height: 150px; }
.mini-row .arrow { color: var(--star); font-weight: 700; font-size: 26px; letter-spacing: 2px; text-shadow: 0 2px 0 var(--sun-dark); }
.mt {
  --fill: var(--mint); --shade: var(--mint-dark); --txt: var(--on-mint);
  width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fill) 62%, #fff) 0%, var(--fill) 58%);
  box-shadow: 0 5px 0 var(--shade); color: var(--txt); font-weight: 700; font-size: 26px;
}
.mt.sm { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; box-shadow: 0 4px 0 var(--shade); }
.mt.ring { box-shadow: 0 0 0 3px var(--accent), 0 5px 0 var(--shade); overflow: visible; }
.mt.split { background: none; overflow: visible; width: 72px; height: 72px; font-size: 30px; }
.mt.split::before, .mt.split::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; }
.mt.split::before { left: 0; border-radius: 15px 0 0 15px; background: linear-gradient(180deg, #a3e8c8, var(--mint)); box-shadow: 0 5px 0 var(--mint-dark); }
.mt.split::after { right: 0; border-radius: 0 15px 15px 0; background: linear-gradient(180deg, #fb9a63, #f76717); box-shadow: 0 5px 0 #c54d0c; }
.mt.split b { position: relative; z-index: 1; color: var(--ink); text-shadow: 0 0 10px rgb(255 255 255 / 0.7); }
.mt.split .s { position: absolute; z-index: 1; font-size: 16px; top: 50%; transform: translateY(-50%); }
.mt.split .s.l { left: 7px; color: var(--on-mint); }
.mt.split .s.r { right: 7px; color: #fff; }
.t-low { --fill: #62cfd0; --shade: #2fa4a5; --txt: #06484c; }
.t-high { --fill: var(--sun); --shade: var(--sun-dark); --txt: var(--on-sun); }
.legend { flex-basis: 100%; display: flex; gap: 14px; justify-content: center; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--soft); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; }
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 800px) { .modes { grid-template-columns: 1fr; } }
.mode { --tone: var(--accent); --tone-dark: var(--accent-dark); --on: var(--on-coral); padding: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mode.zen { --tone: var(--mint); --tone-dark: var(--mint-dark); --on: var(--on-mint); }
.mode.blitz { --tone: var(--sky); --tone-dark: var(--sky-dark); --on: var(--on-sky); }
.mode.daily { --tone: var(--sun); --tone-dark: var(--sun-dark); --on: var(--on-sun); }
.mode.puzzles { --tone: var(--sun); --tone-dark: var(--sun-dark); --on: var(--on-sun); }
.mode.duel { --tone: var(--lilac); --tone-dark: var(--lilac-dark); --on: var(--on-lilac); }
.mode .badge { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 60%, #fff), var(--tone)); box-shadow: 0 5px 0 var(--tone-dark); color: var(--on); }
.mode .badge svg { width: 30px; height: 30px; }
.mode h3 { font-size: 28px; margin-top: 20px; }
.mode .tag { font-size: 15px; font-weight: 600; color: var(--on); background: color-mix(in srgb, var(--tone) 32%, #fff); padding: 3px 12px; border-radius: 999px; align-self: flex-start; margin-top: 10px; }
.mode p { color: var(--soft); margin-top: 12px; }
.mode::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 16%, transparent); pointer-events: none; }
.path { margin-top: 24px; padding: 30px clamp(20px, 4vw, 40px) 34px; }
.path h3 { font-size: 24px; }
.path > p { color: var(--soft); margin-top: 6px; }
.chapters { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.chapters::before { content: ""; position: absolute; left: 10%; right: 10%; top: 29px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 24px); opacity: 0.55; }
.chapters li { position: relative; text-align: center; }
.chapters .node { width: 64px; height: 64px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; font-weight: 700; font-size: 24px; color: #fff; background: linear-gradient(180deg, #ff9a7c, var(--accent-strong)); box-shadow: 0 5px 0 var(--accent-dark); position: relative; }
.chapters li:last-child .node { background: linear-gradient(180deg, #ffe7a8, var(--sun)); color: var(--on-sun); box-shadow: 0 5px 0 var(--sun-dark); }
.chapters b { display: block; margin-top: 14px; font-size: 18px; }
.chapters span { display: block; font-size: 14px; color: var(--soft); }
@media (max-width: 800px) {
  .chapters { grid-template-columns: 1fr; gap: 18px; }
  .chapters::before { left: 29px; right: auto; top: 20px; bottom: 20px; width: 6px; height: auto; background: repeating-linear-gradient(180deg, var(--accent) 0 14px, transparent 14px 24px); }
  .chapters li { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; text-align: left; align-items: center; }
  .chapters .node { grid-row: span 2; margin: 0; }
  .chapters b { margin-top: 0; }
}
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 40vw), 1fr)); gap: clamp(12px, 2vw, 18px); }
@media (min-width: 1040px) { .types { grid-template-columns: repeat(5, 1fr); } }
.type { padding: 20px 18px 18px; display: flex; flex-direction: column; box-shadow: 0 6px 0 var(--surface), 0 16px 32px rgb(var(--shadow) / 0.08); }
.pattern { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: min(118px, 100%); margin: 0 auto 16px; }
.pattern i { aspect-ratio: 1; border-radius: 5px; background: var(--surface); }
.pattern i.p { background: var(--accent-strong); box-shadow: 0 2px 0 var(--accent-dark); }
.pattern i.a { background: var(--mint); box-shadow: 0 2px 0 var(--mint-dark); }
.type h3 { font-size: 21px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.type .lock { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); white-space: nowrap; }
.type .lock.free { background: #e9f8f0; color: #1f8a63; }
.type p { color: var(--soft); font-size: 15.5px; margin-top: 6px; flex: 1; }
.types-legend { display: flex; gap: 20px; justify-content: center; margin-top: 26px; color: var(--soft); font-size: 15px; font-weight: 500; flex-wrap: wrap; }
.types-legend span { display: inline-flex; align-items: center; gap: 8px; }
.types-legend i { width: 16px; height: 16px; border-radius: 5px; }
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 960px) { .promises { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .promises { grid-template-columns: 1fr; } }
.promise { padding: 24px 22px; }
.promise .ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #e9f8f0; color: var(--mint-text); }
.promise .ico svg { width: 26px; height: 26px; }
.promise h3 { font-size: 20px; margin-top: 16px; }
.promise p { color: var(--soft); font-size: 16px; margin-top: 6px; }
.story .wrap { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
@media (max-width: 800px) { .story .wrap { grid-template-columns: 1fr; } }
.timeline { padding: 28px; position: relative; }
.timeline ol { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 4px dotted var(--surface); display: grid; gap: 22px; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -40px; top: 4px; width: 20px; height: 20px; border-radius: 7px; background: var(--mint); box-shadow: 0 3px 0 var(--mint-dark); }
.timeline li:last-child::before { background: var(--accent-strong); box-shadow: 0 3px 0 var(--accent-dark); }
.timeline b { display: block; font-size: 22px; }
.timeline span { color: var(--soft); font-size: 16px; }
.story .section-head { margin-bottom: 0; }
.story .section-head p + p { margin-top: 12px; }
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.faq details { padding: 0; box-shadow: 0 5px 0 var(--surface), 0 12px 24px rgb(var(--shadow) / 0.06); border-radius: 22px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; font-weight: 600; font-size: 19px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-size: 22px; font-weight: 700; transition: transform 0.2s ease; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 24px 22px; color: var(--soft); margin-top: -4px; }
.foot { padding: 36px 0 44px; color: var(--soft); font-size: 15px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; border-top: 2px solid rgb(var(--shadow) / 0.08); padding-top: 28px; }
.foot .wrap.donate { border-top: none; padding-top: 0; margin-bottom: 20px; justify-content: flex-start; }
.foot .donate p { margin: 0; max-width: 46ch; }
.foot a.paypal { background: #FFC439; color: #003087; padding: 10px 20px; border-radius: 999px; font-weight: 700; box-shadow: 0 3px 0 rgb(0 0 0 / 0.18); }
.foot a.paypal:hover { color: #003087; filter: brightness(1.05); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { color: var(--soft); font-weight: 600; text-decoration: none; }
.foot a:hover { color: var(--ink); }
.legal { padding-top: clamp(32px, 5vw, 64px); }
.legal .card { max-width: 780px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); }
.legal h1 { font-size: clamp(34px, 5vw, 48px); }
.legal .updated { color: var(--soft); margin-top: 8px; font-size: 15px; }
.legal h2 { font-size: 23px; margin-top: 34px; }
.legal p, .legal li { color: var(--soft); margin-top: 10px; }
.legal ul { padding-left: 22px; margin: 0; }
.legal .summary { background: #e9f8f0; color: var(--on-mint); border-radius: 18px; padding: 18px 20px; margin-top: 24px; font-weight: 500; }
.banner { padding: clamp(14px, 2.5vw, 28px) 0 0; }
.banner .wrap { display: grid; grid-template-columns: 1fr minmax(0, 400px); gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (max-width: 860px) { .banner .wrap { grid-template-columns: 1fr; } }
.banner-card { background: var(--cream); border-radius: var(--radius); padding: clamp(22px, 3.5vw, 36px); box-shadow: inset 0 0 0 2px rgb(23 102 122 / 0.14), 0 6px 0 var(--surface); }
.banner h1 { font-size: clamp(44px, 6.5vw, 72px); line-height: 0.95; letter-spacing: -0.035em; color: var(--ink); }
.banner h1 .do { color: var(--petrol); }
.banner .slogan { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; margin-top: 10px; color: var(--petrol); }
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; min-width: 176px; padding: 8px 18px 8px 12px; border-radius: 12px; background: #000; color: #fff; line-height: 1.15; }
.store-badge svg { width: 26px; height: 26px; flex: none; }
.store-badge small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; opacity: 0.85; }
.store-badge b { font-size: 18px; font-weight: 700; }
.loop { margin: 0 auto; width: 100%; max-width: 400px; }
.loop-video { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius); background: #f4f2ec; box-shadow: 0 8px 0 var(--surface), 0 24px 48px rgb(var(--shadow) / 0.1); }
.loop figcaption { margin-top: 10px; color: var(--soft); font-size: 16px; font-weight: 500; text-align: center; }
.feature { padding: clamp(28px, 4vw, 48px) 0 0; }
.feature img { width: 100%; border-radius: var(--radius); }
.intro { text-align: center; padding-top: clamp(28px, 4vw, 48px); }
.intro h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.02em; margin-top: clamp(24px, 4vw, 40px); }
.intro h2 em { font-style: normal; color: var(--accent-text); }
.intro .lead { font-size: clamp(18px, 2vw, 20px); color: var(--soft); margin: 14px auto 0; max-width: 34em; }
.intro .hero-facts { justify-content: center; }
.tagline { text-align: center; padding: clamp(18px, 3vw, 30px) 0 0; }
.tagline p { font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.tagline p em { font-style: normal; color: var(--accent-text); }
.banner-card .lead { font-size: clamp(16px, 1.8vw, 19px); color: var(--soft); margin: 12px 0 0; max-width: 30em; }
.banner-card .hero-facts { justify-content: flex-start; margin: 12px 0 0; }
.banner .wrap { align-items: stretch; }
.banner-card { display: flex; flex-direction: column; justify-content: center; }
.loop { display: flex; flex-direction: column; margin: 0; }
.loop-video { flex: 1 1 auto; aspect-ratio: auto; height: 100%; min-height: 0; object-fit: cover; }
@media (max-width: 860px) { .loop { max-width: 400px; margin: 0 auto; } .loop-video { aspect-ratio: 1; height: auto; } }
.scroll-cue { display: flex; justify-content: center; margin: clamp(10px, 2vw, 18px) auto 0; width: 44px; height: 44px; align-items: center; color: var(--accent-text); border-radius: 50%; }
.scroll-cue svg { animation: cue-bob 1.8s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }
.loop { position: relative; }
.loop figcaption { position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px; }
.banner { display: flex; flex-direction: column; min-height: min(calc(100svh - 170px), 780px); padding-bottom: 8px; }
.banner > .wrap { margin-block: auto; width: 100%; }
.scroll-cue { margin-top: auto; flex: none; }
@media (max-width: 860px) { .banner { min-height: 0; } .loop figcaption { position: static; } .scroll-cue { margin-top: 12px; } }
main { position: relative; overflow-x: clip; }
.floaters { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; contain: strict; }
.floaters .f { position: absolute; top: 0; width: var(--s); height: var(--s); border-radius: 28%; opacity: var(--op, .5); background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 var(--lip) 0 var(--c3); animation: f-float var(--d) var(--e, ease-in-out) var(--dl) infinite alternate; will-change: transform, translate; backface-visibility: hidden; }
main > section, main > .legal { position: relative; z-index: 1; }
@keyframes f-float { from { transform: translate3d(0, calc(var(--a) * -1), 0); } to { transform: translate3d(0, var(--a), 0); } }
.floaters .f { animation-duration: var(--d) !important; animation-iteration-count: infinite !important; }
.floaters .f.pop { animation-duration: var(--d), var(--popd, .16s) !important; animation-iteration-count: infinite, 1 !important; }
.floaters .f.born { animation-duration: var(--d), var(--bornd, 2s) !important; animation-iteration-count: infinite, 1 !important; }
.floaters .f.l { left: calc(var(--p) * var(--sp, 1) * max(0px, (100vw - var(--wrap)) / 2 - var(--s) - 12px) + 6px); }
.floaters .f.r { right: calc(var(--p) * var(--sp, 1) * max(0px, (100vw - var(--wrap)) / 2 - var(--s) - 12px) + 6px); left: auto; }
@media (max-width: 1240px) { .floaters { display: none; } }
@media (min-width: 1241px) {
  .floaters { z-index: 2; }
  .floaters .f { pointer-events: auto; cursor: pointer; }
}
.floaters .f.pop { transform-origin: 50% 62%; animation: f-float var(--d) var(--e, ease-in-out) var(--dl) infinite alternate, f-pop var(--popd, .16s) ease-out forwards; pointer-events: none; }
.floaters .f.born { animation: f-float var(--d) var(--e, ease-in-out) var(--dl) infinite alternate, f-born var(--bornd, 2s) ease-out both; }
@keyframes f-pop { 0% { scale: 1; opacity: var(--op, .5); } 55% { scale: var(--swell, 1.45); opacity: var(--op, .5); } 100% { scale: calc(var(--swell, 1.45) + .45); opacity: 0; } }
@keyframes f-born { from { scale: .88; opacity: 0; } to { scale: 1; opacity: var(--op, .5); } }
.floaters .shard { position: absolute; margin: 0; background: linear-gradient(180deg, var(--c1), var(--c2)); opacity: 0; pointer-events: none; animation: f-shard-x var(--t) cubic-bezier(.15, .6, .35, 1) var(--shd, .06s) forwards, f-shard-y var(--t) linear var(--shd, .06s) forwards, f-shard-spin var(--t) ease-out var(--shd, .06s) forwards; }
.floaters .shard.chip { border-radius: 30%; }
.floaters .shard.tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@keyframes f-shard-x { to { translate: var(--dx) 0; } }
@keyframes f-shard-y { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .3; } 38% { transform: translateY(var(--dy)); opacity: .3; animation-timing-function: cubic-bezier(.5, 0, 1, .6); } 100% { transform: translateY(calc(var(--dy) + var(--g))); opacity: 0; } }
@keyframes f-shard-spin { to { rotate: var(--r); scale: .5; } }
.floaters .ring { position: absolute; margin: 0; border-radius: 30%; border: 2px solid var(--c); transform: translate(-50%, -50%); pointer-events: none; opacity: .0; animation: f-ring .5s ease-out forwards; }
@keyframes f-ring { 0% { opacity: .4; scale: .6; } 100% { opacity: 0; scale: 3; } }
.floaters .spark { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgb(255 255 255 / .85); box-shadow: none; pointer-events: none; opacity: 0; animation: f-spark var(--t) ease-out var(--shd, .06s) forwards; }
@keyframes f-spark { 0% { opacity: .6; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }
.nav a.nav-donate { background: #FFC439; color: #003087; border-radius: 999px; padding: 5px 16px; font-weight: 700; box-shadow: 0 2px 0 rgb(0 0 0 / 0.18); }
.nav a.nav-donate:hover { color: #003087; filter: brightness(1.05); }
.floaters, .floaters * { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; outline: none; }
.tester { margin: clamp(30px, 5vw, 56px) 0 0; position: relative; z-index: 1; }
.tester-card { background: var(--petrol); color: #fff; border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); box-shadow: 0 6px 0 rgb(0 0 0 / 0.16); display: grid; grid-template-columns: 1fr auto; column-gap: 28px; align-items: center; }
.tester-card h2 { grid-column: 1; font-size: clamp(22px, 3vw, 30px); color: #fff; }
.tester-card .ti { grid-column: 1; margin: 4px 0 0; opacity: .92; }
.tester-card ol { grid-column: 1; margin: 10px 0 0; padding-left: 1.3em; }
.tester-card li { margin: 3px 0; }
.tester-card .tb { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 10px; align-self: center; }
.tester-card .tb a { display: block; text-align: center; padding: 11px 22px; border-radius: 999px; font-weight: 700; background: #FFC439; color: #003087; box-shadow: 0 3px 0 rgb(0 0 0 / .2); white-space: nowrap; }
.tester-card .tb a.ghost { background: rgb(255 255 255 / .16); color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .5); }
.tester-card .tn { grid-column: 1 / -1; margin: 12px 0 0; font-size: 14px; opacity: .85; }
@media (max-width: 760px) { .tester-card { grid-template-columns: 1fr; } .tester-card .tb { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; margin-top: 14px; } }
.banner .tester .wrap { display: block; }
.theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 10px; border: 0; border-radius: 50%; cursor: pointer; background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--surface), 0 6px 14px rgb(var(--shadow) / 0.12); }
.theme-toggle:hover { filter: brightness(1.05); }
.theme-toggle svg { width: 22px; height: 22px; grid-area: 1 / 1; transition: transform .3s, opacity .3s; }
.theme-toggle .moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-top: #2a1608; --bg-mid: #3a1e0b; --bg-bottom: #5a2a0c;
  --ink: #fbe9d8; --soft: #d6b8a0;
  --accent-text: #ff9a7e; --accent-dark: #ffb59f; --accent-soft: #4a2a20;
  --card: #3a2312; --surface: #26150a; --cream: #3a2312;
  --mint-text: #6fe0b0; --star-off: #5a4030; --shadow: 0 0 0;
}
:root[data-theme="dark"][data-dark="b"] {
  --bg-top: #0c1527; --bg-mid: #101d36; --bg-bottom: #16284a;
  --ink: #e8eefc; --soft: #a3b4d6;
  --accent-text: #ff9a7e; --accent-dark: #ffb59f; --accent-soft: #2a2236;
  --card: #172641; --surface: #0b1323; --cream: #172641;
  --mint-text: #6fe0b0; --star-off: #31446a;
}
:root[data-theme="dark"] .type .lock.free,
:root[data-theme="dark"] .promise .ico,
:root[data-theme="dark"] .legal .summary { background: #17382e; color: #8ff0c4; }
:root[data-theme="dark"] .loop-video { background: #2a1a10; }
:root[data-theme="dark"][data-dark="b"] .loop-video { background: #0f1a2e; }
:root[data-theme="dark"] .mode .tag { background: color-mix(in srgb, var(--tone) 40%, #000); color: #fff; }
:root[data-theme="dark"] .top { background: color-mix(in srgb, var(--bg-top) 88%, transparent); }