main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.shoot.s2{top:38%;animation-delay:11s;animation-duration:19s}
.banner{position:sticky;top:0;z-index:6;background:#7c5cff33;border-bottom:1px solid #7c5cff66;color:var(--tx);font-size:12px;text-align:center;padding:6px 10px;backdrop-filter:blur(8px)}
.hero{display:flex;align-items:center;gap:12px;margin:6px 0 4px}.logo{width:44px;height:44px;border-radius:14px;background:radial-gradient(circle at 35% 35%,#b9a4ff,#5b3fd1 60%,#160f3d);display:grid;place-items:center;font-weight:800;box-shadow:0 0 22px #7c5cff77}
.search{position:relative}.search input{padding-left:38px}.search:before{content:"🔍";position:absolute;left:12px;top:17px;font-size:15px;opacity:.7}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}.chips.scroll::-webkit-scrollbar{display:none}.chip{white-space:nowrap;font-size:14px;padding:8px 13px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mat{margin:0;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:128px;transition:transform .12s}.mat:active{transform:scale(.97)}
.mat .em{font-size:28px}.mat .w{font-size:11px;letter-spacing:.06em;color:#9cf6ff;font-weight:700}.mat .tt{font-weight:600;font-size:14px;line-height:1.25}.mat .ln{font-size:12px;color:var(--hint);line-height:1.3}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:#ffffff12;color:var(--hint)}
.body{line-height:1.5;font-size:15px;white-space:pre-wrap;word-wrap:break-word}.body b{color:#fff}.body a{color:#9cf6ff}
.prompt{position:relative;margin:10px 0;background:#0a0f2a;border:1px solid #7c5cff55;border-radius:12px;padding:12px 12px 52px;font-family:ui-monospace,Menlo,monospace;font-size:13px;white-space:pre-wrap;line-height:1.45;color:#dfe5ff}
.prompt .cp{position:absolute;right:10px;bottom:10px;left:10px;margin:0;width:auto}
.links{display:flex;flex-direction:column;gap:0}.links .btn{text-decoration:none;text-align:center}
.photo{width:100%;max-height:62vh;object-fit:cover;aspect-ratio:9/16;border-radius:14px;display:block;margin-bottom:10px;background:#0a0f2a}
.back{background:none;border:0;color:var(--acc);font-size:16px;padding:8px 0;cursor:pointer}
.gate{text-align:center;padding-top:12vh}.gate .big{font-size:56px}
.ref{font-family:ui-monospace,monospace;font-size:14px;word-break:break-all;background:#0a0f2a;border-radius:10px;padding:12px;border:1px solid #3ad0ff55}
textarea{width:100%;min-height:140px;padding:12px;border-radius:10px;border:1px solid #ffffff22;background:var(--bg2);color:var(--tx);font-size:16px;font-family:inherit;resize:vertical}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#1b2350;border:1px solid #7c5cff88;color:#fff;padding:10px 16px;border-radius:12px;opacity:0;transition:.2s;pointer-events:none;z-index:9;font-size:14px}.toast.on{opacity:1;transform:translateX(-50%)}
.soon{text-align:center;padding:26px 14px}.soon .big{font-size:48px}
.pod{display:flex;gap:8px;align-items:center}.empty{text-align:center;color:var(--hint);padding:30px 0}
/* ===== v5 (21.10): Telegram viewport/safe areas, без наложений, анимации только transform/opacity ===== */
:root{--vh:var(--tg-viewport-stable-height,100svh);
 --sb:max(var(--tg-safe-area-inset-bottom,0px),env(safe-area-inset-bottom,0px));--st:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
 --sl:max(var(--tg-safe-area-inset-left,0px),env(safe-area-inset-left,0px));--sr:max(var(--tg-safe-area-inset-right,0px),env(safe-area-inset-right,0px));
 --nav:60px;--ease:cubic-bezier(.22,1,.36,1);--pad:clamp(12px,4vw,18px)}
html,body{overflow-x:hidden}
body{padding:0;min-height:var(--vh);overflow-wrap:anywhere}
body.space #sky{height:100lvh;contain:strict}
/* космос: звёзды как были; планета и луна — по краям, приглушены, двигаются только transform, не уезжают под текст */
.planet{width:clamp(180px,55vw,300px);right:calc(clamp(180px,55vw,300px) * -.38);top:auto;bottom:calc(var(--nav) + var(--sb) - 40px);opacity:.42;filter:none;animation:float 24s ease-in-out infinite alternate}
@keyframes float{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-12px,-18px,0) rotate(6deg)}}
.moon{width:30px;height:30px;left:auto;right:18px;top:calc(var(--st) + 10px);opacity:.5;animation:float2 18s ease-in-out infinite alternate}
@keyframes float2{to{transform:translate3d(-10px,8px,0)}}
.neb{will-change:transform}
main{padding:calc(var(--pad) + var(--st)) calc(var(--pad) + var(--sr)) calc(var(--nav) + var(--sb) + 24px) calc(var(--pad) + var(--sl));max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
main>*{margin-top:0;margin-bottom:0}
main.anim{animation:none}
main.enter{animation:enter .22s var(--ease) both}main.enter-r{animation:enterR .24s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes enterR{from{opacity:0;transform:translate3d(24px,0,0)}to{opacity:1;transform:none}}
.rec{animation:none;display:flex;flex-direction:column;gap:12px}.rec>*{margin:0}
h1{font-size:clamp(20px,6vw,24px);line-height:1.2}h2{font-size:clamp(16px,4.8vw,18px)}
/* карточки: плотный фон без backdrop-filter (он тормозит прокрутку и даёт «просвечивание» планеты сквозь текст) */
.card{background:rgba(14,18,46,.86);border:1px solid #ffffff17;backdrop-filter:none;-webkit-backdrop-filter:none;margin:0;padding:clamp(12px,3.6vw,16px);min-width:0}
.hero{margin:0;min-width:0}.hero>div:last-child{min-width:0}.logo{flex:0 0 44px}
.search{position:static;display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid #ffffff22;border-radius:12px;padding:0 12px}
.search:before{position:static;content:"🔍";font-size:15px}.search input{border:0;background:none;padding:12px 0;margin:0;min-width:0;flex:1;outline:none}
.chips.scroll{margin:0 calc(-1 * var(--pad));padding:2px var(--pad) 4px;scroll-padding:0 var(--pad);overscroll-behavior-x:contain}
.chip{transition:background-color .15s ease-out,transform .15s ease-out}.chip:active{transform:scale(.95)}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:10px}
.mat{min-height:0;gap:6px;justify-content:flex-start;transition:transform .15s ease-out}.mat .row{align-items:flex-start}
.mat .tag,.pod .tag{align-self:flex-start}.mat .tt{font-size:clamp(13px,3.8vw,15px)}
.tag{white-space:nowrap;flex:0 0 auto}
.body{white-space:pre-line}
.prompt{position:static;display:flex;flex-direction:column;gap:10px;padding:12px;margin:4px 0;white-space:pre-wrap}
.prompt .cp{position:static;width:100%;margin:0}
.links{gap:10px}.links .btn,.rec>.btn{margin:0}
.btn{transition:transform .15s ease-out,opacity .15s ease-out;min-height:48px}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.6}
.card>.btn{margin-top:12px}
.photo{max-height:calc(var(--vh) * .62);aspect-ratio:9/16}
.back{align-self:flex-start;padding:6px 0;min-height:40px}
.gate{padding-top:calc(var(--vh) * .1);display:flex;flex-direction:column;gap:12px}.gate>*{margin:0}.gate .btn{margin:0}
.soon{padding:24px 14px;display:flex;flex-direction:column;align-items:center;gap:8px}.soon>*{margin:0}
.disc{margin:4px 0}
nav{padding:0 var(--sr) var(--sb) var(--sl);background:rgba(10,14,38,.94);backdrop-filter:none;height:calc(var(--nav) + var(--sb))}
nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:19px;padding:0;transition:color .15s ease-out,transform .15s ease-out}
nav button:active{transform:scale(.92)}nav button span{font-size:clamp(9px,2.7vw,11px);white-space:nowrap}
.toast{bottom:calc(var(--nav) + var(--sb) + 14px);transition:opacity .2s ease-out,transform .2s ease-out;max-width:calc(100% - 32px)}
.banner{position:static}
textarea{display:block;margin:0}
body.mb .mb-hide{display:none!important}
@media (prefers-reduced-motion:reduce){main.enter,main.enter-r{animation:enter-f .15s linear both}@keyframes enter-f{from{opacity:0}}.btn,.chip,.mat,nav button{transition:none}}
.moon{right:auto;left:-6px;top:calc(var(--vh) * .42);opacity:.38}
nav{background:#0a0e26}
.moon{display:none}