:root{--ctp-base:#24273a;--ctp-mantle:#1e2030;--ctp-crust:#181926;--ctp-surface0:#363a4f;--ctp-surface1:#494d64;--ctp-surface2:#5b6078;--ctp-overlay0:#6e738d;--ctp-overlay1:#8087a2;--ctp-overlay2:#939ab7;--ctp-subtext0:#a5adcb;--ctp-subtext1:#b8c0e0;--ctp-text:#cad3f5;--ctp-lavender:#b7bdf8;--ctp-blue:#8aadf4;--ctp-sapphire:#7dc4e4;--ctp-sky:#91d7e3;--ctp-teal:#8bd5ca;--ctp-green:#a6da95;--ctp-yellow:#eed49f;--ctp-peach:#f5a97f;--ctp-maroon:#ee99a0;--ctp-red:#ed8796;--ctp-mauve:#c6a0f6;--ctp-pink:#f5bde6;--ctp-flamingo:#f0c6c6;--ctp-rosewater:#f4dbd6;--color-bg:var(--ctp-base);--color-bg-card:var(--ctp-mantle);--color-bg-elevated:var(--ctp-surface0);--color-bg-code:var(--ctp-crust);--color-text:var(--ctp-text);--color-text-muted:var(--ctp-subtext0);--color-text-secondary:var(--ctp-subtext1);--color-accent:var(--ctp-lavender);--color-link:var(--ctp-blue);--color-border:var(--ctp-surface0);--font-mono:"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-size:14px;line-height:1.6}#root{max-width:900px;padding:0 var(--space-6);margin:0 auto}::selection{background:var(--ctp-surface2);color:var(--ctp-text)}:focus-visible{outline:2px solid var(--ctp-lavender);outline-offset:2px}a{color:var(--color-link);text-decoration:none;transition:color .2s}a:hover{color:var(--ctp-lavender)}h1,h2,h3{margin:0;line-height:1.3}p{margin:0}ul{margin:0;padding:0}img{max-width:100%;display:block}@media (width<=767px){body{font-size:13px}#root{padding:0 var(--space-4)}}.nav{gap:var(--space-2);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);display:flex}.nav__link{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:.875rem;transition:background .2s,color .2s}.nav__link:hover{background:var(--color-bg-elevated);color:var(--color-text)}.nav__link.active{background:var(--color-bg-elevated);color:var(--ctp-lavender)}.footer{border-top:1px solid var(--color-border);padding:var(--space-8) 0;text-align:center;color:var(--ctp-surface2);font-size:.8rem}.hero{padding:var(--space-16) 0 var(--space-12);border-bottom:1px dashed var(--ctp-surface1);text-align:center;flex-direction:column;align-items:center;display:flex}.hero__avatar{border:3px solid var(--ctp-lavender);object-fit:cover;width:120px;height:120px;margin-bottom:var(--space-6);border-radius:50%}.hero__name{color:var(--color-text);font-size:2.25rem;font-weight:700}.hero__nickname{color:var(--ctp-lavender);font-weight:400}.hero__info{color:var(--color-text-muted);margin-top:var(--space-2)}.hero__links{gap:var(--space-3);margin-top:var(--space-6);display:flex}.hero__social{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-bg-elevated);border-radius:var(--radius-md);color:var(--color-text);font-size:.875rem;transition:background .2s,color .2s;display:inline-flex}.hero__social:hover{background:var(--ctp-surface1);color:var(--ctp-lavender)}@media (width<=767px){.hero{padding:var(--space-8) 0 var(--space-8)}.hero__name{font-size:1.5rem}.hero__avatar{width:100px;height:100px}}.tech-badge{border-radius:var(--radius-sm);color:var(--badge-color);background:color-mix(in srgb, var(--badge-color) 12%, transparent);border:1px solid color-mix(in srgb, var(--badge-color) 25%, transparent);white-space:nowrap;align-items:center;padding:4px 10px;font-size:.75rem;line-height:1;display:inline-flex}.project-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);gap:var(--space-6);flex-direction:column;display:flex}.project-card__image{border-radius:var(--radius-md);border:1px solid var(--color-border);width:100%}.project-card__header{align-items:baseline;gap:var(--space-3);flex-wrap:wrap;display:flex}.project-card__title{color:var(--color-text);font-size:1.25rem;font-weight:700}.project-card__subtitle{color:var(--color-text-muted);font-size:.875rem}.project-card__description{color:var(--color-text-secondary);line-height:1.7}.project-card__architecture{background:var(--color-bg-code);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-family:var(--font-mono);color:var(--ctp-teal);border:1px solid var(--color-border);font-size:.8rem;display:block}.project-card__section-title{color:var(--ctp-overlay2);text-transform:uppercase;letter-spacing:.5px;margin:0 0 var(--space-3);font-size:.8rem;font-weight:500}.project-card__tech-list{gap:var(--space-2);flex-wrap:wrap;display:flex}.project-card__features{gap:var(--space-2);flex-direction:column;list-style:none;display:flex}.project-card__features li{color:var(--color-text-secondary);padding-left:var(--space-4);position:relative}.project-card__features li:before{content:">";color:var(--ctp-green);font-weight:700;position:absolute;left:0}.project-card__links{gap:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--color-border);flex-wrap:wrap;display:flex}.project-card__link{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-bg-elevated);border-radius:var(--radius-md);color:var(--ctp-blue);font-size:.8rem;transition:background .2s;display:inline-flex}.project-card__link:hover{background:var(--ctp-surface1);color:var(--ctp-blue)}.project-card__link--demo,.project-card__link--demo:hover{color:var(--ctp-red)}@media (width<=767px){.project-card{padding:var(--space-6);gap:var(--space-4)}.project-card__header{gap:var(--space-1);flex-direction:column}}.projects{padding:var(--space-12) 0;gap:var(--space-8);flex-direction:column;display:flex}.section-heading{color:var(--color-text);font-size:1.5rem;font-weight:500}.section-heading__prefix{color:var(--ctp-surface2);-webkit-user-select:none;user-select:none}@media (width<=767px){.projects{padding:var(--space-8) 0;gap:var(--space-6)}.section-heading{font-size:1.25rem}}