:root{
    --bg: #fbf1e2;
    --panel: #fffaf1;
    --ink: #3a2c22;
    --ink-soft: #8a7869;
    --line: rgba(58,44,34,0.14);
    --shadow: rgba(58,44,34,0.16);
    --ginger: #ea9a56;
    --ginger-deep: #d97f3c;
    --cream-fur: #f6dfb8;
    --sage: #8fae86;
    --blush: #f0a597;
    --wood: #6b4a34;
    --radius: 20px;
  }
  [data-theme="dark"]{
    --bg: #221a1e;
    --panel: #2e2226;
    --ink: #f5e9de;
    --ink-soft: #b5a294;
    --line: rgba(245,233,222,0.12);
    --shadow: rgba(0,0,0,0.5);
    --ginger: #e8935a;
    --ginger-deep: #c96f34;
    --cream-fur: #c9a06a;
    --sage: #7fae7a;
    --blush: #d98a80;
    --wood: #4a3325;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; min-height:100vh; min-height:100dvh;
    background:var(--bg); color:var(--ink);
    font-family:'Nunito', sans-serif;
    overflow-x:hidden; overflow-y:auto;
    transition:background .3s ease, color .3s ease;
  }
  h1,h2,h3{font-family:'Fredoka', sans-serif; margin:0 0 .3em 0; font-weight:600;}
  p{color:var(--ink-soft); line-height:1.65;}
  a{color:var(--ginger-deep); text-decoration:none;}
  a:hover{text-decoration:underline;}
  button{font-family:inherit;}

  /* scattered paw prints, background texture */
  .paws{position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;}
  .paws svg{position:absolute; width:34px; height:34px; color:var(--line);}

  .desktop{
    position:relative; z-index:2;
    min-height:100vh; min-height:100dvh; width:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px;
    padding-top:max(24px, env(safe-area-inset-top) + 24px);
    padding-bottom:max(24px, env(safe-area-inset-bottom) + 24px);
  }

  .corner-toggles{
    position:fixed;
    top:max(20px, env(safe-area-inset-top) + 12px);
    left:max(20px, env(safe-area-inset-left) + 12px);
    display:flex; gap:10px; z-index:60;
  }
  .toggle-btn{
    width:46px; height:46px; border-radius:14px;
    border:1px solid var(--line); background:var(--panel); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 4px 12px var(--shadow);
    transition:transform .15s ease;
  }
  .toggle-btn:hover{transform:translateY(-2px) rotate(-4deg);}
  .toggle-btn:focus-visible{outline:2px solid var(--ginger-deep); outline-offset:2px;}
  .toggle-btn svg{width:20px; height:20px;}
  .toggle-btn[data-state="off"] .icon-on{display:none;}
  .toggle-btn[data-state="on"] .icon-off{display:none;}

  #langToggle svg{ display:none; }
  #langToggle .lang-code{
    font-family:'IBM Plex Mono', monospace;
    font-weight:700; font-size:12.5px; letter-spacing:.03em;
  }

  .home-socials{
    position:fixed;
    top:max(20px, env(safe-area-inset-top) + 12px);
    right:max(20px, env(safe-area-inset-right) + 12px);
    display:flex; gap:8px; z-index:55;
  }
  .home-socials a{
    width:38px; height:38px; border-radius:11px;
    background:var(--panel); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
    box-shadow:0 4px 10px var(--shadow);
  }
  .home-socials a svg{width:16px; height:16px;}
  .home-socials a:hover{color:var(--ginger-deep);}

  .home-card{ text-align:center; max-width:520px; }
  .yard{ position:relative; width:100%; max-width:420px; height:250px; margin:0 auto 4px; }
  .house{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:210px; z-index:1; }
  .house svg{ width:100%; height:100%; overflow:visible; }

  .cat-pos{
    position:absolute; width:78px; height:66px;
    z-index:2; cursor:pointer;
    border:none; background:transparent; padding:0; margin:0; -webkit-tap-highlight-color:transparent;
    transition: left 1.1s cubic-bezier(.45,0,.2,1), top 1.1s cubic-bezier(.45,0,.2,1);
  }
  .cat-pos:focus-visible{ outline:2px solid var(--ginger-deep); outline-offset:3px; border-radius:50%; }
  .cat-flip{ width:100%; height:100%; transition:transform .35s ease; }
  .cat-flip.face-right{ transform:scaleX(-1); }
  .cat-pos svg{ width:100%; height:100%; overflow:visible; }
  .cat-pos.wandering .cat-flip{ animation:walk-bob .42s ease-in-out infinite; }

  @keyframes walk-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);} }

  /* walking gait: diagonal paw pairs step together, like a real quadruped */
  .cat-paw{ transform-origin:center; }
  .cat-pos.wandering .cat-paw.back-left,
  .cat-pos.wandering .cat-paw.front-right{ animation:paw-step .42s ease-in-out infinite; }
  .cat-pos.wandering .cat-paw.back-right,
  .cat-pos.wandering .cat-paw.front-left{ animation:paw-step .42s ease-in-out infinite; animation-delay:.21s; }
  @keyframes paw-step{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(2px,-6px);} }

  .face-surprised{ display:none; }
  .cat-pos.surprised .face-normal{ display:none !important; }
  .cat-pos.surprised .face-surprised{ display:block; }
  .cat-pos.surprised .cat-ear{ animation:none; transform:rotate(0deg) translateY(-3px) scaleY(1.12); }
  .cat-pos.surprised .cat-flip{ animation:none; transform:translateY(-3px) scale(1.03); }

  /* eating */
  .cat-pos.eating .cat-flip{ animation:nibble .32s ease-in-out infinite; }
  @keyframes nibble{ 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-2px) rotate(-4deg);} }

  .food-bowl{
    position:absolute; right:0; bottom:0; width:56px; z-index:1;
    opacity:0; transform:translateY(8px) scale(.85); pointer-events:none;
    transition:opacity .4s ease, transform .4s ease;
  }
  .food-bowl.show{ opacity:1; transform:translateY(0) scale(1); }
  .food-bowl svg{ width:100%; height:auto; display:block; }
  .food-bowl .kibble{ transition:transform .6s ease, opacity .6s ease; transform-origin:30px 12px; }
  .food-bowl.eaten .kibble{ transform:scale(.1); opacity:0; }

  /* sleeping */
  .face-sleepy{ display:none; }
  .cat-pos.sleeping .face-normal{ display:none !important; }
  .cat-pos.sleeping .face-surprised{ display:none !important; }
  .cat-pos.sleeping .face-sleepy{ display:block; }
  .cat-pos.sleeping .cat-ear{ animation:none; transform:rotate(-10deg); }
  .cat-pos.sleeping .cat-tail{ animation:none; transform:rotate(-4deg); }
  .cat-pos.sleeping .cat-flip{ animation:sleep-breathe 2.6s ease-in-out infinite; }
  @keyframes sleep-breathe{ 0%,100%{transform:translateY(0) scaleY(1);} 50%{transform:translateY(1px) scaleY(.985);} }

  .cat-zzz{ position:absolute; top:-8px; right:-2px; width:30px; height:30px; display:none; pointer-events:none; }
  .cat-pos.sleeping .cat-zzz{ display:block; }
  .cat-zzz span{
    position:absolute; left:0; top:14px; opacity:0; font-family:'Fredoka', sans-serif; font-weight:700;
    color:var(--ink-soft); animation:zzz-float 2.4s ease-in-out infinite;
  }
  .cat-zzz span:nth-child(1){ font-size:13px; animation-delay:0s; }
  .cat-zzz span:nth-child(2){ font-size:10px; left:9px; top:9px; animation-delay:.55s; }
  .cat-zzz span:nth-child(3){ font-size:8px; left:16px; top:4px; animation-delay:1.1s; }
  @keyframes zzz-float{
    0%{ opacity:0; transform:translateY(4px) scale(.8); }
    20%{ opacity:1; }
    80%{ opacity:0; transform:translateY(-16px) scale(1.05); }
    100%{ opacity:0; }
  }

  .cat-ear{ transform-origin:center; animation:twitch 4.5s ease-in-out infinite; }
  .cat-ear.right{ animation-delay:.3s; }
  @keyframes twitch{ 0%,88%,100%{transform:rotate(0deg);} 90%{transform:rotate(-6deg);} 94%{transform:rotate(4deg);} }
  .cat-tail{ transform-origin:100px 62px; animation:sway 3.2s ease-in-out infinite; }
  @keyframes sway{ 0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(8deg);} }

  .home-card .eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ginger-deep); }
  .home-card h1{ font-size:clamp(30px,4.5vw,46px); margin-top:2px; }
  .home-card p.tagline{ font-size:16px; max-width:500px; margin:8px auto 0; }
  .mood-line{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft); margin-top:10px; }

  .dock{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:max(26px, env(safe-area-inset-bottom) + 14px);
    display:flex; gap:8px;
    background:var(--panel); border:1px solid var(--line);
    padding:10px; border-radius:24px;
    box-shadow:0 10px 30px var(--shadow);
    z-index:55;
  }
  .dock button{
    width:56px; height:56px; border-radius:16px; border:none; background:transparent;
    color:var(--ink-soft);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    cursor:pointer; transition:background .2s ease, transform .15s ease, color .2s ease;
    position:relative;
  }
  .dock button svg{ width:21px; height:21px; }
  .dock button span{ font-size:9.5px; font-family:'IBM Plex Mono', monospace; }
  .dock button:hover{ background:var(--bg); transform:translateY(-6px) rotate(-2deg); color:var(--ginger-deep); }
  .dock button:focus-visible{ outline:2px solid var(--ginger-deep); outline-offset:2px; }
  .dock button::after{
    content:''; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%;
    background:var(--ginger-deep); opacity:0; transition:opacity .2s ease;
  }
  .dock button.active::after{ opacity:1; }
  .dock button.active{ color:var(--ginger-deep); background:var(--bg); }

  .overlay{
    position:fixed; inset:0; background:rgba(30,20,14,0.4); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:100; padding:30px;
  }
  .overlay.active{ opacity:1; pointer-events:auto; }
  .panel{
    background:var(--panel); border-radius:26px; max-width:720px; width:100%; max-height:82vh;
    padding:0; position:relative;
    display:flex; flex-direction:column;
    overflow:hidden;
    transform:translateY(16px) scale(.98); transition:transform .25s ease;
    box-shadow:0 30px 60px var(--shadow);
    border-top:6px solid var(--ginger);
  }
  .overlay.active .panel{ transform:translateY(0) scale(1); }

  /* scrollable body — keeps the close button fixed above it regardless of scroll position */
  .panel-scroll{
    overflow-y:auto; overflow-x:hidden;
    flex:1 1 auto; min-height:0;
    padding:38px 42px 44px;
    scrollbar-width:thin;
    scrollbar-color: var(--line) transparent;
  }
  .panel-scroll::-webkit-scrollbar{ width:8px; background:transparent; }
  .panel-scroll::-webkit-scrollbar-track{ background:transparent; }
  .panel-scroll::-webkit-scrollbar-thumb{
    background-color:var(--line); border-radius:999px;
    border:2px solid transparent; background-clip:padding-box;
  }
  .panel-scroll::-webkit-scrollbar-thumb:hover{ background-color:var(--ink-soft); }

  .panel h2{ font-size:26px; }
  .panel-tag{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ginger-deep); margin-bottom:6px; }

  /* fixed top section (about panel) — stays in view, only the section below scrolls */
  .panel-fixed{
    flex:0 0 auto;
    padding:8px 42px 20px;
    border-bottom:1px solid var(--line);
  }
  .panel-fixed + .panel-scroll{ padding-top:20px; }

  /* shared header row — drag handle + close button live together, no dead space above */
  .panel-header{
    flex:0 0 auto;
    position:relative;
    display:flex; align-items:center; justify-content:flex-end;
    padding:12px 12px 8px 16px;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
  }
  .panel-header:active{ cursor:grabbing; }
  .panel-header .drag-grip{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:40px; height:5px; border-radius:999px;
    background:var(--line);
    transition:background .2s ease;
  }
  .panel-header:hover .drag-grip{ background:var(--ink-soft); }
  .panel.dragging{
    transition:none !important;
    cursor:grabbing;
  }

  .panel-close{
    position:relative; z-index:5; flex-shrink:0;
    width:34px; height:34px; border-radius:10px;
    border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 10px var(--shadow);
  }

  .panel-header + .panel-scroll{ padding-top:12px; }

  .about-layout{ display:flex; gap:26px; align-items:flex-start; margin-top:16px; }
  .about-avatar{
    width:120px; height:120px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(155deg, var(--cream-fur), var(--ginger));
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    transition:transform .25s ease;
  }
  .about-avatar:hover{ transform:scale(1.08); }
  
  .about-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  }

  .fact-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
  .fact-card{ background:var(--bg); border-radius:14px; padding:16px 18px; border:1px solid var(--line); }
  .fact-card h3{ font-size:14px; margin-bottom:6px; }
  .fact-card ul{ margin:0; padding-left:16px; font-size:13.5px; color:var(--ink-soft); line-height:1.7; }

  .lang-row{ margin-top:22px; background:var(--bg); border-radius:14px; padding:16px 18px; border:1px solid var(--line); }
  .lang-row h3{ font-size:14px; margin-bottom:12px; }
  .lang-item{ margin-bottom:12px; }
  .lang-item:last-child{ margin-bottom:0; }
  .lang-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; margin-bottom:6px; }
  .lang-label span:first-child{ color:var(--ink); font-weight:600; }
  .lang-level{ font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
  .lang-bar{ height:8px; border-radius:999px; background:var(--panel); border:1px solid var(--line); overflow:hidden; }
  .lang-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--ginger), var(--ginger-deep)); }
  
  .lang-note{
    margin:14px 0 0;
    padding-top:12px;
    border-top:1px dashed var(--line);
    font-size:12.5px;
    color:var(--ink-soft);
  }

  .link-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; }
  .link-tile{
    background:var(--bg); border:1px solid var(--line); border-radius:16px;
    padding:18px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
    color:var(--ink); transition:transform .15s ease;
  }
  .link-tile:hover{ transform:translateY(-3px) rotate(-1deg); text-decoration:none; }
  .link-tile svg{ width:22px; height:22px; color:var(--ginger-deep); }
  .link-tile span{ font-size:12.5px; }

  .skill-groups{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:4px; }
  .skill-group-title{
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:16px;
    text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px; color:var(--ink);
  }
  .skill-group .chip-row{ margin-top:0; }

  .work-list{ display:grid; gap:16px; margin-top:16px; }
  .work-item{ display:flex; gap:16px; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:16px; }
  .work-thumb{ width:64px; height:64px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; }
  .work-thumb svg{ width:26px; height:26px; }
  .work-item h3{ font-size:16px; margin-bottom:2px; }
  .work-item p{ font-size:13.5px; margin:0; }

  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .chip{ font-size:12.5px; padding:6px 12px; border-radius:999px; background:var(--bg); border:1px solid var(--line); cursor:default; }

  .contact-body{ text-align:center; margin-top:8px; }
  .mail-btn{
    display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:12px 22px;
    border-radius:999px; background:var(--ginger-deep); color:#fff;
    font-family:'IBM Plex Mono', monospace; font-size:13px;
  }
  .mail-btn:hover{ text-decoration:none; opacity:.9; }

  /* phones (portrait) — home page locks to the screen, no scrolling */
  @media (max-width:640px){
    body{ overflow:hidden; }
    .about-layout{ flex-direction:column; align-items:center; text-align:center; }
    .fact-row{ grid-template-columns:1fr; }
    .skill-groups{ grid-template-columns:1fr; }
    .link-grid{ grid-template-columns:repeat(2,1fr); }
    .dock{ gap:2px; padding:8px; }
    .dock button{ width:48px; height:48px; }
    .dock button span{ display:none; }
    .overlay{ padding:16px; }
    .panel-scroll{ padding:28px 22px 32px; }
    .panel-fixed{ padding:6px 22px 16px; }
    .panel-fixed + .panel-scroll{ padding-top:16px; }
    .panel-header + .panel-scroll{ padding-top:10px; }
    .corner-toggles{ flex-direction:column; gap:8px; }
    .home-socials{ flex-direction:column; gap:8px; }
    .desktop{ height:100vh; height:100dvh; overflow:hidden; justify-content:flex-start; padding-top:64px; }
    .yard{ height:210px; }
    .house{ width:180px; }

    /* about panel: on phone, let the whole body scroll as one — only the
       drag-handle/close header stays put. Desktop keeps the two-region
       behavior (avatar block fixed, facts/lang scroll) untouched. */
    #panel-about .panel{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
    #panel-about .panel-header{
      position:sticky; top:0; z-index:5; background:var(--panel);
    }
    #panel-about .panel-fixed{
      flex:0 0 auto; overflow:visible; border-bottom:none;
    }
    #panel-about .panel-scroll{
      flex:0 0 auto; overflow:visible;
    }
  }

  /* small phones */
  @media (max-width:360px){
    .home-card h1{ font-size:26px; }
    .home-card p.tagline{ font-size:14.5px; }
    .yard{ height:190px; }
    .house{ width:160px; }
  }

  /* tablets */
  @media (min-width:641px) and (max-width:1024px){
    .home-card{ max-width:560px; }
    .panel{ max-width:640px; }
  }

  /* short / landscape viewports (landscape phones, small browser windows) —
     triggers on height regardless of width so it also catches rotated phones */
  @media (max-height:520px){
    .desktop{ justify-content:flex-start; padding-top:max(76px, env(safe-area-inset-top) + 68px); padding-bottom:96px; }
    .yard{ height:150px; margin-bottom:0; }
    .house{ width:140px; }
    .home-card h1{ font-size:26px; }
    .home-card p.tagline{ font-size:14px; }
    .mood-line{ margin-top:4px; }
    .dock{ padding:6px; bottom:max(14px, env(safe-area-inset-bottom) + 8px); }
    .dock button{ width:44px; height:44px; }
    .dock button span{ display:none; }
    .panel{ max-height:90vh; }
    .overlay{ padding:12px; }
  }
/* --- device notice toast (shown on non-desktop devices) --- */
.device-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 130%);
  z-index:9999; display:flex; align-items:center; gap:18px;
  max-width:min(560px, calc(100vw - 32px));
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:18px 20px; box-shadow:0 20px 45px var(--shadow);
  opacity:0; transition:transform .4s ease, opacity .4s ease;
  pointer-events:none;
}
.device-toast.show{
  transform:translate(-50%, 0); opacity:1; pointer-events:auto;
}
.device-toast-text strong{ display:block; font-size:16px; margin-bottom:4px; }
.device-toast-text p{ margin:0; font-size:14px; line-height:1.5; }
.device-toast-btn{
  flex:none; border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:15px;
  color:#fff; background:var(--ginger-deep); padding:12px 22px; border-radius:14px;
  box-shadow:0 8px 18px var(--shadow);
}
.device-toast-btn:hover{ background:var(--ginger); }
.device-toast-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

@media (max-width:520px){
  .device-toast{ flex-direction:column; align-items:stretch; text-align:center; bottom:14px; padding:16px; }
  .device-toast-btn{ width:100%; }
}