:root{
  --bg:#EEF2F6; --surface:#FFFFFF; --ink:#14202B; --muted:#52616F; --line:#D3DCE5;
  --accent:#1D6FD6; --bubble-in:#E4EBF3; --bubble-out:#1D6FD6; --bubble-out-ink:#FFFFFF;
  --display:"Unbounded","Onest",system-ui,sans-serif; --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1720; --surface:#17222E; --ink:#E6EDF4; --muted:#9BAABA; --line:#2A3947;
    --accent:#6AAAF7; --bubble-in:#223140; --bubble-out:#2A62B0; --bubble-out-ink:#FFFFFF;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .55s ease,color .55s ease}
body[data-theme="intro"]{--tech-filter:none}
body[data-theme="projects"]{
  --bg:#edf7f5;--surface:#fff;--ink:#172b2a;--muted:#526c69;--line:#c8dfdb;
  --accent:#087b70;--bubble-in:#e1f0ed;--bubble-out:#087b70;--tech-filter:hue-rotate(-35deg) saturate(1.35);
}
body[data-theme="experience"]{
  --bg:#f3f0fb;--surface:#fff;--ink:#282039;--muted:#655b78;--line:#d9d0eb;
  --accent:#7050b5;--bubble-in:#eae4f5;--bubble-out:#7050b5;--tech-filter:hue-rotate(55deg) saturate(1.3);
}
body[data-theme="contact"]{
  --bg:#fbf2ed;--surface:#fff;--ink:#34231e;--muted:#796158;--line:#ead4c9;
  --accent:#b94f2b;--bubble-in:#f4e5dc;--bubble-out:#b94f2b;--tech-filter:hue-rotate(155deg) saturate(1.3);
}
@media (prefers-color-scheme:dark){
  body[data-theme="intro"]{--tech-filter:none}
  body[data-theme="projects"]{
    --bg:#102321;--surface:#192f2d;--ink:#e3f2ef;--muted:#a0bcb6;--line:#34514d;
    --accent:#62cdbc;--bubble-in:#223b37;--bubble-out:#236b60;--tech-filter:hue-rotate(-35deg) saturate(1.25);
  }
  body[data-theme="experience"]{
    --bg:#201a30;--surface:#2a233a;--ink:#eee9f8;--muted:#b7abc9;--line:#46395d;
    --accent:#b59aea;--bubble-in:#372e49;--bubble-out:#69529a;--tech-filter:hue-rotate(55deg) saturate(1.2);
  }
  body[data-theme="contact"]{
    --bg:#2b1c19;--surface:#382622;--ink:#f6eae4;--muted:#c7a99c;--line:#594038;
    --accent:#f08b67;--bubble-in:#49312a;--bubble-out:#a1482e;--tech-filter:hue-rotate(155deg) saturate(1.2);
  }
}
.tech-backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.tech-layer{position:absolute;inset:-70vh 0;background-repeat:repeat-y;will-change:transform;transform:translate3d(0,var(--parallax-y,0),0);filter:var(--tech-filter,none);transition:filter .7s ease,opacity .7s ease}
.tech-network{background-image:url("images/tech-network.svg");background-position:top right;background-size:min(88vw,900px) auto;opacity:.32}
.tech-devices{background-image:url("images/tech-devices.svg");background-position:top left;background-size:min(92vw,1000px) auto;opacity:.27}
.tech-circuits{background-image:url("images/tech-circuits.svg");background-position:top center;background-size:min(72vw,760px) auto;opacity:.23}
header.hero,main,footer{position:relative;z-index:1}
a{color:var(--accent);text-underline-offset:.2em;transition:color .55s ease}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(880px,100% - 2rem);margin-inline:auto}
section{padding-block:clamp(2.25rem,6vw,4rem);border-top:3px solid var(--accent);transition:border-color .55s ease}
header.hero{padding-block:clamp(2rem,7vw,4.5rem) clamp(2rem,5vw,3.5rem)}
h1,h2{font-family:var(--display);font-weight:600;line-height:1.15;margin:0}
h1{font-size:clamp(1.9rem,6vw,3.1rem);letter-spacing:-.02em}
h2{font-size:clamp(1.35rem,3.6vw,1.8rem);margin-bottom:1.5rem}
h3{font-size:1.0625rem;font-weight:600;margin:2rem 0 .25rem;color:var(--muted)}
.lead{margin:.9rem 0 2rem;font-size:1.2rem;color:var(--muted);max-width:34em}

