:root{
      --bg:#f8fbff;
      --panel:rgba(255,255,255,.84);
      --panel-warm:#fffaf2;
      --text:#14213a;
      --muted:#66758f;
      --blue:#3f7fdf;
      --blue-2:#7aa9ea;
      --line:#dce9f8;
      --line-strong:#cbdff5;
      --shadow:0 14px 38px rgba(42,84,135,.08);
      --radius:22px;
      --content:900px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 50% 15%, rgba(113,165,235,.08), transparent 30%),
        linear-gradient(180deg,#fbfdff 0%,#f8fbff 100%);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
      min-height:100vh;
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}

    /* ---------- page ---------- */
    .page{
      position:relative;
      min-height:calc(100vh - 72px);
      padding:50px 24px 64px;
      isolation:isolate;
    }

    .center{
      width:min(var(--content),100%);
      margin:0 auto;
      position:relative;
      z-index:5;
    }

    /* ---------- notebook-like formula background ---------- */
    .decor{
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      overflow:hidden;
      color:#5f86c8;
    }

    .decor svg{
      position:absolute;
      fill:none;
      stroke:currentColor;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    /* Background sketch strength: adjust these opacity values. */
    .decor .l1{opacity:.08;stroke-width:1.02}
    .decor .l2{opacity:.15;stroke-width:1.12}
    .decor .l3{opacity:.16;stroke-width:1.24}
    .decor .dash{stroke-dasharray:5 8}
    .decor .dot-line{stroke-dasharray:1 8}
    .decor .grid{opacity:.05;stroke-width:.8}
    .decor text{
      fill:currentColor;
      stroke:none;
      font-family:var(--font-handwritten,ui-rounded,"PingFang SC","Microsoft YaHei",cursive,sans-serif);
      font-size:12px;
      font-weight:400;
      letter-spacing:.01em;
      font-synthesis:none;
    }

    .decor .scribble{
      stroke-dasharray:2 1;
      stroke-width:.9;
    }

    .decor-left-a{left:1.5%;top:4%;width:215px;transform:rotate(-7deg)}
    .decor-left-b{left:.5%;top:19%;width:260px;transform:rotate(-4deg)}
    .decor-left-c{left:3.5%;top:39%;width:155px;transform:rotate(-19deg)}
    .decor-left-d{left:1%;top:60%;width:265px;transform:rotate(3deg)}
    .decor-left-e{left:2%;top:82%;width:205px;transform:rotate(-11deg)}
    .decor-right-a{right:2%;top:7%;width:205px;transform:rotate(12deg)}
    .decor-right-b{right:.8%;top:25%;width:250px;transform:rotate(5deg)}
    .decor-right-c{right:.5%;top:43%;width:240px;transform:rotate(-9deg)}
    .decor-right-d{right:2%;top:65%;width:215px;transform:rotate(7deg)}
    .decor-right-e{right:.8%;top:84%;width:268px;transform:rotate(-5deg)}

    /* ---------- hero ---------- */
    .hero{
      text-align:center;
      padding-top:8px;
      margin-bottom:28px;
    }

    .avatar-wrap{
      width:148px;
      height:148px;
      margin:0 auto 18px;
      border-radius:50%;
      padding:5px;
      background:linear-gradient(145deg,#fff,#edf6ff);
      box-shadow:0 12px 34px rgba(57,100,154,.11);
      border:1px solid #dbe9f7;
      position:relative;
    }

    .avatar{
      width:100%;
      height:100%;
      border-radius:50%;
      object-fit:cover;
      object-position:center 28%;
      display:block;
      position:relative;
      z-index:2;
      background:linear-gradient(145deg,#dbeeff,#eef6ff);
    }

    .avatar-fallback{
      position:absolute;
      inset:5px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg,#d7e9fb,#eef6ff);
      color:#4c79b5;
      font-size:30px;
      font-weight:700;
      z-index:1;
    }

    .hero h1{
      margin:0;
      font-size:clamp(32px,5vw,46px);
      line-height:1.05;
      letter-spacing:.02em;
      font-family:var(--font-handwritten,ui-rounded,"PingFang SC","Microsoft YaHei",cursive,sans-serif);
      font-weight:700;
      font-synthesis:none;
    }

    .hero h1::after{
      content:"";
      display:block;
      width:150px;
      height:3px;
      margin:12px auto 0;
      border-radius:50%;
      background:linear-gradient(90deg,transparent,var(--blue),transparent);
      opacity:.8;
    }

    .intro{
      max-width:580px;
      margin:20px auto 0;
      color:#4f6079;
      line-height:1.9;
      font-size:15px;
    }

    .hero-kicker{
      margin:0 0 10px;
      color:#7394bd;
      font-size:11px;
      font-weight:750;
      letter-spacing:.16em;
      text-transform:uppercase;
    }

    /* ---------- cards ---------- */
    .card{
      background:var(--panel);
      border:1px solid rgba(190,214,242,.72);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);
    }

    .two-col{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:16px;
      margin-top:22px;
    }

    .section-card{
      padding:24px 26px;
    }

    .section-title{
      margin:0 0 16px;
      display:flex;
      align-items:center;
      gap:10px;
      font-size:18px;
      font-weight:600;
      font-family:var(--font-handwritten,ui-rounded,"PingFang SC","Microsoft YaHei",cursive,sans-serif);
      font-synthesis:none;
    }

    .section-title::after{
      content:"";
      width:38px;
      height:2px;
      border-radius:2px;
      background:var(--blue-2);
      opacity:.75;
    }

    /* education */
    .edu-list{
      display:grid;
      gap:10px;
    }

    .edu-item{
      display:grid;
      grid-template-columns:18px minmax(0,1fr);
      gap:11px;
      align-items:stretch;
      padding:12px 13px 12px 11px;
      border:1px solid #e0ebf7;
      border-radius:13px;
      background:linear-gradient(135deg,rgba(247,251,255,.95),rgba(255,255,255,.8));
    }

    .edu-item:last-child{
      background:linear-gradient(135deg,rgba(255,252,247,.95),rgba(255,255,255,.8));
      border-color:#ebe3d6;
    }

    .edu-track{
      display:flex;
      flex-direction:column;
      align-items:center;
      padding-top:5px;
    }

    .edu-dot{
      width:9px;
      height:9px;
      flex:0 0 9px;
      border:2px solid #72a4e4;
      border-radius:50%;
      background:#fff;
      box-shadow:0 0 0 3px #eaf3fd;
    }

    .edu-line{
      width:1px;
      flex:1;
      min-height:30px;
      margin-top:6px;
      background:linear-gradient(#bad2ee,transparent);
    }

    .edu-head{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
    }

    .edu-time{
      flex:0 0 auto;
      font-size:11px;
      color:#7990ad;
      white-space:nowrap;
    }

    .edu-school{
      font-size:15px;
      font-weight:700;
      margin-bottom:3px;
    }

    .edu-college{
      color:#64758c;
      font-size:12px;
      line-height:1.5;
    }

    .edu-degree{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:6px;
      margin-top:8px;
    }

    .edu-degree span{
      padding:4px 8px;
      border-radius:999px;
      background:#edf5fe;
      color:#58708e;
      font-size:10.5px;
      white-space:nowrap;
    }

    .edu-item:last-child .edu-degree span{background:#f8f3eb;color:#75684f}

    /* interests small icon row */
    .interest-list{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px 12px;
    }

    .interest{
      display:flex;
      align-items:center;
      gap:9px;
      min-height:38px;
      color:#45566f;
      font-size:13px;
    }

    .interest svg{
      width:19px;
      height:19px;
      flex:0 0 19px;
      stroke:var(--blue);
      stroke-width:1.7;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .skill-groups{
      display:grid;
      gap:12px;
    }

    .skill-group{
      display:grid;
      grid-template-columns:76px 1fr;
      gap:10px;
      align-items:start;
    }

    .skill-label{
      color:#7890ad;
      font-size:11px;
      font-weight:700;
      letter-spacing:.04em;
      padding-top:4px;
    }

    .skill-tags{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }

    .skill-tag{
      padding:4px 8px;
      border-radius:8px;
      background:#f3f8fe;
      color:#49617f;
      font-size:11px;
      border:1px solid #e0ebf7;
    }

    /* selected work */
    .work-card{
      margin-top:16px;
      padding:25px 26px 27px;
    }

    .section-heading{
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:end;
      margin-bottom:17px;
    }

    .section-heading .section-title{margin-bottom:0}

    .section-note{
      margin:0;
      color:#8292a8;
      font-size:12px;
      text-align:right;
    }

    .project-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }

    .project{
      overflow:hidden;
      border:1px solid #dce8f6;
      border-radius:16px;
      background:rgba(251,253,255,.86);
      transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    }

    .project:hover{
      transform:translateY(-2px);
      border-color:#c6dcf3;
      box-shadow:0 10px 22px rgba(53,96,149,.08);
    }

    .project-media{
      position:relative;
      width:100%;
      display:block;
      padding:0;
      border:0;
      border-bottom:1px solid #e0eaf5;
      background:#edf4fb;
      color:inherit;
      cursor:zoom-in;
      overflow:hidden;
      font:inherit;
    }

    .project-image{
      width:100%;
      aspect-ratio:16/8.7;
      display:block;
      object-fit:cover;
      background:#edf4fb;
      transition:opacity .25s ease,transform .35s ease;
    }

    .project-media:hover .project-image{transform:scale(1.015)}
    .project-image[data-src]{opacity:.15}
    .project-image.is-loaded{opacity:1}

    .image-hint{
      position:absolute;
      right:10px;
      bottom:9px;
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:5px 8px;
      border:1px solid rgba(255,255,255,.62);
      border-radius:999px;
      background:rgba(24,48,78,.68);
      color:#fff;
      font-size:10px;
      line-height:1;
      opacity:0;
      transform:translateY(3px);
      transition:opacity .2s ease,transform .2s ease;
      backdrop-filter:blur(6px);
    }

    .project-media:hover .image-hint,
    .project-media:focus-visible .image-hint{opacity:1;transform:none}

    .image-hint svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}

    .project-body{padding:15px 16px 17px}

    .project-meta{
      margin-bottom:7px;
      color:#6b97d0;
      font-size:10px;
      font-weight:750;
      letter-spacing:.1em;
      text-transform:uppercase;
    }

    .project h3{
      margin:0 0 7px;
      font-size:15px;
      line-height:1.4;
    }

    .project p{
      margin:0;
      color:#68788e;
      font-size:12.5px;
      line-height:1.75;
    }

    .project-result{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:10px;
      color:#3f6fa9;
      font-size:11.5px;
      font-weight:700;
    }

    .project-result::before{
      content:"";
      width:6px;height:6px;border-radius:50%;
      background:#79a9e6;
      box-shadow:0 0 0 3px #e9f2fc;
    }

    /* honors */
    .honors-card{
      margin-top:16px;
      padding:23px 26px 25px;
    }

    .honors-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:9px 18px;
    }

    .honor{
      position:relative;
      padding:10px 10px 10px 28px;
      border-bottom:1px dashed rgba(167,193,224,.48);
      color:#52657e;
      font-size:12.5px;
      line-height:1.55;
    }

    .honor::before{
      content:"";
      position:absolute;
      left:8px;top:17px;
      width:7px;height:7px;
      border:2px solid #75a4df;
      border-radius:50%;
    }

    /* about */
    .about-card{
      margin-top:16px;
      padding:24px 28px;
      background:linear-gradient(135deg,rgba(255,250,242,.95),rgba(255,255,255,.9));
      border-color:rgba(231,211,176,.65);
    }

    .about-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
    }

    .fact{
      display:grid;
      grid-template-rows:auto 1fr;
      gap:9px;
      min-height:128px;
      padding:16px 17px;
      border:1px solid rgba(222,209,186,.68);
      border-radius:14px;
      background:rgba(255,255,255,.54);
    }

    .fact:first-child,.fact:last-child{padding-left:17px;padding-right:17px}

    .fact-title{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      font-weight:700;
      margin-bottom:0;
    }

    .dot{
      width:7px;height:7px;border-radius:50%;
      background:#6ea6ea;
    }
    .fact:nth-child(2) .dot{background:#e8b15f}
    .fact:nth-child(3) .dot{background:#67bea0}

    .fact p{
      margin:0;
      color:#68778c;
      font-size:12.5px;
      line-height:1.75;
    }

    /* contact */
    .contact-card{
      margin-top:16px;
      padding:18px 22px;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:0;
    }

    .contact-item{
      display:flex;
      justify-content:center;
      gap:10px;
      align-items:center;
      min-height:46px;
      border-right:1px dashed rgba(169,194,224,.6);
      border-top:0;
      border-bottom:0;
      border-left:0;
      background:transparent;
      color:inherit;
      cursor:pointer;
      font:inherit;
      text-align:left;
    }

    .contact-item:last-child{border-right:0}

    .contact-item svg{
      width:21px;height:21px;
      stroke:var(--blue);
      fill:none;
      stroke-width:1.7;
      stroke-linecap:round;
      stroke-linejoin:round;
      flex:0 0 auto;
    }

    .contact-label{
      font-size:12px;
      color:#7b8da5;
    }

    .contact-value{
      font-size:13px;
      font-weight:650;
      color:#2f4665;
      margin-top:2px;
    }

    /* dialogs */
    body.modal-open{overflow:hidden}
    [hidden]{display:none!important}

    .modal{
      position:fixed;
      inset:0;
      z-index:100;
      display:grid;
      place-items:center;
      padding:22px;
    }

    .modal-backdrop{
      position:absolute;
      inset:0;
      width:100%;
      border:0;
      background:rgba(22,35,55,.56);
      backdrop-filter:blur(8px);
      cursor:default;
    }

    .modal-panel{
      position:relative;
      z-index:1;
      width:min(520px,100%);
      max-height:calc(100vh - 44px);
      overflow:auto;
      padding:24px;
      border:1px solid rgba(205,223,243,.9);
      border-radius:20px;
      background:rgba(252,254,255,.98);
      box-shadow:0 24px 70px rgba(14,36,67,.24);
    }

    .image-panel{
      width:min(1120px,100%);
      padding:12px;
      overflow:hidden;
      background:rgba(247,251,255,.98);
    }

    .modal-close{
      position:absolute;
      top:12px;
      right:12px;
      z-index:3;
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border:1px solid #d7e5f4;
      border-radius:50%;
      background:rgba(255,255,255,.9);
      color:#49617f;
      cursor:pointer;
      font-size:20px;
      line-height:1;
      box-shadow:0 4px 12px rgba(37,70,108,.1);
    }

    .lightbox-image{
      width:100%;
      max-height:calc(100vh - 68px);
      display:block;
      object-fit:contain;
      border-radius:12px;
      background:#edf4fb;
    }

    .image-loader{
      min-height:220px;
      display:grid;
      place-items:center;
      color:#6c84a2;
      font-size:13px;
    }

    .image-panel.is-loaded .image-loader{display:none}
    .image-panel:not(.is-loaded) .lightbox-image{display:none}
    .modal-title{margin:0 42px 6px 0;font-size:19px}
    .modal-note{margin:0 0 18px;color:#73859c;font-size:12px;line-height:1.65}

    .message-form{display:grid;gap:13px}
    .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
    .field{display:grid;gap:6px}
    .field label{color:#50647e;font-size:12px;font-weight:700}
    .field input,.field textarea{
      width:100%;
      border:1px solid #d9e6f4;
      border-radius:11px;
      padding:10px 12px;
      background:#fff;
      color:var(--text);
      font:inherit;
      font-size:13px;
      outline:none;
      transition:border-color .2s ease,box-shadow .2s ease;
    }
    .field textarea{min-height:126px;resize:vertical;line-height:1.6}
    .field input:focus,.field textarea:focus{border-color:#83afe5;box-shadow:0 0 0 3px rgba(107,158,220,.14)}
    .form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:2px}
    .hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
    .form-status{
      min-height:20px;
      margin:0;
      color:#657991;
      font-size:12px;
      line-height:1.6;
    }
    .form-status[data-state="success"]{color:#36856a}
    .form-status[data-state="error"]{color:#b55454}
    .btn{
      min-height:38px;
      padding:0 16px;
      border:1px solid #d3e1f0;
      border-radius:10px;
      background:#fff;
      color:#536982;
      cursor:pointer;
      font:inherit;
      font-size:12px;
      font-weight:700;
    }
    .btn-primary{border-color:#4d86d1;background:#4d86d1;color:#fff}
    .btn:disabled{cursor:wait;opacity:.62}

    footer{
      text-align:center;
      color:#98a7bb;
      font-size:11px;
      margin-top:20px;
    }

    /* ---------- responsiveness ---------- */
    @media (max-width:1050px){
      .decor .left-art{margin-left:-86px}
      .decor .right-art{margin-right:-90px}
    }

    @media (max-width:760px){
      .page{padding:34px 18px 48px}
      .decor{opacity:.7}
      .two-col{grid-template-columns:1fr}
      .project-grid,.honors-grid{grid-template-columns:1fr}
      .section-heading{display:block}
      .section-note{text-align:left;margin-top:6px}
      .about-grid{grid-template-columns:1fr}
      .fact{
        padding:16px 17px;
        min-height:0;
      }
      .contact-card{grid-template-columns:1fr}
      .contact-item{
        justify-content:flex-start;
        padding:10px 4px;
        border-right:0;
        border-bottom:1px dashed rgba(169,194,224,.55);
      }
      .contact-item:last-child{border-bottom:0}
      .avatar-wrap{width:128px;height:128px}
      .intro{font-size:14px}
      .skill-group{grid-template-columns:70px 1fr}
      .form-row{grid-template-columns:1fr}
      .modal{padding:12px}
      .modal-panel{max-height:calc(100vh - 24px);padding:21px 18px}
      .image-panel{padding:8px}
      .image-hint{opacity:1;transform:none}
    }

    @media (prefers-reduced-motion:reduce){
      *{scroll-behavior:auto!important}
    }