/* GENERATED by .tools/space-css.py from the .src.css file. Do not edit. */
/* pfs-space-home.css: the Home page (phonics-land.html) in the owner's "deep
   space" look, copied from their Claude Design export "Phonics Land.html"
   (20 Oct 2026). Every value here is the export's own.

   It restyles what the page already draws: the same words, the same buttons,
   the same islands and progress. Nothing is added to or taken away from the
   page's content. Parts the export does not show (the trial family's island
   card, a finished badge, a locked island) take the look of the nearest part
   the export does show.

   Built from css/pfs-space-home.src.css by .tools/space-css.py. */

/* ---------- The page frame ---------- */
.pfs-space main {
  position: relative; z-index: 2;
  max-width: 1240px !important; margin: 0 auto !important;
  padding: 28px clamp(12px, 3vw, 28px) 90px !important;
}

/* The design's buttons use the browser's own button text settings (normal
   line spacing), while this site's base.css makes buttons inherit the page's
   1.55. Put back the design's spacing on the design's buttons. */
.pfs-space .pfs-cont, .pfs-space .pfs-mi, .pfs-space .pfs-node, .pfs-space .pfs-phh, .pfs-space .pfs-go { line-height: normal; }

/* ---------- The island path card ---------- */
.pfs-space .pfs-path {
  position: relative; margin-top: 0; background: var(--color-bg); border-radius: 36px;
  padding: clamp(18px, 3vw, 32px);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 40px 80px -30px rgba(0,0,0,0.7); box-shadow: 0 0 0 6px oklch(1 0 0 / .08), 0 40px 80px -30px oklch(0 0 0 / .7);
}
.pfs-space .pfs-day {
  display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 0 16px;
  padding: 8px 18px; border-radius: 999px; background: rgba(24,28,71,1); background: oklch(0.25 0.08 275);
  color: rgba(254,226,150,1); color: oklch(0.92 0.1 90); font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 0 rgba(6,7,36,1); box-shadow: 0 4px 0 oklch(0.15 0.06 275);
}

/* How it works, in three steps. */
.pfs-space .pfs-s3 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px; margin: 0 0 18px;
}
.pfs-space .pfs-s3 div {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px;
  background: var(--color-neutral-100); font-weight: 800; font-size: 15px;
  box-shadow: 0 5px 0 var(--color-neutral-300);
}
.pfs-space .pfs-s3 b {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  color: var(--color-neutral-100); font-family: var(--font-heading); font-size: 18px; font-weight: 400;
  background: radial-gradient(circle at 32% 28%, rgba(95,184,242,1), rgba(46,79,162,1)); background: radial-gradient(circle at 32% 28%, oklch(0.75 0.12 240), oklch(0.45 0.14 265));
  box-shadow: inset -3px -4px 6px rgba(0,0,0,0.25); box-shadow: inset -3px -4px 6px oklch(0 0 0 / .25);
}
.pfs-space .pfs-pill {
  background: var(--color-accent); color: var(--color-neutral-100); border-radius: 999px;
  padding: 3px 11px; margin: 0 3px; white-space: nowrap;
}

