body{margin:0;background:#0A0D13}
a{color:#8FB7E8}a:hover{color:#F5B841}
.btn-p,.btn-s,.nav-a,.logo-a img,.card,.card img,.row,.row svg,.x-btn,.x-btn svg{transition:transform .18s cubic-bezier(.2,.8,.3,1),background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,filter .18s ease}
.btn-p:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-p:active,.btn-s:active{transform:translateY(0) scale(.97);transition-duration:.06s}
.btn-s:hover{transform:translateY(-2px);background-color:rgba(74,128,196,.18)!important;border-color:#8FB7E8!important}
.nav-a{background:linear-gradient(#F5B841,#F5B841) no-repeat 12px calc(100% - 4px)/0 2px;transition:background-size .2s ease,color .18s ease}
.nav-a:hover{background-size:calc(100% - 24px) 2px;color:#F5B841}
.logo-a:hover img{transform:rotate(45deg)}
.card:hover{transform:translateY(-4px);border-color:#4A80C4!important;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.card{overflow:hidden}.card:hover img{transform:scale(1.04)}
.row:hover{background-color:#16203A}.row:hover svg{transform:translateX(4px)}
.x-btn:hover{border-color:#8FB7E8!important;background-color:rgba(74,128,196,.18)!important}.x-btn:hover svg{transform:rotate(90deg)}
.btn-p:focus-visible,.btn-s:focus-visible,.nav-a:focus-visible,.row:focus-visible,.x-btn:focus-visible,.logo-a:focus-visible{outline:2px solid #F5B841;outline-offset:3px}
canvas:focus-visible{box-shadow:inset 0 0 0 2px #F5B841}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

[data-show]{display:contents}[data-show][hidden],dialog:not([open]){display:none}html{scroll-behavior:smooth;scroll-padding-top:72px}
/* Layout safety and native dialog behavior. */
*{box-sizing:border-box}
body{color:#E9EEF5;font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.6}
main,section,nav,main div{min-width:0}
img{max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid #F5B841;outline-offset:3px}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;background:#F5B841;color:#0A0D13;padding:12px}
.project-dialog{padding:0;border:1px solid #4A80C4;width:calc(100% - 32px);max-width:920px;max-height:calc(100dvh - 48px);color:inherit;background:#0F1522;overscroll-behavior:contain}
.project-dialog::backdrop{background:rgba(5,7,11,.86)}
.project-dialog .mbox{border:0!important}
body:has(dialog[open]){overflow:hidden}
.project-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.project-details section{padding:18px;border:1px dashed #33435E}
.project-details h4{margin:0 0 8px;color:#8FB7E8;font-family:'Silkscreen',monospace;font-size:12px;font-weight:400}
.project-details p{margin:0;color:#B4C0D2;white-space:pre-line}
.project-links{display:flex;flex-wrap:wrap;gap:12px}
.project-links a{padding:12px 18px;border:1px solid #4A80C4;font-family:'Silkscreen',monospace;text-decoration:none}
@media(max-width:600px){html{scroll-padding-top:172px}nav{justify-content:flex-start!important;flex-basis:100%!important}#game{height:340px!important}h1{overflow-wrap:anywhere}a[href^="mailto:"]{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}