/* A small letter from the hills. Scoped to the koi experience. */
.koi-dialog button:focus-visible,.mine-koi-collection button:focus-visible {
  outline:2px solid var(--cinnabar); outline-offset:4px;
}
.koi-dialog {
  --koi-accent:#ad3b25;
  position:fixed; inset:0; width:min(396px,calc(100vw - 32px));
  max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);
  margin:auto; padding:0; border:1px solid rgba(113,97,65,.2); border-radius:14px;
  background:#f7f3e9; color:var(--ink); overflow:auto; overscroll-behavior:contain;
  box-shadow:0 24px 70px rgba(36,39,27,.2),0 3px 12px rgba(57,48,29,.08),inset 0 1px 0 rgba(255,255,255,.8);
  font-family:'Noto Serif SC',serif;
}
.koi-dialog:not([open]) { display:none; }
.koi-dialog:focus { outline:none; }
.koi-dialog::backdrop { background:rgba(47,49,37,.19); }
.koi-dialog[open] { animation:koi-unfold .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes koi-unfold { from { opacity:0; transform:translateY(15px) rotate(-1deg); } to { opacity:1; transform:none; } }
.koi-letter { position:relative; padding:27px 31px 23px; isolation:isolate; }
.koi-letter::before {
  content:''; position:absolute; inset:9px; border:1px solid rgba(123,108,77,.15);
  border-radius:7px; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at 50% 21%,rgba(255,255,255,.72),transparent 64%),linear-gradient(135deg,rgba(223,209,178,.08),transparent 45%,rgba(223,209,178,.1));
}
.koi-letter-head { display:flex; align-items:center; justify-content:space-between; min-height:20px; padding-right:24px; gap:10px; }
.koi-letter-brand { font-size:11px; letter-spacing:.22em; color:var(--moss-deep); white-space:nowrap; }
.koi-letter-edition { font:italic 9px 'Cormorant Garamond',Georgia,serif; letter-spacing:.14em; color:#80745e; }
.koi-close {
  position:absolute; right:8px; top:12px; width:44px; height:44px; padding:0;
  border:0; border-radius:50%; background:transparent; color:#857f70; font:22px/1 Georgia,serif; cursor:pointer;
  transition:color .2s,background .2s;
}
.koi-close:hover { color:var(--koi-accent); background:rgba(129,111,80,.055); }
.koi-letter-rule { position:relative; height:1px; margin-top:16px; background:linear-gradient(90deg,rgba(127,109,75,.23),rgba(127,109,75,.07)); }
.koi-letter-rule::before { content:''; position:absolute; left:0; top:-1px; width:20px; height:2px; background:var(--koi-accent); opacity:.65; pointer-events:none; }
.koi-art { position:relative; margin:10px 0 0; height:190px; display:grid; place-items:center; }
.koi-art::before,.koi-art::after { content:''; position:absolute; width:178px; height:116px; border:1px solid rgba(135,136,107,.17); border-radius:50%; transform:rotate(-14deg); pointer-events:none; }
.koi-art::before { background:radial-gradient(ellipse,rgba(216,204,166,.18),rgba(238,231,210,.04) 70%); }
.koi-art::after { width:214px; height:143px; opacity:.55; }
.koi-letter-fish { display:block; width:158px; height:114px; position:relative; z-index:1; }
.koi-dialog[open] .koi-letter-fish { animation:koi-drift 2.8s ease-in-out 1; }
@keyframes koi-drift { 0% { transform:rotate(-6deg) scale(.95); opacity:.35; } 65% { transform:rotate(2deg) scale(1.015); opacity:1; } 100% { transform:none; } }
.koi-art-side { position:absolute; top:31px; left:0; writing-mode:vertical-rl; white-space:nowrap; font-size:9px; letter-spacing:.2em; color:#8b816b; }
.koi-art-seal { position:absolute; right:4px; bottom:27px; border:1px solid var(--koi-accent); padding:7px 5px 7px 6px; writing-mode:vertical-rl; font-size:11px; line-height:1.4; letter-spacing:.2em; color:#fff7e9; background:var(--koi-accent); transform:rotate(4deg); border-radius:3px 2px 4px 2px; }
.koi-art-seal::after { content:''; position:absolute; inset:2px; border:1px solid rgba(255,247,233,.48); border-radius:1px; pointer-events:none; }
.koi-letter-body { text-align:center; }
.koi-letter-kind { font-size:10px; letter-spacing:.2em; color:var(--koi-accent); }
.koi-letter-title { margin:15px 0 13px; white-space:pre-line; font-size:30px; font-weight:500; line-height:1.52; letter-spacing:.075em; }
.koi-letter-note { margin:0; font-size:12px; line-height:2; letter-spacing:.065em; color:#6e715f; white-space:pre-line; }
.koi-letter-signature { display:flex; align-items:center; justify-content:center; gap:12px; margin:24px 0 21px; font-size:9px; letter-spacing:.18em; color:#8b826d; }
.koi-letter-signature::before,.koi-letter-signature::after { content:''; width:22px; height:1px; background:rgba(144,129,94,.24); }
.koi-receive {
  display:block; width:100%; max-width:248px; min-height:46px; margin:0 auto; border:1px solid var(--koi-accent); border-radius:5px;
  background:var(--koi-accent); color:#fff8ed; box-shadow:inset 0 0 0 3px #ffffff18,0 3px 7px #45371b0a;
  font:inherit; font-size:12px; letter-spacing:.18em; cursor:pointer;
  transition:filter .2s,box-shadow .2s;
}
.koi-receive:hover { filter:brightness(.96); box-shadow:inset 0 0 0 3px #ffffff20,0 4px 10px #45371b12; }
.koi-letter-foot { margin-top:16px; padding:0; background:transparent; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; color:#857d6b; font-size:9px; line-height:1.6; letter-spacing:.055em; text-align:center; }
.koi-letter-date { font-size:9px; letter-spacing:.08em; }
.koi-letter-status { color:#797d69; }
.koi-guest-save { display:block; min-height:40px; margin:5px auto -5px; border:0; background:transparent; font:inherit; font-size:11px; color:var(--cinnabar); cursor:pointer; }
.koi-guest-save[hidden] { display:none; }
.mine-koi-collection { position:relative; border:1px solid rgba(117,104,69,.14); border-radius:9px; background:rgba(231,222,201,.13); overflow:hidden; }
.mine-koi-collection:empty { display:none; }
.koi-collection-lead { position:relative; display:flex; align-items:center; gap:10px; padding:11px 14px; }
.koi-collection-art { width:46px; height:40px; flex:none; }
.koi-collection-copy { flex:1; min-width:0; }
.koi-collection-title { font-size:14px; font-weight:500; letter-spacing:.035em; margin:3px 0; line-height:1.65; }
.koi-collection-note { font-size:10px; color:#7e7b67; line-height:1.7; }
.koi-collection-toggle { min-height:44px; min-width:44px; padding:5px; border:0; background:transparent; color:var(--cinnabar); font:inherit; font-size:11px; cursor:pointer; flex:none; }
.koi-collection-list { display:grid; gap:0; padding:0 15px 7px; border-top:1px solid rgba(117,104,69,.12); }
.koi-collection-list[hidden] { display:none; }
.koi-memory { display:grid; grid-template-columns:1fr auto; text-align:left; gap:5px; min-height:55px; align-content:center; width:100%; border:0; border-bottom:1px solid rgba(117,104,69,.1); background:transparent; color:var(--ink); padding:9px 0; font:inherit; cursor:pointer; }
.koi-memory:last-child { border-bottom:0; }
.koi-memory strong { font-size:12px; font-weight:400; }
.koi-memory span { font-size:10px; color:#8a7b60; }
.koi-memory small { grid-column:1/-1; font-size:10px; color:#7c7967; }
.koi-memory-today { color:var(--cinnabar); }
.koi-unread-count { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:13px; height:13px; padding:0 3px; border-radius:9px; background:var(--cinnabar); color:var(--paper-light); font:9px/1 system-ui,sans-serif; letter-spacing:0; vertical-align:-1px; }
.koi-inbox-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:14px 0 3px; }
.koi-inbox-heading h5 { font:500 15px/1.6 'Noto Serif SC',serif; letter-spacing:.09em; }
.koi-inbox-heading > span { font-size:10px; color:#7e7b67; }
.koi-inbox-toolbar { display:flex; align-items:center; justify-content:space-between; gap:7px; border-bottom:1px solid rgba(117,104,69,.18); }
.koi-inbox-filters { display:flex; gap:14px; }
.koi-inbox-filters button { min-height:44px; padding:5px 0; border:0; border-bottom:2px solid transparent; background:transparent; color:#7e7b67; font:inherit; font-size:12px; cursor:pointer; }
.koi-inbox-filters button[aria-pressed="true"] { border-bottom-color:var(--cinnabar); color:var(--cinnabar); }
.koi-inbox-read-all { min-height:44px; padding:4px 0 4px 5px; border:0; background:transparent; color:var(--moss-deep); font:inherit; font-size:10px; cursor:pointer; }
.koi-inbox-read-all:disabled { opacity:.4; cursor:default; }
.koi-notice { position:relative; padding:13px 0 13px 12px; }
.koi-notice strong { line-height:1.6; }
.koi-notice.is-unread::before { content:''; position:absolute; top:21px; left:0; width:5px; height:5px; background:var(--cinnabar); border-radius:50%; }
.koi-notice.is-unread strong { font-weight:500; }
.koi-inbox-empty { font-size:11px; line-height:1.9; padding:20px 0; color:#7e7b67; }
.koi-dialog.is-notice .koi-art { height:92px; margin:4px 0 13px; place-items:center start; }
.koi-dialog.is-notice .koi-letter-fish { width:94px; height:70px; }
.koi-dialog.is-notice .koi-art::before,.koi-dialog.is-notice .koi-art::after,.koi-dialog.is-notice .koi-art-side { display:none; }
.koi-dialog.is-notice .koi-art-seal { bottom:19px; }
.koi-dialog.is-notice .koi-letter-body { text-align:left; }
.koi-dialog.is-notice .koi-letter-title { font-size:22px; letter-spacing:.045em; margin:12px 0 18px; overflow-wrap:anywhere; }
.koi-dialog.is-notice .koi-letter-note { font-size:13px; line-height:2; color:#53584d; overflow-wrap:anywhere; }
.koi-dialog.is-notice .koi-letter-signature { margin:25px 0 22px; }
.koi-notice-action { display:inline-block; min-height:44px; margin-top:8px; padding:5px 0; border:0; background:transparent; color:var(--moss-deep); font:inherit; font-size:12px; cursor:pointer; }
.koi-notice-action[hidden] { display:none; }
.koi-delivery-fish { position:fixed; z-index:20000; pointer-events:none; transform-origin:center; }
.mine-koi-collection.is-receiving .koi-collection-lead::after {
  content:''; position:absolute; left:14px; top:50%; width:46px; height:40px;
  border:1px solid rgba(173,59,37,.28); border-radius:50%; pointer-events:none;
  animation:koi-receipt-ripple .65s ease-out both;
}
.mine-koi-collection.is-receiving .koi-collection-note { color:var(--cinnabar); }
@keyframes koi-receipt-ripple {
  from { transform:translateY(-50%) scale(.65); opacity:.7; }
  to { transform:translateY(-50%) scale(1.8); opacity:0; }
}
@media(max-width:480px) {
  .koi-letter { padding:24px 25px 22px; }
  .koi-art { height:178px; }
  .koi-letter-title { font-size:28px; }
  .koi-letter-note { font-size:12px; }
  .koi-collection-lead { padding:10px; gap:7px; }
  .koi-collection-art { width:40px; height:36px; }
  .mine-koi-collection.is-receiving .koi-collection-lead::after { left:10px; width:40px; height:36px; }
}
@media(max-height:690px) {
  .koi-letter { padding-top:20px; padding-bottom:19px; }
  .koi-art { height:133px; margin-top:8px; }
  .koi-letter-fish { width:136px; height:98px; }
  .koi-art::before { width:153px; height:96px; }
  .koi-art::after { width:181px; height:118px; }
  .koi-art-side { top:12px; font-size:8px; }
  .koi-art-seal { right:0; bottom:12px; font-size:10px; padding:5px 4px; }
  .koi-letter-title { font-size:26px; margin:10px 0; }
  .koi-letter-signature { margin:16px 0; }
  .koi-letter-foot { margin-top:12px; gap:3px; }
}
@media(max-height:500px) and (min-width:600px) {
  .koi-dialog:not(.is-notice) { width:min(620px,calc(100vw - 32px)); }
  .koi-dialog:not(.is-notice) .koi-letter { display:grid; grid-template-columns:170px minmax(0,1fr); column-gap:24px; padding:18px 27px; }
  .koi-dialog:not(.is-notice) .koi-letter-head,
  .koi-dialog:not(.is-notice) .koi-letter-rule { grid-column:1/-1; }
  .koi-dialog:not(.is-notice) .koi-letter-rule { margin:9px 0 13px; }
  .koi-dialog:not(.is-notice) .koi-art { grid-column:1; grid-row:3/6; height:168px; margin:0; align-self:center; }
  .koi-dialog:not(.is-notice) .koi-letter-body { grid-column:2; grid-row:3; }
  .koi-dialog:not(.is-notice) .koi-letter-title { font-size:24px; margin:8px 0; }
  .koi-dialog:not(.is-notice) .koi-letter-note { font-size:11px; line-height:1.8; }
  .koi-dialog:not(.is-notice) .koi-letter-signature { display:none; }
  .koi-dialog:not(.is-notice) .koi-receive { grid-column:2; grid-row:4; min-height:44px; margin-top:12px; }
  .koi-dialog:not(.is-notice) .koi-guest-save { grid-column:2; grid-row:5; }
  .koi-dialog:not(.is-notice) .koi-letter-foot { grid-column:1/-1; grid-row:6; flex-direction:row; justify-content:space-between; gap:12px; margin-top:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .koi-dialog[open],.koi-dialog[open] .koi-letter-fish { animation:none; }
  .koi-receive,.koi-close { transition:none; }
  .mine-koi-collection.is-receiving .koi-collection-lead::after { display:none; animation:none; }
}