/* The Continue button. */
.pfs-space .pfs-cont {
  position: relative; width: 100%; display: flex; align-items: center; gap: 18px; padding: 18px 22px;
  border: 0; border-radius: 28px; cursor: pointer; text-align: left; overflow: hidden;
  font-family: inherit; color: var(--color-neutral-100);
  background: radial-gradient(ellipse at 85% 50%, var(--color-accent-400), transparent 60%), linear-gradient(180deg, var(--color-accent-500), var(--color-accent-600));
  box-shadow: 0 8px 0 var(--color-accent-800), 0 22px 30px -16px var(--color-accent-800);
  transition: transform .12s, box-shadow .12s;
}
.pfs-space .pfs-cont:hover { transform: translateY(-2px); }
.pfs-space .pfs-cont:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--color-accent-800); }
.pfs-space .pfs-cont .pfs-play {
  width: 60px; height: 60px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; background: rgba(255,255,255,0.22); background: oklch(1 0 0 / .22); box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35); box-shadow: inset 0 0 0 3px oklch(1 0 0 / .35);
}
.pfs-space .pfs-cont .pfs-cw { min-width: 0; flex: 1; }
.pfs-space .pfs-cont .pfs-cw > br { display: none; }
.pfs-space .pfs-cont .pfs-ct {
  display: block; font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.05;
}
.pfs-space .pfs-cont .pfs-cs {
  display: block; font-weight: 700; font-size: 16px; margin-top: 4px; opacity: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pfs-space .pfs-crk { position: relative; width: 90px; height: 60px; flex: 0 0 auto; }

/* Today's mission. */
.pfs-space .pfs-mis {
  margin-top: 18px; background: var(--color-neutral-100); border-radius: 26px;
  padding: 16px 18px 18px; box-shadow: 0 6px 0 rgba(232,190,98,1); box-shadow: 0 6px 0 oklch(0.82 0.12 85);
}
.pfs-space .pfs-mh { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.pfs-space .pfs-mt { font-family: var(--font-heading); font-weight: 400; font-size: 22px; }
.pfs-space .pfs-mh small { font-weight: 800; font-size: 14px; color: var(--color-neutral-700); }
.pfs-space .pfs-mrow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px; margin-top: 12px;
}
.pfs-space .pfs-mi {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px;
  border-radius: 18px; cursor: pointer; text-align: left; font-family: inherit; font-size: 15px;
  color: var(--color-text); background: var(--color-bg); border: 2px solid var(--color-neutral-300);
  transition: transform .14s;
}
.pfs-space .pfs-mi:hover { transform: translateY(-3px); }
.pfs-space .pfs-mi:active { transform: translateY(2px); }
.pfs-space .pfs-mi.now { background: var(--color-accent-100); border-color: var(--color-accent); }
.pfs-space .pfs-mi.ok { background: var(--color-accent-2-100); border-color: var(--color-accent-2-300); }
.pfs-space .pfs-mn {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: var(--color-neutral-100); color: var(--color-text);
  border: 2px solid var(--color-neutral-300);
}
.pfs-space .pfs-mi.now .pfs-mn { background: var(--color-accent); color: var(--color-neutral-100); border-color: var(--color-accent); }
.pfs-space .pfs-mi.ok .pfs-mn { background: var(--color-accent-2-700); color: var(--color-neutral-100); border-color: var(--color-accent-2-700); }
.pfs-space .pfs-mi b { min-width: 0; font-weight: 800; line-height: 1.2; }
.pfs-space .pfs-ico { width: 24px; flex: 0 0 auto; text-align: center; font-size: 19px; line-height: inherit; }

/* ---------- The island map ---------- */
.pfs-space .pfs-voice { margin: 26px 0 6px; font-weight: 800; font-size: 16px; color: rgba(29,69,135,1); color: oklch(0.4 0.12 260); }
.pfs-space .pfs-map {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 18px 8px; margin: 10px 0 8px; padding: 22px 12px 18px; border-radius: 30px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(49,46,118,1), rgba(10,12,48,1) 75%); background: radial-gradient(ellipse at 50% 0%, oklch(0.35 0.12 280), oklch(0.18 0.07 275) 75%);
}
.pfs-space .pfs-msky { position: absolute; inset: 0; pointer-events: none; }
.pfs-space .pfs-link { display: none; }
.pfs-space .pfs-node {
  position: relative; z-index: 1; isolation: isolate; width: auto; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 10px 4px; background: none; border: 0; cursor: pointer;
  border-radius: 24px; text-align: center; font-family: inherit; transition: transform .2s;
}
.pfs-space .pfs-node:hover { transform: translateY(-6px) scale(1.04); }
.pfs-space .pfs-node:active { transform: scale(.97); }
/* The planet: the island's picture inside a ring of its colour, with a
   Saturn ring around it (one half behind the planet, one half in front). */
