@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
src:url('fonts/inter-cyrillic.woff2') format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
src:url('fonts/inter-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,
U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
src:url('fonts/inter-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
:root{ --brand-lite:#A84E53;
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
--bar-h:64px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button{color:inherit}
html,body{margin:0;height:100%}
html{background:var(--page)}
html::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none}
body{
font-family:var(--font);font-size:15px;line-height:1.45;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overscroll-behavior-y:none}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(120% 80% at 50% 30%,transparent 45%,rgba(49,39,40,.10) 100%)}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.13;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
background-size:160px 160px;
mix-blend-mode:multiply}
.app{position:relative;z-index:1;margin:0 auto;
padding:calc(env(safe-area-inset-top) + 6px) 16px
calc(var(--bar-h) + env(safe-area-inset-bottom) + 14px)}
html.fs .app{
padding-top:calc(var(--tg-safe-area-inset-top, 0px)
+ var(--tg-content-safe-area-inset-top, 0px) + 6px)}
html.fs .bar{
padding-bottom:max(var(--tg-safe-area-inset-bottom, 0px),
env(safe-area-inset-bottom))}
.top{display:flex;align-items:center}
.top .ava{position:relative;width:38px;height:38px;border-radius:50%;flex:0 0 auto;overflow:hidden;
background:linear-gradient(135deg,#A04C51,#5A2A2D);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:15px;
box-shadow:0 1px 3px rgba(36,28,29,.28),inset 0 0 0 1px rgba(255,255,255,.35)}
.top .ava img{width:100%;height:100%;object-fit:cover;display:block}
.top .who{min-width:0}
.top .who b{display:block;font-size:16px;font-weight:800;color:var(--brand-deep);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .who span{display:block;font-size:12px;color:var(--mute)}
.top .sp{flex:1}
.top a.sup{padding:0 13px;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.top a.sup:active{transform:translateY(1px)}
.card{position:relative;margin-top:11px}
.card.flat{box-shadow:none;background:transparent;border:0}
.lbl{text-transform:uppercase}
.card.lead{overflow:hidden}
.card h2{margin:0 0 2px}
.card p.sub{margin:0}
.hero{position:relative;isolation:isolate}
.hero::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
border-radius:inherit}
.hero-in{position:relative;z-index:2;height:100%;min-height:138px;
display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
text-align:right;padding:20px 18px;max-width:64%;margin-left:auto}
.hero.dusk .chip i{background:#F2C14E;box-shadow:0 0 0 3px rgba(242,193,78,.22)}
.hero .kuz{inset:0;z-index:0}
.chip{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 13px;
border-radius:var(--pill);
font-size:12px;font-weight:800}
.chip i{width:6px;height:6px;border-radius:50%;animation:pulse 2.6s ease-in-out infinite}
.chip.off i{animation:none}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.65}}
.card.renew{margin-top:12px;padding:12px 14px 13px}
.card.renew h2{margin-top:2px}
.card.renew .now{display:flex;align-items:baseline;gap:7px;margin-top:8px;padding:6px 10px;
border-radius:var(--pill);background:var(--brand-soft);align-self:flex-start;
width:-moz-fit-content;width:fit-content}
.card.renew .now span{font-size:11px;font-weight:800;text-transform:uppercase;
letter-spacing:.06em;color:var(--mute)}
.card.renew .now b{font-size:13.5px;font-weight:800;color:var(--brand-deep)}
.card.renew .sub{margin-top:8px}
.traffic{margin-top:11px}
.traffic .t{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.traffic .t span{color:var(--mute)}
.traffic .t b{font-weight:800}
.link{display:flex;gap:0}
.link .txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
padding:8px 11px;color:var(--brand-deep)}
.link .txt i{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;
letter-spacing:.08em;color:var(--mute)}
.link .txt b{font-weight:700;font-size:13px;line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link a{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
padding:8px 11px;text-decoration:none;color:var(--brand-deep)}
.link a i{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;
letter-spacing:.08em;color:var(--mute)}
.link a b{font-weight:700;font-size:13px;line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link button{position:relative;flex:0 0 auto;border:0;cursor:pointer;
display:grid;place-items:center;font-family:var(--font);overflow:hidden;
transition:background .22s ease,color .22s ease}
.link button svg{grid-area:1/1;width:19px;height:19px;
transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .18s ease}
.link button svg.ok{transform:scale(.4) rotate(-25deg);opacity:0}
.link button.done svg{transform:scale(.4) rotate(25deg);opacity:0}
.link button.done svg.ok{transform:none;opacity:1}
.link{position:relative}
.link.flash::after{content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(121,86,88,.22),transparent);
animation:flash .7s ease-out}
@keyframes flash{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.btn.ghost.done{
border-color:var(--cta);color:var(--brand-deep)}
.steps{list-style:none;counter-reset:step;margin:10px 0 0;padding:0;display:grid;gap:9px}
.steps li{counter-increment:step;display:flex;gap:10px;line-height:1.35}
.steps li::before{content:counter(step);flex:0 0 auto;width:22px;height:22px;border-radius:50%;
font-size:12px;display:grid;place-items:center}
.me{position:relative;display:grid;grid-template-columns:auto 1fr auto;
align-items:center;gap:11px 13px;margin-top:14px;border-radius:var(--r-lg);isolation:isolate}
.me::after{content:'';position:absolute;inset:0;pointer-events:none;
border-radius:inherit}
.me>*{position:relative}
.me .ava{border-radius:50%;flex:0 0 auto;overflow:hidden;
display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--brand-deep);
background:linear-gradient(180deg,#F5F3EF,#DFDAD4)}
.me .ava img{width:100%;height:100%;object-fit:cover;display:block}
.me .tx{min-width:0;flex:1}
.me .tx b{display:block;font-weight:800;letter-spacing:-.015em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .cid{grid-column:1/-1;cursor:pointer;font-family:var(--font);color:#fff;
transition:background .16s ease,transform .1s ease}
.me .cid i{opacity:.72}
.me .cid b{font-feature-settings:'tnum' 1}
.me .cid .ic{flex:0 0 auto}
.me .cid .ic svg{grid-area:1/1;
transition:transform .18s cubic-bezier(.2,.8,.3,1),opacity .18s ease}
.me .cid .ic svg.ok{transform:scale(.4) rotate(-25deg);opacity:0}
.me .cid:active{transform:translateY(1px)}
.me .cid.done{background:rgba(211,151,155,.24);border-color:rgba(211,151,155,.6)}
.me .cid.done .ic{background:rgba(211,151,155,.34)}
.me .cid.done svg{transform:scale(.4) rotate(25deg);opacity:0}
.me .cid.done svg.ok{transform:none;opacity:1}
.me .chip{margin-top:0;flex:0 0 auto;align-self:center}
.me.dusk .ava{color:#232C3D}
.me.dusk .chip i{background:#F2C14E;box-shadow:0 0 0 3px rgba(242,193,78,.22)}
.gauges{display:grid;gap:12px;margin-top:13px}
.gauge .t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px}
.gauge .t span{color:var(--mute)}
.gauge .t b{font-weight:800;letter-spacing:-.01em}
.gauge .t b.warn{color:var(--warn)}
.gauge .t b.bad{color:var(--bad)}
.card>.feat{margin:11px 0 0;padding:0;list-style:none;display:grid;gap:7px;
font-size:13.5px;color:var(--soft)}
.card>.feat li{display:flex;gap:9px;align-items:flex-start;line-height:1.35}
.card>.feat li svg{flex:0 0 auto;margin-top:3px;color:var(--brand)}
.acts-wrap{margin-top:12px;display:grid;gap:8px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acts>:last-child:nth-child(odd){grid-column:1/-1}
.act{display:flex;align-items:center;gap:9px;
padding:9px 10px;border-radius:var(--r);cursor:pointer;
font-family:var(--font);text-align:left;color:var(--ink);
transition:transform .1s ease,box-shadow .16s ease}
.act .ic{flex:0 0 auto;width:31px;height:31px;border-radius:10px;display:grid;place-items:center}
.act .ic svg{width:17px;height:17px}
.act b{min-width:0;font-size:13px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act:active{transform:translateY(1px)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;cursor:pointer;
font-family:var(--font);
text-decoration:none;color:#fff}
.btn[disabled]{pointer-events:none}
.btn.ghost:active{filter:none;
box-shadow:inset 0 2px 6px rgba(36,28,29,.12)}
.btn.sm{height:44px;font-size:15px}
.btns{display:grid;gap:8px;margin-top:11px}
.meter{margin-top:6px;height:8px;border-radius:var(--pill);background:var(--brand-soft);overflow:hidden}
.meter i{display:block;height:100%;border-radius:var(--pill);transition:width .5s cubic-bezier(.22,1,.36,1)}
.meter i.warn{background:linear-gradient(90deg,#E8B14C,#C8892A)}
.meter i.bad{background:linear-gradient(90deg,#D9705F,#B3261E)}
.seg[hidden]{display:none}
.seg{position:relative;grid-template-columns:repeat(3,1fr)}
.seg .pin{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);
border-radius:var(--pill);
transition:transform .28s cubic-bezier(.22,1,.36,1)}
.seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;
font-family:var(--font);letter-spacing:-.01em;transition:color .2s ease}
.tar{position:relative}
.tar.pick{display:block;width:100%;text-align:left;font-family:var(--font);
padding:12px 14px;cursor:pointer;margin-top:9px}
.tar.pick:active{transform:translateY(1px);box-shadow:inset 0 2px 8px rgba(36,28,29,.10)}
.tar.pick .hd{padding:0;cursor:default}
.tar .hd .ch{display:flex;align-self:center}
.tar .hd .nm b .mark{display:inline-block;margin-left:7px;vertical-align:1px;text-transform:uppercase}
.tar .hd .nm b .mark.hot{background:#FBEFD6;color:#8A5A0F}
.tar .hd{display:flex;align-items:center;gap:12px;cursor:pointer;
width:100%;border:0;background:none;font-family:var(--font);text-align:left}
.tar .hd .nm{min-width:0;flex:1}
.tar .hd .nm b{display:block;font-weight:800;letter-spacing:-.01em}
.tar .hd .nm span{display:block;font-size:12px;color:var(--mute);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tar .hd .pr{flex:0 0 auto;text-align:right}
.tar .hd .pr b{display:block;font-weight:800;
letter-spacing:-.02em;line-height:1.1}
.tar .hd .pr i{font-style:normal;display:block;font-size:10px;color:var(--mute);
text-transform:uppercase;letter-spacing:.06em}
.tar .hd .ch{flex:0 0 auto;color:var(--line-strong);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.tar.on .hd .ch{transform:rotate(90deg)}
.tar.on .body>*{opacity:1;transform:none}
.tar .hd .emb{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:11px;background:var(--brand-soft);color:var(--brand-deep)}
.tar .hd .emb svg{width:19px;height:19px}
.tar.mine .hd .emb{background:var(--line);color:var(--soft)}
.tar .hd .pr b{display:flex;align-items:baseline;justify-content:flex-end;gap:4px}
.tar .hd .pr b i{font-style:normal;font-size:11px;font-weight:700;color:var(--mute);
text-transform:uppercase;letter-spacing:.06em}
.tar .hd .pr u{display:block;text-decoration:none;font-size:10.5px;color:var(--mute);
margin-top:1px;white-space:nowrap}
.tar .why{margin:7px 0 0 46px;font-size:12.5px;line-height:1.35;color:var(--soft)}
.tar .sec.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.tar .spec .cl{display:flex;align-items:center;gap:7px;min-width:0}
.tar .spec .cl .ic{flex:0 0 auto;display:flex;color:var(--brand)}
.tar .spec .cl .ic svg{width:17px;height:17px}
.tar .spec .cl .tx{min-width:0}
.tar .spec .cl .tx b{display:block;font-size:13.5px;font-weight:800;line-height:1.15;
letter-spacing:-.01em}
.tar .spec .cl .tx span{display:block;font-size:10.5px;color:var(--mute);line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tar .spec .cl.off .ic,
.tar .spec .cl.off .tx b{color:var(--mute)}
@media (max-width:360px){
.tar .spec .cl{flex-direction:column;align-items:flex-start;gap:3px}
.tar .spec .cl .tx span{white-space:normal}
.tar .why{margin-left:0}
}
.plans{display:grid;gap:12px;margin-top:12px}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
padding:16px;box-shadow:var(--sh-1);transition:border-color .15s ease,box-shadow .15s ease}
.plan.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(121,86,88,.16),var(--sh-1)}
.plan .hd{display:flex;align-items:baseline;gap:8px}
.plan .hd b{font-size:17px;font-weight:800}
.plan .badge{margin-left:auto;font-size:11px;font-weight:800;padding:4px 9px;border-radius:var(--pill);
background:var(--brand-soft);color:var(--brand-deep);text-transform:uppercase;letter-spacing:.04em}
.plan .feat{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:13px;color:var(--soft)}
.plan .feat li{display:flex;gap:8px;align-items:flex-start}
.plan .feat li svg{flex:0 0 auto;margin-top:2px;color:var(--brand)}
.swap{display:flex;align-items:stretch;gap:10px;margin-top:4px}
.swap .box{flex:1;text-align:center;padding:12px 6px 11px;border-radius:var(--r);
border:1px solid var(--line-2)}
.swap .box i{display:block;font-style:normal;font-size:10px;font-weight:800;
text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.swap .box.next i{color:var(--cta)}
.swap .box b{display:block;font-weight:800;line-height:1.05;margin-top:5px;
letter-spacing:-.03em}
.swap .box span{display:block;font-size:11.5px;margin-top:2px}
.swap .arrow{flex:0 0 auto;align-self:center;color:var(--line-strong);display:flex}
.busy{margin-top:9px;text-align:center;font-size:12.5px;color:var(--mute)}
.step{display:flex;align-items:center;justify-content:center;padding:12px 0 2px}
.step button{width:52px;height:52px;border-radius:16px;border:1px solid var(--line-2);
font-family:var(--font);font-size:26px;font-weight:800;line-height:1;cursor:pointer}
.step button[disabled]{opacity:.4;pointer-events:none}
.step .val{text-align:center}
.step .val b{display:block;font-weight:800;line-height:1;letter-spacing:-.03em;
color:var(--cta)}
.step .val span{display:block;font-size:12px;color:var(--mute);margin-top:4px}
.opt{display:flex;gap:12px;width:100%;margin-top:7px;
padding:10px 14px;
font-family:var(--font);text-align:left;cursor:pointer;
transition:transform .12s ease,box-shadow .16s ease}
.opt .nm{flex:1;min-width:0}
.opt .nm b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.opt .nm span{display:block;font-size:11.5px;color:var(--mute);margin-top:1px}
.opt .pr{flex:0 0 auto;text-align:right}
.opt .pr b{display:block;font-size:16.5px;font-weight:800;color:var(--cta);
letter-spacing:-.02em;line-height:1.15}
.opt .pr i{font-style:normal;display:block;font-size:10px;font-weight:800;
color:var(--brand-deep);background:var(--brand-soft);border-radius:var(--pill);padding:1px 6px}
.opt .ch{flex:0 0 auto;color:var(--line-strong)}
.back{display:flex;align-items:center;gap:12px}
.back .ico{flex:0 0 auto;cursor:pointer;display:grid;place-items:center}
.back .ico:active{box-shadow:inset 0 2px 6px rgba(36,28,29,.12)}
.back .tx{min-width:0}
.back .tx b{display:block}
.back .tx span{display:block;margin-top:1px}
.opt.wait,.tile.wait{pointer-events:none;position:relative;overflow:hidden;opacity:.6}
.opt.wait::after,.tile.wait::after{content:'';position:absolute;left:0;top:0;bottom:0;width:40%;
background:linear-gradient(90deg,transparent,rgba(121,86,88,.20),transparent);
animation:sweep 1s linear infinite}
.btn.wait{pointer-events:none;position:relative;overflow:hidden;color:transparent}
.btn.wait::after{content:'';position:absolute;left:0;top:0;bottom:0;width:40%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
animation:sweep 1s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tile{padding:12px;
text-align:left;cursor:pointer;font-family:var(--font)}
.tile b{display:block;font-size:15px;font-weight:800}
.tile span{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.tile em{display:block;font-style:normal;margin-top:8px;font-size:15px;font-weight:800;color:var(--cta)}
body.buy-page{--bar-h:0px}
body.buy-page .app{padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
body.buy-page .toast{bottom:calc(env(safe-area-inset-bottom) + 20px)}
.top a.sup[hidden]{display:none}
@media (min-width: 960px) {
body.buy-page .app{margin:0 auto;max-width:720px;padding:26px 40px 56px}
body.buy-page .toast{left:50%}
}
.tile b .mark{display:inline-block;margin-left:6px;vertical-align:1px;
font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
color:var(--brand-deep);background:var(--brand-soft);padding:2px 7px;
border-radius:var(--pill)}
.tile b .mark.hot{background:#FBEFD6;color:#8A5A0F}
.tile .row{display:flex;align-items:baseline;gap:7px;margin-top:8px}
.tile .row em{margin-top:0}
.tile .row i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--brand-deep);
background:var(--brand-soft);border-radius:var(--pill);padding:2px 7px}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;
padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(14px) saturate(1.4)}
.bar .in{max-width:460px;margin:0 auto;height:var(--bar-h);display:grid;grid-template-columns:repeat(4,1fr)}
.bar.adm .in{grid-template-columns:repeat(5,1fr)}
@media (max-width:959px){
.bar.px .in{grid-template-columns:repeat(5,1fr)}
.bar.px.adm .in{grid-template-columns:repeat(6,1fr)}
}
.bar .brand{display:none}
.bar a.sup{display:none}
.bar .tabs{display:contents}
.bar button{border:0;background:none;font-family:var(--font);cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;position:relative}
.bar button[hidden]{display:none}
.bar button svg{width:23px;height:23px;transition:transform .2s cubic-bezier(.22,1,.36,1)}
.bar button.on::before{content:'';position:absolute;top:6px;width:26px;height:3px;border-radius:var(--pill);
background:var(--cta)}
.screen{display:none}
.screen.on{display:block;animation:in .3s cubic-bezier(.22,1,.36,1) both}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tiles .tile{animation:rise .3s cubic-bezier(.22,1,.36,1) both}
.tiles .tile:nth-child(2n){animation-delay:.04s}
.tiles .tile:nth-child(n+3){animation-delay:.08s}
.tiles .tile:nth-child(n+5){animation-delay:.12s}
.tiles .tile:nth-child(n+7){animation-delay:.16s}
@media (prefers-reduced-motion: reduce){
.screen.on,.tar,.tiles .tile,.btn.wait::after{animation:none}
.btn,.tile,.tip,.act,.tar.pick,.opt,.seg .pin,.link button,.link button svg,
.me .cid,.me .cid .ic svg{transition:none}
.link.flash::after{animation:none}
.opt{animation:none}
.chip i{animation:none}
}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.tip{display:flex;align-items:center;gap:12px;
cursor:pointer;width:100%;text-align:left;font-family:var(--font);
transition:transform .12s ease,box-shadow .16s ease}
.tip:active{box-shadow:inset 0 2px 6px rgba(36,28,29,.10)}
.tip .ic{flex:0 0 auto;display:grid;place-items:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(36,28,29,.08)}
.tip b{display:block}
.tip span{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.tip .go{margin-left:auto}
.note{text-align:center}
.copy{display:flex;gap:8px;align-items:center;margin-top:12px;padding:12px;border-radius:var(--r);
background:var(--tint);border:1px dashed var(--line-2);font-size:13px;word-break:break-all}
.copy b{font-weight:700;color:var(--soft)}
.toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 16px);
transform:translate(-50%,20px);z-index:20;opacity:0;pointer-events:none;
background:rgba(44,37,37,.94);color:#fff;font-size:14px;font-weight:700;
padding:11px 18px;border-radius:var(--pill);box-shadow:0 8px 24px rgba(44,37,37,.28);
transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.gate{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;
justify-content:center;padding:32px 18px calc(120px + env(safe-area-inset-bottom))}
.gate[hidden]{display:none}
.gate-card{width:100%;max-width:404px;background:var(--card);border-radius:var(--r-lg);
padding:26px 24px 22px;text-align:center;box-shadow:var(--sh-lift),var(--edge);
border:1px solid var(--line);
animation:gate-in .42s cubic-bezier(.22,1,.36,1) both}
@keyframes gate-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
.gate-kuz{position:relative;width:112px;height:112px;margin:0 auto 14px}
.gate-kuz img{width:100%;height:100%;object-fit:cover;object-position:24% 42%;border-radius:50%;
background:var(--brand-soft);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--brand-soft),
0 10px 22px rgba(36,28,29,.14)}
.gate-badge{position:absolute;right:2px;bottom:2px;width:32px;height:32px;border-radius:50%;
display:grid;place-items:center;background:linear-gradient(180deg,#A04C51,var(--cta-deep));
box-shadow:0 0 0 3px #fff,0 4px 10px rgba(57,39,40,.32)}
.gate-badge svg{width:17px;height:17px}
.gate h1{font-size:25px;font-weight:800;color:var(--brand-deep);margin:0 0 6px;
letter-spacing:-.02em}
.gate-lead{color:var(--soft);margin:0 0 20px;font-size:14.5px;line-height:1.5}
.tgwrap{position:relative;isolation:isolate}
.tgbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:52px;
border:0;border-radius:var(--r);cursor:pointer;font-family:var(--font);
font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:#fff}
.tgbtn svg{width:22px;height:22px;flex:none}
.tgwrap.wait{cursor:progress}
.tgwrap.wait:active .tgbtn{filter:none}
.tgreal{position:absolute;left:50%;top:50%;z-index:2;opacity:0;
transform:translate(-50%,-50%) scale(1.6);overflow:hidden}
.tgreal iframe{display:block}
.tgspin{position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;z-index:3;
border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
opacity:0;pointer-events:none;animation:tgspin .8s linear infinite}
.tgwrap.wait .tgspin{opacity:1}
@keyframes tgspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.gate-card{animation:none}
.tgspin{animation-duration:2.4s}
}
.gate-fall{margin:12px 0 0;font-size:13.5px;color:var(--mute)}
.gate-fall a{color:var(--brand-deep);font-weight:700}
.gate-list{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
display:grid;gap:11px;text-align:left}
.gate-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--soft)}
.gate-list svg{width:19px;height:19px;flex:none;color:var(--brand)}
.gate-note{display:flex;align-items:flex-start;gap:8px;text-align:left;margin:16px 0 0;
padding:11px 12px;border-radius:var(--r-sm);background:var(--tint);
font-size:12.5px;line-height:1.45;color:var(--mute)}
.gate-note svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--brand)}
@media (min-width: 960px) {
:root { --rail: 252px}
.bar { top: 0; right: auto; width: var(--rail); height: 100vh;
padding: 20px 14px calc(20px + env(safe-area-inset-bottom));
border-top: 0; border-right: 1px solid var(--line);
background: rgba(255,255,255,.72) }
.bar .in { max-width: none; height: auto; display: flex; flex-direction: column; gap: 3px }
.bar button { flex-direction: row; justify-content: flex-start; gap: 12px;
height: 46px; padding: 0 12px; border-radius: 13px; font-size: 14.5px; font-weight: 700 }
.bar button .lb { font-size: 14.5px }
.bar button:hover { background: rgba(237,242,230,.7); color: var(--brand-deep) }
.bar button.on { background: var(--brand-soft) }
.bar button.on svg { transform: none }
.bar button.on::before { top: 50%; left: 2px; width: 3px; height: 22px;
transform: translateY(-50%) }
.app { max-width: none; margin: 0;
margin-left: max(var(--rail), calc(50vw - 360px));
padding: 26px 40px 56px }
.app > .top, .app > .screen { max-width: 640px; margin-left: 0; margin-right: 0 }
.top { gap: 12px; padding: 0 2px 6px }
.top .ava { width: 44px; height: 44px; font-size: 17px }
.top .who b { font-size: 18px }
.top .who span { font-size: 13px }
.top a.sup { height: 38px; font-size: 13.5px }
.top a.sup:hover { border-color: var(--line-strong); color: var(--cta-deep) }
.toast { left: calc(max(var(--rail), 50vw - 360px) + 360px); bottom: 28px }
.hero { margin-top: 8px; min-height: 224px }
.hero-in { min-height: 224px; max-width: 54%; padding: 28px 30px }
.hero .v { font-size: 40px }
.hero .m { font-size: 14.5px }
.hero .k { font-size: 12px }
#home-body, #profile-body, #ref-body, #shop-body {
display: flex; flex-direction: column; gap: 12px; margin-top: 16px }
#home-body > *, #profile-body > *, #ref-body > *, #shop-body > * { margin-top: 0 }
.tiles { display: flex; flex-direction: column; gap: 10px }
.acts { grid-template-columns: 1fr }
.tile { display: flex; align-items: center; gap: 12px; padding: 13px 16px }
.tile b { flex: 0 0 auto }
.tile span { margin-top: 0; flex: 1 }
.tile em { margin-top: 0; margin-left: auto; font-size: 16px }
.tile .row { margin-top: 0; margin-left: auto }
.card { padding: 16px 18px 18px }
.btn:hover { filter: brightness(1.05) }
.btn.ghost:hover { border-color: var(--line-strong); background: #fff }
.tar:hover, .tile:hover, .tip:hover, .act:hover, .opt:hover {
border-color: var(--line-strong); box-shadow: var(--sh-lift);
transform: translateY(-1px) }
.tar, .tile, .tip, .act, .opt { transition: transform .14s ease, box-shadow .18s ease,
border-color .18s ease }
.link button:hover { background: var(--brand-soft) }
.cid:hover { border-color: var(--line-strong) }
@media (prefers-reduced-motion: reduce) {
.tar:hover, .tile:hover, .tip:hover, .act:hover, .opt:hover { transform: none }
}
}
html::before{
background:
radial-gradient(1000px 420px at 82% -12%,#EFE6E0,transparent 62%),
linear-gradient(180deg,#E5E1DA,var(--page) 42%)}
.btn{
transition:background .16s ease,transform .1s ease}
.btn:hover{background:var(--cta-deep);filter:none;box-shadow:none}
.btn:active{
background:var(--cta-deep);
box-shadow:none}
.btn:focus-visible{outline:2px solid var(--cta-deep);outline-offset:2px}
.btn[disabled]{opacity:.5;box-shadow:none}
.tgbtn{
box-shadow:none;
transition:background .16s ease,transform .1s ease}
.tgwrap:active .tgbtn{box-shadow:none}
.tgwrap.wait:active .tgbtn{transform:none;box-shadow:none}
.seg .pin{
background:var(--card);
border:1px solid var(--line-2);
box-shadow:none}
.top .who b .nm-mark{
display:block;
max-width:100%}
.top .ava.mark{
background:none;
box-shadow:none;
overflow:visible}
.top .ava.mark img{
width:100%;
height:100%;
object-fit:contain}
@view-transition{ navigation:auto }
::view-transition-old(root){animation:pageOut .22s cubic-bezier(.3,0,.6,1) both}
::view-transition-new(root){animation:pageIn  .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes pageOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}}
.top{view-transition-name:appbar}
.petals{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.petals i{
position:absolute;
top:-6vh;
width:9px;
height:9px;
background:#D08B86;
border-radius:50% 0 50% 0;
opacity:0;
animation:petalFall linear infinite}
@keyframes petalFall{
0%   {opacity:0;  transform:translate3d(0,0,0) rotate(0deg)}
8%   {opacity:.20}
90%  {opacity:.20}
100% {opacity:0;  transform:translate3d(60px,112vh,0) rotate(420deg)}
}
.petals i:nth-child(1){left:3%;  width:7px;  height:7px;  animation-duration:27s; animation-delay:-4s}
.petals i:nth-child(2){left:9%;  width:5px;  height:5px;  animation-duration:35s; animation-delay:-19s}
.petals i:nth-child(3){left:15%; width:10px; height:10px; animation-duration:23s; animation-delay:-9s}
.petals i:nth-child(4){left:21%; width:6px;  height:6px;  animation-duration:39s; animation-delay:-26s}
.petals i:nth-child(5){left:27%; width:8px;  height:8px;  animation-duration:30s; animation-delay:-2s}
.petals i:nth-child(6){left:33%; width:5px;  height:5px;  animation-duration:44s; animation-delay:-33s}
.petals i:nth-child(7){left:39%; width:9px;  height:9px;  animation-duration:25s; animation-delay:-13s}
.petals i:nth-child(8){left:45%; width:7px;  height:7px;  animation-duration:37s; animation-delay:-21s}
.petals i:nth-child(9){left:51%; width:6px;  height:6px;  animation-duration:32s; animation-delay:-6s}
.petals i:nth-child(10){left:57%; width:10px; height:10px; animation-duration:28s; animation-delay:-30s}
.petals i:nth-child(11){left:63%; width:5px;  height:5px;  animation-duration:41s; animation-delay:-11s}
.petals i:nth-child(12){left:69%; width:8px;  height:8px;  animation-duration:26s; animation-delay:-24s}
.petals i:nth-child(13){left:75%; width:6px;  height:6px;  animation-duration:34s; animation-delay:-16s}
.petals i:nth-child(14){left:81%; width:9px;  height:9px;  animation-duration:29s; animation-delay:-1s}
.petals i:nth-child(15){left:87%; width:5px;  height:5px;  animation-duration:43s; animation-delay:-36s}
.petals i:nth-child(16){left:91%; width:7px;  height:7px;  animation-duration:31s; animation-delay:-8s}
.petals i:nth-child(17){left:95%; width:10px; height:10px; animation-duration:24s; animation-delay:-28s}
.petals i:nth-child(18){left:98%; width:6px;  height:6px;  animation-duration:38s; animation-delay:-14s}
@media(prefers-reduced-motion:reduce){
.petals{display:none}
::view-transition-old(root),::view-transition-new(root){animation:none}
}
.hero::after{box-shadow:inset 0 0 0 1px rgba(60,40,40,.14)}
.hero.dusk{background:var(--paper);border-color:var(--line-2)}
.chip{
background:rgba(243,239,233,.88);
border:1px solid rgba(120,80,80,.26);
color:var(--ink);
box-shadow:none;
-webkit-backdrop-filter:blur(2px);
backdrop-filter:blur(2px)}
.chip i{background:var(--seal);box-shadow:0 0 0 3px rgba(179,58,56,.16)}
.chip.off i{background:#A2432C;box-shadow:0 0 0 3px rgba(162,67,44,.16)}
.petals{z-index:0}
.tgbtn{background:var(--cta)}
.tgwrap:hover .tgbtn{background:var(--cta-deep);filter:none}
.tgwrap:active .tgbtn{background:var(--cta-deep);filter:none;transform:translateY(1px)}
.me::after{
z-index:1;
box-shadow:none}
.me>*{z-index:2}
.me.dusk{background:linear-gradient(135deg,#6B4A3C,#3A2622 74%);border-color:rgba(50,36,36,.5)}
.me.dusk::before{background-image:url('samurai-expired.webp')}
.me::after{
background:linear-gradient(100deg,
rgba(58,26,28,.30) 0%,
rgba(58,26,28,.14) 52%,
rgba(58,26,28,.28) 100%)}
.btn.ghost,
.tar,
.opt,
.tile{border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--card)}
.hero.dusk::before{
background:linear-gradient(95deg,
transparent 0%,transparent 34%,
rgba(231,227,220,.60) 56%,
rgba(231,227,220,.86) 76%,
rgba(231,227,220,.93) 100%)}
.petals i{will-change:auto}
.tar .feat li.off{color:var(--mute);opacity:.72}
.tar .feat li.off svg{color:var(--line-strong)}
.tar .feat{gap:6px;margin-top:11px}
.tar .feat li{line-height:1.35}
.howto { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: howto }
.howto li {
position: relative; padding-left: 32px; margin-top: 11px; counter-increment: howto;
}
.howto li::before {
content: counter(howto);
position: absolute; left: 0; top: 0;
width: 22px; height: 22px; border-radius: 50%;
display: grid; place-items: center;
background: var(--soft-red, var(--tint)); color: var(--brand-deep);
font-size: 12px; font-weight: 800;
}
.howto li b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink) }
.howto li span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--mute) }
.ask-c .fine { margin: 12px 0 0; font-size: 12px; color: var(--mute) }
#px-strip{grid-template-columns:repeat(2,1fr)}
.px-hint{margin:8px 2px 12px}