:root {  
    --bg-color: #E8E6E1;  
    /* Desk surface color */  
    --envelope-color: #D6CFC7;  
    --envelope-shadow: rgba(0, 0, 0, 0.15);  
    --paper-color: #FDFBF7;  
    /* Warm Paper */  
    --ink-color: #2A2A2A;  
    /* Dark Charcoal (High Contrast) */  
    --text-muted: #6B6B6B;  
    --wax-color: #C05555;  
    --accent-green: #7A8B7D;  
}  
  
* {  
    -webkit-tap-highlight-color: transparent;  
    box-sizing: border-box;  
    margin: 0;  
    padding: 0;  
    outline: none;  
}  
  
body {  
    background-color: var(--bg-color);  
    font-family: 'Montserrat', sans-serif;  
    min-height: 100vh;  
    /* safer for expanding content */  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    overflow-x: hidden;  
    /* prevent horizontal scroll */  
    overflow-y: visible;  
    /* allow vertical overflow for the opened letter */  
    perspective: 1000px;  
    padding: 1rem;  
}  
  
/* --- WRITE MODE (Stationery Pad Look) --- */  
.stationery-card {  
    background: var(--paper-color);  
    width: 100%;  
    max-width: 500px;  
    padding: 40px;  
    border-radius: 4px;  
    position: relative;  
    transform: translateY(20px);  
    opacity: 0;  
    animation: fadeInUp 0.8s ease forwards;  
}  
  
