*{margin:0;padding:0;box-sizing:border-box}.full-size{width:100%;height:100%}.flex{display:flex}.flex.center{justify-content:center;align-items:center}.flex.row{flex-direction:row}.flex.column{flex-direction:column}.flex.wrap{flex-wrap:wrap}.button{--button-color: var(--color-primary);padding:1rem 2rem;margin:1rem;border:.2rem solid var(--button-color);border-radius:.5rem;background-color:oklch(from var(--button-color) 50% c h);color:oklch(from var(--button-color) 100% c h);font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease}.button:not(:disabled):hover{color:oklch(from var(--button-color) 30% c h);background-color:var(--button-color)}.button:disabled{cursor:not-allowed;filter:brightness(.6)}.button[data-color=primary]{--button-color: var(--color-primary)}.button[data-color=secondary]{--button-color: var(--color-secondary)}.button[data-color=accent]{--button-color: var(--color-accent)}[data-theme=pink]{--color-primary: #af7595;--color-secondary: #8c2155;--color-accent: #5b85aa}[data-theme=red]{--color-primary: #c94c4c;--color-secondary: #8b0000;--color-accent: #ff6b6b}[data-theme=blue]{--color-primary: #5b9bd5;--color-secondary: #2e5c8a;--color-accent: #87ceeb}[data-theme=green]{--color-primary: #6ba368;--color-secondary: #2d5a2b;--color-accent: #90ee90}[data-theme=orange]{--color-primary: #e89a3c;--color-secondary: #cc5500;--color-accent: #ffa07a}:root{font-size:clamp(16px,max(min(4vh,2vw),16px),24px);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;width:100%;min-height:100%;overflow:hidden auto;scroll-behavior:smooth;-webkit-user-select:text;user-select:text;--color-text: #37392e;--color-background: #dcecec;--color-pen: #2e3339;--color-paper: #eee5e5;color:var(--color-text);background-color:var(--color-background)}body{padding:2rem}@property --open-angle{syntax: "<angle>"; inherits: true; initial-value: 0deg;}.envelope{background-color:var(--color-accent);width:20em;height:15em;margin:10em 0 2em;position:relative;box-shadow:0 0 1em #0003;transition:--open-angle .5s ease-in-out}.envelope .envelope-flap{position:absolute;width:0;height:0}.envelope .envelope-flap.left,.envelope .envelope-flap.right{top:0;border-top:7.5em solid transparent;border-bottom:7.5em solid transparent}:is(.envelope .envelope-flap.left,.envelope .envelope-flap.right).left{left:0;border-left:12em solid var(--color-primary)}:is(.envelope .envelope-flap.left,.envelope .envelope-flap.right).right{right:0;border-right:12em solid var(--color-primary)}.envelope .envelope-flap.top,.envelope .envelope-flap.bottom{border-left:10em solid transparent;border-right:10em solid transparent}:is(.envelope .envelope-flap.top,.envelope .envelope-flap.bottom).top{top:0;border-top-width:9em;border-top-style:solid;transform-origin:top center}:is(.envelope .envelope-flap.top,.envelope .envelope-flap.bottom).top.closed{border-top-color:var(--color-secondary);transform:rotateX(clamp(0deg,var(--open-angle),90deg))}:is(.envelope .envelope-flap.top,.envelope .envelope-flap.bottom).top.opened{border-top-color:var(--color-accent);transform:rotateX(clamp(90deg,var(--open-angle),180deg))}:is(.envelope .envelope-flap.top,.envelope .envelope-flap.bottom).bottom{bottom:0;border-bottom:9em solid oklch(from var(--color-secondary) 40% c h)}.envelope.open{--open-angle: 180deg}.letter{gap:.15em;width:18em;height:13em;padding:.25em;display:flex;flex-direction:column;background-color:var(--color-paper);box-shadow:0 0 .5em #0003}.letter .line{all:unset;font-size:1.2em;white-space:pre;color:var(--color-pen);font-family:Victor Mono,monospace;font-optical-sizing:auto;font-weight:500;font-style:italic}.letter img{height:5em;align-self:center;object-fit:contain}.error-envelope{font-size:.67rem;transition:none;--open-angle: 180deg}.error-envelope .envelope-flap{z-index:20}.error-envelope .envelope-flap.top.opened{z-index:10}.error-envelope .letter{position:absolute;margin:1em;top:-9em;z-index:15}