*{box-sizing:border-box;margin:0}
body{background:radial-gradient(circle at 58% 40%,var(--glow),transparent 55%),var(--bg);color:#f5f3ff;font:400 18px/1.5 Manrope,sans-serif;min-height:100svh;overflow-x:hidden}
button{font:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.wrap{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);gap:clamp(20px,4vw,60px);align-items:center;padding:clamp(20px,4.5vw,72px)}
.art{position:absolute;right:calc(clamp(320px,30vw,390px) + clamp(20px,4.5vw,72px) - 40px);top:50%;transform:translateY(-50%);height:min(88vh,680px);pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 55% 48%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 55% 48%,#000 55%,transparent 100%)}
.art img{height:100%;width:auto;display:block}
.t{position:relative;z-index:1;max-width:540px}
.tag{display:inline-block;font:600 12px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);border:1px solid var(--ac);border-radius:30px;padding:9px 16px;margin-bottom:22px}
h1{font:800 clamp(48px,6.4vw,104px)/.98 Manrope,sans-serif;letter-spacing:-.045em;text-shadow:0 4px 30px #0007}
.t>p{font-size:clamp(19px,1.5vw,23px);line-height:1.4;max-width:23em;margin:22px 0 28px;color:#e9e3dc}
.t ul{list-style:none;padding:0;display:grid;gap:14px}.t li{display:flex;align-items:center;gap:16px;font-size:17px;color:#ece6df}
.t li i{flex:none;width:38px;height:38px;border-radius:50%;background:#ffffff14;border:1px solid #ffffff22;display:flex;align-items:center;justify-content:center;color:var(--ac)}.t li svg{width:18px;height:18px}
.note{margin-top:22px;font-size:13px;opacity:.55}
.ph{position:relative;z-index:1;height:min(720px,calc(100svh - 40px));min-height:560px;background:#0e1621;border-radius:42px;border:8px solid #05070b;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 90px #000a,0 0 0 1px #ffffff14}
.bar{display:flex;align-items:center;gap:10px;padding:12px 12px;background:#17212b;flex:none}.bar .bk{color:#6ab3f3;font-size:26px;line-height:1;padding:0 4px}
.ava{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}.bar div{flex:1;min-width:0}.bar b{display:block;font-size:16px;line-height:1.2;font-weight:700}.bar span{font-size:13px;color:#7f91a4}.bar span.ty{color:#6ab3f3}.bar .dots{color:#7f91a4;font-size:22px}
#log{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:6px;background:#0e1621 radial-gradient(#ffffff08 1px,transparent 1.5px) 0 0/22px 22px}
.intro{margin:auto 8px;background:#182533e6;border-radius:16px;padding:16px;text-align:center;font-size:14.5px;color:#cfd8e2}.intro img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 10px;display:block}.intro b{display:block;color:#fff;font-size:15.5px;margin-bottom:6px}
.m{position:relative;max-width:82%;padding:7px 11px 7px;border-radius:14px;font-size:15px;line-height:1.38;white-space:pre-line;animation:in .22s ease-out}
.m.b{background:#182533;align-self:flex-start;border-bottom-left-radius:4px}.m.u{background:#2b5278;align-self:flex-end;border-bottom-right-radius:4px}
.m em{float:right;font-style:normal;font-size:11.5px;color:#8ea2b6;margin:6px 0 -4px 10px;display:flex;align-items:center;gap:3px}.m.u em{color:#9fc6ea}.m em svg{width:16px;height:11px}
.m.pic{padding:0;overflow:hidden;width:82%}.m.pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.m.pic div{padding:7px 11px}
.m.cmd{color:#8cc7ff}
.dotty{display:flex;gap:4px;align-self:flex-start;background:#182533;padding:12px 13px;border-radius:14px;border-bottom-left-radius:4px}.dotty i{width:7px;height:7px;background:#7f91a4;border-radius:50%;animation:d 1s infinite}.dotty i:nth-child(2){animation-delay:.15s}.dotty i:nth-child(3){animation-delay:.3s}
#kb{display:grid;gap:5px;padding:6px 8px;background:#17212b;flex:none}#kb:empty{display:none}#kb .row{display:grid;gap:5px;grid-auto-flow:column;grid-auto-columns:1fr}
#kb button{background:#2b3a4a;border:0;border-radius:9px;color:#fff;padding:11px 6px;font-size:14.5px;font-weight:600;transition:background .15s}#kb button:hover{background:#3a4d61}#kb button.start{background:#3390ec;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cmp{display:flex;align-items:center;gap:8px;padding:8px 10px 10px;background:#17212b;flex:none;position:relative}
.menu{display:flex;align-items:center;gap:6px;background:#3390ec;color:#fff;border:0;border-radius:18px;padding:8px 12px;font-size:14px;font-weight:700}.menu svg{width:16px;height:16px}
.inp{flex:1;color:#6d7f92;font-size:15px;padding:8px 4px;white-space:nowrap;overflow:hidden}.ic{color:#6d7f92;display:flex}.ic svg{width:22px;height:22px}
.pop{position:absolute;left:10px;bottom:56px;width:min(260px,calc(100% - 20px));background:#1e2c3a;border-radius:12px;box-shadow:0 10px 30px #0008;padding:6px;display:none}.pop.on{display:block}
.pop button{display:flex;gap:10px;width:100%;text-align:left;background:none;border:0;color:#fff;padding:9px 10px;border-radius:8px;font-size:14.5px}.pop button:hover{background:#2b3a4a}.pop code{color:#6ab3f3;font-family:"JetBrains Mono",monospace;font-size:13.5px;min-width:76px}.pop span{color:#a9b6c3}
.real{position:relative;z-index:1;padding:clamp(50px,7vw,100px) clamp(20px,4.5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(30px,5vw,80px);align-items:center;border-top:1px solid #ffffff1f}.real h2{font:800 clamp(34px,4vw,60px)/1.02 Manrope,sans-serif;letter-spacing:-.04em}.real p{color:#e9e3dc;margin:16px 0 26px;max-width:28em}.real a{display:inline-flex;align-items:center;gap:10px;background:#3390ec;color:#fff;text-decoration:none;font-weight:800;padding:15px 26px;border-radius:40px}.real a:hover{background:#2479cf}.real img{width:100%;border-radius:22px;border:1px solid #ffffff22;box-shadow:0 30px 70px #0009}.real small{display:block;margin-top:12px;font-size:13px;opacity:.6}
@media(max-width:860px){.real{grid-template-columns:1fr}}
@keyframes in{from{opacity:0;transform:translateY(8px)}}@keyframes d{50%{opacity:.3;transform:translateY(-3px)}}
@media(max-width:860px){.wrap{grid-template-columns:1fr}.art{position:relative;right:auto;top:auto;transform:none;height:340px;margin:-10px auto -60px;order:-1}.ph{height:640px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}