.pfs-space .pfs-img, .pfs-space .pfs-node.cur .pfs-img, .pfs-space .pfs-node.lock .pfs-img {
  position: relative; display: block; width: 110px; height: 110px; flex: 0 0 auto; box-sizing: border-box;
  padding: 4px; border-radius: 50%; background: var(--ring); filter: none; opacity: 1;
  box-shadow: 0 0 22px var(--ring-glow, transparent);
}
.pfs-space .pfs-img img, .pfs-space .pfs-node.lock .pfs-img img {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: none; opacity: 1;
}
.pfs-space .pfs-hl {
  position: absolute; inset: 4px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.6), transparent 34%), radial-gradient(circle at 70% 78%, rgba(0,0,0,0.38), transparent 60%); background: radial-gradient(circle at 32% 26%, oklch(1 0 0 / .6), transparent 34%), radial-gradient(circle at 70% 78%, oklch(0 0 0 / .38), transparent 60%);
}
.pfs-space .pfs-rb, .pfs-space .pfs-rf {
  position: absolute; left: -18px; right: -18px; top: 38px; height: 34px; border-radius: 50%;
  border: 3px solid var(--ring); transform: rotate(-14deg); pointer-events: none;
}
.pfs-space .pfs-rb { opacity: .7; z-index: -1; }
.pfs-space .pfs-rf { clip-path: inset(50% 0 0 0); }
.pfs-space .pfs-node.cur .pfs-img { box-shadow: none; animation: pfGlow 2.2s ease-in-out infinite; }
/* A resting island (trial families only) is greyed, the ring too. */
.pfs-space .pfs-node.lock .pfs-img img { filter: grayscale(1); opacity: .55; }
.pfs-space .pfs-node.lock .pfs-img { background: #9a9aa6; box-shadow: none; }
.pfs-space .pfs-node.lock .pfs-rb, .pfs-space .pfs-node.lock .pfs-rf { border-color: #9a9aa6; }
.pfs-space .pfs-me {
  position: absolute; top: 2px; left: 50%; margin-left: -17px; transform: none; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(46,177,239,1); background: oklch(0.72 0.14 235); color: var(--color-neutral-100);
  font-family: var(--font-body); font-weight: 800; font-size: 16px; line-height: normal;
  border: 3px solid var(--color-neutral-100); animation: pfPulse 1.6s ease-out infinite;
}
.pfs-space .pfs-txt { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; min-width: 0; }
.pfs-space .pfs-nm {
  display: block; margin-top: 10px; font-family: var(--font-heading); font-weight: 400; font-size: 16px;
  line-height: 1.15; color: var(--color-neutral-100); text-align: center;
}
.pfs-space .pfs-sub {
  display: block; font-weight: 700; font-size: 12.5px; color: rgba(201,209,229,1); color: oklch(0.86 0.03 270);
  text-align: center; max-width: 16ch;
}
.pfs-space .pfs-tag {
  display: inline-block; align-self: center; margin-top: 4px; padding: 3px 11px; border-radius: 999px;
  font-weight: 800; font-size: 12px;
}
.pfs-space .pfs-tag.t-cur { background: var(--color-accent); color: var(--color-neutral-100); }
.pfs-space .pfs-tag.t-next { background: rgba(253,219,124,1); background: oklch(0.9 0.12 90); color: rgba(65,40,5,1); color: oklch(0.3 0.06 70); }
.pfs-space .pfs-tag.t-open { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.pfs-space .pfs-tag.t-done { background: #FFE7A3; color: #6A4A00; }
.pfs-space .pfs-tag.t-lock { background: #EEF0F5; color: #5D6375; }

/* ---------- The phases, one by one ---------- */
.pfs-space .pfs-pp { margin-top: 28px; display: grid; gap: 12px; }
.pfs-space .pfs-pph { display: flex; flex-direction: column; gap: 4px; margin-bottom: 2px; }
.pfs-space .pfs-pph span {
  font-family: var(--font-heading); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15;
}
.pfs-space .pfs-pph small { font-weight: 700; font-size: 14px; color: var(--color-neutral-700); text-wrap: pretty; }
.pfs-space .pfs-ph, .pfs-space .pfs-ph.done {
  background: var(--color-neutral-100); border-radius: 26px; overflow: hidden; outline: 0 solid transparent;
  box-shadow: 0 6px 0 var(--color-neutral-300);
}
.pfs-space .pfs-ph.cur { outline: 3px solid var(--color-accent); box-shadow: 0 6px 0 var(--color-accent-300); }
.pfs-space .pfs-phh {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: none;
  border: 0; cursor: pointer; text-align: left; color: var(--color-text); font-family: inherit;
}
.pfs-space .pfs-ph:not(.open) .pfs-phh:hover { background: var(--color-accent-100); }
.pfs-space .pfs-pn, .pfs-space .pfs-ph.cur .pfs-pn, .pfs-space .pfs-ph.done .pfs-pn {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 400; font-size: 19px; color: var(--color-neutral-100);
  background: radial-gradient(circle at 32% 28%, rgba(95,184,242,1), rgba(46,79,162,1)); background: radial-gradient(circle at 32% 28%, oklch(0.75 0.12 240), oklch(0.45 0.14 265));
  box-shadow: inset -3px -4px 6px rgba(0,0,0,0.25); box-shadow: inset -3px -4px 6px oklch(0 0 0 / .25);
}
.pfs-space .pfs-ph.cur .pfs-pn { background: radial-gradient(circle at 32% 28%, var(--color-accent-300), var(--color-accent-700)); }
.pfs-space .pfs-ph.done .pfs-pn { background: radial-gradient(circle at 32% 28%, var(--color-accent-2-400), var(--color-accent-2-700)); }
.pfs-space .pfs-phh img {
  display: block; width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--color-neutral-300);
}
.pfs-space .pfs-ph.cur .pfs-phh img { box-shadow: 0 0 0 3px var(--color-accent-200); }
.pfs-space .pfs-pw { flex: 1; min-width: 0; }
.pfs-space .pfs-pt { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 19px; line-height: 1.1; }
.pfs-space .pfs-ps { display: block; font-weight: 800; font-size: 13px; color: var(--color-neutral-700); margin-top: 2px; }
.pfs-space .pfs-pw .pfs-bar {
  position: relative; display: block; width: auto; height: 12px; margin: 8px 0 0; border-radius: 999px;
  background: var(--color-neutral-200); overflow: visible;
}
.pfs-space .pfs-pw .pfs-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; height: auto; border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent-2-400), var(--color-accent-2-600));
}
.pfs-space .pfs-brk { position: absolute; top: 50%; transform: translate(-40%, -55%) rotate(45deg); font-size: 18px; }
.pfs-space .pfs-pst, .pfs-space .pfs-ph.done .pfs-pst {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 13px;
  white-space: nowrap; background: var(--color-neutral-200); color: var(--color-neutral-800);
}
.pfs-space .pfs-ph.cur .pfs-pst { background: var(--color-accent); color: var(--color-neutral-100); }
.pfs-space .pfs-ph.done .pfs-pst { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }

/* The open phase: what the child learns, then the core path. */
.pfs-space .pfs-pb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 4px 18px 18px; }
.pfs-space .pfs-col { min-width: 0; }
.pfs-space .pfs-col.wide { grid-column: auto; display: grid; gap: 10px; }
.pfs-space .pfs-lab {
  display: block; margin-bottom: 6px; font-weight: 800; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(34,74,141,1); color: oklch(0.42 0.12 260);
}
.pfs-space .pfs-col.wide > .pfs-lab { margin-bottom: 0; }
.pfs-space .pfs-col ul { margin: 0; padding-left: 22px; font-weight: 700; line-height: 1.75; }
.pfs-space .pfs-step {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 12px; border-radius: 18px;
  background: var(--color-bg); border: 2px solid var(--color-neutral-300);
}
.pfs-space .pfs-step.now { background: var(--color-accent-100); border-color: var(--color-accent); }
.pfs-space .pfs-step.done { background: var(--color-accent-2-100); border-color: var(--color-accent-2-300); }
.pfs-space .pfs-num, .pfs-space .pfs-step.now .pfs-num, .pfs-space .pfs-step.done .pfs-num {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; background: var(--color-neutral-100); color: var(--color-text);
  border: 2px solid var(--color-neutral-300);
}
.pfs-space .pfs-step.now .pfs-num { background: var(--color-accent); color: var(--color-neutral-100); border-color: var(--color-accent); }
.pfs-space .pfs-step.done .pfs-num { background: var(--color-accent-2-700); color: var(--color-neutral-100); border-color: var(--color-accent-2-700); }
.pfs-space .pfs-sti { flex: 1 1 140px; min-width: 0; }
.pfs-space .pfs-sti b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
.pfs-space .pfs-sti small { font-weight: 700; font-size: 12.5px; color: var(--color-neutral-700); }
.pfs-space .pfs-go {
  flex: 0 0 auto; width: auto; margin-top: 0; min-height: 46px; padding: 0 20px; border-radius: 999px;
  cursor: pointer; font-family: inherit; font-weight: 800; font-size: 15px;
}
.pfs-space .pfs-go.on {
  border: 0; background: var(--color-accent); color: var(--color-neutral-100);
  box-shadow: 0 4px 0 var(--color-accent-800);
}
.pfs-space .pfs-go.on:hover { background: var(--color-accent-600); }
.pfs-space .pfs-go.on:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-accent-800); }
.pfs-space .pfs-go.off {
  background: var(--color-neutral-100); color: var(--color-neutral-800);
  border: 2px solid var(--color-neutral-300); box-shadow: none;
}
.pfs-space .pfs-go.off:hover { background: var(--color-accent-100); }
.pfs-space .pfs-stars {
  flex: 0 0 auto; color: rgba(226,160,0,1); color: oklch(0.75 0.16 80); font-size: 18px; letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(157,99,0,1); text-shadow: 0 2px 0 oklch(0.55 0.12 70);
}
.pfs-space .pfs-lk { flex: 0 0 auto; font-weight: 800; font-size: 13px; color: var(--color-neutral-700); }
.pfs-space .pfs-col .pfs-fin {
  margin: 0; padding: 13px 16px; border-radius: 18px; text-align: left;
  background: rgba(255,241,204,1); background: oklch(0.96 0.05 90); border: 2px solid rgba(240,213,146,1); border: 2px solid oklch(0.88 0.09 88); box-shadow: none;
  font-weight: 700; font-size: 14.5px; line-height: 1.45;
}

