@font-face {
  font-family: Inter;
  src: url(assets/InterVariable.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #24204d;
  --muted: #51476f;
  --purple: #5932ab;
  --purple-deep: #42217f;
  --line: #ddd0f4;
  --card-shadow: 0 10px 24px #4c258319, 0 2px 0 #9c7dd533;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background: #ede2fd;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; line-height: 1.5; background: linear-gradient(#dceeff 0, #f1e7fc 47rem, #eae0fa 100%); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.048em; text-wrap: balance; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); font-weight: 880; }
h3 { font-size: 1.24rem; font-weight: 820; }
p { max-inline-size: 59ch; }
p + p, h2 + p, h3 + p { margin-top: .55em; }
a { color: var(--purple-deep); text-underline-offset: .18em; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, select { touch-action: manipulation; }
:focus-visible { outline: 3px solid #431776; outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 1.25em; height: 1.25em; flex: none; }
.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { position: absolute; z-index: 10; padding: .75rem; background: #fff; }
.shell, .top-inner, .footer-inner { width: min(100% - 2rem, 73rem); margin-inline: auto; }
.topbar { padding-block: 1rem; }
.top-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
.wordmark, .help-link, .button, .dock a {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; font-weight: 770; min-height: 44px;
}
.wordmark { justify-self: start; letter-spacing: -.06em; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.wordmark .icon-pill { --tone: #ffdb6d; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; }
.help-link { justify-self: end; border-radius: 999px; background: #fff; padding: .45rem .9rem; box-shadow: var(--card-shadow); }
.dock {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .22rem; padding: .35rem; border-radius: 1.5rem;
  background: linear-gradient(#8050d9, #5331a6); box-shadow: 0 5px 0 #3d247c, 0 10px 18px #5b43aa33;
}
.dock a { min-width: 0; color: #fff; border-radius: 1.15rem; padding: .5rem .82rem; font-size: .88rem; white-space: normal; }
.dock a:hover, .dock a[aria-current] { background: #fff; color: #48238c; }
.dock a:focus-visible { outline-color: #fff; outline-offset: -2px; }
.dock a[aria-current]:focus-visible { outline-color: #431776; }
.eyebrow { font-size: .76rem; font-weight: 840; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .55rem; }
.lead { font-size: clamp(1rem,2vw,1.2rem); color: var(--muted); }
.fine { font-size: .86rem; color: var(--muted); }
.button {
  border: 1px solid transparent; border-radius: 1rem; padding: .6rem 1rem; line-height: 1.24;
  width: fit-content; max-width: 100%; text-align: center; overflow-wrap: anywhere;
}
.button:hover { filter: brightness(.96); }
.primary { color: #fff; background: linear-gradient(#7447c6,#54269d); box-shadow: 0 3px 0 #3e1d76; }
.gold { color: #342345; background: linear-gradient(#ffe77f,#ffcc49); box-shadow: 0 4px 0 #ba6f14; }
.quiet { color: var(--purple-deep); background: #f6efff; border-color: #decef7; }
.white { color: var(--purple-deep); background: #fff; }
.hero {
  display: grid; grid-template-columns: minmax(0,.69fr) minmax(0,1.31fr); gap: 1.2rem; align-items: center;
  padding: clamp(1.1rem,3.4vw,2.5rem); min-width: 0; color: #fff; border: 3px solid #fff;
  border-radius: 2rem 2rem 4rem 2rem; background: radial-gradient(ellipse at 90% 0,#50bbf4,transparent 58%),linear-gradient(140deg,#154da7,#1267c6 62%,#41abeb);
  box-shadow: 0 10px 25px #295cb344;
}
.hero-copy { min-width: 0; padding-block: .8rem; }
.hero .eyebrow { display: flex; align-items: center; gap: .45rem; color: #fff; }
.hero .eyebrow span { color: #ffe178; }
.hero h1 { font-size: clamp(2.4rem,6.2vw,5.35rem); font-weight: 940; text-shadow: 0 .07em 0 #183a7a; letter-spacing: -.055em; word-spacing: .13em; }
.hero h1 span { color: #ffe67b; }
.hero p:not(.eyebrow) { margin: .8rem 0 1.15rem; max-width: 30ch; font-weight: 570; }
.hero-art { width: 100%; aspect-ratio: 1280 / 854; object-fit: contain; border-radius: 1.45rem 1.45rem 3rem 1.45rem; box-shadow: 0 8px 20px #1346776a; }
.tone-leaf { --tone: #abeb8a; --soft: #edfae8; --tone-ink: #215832; }
.tone-berry { --tone: #ffc3df; --soft: #fff0f6; --tone-ink: #8d2357; }
.tone-sky { --tone: #b8d9ff; --soft: #eaf4ff; --tone-ink: #244c91; }
.tone-gold { --tone: #ffe17e; --soft: #fff6d9; --tone-ink: #6e490c; }
.icon-pill {
  display: inline-grid; place-items: center; width: 3rem; min-width: 3rem; height: 3rem; border-radius: 1rem;
  color: var(--tone-ink,#48238c); background: linear-gradient(#ffffff88,transparent),var(--tone,#d9c8fa);
  border: 1px solid #ffffffa6; box-shadow: inset 0 2px 0 #fff9,0 3px 0 #32234d2b;
}
.icon-pill svg { width: 1.42rem; height: 1.42rem; }
.category-strip {
  width: min(100% - 1rem, 52rem); margin: -.7rem auto 1.4rem; position: relative;
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; padding: .55rem;
  border: 2px solid #fff; border-radius: 1.45rem; background: #fff9ff; box-shadow: var(--card-shadow);
}
.category-strip a { display: grid; justify-items: center; gap: .35rem; padding: .5rem .15rem; text-align: center; font-weight: 790; text-decoration: none; border-radius: 1rem; overflow-wrap: anywhere; }
.category-strip a:hover { background: #efe6fc; }
.home-shelf { display: grid; grid-template-columns: minmax(0,3.3fr) minmax(0,1fr); gap: 1rem; align-items: start; }
.shelf, .panel, .page-intro, .game-intro {
  background: #fffaff; border: 2px solid #fff; border-radius: 1.55rem; padding: clamp(1rem,2.6vw,1.6rem); box-shadow: var(--card-shadow);
}
.shelf { background: #fff8fc; }
.section-top { display: flex; justify-content: space-between; align-items: center; gap: .7rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.section-top .eyebrow { color: #6337a0; margin-bottom: .26rem; }
.games-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.game-card { min-width: 0; border-radius: 1.12rem; border: 2px solid #fff; background: var(--soft); box-shadow: 0 3px 10px #49237324; }
.game-card a { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; border-radius: 1rem; }
.game-card a:hover h3 { text-decoration: underline; text-underline-offset: .18em; }
.game-cover { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--soft,#ece2fe); border-radius: .96rem .96rem 0 0; }
.card-copy { display: flex; flex-direction: column; flex: 1; align-items: flex-start; gap: .36rem; padding: .8rem; }
.card-copy p { margin: 0; font-size: .9rem; color: var(--muted); }
.category { font-size: .7rem; font-weight: 830; text-transform: uppercase; color: var(--tone-ink); letter-spacing: .07em; }
.card-play { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .2rem .8rem; margin-top: auto; color: var(--tone-ink); background: var(--tone); border-radius: .8rem; font-weight: 820; }
.home-side { display: grid; gap: 1rem; }
.home-side h2 { margin-top: .65rem; font-size: 1.38rem; }
.home-side .button { margin-top: .7rem; }
.trail-promo { background: linear-gradient(150deg,#8250cf,#4e248f); color: #fff; }
.tip-promo { background: #ffe8f4; }
.crew-banner, .grown-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.crew-banner { margin-top: 1rem; background: linear-gradient(120deg,#fef3d3,#f3e6ff 78%); }
.page-intro, .game-intro { margin-block: .4rem 1rem; background: linear-gradient(120deg,#fff,#f0e6fe); }
.page-intro h1, .game-intro h1 { font-size: clamp(2rem,5.5vw,3.7rem); font-weight: 900; }
.page-intro .lead, .game-intro .lead { margin-top: .55rem; }
.library { background: #fcf9ff; }
.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .6rem; }
.filters button, .levels button, .answers button {
  min-height: 44px; border: 1px solid var(--line); border-radius: .9rem; font-weight: 740; background: #fff; padding: .6rem .85rem;
}
.filters button { display: flex; align-items: center; gap: .4rem; color: #4b278d; }
.filters button[aria-pressed="true"] { background: #552da3; border-color: #552da3; color: white; }
.filter-status { color: var(--muted); font-size: .88rem; margin: .7rem 0 1rem; }
.game-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,11rem); align-items: center; gap: 1rem; background: linear-gradient(125deg,#fff,var(--soft)); }
.game-intro .game-cover { border-radius: 1rem; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 740; margin-bottom: .65rem; }
.example-panel { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1rem; }
.example-panel h2 { font-size: 1.35rem; }
.example-panel p { color: var(--muted); }
.example-visual { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.example-visual svg { width: 1.5rem; height: 1.5rem; }
.player { background: #fffaff; }
.play-heading p { margin-top: .3rem; }
.levels, .answers, .play-actions, .mixer-controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.levels { margin-block: .85rem; }
.levels button { text-align: left; flex: 1 1 9rem; }
.levels button small { display: block; font-size: .81em; font-weight: 540; }
.levels button[aria-pressed="true"], .answers button[aria-pressed="true"] { border-color: #6033ad; background: #ede0ff; box-shadow: inset 0 0 0 1px #6033ad; }
.play-body { background: var(--soft); border-radius: 1.15rem; padding: clamp(.8rem,3vw,1.45rem); min-width: 0; }
.round-count { color: var(--tone-ink); font-weight: 780; font-size: .88rem; margin-bottom: .5rem; }
.play-body h3 { font-size: clamp(1.38rem,3vw,2.15rem); }
.play-body h3:focus { outline-offset: .13em; }
.fruit-board, .pattern-board { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .85rem 0; list-style: none; }
.fruit-board li, .pattern-board li { display: grid; place-items: center; min-width: 2.8rem; min-height: 2.8rem; padding: .3rem; background: #fff; border: 2px solid transparent; border-radius: .7rem; }
.fruit-board svg { width: 1.75rem; height: 1.75rem; }
.pattern-board li { font-size: .75rem; text-transform: capitalize; }
.pattern-board .missing { border-style: dashed; border-color: #9463be; padding-inline: .5rem; }
.pattern-board .missing b { font-size: 1.4rem; }
.fruit-board li.hinted, .pattern-board li.hinted { border-color: #7042a7; outline: 2px solid #7042a7; outline-offset: 2px; }
.answers button { display: flex; gap: .4rem; justify-content: center; align-items: center; min-width: 3.15rem; min-height: 48px; }
.answers button:hover:not([aria-disabled="true"]) { background: #f7efff; }
.answers button.correct, .play-actions .correct { box-shadow: inset 0 0 0 2px #2b7750; background: #d7f3d7; color: #214d35; }
.play-feedback { min-height: 1.5em; margin-block: .6rem; font-weight: 700; color: #43256c; }
.play-actions .button { min-height: 48px; }
.swatch, .tile, .shape { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .5rem; color: #22204c; }
.swatch { border: 1px solid #3b255650; }
.swatch--red { background: #ff8b91; }.swatch--yellow { background: #ffe16b; }.swatch--blue { background: #8cc0ff; }
.swatch--orange { background: #ffba75; }.swatch--green { background: #8cdb9d; }.swatch--purple { background: #caa7f8; }
.tile--leaf { background: #a8e5a0; }.tile--star { background: #ffe47e; }.tile--moon { background: #d8c5fc; }.tile--shell { background: #ffc9e3; }
.recipe, .colour-clue { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin: .8rem 0; }
.recipe-paint, .colour-clue { display: inline-flex; align-items: center; gap: .42rem; padding: .5rem .7rem; background: #fff; border-radius: .75rem; font-weight: 730; }
.station-window { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 1rem; margin: .85rem 0; background: #294a83; color: #fff; box-shadow: inset 0 0 0 5px #b6d6ff; }
.station-window .shape { width: 3.5rem; height: 3.5rem; color: #fff; }
.station-window .shape svg { width: 2.5rem; height: 2.5rem; }
.turn-45 { transform: rotate(45deg); }.turn-90 { transform: rotate(90deg); }.turn-180 { transform: rotate(180deg); }
.shape-clue { padding: .7rem 1rem; background: #fff; border-radius: .8rem; margin: .85rem 0; font-weight: 760; }
.completion { padding: .4rem 0; }
.completion .icon-pill { margin-bottom: .55rem; }
.completion .play-actions { margin-top: .75rem; }
.game-extra, .practice { margin-top: 1rem; }
.recipe-book { display: grid; gap: .4rem; margin-block: .8rem 1rem; }
.recipe-book > div { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.mixer-controls { align-items: end; margin-top: .55rem; }
.mixer-controls label { display: grid; gap: .25rem; }
.mixer-controls select { min-height: 44px; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: .65rem; background: #fff; }
.mix-result { margin-top: .6rem; min-height: 1.5em; }
.sticker-grid, .info-grid, .crew-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.sticker-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sticker { display: grid; justify-items: center; text-align: center; gap: .3rem; padding: .8rem .4rem; border-radius: 1rem; text-decoration: none; border: 2px dashed #a286cc; background: #fbf7ff; }
.sticker.earned { background: var(--soft); border-color: var(--tone-ink); border-style: solid; }
.sticker small { text-decoration: underline; }
.trail-confirm { padding: .8rem; background: #f3e9ff; border-radius: .85rem; margin-bottom: .8rem; }
.trail-confirm .button { margin-top: .5rem; }
.info-grid .panel, .friend { min-width: 0; }
.info-grid h3, .friend h2 { margin-top: .6rem; }
.info-grid .button, .friend .button { margin-top: .65rem; }
.practice .info-grid { margin-top: .75rem; }
.friend { background: var(--soft); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .8rem; align-items: center; }
.friend .game-cover { border-radius: 1rem; }
.print-activities + .fine { margin-top: .8rem; }
.site-footer { margin-top: 2rem; background: #e3d4f8; border-top: 2px solid #f7f0ff; padding-block: 1.25rem; }
.footer-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: .55rem 1rem; }
.footer-inner strong { font-size: 1.25rem; }
.footer-inner nav { display: flex; flex-wrap: wrap; align-items: start; gap: 0 .85rem; }
.footer-inner a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
@media (max-width: 1000px) {
  .home-shelf { grid-template-columns: minmax(0,2.25fr) minmax(0,1fr); }
  .shelf .games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .top-inner { grid-template-columns: minmax(0,1fr) auto; gap: .6rem; }
  .dock { grid-row: 2; grid-column: 1 / -1; }
  .hero { grid-template-columns: minmax(0,1fr); }
  .hero-copy { padding-block: 0; }
  .hero h1 { font-size: clamp(2.25rem,8vw,4.35rem); }
  .hero-art { max-width: 38rem; justify-self: center; }
}
@media (max-width: 640px) {
  .shell, .top-inner, .footer-inner { width: calc(100% - 1.1rem); }
  .home-shelf, .footer-inner { grid-template-columns: minmax(0,1fr); }
  .home-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .games-grid, .sticker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .game-intro { grid-template-columns: minmax(0,1fr) minmax(0,6.5rem); }
  .dock a { flex-direction: column; text-align: center; padding-inline: .12rem; overflow-wrap: anywhere; }
  .category-strip { width: calc(100% - .5rem); gap: .15rem; padding: .35rem; }
  .category-strip a { font-size: .83rem; }
  .category-strip .icon-pill { width: 2.35rem; min-width: 2.35rem; height: 2.35rem; border-radius: .8rem; }
  .friend { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 400px) {
  .home-side, .info-grid, .crew-grid { grid-template-columns: minmax(0,1fr); }
  .game-intro { grid-template-columns: minmax(0,1fr); }
  .game-intro .game-cover { max-width: 8rem; }
}
@media print {
  body { background: white; color: black; }
  .topbar, .site-footer, .skip, .fine, .icon-pill { display: none; }
  .print-activities { display: block; }
  .print-activities .panel { break-inside: avoid; border: 1px solid #999; margin-bottom: .5rem; box-shadow: none; }
  .page-intro { box-shadow: none; }
}