/* ==========================================================================================
   Moloko 2.0 on the web — the same design as the app's "New design" (Settings → Design).
   Everything is scoped to html.v2, so switching back is one class. Two faces: Unbounded for
   what you look at, Manrope for what you read. One warm light, a little grain, cream rims,
   glass that floats, and motion that settles instead of bouncing.
   ========================================================================================== */
@property --v2lx{syntax:'<percentage>';inherits:true;initial-value:28%;}
@property --v2ly{syntax:'<percentage>';inherits:true;initial-value:6%;}
html.v2{--v2-disp:'Unbounded',system-ui,sans-serif;--v2-text:'Manrope',system-ui,-apple-system,sans-serif;
  --v2-out:cubic-bezier(.23,1,.32,1);--v2-io:cubic-bezier(.77,0,.175,1);--v2-sheet:cubic-bezier(.32,.72,0,1);
  --v2-drop:#2c2318;--v2-dropTx:#fffdf7;--v2-ring:#fffdf7;--v2-shadow:rgba(44,35,24,.16);
  transition:--v2lx .9s cubic-bezier(.65,0,.35,1),--v2ly .9s cubic-bezier(.65,0,.35,1);}
html.v2[data-theme="cocoa"]{--v2-drop:#fffdf7;--v2-dropTx:#2c2318;--v2-shadow:rgba(0,0,0,.45);}
html.v2[data-v2tab="discover"]{--v2lx:28%;--v2ly:4%;}
html.v2[data-v2tab="milk"]{--v2lx:74%;--v2ly:12%;}
html.v2[data-v2tab="chats"]{--v2lx:18%;--v2ly:22%;}
html.v2[data-v2tab="me"]{--v2lx:62%;--v2ly:2%;}
html.v2[data-v2tab="history"],html.v2[data-v2tab="astro"]{--v2lx:40%;--v2ly:10%;}
html.v2 body{font-family:var(--v2-text);}
html.v2 :is(#app,#profileView,#chat,#room,#find,.modal-wrap,#gate,#recorder,#uploadOverlay,#selfReveal,#matchOverlay,.app-alert,#settingsPage,#mePlayer){font-family:var(--v2-text);}
html.v2 :is(#app,#profileView,#chat,#room,#find,.modal-wrap,#gate,#recorder,#uploadOverlay,#selfReveal,#matchOverlay,.app-alert,#settingsPage) :is(h1,h2,h3){font-family:var(--v2-disp);font-weight:600;letter-spacing:-.6px;}

/* ---------------------------------------------------------------- the ground: one light + grain */
html.v2 .app-bg{background:radial-gradient(95vmax 95vmax at var(--v2lx) var(--v2ly),rgba(var(--p-glow),.26),rgba(var(--p-glow),.09) 38%,transparent 64%),var(--p-bg);}
html.v2 .app-bg i{display:none;}
html.v2 .app-bg::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;pointer-events:none;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
html.v2[data-theme="cocoa"] .app-bg::after{opacity:.09;}
html.v2 .app-bg::before{content:"";position:absolute;width:70vmax;height:70vmax;left:calc(var(--v2lx) - 35vmax);top:calc(var(--v2ly) - 30vmax);border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--p-glow),.16),transparent);animation:v2Breathe 6.4s ease-in-out infinite alternate;}
@keyframes v2Breathe{from{transform:scale(1);opacity:.8;}to{transform:scale(1.045);opacity:1;}}

/* ---------------------------------------------------------------- the tab bar: a floating glass pill, one drop of cream */
html.v2 #nav{left:14px;right:14px;bottom:max(10px,calc(env(safe-area-inset-bottom) - 6px));height:72px;padding:0;border-radius:34px;max-width:560px;margin:0 auto;
  border:1px solid rgba(44,35,24,.12);border-top-color:rgba(44,35,24,.12);background:rgba(255,253,248,.74);box-shadow:0 18px 44px var(--v2-shadow);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35);view-transition-name:v2nav;z-index:40;}
