:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);--ease-in-out:cubic-bezier(.65,0,.35,1);--dur-short:180ms;--dur-panel:300ms;--radius-panel:22px}
/* Three motion families: press/hover feedback, deliberate state crossfades, functional reading progress. */
.js .reveal{opacity:1;transform:none;transition:none}.hero-copy{animation:enter-hero 500ms var(--ease-out) both}@keyframes enter-hero{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
header{transition:box-shadow var(--dur-short) var(--ease-out);backdrop-filter:blur(16px)}header.scrolled{box-shadow:0 12px 40px var(--shadow)}nav a{position:relative;min-height:44px;display:flex;align-items:center}nav a:after{content:'';position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-short) var(--ease-out)}nav a[aria-current]:after,nav a:hover:after{transform:scaleX(1)}nav a[aria-current]{color:var(--accent)}.controls button{min-height:44px}.controls #theme{height:34px;min-height:34px;border:5px solid var(--surface);box-sizing:content-box}.sun{transition:transform var(--dur-short) var(--ease-out)}
.button,button{touch-action:manipulation}.button,.slider-controls button,.skill-explore{transition:transform 150ms var(--ease-out),background-color var(--dur-short) var(--ease-out)}.button:active,.slider-controls button:active,.skill-explore:active{transform:translateY(1px)}.reading-progress{position:fixed;z-index:50;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.design-code{min-height:790px}.role-switch{position:absolute;top:70px;left:50%;transform:translateX(-50%);display:flex;padding:5px;border:1px solid var(--line);border-radius:32px;background:var(--surface);z-index:4;box-shadow:0 8px 24px var(--shadow)}.role-switch button{background:transparent;padding:10px 22px;border-radius:24px;font-size:12px;min-height:44px;min-width:90px}.role-switch button[aria-pressed=true]{background:var(--text);color:var(--bg)}.identity-art{font-size:360px;letter-spacing:-.12em;line-height:1;transition:opacity var(--dur-panel) var(--ease-out);opacity:.13;user-select:none}.design-code article{transition:opacity var(--dur-panel) var(--ease-out)}.design-code[data-mode=design] article:last-child{opacity:.45}.design-code[data-mode=code] article:first-of-type{opacity:.45}.design-code[data-mode=code] .identity-art{color:var(--accent);font-size:260px;text-shadow:none;letter-spacing:-.15em}.design-code article p{max-width:270px}.design-code article:last-child p{margin-left:auto}
.work-grid article{border-top:2px solid var(--line)}.work-grid article h3:before{content:'↗';display:block;font-weight:400;font-size:26px;color:var(--accent);margin-bottom:20px}.skill-card{display:flex;flex-direction:column;border-radius:var(--radius-panel);box-shadow:0 12px 30px var(--shadow)}.skill-card .tags{margin-bottom:24px}.skill-explore{align-self:flex-start;margin-top:auto;min-height:44px;background:none;color:var(--accent);padding:4px 0;font-size:13px;font-weight:650;border-bottom:1px solid var(--line)}.skill-explore:hover{border-color:var(--accent)}.skill-dialog{width:min(580px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:48px;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--text);box-shadow:0 30px 80px var(--shadow)}.skill-dialog::backdrop{background:color-mix(in srgb,var(--text) 45%,transparent);backdrop-filter:blur(8px)}.skill-dialog[open]{animation:dialog-in var(--dur-panel) var(--ease-out)}@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.dialog-close{position:absolute;right:12px;top:12px;background:var(--bg);border-radius:50%;height:44px;width:44px;font-size:26px}.skill-dialog h2{font-size:38px;margin-bottom:24px}.dialog-copy{font-size:16px;line-height:1.85;color:var(--muted)}.skill-dialog .tags{margin-top:28px}.contact{padding-bottom:120px}.contact .primary{border-radius:30px;padding-inline:28px}footer{padding-block:36px}.button:disabled,button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:800px){.design-code{min-height:680px}.identity-art{font-size:280px}.role-switch{top:40px}.skill-dialog{padding:44px 28px 32px}.controls{gap:4px}header{gap:8px}.controls #theme{width:58px}nav a{min-height:44px}}
@media(max-width:560px){.hero-inner{padding-bottom:48px}.design-code{min-height:680px;gap:96px;padding-top:120px}.role-switch{top:24px}.identity-art{font-size:260px}.design-code[data-mode=code] .identity-art{font-size:180px}.design-code h2{font-size:43px}.design-code article{max-width:235px}.design-code article p{font-size:14px}.design-code[data-mode=design] article:last-child,.design-code[data-mode=code] article:first-of-type{opacity:.65}.controls button{min-width:38px}.brand{gap:6px}header{padding-inline:9px}.controls #theme{width:48px}.skill-card{min-height:290px}.contact{padding-bottom:80px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-copy{opacity:1;transform:none}}