@import url("platform/assimilation.css?jke-css=2026.10.29.1&jke-font=3.300-clear2");
:root {
  color-scheme: light;
  font-family: var(--jke-font-ui),ui-rounded, "Avenir Next Rounded", system-ui, sans-serif;
  color: var(--jke-suite-ink);
  background: var(--jke-suite-paper);
  font-synthesis: style;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 1rem; }
body { margin: 0; min-width: 0; min-height: 100svh; }
a { color: #49317c; }
button { font: inherit; cursor: pointer; }
a, button { touch-action: manipulation; }
a:focus-visible, button:focus-visible, [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--jke-suite-focus);
  outline-offset: 4px;
}
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 5; padding: 14px; background: white; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.background, .wash { position: fixed; inset: 0; pointer-events: none; z-index: -2; }
.background { background: #dff2ff url("assets/launcher-background.webp") 58% 56% / cover no-repeat; }
.wash { z-index: -1; background: rgb(255 248 224 / 35%); }
.picker { width: min(100%, 1240px); margin: auto; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.hero { max-width: 700px; padding: 22px; margin-bottom: 20px; border: 1px solid #ffffff9c; border-radius: 24px; background: #fff9eae8; box-shadow: 0 12px 34px #31264e14; backdrop-filter: blur(8px); }
.eyebrow { margin: 0; font-weight:700; color: #754019; }
h1 { margin: 8px 0 12px; font-size: var(--jke-heading-large); line-height: 1.15; letter-spacing: -.015em; overflow-wrap: anywhere; }
.hero h1 { font-family: var(--jke-font-literary); font-weight:400; text-wrap: balance; }
h1 span { color: #b32954; }
.tagline { font-size: var(--jke-text-lead); font-weight:700; line-height: 1.4; margin: 0; }
.intro { font-size: 1.0625rem; line-height: 1.65; margin: 10px 0 0; }
.launcher-music { max-width: 700px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid #c8bdd3; border-radius: 18px; background: #fffaf2f5; box-shadow: 0 8px 24px #31264e20; }
.launcher-music .jke-music { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #31264e; font-size: .875rem; font-weight:700; }
.launcher-music .jke-music-label { flex: 1 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launcher-music .jke-music button { min-height: 44px; padding: 8px 14px; border: 1px solid #776788; border-radius: 12px; background: #fff; color: #31264e; }
.app-panel { padding: 24px; border: 1px solid #ffffffa8; border-radius: 24px; background: #fffaf2f5; box-shadow: 0 12px 36px #31264e26; backdrop-filter: blur(8px); }
h2 { font-size: var(--jke-heading-medium); line-height: 1.25; margin: 0 0 16px; }
.app-tools { display: grid; gap: 14px; }
.app-search { display: grid; max-width: 620px; gap: 7px; color: #493b58; font-size: .875rem; font-weight:700; }
.search-field { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 7px; min-height: 48px; padding: 0 14px; border: 1px solid #887799; border-radius: 14px; background: white; box-shadow: inset 0 1px 2px #31264e0d; }
.search-field:focus-within { outline: 3px solid #7b4ed8; outline-offset: 2px; }
.search-field > span { color: #6c5c7c; font-size: 1.3rem; }
.search-field input { width: 100%; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: transparent; color: #2b2540; font: inherit; font-weight:700; }
.search-field input::placeholder { color: #71667d; opacity: 1; }
.app-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.app-filters button, .continue-heading button, .suggestion-heading button { min-height: 44px; padding: 10px 14px; border: 1px solid #776788; border-radius: 999px; background: #fff; color: #31264e; }
.app-filters button { transition: background 140ms ease, color 140ms ease, transform 140ms ease; }
.app-filters button:hover { transform: translateY(-1px); }
.app-filters button[aria-pressed="true"] { border-color: #49317c; background: #49317c; color: white; box-shadow: 0 4px 12px #49317c29; }
.launcher-tabs { display: flex; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid #c8bdd3; }
.launcher-tabs button { min-height: 48px; padding: 10px 20px; border: 1px solid #776788; border-radius: 14px 14px 0 0; background: #fff; color: #31264e; font-weight:700; }
.launcher-tabs button[aria-selected="true"] { border-color: #49317c; background: #49317c; color: white; }
.tab-panel { padding-top: 20px; }
#app-count { font-size: .95rem; margin: 14px 0; }
.age-note { margin: -4px 0 20px; max-width: 700px; color: #51415f; font-size: .9375rem; line-height: 1.6; }
.age-directory { display: grid; gap: 32px; }
.age-section { min-width: 0; }
.age-heading { display: flex; align-items: center; gap: 16px; padding: 10px 16px; margin-bottom: 12px; border: 1px solid #dac0b5; border-radius: 18px; background: #ffe8e0; }
.age-section--jay .age-heading { background: #e0f3fa; border-color: #b1cfdd; }
.age-section--elle .age-heading { background: #eee5fc; border-color: #cebbdf; }
.age-kid { display: block; flex: 0 0 auto; width: auto; height: 76px; object-fit: contain; }
.age-heading > div { min-width: 0; }
.age-label { display: inline-block; margin: 0 0 8px; padding: 5px 12px; border-radius: 999px; background: #ffffffcf; color: #49317c; font-size: .875rem; font-weight:700; }
.age-heading h3 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.3; overflow-wrap: anywhere; }
.age-invitation { margin: 8px 0 0; font-size: 1rem; line-height: 1.6; }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.app-entry { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #c8bdd3; border-radius: 18px; background: white; box-shadow: 0 4px 14px #31264e0d; transition: box-shadow 160ms ease, transform 160ms ease; }
.app-entry:hover { transform: translateY(-2px); box-shadow: 0 9px 22px #31264e1c; }
.app-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 12px; flex: 1; align-items: start; padding: 16px; min-height: 150px; border-radius: 17px 17px 0 0; color: #2b2540; text-decoration: none; transition: box-shadow 160ms ease; }
.app-card--math { background: #fff0bc; }
.app-card--language { background: #d9f3eb; }
.app-card--create { background: #eadef8; }
.app-card--reading { background: #ffe6df; }
.app-card:hover { box-shadow: inset 0 0 0 2px #49317c; }
.app-copy { display: grid; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.app-copy strong { font-size: 1.125rem; line-height: 1.35; }
.app-category { color: #51415f; font-size: var(--jke-text-caption); font-weight:400; line-height: 1.45; }
.app-description { font-size: var(--jke-text-body); line-height: 1.55; color: #46394f; }
.app-icon, .continue-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #ffffffc9; font-size: 2rem; line-height: 1; }
.app-icon img, .continue-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.app-guide-link { display: flex; align-items: center; padding: 10px 16px; min-height: 44px; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.game-suggestion { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid #c8bdd3; }
.suggestion-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.suggestion-heading h3 { margin: 0; font-size: 1rem; }
.suggestion-heading button { flex: 0 0 auto; font-size: .875rem; white-space: nowrap; }
.suggestion-card { min-height: 0; max-width: 620px; border-radius: 16px; border: 1px solid #c8bdd3; }
.no-app-results { padding: 24px; border: 1px dashed #9e8cae; border-radius: 16px; background: #fff; color: #51415f; line-height: 1.5; text-align: center; }
.continue-playing { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #c8bdd3; }
.continue-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.continue-heading > div { display: grid; gap: 5px; }
.continue-heading small { font-size: .875rem; line-height: 1.5; }
.continue-card { display: grid; grid-template-columns: 48px minmax(0,1fr) 16px; align-items: center; gap: 12px; padding: 12px; border: 1px solid #c8bdd3; border-radius: 14px; background: #f2ebff; color: #2b2540; text-decoration: none; }
.continue-card > span:nth-child(2) { display: grid; gap: 5px; }
.continue-card small { font-size: .875rem; }
.footer-note { padding: 16px; margin: 20px 0 0; border-radius: 16px; background: #fffaf2; font-size: .9375rem; line-height: 1.7; text-align: center; }
.footer-note a { display: inline-block; padding: 8px 4px; min-height: 44px; }
.noscript { margin: 20px; padding: 16px; background: #fffaf2; line-height: 1.5; }
.guide-page { background: #fff9eb; padding: 24px; }
.guide-page > header, .guide-content { max-width: 760px; margin: auto; }
.guide-page > header a { display: inline-block; padding: 12px 0; min-height: 44px; }
.guide-content { padding: 24px 0; font-size: 1.125rem; line-height: 1.7; }
.guide-content h1 { font-size: clamp(2rem, 5vw, 3rem); }
.guide-content h2 { margin-top: 28px; }
.guide-content a { overflow-wrap: anywhere; }
.launch-link { display: inline-block; padding: 12px 20px; border-radius: 12px; background: #49317c; color: white; font-weight:700; }
@media (max-width: 1050px) {
  .app-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .background { background-image: url("assets/launcher-background-mobile.webp"); }
  .picker { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .hero, .app-panel { padding: 16px; border-radius: 18px; }
  .app-grid { grid-template-columns: minmax(0,1fr); }
  .age-heading { gap: 10px; padding: 10px; }
  .age-kid { height: 64px; }
  .app-card { min-height: 0; padding: 14px; }
  .app-filters button { flex: 1 1 auto; }
  .guide-page { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .app-card, .app-entry, .app-filters button { transition: none; } }
@media (forced-colors: active) {
  .app-entry, .app-card, .launch-link { border: 1px solid CanvasText; }
  .app-filters button[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* Search text stays comfortable to read and edit on a phone. */
.search-field input{font-size:var(--jke-text-body);font-weight:400;line-height:1.5}
.guide-content>p,.guide-content>ul,.guide-content>ol{font-family:var(--jke-font-reading);font-size:var(--jke-text-reading);line-height:1.7}

/* The welcome screen starts with things to do, then opens into the collection. */
.launcher-page{background:#f8f4eb}
.launcher-page .background{opacity:.28;background-position:center top}
.launcher-page .wash{background:linear-gradient(180deg,#fff9ee55,#f8f4ebed 650px)}
.launcher-page .picker{max-width:1160px;padding:20px 24px 32px}
.launcher-topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
.launcher-brand{display:flex;align-items:center;gap:10px;color:#392d50;text-decoration:none;font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.launcher-brand img{border-radius:13px;object-fit:cover}
.launcher-brand sup{font-size:.55em;vertical-align:super;margin-left:2px}
.launcher-topbar nav{display:flex;flex-wrap:wrap;align-items:center;gap:22px;font-size:.875rem}
.launcher-topbar nav a{display:inline-flex;align-items:center;min-height:44px;color:#58486a;text-underline-offset:4px}
.launcher-topbar nav a:last-child{text-decoration:none;border:1px solid #d5c9bc;border-radius:999px;padding:0 14px;background:#fffcf5b3}
.launcher-page .hero{max-width:none;padding:0;margin:0 0 24px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
.launcher-page .hero h1{margin:0 0 9px;font-size:clamp(2.15rem,4.5vw,3.5rem);line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.launcher-page .hero h1 span{color:#975547}
.launcher-page .intro{margin:0;color:#63556d;font-size:1.0625rem;line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.quick-start{margin-bottom:24px}
.start-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px}
.start-card{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:276px;overflow:hidden;border:1px solid #ffffffb3;border-radius:24px;color:#3e2c45;text-decoration:none;background:#f0e5d4;box-shadow:0 6px 16px #4c355812;transition:transform .16s ease,box-shadow .16s ease}
.start-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #4c355825}
.start-art{position:absolute;z-index:-1;right:-4px;top:3px;width:100%;height:50%;object-fit:contain;pointer-events:none}
.start-copy{display:grid;gap:6px;padding:22px;width:100%}
.start-copy>strong{font-size:1.5rem;line-height:1.2;letter-spacing:-.015em}
.start-description{font-size:.9375rem;line-height:1.45}
.start-action{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:.875rem;font-weight:700;color:#67446f}
.start-action>span{font-size:1.3rem;line-height:1}
.start-card--art{background:linear-gradient(145deg,#f2e8fb,#e6daf2)}
.start-card--build{background:linear-gradient(145deg,#e7f1e6,#d8e7dc)}
.start-card--build .start-action{color:#315f52}
.start-card--story{align-items:center;background:#f2dfbf}
.start-card--story .start-art{top:0;right:0;width:55%;height:100%;object-fit:cover;object-position:45% 35%;mask-image:linear-gradient(90deg,transparent,#000 28%)}
.start-card--story .start-copy{width:66%;padding:26px 22px;background:linear-gradient(90deg,#f2dfbf 67%,#f2dfbf00);gap:9px}
.start-card--story .start-copy>strong{font-family:var(--jke-font-literary);font-size:2.1rem;font-weight:400;line-height:1.1}
.start-card--story .start-description{max-width:14ch}
.start-card--story .start-action{justify-content:flex-start;gap:16px;justify-self:start;border-radius:999px;padding:10px 14px;background:#fffaf0;color:#684132;box-shadow:0 2px 5px #5e3a3612}
.launcher-page .continue-playing{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:10px 14px;border:1px solid #dcd2e5;border-radius:16px;background:#fffaf4d9}
.launcher-page .continue-card{flex:1;min-width:0;border:0;background:none;padding:0;gap:10px;color:#433153}
.launcher-page .continue-icon{width:36px;height:36px;font-size:1.5rem;border-radius:10px}
.launcher-page .continue-card{grid-template-columns:36px minmax(0,1fr) 18px}
.launcher-page .continue-card>span:nth-child(2){gap:0;line-height:1.35}
.launcher-page .continue-card small{color:#776782;font-size:.8125rem}
.launcher-page .continue-card strong{overflow-wrap:anywhere;font-size:1rem}
#clear-activity{flex-shrink:0;min-height:44px;padding:6px 8px;background:none;border:0;color:#73617c;text-decoration:underline;text-underline-offset:3px;font-size:.8125rem}
.launcher-page .launcher-music{max-width:none;margin-bottom:20px}
.launcher-page .app-panel{padding:24px;background:#fffcf7eb;border:1px solid #e0d6c6;box-shadow:0 4px 20px #45324f08}
.browse-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.browse-heading h2{font-size:1.5rem;margin:0;line-height:1.25}
#refresh-suggestion{min-height:44px;border:0;padding:6px 0 6px 10px;background:none;color:#6a487c;font:inherit;font-size:.875rem;cursor:pointer}
.launcher-page .app-search{max-width:none;margin:0;font-weight:400}
.launcher-page .search-field{min-height:50px;box-shadow:none;border-color:#cfc2d8;border-radius:13px;gap:10px}
.launcher-page .app-tools{gap:12px}
.launcher-page .app-filters{gap:7px}
.launcher-page .app-filters button{flex:0 1 auto;min-height:40px;padding:7px 13px;font-size:.875rem;border-color:#d0c2d9}
.launcher-page .age-note{font-size:.8125rem;line-height:1.5;margin:10px 0 12px;color:#73657c}
.launcher-page #app-count{font-size:.875rem;margin:0 0 16px;color:#63556f}
.launcher-page .launcher-tabs{padding-bottom:12px}
.launcher-page .game-suggestion{padding:14px;border:1px solid #d8cce1;border-radius:16px;background:#f8f1fc;margin-bottom:20px}
.launcher-page .game-suggestion h3{font-size:.9375rem;margin:0 0 10px}
.launcher-page .game-suggestion .app-card{padding:12px;max-width:none;box-shadow:none}
@media(max-width:760px){
 .launcher-page .picker{padding:12px 16px 24px}
 .launcher-topbar{margin-bottom:18px;gap:8px}
 .launcher-brand{gap:8px;font-size:1.15rem}.launcher-brand img{width:34px;height:34px;border-radius:11px}
 .launcher-topbar nav{font-size:.8125rem;gap:10px}.launcher-topbar .browse-link{display:inline-flex}
 .launcher-topbar nav a:last-child{padding:0 10px}
 .launcher-page .hero{margin-bottom:18px}.launcher-page .hero h1{font-size:clamp(2rem,7.8vw,2.8rem);max-width:18ch}
 .launcher-page .intro{font-size:1rem;max-width:38ch}
 .quick-start{margin-bottom:16px}
 .start-grid{grid-template-columns:1fr 1fr;gap:10px}
 .start-card{min-height:172px;border-radius:18px}
 .start-card--story{grid-column:1/-1;min-height:150px}
 .start-art{width:90%;height:50%;right:-4px;top:-3px}
 .start-copy{padding:14px;gap:4px}
 .start-copy>strong{font-size:1.125rem;line-height:1.25}
 .start-description{font-size:.8125rem;line-height:1.4}
 .start-action{font-size:.8125rem;margin-top:5px;gap:4px}
 .start-card--story .start-copy{padding:18px;width:67%;gap:6px}
 .start-card--story .start-copy>strong{font-size:1.7rem}
 .start-card--story .start-description{max-width:none;font-size:.875rem}
 .start-card--story .start-action{padding:7px 11px;margin-top:5px;font-size:.8125rem;gap:10px}
 .launcher-page .app-panel{padding:18px 14px;border-radius:20px}
 .browse-heading h2{font-size:1.3rem}.browse-heading{margin-bottom:10px}
 .launcher-page .app-filters{gap:5px}.launcher-page .app-filters button{padding:7px 10px;font-size:.8125rem;flex:1 1 auto}
}
@media(max-width:360px){.launcher-page .picker{padding-right:12px;padding-left:12px}.launcher-brand{font-size:1rem}.launcher-topbar nav{font-size:.75rem}.start-copy{padding:12px}.start-description{max-width:16ch}.start-card--story .start-copy{padding:16px}}
@media(prefers-reduced-motion:reduce){.start-card{transition:none;transform:none}}
@media(forced-colors:active){.start-card{border:2px solid LinkText}.start-action{color:LinkText}}

@media(max-width:760px){.start-card:not(.start-card--story) .start-description{display:none}.start-card:not(.start-card--story) .start-copy>strong{min-height:2.5em}}
#refresh-suggestion:disabled{opacity:.45;cursor:default}