html.v2[data-theme="cocoa"] #nav{background:rgba(26,19,12,.64);border-color:rgba(255,250,240,.16);}
html.v2 #nav .nav-btn[data-tab="astro"]{display:none;}
html.v2 #nav .nav-btn{position:relative;z-index:1;justify-content:flex-start;padding-top:8px;gap:3px;color:var(--p-mute);font:800 10.5px var(--v2-text);letter-spacing:.2px;}
html.v2 #nav .nav-btn::after{content:none;}
html.v2 #nav .nav-btn .ni{width:46px;height:46px;border-radius:50%;transform:none;transition:color .25s;}
html.v2 #nav .nav-btn .ni svg{width:23px;height:23px;stroke-width:2;}
html.v2 #nav .nav-btn.active{color:var(--p-text);}
html.v2 #nav .nav-btn.active .ni{color:var(--v2-dropTx);transform:none;}
html.v2 #nav .nav-btn.active .ni svg{stroke-width:2.3;}
html.v2 #nav .nav-badge{top:6px;left:calc(50% + 8px);}
html.v2 .v2-drop{position:absolute;top:8px;left:0;width:46px;height:46px;border-radius:23px;background:var(--v2-drop);z-index:0;pointer-events:none;
  transform:translateX(var(--dx,0px));transition:transform .34s var(--v2-out),width .2s var(--v2-out);view-transition-name:v2drop;
  box-shadow:0 6px 18px rgba(var(--p-glow),.28);}
html.v2 .v2-drop.stretch{transition:transform .34s var(--v2-out),width .16s ease-out;}
html.v2 #app .panel{padding-bottom:110px;}

/* ---------------------------------------------------------------- headers */
html.v2 #app .panel-head{padding-top:max(14px,env(safe-area-inset-top));align-items:flex-end;}
html.v2 #app .panel-head .ph-ic{display:none;}
html.v2 #app .panel-head h2{font:600 28px/33px var(--v2-disp);letter-spacing:-.8px;}
html.v2 #app .panel-sub{font:500 14.5px/20.5px var(--v2-text);color:var(--p-soft);}
html.v2 .topbar .brand-name{font:600 20px var(--v2-disp);letter-spacing:-.5px;}
html.v2 .beta-tag{font:800 9.5px var(--v2-text);letter-spacing:1.4px;}
html.v2 .sec-label,html.v2 .set-label{font:800 11px var(--v2-text);letter-spacing:1.8px;text-transform:uppercase;color:var(--p-mute);}

/* ---------------------------------------------------------------- Discover */
html.v2 .slide .circ-ring,html.v2 .slide.on .circ-ring{border:3px solid var(--v2-ring);box-shadow:0 28px 80px -24px rgba(0,0,0,.7),0 0 70px -10px rgba(var(--p-glow),.32) !important;}
html.v2 .slide .circ-holder{box-shadow:none;}
html.v2 .slide .who-n{font:600 26px/32px var(--v2-disp);letter-spacing:-.8px;}
html.v2 .slide .meta-row{font:600 13.5px var(--v2-text);}
html.v2 .slide .cap{font:500 14.5px/20.5px var(--v2-text);color:var(--p-soft);}
html.v2 .sound-pill{font:700 12.5px var(--v2-text);background:rgba(23,17,11,.5);color:#fffdf7;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
html.v2 .disc-actions{gap:12px;align-items:center;}
html.v2 .disc-actions{bottom:calc(72px + max(10px, env(safe-area-inset-bottom) - 6px) + 18px);width:min(92vw,420px);}
html.v2 .disc-actions .skip-btn{flex:none;width:58px;min-width:58px;height:58px;padding:0;border-radius:50%;font-size:0;gap:0;background:var(--p-glass2);border:1px solid var(--p-line);color:var(--p-text);}
html.v2[data-theme="milk"] .disc-actions .skip-btn{background:var(--p-glass2);}
html.v2 .disc-actions .skip-btn svg{width:20px;height:20px;}

/* ---------------------------------------------------------------- hold to pour (Discover, a profile, Milk) */
html.v2 :is(.pour-btn,.mk-pour,.pv-reach).v2-hold{position:relative;overflow:hidden;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;
  background:var(--p-glass) !important;color:var(--p-text) !important;border:1.5px solid rgba(138,82,32,.45);box-shadow:0 10px 36px rgba(var(--p-glow),.22) !important;
  font:800 16px var(--v2-text) !important;transition:transform .12s var(--v2-out);}
html.v2[data-theme="cocoa"] :is(.pour-btn,.mk-pour,.pv-reach).v2-hold{border-color:rgba(234,169,100,.55);background:rgba(255,250,240,.08) !important;}
html.v2 .v2-hold::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,var(--p-accentB),var(--p-accent));
  transform-origin:left center;transform:scaleX(var(--p,0));}