/* A trial family's island card: the export shows the paid family's path, so
   this card takes the look of the export's open phase card. */
.pfs-space .pfs-card {
  margin-top: 18px; padding: 18px; border-radius: 26px; background: var(--color-neutral-100);
  box-shadow: 0 6px 0 var(--color-neutral-300);
}
.pfs-space .pfs-ch img { width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-accent-200); }
.pfs-space .pfs-cn { font-family: var(--font-heading); font-weight: 400; font-size: 19px; line-height: 1.1; }
.pfs-space .pfs-cm, .pfs-space .pfs-bn { font-weight: 800; font-size: 13px; color: var(--color-neutral-700); }
.pfs-space .pfs-card > .pfs-bar { height: 12px; margin: 10px 0 4px; background: var(--color-neutral-200); }
.pfs-space .pfs-card > .pfs-bar i { background: linear-gradient(90deg, var(--color-accent-2-400), var(--color-accent-2-600)); }
.pfs-space .pfs-steps { display: grid; gap: 10px; margin-top: 14px; }
.pfs-space .pfs-done {
  margin-top: 14px; padding: 13px 16px; border-radius: 18px; background: rgba(255,241,204,1); background: oklch(0.96 0.05 90);
  border: 2px solid rgba(240,213,146,1); border: 2px solid oklch(0.88 0.09 88); font-weight: 700; font-size: 14.5px; line-height: 1.45;
}

