:root{color-scheme:dark;}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;isolation:isolate;background:#101418;color:#f0f4f6;font-family:Inter,Arial,sans-serif;font-weight:400}
body:before,body:after{content:"";position:fixed;pointer-events:none;z-index:-1;inset:0}

a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #02d5e8;outline-offset:6px}
.portal{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 24px;gap:42px}
.hero{display:flex;align-items:center;justify-content:center;gap:10px;width:min(1120px,100%);filter:drop-shadow(0 8px 12px #0009)}
.mascot{width:clamp(210px,27vw,360px);height:auto;display:block;object-fit:contain}
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:min(1080px,100%)}
.project-link{min-height:102px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px 24px;border:1px solid #61818b80;border-radius:10px;background:linear-gradient(145deg,#11232af2,#07151df2);box-shadow:0 8px 28px #0005,inset 0 1px #adc1ca12;font-family:Inter,Arial,sans-serif;font-size:31px;font-weight:400;letter-spacing:.6px;transition:background .18s,border-color .18s,transform .18s}
.project-link:hover{background:#12313beb;border-color:#00d7e9;transform:translateY(-3px)}
.project-link:first-child{color:#00d7e9}.project-link:last-child{color:#edf4f7}
@media(max-width:700px){.portal{padding:28px 20px;gap:32px}.hero{flex-direction:column;gap:0}.mascot{width:min(260px,65vw)}.projects{width:min(440px,100%);grid-template-columns:1fr;gap:14px}.project-link{min-height:78px;font-size:27px}}
@media(prefers-reduced-motion:reduce){.project-link{transition:none}}