/*
  Design tokens: retro stationery — warm paper, typewriter ink, a postmark-red
  accent for the "send" moments. Kept as CSS custom properties so the
  paper/envelope animation components (Phase 1) can read them consistently.
*/
:root {
  /* paper & surfaces */
  --color-paper: #ecdfb9;
  --color-paper-raised: #fbf7ec;
  --color-paper-back: #d9c99a;
  --color-paper-shadow: #e3d9bd;
  --color-envelope: #d9c191;
  --color-envelope-flap: #cdb37e;
  --color-desk: #241d15;
  --color-desk-vignette: #1a1510;

  /* ink & text (for text on paper) */
  --color-ink: #24201a;
  --color-ink-muted: #6c6252;
  --color-ink-faint: #a6976f;

  /* text sitting directly on the desk background, not on paper */
  --color-on-dark: var(--color-paper);
  --color-on-dark-muted: #c9bd9c;

  /* accents */
  --color-accent: #96392a;
  /* postmark / wax-seal red */
  --color-accent-ink: #2c496f;
  /* air-mail / stamp blue */
  --color-gold: #b3903f;
  --color-border: #cabb8e;

  /* type */
  --font-hand: "Caveat", "Segoe Script", cursive;
  --font-display: "Special Elite", ui-serif, Georgia, serif;
  --font-body: "Courier Prime", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* shape */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-paper: 0 1px 2px rgba(43, 38, 32, 0.15), 0 4px 10px rgba(43, 38, 32, 0.08);
  --shadow-paper-lifted: 0 6px 16px rgba(43, 38, 32, 0.2), 0 2px 4px rgba(43, 38, 32, 0.12);
}
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background: radial-gradient(ellipse at 50% -10%, #3a2f20 0%, var(--color-desk) 45%, var(--color-desk-vignette) 100%);
  background-attachment: fixed;
  color: var(--color-on-dark-muted);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: 0.01em;
  color: var(--color-on-dark);
}

a {
  color: var(--color-gold);
}

button {
  font-family: var(--font-body);
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Shared rendering for rich-text content (Entry bodies, cover letters) saved by the
   editor — server-sanitized HTML, safe to render directly. */
.rich-content {
  line-height: 1.55;
}

.rich-content p {
  margin: 0 0 0.6em;
}

.rich-content h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0.4em 0 0.5em;
}

.rich-content ul,
.rich-content ol {
  margin: 0 0 0.6em;
  padding-left: 1.4em;
}

.rich-content img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin: 0.4em 0;
}

.rich-content a {
  color: var(--color-accent-ink);
}
._header_v56uu_1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
  ._header_v56uu_1 {
    padding: var(--space-4) var(--space-4);
  }
}

._wordmark_v56uu_17 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0;
  color: var(--color-on-dark);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

._logo_v56uu_27 {
  display: inline-block;
  font-size: 30px;
  line-height: 1;
  transform: rotate(-10deg);
  color: var(--color-on-dark);
}

._nav_v56uu_35 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 640px) {
  /* Collapsed behind the burger toggle below this breakpoint — hidden by
     default, expands into a full-width vertical stack under the header row
     when .navOpen is added. Declared after the base rule above so this wins
     the cascade at matching widths (equal specificity: a later same-
     specificity rule beats an earlier one regardless of @media nesting). */
  ._nav_v56uu_35 {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    order: 4;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
  }

  ._nav_v56uu_35 a {
    padding: 0.6rem 0.1rem;
  }
}

/* Higher specificity than .nav alone (two classes), so this reliably wins
   regardless of source order once .navOpen is applied. */
._nav_v56uu_35._navOpen_v56uu_47 {
  display: flex;
}

@media (max-width: 480px) {
  ._nav_v56uu_35 {
    font-size: 0.85rem;
  }
}

._nav_v56uu_35 a {
  color: var(--color-on-dark-muted);
  text-decoration: none;
}

._nav_v56uu_35 a:hover {
  color: var(--color-gold);
}

._nav_v56uu_35 a.active {
  color: var(--color-gold);
}

._account_v56uu_92 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.85rem;
}

._who_v56uu_99 {
  color: var(--color-on-dark-muted);
}

._logout_v56uu_103 {
  all: unset;
  cursor: pointer;
  color: var(--color-on-dark-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

._logout_v56uu_103:hover {
  color: var(--color-gold);
}

._menuToggle_v56uu_115 {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

._menuToggle_v56uu_115 span {
  display: block;
  width: 1.3rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-on-dark);
  transition: transform 0.22s ease, opacity 0.18s ease;
}

._menuToggle_v56uu_115[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

._menuToggle_v56uu_115[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

._menuToggle_v56uu_115[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 640px) {
  ._menuToggle_v56uu_115 {
    display: flex;
  }
}

._main_v56uu_157 {
  flex: 1;
  padding: var(--space-8);
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 640px) {
  ._main_v56uu_157 {
    padding: var(--space-4);
  }
}
._wrap_rkh53_1 {
  max-width: 440px;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--color-paper-raised);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper-lifted);
}

._wrap_rkh53_1 h2 {
  margin: 0 0 1.2rem;
  color: var(--color-ink);
}

._field_rkh53_16 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

._field_rkh53_16 label {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

._field_rkh53_16 input {
  width: 100%;
  font-family: var(--font-body);
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}

._error_rkh53_38 {
  color: var(--color-accent);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

._submit_rkh53_44 {
  width: 100%;
  font-family: var(--font-display);
  background: var(--color-gold);
  color: var(--color-desk);
  border: none;
  padding: 0.7rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

._submit_rkh53_44:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._toggle_rkh53_60 {
  all: unset;
  cursor: pointer;
  display: block;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
._form_jd3n8_1 {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 2rem;
}

._form_jd3n8_1 input {
  flex: 1;
  font-family: var(--font-body);
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}

._form_jd3n8_1 button {
  font-family: var(--font-display);
  background: var(--color-gold);
  color: var(--color-desk);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

._error_jd3n8_27 {
  color: var(--color-accent);
  font-size: 0.85rem;
}

._list_jd3n8_32 {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

._row_jd3n8_38 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  padding: 0.9rem 1.1rem;
}

._who_jd3n8_51 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-break: break-word;
}

._name_jd3n8_58 {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--color-ink);
}

._email_jd3n8_64 {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

._status_jd3n8_69 {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

._actions_jd3n8_77 {
  display: flex;
  gap: 0.6rem;
}

._actions_jd3n8_77 button {
  font-family: var(--font-body);
  font-size: 0.8rem;
  border: none;
  background: var(--color-gold);
  color: var(--color-desk);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

._empty_jd3n8_93 {
  color: var(--color-on-dark-muted);
  font-style: italic;
}
._wrap_usv0l_1 {
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
}

._toolbar_usv0l_8 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  row-gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  background: var(--color-paper-shadow);
  border-bottom: 1px solid var(--color-border);
}

._toolbar_usv0l_8 button {
  all: unset;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
}

._toolbar_usv0l_8 button:hover {
  background: rgba(43, 38, 32, 0.08);
  color: var(--color-ink);
}

._toolbarActive_usv0l_34 {
  background: rgba(43, 38, 32, 0.12) !important;
  color: var(--color-ink) !important;
  font-weight: bold;
}

._toolbarDivider_usv0l_40 {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin: 0.1rem 0.3rem;
}

._fontSelect_usv0l_47 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  color: var(--color-ink);
  max-width: 9rem;
}

._swatches_usv0l_58 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.2rem;
}

._swatches_usv0l_58 ._swatch_usv0l_58 {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(43, 38, 32, 0.25);
  transition: transform 0.1s ease;
}

._swatches_usv0l_58 ._swatch_usv0l_58:hover {
  transform: scale(1.15);
}

._swatches_usv0l_58 ._swatchActive_usv0l_81 {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 3px var(--color-ink);
}

._colorInput_usv0l_86 {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: 1.5px solid rgba(43, 38, 32, 0.25);
  overflow: hidden;
  padding: 0;
}

._colorInput_usv0l_86::-webkit-color-swatch-wrapper {
  padding: 0;
}

._colorInput_usv0l_86::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

._colorInput_usv0l_86::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

._content_usv0l_112 {
  padding: 0.8rem 0.9rem;
  min-height: 6rem;
  color: var(--color-ink);
}

._content_usv0l_112 .ProseMirror {
  outline: none;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  line-height: 1.5;
}

._content_usv0l_112 .ProseMirror p {
  margin: 0 0 0.6rem;
}

._content_usv0l_112 .ProseMirror h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0.4rem 0 0.5rem;
}

._content_usv0l_112 .ProseMirror ul,
._content_usv0l_112 .ProseMirror ol {
  margin: 0 0 0.6rem;
  padding-left: 1.4rem;
}

._content_usv0l_112 .ProseMirror img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin: 0.4rem 0;
}

._content_usv0l_112 .ProseMirror a {
  color: var(--color-accent-ink);
}

._content_usv0l_112 .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--color-ink-faint);
  float: left;
  height: 0;
  pointer-events: none;
}
._form_1y9k7_1 {
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-paper);
  border-radius: 3px;
  padding: 1.6rem;
  margin-bottom: 2rem;
  display: grid;
  gap: 0.9rem;
}

