:root{
    --cream:#faf8f4;
    --lavender:#e9e4f5;
    --mint:#dfece6;
    --peach:#e3a685;
    --periwinkle:#6b63d6;
    --ink:#241f38;
    --ink-soft:#5b5570;
    --ink-faint:#938da8;
    --glass-bg:rgba(255,255,255,0.5);
    --glass-bg-strong:rgba(255,255,255,0.72);
    --glass-border:rgba(255,255,255,0.8);
    --glass-shadow:rgba(43,38,64,0.10);
    --radius:14px;
    --nav-h:56px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html, body{
    height:100%;
    overflow:hidden; /* no page scroll - panels handle their own content */
  }

  body{
    font-family:'Manrope',sans-serif;
    color:var(--ink);
    background:
      radial-gradient(ellipse 80% 60% at 15% 0%, var(--lavender) 0%, transparent 60%),
      radial-gradient(ellipse 70% 60% at 85% 15%, var(--mint) 0%, transparent 55%),
      radial-gradient(ellipse 80% 70% at 50% 100%, #ffe3d3 0%, transparent 60%),
      var(--cream);
    background-size:140% 140%;
    animation:bgShift 40s ease-in-out infinite;
    display:flex;
    flex-direction:column;
  }

  @keyframes bgShift{
    0%,100%{background-position:0% 0%;}
    50%{background-position:20% 12%;}
  }
  @media (prefers-reduced-motion: reduce){ body{animation:none;} }

  .aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
  .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:0.5;animation:drift 26s ease-in-out infinite;}
  .blob.b1{width:420px;height:420px;background:var(--peach);top:-120px;left:-80px;animation-duration:30s;opacity:0.28;}
  .blob.b2{width:380px;height:380px;background:var(--periwinkle);opacity:0.16;top:10%;right:-120px;animation-duration:34s;animation-delay:-8s;}
  .blob.b3{width:340px;height:340px;background:var(--mint);bottom:-120px;left:20%;animation-duration:28s;animation-delay:-15s;opacity:0.3;}
  .blob.b4{width:300px;height:300px;background:var(--lavender);bottom:-60px;right:10%;animation-duration:24s;animation-delay:-4s;opacity:0.3;}
  .blob.b5{width:260px;height:260px;background:var(--peach);top:40%;left:45%;animation-duration:38s;animation-delay:-20s;opacity:0.18;}
  .blob.b6{width:200px;height:200px;background:var(--periwinkle);top:60%;left:8%;animation-duration:22s;animation-delay:-11s;opacity:0.14;}

  @keyframes drift{
    0%,100%{transform:translate(0,0) scale(1);}
    33%{transform:translate(30px,-40px) scale(1.08);}
    66%{transform:translate(-25px,25px) scale(0.95);}
  }
  @media (prefers-reduced-motion: reduce){ .blob{animation:none;} }

  .sparks{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
  .spark{position:absolute;border-radius:50%;background:var(--periwinkle);opacity:0;animation:sparkFloat 14s ease-in infinite;}
  .spark:nth-child(odd){background:var(--peach);}
  @keyframes sparkFloat{
    0%{transform:translateY(0) scale(0.6);opacity:0;}
    6%{opacity:0.5;}
    90%{opacity:0.4;}
    100%{transform:translateY(-90vh) scale(1.1);opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){ .spark{animation:none;display:none;} }

  .glass{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(20px) saturate(130%);
    -webkit-backdrop-filter:blur(20px) saturate(130%);
    box-shadow:0 4px 24px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.5);
    border-radius:var(--radius);
    position:relative;
    overflow:hidden;
  }
  .glass::before{
    content:'';
    position:absolute;
    top:0;left:-140%;
    width:60%;height:100%;
    background:linear-gradient(115deg,transparent,rgba(255,255,255,0.35),transparent);
    transform:skewX(-18deg);
    pointer-events:none;
    transition:left 0.7s ease;
  }
  .glass:hover::before{left:140%;}
  @media (prefers-reduced-motion: reduce){ .glass::before{transition:none;left:-140%!important;} }

  .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--periwinkle);
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-weight:500;
  }

  h1,h2,h3{font-family:'Fraunces',serif;color:var(--ink);font-weight:560;letter-spacing:-0.01em;}

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--periwinkle);
    outline-offset:3px;
  }

  .app{
    height:100vh;
    display:flex;
    flex-direction:column;
    padding:16px 16px 0;
  }

  .navwrap{
    position:fixed;
    left:0;right:0;bottom:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    z-index:50;
    padding:0 16px;
  }
  nav{
    display:flex;
    align-items:center;
    gap:4px;
    padding:7px;
    max-width:100%;
  }
  .navlinks{
    display:flex;
    gap:2px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .navlinks::-webkit-scrollbar{display:none;}
  .navlinks button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    color:var(--ink-soft);
    background:none;
    border:none;
    cursor:pointer;
    border-radius:999px;
    transition:all 0.25s ease;
    flex-shrink:0;
  }
  .navlinks button svg{width:19px;height:19px;}
  .navlinks button:hover{background:rgba(255,255,255,0.4);color:var(--ink);}
  .navlinks button.active{background:var(--glass-bg-strong);color:var(--periwinkle);animation:navGlow 2.4s ease-in-out infinite;}
  @keyframes navGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(107,99,214,0.25);}
    50%{box-shadow:0 0 12px 3px rgba(107,99,214,0.25);}
  }
  @media (prefers-reduced-motion: reduce){ .navlinks button.active{animation:none;} }

  .stage{
    position:relative;
    flex:1;
    min-height:0;
    max-width:1100px;
    width:100%;
    margin:0 auto;
  }
  .panel{
    position:absolute;
    inset:0;
    overflow-y:auto;
    padding:6px 6px 90px;
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    transition:opacity 0.4s ease, transform 0.4s ease;
    pointer-events:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  .panel > *{width:100%;}
  #panel-projects{justify-content:flex-start;align-items:stretch;padding-top:24px;}
  .panel.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }
  @media (prefers-reduced-motion: reduce){
    .panel{transition:none;}
  }
  .panel::-webkit-scrollbar{width:8px;}
  .panel::-webkit-scrollbar-thumb{background:rgba(43,38,64,0.15);border-radius:8px;}
  #panel-projects{scrollbar-width:none;}
  #panel-projects::-webkit-scrollbar{display:none;}

  .panel-head{margin-bottom:26px;}
  .panel-head h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-top:9px;}
  .panel-head p{color:var(--ink-soft);margin-top:7px;max-width:560px;font-size:0.86rem;line-height:1.6;}

  /* ---------- Home panel ---------- */
  .hero-inner{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:28px;
    align-items:center;
    height:100%;
  }
  .hero-inner h1{
    font-size:clamp(1.6rem,3.4vw,2.4rem);
    line-height:1.12;
    margin:10px 0 12px;
  }
  .hero-inner h1 em{font-style:normal;color:var(--peach);}
  .hero-inner p.lead{color:var(--ink-soft);font-size:0.94rem;max-width:440px;margin-bottom:24px;line-height:1.65;}
  .btn-row{display:flex;gap:10px;flex-wrap:wrap;}
  .btn{
    font-family:'Manrope',sans-serif;
    font-weight:700;
    font-size:0.82rem;
    padding:10px 18px;
    border-radius:999px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
    border:1px solid transparent;
    cursor:pointer;
  }
  @keyframes cardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  .panel.active .skill-card,
  .panel.active .tl-item-h,
  .panel.active .proj-card,
  .panel.active .contact-tile{animation:cardIn 0.5s ease backwards;}
  .panel.active .skill-card:nth-child(1),.panel.active .tl-item-h:nth-child(1),.panel.active .proj-card:nth-child(1),.panel.active .contact-tile:nth-child(1){animation-delay:0.05s;}
  .panel.active .skill-card:nth-child(2),.panel.active .tl-item-h:nth-child(2),.panel.active .proj-card:nth-child(2),.panel.active .contact-tile:nth-child(2){animation-delay:0.12s;}
  .panel.active .skill-card:nth-child(3),.panel.active .tl-item-h:nth-child(3),.panel.active .proj-card:nth-child(3),.panel.active .contact-tile:nth-child(3){animation-delay:0.19s;}
  .panel.active .proj-card:nth-child(4){animation-delay:0.26s;}
  @media (prefers-reduced-motion: reduce){
    .panel.active .skill-card,.panel.active .tl-item-h,.panel.active .proj-card,.panel.active .contact-tile{animation:none;}
  }

  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0) scale(0.97);}
  .btn-primary{background:var(--ink);color:var(--cream);box-shadow:0 6px 18px rgba(36,31,56,0.22);letter-spacing:0.01em;}
  .btn-primary:hover{box-shadow:0 10px 24px rgba(36,31,56,0.28);}
  .btn-ghost{color:var(--ink);border-color:var(--glass-border);background:var(--glass-bg);letter-spacing:0.01em;}

  .terminal{padding:0;overflow:hidden;height:min(240px,72%);display:flex;flex-direction:column;}
  .term-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--glass-border);flex-shrink:0;}
  .term-bar .dot{width:9px;height:9px;border-radius:50%;}
  .dot.r{background:#f5a3a3;} .dot.y{background:#f6d68a;} .dot.g{background:#a3d9b1;}
  .term-title{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--ink-faint);margin-left:6px;}
  .term-body{font-family:'JetBrains Mono',monospace;font-size:0.78rem;padding:14px 16px;color:var(--ink-soft);overflow-y:auto;flex:1;}
  .term-body .prompt{color:var(--periwinkle);font-weight:600;}
  .term-body .out{color:var(--ink);}
  .cursor{display:inline-block;width:7px;height:1em;background:var(--peach);vertical-align:text-bottom;animation:blink 1s step-start infinite;}
  @keyframes blink{50%{opacity:0;}}

  .skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
  .skill-card{padding:16px;transition:transform 0.25s ease, box-shadow 0.25s ease;}
  .skill-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px var(--glass-shadow);}
  .skill-card h3{font-size:0.9rem;font-family:'JetBrains Mono',monospace;font-weight:600;margin-bottom:11px;color:var(--periwinkle);}
  .chip-row{display:flex;flex-wrap:wrap;gap:6px;}
  .panel.active .chip{animation:chipPop 0.4s ease backwards;}
  .panel.active .chip-row .chip:nth-child(1){animation-delay:0.05s;}
  .panel.active .chip-row .chip:nth-child(2){animation-delay:0.1s;}
  .panel.active .chip-row .chip:nth-child(3){animation-delay:0.15s;}
  .panel.active .chip-row .chip:nth-child(4){animation-delay:0.2s;}
  .panel.active .chip-row .chip:nth-child(5){animation-delay:0.25s;}
  @keyframes chipPop{from{opacity:0;transform:scale(0.7);}to{opacity:1;transform:scale(1);}}
  @media (prefers-reduced-motion: reduce){ .panel.active .chip{animation:none;} }
  .chip{font-size:0.72rem;font-weight:500;padding:5px 12px;border-radius:999px;background:transparent;border:1px solid rgba(43,38,64,0.14);color:var(--ink-soft);letter-spacing:0.01em;}

  .timeline-h{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0;padding-top:0;}
  .tl-item-h{flex:1 1 240px;max-width:320px;position:relative;min-width:0;padding:0 20px;}
  .tl-item-h + .tl-item-h{border-left:1px solid rgba(43,38,64,0.12);}
  @supports selector(:has(*)){
    .timeline-h:has(.tl-item-h:nth-child(4)) .tl-item-h{flex-basis:220px;}
  }
  .tl-card{padding:15px 17px;height:100%;transition:transform 0.25s ease, box-shadow 0.25s ease;}
  .tl-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px var(--glass-shadow);}
  .tl-date{font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--periwinkle);font-weight:600;letter-spacing:0.03em;}
  .tl-card h3{font-size:0.94rem;margin:5px 0 2px;}
  .tl-role{color:var(--ink-faint);font-size:0.78rem;margin-bottom:6px;font-weight:600;}
  .tl-card p{color:var(--ink-soft);font-size:0.8rem;line-height:1.45;}

  .proj-subnav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px;}
  .proj-subnav button{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;font-weight:600;letter-spacing:0.03em;
    padding:7px 16px;border-radius:999px;
    border:1px solid rgba(43,38,64,0.14);
    background:transparent;color:var(--ink-soft);
    cursor:pointer;transition:all 0.25s ease;
  }
  .proj-subnav button:hover{background:rgba(255,255,255,0.4);color:var(--ink);}
  .proj-subnav button.active{background:var(--ink);color:var(--cream);border-color:var(--ink);}

  .proj-carousel{position:relative;max-width:100%;margin:0 auto;}
  .proj-grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:30px 20px;
    scrollbar-width:none;
    position:relative;
    transition:opacity 0.22s ease, transform 0.22s ease;
  }
  .proj-grid::-webkit-scrollbar{display:none;}
  .proj-grid.switching{opacity:0;transform:translateY(10px) scale(0.98);}
  #panel-projects .panel-head{transition:opacity 0.22s ease, transform 0.22s ease;}
  #panel-projects .panel-head.switching{opacity:0;transform:translateY(6px);}
  @media (prefers-reduced-motion: reduce){
    .proj-grid,.proj-grid.switching,#panel-projects .panel-head,#panel-projects .panel-head.switching{transition:none;opacity:1;transform:none;}
  }
  .carousel-arrow{
    position:absolute;top:50%;
    transform:translateY(-50%);
    width:38px;height:38px;
    border-radius:50%;
    border:1px solid var(--glass-border);
    background:var(--glass-bg-strong);
    color:var(--ink);
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    z-index:5;
    display:flex;align-items:center;justify-content:center;
    transition:transform 0.2s ease, background 0.2s ease;
    backdrop-filter:blur(14px);
  }
  .carousel-arrow:hover{background:var(--glass-bg);transform:translateY(-50%) scale(1.08);}
  .carousel-arrow.left{left:6px;}
  .carousel-arrow.right{right:6px;}
  .proj-card{
    flex:0 0 220px;
    width:220px;
    padding:10px;display:flex;flex-direction:column;gap:5px;
    scroll-snap-align:center;
    transition:transform 0.35s ease, opacity 0.35s ease, box-shadow 0.25s ease;
    position:relative;z-index:1;
    opacity:0.65;
    transform:scale(0.88);
  }
  .proj-card.center{opacity:1;transform:scale(1.12);z-index:2;}
  .proj-card:hover{box-shadow:0 16px 40px var(--glass-shadow);}
  .proj-card:not(.center):hover{transform:scale(0.92) translateY(-3px);}
  .proj-card.center:hover{transform:scale(1.15);}
  .proj-thumb{
    margin:-10px -10px 2px;
    border-radius:13px 13px 0 0;
    overflow:hidden;
    line-height:0;
  }
  .proj-thumb svg{width:100%;height:100%;display:block;transition:transform 0.4s ease;}
  .proj-card:hover .proj-thumb svg{transform:scale(1.08);}
  .proj-thumb img{width:100%;height:100px;object-fit:contain;background:rgba(0,0,0,0.03);display:block;transition:transform 0.4s ease;}
  .proj-card:hover .proj-thumb img{transform:scale(1.05);}
  .proj-thumb.thumb-auto{
    height:100px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:700;font-size:1.5rem;
    transition:transform 0.4s ease;
  }
  .proj-card:hover .proj-thumb.thumb-auto{transform:scale(1.05);}

  .pub-card{padding:12px 13px;}
  .pub-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:2px;}
  .pub-badge{
    width:30px;height:30px;flex-shrink:0;border-radius:9px;
    background:var(--glass-bg-strong);
    display:flex;align-items:center;justify-content:center;
    font-size:0.85rem;
  }
  .pub-card h3{font-size:0.92rem;line-height:1.32;margin-top:2px;}
  .pub-authors{font-size:0.78rem;color:var(--ink-soft);font-style:italic;}
  .pub-venue{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--ink-faint);margin-bottom:4px;}
  .proj-top{display:flex;justify-content:space-between;align-items:flex-start;}
  .proj-card h3{font-size:0.86rem;}
  .proj-link{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--periwinkle);text-decoration:none;white-space:nowrap;font-weight:600;}
  .proj-card p{color:var(--ink-soft);font-size:0.74rem;flex-grow:1;}
  .tag-row{display:flex;flex-wrap:wrap;gap:5px;}
  .tag{font-size:0.62rem;font-family:'JetBrains Mono',monospace;padding:2px 8px;border-radius:6px;background:transparent;border:1px solid rgba(107,99,214,0.25);color:var(--periwinkle);font-weight:500;letter-spacing:0.01em;}

  .contact-status{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 15px;
    margin-bottom:18px;
    font-size:0.8rem;
    font-weight:600;
    color:var(--ink-soft);
  }
  .status-dot{
    width:7px;height:7px;border-radius:50%;
    background:#7bc79e;
    box-shadow:0 0 0 4px rgba(123,199,158,0.25);
    flex-shrink:0;
    animation:pulse 2.2s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.45;}}
  @media (prefers-reduced-motion: reduce){ .status-dot{animation:none;} }

  .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
  .contact-tile{
    position:relative;
    overflow:hidden;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:7px;
    text-decoration:none;
    color:var(--ink);
    text-align:left;
    font-family:'Manrope',sans-serif;
    cursor:pointer;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .contact-tile:hover{transform:translateY(-4px);box-shadow:0 16px 40px var(--glass-shadow);}
  .ripple{
    position:absolute;
    border-radius:50%;
    background:rgba(107,99,214,0.25);
    transform:scale(0);
    animation:rippleOut 0.6s ease-out;
    pointer-events:none;
  }
  @keyframes rippleOut{to{transform:scale(2.8);opacity:0;}}
  .contact-tile .ic{
    width:36px;height:36px;border-radius:10px;
    background:var(--glass-bg-strong);
    display:flex;align-items:center;justify-content:center;
    font-size:0.9rem;font-weight:700;color:var(--periwinkle);
  }
  .contact-tile .label{
    font-family:'JetBrains Mono',monospace;
    font-size:0.66rem;text-transform:uppercase;letter-spacing:0.06em;
    color:var(--ink-faint);margin-top:2px;
  }
  .contact-tile .value{font-weight:700;font-size:0.92rem;word-break:break-word;}
  .contact-tile .hint{font-size:0.74rem;color:var(--ink-soft);}

  .toast{
    position:fixed;
    left:50%;bottom:84px;
    transform:translate(-50%,10px);
    padding:10px 18px;
    font-size:0.8rem;
    font-weight:600;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease, transform 0.3s ease;
    z-index:80;
  }
  .toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);}

  .page-loader{
    position:fixed;inset:0;z-index:300;
    background:var(--cream);
    display:flex;align-items:center;justify-content:center;
    transition:opacity 0.4s ease, visibility 0.4s ease;
  }
  .page-loader::after{
    content:'';
    width:34px;height:34px;
    border-radius:50%;
    border:2px solid rgba(107,99,214,0.2);
    border-top-color:var(--periwinkle);
    animation:loaderSpin 0.8s linear infinite;
  }
  .page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
  @keyframes loaderSpin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion: reduce){
    .page-loader::after{animation:none;}
  }

  .wave-overlay{
    position:fixed;inset:0;z-index:200;
    background:linear-gradient(160deg,#17151f 0%,#33303f 55%,#4a4658 100%);
    background-size:220% 220%;
    transform:scaleY(0);
    transform-origin:bottom;
    pointer-events:none;
    visibility:hidden;
    overflow:hidden;
  }
  .wave-overlay.active{visibility:visible;}
  .wave-overlay.cover{transform:scaleY(1);transition:transform 0.52s cubic-bezier(.76,0,.24,1);}
  .wave-overlay.uncover{transform:scaleY(0);transition:transform 0.52s cubic-bezier(.76,0,.24,1);}
  .wave-overlay.active .wave-particles{opacity:1;}
  @media (prefers-reduced-motion: reduce){
    .wave-overlay.cover,.wave-overlay.uncover{transition:none;}
  }

  .wave-particles{position:absolute;inset:0;opacity:0;transition:opacity 0.3s ease;}
  .wave-particles span{
    position:absolute;
    width:3px;height:3px;
    border-radius:50%;
    background:rgba(245,169,139,0.8);
    animation:particleFloat 2.4s ease-in-out infinite;
  }
  @keyframes particleFloat{
    0%,100%{transform:translateY(0) scale(1);opacity:0.5;}
    50%{transform:translateY(-22px) scale(1.6);opacity:1;}
  }
  @keyframes gradientShift{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
  .wave-overlay.cover, .wave-overlay.uncover{animation:gradientShift 1.4s ease infinite;}

  .plane-icon{
    position:absolute;
    top:50%;left:-60px;
    width:34px;height:34px;
    transform:translateY(-50%) rotate(0deg);
    opacity:0;
  }
  .plane-icon.fly{
    opacity:1;
    animation:planeFly 1.05s cubic-bezier(.5,0,.5,1) forwards;
  }
  @keyframes planeFly{
    0%{left:-60px;transform:translateY(-50%) rotate(0deg);opacity:0;}
    12%{opacity:1;}
    50%{transform:translateY(-62%) rotate(-6deg);}
    88%{opacity:1;}
    100%{left:110%;transform:translateY(-38%) rotate(4deg);opacity:0;}
  }

  @media (max-width:820px){
    .navwrap{padding:0 4px;}
    nav{padding:6px;}
  }
  @media (max-width:480px){
    .navlinks button{width:36px;height:36px;}
    .navlinks button svg{width:17px;height:17px;}
  }

  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr;height:auto;}
    .terminal{height:260px;}
    .tl-item-h{padding:0;flex-basis:100%!important;max-width:100%;}
    .tl-item-h + .tl-item-h{border-left:none;border-top:1px solid rgba(43,38,64,0.12);padding-top:14px;}
  }

  @media (max-width:600px){
    .app{padding:12px 12px 0;}
    .panel-head h2{font-size:1.4rem;}
    .panel-head p{font-size:0.82rem;}
    .hero-inner h1{font-size:1.7rem;}
    .hero-inner p.lead{max-width:100%;}
    .btn-row{gap:8px;}
    .btn{font-size:0.78rem;padding:9px 15px;}
    .skill-grid,.contact-grid{grid-template-columns:1fr;}
    .proj-grid{padding:24px 20px;}
    .proj-card{flex-basis:180px;width:180px;}
    .contact-tile .value{font-size:0.86rem;}
    .navwrap{bottom:10px;}
  }

  @media (min-width:1400px){
    .stage{max-width:980px;}
    .hero-inner{gap:20px;}
    .skill-grid{gap:10px;}
    .proj-grid{gap:10px;}
    .contact-grid{gap:10px;}
    .timeline-h{gap:12px;}
  }