/* ---------- The badges ---------- */
.pfs-space .pfs-bg {
  position: relative; margin-top: 18px; padding: 20px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(ellipse at 90% 0%, rgba(73,54,135,1), rgba(14,17,53,1) 70%); background: radial-gradient(ellipse at 90% 0%, oklch(0.4 0.13 290), oklch(0.2 0.07 275) 70%);
  color: var(--color-neutral-100); box-shadow: none;
}
.pfs-space .pfs-bsky { position: absolute; inset: 0; pointer-events: none; }
.pfs-space .pfs-bg > span.pfs-bgt { position: relative; font-family: var(--font-heading); font-weight: 400; font-size: 21px; }
.pfs-space .pfs-brow { position: relative; display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 12px; }
.pfs-space .pfs-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; }
.pfs-space .pfs-bmed {
  position: relative; display: block; width: 62px; height: 62px; box-sizing: border-box; padding: 4px;
  border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(169,174,187,1), rgba(65,71,88,1)); background: radial-gradient(circle at 32% 28%, oklch(0.75 0.02 270), oklch(0.4 0.03 270));
  box-shadow: 0 6px 0 rgba(6,8,32,1); box-shadow: 0 6px 0 oklch(0.15 0.05 275);
}
.pfs-space .pfs-badge img {
  display: block; width: 100%; height: 100%; border: 0; border-radius: 50%; object-fit: cover;
  filter: grayscale(1); opacity: .5;
}
.pfs-space .pfs-badge.got img { filter: none; opacity: 1; border: 0; }
.pfs-space .pfs-badge.got .pfs-bmed { background: radial-gradient(circle at 32% 28%, rgba(254,226,150,1), rgba(202,138,16,1)); background: radial-gradient(circle at 32% 28%, oklch(0.92 0.1 90), oklch(0.68 0.14 75)); }
.pfs-space .pfs-badge small { font-weight: 800; font-size: 12px; color: rgba(208,215,236,1); color: oklch(0.88 0.03 270); text-align: center; }
.pfs-space .pfs-bg > small { position: relative; font-weight: 800; font-size: 14px; color: rgba(243,220,161,1); color: oklch(0.9 0.08 90); }
.pfs-space .pfs-bg .pfs-cert { position: relative; }

