:root{font-family:Inter,system-ui,sans-serif;color:#eaf0fa;background:#0c111b;font-size:16px;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1040px;margin:auto;padding:36px 28px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:64px;color:#9aa8bd;font-size:.9rem}.brand{font-size:2rem;font-weight:800;letter-spacing:-1.5px;color:#fff;text-decoration:none}.brand span{color:#a5f366;font-size:1rem;margin-left:5px}.mailbox{background:#172130;border:1px solid #2b3c50;border-radius:18px;padding:32px}.eyebrow{font-size:.8rem;letter-spacing:2px;color:#a5f366;font-weight:700}.address-row{display:flex;align-items:center;gap:24px;margin:22px 0 32px}#address{font-family:ui-monospace,monospace;font-size:clamp(1rem,2.6vw,1.5rem);overflow-wrap:anywhere;flex:1}button{font:inherit;font-size:.9rem;font-weight:600;border:1px solid #415169;border-radius:9px;background:#243348;color:#f2f6fc;padding:12px 17px;cursor:pointer;white-space:nowrap}button:hover{background:#354860}button:focus-visible,summary:focus-visible{outline:3px solid #a5f366;outline-offset:4px}button:disabled{opacity:.45;cursor:default}#copy{background:#a5f366;color:#12210a;border-color:#a5f366}.controls{display:flex;align-items:center;gap:12px}.timer{margin-right:auto;display:flex;align-items:center;gap:14px}.timer span{font:600 2rem ui-monospace,monospace;font-variant-numeric:tabular-nums}.timer small{color:#aebdd0;font-size:.85rem;max-width:100px}.track{height:4px;background:#334056;border-radius:4px;margin-top:26px;overflow:hidden}#progress{height:100%;width:100%;background:#a5f366;transition:width 1s linear}.hint{font-size:.85rem;color:#aebdd0;margin:16px 0 0}#status{min-height:24px;color:#c1eda1;font-size:.9rem}.inbox{border:1px solid #293546;border-radius:16px;overflow:hidden}.inbox-heading{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #293546}h1{font-size:1.05rem;margin:0}#count{margin-left:10px;background:#243348;border-radius:6px;padding:3px 8px;color:#b9c6d9;font-size:.8rem}.empty{text-align:center;padding:55px 24px;color:#9baac0}.empty-icon{font-size:2.7rem;color:#a5f366}.empty h2{font-size:1.1rem;color:#eaf0fa;font-weight:500}.empty p{font-size:.9rem;line-height:1.6}details{border-bottom:1px solid #293546;padding:20px 24px}details:last-child{border:0}summary{cursor:pointer;overflow-wrap:anywhere}.meta{display:block;font-size:.85rem;color:#a4b4c9;margin:10px 0}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:1rem/1.7 system-ui,sans-serif;background:#111925;border-radius:8px;padding:20px;max-height:550px;overflow:auto}footer{display:flex;justify-content:space-between;gap:16px;margin-top:28px;font-size:.8rem;color:#92a3ba}@media(max-width:640px){main{padding:24px 16px}header{margin-bottom:32px}.mailbox{padding:22px}.address-row{align-items:stretch;flex-direction:column;gap:16px}.controls{flex-wrap:wrap}.timer{width:100%;margin-bottom:10px}.controls button{flex:1}footer{flex-direction:column}.inbox-heading{padding:18px}}

/* Motion stays subtle; the inbox remains the focus. */
body{background:radial-gradient(ellipse at 50% 0%,#1b2d294d,transparent 65%);min-height:100vh}
header{animation:arrive .55s both}
.mailbox{animation:arrive .65s .08s both;box-shadow:0 24px 70px #0003;transition:border-color .3s,box-shadow .3s}
.mailbox:focus-within{border-color:#67874f;box-shadow:0 24px 70px #0003,0 0 35px #a5f306}
.inbox{animation:arrive .65s .18s both}
footer{animation:arrive .65s .25s both}
button{transition:transform .18s,background .18s,border-color .18s,box-shadow .18s,opacity .18s}
button:not(:disabled):active{transform:scale(.96)}
#copy{min-width:142px}
#copy:not(:disabled):hover{background:#b6ff7e;box-shadow:0 4px 22px #a5f323}
#timer{display:inline-block;transform-origin:left center}
#progress{box-shadow:0 0 12px #a5f36680}
#count{display:inline-block}
.empty-icon{position:relative;display:grid;place-items:center;width:72px;height:72px;margin:0 auto 24px;border:1px solid #a5f32b;border-radius:50%;background:#a5f308;animation:breathe 4s ease-in-out infinite}
.empty-icon::after{content:'';position:absolute;inset:-9px;border:1px solid #a5f320;border-radius:50%;animation:signal 4s ease-out infinite}
#refresh::before{content:'↻';display:inline-block;margin-right:8px;font-size:1.1em}
#refresh.refreshing::before{animation:spin .7s linear infinite}
summary{transition:color .2s}summary:hover{color:#a5f366}
@media(hover:hover){button:not(:disabled):hover{transform:translateY(-2px)}button:not(:disabled):active{transform:scale(.96)}}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes signal{0%{transform:scale(.9);opacity:0}25%{opacity:.8}100%{transform:scale(1.3);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:not(:disabled):hover,button:not(:disabled):active{transform:none}}

#address{position:relative;min-width:0;white-space:normal;text-align:left;padding:8px 10px;margin:-8px -10px;border:0;background:transparent;border-radius:6px;color:inherit;font-weight:600;user-select:text;transition:background-color .2s,color .2s,box-shadow .2s}
#address:not(:disabled):hover{background:transparent;color:#c4ccc7;transform:none}
#address:not(:disabled):active{transform:none;background:transparent}
#address:disabled{opacity:1;cursor:text}
#address.copied,#address.copied:hover{background:transparent;color:#b3cba5;box-shadow:none}
#copy.copied{box-shadow:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.mail-html{display:block;width:100%;height:65vh;min-height:320px;max-height:800px;margin:16px 0 0;border:0;border-radius:6px;background:#fff;color-scheme:light}