/* Shared navigation for the lobby, information pages, and all experiments. */
.site-sidebar{
  display:block;width:260px;flex:0 0 260px;align-self:stretch;min-width:0;
  background:#bce6ff;color:#021024;border-radius:24px;
  box-shadow:8px 0 32px rgba(2,16,36,.08);font-family:-apple-system,"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  font-size:14px;line-height:1.6;text-align:left;
}
.site-sidebar *{box-sizing:border-box}
.site-sidebar__inner{position:sticky;top:var(--site-nav-top,18px);max-height:calc(100vh - var(--site-nav-top,18px) - 18px);overflow:auto;padding:24px 0;scrollbar-width:thin}
.site-sidebar__brand{display:flex;align-items:center;gap:12px;padding:0 20px 20px;margin-bottom:20px;border-bottom:1px solid rgba(2,16,36,.1);color:#052659;text-decoration:none}
.site-sidebar__brand svg{width:38px;height:38px;flex:none}
.site-sidebar__brand strong{display:block;font-size:16px;font-weight:800;line-height:1.5}
.site-sidebar__brand small{display:block;font-size:11px;color:rgba(2,16,36,.58)}
.site-sidebar__details>summary{display:list-item;cursor:pointer;margin-left:28px;padding:0 12px 12px 0;color:#052659;font-size:12px;font-weight:700}
.site-sidebar__group{padding:0 16px 20px}
.site-sidebar__title{margin:0 0 8px;padding-left:12px;color:rgba(2,16,36,.58);font-size:11px;font-weight:700;letter-spacing:.08em}
.site-sidebar__links{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.site-sidebar__link{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border:0;border-radius:10px;color:rgba(2,16,36,.8);background:transparent;text-decoration:none;font-size:14px;line-height:1.6;transition:background .2s,color .2s}
.site-sidebar__link:hover{background:#a9defa;color:#021024}
.site-sidebar__link[aria-current="page"]{background:#7fc0ee;color:#021024;font-weight:700}
.site-sidebar__link[aria-current="page"]::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:#052659;border-radius:0 3px 3px 0}
.site-sidebar__link svg{width:18px;height:18px;flex:none}
.site-sidebar__number{width:22px;flex:none;color:#5483b3;font-family:Georgia,serif;font-size:12px}
.site-sidebar__email{display:block;padding:0 28px;color:#052659;font-size:12px;text-decoration:none;overflow-wrap:anywhere}
.site-sidebar a:focus-visible,.site-sidebar summary:focus-visible{outline:3px solid #052659;outline-offset:2px}
.site-sidebar~.main{min-width:0;flex:1}
.site-brand-mark{width:28px;height:28px;flex:none;color:#052659}
/* Keep the complete smile and wordmark legible beside the site name. */
:root{--nav-h:88px}
img.site-logo{display:block;width:80px;height:76px;max-width:none;object-fit:contain;flex:0 0 auto}
.site-sidebar__brand .site-logo{width:80px;height:80px}
.site-sidebar__brand>span{min-width:0}
.topnav:has(.site-logo){height:88px}
.topnav__brand:has(.site-logo){gap:12px;flex-shrink:0}
.nav:has(.site-logo){min-height:88px}
.footer__brand-top .site-logo{width:88px;height:88px}
@media(max-width:760px){
  .topnav:has(.site-logo){height:auto;min-height:88px;flex-wrap:wrap;padding:8px 14px;gap:4px}
  .topnav:has(.site-logo) .topnav__tabs{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between}
  .topnav:has(.site-logo) .topnav__tab{padding:.35rem .45rem}
  body:has(.topnav .site-logo){padding-top:162px}
  .topnav img.site-logo,.nav img.site-logo{width:72px;height:68px}
}
.site-experiment-link{display:inline-block;text-decoration:none}
#contact,#filterTags{scroll-margin-top:100px}
@media(max-width:980px){
  .site-sidebar{display:block;width:100%;flex-basis:auto;margin-bottom:20px}
  .site-sidebar__inner{position:static;max-height:none;padding:16px 0}
  .site-sidebar__brand{padding-bottom:14px;margin-bottom:0}
  .site-sidebar__details>summary{display:list-item;margin-left:24px}
  .site-sidebar__content{max-height:340px;overflow:auto;padding-top:8px}
  .site-sidebar__links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-sidebar__link{font-size:13px}
}

/* Compact experiment catalog and deep-experience entrances. */
.games-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr));gap:14px}
.game-card{display:grid;grid-template-columns:106px minmax(0,1fr);border-radius:18px;min-width:0}
.game-card:hover{transform:translateY(-3px)}
.game-card__cover{height:100%;min-height:172px}
.game-card__cover svg{width:88%;height:100px}
.game-card__body{min-width:0;padding:14px;gap:7px}
.game-card__title{order:-2;font-size:1.02rem;line-height:1.45;margin:0}
.game-card__tags{order:-1;display:flex;flex-wrap:wrap;gap:4px}
.game-card__tags .game-card__tag{font-size:10px;line-height:1.6;padding:2px 6px;margin:0;letter-spacing:0}
.game-card__desc{font-size:.82rem;line-height:1.6;margin:0 0 2px;flex:1}
.game-card__footer{margin-top:auto;gap:8px;justify-content:flex-end}
.game-card__diff{margin-right:auto;font-size:11px}
.game-card__btn{font-size:12px;line-height:1.5;padding:6px 12px;text-decoration:none;white-space:nowrap}
.toolbar{flex-wrap:wrap;gap:12px;margin-bottom:18px;padding:12px 14px}
.toolbar .search-box{flex:1 1 220px;max-width:360px}
.toolbar .filter-tags{flex:1 1 100%;gap:6px}
.filter-tag{padding:6px 11px;font-size:12px}
#games .section-header,.deep-experiences .section-header{margin-bottom:20px}
.section-intro{font-size:14px;line-height:1.7;color:#60758e;margin:10px 0 0}
.section-intro a{color:#052659;font-weight:700;text-underline-offset:3px}
.deep-experiences{margin:34px 0 42px;scroll-margin-top:110px;padding:26px;border:1px solid #d2e2f0;border-radius:24px;background:linear-gradient(135deg,#eff7fd,#e5f0fa)}
.section-title .experience-badge{display:inline-block;vertical-align:middle;padding:5px 10px;border-radius:999px;background:#052659;color:#fff;font-size:12px;font-weight:700;letter-spacing:.05em}
.experience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.experience-card{display:flex;flex-direction:column;min-width:0;color:#052659;text-decoration:none;background:#fff;border:1px solid #dae6f0;border-radius:18px;overflow:hidden;box-shadow:0 4px 15px #05265908;transition:transform .2s,box-shadow .2s}
.experience-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px #05265914}
.experience-card:focus-visible,.hero-carousel__slide:focus-visible{outline:3px solid #5483b3;outline-offset:-4px}
.experience-card__art{aspect-ratio:8/5;overflow:hidden;background:#dfedf8}
.experience-card__art img{display:block;width:100%;height:100%;object-fit:contain}
.experience-card__body{display:flex;flex-direction:column;gap:8px;padding:16px;flex:1}
.experience-card__tags{font-size:10px;font-weight:700;letter-spacing:.03em;color:#5483b3}
.experience-card h3{font-size:18px;line-height:1.4;margin:0}
.experience-card p{font-size:13px;line-height:1.65;color:#60758e;margin:0 0 4px;flex:1}
.experience-card__cta{align-self:flex-end;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;background:#edf5fc}
.hero-carousel{height:236px}
.hero-carousel__slide{padding:18px 48px 38px;gap:22px}
.hero-carousel__art{flex:0 0 42%;width:42%;height:180px;box-shadow:none;background:#fff}
.hero-carousel__art img{display:block;width:100%;height:100%;object-fit:contain}
.hero-carousel__title{font-size:1.45rem;line-height:1.3}
.hero-carousel__caption{font-size:.85rem;line-height:1.6;-webkit-line-clamp:3}
.hero-carousel__eyebrow{font-size:10px;letter-spacing:.05em}
.hero-carousel__nav{font-size:28px;line-height:1;opacity:.85}
.hero-carousel__dots{gap:5px;bottom:8px;padding:6px 10px}
.hero-carousel__dot{width:14px;height:6px}
.hero-carousel__dot.is-active{width:24px}
@media(max-width:1100px){.experience-grid{gap:10px}.experience-card__body{padding:12px}.deep-experiences{padding:20px}}
@media(max-width:650px){
  .game-card{grid-template-columns:86px minmax(0,1fr)}
  .game-card__body{padding:12px}.game-card__title{font-size:.98rem}
  .deep-experiences{padding:16px}.experience-grid{grid-template-columns:1fr}
  .experience-card{display:grid;grid-template-columns:120px minmax(0,1fr)}
  .experience-card__art{aspect-ratio:auto;height:100%;min-height:164px}
  .experience-card h3{font-size:16px}
  .hero-carousel{height:260px}
  .hero-carousel__slide{padding:18px 32px 36px;gap:12px}
  .hero-carousel__art{flex-basis:42%;height:160px}
  .hero-carousel__title{font-size:1.1rem}
  .hero-carousel__caption{font-size:12px;-webkit-line-clamp:4}
  .hero-carousel__eyebrow{font-size:9px;padding:3px 6px}
  .hero-carousel__nav{width:26px;height:30px}.hero-carousel__nav--prev{left:3px}.hero-carousel__nav--next{right:3px}
}
@media(prefers-reduced-motion:reduce){.hero-carousel__slide,.game-card,.experience-card{transition:none}}

/* Game lobby: three compact cards per row on desktop. */
#gamesGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#gamesGrid .game-card{grid-template-columns:78px minmax(0,1fr)}
#gamesGrid .game-card__cover{min-height:160px}
#gamesGrid .game-card__cover svg{height:88px}
#gamesGrid .game-card__body{padding:12px;gap:6px}
#gamesGrid .game-card__title{font-size:.98rem}
@media(max-width:1100px){#gamesGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#gamesGrid{grid-template-columns:minmax(0,1fr)}}

/* Independent, keyboard-accessible experiment and topic menus. */
.site-sidebar__menu{margin:3px 0}
.site-sidebar__menu>summary{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 12px;border-radius:10px;cursor:pointer;color:#052659;font-size:14px;font-weight:700;list-style:none}
.site-sidebar__menu>summary::-webkit-details-marker{display:none}
.site-sidebar__menu>summary::after{content:'›';margin-left:auto;font-size:22px;line-height:1;transition:transform .2s}
.site-sidebar__menu[open]>summary::after{transform:rotate(90deg)}
.site-sidebar__menu>summary:hover{background:#a9defa}
.site-sidebar__menu>summary svg{width:18px;height:18px;flex:none}
.site-sidebar__menu .site-sidebar__links{margin:4px 0 10px 13px;padding-left:7px;border-left:1px solid #5483b34d;grid-template-columns:1fr}
.site-sidebar__menu .site-sidebar__link{font-size:13px;padding:7px 8px;min-height:36px}
.site-sidebar__menu .site-sidebar__count{margin-left:auto;font-size:11px;font-weight:500;color:#5483b3}
.site-sidebar__link[aria-current="true"]{background:#7fc0ee;color:#021024;font-weight:700}

/* Keep shared navigation above the content on narrow screens. */
@media(max-width:980px){
 .dashboard:has(> .site-sidebar){display:flex;flex-direction:column;gap:18px}
 .dashboard>.site-sidebar{width:100%;flex:0 0 auto;margin-bottom:0}
 .dashboard>.site-sidebar~.main{width:100%;min-width:0;flex:1 1 auto}
}
@media(max-width:768px){
 .hero-carousel__slide{flex-direction:row;text-align:left}
 .hero-carousel__content{min-width:0;flex:1}
}