/* Student OS — "install the app" showcase (install.js). Works on the landing page and in the app. */
.sosi { --si-bg: #ffffff; --si-text: #14132b; --si-sub: #5b5a78; --si-soft: #f1f0fb; --si-line: #e6e6f0; --si-a: #6366f1; --si-b: #8b5cf6; --si-c: #ec4899;
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: end center; font-family: inherit; }
@media (prefers-color-scheme: dark) { .sosi { --si-bg: #15142e; --si-text: #f1f0ff; --si-sub: #b9b7da; --si-soft: #1f1d40; --si-line: #2c2a55; } }
:root[data-theme="dark"] .sosi { --si-bg: #15142e; --si-text: #f1f0ff; --si-sub: #b9b7da; --si-soft: #1f1d40; --si-line: #2c2a55; }
:root[data-theme="light"] .sosi { --si-bg: #ffffff; --si-text: #14132b; --si-sub: #5b5a78; --si-soft: #f1f0fb; --si-line: #e6e6f0; }
html.sosi-lock { overflow: hidden; }
.sosi-backdrop { position: absolute; inset: 0; background: rgba(9, 8, 26, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; }
.sosi.open .sosi-backdrop { opacity: 1; }
.sosi-card { position: relative; width: min(440px, 100%); max-height: 94dvh; overflow-y: auto; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--si-b) 22%, transparent), transparent 70%), var(--si-bg); color: var(--si-text); box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, .55); transform: translateY(105%); transition: transform .45s cubic-bezier(.2, .9, .2, 1.05); text-align: center; }
.sosi.open .sosi-card { transform: none; }
.sosi-x { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--si-sub); cursor: pointer; z-index: 2; }
.sosi-x:hover { background: var(--si-soft); }
.sosi .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sosi h2 { margin: 6px 0 6px; font-size: 1.45rem; font-weight: 850; letter-spacing: -.01em; line-height: 1.3; }
.sosi-sub { margin: 0 auto 14px; max-width: 34ch; color: var(--si-sub); font-size: .98rem; line-height: 1.6; }
.sosi-view[hidden] { display: none; }

