/* The original dark design and its light counterpart share the same geometry. */
:root {
  color-scheme: light;
    --bg: #f5f4ee;
    --text: #1b2028;
    --glow: #e2e6e5;
    --line: #1b202824;
    --secondary: #60676b;
    --role: #5a626b;
    --eyebrow: #5d6468;
    --punctuation: #656b6f;
    --description: #586168;
    --contact-line: #1b20282b;
    --contact-bg: #ffffff50;
    --telegram-bg: #1b2028;
    --telegram-text: #f7f7f5;
    --detail: #5c666c;
    --telegram-detail: #c7cdd2;
    --arrow: #606a70;
    --telegram-arrow: #c7cdd2;
    --contact-hover: #ffffff90;
    --contact-hover-line: #1b202866;
    --telegram-hover: #303841;
    --focus: #2c50d5;
    --footer: #586168;
    --panel: #fffefa;
    --panel-hover: #e9eae5;
    --panel-shadow: #17202918;
}
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101112;
    --text: #f7f7f5;
    --glow: #25282a;
    --line: #ffffff17;
    --secondary: #929596;
    --role: #c0c3c4;
    --eyebrow: #9c9fa1;
    --punctuation: #b9bfc2;
    --description: #b6b9bd;
    --contact-line: #ffffff24;
    --contact-bg: #ffffff04;
    --telegram-bg: #f0f1ef;
    --telegram-text: #161819;
    --detail: #a7acaf;
    --telegram-detail: #555d61;
    --arrow: #8e969a;
    --telegram-arrow: #70797e;
    --contact-hover: #ffffff0d;
    --contact-hover-line: #ffffff60;
    --telegram-hover: #fff;
    --focus: #84c5ff;
    --footer: #909699;
    --panel: #1b1e20;
    --panel-hover: #292d30;
    --panel-shadow: #00000040;
  }
}
/* No-JS fallback: keep these values in sync with the explicit dark palette. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #101112;
    --text: #f7f7f5;
    --glow: #25282a;
    --line: #ffffff17;
    --secondary: #929596;
    --role: #c0c3c4;
    --eyebrow: #9c9fa1;
    --punctuation: #b9bfc2;
    --description: #b6b9bd;
    --contact-line: #ffffff24;
    --contact-bg: #ffffff04;
    --telegram-bg: #f0f1ef;
    --telegram-text: #161819;
    --detail: #a7acaf;
    --telegram-detail: #555d61;
    --arrow: #8e969a;
    --telegram-arrow: #70797e;
    --contact-hover: #ffffff0d;
    --contact-hover-line: #ffffff60;
    --telegram-hover: #fff;
    --focus: #84c5ff;
    --footer: #909699;
    --panel: #1b1e20;
    --panel-hover: #292d30;
    --panel-shadow: #00000040;
  }
}
*{box-sizing:border-box}
html{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
body{margin:0;background:radial-gradient(ellipse at 82% 47%,var(--glow) 0,transparent 53%);min-height:100svh}
a{color:inherit;text-decoration:none}
.page{max-width:1280px;margin:auto;padding:0 64px}
header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.wordmark{font-size:24px;font-weight:700;letter-spacing:-1px}
.wordmark span{color:var(--secondary)}
.role{font-size:14px;letter-spacing:.05em;color:var(--role)}
main{position:relative;min-height:710px;display:grid;grid-template-columns:1fr 1fr;align-items:center;isolation:isolate}
.intro{padding:64px 0 76px;z-index:2}
.eyebrow{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);margin:0 0 28px}
h1{font-size:clamp(72px,8vw,108px);line-height:1.06;letter-spacing:-.065em;font-weight:600;margin:0 0 25px}
.punctuation{color:var(--punctuation)}
.name{font-size:32px;line-height:1.35;letter-spacing:-.035em;margin:0 0 20px}
.name strong{font-weight:600}
.description{font-size:17px;line-height:1.7;color:var(--description);margin:0 0 32px}
.smile{white-space:nowrap}
.contacts{display:flex;flex-wrap:wrap;gap:10px;max-width:460px}
.contact{display:flex;align-items:center;gap:12px;min-height:76px;padding:15px 18px;border:1px solid var(--contact-line);border-radius:12px;background:var(--contact-bg);flex:1 1 190px;transition:background .18s,border-color .18s,transform .18s}
.contact.telegram{flex-basis:100%;background:var(--telegram-bg);color:var(--telegram-text);border-color:var(--telegram-bg)}
.contact svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.contact span{font-size:16px}
.contact small{display:block;font-size:13px;line-height:1.6;color:var(--detail);margin-top:3px}
.telegram small{color:var(--telegram-detail)}
.contact .arrow{margin-left:auto;color:var(--arrow);font-size:22px}
.contact:not(:disabled):hover{background:var(--contact-hover);border-color:var(--contact-hover-line);transform:translateY(-2px)}
.contact.telegram:not(:disabled):hover{background:var(--telegram-hover)}
.contact:focus-visible,.wordmark:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.portrait{align-self:end;position:relative;min-width:0;margin-left:-35px;margin-right:-20px;z-index:0}
.portrait img{display:block;width:100%;height:auto;max-height:770px;object-fit:contain;object-position:bottom}
.portrait:after{content:"";position:absolute;inset:75% 0 0;background:linear-gradient(transparent,var(--bg));pointer-events:none}
footer{display:flex;justify-content:space-between;padding:25px 0 30px;border-top:1px solid var(--line);font-size:13px;color:var(--footer);position:relative;z-index:2}
@media(min-width:1500px){main{min-height:calc(100svh - 183px)}
}
@media(max-width:1000px){.page{padding:0 32px}
.contacts{max-width:390px}
.contact{flex-basis:100%}
.portrait{margin-left:-70px;margin-right:-20px;align-self:center}
.intro{padding-top:48px}
.name{font-size:28px}
}
@media(max-width:650px){.page{padding:0 24px}
header{height:80px}
.wordmark{font-size:22px}
main{display:flex;flex-direction:column;min-height:0;align-items:stretch}
.intro{padding:46px 0 0}
.eyebrow{font-size:12px;margin-bottom:22px}
h1{font-size:76px;margin-bottom:24px}
.name{font-size:28px}
.description{font-size:16px;margin-bottom:25px}
.contacts{max-width:none;gap:9px}
.contact{min-height:69px;padding:12px 16px}
.portrait{align-self:center;margin:25px -12px 0;width:min(100% + 24px,450px)}
.portrait img{max-height:550px}
.portrait:after{inset:83% 0 0}
footer{padding:22px 0;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.contact{transition:none}
.contact:not(:disabled):hover{transform:none}
}

/* Shared controls, preserving the existing contact cards. */
button, input { font: inherit; }
button { color: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
header { position: relative; z-index: 3; gap: 20px; }
.contact { min-width: 0; text-align: left; font: inherit; cursor: pointer; }
.contact:disabled { cursor: default; }
.contact > span:not(.arrow) { min-width: 0; }
.contact small { overflow-wrap: anywhere; }
.telegram .arrow { color: var(--telegram-arrow); }
.contact-help { max-width: 460px; color: var(--description); font-size: 14px; line-height: 1.6; }
.theme-control { position: relative; flex: 0 0 64px; height: 44px; }
.theme-toggle { min-width: 64px; min-height: 44px; padding: 8px; border: 1px solid var(--contact-line); border-radius: 8px; background: var(--contact-bg); font-size: 14px; cursor: pointer; }
.theme-toggle:hover, .theme-toggle[aria-expanded="true"] { background: var(--contact-hover); border-color: var(--contact-hover-line); }
.theme-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 230px; max-width: calc(100vw - 48px); max-height: calc(100svh - 100px); overflow-y: auto; padding: 16px; border: 1px solid var(--contact-line); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 28px var(--panel-shadow); }
.theme-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.theme-options legend { padding: 0 0 8px; color: var(--description); font-size: 12px; }
.theme-options label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.theme-options label:hover { background: var(--panel-hover); }
.theme-options input { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; accent-color: var(--focus); }
.theme-options label:focus-within { outline: 3px solid var(--focus); outline-offset: 0; }
.theme-options input:focus-visible { outline: none; }