@property --mx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --my{syntax:'<percentage>';inherits:true;initial-value:50%}
:root{color-scheme:light;--paper:#f4f4f5;--ink:#24262b;--muted:#8b8d95;--line:#d8d9dd;--card-w:clamp(146px,41vw,188px);--card-h:calc(var(--card-w)*1.5);--ease:cubic-bezier(.22,.8,.18,1);font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden;background:var(--paper)}body{color:var(--ink);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #757f92;outline-offset:7px}button[hidden],section[hidden]{display:none!important}svg{width:24px;height:24px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}
.universe{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,#fff 0%,#f7f7f8 46%,#ededf0 100%)}.universe canvas{position:absolute;inset:0;width:100%;height:100%}.vignette{position:absolute;inset:0;background:linear-gradient(180deg,#f4f4f52b,transparent 12%,transparent 88%,#f4f4f540);pointer-events:none}#burst{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;background:#fff}#burst.flash{animation:flash .8s ease-out}.site-header{position:fixed;top:0;left:0;width:100%;z-index:15;padding:26px 34px;display:flex;align-items:center;justify-content:space-between;transition:opacity .8s ease,transform 1s var(--ease)}.brand{display:flex;align-items:center;gap:9px}.brand>svg{width:27px;height:27px;fill:none;stroke:#717680;stroke-width:1.1}.brand>span{font-size:19px;letter-spacing:3px;font-weight:500}.brand small{display:block;font-size:6px;line-height:1.7;letter-spacing:1.5px;font-weight:400;color:#858892;margin-top:3px}.header-actions{display:flex;gap:9px}.icon-button{height:34px;width:34px;border:1px solid #777d8b22;border-radius:50%;background:#ffffff70;display:grid;place-items:center;color:#7c8089;transition:background .25s}.icon-button:hover{background:#fff}.icon-button svg{height:17px;width:17px}.icon-button>span{font-size:14px}.sound-waves{display:none}[aria-pressed=true] .sound-waves{display:block}[aria-pressed=true] .sound-off{display:none}main{height:100svh;position:relative;z-index:2}.intro-screen{position:absolute;inset:0;pointer-events:none}.site-footer{position:fixed;bottom:27px;bottom:calc(27px + env(safe-area-inset-bottom));left:34px;right:34px;z-index:10;display:flex;justify-content:center;transition:opacity .6s ease}.chapters{display:none}.demo-label{font-size:9px;letter-spacing:1px;color:#a0a2a9}body[data-screen=intro] .site-header,body[data-screen=intro] .site-footer{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px)}
.eyebrow{font-size:9px;font-weight:500;line-height:1.6;letter-spacing:2.1px;color:#9b9da5}.draw-screen{position:absolute;inset:114px 20px 83px;display:flex;flex-direction:column;align-items:center;text-align:center;animation:screen-in .8s var(--ease) both}.draw-heading{z-index:6;pointer-events:none}.draw-heading h2{font-weight:550;font-size:clamp(23px,3.2vw,33px);letter-spacing:-.5px;line-height:1.45;margin:13px 0 10px}.draw-heading>p{font-size:11px;letter-spacing:.3px;color:#91939b;line-height:1.8;min-height:20px}.card-stage{position:relative;flex:1;width:100%;max-width:1000px;min-height:290px;max-height:465px;isolation:isolate;perspective:1500px}.stage-halo{position:absolute;width:390px;height:360px;max-width:92vw;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#d1d5dd38,transparent 68%);border-radius:50%}.stage-orbit{position:absolute;left:50%;top:86%;width:340px;max-width:90vw;height:24px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#494e6522,transparent 65%);filter:blur(6px)}
.card{position:absolute;width:var(--card-w);height:var(--card-h);top:50%;left:50%;margin-left:calc(var(--card-w)/-2);margin-top:calc(var(--card-h)/-2);border:0;border-radius:13px;padding:0;background:none;perspective:1300px;transform-style:preserve-3d;--tx:0px;--ty:0px;--rz:0deg;--scale:1;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--shine:.3;transform:translate3d(var(--tx),var(--ty),0) rotate(var(--rz)) scale(var(--scale));transition:transform 1s var(--ease),filter 1s,opacity .6s;will-change:transform;touch-action:none}.card[data-slot='0']{--tx:calc(var(--card-w)*-.79);--ty:14px;--rz:-12deg;z-index:4}.card[data-slot='1']{--ty:-5px;z-index:3}.card[data-slot='2']{--tx:calc(var(--card-w)*.79);--ty:14px;--rz:12deg;z-index:2}.card[aria-disabled=true]{filter:saturate(.45) brightness(.97)}.card .tilt{display:block;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease-out}.card .rotator{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.22,.68,.13,1)}.card.is-flipped .rotator{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border-radius:13px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fafafa;box-shadow:0 0 0 1px #fff,0 0 0 2px #a2a8b360,0 18px 42px #363e5725,inset 0 0 0 1px #fff;isolation:isolate}.card-face:after{content:'';position:absolute;inset:5px;border:1px solid #abb1bd35;border-radius:9px;z-index:9;pointer-events:none}.card-back{background:linear-gradient(130deg,#fff 0%,#f0f1f5 31%,#e9ebf1 55%,#fafaff 72%,#e3e7ed 100%);transform:rotateY(0deg) translateZ(1px)}.back-art{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#9299a8;stroke-width:.55}.back-title{position:absolute;top:10%;width:100%;left:0;text-align:center;font-size:6px;font-weight:550;letter-spacing:2.7px;color:#828795}.back-label{position:absolute;bottom:15%;width:100%;left:0;text-align:center;font-size:16px;font-weight:500;letter-spacing:4px;padding-left:4px;color:#575e70}.back-label small{display:block;font-size:5px;font-weight:400;line-height:3.2;letter-spacing:1.5px;padding-right:4px;color:#969cac}.back-number{position:absolute;bottom:6.5%;width:100%;left:0;text-align:center;font-size:7px;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#969ca9}.card-front{transform:rotateY(180deg) translateZ(1px);background:linear-gradient(150deg,#fff,#f1f3f6 70%,#e7eaf0);text-align:left}.front-header{position:absolute;top:5%;left:9%;right:9%;display:flex;justify-content:space-between;font-size:6px;font-weight:500;letter-spacing:1.4px;color:#848a97}.front-header span{white-space:nowrap}.front-header span:last-child{font-size:7px;letter-spacing:.5px;font-variant-numeric:tabular-nums}.portrait-window{position:absolute;top:12%;left:9%;width:82%;height:42%;overflow:hidden;border:1px solid #8a94a32b;border-radius:8px;background:#dfe3e9}.portrait-window img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transform:scale(1.04)}.portrait-window:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 16px #3b536110;background:linear-gradient(125deg,#ffffff15,transparent 45%)}.portrait-spark{position:absolute;top:47%;right:13%;z-index:4;font-size:20px;color:#fafbff;text-shadow:0 1px 5px #343c5b70}.front-info{position:absolute;top:56%;left:10%;right:10%;z-index:3}.front-info h3{font-size:calc(var(--card-w)*.13);font-weight:550;letter-spacing:1px;line-height:1.2;color:#303647}.birthday{display:flex;align-items:baseline;gap:7px;margin-top:calc(var(--card-w)*.025)}.birthday strong{font-size:calc(var(--card-w)*.112);line-height:1.2;font-weight:450;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:#69758f}.birthday span{font-size:6px;white-space:nowrap;color:#9399a7;letter-spacing:.8px}.card-tags{display:flex;gap:4px;margin-top:calc(var(--card-w)*.025)}.card-tags span{font-size:calc(var(--card-w)*.036);letter-spacing:.3px;padding:calc(var(--card-w)*.016) calc(var(--card-w)*.03);border:1px solid #919bac38;border-radius:3px;color:#7a8498}.front-bottom{position:absolute;bottom:6%;left:10%;right:10%;display:flex;align-items:center;justify-content:space-between;font-size:5.5px;letter-spacing:.8px;color:#989dac;border-top:1px solid #939eaf2b;padding-top:7px}.front-bottom b{font-weight:400;font-size:9px}.foil,.glare,.sparkle{position:absolute;inset:0;pointer-events:none;z-index:7;border-radius:inherit}.foil{background:repeating-linear-gradient(115deg,#f8cfe4 0%,#ede8c7 12%,#d3e8d8 24%,#cbdff2 36%,#e1d6ef 48%,#f8cfe4 60%);background-size:290% 290%;background-position:var(--mx) var(--my);mix-blend-mode:multiply;opacity:calc(var(--shine)*.8);filter:saturate(1.4)}.card-back .foil{opacity:calc(var(--shine)*1.25)}.glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my),#fff 0%,#ffffff80 18%,transparent 52%),linear-gradient(115deg,transparent 40%,#fff5 48%,transparent 56%);mix-blend-mode:screen;opacity:.55}.sparkle{background-image:repeating-linear-gradient(23deg,transparent 0 2.8px,#818ba00d 3px 3.5px,transparent 3.7px 6px);background-size:100% 100%;opacity:.4;mix-blend-mode:multiply}.card.active:not(.is-flipped) .card-back{box-shadow:0 0 0 1px #fff,0 0 0 2px #7e879e90,0 18px 48px #59637f30,inset 0 0 20px #fff8}.card.active:not(.is-flipped):after{content:'轻触揭晓';position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);font-size:9px;letter-spacing:1px;color:#8b91a1;white-space:nowrap;animation:breathe 2.3s ease-in-out infinite}.card.dealing{animation:card-deal 1.55s var(--ease) both;animation-delay:calc(var(--slot)*.16s)}.card-stage.focused .card{--scale:.69;--ty:52px;filter:saturate(.1);opacity:.4}.card-stage.focused .card[data-slot='0']{--tx:calc(var(--card-w)*-.65);--rz:-17deg}.card-stage.focused .card[data-slot='1'],.card-stage.focused .card[data-slot='2']{--tx:calc(var(--card-w)*.65);--rz:17deg}.card-stage.focused .card.selected{--tx:0px;--ty:0px;--rz:0deg;--scale:1.23;z-index:8;filter:none;opacity:1}.card-stage.focused .card.selected:after{opacity:0}.card.collected{opacity:.28!important;--scale:.62!important}.draw-controls{position:relative;z-index:8;min-height:133px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.progress{display:flex;align-items:center;gap:7px;height:16px;margin-bottom:16px}.progress-dot{width:4px;height:4px;border-radius:50%;background:#c8cbd3;transition:background .4s}.progress-dot.complete{background:#6d778c}.progress-line{width:20px;height:1px;background:#c9ccd433}.progress small{font-size:9px;font-variant-numeric:tabular-nums;color:#a4a7b0;letter-spacing:1.7px;margin-left:10px}.card-hint{font-size:11px;line-height:1.8;color:#969aa4;letter-spacing:.4px;margin:3px 0 12px;min-height:20px;max-width:330px}.card-hint span{color:#626977;margin:0 3px}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-width:226px;min-height:50px;padding:0 24px;border:1px solid #303238;border-radius:30px;background:#292c33;color:#f5f5f7;font-size:13px;font-weight:400;letter-spacing:.6px;box-shadow:0 4px 12px #1a20370c;transition:transform .3s,background .3s;pointer-events:auto}.primary-button:hover{transform:translateY(-2px);background:#424650}.primary-button:active{transform:scale(.98)}.primary-button svg{height:18px;width:18px;fill:none;stroke:currentColor;stroke-width:1.4}.compact{min-width:216px;min-height:44px;font-size:11px}.text-button{border:0;background:none;color:#979ba6;font-size:10px;letter-spacing:.4px;min-height:38px;padding:10px 15px}.text-button:hover{color:#444b59}.draw-controls>.text-button{margin-top:5px}.draw-controls:has(#next:not([hidden])) .card-hint{font-size:10px;margin-bottom:12px}.draw-controls:has(#next:not([hidden])) .progress{margin-bottom:8px}
.result-screen{position:absolute;inset:105px 22px 85px;max-width:410px;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:screen-in .8s var(--ease) both}.result-star{font-size:42px;font-weight:300;line-height:1;color:#8691a5;margin-bottom:20px}.result-screen h2{font-size:32px;font-weight:550;line-height:1.5;letter-spacing:-.7px;margin:18px 0 12px}.result-description{font-size:11px;line-height:2;letter-spacing:.2px;color:#8c929f}.result-list{width:100%;margin:24px 0;display:flex;flex-direction:column;border-top:1px solid #aeb4c030}.result-person{display:flex;align-items:center;padding:15px 8px;gap:15px;border-bottom:1px solid #aeb4c030;animation:screen-in .65s var(--ease) both;animation-delay:calc(var(--i)*.12s)}.result-person img{width:45px;height:50px;border-radius:5px;object-fit:cover;filter:saturate(.7)}.result-person>div{flex:1;text-align:left}.result-person h3{font-size:17px;font-weight:500;letter-spacing:.5px;margin:0 0 5px}.result-person p{font-size:9px;color:#9a9fab;letter-spacing:.3px}.result-person time{font-size:24px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.5px;color:#707c94}.result-person>span{font-size:9px;font-variant-numeric:tabular-nums;color:#aab0bc}.result-note{font-size:9px;letter-spacing:.5px;color:#a2a6b0;margin-top:6px}.result-screen .primary-button{min-height:46px}.result-screen>.text-button{margin-top:7px}.result-screen .eyebrow{font-size:8px;letter-spacing:1.7px}
dialog{color:var(--ink);width:min(420px,calc(100vw - 36px));max-height:85svh;background:#fbfbfc;border:1px solid #fff;border-radius:20px;padding:42px 30px 28px;box-shadow:0 30px 100px #2b344530}dialog::backdrop{background:#6b72852b;backdrop-filter:blur(12px)}.dialog-close{position:absolute;top:12px;right:12px;border:0;background:none;font-size:25px;width:30px;height:30px}dialog .eyebrow{font-size:8px;letter-spacing:1.2px}dialog h2{font-size:29px;font-weight:500;line-height:1.5;letter-spacing:-.4px;margin:20px 0}dialog p{font-size:12px;line-height:2;color:#7e8696;letter-spacing:.3px}dialog ol{list-style:none;padding:10px 0;margin:14px 0}dialog li{display:flex;gap:14px;margin:18px 0;font-size:11px;line-height:1.8}dialog li b{white-space:nowrap;font-weight:500;color:#5e6a80}dialog li span{color:#8b93a2}dialog .dialog-note{font-size:10px;color:#a0a6b3;border-top:1px solid #a8b1bf30;padding-top:17px;margin-bottom:20px}dialog .primary-button{width:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,10px);padding:12px 20px;background:#fff;border:1px solid #c8cdd84d;border-radius:30px;z-index:40;max-width:90vw;white-space:nowrap;font-size:12px;color:#69758b;box-shadow:0 5px 25px #1b2d4820;opacity:0;pointer-events:none;transition:all .3s}#toast.visible{opacity:1;transform:translate(-50%,0)}.noscript{position:fixed;inset:40% 20px;text-align:center;z-index:40}.particle{position:fixed;left:50%;top:50%;height:3px;width:3px;background:#a4b2c8;z-index:20;pointer-events:none;border-radius:50%;animation:particle 1.4s ease-out forwards}
#fallback-photos{position:absolute;inset:0;perspective:1000px}#fallback-photos img{position:absolute;width:6vw;max-width:55px;aspect-ratio:.85;object-fit:cover;border-radius:3px;filter:saturate(.56) brightness(1.12);opacity:.55;will-change:transform}.leaving #fallback-photos img{transition:transform 1.4s var(--ease),opacity 1.2s;transform:translate(var(--fx),var(--fy)) rotateY(230deg) rotateZ(45deg) scale(.2);opacity:0}
@keyframes screen-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{50%{opacity:.35}}@keyframes flash{0%{opacity:0}20%{opacity:.25}100%{opacity:0}}@keyframes card-deal{0%{opacity:0;transform:translate3d(calc(var(--tx)*.3),-85svh,-300px) rotateZ(calc(var(--rz) - 24deg)) rotateY(85deg) rotateX(26deg) scale(.65)}14%{opacity:1}76%{transform:translate3d(var(--tx),calc(var(--ty) + 11px),0) rotateZ(calc(var(--rz) + 2deg)) rotateX(-4deg) scale(1.012)}100%{transform:translate3d(var(--tx),var(--ty),0) rotateZ(var(--rz)) rotateY(0) rotateX(0) scale(1)}}@keyframes particle{0%{opacity:0;transform:translate(0,0) scale(0)}15%{opacity:.8}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(.2)}}
@media(min-width:700px){:root{--card-w:208px}.site-header{padding:32px 48px}.site-footer{left:48px;right:48px;bottom:30px}.draw-screen{inset:115px 30px 80px}.card-stage{min-height:320px}.card-stage.focused .card.selected{--scale:1.18}.draw-controls{min-height:140px}.back-label{font-size:20px}.front-header{font-size:7px}}
@media(max-width:600px){.site-header{padding:23px 24px;padding-top:calc(23px + env(safe-area-inset-top))}.brand>svg{height:24px;width:24px}.brand>span{font-size:17px;letter-spacing:2px}.brand small{font-size:5px;letter-spacing:1.3px}.header-actions{gap:8px}.icon-button{width:31px;height:31px}.site-footer{left:22px;right:22px;bottom:25px;bottom:calc(25px + env(safe-area-inset-bottom))}.demo-label{font-size:8px}.eyebrow{font-size:8px;letter-spacing:1.8px}.draw-screen{inset:120px 12px 83px}.draw-heading h2{font-size:23px;letter-spacing:-.5px;margin:14px 0 10px}.draw-heading>p{font-size:10px}.card-stage{min-height:270px}.card[data-slot='0']{--tx:calc(var(--card-w)*-.53);--ty:13px;--rz:-12deg}.card[data-slot='2']{--tx:calc(var(--card-w)*.53);--ty:13px;--rz:12deg}.card-stage.focused .card.selected{--scale:1.38}.draw-controls{min-height:130px}.card-face{border-radius:11px}.back-title{font-size:6px;letter-spacing:2px}.card.active:not(.is-flipped):after{font-size:8px;top:calc(100% + 14px)}.result-screen{inset:100px 28px 80px}.result-star{font-size:36px;margin-bottom:15px}.result-screen h2{font-size:30px;margin:16px 0 12px}.result-list{margin:20px 0}.result-person{padding:14px 4px}.result-description{font-size:10px}.result-note{font-size:8px}}
@media(max-height:740px){:root{--card-w:144px}.site-header{padding-top:18px}.draw-screen{inset:95px 12px 65px}.draw-heading h2{font-size:22px;margin:10px 0 6px}.draw-heading>p{font-size:9px}.card-stage{min-height:240px}.card-stage.focused .card.selected{--scale:1.2}.draw-controls{min-height:115px}.draw-controls .progress{margin-bottom:9px}.draw-controls .card-hint{font-size:9px;margin-bottom:9px}.draw-controls .text-button{min-height:30px;padding:8px}.compact{min-height:39px}.site-footer{bottom:18px}.result-screen{inset:83px 28px 65px}.result-star{font-size:30px;margin-bottom:9px}.result-screen h2{font-size:25px;margin:9px 0}.result-description{font-size:9px}.result-list{margin:13px 0}.result-person{padding:10px 3px}.result-person img{width:36px;height:40px}.result-person h3{font-size:16px}.result-person time{font-size:22px}.result-screen .primary-button{min-height:41px;font-size:12px}.result-note{display:none}.result-screen>.text-button{margin:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}.card{will-change:auto}}

/* Original Codrops opening surface. Card/result styling stays silver-white. */
body[data-screen=intro] .universe{background:#f8f7f9}body[data-screen=intro] .vignette{display:none}

/* Real class roster selection */
.identity-button{margin:0;padding:8px;font-size:12px}.card-hint{max-width:90vw;margin-left:auto;margin-right:auto;line-height:1.65;max-height:90px;overflow:auto}.birthday strong{font-size:clamp(20px,6vw,32px)}.result-person time{white-space:nowrap;font-size:clamp(14px,4vw,22px)}.result-person p{line-height:1.5}

body[data-screen=login] .header-actions{visibility:hidden;pointer-events:none}body[data-screen=login] .universe{opacity:0}
.login-screen{position:absolute;inset:80px 0 50px;overflow:auto;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at 50% 35%,#fff9,transparent 65%)}
.login-content{width:min(100%,340px);text-align:center;margin:auto}.login-orbit{position:relative;width:164px;height:142px;margin:0 auto 29px;isolation:isolate}.login-sphere{position:absolute;width:114px;height:114px;left:25px;top:13px;border-radius:50%;background:radial-gradient(circle at 31% 24%,#fff 2%,#f4f4f6 29%,#d5dbe5 62%,#a8b3c6 85%,#f7f8fb 100%);box-shadow:inset -5px -9px 17px #66728b14,0 23px 35px -24px #707a93}.login-orbit i{position:absolute;inset:41px -5px;border:1px solid #a6afbf88;border-radius:50%;transform:rotate(-30deg);box-shadow:0 1px 0 #fff}.login-orbit b{position:absolute;right:3px;top:28px;font-size:17px;color:#8c98ad;font-weight:400}.login-content h1{font-size:36px;font-weight:500;line-height:1.4;letter-spacing:-1px;margin:17px 0 12px}.login-description{font-size:12px;color:#90949e;line-height:1.8}#login-form{margin:32px 0 0;text-align:left}#login-form label{display:block;font-size:11px;letter-spacing:1px;color:#757d8c;margin-bottom:11px}#student-id{width:100%;height:66px;padding:0 0 0 .65em;border:1px solid #cbd1dc;border-radius:15px;background:#ffffffb3;box-shadow:inset 0 2px 5px #68748b04;color:#3a4253;text-align:center;font:400 28px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.65em;outline:none;transition:border-color .2s,box-shadow .2s}#student-id::placeholder{color:#b1b8c5}#student-id:focus{border-color:#8b99af;box-shadow:0 0 0 4px #b5c0d319}#student-id[aria-invalid=true]{border-color:#ac7a77}.login-error{min-height:36px;padding:8px 0;font-size:11px;line-height:1.7;color:#aa6f6a}#login-submit{width:100%;min-height:52px;font-size:13px}#login-submit:disabled{opacity:.65}.preload-note{margin:22px auto 0;color:#a0a6b1;font-size:10px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:9px}#preload-progress{width:28px;height:2px;border:0;border-radius:2px;appearance:none;background:#e3e6eb}#preload-progress::-webkit-progress-bar{background:#e3e6eb}#preload-progress::-webkit-progress-value{background:#9ba7bb}#preload-progress::-moz-progress-bar{background:#9ba7bb}
@media(max-height:740px){.login-screen{inset:72px 0 42px;padding:12px 30px}.login-orbit{transform:scale(.8);height:115px;margin-bottom:12px}.login-content h1{font-size:29px;margin:11px 0}.login-description{font-size:11px}#login-form{margin-top:22px}#student-id{height:58px}.preload-note{margin-top:16px}}

body[data-screen=login] #sound{visibility:visible;pointer-events:auto}

/* Display the supplied original logo, framing its central mark without altering the file. */
.brand-logo{position:relative;display:block;width:70px;height:60px;overflow:hidden;flex:none}.brand-logo img{position:absolute;display:block;max-width:none;width:120px;height:auto;left:-24px;top:-13px}.site-header{align-items:center}
@media(max-width:600px){.brand-logo{width:60px;height:51px}.brand-logo img{width:103px;left:-20.5px;top:-11px}}