/* the phone: the app lands on the home screen, then its first reminder arrives */
.sosi-stage { position: relative; height: 250px; display: grid; place-items: center; margin: 4px 0 6px; }
.sosi-phone { position: relative; width: 150px; height: 236px; border-radius: 30px; padding: 30px 14px 12px; background: linear-gradient(160deg, #312e81, #4c1d95 60%, #831843); box-shadow: 0 0 0 5px #0f0d2e, 0 0 0 6px #3b3870, 0 26px 50px -18px rgba(76, 29, 149, .8); overflow: hidden; }
.sosi-island { position: absolute; top: 8px; left: 50%; width: 46px; height: 12px; border-radius: 999px; background: #0f0d2e; transform: translateX(-50%); }
.sosi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sosi-grid > i { aspect-ratio: 1; border-radius: 8px; background: hsl(var(--h) 70% 72% / .55); animation: sosi-fade .5s both; }
.sosi-slot { position: relative; aspect-ratio: 1; border-radius: 8px; outline: 1.5px dashed rgba(255, 255, 255, .5); outline-offset: -1px; }
.sosi-app { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); animation: sosi-land 1.1s .45s cubic-bezier(.3, 1.4, .5, 1) both, sosi-glow 2.4s 1.6s ease-in-out infinite; }
.sosi-badge { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #ef4444; color: #fff; font: 800 9px/15px system-ui, sans-serif; font-style: normal; text-align: center; animation: sosi-pop .4s 2.6s cubic-bezier(.3, 1.6, .5, 1) both; }
.sosi-dock { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-around; padding: 7px; border-radius: 14px; background: rgba(255, 255, 255, .18); }
.sosi-dock i { width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .55); }
.sosi-notif { position: absolute; top: 24px; left: 8px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 12px; background: rgba(255, 255, 255, .94); color: #14132b; text-align: start; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6); animation: sosi-notif 5.5s 2.2s ease both infinite; }
.sosi-notif img { width: 20px; height: 20px; border-radius: 5px; }
.sosi-notif div { display: grid; line-height: 1.25; min-width: 0; }
.sosi-notif b { font-size: 8.5px; }
.sosi-notif span { font-size: 8.5px; color: #4b4a66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sosi-spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--si-c); filter: blur(.5px); opacity: 0; animation: sosi-spark 2.4s 1.4s ease-out infinite; }
.sosi-spark.s1 { top: 30%; left: 18%; background: var(--si-b); }
.sosi-spark.s2 { top: 16%; right: 20%; animation-delay: 1.8s; }
.sosi-spark.s3 { bottom: 20%; right: 16%; background: #22d3ee; animation-delay: 2.1s; }

.sosi-perks { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sosi-perks li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--si-soft); font-size: .86rem; font-weight: 650; animation: sosi-rise .5s both; }
.sosi-perks li:nth-child(2) { animation-delay: .1s; } .sosi-perks li:nth-child(3) { animation-delay: .2s; }
.sosi-perks .icon { width: 16px; height: 16px; color: var(--si-a); }

.sosi-actions { display: grid; gap: 8px; }
.sosi-go { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; border: 0; border-radius: 18px; font: inherit; font-size: 1.08rem; font-weight: 800; color: #fff; cursor: pointer; overflow: hidden; background: linear-gradient(135deg, var(--si-a), var(--si-b) 55%, var(--si-c)); box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--si-b) 90%, transparent); transition: transform .15s; }
.sosi-go:active { transform: scale(.97); }
.sosi-go::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); animation: sosi-shine 2.8s 1.2s ease-in-out infinite; }
.sosi-later { border: 0; background: transparent; color: var(--si-sub); font: inherit; font-weight: 650; padding: 10px; cursor: pointer; border-radius: 12px; }
.sosi-later:hover { background: var(--si-soft); }

/* the browser's steps, acted out */
.sosi-guide { margin: 6px 0 14px; }
.sosi-mock { position: relative; height: 190px; margin: 0 auto 14px; width: min(270px, 100%); border-radius: 22px; overflow: hidden; background: var(--si-soft); border: 1px solid var(--si-line); }
.sosi-page { position: absolute; inset: 44px 14px 60px; display: grid; gap: 8px; align-content: start; }
.sosi-page i { height: 14px; border-radius: 6px; background: color-mix(in srgb, var(--si-text) 10%, transparent); }
.sosi-page i:nth-child(2) { width: 70%; } .sosi-page i:nth-child(3) { width: 85%; }
.sosi-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 999px; background: var(--si-bg); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); direction: ltr; }
.sosi-bar.top { top: 10px; bottom: auto; }
/* The mock browser bar follows the browser's own UI direction (see uiRtl in install.js). */
.sosi-bar { direction: ltr; }
.sosi.ui-rtl .sosi-bar { direction: rtl; }
.sosi-bar .url { flex: 1; font: 600 11px/1 system-ui, sans-serif; color: var(--si-sub); text-align: center; }
.sosi-bar .btn-dots { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--si-text); }
.sosi-bar .btn-dots .icon { width: 16px; height: 16px; }
.sosi-sheet { position: absolute; left: 10px; right: 10px; bottom: 56px; display: grid; gap: 4px; padding: 8px; border-radius: 16px; background: var(--si-bg); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .4); transform: translateY(140%); opacity: 0; transition: transform .4s cubic-bezier(.2, .9, .2, 1), opacity .3s; }
.sosi-menu { position: absolute; top: 48px; right: 12px; width: 62%; display: grid; gap: 4px; padding: 6px; border-radius: 12px; background: var(--si-bg); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .4); transform-origin: top right; transform: scale(.6); opacity: 0; transition: transform .3s, opacity .25s; }
.sosi-mock .row { display: flex; align-items: center; gap: 6px; min-height: 22px; padding: 4px 8px; border-radius: 8px; font-size: .74rem; font-weight: 700; background: color-mix(in srgb, var(--si-text) 5%, transparent); transition: background .3s, color .3s; }
.sosi-mock .row .icon { width: 13px; height: 13px; }
.sosi-finger { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: rgba(139, 92, 246, .35); border: 2px solid rgba(139, 92, 246, .9); opacity: 0; transition: all .45s cubic-bezier(.3, .9, .3, 1); pointer-events: none; }
/* iPhone: ⋯ → Share → Add to Home Screen → Add */
.sosi-guide[data-kind="ios"][data-at="0"] .sosi-finger { opacity: 1; right: 14px; bottom: 12px; animation: sosi-tap 1s .5s ease both; }
.sosi-guide[data-kind="ios"][data-at="0"] .btn-dots { background: color-mix(in srgb, var(--si-b) 25%, transparent); }
.sosi-guide[data-kind="ios"]:is([data-at="1"], [data-at="2"], [data-at="3"]) .sosi-sheet { transform: none; opacity: 1; }
.sosi-guide[data-kind="ios"][data-at="1"] .sosi-finger { opacity: 1; left: 40px; bottom: 112px; animation: sosi-tap 1s .5s ease both; }
.sosi-guide[data-kind="ios"][data-at="1"] .r1, .sosi-guide[data-kind="ios"][data-at="2"] .r2, .sosi-guide[data-kind="ios"][data-at="3"] .r3 { background: linear-gradient(135deg, var(--si-a), var(--si-b)); color: #fff; }
.sosi-guide[data-kind="ios"][data-at="2"] .sosi-finger { opacity: 1; left: 40px; bottom: 86px; animation: sosi-tap 1s .5s ease both; }
.sosi-guide[data-kind="ios"][data-at="3"] .sosi-finger { opacity: 1; left: 40px; bottom: 60px; animation: sosi-tap 1s .5s ease both; }
/* Android and computer: menu → Install */
.sosi-guide:not([data-kind="ios"])[data-at="0"] .sosi-finger { opacity: 1; right: 12px; top: 10px; animation: sosi-tap 1s .5s ease both; }
.sosi-guide:not([data-kind="ios"])[data-at="0"] .btn-dots { background: color-mix(in srgb, var(--si-b) 25%, transparent); }
.sosi-guide:not([data-kind="ios"]):is([data-at="1"], [data-at="2"]) .sosi-menu { transform: none; opacity: 1; }
.sosi-guide:not([data-kind="ios"])[data-at="1"] .row.hl { background: linear-gradient(135deg, var(--si-a), var(--si-b)); color: #fff; }
.sosi-guide[data-kind="android"][data-at="1"] .sosi-finger { opacity: 1; right: 60px; top: 104px; animation: sosi-tap 1s .5s ease both; }
.sosi-guide[data-kind="desktop"][data-at="1"] .sosi-finger { opacity: 1; right: 60px; top: 52px; animation: sosi-tap 1s .5s ease both; }
.sosi-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: start; }
.sosi-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--si-soft); font-weight: 650; font-size: .93rem; opacity: .55; transition: opacity .3s, background .3s, transform .3s; }
.sosi-steps li .n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--si-text) 12%, transparent); font-size: .8rem; font-weight: 800; }
.sosi-steps li .icon { color: var(--si-a); width: 18px; height: 18px; }
.sosi-steps li.on { opacity: 1; transform: scale(1.02); background: color-mix(in srgb, var(--si-b) 16%, var(--si-soft)); }
.sosi-steps li.on .n, .sosi-steps li.done .n { background: linear-gradient(135deg, var(--si-a), var(--si-b)); color: #fff; }
.sosi-steps li.done { opacity: .85; }
.sosi-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #f59e0b 16%, var(--si-soft)); font-size: .88rem; font-weight: 600; }
.sosi-link { display: inline-block; margin-top: 12px; color: var(--si-a); font-weight: 700; }

/* iPhone: which browser? */
.sosi-browsers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 18px; }
.sosi-browser { position: relative; display: grid; justify-items: center; gap: 8px; padding: 20px 12px 16px; border-radius: 22px; border: 2px solid var(--si-line); background: var(--si-soft); color: var(--si-text); font: inherit; cursor: pointer; transition: transform .15s, border-color .2s, box-shadow .2s; animation: sosi-rise .45s both; }
.sosi-browser:nth-child(2) { animation-delay: .08s; }
.sosi-browser:hover, .sosi-browser:focus-visible { transform: translateY(-2px); border-color: var(--si-b); }
.sosi-browser.mine { border-color: var(--si-b); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--si-b) 90%, transparent); }
.sosi-browser b { font-size: 1.05rem; }
.sosi-browser small { position: absolute; inset-block-start: -11px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--si-a), var(--si-b)); color: #fff; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.sosi-browser .logo { width: 58px; height: 58px; border-radius: 50%; }
.logo.safari { background: radial-gradient(circle at 50% 50%, #fff 0 9%, transparent 10%), conic-gradient(from 45deg, #ef4444 0 25%, #fff 25% 50%, #ef4444 50% 75%, #fff 75%) center / 12px 34px no-repeat, radial-gradient(circle, #36c1ff, #1a73e8 70%); box-shadow: inset 0 0 0 4px #fff, 0 6px 14px -6px rgba(26, 115, 232, .8); transform: rotate(45deg); }
.logo.chrome { background: radial-gradient(circle, #1a73e8 0 21%, #fff 22% 29%, transparent 30%), conic-gradient(from -30deg, #ea4335 0 120deg, #fbbc04 120deg 240deg, #34a853 240deg 360deg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
button.sosi-link { border: 0; background: none; padding: 6px; font: inherit; font-weight: 700; cursor: pointer; }

/* iPhone Chrome: Share at the top right → Add to Home Screen → Add */
.sosi-guide[data-kind="ios-chrome"] .sosi-sheet { bottom: 10px; }
.sosi-guide[data-kind="ios-chrome"][data-at="0"] .sosi-finger { opacity: 1; right: 12px; top: 10px; animation: sosi-tap 1s .5s ease both; }
.sosi-guide[data-kind="ios-chrome"][data-at="0"] .btn-dots { background: color-mix(in srgb, var(--si-b) 25%, transparent); }
.sosi-guide[data-kind="ios-chrome"]:is([data-at="1"], [data-at="2"]) .sosi-sheet { transform: none; opacity: 1; }
.sosi-guide[data-kind="ios-chrome"][data-at="1"] .r2, .sosi-guide[data-kind="ios-chrome"][data-at="2"] .r3 { background: linear-gradient(135deg, var(--si-a), var(--si-b)); color: #fff; }
.sosi-guide[data-kind="ios-chrome"][data-at="1"] .sosi-finger { opacity: 1; left: 40px; bottom: 40px; animation: sosi-tap 1s .5s ease both; }
.sosi-guide[data-kind="ios-chrome"][data-at="2"] .sosi-finger { opacity: 1; left: 40px; bottom: 14px; animation: sosi-tap 1s .5s ease both; }
/* the iOS Safari rules must not catch Chrome */
.sosi-guide[data-kind="ios-chrome"] .sosi-bar:not(.top) { display: none; }

/* while guiding, the card moves up so the browser's own bar stays visible, and an arrow points at it */
.sosi.guiding { place-items: start center; }
.sosi.guiding .sosi-card { border-radius: 0 0 30px 30px; padding-top: calc(18px + env(safe-area-inset-top)); max-height: 78dvh; }
.sosi-pointer { position: fixed; left: 50%; z-index: 3; display: grid; justify-items: center; gap: 6px; transform: translateX(-50%); pointer-events: none; }
.sosi-pointer.bottom { bottom: calc(8px + env(safe-area-inset-bottom)); }
.sosi-pointer.top { top: 8px; left: auto; right: 14px; transform: none; justify-items: end; flex-direction: column-reverse; display: flex; align-items: flex-end; }
.sosi.ui-rtl .sosi-pointer.top { right: auto; left: 14px; align-items: flex-start; }
.sosi-pointer .bubble { padding: 8px 14px; border-radius: 14px; background: #fff; color: #14132b; font-weight: 800; font-size: .92rem; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .5); white-space: nowrap; }
.sosi-pointer .arrow { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--si-a), var(--si-c)); box-shadow: 0 0 0 8px rgba(139, 92, 246, .25); animation: sosi-bob 1.1s ease-in-out infinite; }
.sosi-pointer .arrow .icon { width: 28px; height: 28px; stroke-width: 2.6; }
.sosi-pointer.top .arrow { animation-name: sosi-bob-up; }

/* installed */
.sosi-check { width: 84px; height: 84px; margin: 18px auto 8px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 0 10px rgba(16, 185, 129, .18); animation: sosi-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.sosi-check .icon { width: 42px; height: 42px; stroke-width: 3; }
.sosi-confetti { position: fixed; inset: 0; z-index: 500; pointer-events: none; overflow: hidden; }
.sosi-confetti i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; animation: sosi-fall var(--d) var(--delay) cubic-bezier(.2, .6, .4, 1) forwards; }

/* floating "install the app" button */
.sosi-pill { position: fixed; z-index: 90; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(21, 20, 46, .92); color: #fff; box-shadow: 0 16px 40px -12px rgba(76, 29, 149, .75), inset 0 0 0 1px rgba(255, 255, 255, .12); backdrop-filter: blur(10px); transform: translate(-50%, 160%); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .2, 1.1), opacity .3s; }
.sosi-pill.show { transform: translate(-50%, 0); opacity: 1; animation: sosi-wiggle 7s 2s ease-in-out infinite; }
.sosi-pill-go { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 6px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: start; }
[dir="rtl"] .sosi-pill-go { padding: 4px 6px 4px 14px; }
.sosi-pill-go img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); }
.sosi-pill-go span { display: grid; line-height: 1.25; white-space: nowrap; }
.sosi-pill-go b { font-size: .95rem; }
.sosi-pill-go small { font-size: .74rem; color: #c7c4f0; }
.sosi-pill-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.sosi-pill-x .icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
@media (min-width: 768px) { .sosi-pill { bottom: 24px; } .sosi { place-items: center; } .sosi-card { border-radius: 30px; } .sosi.guiding { place-items: center; } .sosi.guiding .sosi-card { border-radius: 30px; } }

@keyframes sosi-fade { from { opacity: 0; transform: scale(.7); } }
@keyframes sosi-land { 0% { transform: translateY(-190px) scale(1.9) rotate(-14deg); opacity: 0; } 55% { opacity: 1; } 75% { transform: translateY(6px) scale(.92); } 100% { transform: none; opacity: 1; } }
@keyframes sosi-glow { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .0), 0 0 18px 4px rgba(236, 72, 153, .75); } }
@keyframes sosi-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sosi-notif { 0%, 100% { transform: translateY(-130%); opacity: 0; } 8%, 45% { transform: none; opacity: 1; } 55% { transform: translateY(-130%); opacity: 0; } }
@keyframes sosi-spark { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.8) translateY(-20px); } }
@keyframes sosi-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sosi-shine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
@keyframes sosi-tap { 0% { transform: scale(1.4); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 60% { transform: scale(.8); } 100% { transform: scale(1); } }
@keyframes sosi-bob { 50% { transform: translateY(10px); } }
@keyframes sosi-bob-up { 50% { transform: translateY(-10px); } }
@keyframes sosi-fall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
@keyframes sosi-wiggle { 0%, 88%, 100% { transform: translate(-50%, 0) rotate(0); } 90% { transform: translate(-50%, -4px) rotate(-3deg); } 94% { transform: translate(-50%, -4px) rotate(3deg); } 97% { transform: translate(-50%, 0) rotate(0); } }

.sosi.still *, .sosi.still *::before, .sosi.still *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) { .sosi-pill.show { animation: none; } }

/* Floating pill in the light theme (landing toggle, or the app's light/system-light theme) */
:root[data-theme="light"] .sosi-pill { background: rgba(255, 255, 255, .96); color: #14132b; border: 1px solid #e6e3fb; box-shadow: 0 16px 40px -14px rgba(49, 46, 129, .35); }
:root[data-theme="light"] .sosi-pill-go small { color: #6b6a86; }
:root[data-theme="light"] .sosi-pill-x { background: #f1f0fb; color: #4b4a66; }
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .sosi-pill { background: rgba(255, 255, 255, .96); color: #14132b; border: 1px solid #e6e3fb; box-shadow: 0 16px 40px -14px rgba(49, 46, 129, .35); }
  :root[data-theme="system"] .sosi-pill-go small { color: #6b6a86; }
  :root[data-theme="system"] .sosi-pill-x { background: #f1f0fb; color: #4b4a66; }
}