/* Home composition; shared values live in design-tokens.css. */
:root{color-scheme:dark;--bg:var(--color-background);--text:var(--color-text);--muted:var(--color-text-muted);--line:var(--color-border);--accent:#b7e6bc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}header{height:82px;max-width:1200px;margin:auto;padding:0 var(--space-8);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:var(--text-2xl);letter-spacing:-1px;font-weight:700}.brand span{color:var(--muted);font-weight:400}nav{display:flex;gap:var(--space-6);align-items:center;font-size:var(--text-base);color:var(--color-text-secondary)}.nav-github{border:1px solid var(--line);padding:var(--space-2) var(--space-4);border-radius:30px}.hero{height:620px;width:100%;margin:auto;position:relative;isolation:isolate;display:grid;place-items:center;overflow:visible}.hero:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%)}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 48%,#17312225,transparent 50%)}.intro{text-align:center;z-index:2;pointer-events:none}.intro a{pointer-events:auto}.eyebrow{font-size:var(--text-sm);color:var(--accent);letter-spacing:3px;text-transform:uppercase;margin:0 0 var(--space-6)}.intro h1{font-size:clamp(64px,8vw,108px);line-height:1.08;letter-spacing:-6px;font-weight:600;margin:0}.intro .english{margin:var(--space-4) 0 0;font-size:var(--text-2xl);letter-spacing:-.7px;color:var(--color-text-muted)}.actions{display:flex;align-items:center;justify-content:center;gap:var(--space-5);margin-top:var(--space-10);font-size:var(--text-base)}.primary{background:var(--color-text);color:var(--color-on-accent);border-radius:10px;padding:var(--space-4) var(--space-6);font-weight:600;transition:transform .2s}.primary:hover{transform:translateY(-3px)}.secondary{color:var(--color-text-secondary)}.secondary:hover{color:white}.tile{position:absolute;left:var(--x);top:var(--y);width:90px;transform:translate(var(--mx,0px),var(--my,0px));transition:transform .7s ease-out;z-index:1}.tile-inner{height:90px;border:1px solid #ffffff16;border-radius:22px;background:linear-gradient(145deg,#24272b,#131518);box-shadow:inset 0 1px 0 #ffffff0c,0 16px 34px #0005;display:flex;align-items:center;justify-content:center;animation:float var(--duration,7s) ease-in-out infinite;animation-delay:var(--delay,0s);rotate:var(--rotate,-8deg)}.tile svg{width:48px;height:48px}.tile .word{font-size:var(--text-4xl);font-weight:700;letter-spacing:-2px;color:var(--color-text)}.tile small{display:block;text-align:center;margin-top:var(--space-3);font-size:var(--text-xs);color:var(--color-text-subtle);letter-spacing:.4px}.tile:hover .tile-inner{border-color:#ffffff40;background:#272b2f}.tile:hover small{color:white}@keyframes float{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(7px,-18px) rotate(3deg)}}.hero-bottom{position:absolute;bottom:26px;left:36px;right:36px;display:flex;justify-content:space-between;font-size:var(--text-xs);letter-spacing:1.5px;color:var(--color-text-subtle)}.motion{background:none;border:none;color:var(--color-text-muted);font-size:var(--text-xs);cursor:pointer}.paused .tile-inner{animation-play-state:paused}.paused .tile{transform:none}.content{max-width:1128px;margin:auto;padding:var(--space-14) var(--space-8) 0}.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-6)}.section-head h2{font-size:var(--text-3xl);letter-spacing:-1px;font-weight:500;margin:0}.section-head a{font-size:var(--text-sm);color:var(--muted)}.section-head a:hover{color:white}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}.project{display:block;min-width:0}.picture{height:205px;border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface-raised);border:1px solid #ffffff0d;position:relative}.picture img{width:100%;height:100%;object-fit:cover;transition:transform .5s;opacity:.83}.project:hover img{transform:scale(1.035);opacity:1}.project-head{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-5)}.project h3{font-size:var(--text-xl);letter-spacing:-.6px;font-weight:500;margin:0}.arrow{color:var(--color-text-subtle)}.project p{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.6;margin:var(--space-2) 0}.tags{font-size:var(--text-xs);color:var(--color-text-subtle);margin-top:var(--space-3);letter-spacing:.3px}.status{position:absolute;left:14px;top:14px;border:1px solid #ffffff20;background:#0b100edb;border-radius:var(--radius-lg);padding:var(--space-1) var(--space-2);font-size:var(--text-xs);color:#b7e6bc}.status:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#a8dcb1;margin-right:var(--space-1)}.lower{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--space-16);padding:var(--space-20) 0}.list-row{padding:var(--space-5) 0;border-top:1px solid var(--line);display:flex;gap:var(--space-5);align-items:baseline;justify-content:space-between}.list-row h3{font-size:var(--text-base);font-weight:400;line-height:1.6;margin:0}.list-row time{font-size:var(--text-xs);color:var(--color-text-subtle);white-space:nowrap}.list-row:hover h3{color:var(--accent)}.history-row{padding:var(--space-5) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:90px 1fr;gap:var(--space-3);font-size:var(--text-base)}.history-row time{font-size:var(--text-xs);color:var(--color-text-subtle)}.history-row p{margin:0 0 var(--space-2)}.history-row small{color:var(--color-text-subtle);font-size:var(--text-xs)}.contact{border-top:1px solid var(--line);padding:var(--space-14) 0 var(--space-16);display:flex;align-items:center;justify-content:space-between}.contact h2{font-size:var(--text-4xl);font-weight:500;letter-spacing:-1.5px;margin:0 0 var(--space-3)}.contact p{font-size:var(--text-base);color:var(--muted);margin:0}.contact a{border-bottom:1px solid #626b67;padding-bottom:var(--space-1);font-size:var(--text-lg)}.contact a:hover{color:var(--accent)}footer{max-width:1128px;margin:auto;padding:var(--space-6) var(--space-8) var(--space-8);border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--color-text-subtle);font-size:var(--text-xs)}footer span:last-child{letter-spacing:1px}.draft{color:#79827b}
@media(min-width:1500px){.hero{height:660px}}@media(max-width:800px){header{padding:0 var(--space-6);height:72px}nav{gap:var(--space-4)}.hero{height:560px}.intro h1{font-size:84px;letter-spacing:-4px}.tile{width:68px}.tile-inner{height:68px;border-radius:17px}.tile svg{width:37px;height:37px}.tile .word{font-size:var(--text-2xl)}.tile small{font-size:var(--text-xs)}.projects{gap:var(--space-4)}.picture{height:150px}.content{padding:var(--space-12) var(--space-6) 0}.lower{gap:var(--space-8)}.project p{font-size:var(--text-sm)}.contact h2{font-size:var(--text-3xl)}}@media(max-width:560px){nav a:nth-child(3){display:none}nav{gap:var(--space-4);font-size:var(--text-xs)}.nav-github{padding:var(--space-2) var(--space-3)}.hero{height:540px}.intro{margin-top:-8px}.intro h1{font-size:72px;letter-spacing:-3px}.intro .english{font-size:var(--text-xl)}.eyebrow{font-size:var(--text-xs);letter-spacing:2px}.actions{gap:var(--space-4);margin-top:var(--space-8);font-size:var(--text-sm)}.primary{padding:var(--space-3) var(--space-4)}.tile{left:var(--mobile-x);top:var(--mobile-y);width:58px}.tile-inner{height:58px;border-radius:15px}.tile svg{width:32px;height:32px}.tile .word{font-size:var(--text-2xl)}.tile small{margin-top:var(--space-2);font-size:var(--text-xs)}.tile.extra{display:none}.hero-bottom{left:24px;right:24px;font-size:var(--text-xs);letter-spacing:1px}.projects{grid-template-columns:1fr;gap:var(--space-8)}.picture{height:230px}.project p{font-size:var(--text-base)}.lower{grid-template-columns:1fr;gap:var(--space-12);padding:var(--space-14) 0}.section-head h2{font-size:var(--text-2xl)}.contact{display:block;padding:var(--space-8) 0 var(--space-12)}.contact a{display:inline-block;margin-top:var(--space-6)}footer{padding:var(--space-5) var(--space-6)}.tags{font-size:var(--text-xs)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile-inner{animation:none}.tile,.primary,.picture img{transition:none}}

/* Liquid glass concept — official brand artwork stays unchanged. */
.hero:after{background:radial-gradient(ellipse at 18% 24%,#6bbd9820,transparent 28%),radial-gradient(ellipse at 78% 25%,#588ce723,transparent 32%),radial-gradient(ellipse at 52% 80%,#cba7f21a,transparent 33%)}
.tile{width:104px}.tile-inner{height:104px;border-radius:29px;border:1px solid #ffffff35;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#ffffff20 0%,#ffffff06 42%,#ffffff0c 70%,#ffffff1c 100%);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:inset 1px 1px 1px #ffffff65,inset -1px -1px 2px #ffffff23,inset 0 0 22px #ffffff05,0 20px 40px #0005,0 2px 7px #0003}
.tile-inner:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:radial-gradient(ellipse at 15% 0%,#fff5,transparent 52%),linear-gradient(125deg,transparent 38%,#ffffff08 45%,#ffffff03 55%,transparent 65%);pointer-events:none}
.tile-inner:after{content:"";position:absolute;inset:2px;border-radius:27px;border-top:1px solid #ffffff42;border-bottom:1px solid #ffffff1c;pointer-events:none}
.stack-logo{width:55px;height:55px;object-fit:contain;filter:drop-shadow(0 3px 4px #0003)}.stack-logo.logo-java{width:72px}.stack-logo.logo-aws{width:66px}.tile small{color:var(--color-text-muted);margin-top:var(--space-4)}.tile:hover .tile-inner{background:linear-gradient(145deg,#ffffff30,#ffffff0b 50%,#ffffff20);border-color:#ffffff70}
.primary{background:linear-gradient(135deg,#ffffff30,#ffffff12);color:var(--color-text);border:1px solid #ffffff4a;box-shadow:inset 0 1px 1px #ffffff55,0 8px 24px #0002;backdrop-filter:blur(18px);border-radius:15px}.nav-github{background:#ffffff08;backdrop-filter:blur(14px);border-color:#ffffff24}
@media(max-width:800px){.tile{width:78px}.tile-inner{height:78px;border-radius:23px}.tile-inner:after{border-radius:21px}.stack-logo{width:43px;height:43px}.stack-logo.logo-java{width:57px}.stack-logo.logo-aws{width:51px}}
@media(max-width:560px){.tile{width:64px}.tile-inner{height:64px;border-radius:var(--radius-lg)}.tile-inner:after{border-radius:18px}.stack-logo{width:36px;height:36px}.stack-logo.logo-java{width:48px}.stack-logo.logo-aws{width:43px}.tile small{margin-top:var(--space-2)}}
@media(min-width:561px) and (max-width:800px){.tile:has(.logo-aws){left:8%}.tile:has(.logo-docker){left:82%}}
/* Softer glass: faint surface, restrained reflections. */
.hero:after{background:radial-gradient(ellipse at 18% 24%,#6bbd9808,transparent 28%),radial-gradient(ellipse at 78% 25%,#588ce709,transparent 32%),radial-gradient(ellipse at 52% 80%,#cba7f206,transparent 33%)}
.tile-inner{border-color:#ffffff15;background:linear-gradient(145deg,#ffffff08,#ffffff03 60%,#ffffff06);backdrop-filter:blur(8px) saturate(105%);-webkit-backdrop-filter:blur(8px) saturate(105%);box-shadow:inset 0 1px 0 #ffffff12,0 8px 18px #0002}
.tile-inner:before{background:linear-gradient(145deg,#ffffff07,transparent 45%)}
.tile-inner:after{border-top-color:#ffffff0c;border-bottom-color:transparent}
.stack-logo{filter:none}.tile:hover .tile-inner{background:linear-gradient(145deg,#ffffff0e,#ffffff05);border-color:#ffffff26}

/* Uneven scale and scattered placement. */
.tile{width:var(--size)}.tile-inner{height:var(--size);border-radius:calc(var(--size)*.25)}.tile-inner:after{border-radius:calc(var(--size)*.25 - 2px)}
.stack-logo{width:54%;height:54%}.stack-logo.logo-java,.stack-logo.logo-aws{width:69%;height:58%}.stack-logo.logo-claude,.stack-logo.logo-codex{width:60%;height:60%}
@media(max-width:800px) and (min-width:561px){.tile{width:calc(var(--size)*.88)}.tile-inner{height:calc(var(--size)*.88)}}
@media(max-width:560px){.tile{width:var(--mobile-size)}.tile-inner{height:var(--mobile-size);border-radius:calc(var(--mobile-size)*.25)}.tile-inner:after{border-radius:calc(var(--mobile-size)*.25 - 2px)}}

/* Asymmetric scatter; shallow corners instead of soft bubbles. */
.tile-inner{border-radius:14px}.tile-inner:after{border-radius:var(--radius-md)}
@media(max-width:560px){.tile-inner{border-radius:11px}.tile-inner:after{border-radius:9px}}
@media(min-width:561px) and (max-width:800px){.tile:has(.logo-aws){left:6%}.tile:has(.logo-docker){left:82%}}

.tile-inner{animation-name:drift-a}.tile:nth-of-type(3n) .tile-inner{animation-name:drift-b}.tile:nth-of-type(3n + 1) .tile-inner{animation-name:drift-c}
@keyframes drift-a{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(5px,-12px) rotate(4deg)}}
@keyframes drift-b{0%,100%{transform:translate(0,-5px) rotate(2deg)}50%{transform:translate(-8px,6px) rotate(-5deg)}}
@keyframes drift-c{0%,100%{transform:translate(-3px,0) rotate(4deg)}50%{transform:translate(6px,-8px) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.tile-inner{animation:none}}

/* Independent breathing cycles make scale fluid rather than a ranking. */
.stack-logo{animation:breathe 12s ease-in-out infinite;animation-delay:var(--delay);transform-origin:center}
.tile:nth-of-type(3n) .stack-logo{animation-duration:15s;animation-name:breathe-wide}
.tile:nth-of-type(3n + 1) .stack-logo{animation-duration:17s}
.tile-inner{overflow:visible}.tile-inner:before{border-radius:inherit}
@keyframes breathe{0%,100%{scale:.85}45%{scale:1.14}75%{scale:.96}}
@keyframes breathe-wide{0%,100%{scale:1.08}45%{scale:.78}75%{scale:1.16}}
.paused .stack-logo{animation-play-state:paused}
@media(min-width:561px) and (max-width:800px){.tile:has(.logo-claude){left:77%}.tile:has(.logo-spring-boot){left:6%}}
@media(max-width:560px){.tile:has(.logo-claude){--mobile-x:76%;top:29%}.tile:has(.logo-nodejs){--mobile-x:72%}.tile:has(.logo-docker){--mobile-x:75%}.tile:has(.logo-spring-boot){--mobile-x:5%}}
@media(prefers-reduced-motion:reduce){.stack-logo{animation:none}}

.stack-logo{animation:none}
.tile-inner{animation-name:drift-a,breathe;animation-duration:var(--duration),16s;animation-delay:var(--delay),var(--delay)}
.tile:nth-of-type(3n) .tile-inner{animation-name:drift-b,breathe-wide;animation-duration:var(--duration),19s}
.tile:nth-of-type(3n + 1) .tile-inner{animation-name:drift-c,breathe;animation-duration:var(--duration),21s}
@media(prefers-reduced-motion:reduce){.tile-inner{animation:none}}

/* Restrained brand-tinted sunlight, clipped inside each tile. */
.hero::before{background-image:none}
.hero::after{inset:6% 3% 9%;background:radial-gradient(ellipse at 28% 30%,#6bbd9810,transparent 30%),radial-gradient(ellipse at 70% 32%,#588ce70f,transparent 32%),radial-gradient(ellipse at 50% 68%,#cba7f20d,transparent 34%);filter:blur(18px);opacity:.62;mask-image:radial-gradient(ellipse 88% 76% at center,#000 28%,transparent 82%);-webkit-mask-image:radial-gradient(ellipse 88% 76% at center,#000 28%,transparent 82%)}
.tile{isolation:isolate;pointer-events:none}
.tile-inner{overflow:hidden}
.tile-inner::before{inset:-8%;z-index:-1;background:radial-gradient(circle at 28% 24%,var(--glow) 0%,transparent 58%),linear-gradient(145deg,#ffffff07,transparent 45%);filter:blur(7px);opacity:.12;animation:sunlight-glow 7s ease-in-out infinite}
@keyframes sunlight-glow{0%,100%{transform:translate(-4px,-5px);opacity:.1}50%{transform:translate(4px,5px);opacity:.24}}
.paused .tile-inner::before{animation-play-state:paused}
@media(min-width:561px) and (max-width:800px){.tile:has(.logo-spring-boot),.tile:has(.logo-aws),.tile:has(.logo-claude),.tile:has(.logo-docker){left:var(--x)}}
@media(prefers-reduced-motion:reduce){.tile-inner::before{animation:none;transform:translate(0);opacity:.17}}

/* Apple-inspired liquid glass: refraction, edge light and real backdrop depth. */
.primary{background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.28),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.075) 48%,rgba(255,255,255,.14));color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 2px #0004,0 12px 34px #0004;backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);transition:background .18s,border-color .18s,box-shadow .18s}
.primary:hover{transform:none;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.32),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.23),rgba(255,255,255,.09) 48%,rgba(255,255,255,.16));border-color:rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 -1px 0 rgba(255,255,255,.1),0 1px 2px #0004,0 10px 30px #0004}
.nav-github{background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.16),transparent 44%),linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.035) 52%,rgba(255,255,255,.075));border-color:rgba(255,255,255,.19);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.035),0 6px 20px #0003;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
.nav-github:hover{background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.2),transparent 44%),linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.045) 52%,rgba(255,255,255,.09));border-color:rgba(255,255,255,.25)}
.tile-inner{animation:none;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.18),transparent 46%),linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.035) 52%,rgba(255,255,255,.075));border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(255,255,255,.045),0 12px 32px #0004;backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}
.stack-logo{display:block;image-rendering:auto}

/* Project detail modal */
button.project{width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.project-modal-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--space-6);background:rgba(3,4,6,.64);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);opacity:0;pointer-events:none;transition:opacity .22s ease}
.project-modal-backdrop.open{opacity:1;pointer-events:auto}
.project-modal{position:relative;width:min(760px,100%);max-height:min(86vh,860px);overflow:auto;border:1px solid rgba(255,255,255,.2);border-radius:24px;background:radial-gradient(circle at 16% 0%,rgba(255,255,255,.17),transparent 36%),linear-gradient(145deg,rgba(31,34,39,.9),rgba(13,15,18,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.035),0 30px 90px #000a;backdrop-filter:blur(36px) saturate(145%);-webkit-backdrop-filter:blur(36px) saturate(145%);transform:translateY(14px) scale(.985);transition:transform .24s ease;scrollbar-width:thin}
.project-modal-backdrop.open .project-modal{transform:none}
.project-modal-close{position:absolute;top:14px;right:14px;z-index:3;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(20,22,25,.54);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 18px #0004;backdrop-filter:blur(18px);cursor:pointer}
.project-modal-gallery{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:23px 23px 0 0;background:var(--color-surface)}
.project-modal-track{display:flex;width:100%;height:100%;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.project-modal-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:top center}
.project-modal-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(18,20,23,.5);color:#fff;backdrop-filter:blur(18px);cursor:pointer;transform:translateY(-50%)}
.project-modal-prev{left:14px}.project-modal-next{right:14px}
.project-modal-dots{position:absolute;left:50%;bottom:14px;display:flex;gap:var(--space-1);transform:translateX(-50%)}
.project-modal-dot{width:6px;height:6px;border-radius:var(--radius-pill);background:rgba(255,255,255,.38);transition:width .2s,background .2s}.project-modal-dot.active{width:18px;background:#fff}
.project-modal-body{padding:var(--space-6)}
.project-modal-meta{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-2);color:var(--color-text-muted);font-size:var(--text-sm)}
.project-modal-badge{padding:var(--space-1) var(--space-2);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-pill);background:rgba(255,255,255,.055);color:var(--color-text-secondary)}
.project-modal-body h3{margin:0;font-size:var(--text-4xl);letter-spacing:-1px;font-weight:650}.project-modal-subtitle{margin:var(--space-2) 0 0;color:var(--color-text-muted);font-size:var(--text-lg)}.project-modal-desc{margin:var(--space-5) 0;color:var(--color-text-secondary);font-size:var(--text-lg);line-height:1.75}
.project-modal-highlights{display:grid;gap:var(--space-2);margin:0 0 var(--space-5);padding:0;list-style:none}.project-modal-highlights li{position:relative;padding-left:var(--space-4);color:var(--color-text-secondary);font-size:var(--text-base);line-height:1.65}.project-modal-highlights li::before{content:"";position:absolute;left:1px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #b7e6bc88}
.project-modal-tech{display:flex;flex-wrap:wrap;gap:var(--space-2)}.project-modal-tech span{padding:var(--space-1) var(--space-2);border:1px solid rgba(255,255,255,.11);border-radius:var(--radius-pill);background:rgba(255,255,255,.045);color:var(--color-text-secondary);font-size:var(--text-xs)}
.project-modal-actions{display:flex;gap:var(--space-2);margin-top:var(--space-6)}.project-modal-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 var(--space-4);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-md);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.18);font-size:var(--text-base)}.project-modal-actions .modal-primary{background:rgba(248,248,250,.94);border-color:rgba(255,255,255,.7);color:var(--color-on-accent);font-weight:600}
body.modal-open{overflow:hidden}
@media(max-width:560px){.project-modal-backdrop{padding:var(--space-3)}.project-modal{border-radius:var(--radius-lg);max-height:90vh}.project-modal-gallery{border-radius:19px 19px 0 0}.project-modal-body{padding:var(--space-5)}.project-modal-body h3{font-size:var(--text-3xl)}.project-modal-desc{font-size:var(--text-base)}.project-modal-actions{flex-wrap:wrap}}

:root{--accent:var(--color-accent)}
.status{color:var(--color-accent-hover)}.status:before{background:var(--color-accent-hover)}
.project-modal-highlights li::before{box-shadow:0 0 12px #ff6a0070}
.hero::after{background:radial-gradient(ellipse at 28% 30%,#ff6a0014,transparent 30%),radial-gradient(ellipse at 70% 32%,#ff9b5010,transparent 32%),radial-gradient(ellipse at 50% 68%,#e743180b,transparent 34%)}
/* Introduction. */
.simple-intro{width:min(380px,calc(100% - 48px));text-align:left}.intro h1.simple-greeting{display:flex;flex-direction:column;gap:1px;margin:0;color:var(--color-text);font-size:clamp(36px,3.8vw,46px);font-weight:650;line-height:1.16;letter-spacing:-2.4px}.simple-greeting span:first-child{color:#9a9ea5;font-weight:430}.simple-greeting .name-accent{color:var(--color-accent-hover);font-weight:inherit}.simple-greeting span:last-child::after{content:".";color:var(--color-accent-hover)}.simple-intro .actions{justify-content:flex-start;margin-top:var(--space-8)}@media(max-width:560px){.simple-intro{width:min(280px,calc(100% - 42px));text-align:center}.intro h1.simple-greeting{font-size:var(--text-4xl);line-height:1.18;letter-spacing:-1.8px}.simple-intro .actions{justify-content:center;margin-top:var(--space-6)}}
.simple-intro{width:fit-content}
.intro h1.simple-greeting{gap:var(--space-1);line-height:1.21;letter-spacing:-1.5px}
@media(max-width:560px){.intro h1.simple-greeting{gap:2px;line-height:1.21;letter-spacing:-1.2px}}
.tile{scale:1.06}
@media(max-width:560px){.tile{scale:1.04}}
/* Larger reading sizes without changing the original layout. */
.project-head{gap:var(--space-3)}.project-head h3{line-height:1.4}.list-row h3{font-size:var(--text-base)}.list-row{gap:var(--space-4)}.history-row{grid-template-columns:115px 1fr}.history-row p{line-height:1.65}.tags{line-height:1.7;color:var(--color-text-muted)}.tile small{font-size:var(--text-xs)}.hero-bottom{font-size:var(--text-xs)}.intro h1.simple-greeting{font-size:clamp(40px,4.3vw,54px)}
.tile{transition:transform var(--duration-fast) linear;will-change:transform}
@media(max-width:560px){.intro h1.simple-greeting{font-size:var(--text-4xl)}.tile small{font-size:var(--text-xs)}.tile{will-change:auto}.list-row{align-items:flex-start;flex-wrap:wrap;gap:var(--space-2)}.list-row h3{flex:1 1 200px;font-size:var(--text-base)}.history-row{grid-template-columns:100px 1fr}.hero-bottom{font-size:10px}.project h3{font-size:var(--text-xl)}.project p{font-size:var(--text-base)}.tags{font-size:var(--text-xs)}.actions{font-size:var(--text-sm)}}
@media(prefers-reduced-motion:reduce){.tile{transition:none;will-change:auto}}