:root{
  --w:#FFFFFF; --w-2:rgba(255,255,255,.74); --w-3:rgba(255,255,255,.5);
  --page:#0E1116; --glass-line:rgba(255,255,255,.32);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--page);color:var(--w);font-family:var(--font-b,Manrope,system-ui,sans-serif);font-size:16px;line-height:1.5}
h1,h2,h3{font-family:var(--font-h,Onest,system-ui,sans-serif);font-weight:300;margin:0;text-wrap:balance;letter-spacing:-.025em}
p{margin:0}

.page{max-width:1240px;margin:0 auto;padding:52px 22px 96px}
.intro{max-width:70ch;margin-bottom:20px}
.intro .kicker{font-size:12px;color:var(--w-3);letter-spacing:.14em;text-transform:lowercase}
.intro h1{font-size:36px;font-weight:200;margin-top:12px}
.intro p{margin-top:14px;font-size:14.5px;color:var(--w-3);max-width:64ch}
.intro .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.intro .meta div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 14px}
.intro .meta .n{font-family:var(--font-h,Onest);font-weight:200;font-size:22px;line-height:1}
.intro .meta .l{font-size:10px;color:var(--w-3);margin-top:2px;letter-spacing:.04em}

.frames{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start}
.frame{width:302px}
.frame .lab{margin-top:14px;text-align:center;font-size:11.5px;color:var(--w-3);letter-spacing:.06em}
.frame .lab b{color:var(--w-2);font-weight:600}

