:root{--color-background:#fff;--color-surface:#f7f9fc;--color-text:#111827;--color-muted:#5f6877;--color-accent:#2563eb;--color-accent-dark:#1d4ed8;--color-accent-light:#eff6ff;--color-border:#dbe1ea}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background-color:var(--color-background);color:var(--color-text);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}a{color:inherit}button,input,textarea{font:inherit}h1,h2,h3{letter-spacing:-.02em;line-height:1.15}p{margin-top:0}.project-page{background-color:var(--color-background);color:var(--color-text)}.project-page-hero{background-color:var(--color-accent-light);border-bottom:1px solid var(--color-border);padding:80px 10% 60px}.project-page-label{color:var(--color-accent);text-transform:uppercase;letter-spacing:1px;margin-top:24px;margin-bottom:12px;font-size:.85rem;font-weight:700}.project-page-hero h1{max-width:900px;margin:0 0 20px;font-size:3.8rem}.project-page-intro{max-width:800px;color:var(--color-muted);font-size:1.2rem;line-height:1.7}.back-link{color:var(--color-text);font-weight:600;text-decoration:none}.back-link:hover{color:var(--color-accent)}.project-page-content{max-width:1100px;margin:0 auto;padding:20px 10% 80px}.project-page-content section{border-bottom:1px solid var(--color-border);padding:50px 0}.project-page-content section:last-child{border-bottom:none}.project-page-content h2{color:var(--color-accent);margin-top:0;font-size:2rem}.project-page-content p{max-width:800px;color:var(--color-muted);font-size:1.05rem;line-height:1.7}.experiment-list{gap:18px;margin-top:28px;display:grid}.experiment-card{border:1px solid var(--color-border);background-color:var(--color-surface);border-radius:12px;padding:22px}.experiment-card h3{color:var(--color-text);margin-top:0}.experiment-card p{margin:8px 0}@media (width<=800px){.project-page-hero{padding:60px 6% 40px}.project-page-hero h1{font-size:2.5rem}.project-page-content{padding:10px 6% 60px}.experiment-list{grid-template-columns:1fr}}.project-page-content a{color:var(--color-accent);font-weight:600;text-decoration:none}.project-page-content a:hover{text-decoration:underline}.project-page-content strong{color:var(--color-text)}header{z-index:100;background-color:var(--color-background);border-bottom:1px solid var(--color-border);width:100%;position:sticky;top:0}nav{justify-content:space-between;align-items:center;padding:20px 10%;display:flex}.nav-left{justify-self:start}.nav-left h2 a{color:var(--color-accent);text-decoration:none}.nav-center{justify-self:center;gap:24px;display:flex}.nav-right{justify-self:end}.nav-left h2{color:var(--color-accent);margin:0;font-size:1.3rem}nav a{color:var(--color-text);font-weight:500;text-decoration:none}nav a:hover{color:var(--color_accent)}@media (width<=800px){nav{grid-template-columns:1fr;gap:16px;padding:18px 6%}.nav-left,.nav-center,.nav-right{justify-self:center}.nav-center{flex-wrap:wrap;justify-content:center;gap:16px}}footer{border-top:1px solid var(--color-border);background-color:var(--color-background);text-align:center;color:var(--color-muted);padding:24px 10%;font-size:.9rem}main{width:100%}section{padding:80px 10%}section h2{margin-bottom:24px;font-size:2rem}#projects,#about,#contact{scroll-margin-top:90px}#projects{background-color:var(--color-accent-light);align-items:center;min-height:75vh;display:flex}.project-showcase{border:1px solid var(--color-border);background-color:var(--color-background);border-radius:16px;width:100%;max-width:1000px;margin:0 auto;padding:40px}.project-showcase>p:first-child{text-transform:uppercase;letter-spacing:1px;color:#666;margin-top:0;font-size:.9rem;font-weight:600}.project-showcase h1{margin:12px 0 20px;font-size:3rem}.project-showcase>p{color:#444;max-width:700px;font-size:1.1rem;line-height:1.6}.project-demo{align-items:center;gap:16px;margin:30px 0;display:flex}.project-demo button{color:#fff;cursor:pointer;background-color:#111;border:none;border-radius:8px;padding:12px 20px;font-weight:600}.project-demo button:hover{background-color:#333}.project-showcase>a{color:#111;margin-top:10px;font-weight:600;text-decoration:none;display:inline-block}.project-showcase>a:hover{text-decoration:underline}.image-preview{object-fit:cover;border-radius:12px;width:220px;height:220px}.project-demo button:disabled{opacity:.5}.prediction-result{background-color:#fafafa;border:1px solid #ddd;border-radius:10px;margin-top:20px;padding:16px}.carousel-controls{justify-content:center;align-items:center;gap:16px;margin-top:30px;display:flex}.carousel-controls button{color:#111;cursor:pointer;background-color:#fff;border:1px solid #ccc;border-radius:50%;width:42px;height:42px;font-size:1.2rem}.carousel-controls button:hover:not(:disabled){background-color:#eee}.carousel-controls button:disabled{opacity:.35;cursor:not-allowed}.carousel-controls span{color:#555;font-weight:600}.project-content{grid-template-columns:1fr 1fr;align-items:center;gap:48px;display:grid}.project-info,.project-demo-area{min-width:0}.project-info h1{margin-top:12px;margin-bottom:20px}.project-info p{line-height:1.6}.project-info a{color:#111;margin-top:16px;font-weight:600;text-decoration:none;display:inline-block}.project-info a:hover{text-decoration:underline}@media (width<=800px){.project-content{grid-template-columns:1fr;gap:32px}.project-showcase{padding:24px}.project-showcase h1{font-size:2.2rem}.portfolio-intro h1{font-size:2rem}}.project-actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.project-actions a{color:#111;background-color:#fff;border:1px solid #ccc;border-radius:8px;padding:11px 16px;font-weight:600;text-decoration:none;display:inline-block}.project-actions a:first-child{background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.project-actions a:hover{background-color:#eee;text-decoration:none}.project-actions a:first-child:hover{background-color:var(--color-accent-dark)}.technology-list{flex-wrap:wrap;gap:8px;margin-top:20px;display:flex}.technology-list span{border:1px solid var(--color-border);background-color:var(--color-accent-light);color:var(--color-accent-dark);border-radius:999px;padding:7px 11px;font-size:.9rem;font-weight:600}.project-info>p:first-child{color:var(--color-accent);font-weight:700}#projects{background-color:var(--color-accent-light);flex-direction:column;justify-content:center;align-items:stretch;gap:36px;min-height:75vh;display:flex}.portfolio-intro{width:100%;max-width:1000px;margin:0 auto}.portfolio-intro h1{max-width:850px;margin:10px 0 16px;font-size:2.5rem;line-height:1.15}.portfolio-intro>p:last-child{max-width:700px;color:var(--color-muted);margin:0;font-size:1.05rem;line-height:1.6}.portfolio-status{color:var(--color-accent);margin:0;font-weight:700}.project-demo{border:1px solid var(--color-border);background-color:var(--color-surface);border-radius:14px;flex-direction:column;align-items:stretch;gap:18px;padding:28px;display:flex}.project-demo h3{margin:0;font-size:1.4rem}.demo-description{color:#666;margin:0;line-height:1.5}.project-demo button{background-color:var(--color-accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px 20px;font-weight:600}.project-demo button:hover:not(:disabled){background-color:var(--color-accent-dark)}.project-demo button:disabled{opacity:.5;cursor:not-allowed}.image-preview{object-fit:cover;width:220px;height:220px}.image-preview-wrapper{flex-direction:column;gap:12px;display:flex}.image-preview{object-fit:cover;border:1px solid #ddd;border-radius:10px;width:100%;max-height:260px}.image-preview-wrapper button{align-self:flex-start}.prediction-result{border:1px solid var(--color-border);background-color:var(--color-accent-light);border-radius:10px;margin-top:20px;padding:16px}.prediction-result p{margin:6px 0}.prediction-error{color:#b00020;margin-top:16px;font-weight:600}@media (width<=800px){.project-demo{flex-direction:column;align-items:stretch}.image-preview{width:100%;height:auto;max-height:260px}.project-demo button{width:100%}}.upload-control{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.upload-control label{border:1px solid var(--color-accent);background-color:var(--color-accent);color:#fff;cursor:pointer;border-radius:8px;padding:10px 16px;font-weight:600;display:inline-block}.upload-control label:hover{background-color:var(--color-accent-dark)}.upload-control span{color:#666;font-size:.9rem;display:block}.file-input{display:none}.backend-wakeup-message{color:var(--color-muted);margin:0;font-size:.9rem;line-height:1.5}#about{max-width:900px}#about h2{color:var(--color-accent)}#about p{max-width:750px;color:var(--color-muted);font-size:1.1rem;line-height:1.7}.about-highlights{flex-wrap:wrap;gap:10px;margin-bottom:28px;display:flex}.about-highlights span{border:1px solid var(--color-border);background-color:var(--color-accent-light);color:var(--color-accent-dark);border-radius:999px;padding:8px 12px;font-size:.9rem;font-weight:600}#contact{background-color:var(--color-surface)}#contact h2{color:var(--color-accent)}#contact p{max-width:700px;color:var(--color-muted);font-size:1.1rem;line-height:1.7}.contact-links{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.contact-links a{border:1px solid var(--color-border);background-color:var(--color-background);color:var(--color-text);border-radius:8px;padding:11px 16px;font-weight:600;text-decoration:none}.contact-links a:hover{border-color:var(--color-accent);color:var(--color-accent)}
