:root{color-scheme:light;--bg: #fbf5ec;--bg-2: #f3e8d8;--surface: #fffdf9;--surface-glass: rgba(255, 253, 249, .82);--ink: #2d1f33;--ink-2: #6f5f76;--ink-3: #9a8ba0;--accent: #8a4baf;--accent-strong: #6f3a90;--accent-ink: #ffffff;--peach: #f6b99a;--peach-soft: #fde6d8;--butter: #ffe08a;--mint: #cfe9d6;--mint-strong: #4fb37a;--line: rgba(45, 31, 51, .12);--line-strong: rgba(45, 31, 51, .18);--shadow-color: rgba(90, 50, 110, .28);--tape: rgba(255, 224, 138, .75);--radius: 14px;--radius-lg: 20px;--radius-xl: 26px;--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.22, 1, .36, 1);--container: 1040px}:root[data-theme=dark]{color-scheme:dark;--bg: #1c1424;--bg-2: #261b31;--surface: #2b2038;--surface-glass: rgba(43, 32, 56, .78);--ink: #f7eef9;--ink-2: #bcaac4;--ink-3: #8b7a94;--accent: #c084fc;--accent-strong: #d3a3ff;--accent-ink: #1c1424;--peach: #f2a684;--peach-soft: #3f2a38;--butter: #f2d27a;--mint: #2c4a3a;--mint-strong: #6ed49a;--line: rgba(255, 255, 255, .1);--line-strong: rgba(255, 255, 255, .16);--shadow-color: rgba(0, 0, 0, .55);--tape: rgba(255, 224, 138, .42)}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}body{margin:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif;font-size:1.02rem;line-height:1.6;color:var(--ink);background:var(--bg);transition:background .35s ease,color .35s ease;overflow-x:hidden}img{max-width:100%;display:block}button{font-family:inherit}a{color:var(--accent)}::selection{background:var(--butter);color:#2d1f33}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}.App{position:relative;min-height:100vh;overflow:clip;padding:0 clamp(1rem,4vw,2.5rem)}.blob{position:absolute;z-index:0;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}.blob.blob-1{width:520px;height:520px;top:-160px;right:-120px;background:var(--accent);opacity:.22}.blob.blob-2{width:420px;height:420px;top:40vh;left:-180px;background:var(--peach);opacity:.35;animation-delay:-6s}.blob.blob-3{width:380px;height:380px;bottom:5%;right:-100px;background:var(--butter);opacity:.25;animation-delay:-12s}:root[data-theme=dark] .blob.blob-1{opacity:.18}:root[data-theme=dark] .blob.blob-2{opacity:.14}:root[data-theme=dark] .blob.blob-3{opacity:.08}@keyframes drift{0%{transform:translate(0) scale(1)}to{transform:translate(30px,40px) scale(1.08)}}.handwritten{font-family:Caveat,cursive;font-weight:700;color:var(--accent);font-size:1.35rem;line-height:1.2}h1,h2,h3{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 100,"opsz" 96;letter-spacing:-.02em;line-height:1.05;margin:0;color:var(--ink)}.section{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:clamp(3rem,8vw,6rem) 0}.section-title{display:flex;flex-direction:column;gap:.15rem;margin-bottom:clamp(1.5rem,4vw,2.5rem)}.section-title h2{font-size:clamp(2rem,5vw,3rem);font-weight:800}.note{display:inline-block;transform:rotate(-2deg);transform-origin:left}.underline-wrap{position:relative;display:inline-block;color:var(--accent)}.underline-wrap .squiggle{position:absolute;left:-2%;right:-2%;bottom:-.12em;width:104%;height:.32em;color:var(--peach);z-index:-1;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.2s var(--ease-out) .6s forwards}@keyframes draw{to{stroke-dashoffset:0}}.chips{display:flex;flex-wrap:wrap;gap:.4rem}.tag{display:inline-block;padding:.22rem .65rem;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);white-space:nowrap}.tag.tag-lg{font-size:.92rem;padding:.4rem .9rem;background:var(--surface);border:1.5px solid var(--line);box-shadow:0 2px 0 var(--line-strong);color:var(--ink);transition:transform .3s var(--ease-bounce),border-color .2s,color .2s}.tag.tag-lg:hover{transform:translateY(-3px) rotate(-2deg);border-color:var(--accent);color:var(--accent)}.chip{display:inline-block;padding:.25rem .7rem;border-radius:999px;font-size:.78rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.35rem;border-radius:999px;font-weight:800;font-size:.98rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease-bounce),box-shadow .25s ease,background .2s ease}.btn:hover{transform:translateY(-3px) rotate(-1deg)}.btn:active{transform:translateY(0) scale(.97)}.btn.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 var(--accent-strong)}.btn.btn-primary:hover{box-shadow:0 7px 0 var(--accent-strong),0 14px 30px -10px var(--shadow-color)}.btn.btn-primary:active{box-shadow:0 1px 0 var(--accent-strong)}.btn.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:0 3px 0 var(--line-strong)}.btn.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}.btn.btn-lg{font-size:1.1rem;padding:.9rem 1.7rem}.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 3px 0 var(--line-strong),0 14px 34px -20px var(--shadow-color)}.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}.reveal.is-visible{opacity:1;transform:none}.hero{position:relative;z-index:1;max-width:var(--container);margin:0 auto;min-height:100svh;padding:7rem 0 3rem;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(2rem,5vw,4rem)}.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;animation:rise .9s var(--ease-out) both}.hero-text h1{font-size:clamp(3.2rem,9vw,6.2rem);font-weight:900;display:flex;align-items:center;gap:.15em}.hero-hello{font-size:clamp(1.5rem,3vw,2rem);transform:rotate(-3deg);transform-origin:left bottom;margin-bottom:-.2rem}.wave{background:none;border:none;padding:0;cursor:pointer;font-size:.7em;line-height:1;display:inline-block;transform-origin:70% 70%;transition:transform .3s var(--ease-bounce)}.wave:hover{transform:rotate(14deg) scale(1.1)}.wave.waving{animation:wave 1s ease-in-out}@keyframes wave{0%,to{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(18deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(12deg)}}.hero-tagline{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 100,"opsz" 48;font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:600;letter-spacing:-.01em;margin:.25rem 0 0;color:var(--ink)}.typewriter{margin:.15rem 0 0;font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink-2);min-height:1.8em}.typewriter .typewriter-prefix{color:var(--ink-3);font-style:italic}.typewriter .cursor{display:inline-block;margin-left:2px;color:var(--accent);animation:blink .9s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}.hero-pill{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.4rem .9rem .4rem .7rem;border-radius:999px;background:var(--surface);border:1.5px dashed var(--line-strong);color:var(--ink-2);font-size:.9rem;text-decoration:none;transition:border-color .2s,transform .3s var(--ease-bounce)}.hero-pill b{color:var(--ink)}.hero-pill .pill-dot{width:9px;height:9px;border-radius:50%;background:var(--mint-strong);box-shadow:0 0 0 0 color-mix(in srgb,var(--mint-strong) 50%,transparent);animation:gh-pulse 1.8s ease-out infinite}.hero-pill:hover{border-color:var(--accent);transform:translateY(-2px) rotate(1deg)}.hero-photo-wrap{position:relative;display:flex;justify-content:center;animation:rise .9s var(--ease-out) .15s both}.hero-photo{position:relative;width:min(100%,300px);padding:12px 12px 3rem;background:var(--surface);border:1.5px solid var(--line);border-radius:6px;transform:rotate(3deg);box-shadow:0 3px 0 var(--line-strong),0 30px 50px -24px var(--shadow-color);transition:transform .5s var(--ease-bounce)}.hero-photo:hover{transform:rotate(-1deg) scale(1.02)}.hero-photo .user-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:3px;background:var(--bg-2);opacity:0;transition:opacity .6s ease}.hero-photo .user-photo.loaded{opacity:1}.hero-photo .photo-caption{position:absolute;left:12px;right:12px;bottom:.7rem;text-align:center;font-size:1.15rem;color:var(--ink-2)}.tape{position:absolute;top:-12px;width:92px;height:26px;background:var(--tape);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);box-shadow:0 1px 3px #0000001a;z-index:2}.tape.tape-left{left:-28px;transform:rotate(-38deg)}.tape.tape-right{right:-28px;transform:rotate(35deg)}.spark{position:absolute;color:var(--butter);animation:twinkle 2.6s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.08))}.spark.spark-1{top:2%;left:6%;color:var(--accent)}.spark.spark-2{top:20%;right:4%;animation-delay:-.9s}.spark.spark-3{bottom:4%;left:12%;color:var(--peach);animation-delay:-1.7s}@keyframes twinkle{0%,to{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.3) rotate(25deg);opacity:1}}@keyframes rise{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}.about-copy p{font-size:1.12rem;margin:0 0 1rem;color:var(--ink-2);max-width:58ch}.stack{margin-top:1.5rem}.stack .stack-label{display:inline-block;transform:rotate(-2deg);margin-bottom:.5rem}.stack .stack-chips{display:flex;flex-wrap:wrap;gap:.5rem}.off-clock{position:relative;background:var(--peach-soft);border:1.5px solid color-mix(in srgb,var(--peach) 50%,var(--line));border-radius:var(--radius-xl);padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem;transform:rotate(1deg);box-shadow:0 3px 0 var(--line-strong),0 20px 40px -24px var(--shadow-color)}.off-clock .off-clock-title{position:absolute;top:-1.1rem;left:1.25rem;padding:.1rem .7rem;background:var(--butter);color:#2d1f33;border-radius:999px;transform:rotate(-3deg);font-size:1.25rem}.off-clock .hobby{display:flex;gap:.8rem;align-items:flex-start}.off-clock .hobby .hobby-emoji{font-size:1.6rem;line-height:1;flex-shrink:0;transition:transform .3s var(--ease-bounce)}.off-clock .hobby:hover .hobby-emoji{transform:rotate(-12deg) scale(1.2)}.off-clock .hobby b{display:block;font-weight:800;color:var(--ink)}.off-clock .hobby p{margin:.1rem 0 .5rem;color:var(--ink-2);font-size:.95rem}.off-clock .hobby .piano{margin-top:.4rem}.featured{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;cursor:pointer;margin-bottom:2rem;box-shadow:0 4px 0 var(--line-strong),0 24px 50px -24px var(--shadow-color);transition:transform .45s var(--ease-bounce),border-color .3s}.featured:hover,.featured:focus-visible{transform:translateY(-6px) rotate(-.4deg);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));outline:none}.featured:hover .featured-image,.featured:focus-visible .featured-image{transform:scale(1.03)}.featured-media{position:relative;padding:.85rem 0 .85rem .85rem;display:flex;align-items:center}.featured-media .featured-image{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top;border-radius:calc(var(--radius-xl) - 8px);background:var(--bg-2);opacity:0;transition:opacity .6s ease,transform .7s var(--ease-out)}.featured-media .featured-image.loaded{opacity:1}.featured-media .featured-badge{position:absolute;top:1.6rem;left:1.6rem;padding:.35rem .8rem;border-radius:999px;background:var(--butter);color:#2d1f33;font-weight:800;font-size:.8rem;transform:rotate(-3deg);box-shadow:0 2px #0000001f}.featured-info{padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:.9rem;justify-content:center}.featured-info h3{font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:800}.featured-info p{margin:0;color:var(--ink-2);font-size:1.05rem}.featured-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:.4rem}.featured-actions .featured-note{display:inline-flex;align-items:center;gap:.2rem;font-size:1.25rem;color:var(--ink-2);white-space:nowrap;transform:rotate(3deg)}.featured-actions .featured-note .arrow{width:44px;height:22px;color:var(--peach)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.now-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;align-items:start}.building-card h3{font-size:1.6rem;font-weight:800;margin:.5rem 0 .4rem}.building-card p{margin:0 0 1rem;color:var(--ink-2)}.building-status{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--mint-strong);padding:.25rem .7rem .25rem .55rem;border-radius:999px;background:var(--mint)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mint-strong);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.35)}}.github-card{position:relative;padding-top:1.75rem}.github-card .card-note{position:absolute;top:-.9rem;left:1.25rem;padding:.05rem .6rem;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;transform:rotate(-2deg);font-size:1.2rem}.contact{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding-bottom:3rem}.contact .note{transform:rotate(-2deg)}.contact h2{font-size:clamp(2.4rem,7vw,4.2rem);font-weight:900}.contact>p{margin:0;color:var(--ink-2);font-size:1.1rem;max-width:42ch}.contact .btn-lg{margin-top:.75rem}.contact .links{display:flex;gap:1.25rem;margin-top:.75rem}.contact .links a{color:var(--ink-2);text-decoration:none;font-weight:700;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}.contact .links a:hover{color:var(--accent);border-color:var(--peach)}.contact .colophon{margin-top:2.5rem;font-size:.85rem;color:var(--ink-3)}@media (max-width: 860px){.hero{grid-template-columns:1fr;min-height:auto;padding-top:6.5rem;gap:2.5rem}.hero-photo-wrap{order:-1}.hero-photo{width:min(70%,240px);transform:rotate(-3deg)}.about-grid,.featured,.now-grid{grid-template-columns:1fr}.off-clock{transform:none;margin-top:1rem}.featured-media{padding:.85rem .85rem 0}}@media (max-width: 560px){.hero-text h1{font-size:clamp(2.8rem,15vw,3.6rem)}.hero-photo{padding-bottom:3.6rem}.hero-photo .photo-caption{font-size:1rem;line-height:1.1}.hero-actions .btn{flex:1;justify-content:center}.featured-actions{flex-direction:column;align-items:flex-start}.contact .links{flex-wrap:wrap;justify-content:center}}.project{--tilt: -1deg;position:relative;display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:.85rem;cursor:pointer;box-shadow:0 3px 0 var(--line-strong),0 12px 30px -16px var(--shadow-color);transition:transform .4s var(--ease-bounce),box-shadow .3s ease,border-color .3s ease}.project:hover,.project:focus-visible{transform:translateY(-6px) rotate(var(--tilt));border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 3px 0 var(--line-strong),0 24px 40px -18px var(--shadow-color);outline:none}.project:hover .project-image,.project:focus-visible .project-image{transform:scale(1.04)}.project .project-frame{aspect-ratio:16/9.5;border-radius:calc(var(--radius-lg) - 6px);overflow:hidden;background:var(--bg-2)}.project .project-image{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s ease,transform .6s var(--ease-out)}.project .project-image.loaded{opacity:1}.project .project-body{padding:1rem .5rem .5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}.project h3{font-family:Fraunces,serif;font-size:1.35rem;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--ink)}.project p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.55;flex:1}.project .project-technologies{display:flex;flex-wrap:wrap;gap:.35rem}.project .project-links{display:flex;gap:.4rem;margin-top:.25rem}.project .project-links a{font-weight:700;font-size:.88rem;color:var(--accent);text-decoration:none;padding:.3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);transition:background .2s,transform .2s var(--ease-bounce)}.project .project-links a:hover{background:color-mix(in srgb,var(--accent) 20%,transparent);transform:translateY(-2px)}.gh-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.gh-handle{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;color:var(--ink);text-decoration:none;padding:.4rem .85rem;border-radius:999px;background:var(--ink);color:var(--bg);transition:transform .3s var(--ease-bounce)}.gh-handle:hover{transform:translateY(-2px) rotate(-1deg)}.gh-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .8rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:.88rem}.gh-chip b{color:var(--ink);font-weight:800}.gh-chip.gh-muted{opacity:.6;font-style:italic}.gh-chip .pulse{width:8px;height:8px;border-radius:50%;background:var(--mint-strong);box-shadow:0 0 0 0 color-mix(in srgb,var(--mint-strong) 50%,transparent);animation:gh-pulse 1.8s ease-out infinite}@keyframes gh-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint-strong) 50%,transparent)}to{box-shadow:0 0 0 8px transparent}}.navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:1rem 1rem 0;pointer-events:none}.navbar-pill{pointer-events:auto;display:flex;align-items:center;gap:.25rem;padding:.4rem .5rem .4rem .9rem;border-radius:999px;background:var(--surface-glass);border:1.5px solid var(--line);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);box-shadow:0 2px 0 var(--line-strong),0 10px 30px -12px var(--shadow-color);transition:transform .35s var(--ease-bounce),box-shadow .3s ease}.navbar.scrolled .navbar-pill{box-shadow:0 2px 0 var(--line-strong),0 14px 40px -14px var(--shadow-color)}.navbar-brand{display:inline-flex;align-items:center;gap:.45rem;font-family:Fraunces,serif;font-weight:700;font-size:1.05rem;color:var(--ink);text-decoration:none;margin-right:.5rem}.navbar-brand .brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);transition:transform .3s var(--ease-bounce)}.navbar-brand:hover .brand-dot{transform:scale(1.3) rotate(20deg)}.navbar-links{display:flex;gap:.15rem}.navbar-links a{position:relative;padding:.35rem .7rem;border-radius:999px;color:var(--ink-2);text-decoration:none;font-size:.92rem;font-weight:600;transition:color .2s,background .2s}.navbar-links a:hover{color:var(--ink);background:var(--bg-2)}.navbar-links a.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.navbar-theme{margin-left:.25rem;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg-2);cursor:pointer;display:grid;place-items:center;font-size:.95rem;line-height:1;transition:transform .35s var(--ease-bounce),background .2s}.navbar-theme:hover{transform:rotate(-20deg) scale(1.08)}.navbar-theme:active{transform:scale(.92)}.navbar-theme .theme-icon{display:block}@media (max-width: 560px){.navbar{padding:.6rem .6rem 0}.navbar-pill{padding:.3rem .35rem .3rem .7rem;gap:0}.navbar-brand{font-size:.95rem;margin-right:.25rem}.navbar-links a{padding:.3rem .45rem;font-size:.82rem}}@media (max-width: 400px){.navbar-brand{font-size:0;gap:0;margin-right:.35rem}.navbar-brand .brand-dot{width:12px;height:12px}}.modal-backdrop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1rem;background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:modal-fade .25s ease both}.modal-content{position:relative;width:min(720px,100%);max-height:90vh;overflow-y:auto;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-xl);box-shadow:0 4px 0 var(--line-strong),0 30px 60px -20px #0006;animation:modal-pop .45s var(--ease-bounce) both}.modal-close{position:absolute;top:.75rem;right:.75rem;z-index:2;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--ease-bounce),background .2s}.modal-close:hover{transform:rotate(90deg) scale(1.1);background:var(--bg-2)}.modal-image-wrap{padding:.75rem .75rem 0}.modal-image-wrap .modal-image{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:calc(var(--radius-xl) - 8px);background:var(--bg-2)}.modal-body{padding:1.5rem 1.75rem 1.75rem;display:flex;flex-direction:column;gap:.9rem}.modal-body h2{font-family:Fraunces,serif;font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;margin:0;color:var(--ink)}.modal-body p{margin:0;color:var(--ink-2);line-height:1.65}.modal-metrics,.modal-technologies{display:flex;flex-wrap:wrap;gap:.4rem}.modal-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-pop{0%{opacity:0;transform:translateY(24px) scale(.96) rotate(-1deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}@media (max-width: 560px){.modal-body{padding:1.25rem 1.1rem}}.piano{display:flex;gap:3px;padding:6px;background:var(--ink);border-radius:10px;width:fit-content;box-shadow:inset 0 2px 6px #00000059}.piano-key{width:28px;height:64px;border:none;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#fffdf9 0%,#f1e8e0 100%);box-shadow:0 3px #c9bdb2;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font:700 .7rem Nunito,sans-serif;color:#9a8b9e;transition:transform .08s ease,box-shadow .08s ease,background .08s ease;touch-action:manipulation}.piano-key:hover{background:linear-gradient(180deg,#fff 0%,#f6ecf9 100%)}.piano-key:active{transform:translateY(3px);box-shadow:0 0 #c9bdb2;background:linear-gradient(180deg,#efe0f7 0%,#e3cdf1 100%);color:var(--accent)}.piano-key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}