@font-face {font-family:'PT Root UI'; src:url('font/PT-Root-UI_Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap}
 @font-face {font-family:'PT Root UI'; src:url('font/PT-Root-UI_Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap}
 @font-face {font-family:'PT Root UI'; src:url('font/PT-Root-UI_Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap}
 @font-face {font-family:'PT Root UI'; src:url('font/PT-Root-UI_Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap}
:root {--bg:#ffffff; --surface:#f5f5f5; --surface-2:#efefef; --text:#0a0a0a; --muted:#aaaaaa; --white:#ffffff; --blue:#2d7dff; --blue-soft:#ebf2ff; --green:#22c55e; --tag-bg:#e3e3e3; --border:rgba(0,0,0,0.07); --font:'PT Root UI',system-ui,sans-serif; --mono:'PT Root UI',system-ui,sans-serif; --r-card:18px; --r-pill:999px; --r-sm:10px; --c-max:760px; --nav-progress-h:3px; --anchor-offset:calc(var(--nav-progress-h) + 58px + 10px)}
 @media (max-width:640px) {:root {--anchor-offset:calc(var(--nav-progress-h) + 52px + 8px)}
 }
 *,*::before,*::after {box-sizing:border-box; margin:0; padding:0}
 html {scroll-behavior:smooth}
 body {font-family:var(--font); font-size:20px; line-height:1.3; letter-spacing:-0.6px; font-weight:500; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased}
 a {color:inherit}
 b,strong {font-weight:500}
 ul,ol {list-style:none}
 img {max-width:100%; height:auto; image-rendering:auto}
 @supports (image-rendering:high-quality) {img {image-rendering:high-quality}
 }
 .wrap {max-width:var(--c-max); margin:0 auto; padding:0 20px}
 @media (min-width:640px) {.wrap {padding:0 24px}
 }
 .nav-wrap {position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
 .nav-progress {height:var(--nav-progress-h); width:100%; background:rgba(45,125,255,0.14); overflow:hidden}
 .nav-progress__fill {height:100%; width:0; background:#2d7dff; transform-origin:left center; will-change:width}
 .nav {display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; width:100%; max-width:none; margin:0; padding:10px 24px; min-height:58px}
 .nav__brand {display:flex; align-items:center; text-decoration:none; color:inherit; flex-shrink:0; min-width:0; transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1),visibility 0.4s,transform 0.4s cubic-bezier(0.16,1,0.3,1)}
 .nav__status {display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; line-height:1; color:#19c401; white-space:nowrap; min-width:0}
 .status-dot {display:block; width:7px; height:7px; border-radius:50%; background:#19c401; flex-shrink:0; transform:translateY(0.06em)}
 .nav__status-label {min-width:0; line-height:1.25}
 .nav__links {display:flex; align-items:center; justify-content:center; gap:2px 14px; flex-wrap:wrap}
 .nav__links a {font-size:16px; font-weight:500; color:var(--text); text-decoration:none; padding:5px 4px; transition:color 0.2s ease; white-space:nowrap}
 .nav__links a:hover {color:#2779ff}
 .nav__actions {display:flex; align-items:center; gap:8px; flex-shrink:0; transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1),visibility 0.4s,transform 0.4s cubic-bezier(0.16,1,0.3,1)}
 .nav-wrap--hero-cta-visible .nav__brand,.nav-wrap--hero-cta-visible .nav__actions {opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px)}
 @media (max-width:960px) {.nav__links {display:none}
 }
 @media (max-width:640px) {.nav-wrap .nav {padding:8px 14px; gap:10px; min-height:52px}
 .nav__status {max-width:min(100%,52vw)}
 .nav__status-label {overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
 }
 @media (max-width:480px) {.nav {grid-template-columns:1fr auto}
 .nav__links {display:none}
 .nav-wrap .nav {padding:8px 10px; gap:8px}
 .nav__actions {flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:min(100%,calc(100vw - 140px))}
 .nav__actions .btn--sm {padding:6px 10px; min-height:34px; font-size:0.7rem; white-space:nowrap}
 }
 @media (max-width:360px) {.nav-wrap .nav {grid-template-columns:1fr; grid-auto-rows:auto}
 .nav__brand {width:100%}
 .nav__status {max-width:none; white-space:normal; text-align:center; justify-content:center}
 .nav__status-label {white-space:normal}
 .nav__actions {width:100%; max-width:none; justify-content:stretch}
 .nav__actions .btn--sm {flex:1 1 auto; justify-content:center; min-width:0; font-size:0.65rem; padding:6px 8px}
 }
 .btn {display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:13px 26px; min-height:46px; font-family:inherit; font-size:1rem; font-weight:500; line-height:1.2; border-radius:var(--r-pill); cursor:pointer; text-decoration:none; border:none; transition:filter 0.25s ease,background 0.2s ease,opacity 0.2s ease}
 .btn:focus-visible {outline:none}
 .btn--sm {padding:8px 16px; min-height:36px; font-size:0.875rem}
 .btn--blue {background:var(--blue); color:var(--white)}
 .btn--blue:hover {filter:brightness(0.96)}
 .btn--soft {background:var(--surface); color:var(--text)}
 .btn--soft:hover {filter:brightness(0.96)}
 .btn--ghost {background:rgba(0,0,0,0.05); color:var(--text)}
 .btn--ghost:hover {background:rgba(0,0,0,0.09)}
 .btn--mail-soft {background:#e9f2ff; color:#2779ff}
 .btn--mail-soft:hover {filter:brightness(0.97)}
 .ti {width:1.125rem; height:1.125rem; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0}
 .ti svg {width:100%; height:100%; display:block}
 .portfolio-case-label {position:fixed; z-index:10001; left:0; top:0; pointer-events:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:13px 26px; min-height:46px; font-family:inherit; font-size:1rem; font-weight:500; line-height:1.2; border-radius:var(--r-pill); background:var(--blue); color:var(--white); white-space:nowrap; box-sizing:border-box; opacity:0; visibility:hidden; transform:translate(12px,12px); will-change:transform,opacity}
 .portfolio-case-label.is-visible {opacity:1; visibility:visible}
 #portfolio .wrap.stack article.card.portfolio-cursor-active {cursor:none}
 .card {background:var(--surface); border-radius:var(--r-card); padding:clamp(1.25rem,3.5vw,1.75rem); width:100%}
 section {padding:8px 0}
 .stack {display:flex; flex-direction:column; gap:14px}
 .hero {padding:60px 0 100px; text-align:center}
 .hero__photo-wrap {display:flex; justify-content:center; margin-bottom:22px}
 .hero__photo {width:min(180px,46vw); height:min(180px,46vw); border-radius:32px; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:500; color:var(--muted); object-fit:cover; overflow:hidden; padding:0}
 .hero__photo-img {width:100%; height:100%; object-fit:cover; object-position:center; display:block; image-rendering:auto}
 @supports (image-rendering:high-quality) {.hero__photo-img {image-rendering:high-quality}
 }
 .hero__greeting {font-size:28px; line-height:1; letter-spacing:-0.8px; color:var(--muted); margin-bottom:10px; font-weight:700}
 .hero__title {font-size:50px; font-weight:700; line-height:1; letter-spacing:-1.5px; color:var(--text); margin-bottom:16px}
 .hero__desc {font-size:20px; line-height:1.2; letter-spacing:-0.6px; color:#000; max-width:33rem; margin:0 auto 30px; font-weight:500}
 .hero__actions {display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
 .section-title {font-size:40px; font-weight:700; letter-spacing:-0.03em; line-height:1.2; color:var(--text); margin-bottom:10px}
 .section-lead {font-size:inherit; line-height:inherit; letter-spacing:inherit; color:var(--text); font-weight:500}
 .section-lead + .section-lead {margin-top:10px}
 .h3 {font-size:28px; font-weight:700; letter-spacing:-0.02em; line-height:1.3; color:var(--text)}
 .tags {display:flex; flex-wrap:wrap; gap:6px 8px}
 .tag {display:inline-flex; align-items:center; background:var(--tag-bg); color:var(--text); font-size:16px; font-weight:500; padding:5px 12px; border-radius:var(--r-pill); line-height:1.3}
 .tag--muted {color:#000}
 .badge {display:inline-flex; align-items:center; background:var(--tag-bg); color:var(--text); font-size:16px; font-weight:500; padding:5px 12px; border-radius:var(--r-pill); line-height:1.3}
 .project-date {font-family:var(--mono); font-size:16px; color:var(--muted); margin-bottom:4px; font-weight:500}
 .project-title {font-size:28px; font-weight:700; letter-spacing:-0.025em; line-height:1.28; color:var(--text); margin-bottom:14px}
 .project-body {font-size:inherit; line-height:inherit; letter-spacing:inherit; color:var(--text); font-weight:500; margin-bottom:18px}
 details summary {cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px}
 details summary::-webkit-details-marker {display:none}
 .accordion-summary-title {font-size:28px; font-weight:700; line-height:1.25; letter-spacing:-0.02em; color:var(--text)}
 .chevron {width:20px; height:20px; color:var(--muted); flex-shrink:0; transition:transform 0.4s cubic-bezier(0.22,1,0.36,1)}
 details[open] summary .chevron {transform:rotate(180deg)}
 details summary:focus-visible {outline:none}
 .details-body {margin-top:20px; display:flex; flex-direction:column; gap:18px}
 .detail-title {font-size:28px; font-weight:700; line-height:1.25; letter-spacing:-0.02em; color:var(--text); margin-bottom:8px}
 .detail-text {font-size:inherit; line-height:inherit; letter-spacing:inherit; color:var(--text); font-weight:500}
 .exp-stack {display:flex; flex-direction:column; gap:34px}
 .exp-title {font-size:28px; font-weight:700; letter-spacing:-0.02em; color:var(--text); margin-bottom:8px}
 .exp-meta {display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px}
 .exp-dates {font-family:var(--mono); font-size:16px; color:var(--muted); font-weight:500}
 .exp-body {font-size:inherit; line-height:inherit; letter-spacing:inherit; color:var(--text); font-weight:500}
 .exp-body + .exp-body {margin-top:10px}
 .bullets {list-style:none}
 .bullets li {position:relative; padding-left:1.25rem; font-size:inherit; line-height:inherit; letter-spacing:inherit; color:var(--text); font-weight:500; margin-bottom:6px}
 .bullets li::before {content:''; position:absolute; left:0; top:0.58em; width:5px; height:5px; border-radius:50%; background:var(--text)}
 .bullets--sm li {font-size:inherit; margin-bottom:5px}
 .skills-group {margin-bottom:22px}
 .skills-group:last-child {margin-bottom:0}
 .skills-group__label {display:inline-flex; align-items:center; background:var(--tag-bg); color:#000; font-size:16px; font-weight:500; padding:5px 12px; border-radius:var(--r-pill); margin-bottom:14px}
 .skills-list {list-style:none}
 .skills-list li {position:relative; padding-left:1.25rem; font-size:inherit; line-height:inherit; letter-spacing:inherit; color:var(--text); font-weight:500; padding-top:3px; padding-bottom:3px}
 .skills-list li::before {content:''; position:absolute; left:0; top:0.65em; width:5px; height:5px; border-radius:50%; background:var(--text)}
 .edu-group {display:flex; flex-direction:column; gap:26px}
 .edu-period {margin-bottom:10px}
 .lang-item {font-size:inherit; line-height:inherit; letter-spacing:inherit; font-weight:500}
 .lang-item + .lang-item {margin-top:6px}
 .contact-section {text-align:left; padding:48px 0 32px}
 .contact-section .card {background:#2779ff; color:#fff}
 .contact-title {font-size:40px; font-weight:700; letter-spacing:-0.03em; color:#fff; margin-bottom:12px}
 .contact-lead {font-size:16px; line-height:1.35; letter-spacing:inherit; color:rgba(255,255,255,0.92); max-width:26rem; margin:0 0 24px; font-weight:500}
 .contact-actions {display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap}
 .contact-section .contact-actions .btn--blue,.contact-section .contact-actions .btn--ghost {background:#fff; color:#2779ff}
 .contact-section .contact-actions .btn--blue:hover,.contact-section .contact-actions .btn--ghost:hover {filter:brightness(0.97); background:#fff}
 .card {transition:box-shadow 0.35s cubic-bezier(0.16,1,0.3,1),transform 0.35s cubic-bezier(0.16,1,0.3,1)}
 .btn {transition:filter 0.22s ease,background 0.2s ease,opacity 0.2s ease,transform 0.15s cubic-bezier(0.16,1,0.3,1),box-shadow 0.2s ease}
 .btn:active {transform:scale(0.965)}
 .tag,.badge {transition:background 0.2s ease,transform 0.2s cubic-bezier(0.16,1,0.3,1); cursor:default}
 @media (hover:hover) {.tag:hover,.badge:hover {background:#d5d5d5}
 }
 @keyframes statusPulse {0%,100% {box-shadow:0 0 0 0 rgba(25,196,1,0.5)}
 60% {box-shadow:0 0 0 5px rgba(25,196,1,0)}
 }
 .status-dot {animation:statusPulse 2.4s cubic-bezier(0.4,0,0.6,1) infinite}
 .nav__links a {position:relative}
 .nav__links a::after {content:''; position:absolute; left:4px; right:4px; bottom:1px; height:2px; border-radius:2px; background:#2779ff; transform:scaleX(0); transform-origin:center; transition:transform 0.25s cubic-bezier(0.16,1,0.3,1)}
 .nav__links a:hover::after {transform:scaleX(1)}
 section[id],footer#contact {scroll-margin-top:var(--anchor-offset)}
 .btn,a {-webkit-tap-highlight-color:rgba(0,0,0,0)}
 .btn {touch-action:manipulation}
 @media (max-width:640px) {body {font-size:17px; letter-spacing:-0.4px}
 .hero {padding:40px 0 64px}
 .hero__greeting {font-size:20px; letter-spacing:-0.5px; margin-bottom:8px}
 .hero__title {font-size:40px; letter-spacing:-1.2px; margin-bottom:14px}
 .hero__desc {font-size:17px; margin-bottom:24px}
 .hero__desc br {display:none}
 .hero__actions {flex-direction:column; align-items:stretch}
 .hero__actions .btn {width:100%; justify-content:center}
 .section-title {font-size:30px; letter-spacing:-0.025em; line-height:1.15}
 .contact-title {font-size:30px; letter-spacing:-0.025em}
 .h3,.project-title,.exp-title,.detail-title,.accordion-summary-title {font-size:22px; letter-spacing:-0.02em}
 .contact-section {padding:32px 0 24px}
 .contact-actions {flex-direction:column; align-items:stretch}
 .contact-actions .btn {width:100%; justify-content:center}
 .exp-stack {gap:24px}
 .exp-meta {gap:6px 10px}
 section {padding:6px 0}
 }
 @media (max-width:480px) {body {font-size:16px}
 .hero {padding:32px 0 52px}
 .hero__title {font-size:34px; letter-spacing:-0.9px}
 .hero__greeting {font-size:18px}
 .hero__photo {border-radius:24px}
 .section-title {font-size:26px}
 .contact-title {font-size:26px}
 .h3,.project-title,.exp-title,.detail-title,.accordion-summary-title {font-size:20px}
 .card {border-radius:14px}
 .tag,.badge {font-size:14px; padding:4px 10px}
 .skills-group__label {font-size:14px; padding:4px 10px}
 }
 @media (max-width:360px) {.hero__title {font-size:30px}
 .hero__greeting {font-size:16px}
 .section-title {font-size:24px}
 .contact-title {font-size:24px}
 .h3,.project-title,.exp-title,.detail-title,.accordion-summary-title {font-size:18px}
 }
 @media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto}
 }
 .modal-overlay {position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); opacity:0; visibility:hidden; pointer-events:none; transition:background 0.35s ease,backdrop-filter 0.35s ease,-webkit-backdrop-filter 0.35s ease,opacity 0.35s ease,visibility 0.35s}
 .modal-overlay.is-open {background:rgba(0,0,0,0.38); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:1; visibility:visible; pointer-events:auto}
 .modal {background:var(--surface); border-radius:var(--r-card); width:100%; max-width:680px; max-height:min(88vh,820px); display:flex; flex-direction:column; overflow:hidden; transform:scale(0.94) translateY(14px); opacity:0; transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),opacity 0.35s ease; box-shadow:0 28px 80px rgba(0,0,0,0.14),0 4px 18px rgba(0,0,0,0.08)}
 .modal-overlay.is-open .modal {transform:scale(1) translateY(0); opacity:1}
 .modal__header {flex-shrink:0; padding:clamp(1.25rem,3.5vw,1.75rem); padding-bottom:20px; border-bottom:1.5px solid var(--border); position:relative; display:flex; flex-direction:column; gap:4px}
 .modal__close {position:absolute; top:clamp(1rem,3vw,1.5rem); right:clamp(1rem,3vw,1.5rem); width:36px; height:36px; border-radius:var(--r-pill); border:none; background:var(--surface-2); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.2s ease,transform 0.18s cubic-bezier(0.16,1,0.3,1)}
 .modal__close:hover {background:#e0e0e0}
 .modal__close:active {transform:scale(0.9)}
 .modal__close svg {width:16px; height:16px; display:block}
 .modal__header-title {font-size:22px; font-weight:700; letter-spacing:-0.025em; line-height:1.28; color:var(--text); padding-right:52px}
 .modal__body {flex:1 1 auto; overflow-y:auto; padding:clamp(1.25rem,3.5vw,1.75rem); overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
 .modal__body::-webkit-scrollbar {width:4px}
 .modal__body::-webkit-scrollbar-track {background:transparent}
 .modal__body::-webkit-scrollbar-thumb {background:var(--tag-bg); border-radius:2px}
 .modal__block {margin-bottom:28px}
 .modal__block:last-child {margin-bottom:0}
 .modal__block-title {font-size:22px; font-weight:700; letter-spacing:-0.02em; line-height:1.25; color:var(--text); margin-bottom:12px}
 .modal__text {font-size:inherit; line-height:inherit; letter-spacing:inherit; color:var(--text); font-weight:500}
 .modal__text + .modal__text {margin-top:10px}
 .modal__bullets {list-style:none; margin-top:10px}
 .modal__bullets li {position:relative; padding-left:1.25rem; font-size:inherit; line-height:inherit; letter-spacing:inherit; color:var(--text); font-weight:500; margin-bottom:6px}
 .modal__bullets li::before {content:''; position:absolute; left:0; top:0.58em; width:5px; height:5px; border-radius:50%; background:var(--text)}
 .modal__visuals {margin-top:20px; margin-bottom:20px; display:grid; gap:10px}
 .modal__visuals--feature {grid-template-columns:repeat(2,minmax(0,1fr))}
 .modal__visuals--feature .modal__visual:last-child:nth-child(odd) {grid-column:1 / -1}
 .modal__visuals--dense {gap:8px}
 .modal__visual {margin:0; border-radius:12px}
 .modal__visual img {width:100%; height:auto; display:block; border-radius:6px; image-rendering:auto}
 @supports (image-rendering:high-quality) {.modal__visual img {image-rendering:high-quality}
 }
 .modal__caption {margin:0; padding:9px 2px 10px; font-size:16px; line-height:inherit; letter-spacing:inherit; color:var(--text); font-weight:500}
 @media (max-width:640px) {.modal-overlay {padding:12px; align-items:flex-end}
 .modal__visuals--two-col {grid-template-columns:1fr}
 .modal {max-height:90vh; border-radius:20px 20px 16px 16px}
 }
 @media (max-width:480px) {.modal {max-height:92vh}
 .modal__header-title {font-size:20px}
 .modal__block-title {font-size:20px}
 }
 #page-skeleton {position:fixed; inset:0; z-index:9999; background:var(--bg); overflow:hidden; will-change:opacity; transition:opacity 0.45s ease}
 #page-skeleton.sk-fade-out {opacity:0; pointer-events:none}
 @keyframes sk-shimmer {0% {background-position:-700px 0}
 100% {background-position:700px 0}
 }
 .sk-shimmer {background:linear-gradient(90deg,#eeeeee 0,#e4e4e4 45%,#eeeeee 100% ); background-size:1400px 100%; animation:sk-shimmer 1.6s ease-in-out infinite}
 .sk-nav {display:flex; align-items:center; gap:16px; padding:10px 24px; min-height:61px; border-bottom:1px solid rgba(0,0,0,0.06)}
 .sk-nav-brand {width:160px; height:18px; border-radius:999px; flex-shrink:0}
 .sk-nav-spacer {flex:1}
 .sk-nav-btn {width:148px; height:36px; border-radius:999px; flex-shrink:0}
 .sk-hero {display:flex; flex-direction:column; align-items:center; padding:60px 20px 0}
 .sk-photo {width:min(180px,46vw); height:min(180px,46vw); border-radius:32px; margin-bottom:22px; flex-shrink:0}
 .sk-line {flex-shrink:0; border-radius:8px}
 .sk-greeting {width:222px; height:22px; margin-bottom:14px}
 .sk-title-1 {width:272px; height:52px; margin-bottom:6px}
 .sk-title-2 {width:210px; height:52px; margin-bottom:20px}
 .sk-desc-1 {width:390px; max-width:88vw; height:18px; margin-bottom:8px}
 .sk-desc-2 {width:310px; max-width:80vw; height:18px; margin-bottom:30px}
 .sk-actions {display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
 .sk-btn-1 {width:198px; height:46px; border-radius:999px}
 .sk-btn-2 {width:176px; height:46px; border-radius:999px}
 @media (max-width:640px) {.sk-hero {padding-top:40px}
 .sk-title-1 {width:220px; height:42px}
 .sk-title-2 {width:168px; height:42px}
 .sk-greeting {width:180px; height:18px}
 }
 @media (max-width:480px) {.sk-hero {padding-top:32px}
 .sk-nav {padding:8px 10px}
 .sk-nav-brand {width:110px}
 .sk-nav-btn {width:116px}
 .sk-title-1 {width:190px; height:36px}
 .sk-title-2 {width:148px; height:36px}
 .sk-greeting {width:150px; height:16px}
 .sk-actions {flex-direction:column; align-items:stretch; width:100%; max-width:340px}
 .sk-btn-1,.sk-btn-2 {width:100%}
 }
 @media (max-width:360px) {.sk-title-1 {width:160px; height:32px}
 .sk-title-2 {width:126px; height:32px}
 }
 /* ===== Portfolio card icons (Lucide/Tabler) ===== */
 .project-meta {display:flex; align-items:center; gap:12px; margin-bottom:8px}
 .project-meta .project-date {margin-bottom:0}
 .project-icon {width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:13px; transition:transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease, filter 0.4s ease; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.55), 0 4px 12px -6px rgba(15,23,42,0.18); position:relative}
 .project-icon svg {width:22px; height:22px; display:block}
 .card[data-opens-modal]:hover .project-icon {transform:scale(1.1) rotate(-6deg); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.85), 0 12px 26px -10px rgba(39,121,255,0.4); filter:saturate(1.1)}
 .project-icon--pink {background:linear-gradient(135deg,#ffd6e3,#fff0f6); color:#d3447d}
 .project-icon--purple {background:linear-gradient(135deg,#e6dcf8,#f5ecff); color:#7c3aed}
 .project-icon--rose {background:linear-gradient(135deg,#ffe0cb,#ffeee2); color:#dc6735}
 .project-icon--mint {background:linear-gradient(135deg,#ccf2de,#e3f9ee); color:#0a9b67}
 .project-icon--blue {background:linear-gradient(135deg,#d1e2ff,#e9f1ff); color:#2563eb}
 .project-icon--amber {background:linear-gradient(135deg,#ffe7ad,#fff5cf); color:#c46a0c}
 .project-icon--slate {background:linear-gradient(135deg,#d2dbed,#e8eef9); color:#3f4f6b}
 .project-icon--magenta {background:linear-gradient(135deg,#fbd6e4,#e0d6ff); color:#a23898}
 .project-icon--cyan {background:linear-gradient(135deg,#bfedff,#dcf8ff); color:#0891b2}
 /* ===== Soft glow inside cards ===== */
 #portfolio .card[data-opens-modal] {position:relative; overflow:hidden; isolation:isolate}
 #portfolio .card[data-opens-modal]::after {content:''; position:absolute; top:-70px; right:-70px; width:200px; height:200px; background:radial-gradient(circle, rgba(39,121,255,0.12) 0%, transparent 65%); border-radius:50%; opacity:0; transition:opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1); transform:scale(0.7); pointer-events:none; z-index:0}
 #portfolio .card[data-opens-modal]:hover::after {opacity:1; transform:scale(1)}
 #portfolio .card[data-opens-modal] > * {position:relative; z-index:1}
 /* ===== Floating sparkles in portfolio section ===== */
 #portfolio {position:relative; overflow:hidden}
 #portfolio > .wrap {position:relative; z-index:2}
 .portfolio-sparkle {position:absolute; pointer-events:none; opacity:0; animation:sparkleFloat 7s ease-in-out infinite; z-index:1; will-change:transform}
 .portfolio-sparkle--1 {top:6%; left:3%; width:42px; height:42px; color:#ff9fc1; animation-delay:0s}
 .portfolio-sparkle--2 {top:30%; right:4%; width:34px; height:34px; color:#9fb8ff; animation-delay:-2.2s}
 .portfolio-sparkle--3 {top:58%; left:4%; width:46px; height:46px; color:#c7a4ff; animation-delay:-4.1s}
 .portfolio-sparkle--4 {bottom:8%; right:5%; width:38px; height:38px; color:#ffc888; animation-delay:-5.8s}
 @keyframes sparkleFloat {0%,100% {transform:translateY(0) rotate(0deg); opacity:0.55} 50% {transform:translateY(-18px) rotate(14deg); opacity:0.85}}
 @media (max-width:900px) {.portfolio-sparkle {width:28px !important; height:28px !important; opacity:0.4}}
 @media (max-width:640px) {.portfolio-sparkle {display:none}}
 @media (prefers-reduced-motion:reduce) {.portfolio-sparkle {animation:none; opacity:0.5}}
 /* ===== Accent dot near "Портфолио" title ===== */
 #portfolio-heading {position:relative; display:inline-block; padding-right:42px}
 #portfolio-heading::after {content:''; position:absolute; top:18px; right:0; width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#ff9fc1,#9fb8ff 55%,#c7a4ff); box-shadow:0 0 0 5px #fff, 0 0 0 7px rgba(39,121,255,0.18); animation:accentPulse 3.4s ease-in-out infinite}
 @keyframes accentPulse {0%,100% {transform:scale(1)} 50% {transform:scale(1.18)}}
 @media (max-width:640px) {#portfolio-heading {padding-right:30px} #portfolio-heading::after {top:10px; width:14px; height:14px}}
 /* ===== Mobile tweaks for project meta ===== */
 @media (max-width:640px) {.project-icon {width:38px; height:38px; border-radius:11px} .project-icon svg {width:19px; height:19px}}
 /* ===== Portfolio card hover lift ===== */
 #portfolio .card[data-opens-modal] {transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease}
 #portfolio .card[data-opens-modal]:hover {transform:translateY(-3px); box-shadow:0 18px 38px -22px rgba(15,23,42,0.18), 0 4px 12px -8px rgba(15,23,42,0.08)}
 .card[data-opens-modal]:focus-visible {outline:2px solid #2779ff; outline-offset:3px; border-radius:var(--r-card)}
 /* ===== Resume timeline ===== */
 .exp-stack {position:relative; padding-left:32px}
 .exp-stack::before {content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; border-radius:1px; background:linear-gradient(to bottom,#d1e2ff 0%,#fbd6e4 32%,#e6dcf8 64%,#ccf2de 90%,transparent 100%)}
 .exp-stack > article {position:relative}
 .exp-stack > article::before {content:''; position:absolute; left:-32px; top:11px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2px #2779ff, 0 0 0 4px var(--surface); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1)}
 .exp-stack > article:nth-child(2)::before {box-shadow:inset 0 0 0 2px #d3447d, 0 0 0 4px var(--surface)}
 .exp-stack > article:nth-child(3)::before {box-shadow:inset 0 0 0 2px #7c3aed, 0 0 0 4px var(--surface)}
 .exp-stack > article:nth-child(4)::before {box-shadow:inset 0 0 0 2px #0a9b67, 0 0 0 4px var(--surface)}
 .exp-stack > article:nth-child(5)::before {box-shadow:inset 0 0 0 2px #c46a0c, 0 0 0 4px var(--surface)}
 .exp-stack > article:hover::before {transform:scale(1.25)}
 @media (max-width:640px) {.exp-stack {padding-left:24px} .exp-stack::before {left:5px} .exp-stack > article::before {left:-24px; width:12px; height:12px; top:8px}}
 /* ===== Polished skill bullets ===== */
 .skills-list li::before {background:linear-gradient(135deg,#2779ff,#7c3aed); width:6px; height:6px; box-shadow:0 0 0 3px rgba(39,121,255,0.08)}
 .bullets li::before {background:linear-gradient(135deg,#2779ff,#7c3aed); box-shadow:0 0 0 3px rgba(39,121,255,0.08)}
 /* ===== Modal visuals hover polish ===== */
 .modal__visual {transition:transform 0.5s cubic-bezier(0.16,1,0.3,1)}
 .modal__visual:hover {transform:translateY(-2px)}
 /* ===== Soft tag/badge interactivity ===== */
 .tag, .badge {transition:background 0.22s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease}
 @media (hover:hover) {.tag:hover, .badge:hover {transform:translateY(-1px); box-shadow:0 6px 14px -10px rgba(15,23,42,0.25)}}
 /* ===== Back-to-top floating button ===== */
 .back-to-top {position:fixed; bottom:24px; right:24px; width:48px; height:48px; border-radius:50%; background:#fff; color:#2779ff; box-shadow:0 12px 28px -10px rgba(15,23,42,0.22), 0 0 0 1px rgba(15,23,42,0.05); display:inline-flex; align-items:center; justify-content:center; z-index:200; text-decoration:none; opacity:0; visibility:hidden; transform:translateY(14px) scale(0.85); transition:opacity 0.35s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1), visibility 0.35s ease, background 0.22s ease, color 0.22s ease}
 .back-to-top svg {width:22px; height:22px; display:block}
 .back-to-top:hover {background:#2779ff; color:#fff; transform:translateY(8px) scale(1)}
 .back-to-top:active {transform:translateY(8px) scale(0.95)}
 @supports (animation-timeline: scroll()) {.back-to-top {animation:bttReveal linear both; animation-timeline:scroll(root); animation-range:240px 480px}}
 @keyframes bttReveal {to {opacity:1; visibility:visible; transform:translateY(0) scale(1)}}
 @supports not (animation-timeline: scroll()) {.back-to-top {opacity:0.96; visibility:visible; transform:translateY(0) scale(1)}}
 @media (max-width:640px) {.back-to-top {bottom:18px; right:18px; width:42px; height:42px} .back-to-top svg {width:20px; height:20px}}
 @media (prefers-reduced-motion:reduce) {.back-to-top, .project-icon, #portfolio .card[data-opens-modal], .exp-stack > article::before, .modal__visual {transition:none; animation:none}}
 /* ===== Subtle hero greeting accent dot ===== */
 .hero__greeting {position:relative; display:inline-block}
 .hero__greeting::before {content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#2779ff,#d3447d); margin-right:10px; vertical-align:middle; transform:translateY(-2px); box-shadow:0 0 0 3px rgba(39,121,255,0.12)}