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}
.rows{display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); padding-top: 14px}
.rows div{display: flex; flex-direction: column}
.rows em{font: 300 .6rem var(--display); font-style: normal; letter-spacing: .2em; color: var(--muted); direction: ltr; text-align: right}
.rows b{font: 400 .95rem var(--mono); direction: ltr; text-align: right}
.note{margin: 16px 0 0; font-size: .74rem; color: var(--muted); opacity: .75}
.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}
.note{font-size: .78rem; font-weight: 400}
.rows b{font-weight: 500}
.meta{font-size: .7rem; font-weight: 500}
.rows em{font-size: .66rem; font-weight: 500}
.orbit-lab{border: 1px solid var(--line2); border-radius: 16px; padding: clamp(16px, 3vw, 28px); background: linear-gradient(145deg, rgba(17, 24, 39, .9), rgba(5, 8, 17, .94)); margin-top: 28px}
.ol-grid{display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 20px}
.ol-stage{position: relative; min-height: 380px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at center, rgba(37, 53, 95, .35), rgba(3, 5, 10, .95) 70%)}
#orbitLabCanvas{width: 100%; height: 100%; min-height: 380px; display: block; touch-action: pan-y}
.ol-overlay{position: absolute; inset: 12px 12px auto; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; flex-wrap: wrap}
.ol-pill{font-size: .75rem; padding: 4px 10px; border: 1px solid var(--line2); border-radius: 99px; background: rgba(3, 5, 10, .72); color: var(--muted)}
.ol-controls{display: grid; gap: 13px; align-content: start}
.ol-control{padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .02)}
.ol-control label{display: flex; justify-content: space-between; gap: 10px; font-size: .83rem; margin-bottom: 6px}
.ol-control output{color: var(--cyan); font-family: var(--mono); direction: ltr}
.ol-control input[type=range]{width: 100%; accent-color: var(--cyan)}
.ol-buttons{display: flex; gap: 8px; flex-wrap: wrap}
.ol-buttons button,.ol-select{font: inherit; color: var(--text); background: #0b1120; border: 1px solid var(--line2); border-radius: 8px; padding: 8px 12px}
.ol-buttons button{cursor: pointer}
.ol-buttons button:hover{border-color: var(--cyan)}
.ol-buttons .primary{background: rgba(109, 74, 255, .22); border-color: rgba(109, 74, 255, .65)}
.ol-metrics{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px}
.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}
.ol-explain{border-inline-start: 2px solid var(--violet); padding: 10px 13px; margin-top: 14px; color: #c4ccdc; font-size: .88rem}
.ol-lower{display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px}
.ol-card{border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: rgba(255, 255, 255, .018)}
.ol-card h3{font-size: 1rem; margin: 0 0 10px}
.ol-card p{font-size: .86rem; color: var(--muted); margin: 6px 0}
.ol-card textarea,.ol-card input[type=text]{width: 100%; background: #080d18; color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 10px; font: inherit}
.ol-card textarea{min-height: 82px; resize: vertical}
.ol-status{font-size: .85rem; color: var(--cyan); min-height: 1.6em; margin-top: 8px}
.ol-analysis{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px}
.ol-analysis>div{border: 1px solid var(--line); border-radius: 8px; padding: 9px; min-width: 0}
.ol-analysis span{display: block; color: var(--muted); font-size: .72rem; line-height: 1.7}
.ol-analysis b{display: block; color: var(--cyan); font-size: .86rem; overflow-wrap: anywhere; direction: rtl}
.ol-history{overflow-x: auto; margin-top: 12px; font-size: .78rem}
.ol-history table{width: 100%; border-collapse: collapse; min-width: 390px}
.ol-history th,.ol-history td{padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap}
.ol-history th{color: var(--muted); font-weight: 500}
.ol-history td{color: var(--text)}
@media(max-width:860px){.ol-grid,.ol-lower{grid-template-columns: 1fr}.ol-stage,#orbitLabCanvas{min-height: 300px}}
@media(max-width:480px){.ol-metrics{grid-template-columns: 1fr 1fr}.ol-stage,#orbitLabCanvas{min-height: 270px}.ol-buttons button{flex: 1}}
.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}
.ol-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}
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)}
button.primary,.primary{background: linear-gradient(110deg, #4d63dc, #785ce8 58%, #5a8ee8); border: 1px solid rgba(186, 205, 255, .45); color: #fff; box-shadow: 0 8px 25px rgba(76, 86, 223, .24)}
@media(max-width:560px){.ol-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}
.ol-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}
.ol-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}
.ol-card h3{font-weight: 750; letter-spacing: -.02em; color: #f0f5ff}
.ol-card p{color: #a9bad2; line-height: 1.9}
.rows{border-top: 1px solid rgba(135, 170, 220, .13)!important}
.rows em{color: #8398b7!important}
.rows b{color: #e2edff!important}
@media(max-width:560px){.ol-card:hover{transform: none}}
button,a{-webkit-tap-highlight-color: transparent}
.wrap,header.wrap,main.wrap,main.wrap>section,.ol-grid>*,.ol-lower>*{min-width: 0;}
@media (min-width: 721px){.ol-stage{max-width: 100%;}#orbitLabCanvas{display: block; width: 100%; max-width: 100%;}.ol-history{max-width: 100%; overflow-x: auto;}.ol-history table{min-width: 390px;}}
@media (max-width:720px){.ol-grid,.ol-lower{grid-template-columns: minmax(0, 1fr) !important;}.rows{grid-template-columns: repeat(2, minmax(0, 1fr));}.head,.head .meta{min-width: 0; max-width: 100%;}}
@media (max-width:560px){.rows b{font-size: .84rem;}}
@media (max-width: 720px){.rows{min-width: 0;}}
@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}

/* shareable experiment links */
.ol-challenge{border: 1px solid rgba(212, 175, 106, .5); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; background: rgba(212, 175, 106, .08)}
.ol-challenge[hidden],#olShareBox[hidden],#olNativeShare[hidden]{display: none}
.ol-challenge b{color: var(--gold)}
.ol-challenge p{margin: 6px 0 0; font-size: .88rem; color: #d3dbeb; line-height: 1.9}
.ol-challenge .ol-ch-result:empty{display: none}
.ol-challenge .ol-ch-result{color: var(--cyan); font-weight: 600}
.ol-share-link{direction: ltr; text-align: left; font-family: var(--mono); font-size: .78rem; margin-top: 10px}