@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;
    500;
    600&family=Playfair+Display:ital,wght@0,400;
    0,500;
    1,400&display=swap');
    
:root {
    font-family:'DM Sans',Arial,sans-serif;
    color:#20374a;
    background:#f7f4ec
}
* {
    box-sizing:border-box
}
body {
    margin:0
}
.app {
    position:relative;
    height:100dvh;
    min-height:610px;
    overflow:hidden;
    background:linear-gradient(175deg,#f7f4ec 2%,#e8f0f0 62%,#d5e8ee 100%)
}
button,textarea,input {
    font:inherit
}
button {
    cursor:pointer
}
#world, .grain {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none
}
.grain {
    opacity:.36;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")
}
.top {
    position:absolute;
    z-index:3;
    top:calc(20px + env(safe-area-inset-top));
    left:24px;
    right:24px;
    display:flex;
    justify-content:space-between;
    align-items:start
}
.brand {
    font:italic 29px 'Playfair Display',Georgia,serif;
    line-height:1
}
.brand span {
    display:block;
    font:600 8px 'DM Sans',sans-serif;
    letter-spacing:3px;
    margin-top:10px
}
.icon-button {
    border:0;
    background:transparent;
    color:#345268;
    font-size:28px
}
.people {
    position:absolute;
    z-index:3;
    top:calc(110px + env(safe-area-inset-top));
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:20px;
    align-items:start
}
.person {
    border:0;
    background:transparent;
    color:#456075;
    min-width:72px;
    text-align:center;
    padding:0;
    transition:transform .25s
}
.person.active {
    transform:translateY(-6px);
    color:#18344a
}
.avatar {
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    border-radius:50%;
    margin:auto auto 7px;
    background:linear-gradient(140deg,#d8bdac,#b9d1cd);
    border:3px solid #fff;
    box-shadow:0 3px 13px #506d7933;
    font:23px 'Playfair Display',serif
}
.active .avatar {
    outline:2px solid #d8896e;
    outline-offset:3px
}
.person strong {
    display:block;
    font-size:12px
}
.person small {
    display:block;
    font-size:10px;
    margin-top:3px
}
.place-label {
    position:absolute;
    z-index:1;
    top:30%;
    left:50%;
    transform:translate(-50%,-50%);
    white-space:nowrap;
    text-align:center;
    font:italic 25px 'Playfair Display',serif;
    color:#406477;
    opacity:.88;
    text-shadow:0 1px #fff
}
.place-label small {
    display:block;
    font:600 9px 'DM Sans',sans-serif;
    letter-spacing:3px;
    margin-top:8px
}
.letter-wrap {
    position:absolute;
    z-index:2;
    top:36%;
    left:50%;
    width:min(83vw,410px);
    height:min(38vh,360px);
    min-height:225px;
    transform:translateX(-50%);
    touch-action:none;
    transition:transform .45s cubic-bezier(.2, .8, .2,1),opacity .4s
}
.paper {
    width:100%;
    height:100%;
    background:#fffdf7; background-image: radial-gradient(circle at 30% 20%, #fffdf7 0%, #fae8d822 100%);
    box-shadow: 0 25px 60px -10px rgba(66, 89, 104, 0.12), 0 4px 15px -3px rgba(66, 89, 104, 0.08);
    border-radius:3px 12px 4px 7px;
    padding:28px 28px 18px;
    transform:rotate(-2deg);
    display:flex;
    flex-direction:column;
    position:relative
}
.paper:before {
    content:'';
    position:absolute;
    inset:7px;
    border:1px solid rgba(213, 201, 181, 0.25);
    pointer-events:none
}
.salutation {
    margin:0 0 10px;
    font:italic 23px 'Playfair Display',serif
}
textarea {
    flex:1;
    resize:none;
    border:0;
    background:transparent;
    outline:0;
    color:#253e57;
    font:italic 21px/1.55 'Playfair Display',Georgia,serif;
    width:100%
}
textarea::placeholder {
    color:#8998a0
}
.paper-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    letter-spacing:2px;
    font-size:8px;
    color:#9a806a
}
.heart {
    font-size:25px;
    color:#cb897a
}
.throw-guide {
    text-align:center;
    color:#45677b;
    font-size:11px;
    margin-top:15px;
    letter-spacing:.5px
}
.throw-guide span {
    font-size:22px;
    vertical-align:middle;
    margin-right:6px
}
.controls {
    position:absolute;
    z-index:3;
    bottom:calc(100px + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    width:min(90vw,460px);
    display:flex;
    justify-content:center;
    gap:15px;
    align-items:center
}
.controls button, .nav-button, .sheet button {
    border:0
}
.round {
    border-radius:50%;
    width:46px;
    height:46px;
    background:#fffdf5ed;
    color:#31516a;
    font-size:22px;
    box-shadow:0 3px 15px #38536422
}
.seal-button {
    background:#fffdf5dd;
    border-radius:28px;
    padding:14px 15px;
    color:#36566b;
    font-size:12px;
    white-space:nowrap
}
.send, .primary {
    border-radius:25px;
    background:#244660;
    color:#fff;
    padding:13px 20px;
    box-shadow:0 4px 18px #24466035
}
.bottom {
    position:absolute;
    z-index:3;
    bottom:calc(13px + env(safe-area-inset-bottom));
    left:0;
    right:0;
    display:flex;
    justify-content:space-around
}
.nav-button {
    background:transparent;
    color:#31526a;
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px
}
.nav-button>span {
    font-size:27px;
    position:relative
}
.nav-button b {
    position:absolute;
    right:-13px;
    top:-4px;
    background:#d8896e;
    color:white;
    border-radius:50%;
    font:600 10px 'DM Sans';
    padding:3px 6px
}
.plane {
    position:absolute;
    z-index:4;
    left:50%;
    top:46%;
    font-size:75px;
    transform:translate(-50%,-50%) rotate(-33deg);
    color:#fffdf7;
    filter:drop-shadow(3px 11px 8px #36587077);
    opacity:0;
    pointer-events:none;
    text-shadow:1px 1px #bdcbd0
}
.flight-caption {
    position:absolute;
    z-index:4;
    top:66%;
    width:100%;
    text-align:center;
    font:italic 22px 'Playfair Display',serif;
    opacity:0
}
.flying .letter-wrap {
    transform:translate(-50%,-35%) scale(.08) rotate(-28deg);
    opacity:0
}
.flying .plane {
    opacity:1;
    animation:fly 4s ease-in-out forwards
}
.flying .flight-caption {
    opacity:1
}
.flying .controls {
    opacity:0;
    pointer-events:none
}
@keyframes fly {
    0% {
    transform:translate(-50%,0) rotate(-33deg) scale(.2)
}
25% {
    transform:translate(-50%,-45%) rotate(-33deg) scale(1)
}
55% {
    transform:translate(-50%,-62%) rotate(-22deg) scale(.8)
}
85% {
    transform:translate(-50%,-90%) rotate(-33deg) scale(1)
}
100% {
    transform:translate(-50%,-130%) rotate(-33deg) scale(.08);
    opacity:0
}

}
.toast {
    position:absolute;
    z-index:8;
    top:calc(80px + env(safe-area-inset-top));
    left:50%;
    transform:translate(-50%,-20px);
    background:#fffdf8;
    box-shadow:0 12px 35px #34546a31;
    border-radius:13px;
    padding:16px 20px;
    min-width:220px;
    text-align:center;
    opacity:0;
    pointer-events:none;
    transition:.3s
}
.toast.show {
    opacity:1;
    transform:translate(-50%,0)
}
.overlay {
    position:absolute;
    z-index:10;
    inset:0;
    background:#203b4b75;
    display:flex;
    align-items:flex-end;
    justify-content:center
}
.overlay.hidden {
    display:none
}
.sheet {
    width:min(100%,520px);
    max-height:84dvh;
    overflow:auto;
    background:#fffdf7;
    border-radius:25px 25px 0 0;
    padding:28px 25px calc(30px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 45px #203b4b36
}
.sheet h2 {
    font:italic 28px 'Playfair Display',serif;
    margin:0 0 12px
}
.sheet p {
    font-size:13px;
    line-height:1.6;
    color:#617483
}
.sheet label {
    display:block;
    font-size:11px;
    letter-spacing:1px;
    margin:16px 0 6px
}
.sheet input {
    width:100%;
    border:1px solid #ced8d7;
    background:#fff;
    padding:13px;
    border-radius:9px;
    outline-color:#48748b
}
.sheet .row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #e4e8e4
}
.sheet .row button {
    background:#e7eff0;
    padding:9px 13px;
    border-radius:18px;
    color:#254963
}
.sheet .actions {
    display:flex;
    gap:10px;
    margin-top:23px
}
.sheet .actions button {
    flex:1;
    padding:13px;
    border-radius:25px
}
.sheet .secondary {
    background:#e8eeee;
    color:#37576c
}
.sheet .primary {
    background:#244660;
    color:white
}
.envelope {
    background:#f4eee2;
    border:1px solid #e4d8c7;
    padding:18px;
    margin:11px 0;
    box-shadow:0 8px 14px #38536416;
    cursor:pointer
}
.envelope strong {
    font:italic 20px 'Playfair Display',serif
}
.envelope small {
    display:block;
    margin-top:6px;
    color:#71838a
}
.paper-preview {
    font:italic 23px/1.7 'Playfair Display',serif;
    background:#fff9ed;
    padding:23px;
    box-shadow:0 9px 22px #38536423;
    white-space:pre-wrap
}
.error {
    color:#a54842!important
}
.hidden-content {
    filter:blur(7px);
    user-select:none
}
.reduced-motion .plane {
    animation:none
}
@media(max-height:700px) {
    .people {
    top:85px
}
.place-label {
    top:27%
}
.letter-wrap {
    top:34%;
    height:33vh
}
.controls {
    bottom:83px
}

}

.sheet select {
    width:100%;
    border:1px solid #ced8d7;
    background:#fff;
    padding:13px;
    border-radius:9px;
    color:#20374a
}
.sheet .text-action {
    border:0;
    background:transparent;
    text-decoration:underline;
    color:#244660;
    padding:8px
}
.my-code {
    background:#e8f0ef;
    border-radius:12px;
    padding:13px;
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    font-size:12px
}
.my-code strong {
    font-size:14px;
    letter-spacing:2px
}
.my-code button {
    background:#fff;
    border-radius:18px;
    padding:8px 12px;
    color:#254963
}
.sheet h3 {
    font:italic 21px 'Playfair Display',serif;
    margin:25px 0 4px
}
.sheet .row {
    gap:8px;
    font-size:12px
}
.sheet .row span {
    flex:1
}
.sheet .envelope {
    display:block;
    width:100%;
    text-align:left;
    color:#20374a;
    font:inherit
}
.add-first {
    border:1px solid #d6e1dd;
    border-radius:25px;
    background:#fffdf7e6;
    padding:14px 18px;
    color:#31526a;
    box-shadow:0 6px 22px #38536424
}
.send:disabled {
    opacity:.45;
    cursor:default
}
.sheet form .actions {
    margin-top:19px
}


.auth-links {
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px
}
.danger {
    background:#a84f49!important;
    color:#fff!important;
    border-radius:25px;
    padding:13px 20px;
    box-shadow:0 4px 18px #a84f4930
}
.danger:disabled {
    opacity:.5
}
.reduced-motion * {
    scroll-behavior:auto!important
}
.reduced-motion .plane, .reduced-motion .flight-caption {
    animation:none!important;
    transition:none!important
}
.reduced-motion .letter-wrap {
    transition:none
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

@media(max-width:560px) {
    .people {
    max-width:calc(100vw - 24px);
    overflow-x:auto;
    justify-content:flex-start;
    padding:0 12px;
    scrollbar-width:none
}
.people::-webkit-scrollbar {
    display:none
}
.person {
    min-width:70px
}
.letter-wrap {
    width:min(90vw,410px)
}
.controls {
    gap:9px
}
.seal-button {
    padding:12px 10px
}
.send {
    padding:12px 16px
}

}

.toast.opening:before {
    content:'✉ ';
    font-size:18px;
    margin-right:5px
}
.toast.opening {
    animation:letterOpen .7s ease both
}
@keyframes letterOpen {
    0% {
    transform:translate(-50%,-20px) scale(.96)
}
55% {
    transform:translate(-50%,0) scale(1.03)
}
100% {
    transform:translate(-50%,0) scale(1)
}

}

.reduced-motion .toast.opening {
    animation:none
}


:focus-visible  {
     outline: 2px solid #244660;
     outline-offset: 3px;
     border-radius: inherit;
     
}

.sheet:focus-visible  {
     outline: none;
     
}