@font-face{font-family: 'Noto Sans Arabic'; src: url('../fonts/NotoSansArabic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;}
@font-face{font-family: 'Noto Sans Arabic'; src: url('../fonts/NotoSansArabic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap;}
@font-face{font-family: 'Inter Local'; src: url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;}
@font-face{font-family: 'Inter Local'; src: url('../fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap;}
@font-face{font-family: 'Noto Sans Mono Local'; src: url('../fonts/NotoSansMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap;}
:root{--bg: #03050A; --s1: #080C16; --s2: #111827; --violet: #6D4AFF; --cyan: #35D6E8; --gold: #D4AF6A; --text: #F5F7FA; --muted: #8892A6; --line: rgba(255, 255, 255, .07); --line2: rgba(255, 255, 255, .14); --display: 'Inter Local', 'Noto Sans Arabic', system-ui, sans-serif; --mono: 'Noto Sans Mono Local', 'Inter Local', monospace; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); color-scheme: dark;}
html{scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth}
*,*::before,*::after{box-sizing: border-box}
body{margin: 0; color: var(--text); font-family: 'Noto Sans Arabic', 'Inter Local', Tahoma, sans-serif; font-weight: 300; line-height: 2; overflow-x: hidden; -webkit-font-smoothing: antialiased; background: radial-gradient(ellipse 70% 55% at 22% 12%, rgba(109, 74, 255, .16), transparent 65%), radial-gradient(ellipse 50% 40% at 85% 85%, rgba(53, 214, 232, .05), transparent 70%), linear-gradient(180deg, #05070F 0%, var(--bg) 60%)}
body::before{content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 75%); opacity: .55}
#stars{position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .7}
main,header,footer{position: relative; z-index: 1}
.wrap{max-width: 1120px; margin: 0 auto; padding: 0 24px}
nav{display: flex; justify-content: space-between; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line)}
.logo{display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: .98rem}
.logo i{width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(212, 175, 106, .6)}
.logo small{font: 300 .68rem var(--display); color: var(--muted); letter-spacing: .22em; border-inline-start: 1px solid var(--line2); padding-inline-start: 12px}
nav a.link{color: var(--muted); text-decoration: none; font-size: .86rem; margin-inline-start: 30px; transition: color .3s}
nav a.link:hover{color: var(--text)}
.orbit{position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; margin-inline: auto}
.orbit svg{position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible}
section{padding: 96px 0 40px}
.head{display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 44px; flex-wrap: wrap}
h2{font-size: 1.7rem; font-weight: 400; margin: 0 0 6px; letter-spacing: -.01em}
footer{padding: 48px 0 40px; margin-top: 72px; text-align: center; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--line)}
@media(max-width:860px){.orbit{max-width: 380px; order: -1}}
@media(max-width:560px){nav a.link,.logo small{display: none}section{padding-top: 64px}}
@media(prefers-reduced-motion:reduce){*{animation: none!important; transition: none!important}html{scroll-behavior: auto}}
:root{--fa: 'Noto Sans Arabic', system-ui, sans-serif}
body{font-weight: 400; line-height: 2; text-rendering: optimizeLegibility; font-kerning: normal}
.logo{font-weight: 700; font-size: 1.05rem}
.logo small{font-weight: 500; font-size: .66rem}
nav a.link{font-size: .9rem; font-weight: 500}
h2{font-size: clamp(1.55rem, 3.4vw, 2rem); font-weight: 700; line-height: 1.5; letter-spacing: 0}
footer{font-size: .8rem; font-weight: 400}
footer a{color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line2); transition: color .3s, border-color .3s}
footer a:hover{color: var(--text); border-color: var(--cyan)}
@media print{body *{visibility: hidden!important}}
:root{--bg: #020611; --s1: #061020; --s2: #0a1730; --violet: #7657ff; --cyan: #49d9ff; --gold: #ffbd70; --text: #f2f6ff; --muted: #9eacc8; --line: rgba(116, 171, 255, .15); --line2: rgba(125, 181, 255, .32); --display: 'Inter Local', 'Noto Sans Arabic', sans-serif; --mono: 'Noto Sans Mono Local', 'Inter Local', monospace;}
html{background: #020611; scroll-padding-top: 28px}
body{font-family: 'Noto Sans Arabic', sans-serif; font-weight: 400; line-height: 1.95; background: radial-gradient(ellipse at 56% 3%, rgba(20, 91, 178, .18), transparent 34%), radial-gradient(ellipse at 85% 35%, rgba(108, 65, 255, .10), transparent 30%), radial-gradient(ellipse at 42% 90%, rgba(0, 189, 255, .06), transparent 40%), #020611}
body::before{background-image: linear-gradient(rgba(96, 150, 230, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 150, 230, .045) 1px, transparent 1px); background-size: 54px 54px; opacity: .4}
#stars{opacity: .85}
.wrap{max-width: none; width: auto; padding: 0 26px}
header.wrap{padding-left: 292px; padding-right: 24px; max-width: none}
nav{position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: 268px; padding: 25px 15px 18px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px; background: linear-gradient(180deg, rgba(3, 10, 24, .98), rgba(2, 7, 17, .98)); border-right: 1px solid rgba(87, 153, 255, .2); border-bottom: 0; box-shadow: 12px 0 45px rgba(0, 0, 0, .25); overflow-y: auto; backdrop-filter: blur(18px)}
.logo{padding: 7px 10px 24px; gap: 10px; font-weight: 700; font-size: 1.02rem; color: #eaf4ff; letter-spacing: .02em; border-bottom: 1px solid var(--line)}
.logo i{width: 12px; height: 12px; background: linear-gradient(135deg, var(--gold), #ff7a54); box-shadow: 0 0 18px rgba(255, 170, 90, .75); flex: none}
.logo small{font-size: .62rem; letter-spacing: .15em; color: #6faaff; border-inline-start: 1px solid var(--line2)}
nav>div:last-child{display: flex; flex-direction: column; gap: 5px}
nav a.link{display: flex; align-items: center; margin: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; color: #aab8d3; font-size: .86rem; transition: all .22s}
nav a.link::before{content: '✧'; display: inline-grid; place-items: center; width: 25px; height: 25px; margin-inline-end: 9px; border-radius: 8px; color: #7faaff; background: rgba(69, 127, 255, .08); font-size: 1rem}
nav a.link:hover,nav a.link:focus-visible{color: #fff; border-color: rgba(68, 159, 255, .32); background: linear-gradient(90deg, rgba(42, 103, 255, .2), rgba(40, 206, 255, .04)); outline: none; box-shadow: inset 2px 0 var(--cyan)}
.orbit{width: min(100%, 410px); min-height: 340px; margin: auto; filter: drop-shadow(0 0 35px rgba(49, 114, 255, .2))}
main.wrap{margin-left: 268px; padding: 0 24px 30px}
section{margin: 0 0 17px!important; padding: 24px!important; border: 1px solid rgba(93, 157, 255, .17)!important; border-radius: 20px!important; background: linear-gradient(135deg, rgba(7, 17, 36, .94), rgba(3, 10, 23, .92))!important; box-shadow: 0 12px 38px rgba(0, 0, 0, .14), inset 0 1px rgba(255, 255, 255, .025)}
.head{margin-bottom: 19px; gap: 18px}
h2{font-size: clamp(1.25rem, 1.8vw, 1.65rem)!important; font-weight: 700!important; letter-spacing: -.025em; color: #edf4ff!important}
button,input,select,textarea{font-family: 'Noto Sans Arabic', sans-serif}
button{transition: filter .2s, border-color .2s, transform .2s}
input,select,textarea{background-color: rgba(2, 9, 22, .86)!important; border-color: rgba(101, 163, 255, .26)!important; color: var(--text)!important; border-radius: 10px!important}
input:focus,select:focus,textarea:focus{outline: 1px solid var(--cyan)!important; box-shadow: 0 0 0 3px rgba(73, 217, 255, .09)!important}
button:not(:disabled):hover{filter: brightness(1.12)}
footer{margin-left: 268px!important; padding: 26px 24px 35px!important; color: #8397b9!important; border-top: 1px solid var(--line); text-align: center; font-size: .82rem}
footer a{color: #67d8ff!important}
::selection{background: rgba(92, 91, 255, .45); color: #fff}
@media(min-width:1500px){header.wrap,main.wrap{padding-right: 34px}main.wrap{padding-left: 34px}.orbit{transform: scale(1.08)}}
@media(max-width:1050px){nav{width: 220px; padding-inline: 10px}header.wrap{padding-left: 238px; padding-right: 16px}.orbit{transform: scale(.88)}main.wrap{margin-left: 220px; padding: 0 16px 25px}footer{margin-left: 220px!important}}
@media(max-width:720px){nav{position: relative; left: auto; top: auto; bottom: auto; width: auto; max-height: none; overflow: visible; padding: 12px 14px; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: none}.logo{padding: 4px 5px 10px; border-bottom: 1px solid var(--line); font-size: .95rem}nav>div:last-child{display: flex; flex-direction: row; overflow-x: auto; gap: 6px; padding: 2px 0 5px; scrollbar-width: thin}nav a.link{white-space: nowrap; flex: none; padding: 7px 10px; font-size: .78rem}nav a.link::before{display: none}header.wrap{padding: 0 13px}.orbit{min-height: 220px; width: 260px; max-width: 90%; transform: scale(.8); margin-top: -6px; margin-bottom: -16px}main.wrap{margin-left: 0; padding: 0 12px 22px}section{padding: 17px!important; border-radius: 16px!important; margin-bottom: 12px!important}.head{align-items: flex-start; flex-direction: column}footer{margin-left: 0!important; padding: 22px 12px!important}}
@media(max-width:420px){.orbit{transform: scale(.72); margin-top: -18px; margin-bottom: -27px}section{padding: 14px!important}.wrap{padding-inline: 12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior: auto!important; transition: none!important; animation-duration: .01ms!important; animation-iteration-count: 1!important}}
:root{--bg: #030611; --s1: #080F20; --s2: #0C1830; --violet: #8B5CF6; --cyan: #65E6FF; --gold: #E7C68A; --text: #F4F7FF; --muted: #A2B0CA; --line: rgba(153, 190, 255, .13); --line2: rgba(153, 190, 255, .24); --display: 'Inter Local', 'Noto Sans Arabic', sans-serif; --mono: 'Noto Sans Mono Local', 'Inter Local', monospace;}
html{scroll-behavior: smooth; scroll-padding-top: 24px}
body{background: #030611; color: #F4F7FF; font-family: 'Noto Sans Arabic', sans-serif; line-height: 1.9}
body::before{background-image: radial-gradient(circle at 18% 22%, rgba(64, 107, 255, .12), transparent 29%), radial-gradient(circle at 83% 42%, rgba(128, 70, 255, .10), transparent 26%), linear-gradient(rgba(118, 155, 219, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 155, 219, .045) 1px, transparent 1px); background-size: auto, auto, 84px 84px, 84px 84px; opacity: .9; mask-image: linear-gradient(to bottom, #000, transparent 82%)}
#stars{opacity: .95; filter: drop-shadow(0 0 2px rgba(120, 202, 255, .6))}
.wrap{max-width: 1240px; padding-inline: clamp(18px, 4vw, 54px)}
nav{padding: 20px 0; border-bottom: 1px solid rgba(143, 177, 239, .16); backdrop-filter: blur(14px)}
.logo{font-weight: 700; gap: 13px}
.logo i{width: 9px; height: 9px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan), 0 0 26px rgba(101, 230, 255, .7)}
.logo small{font-family: 'Inter Local', sans-serif; letter-spacing: .16em; color: #9CB3D8}
nav a.link{margin-inline-start: clamp(10px, 1.6vw, 24px); font-size: .82rem; transition: color .25s, text-shadow .25s}
nav a.link:hover{color: #fff; text-shadow: 0 0 18px rgba(101, 230, 255, .6)}
.orbit{filter: drop-shadow(0 25px 55px rgba(27, 61, 160, .25)); transform: translateZ(0)}
.orbit:before{content: ""; position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(circle at 50% 48%, rgba(49, 103, 255, .13), transparent 58%); animation: nebulaPulse 8s ease-in-out infinite; pointer-events: none}
@keyframes nebulaPulse{0%,
    100% {
        opacity: .55;
        transform: scale(.96)
    }
    50% {
        opacity: 1;
        transform: scale(1.05)
    }}
section{padding: clamp(68px, 8vw, 112px) 0 34px}
.head{margin-bottom: 34px; align-items: center}
h2{font-size: clamp(1.55rem, 2.6vw, 2.1rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.5}
input,select,textarea,button{font-family: 'Noto Sans Arabic', sans-serif}
input,select,textarea{background: rgba(4, 10, 23, .78)!important; border: 1px solid rgba(140, 177, 239, .24)!important; border-radius: 12px!important; color: #F4F7FF!important; accent-color: #75DFFF}
input:focus,select:focus,textarea:focus{outline: 2px solid rgba(101, 230, 255, .32); border-color: #65E6FF!important; box-shadow: 0 0 0 4px rgba(101, 230, 255, .07)}
button{transition: transform .2s, filter .2s, box-shadow .2s}
button:hover{filter: brightness(1.1)}
button:active{transform: scale(.985)}
::selection{background: rgba(103, 135, 255, .42); color: #fff}
:focus-visible{outline: 2px solid #65E6FF; outline-offset: 3px}
footer{border-top: 1px solid rgba(145, 180, 240, .15)}
@media(max-width:860px){.orbit{max-width: 430px; width: 100%; margin-inline: auto; order: -1}nav{gap: 16px; flex-wrap: wrap}}
@media(max-width:560px){.wrap{padding-inline: 18px}nav{padding: 16px 0}section{padding-top: 58px}.head{margin-bottom: 24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .01ms!important}}
:root{--bg: #030713; --s1: #071224; --s2: #0b1930; --violet: #8b7bff; --cyan: #70e4f4; --gold: #f4c879; --text: #f3f6ff; --muted: #a4b3cd; --line: rgba(139, 177, 255, .16); --line2: rgba(139, 177, 255, .28); --display: 'Inter Local', 'Noto Sans Arabic', system-ui, sans-serif; --mono: 'Inter Local', 'Noto Sans Arabic', sans-serif; color-scheme: dark}
html{background: #030713; scroll-behavior: smooth; scroll-padding-top: 24px}
body{font-family: 'Noto Sans Arabic', sans-serif; font-weight: 400; line-height: 1.95; letter-spacing: 0; background: radial-gradient(ellipse at 50% -15%, rgba(42, 94, 176, .23), transparent 44%), radial-gradient(ellipse at 0% 38%, rgba(81, 56, 170, .12), transparent 42%), radial-gradient(ellipse at 100% 72%, rgba(21, 126, 169, .09), transparent 38%), #030713; color: var(--text)}
body::before{background-image: radial-gradient(rgba(198, 222, 255, .5) .7px, transparent .9px), radial-gradient(rgba(103, 181, 255, .3) .8px, transparent 1px); background-size: 83px 83px, 137px 137px; background-position: 0 0, 29px 51px; opacity: .26; -webkit-mask-image: linear-gradient(#000, transparent 88%); mask-image: linear-gradient(#000, transparent 88%)}
#stars{opacity: .82}
.wrap{max-width: 1320px; padding-inline: clamp(16px, 3.2vw, 42px)}
header.wrap{padding-top: 12px}
nav{padding: 19px 0 21px; border-bottom: 1px solid rgba(126, 169, 235, .2); gap: 20px; position: relative}
nav:after{content: ""; position: absolute; bottom: -1px; right: 0; width: 23%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--violet)); opacity: .9}
.logo{font-weight: 700; letter-spacing: .02em; gap: 13px; font-size: 1.08rem; color: #f8fbff}
.logo i{box-shadow: 0 0 24px rgba(112, 228, 244, .26); border: 1px solid rgba(112, 228, 244, .6); background: radial-gradient(circle at 35% 30%, #e7fbff, #70e4f4 30%, #3d60c5 72%, #161d4a);}
.logo small{color: #91a8ca; letter-spacing: .15em; font-family: 'Inter Local', sans-serif; font-size: .62rem}
nav a.link{border-radius: 999px; padding: 8px 13px; color: #c1cde2; transition: background .22s, border-color .22s, color .22s; border: 1px solid transparent}
nav a.link:hover,nav a.link:focus-visible{background: rgba(85, 130, 220, .12); border-color: rgba(112, 228, 244, .24); color: white}
section{margin: 24px 0 30px; padding: clamp(18px, 2.5vw, 30px); border: 1px solid rgba(119, 159, 224, .17); border-radius: 24px; background: linear-gradient(145deg, rgba(10, 22, 43, .82), rgba(4, 11, 25, .88)); box-shadow: 0 16px 48px rgba(0, 0, 0, .14); position: relative; overflow: hidden}
section:before{content: ""; position: absolute; top: 0; right: 8%; width: 140px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .6; pointer-events: none}
h2{font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 750; line-height: 1.55; letter-spacing: -.025em; color: #f3f7ff; margin: 0 0 8px}
h2:after{content: ""; display: block; width: 52px; height: 2px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--violet)); opacity: .85}
input,select,textarea{background: rgba(2, 8, 20, .72)!important; border: 1px solid rgba(132, 169, 231, .27)!important; border-radius: 11px!important; color: #f2f6ff!important; accent-color: #8b7bff}
input:focus,select:focus,textarea:focus{outline: 2px solid rgba(112, 228, 244, .22); border-color: #70e4f4!important}
footer{border-top: 1px solid rgba(119, 159, 224, .18); padding-block: 28px!important; color: #8295b5; font-size: .88rem}
footer a{color: #90dff0}
::selection{background: rgba(111, 132, 255, .36); color: white}
@media(min-width:1500px){.wrap{max-width: 1420px}}
@media(max-width:860px){section{border-radius: 20px; padding: 20px}}
@media(max-width:560px){.wrap{padding-inline: 14px}nav{align-items: flex-start; flex-wrap: wrap; padding: 14px 0}nav>div:last-child{max-width: 100%; overflow-x: auto}nav a.link{white-space: nowrap; padding: 7px 10px; font-size: .82rem}section{margin: 17px 0 20px; padding: 16px; border-radius: 18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior: auto!important; transition: none!important; animation: none!important}}
:root{--bg: #030711; --s1: #07101f; --s2: #0b1729; --s3: #102039; --line: rgba(139, 176, 230, .16); --line-strong: rgba(125, 177, 255, .32); --text: #edf4ff; --muted: #a4b5ce; --cyan: #7be7ff; --blue: #75a8ff; --violet: #a995ff; --gold: #edc889; --shadow: 0 18px 55px rgba(0, 0, 0, .28);}
html{scroll-behavior: smooth; scroll-padding-top: 28px; background: var(--bg)}
body{background: radial-gradient(ellipse at 72% 4%, rgba(30, 78, 145, .18), transparent 34%), radial-gradient(ellipse at 7% 36%, rgba(71, 48, 142, .11), transparent 30%), #030711; color: var(--text); font-family: 'Noto Sans Arabic', Tahoma, sans-serif; letter-spacing: 0; line-height: 1.8}
body:before{content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .28; background-image: radial-gradient(1px 1px at 8% 17%, #dcecff 45%, transparent 70%), radial-gradient(1px 1px at 82% 24%, #9bdfff 45%, transparent 70%), radial-gradient(1.5px 1.5px at 41% 67%, #d4c9ff 45%, transparent 70%), radial-gradient(1px 1px at 91% 83%, #ffffff 45%, transparent 70%), radial-gradient(1px 1px at 26% 91%, #9bc7ff 45%, transparent 70%); background-size: 380px 340px, 510px 460px, 620px 500px, 440px 430px, 700px 580px}
::selection{background: rgba(109, 157, 255, .38); color: #fff}
.wrap{max-width: 1440px}
nav{background: linear-gradient(180deg, rgba(5, 11, 23, .92), rgba(5, 11, 23, .76)); border: 1px solid rgba(129, 168, 226, .14); border-radius: 20px; box-shadow: 0 16px 55px rgba(0, 0, 0, .22); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px)}
.logo{padding: 15px 13px 18px!important}
.logo i{box-shadow: 0 0 24px rgba(107, 174, 255, .42)}
.logo span{font-weight: 800; letter-spacing: -.04em}
.logo small{font-family: 'Inter Local', sans-serif; letter-spacing: .19em; color: #8db7ef}
nav a.link{border: 1px solid transparent; border-radius: 12px; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease}
nav a.link:hover,nav a.link:focus-visible{background: rgba(85, 139, 226, .11); border-color: rgba(117, 168, 255, .22); color: #f5f9ff; transform: translateX(-2px)}
.orbit{filter: drop-shadow(0 0 30px rgba(69, 141, 255, .15))}
section{position: relative; background: linear-gradient(150deg, rgba(9, 19, 35, .91), rgba(5, 11, 22, .92))!important; border: 1px solid rgba(135, 170, 220, .15)!important; border-radius: 23px!important; padding: clamp(19px, 2.5vw, 30px)!important; margin: 22px 0 26px!important; box-shadow: 0 22px 60px rgba(0, 0, 0, .17), inset 0 1px rgba(255, 255, 255, .025)!important; overflow: hidden}
section:before{content: ""; position: absolute; top: 0; right: 7%; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, rgba(123, 231, 255, .48), transparent)}
.head{gap: 18px; margin-bottom: 23px!important}
.head h2,section>h2{font-size: clamp(1.25rem, 2vw, 1.75rem)!important; line-height: 1.55; font-weight: 800; letter-spacing: -.025em; color: #eff5ff}
.head h2:after{content: ""; display: block; width: 42px; height: 3px; border-radius: 5px; background: linear-gradient(90deg, var(--cyan), var(--violet)); margin-top: 10px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline: 2px solid rgba(123, 231, 255, .8)!important; outline-offset: 3px}
input,select,textarea{background: rgba(3, 9, 20, .78)!important; border: 1px solid rgba(130, 172, 232, .24)!important; border-radius: 12px!important; color: #edf4ff!important; box-shadow: inset 0 1px 5px rgba(0, 0, 0, .16)}
input:focus,select:focus,textarea:focus{border-color: rgba(123, 231, 255, .7)!important; box-shadow: 0 0 0 4px rgba(123, 231, 255, .07)!important; outline: 0!important}
footer{color: #8297b7!important; border-top: 1px solid rgba(128, 168, 226, .15)!important; text-align: center; line-height: 2.2}
footer a{color: #8bdcf1!important; text-decoration: none}
footer a:hover{text-decoration: underline}
@media(min-width:1200px){section{backdrop-filter: blur(9px)}}
@media(max-width:860px){nav{border-radius: 16px}}
@media(max-width:560px){body:before{opacity: .17}section{margin: 14px 0 18px!important; padding: 16px!important; border-radius: 18px!important}.head{gap: 8px}.head h2,section>h2{font-size: 1.22rem!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior: auto!important; transition: none!important; animation: none!important}}
:root{scroll-behavior: smooth; scroll-padding-top: 90px}
body{background: radial-gradient(ellipse at 78% 8%, rgba(67, 79, 180, .20), transparent 34%), radial-gradient(ellipse at 8% 32%, rgba(19, 161, 190, .10), transparent 28%), #030611!important}
body:before{content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: radial-gradient(1px 1px at 12% 22%, #fff9 50%, transparent 100%), radial-gradient(1px 1px at 75% 36%, #bdefff99 50%, transparent 100%), radial-gradient(2px 2px at 42% 82%, #fff7 50%, transparent 100%); background-size: 190px 210px, 270px 290px, 340px 370px; animation: starDrift 90s linear infinite}
@keyframes starDrift{to {
        background-position: 190px 210px, -270px 290px, 340px -370px
    }}
.orbit{animation: orbitFloat 8s ease-in-out infinite; filter: drop-shadow(0 0 32px #6555ff33)}
@keyframes orbitFloat{0%,
    100% {
        transform: translateY(0) rotate(-1deg)
    }
    50% {
        transform: translateY(-14px) rotate(1deg)
    }}
main section{animation: sectionRise .7s both; animation-timeline: view(); animation-range: entry 0% entry 22%}
@keyframes sectionRise{from {
        opacity: .35;
        transform: translateY(28px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration: .01ms!important; animation-iteration-count: 1!important; scroll-behavior: auto!important; transition-duration: .01ms!important; animation-timeline: auto!important}}
:root{--sidebar-width: 268px; --content-gap: clamp(12px, 1.4vw, 20px);}
html{width: 100%; max-width: 100%; overflow-x: clip; scroll-padding-top: 24px;}
body{width: 100%; max-width: none; margin: 0; overflow-x: clip;}
*,*::before,*::after{box-sizing: border-box;}
img,canvas,video,svg{max-width: 100%;}
button,input,select,textarea{max-width: 100%;}
pre,code{white-space: pre-wrap; overflow-wrap: anywhere;}
@media (min-width: 721px){body>nav{position: fixed; inset: 0 0 0 auto; z-index: 1000; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 20px; width: var(--sidebar-width); height: 100vh; margin: 0; padding: 22px 14px; overflow-x: hidden; overflow-y: auto; border: 0; border-left: 1px solid rgba(87, 153, 255, .2); border-radius: 0; background: linear-gradient(180deg, rgba(3, 10, 24, .98), rgba(2, 7, 17, .98)); box-shadow: -12px 0 45px rgba(0, 0, 0, .18);}body>nav>div:last-child{display: flex; flex: 0 0 auto; flex-direction: column; gap: 5px; min-width: 0;}body>nav a.link{display: flex; align-items: center; min-width: 0; margin: 0; white-space: normal;}body>header.wrap,body>main.wrap{width: auto; max-width: none; margin: 0 var(--sidebar-width) 0 0; padding-right: clamp(16px, 2vw, 32px); padding-left: clamp(16px, 2vw, 32px);}body>header.wrap{padding-top: 12px;}body>main.wrap{padding-top: 0; padding-bottom: 30px;}body>footer{margin: 0 var(--sidebar-width) 0 0;}}
@media (min-width:721px) and (max-width:1050px){:root{--sidebar-width: 220px;}body>nav{padding: 18px 10px;}body>header.wrap,body>main.wrap{padding-right: 16px; padding-left: 16px;}}
@media (max-width:720px){:root{--sidebar-width: 0px;}body>nav{position: relative; inset: auto; display: flex; flex-direction: column; align-items: stretch; width: 100%; height: auto; max-height: none; margin: 0; padding: 12px 14px; overflow: visible; border: 0; border-bottom: 1px solid rgba(143, 177, 239, .16); border-radius: 0; box-shadow: none;}body>nav>div:last-child{display: flex; flex-direction: row; gap: 6px; max-width: 100%; overflow-x: auto; padding: 2px 0 5px; scrollbar-width: thin;}body>nav a.link{flex: 0 0 auto; white-space: nowrap;}body>header.wrap,body>main.wrap{width: 100%; max-width: none; margin: 0; padding-right: 14px; padding-left: 14px;}body>header.wrap{padding-top: 0;}body>main.wrap{padding-bottom: 22px;}body>footer{margin: 0; padding-right: 14px; padding-left: 14px;}}
@media (max-width:560px){h1{overflow-wrap: anywhere;}}
@media (min-width:1440px){body>header.wrap,body>main.wrap{padding-right: 34px; padding-left: 34px;}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important;}}
:where(section, article, aside, figure, form, fieldset, .panel, .card, .pc, .sim-info, .sim-stage){min-width: 0; max-width: 100%;}
:where(h1, h2, h3, h4, p, li, a, button, label, .meta, .description){overflow-wrap: anywhere;}
:where(table){max-width: 100%;}
:where(.table-wrap, .ol-history, .history, .data-table, pre){max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;}
:where(input, select, textarea, button){font: inherit;}
:where(input, select, textarea){min-width: 0;}
:where(button, a, input, select, textarea, [tabindex]):focus-visible{outline: 2px solid var(--cyan, #35d6e8); outline-offset: 3px;}
body>nav{scrollbar-gutter: stable;}
body>nav a.link{overflow-wrap: anywhere;}
@media (max-width: 720px){body>nav{max-width: 100%;}body>nav>div:last-child{overscroll-behavior-inline: contain;}}
@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior: auto;}}
*,*::before,*::after{box-sizing: border-box;}
html,body{max-width: 100%; overflow-x: clip;}
body{margin: 0;}
@media (min-width: 721px){:root{--sidebar-width: 268px;}body>nav{position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: var(--sidebar-width) !important; height: 100vh !important; margin: 0 !important; z-index: 1000 !important; overflow-x: hidden !important; overflow-y: auto !important;}body>header.wrap,body>main.wrap{padding-left: clamp(16px, 2vw, 34px) !important; padding-right: clamp(16px, 2vw, 34px) !important;}body>footer{display: block !important; clear: both !important; padding: 26px clamp(16px, 2vw, 34px) 35px !important; text-align: center !important; overflow-wrap: anywhere !important;}}
@media (min-width: 721px) and (max-width: 1050px){:root{--sidebar-width: 220px;}}
@media (max-width: 720px){:root{--sidebar-width: 0px;}body>nav{position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important;}body>header.wrap,body>main.wrap{padding-left: 14px !important; padding-right: 14px !important;}body>footer{padding: 22px 14px !important;}}
nav a.link[aria-current="page"]{color: #fff; border-color: rgba(68, 159, 255, .32); background: linear-gradient(90deg, rgba(42, 103, 255, .2), rgba(40, 206, 255, .04)); box-shadow: inset 2px 0 var(--cyan)}