._formHeading_1y9k7_12 {
  font-family: var(--font-hand);
  font-size: 1.9rem;
  color: var(--color-paper);
  margin: 0 0 0.15rem;
}

._row_1y9k7_19 {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 0.8rem;
}

@media (max-width: 420px) {
  ._row_1y9k7_19 {
    grid-template-columns: 1fr;
  }
}

._field_1y9k7_31 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

._field_1y9k7_31 label {
  font-size: 0.72rem;
  color: var(--color-ink-faint);
}

._field_1y9k7_31 input {
  font-family: var(--font-body);
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-paper);
}

/* The calendar popup itself is OS-drawn chrome CSS can't restyle — this just
   nudges it to the browser's dark theme (instead of a jarring stark-white
   popup against this dark form) and recolors the trigger icon toward gold,
   since the default dark icon was nearly invisible on this background. */
._field_1y9k7_31 input[type="date"] {
  color-scheme: dark;
}

._field_1y9k7_31 input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(70%) sepia(46%) saturate(638%) hue-rotate(358deg) brightness(93%) contrast(91%);
}

._actions_1y9k7_64 {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

._submit_1y9k7_70 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  background: var(--color-gold);
  color: var(--color-desk);
  border: none;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(179, 144, 63, 0.4);
}

._submit_1y9k7_70:hover:not(:disabled) {
  transform: translateY(-1px);
}

._cancel_1y9k7_87 {
  all: unset;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--color-ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

._error_1y9k7_96 {
  color: #e2a58f;
  font-size: 0.85rem;
  margin: 0;
}

._list_1y9k7_102 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

._card_1y9k7_108 {
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  padding: 1rem 1.2rem;
}

._cardTop_1y9k7_116 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

._date_1y9k7_123 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--color-ink-muted);
}

._cardActions_1y9k7_129 {
  display: flex;
  gap: 0.6rem;
}

