:root{
    --bg: #0f1117;
    --bg-panel: #15171f;
    --bg-panel-2: #1b1e28;
    --border: #262a36;
    --text: #e6e8f0;
    --text-dim: #5b6273;
    --text-mid: #8b91a3;

    --kw: #c792ea;
    --str: #9ece6a;
    --fn: #7aa2f7;
    --num: #f5c842;
    --cm: #565f79;

    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --sans: 'Inter', system-ui, sans-serif;
  }

  * { margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; text-decoration:none; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--num); outline-offset:3px; border-radius:2px; }

  #boot{
    position:fixed; inset:0;
    background:var(--bg);
    z-index:100;
    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-log{
    font-family:var(--mono);
    font-size:13.5px;
    color:var(--text-mid);
    width:min(420px, 86vw);
  }
  #boot-log div{ opacity:0; transform:translateY(4px); animation:bootLine .35s ease forwards; }
  #boot-log .ok{ color:var(--str); }
  #boot-cursor{ display:inline-block; width:7px; height:13px; background:var(--num); margin-left:4px; animation:blink 1s steps(1) infinite; vertical-align:-2px; }
  @keyframes bootLine{ to{ opacity:1; transform:none; } }

  #app{ opacity:0; transition:opacity .4s ease; }
  #app.ready{ opacity:1; }

  .window{
    max-width:920px;
    margin:32px auto;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    background:var(--bg-panel);
    box-shadow:0 40px 80px -30px rgba(0,0,0,0.6);
  }
  @media (max-width:640px){ .window{ margin:0; border-radius:0; border-left:none; border-right:none; } }

  .titlebar{ display:flex; align-items:center; gap:16px; padding:12px 16px; background:var(--bg-panel-2); border-bottom:1px solid var(--border); }
  .dots{ display:flex; gap:8px; }
  .dot{ width:11px; height:11px; border-radius:50%; }
  .dot.red{ background:#e0605a; } .dot.yellow{ background:#e5b94f; } .dot.green{ background:#5fb573; }
  .titlebar-name{ font-family:var(--mono); font-size:12.5px; color:var(--text-dim); }

  .lang-switch{
    margin-left:auto;
    display:flex;
    gap:2px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:6px;
    padding:2px;
  }
  .lang-btn{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.03em;
    padding:4px 10px;
    border-radius:4px;
    border:none;
    background:transparent;
    color:var(--text-dim);
    cursor:pointer;
    transition:color .15s ease, background .15s ease;
  }
  .lang-btn:hover{ color:var(--text-mid); }
  .lang-btn.active{ background:var(--bg-panel-2); color:var(--num); }
  .lang-btn:focus-visible{ outline:2px solid var(--num); outline-offset:2px; }

  .tabbar{ display:flex; overflow-x:auto; background:var(--bg-panel); border-bottom:1px solid var(--border); scrollbar-width:none; }
  .tabbar::-webkit-scrollbar{ display:none; }
  .tab{
    font-family:var(--mono); font-size:13px; padding:11px 18px; color:var(--text-dim);
    border-right:1px solid var(--border); white-space:nowrap; cursor:pointer; background:transparent;
    border-top:2px solid transparent; transition:color .15s ease, background .15s ease;
  }
  .tab:hover{ color:var(--text-mid); background:var(--bg-panel-2); }
  .tab.active{ color:var(--text); background:var(--bg-panel-2); border-top:2px solid var(--num); }
  .tab .dim{ color:var(--text-dim); }

  .editor{ counter-reset: line; }
  .code-line{ counter-increment: line; display:flex; }
  .code-line::before{
    content: counter(line);
    flex:0 0 48px; text-align:right; padding-right:16px;
    color:var(--text-dim); font-family:var(--mono); font-size:12.5px;
    user-select:none; border-right:1px solid var(--border); background:var(--bg-panel);
  }
  .code-line-content{ flex:1; padding:2px 20px 2px 16px; min-width:0; }
  @media (max-width:520px){
    .code-line::before{ flex-basis:28px; padding-right:8px; font-size:11px; }
    .code-line-content{ padding-left:10px; padding-right:14px; }
  }

  .line-reveal{
    opacity:0;
    animation:lineReveal .42s cubic-bezier(.22,.61,.36,1) forwards;
  }
  @keyframes lineReveal{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:none; }
  }

  section{ padding:6px 0 34px; }
  .editor > section.section-hidden{ display:none; }
  .blank .code-line-content{ min-height:1.6em; }

  .comment{ color:var(--cm); font-family:var(--mono); font-size:13.5px; white-space:pre-wrap; }
  .kw{ color:var(--kw); font-family:var(--mono); }
  .punct{ color:var(--text-mid); font-family:var(--mono); }

  .hero-name{ font-family:var(--mono); font-weight:700; font-size:clamp(32px, 6vw, 54px); letter-spacing:-0.02em; color:var(--text); min-height:1.2em; }
  .type-cursor{ display:inline-block; width:3px; height:0.9em; background:var(--num); margin-left:4px; vertical-align:-2px; animation:blink 1s steps(1) infinite; }
  @keyframes blink{ 50%{ opacity:0; } }

  .hero-flex{
    display:grid;
    grid-template-columns:minmax(0, 560px) 1fr;
    align-items:center;
    gap:20px;
  }
  .hero-text{ min-width:0; }
  .hero-shape{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
  }

  .coffee-cup{ width:128px; height:128px; overflow:visible; }

  .cup-outline{ stroke:var(--num); }
  .cup-saucer{ stroke:var(--num); opacity:0.45; }

  .steam{ stroke:var(--text-mid); transform-box:fill-box; transform-origin:50% 100%; opacity:0; animation:steamRise 3.4s ease-in-out infinite; }
  .steam-1{ animation-delay:0s; }
  .steam-2{ animation-delay:1.1s; }
  .steam-3{ animation-delay:2.2s; }

  @keyframes steamRise{
    0%{ opacity:0; transform:translateY(4px) scale(0.9); }
    25%{ opacity:0.75; }
    65%{ opacity:0.4; }
    100%{ opacity:0; transform:translateY(-9px) scale(1.05); }
  }

  @media (max-width:640px){
    .hero-flex{ grid-template-columns:1fr; }
    .hero-shape{ display:none; }
  }

  .hero-role{ font-family:var(--mono); font-size:15px; color:var(--fn); margin-top:6px; opacity:0; }
  .hero-tagline{ font-family:var(--sans); color:var(--text-mid); font-size:15.5px; margin-top:14px; max-width:52ch; opacity:0; }
  .fade-in{ animation:fadeUp .5s ease forwards; }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

  .section-heading{ font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--text-dim); text-transform:uppercase; }

  .skill-group{ margin-top:6px; }
  .skill-group-label{ font-family:var(--mono); font-size:13px; color:var(--fn); margin-bottom:8px; }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{
    font-family:var(--mono); font-size:12.5px; padding:5px 10px; border:1px solid var(--border);
    border-radius:5px; color:var(--str); background:var(--bg-panel);
    opacity:0; transform:translateY(6px); animation:chipIn .4s ease forwards;
  }
  @keyframes chipIn{ to{ opacity:1; transform:none; } }

  .project{
    display:block;
    border:1px solid var(--border); border-radius:8px; background:var(--bg-panel);
    padding:18px 18px 16px; margin-top:14px;
    opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease, border-color .2s ease;
  }
  .project.in{ opacity:1; transform:none; }
  .project:hover{ border-color:var(--fn); }
  .project-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .project-title{ font-family:var(--mono); font-weight:600; font-size:16px; color:var(--text); }
  .project-desc{ font-family:var(--sans); color:var(--text-mid); font-size:14.5px; margin-top:8px; }
  .project-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .project-tags span{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); }
  .project-tags span::before{ content:'#'; color:var(--num); }
  .project-links{ display:flex; gap:16px; margin-top:14px; }
  .project-links a{ font-family:var(--mono); font-size:13px; color:var(--fn); border-bottom:1px solid transparent; }
  .project-links a:hover{ border-bottom-color:var(--fn); }
  .project-visit{ font-family:var(--mono); font-size:13px; color:var(--fn); border-bottom:1px solid transparent; }
  .project:hover .project-visit{ border-bottom-color:var(--fn); }

  .prompt{ font-family:var(--mono); font-size:14px; color:var(--text-mid); }
  .prompt .sigil{ color:var(--str); }
  .contact-links{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
  .contact-links a{
    font-family:var(--mono); font-size:14.5px; color:var(--text); padding:8px 12px;
    border:1px solid var(--border); border-radius:6px; width:fit-content;
    transition:border-color .15s ease, color .15s ease;
  }
  .contact-links a:hover{ border-color:var(--fn); color:var(--fn); }

  footer{ padding:20px 0 26px; text-align:center; font-family:var(--mono); font-size:11.5px; color:var(--text-dim); }

  .reveal{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }