/* Dev Wiki hover previews (.x-dev-*) */
.x-dev-win, .x-dev-ed { width: 254px; background: #0b0b0e; border: 1px solid #33333b; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.5); font: 9.5px/13px var(--mono); color: var(--text-2); }
.x-dev-bar { display: flex; align-items: center; gap: 8px; height: 19px; padding: 0 8px; background: #1a1a1f; border-bottom: 1px solid #26262c; }
.x-dev-dots { display: flex; gap: 4px; }
.x-dev-dots i { width: 6px; height: 6px; border-radius: 50%; background: #3a3a44; }
.x-dev-dots i:nth-child(1) { background: #5a3a3a; } .x-dev-dots i:nth-child(2) { background: #5a533a; } .x-dev-dots i:nth-child(3) { background: #3a5a3f; }
.x-dev-ttl { flex: 1; text-align: center; font-size: 9px; color: var(--muted); margin-right: 26px; }
.x-dev-key { position: absolute; right: 8px; display: flex; gap: 2px; align-items: center; }
.x-dev-win { position: relative; }
.x-dev-key kbd, .x-dev-keys kbd { font: 600 8px/1 var(--mono); color: var(--key); background: var(--key-soft); border: 1px solid rgba(198,255,61,.35); border-bottom-width: 2px; border-radius: 3px; padding: 2px 4px; }
.x-dev-key em, .x-dev-keys em { font-style: normal; color: var(--muted); font-size: 8px; }
.x-dev-key kbd { animation: x-dev-kp 2.6s ease-in-out infinite; }
@keyframes x-dev-kp { 0%, 20%, 100% { transform: none; } 30%, 45% { transform: translateY(1px); background: rgba(198,255,61,.4); } }
.x-dev-body { padding: 7px 9px 8px; height: 105px; overflow: hidden; word-break: break-word; }
.x-dev-ln, .x-dev-pl { white-space: pre-wrap; }
.x-dev-ln { color: var(--text-2); min-height: 13px; }
.x-dev-ln.dim, .dim { color: var(--muted); } .x-dev-ln.err { color: #ff8a80; } .x-dev-ln.ok { color: var(--key); }
.x-dev-ln b, .x-dev-pl b { font-weight: 600; color: var(--key); }
.x-dev-out { opacity: 0; transform: translateY(2px); transition: opacity .2s, transform .2s; }
.x-dev-out.on { opacity: 1; transform: none; }
.x-dev-pre { transition: opacity .2s, max-height .25s; max-height: 14px; }
.x-dev-pre.gone { opacity: 0; max-height: 0; min-height: 0; }
.x-dev-p { color: var(--key); margin-right: 0; }
.x-dev-pl { color: var(--text); }
.x-dev-cmd.flash { color: var(--key); }
.x-dev-cur { display: inline-block; width: 5px; height: 10px; margin-left: 1px; vertical-align: -1px; background: var(--text-2); animation: x-dev-bl 1s steps(1) infinite; }
@keyframes x-dev-bl { 50% { opacity: 0; } }
.x-dev-pl.box { border: 1px solid #33333b; border-radius: 4px; padding: 2px 6px; margin-bottom: 5px; }
.x-dev-bu { color: var(--key); }
.x-dev-win.cl { border-color: #4a3a2e; }
.x-dev-win.cl .x-dev-bar { background: #1c1815; }

.x-dev-modes { position: relative; height: 28px; margin-top: -2px; }
.x-dev-mode { position: absolute; left: 0; top: 0; color: var(--key); opacity: 0; animation: x-dev-md 6s infinite; }
.x-dev-mode small { display: block; color: var(--muted); }
.x-dev-mode.m2 { animation-delay: 2s; } .x-dev-mode.m3 { animation-delay: 4s; }
.x-dev-mode.m1 { color: var(--text-2); }
@keyframes x-dev-md { 0% { opacity: 0; } 4%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }

/* ── Editors ── */
.x-dev-ed { position: relative; height: 140px; }
.x-dev-em { position: relative; display: flex; height: 90px; overflow: hidden; background: #0e0e11; }
.x-dev-side { width: 62px; flex: none; background: #121216; border-right: 1px solid #1f1f25; padding: 5px 6px; overflow: hidden; }
.x-dev-fl { display: flex; flex-direction: column; gap: 3px; font-size: 8px; color: var(--muted); white-space: nowrap; }
.x-dev-fl b { color: var(--text-2); font-weight: 600; } .x-dev-fl span { padding-left: 6px; } .x-dev-fl .a { color: var(--key); }
.x-dev-code { flex: 1; padding: 6px 4px; position: relative; min-width: 0; overflow: hidden; }
.x-dev-cd { display: flex; align-items: center; gap: 6px; height: 14px; color: var(--text); white-space: pre; font-size: 9px; position: relative; }
.x-dev-cd > s { text-decoration: none; width: 10px; text-align: right; color: #4a4a52; font-size: 8px; flex: none; }
.x-dev-cd u { display: block; height: 5px; border-radius: 2px; background: #2a2a31; }
.x-dev-keys { height: 30px; display: flex; align-items: center; justify-content: center; gap: 3px; background: #121216; border-top: 1px solid #1f1f25; }
.x-dev-keys kbd { font-size: 10px; padding: 3px 6px; }
.x-dev-keys span { margin-left: 8px; font-size: 8.5px; color: var(--muted); }
.x-dev-keys kbd { animation: x-dev-kp 3.4s ease-in-out infinite; }

.x-dev-ov { position: absolute; left: 50%; top: 6px; width: 150px; margin-left: -75px; background: #1c1c22; border: 1px solid #3a3a44; border-radius: 5px; padding: 3px; box-shadow: 0 8px 20px rgba(0,0,0,.6); animation: x-dev-ovp 3.6s ease-in-out infinite; transform-origin: top; }
@keyframes x-dev-ovp { 0%, 8% { opacity: 0; transform: translateY(-6px) scale(.97); } 16%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.x-dev-in { background: #0b0b0e; border: 1px solid #3a3a44; border-radius: 3px; padding: 2px 5px; margin-bottom: 3px; color: var(--text); height: 15px; font-size: 9px; display: flex; }
.x-dev-ty { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 1px solid var(--key); animation: x-dev-tp 3.6s steps(6) infinite; }
@keyframes x-dev-tp { 0%, 18% { width: 0; } 45%, 100% { width: 3.7em; } }
.x-dev-r { padding: 2px 5px; border-radius: 3px; font-size: 8.5px; color: var(--text-2); display: flex; justify-content: space-between; white-space: nowrap; }
.x-dev-r small { color: var(--muted); font-size: 7.5px; }
.x-dev-r.sel { background: var(--key-soft); color: var(--key); }
.x-dev-sp { display: flex; flex-direction: column; gap: 2px; animation: x-dev-fadeIn 3.6s infinite; }
.x-dev-sp .x-dev-in { width: auto; font-size: 8px; padding: 2px 3px; }
.x-dev-sp .x-dev-r { padding: 1px 2px; font-size: 7.5px; }
@keyframes x-dev-fadeIn { 0%, 6% { opacity: 0; } 18%, 100% { opacity: 1; } }
.x-dev-srch .x-dev-ty { animation-name: x-dev-tp5; animation-timing-function: steps(5); }
.x-dev-srch .x-dev-ty { width: 0; }
@keyframes x-dev-tp5 { 0%, 18% { width: 0; } 45%, 100% { width: 3.1em; } }
.x-dev-sbar .x-dev-side { animation: x-dev-sb 3.4s ease-in-out infinite; }
@keyframes x-dev-sb { 0%, 18% { width: 62px; padding: 5px 6px; opacity: 1; } 40%, 70% { width: 0; padding: 5px 0; opacity: 0; border-width: 0; } 92%, 100% { width: 62px; padding: 5px 6px; opacity: 1; } }

.x-dev-d { color: var(--key); }
.x-dev-u { text-decoration: underline; text-decoration-color: var(--key); text-underline-offset: 2px; }
.x-dev-hi { position: absolute; left: 0; right: 0; top: 6px; height: 14px; background: rgba(198,255,61,.12); border-left: 2px solid var(--key); animation: x-dev-hi 3.6s ease-in-out infinite; }
@keyframes x-dev-hi { 0%, 25% { transform: translateY(56px); opacity: 1; } 55%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.x-dev-arrow { position: absolute; right: 12px; top: 40px; color: var(--key); font: 700 14px var(--mono); font-style: normal; animation: x-dev-ar 3.6s ease-in-out infinite; }
@keyframes x-dev-ar { 0%, 25% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateY(-14px); } }

.x-dev-w { position: relative; display: inline-block; min-width: 20px; }
.x-dev-w s { text-decoration: none; display: inline-block; }
.x-dev-w .b { position: absolute; left: 0; top: 0; color: var(--key); opacity: 0; }
.x-dev-w .r { animation: x-dev-wr 4.2s infinite; }
.x-dev-w .b { animation: x-dev-wb 4.2s infinite; }
.x-dev-w::before { content: ""; position: absolute; inset: -1px -1px; background: rgba(120,160,255,.32); border-radius: 2px; opacity: 0; animation: x-dev-s1 4.2s infinite; }
.x-dev-w.w2::before { animation-name: x-dev-s2; } .x-dev-w.w3::before { animation-name: x-dev-s3; }
@keyframes x-dev-s1 { 0%, 10% { opacity: 0; } 14%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes x-dev-s2 { 0%, 28% { opacity: 0; } 32%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes x-dev-s3 { 0%, 46% { opacity: 0; } 50%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes x-dev-wr { 0%, 68% { opacity: 1; } 72%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes x-dev-wb { 0%, 68% { opacity: 0; } 72%, 96% { opacity: 1; } 100% { opacity: 0; } }

.x-dev-qt { color: var(--key); font-weight: 400 !important; opacity: 0; animation: x-dev-q 4s infinite; }
@keyframes x-dev-q { 0%, 55% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }
.x-dev-ca { position: absolute; left: 20px; top: 2px; width: 1px; height: 10px; background: var(--key); animation: x-dev-bl 1s steps(1) infinite; }
.x-dev-curs .x-dev-cd { padding-left: 4px; }

.x-dev-cmt .x-dev-sl { color: #6c6c74; font-weight: 400; display: inline-block; overflow: hidden; width: 0; opacity: 0; animation: x-dev-sl 3.6s ease-in-out infinite; }
.x-dev-cmt .x-dev-cd.c { animation: x-dev-cc 3.6s ease-in-out infinite; }
@keyframes x-dev-sl { 0%, 25% { width: 0; opacity: 0; } 40%, 80% { width: 14px; opacity: 1; } 95%, 100% { width: 0; opacity: 0; } }
@keyframes x-dev-cc { 0%, 25% { color: var(--text); background: rgba(120,160,255,.14); } 40%, 80% { color: #6c6c74; background: rgba(120,160,255,.14); } 95%, 100% { color: var(--text); background: rgba(120,160,255,.14); } }

.x-dev-st { position: absolute; left: 4px; top: 6px; right: 4px; }
.x-dev-st.a { animation: x-dev-sa 3.6s infinite; }
.x-dev-st.b { animation: x-dev-sbb 3.6s infinite; }
@keyframes x-dev-sa { 0%, 35% { opacity: 1; } 45%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes x-dev-sbb { 0%, 35% { opacity: 0; } 45%, 90% { opacity: 1; color: var(--key); } 100% { opacity: 0; } }
.x-dev-fmt .x-dev-st.b .x-dev-cd, .x-dev-pret .x-dev-st.b .x-dev-cd { color: var(--key); }
.x-dev-badge { position: absolute; right: 6px; bottom: 5px; font-size: 8px; color: var(--key); background: var(--key-soft); border-radius: 3px; padding: 1px 5px; animation: x-dev-sbb 3.6s infinite; }

.x-dev-pan { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: #0b0b0e; border-top: 1px solid #3a3a44; padding: 3px 8px; font-size: 8.5px; line-height: 11px; color: var(--text); animation: x-dev-pn 3.6s ease-in-out infinite; }
.x-dev-ph { color: var(--muted); font-size: 7.5px; letter-spacing: .08em; margin-bottom: 1px; }
@keyframes x-dev-pn { 0%, 15% { transform: translateY(100%); } 32%, 80% { transform: none; } 95%, 100% { transform: translateY(100%); } }

.x-dev-sq { text-decoration: underline wavy #ff5f56; text-underline-offset: 3px; }
.x-dev-tip { position: absolute; left: 36px; top: 40px; max-width: 150px; background: #1c1c22; border: 1px solid #3a3a44; border-radius: 4px; padding: 3px 5px; font-size: 8px; line-height: 10px; color: var(--text); white-space: normal; animation: x-dev-tp2 3.6s infinite; }
.x-dev-tip small { display: block; color: var(--muted); }
@keyframes x-dev-tp2 { 0%, 25% { opacity: 0; transform: translateY(3px); } 38%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.x-dev-live .x-dev-code { flex: none; width: 120px; }
.x-dev-br { position: absolute; right: 6px; top: 8px; bottom: 8px; width: 112px; border: 1px solid #3a3a44; border-radius: 5px; background: #111; overflow: hidden; }
.x-dev-bu2 { height: 11px; background: #1c1c22; display: flex; align-items: center; gap: 3px; padding: 0 4px; }
.x-dev-bu2 i { height: 4px; border-radius: 2px; background: #33333b; width: 4px; } .x-dev-bu2 i + i { width: 50px; }
.x-dev-pg { height: 100%; display: grid; place-items: center; font: 700 14px var(--sans); color: #333; background: #ececec; animation: x-dev-pgc 3.8s infinite; }
@keyframes x-dev-pgc { 0%, 40% { background: #ececec; color: #333; } 52%, 90% { background: #111; color: var(--key); } 100% { background: #ececec; color: #333; } }
.x-dev-lc .r { animation: x-dev-lcr 3.8s infinite; display: inline-block; }
.x-dev-lc { position: relative; } .x-dev-lc .b { position: absolute; left: 0; color: var(--key); animation: x-dev-lcb 3.8s infinite; text-decoration: none; opacity: 0; }
.x-dev-lc .r { text-decoration: none; }
@keyframes x-dev-lcr { 0%, 38% { opacity: 1; } 42%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes x-dev-lcb { 0%, 38% { opacity: 0; } 42%, 96% { opacity: 1; } 100% { opacity: 0; } }
.x-dev-live .x-dev-lc .r, .x-dev-live .x-dev-lc .b { animation-duration: 3.8s; }

.x-dev-cp { position: absolute; right: 0; top: 0; bottom: 0; width: 128px; background: #131317; border-left: 1px solid #26262c; padding: 5px; font-size: 8px; line-height: 10px; opacity: 0; display: flex; flex-direction: column; gap: 4px; }
.x-dev-cp.chat { animation: x-dev-c1 6s infinite; } .x-dev-cp.comp { animation: x-dev-c2 6s infinite; }
@keyframes x-dev-c1 { 0%, 4% { opacity: 0; transform: translateX(10px); } 10%, 44% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@keyframes x-dev-c2 { 0%, 50% { opacity: 0; transform: translateX(10px); } 56%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.x-dev-h { color: var(--key); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; }
.x-dev-m { background: #1d1d23; border-radius: 4px; padding: 3px 5px; color: var(--text-2); white-space: normal; }
.x-dev-m.u { background: #26262c; color: var(--text); }
.x-dev-m.df { font-size: 7.5px; display: flex; flex-direction: column; background: #0b0b0e; }
.x-dev-m.df .mn { color: #ff8a80; } .x-dev-m.df .pl { color: var(--key); }
.x-dev-sw { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 3px; }
.x-dev-sw kbd { font: 600 8px var(--mono); color: var(--muted); border: 1px solid #33333b; border-radius: 3px; padding: 1px 4px; }
.x-dev-cur .x-dev-keys kbd { animation: none; }