.leave-note { position:fixed; z-index:4; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:13px 20px; border:1px solid #ffffff80; border-radius:99px; background:#fbfaf3e8; color:#35463d; box-shadow:0 3px 16px #173a3820; font-size:13px; backdrop-filter:blur(12px); }
  .leave-note svg {width:19px;height:19px;} .leave-note:hover {background:#fffdf7;}
  .leave-note:focus-visible {outline:none;}
  .note-modal { border:0; padding:0; overflow:visible; background:none; color:var(--surface-ink); width:min(460px,calc(100vw - 40px),max(180px,calc((100dvh - 170px)*4/3))); }
  .note-modal::backdrop {background:#163b3d48;backdrop-filter:blur(9px);}
  .note-modal[open] {animation:modal-in 300ms ease both;}
  .note-heading {text-align:left;font-family:"Inter Display",Inter,ui-sans-serif,system-ui,sans-serif;font-size:24px;font-weight:600;line-height:1.04;letter-spacing:-.03em;margin:0 0 24px;color:var(--surface-ink);}
  .note-description {text-align:left;color:var(--surface-ink);opacity:.72;font-size:14px;font-weight:400;line-height:1.5;margin:0 0 24px;}
  .paper-stage {position:relative;width:100%;aspect-ratio:4/3;perspective:900px;}
  .fold-paper {position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 14px 22px #17383328);}
  .paper-writing {--note-ink:#11110f;--note-muted:#706c63;position:absolute;inset:0;padding:32px 34px 28px;box-sizing:border-box;display:flex;flex-direction:column;transition:opacity 200ms;}
  .paper-writing textarea {width:100%;flex:1;resize:none;border:0;padding:0;background:none;outline:none;color:var(--note-ink);font:400 18px/1.55 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;}
  .paper-writing textarea::placeholder {color:var(--note-muted);opacity:.45;}
  .paper-count {align-self:flex-end;font-size:10px;letter-spacing:.06em;color:#9e9989;margin-top:10px;font-variant-numeric:tabular-nums;}
  .note-actions {text-align:left;margin-top:24px;}
  .release-button {appearance:none;border:0;border-radius:0;background:transparent;color:var(--surface-ink);padding:0;min-height:36px;font:500 14px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;transition:color 180ms ease,opacity 180ms ease;}
  .release-button:hover:not(:disabled) {color:var(--surface-ink);}
  .release-button:focus-visible {outline:1px solid currentColor;outline-offset:4px;}
  .release-button:disabled {opacity:.55;cursor:default;}
  .note-modal.is-folding .paper-writing {opacity:0;pointer-events:none;}
  .flying-boat {position:fixed;z-index:8;pointer-events:none;transform-origin:50% 72%;will-change:transform;}
  @keyframes modal-in {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  @media(max-width:480px) {  .paper-writing {padding:23px 25px;} .paper-writing textarea {font-size:18px;} .note-description {margin-bottom:22px;} }
  @media(max-height:650px) {  .note-description {margin-bottom:16px;}  .note-actions {margin-top:16px;} .paper-writing {padding:22px;} .paper-writing textarea {font-size:17px;} }
  @media(prefers-reduced-motion:reduce) { .note-modal[open] {animation:none;} .paper-writing {transition:none;} }


  @font-face {font-family:NoteCaveat;src:url('/public/tide-water/vendor/tegaki/fonts/caveat/caveat.ttf') format('truetype');font-display:swap;}
  .handwriting-editor {position:relative;flex:1;min-height:0;overflow:hidden;}
  .paper-writing .handwriting-editor textarea {position:absolute;inset:0;box-sizing:border-box;height:100%;font-family:NoteCaveat,cursive;font-size:28px;line-height:1.4;letter-spacing:0;font-feature-settings:"liga" 0,"calt" 0;caret-color:var(--note-ink);}
  #note-ink {position:absolute;top:0;left:0;right:0;min-height:100%;font-family:NoteCaveat,cursive;font-size:28px;line-height:1.4;letter-spacing:0;color:var(--note-ink);pointer-events:none;white-space:pre-wrap;overflow-wrap:break-word;}
  #note-ink canvas {width:auto;height:auto;}
  .handwriting-ready #water-note {color:transparent;-webkit-text-fill-color:transparent;}
  .handwriting-ready #water-note::placeholder {-webkit-text-fill-color:var(--note-muted);color:var(--note-muted);opacity:.45;}
  .handwriting-ready.is-composing #water-note {color:var(--note-ink);-webkit-text-fill-color:var(--note-ink);}
  .is-composing #note-ink {visibility:hidden;}
  @media(max-width:480px) {#note-ink,.paper-writing .handwriting-editor textarea {font-size:25px;}}


.note-invitation-section {
  padding:0 0 32px;
  color:var(--surface-ink);
}
.note-invitation-section > .leave-note {
  position:relative;z-index:1;top:auto;bottom:auto;left:auto;transform:none;
  grid-column:2;justify-self:start;width:auto;max-width:640px;padding:12px 0;min-height:24px;
  display:flex;flex-direction:row;align-items:center;gap:10px;
  border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;
  color:inherit;font:500 14px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;
  text-align:left;cursor:pointer;
}
.note-invitation-section > .leave-note:hover {background:none;}
.note-invitation-section > .leave-note:disabled {visibility:hidden;}
.leave-note > i {flex:none;font-size:18px;line-height:1;}
.leave-note__text {position:relative;}
.leave-note__marked {position:relative;isolation:isolate;display:inline-block;}
.leave-note__stroke {
  position:absolute;z-index:-1;left:0;bottom:-4px;width:100%;height:9px;
  pointer-events:none;opacity:0;clip-path:inset(0 100% 0 0);
  transition:clip-path 320ms cubic-bezier(.22,.72,.26,1),opacity 180ms;
}
.leave-note:is(:hover,:focus-visible) .leave-note__stroke {opacity:1;clip-path:inset(0);}
@media(prefers-reduced-motion:reduce) {.leave-note__stroke {transition:none;}}
.note-modal * {box-sizing:content-box;}
.note-modal .paper-writing,.note-modal .handwriting-editor textarea {box-sizing:border-box;}
.note-modal .note-heading {padding:0;}
.note-modal {font-weight:400;}

.boat-targets {position:absolute;inset:0;z-index:2;pointer-events:none;}
.boat-target {position:absolute;min-width:36px;min-height:36px;padding:0;border:0;border-radius:3px;background:transparent;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;touch-action:manipulation;}
.boat-target:focus-visible {outline:1px solid var(--tide-ink);outline-offset:3px;}
.boat-target:hover {background:transparent;}
.note-modal.is-reading .note-actions,.note-modal.is-reading .paper-count {display:none;}
.note-modal.is-unfolding .paper-writing {opacity:0;pointer-events:none;}
.note-modal.is-reading #water-note {cursor:default;caret-color:transparent;}
.note-error {font-size:12px;line-height:1.5;margin:16px 0 0;color:var(--surface-ink);}
@media(prefers-reduced-motion:no-preference) {
  .leave-note:is(:hover,:focus-visible) > i {animation:origami-flutter 900ms ease both;}
  .leave-note.is-opening > i {animation:origami-flutter 900ms ease both;}
}
@keyframes origami-flutter {
  0%,100% {transform:perspective(100px) rotateY(0) rotateZ(0) translateY(0);}
  25% {transform:perspective(100px) rotateY(-28deg) rotateZ(-9deg) translateY(-2px);}
  55% {transform:perspective(100px) rotateY(24deg) rotateZ(7deg) translateY(-3px);}
  78% {transform:perspective(100px) rotateY(-10deg) rotateZ(-3deg) translateY(-1px);}
}

.release-button {display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
.release-button > i {font-size:18px;line-height:1;}
@media(prefers-reduced-motion:no-preference) {
 .release-button:is(:hover,:focus-visible):not(:disabled) > i {animation:note-send 700ms ease both;}
 .leave-note.is-appearing {animation:invitation-appear 1100ms ease both;transform-origin:50% 50%;}
 .leave-note.is-appearing > i {animation:origami-flutter 1100ms ease both;}
}
@keyframes note-send {0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(3px,-3px) rotate(-8deg)}70%{transform:translate(1px,-1px) rotate(3deg)}}
@keyframes invitation-appear {0%{opacity:0;transform:translateY(8px) rotate(-1.2deg)}38%{opacity:1;transform:translateY(-2px) rotate(.8deg)}65%{transform:translateY(1px) rotate(-.45deg)}84%{transform:translateY(-.5px) rotate(.2deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}

@media(max-width:520px) {.note-heading {font-size:clamp(20px,6vw,24px);}}

.note-modal.is-folding .note-heading,.note-modal.is-folding .note-actions {visibility:hidden;pointer-events:none;}