.divider{width:100%;padding:40px 4px 4px;display:flex;align-items:baseline;gap:20px;border-top:1px solid rgba(255,255,255,.14);margin-top:8px}
.frames>.divider:first-child{border-top:none;margin-top:0;padding-top:0}
.divider .num{font-family:var(--font-h,Onest);font-weight:200;font-size:46px;color:rgba(255,255,255,.32);line-height:1;flex:none}
.divider .tx h2{font-family:var(--font-h,Onest);font-weight:300;font-size:23px;color:#fff}
.divider .tx p{font-size:12.5px;color:var(--w-3);margin-top:5px;max-width:64ch;line-height:1.5}

.phone{width:302px;height:636px;border-radius:46px;background:linear-gradient(160deg,#4A4E57,#0B0D11 46%);padding:6px;box-shadow:0 34px 64px -28px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.09)}
.screen{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden;display:flex;flex-direction:column;background:#1A1F2A}

.mesh{position:absolute;inset:-12%;z-index:0}
.mesh i{position:absolute;display:block;border-radius:50%;filter:blur(46px)}
.mesh.cold i:nth-child(1){width:300px;height:300px;left:-70px;top:-40px;background:var(--mesh-c1,#2C5CE0)}
.mesh.cold i:nth-child(2){width:260px;height:260px;right:-90px;top:120px;background:var(--mesh-c2,#7B4FE0);opacity:.85}
.mesh.cold i:nth-child(3){width:280px;height:280px;left:-40px;bottom:-90px;background:var(--mesh-c3,#1E3E9C)}
.mesh.cold i:nth-child(4){width:150px;height:150px;right:10px;bottom:40px;background:var(--mesh-c4,#E86BC0);opacity:var(--mesh-c4-a,.5)}
.mesh.mid i:nth-child(1){width:290px;height:290px;left:-90px;top:-50px;background:var(--mesh-m1,#5B4BE8)}
.mesh.mid i:nth-child(2){width:250px;height:250px;right:-70px;top:80px;background:var(--mesh-m2,#E8659A)}
.mesh.mid i:nth-child(3){width:260px;height:260px;left:-20px;bottom:-80px;background:var(--mesh-m3,#F0894A);opacity:.9}
.mesh.mid i:nth-child(4){width:140px;height:140px;right:30px;bottom:120px;background:var(--mesh-m4,#FFC36B);opacity:var(--mesh-m4-a,.55)}
.mesh.warm i:nth-child(1){width:300px;height:300px;left:-80px;top:-60px;background:var(--mesh-w1,#F2612F)}
.mesh.warm i:nth-child(2){width:250px;height:250px;right:-80px;top:110px;background:var(--mesh-w2,#FFA23D)}
.mesh.warm i:nth-child(3){width:270px;height:270px;left:-30px;bottom:-90px;background:var(--mesh-w3,#C7391F)}
.mesh.warm i:nth-child(4){width:150px;height:150px;right:20px;bottom:60px;background:var(--mesh-w4,#FFD98A);opacity:var(--mesh-w4-a,.6)}

.screen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,18,.28),rgba(10,12,18,.1) 35%,rgba(10,12,18,.44))}

.island{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:82px;height:24px;background:#0A0C10;border-radius:16px;z-index:9}
.status{position:relative;z-index:5;flex:none;display:flex;justify-content:space-between;align-items:center;padding:16px 22px 6px;font-weight:600;font-size:13px;color:var(--w)}
.status .ic{display:flex;align-items:center;gap:5px}
.home-ind{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:106px;height:4px;border-radius:3px;background:#fff;opacity:.55;z-index:9}
.dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:5px}
.dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);transition:all .25s ease}
.dots i.on{width:15px;border-radius:3px;background:#fff}

.content{position:relative;z-index:4;flex:1;overflow:hidden;padding:10px 16px 30px;display:flex;flex-direction:column;gap:12px}

.glass{background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.08));backdrop-filter:blur(26px) saturate(1.25);-webkit-backdrop-filter:blur(26px) saturate(1.25);border:1px solid var(--glass-line);border-radius:29px;padding:17px 16px;box-shadow:0 18px 34px -26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.28)}
.glass.tight{padding:15px 16px;border-radius:23px}
.glass.accent{border-color:color-mix(in srgb,var(--accent,#FFC36B) 55%,transparent);box-shadow:0 18px 34px -26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px color-mix(in srgb,var(--accent,#FFC36B) 18%,transparent)}

.kick{font-size:10.5px;color:var(--w-3);letter-spacing:.13em;text-transform:lowercase}
.title{font-family:var(--font-h,Onest);font-weight:var(--title-weight,200);font-size:28px;line-height:1.07;letter-spacing:var(--title-tracking,-.03em)}
.title.sm{font-size:21.5px;font-weight:300}
.body{font-size:12.3px;color:var(--w-2);line-height:1.48}
.body b{color:#fff;font-weight:600}
.tiny{font-size:10px;color:var(--w-3);line-height:1.4}
.micro{font-size:9px;color:var(--w-3);line-height:1.35}

.figure{display:flex;align-items:baseline;gap:8px}
.figure .n{font-family:var(--font-h,Onest);font-weight:200;font-size:52px;line-height:.9;letter-spacing:-.04em}
.figure .u{font-size:11.5px;color:var(--w-2);display:inline-flex;align-items:center}
.pulse-dot{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#8FE3A6;flex:none}

.shimmer{background:linear-gradient(100deg,#fff 25%,#BFD0FF 45%,#fff 65%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent}

.list{display:flex;flex-direction:column}
.li{display:flex;gap:11px;align-items:flex-start;padding:10.5px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.li:last-child{border-bottom:none}
.li .tx{flex:1;min-width:0}
.li .ic{width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24)}
.li .t{font-size:12px;font-weight:600;font-family:var(--font-h,Onest);letter-spacing:-.01em}
.li .s{font-size:10.5px;color:var(--w-2);margin-top:1px;line-height:1.4}
.li .ic.ok{background:rgba(255,255,255,.9);color:#15181F;border-color:transparent}
.li .go{margin-left:auto;flex:none;color:var(--w-3)}
.li.locked{opacity:.55}
.li.dim{opacity:.5}

.linkrow{display:flex;align-items:center;gap:11px;padding:2px 0}
.linkrow .b{width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);color:var(--w-2)}
.linkrow .t{font-size:11.5px;font-weight:600;font-family:var(--font-h,Onest);letter-spacing:-.01em}
.linkrow .s{font-size:10px;color:var(--w-3);margin-top:1px;line-height:1.4}
.linkrow .go2{margin-left:auto;flex:none;color:var(--w-3)}

.pair,.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cellv{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:12px 13px}
.cellv .n{font-family:var(--font-h,Onest);font-weight:200;font-size:26px;line-height:1;letter-spacing:-.03em}
.cellv .l{font-size:9.5px;color:var(--w-2);margin-top:5px;line-height:1.35}

.pillbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.92);color:#15181F;border-radius:999px;padding:12px 14px 12px 18px;font-size:12.5px;font-weight:600;font-family:Onest}
.pillbtn .a{width:27px;height:27px;border-radius:50%;background:var(--accent-btn,#15181F);color:var(--accent-ink,#fff);display:grid;place-items:center;flex:none}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.26);font-size:9.5px;font-weight:600;font-family:Onest}

/* brand signature */
.brandmark{display:inline-flex;align-items:center;gap:7px}
.brandmark .ring{width:15px;height:15px;border-radius:50%;border:1.3px solid rgba(255,255,255,.5);position:relative;flex:none}
.brandmark .ring i{position:absolute;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#E8659A,#FFC36B);top:-1.5px;right:-.5px}
.brandmark .wd{font-family:Onest;font-weight:300;font-size:11.5px;letter-spacing:.03em;color:var(--w-3)}
.brandmark.subtle{gap:6px;opacity:.55}
.brandmark.subtle .ring{width:12px;height:12px;border-width:1.1px}
.brandmark.subtle .ring i{width:4px;height:4px;top:-1px;right:-.5px}
.brandmark.subtle .wd{font-size:9.5px}

/* PWA install button — hero element */
.pwa{position:relative;display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:24px;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.82));color:#15181F;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.5) inset}
.pwa .ico{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--mesh-m1,#5B4BE8),var(--mesh-m2,#E8659A) 55%,var(--mesh-m3,#F0894A));box-shadow:0 8px 18px -6px color-mix(in srgb,var(--mesh-m1,#5B4BE8) 70%,transparent)}
.pwa .t{font-family:var(--font-h,Onest);font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.pwa .s{font-size:10.5px;color:rgba(21,24,31,.62);margin-top:2px}
.pwa .go{margin-left:auto;width:30px;height:30px;border-radius:50%;background:#15181F;color:#fff;display:grid;place-items:center;flex:none}
.pwa::before{content:"";position:absolute;top:0;left:-60%;width:34%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg)}

.sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;border-radius:30px 30px 41px 41px;padding:14px 18px 30px;
  background:linear-gradient(160deg,rgba(28,32,44,.96),rgba(14,17,22,.98));border-top:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 -24px 50px rgba(0,0,0,.6)}
.sheet::before{content:"";display:block;width:36px;height:4px;border-radius:3px;background:rgba(255,255,255,.3);margin:0 auto 14px}
.os{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.os:last-of-type{border-bottom:none}
.os .b{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22)}
.os .t{font-size:12.5px;font-weight:600;font-family:Onest}
.os .s{font-size:11px;color:var(--w-2);margin-top:2px;line-height:1.45}
.kbd{display:inline-block;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.18);font-size:10px;font-weight:600}

.steps{display:flex;flex-direction:column}
.stp{display:flex;gap:11px;align-items:flex-start;padding:9px 0}
.stp .n{width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10px;font-weight:700;font-family:var(--font-h,Onest);background:rgba(255,255,255,.9);color:#15181F}
.stp p{font-size:11.5px;color:var(--w-2);line-height:1.4}
.stp p b{color:#fff;font-weight:600}

/* intent matrix */
.intent{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.intent:last-child{border-bottom:none}
.intent .av{width:29px;height:29px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.26)}
.intent .t{font-size:12.5px;font-weight:600;font-family:var(--font-h,Onest);letter-spacing:-.01em}
.intent .s{font-size:10.5px;color:var(--w-2);margin-top:2px}
.intent .r{margin-left:auto;text-align:right;flex:none}

/* messenger */
.mhead{display:flex;align-items:center;gap:10px}
.mhead .av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}
.mhead .n{font-family:var(--font-h,Onest);font-weight:500;font-size:15px}
.mhead .s{font-size:10px;color:var(--w-3);margin-top:1px}
.msgs{display:flex;flex-direction:column;gap:7px;flex:1;padding-top:6px}
.msg{max-width:78%;padding:9px 13px;font-size:12.5px;border-radius:17px;line-height:1.4}
.msg.them{align-self:flex-start;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-bottom-left-radius:6px}
.msg.me{align-self:flex-end;background:rgba(255,255,255,.92);color:#15181F;font-weight:500;border-bottom-right-radius:6px}
.msg time{display:block;font-size:9px;opacity:.5;margin-top:2px;font-weight:400}
.msg.sys{align-self:center;background:transparent;color:var(--w-3);font-size:10px;padding:4px 6px;text-align:center;max-width:90%}
.inbar{display:flex;align-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:11px 16px;font-size:12.5px;color:var(--w-3);margin-bottom:12px}
.inbar span{margin-left:auto;color:#fff}

/* card table */
.felt{position:relative;border-radius:24px;height:236px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.22),rgba(10,12,18,.42) 72%);border:1px solid rgba(255,255,255,.22)}
.seat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--w-2)}
.seat .av{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}
.pc{width:35px;height:50px;border-radius:6px;background:#FFFDF9;color:#15181F;display:flex;flex-direction:column;justify-content:space-between;padding:4px 5px;font-family:var(--font-h,Onest);font-weight:600;font-size:11.5px;line-height:1;box-shadow:0 6px 14px rgba(0,0,0,.4);flex:none}
.pc.red{color:#E4482A}
.pc b{display:block;font-size:13px;align-self:flex-end}
.hand{display:flex;justify-content:center;position:absolute;left:0;right:0;bottom:8px}
.hand .pc{margin-left:-11px;transform:rotate(var(--r,0))}

/* storefront */
.shopgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shopcard{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:13px}
.shopcard .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);margin-bottom:9px}
.shopcard .t{font-size:11.5px;font-weight:600;font-family:var(--font-h,Onest);line-height:1.3}
.shopcard .p{font-size:11px;color:var(--w-2);margin-top:4px;font-family:var(--font-h,Onest);font-weight:600}

.sw{width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);position:relative;flex:none}
.sw i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.sw.on{background:var(--accent,#3CA089);border-color:transparent}
.sw.on i{left:18px}

.check{display:flex;gap:9px;align-items:flex-start;padding:8px 0}
.check .dot{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#15181F;margin-top:1px}
.check p{font-size:11.5px;color:var(--w-2);line-height:1.4}
.check p b{color:#fff;font-weight:600}

/* conversation list */
.convrow{display:flex;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.convrow:last-child{border-bottom:none}
.convrow.locked{opacity:.6}
.convrow .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.26)}
.convrow .tx{flex:1;min-width:0}
.convrow .n{font-size:12.5px;font-weight:600;font-family:var(--font-h,Onest);display:flex;align-items:center;gap:6px}
.convrow .p{font-size:10.5px;color:var(--w-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convrow .meta{flex:none;text-align:right}
.convrow .t{font-size:9px;color:var(--w-3)}
.convrow .udot{width:8px;height:8px;border-radius:50%;background:#8FE3A6;margin-left:auto;margin-top:5px}

/* lock screen */
.lock{display:flex;flex-direction:column;align-items:center;padding-top:22px}
.lock .tm{font-family:var(--font-h,Onest);font-weight:200;font-size:56px;letter-spacing:-.02em;line-height:1}
.lock .dt{font-size:12px;color:var(--w-2);margin-top:4px}
.notifcard{display:flex;gap:11px;align-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);border-radius:18px;padding:13px 15px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);margin-top:30px;width:100%}
.notifcard .av{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.26)}
.notifcard .t{font-size:12px;font-weight:600;font-family:Onest}
.notifcard .s{font-size:10.5px;color:var(--w-2);margin-top:1px}

/* settings rows */
.btnrow{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:600;font-family:Onest}
.btnrow .ic{width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.14)}
.btnrow.danger{color:#FFB3AE}
.btnrow.quiet{background:rgba(255,255,255,.94);color:#15181F}
.btnrow.quiet .ic{background:rgba(21,24,31,.1)}
.stack{display:flex;flex-direction:column;gap:9px}

/* personal cabinet */
.entrycard{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.09));border:1px solid rgba(255,255,255,.34);box-shadow:0 16px 30px -22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.entrycard .av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.32);position:relative}
.entrycard .t{font-family:var(--font-h,Onest);font-weight:600;font-size:14.5px}
.entrycard .s{font-size:10.5px;color:var(--w-2);margin-top:2px}
.entrycard .go{margin-left:auto;color:var(--w-2);flex:none}
.avatar-lg{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);flex:none}
.emailcard{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:16px}
.emailcard .addr{font-family:var(--font-h,Onest);font-weight:500;font-size:13.5px;word-break:break-all;color:#fff}
.emailcard .row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}

@media (prefers-reduced-motion: no-preference){
  .frame{opacity:0;transform:translateY(16px);animation:riseIn .6s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i,0)*45ms)}
  .mesh i{animation:drift 17s ease-in-out infinite}
  .mesh i:nth-child(1){animation-delay:-1s}
  .mesh i:nth-child(2){animation-delay:-5s}
  .mesh i:nth-child(3){animation-delay:-9s}
  .mesh i:nth-child(4){animation-delay:-13s}
  .pulse-dot{animation:pulseDot 2.4s ease-out infinite}
  .shimmer{animation:shimmerText 5s ease-in-out infinite}
  .pwa::before{animation:sheen 5s ease-in-out infinite}
  /* ТЗ 104 «дыхание стекла»: почти незаметная прозрачность, период ~8с, фон живёт — стекло чуть-чуть */
  .glass{animation:glassBreath 8s ease-in-out infinite}
  .hero>*{opacity:0;transform:translateY(10px);animation:heroIn .55s cubic-bezier(.16,1,.3,1) forwards}
  .hero>*:nth-child(1){animation-delay:.56s}
  .hero>*:nth-child(2){animation-delay:.64s}
  .hero>*:nth-child(3){animation-delay:.72s}
  .hero>*:nth-child(4){animation-delay:.82s}
  .hero>*:nth-child(5){animation-delay:.9s}
  .hero>*:nth-child(6){animation-delay:.98s}
  .hero>*:nth-child(7){animation-delay:1.06s}
  .hero>*:nth-child(8){animation-delay:1.14s}
}
@keyframes riseIn{to{opacity:1;transform:translateY(0)}}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9px,-13px) scale(1.05)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(143,227,166,.55)}50%{box-shadow:0 0 0 5px rgba(143,227,166,0)}}
@keyframes shimmerText{0%{background-position:200% center}100%{background-position:-40% center}}
@keyframes sheen{0%,15%{left:-60%}55%,100%{left:130%}}
@keyframes glassBreath{0%,100%{opacity:1}50%{opacity:.97}}
.pwa,.pillbtn,.entrycard{transition:transform .15s ease}
.pwa:hover,.pillbtn:hover,.entrycard:hover{transform:translateY(-1px)}
.pwa:active,.pillbtn:active,.entrycard:active{transform:scale(.98)}

@media (max-width:700px){.frames{justify-content:center}}

/* ===== flash / toast — системное сообщение поверх меша (ТЗ 059) =====
   Стекло сверху, узкое — шторка в миниатюре. Тап убирает. Ошибка — текстом #FFB3AE, не красным фоном. */
.toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);width:min(92vw,398px);z-index:40;cursor:pointer}
.toast .glass{padding:12px 15px;border-radius:19px}
.toast .t{font-family:var(--font-h,Onest);font-weight:600;font-size:12.5px;letter-spacing:-.01em}
.toast .s{font-size:11.5px;color:var(--w-2);margin-top:2px;line-height:1.4}
.toast.err .glass{border-color:rgba(255,179,174,.55)}
.toast.err .t{color:#FFB3AE}
/* выбранная карта в руке (экран 13): приподнята и обведена; поворот из --r сохраняется */
.pc.picked{outline:2px solid #fff;outline-offset:1px}
.hand .pc.picked{transform:translateY(-6px) rotate(var(--r,0))}

/* ===== ТЗ 102: телефон в рамке на широких экранах =====
   Ниже брейкпойнта правил для .stage нет вовсе — обёртка ничего не стилизует, ни
   одного пикселя на телефоне не меняется. Мотив фона — через .screen::before (не
   ::after: он уже занят виньеткой альбома чуть выше по файлу) — только у .screen
   (и её потомков) есть переменные --mesh-* текущего почерка места, у предка (.stage)
   их нет: CSS custom properties наследуются вниз по дереву, не вверх. position:fixed
   на этом псевдоэлементе намеренно: он должен закрыть весь вьюпорт позади рамки, а
   не обрезаться по border-radius/overflow:clip самой .screen (в норме fixed-потомок
   не учитывает overflow предка, если тот не задаёт transform/filter/contain — здесь
   не задаёт). */
@media (min-width:900px){
  .stage{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:5vh 24px}
  .stage .app{min-height:0}
  .stage .screen{width:430px;max-width:430px;height:min(94vh,880px);min-height:0;border-radius:44px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 60px 120px -40px rgba(0,0,0,.75)}
  .stage .screen::before{content:"";position:fixed;inset:-15vh;z-index:-1;pointer-events:none;background-color:var(--page);background-image:radial-gradient(circle at 30% 25%,var(--mesh-m1,#5B4BE8) 0%,transparent 46%),radial-gradient(circle at 75% 78%,var(--mesh-m2,#E8659A) 0%,transparent 48%);filter:blur(110px);opacity:.24}
}