@keyframes fadeInUp {  
    to {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  
  
.title-area {  
    text-align: center;  
    margin-bottom: 25px;  
    color: var(--text-muted);  
    font-size: 0.8rem;  
    letter-spacing: 2px;  
    text-transform: uppercase;  
}  
  
.message-area {  
    width: 100%;  
    border: none;  
    background: transparent;  
    font-family: 'Cormorant Garamond', serif;  
    font-size: 1rem;  
    line-height: 1.6;  
    color: var(--ink-color);  
    min-height: 200px;  
    resize: none;  
    background-image: linear-gradient(transparent 95%, #E5E5E5 95%);  
    background-size: 100% 2.4rem;  
    /* Notebook lines */  
    line-height: 2.4rem;  
}  
  
.message-area::placeholder {  
    color: #B0B0B0;  
    font-style: italic;  
}  
  
.sender-input {  
    width: 100%;  
    border: none;  
    border-bottom: 1px solid #DDD;  
    padding: 10px 0;  
    font-family: 'Dancing Script', cursive;  
    font-size: 1.4rem;  
    color: var(--ink-color);  
    margin-top: 20px;  
    background: transparent;  
}  
  
.sender-input::placeholder {  
    font-family: 'Montserrat', sans-serif;  
    font-size: 0.9rem;  
    color: #BBB;  
}  
  
.btn-seal {  
    display: block;  
    margin: 30px auto 0;  
    background: var(--accent-green);  
    color: white;  
    border: none;  
    padding: 12px 40px;  
    border-radius: 50px;  
    cursor: pointer;  
    font-size: 0.9rem;  
    letter-spacing: 1px;  
    transition: transform 0.2s, background 0.2s;  
}  
  
.btn-seal:hover {  
    transform: scale(0.98);  
    background: #697a6c;  
}  
  
/* --- READ MODE (Envelope Animation) --- */  
.envelope-container {  
    position: relative;  
    width: 320px;  
    height: 220px;  
    cursor: pointer;  
    transition: transform 0.5s ease;  
    overflow: visible;  
    /* allow the letter to appear outside the container when opened */  
}  
  
.envelope-container:hover {  
    transform: translateY(-5px);  
}  
  
/* The Envelope Body */  
.envelope {  
    position: relative;  
    width: 100%;  
    height: 100%;  
    background: var(--envelope-color);  
    border-radius: 0 0 5px 5px;  
}  
  
/* The Flap (Triangle) */  
.flap {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 0;  
    height: 0;  
    border-left: 160px solid transparent;  
    border-right: 160px solid transparent;  
    border-top: 110px solid #Cfc8c0;  
    /* Slightly darker than envelope */  
    transform-origin: top;  
    transition: transform 0.6s 0.2s ease-in-out, z-index 0.2s;  
    z-index: 5;  
}  
  
/* The Pocket (Front triangles) */  
.pocket {  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 0;  
    height: 0;  
    border-left: 160px solid var(--envelope-color);  
    border-right: 160px solid var(--envelope-color);  
    border-bottom: 120px solid #C4BDB5;  
    /* Shadowy part */  
    border-top: 100px solid transparent;  
    z-index: 3;  
    border-radius: 0 0 5px 5px;  
}  
  
/* The Wax Seal */  
.wax-seal {  
    position: absolute;  
    top: 90px;  
    left: 50%;  
    transform: translateX(-50%);  
    width: 35px;  
    height: 35px;  
    background: var(--wax-color);  
    border-radius: 50%;  
    z-index: 6;  
    transition: opacity 0.4s;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 1.5rem;  
    color: rgba(0, 0, 0, 0.2);  
}  
  
/* The Letter Inside */  
.letter {  
    position: absolute;  
    bottom: 0;  
    left: 10px;  
    width: calc(100% - 20px);  
    max-width: 300px;  
    height: 200px;  
    background: var(--paper-color);  
    padding: 20px;  
    transition: transform 0.8s 0.6s ease-out, height 0.8s 0.6s ease-out, z-index 0s 0.6s;  
    z-index: 1;  
    /* Inside envelope initially */  
    overflow: hidden;  
    display: flex;  
    flex-direction: column;  
}  
  
/* Animation States */  
.open .flap {  
    transform: rotateX(180deg);  
    z-index: 0;  
}  
  
.open .wax-seal {  
    opacity: 0;  
}  
  
/* Adjusted expansion and translation to avoid going off-screen */  
.open .letter {  
    height: 380px;  
    /* expands but kept reasonable */  
    transform: translateY(-60px);  
    /* milder slide up */  
    z-index: 4;  
    /* brings in front */  
    border-radius: 4px;  
}  
  
/* Letter Content Typography */  
.letter-content {  
    font-family: 'Cormorant Garamond', serif;  
    font-size: 1.3rem;  
    line-height: 1.8;  
    color: var(--ink-color);  
    flex-grow: 1;  
    overflow-y: auto;  
    opacity: 0;  
    transition: opacity 0.5s 1.2s;  
    /* Fade in text after slide up */  
}  
  
.letter-footer {  
    margin-top: 20px;  
    text-align: right;  
    font-family: 'Dancing Script', cursive;  
    font-size: 1.4rem;  
    color: var(--ink-color);  
    opacity: 0;  
    transition: opacity 0.5s 1.4s;  
}  
  
.open .letter-content,  
.open .letter-footer {  
    opacity: 1;  
}  
  
/* Result Box */  
.result-overlay {  
    margin-top: 20px;  
    text-align: center;  
    font-size: 0.9rem;  
    color: var(--text-muted);  
}  
  
.link-box {  
    background: white;  
    padding: 10px;  
    border: 1px solid #DDD;  
    margin: 10px 0;  
    user-select: all;  
    color: #555;  
    font-family: monospace;  
}  
  
/* Small screens adjustments */  
@media (max-width: 360px) {  
    .envelope-container {  
        width: 300px;  
        height: 210px;  
    }  
      
    .flap {  
        border-left: 150px solid transparent;  
        border-right: 150px solid transparent;  
        border-top: 100px solid #Cfc8c0;  
    }  
      
    .pocket {  
        border-left: 150px solid var(--envelope-color);  
        border-right: 150px solid var(--envelope-color);  
        border-bottom: 110px solid #C4BDB5;  
    }  
      
    .letter {  
        max-width: 280px;  
        left: 10px;  
    }  
}  
  
footer {  
    width: 100%;  
    margin-top: 18px;  
    color: var(--text-muted);  
    font-size: 13px;  
    text-align: center;  
    font-family: 'Cormorant Garamond', serif;  
  
}  
  
footer a {  
    color: var(--text-muted);  
}