a:focus-visible{outline: 2px solid var(--cyan); outline-offset: 3px}
.sub{color: var(--muted); margin: 0}
.meta{font: 300 .66rem var(--display); letter-spacing: .24em; color: var(--muted); direction: ltr}
.fa{font-family: var(--fa); font-weight: 500; font-size: 1.2em; line-height: 1; letter-spacing: 0}
.fa>span{font-family: var(--display); font-weight: 400; font-size: .84em}
.sub{font-size: .95rem; font-weight: 400; line-height: 2}
.meta{font-size: .7rem; font-weight: 500}
.exo-grid{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px}
.exo-card{border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(255, 255, 255, .018)}
.exo-card .exo-orb{width: 42px; height: 42px; border-radius: 50%; margin-bottom: 12px; background: radial-gradient(circle at 30% 25%, #c9d8ff, #5367a8 48%, #151b35 80%); box-shadow: 0 0 25px rgba(109, 74, 255, .22)}
.exo-card h3{font-size: .95rem; margin: 0}
.exo-card .exo-name{font: .68rem var(--mono); color: var(--cyan); direction: ltr; text-align: right}
.exo-card p{font-size: .8rem; color: var(--muted); line-height: 1.9}
.exo-card button{font: inherit; font-size: .78rem; color: var(--cyan); background: transparent; border: 0; padding: 0; cursor: pointer}
.exo-detail{border: 1px solid var(--line2); border-radius: 10px; padding: 14px; margin-top: 12px; color: #c4ccdc; font-size: .88rem}
@media(max-width:860px){.exo-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}}
@media(max-width:480px){.exo-grid{grid-template-columns: 1fr 1fr}}
.sub{color: #95a9cb!important; font-size: .9rem}
.meta{color: #62d8ff!important; letter-spacing: .08em}
@media(max-width:720px){.head .meta{align-self: flex-start}}
.sub{color: #A2B0CA; max-width: 680px}
.meta{color: #7F9BC7; letter-spacing: .12em}
[class*="card"]{border-color: rgba(145, 180, 240, .16); box-shadow: 0 16px 44px rgba(0, 0, 0, .16); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease}
p,.sub{color: #aebbd1}
.exo-card{border: 1px solid rgba(125, 166, 235, .2); border-radius: 18px; background: linear-gradient(145deg, rgba(13, 29, 54, .92), rgba(5, 13, 29, .96)); box-shadow: 0 12px 30px rgba(0, 0, 0, .17); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease}
.exo-card{overflow: hidden}
.exo-card:hover{transform: translateY(-3px); border-color: rgba(112, 228, 244, .46); box-shadow: 0 18px 38px rgba(0, 0, 0, .24), 0 0 28px rgba(69, 128, 232, .07)}
.exo-card h3{font-weight: 700; color: #edf5ff; line-height: 1.55}
button,.button,input,select,textarea{font-family: 'Noto Sans Arabic', sans-serif; font-size: inherit}
button,.button{border-radius: 12px; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s}
button:not(:disabled):hover,.button:hover{transform: translateY(-1px); box-shadow: 0 8px 24px rgba(54, 108, 220, .18)}
.exo-card .exo-orb{filter: drop-shadow(0 0 16px rgba(91, 160, 255, .22))}
@media(max-width:560px){.exo-card{border-radius: 15px}}
.sub,.head .sub{color: #a8b8d0!important; line-height: 2!important}
.meta{border: 1px solid rgba(133, 173, 232, .2)!important; background: rgba(13, 30, 53, .68)!important; border-radius: 999px!important; color: #b9cde8!important; padding: 7px 12px!important}
button,input,select,textarea{font-family: 'Noto Sans Arabic', Tahoma, sans-serif}
.exo-card{border: 1px solid rgba(127, 168, 227, .18)!important; border-radius: 18px!important; background: linear-gradient(150deg, rgba(13, 27, 47, .92), rgba(5, 12, 24, .97))!important; box-shadow: 0 14px 34px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .035)!important; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease!important}
.exo-card:hover{transform: translateY(-4px); border-color: rgba(123, 231, 255, .38)!important; box-shadow: 0 20px 42px rgba(0, 0, 0, .25), 0 0 24px rgba(73, 142, 236, .06)!important}
.exo-card h3{font-weight: 750; letter-spacing: -.02em; color: #f0f5ff}
.exo-card p{color: #a9bad2; line-height: 1.9}
@media(max-width:560px){.exo-card:hover{transform: none}}
button,a{-webkit-tap-highlight-color: transparent}
.wrap,header.wrap,main.wrap,main.wrap>section,.exo-grid>*{min-width: 0;}
@media (max-width:720px){.exo-grid{grid-template-columns: minmax(0, 1fr) !important;}.head,.head .meta{min-width: 0; max-width: 100%;}}
@media (min-width: 721px){body>header.wrap,body>main.wrap,body>footer{float: none !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: var(--sidebar-width) !important; width: calc(100% - var(--sidebar-width)) !important; max-width: none !important; min-width: 0 !important; transform: none !important;}}
@media (max-width: 720px){body>header.wrap,body>main.wrap,body>footer{position: relative !important; left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; transform: none !important;}}
.sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0}
.crumb{display: inline-flex; align-items: center; margin: 24px 0 0; font-size: .82rem; color: var(--muted); text-decoration: none}
.crumb:hover,.crumb:focus-visible{color: var(--cyan); outline: none}
main.wrap>.crumb+section{padding-top: 28px}
.more-tools{margin: 44px 0 28px; padding-top: 22px; border-top: 1px solid var(--line)}
.more-title{margin: 0 0 12px; font-size: .82rem; color: var(--muted)}
.more-links{display: flex; flex-wrap: wrap; gap: 8px}
.more-links a{display: inline-flex; padding: 4px 14px; border: 1px solid var(--line2); border-radius: 99px; color: #aab8d3; font-size: .82rem; text-decoration: none; transition: color .2s, border-color .2s}
.more-links a:hover,.more-links a:focus-visible{color: var(--cyan); border-color: rgba(53, 214, 232, .5); outline: none}