html{scroll-behavior:smooth}body{overflow-x:clip}button,a,[role=button],summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[role=button]:focus-visible,summary:focus-visible{outline:3px solid #60a5fa;outline-offset:5px}[hidden]{display:none!important}.career-bullets{list-style:disc;padding-left:18px;line-height:1.7}.career-bullets li{margin:6px 0}.career-more{margin-top:12px;font-size:12px;color:#64748b}.career-more summary{cursor:pointer;display:inline-block;border:1px solid #e2e8f0;border-radius:5px;padding:4px 8px}.career-tab-panel{min-height:410px}.career-tab-panel h3{font-size:16px;font-weight:700;margin-bottom:8px}.career-tab-panel p{line-height:1.7}.career-tab-panel article{margin-bottom:22px}.career-filter-active{background:#2563eb!important;color:white!important;border-color:#2563eb!important;box-shadow:0 4px 8px #2563eb33;transform:scale(1.05)}#project-dialog{width:min(850px,calc(100% - 32px));max-height:90dvh;overflow:auto;border:1px solid #e2e8f0;border-radius:24px;padding:0;background:white;color:#0f172a;margin:auto;box-shadow:0 25px 100px #0f172a55}#project-dialog::backdrop{background:#02061799;backdrop-filter:blur(5px)}#dialog-close{position:absolute;z-index:2;top:14px;right:14px;border-radius:50%;background:white;color:#0f172a;border:1px solid #e2e8f0;width:40px;height:40px;font-size:25px;cursor:pointer}#dialog-content img{width:100%;height:280px;object-fit:contain;background:#f1f5f9}#dialog-content .dialog-body{padding:28px}#dialog-content h2{font-size:26px;font-weight:800;margin-bottom:15px;line-height:1.2}#dialog-content p,#dialog-content li{font-size:14px;line-height:1.8;color:#64748b}#dialog-content h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#2563eb;margin-top:24px;margin-bottom:8px}#dialog-content ul{list-style:disc;padding-left:20px}#dialog-content a{display:inline-block;margin-top:22px;padding:10px 16px;border-radius:12px;background:#2563eb;color:white}.dark #project-dialog{background:#0f172a;color:white;border-color:#334155}.dark #dialog-content p,.dark #dialog-content li{color:#cbd5e1}.dark #dialog-content img{background:#020617}.dark .career-more summary{border-color:#334155}[data-tab]{cursor:pointer}[data-tab][aria-pressed=true]{color:#2563eb;border-bottom-color:#2563eb!important}.dark [data-tab][aria-pressed=true]{color:#60a5fa}.dark .career-tab-panel{color:#cbd5e1}#form-status{line-height:1.7}@media(max-width:767px){#main>div.relative{padding-top:62px;padding-bottom:48px}#dialog-content img{height:180px}#dialog-content .dialog-body{padding:22px}#dialog-content h2{font-size:22px}.career-tab-panel{min-height:0}input,select,textarea{font-size:16px!important}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

[data-tab][aria-pressed=false]{color:#64748b!important}[data-tab][aria-pressed=false]::after{width:2rem;background:#94a3b8}[data-tab][aria-pressed=true]::after{width:100%;background:#2563eb}[data-filter][aria-pressed=false]{background:#f8fafc!important;color:#64748b!important;transform:none;box-shadow:none}.dark [data-filter][aria-pressed=false]{background:#18181b!important;color:#94a3b8!important}#mobile-nav{position:fixed;z-index:100;top:46px;right:16px;width:190px;padding:12px;border-radius:18px;background:white;border:1px solid #e2e8f0;box-shadow:0 12px 40px #0f172a33}#mobile-nav a{display:block;padding:12px;font-size:14px;color:#334155}.dark #mobile-nav{background:#0f172a}.dark #mobile-nav a{color:#e2e8f0}[data-mobile-menu]{cursor:pointer;width:24px;height:24px}#main img{object-position:55% 40%}

.career-language{display:flex;align-items:center;border:1px solid #e2e8f0;border-radius:12px;padding:3px;gap:2px;background:#ffffff99;flex-shrink:0}.career-language button{padding:6px 9px;font-size:12px;font-weight:600;border-radius:8px;color:#64748b}.career-language button[aria-pressed=true]{background:#2563eb;color:white}.dark .career-language{background:#ffffff0d;border-color:#ffffff1a}.dark .career-language button:not([aria-pressed=true]){color:#cbd5e1}html[lang=zh-CN] #about h2,html[lang=zh-CN] #project h3{line-height:1.45}@media(max-width:420px){.career-language button{padding:5px 7px}#main>div.relative{padding-left:14px;padding-right:14px}#main .flex.items-center.justify-between{padding-left:16px;padding-right:16px;gap:8px}}

.career-typewriter{min-height:3em;line-height:1.5;overflow-wrap:break-word}@media(max-width:767px){.career-typewriter{min-height:4.5em}}

[data-theme]{gap:8px;padding:8px 12px;border-radius:12px;font-size:16px;line-height:1.5;color:#0f172a;flex-shrink:0}[data-theme] svg{width:16px;height:16px;flex-shrink:0}.dark [data-theme]{color:#fff;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}.dark [data-theme]:hover{background:rgba(255,255,255,.1)}

#profile-scroll{min-height:0;flex:1}#profile-panel{width:100%;flex-shrink:0}#profile-panel article{overflow-wrap:anywhere}#about [role=tablist]{flex-shrink:0;flex-wrap:wrap;row-gap:14px}@media(max-width:767px){#profile-scroll{max-height:430px}}

/* Keep native disclosures closed even when utility display rules target the list. */
.career-more:not([open]) > :not(summary){display:none!important}.career-more[open] > ul{display:block}.career-more summary{min-height:36px;display:inline-flex;align-items:center;gap:6px}.career-more summary::after{content:"+";font-size:14px}.career-more[open] summary::after{content:"−"}

.career-copy-draft{margin-top:12px;padding:10px 16px;border:1px solid #cbd5e1;border-radius:10px;font-size:14px;color:#2563eb;cursor:pointer}.dark .career-copy-draft{border-color:#475569;color:#93c5fd}

/* Contact illustration styles restored from reference component. */

      #contact .env-body { fill: #EFF6FF; stroke: #BFDBFE; stroke-width: 2; }
       .dark #contact .env-body { fill: #1e3a5f; stroke: #3b82f6; }
      #contact .env-flap { fill: #DBEAFE; stroke: #93C5FD; stroke-width: 1.5; }
       .dark #contact .env-flap { fill: #1d4ed8; stroke: #60a5fa; }
      #contact .env-line { stroke: #93C5FD; stroke-width: 2; stroke-linecap: round; }
       .dark #contact .env-line { stroke: #3b82f6; }
      #contact .dot { fill: #3B82F6; }
      #contact .dot-2 { fill: #93C5FD; }
      #contact .dot-3 { fill: #BFDBFE; }

      @keyframes envelope-float {
        0%,100% { transform: translateY(0px) rotate(-2deg); }
        50%      { transform: translateY(-14px) rotate(2deg); }
      }
      @keyframes dot-1-bounce {
        0%,100% { opacity:1; transform:scale(1); }
        50%      { opacity:0.4; transform:scale(0.6); }
      }
      @keyframes dot-2-bounce {
        0%,20%,100% { opacity:1; transform:scale(1); }
        60%          { opacity:0.4; transform:scale(0.6); }
      }
      @keyframes dot-3-bounce {
        0%,40%,100% { opacity:1; transform:scale(1); }
        80%          { opacity:0.4; transform:scale(0.6); }
      }
      @keyframes signal-ring {
        0%   { r:14; opacity:0.8; }
        100% { r:40; opacity:0; }
      }
      @keyframes paper-peek {
        0%,100% { transform:translateY(0); }
        50%      { transform:translateY(-8px); }
      }
      @keyframes star-spin {
        from { transform:rotate(0deg); }
        to   { transform:rotate(360deg); }
      }
      @keyframes line-draw {
        from { stroke-dashoffset: 120; }
        to   { stroke-dashoffset: 0; }
      }

      #contact .envelope-wrap { animation: envelope-float 4s ease-in-out infinite; transform-origin: center; }
      #contact .paper          { animation: paper-peek 4s ease-in-out infinite; transform-origin: center bottom; }
      #contact .d1 { animation: dot-1-bounce 1.4s ease-in-out infinite; }
      #contact .d2 { animation: dot-2-bounce 1.4s ease-in-out 0.2s infinite; }
      #contact .d3 { animation: dot-3-bounce 1.4s ease-in-out 0.4s infinite; }
      #contact .ring1 { animation: signal-ring 2s ease-out infinite; }
      #contact .ring2 { animation: signal-ring 2s ease-out 0.6s infinite; }
      #contact .ring3 { animation: signal-ring 2s ease-out 1.2s infinite; }
      #contact .star  { animation: star-spin 8s linear infinite; transform-origin: 340px 80px; }
      #contact .draw  { stroke-dasharray:120; animation: line-draw 2s ease-in-out infinite alternate; }
    
#contact .d1,#contact .d2,#contact .d3{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){#contact .envelope-wrap,#contact .paper,#contact .d1,#contact .d2,#contact .d3,#contact .ring1,#contact .ring2,#contact .ring3,#contact .star,#contact .draw{animation:none!important}}

/* Reference project lightbox: wide gallery, compact narrative and technology pills. */
#project-dialog{width:min(900px,calc(100% - 48px));max-height:90dvh;border-radius:24px;border-color:#e5e7eb;box-shadow:0 24px 80px #0005;color:#171717}
#project-dialog::backdrop{background:#000c;backdrop-filter:blur(6px)}
#dialog-close{top:18px;right:18px;width:44px;height:44px;font-size:25px;background:#fffffff2;color:#71717a;border:1px solid #e4e4e7;box-shadow:0 2px 5px #0002;z-index:3}
.project-gallery{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#f1f5f9}
#dialog-content .project-gallery img{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
#gallery-count{position:absolute;left:18px;top:18px;padding:7px 13px;border-radius:30px;background:#0009;color:white;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:1px solid #e4e4e7;border-radius:50%;background:#fffffff2;color:#52525b;font-size:30px;line-height:1;box-shadow:0 2px 5px #0002;cursor:pointer;display:grid;place-items:center}
.gallery-prev{left:18px}.gallery-next{right:18px}.gallery-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:2px 8px;border-radius:24px;background:#0004}
.gallery-dots button{width:22px;height:28px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.gallery-dots button::after{content:'';width:8px;height:8px;border-radius:20px;background:#ffffff99;transition:width .2s,background .2s}
.gallery-dots button[aria-current=true]{width:36px}.gallery-dots button[aria-current=true]::after{width:26px;background:#3b82f6}
#dialog-content .dialog-body{padding:22px 24px 24px}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
#dialog-content .dialog-category{font-size:12px;line-height:1.6;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:#3b82f6;margin:0 0 9px}
#dialog-content h2{font-size:24px;font-weight:800;line-height:1.25;margin:0 0 16px}
#dialog-content a.dialog-github{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;margin:0;padding:9px 17px;border:1px solid #bfdbfe;border-radius:12px;background:transparent;color:#2563eb;font-size:15px;font-weight:600;text-decoration:none}
#dialog-content .dialog-description,#dialog-content .dialog-contribution{font-size:15px;line-height:1.65;color:#71717a;margin:0 0 12px}
.dialog-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.dialog-tags span{display:inline-block;padding:6px 13px;border:1px solid #dbeafe;border-radius:8px;background:#eff6ff;color:#2563eb;font-size:14px;font-weight:600}
.dark #project-dialog{background:#18181b;border-color:#3f3f46;color:#fafafa}.dark .project-gallery{background:#0f172a}.dark #dialog-content .dialog-description,.dark #dialog-content .dialog-contribution{color:#a1a1aa}.dark #dialog-content a.dialog-github{color:#60a5fa;border-color:#334155}.dark .dialog-tags span{background:#172554;color:#93c5fd;border-color:#1e3a8a}
@media(max-width:767px){#project-dialog{width:calc(100% - 24px);max-height:92dvh;border-radius:18px}.project-gallery{aspect-ratio:4/3}#dialog-close{width:40px;height:40px;top:10px;right:10px}#gallery-count{left:12px;top:12px;font-size:12px}.gallery-arrow{width:40px;height:40px}.gallery-prev{left:10px}.gallery-next{right:10px}#dialog-content .dialog-body{padding:22px 20px}.dialog-heading{flex-wrap:wrap;gap:0}#dialog-content h2{font-size:22px;margin-bottom:14px}#dialog-content a.dialog-github{margin-bottom:18px}#dialog-content .dialog-description,#dialog-content .dialog-contribution{font-size:15px}.dialog-tags{gap:8px}.dialog-tags span{font-size:12px;padding:6px 10px}}