:root {
  --bg: #07101d;
  --bg-soft: #0b1423;
  --panel: rgba(15, 26, 43, .68);
  --panel-solid: #0e1929;
  --text: #edf4ff;
  --muted: #91a0b5;
  --line: rgba(255,255,255,.10);
  --accent: #77e7ff;
  --accent-2: #8e7bff;
  --accent-3: #63f3b4;
  --shadow: 0 22px 70px rgba(0,0,0,.25);
  --radius: 24px;
  --max: 1180px;
}

[data-theme="light"] {
  --bg: #eef4fa;
  --bg-soft: #e5edf6;
  --panel: rgba(255,255,255,.94);
  --panel-solid: #ffffff;
  --text: #07111f;
  --muted: #3d4d63;
  --line: rgba(7,17,31,.16);
  --accent: #007fa8;
  --accent-2: #5f56d9;
  --accent-3: #078b62;
  --shadow: 0 20px 55px rgba(32,55,88,.15);
}
[data-theme="light"] body {
  background:
    radial-gradient(circle at 16% 5%, rgba(0,127,168,.10), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(95,86,217,.09), transparent 25%),
    var(--bg);
}
[data-theme="light"] .site-header { background: rgba(238,244,250,.92); }
[data-theme="light"] .glass-card,
[data-theme="light"] .project-card,
[data-theme="light"] .publication-card,
[data-theme="light"] .contact-card { box-shadow: 0 18px 50px rgba(32,55,88,.12); }
[data-theme="light"] .terminal-card { border-color: rgba(7,17,31,.18); }
[data-theme="light"] .floating-pill { background: rgba(255,255,255,.96); border-color: rgba(7,17,31,.16); color: #07111f; }
[data-theme="light"] .marquee-section { background: rgba(229,237,246,.82); }
[data-theme="light"] .btn-secondary { background: rgba(255,255,255,.86); }
[data-theme="light"] .gradient-text { background: linear-gradient(100deg,#007fa8,#675cd8 52%,#078b62); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="light"] .eyebrow, [data-theme="light"] .section-kicker { color:#007494; }


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 5%, rgba(120, 231, 255, .10), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(142, 123, 255, .10), transparent 25%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
::selection { background: var(--accent); color: #04101a; }

.noise {
  position: fixed; inset: 0; opacity: .022; pointer-events: none; z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section-pad { padding: 110px 0; }
.glass-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: .3s ease;
}
.site-header.scrolled { border-color: var(--line); }
.nav-wrap { height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.03em; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 12px; display:grid; place-items:center;
  background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#06111d; font-weight:950;
}
.brand-text { font-size: 1.05rem; }
.brand-text span { color: var(--accent); }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { color: var(--muted); font-size: .92rem; font-weight: 650; transition: .2s; }
.nav a:hover, .nav a.active { color: var(--text); }
.theme-toggle, .menu-toggle {
  border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor:pointer;
}
.theme-toggle { width: 40px; height: 40px; border-radius: 14px; font-size: 1.1rem; }
.menu-toggle { display:none; width:42px; height:42px; border-radius:14px; padding: 10px; }
.menu-toggle span { display:block; height:2px; background:currentColor; margin:5px 0; border-radius:2px; }

.hero { min-height: calc(100svh - 76px); display: grid; align-items: center; padding-top: 70px; }
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:72px; align-items:center; }
.eyebrow, .section-kicker {
  color: var(--accent); text-transform: uppercase; letter-spacing:.14em; font-weight:800; font-size:.75rem;
}
.eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:22px; }
.status-dot { width:8px;height:8px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 0 6px rgba(99,243,180,.10); }
.hero h1 { margin: 0; font-size: clamp(3.1rem, 6vw, 5.8rem); line-height: .96; letter-spacing: -.055em; max-width: 760px; }
.gradient-text { background: linear-gradient(100deg,var(--accent),#b49cff 52%,var(--accent-3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lead { color:var(--muted); max-width:680px; font-size:clamp(1.05rem,2vw,1.28rem); margin:30px 0; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn {
  min-height: 48px; padding: 0 20px; border-radius: 15px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; border:1px solid transparent; cursor:pointer; transition:.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg,var(--accent),#9dd6ff); color:#06101a; box-shadow:0 10px 30px rgba(119,231,255,.18); }
.btn-secondary { border-color: var(--line); background:var(--panel); color:var(--text); }
.hero-meta { display:flex; gap:34px; margin-top:44px; padding-top:28px; border-top:1px solid var(--line); max-width:620px; }
.hero-meta div { display:grid; }
.hero-meta strong { font-size:1.4rem; }
.hero-meta span { color:var(--muted); font-size:.78rem; }

.hero-visual { min-height: 500px; position:relative; display:grid; place-items:center; }
.terminal-card { width:min(100%,470px); min-height:300px; border-radius:28px; padding:18px; transform:rotate(2deg); position:relative; z-index:2; }
.terminal-top { display:flex; gap:7px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.terminal-top span { width:10px; height:10px; border-radius:50%; background:var(--line); }
.terminal-lines { padding:24px 14px; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88rem; }
.terminal-lines p { margin:.45rem 0; }
.t-muted{color:var(--muted)} .t-green{color:var(--accent-3)} .t-blue{color:var(--accent)}
.orb { position:absolute; border-radius:50%; filter:blur(1px); }
.orb-a { width:260px;height:260px;background:radial-gradient(circle at 30% 30%,rgba(119,231,255,.45),rgba(119,231,255,.02) 70%); top:10px;right:0; }
.orb-b { width:240px;height:240px;background:radial-gradient(circle at 40% 40%,rgba(142,123,255,.45),rgba(142,123,255,.02) 70%); bottom:0;left:10px; }
.floating-pill { position:absolute; z-index:3; padding:9px 14px; border:1px solid var(--line); background:var(--panel-solid); border-radius:999px; font-size:.78rem; font-weight:800; box-shadow:var(--shadow); animation:float 5s ease-in-out infinite; }
.pill-one{top:14%;left:0}.pill-two{right:-3%;top:48%;animation-delay:-1.4s}.pill-three{bottom:9%;left:18%;animation-delay:-2.2s}
@keyframes float { 50% { transform:translateY(-10px) rotate(-2deg); } }

.marquee-section { border-block:1px solid var(--line); overflow:hidden; padding:15px 0; background: color-mix(in srgb,var(--bg-soft) 70%,transparent); }
.marquee-track { display:flex; width:max-content; gap:36px; animation:marquee 28s linear infinite; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.marquee-track span::after { content:"•"; color:var(--accent); margin-left:36px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.split-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; }
.section-heading h2 { margin:10px 0 0; font-size:clamp(2.4rem,5vw,4.6rem); line-height:1; letter-spacing:-.055em; }
.section-heading p { color:var(--muted); max-width:620px; }
.about-card { border-radius:var(--radius); padding:34px; }
.about-main { font-size:clamp(1.35rem,2.5vw,2rem); line-height:1.4; letter-spacing:-.025em; margin-top:0; }
.muted { color:var(--muted); }
.about-chips,.tags { display:flex; flex-wrap:wrap; gap:8px; }
.about-chips { margin-top:26px; }
.about-chips span,.tags span { border:1px solid var(--line); background:color-mix(in srgb,var(--panel-solid) 80%,transparent); color:var(--muted); border-radius:999px; padding:7px 10px; font-size:.72rem; font-weight:750; }

.projects-section { background: linear-gradient(180deg,transparent,rgba(119,231,255,.025),transparent); }
.section-top { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:42px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.filter-btn { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:9px 13px; cursor:pointer; font-weight:750; font-size:.78rem; }
.filter-btn.active,.filter-btn:hover { background:var(--text); color:var(--bg); }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.project-card { border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); overflow:hidden; transition:.3s ease; min-width:0; }
.project-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); box-shadow:var(--shadow); }
.project-card.hidden { display:none; }
.project-card-wide { grid-column: 1 / -1; display:grid; grid-template-columns:1.05fr .95fr; }
.project-art { height:260px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:#0b1423; }
.project-card-wide .project-art { height:auto; min-height:320px; border-bottom:0; border-right:1px solid var(--line); }
.project-number { position:absolute; top:16px; right:18px; font-size:.72rem; color:rgba(255,255,255,.65); font-weight:800; }
.project-label { position:absolute; left:18px; bottom:16px; color:white; background:rgba(4,10,18,.62); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); padding:7px 10px; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.04em; }
.project-body { padding:24px; display:flex; flex-direction:column; }
.project-title-row { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; }
.project-title-row h3 { margin:0; font-size:1.35rem; letter-spacing:-.03em; }
.project-title-row > span { color:var(--accent); }
.project-body > p { color:var(--muted); margin:12px 0 18px; }
.project-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:.82rem; font-weight:800; }
.project-actions a,.text-btn { color:var(--accent); }
.text-btn { border:0; background:none; padding:0; cursor:pointer; font-weight:800; }

.art-color { background:#151822; display:flex; }
.bw-panel,.color-panel { width:50%; height:100%; background-size:cover; }
.bw-panel { background: radial-gradient(circle at 65% 32%,#ddd 0 8%,transparent 9%), linear-gradient(155deg,#777 0 35%,#3a3a3a 36% 58%,#a6a6a6 59% 75%,#4d4d4d 76%); filter:grayscale(1); }
.color-panel { background: radial-gradient(circle at 65% 32%,#d5f4ff 0 8%,transparent 9%), linear-gradient(155deg,#65b9df 0 35%,#305b47 36% 58%,#83a65b 59% 75%,#425646 76%); }
.art-color::after { content:""; position:absolute; left:50%; top:0; width:2px; height:100%; background:white; box-shadow:0 0 18px white; }
.art-pothole { background:linear-gradient(#97b8c6 0 28%,#64717b 29% 100%); }
.art-plate { background:linear-gradient(145deg,#1c2633,#090d12); }
.car-shape { position:absolute; width:72%; height:48%; left:14%; top:30%; border-radius:80px 80px 28px 28px; background:linear-gradient(160deg,#506073,#1b2734); box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 25px 30px rgba(0,0,0,.28); }
.car-shape::before,.car-shape::after { content:""; position:absolute; width:54px;height:54px;border-radius:50%;background:#080b0f;bottom:-15px; }
.car-shape::before{left:38px}.car-shape::after{right:38px}
.plate-box { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); border:2px solid #78e8ff; color:#78e8ff; padding:5px 22px; font:800 .7rem ui-monospace,monospace; }
.scan-line { position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#78e8ff,transparent);box-shadow:0 0 16px #78e8ff;animation:scan 3s linear infinite; }
@keyframes scan { from{top:15%}to{top:85%} }
.art-space { background:radial-gradient(circle at 72% 35%,#172157,#090d1c 50%,#05070f); }
.planet { position:absolute;width:145px;height:145px;border-radius:50%;right:12%;top:18%;background:radial-gradient(circle at 35% 30%,#b7a9ff,#6657bc 35%,#2d2a61 70%);box-shadow:0 0 55px rgba(142,123,255,.35); }
.orbit { position:absolute;width:230px;height:75px;border:2px solid rgba(119,231,255,.45);border-radius:50%;right:3%;top:31%;transform:rotate(-12deg); }
.star { position:absolute;width:4px;height:4px;background:white;border-radius:50%;box-shadow:0 0 12px white;}.s1{left:12%;top:22%}.s2{left:43%;top:15%}.s3{left:38%;bottom:20%}
.chat-mini { position:absolute;left:8%;bottom:21%;width:45%;max-width:300px;background:rgba(8,13,28,.74);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:14px;color:white;backdrop-filter:blur(12px); }
.chat-mini span{font-size:.65rem;color:#77e7ff;text-transform:uppercase;font-weight:800;display:block;margin-bottom:5px}.chat-mini b{font-size:.85rem}

.publication-list { display:grid; gap:12px; margin-top:42px; }
.publication-card { display:grid; grid-template-columns:68px 1fr auto; gap:20px; align-items:start; padding:30px; border:1px solid var(--line); border-radius:22px; transition:.25s; background:var(--panel); }
.publication-card:hover { transform:translateX(5px); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.pub-index { color:var(--muted); font:800 .8rem ui-monospace,monospace; }
.pub-journal { color:var(--accent); font-size:.74rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.pub-content h3 { margin:8px 0; font-size:clamp(1.2rem,2.3vw,1.75rem); letter-spacing:-.03em; }
.pub-content p { color:var(--muted); margin:0 0 14px; }
.pub-arrow { color:var(--accent); font-size:1.3rem; }

.certificate-section { background:linear-gradient(180deg,transparent,rgba(142,123,255,.035),transparent); }
.certificate-card { border-radius:var(--radius); padding:28px; display:grid; grid-template-columns:80px 1fr; gap:22px; transition:.25s; }
.certificate-card:hover { transform:translateY(-4px); }
.cert-badge { width:74px;height:74px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,#4285f4,#34a853 48%,#fbbc05 75%,#ea4335);padding:2px; }
.cert-badge span { width:100%;height:100%;border-radius:20px;background:var(--panel-solid);display:grid;place-items:center;font-size:2rem;font-weight:950; }
.cert-provider { color:var(--accent); font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.certificate-card h3 { margin:6px 0 8px; font-size:1.45rem; letter-spacing:-.03em; }
.certificate-card p { color:var(--muted); margin:0 0 16px; }
.cert-link { font-size:.82rem; font-weight:850; color:var(--accent); }

.contact-card { border:1px solid var(--line); border-radius:32px; padding:clamp(34px,6vw,64px); background:linear-gradient(135deg,var(--panel),rgba(119,231,255,.05)); box-shadow:var(--shadow); }
.contact-card h2 { font-size:clamp(2.4rem,5vw,4.2rem); letter-spacing:-.055em; line-height:1; margin:12px 0; }
.contact-card > p { color:var(--muted); margin:0; }
.contact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px; }
.contact-link { position:relative; min-width:0; padding:20px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--panel-solid) 78%,transparent); display:grid; gap:5px; transition:.25s ease; overflow:hidden; }
.contact-link:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); }
.contact-link span { color:var(--accent); text-transform:uppercase; letter-spacing:.09em; font-size:.67rem; font-weight:850; }
.contact-link strong { font-size:.98rem; overflow-wrap:anywhere; }
.contact-link b { position:absolute; right:15px; top:14px; color:var(--muted); font-size:.82rem; }

.footer { border-top:1px solid var(--line); padding:28px 0 45px; }
.footer-inner { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:28px; color:var(--muted); font-size:.8rem; }
.footer-inner > div { display:grid; }
.footer strong { color:var(--text); font-size:1rem; }
.footer p { margin:0; }
.footer a { color:var(--text); font-weight:800; }

.project-modal { width:min(720px,calc(100% - 28px)); border:1px solid var(--line); border-radius:28px; background:var(--panel-solid); color:var(--text); padding:0; box-shadow:0 40px 100px rgba(0,0,0,.45); }
.project-modal::backdrop { background:rgba(1,4,10,.74); backdrop-filter:blur(7px); }
.modal-shell { padding:34px; position:relative; }
.modal-close { position:absolute;right:18px;top:16px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:1.5rem;cursor:pointer; }
.modal-kicker { color:var(--accent); text-transform:uppercase; letter-spacing:.11em; font-size:.72rem; font-weight:850; padding-right:50px; }
.modal-shell h2 { margin:10px 0 8px; font-size:clamp(2rem,5vw,3.4rem); line-height:1; letter-spacing:-.05em; }
.modal-summary { color:var(--muted); font-size:1.05rem; }
.modal-grid { display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin:28px 0; padding:24px 0;border-block:1px solid var(--line); }
.modal-grid h4 { margin:0 0 8px; }
.modal-grid p { margin:0;color:var(--muted); }
.modal-note { padding:14px 16px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);margin-bottom:22px; }
.modal-note strong { color:var(--text); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.1s; }

@media (max-width: 900px) {
  .section-pad { padding:84px 0; }
  .hero-grid,.split-section { grid-template-columns:1fr; }
  .hero-grid { gap:30px; }
  .hero { min-height:auto; }
  .hero-visual { min-height:420px; }
  .section-top { align-items:flex-start; flex-direction:column; }
  .filters { justify-content:flex-start; }
  .project-card-wide { grid-template-columns:1fr; }
  .project-card-wide .project-art { border-right:0;border-bottom:1px solid var(--line);min-height:280px; }
  .footer-inner { grid-template-columns:1fr; gap:12px; }
}

@media (max-width: 720px) {
  .container { width:min(calc(100% - 28px),var(--max)); }
  .nav-wrap { height:68px; }
  .menu-toggle { display:block; margin-left:auto; }
  .theme-toggle { order:3; }
  .nav {
    position:fixed; inset:68px 0 auto 0; min-height:calc(100svh - 68px); background:var(--bg); display:flex; flex-direction:column; align-items:flex-start; padding:36px 24px; gap:8px;
    transform:translateX(100%); opacity:0; pointer-events:none; transition:.28s ease; border-top:1px solid var(--line);
  }
  .nav.open { transform:none; opacity:1; pointer-events:auto; }
  .nav a { width:100%; padding:14px 0; font-size:1.35rem; border-bottom:1px solid var(--line); }
  .hero { padding-top:45px; }
  .hero h1 { font-size:clamp(3.25rem,15vw,5.7rem); }
  .hero-meta { gap:18px; justify-content:space-between; }
  .hero-meta span { font-size:.68rem; }
  .hero-visual { min-height:350px; }
  .terminal-card { min-height:250px; transform:none; }
  .terminal-lines { font-size:.74rem; }
  .floating-pill { font-size:.65rem; }
  .project-grid { grid-template-columns:1fr; }
  .project-card-wide { grid-column:auto; }
  .publication-card { grid-template-columns:42px 1fr; padding:22px; }
  .pub-arrow { display:none; }
  .certificate-card { grid-template-columns:1fr; }
  .modal-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
}

@media (max-width: 480px) {
  .section-pad { padding:68px 0; }
  .hero-actions .btn { width:100%; }
  .hero-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .hero-meta strong { font-size:1.2rem; }
  .project-art { height:220px; }
  .contact-grid { grid-template-columns:1fr; }
  .publication-card { grid-template-columns:1fr; }
  .pub-index { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
  .reveal { opacity:1; transform:none; }
}

.experience-card,.education-card{padding:32px}.experience-head,.edu-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.experience-head h3,.edu-top h3{font-size:1.35rem;margin:7px 0}.experience-head p{margin:0;color:var(--muted)}.role-label,.edu-school{color:var(--accent);font-weight:700;font-size:.86rem;letter-spacing:.02em}.date-pill{white-space:nowrap;border:1px solid var(--line);background:var(--panel-solid);padding:8px 12px;border-radius:999px;color:var(--muted);font-size:.85rem}.experience-points{display:grid;gap:12px;margin:28px 0}.experience-points p{margin:0;padding:16px 18px;border-left:2px solid var(--accent);background:var(--panel-solid);border-radius:0 12px 12px 0;color:var(--muted);line-height:1.7}.education-stack{display:grid;gap:16px}.edu-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.edu-meta span{padding:9px 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted)}.edu-meta b{color:var(--text);margin-right:6px}@media(max-width:700px){.experience-head,.edu-top{flex-direction:column}.experience-card,.education-card{padding:22px}.date-pill{white-space:normal}}

.project-page { min-height:100vh; }
.project-site-header { position:sticky; top:0; }
.project-nav-wrap { justify-content:space-between; }
.project-nav-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.project-back { color:var(--muted); font-size:.88rem; font-weight:800; transition:.2s; }
.project-back:hover { color:var(--text); }
.project-intro { padding:72px 0 52px; border-bottom:1px solid var(--line); }
.project-intro-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:54px; align-items:end; }
.project-intro h1 { margin:10px 0 18px; max-width:820px; font-size:clamp(2.45rem,5vw,4.8rem); line-height:.98; letter-spacing:-.055em; }
.project-lead { max-width:780px; margin:0; color:var(--muted); font-size:clamp(1rem,1.7vw,1.18rem); }
.project-actions-row { margin-top:28px; }
.project-facts { border-radius:22px; padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.project-facts div { min-height:86px; padding:15px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb,var(--panel-solid) 74%,transparent); display:flex; flex-direction:column; justify-content:space-between; }
.project-facts span { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; font-weight:850; }
.project-facts strong { font-size:.98rem; line-height:1.25; }
.project-section { padding:76px 0; }
.project-section + .project-section { border-top:1px solid var(--line); }
.project-showcase-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:18px; align-items:stretch; }
.showcase-card,.side-info,.detail-card,.stack-list,.future-card,.repo-image-card { border-radius:24px; }
.showcase-card { padding:24px; overflow:hidden; }
.showcase-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.showcase-head h2,.content-heading h2,.future-card h2,.project-two-col h2 { margin:7px 0 0; font-size:clamp(1.65rem,3vw,2.65rem); line-height:1.05; letter-spacing:-.045em; }
.live-pill,.small-action { border:1px solid var(--line); background:var(--panel-solid); color:var(--accent); border-radius:999px; padding:8px 11px; font-size:.69rem; font-weight:850; white-space:nowrap; }
.small-action { cursor:pointer; color:var(--text); }
.showcase-caption { margin:16px 0 0; color:var(--muted); font-size:.82rem; }
.side-info { padding:26px; }
.side-info h3 { font-size:1.45rem; line-height:1.15; letter-spacing:-.035em; margin:10px 0 14px; }
.side-info p { color:var(--muted); margin:0; }
.mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:26px; }
.mini-stats div { border:1px solid var(--line); background:color-mix(in srgb,var(--panel-solid) 80%,transparent); padding:14px; border-radius:15px; display:grid; gap:3px; }
.mini-stats strong { font-size:1.2rem; }
.mini-stats span { color:var(--muted); font-size:.67rem; }
.content-heading { margin-bottom:28px; max-width:760px; }
.detail-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.detail-card { padding:26px; }
.detail-card > span { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:11px; background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent); font:800 .72rem ui-monospace,monospace; }
.detail-card h3 { margin:18px 0 8px; font-size:1.2rem; letter-spacing:-.025em; }
.detail-card p { margin:0; color:var(--muted); }
.project-band { background:linear-gradient(180deg,transparent,rgba(119,231,255,.025),transparent); }
.project-two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.project-copy { color:var(--muted); max-width:670px; }
.stack-list { padding:20px; display:grid; gap:9px; }
.stack-list div { border:1px solid var(--line); background:var(--panel-solid); border-radius:13px; padding:13px 15px; font-weight:750; }
.future-card { padding:28px; }
.future-list { display:grid; gap:10px; margin-top:22px; }
.future-list span { border-left:2px solid var(--accent); background:color-mix(in srgb,var(--panel-solid) 75%,transparent); padding:12px 14px; border-radius:0 12px 12px 0; color:var(--muted); }
.repo-image-card { overflow:hidden; display:block; }
.repo-image-card img { width:100%; min-height:240px; max-height:520px; object-fit:cover; display:block; background:var(--bg-soft); }
.repo-image-card > span { display:block; padding:15px 18px; color:var(--accent); font-size:.82rem; font-weight:850; }
.project-footer { margin-top:0; }
.compare-wrap { max-width:620px; margin-inline:auto; }
.compare { position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:20px; background:#05080d; }
.compare-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; pointer-events:none; }
.compare-before { position:absolute; inset:0; width:100%; overflow:hidden; z-index:2; clip-path:inset(0 calc(100% - var(--position)) 0 0); }
.compare-before .compare-image { width:100%; }
.compare-handle { position:absolute; z-index:4; left:var(--position); top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:white; color:#08111e; display:grid; place-items:center; box-shadow:0 8px 30px rgba(0,0,0,.35); font-weight:950; pointer-events:none; }
.compare input { position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:5; cursor:ew-resize; }
.compare-tag { position:absolute; z-index:4; top:14px; padding:7px 10px; border-radius:999px; background:rgba(4,10,18,.65); color:white; font-size:.68rem; font-weight:850; backdrop-filter:blur(10px); }
.compare-tag-left { left:14px; }
.compare-tag-right { right:14px; }
.prediction-panel { border:1px solid var(--line); border-radius:18px; padding:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--panel-solid) 85%,transparent),rgba(142,123,255,.08)); display:flex; flex-direction:column; justify-content:center; }
.prediction-panel > span { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.prediction-panel > strong { font-size:2rem; margin:5px 0 20px; text-transform:capitalize; letter-spacing:-.04em; }
.confidence-row { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.78rem; }
.confidence-row b { color:var(--text); }
.confidence-track { height:9px; background:var(--line); border-radius:99px; overflow:hidden; margin:8px 0 18px; }
.confidence-track i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-3)); border-radius:inherit; transition:.35s ease; }
.prediction-panel p { margin:0; color:var(--muted); font-size:.76rem; }
.gallery-controls { display:flex; align-items:center; gap:8px; }
.gallery-counter { min-width:52px; text-align:center; color:var(--muted); font-size:.76rem; font-weight:800; }
.detection-gallery { display:grid; gap:12px; }
.gallery-main { position:relative; width:100%; aspect-ratio:16/10; border:1px solid var(--line); border-radius:20px; overflow:hidden; padding:0; background:#05080d; cursor:zoom-in; }
.gallery-main img { width:100%; height:100%; object-fit:contain; display:block; transition:opacity .2s ease, transform .35s ease; }
.gallery-main:hover img { transform:scale(1.015); }
.gallery-zoom { position:absolute; right:14px; bottom:14px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(4,10,18,.68); color:white; padding:7px 10px; font-size:.67rem; font-weight:850; backdrop-filter:blur(10px); }
.gallery-thumbs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.gallery-thumb { aspect-ratio:1/1; border:1px solid var(--line); border-radius:12px; overflow:hidden; padding:0; background:var(--panel-solid); cursor:pointer; opacity:.64; transition:.2s ease; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb:hover,.gallery-thumb.active { opacity:1; border-color:var(--accent); transform:translateY(-2px); }
.image-lightbox { position:fixed; inset:0; z-index:500; background:rgba(2,6,12,.9); display:none; place-items:center; padding:28px; backdrop-filter:blur(10px); }
.image-lightbox.open { display:grid; }
.image-lightbox img { max-width:min(1100px,94vw); max-height:88vh; object-fit:contain; border-radius:18px; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.lightbox-close { position:fixed; top:20px; right:22px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(8,14,24,.75); color:white; font-size:1.65rem; cursor:pointer; }
.detected .plate-focus { opacity:1; transform:scale(1); }
.plate-scene { position:relative; min-height:430px; border-radius:20px; overflow:hidden; background:#05080c; }
.plate-github-image { position:absolute; inset:0; background-image:url('https://raw.githubusercontent.com/Mo-kw/Car-Plate-Detection-with-YOLOv11/main/Sample.png'); background-size:500% 200%; background-position:0 0; background-repeat:no-repeat; filter:saturate(.9) contrast(1.02); }
.plate-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.42)); pointer-events:none; }
.plate-focus { position:absolute; z-index:3; left:24%; top:39%; width:54%; height:31%; border:3px solid var(--accent-3); color:var(--accent-3); opacity:0; transform:scale(.96); transition:.3s ease; box-shadow:0 0 24px rgba(99,243,180,.22); font:900 .72rem ui-monospace,monospace; padding:6px; }
.plate-focus b { float:right; }
.scanner { position:absolute; z-index:4; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 20px var(--accent); animation:detailScan 3.2s linear infinite; }
@keyframes detailScan { from{top:18%}to{top:82%} }
.spacebot-demo { display:grid; gap:14px; }
.terminal-preview { min-height:300px; border:1px solid var(--line); border-radius:20px; background:#111; color:#e9e9e9; padding:24px; font:500 .9rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.terminal-status { color:var(--accent-3); }
.terminal-question,.terminal-answer { line-height:1.7; }
.terminal-answer b { color:#fff; }
.typing { animation:typeFlash .45s ease; }
@keyframes typeFlash { 0%{opacity:.15;transform:translateY(3px)}100%{opacity:1;transform:none} }
.prompt-row { display:flex; gap:8px; flex-wrap:wrap; }
.prompt-row button { border:1px solid var(--line); background:var(--panel-solid); color:var(--muted); border-radius:999px; padding:9px 12px; cursor:pointer; font-weight:800; font-size:.74rem; }
.prompt-row button:hover { color:var(--bg); background:var(--text); }
.project-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project-thumb-contain { object-fit:cover; object-position:center; }
.project-thumb-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,9,17,.02),rgba(4,9,17,.5)); }

@media (max-width:900px) {
  .project-intro { padding:58px 0 42px; }
  .project-intro-grid,.project-showcase-grid,.project-two-col { grid-template-columns:1fr; }
  .project-facts { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:680px) {
  .project-nav-actions { gap:8px; }
  .project-back { font-size:.78rem; }
  .project-intro h1 { font-size:clamp(2.25rem,12vw,3.6rem); }
  .project-actions-row .btn { width:100%; }
  .project-facts { grid-template-columns:1fr 1fr; }
  .project-section { padding:58px 0; }
  .showcase-card,.side-info,.detail-card,.future-card { padding:20px; }
  .showcase-head { flex-direction:column; }
  .detail-cards { grid-template-columns:1fr; }
  .mini-stats { grid-template-columns:1fr 1fr; }
  .plate-scene { min-height:320px; }
  .gallery-thumbs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .plate-focus { left:22%; top:38%; width:58%; height:32%; }
}