.city-home{--bg:#fff;--surface:#fff;--surface-2:#eef7fc;--border:#dce4ed;--text:#0b1428;--text-dim:#526076;--primary:#d92d38;--primary-dark:#b8212b;--primary-light:#fff0f0;background:#fff;color:var(--text);height:auto;min-height:100%}
.city-wrap{max-width:1240px;padding:0 28px;margin:0 auto}.city-home .app-header{background:#f5fbff;border-color:#e5eef4}.city-home .app-header>.container{max-width:1240px;padding:0 28px}.city-home .btn-primary{box-shadow:none}.city-home a:hover{text-decoration:none}.city-home a:focus-visible,.city-home button:focus-visible,.city-home input:focus-visible,.city-home select:focus-visible{outline:3px solid #235cae;outline-offset:4px}.city-home h1,.city-home h2,.city-home h3{font-feature-settings:"case" on;letter-spacing:-.035em}.city-home p{line-height:1.7}.skip-link{position:fixed;top:8px;left:16px;z-index:100;background:white;padding:12px;transform:translateY(-160%)}.skip-link:focus{transform:none}.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}
.city-hero{position:relative;min-height:620px;background:#eaf7ff;isolation:isolate;overflow:hidden}.city-panorama{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}.city-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(234,247,255,.96),rgba(234,247,255,.77) 32%,rgba(234,247,255,0) 59%);z-index:-1}.hero-content{padding-top:100px;padding-bottom:145px;position:relative}.eyebrow{font-size:12px;font-weight:750;color:#52657a;margin-bottom:16px}.hero-content h1{font-size:clamp(38px,4.8vw,64px);font-weight:850;line-height:1.18;max-width:650px;margin-bottom:24px}.hero-lead{font-size:20px;color:#34445d;max-width:460px}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:32px;flex-wrap:wrap}.city-button{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:52px;padding:14px 23px;border:0;border-radius:13px;background:#d92d38;color:#fff;font:inherit;font-weight:750;cursor:pointer;line-height:1.45;transition:background .15s,transform .15s}.city-button:hover{background:#b8212b;color:white;transform:translateY(-2px)}.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:#174578}.pin-link{display:inline-flex;min-height:44px;align-items:center;font-size:13px;font-weight:600;color:#34445d;margin-top:13px}
.city-portals{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:-80px;z-index:1}.portal{display:block;color:var(--text);background:white;border:4px solid white;border-radius:21px;overflow:hidden;box-shadow:0 14px 38px #21436012;transition:transform .2s}.portal:hover{transform:translateY(-5px)}.portal-art{height:154px;background-image:url('/img/knowledge-city/hero.webp');background-size:220%}.art-learn{background-position:70% 54%}.art-play{background-position:92% 12%}.art-discover{background-position:97% 91%}.portal-label{display:flex;align-items:center;gap:13px;padding:21px 14px}.portal-label h2{font-size:23px;margin:0 0 4px}.portal-label p{font-size:12px;margin:0}.portal-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:49px;height:49px;border-radius:50%;font-size:24px}.coral{background:#ffe1df;color:#a82c35}.blue{background:#dcf3ff;color:#165b8a}.gold{background:#fff0bf;color:#805709}.arrow{margin-left:auto;font-size:23px}
.city-section{padding-top:76px;padding-bottom:76px}.city-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.city-section-head .eyebrow{margin-bottom:10px}.city-section h2,.teacher-section h2{font-size:clamp(25px,3vw,36px);line-height:1.35;margin-bottom:0}.city-search{display:flex;gap:14px;margin-bottom:26px}.search-box{display:flex;align-items:center;gap:12px;flex:1;min-width:0;border:1px solid #d3deea;border-radius:13px;padding:0 17px;color:#65758b;background:white}.search-box input{font:inherit;border:0;background:transparent;min-width:0;width:100%;height:55px;outline-offset:0;color:var(--text)}.search-box input::placeholder{color:#65758b}.city-search select{font:inherit;border:1px solid #d3deea;border-radius:13px;background:white;min-width:170px;color:#34445d;padding:10px 15px;min-height:55px}.subject-grid,.course-grid,.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.subject-card{border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 7px 27px #2039560b;border:1px solid #edf1f6;color:var(--text);transition:transform .2s}.subject-card:hover{transform:translateY(-4px)}.subject-card img{width:100%;height:192px;object-fit:cover;display:block}.subject-card>div{display:flex;align-items:center;gap:13px;padding:20px}.subject-card h3{font-size:18px;margin:0;flex:1}.subject-card [data-icon]{color:#235575;font-size:23px}.courses-section{background:linear-gradient(130deg,#eaf7ff,#f5fbff)}.course-card{display:flex;flex-direction:column;overflow:hidden;border-radius:19px;border:4px solid white;background:white;color:var(--text);transition:transform .2s;box-shadow:0 9px 26px #26435708}.course-card:hover{transform:translateY(-4px)}.course-cover{height:170px;position:relative;background:#d4e8f3;overflow:hidden}.course-cover img{width:100%;height:100%;object-fit:cover;display:block}.course-grade{position:absolute;bottom:12px;left:12px;background:#fff;color:#164c70;border-radius:9px;font-size:13px;font-weight:750;padding:7px 11px}.course-body{padding:19px 17px;display:flex;flex-direction:column;flex:1}.course-body h3{font-size:19px;line-height:1.5;margin-bottom:9px}.course-body p{font-size:13px}.course-body strong{color:#174578;font-size:14px;margin-top:auto;padding-top:12px}.course-status{grid-column:1/-1;padding:25px;background:#fff;border-radius:16px}.game-card{padding:27px;border:1px solid #e3e9ef;border-radius:20px;color:var(--text);background:#fff;transition:box-shadow .2s}.game-card:hover{box-shadow:0 12px 30px #20395612}.game-card h3{font-size:19px;margin-top:20px;line-height:1.5}.game-card p{font-size:14px;margin-bottom:23px}.game-card strong{font-size:14px;color:#174578}#play{scroll-margin-top:85px}.teacher-section{display:grid;grid-template-columns:1.15fr 1fr;padding:0;margin-bottom:64px;border-radius:24px;background:#fff5e5;overflow:hidden}.teacher-section>div{padding:45px 40px;align-self:center}.teacher-section h2{margin-bottom:16px}.teacher-section p{max-width:500px}.teacher-section .city-button{margin-top:14px}.teacher-section>img{width:100%;height:100%;min-height:350px;object-fit:cover}.city-footer{border-top:1px solid #e3eaf1;display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:30px;padding-bottom:30px}.city-footer nav{display:flex;gap:22px;flex-wrap:wrap}.city-footer nav a{font-size:13px;color:#526076;padding:8px 0}.city-footer>p{font-size:12px;margin:0}
@media(min-width:1600px){.city-hero{min-height:690px}.hero-content{padding-top:140px}.city-panorama{object-position:center 56%}}
@media(max-width:1040px){.hero-content h1{font-size:47px}.city-hero{min-height:570px}.hero-content{padding-top:75px}.portal-label{gap:9px;padding:17px 9px}.portal-label h2{font-size:19px}.portal-label p{display:none}.portal-icon{width:42px;height:42px}.subject-card h3{font-size:16px}.city-footer{flex-wrap:wrap}.city-footer>p{display:none}}
@media(max-width:700px){.city-wrap,.city-home .app-header>.container{padding-left:20px;padding-right:20px}.city-hero{min-height:730px}.city-panorama{top:230px;height:510px;object-position:83% center}.city-hero:after{background:linear-gradient(180deg,#eaf7ff 0%,#eaf7ff 25%,rgba(234,247,255,.92) 38%,rgba(234,247,255,0) 57%)}.hero-content{padding-top:34px;padding-bottom:340px}.hero-content .eyebrow{font-size:11px;margin-bottom:13px}.hero-content h1{font-size:clamp(32px,8vw,44px);margin-bottom:16px;line-height:1.2}.hero-lead{font-size:16px;max-width:340px;margin-bottom:0}.hero-actions{gap:14px;margin-top:22px}.hero-actions .text-link{font-size:13px}.city-button{min-height:48px;padding:13px 18px;font-size:14px}.pin-link{font-size:12px;margin-top:9px}.city-portals{grid-template-columns:1fr;gap:12px;margin-top:-44px}.portal{display:flex;border-width:3px;border-radius:16px}.portal-art{width:108px;height:94px;flex-shrink:0;background-size:330%}.portal-label{flex:1;min-width:0;padding:14px 10px;gap:11px}.portal-label h2{font-size:19px}.portal-label p{display:block;font-size:11px}.portal-label .portal-icon{width:36px;height:36px;font-size:19px}.portal-label .arrow{font-size:21px}.city-section{padding-top:47px;padding-bottom:47px}.city-section-head{align-items:flex-start;flex-direction:column;gap:9px;margin-bottom:22px}.city-section-head .eyebrow{font-size:11px;margin-bottom:8px}.city-section h2,.teacher-section h2{font-size:26px}.city-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:11px}.search-box{grid-column:1/-1;padding:0 13px}.search-box input{font-size:14px;height:50px}.city-search select{min-width:0;width:100%;font-size:14px;min-height:48px}.subject-grid{grid-template-columns:1fr;gap:12px}.subject-card{display:flex;align-items:center;border-radius:15px}.subject-card img{width:108px;height:90px;flex-shrink:0}.subject-card>div{padding:13px;flex:1;gap:10px}.subject-card h3{font-size:16px}.subject-card [data-icon]{display:none}.course-grid,.game-grid{grid-template-columns:1fr;gap:18px}.course-cover{height:185px}.course-body{padding:16px}.course-body h3{font-size:19px}.course-body strong{min-height:34px}.game-card{padding:23px}.teacher-section{margin:0 20px 42px;border-radius:20px;grid-template-columns:1fr}.teacher-section>div{padding:28px 24px}.teacher-section>img{height:190px;min-height:0}.teacher-section .eyebrow{font-size:11px}.teacher-section p{font-size:14px}.city-footer{gap:18px;align-items:flex-start;padding-top:26px;padding-bottom:26px}.city-footer nav{gap:7px 19px}.city-footer nav a{min-height:40px;display:flex;align-items:center}.city-home .brand{font-size:20px}}
@media(max-width:370px){.hero-actions{gap:7px}.hero-actions .text-link{font-size:12px}.hero-content h1{font-size:31px}.portal-label .portal-icon{display:none}.portal-art{width:95px}}
@media(prefers-reduced-motion:reduce){.city-home *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Five available school grades on the homepage. */
@media(min-width:1100px){.course-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:701px) and (max-width:1099px){.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}