:root{--paper:#f3f7fb;--ink:#122033;--muted:#5c6d80;--line:#1220331f;--lacquer:#0b7c98;--lacquer-deep:#085f75;--moss:#0c3358;--card:#fff;--nav:#f3f7fbe6;--shadow:0 16px 40px #12203314;--copy:#243446;--serif:"IBM Plex Serif", "Noto Sans Myanmar", "Myanmar Text", "Times New Roman", serif;--sans:"IBM Plex Sans", "Noto Sans Myanmar", "Myanmar Text", "Segoe UI", sans-serif;--gutter:clamp(20px, 5vw, 40px)}html[data-theme=dark] body{background:radial-gradient(1200px 500px at 90% -10%, #3fd0ef1f, transparent 55%), var(--paper)}html:not([data-theme=dark]) .grain{opacity:.04}html[data-theme=dark]{--paper:#07182c;--ink:#f4f8fc;--muted:#b7c9da;--line:#a6ceec2e;--lacquer:#3fd0ef;--lacquer-deep:#9aefff;--moss:#0c3358;--card:#0c2a48eb;--nav:#07182cdb;--shadow:0 16px 40px #00000047;--copy:#d5e4f2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:radial-gradient(900px 420px at 100% -10%, color-mix(in srgb, var(--lacquer) 16%, transparent), transparent 60%), radial-gradient(720px 380px at -10% 18%, color-mix(in srgb, var(--moss) 18%, transparent), transparent 55%), var(--paper);font-family:var(--sans);text-rendering:optimizelegibility;margin:0;font-weight:400;line-height:1.6;overflow-x:clip}:focus-visible{outline:2px solid var(--lacquer);outline-offset:3px}button,a{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0}address{font-style:normal}.grain{pointer-events:none;opacity:.08;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");position:fixed;inset:0}#root{z-index:1;position:relative}.nav{z-index:5;background:var(--nav);-webkit-backdrop-filter:blur(18px)saturate(1.3);backdrop-filter:blur(18px)saturate(1.3);border:1px solid var(--line);border-radius:999px;justify-content:space-between;align-items:center;width:min(1080px,100% - 24px);margin:12px auto 0;padding:8px 8px 8px 18px;animation:.7s both fade-in;display:flex;position:sticky;top:12px}.mark{letter-spacing:.18em;font-size:.92rem;font-weight:600;text-decoration:none;transition:letter-spacing .35s,color .35s}.mark:hover{letter-spacing:.28em;color:var(--lacquer)}.nav nav{align-items:center;gap:8px;display:flex}.nav nav button{color:var(--muted);padding:8px 12px;transition:color .25s}.nav nav button:not(.lang){position:relative}.nav nav button:not(.lang):after{content:"";background:var(--lacquer);transform-origin:0;height:1px;transition:transform .3s;position:absolute;bottom:6px;left:12px;right:12px;transform:scaleX(0)}.nav nav button:hover{color:var(--ink)}.nav nav button:not(.lang):hover:after{transform:scaleX(1)}.lang{border-radius:999px;border:1px solid var(--line)!important;color:var(--ink)!important;padding:7px 14px!important}.menu-btn{width:42px;height:42px;display:none;position:relative}.menu-btn span{background:var(--ink);height:1.5px;transition:transform .28s,top .28s;position:absolute;left:10px;right:10px}.menu-btn span:first-child{top:16px}.menu-btn span:last-child{top:24px}.menu-btn.open span:first-child{top:20px;transform:rotate(40deg)}.menu-btn.open span:last-child{top:20px;transform:rotate(-40deg)}main{width:min(1080px,100% - 24px);margin:0 auto;padding:0 8px 72px}.depth{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.depth span{background:radial-gradient(circle, color-mix(in srgb, var(--lacquer) 55%, transparent), transparent 68%);filter:blur(2px);border-radius:50%;animation:10s ease-in-out infinite float-3d;position:absolute}.depth span:first-child{width:280px;height:280px;top:12%;left:-40px}.depth span:nth-child(2){width:180px;height:180px;animation-delay:-3s;top:48%;right:6%}.depth span:nth-child(3){width:220px;height:220px;animation-delay:-6s;bottom:8%;left:30%}.stage{perspective:1400px;margin-top:22px;padding:18px 4px 36px}.banner{color:#e7f2fb;min-height:360px;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));background:radial-gradient(520px 240px at 78% 40%,#206eb061,#0000 68%),linear-gradient(100deg,#0a2744 0%,#0c3158 55%,#08243f 100%);border-radius:18px;grid-template-columns:minmax(180px,230px) minmax(0,1.15fr) minmax(260px,.95fr);grid-template-areas:"photo copy map";transition:transform .18s ease-out;display:grid;box-shadow:0 30px 50px #04102047,0 70px 90px #0410202e}.banner-photo{object-fit:cover;object-position:center 30%;grid-area:photo;width:100%;min-width:0;height:100%;min-height:360px;animation:1.05s cubic-bezier(.22,1,.36,1) both portrait-in;transform:translateZ(46px)scale(1.02);box-shadow:18px 24px 40px #00000059}.banner-copy{flex-direction:column;grid-area:copy;justify-content:center;min-width:0;padding:28px 18px 22px 26px;display:flex;transform:translateZ(24px)}.banner h1{color:#fff;font-family:var(--sans);letter-spacing:-.03em;margin:0;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:600;line-height:1.05}.banner-role{color:#3fd0ef;margin:8px 0 0;font-size:1.15rem;font-weight:600}.banner-line{color:#d7e7f5;max-width:36rem;margin:14px 0 0;font-size:.98rem;line-height:1.45}.banner-skills{color:#d5e6f4;overflow-wrap:anywhere;gap:4px;margin:14px 0 0;padding:0;font-size:.92rem;line-height:1.45;list-style:none;display:grid}.banner-rule{background:linear-gradient(90deg,#3fd0ef,#1a6fdb);border-radius:999px;width:min(100%,420px);height:3px;margin:16px 0 12px}.banner-note{color:#9eb4c8;margin:0;font-size:.88rem}.banner-note span{color:#3fd0ef;margin-right:6px}.banner-cv{color:#07182c;background:#3fd0ef;border-radius:999px;align-items:center;width:fit-content;margin-top:16px;padding:10px 18px;font-size:.92rem;font-weight:600;text-decoration:none;transition:transform .2s,background .2s;display:inline-flex}.banner-cv:hover{background:#8ef0ff;transform:translateY(-2px)}.banner-map{grid-area:map;align-items:center;min-width:0;padding:8px 6px 8px 0;display:grid;transform:translateZ(36px)}.banner-map svg{width:100%;height:auto;display:block}.banner-map path{fill:none;stroke:#8ec4ea;stroke-width:1.4px;stroke-linecap:round}.banner-map .wire{stroke-dasharray:240;stroke-dashoffset:240px;animation:.8s forwards draw-line}.banner-map .wire:first-child{animation-delay:.35s}.banner-map .wire:nth-child(2){animation-delay:.5s}.banner-map .wire:nth-child(3){animation-delay:.95s}.banner-map .wire:nth-child(4){animation-delay:1.3s}.banner-map .node,.banner-map .orb,.banner-map .badge{opacity:0;transform-box:fill-box;transform-origin:50%;animation:.55s cubic-bezier(.22,1,.36,1) forwards pop-node}.banner-map .n1{animation-delay:50ms}.banner-map .n2{animation-delay:.18s}.banner-map .n3{animation-delay:.72s}.banner-map .n4{animation-delay:1.12s}.banner-map .n5{animation-delay:1.42s}.banner-map .o1{animation-delay:.28s}.banner-map .o2{animation-delay:.42s}.banner-map .o3{animation-delay:.56s}.banner-map .b1{animation-delay:.34s}.banner-map .b2{animation-delay:.62s}.banner-map .b3{animation-delay:.9s}.banner-map .badge .shape{fill:#3fd0ef24;stroke:#7ec8f0;stroke-width:1.4px}.banner-map .badge .icon,.banner-map .badge circle{fill:none;stroke:#f4f8fc;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.banner-map .badge .mark{fill:#f4f8fc;stroke:none}.banner-map .orb circle{transform-box:fill-box;transform-origin:50%;animation:2.8s ease-in-out 1.7s infinite orb-pulse}.banner-map rect{fill:#10375c;stroke:#5aa3d6;stroke-width:1.2px}.banner-map circle{fill:#1a6fdb}.banner-map .orb rect{fill:#1a6fdb;stroke:none}.banner-map text{fill:#f4f8fc;font-family:var(--sans);text-anchor:middle;dominant-baseline:middle;font-size:12px;font-weight:500}.kicker,.label{letter-spacing:.14em;text-transform:uppercase;color:var(--lacquer);margin:0 0 18px;font-size:.74rem;font-weight:500}.kicker{align-items:center;gap:10px;display:flex}.kicker:before{content:"";background:var(--lacquer);width:8px;height:8px;box-shadow:0 0 0 0 color-mix(in srgb, var(--lacquer) 45%, transparent);border-radius:50%;flex:none;animation:2.4s ease-out infinite pulse}.hero h1{font-family:var(--serif);letter-spacing:-.03em;text-wrap:balance;margin:0;font-size:clamp(3.4rem,7vw,6.4rem);font-weight:500;line-height:.98}.headline{letter-spacing:-.02em;max-width:34rem;margin:22px 0 0;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:500;line-height:1.35}.lede{max-width:46rem;color:var(--muted);font-size:1.08rem}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:8px;display:flex}.btn{border-radius:999px;padding:12px 20px;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn.solid{background:var(--ink);color:var(--paper)}.btn.ghost{border:1px solid var(--line);background:color-mix(in srgb, var(--card) 70%, transparent)}.facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:520px;margin:40px 0 0;display:grid}.facts div{border-top:1px solid var(--line);padding:14px 16px 0 0}.facts dt{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}.facts dd{margin:4px 0 0;font-weight:500}.about,.work,.skills,.education,.contact{padding:92px 0 10px;scroll-margin-top:88px}.about h2,.section-head h2,.education h2,.contact h2{font-family:var(--serif);letter-spacing:-.025em;text-wrap:balance;max-width:18ch;margin:0;font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:500;line-height:1.05}.about{grid-template-columns:.9fr 1.1fr;gap:40px 64px;display:grid}.about-copy p{color:var(--copy);margin-top:0;font-size:1.05rem}.principles{grid-column:1/-1;grid-template-columns:repeat(3,1fr);gap:18px;margin:10px 0 0;padding:0;list-style:none;display:grid}.principles li,.skill-grid article,.thesis,.extras{background:var(--card);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px}.principles,.skill-grid,.projects{perspective:1100px}.principles li,.skill-grid article,.project,.thesis,.extras,.role,.contact{transition:translate .35s,rotate .35s,box-shadow .35s,border-color .3s,background .3s}.principles li:hover,.skill-grid article:hover,.thesis:hover,.extras:hover,.role:hover{translate:0 -12px 16px;rotate:x 7deg;box-shadow:0 24px 40px #04102038}.project:hover{translate:8px -6px 10px;rotate:y -8deg}.principles li:hover,.skill-grid article:hover{border-color:color-mix(in srgb, var(--lacquer) 40%, var(--line));background:color-mix(in srgb, var(--card) 82%, var(--lacquer))}.principles li{padding:22px}.principles span{color:var(--lacquer);font-family:var(--serif);letter-spacing:-.04em;font-size:1.8rem;line-height:1}.principles h3,.project h3,.skill-grid h3,.thesis h3{font-family:var(--serif);letter-spacing:-.02em;margin:12px 0 8px;font-size:1.45rem;font-weight:500}.principles p,.project p,.thesis p,.role-note{color:var(--muted);margin:0}.section-head{margin-bottom:28px}.role{background:var(--moss);color:#f6f1e8;border:0;border-radius:22px;grid-template-columns:1.2fr auto;gap:8px 24px;margin-top:8px;padding:28px;display:grid}.role-title{letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin:0;font-size:.75rem}.company{font-family:var(--serif);margin:4px 0 0;font-size:2rem}.period{align-self:start;margin:0}.role-note{color:#f6f1e8c7;grid-column:1/-1}.projects{border-top:1px solid var(--line);flex-direction:column;margin-top:22px;display:flex}.project{border:0;border-bottom:1px solid var(--line);background:0 0;border-radius:16px;grid-template-columns:52px minmax(0,1fr);gap:8px 22px;min-height:0;padding:26px 8px;transition:background .3s;display:grid}.project:hover{background:color-mix(in srgb, var(--lacquer) 7%, transparent)}.project .index{letter-spacing:.14em;color:var(--lacquer);grid-row:1/span 3;padding-top:8px;font-size:.78rem}.project h3{margin:0;transition:color .25s}.project:hover h3{color:var(--lacquer-deep)}.project h3:after{content:"→";font-family:var(--sans);opacity:0;margin-left:8px;font-size:.9em;transition:opacity .25s,transform .25s;display:inline-block;transform:translate(-6px)}.project:hover h3:after{opacity:1;transform:none}.project p{max-width:62rem}.project ul,.extras ul,.skill-grid ul{flex-wrap:wrap;gap:8px;margin:0;padding:16px 0 0;list-style:none;display:flex}.project li,.skill-grid li{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.82rem;transition:background .25s,color .25s,border-color .25s}.project:hover li{border-color:color-mix(in srgb, var(--lacquer) 45%, var(--line));color:var(--ink)}.more-work{margin-top:64px}.extras,.thesis{margin-top:18px;padding:26px 28px}.extras ul{gap:10px;padding-top:8px;display:grid}.extras li{color:var(--copy);padding-left:16px;position:relative}.extras li:before{content:"";background:var(--lacquer);border-radius:50%;width:6px;height:6px;position:absolute;top:.55em;left:0}.skill-grid{grid-template-columns:1.4fr 1fr 1fr;gap:14px;display:grid}.skill-grid article:first-child{grid-column:1/-1}.skill-grid article{padding:22px 24px}.skill-grid ul{flex-direction:column;align-items:flex-start}.skill-grid li{border-radius:10px}.education{border-top:1px solid var(--line);grid-template-columns:.6fr 1.4fr;gap:24px;display:grid}.school{flex-wrap:wrap;gap:16px;font-weight:500;display:flex}.school span{color:var(--muted);font-weight:400}.contact{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:28px;grid-template-columns:1.15fr .85fr;gap:32px;margin:28px 0 0;padding:64px 48px;display:grid}.contact .label{color:var(--lacquer)}.contact .lede,.contact address{color:var(--muted)}.contact h2{max-width:14ch;color:var(--ink)}.contact address{align-content:end;gap:10px;font-size:1.15rem;display:grid}.contact a:not(.btn){border-bottom:1px solid var(--line);overflow-wrap:anywhere;width:fit-content;max-width:100%;text-decoration:none}.contact .btn{color:#fff;background:var(--lacquer);border-color:#0000;width:fit-content;margin-top:8px}html[data-theme=dark] .contact{background:#0a2744;border-color:#3fd0ef47}html[data-theme=dark] .contact .btn{color:#07182c}footer{width:min(1080px,100% - 24px);color:var(--muted);justify-content:space-between;margin:0 auto;padding:8px 8px 28px;font-size:.9rem;display:flex}.banner-copy>*{animation:.8s cubic-bezier(.22,1,.36,1) both rise}.banner-copy>h1{animation-delay:80ms}.banner-copy>.banner-role{animation-delay:.16s}.banner-copy>.banner-line{animation-delay:.24s}.banner-copy>.banner-skills{animation-delay:.32s}.banner-copy>.banner-rule{animation-delay:.4s}.banner-copy>.banner-note{animation-delay:.48s}.reveal{opacity:0;transform:translateY(28px)}.reveal.in{animation:.9s cubic-bezier(.22,1,.36,1) forwards rise;animation-delay:var(--d,0s)}.skill-grid article li{opacity:0}.skill-grid article.in li{animation:.5s cubic-bezier(.22,1,.36,1) both chip}.skill-grid article.in li:first-child{animation-delay:.12s}.skill-grid article.in li:nth-child(2){animation-delay:.18s}.skill-grid article.in li:nth-child(3){animation-delay:.24s}.skill-grid article.in li:nth-child(4){animation-delay:.3s}.skill-grid article.in li:nth-child(5){animation-delay:.36s}.skill-grid article.in li:nth-child(6){animation-delay:.42s}.skill-grid article.in li:nth-child(7){animation-delay:.48s}footer{animation:1s .2s both fade-in}@keyframes rise{0%{opacity:0;filter:blur(4px);transform:translateY(28px)}to{opacity:1;filter:none;transform:none}}@keyframes portrait-in{0%{opacity:0;transform:translate3d(0,28px,46px)scale(.96)}to{opacity:1;transform:translateZ(46px)scale(1.02)}}@keyframes chip{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pulse{70%{box-shadow:0 0 0 8px #0000}to{box-shadow:0 0 #0000}}@keyframes draw-line{to{stroke-dashoffset:0}}@keyframes pop-node{0%{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}@keyframes orb-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes float-3d{0%,to{transform:translate(0,0)scale(1)}50%{transform:translate3d(18px,-24px,40px)scale(1.08)}}@media (width<=1100px){.banner{grid-template-columns:190px minmax(0,1fr);grid-template-areas:"photo copy""map map"}.banner-photo{height:100%;min-height:100%}.banner-map{padding:0 16px 18px}.banner-map svg{max-width:560px;margin:0 auto}}@media (width<=900px){.menu-btn{z-index:6;display:block}.nav nav{background:var(--paper);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;border-radius:0 0 24px 24px;flex-direction:column;align-items:flex-start;padding:84px 22px 24px;transition:opacity .28s,transform .28s,visibility .28s;display:flex;position:fixed;inset:0 0 auto;transform:translateY(-10px)}.nav nav.open{opacity:1;visibility:visible;transform:none}.about,.skill-grid,.education,.contact,.facts,.role{grid-template-columns:1fr}.skill-grid article:first-child{grid-column:auto}.principles{grid-template-columns:1fr}.banner{grid-template-columns:1fr;grid-template-areas:"photo""copy""map";min-height:0;transform:none}.banner-photo,.banner-copy,.banner-map{transform:none}.banner-photo{object-position:center 22%;width:100%;height:520px;min-height:0;box-shadow:none;animation:none;transform:none}.banner-copy{padding:22px 16px 8px}.banner h1{font-size:1.75rem}.banner-skills{font-size:.86rem}.banner-map{padding:4px 8px 16px}.banner-map svg{max-width:none}.nav{width:calc(100% - 16px);padding-left:14px}.contact{border-radius:24px;padding:36px 18px}.project{grid-template-columns:36px minmax(0,1fr);padding-inline:0}}@media (prefers-reduced-motion:reduce){.reveal,.reveal.in,.banner-copy>*,.depth span,.banner,.banner-photo,.banner-copy,.banner-map,.banner-map .wire,.banner-map .node,.banner-map .badge,.banner-map .orb,.banner-map .orb circle,.nav,footer,.skill-grid article li,.skill-grid article.in li,.kicker:before{opacity:1;filter:none;stroke-dashoffset:0;animation:none;transform:none}html{scroll-behavior:auto}}