/* language switcher (nav) + suggestion toast */
.ml-lang { position: relative; flex: none; }
.ml-lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid #25242b; background: transparent; color: #ecebf2; font: 600 13px/1 "Geist", system-ui, sans-serif; letter-spacing: .02em; cursor: pointer; transition: border-color .2s, background .2s; }
.ml-lang-btn:hover, .ml-lang-btn[aria-expanded="true"] { border-color: #3a3846; background: rgba(255,255,255,.05); }
.ml-lang-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ml-lang-menu { position: absolute; z-index: 80; right: 0; top: calc(100% + 10px); width: 260px; max-height: min(70vh, 560px); overflow: auto; padding: 6px; border-radius: 16px; background: #131317; border: 1px solid #2a2932; box-shadow: 0 30px 70px -20px rgba(0,0,0,.9); animation: mlPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes mlPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.ml-lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #d9d7e1; text-decoration: none; font: 500 15px/1.2 system-ui, sans-serif; outline: none; transition: background .15s, color .15s; }
.ml-lang-menu a:hover, .ml-lang-menu a:focus-visible { background: rgba(255,255,255,.06); color: #fff; }
.ml-lang-menu a em { font: 600 11px/1 "Geist Mono", ui-monospace, monospace; font-style: normal; color: #6c6a76; }
.ml-lang-menu a[aria-current] { color: #fff; background: rgba(157,140,255,.12); }
.ml-lang-menu a[aria-current] em { color: #b6a9ff; }
.ml-lang-hint { position: fixed; z-index: 90; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: min(440px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-radius: 18px; background: rgba(19,19,23,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid #2c2b35; box-shadow: 0 30px 70px -20px #000; color: #ecebf2; transform: translateY(140%); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.ml-lang-hint.on { transform: none; }
.ml-lh-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(157,140,255,.14); color: #b6a9ff; }
.ml-lh-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ml-lang-hint p { flex: 1 1 200px; margin: 0; font: 500 14.5px/1.4 system-ui, sans-serif; }
.ml-lh-go { padding: 9px 14px; border-radius: 999px; background: linear-gradient(95deg, #b6a9ff, #9d8cff 35%, #ff9f6e 75%, #ffb547); color: #0b0b0d; font: 700 14px/1 system-ui, sans-serif; text-decoration: none; }
.ml-lh-x { padding: 9px 12px; border: 0; border-radius: 999px; background: transparent; color: #a3a1ae; font: 500 14px/1 system-ui, sans-serif; cursor: pointer; }
.ml-lh-x:hover { color: #fff; }
/* right-to-left: the page mirrors, the plugin replicas and drawings don't */
[dir="rtl"] .comp, [dir="rtl"] .hubp, [dir="rtl"] .tile-art, [dir="rtl"] .pro-demo, [dir="rtl"] .hero-demo, [dir="rtl"] .v2-tw, [dir="rtl"] .scene-wrap,
[dir="rtl"] .nf-comp, [dir="rtl"] .ribbon-wrap, [dir="rtl"] .v2-ribbon-wrap, [dir="rtl"] .ml-lang-menu a em, [dir="rtl"] .cf-in, [dir="rtl"] .cf-dd-btn { direction: ltr; }
[dir="rtl"] .ml-lang-menu { right: auto; left: 0; }
[dir="rtl"] .ml-lang-menu a { direction: rtl; }
@media (max-width: 640px) {
  .ml-lang-btn { width: 38px; padding: 0; justify-content: center; } .ml-lang-btn span { display: none; }
  .ml-lang-menu { position: fixed; left: 16px; right: 16px; top: 72px; width: auto; }
}
/* long words in other languages never push the page sideways */
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
h1 .w, h2 .w, h2 .split .w { max-width: 100%; overflow-wrap: anywhere; }
/* translated headlines are longer than the English ones: let them wrap and size them down a little */
html:not([lang="en"]) .hero h1 { font-size: clamp(38px, 4.5vw, 66px); }
html:not([lang="en"]) .hero h1 .h1-line { white-space: normal; }
html:not([lang="en"]).v2 .hero h1 { font-size: clamp(40px, 4.6vw, 70px); }
html[lang="ja"] .hero h1, html[lang="zh-Hans"] .hero h1, html[lang="ko"] .hero h1 { letter-spacing: -.01em; line-height: 1.1; }
html:not([lang="en"]) .nav-links a { white-space: nowrap; }
@media (max-width: 1240px) { html:not([lang="en"]).v2 .v2-nav .nav-links { display: none; } html:not([lang="en"]).v2 .v2-nav .ml-lang { margin-left: auto; } }
@media (max-width: 1180px) { html:not([lang="en"]) .nav-in .nav-links { gap: 18px; } }
html[lang="ar"] h1, html[lang="ar"] h2 { line-height: 1.28; letter-spacing: 0; }
html[lang="hi"] h1, html[lang="hi"] h2 { line-height: 1.22; letter-spacing: 0; }
html[lang="ar"] .hero h1 .h1-line, html[lang="hi"] .hero h1 .h1-line { padding-bottom: .15em; }