/* диалог с ботом */
.chat{background:var(--surface);border:1px solid var(--line);border-radius:20px;max-width:520px;overflow:hidden;transition:background-color .55s ease,border-color .55s ease}
.chat-head{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.95rem;transition:background-color .55s ease}
.chat-head b{display:block;line-height:1.2}
.chat-head span{font-size:.875rem;color:var(--muted)}
.chat-body{display:flex;flex-direction:column;gap:.5rem;padding:1rem}
.msg{max-width:85%;padding:.55rem .85rem;border-radius:16px;animation:pop .4s ease backwards;animation-delay:var(--d,0s)}
.msg-first{--d:.2s}
.msg-second{--d:1s}
.msg-third{--d:1.9s}
.route-command:not([hidden]),.route-status:not([hidden]){animation:pop .25s ease both}
.route-status:not([hidden]){--d:0s}
.msg.in{background:var(--bubble-in);border-bottom-left-radius:5px;align-self:flex-start;transition:background-color .55s ease}
.msg.out{background:var(--bubble-out);color:var(--bubble-out-ink);border-bottom-right-radius:5px;align-self:flex-end;transition:background-color .55s ease}
.keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;animation:pop .4s ease backwards;animation-delay:2.9s}
.keys a{display:block;text-align:center;padding:.6rem .35rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);text-decoration:none;font-weight:500;font-size:.875rem;transition:background-color .55s ease,border-color .55s ease,color .55s ease}
.keys a:hover{border-color:var(--accent);color:var(--accent)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .msg,.keys{animation:none}
  .tech-layer{transform:none;will-change:auto}
  body,.tech-layer,section{transition:none}
  html{scroll-behavior:auto}
}

/* проекты */
.project-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);align-items:start}
.project-group{min-width:0}
.project-group h3{margin-top:0}
.project{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.project:last-child{border-bottom:0}
.project h4{margin:0;font-size:1.15rem;font-weight:600}
.project p{margin:.35rem 0 0;max-width:42em}
.project-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:.65rem;margin-top:.85rem}
.project-shot{min-width:0;margin:0}
.project-shot a{display:grid;place-items:center;min-height:180px;padding:.35rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.project-shot img{display:block;width:100%;height:220px;object-fit:contain}
.project-shot figcaption{margin-top:.25rem;color:var(--muted);font-size:.8rem;line-height:1.35}
.project .stack{color:var(--muted);font-size:.95rem}
.project .links{margin-top:.4rem;font-size:.95rem}
.project .links a+a{margin-left:1rem}
.portfolio-button{display:inline-block;padding:.35rem .7rem;border:1px solid var(--accent);border-radius:8px;text-decoration:none;font-weight:500}
.portfolio-button:hover{background:var(--accent);color:var(--bubble-out-ink)}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.portfolio-item{min-width:0}
.portfolio-item h3{margin-top:0;color:var(--ink)}
.portfolio-item .project-gallery{scroll-margin-top:1.5rem}

/* опыт и навыки */
.job h3{margin-top:0;color:var(--ink);font-size:1.15rem}
.job p{margin:.4rem 0 0;max-width:42em}
dl.skills{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;column-gap:2rem;row-gap:.9rem;margin:0}
dl.skills dt{font-weight:600}
dl.skills dd{margin:0;color:var(--muted)}
dl.skills.skills-spaced{margin-top:2rem}
@media (max-width:620px){
  .project-columns{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  dl.skills{grid-template-columns:1fr;column-gap:0;row-gap:.15rem}
  dl.skills dd{margin-bottom:.8rem}
  .keys{grid-template-columns:1fr}
  .tech-network{background-size:120vw auto;opacity:.28}
  .tech-devices{background-size:125vw auto;opacity:.23}
  .tech-circuits{background-size:105vw auto;opacity:.2}
}
@media (min-width:621px) and (max-width:760px){
  .project-columns{grid-template-columns:1fr}
}

/* контакты */
#contact{padding-block:clamp(1.5rem,3vw,2.25rem)}
#contact h2{margin-bottom:.75rem}
.contact-main{font-family:var(--display);font-size:clamp(1.3rem,4vw,1.9rem);font-weight:500;display:inline-block;margin-bottom:.75rem}
.contact-list{list-style:none;padding:0;margin:0 0 .75rem;display:flex;flex-wrap:wrap;gap:.25rem 1rem}
#contact p{margin:.25rem 0 0}
footer{padding-block:1.5rem 3rem;color:var(--muted);font-size:.95rem}