/* Fonts remain readable without downloadable font files. */
:root{--font-body:Inter,"Songti SC","STSong",-apple-system,BlinkMacSystemFont,"Segoe UI",serif;--font-chinese:"Songti SC","STSong","Noto Serif CJK SC",SimSun,serif;--font-display:Rockness,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html[lang=en]{--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
html.no-rockness[lang=en] .contact h2{font-size:clamp(38px,5vw,62px)}
html.no-rockness .brand span{font:14px/1.1 var(--font-body)}
html.no-rockness .hero-title .title-english{font-size:3.5cqw}
/* Constant speed, two identical halves, and no animation work offscreen. */
.marquee-track,.wording-track{animation-duration:var(--marquee-duration,65s);animation-timing-function:linear;animation-play-state:paused;will-change:auto;backface-visibility:hidden}
.marquee-track.ambient-active,.wording-track.ambient-active{animation-play-state:running;will-change:transform}
@keyframes marquee-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes wording-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.glow-green,.glow-peach{animation:ambient-glow 26s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:center;will-change:auto}
.glow-peach{animation-duration:32s;animation-delay:-12s;--glow-x:-20px;--glow-y:24px}
.glow-green{--glow-x:24px;--glow-y:16px}
.glow.ambient-active{animation-play-state:running;will-change:transform}
@keyframes ambient-glow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(var(--glow-x),var(--glow-y),0) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.marquee-track,.wording-track,.glow-green,.glow-peach{animation:none!important;will-change:auto!important}}
/* Unified icon feedback, without changing the established target sizes. */
.icon-control{transition:background-color .18s,border-color .18s,scale .14s!important}
.icon-control:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.icon-control:not(:disabled):active{scale:.94}
.icon-control.contact-linkedin:hover{transform:none}
.icon-control:not(:disabled):hover{background:var(--panel-hover,var(--surface));border-color:var(--muted)}
.icon-tooltip{position:fixed;z-index:100;max-width:240px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--background);color:var(--ink);box-shadow:0 6px 24px #0002;font:12px/1.5 var(--font-body);pointer-events:none}
.icon-tooltip[hidden]{display:none}
.resume-tooltip,.resume-bubble{font:12px/1.5 var(--font-body)}
/* Preview-first loading controls, outside the rotating model's canvas. */
.model-load-ui{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;z-index:8;width:max-content;max-width:calc(100% - 24px);pointer-events:auto}
.model-load-ui[hidden]{display:none}
.model-load-status{max-width:230px;font:12px/1.5 var(--font-body);text-align:center;color:var(--muted);background:var(--background);border-radius:8px}
.model-load-status:empty{display:none}
.model-load-button,.decoration-load{min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);font:13px/1.5 var(--font-body);cursor:pointer}
.model-load-button:disabled{opacity:.7;cursor:wait}
.gallery-action .model-load-ui{bottom:58px}
.contact-avatar .model-load-ui{bottom:20px}
.character-model:not(:defined){position:relative}
.hero-model.character-model:not(:defined),.contact-model.character-model:not(:defined){position:absolute}
.character-model:not(:defined)>[slot=poster]{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.character-model:not(:defined)>[slot=progress-bar],.character-model:not(:defined)>[slot^=hotspot]{display:none}
.decoration-load{position:absolute;bottom:0;right:8px;z-index:8;font-size:12px}
.decoration-load[hidden]{display:none}
@media(max-width:760px){footer .footer-actions>.icon-control:hover{background:transparent}.model-load-status{max-width:210px}.about-picture .model-load-ui{bottom:4px}}

html.no-rockness{--font-display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}

/* Keep hover, pressed and focus feedback on the circular download target. */
.contact-resume.icon-control{border-radius:50%}
.contact-resume.icon-control:hover .contact-resume-icon{background:transparent;border-color:var(--muted)}