:root{--bg:#0a0b1e;--ink:#f4f6ff;--mute:#aab0d6;--a:#7c5cff;--b:#00d4ff;--c:#ff4fa3;
--glass:rgba(255,255,255,.08);--edge:rgba(255,255,255,.22);--r:22px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;animation:fl 18s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:46vmax;height:46vmax;background:var(--a);top:-12vmax;left:-10vmax}
.blobs i:nth-child(2){width:38vmax;height:38vmax;background:var(--b);bottom:-12vmax;right:-8vmax;animation-delay:-6s}
.blobs i:nth-child(3){width:30vmax;height:30vmax;background:var(--c);top:35%;left:45%;animation-delay:-11s;opacity:.5}
@keyframes fl{to{transform:translate(8vmax,6vmax) scale(1.15)}}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
border:1px solid var(--edge);border-radius:var(--r);
box-shadow:0 10px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35)}
nav{position:sticky;top:12px;margin:12px auto;max-width:1100px;width:calc(100% - 24px);padding:10px 18px;display:flex;align-items:center;gap:14px;z-index:5;border-radius:999px}
nav .logo{font-weight:800;font-size:20px;color:var(--ink);text-decoration:none;margin-right:auto;letter-spacing:-.02em}
nav a,nav button.lk{color:var(--mute);text-decoration:none;font:600 14px "Plus Jakarta Sans",system-ui,sans-serif;background:none;border:0;cursor:pointer}
nav a:hover,nav button.lk:hover{color:var(--ink)}
.btn{display:inline-block;border:0;cursor:pointer;color:#fff;font:700 15px "Plus Jakarta Sans",sans-serif;padding:12px 26px;border-radius:999px;text-decoration:none;
background:linear-gradient(120deg,var(--a),var(--b));box-shadow:0 8px 24px rgba(124,92,255,.45),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}.btn.ghost{background:var(--glass);box-shadow:none;border:1px solid var(--edge)}
.btn.red{background:linear-gradient(120deg,#ff4f6d,var(--c))}
main{max-width:1100px;margin:0 auto;padding:20px 16px 60px}
.hero{text-align:center;padding:70px 20px}
.hero h1{font-size:clamp(38px,8vw,76px);line-height:1.02;margin:0 0 18px;letter-spacing:-.04em}
.hero h1 span{background:linear-gradient(120deg,var(--b),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mute);max-width:560px;margin:0 auto 30px;font-size:18px;line-height:1.6}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px}
.card{padding:26px}.card h3{margin:0 0 8px}.card p{margin:0;color:var(--mute);line-height:1.55}
.form{max-width:440px;margin:40px auto;padding:34px}
.form h2{margin:0 0 20px}label{display:block;font-size:13px;color:var(--mute);margin:14px 0 6px}
input,select,textarea{width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--edge);background:rgba(0,0,0,.25);color:var(--ink);font:500 15px "Plus Jakarta Sans",system-ui,sans-serif;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--b)}select option{color:#000}
.err{color:#ff8fa8;font-size:13px;margin-top:6px}.ok{color:#7dffb5;margin-bottom:10px}
.form .btn{width:100%;margin-top:22px}
.avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:800;margin:0 auto 14px;background:linear-gradient(135deg,var(--a),var(--c))}
[hidden]{display:none!important}
@media(max-width:820px){nav{border-radius:24px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.blobs i{animation:none}}

.doc{line-height:1.8;color:var(--mute);padding-left:20px}.doc b{color:var(--ink)}
.ok{color:#7dffb5;margin-bottom:10px}

/* ===== Live chat (Ome-style, mobile first) ===== */
body.ome{position:fixed;inset:0;background:#0e0e10;overflow:hidden}
.ome-wrap{position:fixed;inset:0;display:grid;grid-template-rows:1fr 1fr;background:#000}
.pane{position:relative;overflow:hidden;min-height:0;background:#17171a;isolation:isolate}
.pane.bottom{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.pane.bottom::before{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(transparent,rgba(0,0,0,.75));z-index:0;pointer-events:none}
.pane.bottom>*:not(#local){position:relative;z-index:1}
#noise{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;z-index:1}
#local{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1d1d22;z-index:-1}
[data-state=live] #noise{display:none}[data-state=live] #remote{background:#000}
.topbar{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none}
.topbar>*{pointer-events:auto}
.peer{display:none;align-items:center;gap:6px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:6px 6px 6px 14px;color:#fff;font-size:14px;max-width:calc(100% - 60px)}
.peer b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peer button{border:0;background:rgba(255,255,255,.18);color:#ffcf4d;border-radius:50%;width:30px;height:30px;font-size:15px;cursor:pointer;flex:none}
[data-state=connecting] .peer,[data-state=live] .peer{display:flex}
.menu{margin-left:auto;position:relative}
.menu summary{list-style:none;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;font-size:20px}
.menu summary::-webkit-details-marker{display:none}
.menu .glass{position:absolute;right:0;top:46px;min-width:150px;padding:8px;display:flex;flex-direction:column;border-radius:16px;background:rgba(20,20,28,.92)}
.menu .glass a,.menu .glass button{color:#fff;text-decoration:none;padding:9px 12px;font:600 14px "Plus Jakarta Sans",system-ui,sans-serif;background:none;border:0;text-align:left;cursor:pointer;border-radius:10px}
.menu .glass a:hover,.menu .glass button:hover{background:rgba(255,255,255,.1)}.menu form{margin:0}
.idle{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;color:#fff;padding:0 16px 80px}
[data-state=live] .idle{display:none}
.brand{font-weight:800;font-size:clamp(46px,9vh,72px);letter-spacing:-.04em;padding:6px 34px 10px;border-radius:28px;color:transparent;background-image:linear-gradient(120deg,var(--a),var(--b) 55%,var(--c));-webkit-background-clip:text;background-clip:text;box-shadow:none;position:relative}
.brand::before{content:"";position:absolute;inset:0;border-radius:28px;background:#fff;z-index:-1;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.online{display:flex;align-items:center;gap:12px;font-size:clamp(20px,3.4vh,28px);font-weight:500}
.online i{width:16px;height:16px;border-radius:50%;background:#7cff00;box-shadow:0 0 10px #7cff00}
#idleMsg{color:#d5d7e8;font-size:15px;min-height:1.4em}
.btn.big{font-size:18px;padding:14px 56px}.btn:disabled{opacity:.6;cursor:default}
[data-state=searching] #start,[data-state=connecting] #start{display:none}
.filters{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:flex;gap:12px}
[data-state=live] .filters,[data-state=connecting] .filters{display:none}
.pill{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:rgba(25,25,28,.7);color:#fff;font-weight:800;font-size:16px;letter-spacing:.02em;margin:0;cursor:pointer;overflow:hidden}
.pill em{font-style:normal;font-size:26px}
.pill select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;padding:0;border:0}
.fx{position:absolute;inset:0;z-index:7;pointer-events:none}
.fx span{position:absolute;bottom:14%;font-size:44px;animation:rise 2.2s ease-out forwards}
@keyframes rise{to{transform:translateY(-32vh) scale(1.5);opacity:0}}
.toast{position:absolute;left:50%;top:calc(56px + env(safe-area-inset-top));transform:translateX(-50%);z-index:8;background:rgba(0,0,0,.75);color:#fff;padding:8px 16px;border-radius:999px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1}
.notice{color:#fff;font-size:14px;line-height:1.45;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.notice a{color:#fff}
[data-state=live] .notice,[data-state=connecting] .notice{display:none}
#msgs{display:flex;flex-direction:column;gap:6px;max-height:30%;overflow:auto;align-items:flex-start}
#msgs:empty{display:none}
.m{max-width:85%;padding:7px 13px;border-radius:16px;font-size:14px;background:rgba(0,0,0,.55);color:#fff;word-break:break-word}
.m.me{align-self:flex-end;background:linear-gradient(120deg,var(--a),var(--b))}
.ctrl{display:none;gap:10px}[data-state=searching] .ctrl,[data-state=connecting] .ctrl,[data-state=live] .ctrl{display:flex}
.ctrl .btn{padding:12px 26px;margin:0}.ctrl .btn:last-child{flex:1}
.send{display:none;gap:8px}.send.open{display:flex}.send input{flex:1;font-size:16px}.send .btn{width:auto;margin:0;padding:12px 18px}
.acts{display:flex;justify-content:space-between;align-items:center}
.ic{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center;padding:0}
.ic:active{transform:scale(.92)}
@media(min-width:900px){.ome-wrap{grid-template-rows:none;grid-template-columns:1fr 1fr}.idle{padding-bottom:90px}}