@font-face {
  font-family:Праздничный;
  src:url('/assets/playfair-display-cyrillic.woff2') format('woff2');
  font-weight:400 700;
  font-display:swap;
  unicode-range:U+0400-052F,U+2DE0-2DFF,U+A640-A69F
}

@font-face {
  font-family:Праздничный;
  src:url('/assets/playfair-display-latin.woff2') format('woff2');
  font-weight:400 700;
  font-display:swap
}

:root {
  --цвет-чернил:#443a31;
  --цвет-полотна:#f4efe5;
  --цвет-края:#d4c5b1;
  --тень-листа:0 11px 18px -10px #62513e66,0 2px 4px #62513e22;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--цвет-чернил);
  background:var(--цвет-полотна);
  font-synthesis:none
}

* {
  box-sizing:border-box
}
body {
  margin:0;
  overflow:hidden
}
button,input,textarea {
  font:inherit;
  color:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.55
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid #887a5f;
  outline-offset:4px
}
button {
  touch-action:manipulation
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  border:0
}
h1,h2,p {
  margin:0
}
h1,h2 {
  font-family:Праздничный,Georgia,serif;
  font-weight:400
}
h2 {
  font-size:30px;
  line-height:1.35
}
p {
  line-height:1.65
}

[hidden] {
  display:none!important
}

.скрытая-подпись {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}

