/* Optical glass surfaces with robotics-inspired calibration details. */
:root{
  --glass:rgba(255,255,255,.76);
  --glass-edge:rgba(255,255,255,.95);
  --glass-line:rgba(91,125,176,.18);
  --glass-shadow:0 16px 44px -26px rgba(25,65,117,.25),inset 0 1px 0 rgba(255,255,255,.95);
  --surface:#f7f9fd;--paper:#f0f4fa;--muted:#59677a;
}
:root[data-theme="dark"]{
  --surface:#0c1422;--paper:#141f31;--glass:rgba(23,36,56,.85);
  --glass-edge:rgba(157,187,226,.24);--glass-line:rgba(157,187,226,.19);
  --glass-shadow:0 16px 44px -26px #0009,inset 0 1px 0 #c9e0ff17;
}
html{scroll-padding-top:125px}
body{background:radial-gradient(ellipse 850px 650px at 90% 0%,#bcd5ff60,transparent 75%),radial-gradient(ellipse 650px 550px at 0% 30%,#d5e5ff60,transparent 80%),var(--surface)}
[data-theme="dark"] body{background:radial-gradient(ellipse 850px 650px at 90% 0%,#1a4d8838,transparent 75%),var(--surface)}
.header{position:sticky;top:16px;z-index:20;height:78px;margin-top:18px;margin-bottom:24px;padding:12px 24px;border:1px solid var(--glass-edge);border-radius:26px;background:var(--glass);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%)}
.header nav{border:0;background:transparent;padding:8px 0;gap:25px}
.header nav a{padding:5px 0}
.theme-toggle{border-color:var(--glass-line);border-radius:50px;background:rgba(144,174,218,.08);min-height:38px;padding-inline:12px}
.contact-nav{display:inline-flex;align-items:center;min-height:40px}
.hero{background:none;padding-top:34px}
.hero h1.hero-name{font-weight:480}
.hero-name>.name-line:last-child:after{width:50%;height:1px}
.hero-statement{font-weight:420}
.button{border:1px solid #4480ff;border-radius:50px;background:linear-gradient(150deg,#3576ff,#1454ed);box-shadow:inset 0 1px 0 #ffffff58,0 8px 22px #165dff24;padding:14px 23px}
[data-theme="dark"] .button{background:linear-gradient(150deg,#3576ff,#1454ed)}
.cv-link{border-bottom:1px solid var(--glass-line);padding-block:8px}
.robot-showcase,[data-theme="dark"] .robot-showcase{position:relative;background:var(--glass);border:1px solid var(--glass-edge);border-radius:30px;box-shadow:var(--glass-shadow);padding:22px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.robot-showcase:before{content:'';position:absolute;pointer-events:none;inset:7px;border:1px solid var(--glass-line);border-radius:24px;opacity:.5}
.robot-scene,[data-theme="dark"] .robot-scene{border-radius:21px;border-color:#d8e5f6;background:radial-gradient(ellipse at 50% 18%,#fff,#edf4ff 85%)}
.robot-scene:before{content:'';position:absolute;z-index:1;top:19px;left:19px;width:24px;height:24px;border-top:1px solid #85a9df;border-left:1px solid #85a9df;opacity:.65;pointer-events:none}
.robot-ghost{font-weight:300;opacity:.55}
.robot-picker{padding:5px;gap:5px;background:#789dcc0d;border:1px solid var(--glass-line);border-radius:19px;margin-top:16px}
.robot-picker button,[data-theme="dark"] .robot-picker button{border:1px solid transparent;background:transparent;border-radius:14px;min-width:0}
.robot-picker button[aria-pressed="true"],[data-theme="dark"] .robot-picker button[aria-pressed="true"]{background:var(--glass);border-color:var(--glass-edge);box-shadow:0 3px 10px #1739630d;color:var(--blue)}
.showcase-top,.showcase-caption{position:relative}
.hero-foot{border-color:var(--glass-line)}
.stack-section{background:transparent;border-block:1px solid var(--glass-line)}
.motion-toggle,.robot-motion-toggle,.lab-effects{border-radius:50px}
.brand-item img{filter:none}
.about-section,.expertise-section,.contact-section{background:rgba(145,178,223,.055);border-block:1px solid var(--glass-line)}
.about-caption{display:inline-flex;padding:8px 13px;border:1px solid var(--glass-line);border-radius:50px;background:var(--glass);font-size:8px}
.experience-row{position:relative;border-color:var(--glass-line)}
.experience-company{position:relative;padding-left:20px}
.experience-company:before{content:'';position:absolute;left:0;top:18px;width:5px;height:5px;border:1px solid var(--blue);border-radius:50%;box-shadow:0 0 0 5px #7098d40e}
.company-brand,.experience-logo{border-radius:10px}
.project-lab{background:linear-gradient(140deg,#101f34,#091322);border-block:1px solid #a7c9ff20}
.project-lab:before{background-image:radial-gradient(ellipse at 80% 0,#2b62984d,transparent 65%),linear-gradient(#86b3ff04 1px,transparent 1px),linear-gradient(90deg,#86b3ff04 1px,transparent 1px);background-size:100% 100%,70px 70px,70px 70px}
.lab-card{border-color:#a7c9ff2b;border-radius:24px;background:linear-gradient(145deg,#c4dcff12,#658ec906);box-shadow:inset 0 1px 0 #d6e7ff17,0 14px 40px #0001}
.lab-card:hover,.lab-card:focus-within{border-color:#a7c9ff75;box-shadow:inset 0 1px 0 #e5f1ff25,0 18px 44px #0003}
.lab-card-art{margin:10px 10px 0;border-radius:16px}
.gallery-filters button{background:#a7c9ff0c;border-color:#a7c9ff2b;border-radius:50px;min-height:38px}
.gallery-filters button[aria-pressed="true"]{background:#e1edff;border-color:#fff8;color:#142c51;box-shadow:inset 0 1px 0 #fff}
.credential-card{background:var(--glass);border-color:var(--glass-edge);border-radius:24px;box-shadow:var(--glass-shadow)}
.credential-art{margin:8px 8px 0;border-radius:17px;overflow:hidden}
.credential-copy{padding:20px}
.rail-controls button{border-radius:50%;background:var(--glass);border-color:var(--glass-line)}
.simulation-panel{border-radius:26px;border-color:var(--glass-line);box-shadow:var(--glass-shadow);overflow:hidden}
.film-picker{gap:6px;padding:5px;border:1px solid var(--glass-line);background:var(--glass);border-radius:21px}
.film-picker button,[data-theme="dark"] .film-picker button{border:0;border-radius:15px}
.skill-group{padding:24px;border:1px solid var(--glass-edge);border-radius:22px;background:var(--glass);box-shadow:var(--glass-shadow)}
[data-theme="dark"] .skill-group{border-color:var(--glass-edge)}
.gallery-dialog{border-radius:27px;border:1px solid var(--glass-edge);box-shadow:0 30px 100px #071a3650;background:var(--glass);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}
.gallery-dialog::backdrop{background:#081b3b55;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.dialog-top,.dialog-bottom{background:var(--glass)}
.welcome-intro{background:radial-gradient(ellipse at 80% 35%,#87b4ff25,transparent 60%),var(--surface)}
button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@supports not (backdrop-filter:blur(1px)){.header,.robot-showcase,.gallery-dialog{background:var(--surface)}}
@media(min-width:681px) and (max-width:1050px){.header{padding-inline:17px;gap:12px}.header nav{gap:15px}.header-actions{gap:12px}}
@media(max-width:680px){
 html{scroll-padding-top:145px}
 .header{top:9px;margin-top:10px;margin-bottom:12px;min-height:108px;height:auto;padding:12px 16px;gap:7px 10px;border-radius:23px}
 .header nav{padding:3px 0;gap:12px;font-size:10px}
 .header nav a{min-height:32px;display:flex;align-items:center}
 .header-actions{gap:9px}.theme-toggle{min-height:32px;padding:6px 9px}.contact-nav{font-size:10px;min-height:32px}.wordmark{font-size:9px;letter-spacing:.1em}
 .hero{padding-top:24px}.hero h1.hero-name{font-size:clamp(56px,16.5vw,93px)}
 .hero .robot-showcase{padding:17px 13px;border-radius:26px;margin-top:32px}
 .robot-showcase:before{inset:6px;border-radius:20px}.robot-scene{border-radius:17px}
 .robot-picker{border-radius:17px}.robot-picker button{padding:11px 8px;border-radius:12px}
 .button{padding:12px 20px}.hero-actions{gap:21px}
 .about-caption{font-size:7px}.experience-company{padding-left:16px}
 .lab-card{border-radius:22px}.lab-card-art{margin:8px 8px 0;border-radius:15px}
 .skill-group{padding:20px}.skills-grid{gap:15px}.gallery-dialog{border-radius:22px}
}
@media(prefers-reduced-transparency:reduce){.header,.robot-showcase,.credential-card,.skill-group,.gallery-dialog{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}

@media(max-width:360px){.hero-actions{gap:15px}.hero-actions .button{white-space:nowrap;font-size:11px;padding:12px 16px;gap:17px}.cv-link{font-size:10px;white-space:nowrap}.cv-link span{margin-left:6px}}