._cardActions_1y9k7_129 button {
  all: unset;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

._title_1y9k7_143 {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  margin: 0.2rem 0 0.3rem;
}

._body_1y9k7_149 {
  font-size: 0.85rem;
  color: var(--color-ink);
}

._empty_1y9k7_154 {
  color: var(--color-on-dark-muted);
  font-style: italic;
}
._form_7l92w_1 {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}

._form_7l92w_1 input {
  flex: 1;
  font-family: var(--font-body);
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}

._form_7l92w_1 button {
  font-family: var(--font-display);
  background: var(--color-gold);
  color: var(--color-desk);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

._error_7l92w_27 {
  color: var(--color-accent);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

._linkBox_7l92w_33 {
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

._linkBox_7l92w_33 code {
  font-family: var(--font-body);
  font-size: 0.8rem;
  word-break: break-all;
  flex: 1;
}

._linkBox_7l92w_33 button {
  font-family: var(--font-body);
  font-size: 0.78rem;
  border: none;
  background: var(--color-gold);
  color: var(--color-desk);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  flex: none;
}

._list_7l92w_65 {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

._row_7l92w_71 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  padding: 0.8rem 1.1rem;
}

._email_7l92w_84 {
  font-family: var(--font-hand);
  font-size: 1.15rem;
}

._meta_7l92w_89 {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

._status_7l92w_94 {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

._statusUsed_7l92w_102 {
  color: var(--color-gold);
}

._empty_7l92w_106 {
  color: var(--color-on-dark-muted);
  font-style: italic;
}
._card_1bjsm_1 {
  all: unset;
  cursor: pointer;
  position: relative;
  display: block;
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: 1px;
  padding: 0.95rem 1.1rem 1rem 1.3rem;
  box-shadow: var(--shadow-paper);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  clip-path: polygon(
    0% 1%, 3% 0%, 9% 1.4%, 15% 0.2%, 22% 1%, 29% 0%, 36% 1.2%, 43% 0.3%,
    50% 1%, 57% 0.2%, 64% 1.3%, 71% 0%, 78% 1%, 85% 0.3%, 92% 1.2%, 100% 0%,
    100% 100%, 0% 100%
  );
}

._card_1bjsm_1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(rgba(36, 32, 26, 0.05) 0 1px, transparent 1px 22px);
  pointer-events: none;
}

._card_1bjsm_1:hover {
  transform: rotate(var(--rot, 0deg)) translateY(-3px);
  box-shadow: var(--shadow-paper-lifted);
}

._card_1bjsm_1:focus-visible {
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 3px;
}

._selected_1bjsm_38 {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: var(--shadow-paper-lifted), 0 0 0 2px var(--color-accent);
}

._faded_1bjsm_43 {
  opacity: 0.8;
}

._top_1bjsm_47 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  position: relative;
}

._date_1bjsm_55 {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

._pin_1bjsm_62 {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-ink-faint);
  flex: none;
  position: relative;
}

._selected_1bjsm_38 ._pin_1bjsm_62 {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

._selected_1bjsm_38 ._pin_1bjsm_62::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--color-paper);
}

._title_1bjsm_87 {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  margin: 0.2rem 0 0.3rem;
  position: relative;
}

._body_1bjsm_94 {
  font-size: 0.8rem;
  line-height: 1.55;
  color: #443c2c;
  margin: 0;
  position: relative;
}
._desk_4bjc0_1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  ._desk_4bjc0_1 {
    /* Keep the minmax(0, ...) clamp even in the single-column layout — a bare
       "1fr" track still sizes to its content's min-content width, so a rotated
       entry card or the editor toolbar can blow the grid (and the whole page)
       wider than the viewport instead of shrinking to fit it. */
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  ._frame_4bjc0_19 {
    padding: 1.1rem;
  }
}

._entriesHeading_4bjc0_24 {
  font-family: var(--font-hand);
  font-size: 1.9rem;
  margin: 0 0 0.15rem;
}

._entriesHint_4bjc0_30 {
  font-size: 0.82rem;
  color: #b9ac89;
  margin: 0 0 1.4rem;
}

._entryList_4bjc0_36 {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

._entryDivider_4bjc0_42 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.4rem 0 1.1rem;
  color: var(--color-ink-faint);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

._entryDivider_4bjc0_42::before,
._entryDivider_4bjc0_42::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

._setupRow_4bjc0_62 {
  display: grid;
  /* minmax(0, ...) matters here independent of column count — a <select> sizes
     to its longest option's intrinsic content width by default, and without
     this clamp a long recipient name blows the grid track (and the page)
     wider than the viewport on its own, regardless of breakpoint. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

@media (max-width: 860px) {
  /* Must come after the base .setupRow rule above — with equal specificity,
     a later same-specificity rule wins the cascade regardless of which one
     sits inside a matching @media block, so this has to be declared last to
     actually override the two-column layout. .frame is already full viewport
     width once .desk goes single-column at this same breakpoint. */
  ._setupRow_4bjc0_62 {
    grid-template-columns: minmax(0, 1fr);
  }
}

._setupField_4bjc0_84 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

._setupField_4bjc0_84 label {
  font-size: 0.72rem;
  color: var(--color-ink-faint);
}

._setupField_4bjc0_84 select,
._setupField_4bjc0_84 input {
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-paper);
}

._setupField_4bjc0_84 select:disabled,
._setupField_4bjc0_84 input:disabled {
  opacity: 0.6;
}

._coverLetterField_4bjc0_113 {
  margin-bottom: 1.2rem;
}

._coverLetterField_4bjc0_113 label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: 0 0 0.5rem;
}

._errorBanner_4bjc0_127 {
  color: #e2a58f;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

._emptyState_4bjc0_133 {
  color: var(--color-ink-faint);
  font-style: italic;
}

._link_4bjc0_138 {
  color: var(--color-gold);
}

._frame_4bjc0_19 {
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 1.6rem;
  color: var(--color-paper);
}

._frame_4bjc0_19 h2 {
  font-family: var(--font-hand);
  font-size: 1.9rem;
  color: var(--color-paper);
  margin: 0 0 0.15rem;
}

._recipient_4bjc0_157 {
  color: var(--color-gold);
}

._tray_4bjc0_161 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2.4rem;
  margin: 0.9rem 0 1.4rem;
}

._trayEmpty_4bjc0_169 {
  font-size: 0.8rem;
  color: var(--color-ink-faint);
  font-style: italic;
  align-self: center;
}

._trayChip_4bjc0_176 {
  font-family: var(--font-body);
  font-size: 0.74rem;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

._trayChip_4bjc0_176 button {
  all: unset;
  cursor: pointer;
  color: var(--color-accent);
  font-weight: bold;
  line-height: 1;
  padding: 0 0.1rem;
}

._customize_4bjc0_198 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1rem 0 1.3rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  margin-bottom: 1.4rem;
}

._fieldLabel_4bjc0_209 {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin: 0 0 0.5rem;
}

._stamps_4bjc0_218 {
  display: flex;
  gap: 0.6rem;
}

._stampChoice_4bjc0_223 {
  all: unset;
  cursor: pointer;
  width: 2.9rem;
  height: 3.6rem;
  background: #f2e9cf;
  border: 2px dashed #cfc09a;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

._stampChoice_4bjc0_223 svg {
  width: 68%;
  height: 68%;
}

._stampChoice_4bjc0_223:hover {
  transform: translateY(-2px);
}

._stampChoicePicked_4bjc0_247 {
  border-color: var(--color-accent-ink);
  box-shadow: 0 0 0 2px var(--color-accent-ink), 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* ---------- fold + envelope stage ---------- */

._stage_4bjc0_254 {
  position: relative;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  perspective: 1400px;
  margin-bottom: 1.5rem;
  /* The rotated/scaled backing-page fan (.letterBack1/2) swings past this box's
     edges on narrow screens, since they're purely decorative flourish centered
     on the stage rather than sized to fit it — clip rather than let the page
     scroll horizontally to accommodate a few degrees of paper tilt. */
  overflow-x: hidden;
}

._letter_4bjc0_263 {
  position: absolute;
  bottom: 70px;
  width: 190px;
  height: 108px;
  transform: scale(1.2);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  z-index: 5;
}

/* Extra "pages" peeking out behind the front slip when a letter has more than one
   entry — static (no fold animation of their own), fanned at a jaunty angle, and
   riding along with the front slip through the lift/slide-into-envelope sequence. */
._letterBack_4bjc0_263 {
  position: absolute;
  bottom: 70px;
  width: 190px;
  height: 108px;
  background: var(--color-paper);
  box-shadow: var(--shadow-paper);
  transform-origin: 50% 100%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

._letterBack_4bjc0_263::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(rgba(36, 32, 26, 0.06) 0 1px, transparent 1px 15px);
}

._letterBack1_4bjc0_263 {
  z-index: 4;
  transform: rotate(5deg) translateX(5px) scale(1.2);
}

._letterBack2_4bjc0_307 {
  z-index: 3;
  transform: rotate(-8deg) translateX(-7px) scale(1.2);
}

/* Phase 1: paper lifts and shrinks back to its normal size, envelope dips and
   plumps up slightly underneath it — a little "juice" before the swap. */
._stage_4bjc0_254._liftingUp_4bjc0_314 ._letter_4bjc0_263 {
  transform: translateY(-30px) scale(1);
}

._stage_4bjc0_254._liftingUp_4bjc0_314 ._letterBack1_4bjc0_263 {
  transform: rotate(5deg) translateX(5px) translateY(-30px) scale(1);
}

._stage_4bjc0_254._liftingUp_4bjc0_314 ._letterBack2_4bjc0_307 {
  transform: rotate(-8deg) translateX(-7px) translateY(-30px) scale(1);
}

._stage_4bjc0_254._liftingUp_4bjc0_314 ._envelope_4bjc0_326 {
  transform: translateY(20px) scale(1.05);
}

/* Phase 2: envelope jumps in front, paper slides down and fades — reads as the
   pages passing behind the envelope and going inside it. */
._stage_4bjc0_254._slidingIn_4bjc0_332 ._envelope_4bjc0_326 {
  z-index: 6;
  transform: translateY(0) scale(1);
}

._stage_4bjc0_254._slidingIn_4bjc0_332 ._letter_4bjc0_263 {
  z-index: 1;
  opacity: 0;
  transform: translateY(40px) scale(0.9);
}

._stage_4bjc0_254._slidingIn_4bjc0_332 ._letterBack1_4bjc0_263 {
  z-index: 1;
  opacity: 0;
  transform: rotate(5deg) translateX(5px) translateY(40px) scale(0.9);
}

._stage_4bjc0_254._slidingIn_4bjc0_332 ._letterBack2_4bjc0_307 {
  z-index: 1;
  opacity: 0;
  transform: rotate(-8deg) translateX(-7px) translateY(40px) scale(0.9);
}

._panel_4bjc0_355 {
  position: relative;
  height: calc(108px / 3);
  background: var(--color-paper);
  backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

._panel_4bjc0_355::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(rgba(36, 32, 26, 0.06) 0 1px, transparent 1px 15px);
}

._panelTop_4bjc0_372 {
  transform-origin: bottom center;
  padding: 0.3rem 0.5rem 0;
}

._panelMid_4bjc0_377 {
  transform-origin: center;
}

._panelBottom_4bjc0_381 {
  transform-origin: top center;
}

._panelText_4bjc0_385 {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.5rem;
  line-height: 1.3;
  color: var(--color-ink-muted);
}

._panelText_4bjc0_385 strong {
  display: block;
  font-family: var(--font-hand);
  font-size: 0.85rem;
  line-height: 1.1;
  color: var(--color-ink);
}

._stage_4bjc0_254._foldingBottom_4bjc0_401 ._panelBottom_4bjc0_381 {
  transform: rotateX(180deg) translateZ(1px);
}

._stage_4bjc0_254._foldingTop_4bjc0_405 ._panelTop_4bjc0_372 {
  transform: rotateX(-180deg) translateZ(2px);
}

._envelope_4bjc0_326 {
  position: relative;
  width: 240px;
  height: 156px;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s 0.2s;
}

._envelopeBody_4bjc0_418 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-envelope) 0%, #cbb27e 100%);
  border-radius: 2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

._envelopeBody_4bjc0_418::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 46%, rgba(0, 0, 0, 0.08) 50%, transparent 54%);
}

._addressee_4bjc0_433 {
  position: absolute;
  left: 16px;
  bottom: 18px;
  max-width: 65%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 3;
  pointer-events: none;
}

._addresseeVisible_4bjc0_447 {
  opacity: 1;
  transform: translateY(0);
}

._addresseeLabel_4bjc0_452 {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b5a3c;
}

._addresseeName_4bjc0_460 {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1.1;
  color: #2b2015;
}

._stage_4bjc0_254._airmail_4bjc0_467 ._envelopeBody_4bjc0_418 {
  border: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--color-accent) 0 10px, var(--color-paper) 10px 16px, var(--color-accent-ink) 16px 26px, var(--color-paper) 26px 32px) 6;
}

