
  :root { --bg:#FBFAF6; --ink:#1D1C18; --muted:#77746A; }
  * { box-sizing:border-box; margin:0; padding:0; }
  html, body { min-height:100%; }
  body {
    background:var(--bg); color:var(--ink);
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .stage { position:fixed; inset:0; overflow:hidden; }
  .blobs { position:absolute; inset:0; filter:blur(58px); }
  .blob { position:absolute; border-radius:50%; will-change:transform; --s:min(100vw, 150vh); }
  .b1 { width:calc(var(--s)*.58); height:calc(var(--s)*.58); left:20%; top:22%;
        background:rgba(255,221,45,.55); animation:m1 20s ease-in-out infinite alternate; }
  .b2 { width:calc(var(--s)*.72); height:calc(var(--s)*.72); left:-5%; top:10%;
        background:rgba(255,238,170,.80); animation:m2 16s ease-in-out 2s infinite alternate; }
  .b3 { width:calc(var(--s)*.80); height:calc(var(--s)*.80); left:30%; top:50%;
        background:rgba(250,246,230,.95); animation:m3 22s ease-in-out 1s infinite alternate; }
  @keyframes m1 { to { transform:translate(70px,-60px) scale(1.25); } }
  @keyframes m2 { to { transform:translate(-80px,70px) scale(1.15); } }
  @keyframes m3 { to { transform:translate(60px,80px) scale(1.30); } }

  main { position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; }
  .brand { flex:1; display:flex; align-items:center; justify-content:center; padding:0 24px; text-align:center; }
  .home h1 { font-size:clamp(34px, 6.2vw, 76px); line-height:1.05; letter-spacing:-.02em; white-space:nowrap;
       opacity:0; transform:translateY(10px); animation:rise 1.4s cubic-bezier(.2,.7,.2,1) .25s forwards; }
  h1 b { font-weight:900; color:var(--ink); }
  h1 span { font-weight:600; color:var(--muted); }
  @keyframes rise { to { opacity:1; transform:none; } }

  footer { padding:0 24px calc(26px + env(safe-area-inset-bottom)); display:flex; gap:10px; align-items:center;
           font-size:13px; color:var(--muted); opacity:0; animation:rise 1.2s ease 1.1s forwards; }
  footer a { color:var(--muted); text-decoration:none; padding:8px 4px; border-radius:6px; transition:color .2s; }
  footer a:hover, footer a:focus-visible { color:var(--ink); }
  footer a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  footer i { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }

  @media (prefers-reduced-motion: reduce) {
    .blob, .home h1, footer { animation:none; opacity:1; transform:none; }
  }

.home { height:100vh; height:100svh; overflow:hidden; }
.home main { height:100%; min-height:0; }
.stage { pointer-events:none; }
.brand-content { display:flex; flex-direction:column; align-items:center; gap:20px; }
.sparkle-logo { position:relative; width:306px; height:270px; display:grid; place-items:center; }
.sparkle-logo img { position:relative; width:178px; height:178px; object-fit:contain; }
.spark { position:absolute; left:50%; top:50%; width:calc(21.36px * var(--scale)); height:calc(21.36px * var(--scale)); background:#FFDD2D; clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%); filter:drop-shadow(0 0 4px #FFDD2D47); animation:sparkle 2.381s linear var(--delay) infinite; opacity:0; }
.spark:nth-of-type(3n+1) { background:#FF9500; }
.spark:nth-of-type(even) { clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
@keyframes sparkle { 0% { opacity:0; transform:translate(calc(var(--x)*32px),calc(var(--y)*25px)) scale(.45) rotate(var(--rotation)); } 45% { opacity:.98; transform:translate(calc(var(--x)*116px),calc(var(--y)*90px)) scale(1.3) rotate(calc(var(--rotation) + 67deg)); } 100% { opacity:0; transform:translate(calc(var(--x)*135px),calc(var(--y)*106px)) scale(.45) rotate(calc(var(--rotation) + 150deg)); } }
footer { flex-shrink:0; }
a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.document { width:min(100%,680px); padding:56px 24px 40px; flex:1; font-size:16px; line-height:1.65; overflow-wrap:anywhere; }
.small-logo { display:block; width:56px; margin:0 auto 28px; }
.small-logo img { display:block; object-fit:contain; }
.document h1 { text-align:center; font-size:34px; line-height:1.2; letter-spacing:-.02em; margin-bottom:32px; }
.document h2 { font-size:20px; line-height:1.35; margin:32px 0 10px; }
.document p { margin-bottom:16px; }
.document a { color:var(--ink); text-underline-offset:3px; }
.document .intro { color:var(--muted); }
.document .owner { font-size:12px; color:var(--muted); text-align:center; margin:36px 0 0; }
.document-page .blob { animation:none; will-change:auto; }
.document-page .blobs {
  /* Fade into the page colour even when a browser captures a long document. */
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
}
.support-page .document { display:flex; flex-direction:column; justify-content:center; max-width:580px; }
@media (max-width:380px) { .home h1 { font-size:30px; } .brand { padding:0 12px; } .sparkle-logo { width:280px; } }
@media (max-height:520px) { .sparkle-logo { height:145px; } .sparkle-logo img { width:105px; height:105px; } .brand-content { gap:8px; } .home h1 { font-size:34px; } }
@media (prefers-reduced-motion:reduce) { .blob,.home h1,footer,.spark { animation:none; transform:none; will-change:auto; } .home h1,footer { opacity:1; } .spark { opacity:.55; transform:translate(calc(var(--x)*116px),calc(var(--y)*90px)) scale(.8); } footer a { transition:none; } }
.p1 { --x:-0.9487; --y:-0.3161; --scale:0.78; --delay:-0.0476s; --rotation:0deg; }
.p2 { --x:-0.6663; --y:-0.7457; --scale:0.48; --delay:-0.9048s; --rotation:17deg; }
.p3 { --x:-0.1782; --y:-0.9840; --scale:0.64; --delay:-1.7619s; --rotation:34deg; }
.p4 { --x:0.3993; --y:-0.9168; --scale:0.42; --delay:-0.4286s; --rotation:51deg; }
.p5 { --x:0.8419; --y:-0.5396; --scale:0.82; --delay:-1.3333s; --rotation:68deg; }
.p6 { --x:0.9992; --y:-0.0400; --scale:0.46; --delay:-2.1429s; --rotation:85deg; }
.p7 { --x:0.8678; --y:0.4969; --scale:0.68; --delay:-0.6667s; --rotation:102deg; }
.p8 { --x:0.4976; --y:0.8674; --scale:0.42; --delay:-1.5714s; --rotation:119deg; }
.p9 { --x:-0.0092; --y:1.0000; --scale:0.76; --delay:-0.2381s; --rotation:136deg; }
.p10 { --x:-0.5048; --y:0.8632; --scale:0.44; --delay:-1.1429s; --rotation:153deg; }
.p11 { --x:-0.8720; --y:0.4896; --scale:0.62; --delay:-2.0000s; --rotation:170deg; }
