@tailwind base;@tailwind components;@tailwind utilities;:root{--color-bg:#1d1e20;--color-text:#dadadb;--color-muted:#9b9c9d;--color-accent:#0070f3;--color-accent-hover:#005bb5;--color-card-bg:#2a2b2d;--color-card-border:#3a3b3d;--radius:8px;--max-width:900px;--transition:0.3s ease}body.light-mode{--color-bg:#f5f5f5;--color-text:#1d1e20;--color-muted:#6b6c6d;--color-card-bg:#ffffff;--color-card-border:#dadadb}*,:after,:before{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;background-color:var(--color-bg);color:var(--color-text);transition:background-color var(--transition),color var(--transition);scrollbar-width:thin;scrollbar-color:var(--color-muted) transparent;overflow-x:hidden;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='5' fill='none' stroke='%230070f3' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%230070f3'/%3E%3Cline x1='16' y1='0' x2='16' y2='9' stroke='%230070f3' stroke-width='1' stroke-dasharray='2 2'/%3E%3Cline x1='16' y1='23' x2='16' y2='32' stroke='%230070f3' stroke-width='1' stroke-dasharray='2 2'/%3E%3Cline x1='0' y1='16' x2='9' y2='16' stroke='%230070f3' stroke-width='1' stroke-dasharray='2 2'/%3E%3Cline x1='23' y1='16' x2='32' y2='16' stroke='%230070f3' stroke-width='1' stroke-dasharray='2 2'/%3E%3C/svg%3E") 16 16,crosshair}.btn,.hover-bold,.project-card,.skill-card,a,button{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%23ffcc17' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23ffcc17' opacity='0.8'/%3E%3Cline x1='16' y1='2' x2='16' y2='8' stroke='%23ffcc17' stroke-width='1.5'/%3E%3Cline x1='16' y1='24' x2='16' y2='30' stroke='%23ffcc17' stroke-width='1.5'/%3E%3Cline x1='2' y1='16' x2='8' y2='16' stroke='%23ffcc17' stroke-width='1.5'/%3E%3Cline x1='24' y1='16' x2='30' y2='16' stroke='%23ffcc17' stroke-width='1.5'/%3E%3C/svg%3E") 16 16,pointer}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-muted);border-radius:3px}a{text-decoration:none;color:inherit}li,ul{list-style:none}img{user-select:none;-webkit-user-drag:none;max-width:100%;height:auto}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 1.25rem}.section{padding:3rem 0}.section-title{font-size:1.75rem;font-weight:700;margin-bottom:1.5rem}.nav{position:sticky;top:0;z-index:100;background-color:var(--color-bg);border-bottom:1px solid var(--color-card-border);transition:background-color var(--transition)}.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0}.nav-logo{font-size:1.25rem;font-weight:700}.nav-actions{display:flex;gap:.5rem}.btn,.nav-actions{align-items:center}.btn{display:inline-flex;justify-content:center;padding:.5rem 1rem;font-size:.85rem;font-weight:500;border:none;border-radius:var(--radius);transition:background-color var(--transition),transform var(--transition);line-height:1}.btn-primary{background-color:var(--color-accent);color:#fff}.btn-primary:hover{background-color:var(--color-accent-hover)}.btn-icon{background:none;border:none;color:var(--color-text);padding:.4rem;font-size:1.25rem;display:flex;align-items:center;transition:transform var(--transition)}.btn-icon:hover{transform:scale(1.15)}.hero{min-height:85vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 0;gap:.5rem}.hero-img{width:250px;height:250px;border-radius:50%;object-fit:cover;object-position:center 25%;border:3px solid var(--color-card-border);margin-bottom:1rem}.hero-greeting{font-size:2.2rem;font-weight:700;margin-bottom:0}.hero-subtitle{font-size:1.1rem;color:var(--color-muted);margin-top:0}.hero-body{max-width:700px;font-size:1.2rem;line-height:1.7;color:var(--color-muted);margin-top:1rem}.hero-body strong{color:var(--color-text)}.social-links{display:flex;gap:1rem;justify-content:center;margin-top:.5rem}.social-links a{color:var(--color-muted);font-size:1.5rem;transition:color var(--transition),transform var(--transition)}.social-links a:hover{color:var(--color-accent);transform:translateY(-2px)}.scroll-hint{margin-top:auto;animation:bounce 2s infinite}.scroll-mouse{width:24px;height:40px;border:2px solid var(--color-muted);border-radius:12px;position:relative;margin:0 auto}.scroll-dot{width:4px;height:8px;background:var(--color-muted);border-radius:2px;position:absolute;top:8px;left:50%;transform:translateX(-50%);animation:scroll-wheel 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}@keyframes scroll-wheel{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,14px)}}.about-grid{display:flex;flex-direction:column;gap:2rem}.about-text p{margin-bottom:1rem;line-height:1.7}.about-text strong{color:var(--color-text)}.about-highlights{display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:.5rem}.highlight-item{padding:.75rem 1rem;background:var(--color-card-bg);border-radius:var(--radius);border-left:3px solid var(--color-accent)}.highlight-item strong{display:block;margin-bottom:.15rem}.highlight-item span{color:var(--color-muted);font-size:.9rem}.about-img-wrapper{overflow:hidden;border-radius:var(--radius)}.about-img{width:100%;height:500px;object-fit:cover;filter:grayscale(100%);transition:filter .5s,transform .5s;border:2px solid var(--color-card-border)}.about-img:hover{filter:grayscale(0);transform:scale(1.02)}@media (max-width:768px){.about-img{height:300px}}.grid-skills{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}@media (max-width:768px){.grid-skills{grid-template-columns:repeat(2,1fr)}}.skill-card{background-color:var(--color-card-bg);color:var(--color-text);display:flex;justify-content:center;align-items:center;gap:0 .75rem;padding:1rem;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.2);transition:all .5s ease-in-out}.skill-card:hover{background-color:var(--hover-color)}.skill-card i{font-size:1.5rem}.nextjs-icon{width:1.5rem;height:1.5rem;display:inline-block;fill:currentColor}.projects-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}.project-card{background:var(--color-card-bg);border:1px solid var(--color-card-border);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;transition:transform var(--transition),box-shadow var(--transition)}.project-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.15)}.project-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.project-header .folder-icon{font-size:1.75rem;color:#ffcc17}.project-header .links{display:flex;gap:.75rem;font-size:1.25rem}.project-header .links a{transition:color var(--transition)}.project-header .links a:hover{color:var(--color-accent)}.project-card h3{font-size:1.15rem;font-weight:600;margin-bottom:.5rem}.project-card p{font-size:.9rem;color:var(--color-muted);line-height:1.6;flex-grow:1}.project-card .technologies{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;justify-content:flex-start}.project-card .tech-icon{width:2rem;height:2rem;display:flex;justify-content:center;align-items:center;font-size:2rem;color:#555;transition:color .3s ease,transform .3s ease}.project-card .tech-icon:hover{color:var(--color-accent);transform:scale(1.2)}.contact{text-align:center;padding:4rem 0}.contact p{max-width:500px;margin:0 auto 1.5rem;color:var(--color-muted)}.btn-lg{padding:.75rem 2rem;font-size:1rem}.footer-divider{border:none;height:1px;background:var(--color-card-border);margin:0}.footer{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;font-size:.85rem;color:var(--color-muted)}.footer .social-links a{font-size:1.25rem}.hover-bold{font-weight:700;transition:transform .3s ease,color .3s ease;display:inline-block}.hover-bold:hover{transform:scale(1.05);color:#ffffff}body.light-mode .hover-bold:hover{color:#000000}@media (min-width:640px){.about-highlights,.projects-grid{grid-template-columns:repeat(2,1fr)}.hero-greeting{font-size:2.8rem}}@media (min-width:768px){.about-grid{flex-direction:row;align-items:center;gap:2rem}.about-text{flex:1}.about-img-wrapper{flex:0 0 50%}.about-img{height:500px}.projects-grid{grid-template-columns:repeat(3,1fr)}.hero-img{width:300px;height:300px}}