@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.mx-auto{margin-inline:auto}.flex{display:flex}.min-h-screen{min-height:100vh}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-4{gap:calc(var(--spacing) * 4)}.overflow-x-hidden{overflow-x:hidden}.\[background-image\:radial-gradient\(rgba\(255\,255\,255\,0\.045\)_1px\,transparent_1px\)\]{background-image:radial-gradient(#ffffff0b 1px,#0000 1px)}.\[background-size\:22px_22px\]{background-size:22px 22px}.py-10{padding-block:calc(var(--spacing) * 10)}.opacity-60{opacity:.6}@media(min-width:40rem){.sm\:gap-6{gap:calc(var(--spacing) * 6)}.sm\:py-14{padding-block:calc(var(--spacing) * 14)}}}:root{--paper:#fdfaf3;--paper-deep:#f3ead8;--ink:#3d322a}html,body,#root{min-height:100%}body{color:#f5e9d8;background:radial-gradient(1200px 700px at 50% -10%,#d69e6229,#0000 60%),radial-gradient(900px 600px at 10% 110%,#78482a40,#0000 55%),linear-gradient(160deg,#2b201a,#1a130f 52%,#0f0b09);margin:0;font-family:Georgia,Times New Roman,serif}.letter{--sheet-w:min(900px, 94vw, calc(71.6667svh - 3rem) );--band-h:clamp(160px, calc(var(--sheet-w) / 2.15), 420px);width:var(--sheet-w);height:var(--band-h);background:var(--paper-deep);cursor:pointer;isolation:isolate;border-radius:6px;transition:height .9s cubic-bezier(.65,0,.2,1),box-shadow .9s;position:relative;overflow:hidden;transform:translateZ(0);box-shadow:0 30px 60px -20px #000000bf,inset 0 0 0 1px #ffffff0a}.letter:hover:not(.open){box-shadow:0 36px 70px -20px #000000d9,inset 0 0 0 1px #fff4d61f}.letter.open{height:calc(var(--band-h) * 3);cursor:default;box-shadow:0 40px 80px -24px #000c,inset 0 0 0 1px #ffffff0f}.sheet{width:var(--sheet-w);height:calc(var(--band-h) * 3);transform:translateY(calc(var(--band-h) * -1));will-change:transform;transition:transform .9s cubic-bezier(.65,0,.2,1);position:absolute;top:0;left:0}.letter.open .sheet{transform:translateY(0)}.panel{width:100%;height:var(--band-h);background:linear-gradient(180deg,#46321e14,transparent 12%,transparent 88%,#46321e0f),repeating-linear-gradient(90deg,#69503705 0 1px,transparent 1px 3px),linear-gradient(135deg,#fffdf6 0%,var(--paper) 55%,#eee3cf 100%);color:var(--ink);position:absolute;left:0;overflow:hidden;box-shadow:inset 0 0 0 1px #543c230f}.panel-top{transform-origin:bottom;transition:transform .7s cubic-bezier(.65,0,.2,1) .35s;top:0;transform:scaleY(.001)}.panel-bottom{top:calc(var(--band-h) * 2);transform-origin:top;transition:transform .7s cubic-bezier(.65,0,.2,1) .35s;transform:scaleY(.001)}.letter.open .panel-top,.letter.open .panel-bottom{transform:scaleY(1)}.panel-center{top:var(--band-h);z-index:2}.center-inner,.center-front{position:absolute;inset:0}.center-inner{z-index:1;opacity:0;transition:opacity .5s .5s}.letter.open .center-inner{opacity:1}.center-front{z-index:4;opacity:1;background:repeating-linear-gradient(90deg,#69503705 0 1px,#0000 1px 3px),linear-gradient(145deg,#f8f4eb,#f3ecdf 60%,#e9decc);justify-content:center;align-items:center;transition:opacity .35s .12s;display:flex;overflow:hidden}.center-front:before{content:"";z-index:1;background:repeating-linear-gradient(90deg,#69503705 0 1px,#0000 1px 3px),linear-gradient(135deg,#fffdf7,#faf6ed 58%,#eee5d6);height:60%;position:absolute;top:0;left:0;right:0;box-shadow:0 7px 8px -6px #2d2116a6,0 1px #5c463033}.center-front:after{content:"";z-index:2;background:#4c382647;height:1px;position:absolute;top:60%;left:0;right:0;box-shadow:0 3px 5px #2c1f1433}.letter.open .center-front{opacity:0;pointer-events:none;transition:opacity .25s}.seal-wrap{width:clamp(58px,calc(var(--band-h) * .34),220px);aspect-ratio:1;z-index:5;transition:opacity .3s 80ms,transform .3s 80ms;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%)}.letter.open .seal-wrap{opacity:0;transition:opacity .22s,transform .22s;transform:translate(-50%,-50%)scale(1.12)}.seal{background:radial-gradient(circle at 32% 26%,#f08a6b,#d63e2a 26%,#9b1d10 58%,#6f130a 88%);border-radius:47% 53% 50% 50%/52% 47% 53% 48%;place-items:center;width:100%;height:100%;display:grid;position:relative;transform:rotate(-4deg);box-shadow:inset 0 3px 7px #ffdcb480,inset 0 -4px 8px #3204008c,inset 3px 4px 9px #ffffff2e,0 10px 18px #00000073}.seal:before{content:"";pointer-events:none;border:1px solid #ffc4a08c;border-radius:50%;position:absolute;inset:9%;box-shadow:0 0 0 1px #3c080259,inset 0 1px 3px #3c080280}.seal-crack{opacity:0;z-index:2;background:#2f0400d9;width:12%;height:2px;transition:width .32s,opacity .2s,transform .32s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scaleX(.2)rotate(12deg)}.letter.open .seal-crack{opacity:1;width:88%;transform:translate(-50%,-50%)scaleX(1)rotate(12deg)}.letter-paper{flex-direction:column;justify-content:center;gap:.4rem;width:100%;height:100%;padding:6% 9%;font-size:clamp(11px,1vw + 6px,14px);line-height:1.45;display:flex}.panel-top .letter-paper{padding-bottom:13%}.panel-bottom .letter-paper{padding-top:13%}.letter-kicker{letter-spacing:.14em;text-transform:uppercase;color:#5a402a99;margin-bottom:.35rem;font-size:.72em}.letter-signature{color:#46301ec7;margin-top:.65rem;font-style:italic}.letter:not(.open) .sheet{transition-delay:0s}.letter:not(.open) .panel-top,.letter:not(.open) .panel-bottom{transition-duration:.55s;transition-delay:0s}.letter:not(.open) .center-inner{transition-duration:.25s;transition-delay:0s}.letter:not(.open) .center-front{transition-duration:.3s;transition-delay:.32s}.letter:not(.open) .seal-wrap{transition-duration:.25s;transition-delay:.45s}@media(prefers-reduced-motion:reduce){.letter,.sheet,.panel-top,.panel-bottom,.center-inner,.center-front,.seal-wrap,.seal-crack{transition-duration:1ms!important;transition-delay:0s!important}}