* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: var(--zero); color: var(--text); background-color: var(--bg); background-image: var(--dots); background-size: var(--space-18) var(--space-18); font-family: var(--font); font-size: var(--text-body); font-weight: var(--regular); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
strong, b { font-weight: var(--bold); }
h1 { font-size: var(--text-name); font-weight: var(--bold); }
h2 { font-size: var(--text-heading); font-weight: var(--bold); }
img { display: block; max-width: 100%; }
.media-fill { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.media-link { z-index: 3; }
.tile-player { position: absolute; inset: var(--zero); width: 100%; height: 100%; border: none; border-radius: inherit; z-index: 4; }
.is-playing > :not(iframe) { visibility: hidden; }
:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--space-3); }
.skip-link { position: fixed; top: var(--space-8); left: var(--space-8); z-index: 20; padding: var(--space-12) var(--space-16); color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-button); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.page { display: flex; align-items: flex-start; gap: var(--space-64); max-width: var(--page-width); margin: var(--zero) auto; padding: var(--space-72) var(--space-48) var(--space-64); }
.profile { position: sticky; top: var(--space-72); width: var(--profile-width); flex: none; }
.profile-portrait { width: fit-content; margin: var(--zero) auto; padding: var(--portrait-border); background: var(--portrait-ring); border-radius: var(--radius-round); box-shadow: var(--portrait-shadow); }
.profile-photo { width: var(--avatar-size); height: var(--avatar-size); border-radius: var(--radius-round); border: var(--space-3) solid var(--bg); }
.profile-contacts { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-24); }
.profile-contacts a { display: inline-flex; align-items: center; justify-content: center; width: var(--space-48); height: var(--space-48); color: var(--white); background: var(--black); border: var(--border-width) solid var(--black); border-radius: var(--radius-round); box-shadow: var(--sh); text-decoration: none; transition: transform var(--motion), box-shadow var(--motion); }
.profile-contacts:has(a:nth-child(5)) { gap: var(--space-6); }
.profile-contacts:has(a:nth-child(5)) a { width: var(--contact-compact-size); height: var(--contact-compact-size); }
.profile-contacts a:hover { transform: var(--hover-transform); box-shadow: var(--sh-hover); }
.profile-contacts svg { width: var(--space-20); height: var(--space-20); }
.profile-contact-mark { font-size: var(--text-sm); font-weight: var(--bold); }
@media (max-width: 380px) {
    .profile-contacts:has(a:nth-child(5)) { display: grid; grid-template-columns: repeat(3, var(--contact-compact-size)); }
}
.metric-content { height: 100%; padding: var(--pad); display: flex; flex-direction: column; justify-content: center; gap: var(--space-8); overflow-wrap: anywhere; }
.metric-value { font-size: clamp(var(--text-metric-min), 20cqw, var(--text-metric)); letter-spacing: var(--tracking-name); line-height: var(--leading-tight); }
.metric-label { margin: var(--zero); font-size: var(--text-label); line-height: var(--leading-tight); }
.metric-description { margin: var(--zero); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-copy); }
.metric-value, .metric-label, .metric-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@container (max-height: 200px) { .metric-description { display: none; } .metric-label { font-size: var(--text-secondary); } }
.profile h1 { margin: var(--space-32) var(--zero) var(--zero); font-size: var(--text-name); line-height: 1.02; letter-spacing: var(--tracking-name); font-weight: var(--bold); }
.headline { margin: var(--space-12) var(--zero) var(--zero); color: var(--muted); }
.headline a { text-decoration: none; color: var(--accent); font-weight: var(--bold); }
.bio { margin: var(--space-20) var(--zero) var(--zero); line-height: var(--leading-copy); text-wrap: pretty; }
.profile-hashtags { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: var(--space-20) var(--zero) var(--zero); padding: var(--zero); list-style: none; }
.profile-hashtags li { max-width: 100%; padding: var(--space-6) var(--space-12); border-radius: var(--radius-field); background: var(--portrait-ring); color: var(--text); font-size: var(--text-secondary); font-weight: var(--bold); line-height: var(--leading-copy); overflow-wrap: anywhere; }
.links-column { width: var(--grid-width); min-width: var(--zero); flex: 1; container-type: inline-size; }
.grid { --gap: var(--space-24); --pad: var(--space-20); --unit: calc((100cqw - 3 * var(--gap)) / 4); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; gap: var(--gap); list-style: none; padding: var(--zero); margin: var(--zero); }
.cell { --cols: var(--d-cols); --rows: var(--d-rows); order: var(--d-order); display: var(--d-display); min-width: var(--zero); grid-column: span var(--cols); grid-row: span var(--rows); }
.tile-cell { height: calc(var(--rows) * var(--unit) + (var(--rows) - 1) * var(--gap)); }
.section-cell { grid-column: 1 / -1; grid-row: span 1; min-height: var(--space-34); padding: var(--zero) var(--space-4) var(--space-2); display: var(--d-display); }
.section-cell:not(:first-child) { margin-top: var(--space-20); }
.section-cell h2 { margin: var(--zero); font-size: var(--text-heading); font-weight: var(--bold); letter-spacing: var(--tracking-heading); line-height: var(--space-34); }
.tile { position: relative; width: 100%; height: 100%; border: var(--border-width) solid var(--tile-line); border-radius: var(--radius-tile); box-shadow: var(--sh); color: var(--tint-text); background: var(--tile-tint); overflow: hidden; transition: transform var(--motion), box-shadow var(--motion); container-type: size; --muted: var(--tint-muted); --subtle: var(--tint-subtle); --ph-a: var(--tint-ph-a); --ph-b: var(--tint-ph-b); }
.tile:hover { transform: var(--hover-transform); box-shadow: var(--sh-hover); }
.tile:has(:focus-visible) { outline: var(--focus-width) solid var(--accent); outline-offset: var(--space-3); }
.tile-link { position: absolute; inset: var(--zero); z-index: 2; border-radius: inherit; }
.tile-link:focus-visible { outline: none; }
.placeholder { position: relative; background: repeating-linear-gradient(135deg, var(--ph-a) 0 var(--space-10), var(--ph-b) var(--space-10) var(--space-20)); display: flex; align-items: center; justify-content: center; }
.placeholder > span { font: var(--regular) var(--text-xs)/1 var(--font-mono); color: var(--muted); }
.placeholder-dark { background: repeating-linear-gradient(135deg, var(--dark-ph-a) 0 var(--space-10), var(--dark-ph-b) var(--space-10) var(--space-20)); color: var(--white); }
.footer { margin-top: var(--space-48); font-size: var(--text-sm); color: var(--muted); }
.footer-brand { display: inline-flex; padding: var(--space-8) var(--space-12); border-radius: var(--radius-button); background: var(--white); }
.footer-brand img { width: var(--footer-logo-width); height: auto; }
.brand-icon, .site-icon, .contact-icon { width: var(--space-40); height: var(--space-40); flex: none; border-radius: var(--radius-icon); display: inline-flex; align-items: center; justify-content: center; color: var(--white); background: var(--brand, var(--accent)); }
.brand-icon img { width: var(--space-20); height: var(--space-20); }
.linkedin-mark { font-size: var(--text-icon); font-weight: var(--bold); letter-spacing: var(--tracking-name); }
.network-youtube { --brand: var(--youtube); }
.network-linkedin { --brand: var(--linkedin); }
.network-x { --brand: var(--black); }
.network-instagram { --brand: var(--instagram); }
.network-facebook { --brand: var(--facebook); }
.social-content { height: 100%; padding: var(--pad); display: flex; flex-direction: column; gap: var(--space-10); }
.social-top { display: flex; gap: var(--space-12); align-items: center; }
.social-heading { display: none; min-width: var(--zero); }
.social-heading strong, .social-heading span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.social-heading strong { font-size: var(--text-secondary); }
.social-heading span { font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-2); }
.followers { display: none; margin-left: auto; white-space: nowrap; font-size: var(--text-sm); color: var(--muted); }
.followers strong { color: var(--tint-text); }
.follow { display: none; align-items: center; justify-content: center; align-self: flex-start; height: var(--space-28); padding: var(--zero) var(--space-12); border-radius: var(--radius-button); color: var(--white); background: var(--brand); font-size: var(--text-sm); font-weight: var(--bold); }
.social-top > .follow { margin-left: auto; }
.social-description { margin-top: auto; min-width: var(--zero); }
.social-description strong, .social-description > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.social-description strong { font-size: var(--text-secondary); }
.social-description > span { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--muted); }
.follow-small { display: inline-flex; }
.social-media { display: none; flex: 1; min-height: var(--zero); }
.video-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-8); height: 100%; }
.thumb { position: relative; border-radius: var(--radius-button); overflow: hidden; }
.thumb > span { position: absolute; left: var(--space-8); top: var(--space-8); font: var(--regular) var(--text-xs)/1 var(--font-mono); color: var(--dark-ph-text); }
.thumb b { position: absolute; right: var(--space-6); bottom: var(--space-6); padding: var(--space-2) var(--space-4); border-radius: var(--space-3); font-size: var(--text-xs); color: var(--white); background: var(--black); }
.social-image { height: 100%; border-radius: var(--radius-button); }
.repo-content { display: flex; flex-direction: column; height: 100%; padding: var(--pad); gap: var(--space-14); }
.repo-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); min-width: var(--zero); flex: 1; }
.github-icon { background: var(--github); }
.repo-heading > div { min-width: var(--zero); margin-top: auto; }
.repo-heading > div > span, .repo-heading strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-heading > div > span { color: var(--muted); font-size: var(--text-sm); }
.repo-heading strong { font-size: var(--text-label); }
.repo-description { display: none; margin: var(--zero); color: var(--muted); font-size: var(--text-description); line-height: 1.45; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.topics { display: none; flex-wrap: wrap; gap: var(--space-6); }
.topics span { background: var(--subtle); border-radius: var(--radius-button); padding: var(--space-4) var(--space-10); font-size: var(--text-sm); }
.repo-meta { display: none; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-14); margin-top: auto; font-size: var(--text-sm); color: var(--muted); }
.repo-meta > span { display: inline-flex; align-items: center; gap: var(--space-6); }
.repo-meta .last-push { display: none; }
.language-dot { display: inline-block; width: var(--space-8); height: var(--space-8); background: var(--hue-500); border-radius: var(--radius-round); }
.website-content { display: flex; flex-direction: column; height: 100%; padding: var(--space-10); gap: var(--space-14); }
.website-image { display: none; min-height: var(--zero); flex: 1; border-radius: var(--radius-button); }
.website-description { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-10); min-width: var(--zero); flex: 1; }
.website-description > div { min-width: var(--zero); margin-top: auto; }
.website-description strong, .website-description > div > span { display: block; }
.website-description strong { font-size: var(--text-label); line-height: var(--leading-tight); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.website-description > div > span { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-icon { font-size: var(--text-icon); font-weight: var(--bold); background: var(--accent); color: var(--accent-ink); }
.site-icon:has(img) { background: var(--white); overflow: hidden; }
.site-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.video-content { position: absolute; inset: var(--zero); }
.video-placeholder-label { position: absolute; top: var(--space-14); left: var(--space-16); font: var(--regular) var(--text-xs)/1 var(--font-mono); color: var(--dark-ph-text); }
.video-brand { position: absolute; right: var(--space-10); top: var(--space-10); display: flex; align-items: center; justify-content: center; width: var(--space-28); height: var(--space-28); border-radius: var(--radius-button); background: var(--youtube); }
.play-symbol { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; width: var(--space-54); height: var(--space-54); border-radius: var(--radius-round); color: var(--play-ink); background: var(--play-bg); box-shadow: var(--play-shadow); font-size: var(--text-icon); }
.video-caption { display: none; position: absolute; left: var(--zero); right: var(--zero); bottom: var(--zero); padding: var(--space-48) var(--pad) var(--pad); background: var(--video-scrim); }
.video-caption strong, .video-caption span { display: block; }
.video-caption strong { font-size: var(--text-label); line-height: var(--leading-tight); }
.video-caption span { font-size: var(--text-sm); margin-top: var(--space-4); }
.spotify-content { display: flex; height: 100%; padding: var(--space-12); gap: var(--space-16); }
.spotify-cover { flex: 1; min-height: var(--zero); border-radius: var(--radius-button); }
.spotify-description { display: none; flex: 1; min-width: var(--zero); flex-direction: column; padding: var(--space-8) var(--space-8) var(--space-8) var(--zero); }
.spotify-description > strong { font-size: var(--text-label); line-height: var(--leading-tight); margin-top: var(--space-10); }
.spotify-description > span:not(.spotify-play) { font-size: var(--text-secondary); color: var(--muted); }
.spotify-kind { display: flex; align-items: center; gap: var(--space-6); }
.spotify-play { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-14); margin-top: auto; font-size: var(--text-sm); font-weight: var(--bold); border-radius: var(--radius-button); background: var(--spotify); color: var(--black); }
.contact-content { height: 100%; padding: var(--pad); display: flex; flex-direction: column; gap: var(--space-12); }
.contact-icon { color: var(--contact-icon-ink); background: var(--contact-icon-bg); font-size: var(--text-icon); }
.contact-label { min-width: var(--zero); margin-top: auto; }
.contact-label strong, .contact-label span { display: block; }
.contact-label strong { font-size: var(--text-label); }
.contact-label span { margin-top: var(--space-4); font-size: var(--text-secondary); color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.copy-button { position: relative; z-index: 3; border: none; border-radius: var(--radius-button); background: var(--subtle); color: var(--tint-text); padding: var(--space-8) var(--space-10); font-size: var(--text-xs); font-weight: var(--bold); align-self: flex-start; }
@container (min-width: 260px) {
    .social-top > .follow { display: inline-flex; }
    .followers { display: inline; }
    .follow-small { display: none; }
    .social-description strong { font-size: var(--text-label); }
    .repo-heading { flex: none; flex-direction: row; align-items: center; }
    .repo-heading > div { margin-top: var(--zero); }
    .repo-description { display: -webkit-box; }
    .repo-meta { display: flex; }
    .website-content { flex-direction: row-reverse; gap: var(--space-10); }
    .website-image { display: flex; width: 48%; flex: none; }
    .website-description { gap: var(--space-8); }
    .video-caption { display: block; }
    .spotify-cover { flex: none; width: 42%; }
    .spotify-description { display: flex; }
    .contact-content { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .contact-label { width: 100%; order: 2; }
    .copy-button { margin-left: auto; align-self: flex-start; }
}
@container (min-height: 260px) {
    .website-image { display: flex; }
    .website-content { flex-direction: column; }
    .website-image { width: 100%; flex: 1; }
    .website-description { flex: none; flex-direction: row; align-items: center; padding: var(--zero) var(--space-10) var(--space-8); }
    .website-description > .site-icon { width: var(--space-32); height: var(--space-32); font-size: var(--text-label); }
    .website-description > div { margin-top: var(--zero); }
    .social-description { display: none; }
    .social-heading { display: block; }
    .followers { display: none; }
    .social-media { display: block; }
    .topics { display: flex; }
    .repo-description { -webkit-line-clamp: 3; }
    .repo-meta .last-push { display: inline; }
    .spotify-content { flex-direction: column; }
    .spotify-cover { width: 100%; flex: 1; }
    .spotify-description { flex: none; gap: var(--space-6); }
}
@container (max-height: 150px) {
    .social-content, .repo-content, .contact-content { padding: var(--space-12); gap: var(--space-6); }
    .brand-icon, .contact-icon { width: var(--space-32); height: var(--space-32); }
    .follow { height: var(--space-24); padding: var(--zero) var(--space-8); font-size: var(--text-xs); }
    .social-description > span { margin-top: var(--space-2); }
    .social-description strong { font-size: var(--text-secondary); }
    .repo-description { -webkit-line-clamp: 1; }
    .repo-heading { gap: var(--space-8); }
    .repo-heading strong { font-size: var(--text-secondary); }
    .contact-content { display: grid; grid-template-columns: var(--space-32) minmax(0, 1fr); grid-template-rows: var(--space-32) 1fr; }
    .contact-label { grid-row: 2; grid-column: 1 / -1; width: 100%; align-self: end; }
    .contact-label strong { font-size: var(--text-secondary); }
    .copy-button { grid-row: 1; grid-column: 2; margin-left: auto; padding: var(--space-6) var(--space-8); font-size: var(--text-icon); }
    .copy-label { display: none; }
    .spotify-content { padding: var(--space-8); gap: var(--space-10); }
    .spotify-cover { width: 35%; }
    .spotify-description { padding: var(--zero); }
    .spotify-description > strong { font-size: var(--text-secondary); margin-top: var(--space-6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .spotify-description > span:not(.spotify-play) { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .spotify-play { padding: var(--space-4) var(--space-8); font-size: var(--text-xs); }
}
.hue-sky { --hue-100: var(--sky-100); --hue-200: var(--sky-200); --hue-500: var(--sky-500); }
.hue-rose { --hue-100: var(--rose-100); --hue-200: var(--rose-200); --hue-500: var(--rose-500); }
.hue-pink { --hue-100: var(--pink-100); --hue-200: var(--pink-200); --hue-500: var(--pink-500); }
.hue-blue { --hue-100: var(--blue-100); --hue-200: var(--blue-200); --hue-500: var(--blue-500); }
.hue-slate { --hue-100: var(--slate-100); --hue-200: var(--slate-200); --hue-500: var(--slate-500); }
.hue-amber { --hue-100: var(--amber-100); --hue-200: var(--amber-200); --hue-500: var(--amber-500); }
.hue-emerald { --hue-100: var(--emerald-100); --hue-200: var(--emerald-200); --hue-500: var(--emerald-500); }
.hue-violet { --hue-100: var(--violet-100); --hue-200: var(--violet-200); --hue-500: var(--violet-500); }
.hue-orange { --hue-100: var(--orange-100); --hue-200: var(--orange-200); --hue-500: var(--orange-500); }
.hue-indigo { --hue-100: var(--indigo-100); --hue-200: var(--indigo-200); --hue-500: var(--indigo-500); }
.hue-teal { --hue-100: var(--teal-100); --hue-200: var(--teal-200); --hue-500: var(--teal-500); }
.hue-lime { --hue-100: var(--lime-100); --hue-200: var(--lime-200); --hue-500: var(--lime-500); }
@media (max-width: 1100px) {
    .page { flex-direction: column; align-items: center; gap: var(--space-32); max-width: var(--mobile-width); padding: var(--space-40) var(--space-20); }
    .profile { position: static; width: 100%; text-align: center; }
    .profile-contacts, .profile-hashtags { justify-content: center; }
    .profile-photo { width: var(--avatar-mobile); height: var(--avatar-mobile); margin: var(--zero) auto; }
    .profile h1 { font-size: var(--text-name-mobile); margin-top: var(--space-20); }
    .headline { font-size: var(--text-label); margin-top: var(--space-6); }
    .bio { font-size: var(--text-label); max-width: var(--bio-mobile-width); margin: var(--space-14) auto var(--zero); }
    .links-column { width: 100%; flex: none; }
    .grid { --gap: var(--space-16); --pad: var(--space-16); --unit: calc((100cqw - var(--gap)) / 2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cell { --cols: var(--m-cols); --rows: var(--m-rows); order: var(--m-order); display: var(--m-display); }
    .section-cell { min-height: var(--space-30); }
    .section-cell:not(:first-child) { margin-top: var(--space-12); }
    .tile { border-radius: var(--radius-mobile); }
    .footer { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tile, .profile-contacts a { transition: none; }
    .tile:hover, .profile-contacts a:hover { transform: none; }
}