@font-face { font-family: Orbitron; src: url('../vendor/orbitron-regular.ttf') format('truetype'); font-display: swap; font-style: normal; font-weight: 400; }
:root {
  color-scheme: dark;
  --bg: #19171b; --surface: #30282e; --text: #f4efeb; --sub: #d1c6ca;
  --muted: #b3a4ac; --line: #dfc9bf2b; --accent: #ffb37d; --cyan: #c8c1bd; --warm: #ff7755;
  --gold: #b99a65; --magenta: #74344e; --metal: #d9cec4; --metal-shadow: #51464b;
  --nav: #1b171ce0; --on-accent: #2b1b18; --header-height: 80px;
  --display: Orbitron, Arial, sans-serif;
  --font: 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif;
  --hero-word-size:196px;
}
html[data-theme='light'] { color-scheme: light; --bg:#f6f3f5; --surface:#ece2e6; --text:#352b30; --sub:#65515c; --muted:#796270; --line:#79535f33; --accent:#9b432b; --cyan:#665b60; --warm:#b23c27; --gold:#8c6838; --magenta:#793650; --metal:#b4a2a5; --metal-shadow:#6f5e63; --nav:#f6f3f5e8; --on-accent:#fff; }
* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; scrollbar-gutter:stable; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:18px; line-height:1.85; overflow-x:clip; isolation:isolate; }
button, a, input { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
button, a { touch-action:manipulation; }
button:disabled { cursor:default; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--cyan); outline-offset:6px; }
button { background:none; border:0; }
img { display:block; max-width:100%; }
svg { width:22px; height:22px; flex-shrink:0; }
h1,h2,h3,p { margin:0; }
.container { width:min(1360px,calc(100% - 112px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:200; top:10px; left:16px; padding:8px 14px; background:var(--text); color:var(--bg); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
#scene { position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; background:url('../assets/dreamy-site-bg-dark.jpg') center / cover; filter:blur(var(--scene-blur,0px)); opacity:var(--scene-opacity,1); }
#scene::after { content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg,#19171b80 0%,#19171b45 28%,transparent 76%); }
html[data-theme='light'] #scene { background-image:url('../assets/dreamy-site-bg-light.jpg'); }
html[data-theme='light'] #scene::after { background:linear-gradient(90deg,#f6f3f580 0%,#f6f3f52e 28%,transparent 70%); }
#scene canvas { width:100%; height:100%; display:block; position:absolute; inset:0; z-index:1; }
html[data-scene='fallback'] #scene canvas { display:none; }
html[data-scene='fallback'] #scene { filter:none; opacity:1; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; opacity:.18; }
#cursor-halo { position:fixed; left:0; top:0; width:460px; height:460px; pointer-events:none; z-index:90; opacity:0; background:radial-gradient(circle closest-side,#ffca9344 0%,#ff795333 26%,#8f3b621e 56%,transparent 100%); filter:blur(40px); mix-blend-mode:screen; will-change:transform,opacity; transition:opacity .3s; }
html[data-theme='light'] #cursor-halo { mix-blend-mode:normal; background:radial-gradient(circle closest-side,#ffe1ad66 0%,#ffd3b33b 30%,#ffd9df1c 58%,transparent 90%); filter:blur(28px); }
.nav { position:fixed; z-index:60; inset:0 0 auto; height:var(--header-height); border-bottom:1px solid var(--line); background:var(--nav); backdrop-filter:blur(20px); }
.nav-in { height:100%; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:baseline; gap:16px; white-space:nowrap; }
.brand b { font:400 30px/1 var(--display); }
.brand b span,.footer-wordmark span { color:var(--accent); }
.brand small { font:11px/1.5 var(--display); color:var(--muted); }
.nav-links { display:none; }
.nav-actions { display:flex; align-items:center; gap:18px; margin-left:auto; }
.seg { display:inline-flex; align-items:center; border:1px solid var(--line); }
.seg button { font-size:14px; line-height:1; min-width:38px; height:36px; padding:0 9px; }
.seg button[aria-pressed='true'] { background:var(--surface); color:var(--accent); }
.theme-seg button { min-width:32px; }
.nav-tools,.nav-auth,.nav-user { font-size:14px; }
.nav-user { display:flex; align-items:center; gap:8px; }
.nav-user .nu-name { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nu-logout { color:var(--muted); font-size:12px; }
.clock { display:none; }
.menu-btn { display:flex; align-items:center; gap:14px; height:80px; padding:0 0 0 26px; margin-left:4px; border-left:1px solid var(--line); font:400 14px var(--display); }
.menu-btn svg { width:26px; height:26px; }
.resume-menu { position:relative; flex:0 0 auto; }
.resume-menu summary { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; padding:6px 0; border-bottom:1px solid var(--accent); font-size:15px; list-style:none; }
.resume-menu summary::-webkit-details-marker { display:none; }
.resume-menu summary svg { width:18px; height:18px; }
.resume-menu summary svg:last-child { width:13px; height:13px; transition:transform .2s; }
.resume-menu[open] summary svg:last-child { transform:rotate(180deg); }
.resume-menu summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.resume-options { position:absolute; right:0; top:calc(100% + 14px); width:220px; padding:6px; border:1px solid var(--line); border-radius:6px; background:var(--bg); box-shadow:0 12px 32px #0002; }
.resume-options a { display:flex; align-items:center; gap:10px; min-height:46px; padding:9px 12px; font-size:15px; }
.resume-options a:hover { background:var(--surface); color:var(--accent); }
.resume-options svg { width:18px; height:18px; }
.hero { height:calc(100svh - 90px); min-height:560px; max-height:920px; position:relative; }
.hero-content.container { position:absolute; z-index:1; isolation:isolate; left:var(--orbit-focus-x,50%); top:calc(var(--orbit-focus-y,54svh) - var(--hero-origin-y,0px)); width:min(1080px,calc(100% - 80px)); margin:0; text-align:center; transform:translate(-50%,calc(var(--hero-word-size) * -.54)); }
.hero-peek { position:absolute; width:112px; height:112px; pointer-events:none; overflow:hidden; }
.hero-peek img { width:112px; height:112px; opacity:0; transform:translateY(44px) rotate(14deg) scale(.85); transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s; }
.hero-peek.is-near img { opacity:1; transform:translateY(0) rotate(-8deg) scale(1); }
.hero-name { animation:title-arrive 1s both; }
@keyframes title-arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.hero h1 { line-height:1; margin:0; }
.hero-name { display:inline-block; font:400 var(--hero-word-size)/1.08 var(--display); color:#fff4e7; text-shadow:0 0 2px #fff9ee,0 0 14px #ffd2a57a,0 0 36px #ffb18c45,0 0 64px #e993ae26; }
html[data-theme='light'] .hero-name { color:#392c35; -webkit-text-stroke:1px #fff8f0b3; paint-order:stroke fill; text-shadow:0 0 3px #fffaf4,0 0 10px #fffaf4,0 0 24px #fff3e5db,0 0 44px #f4bdba80; }
.hero-identity { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:8px 18px; margin:18px auto 0; max-width:820px; }
.hero-fullname { font:600 22px/1.5 var(--font); }
.hero-role { font-size:18px; font-weight:600; line-height:1.8; text-wrap:balance; }
.hero-statement { font-size:20px; font-weight:600; line-height:1.6; margin:12px auto 0; max-width:640px; text-wrap:balance; }
.hero-fullname,.hero-role,.hero-statement { color:#fff7ed; -webkit-text-stroke:2px #291b2ed9; paint-order:stroke fill; text-shadow:0 1px 3px #180e22, -2px 0 9px #ffb38fd9,2px 1px 12px #ef93b6bf,0 0 24px #9adfd780; }
.hero-role { color:#ffe5ed; }
.hero-statement { color:#e2fff8; }
html[data-theme='light'] :is(.hero-fullname,.hero-role,.hero-statement) { color:#432d3c; -webkit-text-stroke:3px #fffaf5e6; text-shadow:0 0 4px #fffaf5,0 0 9px #fffaf5,-2px 0 13px #ed9dadaa,2px 1px 16px #8ccfc2aa; }
.button { display:inline-flex; gap:12px; align-items:center; justify-content:center; min-height:54px; padding:12px 22px; border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 45%,transparent); font-size:16px; line-height:1.5; transition:border-color .2s,background .2s,transform .2s; }
.button-primary { border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
.button:hover { transform:translateY(-2px); border-color:var(--accent); }
.button svg { width:20px; height:20px; }
.availability { display:flex; align-items:center; gap:10px; }
.availability > i { width:7px; height:7px; border-radius:50%; background:var(--warm); box-shadow:0 0 12px color-mix(in srgb,var(--warm) 35%,transparent); }
.contact-availability { margin-top:20px; font-size:15px; color:var(--sub); }
.section { padding-block:64px; border-top:1px solid var(--line); position:relative; }
.section[tabindex='-1']:focus,.hero[tabindex='-1']:focus { outline:none; }
.section-heading { display:flex; align-items:baseline; gap:26px; margin-bottom:36px; position:relative; }
.section-heading > div { min-width:0; }
.section.entered .section-heading { animation:heading-arrive .65s both; }
@keyframes heading-arrive { from { opacity:.35; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.section-index { font:400 17px/1.4 var(--display); color:var(--cyan); min-width:28px; }
.section-en { font:400 42px/1.4 var(--display); margin-bottom:8px; }
.section-heading h2 { font-size:26px; line-height:1.6; font-weight:600; }
.section-sub { font-size:17px; line-height:1.8; margin-top:8px; color:var(--sub); }
.intro-body { display:grid; grid-template-columns:260px minmax(0,1fr); gap:26px 44px; }
.intro-person { display:flex; align-items:center; gap:18px; align-self:start; }
.intro-person img { width:84px; height:84px; border-radius:50%; object-fit:cover; }
.intro-person b { font-size:22px; line-height:1.5; }
.intro-person span { display:block; font:13px/1.8 var(--display); color:var(--muted); }
.intro-copy { font-size:20px; line-height:1.95; max-width:850px; }
.education { grid-column:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.education b { display:block; font-size:17px; line-height:1.8; }
.education p { font-size:15px; line-height:1.8; color:var(--sub); }
.project-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.project-filters button { min-height:46px; padding:8px 20px; border:1px solid var(--line); font-size:16px; }
.project-filters button[aria-selected='true'] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.work { display:grid; grid-template-columns:36px minmax(240px,.8fr) minmax(0,1.2fr); gap:24px; padding:40px 0; border-bottom:1px solid var(--line); scroll-margin-top:110px; }
.work-index { font:13px/1.8 var(--display); color:var(--muted); }
.work-header h3 { font-size:27px; line-height:1.6; font-weight:600; overflow-wrap:anywhere; }
.work-meta { margin-top:14px; font-size:15px; line-height:1.85; color:var(--muted); }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tags span { font-size:12px; line-height:1.5; padding:5px 9px; border:1px solid var(--line); color:var(--sub); }
.work-story { margin:0; }
.work-story dt { font-size:14px; color:var(--accent); font-weight:600; margin-top:20px; }
.work-story dt:first-child { margin:0; }
.work-story dd { margin:6px 0 0; font-size:18px; line-height:1.95; color:var(--sub); }
.work-story dd:last-child { color:var(--text); }
.skills-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; }
.skill { padding:28px 0; border-bottom:1px solid var(--line); }
.skill h3 { display:flex; align-items:center; gap:12px; font-size:21px; line-height:1.6; }
.skill h3 svg { color:var(--accent); }
.skill-tools { color:var(--cyan); font-size:14px; margin:12px 0; overflow-wrap:anywhere; }
.skill p { font-size:17px; line-height:1.85; color:var(--sub); }
.skill a { display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:14px; color:var(--accent); }
.skill a svg { width:16px; height:16px; }
.language-evidence { font-size:16px; color:var(--muted); margin-top:26px; }
.paper { padding:28px 0; border-bottom:1px solid var(--line); }
.paper-top { display:flex; align-items:flex-start; gap:24px; justify-content:space-between; }
.paper h3 { font-size:24px; line-height:1.6; font-weight:550; max-width:1000px; }
.paper-state { white-space:nowrap; font-size:14px; padding:5px 10px; border:1px solid var(--line); color:var(--cyan); }
.paper p { font-size:16px; line-height:1.9; margin-top:10px; color:var(--sub); }
.paper a { display:inline-flex; align-items:center; gap:8px; font-size:15px; margin-top:12px; color:var(--accent); overflow-wrap:anywhere; }
.paper a svg { width:16px; height:16px; }
.honor-list,.activities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.honor { display:flex; align-items:flex-start; gap:18px; padding:24px 0; border-bottom:1px solid var(--line); }
.honor svg { color:var(--accent); margin-top:5px; }
.honor b { font-size:18px; line-height:1.85; font-weight:500; }
.honor small { display:block; color:var(--muted); font-size:14px; margin-top:8px; }
.activities { display:block; }
.activity-group { padding:30px 0; border-top:1px solid var(--line); }
.activity-category { font-size:24px; line-height:1.6; color:var(--accent); margin:0 0 12px; }
.activity-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.activity { min-width:0; padding:24px 0; }
.activity-date { font-size:15px; color:var(--muted); }
.activity h4 { font-size:21px; line-height:1.7; margin:8px 0; overflow-wrap:anywhere; }
.activity p { font-size:17px; line-height:1.9; color:var(--sub); }
.activity-context { font-size:17px; line-height:1.9; color:var(--sub); margin-top:12px; }
@media(max-width:760px) { .activity-items { grid-template-columns:1fr; }
  .activity-category { font-size:22px; }
  .activity-group { padding:24px 0; } }
.archive { margin-top:28px; }
.archive summary { cursor:pointer; font-size:17px; color:var(--accent); width:fit-content; }
.archive p { margin-top:14px; font-size:16px; color:var(--sub); line-height:1.95; }
.contact-copy { font-size:20px; line-height:1.95; max-width:850px; }
.contact-email { display:flex; align-items:center; gap:24px; margin-top:30px; font-size:30px; line-height:1.8; overflow-wrap:anywhere; width:fit-content; }
.contact-email svg { width:34px; height:34px; color:var(--accent); }
.contact-links { display:flex; flex-wrap:wrap; gap:16px; margin-top:30px; }
.section-peek { position:absolute; right:0; top:-12px; width:100px; height:90px; overflow:hidden; pointer-events:none; }
.section-peek img { width:90px; height:90px; object-fit:contain; transform:translateY(80px) rotate(12deg); transition:transform .7s cubic-bezier(.2,.8,.2,1.1); }
.section-peek.is-visible img { transform:translateY(12px) rotate(-6deg); }
.section-heading:has(.section-peek) { padding-right:110px; }
.section-toc { position:sticky; top:var(--header-height); margin-top:var(--header-height); z-index:50; width:100%; height:56px; border-bottom:1px solid var(--line); background:var(--nav); backdrop-filter:blur(20px); --tree-progress:0; }
.tree-heading,.tree-graph { display:none; }
.tree-map { position:relative; display:flex; width:100%; height:56px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.tree-link { display:flex; align-items:center; flex:0 0 auto; min-height:52px; padding:10px 18px; color:var(--sub); font-size:16px; font-weight:500; line-height:1.5; border-bottom:2px solid transparent; transition:color .2s,border-color .2s; }
.tree-link:hover { color:var(--text); }
.tree-link.is-active { color:var(--accent); border-bottom-color:var(--warm); }
.tree-label { white-space:nowrap; }
#toTop { display:none!important; }
@media(min-width:1101px) and (min-height:650px) {
  #scene::after { background:linear-gradient(90deg,#19171b80 0%,#19171b45 28%,transparent 62%),linear-gradient(90deg,transparent 72%,#19171bc0 95%); }
  html[data-theme='light'] #scene::after { background:linear-gradient(90deg,#f6f3f580 0%,#f6f3f52e 28%,transparent 62%),linear-gradient(90deg,transparent 72%,#f6f3f5d0 95%); }
  .container { width:min(1240px,calc(100% - 350px)); margin-left:56px; margin-right:auto; }
  .nav-in.container { width:calc(100% - 112px); margin-inline:auto; }
  .section-toc { position:fixed; top:var(--header-height); bottom:0; right:18px; width:228px; height:auto; display:flex; flex-direction:column; justify-content:center; margin:0; border:0; background:none; backdrop-filter:none; --index-gap-bottom:88px; }
  .section-toc::before { content:''; position:absolute; top:0; bottom:0; left:26.5px; width:3px; background:var(--sub); opacity:.55; }
  .tree-heading { display:block; position:absolute; top:16px; left:44px; width:30px; height:64px; padding:0; margin:0; writing-mode:vertical-rl; text-orientation:upright; font:500 24px/1.25 var(--font); color:var(--text); }
  html[lang='en'] .section-toc { --index-gap-bottom:64px; }
  html[lang='en'] .tree-heading { top:24px; left:44px; width:80px; height:24px; writing-mode:horizontal-tb; text-align:left; font:400 16px/1.5 var(--display); }
  .tree-map { display:block; height:432px; width:228px; overflow:visible; }
  .tree-graph { display:block; position:absolute; inset:0 auto 0 0; width:84px; height:432px; }
  .tree-trunk { stroke:var(--sub); stroke-opacity:.65; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
  .tree-vine { stroke:var(--sub); stroke-opacity:.8; stroke-width:3.5; }
  .tree-growth { stroke:var(--accent); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--tree-progress)); }
  .tree-branch { stroke:var(--sub); stroke-width:1.5; stroke-opacity:.65; }
  .tree-leaf { fill:url(#vine-leaf); stroke:var(--sub); stroke-width:1.15; stroke-linejoin:round; }
  .tree-leaf-vein { fill:none; stroke:var(--sub); stroke-width:1; stroke-opacity:.8; }
  .tree-sprout.is-active .tree-leaf { fill:color-mix(in srgb,var(--accent) 45%,transparent); stroke:var(--warm); }
  .tree-sprout.is-active .tree-leaf-vein { stroke:var(--accent); }
  .tree-sprout.is-active .tree-branch { stroke:var(--warm); stroke-opacity:.8; }
  .tree-link { position:absolute; top:calc(var(--node-y) - 22px); left:0; width:228px; min-height:44px; padding:8px 0 8px 90px; border:0; }
  .tree-label { white-space:normal; overflow-wrap:anywhere; text-shadow:0 1px 8px var(--bg),0 0 18px var(--bg); }
}
@media(max-width:1100px),(max-height:649px) {
  html { scroll-padding-top:calc(var(--header-height) + 76px); }
  .work { scroll-margin-top:calc(var(--header-height) + 76px); }
}
.footer { border-top:1px solid var(--line); padding-block:48px 26px; }
.footer-wordmark { font:400 112px/1.3 var(--display); display:block; width:fit-content; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; font-size:14px; color:var(--muted); }
.footer-bottom > div { display:flex; gap:22px; }
#toTop { position:fixed; bottom:24px; right:24px; z-index:20; display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--line); background:var(--nav); opacity:0; visibility:hidden; }
#toTop.show { opacity:1; visibility:visible; }
.drawer-scrim { position:fixed; inset:80px 0 0; z-index:70; background:#0c061f50; backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; }
.drawer-scrim.open { opacity:1; visibility:visible; }
.drawer { position:fixed; z-index:75; top:80px; bottom:0; right:0; width:min(580px,100%); padding:32px 42px; background:var(--nav); backdrop-filter:blur(28px); border-left:1px solid var(--line); transform:translateX(102%); visibility:hidden; transition:transform .4s,visibility .4s; overflow:auto; }
.drawer.open { transform:none; visibility:visible; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px; }
.drawer-head b { font-size:18px; font-weight:500; }
.icon-btn { min-width:40px; min-height:40px; display:grid; place-items:center; border:1px solid var(--line); }
.d-link { display:block; font-size:30px; line-height:1.5; padding:12px 0; }
.d-link:hover { color:var(--accent); }
.d-sep { border-top:1px solid var(--line); margin:24px 0; }
.d-clock { font-size:13px; color:var(--muted); margin-bottom:18px; }
.d-row { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:22px; }
.d-auth { display:grid; gap:12px; margin-top:24px; }
.d-user { font-size:16px; }
.d-login,.d-logout { display:block; text-align:left; font-size:16px; }
.no-scroll { overflow:hidden; }
.cookie-bar { position:fixed; z-index:95; left:50%; bottom:20px; transform:translateX(-50%); width:min(640px,calc(100% - 32px)); display:flex; align-items:center; gap:20px; padding:16px 20px; border:1px solid var(--line); background:var(--nav); backdrop-filter:blur(16px); font-size:14px; color:var(--sub); }
.cookie-bar button { flex-shrink:0; padding:8px 14px; background:var(--accent); color:var(--on-accent); font-size:14px; }
@media(min-width:1600px) { :root { --hero-word-size:212px; } }
@media(min-width:1101px) and (max-width:1300px) { :root { --hero-word-size:148px; } }
@media(max-width:1100px) { .container { width:calc(100% - 72px); }
  .brand small,.nav-clock,.nav-auth,.nav-actions .nav-tools { display:none; }
  :root { --hero-word-size:120px; }
  .work { grid-template-columns:28px minmax(200px,.8fr) minmax(0,1.2fr); gap:18px; }
  .work-header h3 { font-size:25px; }
  .intro-body { grid-template-columns:200px minmax(0,1fr); gap:26px; }
  .skills-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { :root { --header-height:72px; --hero-word-size:80px; }
  .container { width:calc(100% - 40px); }
  .nav { height:72px; }
  .brand b { font-size:25px; }
  .brand small { display:none; }
  .nav-in { gap:12px; }
  .nav-actions { display:none; }
  .menu-btn { margin-left:0; height:72px; padding-left:14px; font-size:12px; gap:8px; }
  .resume-menu { margin-left:auto; }
  .resume-menu summary { font-size:14px; gap:6px; }
  .resume-options { right:-50px; }
  .hero-content.container { left:50%; width:calc(100% - 40px); }
  .hero-identity { flex-direction:column; align-items:center; gap:4px; margin-top:16px; max-width:300px; }
  .hero-fullname { font-size:21px; }
  .hero-role { font-size:15px; }
  .hero-statement { font-size:17px; margin-top:12px; max-width:320px; }
  .button { font-size:15px; padding:12px 16px; min-height:50px; gap:8px; }
  .section { padding-block:42px; }
  .section-heading { gap:16px; margin-bottom:28px; }
  .section-index { min-width:22px; font-size:13px; }
  .section-en { font-size:30px; line-height:1.4; }
  .section-heading h2 { font-size:22px; line-height:1.6; }
  .section-sub { font-size:16px; }
  .intro-body { grid-template-columns:1fr; gap:22px; }
  .intro-person img { width:64px; height:64px; }
  .intro-person b { font-size:21px; }
  .intro-copy { font-size:18px; line-height:1.95; }
  .education { grid-column:1; grid-template-columns:1fr; gap:16px; }
  .education b { font-size:17px; }
  .education p { font-size:15px; }
  .project-filters { gap:8px; margin-bottom:0; }
  .project-filters button { min-height:44px; padding:8px 13px; font-size:14px; }
  .work { display:block; padding:30px 0; }
  .work-index { margin-bottom:10px; }
  .work-header h3 { font-size:24px; line-height:1.6; }
  .work-meta { font-size:15px; margin-top:10px; }
  .tags { margin-top:14px; gap:6px; }
  .tags span { font-size:12px; }
  .work-story { margin-top:22px; }
  .work-story dd { font-size:17px; }
  .skills-grid { grid-template-columns:1fr; }
  .skill { padding:24px 0; }
  .skill h3 { font-size:21px; }
  .skill p { font-size:17px; }
  .paper-top { display:block; }
  .paper h3 { font-size:21px; line-height:1.7; overflow-wrap:anywhere; }
  .paper-state { display:inline-block; margin-top:12px; }
  .paper p,.paper a { font-size:15px; }
  .honor-list,.activities { grid-template-columns:1fr; }
  .honor b { font-size:17px; }
  .activity h3 { font-size:21px; }
  .activity p { font-size:17px; }
  .contact-copy { font-size:18px; }
  .contact-email { font-size:20px; gap:8px; }
  .contact-email svg { width:24px; height:24px; }
  .contact-links { gap:10px; }
  .section-peek { width:70px; top:0; }
  .section-peek img { width:70px; height:80px; }
  .section-heading:has(.section-peek) { padding-right:68px; }
  .footer-wordmark { font-size:64px; }
  .footer-bottom { align-items:flex-start; flex-wrap:wrap; font-size:13px; }
  .drawer { top:72px; padding:24px; }
  .drawer-scrim { top:72px; }
  .d-link { font-size:27px; }
  .cookie-bar { font-size:13px; gap:12px; padding:12px 14px; } }
@media(max-width:380px) { :root { --hero-word-size:64px; }
  .section-en { font-size:26px; }
  .footer-wordmark { font-size:56px; }
}
@media(hover:hover) and (pointer:fine) { .section-peek.is-visible:not(.is-near) img { transform:translateY(80px) rotate(12deg); }
  .section-peek.is-near img { transform:translateY(12px) rotate(-6deg); } }
@media(min-width:761px) and (max-height:800px) { :root { --hero-word-size:140px; } }
@media(min-width:761px) and (max-height:650px) { :root { --hero-word-size:108px; } }
@media(hover:none) { #cursor-halo { display:none; }
  .hero-peek img { opacity:1; transform:translateY(0) rotate(-8deg); } }
@media(max-width:760px) {
  #scene::after { background:linear-gradient(180deg,transparent 20%,#19171bb0 40%,#19171b90 65%,transparent 90%); }
  html[data-theme='light'] #scene::after { background:linear-gradient(180deg,transparent 20%,#f6f3f5c0 40%,#f6f3f5a0 65%,transparent 90%); }
}
@media(max-width:760px) { #cursor-halo { display:none; }
  .work-story dd { font-size:18px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; }
  #cursor-halo { display:none; } }
@media(max-width:1100px),(max-height:649px) { .hero { height:calc(100svh - var(--header-height) - 112px); min-height:520px; } }
@media(max-width:760px) { .hero-peek,.hero-peek img { width:56px; height:56px; } }
@media(min-width:761px) and (max-width:1350px) { .brand small { display:none; }.nav-in { gap:16px; }.nav-actions { gap:12px; } }
@media(max-width:380px) { .menu-btn > span { display:none; } }