.student-hotspot { position:absolute; z-index:3; left:63.8%; top:2%; width:10.5%; height:19%; border:0; padding:0; background:transparent; cursor:pointer; pointer-events:auto; }
.student-hotspot::after { content:'看看我的学生证'; position:absolute; top:100%; left:50%; transform:translate(-50%, 5px); padding:8px 13px; border-radius:30px; background:#25394dcc; color:#fff; font:12px "DM Mono", "PingFang SC", sans-serif; white-space:nowrap; opacity:0; transition:opacity .2s; }
.student-hotspot:hover::after, .student-hotspot:focus-visible::after { opacity:1; }
.student-hotspot:focus-visible { outline:3px solid #9dd7ff; outline-offset:4px; }
.student-dialog { --card-width:min(560px, 70vw, 86vh); position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; border:0; background:radial-gradient(ellipse at 50% 40%, #ecf2ef66, #41536733); color:#304759; overflow:hidden; font-family:"Noto Sans SC", "PingFang SC", sans-serif; }
.student-dialog::backdrop { background:#34465865; backdrop-filter:blur(15px); }
.student-dialog[open] { display:grid; place-items:center; }
.student-close { position:absolute; z-index:10; top:24px; right:28px; width:48px; height:48px; border:1px solid #ffffffa6; border-radius:50%; color:#3e5867; background:#faf9efde; font:32px/1 sans-serif; cursor:pointer; }
.student-close:hover { background:#fffdf3; }
.student-stage { width:var(--card-width); height:calc(var(--card-width) * 1.03); perspective:1200px; pointer-events:none; }
.student-arrival { width:100%; height:100%; }
.student-dialog[open] .student-arrival { animation:student-drop 1.15s both; }
.student-swing { position:relative; width:100%; height:100%; transform-origin:50% 0; }
.student-dialog[open] .student-swing { animation:student-pendulum 4.8s .48s both; }
.student-lanyard { position:absolute; top:0; left:46.5%; width:7%; height:26%; border-radius:3px 3px 12px 12px; background:repeating-linear-gradient(90deg, #171c22 0 2px, #292e33 2px 3px); border:2px solid #33393d; box-shadow:3px 4px 5px #13222e45, inset 2px 0 2px #676b70; }
.student-clip { position:absolute; z-index:5; left:46%; top:23%; width:8%; height:14%; border:3px solid #aeb7b8; border-radius:7px 7px 45% 45%; background:linear-gradient(105deg,#6d797d,#f4f5ef 28%,#9aa4a4 50%,#f7faf5 75%,#727c81); box-shadow:2px 4px 3px #253b4840; }
.student-clip i { position:absolute; left:23%; top:22%; width:54%; height:60%; border-radius:50%; background:#85969d; border:2px solid #e5e6dd; box-shadow:inset 2px 2px 3px #31485b90; }
.student-holder { position:absolute; z-index:3; top:34%; left:0; width:100%; height:61%; padding:5.8% 3% 3%; border:2px solid #f9fcf6d9; border-radius:12px; color:#344352; background:linear-gradient(130deg,#ffffffb3,#e9eef15c 35%,#ffffffbf 68%,#b5c2cc99); box-shadow:1px 2px 0 #c1cad1,3px 5px 0 #a4b0b9,9px 20px 24px #20384938,inset 0 0 0 5px #ffffff55; font:inherit; cursor:pointer; pointer-events:auto; text-align:left; }
.student-holder:focus-visible { outline:3px solid #e8bc5b; outline-offset:7px; }
.student-holder::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg,transparent 20%,#ffffff28 35%,transparent 49%,#ffffff3b 74%,transparent 85%); pointer-events:none; }
.student-slot { position:absolute; top:3%; left:43%; width:14%; height:3%; border-radius:20px; background:#71838e8a; box-shadow:0 1px 0 white,inset 0 1px 2px #15293788; }
.student-paper-card { position:relative; display:grid; grid-template-columns:27% 1fr; grid-template-rows:auto 1fr auto; column-gap:7%; width:100%; height:100%; padding:3% 4%; background:#f9f6eb; border:1px solid #829299; outline:1px solid #b3b9b4; outline-offset:-5px; box-shadow:0 2px 3px #23364535; }
.student-card-heading { grid-column:2; display:flex; align-items:center; justify-content:space-between; font:bold clamp(15px,3vw,26px) Georgia,serif; letter-spacing:.03em; color:#2c3744; }
.student-card-heading > span { color:#b49a60; font-size:1.6em; }
.student-photo { grid-column:1; grid-row:1 / 3; align-self:center; display:grid; gap:9px; }
.student-photo img { display:block; width:100%; height:auto; aspect-ratio:43 / 58; object-fit:cover; object-position:50% 40%; border:4px solid #fffef9; box-shadow:0 1px 0 #ffffff,0 3px 6px #33475630; background:#fff; }
.student-photo > span { font:clamp(6px,1.1vw,10px) "DM Mono",monospace; text-align:center; letter-spacing:.08em; }
.student-details { grid-column:2; display:grid; align-content:center; gap:7%; padding:3% 0 8%; }
.student-details > span { display:grid; grid-template-columns:48% 1fr; align-items:baseline; gap:4%; padding-bottom:3%; border-bottom:1px solid #52637038; }
.student-details small { font:clamp(7px,1.2vw,10px) "DM Mono", "PingFang SC",sans-serif; color:#6b7c84; }
.student-details strong { font-size:clamp(11px,2.2vw,18px); font-weight:500; white-space:nowrap; }
.student-card-footer { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:5%; padding-top:3%; font:clamp(5px,.9vw,8px) "DM Mono",monospace; letter-spacing:.08em; color:#77838a; }
.student-card-footer i { width:23%; height:16px; background:repeating-linear-gradient(90deg,#3a4752 0 1px,transparent 1px 3px,#3a4752 3px 6px,transparent 6px 8px); }
.student-stickers { position:absolute; inset:0; z-index:2; }
.student-sticker { position:absolute; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; box-shadow:3px 7px 9px #263a432e; transition:transform .65s cubic-bezier(.2,.85,.25,1.15); }
.student-stamp { left:8%; top:31%; width:31%; height:31%; padding:4%; background:#c5d9e5; color:#365c72; border:5px dotted #f7f5e9; font:bold clamp(12px,2.5vw,21px)/1.3 "DM Mono",monospace; transform:rotate(-9deg); }
.student-stamp span { margin-top:12%; font-size:45%; letter-spacing:.1em; }
.student-paper { right:5%; top:32%; width:39%; height:27%; color:#506251; background:repeating-linear-gradient(#edf0d9 0 22px,#b3c4ba 23px,#edf0d9 24px); font:clamp(20px,4vw,36px) "Nanum Pen Script",cursive; transform:rotate(7deg); }
.student-paper span { margin-top:4%; font:clamp(8px,1.3vw,12px) "PingFang SC",sans-serif; }
.student-star { left:3%; top:52%; width:18%; height:18%; color:#edc25f; text-shadow:1px 2px #a88942; font-size:clamp(35px,8vw,74px); box-shadow:none; filter:drop-shadow(2px 4px 2px #35415233); transform:rotate(-12deg); }
.student-label { right:7%; top:78%; width:49%; height:10%; background:#36576f; color:#fff9e9; border:3px solid #faf8ee; border-radius:8px; font:clamp(8px,1.5vw,13px) "DM Mono", "PingFang SC",sans-serif; transform:rotate(5deg); }
.student-dialog.is-expanded .student-stamp { transform:translate(-17%,-48%) rotate(-18deg); }
.student-dialog.is-expanded .student-paper { transform:translate(20%,-53%) rotate(13deg); transition-delay:.06s; }
.student-dialog.is-expanded .student-star { transform:translate(-67%,14%) rotate(-24deg); transition-delay:.12s; }
.student-dialog.is-expanded .student-label { transform:translate(13%,154%) rotate(7deg); transition-delay:.18s; }
.student-instruction { position:absolute; bottom:max(22px,5vh); margin:0; color:#f9faf2; font-size:12px; letter-spacing:.12em; text-shadow:0 1px 5px #243d56; pointer-events:none; }
/* Accelerating fall, a brief catch, then a damped pendulum at the strap's top. */
@keyframes student-drop {
  0% { transform:translateY(-90vh); animation-timing-function:cubic-bezier(.55,0,1,.45); }
  42% { transform:translateY(12px); animation-timing-function:ease-out; }
  60% { transform:translateY(-5px); animation-timing-function:ease-in-out; }
  78% { transform:translateY(2px); animation-timing-function:ease-in-out; }
  100% { transform:translateY(0); }
}
@keyframes student-pendulum {
  0% { transform:rotateZ(-9deg) rotateY(-5deg); animation-timing-function:ease-in-out; }
  15% { transform:rotateZ(6.2deg) rotateY(3.5deg); animation-timing-function:ease-in-out; }
  30% { transform:rotateZ(-4.1deg) rotateY(-2.3deg); animation-timing-function:ease-in-out; }
  45% { transform:rotateZ(2.6deg) rotateY(1.4deg); animation-timing-function:ease-in-out; }
  60% { transform:rotateZ(-1.5deg) rotateY(-.8deg); animation-timing-function:ease-in-out; }
  75% { transform:rotateZ(.7deg) rotateY(.4deg); animation-timing-function:ease-in-out; }
  88% { transform:rotateZ(-.25deg); animation-timing-function:ease-in-out; }
  100% { transform:rotateZ(0) rotateY(0); }
}
.student-lanyard { background:repeating-linear-gradient(0deg,#ffffff09 0 .6px,transparent .6px 2px),repeating-linear-gradient(90deg,#0e1318 0 1px,#2c3135 1px 2px,#191e23 2px 4px); border-left:2px solid #575b5b; border-right:2px solid #0e141a; box-shadow:2px 2px 0 #131a21,5px 6px 8px #16253340,inset 3px 0 4px #ffffff12; }
.student-lanyard::after { content:''; position:absolute; inset:5px 4px 8px; border-left:1px dashed #686c6a7a; border-right:1px dashed #686c6a7a; border-bottom:2px solid #62676566; border-radius:0 0 6px 6px; }
.student-clip { border-width:2px; background:linear-gradient(100deg,#4a565c,#b3babc 13%,#f8faf6 24%,#a2aaab 37%,#e5e8e3 52%,#77848a 72%,#d5dad7 86%,#5b6971); box-shadow:1px 1px 0 #f8fcf4,inset -2px -2px 2px #3f4b5666,3px 6px 7px #24343d55; }
.student-clip::before { content:''; position:absolute; top:8%; left:14%; width:72%; height:11%; border-radius:2px; background:linear-gradient(#3a474e,#c9cfce); box-shadow:0 1px 0 #fff; }
.student-clip::after { content:''; position:absolute; bottom:9%; left:39%; width:22%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 25%,#f9fbf5,#a1abad 55%,#57656c 75%); box-shadow:0 1px 1px #26353b; }
.student-holder { border:1px solid #f5ffffce; border-radius:15px; background:linear-gradient(145deg,#ffffffb0,#d2dde273 36%,#e7eeee6e 62%,#b4c2cbad); box-shadow:0 1px 0 #fff,inset 0 0 0 3px #f7ffff80,inset 0 0 0 6px #a0afb438,inset 0 -8px 9px #7e909b33,1px 3px 0 #d6dfe1,2px 5px 0 #95a5af,3px 7px 0 #d4dddf,7px 15px 17px #26374730,18px 32px 35px #20354333; }
.student-holder::before { content:''; position:absolute; inset:9px; border:1px solid #fbffff8c; border-radius:8px; box-shadow:inset 0 1px 2px #ffffffb3,0 1px 1px #6477844d; pointer-events:none; }
.student-holder::after { background:linear-gradient(112deg,transparent 6%,#fff4 7%,transparent 8%,transparent 29%,#fff2 42%,transparent 51%,transparent 81%,#fff3 82%,transparent 83%); opacity:.55; }
.student-paper-card { background:radial-gradient(ellipse at 15% 0,#fffdf6,transparent 65%),repeating-linear-gradient(0deg,#67746c04 0 1px,transparent 1px 3px),#f5f1e5; box-shadow:0 1px 0 #fffdf3,1px 2px 0 #d6d2c6,2px 4px 6px #2e455231; }
.student-slot { border:1px solid #9caaaf; box-shadow:0 1px 0 #fff,inset 1px 2px 3px #344e6099; }
@media (max-width:600px) { .student-dialog { --card-width:min(76vw, 86vh); } .student-close { top:16px; right:16px; width:40px; height:40px; } .student-details > span { grid-template-columns:1fr; gap:3px; } .student-details { gap:5%; } .student-paper-card { column-gap:5%; } .student-card-footer i { height:9px; } }
@media (prefers-reduced-motion:reduce) { .student-dialog[open] .student-arrival, .student-dialog[open] .student-swing { animation:none; } .student-sticker { transition:none; } .student-swing { transform:none; } }