* { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: dark; --bg:#101713; --surface:#18221c; --card:#202d24; --text:#f5f8f3; --muted:#b4c2b7; --accent:#c3ee91; --button-text:#183018; --line:#617569; --header:#101713f5; --hover:#2c3c31; --shadow:0 8px 24px #0002; }
body[data-theme="light"] { color-scheme:light; --bg:#f4f6ef; --surface:#e8eedf; --card:#fff; --text:#1c3025; --muted:#526458; --accent:#315f3e; --button-text:#fff; --line:#a4b5a6; --header:#f4f6eff5; --hover:#edf3e7; --shadow:0 8px 24px #1830180b; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--site-header-height, 90px) + 20px); }
body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:4px; }
button { font:inherit; }
a,button,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.container { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:fixed; top:10px; left:20px; z-index:100; padding:12px 20px; background:var(--accent); color:var(--button-text); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.header { position:sticky; top:0; z-index:20; background:var(--header); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.header-content { min-height:88px; display:flex; align-items:center; gap:22px; }
.logo { margin-right:auto; font-size:15px; font-weight:700; text-decoration:none; line-height:1.3; }
.logo > span:not(.logo-dot) { display:block; }
.logo-dot { display:none; }
.header-nav { display:flex; flex-wrap:wrap; gap:6px; }
.header-nav a { padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; text-decoration:underline; }
.header-nav a:hover { background:var(--hover); }
.header-nav a:last-child { background:var(--accent); color:var(--button-text); text-decoration:none; }
.theme-selector { display:flex; gap:2px; border:0; background:transparent; border-radius:8px; padding:0; }
.theme-option { border:0; background:transparent; color:var(--muted); min-height:32px; padding:5px 7px; font-size:11px; font-weight:400; border-radius:6px; cursor:pointer; }
.theme-option:hover { background:var(--hover); }
.theme-option[aria-pressed="true"] { background:var(--hover); color:var(--text); font-weight:600; }
.section { padding-block:80px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
h1,h2 { font-weight:650; line-height:1.12; letter-spacing:-.045em; }
h2 { font-size:clamp(32px,4vw,46px); margin-top:12px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:28px; }
.pill,.button-secondary { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:12px 20px; border:1px solid var(--accent); border-radius:10px; font-size:14px; font-weight:650; text-decoration:none; transition:transform .18s,background .18s,box-shadow .18s; }
.pill { background:var(--accent); color:var(--button-text); box-shadow:0 3px 0 #0002; }
.button-secondary { background:var(--card); color:var(--text); border-color:var(--line); }
.pill:hover,.button-secondary:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.button-secondary:hover { background:var(--hover); border-color:var(--accent); }
.pill:active,.button-secondary:active { transform:translateY(1px); }
.text-link { font-size:14px; font-weight:600; text-decoration:underline; padding-block:8px; }
.text-link:hover { color:var(--accent); }
.credentials { display:grid; grid-template-columns:1fr 1fr 1.2fr; padding-top:28px; border-top:1px solid var(--line); gap:28px; }
.credentials p { margin-top:10px; color:var(--muted); font-size:14px; }
.credentials a { color:var(--text); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:32px; }
.section-description { max-width:320px; font-size:15px; color:var(--muted); }
.social-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.social-link { display:grid; grid-template-columns:44px 1fr; gap:16px; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); text-decoration:none; box-shadow:var(--shadow); transition:background .18s,transform .18s,border-color .18s; }
.social-link:hover { transform:translateY(-4px); border-color:var(--accent); background:var(--hover); }
.platform-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--surface); color:var(--accent); font-size:22px; font-weight:700; }
.link-label { font-size:20px; font-weight:650; line-height:1.4; }
.link-label > span { display:block; margin-top:5px; color:var(--muted); font-size:13px; font-weight:400; }
.youtube-section { background:var(--surface); }
.youtube-embed { aspect-ratio:16 / 9; background:#0c110e; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.youtube-embed iframe { display:block; width:100%; height:100%; border:0; }
.media-caption { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:20px; }
.resume-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.resume-bar p { font-size:22px; font-weight:600; margin-top:8px; }
.resume-actions { display:flex; flex-wrap:wrap; gap:12px; }
.cv-preview { margin-top:16px; border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }
.cv-preview summary { cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:18px 24px; font-size:14px; font-weight:600; list-style:none; text-decoration:underline; text-underline-offset:4px; }
.cv-preview summary::-webkit-details-marker { display:none; }
.cv-preview summary:hover { background:var(--hover); }
.cv-preview summary span { font-size:20px; line-height:1; }
.cv-preview[open] summary span { transform:rotate(45deg); }
.cv-embed iframe { display:block; width:100%; height:min(1000px,80vh); border:0; background:white; }
.footer { padding-block:64px 28px; background:var(--surface); }
.footer-description { color:var(--muted); margin-top:16px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
@media (max-width:1000px) {
 .header-content { flex-wrap:wrap; gap:16px; padding-block:14px; }
 .header-nav { order:3; width:100%; justify-content:space-between; }
 .social-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .resume-bar { align-items:start; flex-direction:column; }
}
@media (max-width:600px) {
 .container { width:calc(100% - 36px); }
 .section { padding-block:56px; }
 .header-nav { gap:2px; }
 .header-nav a { font-size:12px; padding:8px 7px; }
 .logo { font-size:13px; }
 .theme-option { padding-inline:8px; }
 .hero-actions > a { flex:1 1 200px; }
 .credentials { grid-template-columns:1fr; gap:22px; }
 .credentials p br { display:none; }
 .section-heading { flex-direction:column; align-items:start; gap:16px; }
 .social-grid { grid-template-columns:1fr; gap:12px; }
 .social-link { grid-template-columns:44px minmax(0,1fr); align-items:center; padding:20px; }
 .media-caption { flex-wrap:wrap; }
 .resume-bar { padding:22px; }
 .resume-actions { width:100%; }
 .resume-actions > a { flex:1 1 180px; }
 .footer-bottom p { width:100%; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }

/* Brand marks stay legible in both themes; service names remain visible if the CDN is unavailable. */
.platform-icon { flex-shrink: 0; background: #fff; }
.platform-icon img { display: block; width: 28px; height: 28px; object-fit: contain; }
/* Apply brand colors to the externally hosted monochrome SVGs. */
.platform-icon--youtube img,
.scroll-film__skip img { filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(359deg) brightness(99%) contrast(114%); }
.platform-icon--linkedin img,
.intro-profile img { filter: invert(29%) sepia(96%) saturate(1249%) hue-rotate(179deg) brightness(89%) contrast(100%); }
.platform-icon--telegram img { filter: invert(50%) sepia(96%) saturate(1285%) hue-rotate(163deg) brightness(95%) contrast(91%); }
.platform-icon--instagram { background: radial-gradient(circle at 30% 105%, #feda75 0%, #fa7e1e 28%, #d62976 55%, #962fbf 78%, #4f5bd5 100%); }
.platform-icon--instagram img { filter: invert(1); }
.platform-icon--github { background: #24292f; }
.platform-icon--github img { filter: invert(1); }
.platform-icon--procreate { background: #111; overflow: hidden; }
.platform-icon--procreate img { width: 44px; height: 44px; border-radius: 12px; }

/* The introduction occupies the first screen; navigation enters with the next section. */
.hero.section {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding-block: 48px;
}
.intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.intro-avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.intro h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.08; overflow-wrap: anywhere; }
.intro-description { color: var(--muted); font-size: clamp(15px, 2vw, 18px); line-height: 1.7; }
.intro-profile img { border-radius: 3px; }
.resume-section .credentials { margin-bottom: 32px; }
@media (max-width: 600px), (max-height: 700px) {
    .hero.section { padding-block: 32px; }
    .intro { gap: 20px; }
    .intro-avatar { width: 120px; height: 120px; }
}

/* Facts use symbols with short labels; they are not interactive cards. */
.intro-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 840px);
    gap: 24px;
    list-style: none;
}
.intro-facts li { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.intro-facts li > svg { color: var(--accent); width: 26px; height: 26px; flex-shrink: 0; }
.intro-facts li > span { width: 100%; }
.intro-facts strong {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2.8em;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    text-wrap: balance;
}
.intro-facts li > span > span { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 6px; }
@media (max-width: 600px) {
    .intro-facts { grid-template-columns: 1fr; width: min(100%, 300px); gap: 18px; text-align: left; }
    .intro-facts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 14px; }
    .intro-facts strong { display: block; min-height: 0; }
    .intro-facts li > span > span { margin-top: 3px; }
}
/* Reserve space for the animated scroll control, including on short screens. */
.hero.section { position: relative; padding-bottom: 116px; }
.intro-scroll {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 56px;
    height: 72px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 28px;
}
.intro-scroll:hover { color: var(--accent); border-color: var(--line); background: var(--surface); }
.scroll-cue__wheel { animation: scroll-wheel 2.4s ease-in-out infinite; }
.scroll-cue__chevron { animation: scroll-chevron 2.4s ease-in-out infinite; }
.scroll-cue__chevron--second { animation-delay: .2s; }
@keyframes scroll-wheel {
    0%, 15% { transform: translateY(0); opacity: 1; }
    65% { transform: translateY(10px); opacity: 0; }
    66% { transform: translateY(0); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes scroll-chevron {
    0%, 100% { transform: translateY(0); opacity: .35; }
    50% { transform: translateY(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue__wheel, .scroll-cue__chevron { animation: none; }
}

.site-settings { position: relative; flex-shrink: 0; }
.site-settings > summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--muted); cursor: pointer; list-style: none; }
.site-settings > summary::-webkit-details-marker { display: none; }
.site-settings > summary:hover, .site-settings[open] > summary { color: var(--text); background: var(--hover); }
.settings-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 216px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.settings-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.settings-panel .theme-option { flex: 1; min-height: 40px; font-size: 12px; }

.footer .site-settings { width: max-content; margin: 16px 0 0 auto; }
.footer .settings-panel { top: auto; bottom: calc(100% + 10px); }