html,body,#root{margin:0;padding:0;height:100%}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:var(--color-text)}button,input,textarea,select{font:inherit}:root{--yellow: #b58900;--orange: #cb4b16;--red: #dc322f;--magenta: #d33682;--violet: #6c71c4;--blue: #268bd2;--cyan: #2aa198;--green: #859900;--color-text: #96a3a3;--color-muted: rgba(255, 255, 255, .383);--teal: #14b8a6;--teal-400: #2dd4bf;--teal-600: #073642;--teal-700: #073642;--teal-800: #002028;--teal-900: #193031;--accent-200: #e6b98a;--accent-400: #c48a4d;--accent: #ad7347;--accent-700: #875226;--accent-800: #71411a9a;--surface-0: #111111;--surface-1: #222222;--surface-2: #2a2a2a;--border: rgba(255,255,255,.12);--teal-bg-08: rgba(20, 184, 165, .312);--teal-bg-12: rgba(20,184,166,.12);--teal-br-35: rgba(20, 184, 165, .327);--shadower: rgba(7, 54, 66, .558);--content-gap: 8px;--gridline-main: rgba(93, 93, 93, .053);--gridline-main-strong: rgba(165, 165, 165, .437);--gridline-sub: rgba(0, 0, 0, .188);--grid-sub-layer-opacity: .85}.app-grid{display:flex;height:100vh;position:relative}.content{padding:0 var(--content-gap) var(--content-gap) var(--content-gap);margin:0 var(--content-gap);background:transparent;overflow:hidden;position:relative;z-index:1;display:flex;flex-direction:column;flex:0 0 60%;min-width:0;width:60%;max-width:60%}.content-frame{position:absolute;top:124px;left:var(--content-gap);right:var(--content-gap);bottom:18px;margin:0;background:var(--shadower);border:1px solid var(--border);border-radius:12px;overflow:auto;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--color-text);padding:12px}.name-banner{height:120px;background:#222222e6;border-radius:0;border:none;box-shadow:none;margin:12px 0}.canvas-wrapper{position:fixed;inset:0;width:100%;height:100%;background:var(--teal-800);z-index:0;pointer-events:none}.placeholder-box{border:2px dashed #ccc;padding:2rem;text-align:center;color:#666}.tab-list{display:flex;gap:.5rem;margin-bottom:1rem}.tab{background:#fff;border:1px solid #ddd;padding:.5rem .75rem;border-radius:6px;cursor:pointer}.tab.active{background:#222;color:#fff;border-color:#222}.research-mobile-bar{display:none}.content:before,.content:after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 70%);mask-image:linear-gradient(to right,#000 0% 10%,#0000 70%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.content:before{background-image:linear-gradient(to right,var(--gridline-main, rgba(255,255,255,.18)) 0,var(--gridline-main-strong, rgba(255,255,255,.28)) 2px,transparent 2px),linear-gradient(to bottom,var(--gridline-main, rgba(255,255,255,.18)) 0,var(--gridline-main-strong, rgba(255,255,255,.28)) 2px,transparent 2px);background-size:40px 40px,40px 40px;background-position:0 0,0 0}.content:after{background-image:linear-gradient(to right,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.1) 1px,transparent 1px);background-size:8px 8px,8px 8px;opacity:.85}.axis-connector{position:fixed;left:0;height:1px;background:#ffffff14;border-top:1px solid rgba(255,255,255,.2);pointer-events:none;z-index:2}.menu{position:relative;display:flex;flex-direction:column;gap:8px;padding:3vh 8px;background:var(--shadower);border-right:1px solid var(--color-muted);height:100vh;z-index:2;box-sizing:border-box;flex:0 0 140px;width:140px;overflow-y:auto;overflow-x:hidden}.menu-items-container{display:flex;flex-direction:column;gap:8px;min-height:min-content;padding-bottom:16px}.menu-item{display:flex;flex-direction:column;gap:4px}.submenu{display:flex;flex-direction:column;gap:4px;margin-top:4px;margin-left:8px}.submenu-mobile{position:fixed;left:0;right:0;bottom:64px;margin:0;padding:8px;background:var(--shadower);border-top:1px solid var(--border);z-index:3;display:flex;flex-direction:row;gap:6px;justify-content:space-around;align-items:stretch}.submenu-mobile .menu-button{flex:1;min-width:65px;padding:10px 8px;font-size:13px;min-height:56px;display:flex;align-items:center;justify-content:center}.submenu-mobile .menu-button .button-text{display:block;width:100%;text-align:center;line-height:1.3;white-space:normal;overflow-wrap:break-word;word-break:break-word}.submenu .menu-button{min-height:30px;height:auto;padding:8px;font-size:.9em;white-space:normal;line-height:1.2;border-color:var(--accent-800)}.submenu .menu-button:hover{border-color:var(--accent-400)}.submenu .menu-button.active{border-color:var(--accent)}.menu-logo{display:flex;justify-content:center;align-items:center;height:75px;margin-bottom:16px}.menu-logo .icon{width:62px;height:62px;color:var(--accent);transition:opacity .3s ease}.menu-logo .icon.changing{opacity:0}@media (max-width: 770px){.menu-logo{display:none}}.fade-panel{opacity:0;transform:translateY(6px);transition:opacity .23s ease,transform .19s ease;pointer-events:none;will-change:opacity,transform}.fade-panel.visible{opacity:1;transform:translateY(0);pointer-events:auto}.menu>.menu-button:first-child{margin-top:18px}.section-heading{color:var(--teal);margin:24px 0 12px;font-size:1.2em}.content-section .section-heading:first-child{margin-top:18}.tab-panels{display:flex;flex-direction:column;justify-content:center;align-items:center}.card-list{list-style:none;padding:0;margin:0}.card{margin-bottom:16px;padding:12px;background:var(--surface-1);border:1px solid var(--border);border-radius:6px}.card strong{display:block;color:var(--teal-400);margin-bottom:8px}.meta{font-size:.9em;color:var(--color-muted);margin-top:8px}.menu-button{background:var(--shadower);color:var(--color-text);border:1px solid var(--teal-br-35);border-radius:6px;padding:10px 6px;cursor:pointer;width:100%;text-align:center;transition:background-color .16s ease,border-color .16s ease,color .16s ease}.menu-button:hover{background:var(--teal-bg-12);border-color:var(--teal-br-35)}.menu-button:focus-visible{outline:2px solid var(--teal-700);outline-offset:2px}.menu-button.active{background:var(--teal-800);color:var(--color-text);border-color:var(--teal-600)}.text-teal{color:var(--teal)}.text-teal-400{color:var(--teal-400)}.text-accent{color:var(--accent)}.text-accent-200{color:var(--accent-200)}.text-accent-400{color:var(--accent-400)}.text-muted{color:var(--color-muted)}.text-yellow{color:var(--yellow)}.text-orange{color:var(--orange)}.text-red{color:var(--red)}.text-magenta{color:var(--magenta)}.text-violet{color:var(--violet)}.text-blue{color:var(--blue)}.text-cyan{color:var(--cyan)}.text-green{color:var(--green)}.submenu{position:relative;z-index:2}.submenu.accent .menu-button{color:var(--accent-400)}.submenu.accent .menu-button.active{color:var(--accent-200)}@media (max-width: 770px){.submenu{position:fixed;left:0;right:0;bottom:64px;margin:0;display:flex!important;flex-direction:row!important;gap:4px;padding:8px;justify-content:space-around;align-items:center;background:var(--shadower);border-top:1px solid var(--border);z-index:3}.submenu .menu-button{flex:1;min-width:65px;padding:11px 0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.submenu-mobile .menu-button{font-size:13px}.submenu-mobile.accent .menu-button{color:var(--accent-400)}.submenu-mobile.accent .menu-button.active{color:var(--accent)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--border);border-radius:999px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--teal);border:1px solid var(--teal-700);margin-top:-6px}input[type=range]:hover::-webkit-slider-thumb{background:var(--teal-400)}input[type=range]:active::-webkit-slider-thumb{background:var(--teal-600)}input[type=range]::-moz-range-track{height:2px;background:var(--border);border-radius:999px}input[type=range]::-moz-range-progress{height:2px;background:var(--teal-bg-12);border-radius:999px}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--teal);border:1px solid var(--teal-700)}input[type=range]::-ms-track{height:2px;background:transparent;color:transparent;border:none}input[type=range]::-ms-fill-lower{background:var(--teal-bg-12)}input[type=range]::-ms-fill-upper{background:var(--border)}input[type=range]::-ms-thumb{width:14px;height:14px;border-radius:50%;background:var(--teal);border:1px solid var(--teal-700)}input[type=range]:disabled{opacity:.5}@media (max-width: 1040px){.content{flex:1 1 auto;width:100%;max-width:100%}}@media (max-width: 770px){.menu{position:fixed;bottom:0;left:0;right:0;height:64px;width:100%;flex-direction:row;justify-content:space-around;align-items:center;gap:4px;padding:8px;background:var(--shadower);border:none;border-top:1px solid var(--border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.other-section,.projects-section{margin-top:2rem;margin-bottom:2rem}.menu-items-container{flex-direction:row;justify-content:space-around;width:100%;padding:0}.menu-item{flex:1}.menu>.menu-button:first-child{margin-top:0}.menu>.menu-button{flex:1;min-width:65px;padding:11px 0;font-size:13px}.menu .research-submenu,.menu .auto-spin-toggle{display:none!important}.menu .auto-spin-toggle{margin-top:auto}.content{padding:0 .5rem;width:100%;max-width:100%;flex:1;margin:0}.content-frame{left:4px;right:4px;bottom:76px;padding:3px}}@media (max-width: 770px){.research-mobile-bar{position:fixed;left:0;right:0;bottom:60px;display:flex;gap:4px;padding:4px 8px;justify-content:center;align-items:center;background:var(--shadower);border-top:1px solid var(--border);border-bottom:1px solid var(--border);z-index:3}.research-mobile-bar .menu-button{font-size:13px}}.home-content{display:flex}.home-section{display:flex;flex-direction:column;justify-content:center;align-items:center;justify-content:space-between;gap:2vh;margin-top:1vh}.home-content h2{margin:0 0 8px}.home-content h3{margin:14px 0 8px;color:var(--accent-400)}.home-content h2{margin:6px 0 0;color:var(--accent-400)}.home-content ul{margin:0;padding-left:18px}.home-content li{margin:4px 0}.home-content .bio{flex:0 0 60%;max-width:60%;background-color:var(--shadower);padding:1rem;border-radius:30px}.home-content .bio.info{flex:0 1 auto;max-width:770px;width:100%}.home-content .pic{flex:1 1 40%;display:flex;justify-content:center;align-items:center}.home-content .bio p{text-align:justify}.home-content .avatar{width:auto;height:196px;border-radius:30%;object-fit:cover;border:2px solid var(--border)}@media (max-width: 875px){.home-content{flex-direction:column}.home-content .bio,.home-content .pic{flex:1 1 auto;max-width:100%}.home-section{gap:.3rem;margin-top:.1rem}.home-content .pic{margin-top:-.8rem}}@media (max-width: 600px){.home-content .bio.info{display:none}}.contact-section{margin-top:16px}.contact-button{width:45vw;max-width:100%;display:inline-flex;justify-content:center;align-items:center;align-self:flex-start;height:56px;padding:0 12px}section[role=tabpanel]{width:100%;display:flex;flex-direction:column}.teaching-section{display:block;width:100%;margin:0;flex:1}.teaching-section h3{color:var(--accent-400);margin:16px 0 8px}.teaching-section ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.teaching-section li{padding:12px;background:var(--shadower);border:1px solid var(--border);border-radius:6px;width:100%;box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.teaching-section li .course-content{flex:1}.teaching-section li strong{display:block;color:var(--color-text);margin-bottom:2px}.teaching-section .course-details{font-size:.9em;color:var(--color-muted);white-space:nowrap}@media (max-width: 770px){.teaching-section li{flex-direction:column;gap:8px}.teaching-section .course-details{margin-top:4px}}@media (max-width: 770px){.teaching-section ul{grid-template-columns:1fr}}.bio-card{display:grid;grid-template-columns:32px 1fr;align-items:start;gap:10px;padding:12px;background:var(--shadower);border:1px solid var(--border);border-radius:6px;width:100%;box-sizing:border-box}.bio-card .icon{width:28px;height:28px;color:var(--accent-400)}.bio-card .icon path{fill:currentColor}.bio-section{display:flex;flex-direction:column;gap:12px}.bio-section h2{margin:0 0 8px}.bio-card img{width:20px;height:20px;margin-top:2px}.bio-card p{margin:0}