._envelopeFlap_4bjc0_472 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  background: linear-gradient(180deg, #e2cd9c, var(--color-envelope-flap));
  clip-path: polygon(0 0, 100% 0, 50% 92%);
  transform-origin: top center;
  transform: rotateX(148deg);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

._stage_4bjc0_254._sealed_4bjc0_486 ._envelopeFlap_4bjc0_472 {
  transform: rotateX(0deg);
}

._stampSlot_4bjc0_490 {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 2.5rem;
  height: 3.1rem;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 4;
}

._stampSlotVisible_4bjc0_502 {
  opacity: 1;
  transform: scale(1);
}

._stampSlot_4bjc0_490 svg {
  width: 100%;
  height: 100%;
  background: #f2e9cf;
  border: 2px dashed #cfc09a;
}

._postmark_4bjc0_514 {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4.6rem;
  height: 4.6rem;
  opacity: 0;
  transform: scale(2) rotate(-18deg);
  transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
  pointer-events: none;
}

._stage_4bjc0_254._stamped_4bjc0_527 ._postmark_4bjc0_514 {
  opacity: 0.92;
  transform: scale(1) rotate(-10deg);
}

._stage_4bjc0_254._mailed_4bjc0_532 ._envelope_4bjc0_326,
._stage_4bjc0_254._mailed_4bjc0_532 ._stampSlot_4bjc0_490,
._stage_4bjc0_254._mailed_4bjc0_532 ._postmark_4bjc0_514 {
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.7s ease;
  transform: translateY(140px) rotate(4deg);
  opacity: 0;
}

._deskLine_4bjc0_540 {
  position: absolute;
  bottom: 0;
  width: 84%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

._sendRow_4bjc0_548 {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

._sendBtn_4bjc0_555 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  background: var(--color-gold);
  color: var(--color-desk);
  border: none;
  padding: 0.75rem 1.4rem;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(179, 144, 63, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

._sendBtn_4bjc0_555:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(179, 144, 63, 0.5);
}

._sendBtn_4bjc0_555:disabled {
  background: #5a4d34;
  color: #a89a77;
  cursor: not-allowed;
  box-shadow: none;
}

._resetBtn_4bjc0_581 {
  all: unset;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}

._status_4bjc0_590 {
  min-height: 1.2rem;
  font-size: 0.85rem;
  color: var(--color-gold);
  margin: 0.8rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
  ._letter_4bjc0_263,
  ._panel_4bjc0_355,
  ._envelopeFlap_4bjc0_472,
  ._stampSlot_4bjc0_490,
  ._postmark_4bjc0_514 {
    transition-duration: 0.01ms !important;
  }
}
._list_lcnes_1 {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

._item_lcnes_7 {
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

._itemOpen_lcnes_15 {
  box-shadow: var(--shadow-paper-lifted);
}

._itemAirmail_lcnes_19 {
  border-left: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--color-accent) 0 6px, var(--color-paper) 6px 9px, var(--color-accent-ink) 9px 15px, var(--color-paper) 15px 18px) 6;
}

._row_lcnes_24 {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-paper);
}

._itemOpen_lcnes_15 ._row_lcnes_24 {
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 2px rgba(43, 38, 32, 0.08), 0 3px 5px rgba(43, 38, 32, 0.1);
}

._rowMain_lcnes_43 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._rowTitle_lcnes_49,
._rowFrom_lcnes_50 {
  overflow-wrap: break-word;
}

._rowTitle_lcnes_49 {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--color-ink);
}

._rowFrom_lcnes_50 {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

._rowRight_lcnes_65 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

._rowStamp_lcnes_72 {
  width: 1.7rem;
  height: 2.1rem;
  flex: none;
  transition: transform 0.25s ease;
}

._itemOpen_lcnes_15 ._rowStamp_lcnes_72 {
  transform: rotate(-6deg);
}

._rowStamp_lcnes_72 svg {
  width: 100%;
  height: 100%;
}

._unread_lcnes_88 {
  color: var(--color-accent);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._collapse_lcnes_95 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

._itemOpen_lcnes_15 ._collapse_lcnes_95 {
  grid-template-rows: 1fr;
}

._collapseInner_lcnes_105 {
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(43, 38, 32, 0.05), transparent 6px), var(--color-paper-raised);
}

._reading_lcnes_111 {
  padding: 1.2rem 1.1rem 1.4rem;
}

._coverLetter_lcnes_115 {
  font-family: var(--font-hand);
  font-size: 1.25rem;
  margin: 0 0 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px dashed var(--color-border);
}

._entry_lcnes_123 {
  margin-bottom: 1.2rem;
}

._entryDate_lcnes_127 {
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: var(--color-ink-muted);
}

._entryTitle_lcnes_133 {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  margin: 0.2rem 0 0.3rem;
  color: var(--color-ink);
}

._entryBody_lcnes_140 {
  font-size: 0.88rem;
}

._loading_lcnes_144 {
  color: var(--color-ink-muted);
  font-style: italic;
  font-size: 0.85rem;
}

._empty_lcnes_150 {
  color: var(--color-on-dark-muted);
  font-style: italic;
}