@layer components{.mail{--mail-paper:#fff;--mail-ink:#000;--mail-grey:#8e8e93;--mail-bar:#78788038;--mail-line:#3c3c434a;--mail-blue:#007aff;--mail-avatar:#c7c7cc}:root[data-theme=night] .mail{--mail-paper:#000;--mail-ink:#fff;--mail-grey:#8d8d93;--mail-bar:#78788066;--mail-line:#545458a6;--mail-blue:#0a84ff;--mail-avatar:#636366}.mail .hd-screen{background:var(--mail-paper);color:var(--mail-ink)}.mail-bar{height:calc(10 * var(--u));border-radius:calc(5 * var(--u));background:var(--mail-bar);flex:none;display:inline-block}.mail-view{padding:0 calc(16 * var(--u))}.mail-nav{height:calc(44 * var(--u));flex:none;align-items:center;display:flex}.mail-nav__back{width:calc(12 * var(--u));height:calc(20 * var(--u));fill:none;stroke:var(--mail-blue);stroke-linecap:round;stroke-linejoin:round;stroke-width:2.6px}.mail-subject{width:62%;height:calc(20 * var(--u));border-radius:calc(10 * var(--u));margin:calc(6 * var(--u)) 0 calc(16 * var(--u))}.mail-thread{flex-direction:column;display:flex}.mail-msg{padding:calc(14 * var(--u)) 0 calc(18 * var(--u));border-top:calc(.75 * var(--u)) solid var(--mail-line)}.mail-msg__head{align-items:center;gap:calc(10 * var(--u));display:flex}.mail-avatar{width:calc(44 * var(--u));height:calc(44 * var(--u));background:var(--mail-avatar);border-radius:50%;flex:none;place-items:end center;display:grid;overflow:hidden}.mail-avatar>svg{width:calc(35 * var(--u));height:calc(35 * var(--u));fill:#fff;translate:0 calc(3 * var(--u))}.mail-avatar--brand{background:var(--sd-ink);color:var(--sd-paper);place-items:center}.mail-avatar__mark{width:calc(30 * var(--u));height:calc(30 * var(--u));display:block}.mail-avatar__mark>svg{width:100%;height:100%;display:block}.mail-msg__who{gap:calc(5 * var(--u));flex-direction:column;min-width:0;display:flex}.mail-msg__name{width:calc(128 * var(--u));height:calc(14 * var(--u));border-radius:calc(6 * var(--u))}.mail-msg__from{font-size:calc(18 * var(--u));font-weight:600;line-height:calc(22 * var(--u))}.mail-msg__to{align-items:center;gap:calc(2 * var(--u));color:var(--mail-grey);font-size:calc(15 * var(--u));line-height:calc(19 * var(--u));white-space:nowrap;display:flex}.mail-msg__address{width:calc(104 * var(--u));height:calc(9 * var(--u))}.mail-at:before{content:"@"}.mail-msg__body{margin:calc(16 * var(--u)) 0 0;font-size:calc(20 * var(--u));line-height:calc(28 * var(--u))}.mail-letter{margin-top:calc(16 * var(--u));color:var(--sd-ink);flex-direction:column;align-items:flex-start;display:flex}.mail-letter__brand{width:calc(112 * var(--u));height:auto}.mail-letter__text{margin:calc(16 * var(--u)) 0 0;font-size:calc(19 * var(--u));line-height:calc(28 * var(--u))}.mail-card{align-items:flex-start;gap:calc(12 * var(--u));width:100%;margin-top:calc(16 * var(--u));padding:calc(16 * var(--u)) 0;border-block:calc(.75 * var(--u)) solid var(--sd-line);flex-direction:column;display:flex}.mail-card__title{font-size:calc(19 * var(--u));font-weight:600;line-height:calc(26 * var(--u));margin:0}.mail-card__line{width:calc(96 * var(--u));height:calc(12 * var(--u))}.mail-card__button{min-height:calc(52 * var(--u));margin-top:calc(4 * var(--u));padding:0 calc(24 * var(--u));border-radius:calc(9 * var(--u));background:var(--sd-ink);color:var(--sd-paper);font-size:calc(18 * var(--u));align-items:center;font-weight:600;display:inline-flex;position:relative}.mail-qr{width:calc(136 * var(--u));height:calc(136 * var(--u));fill:var(--sd-ink)}.mail-card__note{color:var(--sd-ink-3);font-size:calc(15 * var(--u));line-height:calc(20 * var(--u));margin:0}.mail-card__step{font-size:calc(15 * var(--u));font-weight:600;line-height:calc(21 * var(--u));margin:0}.mail-card__apps{margin:calc(-6 * var(--u)) 0 0;color:var(--sd-ink-2);font-size:calc(14 * var(--u));line-height:calc(20 * var(--u))}.mail[data-scene=link] .mail-card{gap:calc(8 * var(--u))}.mail[data-scene=link] .mail-card__button{min-height:calc(46 * var(--u));margin-top:0}.mail[data-scene=link] .mail-qr{width:calc(96 * var(--u));height:calc(96 * var(--u))}.mail-card__text{font-size:calc(17 * var(--u));line-height:calc(25 * var(--u));margin:0}.mail-scrim{z-index:2;background:#00000052;position:absolute;inset:0}.mail-compose{z-index:3;top:calc(96 * var(--u));padding:0 calc(16 * var(--u));border-radius:calc(12 * var(--u)) calc(12 * var(--u)) 0 0;background:var(--mail-paper);box-shadow:0 calc(-2 * var(--u)) calc(16 * var(--u)) #0000002e;flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0}.mail-compose__bar{min-height:calc(56 * var(--u));grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.mail-compose__cancel{color:var(--mail-blue);font-size:calc(17 * var(--u))}.mail-compose__title{font-size:calc(17 * var(--u));font-weight:600}.mail-compose__send{width:calc(32 * var(--u));height:calc(32 * var(--u));background:var(--mail-blue);border-radius:50%;justify-self:end;place-items:center;display:grid;position:relative}.mail-compose__send>svg{width:calc(20 * var(--u));height:calc(20 * var(--u));fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.6px}.mail-compose__row{min-height:calc(46 * var(--u));align-items:center;gap:calc(6 * var(--u));border-bottom:calc(.75 * var(--u)) solid var(--mail-line);font-size:calc(17 * var(--u));white-space:nowrap;display:flex}.mail-compose__label{color:var(--mail-grey)}.mail-steps{gap:calc(8 * var(--u));margin:calc(12 * var(--u)) 0 0;font-size:calc(19 * var(--u));line-height:calc(28 * var(--u));flex-direction:column;padding-inline-start:calc(24 * var(--u));list-style:decimal;display:flex}.mail-steps>li{padding-inline-start:calc(4 * var(--u))}.mail-toolbar{right:0;bottom:calc(34 * var(--u));height:calc(48 * var(--u));padding:0 calc(28 * var(--u));background:var(--mail-paper);justify-content:space-between;align-items:center;display:flex;position:absolute;left:0}.mail-toolbar>svg{width:calc(26 * var(--u));height:calc(26 * var(--u));fill:none;stroke:var(--mail-blue);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px}.mail{--sd-act:8.4s}.mail-press{--sd-at:.5}.mail[data-scene=account]{--sd-act:10.8s}.mail[data-scene=account] .mail-press{--sd-at:.36}.mail-press--send{--sd-at:.72}@media (prefers-reduced-motion:no-preference){.mail:not([data-wait]) :is(.mail-msg--reply,.mail-card__button,.mail-scrim,.mail-compose){animation-duration:var(--sd-run);animation-timing-function:var(--ease-out);animation-iteration-count:infinite;animation-delay:.3s;animation-fill-mode:both}.mail:not([data-wait]) .mail-msg--reply{animation-name:mail-arrive}.mail:not([data-wait]) .mail-card__button{animation-name:mail-pressed}.mail:not([data-wait])[data-scene=account] .mail-card__button{animation-name:mail-pressed-early}.mail:not([data-wait]) .mail-scrim{animation-name:mail-scrim}.mail:not([data-wait]) .mail-compose{animation-name:mail-sheet}}@keyframes mail-arrive{0%,24%{opacity:0;translate:0 calc(28 * var(--u))}32%,to{opacity:1;translate:0}}@keyframes mail-pressed{0%,53%{opacity:1}55%{opacity:.7}58%,to{opacity:1}}@keyframes mail-pressed-early{0%,42%{opacity:1}44%{opacity:.7}47%,to{opacity:1}}@keyframes mail-scrim{0%,46%{opacity:0}52%,to{opacity:1}}@keyframes mail-sheet{0%,46%{translate:0 100%}54%,to{translate:0}}@media (max-width:63.999em){.mail.sd[data-kind=phone]{--cy:300}.mail.sd[data-kind=phone][data-scene=link]{--cy:420}.mail.sd[data-kind=phone][data-scene=account]{--cy:90}}}