html.v2 .v2-hold.holding{transform:scale(.97);}
html.v2 .v2-hold.holding,html.v2 .v2-hold.done{color:var(--p-on) !important;}
html.v2 .v2-hold svg{color:var(--p-accentB);transition:color .2s;}
html.v2 .v2-hold.holding svg,html.v2 .v2-hold.done svg{color:var(--p-on);}
html.v2 .v2-hold .ripple{display:none;}
html.v2 .pour-btn.v2-hold{flex:1;max-width:340px;height:58px;padding:0 24px;border-radius:100px;}

/* ---------------------------------------------------------------- a profile */
html.v2 #profileView .pv-circ{width:330px;height:330px;max-width:74vw;max-height:74vw;border:4px solid var(--v2-ring);box-shadow:0 30px 80px -26px rgba(0,0,0,.7),0 0 70px -12px rgba(var(--p-glow),.3);}
html.v2 #profileView .pv-title{font:600 30px/36px var(--v2-disp);letter-spacing:-.9px;}
html.v2 #profileView .pv-handle{font:700 14px var(--v2-text);color:var(--p-accentB);}
html.v2 #profileView .pv-bio{font:500 15px/22px var(--v2-text);}
html.v2 #profileView .pv-name{font:600 16px var(--v2-disp);}
html.v2 #profileView .pv-others-label{font:800 11px var(--v2-text);letter-spacing:1.8px;text-transform:uppercase;color:var(--p-mute);}
html.v2 #profileView .pv-cell{border:2.5px solid var(--v2-ring);border-radius:50%;}
html.v2 #profileView .pv-actions .pv-reach{width:100%;max-width:340px;height:58px;border-radius:100px;}

/* ---------------------------------------------------------------- Milk: a card at a time, two tabs */
html.v2 .v2-seg{position:relative;display:flex;margin:14px 20px 4px;padding:4px;border-radius:100px;background:var(--p-glass);border:1px solid var(--p-line);}
html.v2 .v2-seg button{flex:1;position:relative;z-index:1;padding:10px 0;border-radius:100px;font:800 13.5px var(--v2-text);color:var(--p-soft);background:none;transition:color .25s;}
html.v2 .v2-seg button.on{color:var(--v2-dropTx);}
html.v2 .v2-seg i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:100px;background:var(--v2-drop);transition:transform .34s var(--v2-out);}
html.v2 .v2-seg.two i{transform:translateX(100%);}
html.v2 #milk.v2-waiting #milkList,html.v2 #milk:not(.v2-waiting) #outgoingList,html.v2 #milk:not(.v2-waiting) #outgoingLabel{display:none !important;}
html.v2 #milk.v2-waiting #outgoingLabel{display:none !important;}
html.v2 #milkList .milk-card.mk-row{flex-direction:column;align-items:center;text-align:center;padding:26px 20px 22px;border-radius:32px;gap:14px;margin:10px 20px 0;}
html.v2 #milkList .mk-av{width:min(64vw,260px);height:min(64vw,260px);border-radius:50%;border:4px solid var(--v2-ring);box-shadow:0 26px 70px -24px rgba(0,0,0,.6),0 0 60px -14px rgba(var(--p-glow),.32);}
html.v2 #milkList .mk-name{font:600 24px/30px var(--v2-disp);letter-spacing:-.6px;}
html.v2 #milkList .mk-body{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
html.v2 #milkList .mk-meta{justify-content:center;}
html.v2 #milkList .mk-pour{width:100%;max-width:320px;height:56px;margin-top:6px;border-radius:100px;}
html.v2 #outgoingList .milk-card{border-radius:22px;}
html.v2 #outgoingList .mk-av,html.v2 #historyList .mk-av{border:2.5px solid var(--v2-ring);}
html.v2 .mk-name{font-family:var(--v2-disp);font-weight:600;letter-spacing:-.3px;}

