:root{--color-bg: #19233a;--color-surface: #121a2b;--color-surface-alt: #151f34;--color-border: #2b2f36;--color-text: #e4e6eb;--color-text-strong: #f5f6fa;--color-text-muted: #b0b3b8;--color-text-subtle: #888;--color-accent: #00bfa6;--color-accent-hover: #03dac5;--color-accent-blue: #4f9cff;--color-card-bg: rgba(24, 43, 75, .8);--color-card-hover: rgba(22, 39, 68, .7);--color-card-border: rgba(255, 255, 255, .08);--color-shadow-soft: rgba(0, 0, 0, .06);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--shadow-elevated: 0 4px 20px rgba(0, 0, 0, .4);--transition-fast: .2s ease}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:var(--color-bg);color:var(--color-text);display:flex;flex-direction:column;min-height:100vh}#root{display:flex;flex-direction:column}.app-container{display:flex;flex-direction:column;min-height:100vh}main{flex:1;padding:2rem;max-width:900px;margin:0 auto;width:100%}button{background-color:var(--color-accent);color:var(--color-bg);border:none;padding:.6rem 1.2rem;border-radius:var(--radius-md);cursor:pointer;font-weight:600;letter-spacing:.3px;transition:background-color var(--transition-fast),transform var(--transition-fast)}button:hover{background-color:var(--color-accent-hover)}h1,h2,h3{color:var(--color-text-strong)}a{text-decoration:none;color:var(--color-text-muted);font-weight:500;position:relative;transition:color var(--transition-fast)}a:hover,a.active{color:var(--color-accent)}.page-content{padding:2rem;max-width:900px;margin:2rem auto;width:100%;flex-grow:1;display:flex;flex-direction:column;gap:1.5rem}.page-content h1{font-size:2.5rem;color:var(--color-text-strong);margin-bottom:1rem;text-align:center}.page-content p{font-size:1.1rem;line-height:1.6;color:var(--color-text);margin-bottom:1rem;text-align:center}.page-content ul{list-style:none;padding:0;text-align:center}.page-content ul li{margin-bottom:.5rem}.page-content ul li a{color:var(--color-accent-blue);text-decoration:none}.page-content ul li a:hover{text-decoration:underline}.hero-section{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:60vh;padding:3rem 0;background-color:var(--color-surface-alt);border-radius:var(--radius-lg);margin-top:2rem}.hero-section h1{font-size:3.5rem;margin-bottom:1rem;color:var(--color-text-strong)}.hero-section p{font-size:1.3rem;color:var(--color-text-muted);max-width:700px;margin-bottom:2rem}.hero-section .button-primary{background-color:var(--color-accent);color:var(--color-bg);border:none;padding:.8rem 1.8rem;border-radius:var(--radius-md);cursor:pointer;font-weight:600;letter-spacing:.5px;font-size:1.1rem;transition:background-color var(--transition-fast),transform var(--transition-fast)}.hero-section .button-primary:hover{background-color:var(--color-accent-hover);transform:translateY(-2px)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:var(--color-surface);color:var(--color-text);border-bottom:1px solid var(--color-border);box-shadow:0 2px 6px var(--color-shadow-soft);position:sticky;top:0;z-index:1000}.navbar-logo{font-size:1.4rem;font-weight:600;letter-spacing:.5px;color:var(--color-text-strong);-webkit-user-select:none;user-select:none}.navbar-links{display:flex;gap:1.5rem}.navbar-links a{color:var(--color-text-muted);text-decoration:none;font-weight:500;transition:color var(--transition-fast),border-bottom-color var(--transition-fast);border-bottom:2px solid transparent;padding-bottom:2px}.navbar-links a:hover{color:var(--color-text)}.navbar-links .active{color:var(--color-accent);border-bottom-color:var(--color-accent-blue)}.action-button{position:relative;display:inline-flex;flex-direction:column;align-items:center}.action-button__btn{display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;padding:1.1rem;border-radius:var(--radius-lg);border:1px solid color-mix(in srgb,var(--color-accent) 40%,transparent);background:color-mix(in srgb,var(--color-accent) 15%,transparent);color:color-mix(in srgb,var(--color-accent) 85%,var(--color-text));font-size:1.6rem;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.action-button__btn:hover{background:var(--color-accent);color:var(--color-text-strong);transform:scale(1.03);box-shadow:0 6px 18px color-mix(in srgb,var(--color-accent) 28%,black)}.action-button__btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 40%,transparent)}.action-button__tooltip{position:absolute;bottom:-2.6rem;background:var(--color-surface-alt);color:var(--color-text);font-size:.85rem;padding:.35rem .6rem;border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity var(--transition-fast),transform var(--transition-fast)}.action-button:hover .action-button__tooltip,.action-button:focus-within .action-button__tooltip{opacity:1;transform:translateY(0)}.action-button__tooltip:after{content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:transparent transparent var(--color-surface-alt) transparent}.action-group{display:flex;gap:1.25rem;align-items:center;justify-content:center;flex-wrap:wrap}.project-card{background:var(--color-card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);padding:1.5rem;transition:all var(--transition-fast);border:1px solid var(--color-card-border);display:flex;flex-direction:column;justify-content:space-between;min-height:220px;width:100%;box-sizing:border-box}.project-card:hover{background:var(--color-card-hover);box-shadow:0 6px 25px var(--color-shadow-soft);transform:translateY(-3px)}.project-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;border-bottom:1px solid var(--color-border);padding-bottom:.5rem}.project-card-title{font-size:1.25rem;font-weight:600;color:var(--color-text-strong);letter-spacing:-.02em}.project-card-body{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:.95rem;text-align:center}.project-card-actions{margin-top:1rem;text-align:center}.project-card-link{display:inline-block;background-color:var(--color-accent);color:var(--color-bg);border:none;padding:.6rem 1.2rem;border-radius:var(--radius-md);cursor:pointer;font-weight:600;letter-spacing:.3px;transition:background-color var(--transition-fast),transform var(--transition-fast)}.project-card-link:hover{background-color:var(--color-accent-hover);transform:translateY(-1px)}.app-footer{background-color:var(--color-surface);padding:1rem;text-align:center;color:var(--color-text-subtle);border-top:1px solid var(--color-border);font-size:.9rem;margin-top:auto;width:100%}