.dts-mail{
--mp-ink:#141414; --mp-lime:#d8ff00; --mp-muted:#6b6b6b;
width:min(640px, calc(100vw - 40px));
max-width:none; max-height:calc(100dvh - 40px);
margin:auto; padding:0; box-sizing:border-box;
border:1.5px solid var(--mp-ink); border-radius:36px;
background:#fff; color:var(--mp-ink);
overflow:auto;
}
.dts-mail::backdrop{ background:rgba(20,20,20,.55); }
.dts-mail[open]{ animation:dts-mail-in .24s cubic-bezier(0.23,1,0.32,1); }
@keyframes dts-mail-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.dts-mail *{ box-sizing:border-box; }
.dts-mail__inner{ padding:40px 44px 44px; }
.dts-mail__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.dts-mail__title{ margin:0; font:italic 500 44px/1.05 "Swear Display", serif; }
.dts-mail__close{
flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
width:55px; height:55px; padding:0; border-radius:999px;
border:1.5px solid var(--mp-ink); background:transparent; color:var(--mp-ink);
cursor:pointer; transition:background-color .18s ease, border-color .18s ease;
}
.dts-mail__close svg{ width:18px; height:18px; }
.dts-mail__intro{ margin:20px 0 0; font:400 18px/1.5 "Swear Text", serif; color:var(--mp-muted); }
.dts-mail__addr{
display:flex; align-items:center; justify-content:space-between; gap:16px;
margin-top:28px; padding:0 8px 0 24px; min-height:67px;
border:1.5px solid var(--mp-ink); border-radius:999px;
}
.dts-mail__addr-text{
min-width:0; overflow-wrap:anywhere;
font:400 22px/1.2 "Swear Display", serif;
}
.dts-mail__btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
height:55px; padding:0 26px; border-radius:999px;
border:1.5px solid var(--mp-ink); background:transparent; color:var(--mp-ink);
font:500 22px/1 "Swear Display", serif; text-decoration:none; white-space:nowrap; cursor:pointer;
transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.dts-mail__btn svg{ flex:0 0 auto; width:20px; height:20px; }
.dts-mail__btn--copy{ height:51px; padding:0 20px; }
.dts-mail__btn--main{ background:var(--mp-ink); color:#fff; }
.dts-mail__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.dts-mail__actions .dts-mail__btn--main{ flex:1 1 100%; }
.dts-mail__actions .dts-mail__btn:not(.dts-mail__btn--main){ flex:1 1 0; }
.dts-mail__subject{ margin:22px 0 0; font:400 16px/1.4 "Swear Text", serif; color:var(--mp-muted); }
.dts-mail__subject strong{ font-weight:400; color:var(--mp-ink); }
.dts-mail__status{ min-height:1.4em; margin:10px 0 0; font:400 16px/1.4 "Swear Text", serif; }
@media (hover:hover){
.dts-mail__btn:hover, .dts-mail__close:hover{ background:var(--mp-lime); border-color:var(--mp-lime); color:var(--mp-ink); }
}
.dts-mail__btn:focus-visible, .dts-mail__close:focus-visible{ outline:2px solid var(--mp-ink); outline-offset:3px; }
.dts-mail__btn.is-done{ background:var(--mp-lime); border-color:var(--mp-lime); }
html.dts-mail-open{ overflow:hidden; } @media (max-width:600px){
.dts-mail{
width:100%; max-height:calc(100dvh - 24px);
margin:auto 0 0; border-radius:36px 36px 0 0; border-bottom:0;
}
.dts-mail__inner{ padding:28px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
.dts-mail__title{ font-size:34px; }
.dts-mail__intro{ font-size:16px; }
.dts-mail__addr{ flex-direction:column; align-items:stretch; gap:10px; padding:16px; border-radius:28px; }
.dts-mail__addr-text{ font-size:20px; text-align:center; }
.dts-mail__btn--copy{ width:100%; }
.dts-mail__actions{ flex-direction:column; }
.dts-mail__actions .dts-mail__btn{ width:100%; flex:0 0 auto !important; }
}
@media (prefers-reduced-motion:reduce){
.dts-mail[open]{ animation:none; }
.dts-mail__btn, .dts-mail__close{ transition:none; }
}