:root{--bg:#fffbef;--fg:#3a2c00;--muted:#96844d;--ink:#fece0e;--track:rgba(254,206,14,.2);--card:#fff;--size:min(64vw,44svh,340px);color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--bg:#15120a;--fg:#f6edd0;--muted:#b1a176;--card:#221d12;--track:rgba(254,206,14,.16)}}
*{box-sizing:border-box;margin:0}
body{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:32px 20px 62px;background:var(--bg);color:var(--fg);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;cursor:pointer}
main{display:flex;flex-direction:column;align-items:center;gap:34px;text-align:center;width:100%;max-width:640px}
.wrap{transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .45s ease-in}
.badge{position:relative;width:var(--size);aspect-ratio:1;isolation:isolate}
.disc{position:absolute;inset:1%;border-radius:50%;background:#fff;z-index:-1}
.badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* 同一校徽按半径分层；只让外圈旋转，中心奶龙与年份留在原位。 */
.ring{clip-path:circle(49% at 50% 50%);mask-image:radial-gradient(circle closest-side,transparent 65.2%,#000 65.5%);-webkit-mask-image:radial-gradient(circle closest-side,transparent 65.2%,#000 65.5%)}
.core{clip-path:ellipse(29% 32% at 50% 50%)}
.progress{position:absolute;inset:-5.5%;width:111%;height:111%;transform:rotate(-90deg);overflow:visible;pointer-events:none}
.progress circle{fill:none;stroke-width:1.1;stroke-linecap:round}
.track{stroke:var(--track)}
.bar{stroke:var(--ink);stroke-dasharray:100;stroke-dashoffset:100}
.copy{display:flex;flex-direction:column;align-items:center;gap:11px;transition:opacity .3s,transform .3s}
h1{font-size:clamp(26px,7vw,40px);font-weight:800;letter-spacing:.12em;padding-left:.12em}
.status{font-size:clamp(13px,3.4vw,17px);line-height:1.7}
.status strong{white-space:nowrap}
.dots{white-space:nowrap}
.dots i{display:inline-block;width:.3em;height:.3em;margin-left:.18em;border-radius:50%;background:currentColor;vertical-align:middle;animation:dot 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
button{font:inherit;cursor:pointer}
.hint{font-size:13px;color:var(--muted);background:none;border:0;padding:3px 10px}
.hint:hover{text-decoration:underline;text-underline-offset:4px}
.demo-note{font-size:12px;color:var(--muted)}
[hidden]{display:none!important}
.about-btn{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));padding:8px 10px;border:0;background:none;color:var(--muted);font-size:13px}
.about-btn:hover{color:var(--fg)}
button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
dialog{width:min(380px,calc(100vw - 32px));margin:auto;padding:0;border:0;border-radius:16px;background:var(--card);color:var(--fg);box-shadow:0 18px 50px #0004;cursor:auto}
dialog::backdrop{background:#14100573;backdrop-filter:blur(3px)}
.about-body{padding:25px 23px 20px}
.about-body h2{font-size:18px;margin-bottom:13px}
.about-body p{font-size:14px;line-height:1.8;margin-top:8px}
.about-body a{color:inherit;text-underline-offset:3px}
.about-body form{text-align:right;margin-top:20px}
.close-btn{padding:8px 18px;border:0;border-radius:99px;background:var(--ink);color:#3a2c00;font-size:14px;font-weight:700}
.run .badge{animation:pop .7s cubic-bezier(.34,1.56,.64,1) backwards}
.run .core{animation:breathe 1.8s ease-in-out .7s infinite}
.run .bar{animation:fill var(--delay,2600ms) linear forwards}
.run .copy{animation:rise .5s ease-out .15s backwards}
.paused .bar{animation-play-state:paused}
.leaving .wrap{transform:scale(1.18);opacity:0}
.leaving .copy{opacity:0;transform:translateY(8px)}
.leaving .about-btn{opacity:0}
@keyframes pop{from{transform:scale(.55) rotate(-25deg);opacity:0}}
@keyframes breathe{50%{transform:scale(1.025)}}
@keyframes fill{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes dot{0%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-.25em)}}
@media(prefers-reduced-motion:reduce){.run .badge,.run .core,.run .copy,.dots i{animation:none}.wrap,.copy{transition:none}}