@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap";
:root{--accent:#ac3520;--ink:#fff;--bg:#111;--muted:#aaa;--card:#171717}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;overflow:hidden auto}html{scroll-behavior:auto}body{background:#111;margin:0;font-family:Poppins,IBM Plex Sans Thai,sans-serif}button,a{font:inherit}button{color:inherit}svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:22px}.site{--ink:#fff;--bg:#111;--muted:#aaa;--card:#171717;background:var(--bg);width:100%;height:100vh;color:var(--ink);overscroll-behavior:none;cursor:auto;scrollbar-width:none;position:relative;overflow:hidden auto}.site::-webkit-scrollbar{display:none}.site.light{--ink:#111;--bg:#fff;--muted:#666;--card:#f1f1f1}.site a,.site button{cursor:pointer}.site>section{z-index:2}.theme-toggle,.layout-toggle,.mobile-toggle{z-index:30;cursor:pointer;background:var(--card);border:0;place-items:center;display:grid;position:fixed}.theme-toggle{border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);width:46px;height:46px;color:var(--ink);border-radius:50%;transition:background .2s,color .2s,border-color .15s;top:28px;right:30px;box-shadow:0 5px 18px #0002}.layout-toggle{border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);width:46px;height:46px;color:var(--ink);border-radius:50%;transition:background .2s,color .2s,border-color .15s,transform .25s;top:28px;right:86px;box-shadow:0 5px 18px #0002}.theme-toggle:hover,.layout-toggle:hover,.layout-toggle.active{background:var(--accent);color:#fff;border-color:#0000}.layout-toggle.active svg{transform:scaleX(-1)}@media (min-width:901px){.layout-reversed .hero,.layout-reversed .personal-layout,.layout-reversed .education-showcase,.layout-reversed .contact-layout,.layout-reversed .hero>*,.layout-reversed .personal-layout>*,.layout-reversed .education-showcase>*,.layout-reversed .contact-layout>*{transform:scaleX(-1)}.layout-reversed .theme-toggle{left:30px;right:auto}.layout-reversed .layout-toggle{left:86px;right:auto}.layout-reversed .side-nav{left:28px;right:auto}.layout-reversed .side-nav button{justify-content:flex-start}.layout-reversed .side-nav button>i{order:-1}.layout-reversed .side-nav button>span{border-radius:0 28px 28px 0;margin-left:-26px;margin-right:0;padding:0 22px 0 37px;transform:translate(-12px)}.layout-reversed .side-nav button:not(.just-clicked):hover>span{transform:none}}.mobile-toggle{display:none}.side-nav{z-index:25;flex-direction:column;gap:16px;display:flex;position:fixed;top:50%;right:28px;transform:translateY(-50%)}.side-nav button{cursor:pointer;background:0 0;border:0;justify-content:flex-end;align-items:center;height:52px;padding:0;display:flex}.side-nav button>span{background:var(--accent);color:#fff;text-transform:uppercase;opacity:0;pointer-events:none;border-radius:28px 0 0 28px;align-items:center;height:52px;margin-right:-26px;padding:0 37px 0 22px;font-size:13px;font-weight:700;transition:opacity .2s,transform .25s;display:flex;transform:translate(12px)}.side-nav button>i{z-index:1;background:var(--card);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:50%;place-items:center;width:52px;height:52px;font-style:normal;transition:background .2s,color .2s,border-color .15s;display:grid;position:relative}.side-nav button:not(.just-clicked):hover>span{opacity:1;transform:none}.side-nav button:hover>i,.side-nav button.active>i{background:var(--accent);color:#fff;border-color:#0000}.hero{isolation:isolate;grid-template-columns:minmax(380px,35vw) 1fr;align-items:center;gap:clamp(90px,15vw,290px);min-height:100vh;padding:40px 7vw 40px 40px;display:grid;position:relative}.accent-shape{background:var(--accent);clip-path:polygon(0 0,74% 0,100% 100%,0 100%);width:24vw;min-width:310px;position:absolute;inset:0 auto 0 0}.profile-marquee{z-index:1;pointer-events:none;width:100%;position:absolute;top:50%;left:0;overflow:hidden;transform:translateY(-50%)}.profile-marquee>div{gap:55px;width:max-content;animation:20s linear infinite profile-marquee;display:flex}.profile-marquee span{color:#0000;-webkit-text-stroke:1px #ffffff7a;letter-spacing:.04em;white-space:nowrap;font-size:clamp(70px,9vw,150px);font-weight:900;line-height:1}.site.light .profile-marquee span{-webkit-text-stroke-color:#ffffff9e}@keyframes profile-marquee{to{transform:translate(calc(-25% - 13.75px))}}.portrait-wrap{z-index:1;background:#111;border:0;border-radius:22px 22px 70px;width:100%;height:calc(100vh - 76px);min-height:600px;padding:0;position:relative;overflow:hidden}.portrait-wrap img{object-fit:cover;object-position:50% 42%;width:100%;height:100%}.portrait-wrap .portrait-background{z-index:0;position:absolute;inset:0}.portrait-wrap .portrait-person{z-index:2;position:absolute;inset:0}.hero-copy{z-index:2;max-width:610px;position:relative}.hero-title{display:block;position:relative}.hero-title>span{background:var(--accent);width:40px;height:4px;box-shadow:10px 0 0 color-mix(in srgb,var(--accent) 45%,transparent);border-radius:4px;display:block;position:absolute;top:21px;left:-68px;transform:skew(-24deg)}.eyebrow{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:13px;font-size:13px;font-weight:700;display:flex}.eyebrow span{background:var(--accent);width:38px;height:3px}h1,h2,h3,p{margin-top:0}h1{white-space:nowrap;letter-spacing:-.035em;text-transform:uppercase;margin:0 0 12px;font-size:clamp(32px,2.7vw,46px);font-style:normal;font-weight:800;line-height:1.1}h1 em,h2 em{color:var(--accent);font-style:normal}.hero-role{white-space:nowrap;text-transform:uppercase;letter-spacing:.015em;margin:0 0 12px;font-size:clamp(17px,1.45vw,23px);font-weight:800;line-height:1.3}.intro{max-width:590px;color:var(--ink);font-size:clamp(15px,1.1vw,18px);line-height:2}.pill-button{border:1px solid var(--accent);cursor:pointer;text-transform:uppercase;letter-spacing:.03em;height:58px;box-shadow:inset 0 0 0 var(--accent);background:0 0;border-radius:99px;align-items:center;gap:22px;margin-top:16px;padding:0 4px 0 25px;font-weight:700;transition:box-shadow .35s,color .25s;display:flex}.pill-button i{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.pill-button:hover{color:#fff;box-shadow:inset -360px 0 0 var(--accent)}.availability{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;align-items:center;gap:10px;margin-top:34px;font-size:12px;display:flex}.availability b{background:#61d883;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 5px #61d88322}.availability small{opacity:.55;margin-left:8px}.scroll-cue{color:var(--muted);text-transform:uppercase;letter-spacing:.15em;align-items:center;gap:12px;font-size:10px;display:flex;position:absolute;bottom:25px;right:9vw}.scroll-cue span{background:var(--muted);width:40px;height:1px}.content-section{border-top:1px solid color-mix(in srgb,var(--ink) 11%,transparent);isolation:isolate;min-height:100vh;padding:clamp(90px,10vw,150px) max(8vw,80px);position:relative}.about{flex-direction:column;justify-content:center;min-height:100vh;padding:36px max(7vw,70px);display:flex}.about-title{text-align:center;flex:0 0 110px;place-items:center;display:grid;position:relative}.about-title:before{content:attr(data-shadow);color:color-mix(in srgb,var(--ink) 7%,transparent);letter-spacing:.08em;font-size:clamp(74px,8.5vw,122px);font-weight:800;line-height:1;position:absolute}.about-title h2{z-index:1;text-transform:uppercase;letter-spacing:-.035em;margin:0;font-size:clamp(42px,4.2vw,62px);font-weight:800;line-height:1;position:relative}.about-title em{color:var(--accent);font-style:normal}.personal-layout{grid-template-columns:1fr 1.08fr;align-items:start;gap:clamp(55px,7vw,110px);width:min(1320px,100%);margin:38px auto 0;display:grid}.personal-info{padding:0}.personal-info h3{text-transform:uppercase;margin:0 0 35px;font-size:25px}.info-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 38px;display:grid}.info-list p{min-width:0;color:var(--muted);white-space:nowrap;gap:5px;margin:0;font-size:13px;display:flex}.info-list b{color:var(--ink);text-overflow:ellipsis;font-weight:600;overflow:hidden}.about-button{width:max-content;color:var(--ink);margin-top:30px;text-decoration:none}.about-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;display:grid}.about-stats article{border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);border-radius:5px;flex-direction:column;justify-content:center;min-height:155px;padding:24px 38px;display:flex}.about-stats strong{color:var(--accent);letter-spacing:-.045em;font-size:clamp(38px,3.5vw,54px);line-height:1;display:block}.about-stats sup{vertical-align:top;margin-left:3px;font-size:.48em}.about-stats p{text-transform:uppercase;margin:12px 0 0 45px;font-size:13px;line-height:1.7;position:relative}.about-stats p:before{content:"";background:color-mix(in srgb,var(--ink) 38%,transparent);width:30px;height:1px;position:absolute;top:11px;left:-45px}.education-section,.certificates-section{flex-direction:column;justify-content:center;min-height:100vh;padding:45px max(7vw,70px);display:flex}.page-title{text-align:center;flex:0 0 112px;place-items:center;display:grid;position:relative}.page-title:before{content:attr(data-shadow);color:color-mix(in srgb,var(--ink) 7%,transparent);letter-spacing:.06em;font-size:clamp(66px,7.5vw,108px);font-weight:800;line-height:1;position:absolute}.page-title h2{z-index:1;text-transform:uppercase;letter-spacing:-.035em;margin:0;font-size:clamp(40px,4vw,58px);font-weight:800;line-height:1;position:relative}.page-title em{color:var(--accent);font-style:normal}.education-layout{grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);align-items:stretch;gap:34px;width:min(1180px,100%);margin:20px auto 0;display:grid}.education-profile{isolation:isolate;min-height:520px;position:relative;overflow:hidden}.education-profile-circle{z-index:0;aspect-ratio:1;background:var(--accent);border-radius:50%;width:min(31vw,420px);position:absolute;top:50%;left:50%;transform:translate(-50%,-45%)}.education-profile img{z-index:1;object-fit:contain;object-position:center bottom;width:100%;height:100%;position:absolute;inset:0}.education-content{grid-template-rows:auto 1fr;align-content:center;gap:16px;min-width:0;display:grid}.degree-card,.education-details>article,.certificate-item,.certificate-note{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:var(--card);border-radius:8px}.degree-card{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 9%,var(--card)),var(--card) 45%);min-width:0;padding:34px;position:relative;overflow:hidden}.degree-card:before{content:"";background:var(--accent);width:4px;position:absolute;inset:0 auto 0 0}.degree-heading{min-width:0;padding-right:82px;display:block}.university-logo{background:#fff;border-radius:50%;place-items:center;width:66px;height:66px;padding:7px;display:grid;position:absolute;top:28px;right:28px;overflow:hidden;box-shadow:0 8px 25px #0002}.kmutnb-logo{object-fit:contain;width:100%;max-width:100%;height:100%;max-height:100%;display:block}.degree-period{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:8px;margin:4px 0 8px;font-size:11px;font-weight:800;display:flex}.degree-period span{background:var(--accent);width:24px;height:2px}.degree-heading small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:600}.degree-card h3{margin:28px 0 14px;font-size:clamp(23px,2vw,31px);line-height:1.25}.degree-card>strong{max-width:330px;color:var(--muted);font-size:12px;font-weight:500;line-height:1.65;display:block}.degree-card abbr{color:var(--ink);text-decoration:none}.degree-card dl{grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 0;display:grid}.degree-card dl div{border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);background:color-mix(in srgb,var(--bg) 35%,transparent);border-radius:6px;padding:13px 14px}.degree-card dt{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:9px}.degree-card dd{margin:5px 0 0;font-size:15px;font-weight:700}.school-history{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);margin-top:22px;padding:18px 82px 0 58px;position:relative}.school-logo{object-fit:contain;background:#fff;border-radius:50%;width:44px;height:44px;padding:3px;position:absolute;top:18px;left:0}.school-history small{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:9px}.school-history h4{margin:9px 0 0;font-size:15px;line-height:1.35}.school-program{color:var(--muted);margin-top:3px;font-size:10px;display:block}.school-history>p{color:var(--muted);text-transform:uppercase;margin:0;font-size:10px;position:absolute;bottom:0;right:0}.school-history>p b{color:var(--ink);font-size:16px;display:block}.education-details{grid-template-columns:1fr 1fr;gap:16px;display:grid}.education-details>article{padding:18px 20px}.education-card-head{align-items:center;gap:11px;margin-bottom:15px;display:flex}.education-card-head>span{color:var(--accent);font-size:9px;font-weight:800}.education-card-head h3{text-transform:uppercase;letter-spacing:.01em;margin:0;font-size:16px}.coursework-list{flex-wrap:wrap;gap:7px;display:flex}.coursework-list span{border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--ink);border-radius:20px;padding:7px 11px;font-size:9px;font-weight:600}.education-skills{grid-template-columns:1fr 1fr;gap:9px 12px;display:grid}.education-skills p{border-left:2px solid color-mix(in srgb,var(--accent) 70%,transparent);background:color-mix(in srgb,var(--ink) 3%,transparent);gap:4px;margin:0;padding:9px 11px;display:grid}.education-skills b{color:var(--accent);font-size:10px}.education-skills span{color:var(--muted);font-size:9px;line-height:1.45}.certificate-layout{grid-template-columns:1.15fr .85fr;gap:28px;width:min(940px,100%);margin:45px auto 0;display:grid}.certificate-item{min-height:330px;padding:0;display:block;overflow:hidden}.certificate-item img{object-fit:cover;object-position:center;width:100%;height:100%;min-height:330px;display:block}.certificate-note{flex-direction:column;justify-content:center;min-height:330px;padding:42px;display:flex}.certificate-note>span{color:var(--muted);font-size:12px;line-height:1.7}.certificate-note strong{color:var(--accent);font-size:64px;line-height:1}.certificate-note sup{font-size:.45em}.certificate-note p{text-transform:uppercase;margin:12px 0 18px;font-size:18px;font-weight:700}.certificate-note h3{margin:0 0 14px;font-size:24px;line-height:1.3}.certificate-note a{width:max-content;color:var(--accent);text-transform:uppercase;border-bottom:1px solid var(--accent);margin-top:24px;font-size:11px;font-weight:700;text-decoration:none}.section-head{justify-content:space-between;align-items:flex-start;margin-bottom:90px;display:flex}.section-head>p{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:12px}.section-head h2,.contact h2{letter-spacing:-.04em;max-width:800px;margin:0;font-size:clamp(44px,6vw,86px);font-weight:800;line-height:1.07}.about-grid{grid-template-columns:1.1fr 1fr;gap:70px 10vw;display:grid}.lead{letter-spacing:-.03em;font-size:clamp(25px,3vw,42px);line-height:1.45}.bio{color:var(--muted);font-size:16px;line-height:1.85}.stats{border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent);grid-column:1/-1;grid-template-columns:repeat(3,1fr);padding-top:45px;display:grid}.stats div{flex-direction:column;gap:7px;display:flex}.stats strong{color:var(--accent);letter-spacing:-.06em;font-size:clamp(48px,6vw,80px)}.stats span{color:var(--muted)}.resume-grid{grid-template-columns:1.35fr 1fr;gap:22px;margin-top:110px;display:grid}.resume-grid article{background:var(--card);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:18px;padding:clamp(25px,3vw,42px)}.resume-grid .mini-label{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:28px;font-size:11px;font-weight:700}.resume-grid h3{letter-spacing:-.035em;font-size:clamp(25px,2.5vw,38px);line-height:1.25}.resume-grid article>p:not(.mini-label){color:var(--muted);line-height:1.7}.resume-grid article>div:not(.aws-mark){border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);grid-template-columns:130px 1fr;gap:22px;padding:16px 0;display:grid}.resume-grid span{color:var(--muted);font-size:12px}.resume-grid b{font-size:13px;font-weight:500;line-height:1.65}.skills-card{grid-row:span 2}.certificate-card{grid-column:1}.aws-mark{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:70px;height:70px;margin-bottom:25px;font-weight:800;display:grid}.work{background:var(--bg);flex-direction:column;justify-content:center;min-height:100vh;padding:76px max(7vw,70px) 70px;display:flex}.portfolio-title{text-align:center;flex:0 0 100px;place-items:center;display:grid;position:relative}.portfolio-title:before{content:attr(data-shadow);color:color-mix(in srgb,var(--ink) 7%,transparent);letter-spacing:.08em;font-size:clamp(74px,8.5vw,122px);font-weight:800;line-height:1;position:absolute}.portfolio-title h2{z-index:1;text-transform:uppercase;letter-spacing:-.035em;margin:0;font-size:clamp(42px,4.2vw,62px);font-weight:800;line-height:1;position:relative}.portfolio-title em{color:var(--accent);font-style:normal}.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:20px 22px;width:min(1140px,100%);margin:20px auto 0;display:grid}.portfolio-grid.certificate-grid{grid-template-columns:1fr;width:min(620px,100%);margin-left:auto;margin-right:auto}.certificate-card .project-copy{min-height:155px;padding:18px 24px 20px}.certificate-card .project-visual{background:#fff}.certificate-card .project-visual img{object-fit:contain}.certificate-card .project-copy h3{font-size:20px}.certificate-card .project-copy small{font-size:11px}.portfolio-card{background:var(--card);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);min-width:0;height:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:5px;flex-direction:column;padding:0;display:flex;overflow:hidden}.project-visual{aspect-ratio:16/9;background:linear-gradient(135deg,#24110e,var(--accent));color:#fff;place-items:center;width:100%;display:grid;position:relative;overflow:hidden}.project-visual img{object-fit:cover;object-position:center;width:100%;height:100%;position:absolute;inset:0}.project-visual:before{content:"";border:32px solid #ffffff10;border-radius:50%;width:210px;height:210px;position:absolute;top:-105px;right:-45px}.project-visual span{letter-spacing:.08em;font-size:38px;font-weight:800;position:relative}.project-02 .project-visual{background:linear-gradient(135deg,#1b2530,#365d72)}.project-03 .project-visual{background:linear-gradient(135deg,#231538,#6f3181)}.project-04 .project-visual{background:linear-gradient(135deg,#25112b,#ac3520)}.project-05 .project-visual{background:linear-gradient(135deg,#122b26,#287568)}.project-06 .project-visual{background:linear-gradient(135deg,#2d250d,#936e1c)}.project-copy{border-top:4px solid var(--accent);flex:1;min-height:142px;padding:15px 20px 17px}.project-copy p{color:var(--accent);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;text-overflow:ellipsis;margin-bottom:6px;font-size:9px;font-weight:600;overflow:hidden}.project-copy h3{margin:0 0 7px;font-size:17px;line-height:1.3}.project-copy small{color:var(--muted);font-size:10px;line-height:1.5;display:block}.portfolio-pagination{justify-content:center;gap:10px;margin:22px auto 0;display:flex}.portfolio-pagination button{background:var(--card);width:42px;height:42px;color:var(--ink);cursor:pointer;border:0;border-radius:50%;padding:0;font-weight:600}.portfolio-pagination button.active{background:var(--accent);color:#fff}.project-modal-backdrop{z-index:60;background:#000c;place-items:center;padding:30px;display:grid;position:fixed;inset:0}.project-modal{background:var(--bg);width:min(680px,100%);max-height:calc(100vh - 60px);color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:12px;padding:28px;position:relative;overflow:auto}.project-modal-close{z-index:2;background:var(--accent);color:#fff;border:0;border-radius:50%;place-items:center;width:42px;height:42px;display:grid;position:absolute;top:14px;right:14px}.project-modal-visual .project-visual{aspect-ratio:16/7;border-radius:7px}.certificate-modal-visual .project-visual{aspect-ratio:16/10;background:#fff}.certificate-modal-visual .project-visual img{object-fit:contain}.project-modal>p:first-of-type{color:var(--accent);text-transform:uppercase;margin:22px 0 7px;font-size:11px;font-weight:600}.project-modal h2{margin:0;font-size:34px}.project-modal-description{color:var(--muted);margin:15px 0 22px;line-height:1.7}.project-modal-link{background:var(--accent);color:#fff;text-transform:uppercase;letter-spacing:.05em;border-radius:6px;width:max-content;margin:0 0 18px;padding:11px 18px;font-size:11px;font-weight:700;text-decoration:none;display:block}.project-modal dl{grid-template-columns:1fr 1fr;gap:12px;margin:0;display:grid}.project-modal dl div{background:var(--card);border-radius:7px;padding:14px}.project-modal dt{color:var(--muted);text-transform:uppercase;font-size:10px}.project-modal dd{margin:4px 0 0;font-size:13px}.contact{flex-direction:column;justify-content:center;min-height:100vh;padding:36px max(5vw,55px);display:flex}.contact-title{text-align:center;flex:0 0 112px;place-items:center;display:grid;position:relative}.contact-title:before{content:attr(data-shadow);color:color-mix(in srgb,var(--ink) 7%,transparent);letter-spacing:.08em;font-size:clamp(74px,8.5vw,122px);font-weight:800;line-height:1;position:absolute}.contact-title h2{z-index:1;text-transform:uppercase;letter-spacing:-.035em;margin:0;font-size:clamp(42px,4.2vw,62px);font-weight:800;line-height:1;position:relative}.contact-title em{color:var(--accent);font-style:normal}.contact-layout{grid-template-columns:minmax(300px,.72fr) 1.38fr;align-items:center;gap:clamp(60px,8vw,125px);width:min(1320px,100%);margin:46px auto 0;display:grid}.contact-intro h3{text-transform:uppercase;margin:0 0 20px;font-size:25px}.contact-intro>p{color:var(--muted);font-size:13px;line-height:1.85}.contact-info-list{gap:20px;margin-top:30px;display:grid}.contact-info-list article{align-items:center;gap:18px;display:flex}.contact-info-list i{color:var(--accent);flex:0 0 34px;place-items:center;font-style:normal;display:grid}.contact-info-list i svg{stroke-width:2px;width:30px;height:30px}.contact-info-list div{gap:3px;min-width:0;display:grid}.contact-info-list span{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:700}.contact-info-list b,.contact-info-list a{color:var(--ink);overflow-wrap:anywhere;font-size:13px;font-weight:500;text-decoration:none}.contact-socials{gap:12px;margin-top:30px;display:flex}.contact-socials a{background:var(--card);width:40px;height:40px;color:var(--ink);border-radius:50%;place-items:center;display:grid}.contact-socials svg{width:18px;height:18px}.contact-socials .icon-facebook,.contact-socials .icon-github{fill:currentColor;stroke:none}.contact-form{gap:24px;display:grid}.contact-form>div{grid-template-columns:1fr 1fr;gap:24px;display:grid}.contact-form input,.contact-form textarea{border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);background:color-mix(in srgb,var(--card) 88%,var(--ink) 3%);width:100%;color:var(--ink);outline:none;padding:0 27px;font-family:inherit;font-size:12px;font-weight:600}.contact-form input{border-radius:28px;height:51px}.contact-form textarea{resize:none;border-radius:28px;height:170px;padding-top:20px}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted);opacity:.72}.contact-submit{width:max-content;margin-top:12px}.form-status{min-height:18px;margin:-12px 0 0;font-size:11px}.form-status.success{color:#55b978}@media (max-width:900px){.theme-toggle{width:44px;height:44px;top:20px;right:78px}.layout-toggle{width:44px;height:44px;top:20px;right:132px}.mobile-toggle{border-radius:50%;width:44px;height:44px;display:grid;top:20px;right:22px}.mobile-toggle>span{gap:5px;display:grid}.mobile-toggle i{background:currentColor;width:18px;height:1px;display:block}.side-nav{background:color-mix(in srgb,var(--bg) 95%,transparent);justify-content:center;align-items:center;display:none;inset:0;transform:none}.side-nav.open{display:flex}.side-nav button>span{opacity:1;color:var(--ink);background:0 0;margin-right:0;padding:0 13px 0 21px;font-size:20px;transform:none}.side-nav button>i{order:-1}.hero{flex-direction:column;gap:0;padding:90px 22px 55px;display:flex}.accent-shape{clip-path:polygon(0 0,100% 0,100% 70%,0 100%);width:100%;min-width:0;height:44vh}.profile-marquee{width:100%;top:50%;left:0}.portrait-wrap{border-radius:14px;width:100%;height:52vh;min-height:420px}.hero-copy{padding:45px 4px 0}.hero-title>span{width:27px;height:3px;top:16px;left:-42px}.hero-copy h1{font-size:clamp(25px,7.2vw,36px)}.scroll-cue{display:none}.content-section{padding:90px 24px}.section-head{margin-bottom:55px;display:block}.section-head>p{margin-bottom:25px}.about{padding:70px 25px 24px}.about-title{flex:0 0 68px}.about-title:before{font-size:58px}.personal-layout{margin-top:22px;display:block;overflow:hidden}.personal-info{padding:0;display:block}.personal-info h3{margin-bottom:18px;font-size:20px}.info-list{gap:10px 20px}.info-list p{font-size:10px;display:block}.info-list span,.info-list b{display:block}.about-button{height:44px;margin-top:16px}.about-button i{width:36px;height:36px}.about-stats{gap:10px;height:210px;margin-top:18px}.about-stats article{min-height:0;padding:12px 18px}.about-stats strong{font-size:28px}.about-stats p{margin:5px 0 0;font-size:8px}.about-stats p:before{display:none}.education-section,.certificates-section{padding:70px 20px 20px}.page-title{flex:0 0 68px}.page-title:before{font-size:44px}.page-title h2{font-size:28px}.education-layout{grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:14px;margin-top:18px}.education-profile{min-height:500px}.education-profile-circle{width:min(36vw,340px)}.degree-card{padding:18px}.degree-heading{padding-right:62px}.university-logo{width:50px;height:50px;padding:6px;top:16px;right:16px}.kmutnb-logo{width:100%;height:100%}.degree-period{font-size:8px}.degree-card h3{margin:9px 0;font-size:19px}.degree-card>strong{font-size:9px}.degree-card dl{margin-top:12px}.degree-card dl div{padding:8px 10px}.education-details{gap:10px}.education-details>article{padding:14px 17px}.education-card-head{margin-bottom:10px}.education-details h3{font-size:13px}.coursework-list{gap:5px}.coursework-list span{padding:5px 8px;font-size:7px}.education-skills{gap:6px 8px}.education-skills p{padding:6px 8px}.education-skills b{font-size:8px}.education-skills span{font-size:7px}.certificate-layout{grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.certificate-item{min-height:280px;padding:0}.certificate-item img{min-height:280px}.certificate-note{min-height:280px;padding:22px}.certificate-note strong{font-size:46px}.certificate-note p{font-size:12px}.certificate-note h3{font-size:17px}.resume-grid{margin-top:70px;display:block}.resume-grid article{margin-bottom:18px}.resume-grid article>div:not(.aws-mark){grid-template-columns:1fr;gap:5px}.work{padding:86px 20px 32px}.portfolio-title{flex:0 0 65px}.portfolio-title:before{font-size:52px}.portfolio-title h2{font-size:30px}.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}.project-visual span{font-size:23px}.project-copy{min-height:80px;padding:8px 10px}.project-copy p{font-size:6px}.project-copy h3{margin-bottom:3px;font-size:11px}.project-copy small{font-size:7px;line-height:1.3}.portfolio-pagination{margin-top:14px}.portfolio-pagination button{width:34px;height:34px}.contact{padding:70px 25px 22px}.contact-title{flex:0 0 68px}.contact-title:before{font-size:52px}.contact-title h2{font-size:32px}.contact-layout{margin-top:18px;display:block;overflow:hidden}.contact-intro h3{margin-bottom:8px;font-size:18px}.contact-intro>p{font-size:10px;line-height:1.5}.contact-info-list{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.contact-info-list article{align-items:flex-start;gap:6px}.contact-info-list i{flex-basis:22px}.contact-info-list i svg{width:19px;height:19px}.contact-info-list span{font-size:7px}.contact-info-list b,.contact-info-list a{font-size:8px}.contact-form{gap:10px;margin-top:18px}.contact-form>div{gap:10px}.contact-form input{height:38px;padding:0 16px;font-size:9px}.contact-form textarea{border-radius:18px;height:82px;padding:13px 16px;font-size:9px}.contact-submit{height:44px;margin-top:4px}.contact-submit i{width:36px;height:36px}}@media (pointer:coarse){.site{cursor:auto}.site a,.site button{cursor:pointer}}@media (max-width:600px){html,body,.site{height:100dvh}.site>section,.hero,.about,.education-section,.certificates-section,.work,.contact{width:100%;height:100dvh;min-height:100dvh;overflow:hidden}.theme-toggle{width:40px;height:40px;top:14px;right:66px}.layout-toggle{width:40px;height:40px;top:14px;right:116px}.mobile-toggle{width:40px;height:40px;top:14px;right:14px}.side-nav{gap:10px;padding:70px 20px 24px}.side-nav button{height:44px}.side-nav button>i{width:44px;height:44px}.side-nav button>span{height:44px;font-size:16px}.hero{padding:66px 16px 18px}.accent-shape{height:39dvh}.portrait-wrap{border-radius:12px 12px 34px;flex:0 0 39dvh;height:39dvh;min-height:0}.profile-marquee span{font-size:54px}.profile-marquee>div{gap:28px}.hero-copy{width:100%;max-width:none;padding:18px 2px 0}.hero-copy h1{margin-bottom:7px;font-size:clamp(24px,7.4vw,32px)}.hero-role{margin-bottom:8px;font-size:clamp(13px,4vw,17px)}.intro{margin-bottom:8px;font-size:10.5px;line-height:1.55}.pill-button{gap:13px;height:42px;margin-top:8px;padding-left:17px;font-size:9px}.pill-button i{width:34px;height:34px}.pill-button svg{width:17px}.about{padding:58px 16px 14px}.about-title{flex-basis:58px}.about-title:before{font-size:44px}.about-title h2{font-size:28px}.personal-layout{margin-top:8px}.personal-info h3{margin-bottom:10px;font-size:16px}.info-list{grid-template-columns:1fr 1fr;gap:7px 12px}.info-list p{font-size:8px}.about-button{margin-top:10px}.about-stats{gap:7px;height:180px;margin-top:10px}.about-stats article{padding:8px 12px}.about-stats strong{font-size:24px}.about-stats p{font-size:7px;line-height:1.35}.education-section,.certificates-section{padding:58px 14px 12px}.page-title{flex-basis:55px}.page-title:before{font-size:38px}.page-title h2{font-size:25px}.education-layout{grid-template-columns:42% minmax(0,58%);gap:7px;margin-top:8px}.education-profile{min-height:0}.education-profile-circle{width:44vw}.education-content{gap:7px}.degree-card{padding:13px 14px}.degree-heading{padding-right:48px}.university-logo{width:42px;height:42px;padding:5px;top:12px;right:12px}.degree-period{margin:0 0 3px;font-size:7px}.degree-heading small{font-size:7px}.degree-card h3{margin:5px 0;font-size:15px;line-height:1.18}.degree-card>strong{font-size:7px;line-height:1.35}.degree-card dl{gap:6px;margin-top:7px}.degree-card dl div{padding:5px 7px}.degree-card dt{font-size:6px}.degree-card dd{margin-top:2px;font-size:10px}.school-history{margin-top:8px;padding:8px 45px 0 30px}.school-logo{width:24px;height:24px;padding:2px;top:8px}.school-history small{font-size:5.5px}.school-history h4{margin-top:3px;font-size:8px}.school-program{margin-top:1px;font-size:5.5px}.school-history>p{font-size:5.5px}.school-history>p b{font-size:10px}.education-details{grid-template-columns:1fr;gap:7px}.education-details>article{padding:9px 11px}.education-card-head{margin-bottom:6px}.education-details h3{font-size:10px}.coursework-list{gap:3px}.coursework-list span{padding:3px 6px;font-size:6px}.education-skills{gap:4px 5px}.education-skills p{gap:2px;padding:4px 5px}.education-skills b{font-size:6.5px}.education-skills span{font-size:5.8px;line-height:1.25}.certificate-layout{grid-template-columns:1fr;gap:8px;margin-top:10px}.certificate-item,.certificate-item img{height:36dvh;min-height:0}.certificate-note{grid-template-columns:auto 1fr;align-items:center;gap:3px 13px;height:auto;min-height:0;padding:13px 16px;display:grid}.certificate-note strong{grid-row:1/4;font-size:36px}.certificate-note p,.certificate-note h3{margin:0}.certificate-note p{font-size:9px}.certificate-note h3{font-size:13px}.certificate-note>span{font-size:7px}.work{padding:62px 14px 18px}.portfolio-title{flex-basis:52px}.portfolio-title:before{font-size:42px}.portfolio-title h2{font-size:26px}.portfolio-grid{gap:6px;margin-top:8px}.certificate-card .project-copy{min-height:82px;padding:9px 11px}.certificate-card .project-copy h3{font-size:12px}.certificate-card .project-copy small{font-size:7px}.project-copy{border-top-width:2px;min-height:64px;padding:6px 8px}.project-copy p{margin-bottom:3px;font-size:5.5px}.project-copy h3{font-size:9px;line-height:1.15}.project-copy small{font-size:5.7px;line-height:1.2}.project-visual span{font-size:19px}.portfolio-pagination{margin-top:8px}.portfolio-pagination button{width:30px;height:30px;font-size:10px}.contact{padding:58px 16px 12px}.contact-title{flex-basis:55px}.contact-title:before{font-size:42px}.contact-title h2{font-size:27px}.contact-layout{margin-top:8px}.contact-intro h3{font-size:14px}.contact-intro>p{font-size:8px}.contact-info-list{gap:5px;margin-top:9px}.contact-info-list i svg{width:16px;height:16px}.contact-info-list span{font-size:5.5px}.contact-info-list b,.contact-info-list a{font-size:6.5px}.contact-socials{gap:7px;margin-top:9px}.contact-socials a{width:30px;height:30px}.contact-socials svg{width:14px;height:14px}.contact-form{gap:7px;margin-top:10px}.contact-form>div{gap:7px}.contact-form input{height:34px;padding:0 12px;font-size:8px}.contact-form textarea{height:68px;padding:10px 12px;font-size:8px}.contact-submit{height:38px;margin-top:2px}.contact-submit i{width:30px;height:30px}}.personal-layout{align-items:start}.personal-info{border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card) 52%);border-radius:14px;padding:30px 34px;position:relative;overflow:hidden}.personal-info:before{content:"";background:var(--accent);width:4px;position:absolute;inset:0 auto 0 0}.about-profile-heading{border-bottom:1px solid color-mix(in srgb,var(--ink) 11%,transparent);margin-bottom:22px;padding-bottom:22px}.about-profile-heading>span{color:var(--accent);letter-spacing:.13em;text-transform:uppercase;font-size:9px;font-weight:800}.personal-info .about-profile-heading h3{text-transform:uppercase;margin:9px 0 10px;font-size:clamp(22px,2vw,29px);line-height:1.2}.about-profile-heading h3 em{color:var(--accent);font-style:normal}.about-profile-heading p{max-width:560px;color:var(--muted);margin:0;font-size:11px;line-height:1.65}.info-list{gap:14px 28px}.info-list p{border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);white-space:normal;gap:3px;padding-bottom:9px;display:grid}.info-list p span{letter-spacing:.07em;text-transform:uppercase;font-size:8px}.info-list b{font-size:11px}.about-button{margin-top:22px}.about-stats{gap:16px}.about-stats article{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 6%,var(--card)),var(--card));border-radius:14px;justify-content:flex-end;min-height:0;padding:24px 27px;position:relative;overflow:hidden}.about-stats article:after{content:"";border:15px solid color-mix(in srgb,var(--accent) 10%,transparent);border-radius:50%;width:82px;height:82px;position:absolute;top:-34px;right:-34px}.about-stats .stat-label{color:var(--muted);letter-spacing:.11em;text-transform:uppercase;margin-bottom:auto;font-size:8px;font-weight:700}.about-stats strong{margin-top:14px}.about-stats p{color:var(--ink);letter-spacing:.08em;margin:7px 0 0;font-size:11px;font-weight:700}.about-stats p:before{display:none}.about-skills{border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);background:var(--card);border-radius:14px;padding:28px 30px}.about-skills-heading{border-bottom:1px solid color-mix(in srgb,var(--ink) 11%,transparent);margin-bottom:20px;padding-bottom:15px}.about-skills-heading span{color:var(--accent);letter-spacing:.13em;text-transform:uppercase;font-size:9px;font-weight:800}.about-skills-heading h3{text-transform:uppercase;margin:6px 0 0;font-size:22px}.about-skills-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;display:grid}.about-skills-grid article{border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);background:color-mix(in srgb,var(--ink) 3%,transparent);border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-width:0;min-height:76px;padding:9px 5px 7px;transition:transform .2s,border-color .2s,background .2s;display:flex}.about-skills-grid article:hover{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--card));transform:translateY(-3px)}.about-skills-grid img{object-fit:contain;width:32px;height:32px}.site:not(.light) .about-skills-grid article:nth-child(3) img,.site:not(.light) .about-skills-grid article:nth-child(14) img,.site:not(.light) .about-skills-grid article:nth-child(18) img,.site:not(.light) .about-skills-grid article:nth-child(24) img,.site:not(.light) .about-skills-grid article:nth-child(26) img{filter:invert()}.about-skills-grid article span{color:var(--ink);font-size:9px;font-weight:700}.skill-banners{gap:12px;display:grid}.skill-banner{min-width:0}.skill-banner h4{color:var(--accent);letter-spacing:.09em;text-transform:uppercase;margin:0 0 6px;font-size:9px}.skill-banner-window{border-block:1px solid color-mix(in srgb,var(--ink) 9%,transparent);padding:8px 0;overflow:hidden}.skill-banner-track{width:100%}.skill-banner-set{flex-wrap:wrap;gap:10px;display:flex}.skill-logo{flex:0 0 72px;place-items:center;gap:4px;width:72px;display:grid}.skill-logo img{object-fit:contain;width:30px;height:30px}.site:not(.light) .skill-github img,.site:not(.light) .skill-nextjs img,.site:not(.light) .skill-vercel img,.site:not(.light) .skill-express img,.site:not(.light) .skill-ultralytics img{filter:invert()}.skill-logo b{max-width:100%;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:7px;overflow:hidden}@media (max-width:900px){.personal-info{padding:22px}.about-profile-heading{margin-bottom:15px;padding-bottom:15px}.about-stats article{padding:18px}.about-skills{padding:20px}}@media (max-width:600px){.personal-info{border-radius:8px;padding:12px 13px}.personal-info:before{width:2px}.about-profile-heading{margin-bottom:7px;padding-bottom:7px}.personal-info .about-profile-heading h3{margin:4px 0;font-size:13px}.about-profile-heading p{font-size:6.5px;line-height:1.4}.info-list{gap:4px 8px}.info-list p{gap:1px;padding-bottom:3px}.info-list p span{font-size:5px}.info-list b{font-size:6px}.about-button{margin-top:7px}.about-stats{gap:7px}.about-stats article{border-radius:8px;padding:10px 12px}.about-stats .stat-label{font-size:5.5px}.about-stats strong{margin-top:4px}.about-stats p{margin-top:3px;font-size:6px}.about-skills{border-radius:8px;padding:10px}.about-skills-heading{margin-bottom:7px;padding-bottom:6px}.about-skills-heading span{font-size:5px}.about-skills-heading h3{margin-top:2px;font-size:10px}.about-skills-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}.about-skills-grid article{border-radius:5px;gap:3px;min-height:47px;padding:4px 2px}.about-skills-grid img{width:20px;height:20px}.about-skills-grid article span{font-size:5.5px}.skill-banners{gap:5px}.skill-banner h4{margin-bottom:2px;font-size:5.5px}.skill-banner-window{padding:4px 0}.skill-banner-set{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding-right:0;display:grid}.skill-logo{gap:2px;width:100%}.skill-logo img{width:19px;height:19px}.skill-logo b{font-size:4.5px}}@media (max-width:600px) and (max-height:700px){.portrait-wrap{flex-basis:32dvh;height:32dvh}.accent-shape{height:33dvh}.hero-copy{padding-top:10px}.intro{font-size:9px;line-height:1.35}.about-stats{height:145px}.certificate-item,.certificate-item img{height:30dvh}}.education-showcase{grid-template-columns:minmax(320px,.85fr) minmax(0,1.25fr);align-items:center;gap:clamp(30px,5vw,72px);width:min(1180px,100%);min-height:520px;margin:18px auto 0;display:grid}.education-portrait{isolation:isolate;border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);background:0 0;border-radius:20px;align-self:stretch;min-height:520px;position:relative;overflow:hidden}.education-accent{z-index:0;background:linear-gradient(to bottom,var(--accent) 0%,color-mix(in srgb,var(--accent) 72%,#111) 42%,color-mix(in srgb,var(--accent) 28%,#111) 72%,#111 100%);border-radius:20px;position:absolute;inset:0;overflow:hidden}.education-marquee{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.education-marquee-track{will-change:transform;flex-direction:column;animation:10s linear infinite education-marquee-vertical;display:flex}.education-marquee-group{flex-direction:column;flex:none;align-items:center;gap:34px;padding-bottom:34px;display:flex}.education-marquee span{color:#0000;-webkit-text-stroke:1px #ffffff70;letter-spacing:.04em;white-space:nowrap;font-size:clamp(64px,7vw,104px);font-weight:900;line-height:1}@keyframes education-marquee-vertical{0%{transform:translateY(0)}to{transform:translateY(-50%)}}.education-portrait img{z-index:2;object-fit:contain;object-position:center bottom;width:100%;height:100%;position:absolute;inset:0}.education-records{gap:18px;display:grid}.education-record{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-left:4px solid var(--accent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card) 50%);border-radius:8px;min-width:0;padding:26px 26px 22px 94px;position:relative}.education-record-logo{object-fit:contain;background:#fff;border-radius:50%;width:52px;height:52px;padding:5px;position:absolute;top:27px;left:24px}.education-record-main{padding-right:50px}.education-record-period{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin:0 0 3px;font-size:10px;font-weight:800}.education-record-main>span{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:9px;font-weight:600}.education-record h3{margin:12px 0 6px;font-size:clamp(18px,1.7vw,25px);line-height:1.25}.education-institution{color:var(--muted);margin:0;font-size:11px;line-height:1.5}.education-record-meta{grid-template-columns:1fr 1fr;gap:10px;margin:19px 0 0;display:grid}.education-record-meta div{border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);padding:9px 11px}.education-record-meta dt{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:8px}.education-record-meta dd{margin:4px 0 0;font-size:12px;font-weight:700}@media (max-width:900px){.education-showcase{grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);gap:14px;min-height:500px}.education-portrait{min-height:500px}.education-record{padding:20px 18px 18px 75px}.education-record-logo{width:44px;height:44px;top:21px;left:17px}}@media (max-width:600px){.education-showcase{grid-template-columns:38% minmax(0,62%);gap:7px;height:calc(100dvh - 133px);min-height:0;margin-top:8px}.education-portrait{border-radius:10px;height:100%;min-height:0}.education-accent{border-radius:10px;inset:0}.education-marquee-track{animation-duration:8s}.education-marquee-group{gap:22px;padding-bottom:22px}.education-marquee span{font-size:48px}.education-records{gap:7px}.education-record{border-left-width:2px;padding:10px 7px 8px 38px}.education-record-logo{width:25px;height:25px;padding:2px;top:10px;left:7px}.education-record-main{padding-right:20px}.education-record-period{font-size:5.5px}.education-record-main>span{font-size:5px}.education-record h3{margin:5px 0 3px;font-size:9px}.education-institution{font-size:6px;line-height:1.3}.education-record-meta{gap:3px;margin-top:7px}.education-record-meta div{padding:4px 3px}.education-record-meta dt{font-size:4.5px}.education-record-meta dd{margin-top:2px;font-size:6.5px}}.education-records{grid-template-rows:repeat(2,minmax(0,1fr));gap:0;padding-left:24px;position:relative}.education-records:before{content:"";background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 20%,transparent));width:2px;position:absolute;top:28px;bottom:28px;left:5px}.education-record{border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 13%,transparent);background:0 0;border-radius:0;flex-direction:column;min-height:0;padding:30px 52px 28px 82px;display:flex}.education-record:first-child{border-top:1px solid color-mix(in srgb,var(--ink) 13%,transparent)}.education-record:before{content:"";border:3px solid var(--bg);background:var(--accent);width:10px;height:10px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);border-radius:50%;position:absolute;top:40px;left:-26px}.education-record-logo{width:52px;height:52px;top:30px;left:12px;box-shadow:0 8px 24px #0004}.education-record h3{margin:0}.education-record-main{flex-direction:column;gap:4px;display:flex}.education-record-period,.education-record-main>span,.education-institution{align-self:start}.education-record-meta{gap:18px;margin-top:14px;display:flex}.education-record-meta div{border-top:2px solid color-mix(in srgb,var(--accent) 65%,transparent);min-width:120px;padding:8px 0 0}.education-record-meta div:last-child{flex:none;width:max-content;min-width:0}@media (max-width:900px){.education-records{padding-left:18px}.education-record{padding:22px 38px 20px 66px}.education-record:before{top:31px;left:-20px}.education-record-logo{width:43px;height:43px;top:22px;left:8px}}@media (max-width:600px){.education-records{padding-left:8px}.education-records:before{width:1px;top:12px;bottom:12px;left:1.5px}.education-record{padding:11px 6px 10px 38px}.education-record:before{width:6px;height:6px;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent);border-width:2px;top:17px;left:-11px}.education-record-logo{width:26px;height:26px;top:11px;left:5px}.education-record-main{gap:2px}.education-record-meta{gap:6px;margin-top:7px}.education-record-meta div{border-top-width:1px;flex:1;min-width:0;padding-top:4px}.education-record-meta div:last-child{flex:none;width:max-content;min-width:0}}
@media (max-width:600px){html,body,.site{width:100%;height:100dvh}.site>section{scrollbar-width:none;overflow:hidden auto}.site>section::-webkit-scrollbar{display:none}.theme-toggle,.layout-toggle,.mobile-toggle{box-shadow:0 4px 14px #0003}.hero{padding:66px 14px 22px}.portrait-wrap{flex-basis:40dvh;height:40dvh}.hero-copy{padding-top:16px}.hero-copy h1{font-size:clamp(24px,7.5vw,31px)}.hero-role{font-size:clamp(13px,3.8vw,16px)}.intro{font-size:11px;line-height:1.6}.about{justify-content:flex-start;height:100dvh;padding:60px 14px 22px}.about-title{flex:0 0 58px}.personal-layout{grid-template-columns:1fr;gap:10px;width:100%;margin-top:10px;display:grid}.personal-info{padding:15px 16px}.personal-info .about-profile-heading h3{font-size:16px}.about-profile-heading>span{font-size:6.5px}.about-profile-heading p{font-size:8px;line-height:1.5}.info-list{gap:7px 12px}.info-list p span{font-size:6px}.info-list b{font-size:8px}.about-button{height:40px;margin-top:12px;font-size:8px}.about-button i{width:32px;height:32px}.about-skills{padding:14px}.about-skills-heading{margin-bottom:10px;padding-bottom:8px}.about-skills-heading span{font-size:6px}.about-skills-heading h3{font-size:13px}.skill-banners{gap:8px}.skill-banner h4{margin-bottom:4px;font-size:7px}.skill-banner-window{padding:6px 0}.skill-logo img{width:24px;height:24px}.skill-logo b{font-size:5.5px}.education-section{justify-content:flex-start;height:100dvh;padding:60px 14px 22px}.education-showcase{grid-template-columns:1fr;gap:11px;width:100%;height:auto;min-height:0;margin-top:10px}.education-portrait{width:100%;height:34dvh;min-height:245px}.education-marquee-track{width:100%;animation:8s linear infinite education-marquee-vertical}.education-marquee-group{gap:22px;padding-bottom:22px}.education-marquee span{font-size:52px}.education-records{padding-left:11px}.education-records:before{left:2.5px}.education-record{padding:16px 10px 15px 48px}.education-record:before{width:8px;height:8px;top:23px;left:-13px}.education-record-logo{width:32px;height:32px;top:16px;left:7px}.education-record-main{gap:3px;padding-right:0}.education-record-period{font-size:7px}.education-record-main>span{font-size:6px}.education-record h3{font-size:13px;line-height:1.25}.education-institution{font-size:8px;line-height:1.4}.education-record-meta{gap:12px;margin-top:10px}.education-record-meta dt{font-size:6px}.education-record-meta dd{font-size:9px}.certificates-section{justify-content:flex-start;height:100dvh;padding:60px 14px 22px}.portfolio-grid.certificate-grid{width:100%;margin-top:12px}.certificate-card .project-copy{min-height:94px;padding:11px 13px}.certificate-card .project-copy p{font-size:7px}.certificate-card .project-copy h3{font-size:13px}.certificate-card .project-copy small{font-size:8px}.work{justify-content:flex-start;height:100dvh;padding:60px 14px 22px}.portfolio-grid{grid-template-columns:1fr;gap:10px;width:100%}.project-copy{min-height:90px;padding:10px 12px}.project-copy p{font-size:7px}.project-copy h3{font-size:13px}.project-copy small{font-size:8px;line-height:1.4}.contact{justify-content:flex-start;height:100dvh;padding:60px 14px 22px}.contact-layout{margin-top:12px}.contact-intro h3{font-size:17px}.contact-intro>p{font-size:9px;line-height:1.55}.contact-info-list span{font-size:6px}.contact-info-list b,.contact-info-list a{font-size:7.5px}.contact-form input,.contact-form textarea{font-size:10px}.project-modal-backdrop{padding:12px}.project-modal{max-height:calc(100dvh - 24px);padding:18px}.project-modal h2{font-size:24px}}