/* foamula.app — the game's own cream, ink and type. No external requests:
   the fonts are the files the game ships, with their licence in /fonts/OFL.txt.
   Every style lives in this file: the site's CSP (default-src 'self') blocks
   inline style attributes and <style> blocks, so the SVGs are coloured with
   attributes and classes only. */

@font-face{font-family:"Fredoka";src:url("fonts/Fredoka-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url("fonts/Fredoka-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url("fonts/Fredoka-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-Medium.ttf") format("truetype");font-weight:500;font-display:swap}

:root{
  --cream:#FFF9F0; --ink:#3B3654; --quiet:#5C5548; --label:#6B6356;
  --purple:#6153CB; --purple-mid:#8E81EA; --teal:#55D1C8; --green:#2FB673; --green-ink:#1E7A4C;
  --plate:#F6EDDD; --edge:#E7D8BE; --foam:#FBF3E4; --line:#EFE3CD;
  --wide:1120px; --read:680px; --gutter:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;font-size:17px;line-height:1.55;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
a{color:var(--purple);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--purple-mid);outline-offset:3px;border-radius:6px}
p{margin:0 0 12px}
h1,h2,h3{text-wrap:balance}
h1{font-weight:700;font-size:34px;line-height:1.12;margin:0 0 14px;letter-spacing:-.01em}
h2{font-weight:600;font-size:22px;line-height:1.25;margin:0 0 8px}
h3{font-weight:600;font-size:19px;line-height:1.3;margin:0 0 6px}

/* layout */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.read{max-width:var(--read);margin:0 auto;padding:0 var(--gutter)}

/* the mark: the app icon and the name beside it */
.site-head{padding:20px 0 4px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand img{width:44px;height:44px;border-radius:10px}
.brand span{font-weight:700;font-size:24px;letter-spacing:.01em}

/* ---------- home: first screen ---------- */
.hero{display:grid;gap:28px;padding:28px 0 40px}
.hero-icon{width:64px;height:64px;border-radius:15px;margin-bottom:18px}
.hero h1{font-size:44px}
.lead{font-size:20px;line-height:1.5;max-width:32ch;margin:0 0 16px}
.platform{color:var(--quiet);font-size:15px;margin:0}
.stage{max-width:560px;width:100%;margin-inline:auto;background:var(--foam);border:2px solid var(--line);border-radius:28px;padding:16px}
.scene{width:100%;height:auto}
/* App Store badge slot — empty until release. When the link exists:
   <a class="store" href="…"><img src="/img/app-store-badge.svg" alt="Download on the App Store" width="120" height="40"></a>
   Apple: official artwork unmodified, at least 40 px tall on screen, clear space a quarter of its height. */
.store{display:inline-block;margin-top:22px;padding:10px;margin-left:-10px}
.store img{height:40px;width:auto}

/* SVG text styles (classes, not attributes, so the fonts load) */
.mono{font-family:"DM Mono",ui-monospace,monospace;font-weight:500}
.lbl{font-family:"Fredoka",sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.12em;fill:#6B6356}
.win{font-family:"Fredoka",sans-serif;font-weight:600;font-size:24px;fill:#1E7A4C}
.tag{font-family:"Fredoka",sans-serif;font-weight:600;font-size:11px;fill:#FFFFFF}
.small{font-family:"Fredoka",sans-serif;font-weight:500;font-size:15px}

/* ---------- home: how it works ---------- */
.section{padding:32px 0}
.section > h2{font-size:26px;margin-bottom:18px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:26px;counter-reset:step}
.steps li{counter-increment:step}
.art{width:100%;height:auto;margin-bottom:14px}
.steps h3::before{content:counter(step);display:inline-block;width:28px;height:28px;margin-right:10px;border-radius:50%;background:var(--purple);color:#fff;font-size:16px;line-height:28px;text-align:center;vertical-align:1px}
.steps p{color:var(--quiet);margin:0}

/* ---------- home: five things ---------- */
.features{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.features li{display:flex;gap:14px;align-items:flex-start;background:var(--plate);border:2px solid var(--edge);border-radius:18px;padding:14px 16px}
.glyph{width:40px;height:40px;flex:none}
.features strong{display:block;font-weight:600;font-size:18px;line-height:1.3}
.features span{color:var(--quiet);font-size:16px;line-height:1.45}

/* ---------- reading pages ---------- */
.doc{padding-top:24px;padding-bottom:8px}
.doc h1{font-size:36px;margin:20px 0 14px}
.doc h2{margin:30px 0 8px}
.doc p,.doc li{line-height:1.6}
ul.dots{list-style:none;padding:0;margin:0 0 12px}
ul.dots li{position:relative;padding-left:22px;margin:0 0 6px}
ul.dots li::before{content:"";position:absolute;left:6px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--purple-mid)}
.colophon{color:var(--label);font-size:14px;margin:32px 0 0}

/* support: questions as <details>, the plus drawn with two bars */
.qa{margin:22px 0 0;border-bottom:2px solid var(--edge)}
.qa details{border-top:2px solid var(--edge)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;font-weight:600;font-size:19px;line-height:1.3;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(var(--ink),var(--ink)) center/18px 2.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2.5px 18px no-repeat}
.qa details[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center/18px 2.5px no-repeat}
.qa .answer{padding:0 2px 18px}
.qa .art{max-width:420px;margin:6px 0 4px}

/* 404 */
.lost{padding-top:40px;padding-bottom:16px;text-align:left}
.art-404{max-width:360px;margin:0 0 22px}

/* footer: the developer's name once, quietly, after the line */
.site-foot{margin-top:40px;border-top:2px solid var(--edge);padding:16px 0 40px;color:var(--quiet);font-size:15px}
.site-foot a{color:var(--quiet)}

/* ---------- wider screens ---------- */
@media (min-width:720px){
  :root{--gutter:28px}
  body{font-size:18px}
  .hero h1{font-size:56px}
  .lead{font-size:22px}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc h1{font-size:44px}
}
@media (min-width:720px) and (max-width:959px){
  .steps li{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:24px;align-items:center}
  .steps li > .art{grid-row:1 / 3;margin:0}
  .steps li > h3{align-self:end}
  .steps li > p{align-self:start}
}
@media (min-width:960px){
  .stage{margin-inline:0}
  :root{--gutter:40px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:center;gap:56px;padding:56px 0 64px}
  .hero h1{font-size:68px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .features{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1280px){
  .hero{grid-template-columns:minmax(0,1fr) 560px}
  .features{grid-template-columns:repeat(5,minmax(0,1fr))}
  .features li{flex-direction:column;gap:10px}
}

/* ---------- the scene: one 9000 ms loop ----------
   Without animation every element is drawn in its last state (the solved level),
   so "reduce motion", printing and old browsers all show the finished picture.
   Level 3 opens with i in the row (YOURS 1 2 3 4 5), so i and its letter in
   f(i) never move; × 2 + 1 fall, and the win is 4 moves, its par. As in the
   game, an unfinished formula shows ? in every YOURS cell, and a figure
   changes at once when a bubble lands, never two on top of each other; when 1
   lands the dashed edge goes at once and all five fill green together over
   180 ms (the game's cellFill); only the little pop runs left to right. */
.scene .sc-b,.scene [class^="sc-c"],.scene [class^="sc-s"],.scene .sc-win{transform-box:fill-box;transform-origin:50% 100%}
.scene [class^="sc-c"],.scene [class^="sc-s"]{transform-origin:50% 50%}
.scene .sc-bub1{animation:sc-bub1 9000ms infinite}.scene .sc-bub2{animation:sc-bub2 9000ms infinite}.scene .sc-bub3{animation:sc-bub3 9000ms infinite}.scene .sc-bub4{animation:sc-bub4 9000ms infinite}.scene .sc-u0{animation:sc-u0 9000ms infinite}.scene .sc-a0{animation:sc-a0 9000ms infinite}.scene .sc-b0{animation:sc-b0 9000ms infinite}.scene .sc-c0{animation:sc-c0 9000ms infinite}.scene .sc-u1{animation:sc-u1 9000ms infinite}.scene .sc-a1{animation:sc-a1 9000ms infinite}.scene .sc-b1{animation:sc-b1 9000ms infinite}.scene .sc-c1{animation:sc-c1 9000ms infinite}.scene .sc-u2{animation:sc-u2 9000ms infinite}.scene .sc-a2{animation:sc-a2 9000ms infinite}.scene .sc-b2{animation:sc-b2 9000ms infinite}.scene .sc-c2{animation:sc-c2 9000ms infinite}.scene .sc-u3{animation:sc-u3 9000ms infinite}.scene .sc-a3{animation:sc-a3 9000ms infinite}.scene .sc-b3{animation:sc-b3 9000ms infinite}.scene .sc-c3{animation:sc-c3 9000ms infinite}.scene .sc-u4{animation:sc-u4 9000ms infinite}.scene .sc-a4{animation:sc-a4 9000ms infinite}.scene .sc-b4{animation:sc-b4 9000ms infinite}.scene .sc-c4{animation:sc-c4 9000ms infinite}.scene .sc-e1{animation:sc-e1 9000ms infinite}.scene .sc-e2{animation:sc-e2 9000ms infinite}.scene .sc-e3{animation:sc-e3 9000ms infinite}.scene .sc-e4{animation:sc-e4 9000ms infinite}.scene .sc-win{animation:sc-win 9000ms infinite}.scene .sc-s0{animation:sc-s0 9000ms infinite}.scene .sc-s1{animation:sc-s1 9000ms infinite}.scene .sc-s2{animation:sc-s2 9000ms infinite}
@keyframes sc-bub1{0.00%{opacity:0;transform:translateY(-150px)}13.78%{opacity:0;transform:translateY(-150px)}14.00%{opacity:1;transform:translateY(-150px);animation-timing-function:cubic-bezier(.5,0,1,1)}17.78%{opacity:1;transform:translateY(0) scale(1.1,.86)}19.33%{opacity:1;transform:translateY(0) scale(.97,1.03)}20.67%{opacity:1;transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:translateY(-150px)}}@keyframes sc-bub2{0.00%{opacity:0;transform:translateY(-150px)}21.56%{opacity:0;transform:translateY(-150px)}21.78%{opacity:1;transform:translateY(-150px);animation-timing-function:cubic-bezier(.5,0,1,1)}25.56%{opacity:1;transform:translateY(0) scale(1.1,.86)}27.11%{opacity:1;transform:translateY(0) scale(.97,1.03)}28.44%{opacity:1;transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:translateY(-150px)}}@keyframes sc-bub3{0.00%{opacity:0;transform:translateY(-150px)}29.33%{opacity:0;transform:translateY(-150px)}29.56%{opacity:1;transform:translateY(-150px);animation-timing-function:cubic-bezier(.5,0,1,1)}33.33%{opacity:1;transform:translateY(0) scale(1.1,.86)}34.89%{opacity:1;transform:translateY(0) scale(.97,1.03)}36.22%{opacity:1;transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:translateY(-150px)}}@keyframes sc-bub4{0.00%{opacity:0;transform:translateY(-150px)}37.11%{opacity:0;transform:translateY(-150px)}37.33%{opacity:1;transform:translateY(-150px);animation-timing-function:cubic-bezier(.5,0,1,1)}41.11%{opacity:1;transform:translateY(0) scale(1.1,.86)}42.67%{opacity:1;transform:translateY(0) scale(.97,1.03)}44.00%{opacity:1;transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:translateY(-150px)}}@keyframes sc-u0{0.00%{opacity:0;animation-timing-function:step-end}17.78%{opacity:1;animation-timing-function:step-end}25.56%{opacity:0;animation-timing-function:step-end}33.33%{opacity:1;animation-timing-function:step-end}41.11%{opacity:0}100.00%{opacity:0}}@keyframes sc-a0{0.00%{opacity:1;animation-timing-function:step-end}17.78%{opacity:0}93.33%{opacity:0}94.00%{opacity:1}100.00%{opacity:1}}@keyframes sc-b0{0.00%{opacity:0;animation-timing-function:step-end}25.56%{opacity:1;animation-timing-function:step-end}33.33%{opacity:0}100.00%{opacity:0}}@keyframes sc-c0{0.00%{opacity:0;transform:none}41.11%{opacity:0;transform:none}42.67%{transform:scale(1.06)}43.11%{opacity:1}44.00%{transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:none}}@keyframes sc-u1{0.00%{opacity:0;animation-timing-function:step-end}17.78%{opacity:1;animation-timing-function:step-end}25.56%{opacity:0;animation-timing-function:step-end}33.33%{opacity:1;animation-timing-function:step-end}41.11%{opacity:0}100.00%{opacity:0}}@keyframes sc-a1{0.00%{opacity:1;animation-timing-function:step-end}17.78%{opacity:0}93.33%{opacity:0}94.00%{opacity:1}100.00%{opacity:1}}@keyframes sc-b1{0.00%{opacity:0;animation-timing-function:step-end}25.56%{opacity:1;animation-timing-function:step-end}33.33%{opacity:0}100.00%{opacity:0}}@keyframes sc-c1{0.00%{opacity:0;transform:none}41.11%{opacity:0;transform:none}42.44%{transform:none}43.11%{opacity:1}44.00%{transform:scale(1.06)}45.33%{transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:none}}@keyframes sc-u2{0.00%{opacity:0;animation-timing-function:step-end}17.78%{opacity:1;animation-timing-function:step-end}25.56%{opacity:0;animation-timing-function:step-end}33.33%{opacity:1;animation-timing-function:step-end}41.11%{opacity:0}100.00%{opacity:0}}@keyframes sc-a2{0.00%{opacity:1;animation-timing-function:step-end}17.78%{opacity:0}93.33%{opacity:0}94.00%{opacity:1}100.00%{opacity:1}}@keyframes sc-b2{0.00%{opacity:0;animation-timing-function:step-end}25.56%{opacity:1;animation-timing-function:step-end}33.33%{opacity:0}100.00%{opacity:0}}@keyframes sc-c2{0.00%{opacity:0;transform:none}41.11%{opacity:0;transform:none}43.11%{opacity:1}43.78%{transform:none}45.33%{transform:scale(1.06)}46.67%{transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:none}}@keyframes sc-u3{0.00%{opacity:0;animation-timing-function:step-end}17.78%{opacity:1;animation-timing-function:step-end}25.56%{opacity:0;animation-timing-function:step-end}33.33%{opacity:1;animation-timing-function:step-end}41.11%{opacity:0}100.00%{opacity:0}}@keyframes sc-a3{0.00%{opacity:1;animation-timing-function:step-end}17.78%{opacity:0}93.33%{opacity:0}94.00%{opacity:1}100.00%{opacity:1}}@keyframes sc-b3{0.00%{opacity:0;animation-timing-function:step-end}25.56%{opacity:1;animation-timing-function:step-end}33.33%{opacity:0}100.00%{opacity:0}}@keyframes sc-c3{0.00%{opacity:0;transform:none}41.11%{opacity:0;transform:none}43.11%{opacity:1}45.11%{transform:none}46.67%{transform:scale(1.06)}48.00%{transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:none}}@keyframes sc-u4{0.00%{opacity:0;animation-timing-function:step-end}17.78%{opacity:1;animation-timing-function:step-end}25.56%{opacity:0;animation-timing-function:step-end}33.33%{opacity:1;animation-timing-function:step-end}41.11%{opacity:0}100.00%{opacity:0}}@keyframes sc-a4{0.00%{opacity:1;animation-timing-function:step-end}17.78%{opacity:0}93.33%{opacity:0}94.00%{opacity:1}100.00%{opacity:1}}@keyframes sc-b4{0.00%{opacity:0;animation-timing-function:step-end}25.56%{opacity:1;animation-timing-function:step-end}33.33%{opacity:0}100.00%{opacity:0}}@keyframes sc-c4{0.00%{opacity:0;transform:none}41.11%{opacity:0;transform:none}43.11%{opacity:1}46.44%{transform:none}48.00%{transform:scale(1.06)}49.33%{transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:none}}@keyframes sc-e1{0.00%{opacity:0}17.78%{opacity:0}18.67%{opacity:1}88.89%{opacity:1}93.33%{opacity:0}100.00%{opacity:0}}@keyframes sc-e2{0.00%{opacity:0}25.56%{opacity:0}26.44%{opacity:1}88.89%{opacity:1}93.33%{opacity:0}100.00%{opacity:0}}@keyframes sc-e3{0.00%{opacity:0}33.33%{opacity:0}34.22%{opacity:1}88.89%{opacity:1}93.33%{opacity:0}100.00%{opacity:0}}@keyframes sc-e4{0.00%{opacity:0}41.11%{opacity:0}42.00%{opacity:1}88.89%{opacity:1}93.33%{opacity:0}100.00%{opacity:0}}@keyframes sc-win{0.00%{opacity:0;transform:translateY(12px)}50.00%{opacity:0;transform:translateY(12px)}53.33%{opacity:1;transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:translateY(12px)}}@keyframes sc-s0{0.00%{opacity:0;transform:scale(0)}54.44%{opacity:0;transform:scale(0)}56.44%{opacity:1;transform:scale(1.3)}58.00%{opacity:1;transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:scale(0)}}@keyframes sc-s1{0.00%{opacity:0;transform:scale(0)}56.22%{opacity:0;transform:scale(0)}58.22%{opacity:1;transform:scale(1.3)}59.78%{opacity:1;transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:scale(0)}}@keyframes sc-s2{0.00%{opacity:0;transform:scale(0)}58.00%{opacity:0;transform:scale(0)}60.00%{opacity:1;transform:scale(1.3)}61.56%{opacity:1;transform:none}88.89%{opacity:1;transform:none}93.33%{opacity:0;transform:none}100.00%{opacity:0;transform:scale(0)}}
@media (prefers-reduced-motion:reduce){.scene *{animation:none !important}}