/* Shared browsing surfaces: a warm story shelf, clear pictures, generous touch targets. */
.browse-page { --bg:#fbf7ee; --ink:#24464b; --ink-2:#617874; --ink-3:#78908a; --line:#e4e5d9; --surface:#fffdf8; --primary:#287e75; --primary-soft:#e0eee1; --max:1320px; color:var(--ink); background:var(--bg); }
.ui-icon { display:inline-block; flex:none; width:24px; height:24px; vertical-align:middle; overflow:visible; }
.browse-page button,.browse-page a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.browse-page :is(button,a):focus-visible { outline:3px solid #dc993d; outline-offset:5px; }
.browse-page .topbar,.browse-page .site-header { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1320px; margin:auto; padding:20px 36px; min-height:88px; height:auto; gap:20px; border:0; background:transparent; position:relative; z-index:20; }
.browse-page .brand { display:inline-flex; align-items:center; gap:10px; color:#214a4d; text-decoration:none; font-size:29px; font-weight:600; letter-spacing:-1.3px; line-height:1; }
.browse-page .browse-brand-mark { display:grid; place-items:center; width:42px; height:44px; background:#ec8066; color:#fff9e9!important; border-radius:15px; transform:rotate(-8deg); flex:none; }
.browse-brand-mark .ui-icon { width:29px; height:29px; }
.browse-page .brand .browse-wordmark { color:#25484b; }
.browse-wordmark small { display:block; color:#7a8e83; font-size:8px; letter-spacing:1.55px; line-height:1; font-weight:500; margin:7px 0 0 2px; }
.browse-page .header-actions,.browse-page .story-header-actions { display:flex; align-items:center; gap:10px; width:auto; margin-left:auto; }
.browse-page :is(.icon-button,.grownup-button,.profile,.quiet-button) { color:#476861; background:#fffdf7; border:1px solid #e2e4d8; box-shadow:none; min-height:46px; border-radius:25px; }
.browse-page .icon-button { width:46px; height:46px; }
.browse-page .icon-button [data-sound-icon] { display:flex; }
.browse-page .icon-button .ui-icon,.browse-page .grownup-button .ui-icon,.browse-page .quiet-button .ui-icon { width:21px; height:21px; }
.browse-page .grownup-button { padding:10px 15px; font-size:14px; }
.browse-page .profile { padding:4px 14px 4px 5px; font-size:15px; border-left:1px solid #e2e4d8; }
.player-avatar { display:grid; place-items:center; border-radius:50%; background:#fff1cd; width:34px; height:34px; font-size:24px; }
.player-avatar .ui-icon { width:29px; height:29px; color:#716346; }
.browse-page .app-layout { display:block; min-height:calc(100dvh - 90px); }
.browse-nav { display:flex; align-items:center; justify-content:space-between; gap:18px; max-width:1248px; margin:0 auto; padding:4px 0 17px; border-bottom:1px solid #e4e6d9; }
.browse-tabs { display:flex; gap:6px; }
.browse-tabs a { display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:12px 22px; border-radius:16px; border:1px solid transparent; color:#617a72; font-size:16px; text-decoration:none; font-weight:500; transition:background .18s,transform .18s; }
.browse-tabs a .ui-icon { width:23px; height:23px; }
.browse-tabs a:nth-child(2) .ui-icon { color:#438777; }.browse-tabs a:nth-child(3) .ui-icon { color:#c87978; }.browse-tabs a:nth-child(4) .ui-icon { color:#b88b38; }
.browse-tabs a[aria-current=page] { color:#23655d; background:#e2eedf; border-color:#cfdecb; box-shadow:0 3px 0 #d7e2ce80; }
.browse-tabs a:hover { background:#f0eee3; transform:translateY(-1px); }
.browse-tabs a[aria-current=page]:hover { background:#dcebd7; }
.browse-quiet { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 13px; border:1px solid #e0e5d7; border-radius:14px; background:transparent; color:#6b8574; font-size:12px; }
.browse-quiet .ui-icon { width:19px; height:19px; }
.browse-quiet[aria-pressed=true] { background:#dcebd5; border-color:#9ab599; }
.browse-note { font-size:13px; color:#839083; }
.browse-page .playground { padding:34px 36px 15px; max-width:1320px; }
.browse-page .welcome { margin:0 0 28px; gap:20px; }
.browse-page .eyebrow { color:#578178; font-family:inherit; font-size:10px; font-weight:550; letter-spacing:1.8px; }
.browse-page .welcome h1 { font-size:clamp(30px,3.1vw,45px); line-height:1.16; font-weight:500; letter-spacing:-1.25px; gap:13px; margin-top:8px; }
.browse-page .welcome h1 em { color:#3b8076; font-style:normal; }
.browse-page .hello-button { width:44px; height:44px; min-width:44px; color:#52877a; background:#e9ede0; border:1px solid #dce3d2; }
.browse-page .hello-button .ui-icon { width:20px; height:20px; }
.browse-page .surprise-button { background:#fff0cb; color:#7b6333; border:1px solid #edd9a9; border-radius:18px; box-shadow:0 4px 0 #e2cfa866; min-height:52px; font-size:15px; }
.browse-page .surprise-button .ui-icon { width:22px; height:22px; }
/* One inviting book feature; the whole cover is a real link. */
.browse-page .story-door { min-height:266px; margin-bottom:36px; border:1px solid #d7e0d0; border-radius:28px; grid-template-columns:38% 1fr 19%; box-shadow:0 8px 25px #214a4810; background:#e0eddd; }
.browse-page .story-door-picture { display:block; position:relative; overflow:hidden; background:#d1dcc8; }
.browse-page .story-door-picture img { transition:transform .4s; }
.browse-page .story-door-picture:hover img { transform:scale(1.035); }
.book-cover-tag { position:absolute; display:flex; align-items:center; gap:8px; bottom:18px; left:20px; background:#fffaf0f5; color:#3d6559; border-radius:12px; padding:10px 13px; font-size:13px; transform:rotate(-3deg); box-shadow:0 4px 0 #26473112; }
.book-cover-tag .ui-icon { width:20px; height:20px; }
.browse-page .story-door-copy { padding:28px 32px; }
.browse-page .story-door-copy h2 { font-weight:500; font-size:clamp(29px,2.7vw,38px); line-height:1.08; }
.browse-page .story-door-copy p { font-size:15px; color:#617b6b; }
.browse-page .story-door-start { display:inline-flex; align-items:center; gap:10px; background:#2e8076; color:#fffdf0; border-radius:16px; font-size:18px; min-height:53px; padding:13px 20px; box-shadow:0 4px 0 #205f57; }
.browse-page .story-door-start:hover { background:#226e66; }
.browse-page .story-door-start .ui-icon { width:20px; height:20px; }
.browse-page .story-door-library { display:inline-flex; align-items:center; gap:8px; min-height:34px; color:#57776a; text-decoration:none; font-size:12px; }
.browse-page .story-door-library .ui-icon { width:17px; height:17px; }
.browse-page .story-door-note { align-items:flex-start; color:#507164; padding:25px 20px 25px 0; }
.browse-page .story-door-note .story-door-illustration { height:78px; display:block; margin-bottom:9px; }
.story-door-illustration .ui-icon { height:84px; width:84px; }
.browse-page .story-door-note strong { font-size:21px; }.browse-page .story-door-note>span { font-size:13px; }.browse-page .story-door-note small { font-size:11px; }
/* Clear browsing sections and category pictures in one consistent visual language. */
.shelf-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:19px; }
.shelf-heading .eyebrow { margin:0 0 7px; }
.shelf-heading h2 { font-size:29px; font-weight:500; letter-spacing:-.7px; line-height:1.1; margin:0; }
.shelf-heading>p { color:#7b8a7c; font-size:12px; margin:0 0 3px; }
.browse-page .filters { gap:8px; margin-bottom:19px; }
.browse-page .filters>button { color:#617669; background:#fffdf7; border:1px solid #e3e5d8; border-radius:16px; min-height:54px; padding:8px 12px; gap:8px; font-size:12px; transition:background .16s,border-color .16s; }
.category-picture { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:#e8eee2; color:#5d8175; flex:none; }
.category-picture .ui-icon { width:21px; height:21px; }
[data-filter=arcade] .category-picture { background:#fff0d1; color:#b28a42; }[data-filter=talk] .category-picture { background:#f9e6df; color:#bc8177; }[data-filter=listen] .category-picture { background:#e2ecf1; color:#5e8996; }[data-filter=make] .category-picture { background:#e6eedc; color:#819668; }[data-filter=count] .category-picture { background:#faedcd; color:#a98d40; }[data-filter=letters] .category-picture { background:#ebe5f5; color:#9082ab; }
.browse-page .filters>button.selected { background:#2e7c71; color:#fffaf0; border-color:#2e7c71; box-shadow:0 3px 0 #d6dec9; }
.browse-page .filters>button.selected .category-picture { background:#ffffff24; color:#fff6d7; }
.browse-page .filters>button:hover:not(.selected) { background:#f2f3e8; border-color:#c6d2bc; }
.browse-page .recommendation-details { font-size:11px; color:#72816f; margin:0 0 20px; }
.browse-page .recommendation-details summary { min-height:28px; padding:4px 0; }
/* Art and titles have their own space; recommendation prominence keeps a tidy row. */
.browse-page .game-grid,.browse-page .game-grid.mosaic { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:auto; gap:20px; }
.browse-page .game-card { min-height:0; background:#fffdf8; border:1px solid #e3e4d8; border-radius:24px; box-shadow:0 5px 0 #e6e4d880,0 8px 20px #374b3210; }
.browse-page .game-card:hover { transform:translateY(-4px); box-shadow:0 8px 0 #dedfcf80,0 14px 25px #374b3217; border-color:#c5d0b9; }
.browse-page .game-card .launch-game { display:flex; flex-direction:column; color:#24464b; min-height:0; height:100%; background:#fffdf8; }
.browse-page .game-art { display:block; position:relative; inset:auto; width:100%; height:auto; aspect-ratio:1.3; object-fit:cover; object-position:center; transition:filter .3s; background:var(--game-color,#e2eada); }
.browse-page .game-card:hover .game-art { transform:none; filter:saturate(1.08); }
.browse-page .card-caption { display:flex; position:relative; inset:auto; flex:1; padding:17px 16px 18px; gap:10px; background:#fffdf8; align-items:center; }
.browse-page .card-caption-text { gap:5px; }
.browse-page .skill-label { color:#768b7a; font-family:inherit; font-size:10px; font-weight:400; letter-spacing:.2px; }
.browse-page .card-title { color:#284a4e; font-size:22px; font-weight:500; letter-spacing:-.5px; line-height:1.1; text-shadow:none; margin:0; }
.browse-page .card-subtitle { color:#6c806e; font-size:15px; line-height:1.4; margin:7px 0 0; }
.browse-page .card-meta { margin-top:4px; font-size:10px; flex-wrap:wrap; gap:7px; color:#7b8b77; }
.browse-page .card-meta .stars { color:#dbdfd2; font-size:12px; }.browse-page .card-meta .stars .star.on { color:#d6aa47; }
.browse-page .level-pill { color:#568170; background:#edf2e7; font-family:inherit; font-weight:400; font-size:10px; padding:3px 7px; border-radius:7px; }
.browse-page .play-disc { display:grid; width:42px; height:42px; min-width:42px; padding:0; background:#e9eee1; color:#4b8272; box-shadow:0 3px 0 #d9e2cb; }
.play-disc .ui-icon { width:17px; height:17px; }
.browse-page .favorite-button { width:44px; height:44px; top:12px; right:12px; color:#24464b; background:#fffdf4; border:2px solid #54766b; backdrop-filter:none; box-shadow:0 2px 5px #183d5533; }
.browse-page .favorite-button .ui-icon { width:22px; height:22px; }
.browse-page .favorite-button.saved { color:#a52b49; background:#fff0ef; border-color:#a52b49; }
.browse-page .favorite-button:hover { box-shadow:0 0 0 3px #fffdf4,0 3px 9px #183d5540; }
.browse-page .game-tag { top:14px; left:12px; transform:none; font-family:inherit; font-size:10px; font-weight:500; border-radius:10px; padding:7px 9px; }
.game-tag .ui-icon { width:12px; height:12px; }
.browse-page .game-card.featured { grid-column:span 2; grid-row:auto; border-color:#c9d7bd; }
.browse-page .featured .launch-game { display:grid; grid-template-columns:1.05fr 1fr; }
.browse-page .featured .game-art { height:100%; aspect-ratio:auto; min-height:305px; }
.browse-page .featured .card-caption { padding:26px 24px; flex-direction:column; align-items:flex-start; justify-content:center; gap:19px; background:#edf2e3; }
.browse-page .featured .card-title { font-size:34px; }
.browse-page .featured .skill-label { font-size:11px; }
.browse-page .featured .play-disc { width:49px; height:49px; background:#f8d88b; color:#725b31; box-shadow:0 4px 0 #dcc082; }
.browse-page .recommendation-badge { top:15px; left:14px; padding:9px 12px; font-size:12px; border-radius:12px; color:#725c2e; background:#fff0b8; transform:rotate(-3deg); }
.browse-page .featured .favorite-button { right:calc(49% + 12px); }
.browse-page .together-card { background:#f6edda; border:1px solid #e7dac1; border-radius:24px; padding:24px 28px; margin-top:5px; box-shadow:none; }
.browse-page .together-icon { width:66px; height:66px; background:#fff8e6; color:#b29150; border-radius:21px; display:grid; place-items:center; flex:none; }
.together-icon .ui-icon { width:36px; height:36px; }
.browse-page .together-card h2 { font-size:27px; font-weight:500; }.browse-page .together-card p { color:#887e66; }
.browse-page .soft-button { border:1px solid #dcccaa; color:#7c6c43; background:#fffaef; border-radius:16px; }
.browse-page .footer { border-top:1px solid #e3e5d6; color:#849080; margin-top:40px; font-size:11px; }
.browse-page .footer .ui-icon { width:14px; height:14px; color:#c88e83; margin-right:4px; }
.browse-page .sticker-slot { background:#fffdf7; border-color:#e1e5d4; box-shadow:0 4px 0 #e4e4d77a; }
/* Story library: same front door, richer little activity illustrations. */
.browse-page .home { max-width:1320px; padding:35px 36px 30px; }
.browse-page .home-intro { margin-bottom:27px; }
.browse-page .home-intro h1 { font-size:clamp(39px,4.2vw,58px); }
.browse-page .welcome-note { font-size:16px; max-width:250px; color:#758377; }
.browse-page .feature-story { min-height:360px; border-color:#d8e1cf; box-shadow:0 7px 24px #334d3510; }
.browse-page .feature-art { display:block; min-width:0; min-height:360px; padding:0; border:0; text-align:left; border-radius:0; }
.browse-page .feature-art:active { transform:none; }
.browse-page .feature-art:focus-visible { outline-offset:-5px; z-index:2; }
.browse-page .feature-art .cover-photo { inset:0; transition:transform .5s; }
.browse-page .feature-art:hover .cover-photo { transform:scale(1.12); }
.cover-play { position:absolute; display:grid; place-items:center; inset:calc(50% - 27px) auto auto calc(50% - 27px); width:54px; height:54px; border-radius:50%; color:#325f50; background:#fff9dfef; box-shadow:0 5px 0 #35573b22; opacity:0; transform:scale(.9); transition:opacity .2s,transform .2s; z-index:2; }
.cover-play .ui-icon { width:21px; height:21px; }
.feature-art:is(:hover,:focus-visible) .cover-play { opacity:1; transform:scale(1); }
.browse-page .art-sticker { font-size:14px; border-radius:13px; padding:11px 14px; }
.art-sticker .ui-icon { color:#be8966; width:21px; height:21px; }
.browse-page .feature-copy { padding:34px 38px; }
.browse-page .feature-copy h2 { font-size:39px; }.browse-page .feature-copy h2 span { font-size:25px; }
.browse-page .feature-copy .primary { background:#2d8075; border-radius:18px; box-shadow:0 4px 0 #1c6056; font-size:19px; min-height:56px; }
.browse-page .feature-copy .primary .ui-icon { width:20px; height:20px; }
.path-heading { margin:31px 0 18px; }
.path-heading .eyebrow { display:block; margin:0 0 7px; }
.path-heading h2 { font-size:27px; font-weight:500; letter-spacing:-.6px; margin:0; }
.browse-page .learning-path { gap:16px; margin-top:0; }
.browse-page .path-card { padding:21px 18px; border-radius:24px; background:#fffdf7; gap:13px; border-color:#e3e3d6; box-shadow:0 4px 0 #e9e6d9a8; transition:transform .2s,box-shadow .2s; }
.browse-page .path-card:hover { transform:translateY(-4px); box-shadow:0 7px 0 #e0e2cfaa,0 12px 22px #3752380b; }
.browse-page .path-icon { width:77px; height:77px; background:#edf1e2; color:#3b8174; border-radius:22px; }
.browse-page .path-icon .ui-icon { width:64px; height:64px; }
.browse-page .path-card:nth-child(2) .path-icon { background:#f0eaf7; }.browse-page .path-card:nth-child(3) .path-icon { background:#f9eddf; }
.browse-page .path-card strong { font-size:20px; }.browse-page .path-card small { display:block; margin-top:7px; color:#7b8877; line-height:1.4; font-size:12px; }
.browse-page .path-arrow { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#f1f2e8; color:#78907d; margin-left:auto; flex:none; }
.path-arrow .ui-icon { width:18px; height:18px; }
.browse-page .home-foot { color:#81907d; font-size:11px; margin-top:27px; }
.reader-mode .browse-nav { display:none; }
@media (max-width:1320px) { .browse-nav { margin-inline:36px; } }
@media (max-width:1100px) {
  .browse-page .game-grid,.browse-page .game-grid.mosaic { grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
  .browse-page .profile .name { display:none; }.browse-page .profile { padding:4px; }
  .browse-page .story-door { grid-template-columns:42% 1fr; }.browse-page .story-door-note { display:none; }
  .browse-page .path-card { flex-wrap:wrap; gap:12px; padding:19px; }.browse-page .path-icon { width:66px; height:66px; }.browse-page .path-card>span:nth-child(2) { order:3; width:100%; }.browse-page .path-arrow { align-self:center; }.browse-page .path-icon .ui-icon { width:58px; height:58px; }
}
@media (max-width:800px) {
  .browse-page .topbar,.browse-page .site-header { padding:19px 24px; gap:14px; }
  .browse-nav { margin-inline:24px; }.browse-tabs a { padding:10px 17px; gap:7px; font-size:15px; }.browse-note { display:none; }
  .browse-page .playground,.browse-page .home { padding:27px 24px 20px; }
  .browse-page .welcome h1 { font-size:34px; }.browse-page .welcome h1 em { display:block; }.browse-page .surprise-button { font-size:13px; padding:12px 14px; }
  .browse-page .story-door-copy { padding:25px; }.browse-page .story-door-copy h2 { font-size:31px; }.browse-page .story-door-copy p { font-size:14px; }
  .browse-page .filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  .browse-page .filters>button { justify-content:center; padding:9px 7px; font-size:11px; gap:7px; }
  .category-picture { width:27px; height:29px; }.category-picture .ui-icon { width:20px; height:20px; }
  .browse-page .game-grid,.browse-page .game-grid.mosaic { grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
  .browse-page .game-card.featured { grid-column:1/-1; }.browse-page .featured .card-title { font-size:33px; }.browse-page .featured .game-art { min-height:280px; }
  .browse-page .home-intro h1 { font-size:43px; }.browse-page .welcome-note { font-size:14px; max-width:195px; }
  .browse-page .feature-copy { padding:26px; }.browse-page .feature-copy h2 { font-size:33px; }.browse-page .feature-copy h2 span { font-size:21px; }.browse-page .feature-copy p { font-size:14px; }
  .browse-page .feature-copy .primary { font-size:17px; padding:13px 18px; }
}
@media (max-width:600px) {
  .browse-page { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  .browse-page .topbar,.browse-page .site-header { padding:17px 18px; min-height:77px; flex-wrap:nowrap; gap:10px; }
  .browse-page .brand { font-size:25px; gap:8px; }.browse-page .browse-brand-mark { width:35px; height:38px; border-radius:13px; }.browse-brand-mark .ui-icon { width:25px; height:25px; }.browse-wordmark small { font-size:6px; letter-spacing:1.25px; margin-top:6px; }
  .browse-page .header-actions,.browse-page .story-header-actions { gap:6px; }.browse-page .icon-button { width:43px; min-height:44px; height:44px; }.browse-page .grownup-button { width:43px; min-height:44px; padding:10px; }.browse-page .grownup-button>span { display:none; }
  .browse-page .profile { min-height:44px; }.player-avatar { width:31px; height:31px; }
  .browse-page .story-header-actions .quiet-button { padding:10px 13px; font-size:12px; min-height:44px; }
  .browse-page .story-header-actions #storySound { width:43px; padding:10px; }.browse-page .story-header-actions #storySound>span { display:none; }
  .browse-nav { position:fixed; bottom:0; left:0; right:0; z-index:30; padding:8px 12px max(8px,env(safe-area-inset-bottom)); margin:0; border:0; border-top:1px solid #e2e3d6; background:#fffdf6f5; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 -6px 25px #3e513609; }
  .browse-tabs { width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }.browse-tabs a { min-height:57px; padding:7px; flex-direction:column; gap:4px; border-radius:16px; font-size:11px; }.browse-tabs a .ui-icon { width:22px; height:22px; }
  .browse-quiet { display:none; }.browse-page .playground,.browse-page .home { padding:16px 18px 20px; }
  .browse-page .welcome { gap:12px; margin-bottom:23px; align-items:flex-start; flex-wrap:wrap; }.browse-page .welcome>div { flex:1; }.browse-page .welcome h1 { font-size:31px; margin-top:8px; gap:10px; }.browse-page .hello-button { width:38px; height:38px; min-width:38px; }.browse-page .welcome .eyebrow { font-size:8px; letter-spacing:1.5px; }.browse-page .surprise-button { min-height:44px; margin-top:4px; padding:11px; font-size:0; border-radius:14px; }.browse-page .surprise-button .ui-icon { width:22px; height:22px; }
  .browse-page .story-door { display:grid; grid-template-columns:38% 1fr; min-height:260px; border-radius:24px; margin-bottom:30px; }
  .browse-page .story-door-copy { padding:22px 18px; }.browse-page .story-door-copy .eyebrow { font-size:8px; letter-spacing:1.1px; }.browse-page .story-door-copy h2 { font-size:27px; margin-top:9px; }.browse-page .story-door-copy p { font-size:12px; line-height:1.4; margin-bottom:15px; }.browse-page .story-door-start { font-size:14px; min-height:47px; padding:11px 13px; gap:7px; border-radius:14px; }.browse-page .story-door-start .ui-icon { width:17px; height:17px; }.browse-page .story-door-library { font-size:11px; gap:4px; margin-top:10px; }.book-cover-tag { display:none; }
  .shelf-heading { align-items:flex-start; margin-bottom:15px; gap:8px; }.shelf-heading h2 { font-size:25px; }.shelf-heading>p { font-size:10px; max-width:78px; text-align:right; margin-top:15px; }.shelf-heading .eyebrow { font-size:8px; letter-spacing:1.4px; }
  .browse-page .filters { margin-bottom:15px; gap:6px; }.browse-page .filters>button { flex-direction:column; gap:6px; min-height:81px; padding:9px 4px; line-height:1.2; border-radius:14px; font-size:10px; }.category-picture { width:29px; height:28px; border-radius:9px; }
  .browse-page .recommendation-details { font-size:10px; margin-bottom:15px; }
  .browse-page .game-grid,.browse-page .game-grid.mosaic { gap:13px; }.browse-page .game-card { border-radius:21px; }.browse-page .game-grid.mosaic .game-card:not(.featured) { min-height:0; }.browse-page .game-art { aspect-ratio:1.08; }
  .browse-page .card-caption { padding:13px 12px 15px; gap:7px; flex-wrap:wrap; align-content:flex-start; }.browse-page .card-title { font-size:19px; letter-spacing:-.3px; }.browse-page .skill-label { font-size:9px; }.browse-page .card-caption-text { width:100%; gap:5px; }.browse-page .card-meta { font-size:9px; gap:5px; margin-top:3px; }.browse-page .play-disc { display:none; }
  .browse-page .featured .launch-game { grid-template-columns:1fr 1fr; }.browse-page .featured .game-art { min-height:260px; }.browse-page .featured .card-caption { padding:24px 16px 20px; flex-wrap:nowrap; gap:13px; justify-content:center; }.browse-page .featured .card-title { font-size:28px; }.browse-page .featured .skill-label { font-size:9px; }.browse-page .featured .card-subtitle { font-size:12px; margin-top:6px; }.browse-page .featured .play-disc { display:grid; width:44px; height:44px; min-width:44px; }
  .browse-page .favorite-button { width:44px; height:44px; top:9px; right:9px; }.browse-page .featured .favorite-button { right:calc(50% + 9px); top:auto; bottom:12px; }
  .browse-page .recommendation-badge { top:12px; left:10px; font-size:10px; padding:8px 9px; }.browse-page .game-tag { max-width:calc(100% - 67px); font-size:8px; padding:6px; top:10px; left:7px; line-height:1.2; }.browse-page .game-tag .ui-icon { display:none; }
  .browse-page .together-card { display:flex; flex-wrap:wrap; gap:15px; padding:23px; }.browse-page .together-icon { width:49px; height:49px; border-radius:16px; }.browse-page .together-icon .ui-icon { width:29px; height:29px; }.browse-page .together-card>div { flex:1; }.browse-page .together-card h2 { font-size:24px; }.browse-page .together-card .soft-button { margin-left:0; }.browse-page .footer { font-size:10px; margin-top:30px; }
  .browse-page .home-intro { display:block; margin-bottom:22px; }.browse-page .home-intro h1 { font-size:40px; line-height:1.06; }.browse-page .welcome-note { max-width:100%; margin-top:15px; font-size:14px; }.browse-page .welcome-note br { display:none; }.browse-page .welcome-note strong { display:block; margin-bottom:4px; }
  .browse-page .feature-story { display:grid; grid-template-columns:1fr; border-radius:25px; }.browse-page .feature-art { min-height:205px; }.browse-page .feature-copy { padding:27px; }.browse-page .feature-copy h2 { font-size:34px; }.browse-page .feature-copy h2 span { font-size:23px; }.browse-page .feature-copy p { font-size:14px; }.browse-page .feature-copy .primary { width:100%; font-size:18px; }
  .browse-page .art-sticker { font-size:13px; bottom:18px; left:19px; }.cover-play { opacity:1; inset:17px 17px auto auto; width:44px; height:44px; transform:none; }
  .path-heading { margin:27px 0 16px; }.path-heading h2 { font-size:25px; }.browse-page .learning-path { grid-template-columns:1fr; gap:13px; }.browse-page .path-card { flex-wrap:nowrap; gap:15px; padding:18px; }.browse-page .path-card>span:nth-child(2) { order:0; width:auto; }.browse-page .path-icon { width:68px; height:68px; }.browse-page .path-icon .ui-icon { width:58px; height:58px; }.browse-page .path-card strong { font-size:21px; }.browse-page .path-card small { font-size:12px; margin-top:5px; }.browse-page .path-arrow { width:28px; height:28px; }
  .reader-mode.browse-page { padding-bottom:0; }.reader-mode .browse-nav { display:none; }
}
@media (max-width:370px) {
  .browse-page .topbar,.browse-page .site-header { padding-inline:13px; gap:5px; }.browse-page .brand { font-size:23px; gap:7px; }.browse-page .browse-brand-mark { width:31px; height:35px; }.browse-wordmark small { font-size:5.5px; letter-spacing:1px; }.browse-page .header-actions { gap:4px; }.browse-page .story-header-actions .quiet-button { font-size:11px; padding-inline:10px; }
  .browse-page .playground,.browse-page .home { padding-inline:13px; }.browse-page .story-door-copy { padding-inline:14px; }.browse-page .story-door-copy h2 { font-size:24px; }.browse-page .story-door-start { font-size:13px; padding:10px; }.browse-page .story-door-start .ui-icon { width:15px; height:15px; }.browse-page .card-title { font-size:18px; }.browse-page .featured .card-title { font-size:25px; }.browse-page .featured .card-caption { padding-inline:13px; }.browse-page .path-card { gap:11px; padding:15px; }.browse-page .path-icon { width:59px; height:64px; }.browse-page .path-icon .ui-icon { width:54px; height:54px; }.browse-page .path-card strong { font-size:19px; }
}
@media (prefers-reduced-motion:reduce) { .browse-page * { animation:none!important; transition:none!important; } }

/* Keep the book's two routes distinct and aligned. */
.story-door-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 17px; }
.browse-page .story-door-actions .story-door-library { margin:0; }
.browse-page .story-door-copy { padding-block:23px; }
.browse-page .story-door-copy h2 { font-size:clamp(27px,2.5vw,35px); }
.browse-page .sheet-card { background:#fffdf5; border-color:#e4e3d3; }
.browse-page .sheet-card .btn-sky { background:#2e7e73; color:white; border-color:#2e7e73; box-shadow:0 4px 0 #205f56; }
.empty-picture { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 17px; border-radius:25px; background:#f8e7df; color:#bd8178; }
.empty-picture .ui-icon { width:39px; height:39px; }
.browse-page :is(.word-controls,.retell-controls,.finish-actions,.activity-header,.word-next) button .ui-icon { width:20px; height:20px; margin-inline:2px 5px; }
.browse-page .finish-star .ui-icon { width:70px; height:70px; }
.browse-page .offline-task .ui-icon { width:36px; height:36px; }
.quiet .browse-page *,.quiet .browse-page *::before,.quiet .browse-page *::after { animation:none!important;transition:none!important; }
.quiet .browse-page :is(.game-card,.path-card,.browse-tabs a):hover { transform:none; }
@media(max-width:600px) {
  .story-door-actions { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
  .browse-page .story-door-copy { padding-block:20px; }.browse-page .story-door-copy h2 { font-size:27px; }
  .browse-page .game-card:not(.featured) .play-disc { display:grid; position:absolute; right:11px; top:-49px; width:38px; height:38px; min-width:38px; background:#fff9eeed; border:1px solid #fffdf4; box-shadow:0 3px 0 #184c3d20; }
}
@media(max-width:370px) {.browse-page .story-door-copy h2 { font-size:24px; }}

@media(max-width:600px) {
  .browse-page .story-door { min-height:205px; }
  .browse-page .story-door-copy { padding-block:16px; }
  .browse-page .story-door-copy h2 { font-size:25px; }
  .browse-page .story-door-copy p { margin-bottom:12px; }
  .browse-page .story-door-actions .story-door-library { display:none; }
  .browse-page .filters>button { min-height:74px; }
}

.little-days-door{display:flex;align-items:center;gap:24px;padding:26px;background:#e2ecd7;border:2px solid #b2c69d;border-radius:28px;margin-bottom:22px;color:#203e36;box-shadow:0 5px 0 #c6d5b7}.little-days-door strong{display:block;font-size:clamp(22px,2.8vw,32px);line-height:1.2;margin:8px 0}.little-days-door small{font-size:11px;letter-spacing:1.5px}.little-days-door>span:nth-child(2){flex:1}.little-days-picture .ui-icon{width:64px;height:64px;color:#416e50}.little-days-go{background:#24675b;color:#fffdf5;border-radius:17px;padding:16px 22px;font-size:20px;white-space:nowrap}.browse-tabs{flex-wrap:wrap}@media(max-width:600px){.little-days-door{gap:13px;padding:20px;flex-wrap:wrap}.little-days-picture{display:none}.little-days-go{font-size:17px;width:100%;text-align:center}.little-days-door strong{font-size:24px}.browse-tabs a{min-width:0}.browse-tabs{gap:4px}}