.classroom-map{--map-ink:#4e405b;--map-line:#ded4e1;color:var(--map-ink);margin-block:2.5rem 5rem;scroll-margin-top:110px}.classroom-map[hidden],.classroom-map [hidden]{display:none!important}.classroom-map__heading{justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2rem;display:flex}.classroom-map__heading .eyebrow{color:#82688c;letter-spacing:.18em;font-size:.73rem}.classroom-map__heading h2{margin:.6rem 0 0;font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:500}.classroom-map__heading>p{color:#736b77;margin:0;font-size:.92rem;line-height:1.9}.classroom-map__layout{border:1px solid var(--map-line);background:#fcfafc;grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr);display:grid}.classroom-map__canvas{aspect-ratio:560/660;background:radial-gradient(#f1edf5 0%,#0000 67%);width:100%;max-width:620px;margin:auto;position:relative}.classroom-map__art{width:100%;height:100%;position:absolute;inset:0}.classroom-map__city{left:var(--city-x);top:var(--city-y);border:1px solid var(--map-line);min-width:76px;min-height:46px;color:var(--map-ink);background:#ffffffe0;border-radius:3px;flex-direction:column;justify-content:center;align-items:center;padding:.35rem .55rem;font-size:.93rem;line-height:1.5;text-decoration:none;transition:background .2s,border-color .2s,box-shadow .2s;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 4px 12px #5e456b08}.classroom-map__city small{color:#796c80;font-size:.69rem}.classroom-map__city:hover,.classroom-map__city:focus-visible{background:#f2e9f8;border-color:#947ca0;box-shadow:0 5px 18px #74547f20}.classroom-map a:focus-visible{outline-offset:4px;outline:2px solid #82628e}.classroom-map__companion{border-left:1px solid var(--map-line);background:#fffdfd;align-self:stretch;padding:clamp(1.3rem,2.6vw,2.4rem)}.classroom-map__companion,.classroom-map__mika>div{min-width:0}.classroom-map__mika{align-items:center;gap:.8rem;margin:1.2rem 0 2.5rem;display:flex}.classroom-map__mika-sprite{aspect-ratio:192/208;background-image:var(--mika-sheet);width:104px;image-rendering:pixelated;background-position:0 0;background-repeat:no-repeat;background-size:100% 100%;flex:0 0 104px}.classroom-map__mika p{color:#67516f;margin:0 0 .6rem;font-size:1rem;line-height:1.8}.classroom-map__lookup .eyebrow{color:#89738f;letter-spacing:.1em;font-size:.65rem}.classroom-map__total{margin:.5rem 0 1rem;font-size:.9rem}.classroom-map__city-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem .75rem;display:grid}.classroom-map__city-list a{min-height:44px;color:var(--map-ink);border-bottom:1px solid #e9e0eb;justify-content:space-between;align-items:center;gap:.25rem;font-size:.84rem;text-decoration:none;display:flex}.classroom-map__city-list small{color:#7e6e85;white-space:nowrap;font-size:.68rem}.classroom-map__city-list a:hover{color:#9361a1}.classroom-map__hongkong{color:#67526f;border-top:1px solid var(--map-line);justify-content:space-between;align-items:center;min-height:44px;font-size:.85rem;display:flex}.classrooms-data-credit{color:#877f8a;margin-top:1.2rem;font-size:.75rem;line-height:1.6}.classrooms-data-credit summary{cursor:pointer}.classrooms-data-credit a{color:inherit;text-underline-offset:.15em}html.classrooms-map-is-ready [data-map-source]{display:none!important}html.classrooms-map-is-ready .classrooms-index__label:first-child,html.classrooms-map-is-ready .classrooms-index__summary,.classrooms-map-is-ready .classrooms-heading__original,.classrooms-heading__hongkong{display:none}.classrooms-map-is-ready .classrooms-heading__hongkong{display:block}.classroom-city-dialog{color:#332c38;background:#fff;border:0;width:min(850px,100vw - 3rem);max-width:none;max-height:calc(100dvh - 3rem);margin:auto;padding:0;box-shadow:0 24px 80px #20132944}.classroom-city-dialog::backdrop{backdrop-filter:blur(4px);background:#221a2eb3}.classroom-city-dialog__surface{overscroll-behavior:contain;max-height:calc(100dvh - 3rem);overflow-y:auto}.classroom-city-dialog__header{z-index:2;backdrop-filter:blur(10px);background:#fffdfdf5;border-bottom:1px solid #e5dce8;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.8rem;display:flex;position:sticky;top:0}.classroom-city-dialog__header .eyebrow{color:#856d90;letter-spacing:.15em;margin:0 0 .3rem;font-size:.65rem}.classroom-city-dialog__header h2{color:#4e405b;margin:0;font-size:clamp(1.3rem,3vw,1.8rem);font-weight:500}.classroom-city-dialog__header button{flex:0 0 44px}.classroom-city-dialog__body{padding:1.2rem 1.8rem 2rem}.classroom-city-dialog__body>p:first-child{color:#75617f;margin:0 0 1.4rem;font-size:.83rem}.classroom-city-dialog .school-item{border-color:#e7dfea}.classroom-city-dialog .school-item dd{overflow-wrap:anywhere}.classroom-city-dialog .school-item__main dd strong{color:#4e405b}.classroom-city-dialog__note{color:#807486;margin:1.5rem 0 0;font-size:.78rem;line-height:1.8}html.classroom-dialog-is-open{overflow:hidden}@media (width<=900px){.classroom-map__layout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.classroom-map__heading{flex-direction:column;align-items:start;gap:.8rem}.classroom-map__canvas{min-height:550px}.classroom-map__mika{flex-direction:column;align-items:start}}@media (width<=620px){.classroom-map{margin-block:2rem 3rem}.classroom-map__layout{grid-template-columns:minmax(0,1fr)}.classroom-map__canvas{min-height:520px}.classroom-map__city{min-width:66px;min-height:46px;padding:.3rem;font-size:.84rem}.classroom-map__companion{border-left:0;border-top:1px solid var(--map-line);padding:1.3rem}.classroom-map__mika{flex-direction:row;align-items:center;margin:0 0 1.4rem;padding-right:2.8rem}.classroom-map__mika p{overflow-wrap:anywhere}.classroom-map__mika-sprite{flex-basis:84px;width:84px}.classroom-map__city-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem .8rem}.classroom-city-dialog{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.classroom-city-dialog__surface{max-height:calc(100dvh - 1.5rem)}.classroom-city-dialog__header,.classroom-city-dialog__body{padding:1rem}}@media (prefers-reduced-motion:reduce){.classroom-map__city{transition:none}}.classrooms-page #page-intro-title>span{white-space:pre-line}
