/* A small interactive profile, with the original portrait and official artwork. */
.portrait-scene{position:relative;width:fit-content;isolation:isolate;--badge-left:max(-60px,calc((925px - 100vw)/2 - 3px))}
@media(min-width:1280px){.portrait-scene{--badge-left:max(-60px,calc((1280px - 100vw)/2 - 3px))}}
.author__avatar .portrait-frame{transition:border-color 260ms,box-shadow 260ms;box-shadow:0 2px 8px #142a3c04}
.portrait-toggle:hover .portrait-frame,.portrait-toggle:focus-visible .portrait-frame{border-color:#bacbd5;box-shadow:0 5px 22px #24465e0d}
.portrait-toggle:active .portrait-frame{box-shadow:0 1px 5px #24465e12}
.portrait-hint{display:flex;align-items:center;gap:6px;position:absolute;left:50%;bottom:8px;z-index:4;transform:translate(-50%,4px);padding:4px 9px;border-radius:20px;background:#fffffff0;border:1px solid #dbe3e8;box-shadow:0 2px 6px #142a3c08;color:#536775;font-family:inherit;font-size:11px;line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 180ms,transform 260ms}
.portrait-toggle:hover~.portrait-hint,.portrait-toggle:focus-visible~.portrait-hint{opacity:1;transform:translate(-50%,0)}
.portrait-scene.is-expanded .portrait-hint{visibility:hidden}
.portrait-scene.is-expanded .portrait-universities{opacity:1;visibility:visible}
.portrait-universities{z-index:3}
.portrait-university{appearance:none;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:none;border-radius:50%;text-decoration:none!important;outline-offset:5px;touch-action:manipulation;--badge-x:0px;--badge-y:0px}
.portrait-scene.is-expanded .portrait-university{pointer-events:auto;animation:profile-badge-enter 540ms cubic-bezier(.2,.85,.25,1.16) var(--emblem-delay) both}
.badge-response,.badge-float{display:block;width:100%;height:100%}
.badge-response{transform:translate(var(--badge-x),var(--badge-y));transition:filter 220ms;will-change:auto}
.badge-float{animation:emblem-float-y var(--float-duration) cubic-bezier(.45,0,.55,1) var(--float-phase) infinite}
.portrait-university--westlake .badge-float,.portrait-university--hkust .badge-float{animation-name:emblem-sway}
.author__avatar .portrait-university img{transition:scale 240ms cubic-bezier(.2,.8,.3,1),filter 240ms;filter:drop-shadow(0 2px 2px #203c4c08)}
.portrait-university:hover img,.portrait-university:focus-visible img{scale:1.16;filter:drop-shadow(0 4px 5px #203c4c20)}
.portrait-university:active img{scale:1.01}
.portrait-scene:not(.is-expanded) .badge-float,.portrait-scene.is-paused .badge-float{animation-play-state:paused}
@keyframes profile-badge-enter{from{opacity:0;transform:translateY(calc(-50% + 6px)) scale(.86)}to{opacity:1;transform:translateY(-50%) scale(1)}}
html[data-theme=dark] .portrait-toggle:hover .portrait-frame,html[data-theme=dark] .portrait-toggle:focus-visible .portrait-frame{border-color:#637786;box-shadow:0 5px 22px #0003}
html[data-theme=dark] .portrait-hint{background:#282d33f7;color:#dee8ef;border-color:#46515c;box-shadow:0 5px 22px #0003}
/* A neutral backing protects official emblem colors on the dark canvas. */
html[data-theme=dark] .portrait-university--sjtu .badge-float,html[data-theme=dark] .portrait-university--sysu .badge-float{background:#fff;border-radius:50%;box-shadow:0 0 0 2px #fff}
html[data-theme=dark] .portrait-university--westlake img,html[data-theme=dark] .portrait-university--hkust img{filter:drop-shadow(0 0 1px #fff9) drop-shadow(0 2px 3px #0003)}
@media(max-width:924px){.portrait-scene.is-expanded .portrait-sparkle{right:37px;top:-10px}}
@media(max-width:540px){.portrait-scene.is-expanded .portrait-sparkle{right:33px}.portrait-hint{font-size:10px;padding:3px 7px;bottom:5px}}
@media(hover:none){.portrait-scene:not(.is-expanded) .portrait-hint{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.portrait-scene *{animation:none!important;transition:none!important}.badge-response{transform:none}.portrait-university:hover img,.portrait-university:focus-visible img{scale:1}}
@media print{.portrait-universities,.portrait-hint{display:none!important}}

html[data-theme=dark] .portrait-university--westlake .badge-float,html[data-theme=dark] .portrait-university--hkust .badge-float{position:relative;isolation:isolate}
html[data-theme=dark] .portrait-university--westlake .badge-float::before,html[data-theme=dark] .portrait-university--hkust .badge-float::before{content:"";position:absolute;inset:-4px;z-index:-1;border-radius:12px;background:#b9c8d7}

/* Four tiny dots unfold into the same arrangement as the four emblems. */
.portrait-hint-orbit{display:block;width:13px;height:13px;flex:none;overflow:visible;rotate:-12deg;transition:rotate 480ms cubic-bezier(.2,.8,.2,1)}
.portrait-hint-orbit circle{fill:#7491a5;transform-box:fill-box;transform-origin:center;scale:.78;transition:scale 400ms cubic-bezier(.2,.8,.2,1)}
.portrait-hint-orbit circle:nth-child(2){fill:#77a493;transition-delay:35ms}
.portrait-hint-orbit circle:nth-child(3){fill:#d6ae72;transition-delay:70ms}
.portrait-hint-orbit circle:nth-child(4){fill:#b4a0bf;transition-delay:105ms}
.portrait-toggle:hover~.portrait-hint .portrait-hint-orbit,.portrait-toggle:focus-visible~.portrait-hint .portrait-hint-orbit{rotate:0deg}
.portrait-toggle:hover~.portrait-hint circle,.portrait-toggle:focus-visible~.portrait-hint circle{scale:1}
@media(max-width:540px){.portrait-hint{gap:4px}.portrait-hint-orbit{width:11px;height:11px}}

/* Reserve the emblem's full hover/spring envelope beside the portrait.
   Use the same pixel breakpoints as the portrait sizes; the reference theme's
   em-based float columns otherwise switch at different browser font settings. */
@media (min-width:925px) {
  #main {
    display:grid;
    grid-template-columns:210px minmax(0,1fr);
    column-gap:40px;
    align-items:start;
    max-width:925px;
    padding-inline:15px;
  }
  #main::after {display:none}
  #main > .sidebar {
    float:none;
    width:auto;
    min-width:0;
    margin:0;
    top:calc(var(--masthead-height,55px) + 10px);
  }
  #main > .page {
    float:none;
    width:auto;
    min-width:0;
    margin:0;
    padding-left:0;
    padding-right:0;
  }
  .sidebar .author__avatar {display:block;width:auto}
  .sidebar .author__content {display:block;width:100%;padding:0}
}
@media (min-width:1280px) {
  #main {max-width:1280px;column-gap:55px}
}
@media (max-width:540px) {
  /* Bottom emblems extend below the oval, including their animated hover. */
  .profile_box .author__urls-wrapper {margin-top:26px}
}