.доска {
  position:fixed;
  inset:0;
  overflow:hidden;
  touch-action:none;
  background:radial-gradient(circle,#baae994d 1px,transparent 1.2px) 0 0/24px 24px,var(--цвет-полотна);
  outline:none;
  user-select:none;
  cursor:grab
}

.доска[data-состояние="перемещение"] {
  cursor:grabbing
}

.доска[data-состояние="загружается"]:after {
  content:'Готовим место для тёплых слов…';
  position:absolute;
  top:45%;
  width:100%;
  text-align:center;
  color:#948776
}

.холст {
  position:absolute;
  left:0;
  top:0;
  width:1120px;
  transform-origin:0 0;
  will-change:transform
}

.бумага {
  background-color:#faf6ed;
  background-image:linear-gradient(12deg,#f1eadc33,transparent 55%);
  background-size:100% 100%;
  box-shadow:var(--тень-листа);
  border:1px solid #fefcf4;
  clip-path:polygon(0 .3%,11% 0,22% .2%,35% 0,50% .15%,64% 0,81% .25%,100% 0,99.85% 20%,100% 35%,99.8% 58%,100% 78%,99.9% 100%,84% 99.8%,63% 100%,41% 99.8%,20% 100%,0 99.85%,.15% 70%,0 48%,.2% 25%)
}

[data-фон="ботаника"] {
  background-image:url('/assets/paper-botanical.webp');
  background-color:#f7f4e9
}

[data-фон="цветы"] {
  background-image:url('/assets/paper-flowers.webp');
  background-color:#faf1e8
}

[data-фон="чистая"] {
  background-image:linear-gradient(12deg,#f1eadc33,transparent 55%)
}

.записка {
  position:absolute;
  width:320px;
  height:380px;
  padding:0;
  background:none;
  text-align:center;
  transform-origin:50% 15px;
  will-change:transform
;
  filter:none
}

.записка__лист {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  height:100%;
  padding:42px 35px 25px;
  position:relative;
  overflow:hidden
}

.записка__текст {
  font-family:Праздничный,Georgia,serif;
  font-size:24px;
  line-height:1.32;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:100%;
  margin:auto 0;
  position:relative;
  z-index:1
}

.записка__подпись {
  font-size:18px;
  line-height:1.3;
  margin-top:15px;
  max-width:100%;
  overflow-wrap:anywhere;
  z-index:1
}

.записка__сердце {
  font-size:26px;
  line-height:1;
  margin:12px 0 0
}

.записка__рисунок {
  position:absolute;
  left:0;
  top:34px;
  width:320px;
  height:290px;
  pointer-events:none
}

.записка[data-есть-рукопись="да"] .записка__текст {
  margin:0 auto;
  font-size:18px;
  max-height:125px
}

.записка[data-есть-рукопись="да"] .записка__подпись {
  margin-top:auto
}

.записка[data-нулевая="да"] {
  width:660px;
  height:370px
}

.записка[data-нулевая="да"] .записка__лист {
  padding:74px 68px 38px
}

.нулевая__имена {
  font:400 47px/1.2 Праздничный,Georgia,serif
}

.нулевая__приветствие {
  font-size:24px;
  line-height:1.45;
  margin-top:22px
}

.нулевая__разделитель {
  display:flex;
  align-items:center;
  gap:18px;
  width:170px;
  margin:24px auto 15px;
  font-size:27px
}

.нулевая__разделитель:before,.нулевая__разделитель:after {
  content:'';
  height:1px;
  background:#bbae9b;
  flex:1
}

.нулевая__приглашение {
  font-size:20px;
  line-height:1.4
}

.крепление {
  position:absolute;
  z-index:4;
  top:3px;
  left:50%;
  pointer-events:none
}

.навигация {
  position:fixed;
  bottom:max(26px,env(safe-area-inset-bottom));
  right:max(26px,env(safe-area-inset-right));
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:12px
}

.круглая-кнопка {
  width:46px;
  height:46px;
  border-radius:50%;
  background:#fcf8efeb;
  box-shadow:0 3px 9px #57493628;
  border:1px solid #ded3c2;
  font:28px Georgia;
  transition:background .15s
}

.круглая-кнопка:hover {
  background:#fffdf7
}

#меню {
  font-size:19px
}

.список {
  position:absolute;
  right:0;
  bottom:120px;
  width:260px;
  max-height:min(60vh,450px);
  overflow:auto;
  background:#fffaf2f5;
  padding:10px;
  border-radius:10px;
  box-shadow:0 8px 30px #51453722;
  border:1px solid #e0d5c4
}

.список button {
  display:block;
  background:none;
  width:100%;
  padding:13px;
  text-align:left;
  font-size:16px;
  border-radius:6px
}

.список button:hover {
  background:#e9e0d3
}

.указатель {
  position:absolute;
  width:5px;
  height:5px;
  background:#a59781;
  border-radius:50%;
  pointer-events:none
}

.указатели {
  position:absolute;
  inset:0;
  pointer-events:none
}

.кнопка {
  background:#f1e9dc;
  padding:12px 19px;
  border:1px solid #d9ccbb;
  border-radius:7px;
  font:15px/1.3 system-ui,sans-serif
}

.кнопка:hover {
  background:#e9dfcf
}

.кнопка--главная {
  background:#706f58;
  color:#fffdf3;
  border-color:#706f58
}

.кнопка--главная:hover {
  background:#5c604b
}

.надпись {
  font:11px/1.4 system-ui,sans-serif;
  letter-spacing:2px;
  color:#8b7e6a
}

.ошибка {
  font:14px/1.5 system-ui,sans-serif;
  color:#a04737;
  min-height:22px
}

.закрыть {
  width:40px;
  height:40px;
  border-radius:50%;
  background:#f4eddf;
  font:28px/1 Georgia;
  flex:none
}

.сердце {
  font-size:40px;
  margin:22px 0 14px
}

.вход {
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:radial-gradient(circle,#baae994d 1px,transparent 1.2px) 0 0/24px 24px,var(--цвет-полотна);
  padding:24px;
  overflow:auto
}

.вход__лист {
  width:min(570px,100%);
  padding:64px 62px 42px;
  text-align:center;
  background-image:url('/assets/paper-botanical.webp')
}

.вход__вступление {
  font:11px system-ui;
  letter-spacing:2.4px;
  color:#8b806b
}

.вход h1 {
  font-size:45px;
  line-height:1.3;
  margin-top:23px
}

.вход p {
  font-size:18px
}

.вход label {
  display:block;
  margin:30px 0 10px;
  font:13px system-ui;
  color:#7f735f
}

.вход input {
  display:block;
  width:100%;
  padding:13px 12px;
  border:1px solid #d1c4b1;
  border-radius:7px;
  background:#fffaf17a;
  text-align:center;
  font:25px Georgia;
  letter-spacing:8px;
  margin-bottom:14px
}

.вход .кнопка {
  width:100%;
  display:flex;
  justify-content:center;
  gap:18px
}

.вход .ошибка {
  margin-top:12px
}

dialog {
  color:var(--цвет-чернил);
  background:#fcf8ef;
  border:1px solid #e6dcca;
  border-radius:12px;
  padding:35px;
  box-shadow:0 20px 70px #42362630;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto
}
dialog::backdrop {
  background:#554b395e;
  backdrop-filter:blur(5px)
}

.справка {
  width:470px;
  padding:42px
}

.справка>.закрыть {
  position:absolute;
  right:16px;
  top:16px
}

.справка h2 {
  margin:17px 0 23px
}

.справка p {
  margin:18px 0;
  font-size:16px
}

.справка details {
  font-size:15px
}

.справка summary {
  cursor:pointer
}

.редактор {
  width:930px;
  padding:24px 30px 17px;
  background:#f7f2e8;
  overflow:visible
}

.редактор__заголовок {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px
}

.редактор__заголовок h2 {
  font-size:27px;
  margin-top:5px
}

.редактор__содержание {
  display:flex;
  justify-content:center;
  gap:35px
}

.редактор__лист {
  position:relative;
  width:580px;
  min-height:500px;
  padding:32px 55px 24px;
  display:flex;
  flex-direction:column;
  clip-path:none
}

.редактор__лист textarea {
  width:100%;
  height:115px;
  resize:none;
  border:0;
  background:transparent;
  outline:none;
  text-align:center;
  font:24px/1.35 Праздничный,Georgia;
  padding:10px 0
}

.редактор__лист textarea::placeholder {
  color:#b1a58f
}

.редактор__лист input {
  min-width:0;
  flex:1;
  background:transparent;
  border:0;
  border-bottom:1px solid #d6c9b6;
  padding:8px 3px;
  font-size:19px
}

.подпись-редактора {
  display:flex;
  gap:16px;
  align-items:center;
  margin-top:10px;
  font:13px system-ui
}

.рукопись {
  position:relative;
  width:100%;
  aspect-ratio:320/290;
  touch-action:none;
  overflow:visible
}

.рукопись svg {
  width:100%;
  height:100%;
  touch-action:none;
  overflow:hidden;
  display:block
}

.рукопись[data-инструмент="перо"] {
  cursor:crosshair
}

.рукопись[data-инструмент="ластик"] {
  cursor:cell
}

.рукопись__подсказка {
  position:absolute;
  left:8%;
  right:8%;
  top:45%;
  text-align:center;
  color:#aa9d87;
  font:14px/1.7 Georgia;
  pointer-events:none
}

.рамка {
  position:absolute;
  border:1px solid #736b5a;
  transform-origin:center;
  pointer-events:none
}

.граница-рамки {
  position:absolute;
  inset:-6px;
  background:none;
  border:12px solid transparent;
  pointer-events:auto;
  cursor:move;
  touch-action:none;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,12px 12px,12px calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 12px,12px 12px)
}

.поворот {
  position:absolute;
  width:40px;
  height:40px;
  left:calc(50% - 20px);
  top:-49px;
  border:0;
  background:none;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  z-index:2
}

.поворот:before {
  content:'';
  position:absolute;
  left:19px;
  top:24px;
  width:1px;
  height:25px;
  background:#736b5a
}

.поворот:after {
  content:'';
  position:absolute;
  top:9px;
  left:12px;
  width:14px;
  height:14px;
  border:1px solid #736b5a;
  border-radius:50%;
  background:#fcf8ef
}

.оформление {
  width:175px;
  padding-top:25px;
  flex:none;
  font-family:system-ui,sans-serif
}

.оформление fieldset {
  border:0;
  margin:0 0 32px;
  padding:0
}

.оформление legend {
  font-size:13px;
  color:#7d715e;
  margin-bottom:14px
}

.варианты {
  display:flex;
  gap:9px
}

.образец-бумаги {
  width:46px;
  height:59px;
  background-size:cover;
  border:2px solid transparent;
  box-shadow:0 2px 5px #74624a22;
  border-radius:2px
}

.образец-бумаги[aria-pressed="true"] {
  outline:1px solid #857b64;
  outline-offset:3px
}

.выбор-крепления {
  display:flex;
  flex-direction:column;
  gap:6px
}

.выбор-крепления button {
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  background:none;
  padding:9px;
  border-radius:6px;
  font:22px Georgia
}

.выбор-крепления span {
  font:14px system-ui
}

.выбор-крепления button[aria-pressed="true"] {
  background:#e9e0d0
}

.оформление__совет {
  font-size:12px;
  color:#a09077;
  line-height:1.8
}

.инструменты {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:19px
}

.инструменты__рисунок {
  display:flex;
  gap:4px
}

.инструменты__рисунок button {
  padding:10px;
  background:transparent;
  border-radius:7px;
  font:24px/1.2 Georgia;
  display:flex;
  align-items:center;
  gap:7px
}

.инструменты__рисунок span {
  font:14px system-ui
}

.инструменты__рисунок button[aria-pressed="true"] {
  background:#e9dfcf
}

.редактор .ошибка {
  margin-top:8px
}

.чтение {
  background:transparent;
  border:0;
  box-shadow:none;
  padding:35px 25px 15px;
  overflow:visible
}

.чтение>.закрыть {
  position:absolute;
  right:0;
  top:0;
  z-index:10
}

.чтение .записка {
  position:relative;
  cursor:default;
  width:min(440px,calc(100vw - 76px));
  height:auto;
  aspect-ratio:320/380;
  display:block;
  transform:none!important
}

.чтение .записка__лист {
  padding:55px 48px 35px
}

.чтение .записка__текст {
  font-size:30px
}

.чтение .записка__подпись {
  font-size:23px
}

.чтение .записка__рисунок {
  width:100%;
  height:auto;
  aspect-ratio:320/290;
  top:45px
}

.чтение__действия {
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:18px
}

.контекстное-меню {
  position:fixed;
  z-index:100;
  background:#fffaf1;
  border:1px solid #dfd2bf;
  box-shadow:0 5px 20px #4a3d2922;
  padding:6px;
  border-radius:8px;
  min-width:150px
}

.контекстное-меню button {
  display:block;
  padding:10px 12px;
  background:none;
  text-align:left;
  width:100%;
  font:14px system-ui
}

.контекстное-меню button:hover {
  background:#eee4d6
}

.управление {
  width:520px
}

.управление label {
  display:block;
  font:14px system-ui;
  margin:20px 0 8px
}

.управление input,.управление textarea {
  display:block;
  width:100%;
  padding:10px;
  border:1px solid #d9ccba;
  border-radius:5px;
  background:#fffaf1
}

.управление textarea {
  height:90px;
  resize:vertical
}

.управление .кнопка {
  margin-top:16px
}

.управление hr {
  margin:24px 0;
  border:0;
  border-top:1px solid #dfd3c1
}

.управление p {
  font-size:15px
}

.управление small {
  font-size:11px
}

.ссылка-доски {
  display:block;
  margin-top:22px;
  color:#786d59;
  font-size:14px
}

.подтверждение {
  width:460px
}

.подтверждение p {
  margin:20px 0
}

.подтверждение .кнопка {
  margin-top:8px
}

.уведомление {
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  z-index:110;
  background:#fffaf3;
  border:1px solid #dfd3be;
  border-radius:8px;
  padding:11px 20px;
  box-shadow:0 5px 25px #4f3d2922;
  font:14px system-ui;
  max-width:80vw;
  text-align:center
}

.записка[data-есть-рукопись="да"] .записка__текст {
  max-height:60px;
  flex:none;
  line-height:1.3
}

.записка__рисунок {
  left:10.9375%;
  top:28.9474%;
  width:78.125%;
  height:59.61%
}

.чтение .записка__рисунок {
  left:10.9375%;
  top:28.9474%;
  width:78.125%;
  height:59.61%;
  aspect-ratio:auto
}

.бумага[data-фон="чистая"] {
  background-image:linear-gradient(12deg,#f1eadc33,transparent 55%),repeating-linear-gradient(93deg,#e8dfd50c 0 1px,transparent 1px 3px)
}

.записка[data-нулевая="да"] .бумага {
  background-size:cover;
  background-position:center
}

.редактор__лист {
  aspect-ratio:320/380;
  min-height:0
}

.редактор__лист textarea {
  height:calc(100% * .18);
  flex:none
}

.рукопись {
  flex:none
}

.редактор__лист .подпись-редактора {
  margin-top:auto
}

.редактор__лист input {
  max-width:100%
}

@media(max-height:800px) and (min-width:701px) {
  .редактор {
  width:820px
}

.редактор__лист {
  width:430px;
  min-height:0;
  padding:28px 47px 17px
}

.редактор__лист textarea {
  height:90px;
  font-size:22px
}

.редактор__заголовок {
  margin-bottom:12px
}

.оформление {
  padding-top:15px
}

.редактор__заголовок h2 {
  font-size:24px
}

.инструменты {
  padding-top:12px
}

}

@media(max-width:700px) {
  .вход {
  padding:20px
}

.вход__лист {
  padding:50px 26px 30px
}

.вход h1 {
  font-size:35px
}

.вход p {
  font-size:16px
}

.навигация {
  right:18px;
  bottom:18px
}

.редактор {
  padding:16px;
  width:calc(100vw - 20px);
  max-width:none;
  max-height:calc(100dvh - 20px);
  overflow:auto
}

.редактор__заголовок h2 {
  font-size:22px
}

.редактор__заголовок .надпись {
  font-size:9px
}

.редактор__содержание {
  flex-direction:column;
  gap:15px
}

.редактор__лист {
  width:100%;
  padding:23px 30px 18px;
  min-height:0
}

.редактор__лист textarea {
  height:85px;
  font-size:21px
}

.рукопись {
  max-height:none
}

.оформление {
  display:flex;
  gap:22px;
  width:100%;
  padding:0;
  justify-content:center
}

.оформление fieldset {
  margin:0
}

.оформление legend {
  margin-bottom:10px
}

.оформление__совет {
  display:none
}

.образец-бумаги {
  width:33px;
  height:41px
}

.выбор-крепления {
  flex-direction:row
}

.выбор-крепления button {
  padding:7px;
  gap:0;
  font-size:24px
}

.выбор-крепления span {
  display:none
}

.инструменты {
  position:sticky;
  bottom:-16px;
  background:#f7f2e8;
  padding:14px 0 8px;
  gap:5px
}

.инструменты__рисунок {
  gap:0
}

.инструменты__рисунок button {
  padding:8px;
  font-size:23px
}

.инструменты__рисунок span {
  display:none
}

.инструменты>.кнопка {
  padding:11px;
  font-size:13px
}

.справка {
  padding:32px 26px
}

.справка h2 {
  font-size:27px
}

.чтение {
  padding:35px 20px 8px
}

.чтение .записка__лист {
  padding:42px 32px 24px
}

.чтение .записка__текст {
  font-size:25px
}

.чтение .записка__подпись {
  font-size:19px
}

.чтение .записка__рисунок {
  top:28.9474%
}

.чтение__действия .кнопка {
  font-size:13px
}

.управление {
  padding:26px
}

}

@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important;
  transition:none!important
}

.записка {
  will-change:auto
}

}

@media(max-width:700px) {
  .записка[data-нулевая="да"] .записка__лист {
    padding:68px 38px 38px;
  }
  .нулевая__имена {
    font-size:38px!important;
    line-height:1.3;
  }
  .нулевая__приветствие {
    font-size:23px!important;
    line-height:1.5;
  }
  .нулевая__приглашение {
    font-size:20px;
  }
}

/* Бумага движется вокруг крепления; сам предмет остаётся на холсте. */
.записка__подвес {
  position:relative;
  isolation:isolate;
  width:100%;
  height:100%;
  transform-origin:50% 15px;
  filter:none;
  will-change:transform;
}

.записка__подвес:before {
  content:'';
  position:absolute;
  left:2%;
  top:2px;
  width:96%;
  height:32px;
  background:#50422e24;
  filter:blur(1.2px);
  transform:translate(.6px,1px);
  z-index:-1;
}

.записка__подвес:after {
  content:'';
  position:absolute;
  inset:2px 2% 1px;
  background:linear-gradient(180deg,transparent 0 10%,#5749320c 30%,#5749322b 100%);
  filter:blur(var(--тень-размытие,3.3px));
  transform:translate(var(--тень-смещение-горизонталь,3px),var(--тень-смещение-вертикаль,5px));
  z-index:-1;
}

.редактор__лист {
  box-shadow:.5px 1px 1.5px #50422e18,var(--тень-смещение-горизонталь,3px) var(--тень-смещение-вертикаль,5px) var(--тень-размытие,3.3px) #57493220;
}

.список {
  bottom:185px;
}

.бумага {
  isolation:isolate;
}

.бумага__свет {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:.45;
  z-index:0;
}

.нулевая__имена,.нулевая__приветствие,.нулевая__разделитель,.нулевая__приглашение,.записка__сердце,
.редактор__лист textarea,.подпись-редактора {
  position:relative;
  z-index:1;
}

.рукопись {
  z-index:1;
}

.крепление {
  transform:translateX(-50%);
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 1px 1px #4c3f2d35);
}

.крепление[data-крепление="гвоздик"] {
  width:47px;
  height:47px;
  top:-8.5px;
}

.записка[data-крепление="гвоздик"] .бумага,.редактор__лист[data-крепление="гвоздик"] {
  mask-image:radial-gradient(circle 6px at 50% 15px,transparent 95%,#000 100%);
}

.крепление[data-крепление="нитка"] {
  width:231px;
  height:39px;
  top:-12.3px;
  filter:drop-shadow(0 .7px .4px #6c5a3c22);
}

.крепление[data-крепление="скотч"] {
  width:112px;
  height:68px;
  top:-33px;
  transform:translateX(-50%) rotate(-3deg);
  filter:drop-shadow(0 1px .5px #6c5a3c15);
}

.крепление__исходник,.крепление__свет {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
}

.выбор-крепления button {
  font-family:system-ui,sans-serif;
  font-size:13px;
}

.выбор-крепления img {
  width:37px;
  height:27px;
  object-fit:contain;
}

@media(max-width:700px) {
  .выбор-крепления button {
    flex-direction:column;
    gap:3px;
    font-size:11px;
  }
  .выбор-крепления span {
    display:block;
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .записка__подвес {
    will-change:auto;
  }
}