/* ---------- Quick links under the path ---------- */
/* display is not !important: the page hides this row with an inline style
   when a child opens a phase. */
.pfs-space #quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)) !important;
  gap: 16px; margin-top: 36px;
}
.pfs-space #quick-links > a {
  position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px;
  border-radius: 26px; border: 0; text-decoration: none; color: var(--color-text); background: var(--color-bg);
  transition: transform .16s;
}
.pfs-space #quick-links > a:hover { transform: translateY(-6px) rotate(-1deg); }
.pfs-space #quick-links > a:active { transform: translateY(3px); }
.pfs-space .pfs-ql-orb {
  width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 30px;
}
.pfs-space .pfs-ql-w { min-width: 0; }
.pfs-space .pfs-ql-t { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 17px; line-height: 1.15; }
.pfs-space .pfs-ql-s { display: block; margin-top: 3px; font-weight: 700; font-size: 13px; color: var(--color-neutral-700); overflow-wrap: anywhere; }
/* Each card's own colour, as in the export. */
.pfs-space #quick-links > a[href="sing-along.html"] { box-shadow: 0 6px 0 rgba(140,162,228,1), 0 20px 30px -18px rgba(0,0,0,0.7); box-shadow: 0 6px 0 oklch(0.72 0.1 270), 0 20px 30px -18px oklch(0 0 0 / .7); }
.pfs-space #quick-links > a[href="sing-along.html"] .pfs-ql-orb { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(140,162,228,1) 75%); background: radial-gradient(circle at 32% 28%, oklch(1 0 0 / .9), oklch(0.72 0.1 270) 75%); box-shadow: inset -4px -6px 10px rgba(0,0,0,0.2), 0 6px 12px -4px rgba(140,162,228,1); box-shadow: inset -4px -6px 10px oklch(0 0 0 / .2), 0 6px 12px -4px oklch(0.72 0.1 270); }
.pfs-space #quick-links > a[href="game-arcade.html"] { box-shadow: 0 6px 0 rgba(225,129,176,1), 0 20px 30px -18px rgba(0,0,0,0.7); box-shadow: 0 6px 0 oklch(0.72 0.13 350), 0 20px 30px -18px oklch(0 0 0 / .7); }
.pfs-space #quick-links > a[href="game-arcade.html"] .pfs-ql-orb { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(225,129,176,1) 75%); background: radial-gradient(circle at 32% 28%, oklch(1 0 0 / .9), oklch(0.72 0.13 350) 75%); box-shadow: inset -4px -6px 10px rgba(0,0,0,0.2), 0 6px 12px -4px rgba(225,129,176,1); box-shadow: inset -4px -6px 10px oklch(0 0 0 / .2), 0 6px 12px -4px oklch(0.72 0.13 350); }
.pfs-space #quick-links > a[href="reading-comprehension.html"] { box-shadow: 0 6px 0 rgba(97,183,222,1), 0 20px 30px -18px rgba(0,0,0,0.7); box-shadow: 0 6px 0 oklch(0.74 0.1 230), 0 20px 30px -18px oklch(0 0 0 / .7); }
.pfs-space #quick-links > a[href="reading-comprehension.html"] .pfs-ql-orb { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(97,183,222,1) 75%); background: radial-gradient(circle at 32% 28%, oklch(1 0 0 / .9), oklch(0.74 0.1 230) 75%); box-shadow: inset -4px -6px 10px rgba(0,0,0,0.2), 0 6px 12px -4px rgba(97,183,222,1); box-shadow: inset -4px -6px 10px oklch(0 0 0 / .2), 0 6px 12px -4px oklch(0.74 0.1 230); }
.pfs-space #quick-links > a[href="practice-sheets.html"] { box-shadow: 0 6px 0 var(--color-accent-2-400), 0 20px 30px -18px rgba(0,0,0,0.7); box-shadow: 0 6px 0 var(--color-accent-2-400), 0 20px 30px -18px oklch(0 0 0 / .7); }
.pfs-space #quick-links > a[href="practice-sheets.html"] .pfs-ql-orb { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), var(--color-accent-2-400) 75%); background: radial-gradient(circle at 32% 28%, oklch(1 0 0 / .9), var(--color-accent-2-400) 75%); box-shadow: inset -4px -6px 10px rgba(0,0,0,0.2), 0 6px 12px -4px var(--color-accent-2-400); box-shadow: inset -4px -6px 10px oklch(0 0 0 / .2), 0 6px 12px -4px var(--color-accent-2-400); }
.pfs-space #quick-links > a[href="inclusion-corner.html"] { box-shadow: 0 6px 0 rgba(228,183,80,1), 0 20px 30px -18px rgba(0,0,0,0.7); box-shadow: 0 6px 0 oklch(0.8 0.13 85), 0 20px 30px -18px oklch(0 0 0 / .7); }
.pfs-space #quick-links > a[href="inclusion-corner.html"] .pfs-ql-orb { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(228,183,80,1) 75%); background: radial-gradient(circle at 32% 28%, oklch(1 0 0 / .9), oklch(0.8 0.13 85) 75%); box-shadow: inset -4px -6px 10px rgba(0,0,0,0.2), 0 6px 12px -4px rgba(228,183,80,1); box-shadow: inset -4px -6px 10px oklch(0 0 0 / .2), 0 6px 12px -4px oklch(0.8 0.13 85); }
.pfs-space #quick-links > a[href="grammar-heroes.html"] { box-shadow: 0 6px 0 var(--color-accent-400), 0 20px 30px -18px rgba(0,0,0,0.7); box-shadow: 0 6px 0 var(--color-accent-400), 0 20px 30px -18px oklch(0 0 0 / .7); }
.pfs-space #quick-links > a[href="grammar-heroes.html"] .pfs-ql-orb { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), var(--color-accent-400) 75%); background: radial-gradient(circle at 32% 28%, oklch(1 0 0 / .9), var(--color-accent-400) 75%); box-shadow: inset -4px -6px 10px rgba(0,0,0,0.2), 0 6px 12px -4px var(--color-accent-400); box-shadow: inset -4px -6px 10px oklch(0 0 0 / .2), 0 6px 12px -4px var(--color-accent-400); }
.pfs-space #quick-links > a[href="storytime.html"] { box-shadow: 0 6px 0 rgba(169,142,217,1), 0 20px 30px -18px rgba(0,0,0,0.7); box-shadow: 0 6px 0 oklch(0.7 0.11 300), 0 20px 30px -18px oklch(0 0 0 / .7); }
.pfs-space #quick-links > a[href="storytime.html"] .pfs-ql-orb { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), rgba(169,142,217,1) 75%); background: radial-gradient(circle at 32% 28%, oklch(1 0 0 / .9), oklch(0.7 0.11 300) 75%); box-shadow: inset -4px -6px 10px rgba(0,0,0,0.2), 0 6px 12px -4px rgba(169,142,217,1); box-shadow: inset -4px -6px 10px oklch(0 0 0 / .2), 0 6px 12px -4px oklch(0.7 0.11 300); }

