:root { --bg-colour: #f8f9fa; --secondary-bg-colour: #ffffff; --sidebar-bg: #1a1a1a; --text-colour: #1a1a1a; --secondary-text: rgba(26, 26, 26, 0.6); --accent: #007bff; --accent-click: #229Dff; --border-color: #e0e0e0; --card-height: 140px; --expo-out: cubic-bezier(0.16, 1, 0.3, 1); --spring-out: cubic-bezier(0.34, 1.56, 0.64, 1); --fluid-ease: cubic-bezier(0.22, 1, 0.36, 1);}[data-theme="dark"] { --bg-colour: #0a0a0a; --secondary-bg-colour: #161616; --sidebar-bg: #000000; --text-colour: #ffffff; --secondary-text: rgba(255, 255, 255, 0.5); --accent: #3a86ff; --accent-click: #118Cff; --border-color: #333333;}* { box-sizing: border-box;}body { margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; background-color: var(--bg-colour); color: var(--text-colour); height: 100vh; overflow: hidden;}.website-container { display: flex; height: 100vh; width: 100vw;}.sidebar { width: 240px; background-color: var(--sidebar-bg); color: #ffffff; padding: 24px; flex-shrink: 0; display: flex; flex-direction: column; z-index: 20;}.sidebar h2 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2rem; opacity: 0.8;}.sidebar ul { list-style: none; padding: 0; margin: 0;}.sidebar li { margin-bottom: 10px;}.sidebar a { color: rgba(255, 255, 255, 0.7); text-decoration: none; padding: 10px 15px; display: block; border-radius: 6px; transition: all 0.2s ease;}.sidebar a:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff;}#section-header { padding: 40px 40px 20px 40px; margin: 0; font-weight: 700; background-color: var(--bg-colour); z-index: 15;}#scroll-container { flex-grow: 1; overflow-y: auto; position: relative; width: 100%;}#runway { position: absolute; top: 0; left: 0; width: 1px; opacity: 0; pointer-events: none;}#visible-items { position: absolute; top: 0; left: 0; width: 100%; padding: 0 40px 40px 40px; display: flex; flex-direction: column; will-change: transform;}.email-card { background-color: var(--secondary-bg-colour); border: 1px solid var(--border-color); position: absolute; padding: 24px; border-radius: 12px; margin-bottom: 16px; height: var(--card-height); overflow: hidden; will-change: transform, height, box-shadow, opacity, border-color; transition:     height 0.8s var(--fluid-ease),     top 0.8s var(--fluid-ease),     transform 0.8s var(--fluid-ease),     box-shadow 0.8s var(--fluid-ease),     opacity 0.8s var(--fluid-ease),     border-color 0.4s ease; cursor: pointer; z-index: 1;}.email-card:hover:not(.expanded) { transform: translateY(-4px) scale(1.01); border-color: var(--accent); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);}.email-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}.email-card.expanded { max-height: 80vh; overflow-y: auto; z-index: 10; transform: scale(1.01); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15); border-color: var(--accent); cursor: default; scrollbar-width: thin; scrollbar-color: var(--accent) transparent;}.email-card .sender { font-size: 0.85rem; color: var(--secondary-text); display: block; margin-bottom: 4px;}.email-card .subject { margin: 0 0 10px 0; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: white-space 0.2s ease;}.email-card.expanded .subject { white-space: normal; font-size: 1.4rem; font-weight: 700;}.content-area { flex: 1; display: flex; flex-direction: column; min-width: 0;}.email-card .content { font-size: 0.95rem; line-height: 1.6; color: var(--secondary-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0.6; transition: opacity 0.4s ease, margin 0.5s var(--expo-out);}.email-card.expanded .content { display: block; opacity: 1; -webkit-line-clamp: unset; color: var(--text-colour); margin-top: 20px;}.email-card.unread .subject { font-weight: 800; color: var(--text-colour);}.email-card.unread::before { content: ""; position: absolute; left: 8px; top: 24px; width: 8px; height: 8px; background-color: var(--accent); border-radius: 50%;}.email-card.read { opacity: 0.9;}.row { display: flex; flex-direction: row; flex-wrap: wrap;}.hint { opacity: 0; color: var(--accent); transform: translateY(10px); transition: all 0.4s var(--expo-out); transition-delay: 0.2s; padding-right: 12px; margin-top: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;}.email-card.expanded .hint { display: block; opacity: 1; transform: translateY(0);}#view-contacts { padding: 20px;}.text-btn { opacity: 0; color: var(--accent); padding-right: 12px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;}.text-btn:hover { text-decoration: underline;}.text-btn:active { color: var(--accent-click); text-decoration: underline;}.right-align { width: 100%; justify-content: flex-end;}.contact-card { background-color: var(--secondary-bg-colour); border-radius: 12px; display: flex; align-items: center; padding: 24px; border-bottom: 1px solid #ddd; gap: 16px; overflow: hidden; position: relative; will-change: transform, height, box-shadow, opacity, border-color; transition:     height 0.8s var(--fluid-ease),     transform 0.8s var(--fluid-ease),     box-shadow 0.8s var(--fluid-ease),     opacity 0.8s var(--fluid-ease),     border-color 0.4s ease; cursor: pointer; z-index: 1;}.contact-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);}.contact-card:hover .text-btn { display: block; opacity: 1;}.avatar { width: 40px; height: 40px; background: #007bff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;}.contact-info { display: flex; flex-direction: column; flex-grow: 1;}