:root { --bg-color:#f5f5f2; --text-dark:#202423; --text-gray:#626a67; --accent-color:#314c43; --accent-hover:#162b23; --card-bg:#fff; --border-color:#dedfd9; --font-head:'Plus Jakarta Sans',sans-serif; --font-body:'Inter',sans-serif; --footer-bg:#202624; --primary-orange:#506d61; --nav-dark:#202624; }
body.dark-mode { --bg-color:#181d1b; --text-dark:#f1f3ed; --text-gray:#adb7b1; --accent-color:#bad0c1; --accent-hover:#dfede3; --card-bg:#242c28; --border-color:#39463e; --footer-bg:#101613; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:40px; }
body { background:var(--bg-color); color:var(--text-dark); font-family:var(--font-body); line-height:1.6; padding-bottom:100px; }
a { color:inherit; } button { font:inherit; cursor:pointer; } img { max-width:100%; } [hidden] { display:none !important; }
::selection { background:#c6d4ca; color:#1b2a22; }
:focus-visible { outline:2px solid var(--accent-color); outline-offset:5px; }
.skip-link { position:fixed; top:-100px; left:24px; padding:12px 20px; z-index:30000; background:var(--card-bg); color:var(--text-dark); border-radius:10px; }
.skip-link:focus { top:20px; }
#progress-container { position:fixed; inset:0 0 auto; height:2px; z-index:10001; } #progress-bar { background:var(--accent-color); height:100%; width:0; }
/* Compact icon dock, following the reference navigation. */
.custom-navbar { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:9999; display:flex; align-items:center; gap:10px; width:max-content; max-width:calc(100% - 20px); padding:10px 12px; border:1px solid #ffffff24; border-radius:22px; background:rgba(27,33,30,.93); color:#e1e7e1; box-shadow:0 10px 40px #0004; backdrop-filter:blur(20px); }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a { position:relative; display:flex; align-items:center; justify-content:center; width:43px; height:43px; color:#b6c1b8; border:1px solid transparent; border-radius:13px; text-decoration:none; font-size:1rem; transition:background .2s,color .2s,transform .2s; }
.nav-links a:hover,.nav-links a.active { color:#fff; background:#ffffff14; border-color:#ffffff12; }
.nav-links a:hover { transform:translateY(-2px); }
.dock-label { position:absolute; left:50%; bottom:calc(100% + 20px); transform:translate(-50%,5px); padding:6px 10px; border-radius:6px; background:#202624; color:white; font-size:.7rem; font-weight:500; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s,transform .15s; }
.nav-links a:hover .dock-label,.nav-links a:focus-visible .dock-label { opacity:1; transform:translate(-50%,0); }
.logo { position:relative; width:43px; height:43px; flex-shrink:0; border-radius:50%; background:#c0ccc1; overflow:hidden; border:2px solid #ffffff38; }
.logo img { width:100%; height:100%; object-fit:cover; object-position:top; padding-top:3px; }
.dock-brand { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#theme-toggle { display:flex; align-items:center; justify-content:center; width:43px; height:43px; background:none; border:0; color:#b6c1b8; font-size:1rem; border-radius:13px; }
#theme-toggle:hover { background:#ffffff14; color:#fff; }
#menu-toggle,#mobile-nav { display:none; }
/* Monochrome portrait and oversized editorial headline. */
.hero-section { padding:24px 24px 0; }
.hero-stage { position:relative; min-height:620px; height:min(760px,87svh); overflow:hidden; border-radius:26px; background:#a5aca9; background-image:radial-gradient(ellipse at 50% 65%,#c5cac5,transparent 60%); }
body.dark-mode .hero-stage { background-color:#68756d; background-image:radial-gradient(ellipse at 50% 65%,#859388,transparent 60%); }
.main-title { margin:0; font-family:var(--font-head); font-weight:500; }
.hero-name { position:absolute; top:34px; left:36px; color:#fff; font-size:.9rem; line-height:1.4; letter-spacing:-.2px; z-index:4; }
.hero-name .orange-text { color:inherit; font-weight:600; }
.hello-badge { position:absolute; top:71px; left:36px; padding:5px 12px; border:1px solid #ffffff60; color:#fff; border-radius:20px; font-size:.7rem; z-index:4; }
.hero-role-line { position:absolute; bottom:47px; left:0; width:100%; z-index:3; text-align:center; color:#f7f8f4; font-size:clamp(56px,7.6vw,132px); line-height:1.06; letter-spacing:-.065em; font-weight:500; white-space:nowrap; }
.txt-type { border-right:2px solid #ffffff70; padding-right:6px; }
.hero-center-wrapper { position:static; }
.image-wrapper { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(51%,580px); height:83%; display:flex; align-items:flex-end; justify-content:center; z-index:2; }
.profile-img { display:block; width:auto; height:100%; max-width:none; object-fit:contain; filter:none; }
.orange-bg-circle { display:none; }
.left-stat { position:absolute; top:30px; right:35px; width:290px; z-index:3; color:#f8faf5; text-align:right; }
.left-stat p { font-size:.8rem; line-height:1.55; }
.left-stat p br { display:none; }
.right-stat { position:absolute; right:7%; top:48%; z-index:4; text-align:left; color:#fff; }
.right-stat .stars { font-size:.65rem; letter-spacing:2px; margin-bottom:12px; }
.right-stat h3 { font-family:var(--font-head); font-size:2.5rem; line-height:1.1; letter-spacing:-1px; margin-bottom:7px; font-weight:500; }
.right-stat p { font-size:.7rem; line-height:1.4; }
.hero-bottom { max-width:1280px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 10px 38px; }
.hero-actions-new { display:flex; align-items:center; gap:24px; }
.hero-socials { display:flex; gap:10px; }
.hero-socials a { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--border-color); border-radius:50%; text-decoration:none; background:var(--card-bg); font-size:1.05rem; }
.hero-socials a:hover { background:var(--text-dark); color:var(--bg-color); }
.btn-download-cv { display:inline-flex; align-items:center; gap:13px; text-decoration:none; border-bottom:1px solid var(--text-gray); padding:9px 0; font-size:.8rem; font-weight:500; }
.action-buttons { display:flex; gap:12px; align-items:center; }
.btn-portfolio,.btn-hire { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:12px 24px; border-radius:30px; text-decoration:none; font-size:.8rem; font-weight:500; }
.btn-portfolio { background:var(--text-dark); color:var(--bg-color); border:1px solid var(--text-dark); }
.btn-hire { border:1px solid var(--border-color); }
.btn-hire:hover { border-color:var(--text-dark); }
.stats-section { display:grid; grid-template-columns:repeat(4,1fr); padding:45px max(28px,calc((100% - 1160px)/2)); border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); gap:24px; }
.stat-box { text-align:center; border-right:1px solid var(--border-color); }.stat-box:last-child { border:0; }
.stat-box h2 { font:500 clamp(1.8rem,3vw,2.8rem)/1.2 var(--font-head); letter-spacing:-1px; margin-bottom:10px; }
.stat-box p { color:var(--text-gray); font-size:.7rem; text-transform:uppercase; letter-spacing:1px; }
.section,.skills-section { padding:105px max(28px,calc((100% - 1180px)/2)); }
.section[data-kicker]::before,.skills-section[data-kicker]::before { content:attr(data-kicker); display:block; color:var(--text-gray); font-size:.65rem; letter-spacing:2px; font-weight:500; margin-bottom:25px; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:45px; }
.section-header h2,.skills-section h2 { font:500 clamp(2rem,4.5vw,4rem)/1.12 var(--font-head); letter-spacing:-2px; }
.section-header p { color:var(--text-gray); font-size:.9rem; line-height:1.6; max-width:330px; }
.skills-section { padding-top:85px; padding-bottom:85px; }
.skills-section h2 { margin-bottom:35px; }.premium-emoji { font-size:1.5rem; vertical-align:middle; }
.title-line { display:none; }
.skills-track { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.skills-repeat { display:none; }
.skill-card { display:flex; align-items:center; gap:12px; border:1px solid var(--border-color); border-radius:12px; min-height:75px; padding:16px; background:var(--card-bg); }
.skill-card i { font-size:1.7rem; filter:grayscale(.4); }.skill-card span { font-size:.8rem; font-weight:500; }
#services { background:var(--footer-bg); color:#edf0ea; border-radius:26px; margin:0 24px; padding-left:max(30px,calc((100% - 1180px)/2 - 24px)); padding-right:max(30px,calc((100% - 1180px)/2 - 24px)); }
#services::before,#services .section-header p { color:#a9b9b0; }
.grid-container { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.card { min-width:0; }
#services .card { padding:32px; border:1px solid #ffffff22; border-radius:18px; background:#ffffff04; }
.card-icon { margin-bottom:40px; font-size:1.7rem; color:#b8c9bd; }
.card h3 { font:500 1.4rem/1.25 var(--font-head); margin-bottom:16px; letter-spacing:-.5px; }
.card p { font-size:.88rem; line-height:1.75; margin-bottom:25px; color:var(--text-gray); }
#services .card p { color:#b5c1b8; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:23px; }
.tags span { display:inline-block; font-size:.65rem; line-height:1.5; font-weight:500; padding:5px 10px; border-radius:20px; background:var(--bg-color); border:1px solid var(--border-color); color:var(--text-gray); }
#services .tags { margin-bottom:0; }#services .tags span { background:#ffffff08; color:#d0dcd2; border-color:#ffffff22; }
#gallery .grid-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 26px; }
.project-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--border-color); padding:0 0 28px; }
.project-card::before { content:attr(data-project-number); position:absolute; top:16px; left:16px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#202624cf; color:#fff; font-size:.6rem; z-index:2; }
.img-wrapper { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:18px; margin-bottom:25px; background:#e8e9e3; border:1px solid var(--border-color); }
body.dark-mode .img-wrapper { background:#303b33; }
.img-wrapper img { width:100%; height:100%; object-fit:contain; padding:15px; transition:transform .4s; }
.project-card:hover .img-wrapper img { transform:scale(1.02); }
.project-card h3 { font-size:1.55rem; }
.project-title-link { text-decoration:none; }
.project-title-link:hover { color:var(--accent-color); }
a.img-wrapper { display:block; }
.project-detail-link { display:inline-flex; align-items:center; justify-content:space-between; gap:35px; margin:0 0 20px; padding:12px 18px; border:1px solid var(--border-color); border-radius:30px; background:var(--text-dark); color:var(--bg-color); text-decoration:none; font-size:.8rem; font-weight:500; }
.project-detail-link:hover { box-shadow:0 4px 15px #0002; }
.project-card p { font-size:.86rem; line-height:1.8; }
.project-card .tags { margin-top:auto; }
.link-arrow { display:inline-flex; align-items:center; gap:8px; color:var(--accent-color); font-size:.8rem; line-height:1.5; font-weight:600; text-decoration:none; border-bottom:1px solid var(--border-color); padding-bottom:4px; }
.link-arrow:hover { border-color:var(--accent-color); }
.slideshow-wrapper img.slide { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
.slideshow-wrapper img.slide.active { opacity:1; }.slideshow-wrapper img.slide:first-child { position:relative; }
.premium-footer { background:var(--footer-bg); color:#eff4eb; margin:0 24px; border-radius:26px; padding:80px max(30px,calc((100% - 1180px)/2 - 24px)) 38px; }
.contact-callout { position:relative; margin-bottom:65px; }
.section-kicker { font-size:.65rem; letter-spacing:2px; color:#a9b9b0; margin-bottom:24px; }
.contact-callout h2 { font:500 clamp(3rem,7vw,6.5rem)/1.05 var(--font-head); letter-spacing:-4px; margin-bottom:30px; }
.contact-callout h2 span { color:#b7c7bb; }
.contact-email { display:inline-flex; align-items:center; gap:20px; font-size:clamp(.9rem,1.4vw,1.1rem); text-decoration:none; border-bottom:1px solid #ffffff35; padding-bottom:10px; overflow-wrap:anywhere; }
.contact-email span { font-size:1.4rem; }
.footer-top,.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:25px; }
.footer-brand { display:flex; align-items:center; gap:12px; }.brand-icon { font-size:1.7rem; }
.footer-brand h3 { font:500 1.3rem var(--font-head); margin-bottom:7px; }.footer-brand p { color:#a9b9b0; font-size:.75rem; }
.footer-nav { display:flex; flex-wrap:wrap; gap:23px; }.footer-nav a { color:#bdcbc0; font-size:.75rem; text-decoration:none; padding:8px 0; }
.footer-nav a:hover { color:white; }
.footer-divider { height:1px; background:#ffffff20; margin:30px 0; }
.footer-bottom p { color:#a9b9b0; font-size:.7rem; }
.footer-socials { display:flex; gap:10px; }.footer-socials a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #ffffff25; border-radius:50%; text-decoration:none; color:#eff4eb; }
.design-credit { font-size:.6rem; color:#a2b0a7; margin-top:25px; }.design-credit a { text-underline-offset:3px; }
.float-wa,.to-top { position:fixed; right:25px; width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; z-index:100; box-shadow:0 5px 20px #0001; }
.float-wa { bottom:27px; background:var(--text-dark); color:var(--bg-color); font-size:1.35rem; }
.to-top { bottom:85px; border:1px solid var(--border-color); background:var(--card-bg); color:var(--text-dark); opacity:0; visibility:hidden; pointer-events:none; }
.to-top.active { opacity:1; visibility:visible; pointer-events:auto; }
.reveal { position:relative; }.js-reveal .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s,transform .6s; }.js-reveal .reveal.active { opacity:1; transform:none; }
@media(max-width:1100px) { .hero-stage { min-height:560px; height:75svh; }.hero-role-line { font-size:7.5vw; }.image-wrapper { width:57%; height:80%; }.right-stat { right:5%; }.section,.skills-section { padding-left:40px; padding-right:40px; }.skills-track { grid-template-columns:repeat(5,minmax(0,1fr)); }.skill-card { flex-direction:column; text-align:center; padding:16px 8px; }.section-header h2,.skills-section h2 { letter-spacing:-1.5px; }#services,.premium-footer { padding-left:35px; padding-right:35px; }#services .card { padding:25px; } }
@media(max-width:768px) { .hero-section { padding:14px 14px 0; }.hero-stage { border-radius:20px; min-height:570px; height:80svh; }.hero-name { top:25px; left:24px; font-size:.75rem; }.hello-badge { top:58px; left:24px; }.left-stat { top:25px; right:24px; width:200px; }.left-stat p { font-size:.65rem; }.image-wrapper { width:76%; height:76%; }.hero-role-line { font-size:7.8vw; bottom:40px; }.right-stat { right:6%; top:43%; }.right-stat h3 { font-size:1.9rem; }.right-stat p { max-width:90px; }.hero-bottom { padding:22px 7px 30px; }.hero-actions-new { gap:16px; }.hero-socials { gap:7px; }.hero-socials a { width:36px; height:36px; }.btn-download-cv { font-size:.7rem; }.btn-portfolio,.btn-hire { padding:10px 15px; font-size:.75rem; }.action-buttons { gap:8px; }.section,.skills-section { padding:65px 28px; }.skills-track { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }.skill-card span { font-size:.7rem; }.section-header { gap:20px; flex-direction:column; align-items:flex-start; margin-bottom:30px; }.section-header h2,.skills-section h2 { font-size:2.6rem; }.grid-container { grid-template-columns:1fr; }#services { margin:0 14px; padding:65px 28px; }.card-icon { margin-bottom:25px; }#gallery .grid-container { gap:30px 20px; }.project-card h3 { font-size:1.3rem; }.project-card p { font-size:.8rem; }.tags span { font-size:.6rem; padding:4px 8px; }.img-wrapper img { padding:8px; }.premium-footer { margin:0 14px; padding:65px 28px 30px; }.contact-callout h2 { font-size:4rem; letter-spacing:-2.5px; }.footer-top,.footer-bottom { align-items:flex-start; flex-direction:column; }.footer-nav { gap:20px; }.float-wa,.to-top { right:17px; width:40px; height:40px; }.float-wa { bottom:105px; }.to-top { bottom:155px; } }
@media(max-width:540px) { .hero-stage { min-height:600px; height:78svh; }.hero-name { top:24px; left:22px; }.left-stat { top:108px; left:22px; right:auto; text-align:left; width:220px; }.left-stat p { font-size:.72rem; }.left-stat p br { display:initial; }.image-wrapper { height:65%; width:92%; }.profile-img { max-width:130%; height:100%; }.hero-role-line { white-space:normal; left:12px; width:calc(100% - 24px); font-size:clamp(35px,10vw,55px); bottom:25px; line-height:1.12; letter-spacing:-.055em; }.right-stat { top:35%; right:22px; }.right-stat .stars { font-size:.5rem; margin-bottom:7px; }.right-stat h3 { font-size:1.7rem; }.right-stat p { font-size:.6rem; }.hero-bottom { flex-direction:column; align-items:stretch; gap:20px; }.hero-actions-new { justify-content:space-between; }.action-buttons { justify-content:space-between; }.btn-portfolio,.btn-hire { flex:1; padding:11px 18px; }.stats-section { grid-template-columns:repeat(2,minmax(0,1fr)); padding:28px 20px; gap:25px 15px; }.stat-box:nth-child(2) { border:0; }.stat-box p { font-size:.58rem; }.skills-track { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.skill-card { min-height:85px; }.section,.skills-section { padding:55px 22px; }.section-header h2,.skills-section h2 { font-size:2.3rem; }.section-header p { font-size:.8rem; }.premium-emoji { font-size:1.3rem; }#services { padding:55px 22px; }#gallery .grid-container { grid-template-columns:1fr; gap:35px; }.img-wrapper { aspect-ratio:16/11; }.project-card h3 { font-size:1.45rem; }.project-card p { font-size:.84rem; }.tags span { font-size:.65rem; }.custom-navbar { bottom:18px; gap:5px; padding:8px; border-radius:18px; }.nav-links { gap:3px; }.nav-links a,#theme-toggle { width:35px; height:35px; font-size:.85rem; border-radius:10px; }.logo { width:35px; height:35px; }.contact-callout h2 { font-size:3.5rem; }.premium-footer { padding:55px 22px 28px; }.contact-email { gap:10px; font-size:.76rem; }.footer-nav { gap:15px; }.design-credit { line-height:1.7; } }
@media(max-width:360px) { .custom-navbar .logo { display:none; }.hero-name { font-size:.68rem; }.hero-role-line { font-size:10vw; }.section-header h2,.skills-section h2 { font-size:2rem; }.hero-socials a { width:33px; height:33px; }.hero-actions-new { gap:10px; }.contact-callout h2 { font-size:3rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; }.js-reveal .reveal { opacity:1; transform:none; } }
@media print { .custom-navbar,.float-wa,.to-top,#progress-container,#enter-screen { display:none !important; }.js-reveal .reveal { opacity:1; transform:none; }.hero-stage { height:450px; min-height:450px; }.project-card { break-inside:avoid; } }
/* Responsive welcome poster with separate header, portrait, and action rows. */
body.intro-open { overflow-y:hidden; }
#enter-screen { position:fixed; inset:0; z-index:20000; display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto; background:#f4f3ef; opacity:1; transition:opacity .32s ease; }
.intro-content { position:relative; isolation:isolate; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:14px; width:min(1200px,100%); height:min(800px,calc(100svh - 48px)); min-height:360px; padding:32px 48px 22px; overflow:hidden; border-radius:24px; color:#fff; background:#073493; box-shadow:0 25px 80px #05235225; transition:transform .32s ease,opacity .32s ease; }
.intro-glow { position:absolute; inset:-30%; z-index:-1; background:radial-gradient(ellipse at 55% 55%,#2265d9 0%,#0c3ea2 37%,#061c61 75%); animation:intro-atmosphere 14s ease-in-out infinite alternate; }
.intro-grid { position:absolute; inset:0; z-index:-1; background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(transparent,#000 40%,transparent); }
.intro-heading { position:relative; z-index:4; text-align:center; }
.intro-eyebrow { margin-bottom:8px; font-size:.65rem; line-height:1.3; letter-spacing:2px; font-weight:600; text-transform:uppercase; color:#dae5ff; }
#intro-title { font:800 clamp(24px,3.3vw,42px)/1.15 var(--font-head); letter-spacing:-1.3px; }
#intro-title span { color:#ffdc40; }
.intro-edition { position:absolute; right:24px; top:32px; font-size:.5rem; letter-spacing:1.5px; color:#b1c6ee; writing-mode:vertical-rl; }
.intro-stage { position:relative; min-height:0; }
.intro-lettering { position:absolute; top:0; left:0; width:100%; height:auto; max-height:70%; overflow:visible; font-family:Impact,'Arial Narrow',sans-serif; font-size:215px; font-weight:800; pointer-events:none; }
.intro-outline { fill:transparent; stroke:#93b8ff42; stroke-width:1; }
.intro-solid { fill:#f9fbff; }
.intro-portrait { position:absolute; inset:0; display:flex; justify-content:center; padding-top:35px; z-index:3; pointer-events:none; }
.intro-portrait img { display:block; max-width:74%; width:auto; height:100%; object-fit:contain; filter:drop-shadow(0 15px 24px #00164040); animation:intro-float 7s ease-in-out infinite; }
.intro-arrow { position:absolute; width:130px; stroke:#ffdc40; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:6 6; opacity:.9; pointer-events:none; }
.intro-arrow path { animation:intro-dash 18s linear infinite; }
.intro-arrow-top { top:0; left:0; transform:rotate(12deg); }
.intro-arrow-bottom { right:0; bottom:0; transform:rotate(-15deg); }
.intro-chip { position:absolute; z-index:4; border:1px solid #ffffff32; padding:9px 14px; border-radius:30px; background:#083082d9; backdrop-filter:blur(12px); color:#e6efff; font-size:.66rem; animation:intro-chip-drift 8s ease-in-out infinite; }
.intro-chip span { color:#ffdc40; margin-right:8px; font-size:.9rem; }
.intro-chip-cloud { left:3%; bottom:25%; transform:rotate(-5deg); }
.intro-chip-security { right:3%; bottom:35%; transform:rotate(5deg); animation-delay:-4s; }
.intro-footer { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:8px; border-top:1px solid #ffffff20; }
.intro-copy { max-width:300px; }
.intro-label { display:flex; align-items:center; gap:8px; margin-bottom:7px; font-size:.6rem; font-weight:600; color:#ffdc40; }
.intro-label span { width:5px; height:5px; background:#ffdc40; border-radius:50%; box-shadow:0 0 12px #ffdc40; }
#intro-description { font-size:.78rem; line-height:1.65; color:#d7e5ff; }
#enter-btn { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:22px; min-height:52px; padding:13px 25px; background:#ffdc40; border:1px solid #ffe979; border-radius:50px; color:#10254c; font-family:var(--font-head); font-size:.9rem; font-weight:800; box-shadow:0 0 28px #ffdc4038,0 8px 25px #00174740; transition:transform .2s,box-shadow .2s; }
#enter-btn span { font-size:1.3rem; line-height:1; }
#enter-btn:hover { transform:translateY(-3px); box-shadow:0 0 40px #ffdc4060,0 12px 28px #00174740; }
#enter-btn:focus-visible { outline:2px solid #fff; outline-offset:5px; }
#enter-btn:disabled { cursor:default; }
.intro-coordinate { position:relative; font-size:.47rem; letter-spacing:1.4px; color:#b4c8ee; z-index:4; text-align:center; }
#enter-screen.is-leaving { opacity:0; pointer-events:none; }
#enter-screen.is-leaving .intro-content { opacity:0; transform:translateY(-12px) scale(.98); }
#enter-screen[hidden] * { animation-play-state:paused; }
.main-title:focus { outline:none; }
@keyframes intro-atmosphere { to { transform:translate(4%,-3%) scale(1.08); } }
@keyframes intro-float { 50% { transform:translateY(-5px); } }
@keyframes intro-chip-drift { 50% { translate:0 -5px; } }
@keyframes intro-dash { to { stroke-dashoffset:-120; } }
@media(max-width:800px) {
 #enter-screen { padding:16px; }
 .intro-content { height:calc(100svh - 32px); padding:28px 28px 18px; border-radius:20px; }
 .intro-portrait { padding-top:55px; }
 .intro-portrait img { max-width:90%; }
 .intro-arrow { width:90px; }
 .intro-chip-cloud { left:0; bottom:20%; }
 .intro-chip-security { right:0; bottom:35%; }
 .intro-edition { right:12px; }
}
@media(max-width:540px) {
 #enter-screen { padding:10px; }
 .intro-content { height:calc(100svh - 20px); min-height:420px; padding:24px 16px 16px; gap:12px; border-radius:18px; }
 #intro-title { font-size:clamp(23px,6.5vw,34px); letter-spacing:-1px; }
 .intro-eyebrow { font-size:.57rem; margin-bottom:6px; }
 .intro-edition { display:none; }
 .intro-lettering { top:0; max-height:40%; }
 .intro-portrait { padding-top:65px; }
 .intro-portrait img { max-width:100%; }
 .intro-arrow-top { width:60px; top:22%; }
 .intro-arrow-bottom { width:60px; }
 .intro-chip { padding:6px 9px; font-size:.5rem; }
 .intro-chip span { margin-right:5px; font-size:.7rem; }
 .intro-chip-cloud { bottom:14%; }
 .intro-chip-security { bottom:36%; }
 .intro-footer { flex-direction:column; gap:14px; text-align:center; padding-top:12px; }
 .intro-copy { max-width:none; }
 .intro-label { display:none; }
 #intro-description { font-size:.72rem; }
 #enter-btn { min-height:48px; padding:12px 24px; font-size:.8rem; }
 .intro-coordinate { font-size:.37rem; letter-spacing:.8px; }
}
@media(max-height:650px) and (max-width:540px) {
 .intro-content { padding-top:18px; gap:8px; }
 .intro-portrait { padding-top:45px; }
 .intro-chip { display:none; }
 .intro-footer { gap:10px; padding-top:8px; }
 #intro-description { font-size:.65rem; }
}
@media(max-height:540px) and (min-width:541px) {
 #enter-screen { padding:10px; }
 .intro-content { height:calc(100svh - 20px); min-height:280px; padding:16px 30px 12px; gap:8px; }
 .intro-heading { text-align:left; }
 #intro-title { font-size:26px; }
 .intro-eyebrow { font-size:.5rem; margin-bottom:3px; }
 .intro-portrait { padding-top:0; }
 .intro-lettering { max-height:95%; }
 .intro-chip,.intro-arrow-top,.intro-label,.intro-edition { display:none; }
 .intro-footer { padding-top:8px; }
 #intro-description { font-size:.65rem; }
 #enter-btn { min-height:42px; padding:8px 20px; font-size:.75rem; }
 .intro-coordinate { font-size:.4rem; }
}

.left-stat p br { display:initial; }
/* Keep the heading measurable and hero actions clear of floating controls. */
.main-title { position:absolute; inset:0; pointer-events:none; }
.home-visible .float-wa { opacity:0; visibility:hidden; pointer-events:none; }
.hero-bottom a { scroll-margin-bottom:110px; }
@media(max-width:540px) { .hero-stage { min-height:550px; height:70svh; } }


/* Requested hero text treatment. */
.left-stat { color:#111; }
.hero-name { color:#111; animation:hero-name-monochrome 10s ease-in-out infinite; }
@keyframes hero-name-monochrome { 0%,15%,85%,100% { color:#111; } 40%,60% { color:#fff; } }

/* Edge-to-edge entry with a visible, gently animated touch invitation. */
#enter-screen { padding:0; background:#073493; }
.intro-content { width:100%; height:100svh; height:100dvh; min-height:0; border-radius:0; box-shadow:none; padding:clamp(24px,4vh,48px) clamp(24px,5vw,100px) max(20px,env(safe-area-inset-bottom)); }
.intro-action { display:flex; flex-direction:column; align-items:center; flex-shrink:0; gap:12px; padding:8px; }
#enter-btn { position:relative; min-width:230px; min-height:58px; animation:intro-button-arrive .7s cubic-bezier(.2,.8,.3,1.2) both,intro-button-invite 5s 1s ease-in-out infinite; }
#enter-btn::after { content:''; position:absolute; inset:-7px; border:1px solid #ffdc4070; border-radius:inherit; pointer-events:none; animation:intro-button-ring 3s 1s ease-out infinite; }
#enter-btn:hover { animation-play-state:paused; }
#enter-btn:disabled,#enter-btn:disabled::after { animation:none; }
#intro-touch-hint { color:#d7e5ff; font-size:.62rem; letter-spacing:.8px; }
#intro-touch-hint span { color:#ffdc40; margin:0 5px; }
@keyframes intro-button-arrive { from { opacity:0; transform:translateY(20px) scale(.82); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes intro-button-invite { 0%,70%,100% { transform:translateX(0) rotate(0); } 76% { transform:translateX(-3px) rotate(-1.5deg); } 80% { transform:translateX(3px) rotate(1.5deg); } 84% { transform:translateX(-2px) rotate(-1deg); } 88% { transform:translateX(2px) rotate(1deg); } 92% { transform:translateX(0) rotate(0); } }
@keyframes intro-button-ring { 0% { opacity:.65; transform:scale(1); } 70%,100% { opacity:0; transform:scale(1.12,1.3); } }
@media(min-width:1100px) { .intro-portrait img { max-width:65%; } #intro-title { font-size:clamp(36px,3vw,56px); } .intro-edition { right:32px; } }
@media(max-width:540px) {
 .intro-content { padding:max(24px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom)); }
 .intro-action { gap:10px; padding:6px; }
 #enter-btn { min-width:230px; min-height:54px; }
 #intro-touch-hint { font-size:.55rem; letter-spacing:.4px; }
}
@media(max-height:650px) and (max-width:540px) { .intro-content { padding-top:16px; padding-bottom:12px; } .intro-action { gap:7px; } #enter-btn { min-height:48px; } }
@media(max-height:540px) and (min-width:541px) { .intro-content { padding:14px 30px 10px; } .intro-action { gap:7px; padding:4px; } #enter-btn { min-width:200px; min-height:44px; } #intro-touch-hint { font-size:.5rem; } }

/* One cinematic landing, followed by the quieter touch invitation. */
.intro-portrait img { mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%); }
.intro-action { position:relative; isolation:isolate; perspective:900px; }
#enter-btn { animation:intro-button-invite 5s 1.6s ease-in-out infinite; z-index:2; }
#enter-screen.is-arriving #enter-btn { animation:button-impact-landing .82s cubic-bezier(.35,.02,.75,.45) both; }
#enter-screen.is-arriving #enter-btn:hover { animation-play-state:running; }
#enter-screen.impact-landed .intro-stage { animation:poster-impact .28s ease-out; }
.impact-dust { position:absolute; top:35px; left:50%; width:1px; height:1px; z-index:1; pointer-events:none; }
.impact-dust span { position:absolute; top:-26px; left:-26px; width:52px; height:52px; border-radius:50%; opacity:0; background:radial-gradient(circle,#e4edffb3 0%,#bdceeb66 35%,transparent 72%); filter:blur(4px); }
.impact-dust::before { content:''; position:absolute; left:-110px; top:-25px; width:220px; height:50px; border:2px solid #ffe481; border-radius:50%; opacity:0; }
.impact-landed .impact-dust span { animation:impact-smoke .95s ease-out both; }
.impact-landed .impact-dust::before { animation:impact-shockwave .65s ease-out both; }
@keyframes button-impact-landing {
 0% { opacity:0; transform:translateY(-65vh) translateZ(400px) rotate(-14deg) scale(2.2); filter:blur(5px); }
 20% { opacity:1; }
 76% { transform:translateY(-10px) translateZ(0) rotate(1deg) scale(1.05); filter:blur(0); }
 86% { transform:translateY(4px) rotate(0) scale(1.12,.83); }
 94% { transform:translateY(-5px) scale(.97,1.04); }
 100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes poster-impact { 0%,100% { translate:0 0; } 20% { translate:0 3px; } 40% { translate:-2px -2px; } 60% { translate:2px 1px; } 80% { translate:-1px 0; } }
@keyframes impact-smoke { 0% { opacity:0; transform:translate(0,0) scale(.3); } 18% { opacity:.8; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) scale(2.4); } }
@keyframes impact-shockwave { 0% { opacity:.75; transform:scale(.6); } 100% { opacity:0; transform:scale(1.65,2.5); } }
@media(max-width:540px) { .impact-dust span { width:40px; height:40px; } }
@media(prefers-reduced-motion:reduce) { .impact-dust { display:none; } }

#enter-screen { overflow:hidden; }
@media(min-width:801px) {
 .intro-footer { display:grid; grid-template-columns:1fr auto 1fr; }
 .intro-copy { grid-column:1; }
 .intro-action { grid-column:2; }
}

.intro-portrait img { width:min(100%,calc((100dvh - 260px)*1.014)); height:auto; max-height:100%; align-self:center; }

/* Profile and experience content in the portfolio's existing neutral palette. */
.about-layout { display:grid; grid-template-columns:1.3fr 1fr; gap:70px; align-items:stretch; }
.profile-kicker { display:block; font-size:.62rem; letter-spacing:1.4px; color:var(--text-gray); margin-bottom:20px; }
.about-story p { color:var(--text-gray); font-size:.9rem; line-height:1.9; margin-bottom:25px; max-width:580px; }
.about-story .about-lead { font:500 clamp(1.3rem,2.2vw,1.8rem)/1.5 var(--font-head); color:var(--text-dark); letter-spacing:-.5px; }
.about-story .profile-kicker { font-size:.62rem; }
.profile-links { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.education-card { padding:32px; border:1px solid var(--border-color); background:var(--card-bg); border-radius:20px; display:flex; flex-direction:column; align-items:flex-start; }
.education-card i { font-size:2rem; color:var(--accent-color); margin:5px 0 24px; }
.education-card h3 { font:500 1.7rem/1.35 var(--font-head); letter-spacing:-.5px; margin-bottom:18px; }
.education-card p { font-size:.9rem; margin-bottom:28px; }
.education-note { margin-top:auto; color:var(--text-gray); font-size:.75rem; }
.journey-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; }
.journey-card { padding:30px 24px; border-top:2px solid var(--accent-color); border-radius:0 0 14px 14px; background:var(--card-bg); }
.journey-card h3 { font:500 1.15rem/1.5 var(--font-head); margin-bottom:20px; letter-spacing:-.4px; }
.journey-card p { color:var(--text-gray); font-size:.8rem; line-height:1.8; }
.journey-card .journey-org { color:var(--text-dark); font-weight:600; margin-bottom:14px; }
.journey-source { margin-top:28px; }
.project-card .project-contribution { font-size:.72rem; color:var(--accent-color); border-left:2px solid var(--accent-color); padding-left:12px; }
@media(max-width:800px) { .about-layout { gap:30px; }.journey-grid { grid-template-columns:1fr; }.journey-card { padding:26px; } }
@media(max-width:540px) { .about-layout { grid-template-columns:1fr; gap:25px; }.education-card { padding:26px; }.project-identity { padding:24px; }.project-identity .identity-kicker { font-size:.46rem; letter-spacing:1px; } }

.journey-affiliation { color:var(--text-gray); font-size:.8rem; line-height:1.7; margin:-15px 0 30px; }

.section-jump-links { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 26px; padding:0 24px 30px; }
.section-jump-links a { color:var(--text-gray); font-size:.75rem; text-decoration:none; padding:6px 0; }
.section-jump-links a:hover { color:var(--accent-color); }
.skill-filters { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0; }
.skill-filters button { padding:9px 16px; border:1px solid var(--border-color); border-radius:25px; color:var(--text-gray); background:var(--card-bg); font-size:.75rem; }
.skill-filters button[aria-pressed="true"] { color:var(--bg-color); background:var(--text-dark); border-color:var(--text-dark); }
.skill-card i { color:var(--accent-color); }
.skill-context { color:var(--text-gray); font-size:.75rem; margin-top:24px; }
.project-details { width:100%; margin-top:18px; padding-top:14px; border-top:1px solid var(--border-color); }
.project-details summary { cursor:pointer; list-style:none; display:flex; gap:12px; justify-content:space-between; font-size:.78rem; color:var(--text-dark); }
.project-details summary::-webkit-details-marker { display:none; }
.project-details summary span { font-size:1rem; transition:transform .2s; }
.project-details[open] summary span { transform:rotate(45deg); }
.project-details dl { margin:20px 0; display:grid; gap:15px; }
.project-details dt { color:var(--text-dark); font-size:.68rem; font-weight:600; margin-bottom:5px; }
.project-details dd { color:var(--text-gray); font-size:.78rem; line-height:1.8; }
.contact-form { border-top:1px solid #ffffff25; border-bottom:1px solid #ffffff25; padding:32px 0; margin-bottom:45px; }
.contact-form-heading h3 { font:500 1.6rem var(--font-head); margin-bottom:10px; }
.contact-form-heading p { color:#b5c1b8; font-size:.76rem; margin-bottom:28px; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:850px; }
.contact-fields label { display:flex; flex-direction:column; gap:9px; font-size:.72rem; color:#dce6df; }
.contact-fields .field-wide { grid-column:1/-1; }
.contact-fields input,.contact-fields textarea { width:100%; min-width:0; padding:13px 15px; border:1px solid #ffffff30; border-radius:10px; background:#ffffff06; color:#fff; font:inherit; font-size:.9rem; }
.contact-fields textarea { resize:vertical; }
.contact-form button { display:inline-flex; align-items:center; gap:25px; padding:13px 22px; border-radius:30px; margin-top:22px; border:1px solid #c3d2c8; background:#d7e5dc; color:#202624; font-size:.8rem; font-weight:600; }
.contact-form :focus-visible { outline-color:#c3d2c8; }
#contact-form-status { margin-top:12px; font-size:.72rem; color:#b5c1b8; }
@media(max-width:540px) { .contact-fields { grid-template-columns:1fr; }.skill-filters button { padding:8px 12px; font-size:.68rem; }.section-jump-links { gap:8px 16px; }.section-jump-links a { font-size:.68rem; } }

.spm-project .img-wrapper img { padding:0; object-fit:cover; object-position:center 48%; }

/* ==========================================================================
   GITHUB REPOSITORY EXPLORER SECTION
   ========================================================================== */
.repo-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(36, 41, 46, 0.08);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 14px;
    text-transform: uppercase;
    font-family: Consolas, monospace;
}
body.dark-mode .repo-live-indicator {
    background: rgba(255, 255, 255, 0.08);
}
.live-beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.7);
    animation: livePulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.repo-explorer-container {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.repo-telemetry-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 24px;
    border-radius: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}
.repo-profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.repo-profile-info i {
    font-size: 1.8rem;
    color: var(--text-dark);
}
.repo-profile-handle {
    display: block;
    font-family: Consolas, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-dark);
}
.repo-profile-tagline {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray);
}
.repo-stats-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.repo-chip {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 10px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}
.repo-chip-val {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    font-family: var(--font-head);
}
.repo-chip-lbl {
    font-size: 0.72rem;
    color: var(--text-gray);
}
.repo-refresh-btn, .repo-github-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.repo-refresh-btn:hover, .repo-github-profile-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-1px);
}
.repo-refresh-btn.loading i {
    animation: repoSpin 0.8s linear infinite;
}
@keyframes repoSpin {
    100% { transform: rotate(360deg); }
}

/* Controls Bar */
.repo-controls-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.repo-search-box {
    flex: 1;
    min-width: 280px;
    position: relative;
    display: flex;
    align-items: center;
}
.repo-search-icon {
    position: absolute;
    left: 16px;
    color: var(--text-gray);
    font-size: 0.9rem;
    pointer-events: none;
}
.repo-search-box input {
    width: 100%;
    padding: 12px 65px 12px 42px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.repo-search-box input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(49, 76, 67, 0.15);
}
.repo-search-hint {
    position: absolute;
    right: 14px;
    font-size: 0.7rem;
    font-family: Consolas, monospace;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-gray);
    pointer-events: none;
}
.repo-sort-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px 14px;
}
.repo-sort-wrapper label {
    color: var(--text-gray);
    font-size: 0.85rem;
}
.repo-sort-wrapper select {
    background: transparent;
    border: 0;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
}

/* Filter Pills */
.repo-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.repo-filter-btn {
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-gray);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.repo-filter-btn:hover {
    border-color: var(--accent-color);
    color: var(--text-dark);
}
.repo-filter-btn[aria-pressed="true"] {
    background: var(--text-dark);
    color: var(--bg-color);
    border-color: var(--text-dark);
    font-weight: 600;
}

/* Repos Grid */
.repo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.repo-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-height: 200px;
}
.repo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
    border-color: var(--accent-color);
}
body.dark-mode .repo-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.repo-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.repo-title-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.repo-octo-icon {
    color: var(--text-gray);
    font-size: 1rem;
    flex-shrink: 0;
}
.repo-title-link {
    font-family: var(--font-head);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    word-break: break-word;
    line-height: 1.35;
}
.repo-title-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.repo-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.repo-badge-recent {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-weight: 700;
    font-family: Consolas, monospace;
}
.repo-badge-visibility {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    color: var(--text-gray);
}

.repo-desc {
    font-size: 0.82rem;
    color: var(--text-gray);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.repo-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.74rem;
    color: var(--text-gray);
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}
.repo-lang-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.repo-lang-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}
.repo-counters {
    display: flex;
    align-items: center;
    gap: 10px;
}

.repo-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.repo-btn-code, .repo-btn-demo, .repo-btn-clone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.15s;
}
.repo-btn-code:hover, .repo-btn-demo:hover, .repo-btn-clone:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-1px);
}
.repo-btn-clone.copied {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}

.repo-loading-spinner, .repo-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    color: var(--text-gray);
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    background: var(--card-bg);
}
.repo-loading-spinner i {
    font-size: 1.5rem;
    margin-bottom: 12px;
    display: block;
}
.repo-empty-state i {
    font-size: 2rem;
    margin-bottom: 12px;
    color: var(--text-gray);
}
.btn-clear-repo-filter {
    margin-top: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--text-dark);
    color: var(--bg-color);
    border: 0;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
}


/* Repo Expand / Compact View Styles */
.repo-expand-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.repo-btn-expand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 25px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.repo-btn-expand:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.repo-viewing-count {
    font-size: 0.75rem;
    color: var(--text-gray);
    font-family: Consolas, monospace;
}
.repo-search-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(49, 76, 67, 0.08);
    border: 1px solid rgba(49, 76, 67, 0.2);
    color: var(--text-dark);
    font-size: 0.82rem;
    font-weight: 500;
}
body.dark-mode .repo-search-summary {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}
.repo-btn-clear-search {
    background: transparent;
    border: 0;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
}
.repo-btn-clear-search:hover {
    text-decoration: underline;
}

/* ==========================================================================
   AMBIENT AUDIO CONTROLLER WIDGET
   ========================================================================== */
.sound-controller {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 995;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sound-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 12px;
  background: rgba(18, 24, 27, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  color: #e2e8f0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sound-toggle-btn:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.2);
}

.sound-wave-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  width: 14px;
  height: 12px;
}

.sw-bar {
  width: 2px;
  height: 3px;
  background: #94a3b8;
  border-radius: 1px;
  transition: height 0.2s ease, background 0.2s ease;
}

/* Equalizer Animation when playing */
.sound-controller.playing .sw-bar {
  background: #38bdf8;
  animation: eqBounce 1.2s ease-in-out infinite alternate;
}

.sound-controller.playing .sw-bar:nth-child(1) { animation-delay: 0.0s; height: 5px; }
.sound-controller.playing .sw-bar:nth-child(2) { animation-delay: 0.25s; height: 11px; }
.sound-controller.playing .sw-bar:nth-child(3) { animation-delay: 0.1s; height: 8px; }
.sound-controller.playing .sw-bar:nth-child(4) { animation-delay: 0.35s; height: 12px; }

@keyframes eqBounce {
  0% { height: 3px; }
  50% { height: 12px; }
  100% { height: 4px; }
}

.sound-controller.muted .sw-bar {
  height: 2px !important;
  background: #64748b;
  animation: none !important;
}

.sound-controller.muted .sound-status-text {
  color: #94a3b8;
}

/* Light Mode Adaptations */
body:not(.dark-mode) .sound-toggle-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1e293b;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

body:not(.dark-mode) .sound-toggle-btn:hover {
  background: #ffffff;
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 6px 22px rgba(14, 165, 233, 0.15);
}

body:not(.dark-mode) .sound-controller.playing .sw-bar {
  background: #0284c7;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .sound-controller {
    top: 14px;
    right: 14px;
  }
  .sound-status-text {
    display: none;
  }
  .sound-toggle-btn {
    padding: 8px 10px;
  }
}

/* ==========================================================================
   PREMIUM CINEMATIC ENTRANCE WARP & TACTILE BUTTON EFFECT
   ========================================================================== */
#enter-btn {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, filter 0.25s ease !important;
  position: relative;
  overflow: visible;
}

#enter-btn.is-clicked {
  transform: scale(0.92) !important;
  box-shadow: 0 0 35px rgba(250, 204, 21, 0.9), 0 0 70px rgba(59, 130, 246, 0.6) !important;
  filter: brightness(1.3) !important;
}

#enter-btn.is-clicked::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 9999px;
  border: 2px solid rgba(250, 204, 21, 0.85);
  animation: enterPulseRing 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes enterPulseRing {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.65); opacity: 0; }
}

#enter-screen {
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease, transform 0.55s ease !important;
}

#enter-screen.is-warping {
  opacity: 0 !important;
  filter: blur(14px) brightness(1.15) !important;
  transform: scale(1.05) translateZ(0) !important;
  pointer-events: none !important;
}

#enter-screen.is-warping .intro-content {
  opacity: 0 !important;
  transform: scale(1.08) translateY(-18px) !important;
  filter: blur(10px) !important;
  transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}


/* ==========================================================================
   GOOGLE LABS 3D CURVED CAROUSEL SHOWCASE
   ========================================================================== */
.glabs-section {
  position: relative;
  overflow: hidden;
  padding-top: 95px;
  padding-bottom: 105px;
}

50% { transform: translate(30px, -25px) scale(1.05); }
  100% { transform: translate(-20px, 30px) scale(0.95); }
}

.glabs-header {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 20px;
}

.glabs-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #2563eb;
  margin-bottom: 12px;
}

.glabs-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

body.dark-mode .glabs-pill-badge {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

/* Category Filter Pills */
.glabs-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 32px;
  position: relative;
  z-index: 5;
}

.glabs-filter-btn {
  padding: 10px 22px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #475569;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.glabs-filter-btn:hover {
  background: #ffffff;
  border-color: rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.glabs-filter-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
  transform: translateY(-1px);
}

body.dark-mode .glabs-filter-btn {
  background: rgba(20, 28, 42, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

body.dark-mode .glabs-filter-btn:hover {
  background: rgba(30, 41, 59, 0.9);
  color: #f8fafc;
}

body.dark-mode .glabs-filter-btn.active {
  background: #38bdf8;
  color: #0f172a;
  border-color: #38bdf8;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.3);
}

/* 3D Curved Carousel Stage */
.glabs-carousel-stage {
  position: relative;
  perspective: 1200px;
  perspective-origin: 50% 48%;
  width: 100%;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 4;
}

.glabs-carousel-track {
  position: relative;
  width: 100%;
  height: 480px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

/* 3D Google Labs Cards */
.glabs-card {
  position: absolute;
  width: min(370px, 86vw);
  height: 475px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.4s ease, box-shadow 0.3s ease;
  user-select: none;
  cursor: pointer;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body.dark-mode .glabs-card {
  background: #141c2a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.glabs-card.is-active {
  cursor: default;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

body.dark-mode .glabs-card.is-active {
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(56, 189, 248, 0.3);
}

.glabs-card-preview {
  height: 215px;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #0f172a;
}

.glabs-preview-link {
  display: block;
  width: 100%;
  height: 100%;
}

.glabs-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.glabs-card:hover .glabs-card-preview img {
  transform: scale(1.04);
}

.glabs-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  color: #f8fafc;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.glabs-card-body {
  padding: 12px 6px 4px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.glabs-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
  color: #0f172a;
}

body.dark-mode .glabs-card-title {
  color: #f8fafc;
}

.glabs-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.glabs-card-title a:hover {
  color: #2563eb;
}

body.dark-mode .glabs-card-title a:hover {
  color: #38bdf8;
}

.glabs-card-summary {
  font-size: 0.82rem;
  line-height: 1.48;
  color: #64748b;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.dark-mode .glabs-card-summary {
  color: #94a3b8;
}

.glabs-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.glabs-tag {
  padding: 3px 9px;
  border-radius: 6px;
  background: #f1f5f9;
  font-size: 0.7rem;
  font-weight: 500;
  color: #475569;
}

body.dark-mode .glabs-tag {
  background: #1e293b;
  color: #cbd5e1;
}

.glabs-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.dark-mode .glabs-card-footer {
  border-color: rgba(255, 255, 255, 0.06);
}

.glabs-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  transition: gap 0.2s ease;
}

body.dark-mode .glabs-card-action {
  color: #38bdf8;
}

.glabs-card-action:hover {
  gap: 10px;
}

.glabs-card-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.glabs-icon-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  text-decoration: none;
}

body.dark-mode .glabs-icon-link {
  background: #1e293b;
  color: #94a3b8;
}

.glabs-icon-link:hover {
  background: #0f172a;
  color: #ffffff;
  transform: translateY(-1px);
}

body.dark-mode .glabs-icon-link:hover {
  background: #38bdf8;
  color: #0f172a;
}

/* Central Navigation Controls */
.glabs-nav-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
  z-index: 10;
}

.glabs-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  transition: all 0.2s ease;
}

body.dark-mode .glabs-nav-btn {
  background: #1e293b;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.glabs-nav-btn:hover {
  transform: scale(1.08);
  background: #0f172a;
  color: #ffffff;
}

body.dark-mode .glabs-nav-btn:hover {
  background: #38bdf8;
  color: #0f172a;
}

.glabs-counter-indicator {
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.04em;
  min-width: 55px;
  text-align: center;
}

body.dark-mode .glabs-counter-indicator {
  color: #cbd5e1;
}

.counter-slash {
  opacity: 0.4;
  margin: 0 2px;
}

/* Footer view switcher */
.glabs-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 36px;
  position: relative;
  z-index: 5;
}

.glabs-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 9999px;
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  color: #64748b;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.dark-mode .glabs-btn-secondary {
  border-color: rgba(255, 255, 255, 0.2);
  color: #94a3b8;
}

.glabs-btn-secondary:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.04);
}

body.dark-mode .glabs-btn-secondary:hover {
  border-color: #38bdf8;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
}

/* Full Grid Mode */
.glabs-carousel-stage.grid-mode {
  height: auto;
  perspective: none;
}

.glabs-carousel-stage.grid-mode .glabs-carousel-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 28px;
  width: 100%;
  max-width: 1200px;
  height: auto;
  transform: none !important;
  margin-bottom: 20px;
}

.glabs-carousel-stage.grid-mode .glabs-card {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100% !important;
  height: auto;
  min-height: 475px;
}

.glabs-carousel-stage.grid-mode .glabs-nav-controls {
  display: none !important;
}

/* Hidden filter items */
.glabs-card.hidden-filter {
  display: none !important;
}

/* Responsive adaptations */
@media (max-width: 768px) {
  .glabs-section {
    padding: 60px 0 80px;
  }
  .glabs-carousel-stage {
    height: 540px;
  }
  .glabs-carousel-track {
    height: 460px;
  }
  .glabs-card {
    height: 450px;
    padding: 12px;
  }
  .glabs-card-preview {
    height: 195px;
  }
  .glabs-shapes-row {
    gap: 10px;
  }
  .gshape-item {
    width: 24px;
    height: 24px;
  }
  .glabs-filter-btn {
    padding: 8px 16px;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   GOOGLE LABS INTERACTIVE GEOMETRIC PLAYGROUND (BOTTOM DOCK)
   Exact Google Labs styling, responsive physics, baseline ground, and chimes
   ========================================================================== */
.glabs-interactive-playground {
  margin-top: 56px;
  padding: 20px 0 32px;
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.glabs-playground-header {
  text-align: center;
  margin-bottom: 28px;
}

.glabs-playground-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(10px);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.glabs-sparkle-icon {
  color: #f59e0b;
  font-size: 0.9rem;
  animation: glabsSparklePulse 2.2s ease-in-out infinite;
}

@keyframes glabsSparklePulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(1.25) rotate(18deg); opacity: 1; }
}

.glabs-playground-hint {
  font-size: 0.84rem;
  color: #64748b;
  margin-top: 8px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.glabs-dock-stage {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cluster of 6 shapes resting on baseline */
.glabs-shapes-dock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  position: relative;
  z-index: 3;
  margin-bottom: -1px;
}

/* Individual Interactive Shape Buttons */
.glabs-shape-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
  will-change: transform;
}

.glabs-shape-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 4px;
  border-radius: 12px;
}

/* SVG Shapes */
.glabs-shape-svg {
  display: block;
  width: 105px;
  height: 118px;
  pointer-events: none;
}

/* Mint Squircle */
.glabs-shape-squircle-mint {
  width: 105px;
  height: 105px;
}

.glabs-block-mint {
  width: 100px;
  height: 100px;
  background: #48F08B;
  border-radius: 30px;
  pointer-events: none;
  transition: border-radius 0.3s ease;
}

/* Pink Rounded Square */
.glabs-shape-sq-pink {
  width: 105px;
  height: 105px;
}

.glabs-block-pink {
  width: 100px;
  height: 100px;
  background: #FFBDF9;
  border-radius: 30px;
  pointer-events: none;
}

/* Layered Combo: Blue circle behind, Yellow flower in front */
.glabs-shape-combo-group {
  position: relative;
  width: 138px;
  height: 132px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 -8px;
  z-index: 4;
}

.glabs-shape-circle-blue-back {
  position: absolute;
  bottom: 0;
  left: 6px;
  width: 100px;
  height: 100px;
  z-index: 1;
}

.glabs-shape-flower-yellow {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  margin-bottom: 6px;
  margin-left: 14px;
}

.glabs-shape-flower-svg {
  display: block;
  width: 120px;
  height: 120px;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Blue Circle */
.glabs-shape-circle-blue {
  width: 105px;
  height: 105px;
  z-index: 2;
}

.glabs-circle-blue {
  width: 100px;
  height: 100px;
  background: #5E9BFF;
  border-radius: 50%;
  pointer-events: none;
}

/* Orange Hexagon */
.glabs-shape-hex-orange {
  width: 105px;
  height: 118px;
  z-index: 2;
}

/* Hover Physical Reactions */
.glabs-shape-hex-green:hover {
  transform: translateY(-20px) scale(1.09) rotate(-6deg);
  filter: drop-shadow(0 14px 22px rgba(72, 240, 139, 0.45));
}

.glabs-shape-squircle-mint:hover {
  transform: translateY(-20px) scale(1.12, 0.94);
  filter: drop-shadow(0 14px 22px rgba(72, 240, 139, 0.45));
}

.glabs-shape-sq-pink:hover {
  transform: translateY(-20px) scale(1.09) rotate(5deg);
  filter: drop-shadow(0 14px 22px rgba(255, 189, 249, 0.5));
}

.glabs-shape-circle-blue-back:hover {
  transform: translateY(-18px) scale(1.1);
  filter: drop-shadow(0 14px 22px rgba(94, 155, 255, 0.45));
}

.glabs-shape-flower-yellow:hover {
  transform: translateY(-22px) scale(1.14);
  filter: drop-shadow(0 16px 26px rgba(252, 201, 52, 0.55));
}

.glabs-shape-flower-yellow:hover .glabs-shape-flower-svg {
  transform: rotate(45deg);
}

.glabs-shape-circle-blue:hover {
  transform: translateY(-20px) scale(1.1);
  filter: drop-shadow(0 14px 22px rgba(94, 155, 255, 0.45));
}

.glabs-shape-hex-orange:hover {
  transform: translateY(-20px) scale(1.09) rotate(6deg);
  filter: drop-shadow(0 14px 22px rgba(255, 134, 74, 0.45));
}

/* Click Hop Physics Animations */
.glabs-shape-btn.is-popping {
  animation: glabsShapePop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes glabsShapePop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-38px) scale(1.22); }
  65% { transform: translateY(-8px) scale(0.94); }
  82% { transform: translateY(-16px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

.glabs-shape-flower-yellow.is-popping .glabs-shape-flower-svg {
  animation: glabsFlowerPopSpin 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes glabsFlowerPopSpin {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Shape Tooltips */
.glabs-shape-tooltip {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 25;
}

.glabs-shape-btn:hover .glabs-shape-tooltip,
.glabs-shape-btn:focus-visible .glabs-shape-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Particle Sparkles container */
.glabs-shape-sparkle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 30;
  animation: glabsSparkleBurst 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes glabsSparkleBurst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx, 0px), var(--ty, -30px)) scale(0); opacity: 0; }
}

/* Baseline Ground Line (Google Labs Bottom Divider) */
.glabs-dock-baseline {
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 2px;
  position: relative;
  z-index: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Dark Mode Overrides */
[data-theme="dark"] .glabs-playground-tag,
.dark-mode .glabs-playground-tag {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .glabs-playground-hint,
.dark-mode .glabs-playground-hint {
  color: #94a3b8;
}

[data-theme="dark"] .glabs-dock-baseline,
.dark-mode .glabs-dock-baseline {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .glabs-shape-tooltip,
.dark-mode .glabs-shape-tooltip {
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
}

/* Responsive Scaling for Tablets and Mobile */
@media (max-width: 820px) {
  .glabs-shapes-dock {
    transform: scale(0.78);
    transform-origin: bottom center;
    margin-bottom: -12px;
  }
}

@media (max-width: 580px) {
  .glabs-shapes-dock {
    transform: scale(0.60);
    transform-origin: bottom center;
    margin-bottom: -22px;
  }
  .glabs-interactive-playground {
    margin-top: 36px;
    padding-bottom: 20px;
  }
}

@media (max-width: 420px) {
  .glabs-shapes-dock {
    transform: scale(0.48);
    transform-origin: bottom center;
    margin-bottom: -28px;
  }
}

/* ==========================================================================
   GEMINI APP MULTICHROMATIC FLUID AURORA BACKGROUND
   Fluid organic liquid aura morphing, rotating, and drifting
   ========================================================================== */
.gemini-aura-container {
  position: absolute;
  inset: -80px -40px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  filter: blur(75px);
  -webkit-filter: blur(75px);
  transform: translateZ(0);
}

.gemini-aura-glow {
  position: absolute;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  mix-blend-mode: multiply;
  opacity: 0.45;
  will-change: transform, border-radius;
}

body.dark-mode .gemini-aura-glow {
  mix-blend-mode: screen;
  opacity: 0.38;
}

/* Gemini Blue: Core Google AI glow */
.gemini-glow-blue {
  width: 650px;
  height: 650px;
  left: 10%;
  top: 10%;
  background: radial-gradient(circle, #3b82f6 0%, rgba(59, 130, 246, 0) 70%);
  animation: geminiDriftOne 16s ease-in-out infinite alternate;
}

/* Gemini Purple/Violet: Cosmic AI intelligence */
.gemini-glow-purple {
  width: 580px;
  height: 580px;
  right: 8%;
  top: 12%;
  background: radial-gradient(circle, #8b5cf6 0%, rgba(139, 92, 246, 0) 70%);
  animation: geminiDriftTwo 20s ease-in-out infinite alternate;
}

/* Gemini Pink/Magenta: Vibrant pulse */
.gemini-glow-pink {
  width: 540px;
  height: 540px;
  left: 28%;
  bottom: 0%;
  background: radial-gradient(circle, #ec4899 0%, rgba(236, 72, 153, 0) 70%);
  animation: geminiDriftThree 18s ease-in-out infinite alternate;
}

/* Gemini Cyan/Teal: Fresh spark */
.gemini-glow-cyan {
  width: 520px;
  height: 520px;
  left: -8%;
  bottom: 15%;
  background: radial-gradient(circle, #06b6d4 0%, rgba(6, 182, 212, 0) 70%);
  animation: geminiDriftFour 22s ease-in-out infinite alternate;
}

/* Gemini Amber/Gold: Warm solar halo */
.gemini-glow-amber {
  width: 480px;
  height: 480px;
  right: 18%;
  bottom: 5%;
  background: radial-gradient(circle, #f59e0b 0%, rgba(245, 158, 11, 0) 70%);
  animation: geminiDriftFive 19s ease-in-out infinite alternate;
}

/* Liquid morphing animations mimicking Gemini Live AI aura */
@keyframes geminiDriftOne {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  }
  33% {
    transform: translate(90px, -60px) scale(1.18) rotate(45deg);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  66% {
    transform: translate(-70px, 70px) scale(0.92) rotate(90deg);
    border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
  }
  100% {
    transform: translate(50px, -40px) scale(1.12) rotate(140deg);
    border-radius: 50% 50% 40% 60% / 40% 50% 50% 60%;
  }
}

@keyframes geminiDriftTwo {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 60% 40% 45% 55% / 50% 60% 40% 50%;
  }
  33% {
    transform: translate(-100px, 80px) scale(1.16) rotate(-60deg);
    border-radius: 35% 65% 50% 50% / 60% 40% 60% 40%;
  }
  66% {
    transform: translate(60px, -70px) scale(0.9) rotate(-120deg);
    border-radius: 55% 45% 70% 30% / 40% 60% 40% 60%;
  }
  100% {
    transform: translate(-50px, 50px) scale(1.1) rotate(-180deg);
    border-radius: 40% 60% 35% 65% / 55% 45% 55% 45%;
  }
}

@keyframes geminiDriftThree {
  0% {
    transform: translate(0, 0) scale(1);
    border-radius: 50% 50% 60% 40% / 45% 55% 45% 55%;
  }
  50% {
    transform: translate(-80px, -60px) scale(1.22) rotate(70deg);
    border-radius: 65% 35% 40% 60% / 55% 45% 55% 45%;
  }
  100% {
    transform: translate(90px, 50px) scale(0.95) rotate(130deg);
    border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%;
  }
}

@keyframes geminiDriftFour {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate(110px, -70px) scale(1.2) rotate(-80deg);
  }
  100% {
    transform: translate(-60px, 60px) scale(0.88) rotate(-150deg);
  }
}

@keyframes geminiDriftFive {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-90px, -80px) scale(1.25) rotate(90deg);
  }
  100% {
    transform: translate(70px, 60px) scale(0.92) rotate(160deg);
  }
}

/* Gemini Autoplay Status Pulse Indicator */
.glabs-autoplay-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  display: inline-block;
  margin-right: 7px;
  box-shadow: 0 0 10px #3b82f6;
  animation: geminiPulseDot 2.2s ease-in-out infinite;
}

@keyframes geminiPulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
    background: #3b82f6;
    box-shadow: 0 0 8px #3b82f6;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
    background: #8b5cf6;
    box-shadow: 0 0 14px #8b5cf6;
  }
}

/* ==========================================================================
   GOOGLE LABS SINUSOIDAL SKILLS WAVE RIBBON (Matching labs.google video)
   ========================================================================== */
.glabs-skills-wave-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 50px 0 45px;
  margin: 5px 0 42px;
  mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}

.glabs-skills-wave-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: glabsWaveScroll 36s linear infinite;
  will-change: transform;
}

.glabs-skills-wave-container:hover .glabs-skills-wave-track {
  animation-play-state: paused;
}

@keyframes glabsWaveScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual Circular White Pill */
.glabs-wave-pill {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: translateY(var(--y, 0px));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

body.dark-mode .glabs-wave-pill {
  background: #141c2a;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.glabs-wave-pill i {
  font-size: 1.85rem;
  transition: transform 0.3s ease;
}

.glabs-wave-pill:hover {
  transform: translateY(calc(var(--y, 0px) - 15px)) scale(1.18) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 0 22px var(--color, rgba(59, 130, 246, 0.4));
  border-color: var(--color, #3b82f6);
  z-index: 10;
}

.glabs-wave-pill:hover i {
  transform: scale(1.12);
}

/* Floating Tooltip */
.glabs-pill-tooltip {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
}

.glabs-wave-pill:hover .glabs-pill-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body.dark-mode .glabs-pill-tooltip {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
}

/* Skills Grid Enhancements */
.skills-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.skill-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  min-height: 74px;
  padding: 14px 18px;
  background: var(--card-bg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.skill-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: rgba(37, 99, 235, 0.3);
}

body.dark-mode .skill-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  border-color: rgba(56, 189, 248, 0.35);
}

.skill-card i {
  font-size: 1.8rem;
  filter: none !important;
  flex-shrink: 0;
}

.skill-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.skill-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dark);
}

.skill-sub {
  font-size: 0.72rem;
  color: var(--text-gray);
  line-height: 1.25;
}

/* Filter Buttons */
.skill-filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 26px;
}

.skill-filters button {
  padding: 9px 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  color: var(--text-gray);
  background: var(--card-bg);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.skill-filters button:hover {
  border-color: rgba(37, 99, 235, 0.3);
  color: var(--text-dark);
}

.skill-filters button[aria-pressed="true"],
.skill-filters button.active {
  color: #ffffff;
  background: #0f172a;
  border-color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
}

body.dark-mode .skill-filters button[aria-pressed="true"],
body.dark-mode .skill-filters button.active {
  color: #0f172a;
  background: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
}

@media (max-width: 1100px) {
  .skills-track { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
  .skills-track { grid-template-columns: repeat(3, 1fr); }
  .glabs-wave-pill { width: 66px; height: 66px; }
  .glabs-wave-pill i { font-size: 1.6rem; }
}

@media (max-width: 600px) {
  .skills-track { grid-template-columns: repeat(2, 1fr); }
  .glabs-wave-pill { width: 58px; height: 58px; }
  .glabs-wave-pill i { font-size: 1.4rem; }
}

/* ==========================================================================
   GEMINI APP MULTICHROMATIC FLUID AURORA BACKGROUND (SEAMLESS FEATHERED BLEND)
   Fluid organic liquid aura morphing, rotating, and smoothly blending without cuts
   ========================================================================== */
.glabs-section {
  position: relative;
  overflow: hidden;
  padding-top: 95px;
  padding-bottom: 115px;
}

/* Feathered bottom blend to guarantee zero hard cutoff lines */
.glabs-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(244, 243, 239, 0) 0%, var(--bg-color, #f4f3ef) 100%);
  pointer-events: none;
  z-index: 2;
}

body.dark-mode .glabs-section::after {
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0) 0%, var(--bg-color, #0f172a) 100%);
}

.gemini-aura-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  filter: blur(85px);
  -webkit-filter: blur(85px);
  transform: translateZ(0);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 65%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 65%, transparent 98%);
}

.gemini-aura-glow {
  position: absolute;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  mix-blend-mode: multiply;
  opacity: 0.38;
  will-change: transform, border-radius;
}

body.dark-mode .gemini-aura-glow {
  mix-blend-mode: screen;
  opacity: 0.32;
}

/* Gemini Blue: Core Google AI glow */
.gemini-glow-blue {
  width: 650px;
  height: 650px;
  left: 10%;
  top: 8%;
  background: radial-gradient(circle, #3b82f6 0%, rgba(59, 130, 246, 0) 70%);
  animation: geminiDriftOne 16s ease-in-out infinite alternate;
}

/* Gemini Purple/Violet: Cosmic AI intelligence */
.gemini-glow-purple {
  width: 580px;
  height: 580px;
  right: 8%;
  top: 10%;
  background: radial-gradient(circle, #8b5cf6 0%, rgba(139, 92, 246, 0) 70%);
  animation: geminiDriftTwo 20s ease-in-out infinite alternate;
}

/* Gemini Pink/Magenta: Vibrant pulse - safely padded from bottom */
.gemini-glow-pink {
  width: 500px;
  height: 500px;
  left: 28%;
  bottom: 18%;
  background: radial-gradient(circle, #ec4899 0%, rgba(236, 72, 153, 0) 70%);
  animation: geminiDriftThree 18s ease-in-out infinite alternate;
}

/* Gemini Cyan/Teal: Fresh spark */
.gemini-glow-cyan {
  width: 480px;
  height: 480px;
  left: -5%;
  bottom: 22%;
  background: radial-gradient(circle, #06b6d4 0%, rgba(6, 182, 212, 0) 70%);
  animation: geminiDriftFour 22s ease-in-out infinite alternate;
}

/* Gemini Amber/Gold: Warm solar halo - safely padded from bottom */
.gemini-glow-amber {
  width: 460px;
  height: 460px;
  right: 18%;
  bottom: 20%;
  background: radial-gradient(circle, #f59e0b 0%, rgba(245, 158, 11, 0) 70%);
  animation: geminiDriftFive 19s ease-in-out infinite alternate;
}

/* Liquid morphing animations mimicking Gemini Live AI aura */
@keyframes geminiDriftOne {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  33% { transform: translate(80px, -50px) scale(1.15) rotate(45deg); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  66% { transform: translate(-60px, 60px) scale(0.92) rotate(90deg); border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%; }
  100% { transform: translate(40px, -30px) scale(1.1) rotate(140deg); border-radius: 50% 50% 40% 60% / 40% 50% 50% 60%; }
}

@keyframes geminiDriftTwo {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 60% 40% 45% 55% / 50% 60% 40% 50%; }
  33% { transform: translate(-80px, 60px) scale(1.14) rotate(-60deg); border-radius: 35% 65% 50% 50% / 60% 40% 60% 40%; }
  66% { transform: translate(50px, -50px) scale(0.9) rotate(-120deg); border-radius: 55% 45% 70% 30% / 40% 60% 40% 60%; }
  100% { transform: translate(-40px, 40px) scale(1.08) rotate(-180deg); border-radius: 40% 60% 35% 65% / 55% 45% 55% 45%; }
}

@keyframes geminiDriftThree {
  0% { transform: translate(0, 0) scale(1); border-radius: 50% 50% 60% 40% / 45% 55% 45% 55%; }
  50% { transform: translate(-60px, -40px) scale(1.18) rotate(70deg); border-radius: 65% 35% 40% 60% / 55% 45% 55% 45%; }
  100% { transform: translate(70px, 30px) scale(0.95) rotate(130deg); border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%; }
}

@keyframes geminiDriftFour {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(90px, -50px) scale(1.16) rotate(-80deg); }
  100% { transform: translate(-50px, 40px) scale(0.9) rotate(-150deg); }
}

@keyframes geminiDriftFive {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-70px, -60px) scale(1.18) rotate(90deg); }
  100% { transform: translate(50px, 40px) scale(0.94) rotate(160deg); }
}

/* Gemini Autoplay Status Pulse Indicator */
.glabs-autoplay-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  display: inline-block;
  margin-right: 7px;
  box-shadow: 0 0 10px #3b82f6;
  animation: geminiPulseDot 2.2s ease-in-out infinite;
}

@keyframes geminiPulseDot {
  0%, 100% { transform: scale(1); opacity: 0.85; background: #3b82f6; box-shadow: 0 0 8px #3b82f6; }
  50% { transform: scale(1.4); opacity: 1; background: #8b5cf6; box-shadow: 0 0 14px #8b5cf6; }
}

/* ==========================================================================
   GOOGLE LABS SINUSOIDAL SKILLS STREAM (100VW EDGE-TO-EDGE FULL SCREEN)
   Exact Google Labs fluid wave matching labs.google video - NO SIDE GAPS
   ========================================================================== */
.glabs-sine-stream-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  padding: 60px 0 50px;
  margin-top: 25px;
  margin-bottom: 25px;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  user-select: none;
}

.glabs-sine-stream-track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  animation: glabsSineFlow 34s linear infinite;
  will-change: transform;
}

.glabs-sine-stream-wrapper:hover .glabs-sine-stream-track {
  animation-play-state: paused;
}

@keyframes glabsSineFlow {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual Sine Pill */
.glabs-sine-pill {
  position: relative;
  transform: translateY(var(--y, 0px));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pure Circular White Disk matching labs.google video */
.glabs-sine-circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f2937;
  font-size: 1.85rem;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.dark-mode .glabs-sine-circle {
  background: #151d2c;
  border-color: rgba(255, 255, 255, 0.09);
  color: #f1f5f9;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

/* Hover Physics: spring lift + shadow halo */
.glabs-sine-pill:hover {
  transform: translateY(calc(var(--y, 0px) - 15px)) scale(1.18);
  z-index: 10;
}

.glabs-sine-pill:hover .glabs-sine-circle {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 0 25px rgba(59, 130, 246, 0.35);
  border-color: rgba(59, 130, 246, 0.4);
  color: #2563eb;
}

body.dark-mode .glabs-sine-pill:hover .glabs-sine-circle {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.4);
  border-color: #38bdf8;
  color: #38bdf8;
}

/* Tooltip matching labs.google */
.glabs-sine-tooltip {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 12px;
  border-radius: 9999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  z-index: 25;
}

.glabs-sine-pill:hover .glabs-sine-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body.dark-mode .glabs-sine-tooltip {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
}



/* ==========================================================================
   DYNAMIC SKY CLOUDS CANVAS (Interactive Fluid Atmospheric Color Mesh)
   ========================================================================== */
.hero-cloud-canvas {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  pointer-events: none;
  z-index: 1;
  filter: blur(50px);
  transform: scale(1.06);
  border-radius: inherit;
  opacity: 0.95;
  transition: opacity 0.5s ease;
}

body.dark-mode .hero-cloud-canvas {
  opacity: 0.85;
}