@media (prefers-reduced-motion: reduce) {
  .pfs-space .pfs-node.cur .pfs-img { animation: none; }
  .pfs-space .pfs-node, .pfs-space .pfs-mi, .pfs-space .pfs-cont, .pfs-space #quick-links > a { transition: none; }
}

/* An iPad held upright (owner, 20 Oct 2026): the design's grids left one
   mission tile and one island alone on a line, so here the mission is 2 by 2
   and the islands 3 by 2. Laptop and iPad turned sideways are unchanged. */
@media (min-width: 600px) and (max-width: 940px) {
  .pfs-space .pfs-mrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfs-space .pfs-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones (21 Oct 2026): Continue comes straight after the day line, then the
   three "how it works" steps. With the design's space band above the path, a
   teacher's card ("Your teacher picked this for you!") pushed Continue off a
   phone's first screen, which the live release check refuses: a child must
   see what to do next without scrolling. Same words; tablet and laptop keep
   the design's order. */
@media (max-width: 600px) {
  .pfs-space .pfs-path { display: flex; flex-direction: column; }
  .pfs-space .pfs-path > * { order: 4; }
  .pfs-space .pfs-path > .pfs-day { order: 1; }
  .pfs-space .pfs-path > #pfs-continue,
  .pfs-space .pfs-path > .pfs-fin,
  .pfs-space .pfs-path > .pfs-end { order: 2; }
  .pfs-space .pfs-path > .pfs-s3 { order: 3; margin: 18px 0 0; }
  .pfs-space .pfs-path > .pfs-map { margin-bottom: 0; }
  /* The activity's name may take two lines on a phone rather than being
     cut short ("Copy the R..."); the rocket keeps its place. */
  .pfs-space .pfs-cont .pfs-cs { white-space: normal; overflow: visible; text-overflow: clip; }
}