/* extensions.html — the ai45 extension: features, demos, plans */
.ext { max-width: 1240px; margin: 0 auto; padding: 34px 32px 140px; }
.ext button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.ext svg { width: 18px; height: 18px; flex: none; }
.c-mint { --c: #CDF2DD; --cd: #1E8A55; } .c-sky { --c: #D3EAFB; --cd: #2A6FB0; } .c-lav { --c: #E4DAFF; --cd: #6B4FD8; } .c-sun { --c: #FCEBB6; --cd: #9A6B00; } .c-rose { --c: #FAD4DE; --cd: #B83560; }
.xb { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 14px; background: var(--ink) !important; color: #fff !important; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: transform .2s; }
button.xb { border: 0; font-family: inherit; cursor: pointer; }
.xb:hover { transform: translateY(-2px); }
.xb--g { background: #fff !important; color: var(--ink) !important; box-shadow: 0 1px 0 var(--line), inset 0 0 0 1px var(--line); }
.xb.is-done { background: #CDF2DD !important; color: #1E8A55 !important; box-shadow: none; }

/* hero */
.xh { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 40px; align-items: center; padding: 20px 0 40px; }
.xh__eye { font-size: 13px; font-weight: 700; color: var(--muted); }
.xh h1 { margin-top: 10px; font-size: clamp(38px, 5vw, 60px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.xh p { margin-top: 16px; max-width: 520px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.xh__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.xpop { padding: 14px; border-radius: 26px; background: #0E0E10; color: #fff; box-shadow: 0 40px 80px -40px rgba(14, 14, 16, .6); transform: rotate(1.2deg); transition: transform .4s cubic-bezier(.32, .72, 0, 1); }
.xpop:hover { transform: rotate(0); }
.xpop__bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
.xpop__bar b { flex: 1; font-size: 15px; }
.xpop__bar span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.xpop__row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; cursor: pointer; transition: background-color .15s; }
.xpop__row:hover { background: rgba(255, 255, 255, .06); }
.xpop__ic { width: 38px; height: 38px; border-radius: 12px; background: var(--c); color: var(--cd); display: grid; place-items: center; flex: none; }
.xpop__t { flex: 1; min-width: 0; } .xpop__t b { display: block; font-size: 14.5px; } .xpop__t em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .5); }

/* feature tabs */
.xf { scroll-margin-top: 96px; }
.xtabs { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-end; }
.xtabs::-webkit-scrollbar { display: none; }
.xtab { position: relative; display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 18px 0 8px; border-radius: 16px; background: var(--card) !important; box-shadow: 0 1px 0 var(--line); font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: transform .2s, background-color .2s; }
.xtab:hover { transform: translateY(-2px); }
.xtab__ic { width: 34px; height: 34px; border-radius: 11px; background: var(--c); color: var(--cd); display: grid; place-items: center; }
.xtab.is-on { background: var(--ink) !important; color: #fff !important; }
.xf__body { margin-top: 16px; transition: opacity .25s; } .xf__body.is-swap { opacity: 0; }

.xm { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.xm__demo { min-width: 0; }
.xm__hint { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.xm__info { padding: 24px; border-radius: 26px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.xm__h { display: flex; align-items: center; gap: 14px; }
.xm__ic { width: 52px; height: 52px; border-radius: 16px; background: var(--c); color: var(--cd); display: grid; place-items: center; flex: none; }
.xm__ic svg { width: 24px !important; height: 24px !important; }
.xm__h h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.xs { display: inline-flex; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: #F2F3F5; font-size: 12px; font-weight: 700; color: var(--muted); }
.xs--live { background: #CDF2DD; color: #1E8A55; }
.xm__tag { margin-top: 16px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.xm__about { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.xm__where { display: flex; align-items: center; gap: 8px; margin: 14px 0 18px; font-size: 13px; color: var(--muted); }
.xm__where svg { width: 16px; height: 16px; }

/* plans */
.xplans { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.xp { padding: 22px; border-radius: 24px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.xp--pro { background: linear-gradient(160deg, #15161A, #0E0E10); color: #fff; }
.xp__h { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; }
.xp__h em { font-style: normal; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: #CDF2DD; color: #1E8A55; }
.xp__h em.is-soon { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }
.xp__price { display: block; margin-top: 10px; font-size: 30px; letter-spacing: -0.03em; }
.xp__price.is-tba { font-size: 17px; letter-spacing: 0; color: var(--muted); }
.xp--pro .xp__price.is-tba { color: rgba(255, 255, 255, .55); }
.xp ul { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.xp li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; }
.xp li svg { width: 16px; height: 16px; margin-top: 2px; color: #3CB179; }
.xplans__note { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.xplans--1 { grid-template-columns: minmax(0, 1fr); }
.xplans--1 .xp ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.xp__link { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* install + faq */
.xi { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; scroll-margin-top: 96px; }
.xi__card { padding: 26px; border-radius: 26px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.xi__card h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.xi__card > p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.xi__card .xb { margin-top: 16px; }
.xi__card ol { margin-top: 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.55; }
.xi__card code { font-family: var(--font-mono); font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: #F2F3F5; }
.xi__card a:not(.xb) { font-weight: 700; text-decoration: underline; }
.xi__fine { font-size: 12.5px !important; }
/* beta marks, version, update steps and the download checksum (checklist EXT-07..11) */
.xbeta { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 6px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; background: var(--sun); color: var(--paper); }
html[data-theme="dark"] .xbeta { background: rgba(var(--fg-rgb), .1); box-shadow: inset 0 0 0 1px var(--e-sun); }
.xpop__bar .xbeta { margin-left: 0; }
.xi__ver { margin-top: 8px !important; font-size: 12.5px !important; font-variant-numeric: tabular-nums; }
.xi__card h3 { margin-top: 20px; font-size: 15px; font-weight: 700; }
.xi__card h3 + ol { margin-top: 8px; }
.xi__check { margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--navy); font-size: 13.5px; line-height: 1.55; }
.xi__check summary { font-weight: 700; cursor: pointer; }
.xi__check p { margin-top: 8px; color: var(--muted); }
.xi__hash { display: block; margin-top: 8px; padding: 8px 10px !important; overflow-wrap: anywhere; user-select: all; background: var(--card) !important; }
.xi__card--faq details { padding: 12px 0; border-bottom: 1px solid var(--line); }
.xi__card--faq summary { font-weight: 700; font-size: 14.5px; cursor: pointer; list-style: none; }
.xi__card--faq summary::-webkit-details-marker { display: none; }
.xi__card--faq summary::after { content: "+"; float: right; color: var(--muted); }
.xi__card--faq details[open] summary::after { content: "–"; }
.xi__card--faq details p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---------- demo window ---------- */
.xwin { border-radius: 22px; background: #fff; box-shadow: 0 30px 70px -40px rgba(14, 14, 16, .45), 0 0 0 1px rgba(14, 14, 16, .06); overflow: hidden; }
.xwin__bar { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; background: #F2F3F5; }
.xwin__bar > i { width: 10px; height: 10px; border-radius: 50%; background: #D5D7DC; }
.xwin__bar > i:nth-child(1) { background: #FF6159; } .xwin__bar > i:nth-child(2) { background: #FFBD2E; } .xwin__bar > i:nth-child(3) { background: #28C941; }
.xwin__url { flex: 1; margin-left: 10px; height: 26px; padding: 0 12px; border-radius: 8px; background: #fff; font-size: 12px; color: var(--muted); display: flex; align-items: center; }
.xwin__body { position: relative; min-height: 380px; }
.dbtn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--ink) !important; color: #fff !important; font-weight: 700; font-size: 13.5px; }
.dbtn--g { background: #F2F3F5 !important; color: var(--ink) !important; }

/* tabs in a mock browser window */
.dtabs { display: flex; gap: 4px; padding: 8px 10px 0; background: #F7F8FA; }
.dtabs button { height: 34px; padding: 0 14px; border-radius: 10px 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dtabs button.is-on { background: #fff; color: var(--ink); }

/* ---------- shared demo parts (a mock browser: light like a real site, dark in dark mode) ---------- */
.xwin { --wb: #fff; --wb2: #F6F7F9; --wb3: #ECEEF1; --wt: #15161A; --wm: #6B7280; --wl: rgba(14, 14, 16, .09); color: var(--wt); }
html[data-theme="dark"] .xwin { --wb: var(--card-2); --wb2: var(--card); --wb3: rgba(255, 255, 255, .08); --wt: var(--paper); --wm: var(--muted); --wl: rgba(255, 255, 255, .1); }
.xwin__body.is-flush { min-height: 0; }
.xwin kbd { font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: rgba(127, 127, 127, .16); color: inherit; opacity: .85; }
.dbtn kbd { margin-left: 6px; background: rgba(255, 255, 255, .18); }
.dbtn--g kbd { background: rgba(127, 127, 127, .16); }
.dbtn:disabled { opacity: .45; cursor: default; }
.dbtn--s { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; gap: 6px; }
.dbtn svg { width: 14px !important; height: 14px !important; }
.dbtn.is-done { background: rgba(60, 177, 121, .16) !important; color: #1E8A55 !important; }
html[data-theme="dark"] .dbtn.is-done { color: var(--t-mint) !important; }
.dpn { background: var(--wb2); border-left: 1px solid var(--wl); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dpn__h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.dpn__h b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpn__logo { width: 26px; height: 26px; border-radius: 8px; background: var(--c); color: var(--cd); display: grid; place-items: center; flex: none; }
.dpn__logo svg { width: 15px !important; height: 15px !important; }
.dseg { display: inline-flex; flex-wrap: wrap; padding: 2px; border-radius: 9px; background: var(--wb3); gap: 2px; }
.dseg button { height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--wm); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.dseg button.is-on { background: var(--wb); color: var(--wt); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.dseg--full { display: flex; } .dseg--full button { flex: 1; justify-content: center; }
.dchip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--wb3); font-size: 12px; font-weight: 700; white-space: nowrap; }
.dchip svg { width: 13px !important; height: 13px !important; }
.dchip.is-on { background: rgba(60, 177, 121, .16); color: #1E8A55; }
html[data-theme="dark"] .dchip.is-on { color: var(--t-mint); }
.dicon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--wm); flex: none; }
.dicon:hover { background: var(--wb3); color: var(--wt); }
.dicon svg { width: 14px !important; height: 14px !important; }
.drm__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.drm__row--sp { justify-content: space-between; }
.drm__chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--wm); cursor: pointer; }
.drm__empty { font-size: 12.5px; line-height: 1.5; color: var(--wm); }
.dlx__muted { color: var(--wm); font-size: 12.5px; }
.xwin select { height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--wl); background: var(--wb); color: var(--wt); font: inherit; font-size: 12.5px; max-width: 100%; }
.xwin input[type="checkbox"] { accent-color: #3CB179; }
/* the "page" in Docs-style demos */
.dgd__tool { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: var(--wb); border-bottom: 1px solid var(--wl); font-size: 12.5px; }
.dgd__tool b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dgd__menu { flex: 1; display: flex; gap: 6px; } .dgd__menu i { width: 22px; height: 7px; border-radius: 3px; background: var(--wb3); }
.dgd__reset { font-size: 12px; font-weight: 700; color: var(--wm); padding: 4px 8px; border-radius: 7px; } .dgd__reset:hover { background: var(--wb3); color: var(--wt); }
.dgd__page { margin: 14px; padding: 22px 24px; min-height: 300px; background: var(--wb); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); font-family: Georgia, "Times New Roman", serif; font-size: 14.5px; line-height: 1.75; }

/* LaTeXport demo */
.dlx { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, 1fr); min-height: 420px; }
.dlx__doc { background: var(--wb2); min-width: 0; }
.dlx__p { margin: 0 0 14px; padding: 2px 4px; border-radius: 4px; cursor: text; }
.dlx__p:hover { background: rgba(127, 127, 127, .06); }
.dlx__p.is-at .dlx__eqs::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -0.2em; background: #2A6FB0; animation: dblink 1.05s steps(1) infinite; }
@keyframes dblink { 50% { opacity: 0; } }
.dlx__eq { display: inline-block; margin: 2px 3px; padding: 2px 6px; border-radius: 4px; background: rgba(127, 127, 127, .12); vertical-align: middle; animation: din .35s ease-out; white-space: nowrap; max-width: 100%; overflow-x: auto; }
.dlx__eq svg { width: auto !important; height: auto !important; max-height: 3.2em; vertical-align: middle; }
.dlx__in { width: 100%; min-height: 60px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--wl); background: var(--wb); color: var(--wt); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; outline: 0; }
.dlx__in:focus { border-color: #6B4FD8; box-shadow: 0 0 0 3px rgba(107, 79, 216, .18); }
.dlx__pv { min-height: 70px; padding: 12px; border-radius: 10px; background: var(--wb); border: 1px dashed var(--wl); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; overflow-x: auto; overflow-y: hidden; font-size: 21px; text-align: center; }
.dlx__pv svg { width: auto !important; height: auto !important; max-width: 100%; }
.dlx__err { font-size: 12.5px; color: #C2410C; }
html[data-theme="dark"] .dlx__err { color: #FFB38A; }
.dlx__raw { font-family: var(--font-mono); font-size: 12.5px; }
.dlx__acts { display: flex; gap: 8px; } .dlx__acts .dbtn { flex: 1; height: 36px; font-size: 12.5px; padding: 0 10px; }
.dlx__cats { display: flex; flex-wrap: wrap; gap: 4px; }
.dlx__cats button { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--wb3); font-size: 12px; font-weight: 700; color: var(--wm); }
.dlx__cats button.is-on { background: var(--wt); color: var(--wb); }
.dlx__syms { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.dlx__syms[hidden] { display: none; }
.dlx__syms button { height: 34px; border-radius: 8px; background: var(--wb); box-shadow: inset 0 0 0 1px var(--wl); font-size: 14px; white-space: nowrap; }
.dlx__syms button:hover { box-shadow: inset 0 0 0 1.5px #6B4FD8; }
.dlx__rec { display: flex; flex-direction: column; gap: 4px; } .dlx__rec b { font-size: 12px; color: var(--wm); }
.dlx__rec button { text-align: left; padding: 6px 8px; border-radius: 8px; background: var(--wb); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlx__rec code { font-family: var(--font-mono); font-size: 11.5px; }

/* Meet Assistant demo */
.dmt { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, 1fr); min-height: 420px; }
.dmt__call { background: #202124; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dmt__grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dmt__tile { position: relative; min-height: 120px; border-radius: 14px; background: #3C4043; display: grid; place-items: center; transition: box-shadow .2s; }
.dmt__tile span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 700; }
.dmt__tile b { position: absolute; left: 10px; bottom: 8px; font-size: 12px; color: #fff; }
.dmt__tile.is-talk { box-shadow: 0 0 0 3px #8AB4F8; }
.dmt__tile.is-talk span { animation: dtalk .6s ease-in-out infinite alternate; }
@keyframes dtalk { to { transform: scale(1.07); } }
.dmt__chat { display: flex; gap: 8px; }
.dmt__chat input { flex: 1; min-width: 0; height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: #3C4043; color: #fff; font: inherit; font-size: 13px; outline: 0; }
.dmt__chat input::placeholder { color: rgba(255, 255, 255, .6); }
.dmt__chat input:focus { box-shadow: 0 0 0 2px #8AB4F8; }
.dmt__chat button { width: 38px; height: 38px; border-radius: 50%; background: #8AB4F8 !important; color: #202124 !important; display: grid; place-items: center; flex: none; }
.dmt__rec { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(60, 177, 121, .14); color: #1E8A55; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dmt__rec i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: dblink 1.4s steps(1) infinite; }
.dmt__rec.is-paused { background: rgba(245, 158, 11, .16); color: #A16207; } .dmt__rec.is-paused i { animation: none; }
html[data-theme="dark"] .dmt__rec { color: var(--t-mint); } html[data-theme="dark"] .dmt__rec.is-paused { color: var(--t-sun); }
.dmt__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dmt__bar [data-n] { font-variant-numeric: tabular-nums; opacity: .7; }
.dmt__log { flex: 1; min-height: 210px; max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.dmt__log[hidden], .dmt__notes[hidden] { display: none; }
.dmt__l { padding: 8px 10px; border-radius: 10px; background: var(--wb); animation: plin .3s ease-out; }
.dmt__who { font-size: 12px; font-weight: 800; } .dmt__who em { font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--wb3); color: var(--wm); font-size: 10.5px; font-weight: 700; }
.dmt__t { float: right; font-size: 11px; color: var(--wm); font-variant-numeric: tabular-nums; }
.dmt__l p { margin-top: 2px; font-size: 12.5px; line-height: 1.45; }
.dmt__sys { align-self: center; padding: 3px 10px; border-radius: 999px; background: rgba(245, 158, 11, .14); font-size: 11.5px; font-weight: 600; color: var(--wm); text-align: center; }
.dmt__notes { flex: 1; min-height: 210px; resize: none; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--wl); background: var(--wb); color: var(--wt); font: inherit; font-size: 13px; line-height: 1.5; outline: 0; }
.dmt__notes:focus { border-color: #E2A400; }
.dmt__doc { width: 100%; }

/* Research Manager demo */
.drm { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); min-height: 420px; }
.drm__art { padding: 20px 22px; font-size: 14.5px; line-height: 1.75; min-width: 0; }
.drm__art em { font-style: normal; font-size: 12px; color: var(--wm); }
.drm__art h3 { margin: 4px 0 10px; font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; }
.drm__s { cursor: pointer; border-radius: 4px; transition: background-color .15s; outline: 0; }
.drm__s:hover, .drm__s:focus-visible { background: rgba(42, 111, 176, .12); }
.hl-y { --hl: rgba(250, 204, 21, .38); --hlb: #EAB308; } .hl-g { --hl: rgba(74, 222, 128, .32); --hlb: #22A35A; } .hl-b { --hl: rgba(96, 165, 250, .32); --hlb: #3B82F6; } .hl-p { --hl: rgba(244, 114, 182, .3); --hlb: #DB2777; }
.drm__s.is-hl { background: var(--hl); }
.drm__ov { font-size: 12px; color: var(--wm); }
.drm__cols { display: inline-flex; gap: 6px; margin-left: auto; }
.drm__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--hl) !important; box-shadow: inset 0 0 0 2px var(--hlb); }
.drm__dot.is-on { box-shadow: inset 0 0 0 2px var(--hlb), 0 0 0 2px var(--wb2), 0 0 0 4px var(--hlb); }
.drm__body { display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow-y: auto; padding: 2px; }
.drm__card, .drm__note { padding: 10px 12px; border-radius: 12px; background: var(--wb); display: flex; flex-direction: column; gap: 6px; animation: din .3s ease-out; min-width: 0; }
.drm__card b { font-size: 13px; line-height: 1.35; } .drm__card small, .drm__note small { font-size: 11.5px; color: var(--wm); }
.drm__type { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: rgba(42, 111, 176, .12); color: #2A6FB0; font-size: 10.5px; font-weight: 800; }
.drm__type.is-paper { background: rgba(107, 79, 216, .14); color: #6B4FD8; }
html[data-theme="dark"] .drm__type { color: var(--t-sky); } html[data-theme="dark"] .drm__type.is-paper { color: var(--t-lav); }
.drm__note { border-left: 4px solid var(--hlb); }
.drm__note p { font-size: 12.5px; line-height: 1.5; }
.drm__note select { height: 26px; font-size: 11.5px; margin-left: auto; }
.drm__bib { padding: 10px 12px; border-radius: 12px; background: var(--wb); font-family: Georgia, "Times New Roman", serif; font-size: 12.5px; line-height: 1.55; display: flex; flex-direction: column; gap: 8px; }
.drm__bib p { padding-left: 2em; text-indent: -2em; overflow-wrap: anywhere; }
.drm__flag { padding: 8px 10px; border-radius: 10px; background: rgba(245, 158, 11, .14); font-size: 12px; line-height: 1.4; }

.dau__doc { position: relative; padding: 16px 18px; border-radius: 10px; background: var(--wb2); font-family: Georgia, "Times New Roman", serif; font-size: 14.5px; line-height: 1.7; overflow: hidden; }
.dau__doc.is-busy { opacity: .75; }
.dau__f { background: rgba(244, 63, 94, .18); border-bottom: 2px solid #E11D48; }
.dau__scan { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(107, 79, 216, .18), transparent); animation: dscan 1.2s ease-in-out infinite; }
@keyframes dscan { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
.dau__res { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; animation: plin .3s ease-out; }
.dau__g { width: 120px; height: 120px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--wb) 76%, transparent 77%), conic-gradient(var(--gc) calc(var(--p) * 1%), var(--wb3) 0); }
.dau__g b { font-size: 26px; letter-spacing: -0.03em; } .dau__g span { font-size: 12px; font-weight: 700; color: var(--gc); }
.dau__g--lo { --gc: #1E8A55; } .dau__g--mid { --gc: #B45309; } .dau__g--hi { --gc: #E11D48; }
html[data-theme="dark"] .dau__g--lo { --gc: var(--t-mint); } html[data-theme="dark"] .dau__g--hi { --gc: var(--t-rose); }
.dau__why { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; } .dau__why b { font-size: 13.5px; }
.dau__h { margin-top: 4px; color: var(--wm); }
.dau__note { font-size: 12px; color: var(--wm); }

.dcc__live { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--wm); }
.dcc__live b { color: var(--wt); font-variant-numeric: tabular-nums; }
.dcc__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wb3); flex: none; }
.dcc__dot.is-on { background: #E11D48; animation: dblink 1s steps(1) infinite; }
.dcc__txt { min-height: 150px; max-height: 190px; overflow-y: auto; padding: 14px 16px; border-radius: 12px; background: var(--wb2); font-size: 14.5px; line-height: 1.65; }
.dcc__saved { display: flex; flex-direction: column; gap: 6px; } .dcc__saved > b { font-size: 12.5px; color: var(--wm); }
.dcc__l { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--wb2); font-size: 12.5px; animation: plin .3s ease-out; }

.dex__art { user-select: text; padding-bottom: 150px; }
.dex__s { border-radius: 4px; cursor: text; }
.dex__s.is-q { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--wb2); font-weight: 600; }
.dex__s.is-sel { background: rgba(20, 184, 166, .2); }
.dex__pill { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: #15161A !important; color: #fff !important; font-size: 12.5px; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); animation: din .2s ease-out; white-space: nowrap; }
.dex__pill[hidden], .dex__box[hidden] { display: none; }
.dex__pill svg { width: 14px !important; height: 14px !important; color: #5EEAD4; }
.dex__pill kbd { background: rgba(255, 255, 255, .16); }
.dex__box { position: absolute; z-index: 3; width: min(400px, calc(100% - 16px)); padding: 12px 14px; border-radius: 14px; background: var(--wb); color: var(--wt); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45), 0 0 0 1px var(--wl); animation: din .25s ease-out; }
.dex__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dex__h > b { font-size: 13.5px; line-height: 1.35; }
.dex__modes button { height: 24px; padding: 0 8px; font-size: 11.5px; }
.dex__box p { font-size: 13.5px; line-height: 1.55; }

/* extra pastel pairs */
.c-peach { --c: #FFE1CC; --cd: #B8561B; } .c-teal { --c: #CBF1EC; --cd: #127A70; }
html[data-theme="dark"] .c-peach { --c: rgba(255, 179, 138, .16); --cd: #FFB38A; } html[data-theme="dark"] .c-teal { --c: rgba(94, 234, 212, .14); --cd: #5EEAD4; }

@media (max-width: 980px) { .xh, .xm, .xi { grid-template-columns: 1fr; } .xpop { transform: none; max-width: 460px; } }
@media (max-width: 760px) { .dlx, .dmt, .drm { grid-template-columns: minmax(0, 1fr); } .dpn { border-left: 0; border-top: 1px solid var(--wl); } .dmt__tile { min-height: 90px; } }
@media (max-width: 640px) { .ext { padding: 22px 16px 120px; } .xplans { grid-template-columns: 1fr; } .xwin__body { min-height: 340px; } .xtab { height: 44px; padding: 0 14px 0 6px; font-size: 13.5px; } .xtab__ic { width: 30px; height: 30px; } .dgd__page { margin: 10px; padding: 16px; } .dau__res { grid-template-columns: 1fr; justify-items: start; } }
.dpn .dbtn--g, .dau .dbtn--g { background: var(--wb) !important; color: var(--wt) !important; box-shadow: inset 0 0 0 1px var(--wl); }
/* dark: the badges are a soft tint with a bright icon (app.css's dark .c-* are homegrid's bright card edges, which hid the icon here) */
html[data-theme="dark"] #ext .c-mint { --c: rgba(111, 207, 151, .16); --cd: #8FD9A8; }
html[data-theme="dark"] #ext .c-lav { --c: rgba(183, 156, 232, .18); --cd: #C9B5FF; }
html[data-theme="dark"] #ext .c-sun { --c: rgba(242, 201, 76, .16); --cd: #F2C66B; }
html[data-theme="dark"] #ext .c-sky { --c: rgba(127, 176, 232, .16); --cd: #9BC4F0; }
html[data-theme="dark"] #ext .c-rose { --c: rgba(242, 139, 160, .16); --cd: #FF9DB0; }
html[data-theme="dark"] #ext .c-peach { --c: rgba(255, 179, 138, .16); --cd: #FFB38A; }
html[data-theme="dark"] #ext .c-teal { --c: rgba(94, 234, 212, .14); --cd: #5EEAD4; }

/* LaTeXpress demo (preview only) */
.dxp { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); min-height: 440px; }
.dxp__pt { font-size: 11.5px; font-weight: 700; color: var(--wm); padding: 2px 8px; border-radius: 6px; background: var(--wb3); }
.dxp__page { max-height: 380px; overflow-y: auto; }
.dxp__page[hidden] { display: none; }
.dxp__page h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; }
.dxp__page p { margin: 0 0 10px; }
.dxp__page ul { margin: 0 0 10px; padding-left: 22px; }
.dxp__page .f-b { font-weight: 700; } .dxp__page .f-i { font-style: italic; } .dxp__page .f-u { text-decoration: underline; text-underline-offset: 2px; }
.dxp__empty { font-family: var(--font-display); }
.dxp__tbl { border-collapse: collapse; margin: 4px 0 12px; font-family: var(--font-display); font-size: 12.5px; animation: plin .3s ease-out; }
.dxp__tbl th, .dxp__tbl td { border: 1px solid var(--wl); padding: 4px 12px; text-align: left; }
.dxp__tbl th { background: var(--wb2); }
.dlx__eq.is-typing { font-family: var(--font-mono); font-size: 12px; outline: 1.5px solid #6B4FD8; }
.dxp__caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: #2A6FB0; animation: dblink 1.05s steps(1) infinite; }
.dxp__tag { padding: 2px 8px; border-radius: 999px; background: rgba(245, 158, 11, .16); color: #A16207; font-size: 10.5px; font-weight: 800; }
html[data-theme="dark"] .dxp__tag { color: var(--t-sun); }
.dxp__setup, .dxp__run { display: flex; flex-direction: column; gap: 10px; }
.dxp__setup[hidden], .dxp__run[hidden] { display: none; }
.dxp__f { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12.5px; color: var(--wm); }
.dxp__f select:disabled { opacity: 1; color: var(--wt); }
.dxp__note { font-size: 11.5px; color: var(--wm); }
.dxp__sl { display: flex; flex-direction: column; gap: 4px; }
.dxp__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; }
.dxp__row output { font-variant-numeric: tabular-nums; font-weight: 700; }
.dxp__sl input[type="range"] { width: 100%; accent-color: #6B4FD8; }
.dxp__warn { padding: 6px 10px; border-radius: 8px; background: rgba(245, 158, 11, .16); font-size: 12px; line-height: 1.4; }
.dxp__warn[hidden] { display: none; }
.dxp__bd { padding: 8px 10px; border-radius: 10px; background: var(--wb); display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--wm); }
.dxp__bd div { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.dxp__bd .is-total { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--wl); color: var(--wt); font-weight: 700; }
.dxp__top { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; }
.dxp__ring { position: relative; width: 110px; height: 110px; }
.dxp__ring svg { width: 110px !important; height: 110px !important; transform: rotate(-90deg); }
.dxp__ring circle { fill: none; stroke: var(--wb3); stroke-width: 10; }
.dxp__ring circle + circle { stroke: #6B4FD8; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .3s; }
.dxp__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dxp__stats { display: flex; flex-direction: column; font-size: 12px; color: var(--wm); min-width: 0; }
.dxp__stats b { font-size: 20px; color: var(--wt); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dxp__stats small { font-size: 11.5px; margin-bottom: 6px; }
.dxp__words { font-size: 12.5px; color: var(--wm); }
.xm__local { padding: 10px 12px; border-radius: 12px; background: rgba(245, 158, 11, .14); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 760px) { .dxp { grid-template-columns: minmax(0, 1fr); } .dxp__page { max-height: 300px; } }

/* Meet demo: browser tabs + a Google Doc that looks like one */
.dbt button { display: inline-flex; align-items: center; gap: 6px; max-width: 46%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dbt button svg { width: 13px !important; height: 13px !important; flex: none; }
.dbt button[data-bt="doc"] svg { color: #4285F4; } .dbt button[data-bt="meet"] svg { color: #1E8E3E; }
.dmt__foot { display: flex; flex-direction: column; gap: 6px; }
.dmt__status { min-height: 16px; font-size: 11.5px; color: var(--wm); text-align: center; }
.gdx { position: relative; display: flex; flex-direction: column; height: 440px; background: #F9FBFD; color: #1F1F1F; font-family: Arial, Helvetica, sans-serif; }
.gdx[hidden] { display: none; }
html[data-theme="dark"] .gdx { background: var(--wb2); color: var(--wt); }
.gdx__dbg { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #E8F0FE; color: #1F1F1F; font-size: 12px; animation: din .2s ease-out; }
.gdx__dbg[hidden] { display: none; }
.gdx__dbg svg { width: 14px !important; height: 14px !important; color: #1A73E8; }
.gdx__dbg span { flex: 1; min-width: 0; }
.gdx__dbg button { padding: 3px 10px; border-radius: 6px; color: #1A73E8; font-weight: 700; font-size: 12px; }
.gdx__top { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; }
.gdx__ic { width: 30px; height: 36px; border-radius: 3px; background: #4285F4; color: #fff; display: grid; place-items: center; flex: none; }
.gdx__ic svg { width: 18px !important; height: 18px !important; }
.gdx__tt { flex: 1; min-width: 0; }
.gdx__tt b { display: block; font-size: 15px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gdx__menu { display: flex; gap: 10px; font-size: 12.5px; overflow: hidden; white-space: nowrap; }
.gdx__share { padding: 7px 14px; border-radius: 999px; background: #C2E7FF; color: #001D35; font-size: 13px; font-weight: 600; }
.gdx__tools { display: flex; align-items: center; gap: 10px; margin: 4px 10px 0; padding: 5px 12px; border-radius: 999px; background: #EDF2FA; font-size: 12px; color: #444746; overflow: hidden; white-space: nowrap; }
html[data-theme="dark"] .gdx__tools { background: var(--wb3); color: var(--wm); }
html[data-theme="dark"] .gdx__share { background: rgba(194, 231, 255, .18); color: var(--t-sky); }
.gdx__tools i { width: 14px; height: 10px; border-radius: 2px; background: rgba(127, 127, 127, .3); }
.gdx__tools span { padding-left: 10px; border-left: 1px solid rgba(127, 127, 127, .3); }
.gdx__tools b, .gdx__tools em, .gdx__tools u { font-size: 13px; padding: 0 2px; }
.gdx__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.gdx__side { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.gdx__side > span { padding: 0 10px 6px; font-size: 11.5px; font-weight: 700; color: #5F6368; }
html[data-theme="dark"] .gdx__side > span { color: var(--wm); }
.gdx__side button { text-align: left; padding: 7px 10px; border-radius: 999px; font-size: 12.5px; }
.gdx__side button:hover { background: rgba(127, 127, 127, .1); }
.gdx__side button.is-on { background: #D3E3FD; color: #041E49; font-weight: 700; }
html[data-theme="dark"] .gdx__side button.is-on { background: rgba(138, 180, 248, .2); color: var(--t-sky); }
.gdx__canvas { overflow-y: auto; padding: 14px 16px 18px; scroll-behavior: smooth; }
.gdx__page { min-height: 100%; padding: 28px 34px; background: #fff; box-shadow: 0 1px 3px rgba(60, 64, 67, .3); font-size: 13px; line-height: 1.5; }
html[data-theme="dark"] .gdx__page { background: var(--wb); }
.gdx__page h1 { font-size: 22px; font-weight: 400; margin: 0 0 2px; }
.gdx__sub { margin: 0 0 14px !important; font-size: 11.5px; color: #5F6368; }
.gdx__page p { margin: 0 0 10px; }
.gdx__ts { font-size: 11px; color: #5F6368; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .gdx__sub, html[data-theme="dark"] .gdx__ts, html[data-theme="dark"] .gdx__muted { color: var(--wm); }
.gdx__sys i { color: #5F6368; }
.gdx__muted { color: #5F6368; }
.gdx__page .is-new { animation: gdxnew 2.4s ease-out; border-radius: 3px; }
@keyframes gdxnew { 0%, 40% { background: rgba(251, 188, 4, .35); } 100% { background: transparent; } }
.gdx__tbl { border-collapse: collapse; margin: 4px 0 10px; font-size: 12.5px; }
.gdx__tbl th, .gdx__tbl td { border: 1px solid rgba(127, 127, 127, .35); padding: 5px 12px; text-align: left; }
@media (max-width: 760px) { .gdx { height: 520px; } .gdx__main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .gdx__side { flex-direction: row; flex-wrap: wrap; padding: 8px 10px 0; } .gdx__side > span { display: none; } .gdx__page { padding: 20px 18px; } .gdx__menu span:nth-child(n+5) { display: none; } .dbt button { max-width: 50%; } }
.dbl { min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--wm); font-size: 14px; }
.dbl svg { width: 34px !important; height: 34px !important; opacity: .6; }
.dmt[hidden] { display: none; }

/* the hero launcher: working tools jump to their demo; coming-soon tools are listed, dimmed */
.xpop__row { width: 100%; text-align: left; color: inherit; }
button.xpop__row { cursor: pointer; }
.xpop__row.is-on { background: rgba(255, 255, 255, .1); }
.xpop__t em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpop__go { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .85); transition: background-color .15s; }
.xpop__go svg { width: 13px !important; height: 13px !important; }
.xpop__row:hover .xpop__go, .xpop__row.is-on .xpop__go { background: #fff; color: #0E0E10; }
.xpop__row:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.xpop__soon { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.xpop__h { display: block; padding: 0 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .5); }
.xpop__row.is-soon { cursor: default; padding-top: 7px; padding-bottom: 7px; }
.xpop__row.is-soon:hover { background: none; }
.xpop__row.is-soon .xpop__ic { width: 32px; height: 32px; border-radius: 10px; opacity: .55; }
.xpop__row.is-soon .xpop__t b { font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.xpop__pill { flex: none; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.xh > * { min-width: 0; } .xpop { max-width: 100%; } .xpop__row { min-width: 0; }

.dlx__eq { overflow: visible; max-width: none; } /* overflow made the box scroll, showing scrollbar arrows beside the equation */

@keyframes plin { from { opacity: 0; transform: translateY(4px); } }
/* ---------- IA Formatter demo (2026-10-28: kept simple, laid out like LaTeXport's) ---------- */
.dfm .dgd__page h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.35; }
.dfm .dgd__page h4 { margin: 12px 0 4px; font-size: 15.5px; }
.dfm .dgd__page p { margin: 0 0 10px; }
.dfm__anon { font-size: 12.5px; color: var(--wm); }
.dfm__fake { font-weight: 700; }
.dfm__refs { font-size: 13px; }
.dfm [data-k].is-flag { background: rgba(229, 72, 77, .14); box-shadow: 0 2px 0 #E5484D; border-radius: 3px; }
.dfm [data-k].is-pulse { animation: dfmpulse 1.4s ease-out; }
@keyframes dfmpulse { 0%, 30% { background: rgba(251, 188, 4, .45); } }
.dfm__for { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--wb); border: 1px solid var(--wl); font-size: 12.5px; font-weight: 700; }
.dfm__for span:last-child { color: var(--wm); font-weight: 600; }
.dfm__lead { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--wm); }
.dfm__go { width: 100%; }
.dfm__sum { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; }
.dfm__list { display: flex; flex-direction: column; gap: 6px; }
.dfm__it { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--wb); border: 1px solid var(--wl); cursor: pointer; animation: plin .3s ease-out; }
.dfm__it > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.dfm__it small { color: var(--wm); font-size: 11.5px; }
.dfm__it em { flex: none; font-style: normal; font-size: 11px; font-weight: 700; color: var(--wm); }
@media (prefers-reduced-motion: reduce) { .dfm [data-k].is-pulse, .dfm__it { animation: none; } }

/* coming soon (ext.js SOON) */
.xsoon { max-width: 760px; margin: 0 auto; padding: 90px 20px 110px; text-align: center; }
.xsoon__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--card, #fff); box-shadow: inset 0 0 0 1px rgba(227, 114, 57, .3); color: var(--orange, #E37239); font-weight: 800; font-size: 14px; }
.xsoon__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange, #E37239); animation: xsoon-ping 1.8s ease-out infinite; }
@keyframes xsoon-ping { 0% { box-shadow: 0 0 0 0 rgba(227, 114, 57, .5); } 100% { box-shadow: 0 0 0 10px rgba(227, 114, 57, 0); } }
.xsoon h1 { margin: 22px 0 14px; font-size: clamp(42px, 6.5vw, 80px); font-weight: 900; letter-spacing: -.04em; line-height: 1.02; color: var(--paper); }
.xsoon p { margin: 0 auto; max-width: 600px; font-size: 18px; line-height: 1.55; color: var(--muted); }
.xsoon__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 34px 0; }
.xsoon__tools span { padding: 10px 18px; border-radius: 999px; background: var(--card, #fff); box-shadow: inset 0 0 0 1px var(--line, rgba(0, 0, 0, .08)), 0 10px 24px -20px rgba(20, 20, 40, .5); font-weight: 700; color: var(--paper); opacity: 0; transform: translateY(10px) scale(.92); animation: xsoon-in .6s cubic-bezier(.32, .72, 0, 1) forwards; animation-delay: calc(.2s + var(--i) * 90ms); }
@keyframes xsoon-in { to { opacity: 1; transform: none; } }
.xsoon__go { display: inline-flex; padding: 14px 24px; border-radius: 16px; background: #121318; color: #fff !important; text-decoration: none; font-weight: 800; }
html[data-theme="dark"] .xsoon__go { background: var(--orange, #E37239); }
@media (prefers-reduced-motion: reduce) { .xsoon__tools span { animation: none; opacity: 1; transform: none; } .xsoon__badge i { animation: none; } }