:root{color-scheme:light;--paper:#fff9e9;--ink:#183e33;--muted:#68796e;--yellow:#ffdb4f;--green:#29654a;--line:#dcded0;font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);min-width:280px}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#6f795b18 .8px,transparent .8px);background-size:20px 20px;z-index:-1}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:3px solid #286cce;outline-offset:6px}
[hidden]{display:none!important}
.page-shell{max-width:1440px;min-height:100svh;margin:auto;padding:0 6.2%;display:flex;flex-direction:column}
.masthead{min-height:120px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:flex;align-items:center;gap:13px}
.brand-mark{width:47px;height:47px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:26px;font-weight:900;border:1.5px solid var(--ink);transform:rotate(-9deg)}
.brand-text{display:flex;flex-direction:column;gap:6px}
.brand-text strong{font-size:19px;letter-spacing:2px}
.brand-text>span{font-size:9px;font-weight:700;letter-spacing:1.45px}
.header-note{font-size:12px;letter-spacing:1px;display:flex;align-items:center;gap:8px;color:#647366}
.header-note i{display:inline-block;width:6px;height:6px;background:#679b53;border-radius:50%}
.hero{flex:1;display:grid;grid-template-columns:1.03fr 1fr;align-items:center;gap:28px;padding:60px 0 64px;min-height:720px}
.intro{position:relative;z-index:2}
.eyebrow{font-size:13px;letter-spacing:1.2px;display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;font-weight:600}
.eyebrow>span{font-size:21px;color:#b27e24}
h1{font-size:clamp(34px,4.1vw,59px);line-height:1.32;letter-spacing:-1.8px;margin:0;font-weight:900;white-space:nowrap}
.title-line{display:block;margin-top:3px}
.highlight{position:relative;display:inline-block;color:var(--green)}
.highlight svg{position:absolute;width:106%;height:20px;bottom:-6px;left:-3px;overflow:visible;fill:none;stroke:#e9ba24;stroke-width:5;stroke-linecap:round;z-index:-1}
.lead{font-size:16px;line-height:1.95;color:var(--muted);margin:30px 0 26px;letter-spacing:.3px}
.school-name{color:var(--ink);font-weight:700;margin:0 4px}
.destination{display:flex;align-items:center;gap:14px;margin-bottom:28px;max-width:380px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.destination-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #d8dfca;border-radius:50%;background:#eff2df}
.destination-icon{background:#fffdf4;border:0}
.destination-icon img{display:block;width:42px;height:42px;object-fit:contain}
.destination>div{display:flex;flex:1;flex-direction:column;gap:7px}
.destination-label{font-size:9px;letter-spacing:1.4px;color:var(--muted)}
.destination strong{font-size:16px;letter-spacing:.4px}
.destination strong span{font-size:10px;color:var(--muted);font-weight:400;margin-left:6px}
.destination-arrow{font-size:23px;color:#829280;padding-right:5px}
.primary-button{min-height:60px;width:260px;background:var(--ink);color:var(--paper);padding:0 24px;border:1.5px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:28px;font-weight:700;letter-spacing:1px;font-size:16px;box-shadow:4px 5px 0 #d9d7b3;transition:transform .2s,box-shadow .2s,background .2s}
.primary-button:hover{transform:translateY(-2px);background:#275441;box-shadow:4px 7px 0 #d9d7b3}
.primary-button:active{transform:translate(2px,3px);box-shadow:2px 2px 0 #d9d7b3}
.button-arrow{font-size:28px;font-weight:400;line-height:1}
.countdown-area{max-width:380px;margin-top:25px}
.countdown-row{display:flex;align-items:center;gap:7px;min-height:30px;font-size:12px;color:var(--muted)}
.timer-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#79a262}
#seconds{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
#toggle-timer{border:0;border-bottom:1px solid #a2b09b;padding:5px 0 3px;margin-left:auto;background:transparent;color:var(--green);cursor:pointer;font-size:12px}
#toggle-timer:hover{color:#102d24;border-color:#102d24}
.progress-track{margin-top:9px;height:3px;border-radius:3px;background:#e3e7d5;overflow:hidden}
#progress-fill{height:100%;width:100%;background:#789564;transform-origin:left center}
.no-script-copy{font-size:12px;color:var(--muted);margin-top:24px}
.destination-url{font-size:10px;color:#859080;margin:16px 0 0;letter-spacing:.4px}
.destination-url span{margin-left:7px;font-family:ui-monospace,Consolas,monospace;letter-spacing:0}
.illustration{height:540px;position:relative;isolation:isolate;align-self:center}
.mascot-halo{position:absolute;width:96%;aspect-ratio:1;top:9%;left:3%;border-radius:50%;background:#f7ecc8;z-index:-2}
.mascot-halo:after{content:"";position:absolute;inset:20px;border:1px dashed #d8c995;border-radius:50%;opacity:.65}
.mascot-composition{position:absolute;width:75%;max-width:385px;aspect-ratio:445/600;left:50%;bottom:5px;transform:translateX(-50%);z-index:1;animation:bob 5s ease-in-out infinite}
.mascot{display:block;position:relative;width:100%;height:auto;filter:drop-shadow(0 13px 9px #65582318);mask-image:linear-gradient(to bottom,#000 0%,#000 92%,transparent 100%)}
.campus-medallion{position:absolute;left:35%;top:62%;width:38%;aspect-ratio:1;border:5px solid #fffdf4;border-radius:50%;padding:9px;background:#fffdf4;box-shadow:0 8px 18px #70572422,0 0 0 1px #d4d6bc;transform:rotate(-9deg)}
.campus-medallion:before{content:"";position:absolute;inset:-8px;border:1px dashed #9ea681;border-radius:50%}
.campus-medallion img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
.speech-bubble{position:absolute;left:3%;top:4%;font-size:15px;font-weight:700;letter-spacing:.8px;background:#fffdf4;padding:18px 24px 15px;border:1.4px solid var(--ink);border-radius:16px 16px 16px 3px;transform:rotate(-7deg);box-shadow:3px 4px 0 #dedcc4;z-index:2;white-space:nowrap}
.speech-bubble:after{content:"";position:absolute;left:27px;bottom:-10px;width:16px;height:17px;background:#fffdf4;border-right:1.4px solid var(--ink);border-bottom:1.4px solid var(--ink);transform:skewY(32deg) rotate(10deg);clip-path:polygon(0 0,100% 0,100% 100%)}
.speech-bubble span{display:block;margin-top:8px;font-size:8px;letter-spacing:2.1px;color:#819071}
.student-label{position:absolute;bottom:18px;right:-5px;min-width:200px;padding:15px 51px 15px 20px;border:1.3px solid #577052;background:#fffdf4;border-radius:10px;transform:rotate(5deg);box-shadow:3px 4px 0 #d9dabf;z-index:3}
.student-label>span{font-weight:700;letter-spacing:1px;font-size:14px;display:block}
.student-label small{display:block;font-size:10px;margin-top:6px;color:#7b866f}
.student-label i{position:absolute;right:15px;top:22px;font-style:normal;width:23px;height:23px;background:#e6efcf;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--green)}
.spark{position:absolute;color:#a9b287;line-height:1;z-index:3}
.spark-one{right:1%;top:17%;font-size:43px;transform:rotate(10deg)}
.spark-two{left:-2%;bottom:22%;font-size:36px;color:#ad9457}
.orbit{position:absolute;border:1px solid #d6d7bd;border-radius:50%;width:25px;height:25px;z-index:-1}
.orbit-one{top:30%;left:-3%}
.orbit-two{bottom:30%;right:-4%;width:14px;height:14px;background:#e5e9ca}
.illustration-caption{position:absolute;bottom:-21px;left:30%;font-size:11px;letter-spacing:3px;color:#8a9279;transform:rotate(-3deg)}
.footer{padding:24px 0 27px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);color:#87917d;font-size:10px;letter-spacing:.5px}
.footer-note{font-size:11px;color:#697a66;letter-spacing:1px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)}50%{transform:translateX(-50%) translateY(-9px) rotate(1deg)}}
@media(min-width:1450px){.page-shell{padding:0 86px}.hero{gap:50px}}
@media(max-width:1050px){.page-shell{padding:0 5%}.masthead{min-height:100px}.hero{gap:12px;min-height:660px;padding:50px 0}.illustration{height:460px}.speech-bubble{left:0;font-size:12px;padding:15px 18px}.student-label{right:0;bottom:12px;min-width:174px;padding:12px 43px 12px 15px}.student-label i{right:12px;top:18px}.lead{font-size:14px}.mascot-composition{width:78%;max-width:325px;bottom:5px}.mascot-halo{top:17%}.illustration-caption{bottom:-17px;font-size:10px}}
@media(max-width:760px){.page-shell{padding:0 6%}.masthead{min-height:92px}.brand-mark{width:39px;height:39px;font-size:23px}.brand-text strong{font-size:15px;letter-spacing:1px}.brand-text>span{font-size:7px;letter-spacing:1px}.header-note{font-size:10px;letter-spacing:0;gap:6px}.hero{grid-template-columns:1fr;gap:0;padding:35px 0 59px;min-height:0}.intro{display:flex;flex-direction:column;align-items:center;text-align:center}.eyebrow{margin-bottom:18px;font-size:11px}h1{font-size:clamp(32px,7.5vw,51px);letter-spacing:-1px}.lead{font-size:13px;margin:23px 0 22px;line-height:1.9}.destination{width:100%;max-width:350px;text-align:left;margin-bottom:23px;padding:13px 0}.destination strong{font-size:15px}.primary-button{width:100%;max-width:350px;min-height:58px}.countdown-area{width:100%;max-width:350px;margin-top:20px}.destination-url{margin-top:13px;font-size:9px}.illustration{height:400px;width:min(100%,410px);margin:30px auto 0;grid-row:2}.mascot-composition{width:73%;max-width:260px;bottom:0}.mascot-halo{width:88%;left:6%;top:10%}.speech-bubble{top:0;left:0;font-size:12px}.student-label{display:none}.illustration-caption{bottom:-25px;left:28%}.spark-one{top:13%;right:1%;font-size:33px}.spark-two{left:0;bottom:20%;font-size:30px}.footer{align-items:center;flex-direction:column;gap:10px;padding:21px 0;font-size:9px}.footer-note{font-size:10px}}
@media(max-width:380px){.header-note{display:none}.illustration{height:350px;margin-top:35px}.speech-bubble{font-size:11px;padding:12px 15px}.student-label{min-width:161px;bottom:0}.mascot-composition{width:72%;max-width:225px}.campus-medallion{padding:6px;border-width:4px}.destination strong span{font-size:9px;margin-left:3px}.countdown-row{font-size:11px}}

/* Use the available screen height for the artwork after reserving real space
   for every piece of copy and each control. Nothing is clipped to fit. */
@media(max-width:760px), (max-width:1000px) and (max-height:500px){
  .page-shell{height:100vh;height:100svh;height:100dvh;min-height:0;padding:max(0px,env(safe-area-inset-top)) max(5%,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(5%,env(safe-area-inset-left));display:grid;grid-template-rows:56px minmax(0,1fr) auto}
  .masthead{min-height:0;height:56px;gap:12px}
  .wordmark{gap:9px}
  .brand-mark{width:32px;height:32px;font-size:20px;flex-shrink:0}
  .brand-text{gap:4px}
  .brand-text strong{font-size:14px;letter-spacing:1px}
  .brand-text>span{font-size:6px;letter-spacing:1px}
  .header-note{font-size:8px;gap:5px;white-space:nowrap}
  .header-note i{width:4px;height:4px}
  .hero{min-height:0;height:100%;padding:8px 0;gap:6px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto;grid-template-areas:"welcome" "title" "art" "lead" "destination" "go" "timer" "url";align-items:center;justify-items:center}
  .intro{display:contents}
  .eyebrow{grid-area:welcome;margin:0;gap:6px;font-size:11px;line-height:14px}
  .eyebrow>span{font-size:14px}
  h1{grid-area:title;text-align:center;font-size:clamp(27px,7vw,34px);line-height:1.12;letter-spacing:-.6px}
  .title-line{margin-top:3px;font-size:.88em}
  .highlight svg{height:12px;bottom:-4px;stroke-width:4px}
  .lead{grid-area:lead;margin:0;font-size:12px;line-height:1.5;text-align:center}
  .destination{grid-area:destination;max-width:380px;width:100%;min-height:0;margin:0;padding:7px 0;gap:10px}
  .destination-icon,.destination-icon img{width:34px;height:34px;flex-shrink:0}
  .destination>div{gap:4px}
  .destination-label{font-size:8px;line-height:10px;letter-spacing:1px}
  .destination strong{font-size:14px;line-height:19px}
  .destination strong span{font-size:9px}
  .destination-arrow{font-size:21px}
  .primary-button{grid-area:go;width:100%;max-width:380px;min-height:48px;padding:0 19px;font-size:14px;border-radius:10px;box-shadow:3px 3px 0 #d9d7b3}
  .button-arrow{font-size:24px}
  .countdown-area{grid-area:timer;width:100%;max-width:380px;margin:0}
  .countdown-row{min-height:36px;font-size:11px;line-height:16px}
  #toggle-timer{min-height:36px;padding:7px 0;font-size:11px;line-height:16px}
  .progress-track{height:2px;margin-top:0}
  .no-script-copy{grid-area:timer;margin:5px 0;font-size:11px;line-height:18px;text-align:center}
  .destination-url{grid-area:url;margin:0;font-size:9px;line-height:12px;letter-spacing:0;text-align:center}
  .destination-url span{margin-left:5px}
  .illustration{grid-area:art;height:100%;min-height:0;max-height:340px;width:min(100%,350px);margin:0;align-self:center}
  .mascot-composition{height:calc(100% - 16px);width:auto;max-width:100%;max-height:none;bottom:16px;left:50%;aspect-ratio:445/600;transform:translateX(-50%);animation:none}
  .mascot{width:100%;height:100%;object-fit:contain}
  .mascot-halo{height:calc(100% - 16px);width:auto;max-width:100%;aspect-ratio:1;top:0;left:50%;transform:translateX(-50%)}
  .mascot-halo:after{inset:10px}
  .campus-medallion{padding:5%;border-width:3px}
  .campus-medallion:before{inset:-5px}
  .speech-bubble{left:0;top:12%;padding:8px 10px 7px;font-size:10px;line-height:14px;letter-spacing:0;transform:rotate(-5deg);border-radius:9px 9px 9px 2px;box-shadow:2px 2px 0 #dedcc4}
  .speech-bubble span{font-size:6px;line-height:8px;letter-spacing:1.3px;margin-top:3px}
  .speech-bubble:after{left:18px;bottom:-6px;width:10px;height:10px}
  .student-label{display:none}
  .illustration-caption{left:0;bottom:0;width:100%;font-size:9px;line-height:12px;letter-spacing:2px;text-align:center;transform:none}
  .spark-one{right:4%;top:24%;font-size:25px}
  .spark-two{left:3%;bottom:22%;font-size:21px}
  .orbit-one{width:11px;height:11px;left:3%;top:48%}
  .orbit-two{width:8px;height:8px;right:3%;bottom:25%}
  .footer{min-height:0;padding:6px 0;gap:2px;flex-direction:column;justify-content:center;line-height:13px;font-size:9px;letter-spacing:0}
  .footer-note{font-size:9px;line-height:13px;letter-spacing:.5px}
}
@media(max-width:760px) and (max-height:680px){
  .page-shell{grid-template-rows:46px minmax(0,1fr) auto}
  .masthead{height:46px}
  .brand-mark{width:28px;height:28px;font-size:18px}
  .brand-text strong{font-size:12px}
  .brand-text>span{font-size:5px}
  .hero{padding:6px 0;gap:4px}
  .eyebrow{font-size:10px;line-height:12px}
  h1{font-size:27px;line-height:1.08}
  .title-line{font-size:.85em;margin-top:2px}
  .lead{font-size:11px;line-height:15px}
  .destination{padding:5px 0}
  .destination-icon,.destination-icon img{width:30px;height:30px}
  .destination strong{font-size:13px;line-height:17px}
  .destination-label{font-size:7px;line-height:9px}
  .primary-button{min-height:44px}
  .countdown-row{min-height:32px;font-size:10px;line-height:14px}
  #toggle-timer{min-height:32px;padding:6px 0;font-size:10px;line-height:14px}
  .destination-url{font-size:8px;line-height:10px}
  .speech-bubble{font-size:9px;padding:6px 8px;line-height:12px}
  .speech-bubble span{font-size:5px;line-height:6px}
  .footer{padding:5px 0;line-height:11px;font-size:8px}
  .footer-note{font-size:8px;line-height:11px}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
  .page-shell{grid-template-rows:42px minmax(0,1fr) auto}
  .masthead{height:42px}
  .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto auto;grid-template-areas:"welcome art" "title art" "lead art" "destination art" "go art" "timer art" "url art";column-gap:24px;row-gap:2px;padding:4px 0}
  h1{font-size:24px;line-height:1.05}
  .title-line{font-size:.85em;margin-top:0}
  .lead{font-size:10px;line-height:13px}
  .destination{padding:3px 0}
  .destination-icon,.destination-icon img{width:27px;height:27px}
  .primary-button{min-height:40px;font-size:13px}
  .countdown-row{min-height:30px}
  #toggle-timer{min-height:30px;padding:5px 0;font-size:10px}
  .illustration{max-height:290px}
  .footer{flex-direction:row;justify-content:space-between;padding:5px 0;gap:8px;font-size:8px;line-height:11px}
  .footer-note{font-size:8px;line-height:11px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}