/* ---------------------------------------------------------------- Chats: new matches as circles, then the talks */
html.v2 .v2-strip{display:flex;gap:16px;overflow-x:auto;padding:4px 20px 6px;scrollbar-width:none;}
html.v2 .v2-strip::-webkit-scrollbar{display:none;}
html.v2 .v2-new{display:flex;flex-direction:column;align-items:center;gap:7px;width:76px;flex:none;background:none;border:0;color:inherit;cursor:pointer;}
html.v2 .v2-new .av{width:72px;height:72px;border-radius:50%;padding:2px;border:2.5px solid var(--p-accentB);box-sizing:border-box;transition:transform .2s var(--v2-out);}
html.v2 .v2-new:active .av{transform:scale(.93);}
html.v2 .v2-new img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:var(--p-panel2);}
html.v2 .v2-new b{font:700 13px var(--v2-text);max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html.v2 .v2-lbl{margin:22px 20px 10px;font:800 11px var(--v2-text);letter-spacing:1.8px;text-transform:uppercase;color:var(--p-mute);}
html.v2 .chat-row.v2-talk{background:none !important;border:0 !important;box-shadow:none !important;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding:10px 20px;width:100%;}
html.v2 .chat-row.v2-talk .cr-av{width:58px;height:58px;border-radius:50%;border:2.5px solid var(--v2-ring);box-sizing:border-box;}
html.v2 .chat-row.v2-talk .cr-name{font:600 16px var(--v2-disp);letter-spacing:-.2px;display:flex;align-items:baseline;gap:8px;}
html.v2 .chat-row.v2-talk .cr-name small{margin-left:auto;font:600 12.5px var(--v2-text);color:var(--p-mute);letter-spacing:0;}
html.v2 .chat-row.v2-talk .cr-last{font:500 14.5px var(--v2-text);color:var(--p-soft);}
html.v2 .chat-row.v2-talk .cr-go{display:none;}

/* ---------------------------------------------------------------- a chat */
html.v2 #chat .chat-head{background:transparent;border-bottom:.5px solid var(--p-chatLine);}
html.v2 #chat .chat-avatar-wrap{width:40px;height:40px;border-radius:50%;border:2px solid var(--v2-ring);padding:1px;box-sizing:border-box;overflow:hidden;}
html.v2 #chat .chat-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;}
html.v2 #chat .chat-name{font:600 16px var(--v2-disp);letter-spacing:-.2px;}
html.v2 #chat .chat-intent{font:600 12.5px var(--v2-text);color:var(--p-mute);}
html.v2 .bubble{border-radius:20px;padding:10px 14px;font:500 15px/21px var(--v2-text);max-width:80%;}
html.v2 .bubble.me,html.v2[data-theme="cocoa"] .bubble.me{background:linear-gradient(135deg,var(--p-accentB),var(--p-accent));color:var(--p-on);border-bottom-right-radius:6px;}
html.v2 .bubble.them{border-bottom-left-radius:6px;}
html.v2 .bubble.emo{background:none !important;border:0 !important;}
html.v2 .chat-compose{border-top:.5px solid var(--p-chatLine);gap:8px;}
html.v2 .chat-input{border-radius:23px;min-height:46px;font:500 16px var(--v2-text);}
html.v2 .chat-send{width:46px;height:46px;border-radius:50%;}
html.v2 .v2-openers{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 24px 12px;margin-top:auto;}
html.v2 .v2-openers .face{width:120px;height:120px;border-radius:50%;border:3px solid var(--v2-ring);overflow:hidden;background:var(--p-panel2);}
html.v2 .v2-openers .face img{width:100%;height:100%;object-fit:cover;display:block;}
html.v2 .v2-openers h3{margin:14px 0 0;font:600 21px/26px var(--v2-disp);text-align:center;}
html.v2 .v2-openers p{margin:4px 0 10px;font:500 14.5px var(--v2-text);color:var(--p-soft);text-align:center;}
html.v2 .v2-openers button{width:100%;max-width:420px;text-align:left;padding:12px 16px;border-radius:18px;background:var(--p-bubTheirs);color:var(--p-bubTheirsTx);
  border:.5px solid var(--p-chatLine);font:600 14.5px var(--v2-text);cursor:pointer;transition:transform .15s var(--v2-out);}
html.v2 .v2-openers button:active{transform:scale(.98);}

/* ---------------------------------------------------------------- Me */
html.v2 #me #meName{font:600 28px/34px var(--v2-disp);letter-spacing:-.8px;}
html.v2 #me .me-sub{font:500 14.5px var(--v2-text);}
html.v2 #me .me-public{justify-content:center;font:800 11px var(--v2-text);letter-spacing:1.8px;color:var(--p-mute);text-transform:uppercase;}
html.v2 #me .me-public svg{display:none;}
html.v2 #me .me-face{width:236px;height:236px;max-width:58vw;max-height:58vw;border:4px solid var(--v2-ring);box-shadow:0 30px 80px -28px rgba(0,0,0,.7),0 0 70px -14px rgba(var(--p-glow),.32);}
html.v2 #me .me-stats{display:none;}
html.v2 #me .me-plates{display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;padding:0 20px 4px;scrollbar-width:none;}
html.v2 #me .me-plates::-webkit-scrollbar{display:none;}
html.v2 #me .me-plate{width:74px;height:74px;flex:none;}
html.v2 #me .me-plate img{border:2px solid var(--v2-ring);}
html.v2 #me .me-plate.main img{border:2px solid var(--p-accentB);}
html.v2 #me .me-menu{display:none;}
html.v2 .v2-stats{display:flex;margin:22px 20px 0;padding:14px 0;border-radius:22px;background:var(--p-glass);border:.5px solid var(--p-line);}
html.v2 .v2-stats>*{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:inherit;cursor:pointer;padding:0 6px;}
html.v2 .v2-stats>*+*{border-left:.5px solid var(--p-line);}
html.v2 .v2-stats b{font:600 22px var(--v2-disp);font-variant-numeric:tabular-nums;}
html.v2 .v2-stats span{font:600 12.5px var(--v2-text);color:var(--p-mute);white-space:nowrap;}
html.v2 .v2-menu{margin:14px 20px 0;border-radius:22px;overflow:hidden;background:var(--p-glass);border:.5px solid var(--p-line);}
html.v2 .v2-menu+.v2-menu{margin-top:14px;}
html.v2 .v2-menu:first-of-type{margin-top:28px;}
html.v2 .v2-menu button{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;background:none;border:0;border-bottom:.5px solid var(--p-line);color:inherit;text-align:left;cursor:pointer;}
html.v2 .v2-menu button:last-child{border-bottom:0;}
html.v2 .v2-menu button:active{background:var(--p-glass2);}
html.v2 .v2-menu i{width:38px;height:38px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--p-chip);color:var(--p-accentB);}
html.v2 .v2-menu span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
html.v2 .v2-menu b{font:600 16px var(--v2-disp);letter-spacing:-.2px;}
html.v2 .v2-menu small{font:600 12.5px var(--v2-text);color:var(--p-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.v2 .v2-menu em{color:var(--p-mute);}
html.v2 .v2-back{position:absolute;z-index:6;top:max(10px,env(safe-area-inset-top));left:10px;display:flex;align-items:center;gap:2px;padding:8px 12px 8px 4px;
  border-radius:100px;background:var(--p-glass2);border:1px solid var(--p-line);color:var(--p-text);font:700 15px var(--v2-text);cursor:pointer;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}
html.v2 #astro{padding-top:52px;}
/* Stars is a place inside Me: no tab bar over it (there is a way back instead) */
html.v2 #nav{transition:transform .36s var(--v2-out),opacity .24s ease;}
html.v2[data-v2tab="astro"] #nav{transform:translateY(130%);opacity:0;pointer-events:none;}

/* ---------------------------------------------------------------- Settings */
html.v2 #settingsPage .find-head h2{font:600 21px var(--v2-disp);}
html.v2 #settingsPage :is(.set-card,.set-toggle,.set-link){border-radius:22px;}
html.v2 .v2-design{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;margin-bottom:6px;border-radius:22px;text-align:left;cursor:pointer;color:inherit;
  background:var(--p-glass);border:.5px solid var(--p-line);}
html.v2 .v2-design i,.v2-design i{width:36px;height:36px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--p-chip);color:var(--p-accentB);}
.v2-design{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;margin:0 0 6px;border-radius:20px;text-align:left;cursor:pointer;color:inherit;background:var(--p-glass);border:1px solid var(--p-glassB);font-family:inherit;}
.v2-design span{flex:1;display:flex;flex-direction:column;gap:2px;}
.v2-design b{font-weight:800;font-size:15px;}
.v2-design small{font-size:12.5px;color:var(--p-mute);}
.v2-sw{width:48px;height:30px;border-radius:15px;padding:3px;flex:none;background:var(--p-glass2);border:1px solid var(--p-line);box-sizing:border-box;transition:background .25s;}
.v2-sw i{display:block;width:22px;height:22px;border-radius:11px;background:var(--p-mute);transition:transform .3s cubic-bezier(.23,1,.32,1),background .25s;}
.v2-sw.on{background:var(--p-accent);border-color:var(--p-accent);}
.v2-sw.on i{transform:translateX(18px);background:var(--p-on);}

/* ---------------------------------------------------------------- sheets, alerts, toasts, the match */
html.v2 .modal-wrap .modal{border-radius:32px 32px 0 0;}
html.v2 .modal-wrap:not(.hidden) .modal{animation:v2Sheet .42s var(--v2-sheet) both;}
@keyframes v2Sheet{from{transform:translateY(100%);}to{transform:none;}}
html.v2 .modal-wrap:not(.hidden){animation:v2Fade .3s ease both;}
@keyframes v2Fade{from{opacity:0;}to{opacity:1;}}
html.v2 .app-alert:not(.hidden) .aa-card,html.v2 .app-alert:not(.hidden)>div{animation:v2Pop .32s var(--v2-out) both;}
@keyframes v2Pop{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
html.v2 .toast{border-radius:100px;font:700 14px var(--v2-text);background:rgba(23,17,11,.72);color:#fffdf7;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}
html.v2 #matchOverlay h2{font:600 32px/38px var(--v2-disp);letter-spacing:-1px;}
html.v2 #matchOverlay .match-card{animation:v2Pop .5s var(--v2-out) both;}

/* ---------------------------------------------------------------- lists arrive in a soft cascade */
html.v2 :is(#milkList,#outgoingList,#chatsList,#historyList,.me-plates,.v2-strip)>*{animation:v2Rise .36s var(--v2-out) both;}
html.v2 :is(#milkList,#outgoingList,#chatsList,#historyList,.me-plates,.v2-strip)>*:nth-child(2){animation-delay:35ms;}
html.v2 :is(#milkList,#outgoingList,#chatsList,#historyList,.me-plates,.v2-strip)>*:nth-child(3){animation-delay:70ms;}
html.v2 :is(#milkList,#outgoingList,#chatsList,#historyList,.me-plates,.v2-strip)>*:nth-child(4){animation-delay:105ms;}
html.v2 :is(#milkList,#outgoingList,#chatsList,#historyList,.me-plates,.v2-strip)>*:nth-child(5){animation-delay:140ms;}
html.v2 :is(#milkList,#outgoingList,#chatsList,#historyList,.me-plates,.v2-strip)>*:nth-child(n+6){animation-delay:175ms;}
html.v2 :is(.v2-stats,.v2-menu,#meMainWrap){animation:v2Rise .4s var(--v2-out) both;}
@keyframes v2Rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ---------------------------------------------------------------- page transitions (browsers that have them) */
::view-transition-old(root){animation:v2vtOut .16s cubic-bezier(.4,0,1,1) both;}
::view-transition-new(root){animation:v2vtIn .32s cubic-bezier(.23,1,.32,1) both;}
html[data-vtdir="right"]::view-transition-new(root){animation-name:v2vtInR;}
html[data-vtdir="left"]::view-transition-new(root){animation-name:v2vtInL;}
@keyframes v2vtOut{to{opacity:0;}}
@keyframes v2vtIn{from{opacity:0;transform:translateY(8px) scale(.99);}}
@keyframes v2vtInR{from{opacity:0;transform:translateX(12px);}}
@keyframes v2vtInL{from{opacity:0;transform:translateX(-12px);}}
::view-transition-group(v2nav){animation:none;}
::view-transition-group(v2drop){animation-duration:.36s;animation-timing-function:cubic-bezier(.23,1,.32,1);}
::view-transition-group(v2hero){animation-duration:.5s;animation-timing-function:cubic-bezier(.23,1,.32,1);z-index:10;}
::view-transition-old(v2hero),::view-transition-new(v2hero){height:100%;width:100%;object-fit:cover;border-radius:50%;animation-duration:.5s;}
::view-transition-group(v2face){animation-duration:.42s;animation-timing-function:cubic-bezier(.23,1,.32,1);z-index:10;}
::view-transition-old(v2face),::view-transition-new(v2face){height:100%;width:100%;border-radius:50%;}

/* ---------------------------------------------------------------- Reduce Motion is a designed mode */
@media (prefers-reduced-motion: reduce){
  html.v2 .app-bg::before{animation:none;}
  html.v2 :is(#milkList,#outgoingList,#chatsList,#historyList,.me-plates,.v2-strip)>*,html.v2 :is(.v2-stats,.v2-menu,#meMainWrap){animation:v2Fade .18s ease both;}
  html.v2 .modal-wrap:not(.hidden) .modal{animation:v2Fade .18s ease both;}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.18s !important;}
  html[data-vtdir]::view-transition-new(root){animation-name:v2Fade !important;}
}