:root{color-scheme:dark;--bg:#101011;--surface:#1c1c1e;--text:#a8a8ad;--strong:#ededf0;--line:#333336;--dot:#ffffff0c;--accent:#83baff;--glass:#ffffff08}html[data-theme=light]{color-scheme:light;--bg:#fafafa;--surface:#fff;--text:#616168;--strong:#202023;--line:#dedee3;--dot:#0000000b;--accent:#0066cc;--glass:#00000004}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);background-image:radial-gradient(var(--dot) .8px,transparent .8px);background-size:16px 16px;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background-color .25s,color .25s}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:var(--strong);text-decoration:none}main a:not(.primary-link):not(.project-link):not(.exhibit-button){border-bottom:1px solid var(--line);transition:border-color .2s,color .2s}a:hover{color:var(--accent)}main a:hover{border-color:var(--accent)}button{color:var(--text);cursor:pointer}button:hover{color:var(--strong)}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.shell{width:min(100% - 48px,560px);margin:0 auto;padding:66px 0 28px}header{display:flex;align-items:center;gap:24px;margin-bottom:40px;line-height:1.4}.name{font-size:19px;font-weight:650;letter-spacing:-.6px;white-space:nowrap}nav{display:flex;gap:20px;margin-left:auto}nav a{font-size:14px;color:var(--text);padding:8px 0;position:relative}nav a[aria-current=page]{color:var(--strong)}nav a[aria-current=page]:after{content:"";height:1px;position:absolute;bottom:2px;left:0;right:0;background:var(--strong)}.tools{display:flex;align-items:center;gap:12px}#theme{border:0;background:none;padding:5px;display:grid;place-items:center}#theme svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}#commands{display:flex;gap:4px;background:var(--glass);border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:12px}kbd{font:inherit}.intro p{margin:7px 0}.diamond{position:relative;padding-left:18px}.diamond:before{content:"";width:5px;height:5px;background:var(--strong);transform:rotate(45deg);position:absolute;left:1px;top:11px}.intro a{font-weight:550;margin-left:4px}.badge{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;width:17px;height:17px;line-height:1;border-radius:4px;margin-right:6px;vertical-align:1px;color:white}.violet{background:#6a56a2}.red{background:#a72037}.graduation{font-size:13px;margin-left:8px;color:var(--text)}.list-section{margin-top:23px}h2.diamond{font-size:16px;font-weight:550;font-style:italic;color:var(--strong);margin:0 0 12px}.branch-list{list-style:none;margin:0;padding:0 0 0 18px}.branch-list li{position:relative;padding-left:17px;margin:7px 0}.branch-list li:before{content:"↳";position:absolute;left:-5px;color:#77777c}.branch-list a{font-weight:550}.primary-link{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(var(--glass),var(--glass));box-shadow:inset 0 1px 0 #ffffff05;padding:14px 20px;margin-top:30px;transition:background .2s,transform .2s}.primary-link:hover{background:var(--surface);transform:translateY(-2px)}.primary-link span{font-size:23px;line-height:1}.signature{text-align:center;font-family:"Snell Roundhand","Brush Script MT",cursive;font-size:56px;line-height:1.4;font-style:italic;color:var(--text);margin:32px 0 38px;transform:rotate(-8deg);font-weight:300}.signature span{color:var(--accent)}footer{border-top:1px solid var(--line);padding-top:20px;margin-top:46px;font-size:12px}.footer-top,.footer-bottom{display:flex;justify-content:space-between;gap:12px}.footer-top a{color:var(--text);font-size:13px}.footer-top a:hover{color:var(--strong)}.socials{display:flex;gap:18px}.footer-bottom{margin-top:20px;color:var(--text);opacity:.75}.page-heading{margin:0 0 28px}.page-heading h1{font-size:30px;line-height:1.2;letter-spacing:-1.2px;color:var(--strong);font-weight:600;margin:0 0 12px}.page-heading h1 span{color:var(--accent)}.page-heading p{margin:0;font-size:15px}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;background:var(--glass);padding:9px 13px;margin-bottom:20px}.search>span{font-size:26px;line-height:1}.search input{width:100%;background:none;border:0;color:var(--strong);outline-offset:9px;font-size:14px;padding:3px}.project{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:27px;margin-bottom:18px;scroll-margin-top:24px;transition:border-color .2s,transform .2s}.project:hover{border-color:#73737b;transform:translateY(-2px)}.project-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text);margin-bottom:22px}.project h2{font-size:26px;letter-spacing:-.8px;line-height:1.2;color:var(--strong);margin:0 0 8px;font-weight:600}.project h3{font-size:16px;font-weight:500;color:var(--strong);margin:0 0 14px}.project p{font-size:15px;margin:0 0 22px}.tags{display:flex;flex-wrap:wrap;gap:6px;padding:0;list-style:none;margin:0 0 22px}.tags li{font-size:12px;border:1px solid var(--line);padding:2px 9px;border-radius:6px}.project-link{font-size:14px;color:var(--accent)}.project-link span{margin-left:4px}.more{font-size:14px;text-align:center;margin:30px 0}.job{padding:24px 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}.job:first-of-type{padding-top:4px}.eyebrow{font-size:12px;margin:0 0 10px}.job h2{font-size:21px;letter-spacing:-.5px;color:var(--strong);margin:0}.job h3{font-size:15px;font-weight:500;color:var(--strong);margin:3px 0 15px}.job p:not(.eyebrow){font-size:15px;margin:10px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:-70px;left:20px;background:var(--surface);z-index:10;padding:12px}.skip:focus{top:10px}dialog{color:var(--strong);background:var(--surface);border:1px solid var(--line);border-radius:17px;width:min(480px,calc(100% - 32px));padding:20px;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#0008;backdrop-filter:blur(8px)}.palette-heading{display:flex;justify-content:space-between;align-items:center}.palette-heading h2{font-size:17px;margin:0 0 12px}.palette-heading button{border:1px solid var(--line);background:none;border-radius:5px;font-size:12px}#command-search{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:10px 12px;color:var(--strong);font-size:16px;margin:8px 0 12px}#command-list a,#command-list button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px;border:none;border-radius:6px;background:none;color:var(--strong);font-size:14px;text-align:left}#command-list a:hover,#command-list button:hover,#command-list :focus{background:var(--glass)}#command-list span{color:var(--text);font-size:12px}.palette-help{border-top:1px solid var(--line);padding-top:14px;margin-top:12px;color:var(--text);font-size:12px}.palette-help span{float:right}[hidden]{display:none!important}main{animation:arrive .45s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:620px){.shell{padding-top:32px;width:calc(100% - 40px)}header{flex-wrap:wrap;gap:16px;margin-bottom:32px}.name{font-size:20px}nav{order:3;width:100%;margin-left:0;gap:24px}.tools{margin-left:auto}nav a{font-size:15px}.intro{font-size:15px}.graduation{display:none}.branch-list{padding-left:12px}.project{padding:22px}.page-heading h1{font-size:29px}.socials{gap:13px}.footer-bottom{font-size:11px}.signature{margin:30px 0}.list-section{margin-top:24px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Personal layer: cool blue atmosphere, a rotating AI mark. */
:root{--accent:#9cdded;--bg:#101416;--surface:#192023;--dot:#b3dae911}html[data-theme=light]{--accent:#14687f;--bg:#f7fafb;--surface:#ffffff;--dot:#34647816}.shell{width:min(100% - 48px,660px)}.ambient{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 80% 15%,#20708019,transparent 45%),radial-gradient(ellipse at 0% 85%,#24447713,transparent 45%);animation:atmosphere 18s ease-in-out infinite alternate}header{margin-bottom:45px}.tools{gap:9px}#motion{background:none;border:0;font-size:14px;padding:5px;color:var(--text)}.hello{position:relative;display:flex;align-items:center;margin:0 0 38px;padding-bottom:30px;border-bottom:1px solid var(--line);min-height:240px}.hello-copy{position:relative;z-index:1}.hello .eyebrow{font-size:10px;letter-spacing:1.6px;margin-bottom:15px}.hello h2{font-size:31px;font-weight:550;letter-spacing:-1.25px;line-height:1.2;color:var(--strong);margin:0 0 18px}.hello h2>span{color:var(--text)}.hello-copy>p:last-child{font-size:15px;line-height:1.6;margin:0}.small-break{display:none}.intro{font-size:15px}.intro p{margin:8px 0}.list-section{margin-top:26px}.primary-link{color:var(--strong);background:linear-gradient(120deg,#9cdded0b,#9cdded03);border-color:#9cdded35}.signoff{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.signoff>span:first-child{font-size:12px;color:var(--text)}.signoff .signature{font-size:39px;margin:0 9px 0 0}footer{margin-top:30px}.project{position:relative;overflow:hidden}.project-meta{letter-spacing:.4px}.job h2{transition:color .2s}.job:hover h2{color:var(--accent)}html[data-motion=paused] *,html[data-motion=paused] *:before{animation-play-state:paused!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes atmosphere{to{opacity:.4;transform:translateY(-25px)}}@keyframes shimmer{50%{opacity:1;transform:translateX(15%)}}@media(max-width:620px){.shell{width:calc(100% - 40px)}header{margin-bottom:30px}.hello{min-height:250px;align-items:flex-start}.hello h2{font-size:27px;letter-spacing:-1px}.hello .eyebrow{font-size:9px;letter-spacing:1px}.hello-copy{max-width:100%}.hello-copy>p:last-child{max-width:225px;font-size:14px}.signoff>span:first-child{font-size:11px}.small-break{display:block}}@media(prefers-reduced-motion:reduce){}@media(max-width:360px){.hello{padding-bottom:70px}.hello .eyebrow{max-width:230px}.hello h2{font-size:25px}.signoff{gap:12px}.footer-top{flex-wrap:wrap}}

.ai-mark{position:relative;display:grid;place-items:center;width:170px;height:190px;flex-shrink:0;margin-left:18px;color:var(--accent)}.ai-symbol{width:150px;height:150px;animation:spin 24s linear infinite;opacity:.8;filter:drop-shadow(0 0 15px #9cdded18)}.ai-mark>span{position:absolute;font-size:22px;font-weight:550;letter-spacing:2px;padding-left:2px;color:var(--strong)}@media(max-width:620px){.ai-mark{position:absolute;width:85px;height:95px;right:0;bottom:12px;margin:0}.ai-symbol{width:82px;height:82px}.ai-mark>span{font-size:15px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){.ai-symbol{animation:none!important}}

/* Keep the command palette responsive in Firefox and on integrated GPUs. */
dialog::backdrop{background:rgb(0 0 0 / 72%);backdrop-filter:none}
.ambient{animation:none}
.ai-symbol{filter:none;will-change:transform}

/* Small hover responses inspired by the reference site's motion language. */
.diamond{transition:transform .2s ease}
.diamond::before{transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .2s ease}
.diamond:hover{transform:translateX(4px)}
.diamond:hover::before{transform:rotate(405deg) scale(1.18);background:var(--accent)}
.branch-list li::before{transition:transform .2s ease,color .2s ease}
.branch-list li:hover::before{transform:translateX(3px);color:var(--accent)}
main a:not(.primary-link):not(.project-link):not(.exhibit-button){border-bottom:0;background-image:linear-gradient(var(--strong),var(--strong)),linear-gradient(var(--line),var(--line));background-position:0 100%,0 100%;background-repeat:no-repeat;background-size:0 1px,100% 1px;transition:background-size .35s ease,color .2s ease}
main a:not(.primary-link):not(.project-link):not(.exhibit-button):hover{background-size:100% 1px,100% 1px}
html[data-motion=paused] .diamond:hover{transform:none}
html[data-motion=paused] .diamond:hover::before{transform:rotate(45deg);background:var(--strong)}
html[data-motion=paused] .branch-list li:hover::before{transform:none}
@media(prefers-reduced-motion:reduce){.diamond:hover{transform:none}.diamond:hover::before{transform:rotate(45deg);background:var(--strong)}.branch-list li:hover::before{transform:none}main a:not(.primary-link):not(.project-link):not(.exhibit-button){transition:none}}

.badge.green{background:#237345}

/* Centered vector arrow with a small trailing stroke on interaction. */
.projects-arrow{display:block;width:28px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.primary-link:has(.projects-arrow){gap:6px}
.arrow-body{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.arrow-trail{opacity:0;stroke-dasharray:5;stroke-dashoffset:5;transition:opacity .25s,stroke-dashoffset .35s}
.primary-link:is(:hover,:focus-visible) .arrow-body{transform:translateX(4px)}
.primary-link:is(:hover,:focus-visible) .arrow-trail{opacity:.55;stroke-dashoffset:0;transition-delay:.08s}
html[data-motion=paused] .projects-arrow *{transition:none;transform:none}
@media(prefers-reduced-motion:reduce){.projects-arrow *{transition:none!important;transform:none!important}}

/* Shared tab indicator and a staggered rainbow on the home link. */
header nav{position:relative}
nav.has-indicator a[aria-current=page]::after{display:none}
.nav-indicator{position:absolute;left:0;bottom:2px;height:1px;background:var(--strong);pointer-events:none}
.nav-indicator.ready{transition:transform .38s cubic-bezier(.22,1,.36,1),width .38s cubic-bezier(.22,1,.36,1)}
.name:hover,.name:focus-visible{color:var(--strong)}
.name span{transition:color .4s ease}
.name:is(:hover,:focus-visible) span{animation:name-rainbow 3s linear infinite;animation-delay:calc(var(--letter) * -.09s)}
.signoff{justify-content:flex-end}
.signoff>.signature:first-child{font-size:39px}
@keyframes name-rainbow{0%,100%{color:var(--strong)}15%{color:#e879a9}30%{color:#e8a35b}45%{color:#a5c95b}60%{color:#55bdba}75%{color:#799dec}90%{color:#bc8de5}}
html[data-motion=paused] .nav-indicator.ready{transition:none}
html[data-motion=paused] .name span{animation:none!important}
@media(prefers-reduced-motion:reduce){.name span{animation:none!important}.nav-indicator.ready{transition:none}}

/* Dotted perimeter follows the actual card dimensions without stretching dots. */
.project-orbit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s ease;overflow:visible}
.project-orbit rect{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 9;animation:orbit-dots 1s linear infinite;animation-play-state:paused}
.project:is(:hover,:focus-within) .project-orbit{opacity:.8}
.project:is(:hover,:focus-within) .project-orbit rect{animation-play-state:running}
@keyframes orbit-dots{to{stroke-dashoffset:-10}}
html[data-motion=paused] .project-orbit rect,html[data-motion=paused] .name span{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.project-orbit rect,.name span{animation:none!important}}
/* Four navigation links remain on one row on narrow phones. */
@media(max-width:620px){header nav{gap:12px}header nav a{white-space:nowrap}}