*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Segoe UI,Arial,sans-serif}button,a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{cursor:default;opacity:.65}button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid #83c7ff;outline-offset:5px}body{--bg:#080f1d;--panel:#13243d;--line:#ffffff18;--text:#f0f5ff;--muted:#a0afc5;--card:#ffffff04;min-height:100vh;background:var(--bg);color:var(--text);overflow-x:clip;overflow-y:visible;position:relative}.wrap{max-width:1200px;margin:0 auto;padding-left:40px;padding-right:40px;position:relative;z-index:1}.topbar{height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:14px;font-size:23px;font-weight:750;letter-spacing:-.8px}.brand>span>small{display:block;letter-spacing:.9px;font-size:10px;color:var(--muted);text-transform:uppercase;margin-top:4px;font-weight:400}.brand b{font-weight:400;color:#78b7f8}.logo{position:relative;display:grid;place-items:center;width:43px;height:47px;border:1px solid #83bffa88;border-radius:13px;background:linear-gradient(145deg,#327cc8,#15345d);font-size:29px;color:white;box-shadow:0 0 25px #3989d718}.logo small{position:absolute;right:-6px;bottom:-4px;border:1px solid #f4d7a7;background:#d9bb83;color:#1b304b;font-size:10px;letter-spacing:.3px;padding:2px 5px;border-radius:5px}.topbar nav{display:flex;gap:28px;font-size:13px;color:var(--muted)}.topbar nav a:hover,.text-link:hover{color:#8cc7ff}.header-actions{display:flex;align-items:center;gap:15px}.theme{display:grid;place-items:center;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:50%;width:38px;height:38px}.button{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:51px;border:1px solid #7ca4cf44;border-radius:13px;padding:14px 22px;background:linear-gradient(125deg,#8cc8ff10,#ffffff05);color:var(--text);font-size:14px;font-weight:600;transition:box-shadow .25s,transform .25s,border-color .25s}.button:hover:not(:disabled){transform:translateY(-2px);border-color:#8dc9ff99;box-shadow:0 8px 34px #2b87ea24}.button.primary{background:linear-gradient(125deg,#2e86e6,#225dbd);border-color:#74b8ff;color:#fff;box-shadow:inset 0 1px 0 #ffffff2b,0 10px 35px #276bbd25}.button.compact{padding:10px 16px;font-size:12px;min-height:39px}.ambient{position:absolute;pointer-events:none;filter:blur(100px);border-radius:50%;width:640px;height:500px;right:-100px;top:110px;background:#18478042}.hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-top:83px;padding-bottom:100px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#91b9e6;display:flex;align-items:center;gap:8px}.eyebrow i{display:inline-block;width:6px;height:6px;background:#75d9b5;border-radius:50%;box-shadow:0 0 13px #75d9b599}h1{font-size:59px;line-height:1.13;letter-spacing:-2.5px;margin:23px 0 25px;font-weight:600}h1 em{font-style:normal;background:linear-gradient(100deg,#a0cfff,#67a4ed);color:transparent;background-clip:text}.lead{font-size:16px;line-height:1.85;color:var(--muted);max-width:460px;margin:0}.actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}.text-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600}.notes{display:flex;gap:20px;margin-top:26px;color:var(--muted);font-size:11px}.notes>span{display:flex;align-items:center;gap:6px}.notes svg{width:15px;height:15px;color:#80bbba}.visual{position:relative;padding-top:32px}.editor{position:relative;background:linear-gradient(140deg,#1d3453dd,#112138f0);border:1px solid #80aed942;border-radius:19px;box-shadow:0 35px 80px #0005,inset 0 1px 0 #d0e8ff0f;transform:perspective(1600px) rotateY(-6deg) rotateX(3deg);color:#e9f3ff;backdrop-filter:blur(18px)}.editor-top{height:55px;border-bottom:1px solid #ffffff0f;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#aabbd1;font-size:10px}.dots{display:flex;gap:5px}.dots i{width:7px;height:7px;border-radius:50%;background:#5f7087}.dots i:nth-child(1){background:#a87b74}.dots i:nth-child(2){background:#afa078}.dots i:nth-child(3){background:#719e8d}.editor-body{padding:32px 28px 50px;position:relative}.demo-label{font-size:8px;letter-spacing:1.5px;color:#8299b8}.editor textarea{display:block;width:100%;height:115px;padding:19px 0 0;font:500 24px/1.7 Segoe UI,Arial,sans-serif;color:#eaf3ff;background:transparent;border:0;resize:none}.line{height:5px;border-radius:8px;background:#b8d6fc11;width:84%;margin-top:19px}.line.short{width:60%;margin-top:10px}.bubble{position:absolute;right:18%;top:131px;display:flex;align-items:center;gap:10px;background:linear-gradient(130deg,#286fd0ef,#163d78ee);border:1px solid #8bd2ff99;border-radius:14px;color:#fff;box-shadow:0 12px 40px #0006,0 0 24px #3487e340;padding:13px 19px;font-size:25px;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s;pointer-events:none}.bubble.show{opacity:1;transform:translateY(0)}.bubble.green{background:linear-gradient(130deg,#177667ee,#105342ee);border-color:#6edbb9}.bubble.gold{background:linear-gradient(130deg,#836227ee,#5d431cee);border-color:#e3c484}.bubble i{height:6px;width:6px;border-radius:50%;background:#adf3d6}.bubble svg{position:absolute;right:-13px;bottom:-15px;fill:#fff;stroke:#172b49;width:25px;height:25px}.editor-bottom{border-top:1px solid #ffffff0e;display:flex;align-items:center;justify-content:space-between;padding:15px 20px;gap:8px;color:#94abc8;font-size:9px}.languages{display:flex;gap:5px}.languages button{width:37px;height:30px;border-radius:7px;background:#ffffff05;border:1px solid #ffffff13;color:#9db8d9;font-size:11px}.languages button.selected{background:#3a77ba44;border-color:#7db4e6;color:#fff}.floating-note{position:relative;margin:-2px auto 0;width:max-content;max-width:95%;padding:13px 18px;display:flex;gap:9px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:11px;box-shadow:0 15px 35px #0003;color:var(--muted)}.floating-note svg{color:#cbb07b}.demo-note{text-align:center;color:var(--muted);font-size:9px;margin-top:24px;line-height:1.6}.orbit{position:absolute;border:1px solid #76b6ed13;border-radius:50%;width:600px;height:600px;top:-75px;left:-35px;pointer-events:none}.strip{display:grid;grid-template-columns:repeat(3,1fr);padding-top:34px;padding-bottom:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:30px}.strip>div{display:flex;align-items:center;gap:15px;font-weight:600;font-size:14px}.strip svg{width:22px;color:#81b7ee;flex-shrink:0}.strip small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:6px}.how{padding-top:105px;padding-bottom:105px}h2{font-weight:500;font-size:39px;letter-spacing:-1.4px;line-height:1.3;margin:17px 0 0}.steps{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:50px}.steps article{position:relative;padding-left:56px}.number{position:absolute;left:0;top:3px;font-size:13px;font-weight:600;color:#95bde9;border:1px solid var(--line);border-radius:11px;width:35px;height:35px;display:grid;place-items:center}.how h3{font-size:20px;font-weight:600;margin:0 0 14px}.how p{font-size:14px;line-height:1.9;color:var(--muted);margin:0}.steps small{display:inline-flex;align-items:center;gap:7px;color:#85b2c6;font-size:11px;margin-top:21px}.steps small svg{height:15px;width:15px}.pricing{padding-top:78px;padding-bottom:95px;border-top:1px solid var(--line)}.pricing-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px}.currencies{display:flex;gap:5px;background:var(--card);padding:5px;border:1px solid var(--line);border-radius:12px}.currencies button{border:0;border-radius:8px;padding:10px 15px;background:transparent;color:var(--muted);font-size:12px}.currencies button.selected{background:#3a77ba38;color:var(--text)}.plans{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:47px}.plan{position:relative;padding:36px;border:1px solid var(--line);border-radius:23px;background:var(--card);display:flex;flex-direction:column}.plan.pro{background:linear-gradient(135deg,#35629a15,#7589a808);border-color:#79b5f377;box-shadow:0 0 70px #377eca0b,inset 0 1px 0 #fff2}.plan-label{display:flex;align-items:center;justify-content:space-between;color:#86b6ed;font-size:10px;font-weight:700;letter-spacing:1.5px}.plan-label svg{width:23px;height:23px;color:#a5c4e6}.plan h3{font-size:22px;font-weight:500;margin:24px 0 18px}.price{font-size:39px;letter-spacing:-1.5px;font-weight:600}.price small{font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:13px}.plan p{font-size:12px;color:var(--muted);line-height:1.7;min-height:20px;margin:12px 0 24px}.plan ul{list-style:none;padding:0;margin:0 0 30px;flex:1}.plan li{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--muted);padding:10px 0}.plan li svg{width:15px;height:15px;flex-shrink:0;color:#91cbb7}.plan>small{font-size:11px;color:var(--muted);line-height:1.8;margin-top:16px;min-height:35px}.ribbon{position:absolute;right:26px;top:-12px;border:1px solid #8baecf55;border-radius:30px;background:var(--panel);color:#d0b882;font-size:8px;letter-spacing:1.2px;padding:7px 12px}.caption{font-size:11px;line-height:1.8;color:var(--muted);margin-top:24px}.payment{border:1px solid #69bd9b55;border-radius:14px;padding:20px;margin-top:25px;font-size:13px}.faq{display:grid;grid-template-columns:1fr 1.35fr;gap:80px;padding-top:75px;padding-bottom:60px;border-top:1px solid var(--line)}.faq .text-link{margin-top:26px;color:#97bee7}details{border-bottom:1px solid var(--line)}summary{font-size:15px;list-style:none;cursor:pointer;padding:22px 28px 22px 0;font-weight:600;position:relative}summary:after{content:'+';position:absolute;right:0;font-size:20px;font-weight:400;color:var(--muted)}details[open] summary:after{content:'−'}details p{font-size:13px;line-height:1.9;color:var(--muted);margin:0 25px 24px 0}.legal{padding-bottom:55px}.legal summary{font-size:12px;color:var(--muted)}footer{padding-top:35px!important;padding-bottom:40px!important;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:30px}footer .brand{font-size:16px}footer .brand>span>small{font-size:10px;letter-spacing:0;text-transform:none}footer>span,footer>a:last-child{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}section[id]{scroll-margin-top:35px}@media(max-width:1000px){.wrap{padding-left:25px;padding-right:25px}h1{font-size:48px}.hero{gap:28px}.topbar nav{gap:17px}.editor textarea{font-size:20px}.editor-bottom>span{max-width:130px}.actions{gap:15px}.steps,.faq{gap:35px}.pricing-heading h2{font-size:32px}}@media(max-width:760px){.topbar{height:88px;gap:10px}.topbar nav{display:none}.brand{font-size:20px}.logo{width:36px;height:40px;font-size:26px}.header-actions{gap:8px}.header-actions .button{font-size:11px;padding:10px}.hero{grid-template-columns:1fr;padding-top:35px;padding-bottom:55px;gap:26px}h1{font-size:46px;letter-spacing:-2px}.lead{font-size:16px;max-width:100%}.visual{max-width:530px;width:100%;margin:0 auto}.editor{transform:none}.editor textarea{font-size:24px}.editor-bottom>span{max-width:none}.strip{grid-template-columns:1fr;gap:24px;padding-top:27px;padding-bottom:27px}.strip>div{font-size:15px}.strip small{font-size:12px}.how{padding-top:65px;padding-bottom:65px}h2,.pricing-heading h2{font-size:31px;letter-spacing:-1px}.steps{grid-template-columns:1fr;margin-top:35px;gap:36px}.how h3{font-size:20px}.how p{font-size:15px}.pricing{padding-top:55px;padding-bottom:55px}.pricing-heading{display:block}.currencies{width:max-content;margin-top:25px}.plans{grid-template-columns:1fr;margin-top:27px;gap:30px}.plan{padding:28px}.plan p,.plan li{font-size:14px}.plan small,.caption{font-size:12px}.faq{grid-template-columns:1fr;padding-top:55px;padding-bottom:35px;gap:22px}summary{font-size:16px}details p{font-size:15px}footer{flex-wrap:wrap;align-items:flex-start}footer>span{display:none}footer>a:last-child{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{overflow-x:clip;overflow-y:visible}.skip,.sr-only{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.skip:focus{left:20px;top:20px;width:auto;height:auto;z-index:20;background:var(--panel);padding:15px}.theme{font-size:20px}.demo-note{font-size:11px;line-height:1.7;color:var(--muted);margin:25px 8px 0}.editor{transform:none}.editor textarea{height:91px}.editor-body{padding-bottom:24px}.demo-actions{display:flex;align-items:center;gap:18px;margin:8px 0 22px}.demo-actions .text-link{border:0;background:transparent;color:#a8c9f2;padding:10px 0}.mini-button{border:1px solid #80b9f766;border-radius:9px;background:#327dce33;color:#dcecff;padding:10px 15px;font-size:12px}.result{border-top:1px solid #a0cfff22;padding-top:20px;min-height:90px}.result small{display:block;font-size:9px;letter-spacing:1.5px;color:#8eabc9;margin-bottom:12px}.result strong{font-weight:500;font-size:25px;white-space:pre-wrap;overflow-wrap:anywhere}.bubble{top:87px;right:20px;font-size:19px;padding:9px 14px}.editor-bottom{flex-wrap:wrap;justify-content:flex-start;font-size:11px;padding:17px 22px}.editor-bottom>span{width:100%;max-width:none}.editor-bottom kbd{font:11px Segoe UI,sans-serif;color:#c8ddf7;border:1px solid #9bb9de55;padding:5px 8px;border-radius:5px;background:#9cc5ff0d}.download-note{font-size:12px;line-height:1.8;color:var(--muted);margin-top:23px}.rc-note{max-width:445px;font-size:12px;line-height:1.7;color:var(--muted);border-left:2px solid #b8955a;padding-left:13px;margin-top:18px}.strip>div{display:block}.strip b{display:block;font-size:15px;font-weight:600}.strip span{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:8px}.section{padding-top:85px;padding-bottom:85px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}.feature-grid article{border:1px solid var(--line);border-radius:19px;padding:26px;background:var(--card)}.feature-icon{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid #80bfff40;border-radius:13px;background:#3282d425;color:#93c5ff;font-size:18px;font-weight:600}.feature-grid h3{font-size:18px;font-weight:500;line-height:1.4;margin:23px 0 10px}.feature-grid p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.quickstart{display:grid;grid-template-columns:1fr 1fr;gap:55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.quickstart ol{list-style:none;padding:0;margin:0}.quickstart li{display:flex;gap:19px;align-items:baseline;margin-bottom:25px}.quickstart li>span{color:#91b9e6;font-size:12px;letter-spacing:1px}.quickstart li p{margin:0;font-size:15px;line-height:1.8;color:var(--muted)}.quickstart b{color:var(--text);font-weight:500}.quickstart code{color:#b4d8ff;font-size:15px}.currencies button[aria-pressed=true]{background:#3a77ba38;color:var(--text)}.plan ul{margin-top:25px}.plan li:before{content:'✓';color:#91cbb7}.plan>small{min-height:55px}.final-cta{margin-bottom:65px;border:1px solid #76aff455;border-radius:24px;padding-top:35px;padding-bottom:35px;display:flex;justify-content:space-between;align-items:center;gap:30px;background:#3379c210}.final-cta h2{margin:0;font-size:30px}.final-cta p{color:var(--muted);font-size:14px;line-height:1.7}footer>div{display:flex;flex-wrap:wrap;gap:20px;color:var(--muted);font-size:12px}footer>small{color:var(--muted);font-size:12px}@media(max-width:1000px){.feature-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.topbar nav{display:flex}.topbar nav a:not(:first-child){display:none}.topbar nav a{font-size:12px}.brand{font-size:19px}.brand img{width:38px;height:38px}.section{padding-top:55px;padding-bottom:55px}.feature-grid,.quickstart{grid-template-columns:1fr}.feature-grid{gap:16px}.quickstart{gap:32px}.editor textarea{font-size:23px}.feature-grid article{padding:24px}.final-cta{margin:0 20px 40px;flex-direction:column;align-items:flex-start}.topbar{gap:12px}.demo-actions{gap:14px}.demo-note{font-size:12px}}
/* LANG369 liquid glass: visible light, layered surfaces and restrained motion. */
body{background:#050c1b}.ambient{position:fixed;inset:0;width:auto;height:auto;background:none;filter:none;overflow:hidden;z-index:0}.orb{position:absolute;display:block;border-radius:50%;filter:blur(76px);opacity:.48;will-change:transform;pointer-events:none}.orb-blue{width:600px;height:560px;top:0;right:-80px;background:radial-gradient(circle,#187df2,#1655a222 65%,transparent 72%);animation:drift-blue 18s ease-in-out infinite alternate}.orb-violet{width:550px;height:550px;top:45%;left:-250px;background:radial-gradient(circle,#713dc9,#49219222 65%,transparent 72%);animation:drift-violet 23s ease-in-out infinite alternate}.orb-aqua{width:380px;height:430px;bottom:-120px;right:12%;background:radial-gradient(circle,#27d2bc88,transparent 70%);animation:drift-blue 21s ease-in-out infinite alternate-reverse}.light-grid{position:absolute;inset:0;background-image:linear-gradient(#83beff06 1px,transparent 1px),linear-gradient(90deg,#83beff06 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,#0006 25%,transparent 85%)}.topbar{position:sticky;top:12px;z-index:20;margin-top:16px;max-width:1120px;height:82px;padding:16px 24px;border:1px solid #d3eaff2b;border-radius:23px;background:linear-gradient(110deg,#5d88bb20,#0c1b3075);backdrop-filter:blur(30px) saturate(175%);-webkit-backdrop-filter:blur(30px) saturate(175%);box-shadow:inset 0 1px 0 #fff3,inset 0 -1px 0 #70aaff18,0 20px 50px #0003}.brand img{filter:drop-shadow(0 0 12px #499fff55)}.hero{padding-top:95px}.hero h1 em{filter:drop-shadow(0 2px 18px #79b3ff30)}.editor,.feature-grid article,.plan,.final-cta{position:relative;isolation:isolate;border:1px solid #b1dbff40;background:linear-gradient(130deg,#c5e8ff16,#6e9fdc08 40%,#bfddff09);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);box-shadow:inset 0 1px 0 #fff4,inset 0 -1px 0 #a8d8ff16,0 20px 65px #0003;transition:transform .25s ease,border-color .3s ease,box-shadow .3s ease}.editor{background:linear-gradient(135deg,#bedfff29,#1d416b70 50%,#aed9ff10);box-shadow:inset 0 1px 0 #fff6,inset 1px 0 0 #b9e5ff33,0 26px 80px #0005,0 0 75px #287ff51c}.editor::before,.feature-grid article::before,.plan::before,.final-cta::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(340px circle at var(--pointer-x,15%) var(--pointer-y,0%),#c3e4ff20,transparent 70%);opacity:.7;transition:opacity .3s}.feature-grid article:hover,.plan:hover{border-color:#adddffa0;box-shadow:inset 0 1px 0 #fff5,0 12px 60px #267ed42b,0 0 0 1px #83caff13;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px)}.feature-grid article:hover::before,.plan:hover::before{opacity:1}.feature-icon{background:linear-gradient(145deg,#97d3ff3a,#4599ff13);box-shadow:inset 0 1px 0 #c9eaff66,0 4px 20px #2a8cef22;border-color:#a0d9ff66}.button,.mini-button,.target-languages button{position:relative;overflow:hidden;isolation:isolate;transition:transform .22s,box-shadow .22s,border-color .22s,background .22s}.button::after,.mini-button::after{content:'';position:absolute;inset:-100% -60%;background:linear-gradient(110deg,transparent 40%,#fff5 49%,transparent 58%);transform:translateX(-70%) rotate(-9deg);pointer-events:none;transition:transform .65s ease}.button:hover:not(:disabled)::after,.mini-button:hover::after{transform:translateX(70%) rotate(-9deg)}.button.primary{background:linear-gradient(130deg,#46a9ff,#2776e3 55%,#435df0);border-color:#b3e3ffb3;box-shadow:inset 0 1px 0 #fff7,inset 0 -2px 0 #123cad66,0 7px 28px #258eff55,0 0 42px #297fff20;text-shadow:0 1px 4px #082e7099}.button.primary:hover:not(:disabled){box-shadow:inset 0 1px 0 #fff9,0 12px 38px #389cff88,0 0 65px #3b8cff44;border-color:#d8f1ff;transform:translateY(-3px)}.button:active:not(:disabled),.mini-button:active{transform:translateY(1px) scale(.985)}.button:not(.primary):hover{box-shadow:0 0 25px #68bdff45,inset 0 1px 0 #fff4;background:#8fcaff18}.mini-button{background:linear-gradient(140deg,#539aff50,#2570cb30);border-color:#afdfff88;box-shadow:inset 0 1px 0 #def3ff44,0 4px 18px #2f8be633}.mini-button:hover{box-shadow:0 0 25px #43a2ff66;border-color:#ccecff}.theme{box-shadow:inset 0 1px 0 #ffffff40,0 0 20px #478cff14;background:#7eb8ff10}.theme:hover{color:#c7ebff;box-shadow:0 0 22px #81c7ff60}.target-languages{display:flex;align-items:center;gap:7px;margin:0 0 20px}.target-languages>span{color:#a3bbd8;font-size:11px;margin-right:5px}.target-languages button{min-width:37px;padding:7px 10px;font-size:11px;border-radius:9px;border:1px solid #91c4ef35;background:#9bcbff0a;color:#a9c5e5}.target-languages button[aria-pressed=true]{background:#5db2ff32;color:#f1fbff;border-color:#98d5ffb3;box-shadow:0 0 18px #4ca9ff40,inset 0 1px 0 #fff3}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#91f5d0;box-shadow:0 0 8px #8cf0cc;margin-right:6px;animation:live-pulse 2.8s ease-in-out infinite}.result strong{display:block;transition:opacity .18s,transform .18s;text-shadow:0 2px 24px #7dc6ff25}.result.flash strong{animation:result-appear .35s ease both}.bubble{backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #fff5,0 0 28px #4eaaff66,0 12px 30px #0005}.plan.pro{background:linear-gradient(130deg,#73b8ff22,#5078cd0c);border-color:#99cfff99}.ribbon{box-shadow:0 0 20px #75baff22;background:#183755e0;backdrop-filter:blur(12px)}.rc-note{background:#cba96708;border-radius:0 10px 10px 0;padding:9px 13px}.strip{border-color:#a2ccff25}.final-cta{background:linear-gradient(115deg,#5996eb27,#267db30f);box-shadow:inset 0 1px 0 #fff4,0 0 70px #2067c225}@keyframes drift-blue{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-110px,95px,0) scale(1.15)}}@keyframes drift-violet{from{transform:translate3d(0,0,0)}to{transform:translate3d(130px,-100px,0)}}@keyframes live-pulse{0%,100%{opacity:.55}50%{opacity:1;box-shadow:0 0 14px #8cf0cc}}@keyframes result-appear{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}@media(max-width:760px){.topbar{top:8px;margin:8px 12px 0;height:72px;padding:12px 16px;border-radius:19px}.hero{padding-top:43px}.orb-blue{width:420px;height:450px;right:-170px}.orb-violet{width:330px;height:450px;left:-210px}.topbar .brand small{font-size:8px}.editor-body{padding:26px 22px}.orb{filter:blur(55px)}}@media(prefers-reduced-motion:reduce){.orb,.live-dot,.result.flash strong{animation:none!important}.feature-grid article:hover,.plan:hover{transform:none}.button::after,.mini-button::after{display:none}}
/* Keep the hero readable on the light glass surface. */
/* Readable liquid-glass controls in both themes. */
html{overflow-x:clip;overflow-y:auto;scroll-padding-top:115px}
section[id]{scroll-margin-top:115px}
.button.primary{background:linear-gradient(130deg,#196ac4,#225fc2 55%,#394bc4);border-color:#a8d5ff}
.button::after,.mini-button::after{background:linear-gradient(110deg,transparent 40%,#ffffff14 49%,transparent 58%)}
.button:not(.primary){border-color:#7393b8}
.button:disabled{opacity:1;background:#273d58;color:#c8d6e8;border-color:#7087a4;box-shadow:inset 0 1px 0 #ffffff20;text-shadow:none}
.theme{color:#c3dfff;border-color:#7798bf}
.target-languages button{border-color:#7b9cbe;color:#e0edfc;background:#29496a}
.target-languages button[aria-pressed=true]{background:#1763ae;border-color:#b5e2ff;color:#fff;box-shadow:0 0 18px #4ca9ff40,inset 0 1px 0 #ffffff40}
.mini-button{background:linear-gradient(140deg,#235d99,#1a497e);border-color:#98bfe9;color:#fff}
.demo-actions .text-link{color:#d2e8ff;text-decoration:underline;text-underline-offset:4px}
/* Layout examples keep the same readable glass surface in both themes. */
.demo-examples{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:19px 0 10px}
.demo-examples>span{flex-basis:100%;color:#c5d9f1;font-size:11px;margin-bottom:2px}
.example-button{min-height:40px;padding:8px 12px;border:1px solid #85a9d0;border-radius:999px;background:linear-gradient(135deg,#244b77,#203e62);color:#eaf4ff;font-size:12px;font-weight:600;box-shadow:inset 0 1px 0 #ffffff24;transition:background .2s,box-shadow .2s,border-color .2s}
.example-button:hover{background:#2c5d92;border-color:#c0e4ff;box-shadow:0 0 18px #59aeff45}
.example-button[aria-pressed=true]{background:#185eab;color:#fff;border-color:#c0e4ff;box-shadow:inset 0 1px 0 #ffffff45,0 0 20px #3a9dff40}
.sample-field{position:relative}
.sample-field textarea{height:112px;padding-top:34px}
.sample-field .bubble{top:2px;right:0;padding:4px 9px;font-size:13px;gap:6px;border-radius:9px}
.demo-actions{flex-wrap:wrap}
.demo-hint{color:#c5d9f1;font-size:11px;line-height:1.6}
.result strong[dir=rtl]{text-align:right}
.site-languages{display:flex;align-items:center;gap:3px;padding:4px;border:1px solid #7798bf;border-radius:999px;background:#17304b}
.topbar .site-languages{gap:3px;font-size:12px;flex-shrink:0}
.topbar .site-languages a{display:flex!important;align-items:center;justify-content:center;min-height:32px;min-width:34px;padding:5px 8px;border-radius:999px;color:#e5f2ff;font-weight:600}
.topbar .site-languages a[aria-current=page]{background:#185eab;color:white;box-shadow:0 0 12px #4ca9ff40}
html[dir=rtl] :is(h1,h2,.eyebrow,.demo-label,.plan-label,.ribbon){letter-spacing:normal}
html[dir=rtl] .rc-note{border-left:0;border-right:2px solid #b8955a;padding-left:13px;padding-right:13px}
html[dir=rtl] .price small{margin-left:0;margin-right:13px}
html[dir=rtl] .quickstart code{display:inline-block;unicode-bidi:isolate}
html[dir=rtl] .feature-grid article,html[dir=rtl] .plan,html[dir=rtl] .faq{text-align:right}
html[dir=rtl] summary:after{float:left}
@media(max-width:1000px){.topbar{gap:12px}.topbar nav:not(.site-languages){gap:14px}.topbar nav:not(.site-languages) a:not(:first-child){display:none}}
/* A single controls group keeps the theme and language picker on one baseline. */
html { color-scheme: dark; scroll-padding-top: 150px; }
section[id] { scroll-margin-top: 0; }
.topbar { gap: 20px; }
.topbar .brand { flex-shrink: 0; }
.header-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; flex-shrink: 0; }
.topbar .site-languages { display: flex; }
.topbar .site-languages a { min-width: 40px; min-height: 36px; font-size: 13px; }
.theme { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; line-height: 1; font-size: 24px; }
.topbar nav a { white-space: nowrap; }
.demo-examples { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.demo-examples > span { grid-column: 1 / -1; font-size: 12px; margin-bottom: 4px; }
.example-button { min-height: 44px; padding: 8px 6px; white-space: nowrap; font-size: 13px; }
.editor-top { gap: 12px; font-size: 12px; }
.demo-label { font-size: 10px; line-height: 1.6; }
.sample-field { margin: 16px 0; }
.sample-field textarea { height: 112px; padding: 36px 12px 12px; border: 1px solid #7897bd; border-radius: 12px; }
.sample-field .bubble { top: 6px; inset-inline-end: 8px; }
.mini-button { min-height: 44px; font-size: 13px; font-weight: 600; }
.target-languages { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.target-languages > span { font-size: 12px; margin-inline-end: 4px; }
.target-languages button { min-height: 40px; min-width: 40px; padding: 8px 10px; border-width: 1px; border-style: solid; border-radius: 10px; font-size: 12px; }
.demo-hint, .editor-bottom { font-size: 12px; }
.result { padding: 18px 0 0; }
.result small { font-size: 10px; }
.result strong { line-height: 1.5; }
.editor-bottom kbd { font-size: 12px; }
summary { padding-inline: 0 28px; }
summary::after { right: auto; left: auto; inset-inline-end: 0; }
html[dir=rtl] details p { margin: 0 0 24px 25px; }
/* Light glass: opaque enough for consistent contrast over the moving background. */
html[data-theme=light] { color-scheme: light; }
html[data-theme=light] body {
--bg: #f1f6fd; --panel: #fff; --line: #b6c8de; --text: #132e50;
--muted: #405873; --card: #ffffffed; background: var(--bg);
}
html[data-theme=light] .orb { opacity: .14; }
html[data-theme=light] .light-grid { opacity: .35; }
html[data-theme=light] .topbar {
background: linear-gradient(120deg,#fffffffa,#eaf3fff5); border-color: #9fb8d6;
box-shadow: inset 0 1px 0 #fff,0 8px 28px #204b7d18;
}
html[data-theme=light] .brand b { color: #2162a7; }
html[data-theme=light] .brand img { filter: drop-shadow(0 3px 8px #20549d20); }
html[data-theme=light] .eyebrow { color: #315b89; }
html[data-theme=light] .eyebrow i,html[data-theme=light] .live-dot { background: #147658; box-shadow: 0 0 10px #14765830; }
html[data-theme=light] h1 em { background: none; color: #205fa9; filter: none; }
html[data-theme=light] .editor,
html[data-theme=light] .feature-grid article,
html[data-theme=light] .plan,
html[data-theme=light] .final-cta {
background: linear-gradient(135deg,#fffffffa,#edf5fff5); border-color: #a6bdd8;
color: var(--text); box-shadow: inset 0 1px 0 #fff,0 12px 32px #254e7f12;
}
html[data-theme=light] :is(.editor,.feature-grid article,.plan,.final-cta)::before { opacity: .25; }
html[data-theme=light] .editor { border-color: #91add0; box-shadow: inset 0 1px 0 #fff,0 16px 44px #204a7e20; }
html[data-theme=light] .editor-top,
html[data-theme=light] .editor-bottom { background: #e8f1fd; color: #3b5573; border-color: #b6c8de; }
html[data-theme=light] .editor-top { border-radius: 18px 18px 0 0; }
html[data-theme=light] .editor-bottom { border-radius: 0 0 18px 18px; }
html[data-theme=light] :is(.demo-label,.demo-examples>span,.demo-hint,.target-languages>span,.result small) { color: #405873; }
html[data-theme=light] .sample-field textarea { color: #183b66; background: #f3f7fd; border-color: #7c97b8; box-shadow: inset 0 2px 5px #284b7110; }
html[data-theme=light] .result { background: #e7f1ff; border: 1px solid #aac3e1; border-radius: 12px; padding: 16px; }
html[data-theme=light] .result strong { color: #163d6d; text-shadow: none; }
html[data-theme=light] .editor-bottom kbd { color: #23476f; background: #fff; border-color: #7b94b2; box-shadow: 0 2px 0 #bccde1; }
html[data-theme=light] .example-button,
html[data-theme=light] .target-languages button {
color: #23476f; background: linear-gradient(135deg,#fff,#edf4ff); border-color: #7b96b6; box-shadow: inset 0 1px 0 #fff;
}
html[data-theme=light] .example-button:hover,
html[data-theme=light] .target-languages button:hover { background: #dceaff; border-color: #386da9; }
html[data-theme=light] .example-button[aria-pressed=true],
html[data-theme=light] .target-languages button[aria-pressed=true] {
color: #fff; background: #155ca8; border-color: #104e92; box-shadow: inset 0 1px 0 #ffffff40,0 3px 12px #266cbb30;
}
html[data-theme=light] .mini-button { color: #fff; background: linear-gradient(135deg,#1d64b0,#174d91); border-color: #124b8f; box-shadow: inset 0 1px 0 #ffffff40,0 4px 14px #2565aa26; }
html[data-theme=light] .demo-actions .text-link { color: #245b98; }
html[data-theme=light] .theme { color: #1d4d82; background: #fff; border-color: #7b96b6; box-shadow: inset 0 1px 0 #fff,0 3px 10px #2a63a21a; }
html[data-theme=light] .theme:hover { background: #dceaff; border-color: #386da9; }
html[data-theme=light] .site-languages { background: #f5f9ff; border-color: #7b96b6; }
html[data-theme=light] .topbar .site-languages a { color: #244b79; }
html[data-theme=light] .topbar .site-languages a[aria-current=page] { color: #fff; background: #155ca8; box-shadow: 0 2px 8px #266cbb26; }
html[data-theme=light] .topbar nav,html[data-theme=light] .text-link,html[data-theme=light] footer a { color: #284f7d; }
html[data-theme=light] .topbar nav a:hover,html[data-theme=light] .text-link:hover,html[data-theme=light] footer a:hover { color: #153b6c; text-decoration: underline; text-underline-offset: 4px; }
html[data-theme=light] .button:not(.primary) { color: #244b79; background: linear-gradient(135deg,#fff,#edf4ff); border-color: #7b96b6; box-shadow: inset 0 1px 0 #fff,0 6px 20px #316aa518; }
html[data-theme=light] .button:not(.primary):hover { background: #dceaff; border-color: #386da9; }
html[data-theme=light] .button.primary { border-color: #174f95; }
html[data-theme=light] .button:disabled { color: #4a5e78; background: #e0e8f3; border-color: #889bb4; box-shadow: inset 0 1px 0 #fff; }
html[data-theme=light] .feature-icon { color: #235c9c; background: linear-gradient(135deg,#f6fbff,#d8eaff); border-color: #8baace; box-shadow: inset 0 1px 0 #fff,0 4px 12px #225a9e12; }
html[data-theme=light] .feature-grid article:hover,html[data-theme=light] .plan:hover { border-color: #4d82bd; box-shadow: inset 0 1px 0 #fff,0 12px 30px #267ed41f; }
html[data-theme=light] .rc-note { background: #fff9ec; border-color: #9b7838; }
html[data-theme=light] .strip { border-color: var(--line); }
html[data-theme=light] .currencies { background: #f5f9ff; border-color: #7b96b6; }
html[data-theme=light] .currencies button { color: #314b6a; min-height: 40px; }
html[data-theme=light] .currencies button[aria-pressed=true] { background: #155ca8; color: #fff; box-shadow: 0 3px 10px #225a9e26; }
html[data-theme=light] .currencies button:hover:not([aria-pressed=true]) { background: #dceaff; }
html[data-theme=light] .plan.pro { background: linear-gradient(135deg,#f9fcff,#e5f0ff); border-color: #729bc9; }
html[data-theme=light] .plan-label,html[data-theme=light] .quickstart li>span,html[data-theme=light] .quickstart code { color: #285b91; }
html[data-theme=light] .plan li:before { color: #23775d; }
html[data-theme=light] .ribbon { background: #ffedc7; color: #725013; border-color: #ad8a46; box-shadow: 0 3px 12px #805b1914; }
html[data-theme=light] .faq .text-link { color: #245b98; }
html[data-theme=light] :is(button,a,summary,textarea):focus-visible { outline-color: #174f95; }
@media(max-width:1000px) {
.topbar { margin-inline: 20px; gap: 14px; }
}
@media(max-width:760px) {
html { scroll-padding-top: 96px; }
.topbar { display: flex; flex-wrap: nowrap; margin: 8px 12px 0; height: 66px; min-height: 66px; gap: 8px; padding: 10px 12px; }
.topbar .brand { min-width: 0; gap: 8px; font-size: 18px; white-space: nowrap; }
.topbar .brand img { width: 34px; height: 34px; flex-shrink: 0; }
.topbar > nav { display: none; }
.header-controls { gap: 8px; }
.topbar .site-languages a { min-width: 32px; min-height: 36px; padding-inline: 6px; font-size: 12px; }
.topbar .brand small { display: none; }
.topbar .theme { width: 40px; height: 40px; flex-basis: 40px; font-size: 22px; }
.hero { padding-top: 32px; }
.editor-body { padding: 24px 18px; }
.demo-actions { gap: 10px 14px; margin-bottom: 18px; }
.target-languages button { min-width: 44px; min-height: 44px; }
.result strong { font-size: 24px; }
}
@media(max-width:360px) {
.wrap:not(.topbar) { padding-inline: 18px; }
.topbar { margin-inline: 8px; padding-inline: 8px; gap: 6px; }
.topbar .brand { gap: 6px; font-size: 16px; }
.topbar .brand img { width: 30px; height: 30px; }
.header-controls { gap: 6px; }
.topbar .site-languages { padding: 3px; gap: 2px; }
.topbar .site-languages a { min-width: 30px; padding-inline: 5px; }
.topbar .theme { width: 36px; height: 40px; flex-basis: 36px; font-size: 21px; }
.demo-examples { gap: 6px; }
.example-button { font-size: 12px; }
.editor-body { padding-inline: 14px; }
.editor-top { padding-inline: 16px; }
.target-languages > span { flex-basis: 100%; }
}
/* Localized LANG369 promo: playback starts only when the visitor chooses. */
.promo-section{padding-top:38px}.promo-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}.promo-heading h2{font-size:clamp(28px,3.5vw,42px);margin:14px 0}.promo-heading p{color:var(--muted);font-size:15px;line-height:1.7;max-width:620px}.promo-languages{display:flex;gap:8px;flex-shrink:0}.promo-languages a{display:block;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--text);text-decoration:none}.promo-languages a[aria-current=page]{background:#2269b4;color:white;border-color:#82b8ec}.promo-languages a:focus-visible{outline:3px solid #67baff;outline-offset:3px}.promo-player{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:72vh;background:#091827;border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 55px #0003}.promo-caption{font-size:12px;line-height:1.7;color:var(--muted);margin:14px 0 0}@media(max-width:760px){.promo-heading{align-items:flex-start;flex-direction:column;gap:10px}.promo-section{padding-top:20px}.promo-player{border-radius:12px}.promo-languages{margin-bottom:4px}}
.site-languages{display:flex;gap:8px;align-items:center;font-size:13px;flex-wrap:wrap}.site-languages select{font:inherit;color:var(--text,#eff6ff);background:var(--panel,#17304a);border:1px solid #728ba3;border-radius:10px;padding:9px 12px;min-height:40px;max-width:190px;min-width:130px}.site-languages select option{color:#132e47;background:#f6faff}.header-controls{flex-wrap:wrap}html[lang=th],html[lang=hi]{line-height:1.7}@media(max-width:640px){.site-languages{font-size:12px}.site-languages select{max-width:160px}.header-controls{gap:8px}}