/* ========================================================================== GLOBAL STYLES - Design system for Aakash Dadhich's portfolio Architecture: - CSS custom properties drive the entire theme system - Toggle [data-theme="light"] on to switch themes - Font stack: Outfit (headings) + Karla (body) + IBM Plex Mono (code/labels) Why Outfit for headings: Outfit is a geometric sans-serif that renders cleanly at all weights and sizes without the horizontal stretching or deep descenders that Syne exhibits at heavy weights. Weight 700 looks sharp and confident at display sizes without distorting. ========================================================================== */ /* ─── Google Fonts ─────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Karla:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap'); /* ─── Design Tokens (Dark Theme - default) ─────────────────────────────── */ :root { /* Backgrounds */ --bg: #090e17; --bg-surface: #0f1924; --bg-elevated: #162234; --bg-hover: #1e2e42; /* Accent - Matrix-adjacent green */ --accent: #3ddc84; --accent-dim: rgba(61, 220, 132, 0.10); --accent-glow: rgba(61, 220, 132, 0.22); --accent-dark: #1a6b3c; /* Typography */ --text: #dce8f5; --text-sec: #8ba3be; --text-muted: #4a6275; /* Borders */ --border: rgba(61, 220, 132, 0.12); --border-sub: rgba(255, 255, 255, 0.055); /* Effects */ --shadow: 0 4px 32px rgba(0, 0, 0, 0.45); --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.35); --radius: 10px; --radius-lg: 16px; /* Fonts */ --font-head: 'Outfit', system-ui, sans-serif; --font-body: 'Karla', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* Transitions */ --transition: 0.2s ease; --transition-slow: 0.4s ease; /* Nav height (for content offset) */ --nav-h: 64px; } /* ─── Light Theme Overrides ─────────────────────────────────────────────── */ [data-theme="light"] { --bg: #f0f4f8; --bg-surface: #ffffff; --bg-elevated: #e2eaf3; --bg-hover: #d4dfec; --accent: #1a8f42; --accent-dim: rgba(26, 143, 66, 0.10); --accent-glow: rgba(26, 143, 66, 0.20); --accent-dark: #0e5c2a; --text: #0f1923; --text-sec: #3a5570; --text-muted: #8099b0; --border: rgba(26, 143, 66, 0.14); --border-sub: rgba(0, 0, 0, 0.07); --shadow: 0 4px 32px rgba(0, 0, 0, 0.10); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08); } /* ─── Reset & Base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--text); background-color: var(--bg); background-image: linear-gradient(rgba(61, 220, 132, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 220, 132, 0.025) 1px, transparent 1px); background-size: 60px 60px; background-attachment: fixed; min-height: 100vh; transition: background-color var(--transition-slow), color var(--transition-slow); } [data-theme="light"] body { background-image: linear-gradient(rgba(26, 143, 66, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 143, 66, 0.03) 1px, transparent 1px); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { cursor: pointer; border: none; background: none; font: inherit; } ul, ol { list-style: none; } /* ─── Typography Scale ──────────────────────────────────────────────────── */ h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; color: var(--text); } /* h1 is intentionally modest here - the large hero display size is applied specifically via .me-name on the /me page only. This prevents page titles (Professional Experience, Projects, etc.) from rendering at an enormous, stretched weight on wide displays. */ h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; } h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); } h3 { font-size: clamp(1rem, 1.5vw, 1.2rem); } h4 { font-size: 1rem; font-weight: 600; } .mono { font-family: var(--font-mono); } .accent { color: var(--accent); } .muted { color: var(--text-muted); font-size: 0.875rem; } /* ─── Layout Utilities ──────────────────────────────────────────────────── */ .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 800px; } .page-content { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 80px; min-height: 100vh; } .section-header { margin-bottom: 48px; } .section-header h1 { margin-bottom: 8px; } .section-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; display: block; } .page-divider { width: 48px; height: 2px; background: var(--accent); margin-top: 16px; border-radius: 2px; } /* ─── Navigation ────────────────────────────────────────────────────────── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; background: rgba(9, 14, 23, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: background var(--transition-slow); } [data-theme="light"] .site-nav { background: rgba(240, 244, 248, 0.88); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nav-brand-mono { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--border); padding: 2px 8px; border-radius: 4px; line-height: 1.5; } .nav-brand-name { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--text); display: none; letter-spacing: 0.01em; } @media (min-width: 480px) { .nav-brand-name { display: block; } } .nav-links { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; } .nav-link { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 400; color: var(--text-sec); /* strip every box property explicitly */ background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0; margin: 0; outline: none; cursor: pointer; white-space: nowrap; letter-spacing: 0.02em; position: relative; transition: color var(--transition); } /* Underline via pseudo-element - completely decoupled from border */ .nav-link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s ease; } .nav-link:hover { color: var(--accent); } .nav-link:hover::after { transform: scaleX(1); } .nav-link--active { color: var(--accent); } .nav-link--active::after { transform: scaleX(1); } .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Theme toggle button */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-sec); display: flex; align-items: center; justify-content: center; transition: all var(--transition); font-size: 0.9rem; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); } .theme-icon-sun, .theme-icon-moon { display: none; line-height: 1; } [data-theme="dark"] .theme-icon-moon { display: block; } [data-theme="light"] .theme-icon-sun { display: block; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; padding: 0; } .nav-hamburger span { display: block; width: 100%; height: 2px; background: var(--text-sec); border-radius: 2px; transition: all var(--transition); } .nav-hamburger:hover span { background: var(--accent); } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } } /* ─── Mobile Drawer ─────────────────────────────────────────────────────── */ .nav-drawer { position: fixed; top: 0; right: -320px; width: 280px; height: 100vh; z-index: 200; background: var(--bg-surface); border-left: 1px solid var(--border); transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; padding: 24px 20px; /* gap between items handled per-element below */ } .nav-drawer.is-open { right: 0; } .nav-drawer-close { align-self: flex-end; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-sec); border-radius: var(--radius); transition: all var(--transition); margin-bottom: 24px; flex-shrink: 0; } .nav-drawer-close:hover { color: var(--accent); background: var(--accent-dim); } .nav-drawer-link { display: block; /* full-width row, never inline */ font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-sec); padding: 13px 16px; border-radius: var(--radius); border: 1px solid transparent; transition: all var(--transition); margin-bottom: 6px; /* gap between rows - not gap: on parent */ line-height: 1; } .nav-drawer-link:last-child { margin-bottom: 0; } .nav-drawer-link:hover, .nav-drawer-link--active { color: var(--accent); background: var(--accent-dim); border-color: var(--border); } .nav-overlay { display: none; position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); } .nav-overlay.is-visible { display: block; } /* ─── Footer ────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border-sub); padding: 28px 24px 32px; text-align: center; color: var(--text-muted); font-size: 0.82rem; font-family: var(--font-mono); display: flex; flex-direction: column; gap: 8px; align-items: center; } .footer-links { display: flex; align-items: center; gap: 4px; } .footer-copy { font-size: 0.78rem; color: var(--text-muted); opacity: 0.7; } .site-footer a { color: var(--accent); transition: opacity var(--transition); } .site-footer a:hover { opacity: 0.7; } /* ─── /me Page ──────────────────────────────────────────────────────────── */ .me-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; padding-top: 24px; } @media (min-width: 768px) { .me-hero { flex-direction: row; text-align: left; align-items: flex-start; gap: 56px; } } .me-headshot-wrap { flex-shrink: 0; position: relative; } .me-headshot { width: 160px; height: 160px; border-radius: 50%; border: 3px solid var(--accent); object-fit: cover; box-shadow: 0 0 0 6px var(--accent-dim), 0 0 40px var(--accent-glow); display: block; } .me-headshot-placeholder { width: 160px; height: 160px; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 0 6px var(--accent-dim), 0 0 40px var(--accent-glow); background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 2.2rem; font-weight: 500; color: var(--accent); flex-shrink: 0; } .me-content { flex: 1; } .me-title { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; } .me-name { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; } .me-subtitle { font-size: 1.1rem; color: var(--text-sec); margin-bottom: 24px; font-weight: 300; font-family: var(--font-mono); min-height: 1.7em; display: flex; align-items: center; justify-content: center; /* centred on mobile to match the rest of the stacked layout */ gap: 2px; } @media (min-width: 768px) { .me-subtitle { justify-content: flex-start; } } /* The typed text span */ .typewriter-text { color: var(--accent); } /* Blinking block cursor */ .typewriter-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); vertical-align: middle; margin-left: 1px; animation: cursorBlink 0.9s step-end infinite; } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .me-bio { color: var(--text-sec); font-size: 1rem; line-height: 1.8; max-width: 600px; } .me-bio p + p { margin-top: 16px; } /* Stats - one stat per line on mobile, single row on desktop */ .me-stats { display: flex; flex-direction: column; /* stack vertically on mobile */ gap: 16px; margin-top: 32px; align-items: center; } .me-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; } /* 768px+ - same breakpoint as me-hero row layout, so stats go horizontal when photo moves to the side */ @media (min-width: 768px) { .me-stats { flex-direction: row; flex-wrap: nowrap; gap: 32px; justify-content: flex-start; align-items: flex-start; } .me-stat { align-items: flex-start; flex-shrink: 0; } } .me-stat-value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; color: var(--accent); } .me-stat-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } /* ─── Professional Experience ───────────────────────────────────────────── */ .experience-list { display: flex; flex-direction: column; gap: 32px; } .experience-company { background: var(--bg-surface); border: 1px solid var(--border-sub); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition); } .experience-company:hover { border-color: var(--border); } .company-header { padding: 24px 28px 26px; border-bottom: 1px solid var(--border-sub); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .company-name { font-size: 1.25rem; font-weight: 700; font-family: var(--font-head); color: var(--text); } .company-location { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; } .company-total-tenure { font-family: var(--font-mono); font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; align-self: center; border: 1px solid transparent; } /* Current company — green box, green text */ .company-tenure--present { color: var(--accent); background: var(--accent-dim); border-color: var(--border); } /* Past company — grey box, grey text, muted */ .company-tenure--past { color: var(--text-muted); background: var(--bg-elevated); border-color: var(--border-sub); opacity: 0.6; } .role-list { display: flex; flex-direction: column; } .role-item { padding: 20px 28px; border-bottom: 1px solid var(--border-sub); border-left: 3px solid transparent; transition: all var(--transition); cursor: default; } .role-item:last-child { border-bottom: none; } .role-item:hover { background: var(--bg-elevated); border-left-color: var(--accent); } .role-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .role-title { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--text); } .role-dates { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border-sub); padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } .role-dates--present { color: var(--accent); border-color: var(--border); } .role-dates--past { color: var(--text-muted); opacity: 0.6; } .role-bullets { display: flex; flex-direction: column; gap: 6px; padding-left: 4px; } .role-bullet { font-size: 0.92rem; color: var(--text-sec); line-height: 1.65; display: flex; gap: 10px; align-items: flex-start; } .role-bullet::before { content: '▹'; color: var(--accent); font-size: 0.8rem; flex-shrink: 0; margin-top: 3px; } /* ─── Personal Projects ─────────────────────────────────────────────────── */ .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .projects-grid { grid-template-columns: 1fr; } } .project-card { background: var(--bg-surface); border: 1px solid var(--border-sub); border-radius: var(--radius-lg); padding: 28px 24px; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; } .project-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0; transition: opacity var(--transition); } .project-card:hover { transform: translateY(-4px); border-color: var(--border); box-shadow: var(--shadow-card), 0 0 24px var(--accent-glow); } .project-card:hover::before { opacity: 1; } .project-card-number { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.08em; } .project-card-title { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--text); line-height: 1.3; } .project-card-desc { font-size: 0.9rem; color: var(--text-sec); line-height: 1.6; flex: 1; } .project-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .project-tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--border); padding: 2px 8px; border-radius: 4px; } .project-card-cta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-top: 4px; transition: color var(--transition); } .project-card:hover .project-card-cta { color: var(--accent); } /* ─── Project Modal ─────────────────────────────────────────────────────── */ .project-modal-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(5, 9, 16, 0.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 0.2s ease forwards; } .project-modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 720px; max-height: 85vh; overflow-y: auto; position: relative; animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 48px var(--accent-glow); } .modal-close { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-sub); color: var(--text-sec); display: flex; align-items: center; justify-content: center; font-size: 1rem; z-index: 10; transition: all var(--transition); } .modal-close:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .modal-body { padding: 28px 32px 36px; clear: both; } .modal-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; } .modal-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 16px; line-height: 1.2; } .modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } .modal-divider { height: 1px; background: var(--border-sub); margin: 20px 0; } .modal-desc { color: var(--text-sec); font-size: 0.95rem; line-height: 1.8; } .modal-desc p + p { margin-top: 14px; } /* Images shown in the expanded modal only - never on card fronts */ .modal-images { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; align-items: center; /* centres all images horizontally */ } /* Base style shared by all modal images */ .modal-image { height: auto; border-radius: var(--radius); border: 1px solid var(--border-sub); display: block; } /* Architecture diagrams - constrained to 70% so they don't overwhelm the modal */ .modal-image--diagram { width: 65%; } /* Full-width images - screenshots, thumbnails etc. */ .modal-image--full { width: 100%; } /* ─── Certifications ────────────────────────────────────────────────────── */ .certs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .cert-card { background: var(--bg-surface); border: 1px solid var(--border-sub); border-radius: var(--radius-lg); padding: 22px 24px; transition: border-color var(--transition), transform var(--transition); border-left: 3px solid var(--accent); /* flex column so cert-footer is always pushed to the bottom */ display: flex; flex-direction: column; } .cert-card:hover { border-top-color: var(--border); border-right-color: var(--border); border-bottom-color: var(--border); transform: translateY(-2px); } .cert-card--expired { border-left-color: var(--text-muted); opacity: 0.65; } .cert-provider { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; } .cert-card--expired .cert-provider { color: var(--text-muted); } .cert-name { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--text); margin-bottom: 10px; line-height: 1.3; } .cert-footer { display: flex; flex-direction: column; gap: 6px; margin-top: auto; /* pushes footer to the bottom regardless of title height */ padding-top: 12px; } .cert-dates { display: flex; flex-direction: column; gap: 3px; } .cert-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; } .cert-footer-bottom { display: flex; align-items: center; justify-content: flex-start; } .cert-status { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 4px; } .cert-status--active { color: var(--accent); background: var(--accent-dim); border: 1px solid var(--border); } .cert-status--expired { color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border-sub); } .certs-empty { text-align: center; padding: 64px 24px; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.875rem; } /* ─── Contact ───────────────────────────────────────────────────────────── */ .contact-grid { display: flex; flex-direction: column; gap: 16px; max-width: 480px; } .contact-btn { display: flex; align-items: center; gap: 20px; padding: 22px 28px; background: var(--bg-surface); border: 1px solid var(--border-sub); border-radius: var(--radius-lg); color: var(--text-sec); font-size: 1rem; font-weight: 500; font-family: var(--font-body); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-align: left; width: 100%; text-decoration: none; border-left: 3px solid transparent; } .contact-btn:hover { background: var(--bg-elevated); border-color: var(--border); border-left-color: var(--accent); color: var(--text); transform: translateX(4px); box-shadow: var(--shadow-card); } .contact-btn-icon { width: 44px; height: 44px; border-radius: var(--radius); background: var(--bg-elevated); border: 1px solid var(--border-sub); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--transition); color: var(--accent); font-size: 1.2rem; } .contact-btn:hover .contact-btn-icon { background: var(--accent-dim); border-color: var(--accent); } .contact-btn-content { flex: 1; display: flex; flex-direction: column; gap: 6px; } .contact-btn-label { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; } .contact-btn-value { font-size: 0.92rem; color: var(--text-sec); line-height: 1; } .contact-btn:hover .contact-btn-value { color: var(--text); } .contact-btn-arrow { color: var(--text-muted); font-size: 1rem; transition: all var(--transition); flex-shrink: 0; } .contact-btn:hover .contact-btn-arrow { color: var(--accent); transform: translateX(4px); } /* ─── Loading skeleton ──────────────────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius); } /* ─── Scrollbar ─────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }