*{box-sizing:border-box}
html{min-height:100%;background:#b9e5ed}
body{margin:0;min-height:100vh;min-height:100svh;padding:16px;display:grid;place-items:center;background:radial-gradient(ellipse at 8% 18%,#ffffffb8 0%,#ffffffb8 5%,transparent 18%),radial-gradient(ellipse at 95% 28%,#ffffffa8 0%,#ffffffa8 6%,transparent 20%),radial-gradient(ellipse at 0% 110%,#8fc76c 0%,#b5dd8a 29%,transparent 52%),radial-gradient(ellipse at 100% 115%,#99cb70 0%,#c5e89b 30%,transparent 54%),linear-gradient(180deg,#a9e3fa 0%,#d6f1ec 58%,#e5f0b7 100%);background-attachment:fixed;color:#0c2349;font-family:"Trebuchet MS","Microsoft YaHei",sans-serif}
/* Fit the complete 4:3 artwork to BOTH viewport axes, without clipping buttons. */
.park{position:relative;width:min(100%,1600px,calc(133.333333vh - 42.666667px));width:min(100%,1600px,calc(133.333333svh - 42.666667px));margin:auto;isolation:isolate;border-radius:24px;overflow:hidden;box-shadow:0 12px 45px #376e651c}
.scene{display:block;width:100%;height:auto}
.welcome,footer,.accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.course{position:absolute;top:35.2%;width:45.1%;height:57.7%;border-radius:8%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:box-shadow .18s,background-color .18s}
.letters{left:4.4%}.music{left:50.6%}
.course:hover{background:#ffffff12;box-shadow:0 0 0 4px #ffffffbd}
.course:active{background:#ffffff30}
.course:focus-visible{outline:6px solid #133d77;outline-offset:4px;box-shadow:0 0 0 11px #fff7b0}
.crop{display:none}
@media(max-width:599px){
 body{display:block;padding:0;background:linear-gradient(#a9e4ff,#e7f6c7)}
 .park{width:100%;padding:23px 16px 20px;border-radius:0;overflow:visible;box-shadow:none}
 .scene{display:none}
 .welcome{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal}
 .welcome h1{font-size:25px;margin:0 0 12px;font-weight:900;letter-spacing:-1px}
 .welcome>span{display:inline-block;background:#fff9e9;border-radius:30px;padding:7px 14px;font-size:14px;font-weight:700}
 .welcome h2{font-size:27px;line-height:1.4;margin:15px 0 8px}
 .welcome p{font-size:16px;line-height:1.6;margin:0 0 18px}
 .courses{display:grid;gap:20px}
 .course{position:relative;top:auto;left:auto;display:block;width:100%;height:auto;aspect-ratio:653/627;border-radius:9%;overflow:hidden;background:#fffbed;box-shadow:0 5px 0 #73994d25}
 .crop{display:block;position:absolute;inset:0;overflow:hidden}
 .crop img{position:absolute;width:221.75%;max-width:none;height:auto;top:-60.9%;left:-9.8%}
 .music .crop img{left:-112.1%}
 footer{position:static;width:auto;height:auto;clip-path:none;white-space:normal;text-align:center;margin:23px 0 0;color:#405a35;font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}