a:focus-visible{outline: 2px solid var(--cyan); outline-offset: 3px}
.tick{position: absolute; font: 300 .62rem var(--display); letter-spacing: .2em; color: var(--muted); direction: ltr}
.tick.a{top: 6%; left: 4%}
.tick.b{bottom: 7%; right: 2%; color: var(--gold)}
.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}
.tick{font-size: .66rem; font-weight: 500}
.ol-metric{border: 1px solid var(--line); border-radius: 9px; padding: 10px}
.ol-metric span{display: block; font-size: .73rem; color: var(--muted)}
.ol-metric b{display: block; font: 500 1.05rem var(--mono); direction: ltr; text-align: right; margin-top: 3px}
.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}
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)}
.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}
button,a{-webkit-tap-highlight-color: transparent}
.wrap,header.wrap,main.wrap,main.wrap>section{min-width: 0;}
@media (max-width:720px){.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;}}
.iss-sentence{margin: 0 0 14px; padding: 14px 18px; border: 1px solid var(--line2); border-inline-start: 3px solid var(--cyan); border-radius: 12px; background: rgba(255, 255, 255, .03); font-size: 1.05rem; font-weight: 400; line-height: 1.9}
.iss-sentence b{font-weight: 500; color: var(--text)}
.iss-sentence b.iss-hot{color: var(--gold)}
.iss-map-wrap{position: relative}
.iss-map{direction: ltr; height: 440px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #03050A; z-index: 1}
.iss-follow{position: absolute; inset-block-end: 14px; inset-inline-start: 14px; z-index: 5; font: inherit; font-size: .8rem; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--cyan); background: rgba(3, 5, 10, .85); color: var(--cyan); cursor: pointer}
.iss-follow[hidden]{display: none}
.iss-follow:focus-visible{outline: 2px solid var(--gold); outline-offset: 2px}
.iss-icon{background: none; border: 0}
.iss-dot{position: absolute; inset: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 2px rgba(212, 175, 106, .8)}
.iss-ring{position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); animation: issPulse 2s ease-out infinite}
@keyframes issPulse{0% {
        transform: scale(.5);
        opacity: .9
    }

    100% {
        transform: scale(1.5);
        opacity: 0
    }}
.iss-metrics{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px}
.iss-metrics .ol-metric b{font-size: .92rem}
.iss-note{margin: 12px 0 0; font-size: .78rem; color: var(--muted)}
@media (max-width: 720px){.iss-map{height: 360px}.iss-metrics{grid-template-columns: repeat(2, minmax(0, 1fr))}}
@media (prefers-reduced-motion: reduce){.iss-ring{animation: none; opacity: .6}}
.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}