:root{--color-bg:#0a1220;--color-fg:#e7ecf3;--color-accent:#c97a46;--color-accent-light:#e2915c;--color-muted:#8496af;--color-line:#1f2e47;--color-green:#6fbf8b;--color-panel:#101a2c;--color-hairline:#ffffff0f;--color-nav-bg:#0a1220d1;--font-display:"Sora", sans-serif;--font-body:"Inter", sans-serif;--font-mono:"JetBrains Mono", monospace}:root[data-theme=light]{--color-bg:#f7f5f0;--color-fg:#16202e;--color-accent:#b5652f;--color-accent-light:#a2551f;--color-muted:#5c6b80;--color-line:#e2ddd0;--color-green:#2f8f57;--color-panel:#efeae0;--color-hairline:#16202e14;--color-nav-bg:#f7f5f0db}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@keyframes blink{50%{opacity:0}}.cursor-blink{animation:1s step-end infinite blink}.body{background:var(--color-bg);color:var(--color-fg);font-family:var(--font-body);min-height:100vh;line-height:1.5}.wrap{max-width:1040px;margin:0 auto;padding:0 28px}.section{border-bottom:1px solid var(--color-line);scroll-margin-top:calc(var(--nav-h,64px) + 12px);padding:76px 0}.eyebrow{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);font-size:12px}.h2{font-family:var(--font-display);letter-spacing:-.01em;margin-top:8px;font-size:clamp(24px,3.4vw,32px);font-weight:600}@media (width<=720px){.about-grid{grid-template-columns:1fr!important}}@media (width<=640px){.hero-title{font-size:34px!important}.section{padding:44px 0}}.section--noBorder{border-bottom:none}.btn{font-family:var(--font-mono);border:1px solid var(--color-accent);color:var(--color-accent-light);padding:12px 20px;font-size:13px;text-decoration:none;transition:background .15s,color .15s}.stephanot-btn:hover{background:var(--color-accent);color:var(--color-bg)}.contactForm{border:1px solid var(--color-line);background:var(--color-panel);flex-direction:column;gap:18px;max-width:520px;margin-top:24px;padding:32px;display:flex}.formRow{flex-direction:column;gap:6px;display:flex}.formLabel{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);font-size:11px}.formInput{background:var(--color-bg);border:1px solid var(--color-line);color:var(--color-fg);font-family:var(--font-body);border-radius:1px;padding:10px 12px;font-size:14px}.formInput:focus{border-color:var(--color-accent);outline:none}.formTextarea{resize:vertical;min-height:120px;font-family:var(--font-body)}.formSubmit{cursor:pointer;background:0 0;align-self:flex-start}.formSubmit:disabled{opacity:.6;cursor:not-allowed}.formStatus{margin:0;font-size:13px}.formStatusSuccess{color:var(--color-green)}.formStatusError{color:var(--color-accent-light)}.footer{text-align:center;color:var(--color-muted);font-family:var(--font-mono);padding:30px 0 50px;font-size:11.5px}.footerLinks{justify-content:center;gap:18px;margin-bottom:12px;display:flex}.footerLink{color:var(--color-muted);text-decoration:none}.footerLink:hover{color:var(--color-accent-light)}.footerDot{color:var(--color-green)}.sectionHead{margin-bottom:40px}.eduGrid{background:var(--color-line);border:1px solid var(--color-line);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;display:grid}.eduCard{background:var(--color-bg);padding:24px}.eduYear{font-family:var(--font-mono);color:var(--color-accent);letter-spacing:.08em;font-size:11px}.eduTitle{font-family:var(--font-display);margin-top:8px;font-size:16px;font-weight:600}.eduOrg{color:var(--color-muted);margin-top:6px;font-size:13.5px}.hero{border-bottom:1px solid var(--color-line);padding:150px 0 70px}@media (width<=640px){.hero{padding-top:calc(var(--nav-h,150px) + 10px)}}.boot{font-family:var(--font-mono);color:var(--color-muted);white-space:pre-wrap;min-height:60px;margin-bottom:26px;font-size:13px}.cursor{background:var(--color-accent);vertical-align:-2px;width:7px;height:14px;margin-left:2px;display:inline-block}.title{font-family:var(--font-display);letter-spacing:-.01em;max-width:820px;font-size:clamp(34px,6vw,58px);font-weight:600;line-height:1.05}.highlight{color:var(--color-accent-light)}.subtitle{max-width:600px;color:var(--color-muted);margin-top:20px;font-size:16px}.heroMeta{font-family:var(--font-mono);color:var(--color-muted);flex-wrap:wrap;gap:28px;margin-top:36px;font-size:12.5px;display:flex}.metaItem{flex-direction:column;gap:4px;display:flex}.metaLabel{color:var(--color-accent);letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}.metaValue{color:var(--color-fg);font-weight:500}.statusDot{background:var(--color-green);border-radius:50%;width:7px;height:7px;margin-right:4px;display:inline-block;box-shadow:0 0 0 3px #6fbf8b26}.scope{border:1px solid var(--color-line);background:var(--color-panel);margin-top:48px;padding:16px 18px}.scopeHead{font-family:var(--font-mono);color:var(--color-muted);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;display:flex}.oscilloscopeCanvas{width:100%;height:64px;display:block}.impactGrid{background:var(--color-line);border:1px solid var(--color-line);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;display:grid}.impactItem{background:var(--color-bg);flex-direction:column;gap:8px;padding:26px 24px;display:flex}.impactValue{font-family:var(--font-display);color:var(--color-accent-light);font-size:clamp(26px,3.2vw,34px);font-weight:600}.impactLabel{color:var(--color-muted);max-width:260px;font-size:13.5px}.methodList{background:var(--color-line);border:1px solid var(--color-line);flex-direction:column;gap:1px;display:flex}.methodItem{background:var(--color-bg);grid-template-columns:48px 1fr;align-items:baseline;gap:18px;padding:22px 24px;display:grid}.methodStep{font-family:var(--font-mono);color:var(--color-accent);letter-spacing:.06em;font-size:13px}.methodTitle{font-family:var(--font-display);font-size:16px;font-weight:600}.methodDesc{color:var(--color-muted);max-width:560px;margin-top:6px;font-size:14.5px}@media (width<=480px){.methodItem{grid-template-columns:1fr;gap:6px}}.nav{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--color-nav-bg);border-bottom:1px solid var(--color-line);position:fixed;top:0;left:0;right:0}.navInner{justify-content:space-between;align-items:center;padding:14px 28px;display:flex}.logo{font-family:var(--font-mono);align-items:center;gap:10px;font-size:14px;display:flex}.logoSuffix{color:var(--color-muted)}.navRight{align-items:center;gap:22px;display:flex}.navLinks{font-family:var(--font-mono);color:var(--color-muted);flex-wrap:wrap;justify-content:flex-end;gap:18px 22px;font-size:13px;display:flex}.navLink{color:inherit;text-decoration:none}.stephanot-nav a:hover{color:var(--color-accent-light)}.navLink.active{color:var(--color-accent-light);text-underline-offset:5px;text-decoration:underline;text-decoration-thickness:1px}.navControls{flex-shrink:0;align-items:center;gap:8px;display:flex}.langToggle,.themeToggle{border:1px solid var(--color-line);color:var(--color-muted);cursor:pointer;background:0 0;justify-content:center;align-items:center;transition:color .15s,border-color .15s;display:flex}.langToggle{font-family:var(--font-mono);letter-spacing:.04em;padding:6px 8px;font-size:11px}.themeToggle{width:28px;height:28px;padding:0}.langToggle:hover,.themeToggle:hover{color:var(--color-accent-light);border-color:var(--color-accent-light)}@media (width<=640px){.navInner{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 28px 16px}.navRight{flex-direction:column;align-items:flex-start;gap:12px;width:100%}.navLinks{justify-content:flex-start;width:100%}}.expList{background:var(--color-line);border:1px solid var(--color-line);flex-direction:column;gap:1px;display:flex}.expItem{background:var(--color-bg);grid-template-columns:130px 1fr;gap:22px;padding:26px 24px;display:grid}@media (width<=640px){.expItem{grid-template-columns:1fr;gap:10px}}.expDate{font-family:var(--font-mono);color:var(--color-muted);flex-direction:column;gap:6px;font-size:12px;display:flex}.expDot{background:var(--color-line);width:7px;height:7px;box-shadow:none;border-radius:50%}.expDot.current{background:var(--color-green);box-shadow:0 0 0 3px #6fbf8b26}.expTop{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 14px;display:flex}.expTitle{font-family:var(--font-display);font-size:17px;font-weight:600}.expOrg{font-family:var(--font-mono);color:var(--color-accent);letter-spacing:.03em;font-size:11.5px}.expBullets{margin-top:12px;padding-left:0;list-style:none}.expBulletLi{color:var(--color-muted);max-width:640px;margin-bottom:7px;padding-left:16px;font-size:14px;position:relative}.expBulletMark{color:var(--color-accent);position:absolute;left:0}.projectsIntro{color:var(--color-muted);max-width:640px;margin:14px 0 32px;font-size:14.5px}.projectsGrid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;display:grid}.projectCard{background:var(--color-bg);border:1px solid var(--color-line);flex-direction:column;display:flex}.projectShot{aspect-ratio:16/10;background:var(--color-panel);border-bottom:1px solid var(--color-line);border:none;border-bottom:1px solid var(--color-line);cursor:zoom-in;width:100%;margin:0;padding:0;display:block;position:relative;overflow:hidden}.projectShot img{object-fit:cover;object-position:top;width:100%;height:100%;transition:transform .35s;display:block}.projectShot:hover img{transform:scale(1.03)}.projectShotMulti{aspect-ratio:auto;flex-wrap:wrap;gap:1px;height:auto;display:flex}.projectShotItem{background:var(--color-panel);cursor:zoom-in;border:none;flex:200px;justify-content:center;align-items:center;height:210px;margin:0;padding:0;display:flex;position:relative;overflow:hidden}.projectShotItem img{transition:transform .35s}.projectShotItem:hover img{transform:scale(1.05)}.projectShotItem img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;display:block}.projectShotLabel{max-width:calc(100% - 16px);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted);background:var(--color-bg);border:1px solid var(--color-line);padding:2px 6px;font-size:10px;position:absolute;bottom:8px;left:8px;right:8px}.projectShotStack{aspect-ratio:16/10;border:none;border-bottom:1px solid var(--color-line);background:var(--color-bg);cursor:zoom-in;width:100%;margin:0;padding:22px;display:block;position:relative}.stackLayer{background:var(--color-panel);border:1px solid var(--color-line);transition:transform .3s,box-shadow .3s;position:absolute;inset:22px;overflow:hidden;box-shadow:0 14px 26px -14px #0006}.stackLayer img{object-fit:cover;object-position:top;width:100%;height:100%;display:block}.stackLayer:first-child{z-index:1;transform:rotate(-6deg)translate(-14px,10px)}.stackLayer:nth-child(2){z-index:2;transform:rotate(4deg)translate(10px,8px)}.stackLayer:nth-child(3){z-index:3;transform:none}.projectShotStack:hover .stackLayer:first-child{transform:rotate(-10deg)translate(-22px,14px)}.projectShotStack:hover .stackLayer:nth-child(2){transform:rotate(6deg)translate(16px,10px)}.projectShotStack:hover .stackLayer:nth-child(3){transform:translateY(-6px);box-shadow:0 20px 32px -14px #00000073}.stackBadge{z-index:4;font-family:var(--font-mono);color:var(--color-fg);background:var(--color-bg);border:1px solid var(--color-line);border-radius:999px;padding:3px 9px;font-size:11px;position:absolute;top:10px;right:10px}.stackHint{z-index:4;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted);background:var(--color-bg);border:1px solid var(--color-line);opacity:.85;pointer-events:none;white-space:nowrap;padding:3px 8px;font-size:10px;transition:opacity .2s;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.projectShotStack:hover .stackHint{opacity:1}.projectBody{flex-direction:column;flex:1;padding:22px 24px 26px;display:flex}.projectTop{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 14px;display:flex}.projectTitle{font-family:var(--font-display);font-size:17px;font-weight:600}.projectDesc{color:var(--color-muted);margin:12px 0 0;font-size:14px}.projectCaseBlock{margin-top:14px}.projectTechniques{color:var(--color-muted);flex-direction:column;gap:4px;margin:6px 0 0;padding-left:16px;font-size:13.5px;display:flex}.projectTechniques li{line-height:1.4}.projectRepoLink{font-family:var(--font-mono);color:var(--color-accent);overflow-wrap:anywhere;margin-top:18px;font-size:12px;text-decoration:none;display:block}.projectDemoLink+.projectRepoLink{margin-top:6px}.projectRepoLink:hover{text-decoration:underline}.lightboxOverlay{z-index:1000;background:#03060cdb;justify-content:center;align-items:center;padding:32px;animation:.18s lightboxFadeIn;display:flex;position:fixed;inset:0}:root[data-theme=light] .lightboxOverlay{background:#16140eb8}@keyframes lightboxFadeIn{0%{opacity:0}to{opacity:1}}.lightboxContent{flex-direction:column;align-items:center;gap:14px;width:100%;max-width:1100px;display:flex;position:relative}.lightboxFigure{background:var(--color-panel);border:1px solid var(--color-line);flex-direction:column;width:100%;min-height:40vh;margin:0;display:flex;position:relative}.lightboxFigure img{object-fit:contain;background:var(--color-bg);width:100%;max-height:74vh;display:block}.lightboxCaption{font-family:var(--font-mono);color:var(--color-muted);border-top:1px solid var(--color-line);justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:12px;display:flex}.lightboxCounter{color:var(--color-muted);white-space:nowrap}.lightboxClose{border:1px solid var(--color-line);color:var(--color-fg);cursor:pointer;background:0 0;width:34px;height:34px;font-size:22px;line-height:1;position:absolute;top:-44px;right:0}.lightboxClose:hover{border-color:var(--color-accent);color:var(--color-accent)}.lightboxNav{background:var(--color-bg);border:1px solid var(--color-line);color:var(--color-fg);cursor:pointer;z-index:1;justify-content:center;align-items:center;width:42px;height:42px;font-size:26px;line-height:1;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.lightboxNav:hover{border-color:var(--color-accent);color:var(--color-accent)}.lightboxNavPrev{left:-20px}.lightboxNavNext{right:-20px}.lightboxThumbs{flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%;display:flex}.lightboxThumb{border:1px solid var(--color-line);background:var(--color-panel);cursor:pointer;opacity:.55;width:64px;height:44px;padding:0;transition:opacity .2s,border-color .2s;position:relative;overflow:hidden}.lightboxThumb img{object-fit:cover;width:100%;height:100%}.lightboxThumb:hover{opacity:.85}.lightboxThumbActive{opacity:1;border-color:var(--color-accent)}@media (width<=640px){.lightboxOverlay{padding:20px 16px}.lightboxClose{top:-40px}.lightboxNavPrev{left:0}.lightboxNavNext{right:0}.lightboxFigure img{max-height:56vh}}.shotSkeleton{z-index:1;background:var(--color-panel);position:absolute;inset:0;overflow:hidden}.shotSkeleton:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff0a 35%,#ffffff1f 50%,#ffffff0a 65%,#0000 100%);animation:1.5s ease-in-out infinite shotShimmer;position:absolute;inset:0;transform:translate(-100%)}:root[data-theme=light] .shotSkeleton:after{background:linear-gradient(90deg,#0000 0%,#16202e08 35%,#16202e17 50%,#16202e08 65%,#0000 100%)}@keyframes shotShimmer{to{transform:translate(100%)}}.shotImg{opacity:0}.shotImg.shotImgReady{opacity:1;animation:.28s shotFade}@keyframes shotFade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.shotSkeleton:after{display:none}.shotImg{opacity:1}}.workTag{font-family:var(--font-mono);color:var(--color-muted);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}.workCaseLabel{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);font-size:10.5px;display:block}.workStack{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.chip{font-family:var(--font-mono);border:1px solid var(--color-line);color:var(--color-muted);border-radius:1px;padding:3px 8px;font-size:11px}.aboutGrid{grid-template-columns:1.1fr .9fr;gap:52px;display:grid}.aboutP{color:var(--color-muted);max-width:520px;margin-bottom:16px;font-size:15px}.freqPanel{border:1px solid var(--color-line);background:var(--color-panel);padding:22px}.freqRow{border-bottom:1px dashed var(--color-hairline);justify-content:space-between;padding:9px 0;font-size:13.5px;display:flex}.freqRow.last{border-bottom:none}.freqKey{color:var(--color-muted);font-family:var(--font-mono);font-size:12px}.stackGrid{background:var(--color-line);border:1px solid var(--color-line);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;display:grid}.stackGroup{background:var(--color-bg);padding:22px}.stackGroupTitle{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);margin-bottom:16px;font-size:12px;font-weight:500}.skillRow{border-bottom:1px dashed var(--color-hairline);align-items:center;gap:10px;padding:7px 0;font-size:14px;display:flex}.skillName{flex:1;min-width:0}.skillTrack{background:var(--color-line);border-radius:2px;flex-shrink:0;width:50px;height:4px;overflow:hidden}.skillFill{background:var(--color-green);border-radius:2px;height:100%}.skillPercent{text-align:right;width:32px;font-family:var(--font-mono);color:var(--color-muted);flex-shrink:0;font-size:11px}
