.file[hidden] { display: none; }
.poem-folder { min-height: 64px; }
.poem-folder .label, .poem-fragment .label { cursor: grab; user-select: none; -webkit-user-select: none; }
.poem-folder .label { font-size: 21px; line-height: 1.3; }
.poem-folder:focus-visible { outline: 1px dashed rgba(255,255,255,.6); outline-offset: 8px; }
.poem-folder.is-drop-target img { filter: brightness(1.16) drop-shadow(0 0 5px #c1e3ff); }
.poem-folder.is-drop-target .label { color: #c1e3ff; }
.poem-fragment { width: 240px; min-height: 40px; }
.poem-fragment .label { white-space: pre-line; }
.poem-fragment.dragging .label { cursor: grabbing; }
.poem-align-target .label { outline: 1px dashed rgba(255,255,255,.5); outline-offset: 7px; }
#poem-window {
  position: fixed; z-index: 100001; width: 390px; max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px); overflow: auto;
  background: rgba(246,246,243,.98); color: #343636;
  border: 1px solid rgba(255,255,255,.6); border-radius: 7px;
  box-shadow: 0 9px 32px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.14);
  font-family: "Helvetica Neue", "PingFang SC", sans-serif;
  transition: box-shadow .15s ease;
}
#poem-window[hidden] { display: none; }
#poem-window.is-drop-target { box-shadow: 0 0 0 2px #97b4c7, 0 9px 32px rgba(0,0,0,.2); }
.poem-window-bar { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  background: #e8e9e7; border-bottom: 1px solid #dcddda; cursor: grab; touch-action: none; }
.poem-window-title { margin: 0; font-size: 11px; font-weight: 400; color: #666b6b;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.poem-window-title:focus { outline: none; }
.poem-window-close { flex: 0 0 10px; width: 10px; height: 10px; border: 1px solid #ce7971;
  border-radius: 50%; background: #df928b; cursor: pointer; color: transparent; }
.poem-window-close:focus-visible { outline: 2px solid #849dad; outline-offset: 3px; }
.poem-window-body { padding: 22px 24px 17px; min-height: 115px; }
.poem-source { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0 0 12px;
  padding: 8px 4px; background: none; border: none; border-radius: 3px; color: #343636;
  text-align: left; font: inherit; font-size: 15px; line-height: 1.55; cursor: grab; touch-action: none; }
.poem-source::before { content: ''; flex: 0 0 11px; height: 14px; margin-top: 4px;
  border: 1px solid #adb6b8; border-radius: 1px; background: linear-gradient(#c9d0d1,#c9d0d1) 2px 4px / 6px 1px no-repeat,
  linear-gradient(#c9d0d1,#c9d0d1) 2px 7px / 6px 1px no-repeat; }
.poem-source-text { white-space: pre-line; }
.poem-source:hover { background: #e6ebed; }
.poem-source:focus-visible { outline: 1px solid #a4b9c4; outline-offset: 2px; }
.poem-source small { display: block; margin-top: 4px; font-size: 12px; color: #8a9090; }
.poem-source-main { display: block; margin-top: 8px; }
.poem-source.is-dragging { opacity: .35; }
.poem-window-hint { margin: 17px 0 0 27px; font-size: 10px; letter-spacing: .1px; color: #919797; line-height: 1.5; }
.poem-editor { margin: 0 0 14px 27px; }
.poem-editor textarea { display: block; width: 100%; margin: 0 0 8px; padding: 7px 8px;
  border: 1px solid #c6d1d4; border-radius: 3px; background: #fff; color: #343636;
  font: inherit; font-size: 14px; line-height: 1.55; resize: vertical;
  user-select: text; -webkit-user-select: text; touch-action: auto; }
.poem-editor textarea:focus { outline: 1px solid #9fb6c1; }
.poem-editor-actions { display: flex; gap: 13px; justify-content: flex-end; }
.poem-editor-actions button { padding: 3px 1px; border: 0; background: none; color: #70828c;
  font: inherit; font-size: 11px; cursor: pointer; }
.poem-editor-actions button:last-child { color: #344e5e; }
.poem-group { width: 320px; min-height: 50px; }
.poem-group .label { text-align: left; white-space: pre-line; padding: 10px 12px;
  border-left: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.55);
  cursor: grab; user-select: none; -webkit-user-select: none; }
.poem-group-line { display: block; margin-bottom: 8px; }
.poem-group-line:last-child { margin-bottom: 0; }
.poem-group-line.en { margin-top: -4px; }
.poem-separate { position: absolute; top: -23px; right: -18px; padding: 2px 4px;
  border: 0; background: rgba(0,0,0,.35); border-radius: 2px; color: #ddd;
  font-family: "Helvetica Neue", sans-serif; font-size: 19px; cursor: pointer; opacity: .65; }
.poem-group:hover .poem-separate, .poem-separate:focus-visible { opacity: 1; }
.poem-join-target .label { outline: 1px solid rgba(255,222,46,.8); outline-offset: 5px; }
.poem-join-target .label::after { content: 'Release to compose'; position: absolute;
  left: 0; top: calc(100% + 9px); width: 100%; color: #ffde2e; font-size: 18px;
  line-height: 1.3; text-align: center; background: rgba(0,0,0,.65); }