:root{
    --bg:#060a12;
    --panel:#0c121e;
    --panel-2:#0e1526;
    --border:#1b2a3d;
    --border-active:#00e5ff;
    --text:#d9eaf5;
    --text-dim:#7f97ac;
    --text-faint:#48596b;
    --accent:#00e5ff;
    --accent-dim:rgba(0,229,255,.14);
    --accent-glow:rgba(0,229,255,.6);
    --accent-2:#ff9d2e;
    --accent-2-dim:rgba(255,157,46,.16);
    --accent-2-glow:rgba(255,157,46,.55);
    --food:#ff9d2e;
    --danger:#ff6a3d;
    --mono:'IBM Plex Mono',SFMono-Regular,Menlo,Consolas,monospace;
    --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
  html,body{background:var(--bg);color:var(--text);width:100%;overflow-x:hidden;}
  body{font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;}
  a{color:inherit;}
  ::selection{background:var(--accent-dim);color:var(--accent);}

  #board-wrap{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(900px 600px at 50% 0%, rgba(0,229,255,.05), transparent 70%),
      var(--bg);
  }
  #board-svg{display:block;width:100%;height:100%;}
  .fz-w{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.22;transition:opacity .5s ease;}
  .fz-case{fill:none;stroke:var(--accent);stroke-width:2;opacity:.22;transition:opacity .5s ease;}
  .fz-dot{fill:var(--accent);stroke:none;opacity:.3;transition:opacity .5s ease;}
  .fz-arrow{fill:var(--accent);stroke:none;opacity:.22;transition:opacity .5s ease;}
  .fz-lbl{fill:var(--text-faint);font-family:var(--mono);font-size:11px;}
  .fz-comp.charged .fz-w,
  .fz-comp.charged .fz-case,
  .fz-comp.charged .fz-arrow{opacity:1;filter:drop-shadow(0 0 5px var(--accent-glow));}
  .fz-comp.charged .fz-dot{opacity:1;filter:drop-shadow(0 0 6px var(--accent-glow));}
  .sig-path-base{stroke:var(--accent);stroke-width:2;fill:none;opacity:.16;}
  .sig-path-glow{stroke:var(--accent);stroke-width:3;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--accent-glow));}
  .sig-marker{fill:#bff5ff;filter:drop-shadow(0 0 10px var(--accent-glow)) drop-shadow(0 0 22px var(--accent-glow));}
  .branch-marker{fill:#bff5ff;filter:drop-shadow(0 0 6px var(--accent-glow)) drop-shadow(0 0 14px var(--accent-glow));transition:opacity .15s linear;}

  .scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
    background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px);
  }

  /* ---------- Boot ---------- */
  #boot{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;align-items:center;justify-content:center;
    transition:opacity .5s ease, visibility .5s ease;}
  #boot.hidden{opacity:0;visibility:hidden;pointer-events:none;}
  .boot-box{width:min(560px,88vw);font-family:var(--mono);}
  .boot-wordmark{font-size:clamp(1.1rem,3vw,1.5rem);font-weight:600;letter-spacing:.12em;color:var(--accent);
    text-shadow:0 0 18px var(--accent-glow);text-transform:uppercase;margin-bottom:.4rem;}
  .boot-sub{font-size:.72rem;color:var(--text-faint);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.4rem;}
  .boot-rule{height:1px;background:linear-gradient(90deg,var(--accent),transparent);margin-bottom:1.4rem;opacity:.5;}
  .boot-line{font-size:.82rem;color:var(--text-dim);opacity:0;transform:translateY(4px);
    animation:bootIn .35s ease forwards;margin-bottom:.5rem;}
  .boot-line b{color:var(--text);font-weight:500;}
  .boot-line .ok{color:var(--accent);font-weight:600;float:right;}
  @keyframes bootIn{to{opacity:1;transform:translateY(0);}}
  .boot-welcome{margin-top:1rem;font-size:.82rem;color:var(--accent);opacity:0;animation:bootIn .35s ease forwards;}

  /* ---------- App shell ---------- */
  #app{position:relative;z-index:2;opacity:0;transition:opacity .6s ease;}
  #app.show{opacity:1;}

  .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
    padding:.9rem 1.6rem;background:rgba(10,12,15,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
  .brand{font-family:var(--mono);font-weight:600;font-size:.95rem;letter-spacing:.02em;}
  .brand span{color:var(--accent);}
  .pipstrip{display:flex;gap:.5rem;align-items:center;}
  .pipstrip .pip{width:7px;height:7px;border-radius:50%;background:var(--border);transition:background .3s,box-shadow .3s;}
  .pipstrip .pip.active{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
  .pipstrip .label{font-family:var(--mono);font-size:.68rem;color:var(--text-faint);letter-spacing:.08em;margin-left:.4rem;text-transform:uppercase;}

  .nav-cv{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--text-dim);
    text-decoration:none;border:1px solid var(--border);border-radius:6px;padding:.4rem .75rem;margin-left:1.2rem;transition:all .2s ease;white-space:nowrap;}
  .nav-cv:hover{color:var(--accent);border-color:var(--accent);}
  @media(max-width:720px){ .nav-cv{display:none;} }

  .lang-switch{display:flex;gap:.2rem;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:.2rem;margin-left:1rem;}
  .lang-btn{background:transparent;border:none;color:var(--text-faint);font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.04em;
    padding:.28rem .55rem;border-radius:4px;cursor:pointer;transition:all .2s ease;}
  .lang-btn:hover{color:var(--text);}
  .lang-btn.active{background:var(--accent);color:#04140d;}
  @media(max-width:720px){ .lang-switch{margin-left:.5rem;} }

  main{max-width:980px;margin:0 auto;padding:0 1.4rem 6rem;}

  /* ---------- Hero ---------- */
  .hero{min-height:82vh;display:flex;flex-direction:column;justify-content:center;padding:2rem 0;position:relative;}
  .hero::before{content:'';position:absolute;inset:-3rem -1.25rem;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 75% 65% at 28% 48%, rgba(6,9,14,.92) 0%, rgba(6,9,14,.72) 45%, rgba(6,9,14,.2) 72%, transparent 88%);}
  .hero > *{position:relative;z-index:1;}
  .hero-kicker{font-family:var(--mono);color:var(--accent);letter-spacing:.3em;text-transform:uppercase;font-size:.78rem;margin-bottom:1.1rem;}
  .hero-name{font-size:clamp(2.6rem,8vw,4.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.03;margin-bottom:.5rem;}
  .hero-role{font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--text-dim);font-weight:500;margin-bottom:1rem;}
  .hero-tagline{max-width:600px;color:var(--text-dim);font-size:1.02rem;margin-bottom:2rem;}
  .hero-actions{display:flex;gap:.9rem;flex-wrap:wrap;}
  .btn{font-family:var(--mono);font-size:.85rem;font-weight:600;padding:.8rem 1.5rem;border-radius:6px;text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:.5rem;}
  .btn-primary{background:var(--accent);color:#04140d;}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--accent-dim);}
  .btn-ghost{border-color:var(--border);color:var(--text);}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}

  /* ---------- Panels ---------- */
  .panel{background:rgba(15,18,24,.9);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:10px;
    margin-bottom:1.6rem;overflow:hidden;transition:border-color .5s ease, box-shadow .5s ease;}
  .panel.active{border-color:var(--border-active);box-shadow:0 0 0 1px var(--accent-dim), 0 20px 50px rgba(0,0,0,.35);}
  .panel-head{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--border);
    font-family:var(--mono);font-size:.74rem;color:var(--text-faint);letter-spacing:.06em;}
  .panel-head .dots{display:flex;gap:.3rem;}
  .panel-head .dots i{width:8px;height:8px;border-radius:50%;background:var(--border);display:block;}
  .panel-head .id{color:var(--text-dim);}
  .panel-head .name{color:var(--text);}
  .panel-head .pip{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--border);transition:background .4s,box-shadow .4s;}
  .panel.active .panel-head .pip{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
  .panel-body{padding:1.4rem 1.3rem 1.6rem;}
  .panel h2.section-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;letter-spacing:-.01em;}

  .about-bio{color:var(--text-dim);font-size:1rem;max-width:680px;margin-bottom:1rem;}
  .about-award{display:inline-block;color:var(--accent);font-size:.88rem;background:var(--accent-dim);
    border:1px solid rgba(0,229,255,.3);border-radius:8px;padding:.7rem 1rem;}

  .timeline{display:flex;flex-direction:column;gap:1.1rem;}
  .t-item{border-left:2px solid var(--border);padding-left:1rem;position:relative;}
  .t-item::before{content:'';position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent-glow);}
  .t-title{font-weight:600;font-size:.98rem;}
  .t-org{color:var(--text-dim);font-size:.86rem;}
  .t-period{font-family:var(--mono);color:var(--accent);font-size:.76rem;margin-top:.15rem;}
  .t-note{color:var(--text-faint);font-size:.82rem;margin-top:.35rem;line-height:1.5;}

  .skills-groups{display:flex;flex-direction:column;gap:1.1rem;}
  .skills-label{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:.5rem;}
  .skills-tags{display:flex;flex-wrap:wrap;gap:.5rem;}
  .skill-tag{background:var(--panel-2);border:1px solid var(--border);border-radius:5px;padding:.4rem .7rem;font-size:.82rem;font-family:var(--mono);color:var(--text);}

  .projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;}
  .pcard{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:1.1rem;display:flex;flex-direction:column;
    transition:border-color .25s,transform .25s;}
  .pcard:hover{border-color:var(--accent);transform:translateY(-3px);}
  .pcard .ptitle{font-weight:600;font-size:1.02rem;margin-bottom:.4rem;}
  .pcard .ptitle .flag{font-family:var(--mono);font-size:.62rem;color:var(--accent-2);border:1px solid rgba(255,157,46,.35);border-radius:4px;padding:.1rem .35rem;margin-left:.4rem;vertical-align:middle;}
  .pcard .pdesc{color:var(--text-dim);font-size:.86rem;flex-grow:1;margin-bottom:.9rem;}
  .pcard .ptags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem;}
  .pcard .ptags span{font-family:var(--mono);font-size:.68rem;color:var(--accent);background:var(--accent-dim);border-radius:4px;padding:.2rem .45rem;}
  .pcard .plinks{display:flex;gap:.5rem;flex-wrap:wrap;}
  .plinks a{font-family:var(--mono);font-size:.76rem;font-weight:600;border:1px solid var(--border);border-radius:5px;padding:.4rem .7rem;text-decoration:none;transition:border-color .2s,color .2s,transform .2s;}
  .plinks a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
  .plinks a.demo{background:var(--accent-2);border-color:var(--accent-2);color:#1a0e02;}
  .plinks a.demo:hover{border-color:var(--accent-2);color:#1a0e02;box-shadow:0 8px 22px var(--accent-2-dim);}

  /* ---------- Stats / telemetry panel ---------- */
  .stats-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:1.2rem;align-items:stretch;}
  @media(max-width:640px){ .stats-grid{grid-template-columns:1fr;} }
  .heatmap-block{display:flex;flex-direction:column;gap:.7rem;}
  .heatmap-title{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;display:flex;justify-content:space-between;align-items:baseline;}
  .heatmap-title b{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600;}
  .heatmap{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;overflow-x:auto;padding-bottom:.2rem;}
  .heatmap i{width:11px;height:11px;border-radius:2px;background:var(--panel-2);border:1px solid var(--border);display:block;}
  .heatmap i[data-lvl="1"]{background:rgba(0,229,255,.18);border-color:rgba(0,229,255,.18);}
  .heatmap i[data-lvl="2"]{background:rgba(0,229,255,.38);border-color:rgba(0,229,255,.38);}
  .heatmap i[data-lvl="3"]{background:rgba(0,229,255,.65);border-color:rgba(0,229,255,.65);box-shadow:0 0 4px var(--accent-glow);}
  .heatmap i[data-lvl="4"]{background:var(--accent);border-color:var(--accent);box-shadow:0 0 6px var(--accent-glow);}
  .heatmap-legend{display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.66rem;color:var(--text-faint);}
  .heatmap-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}
  .stat-cards{display:flex;flex-direction:column;gap:.7rem;}
  .stat-card{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:.75rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
  .stat-card .label{font-family:var(--mono);font-size:.72rem;color:var(--text-dim);display:flex;align-items:center;gap:.5rem;}
  .stat-card .value{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;}
  .stat-card.accent2 .value{color:var(--accent-2);}

  /* ---------- Press / mentions panel ---------- */
  .press-list{display:flex;flex-direction:column;gap:.7rem;}
  .press-card{display:flex;align-items:flex-start;gap:.8rem;background:var(--panel-2);border:1px solid var(--border);
    border-radius:8px;padding:.85rem .95rem;text-decoration:none;transition:border-color .2s,transform .2s;}
  .press-card:hover{border-color:var(--accent-2);transform:translateY(-2px);}
  .press-card .press-src{font-family:var(--mono);font-size:.68rem;color:var(--accent-2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;padding-top:.15rem;}
  .press-card .press-body{flex:1;}
  .press-card .press-title{color:var(--text);font-size:.9rem;font-weight:500;margin-bottom:.15rem;}
  .press-card .press-link{font-family:var(--mono);font-size:.74rem;color:var(--text-faint);}
  .press-card:hover .press-link{color:var(--accent-2);}

  .contact-blurb{color:var(--text-dim);margin-bottom:1.2rem;max-width:560px;}
  .contact-links{display:flex;gap:.8rem;flex-wrap:wrap;}
  .contact-links a{display:inline-flex;align-items:center;gap:.5rem;background:var(--panel-2);border:1px solid var(--border);
    border-radius:8px;padding:.7rem 1.1rem;text-decoration:none;font-size:.9rem;font-weight:500;transition:border-color .2s,transform .2s;}
  .contact-links a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}

  footer{text-align:center;padding:2rem 1rem;color:var(--text-faint);font-size:.78rem;font-family:var(--mono);}

  /* ---------- Terminal ---------- */
  .term-output{height:280px;overflow-y:auto;padding:1rem 1.1rem;font-family:var(--mono);font-size:.82rem;line-height:1.6;}
  .term-output .ln{white-space:pre-wrap;word-break:break-word;}
  .term-output .echo{color:var(--text-faint);}
  .term-output .echo b{color:var(--accent);}
  .term-output .err{color:var(--danger);}
  .term-output .info{color:var(--text);}
  .term-inputrow{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-top:1px solid var(--border);font-family:var(--mono);font-size:.82rem;}
  .term-prompt{color:var(--accent);white-space:nowrap;}
  .term-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:.82rem;}
  .term-output::-webkit-scrollbar{width:8px;}
  .term-output::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

  .term-anchor-note{color:var(--text-dim);font-size:.9rem;}
  .term-anchor-note b{color:var(--accent);font-family:var(--mono);font-weight:600;}

  /* ---------- Docked terminal (fixed, follows scroll on desktop + mobile) ---------- */
  .term-dock{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(980px,100%);z-index:30;
    background:rgba(12,15,21,.94);backdrop-filter:blur(12px);border:1px solid var(--border);border-bottom:none;
    border-radius:12px 12px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.5);font-family:var(--mono);}
  .term-dock .term-output{height:0;padding:0 1.1rem;transition:height .25s ease, padding .25s ease;}
  .term-dock.expanded .term-output{height:260px;padding:.9rem 1.1rem;}
  .term-dock-head{display:flex;align-items:center;gap:.6rem;padding:.55rem 1.1rem;border-bottom:1px solid var(--border);
    font-size:.74rem;color:var(--text-faint);letter-spacing:.05em;cursor:pointer;}
  #board-svg-mini{width:52px;height:27px;flex:none;display:block;}
  .term-dock-title{flex:1;}
  .term-dock-toggle{background:transparent;border:1px solid var(--border);border-radius:5px;color:var(--text-dim);
    width:24px;height:22px;font-size:.62rem;cursor:pointer;transition:all .2s ease;}
  .term-dock-toggle:hover{color:var(--accent);border-color:var(--accent);}
  .term-dock.expanded .term-dock-toggle{transform:rotate(180deg);}
  .term-dock .term-inputrow{padding:.6rem 1.1rem;border-top:1px solid var(--border);}
  main{padding-bottom:calc(6rem + 60px);}
  @media(max-width:720px){
    .term-dock.expanded .term-output{height:150px;}
    .term-dock-title{display:none;}
    main{padding-bottom:calc(4rem + 56px);}
  }

  /* ---------- Snake overlay ---------- */
  #snake-overlay{position:fixed;inset:0;z-index:80;background:rgba(6,7,9,.88);backdrop-filter:blur(4px);
    display:none;align-items:center;justify-content:center;flex-direction:column;font-family:var(--mono);}
  #snake-overlay.show{display:flex;}
  .snake-hud{display:flex;justify-content:space-between;width:min(400px,86vw);margin-bottom:.6rem;font-size:.78rem;color:var(--text-dim);letter-spacing:.05em;}
  .snake-hud b{color:var(--accent);}
  #snake-canvas{background:#0d1016;border:1px solid var(--border);border-radius:8px;width:min(400px,86vw);height:min(400px,86vw);image-rendering:pixelated;}
  .snake-msg{margin-top:.9rem;font-size:.78rem;color:var(--text-faint);text-align:center;max-width:360px;line-height:1.6;}
  .snake-msg b{color:var(--accent);}

  /* ---------- CV hover preview (a little spinning card, cursor-anchored) ---------- */
  .cv-preview{position:fixed;top:0;left:0;z-index:60;pointer-events:none;opacity:0;
    transform:translate(-50%,-100%);transition:opacity .2s ease;}
  .cv-preview.below{transform:translate(-50%,0);}
  .cv-preview.show{opacity:1;}
  .cv-preview-stage{perspective:1000px;}
  .cv-preview-card{width:148px;height:192px;position:relative;transform-style:preserve-3d;animation:cvSpin 5.5s linear infinite;}
  .cv-preview-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:7px;overflow:hidden;
    border:1px solid var(--border-active);box-shadow:0 24px 50px rgba(0,0,0,.65), 0 0 28px var(--accent-glow);}
  .cv-preview-front img{width:100%;height:100%;object-fit:cover;display:block;}
  .cv-preview-back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--panel-2),var(--panel));
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;}
  .cv-preview-back-mark{font-family:var(--mono);font-weight:700;font-size:1.5rem;color:var(--accent);text-shadow:0 0 16px var(--accent-glow);}
  .cv-preview-back-label{font-family:var(--mono);font-size:.6rem;color:var(--text-faint);letter-spacing:.05em;}
  @keyframes cvSpin{ to{ transform:rotateY(360deg); } }
  @media(prefers-reduced-motion:reduce){ .cv-preview-card{animation:none;} }
  @media(hover:none){ .cv-preview{display:none;} }

  @media(max-width:720px){
    body{padding-right:0;}
    .topbar{padding:.8rem 1rem;}
    .pipstrip .label{display:none;}
    main{padding:0 .9rem 4rem;}
  }