@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Hi+Melody&family=Nanum+Pen+Script&display=swap");

:root {
  color-scheme: light;
  --bg: #f5eddc;
  --paper: #fff8ea;
  --paper-shadow: #e7c2a4;
  --ink: #161616;
  --muted: #746950;
  --line: #201d18;
  --green: #457463;
  --blue: #5a6f99;
  --purple: #8171bc;
  --red: #bd4b44;
  --note-stage-bg: radial-gradient(circle at 50% 38%, #fedcca 0 28%, #fdd5c2 56%, #fbcfbd 100%);
  --ritual-stage-bg: #fdc8b3;
  --crumple-duration: 4000ms;
  --tear-duration: 5000ms;
  --tear-ritual-duration: 6200ms;
  --flush-duration: 7800ms;
  --flush-drop-duration: 2800ms;
  --flush-drop-delay: 5000ms;
  --plane-duration: 8600ms;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(22, 22, 22, 0.026) 1px, transparent 1px) 0 0 / 100% 4px,
    radial-gradient(circle at 14% 10%, rgba(129, 113, 188, 0.15), transparent 18rem),
    radial-gradient(circle at 90% 80%, rgba(69, 116, 99, 0.13), transparent 22rem),
    var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  letter-spacing: -0.005em;
}

button,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

.app-shell {
  display: grid;
  width: min(34rem, calc(100vw - 2rem));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.6rem) 0;
  align-items: center;
}

.app-shell.is-page {
  width: min(58rem, calc(100vw - 2rem));
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.menu-panel,
.crumple-page,
.tear-page,
.flush-page,
.plane-page {
  padding: clamp(1rem, 2.5vw, 1.45rem);
  border: 2px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.8);
  box-shadow: 8px 8px 0 rgba(22, 22, 22, 0.08);
}

.menu-panel {
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.menu-panel.is-active {
  display: flex;
}

.title-block {
  display: grid;
  gap: 0.65rem;
}

.eyebrow {
  justify-self: start;
  margin: 0;
  padding: 0.28rem 0.42rem;
  border: 1.5px solid var(--line);
  background: #ece1c8;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
}

h1,
h2 {
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.025em;
}

h1 {
  margin-bottom: 0.25rem;
  font-size: clamp(3.8rem, 7vw, 6rem);
  line-height: 0.9;
}

h2 {
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 0.96;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(6.3rem, 1fr);
  gap: 0.75rem;
  margin-top: 0.1rem;
}

.action-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem;
  background: rgba(255, 253, 247, 0.86);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.18;
  text-align: left;
  box-shadow: 4px 4px 0 rgba(22, 22, 22, 0.08);
  transition:
    transform 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.action-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 rgba(22, 22, 22, 0.13);
}

.action-button.is-active {
  background: #d9d1ef;
  box-shadow: 4px 4px 0 var(--line);
}

.action-button.is-locked {
  background: rgba(244, 238, 223, 0.78);
  color: rgba(22, 22, 22, 0.58);
  box-shadow: 3px 3px 0 rgba(22, 22, 22, 0.08);
}

.action-button.is-locked:hover {
  transform: none;
  box-shadow: 3px 3px 0 rgba(22, 22, 22, 0.08);
}

.action-icon {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: 1.8px solid var(--line);
  border-radius: 5px;
  background: #fffdf7;
}

.lock-mark {
  position: absolute;
  top: 0.75rem;
  left: 3.15rem;
  width: 2rem;
  height: 2rem;
  border: 1.8px solid var(--line);
  border-radius: 5px;
  background: #fffdf7;
}

.lock-mark::before {
  content: "";
  position: absolute;
  left: 0.52rem;
  top: 0.3rem;
  width: 0.6rem;
  height: 0.56rem;
  border: 1.8px solid var(--line);
  border-bottom: 0;
  border-radius: 0.5rem 0.5rem 0 0;
}

.lock-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1rem;
  width: 0.86rem;
  height: 0.62rem;
  border: 1.8px solid var(--line);
  border-radius: 3px;
  background: #ece1c8;
  transform: translateX(-50%);
}

.icon-crumple::before {
  content: "";
  position: absolute;
  inset: 0.43rem;
  border: 2px solid var(--green);
  transform: skew(-12deg) rotate(9deg);
}

.icon-tear::before,
.icon-tear::after {
  content: "";
  position: absolute;
  top: 0.42rem;
  width: 0.54rem;
  height: 1.03rem;
  background: var(--paper);
  border: 1.8px solid var(--red);
}

.icon-tear::before {
  left: 0.41rem;
  transform: rotate(-8deg);
}

.icon-tear::after {
  right: 0.41rem;
  transform: rotate(9deg);
}

.icon-flush::before {
  content: "";
  position: absolute;
  left: 0.42rem;
  right: 0.42rem;
  bottom: 0.4rem;
  height: 0.9rem;
  border: 2px solid var(--blue);
  border-radius: 0 0 50% 50%;
}

.sprout-icon {
  position: absolute;
  inset: 0.28rem 0.18rem 0.08rem;
  width: calc(100% - 0.36rem);
  height: calc(100% - 0.36rem);
  overflow: visible;
}

.sprout-icon path {
  vector-effect: non-scaling-stroke;
}

.sprout-soil {
  fill: #9d7b72;
  stroke: #27302d;
  stroke-width: 1.55;
  stroke-linejoin: round;
}

.sprout-stem,
.sprout-vein {
  fill: none;
  stroke: #27302d;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sprout-leaf {
  fill: #839c6d;
  stroke: #27302d;
  stroke-width: 1.55;
  stroke-linejoin: round;
}

.sprout-leaf-right {
  fill: #788f66;
}

.icon-plane::before {
  content: "";
  position: absolute;
  inset: 0.38rem 0.3rem;
  background: var(--blue);
  clip-path: polygon(0 42%, 100% 0, 66% 100%, 48% 58%);
}

.icon-crane::before {
  content: "";
  position: absolute;
  inset: 0.35rem;
  background: var(--green);
  clip-path: polygon(0 45%, 36% 35%, 51% 0, 64% 35%, 100% 44%, 63% 58%, 50% 100%, 37% 58%);
}

.feature-card {
  display: grid;
  gap: 0.25rem;
  margin-top: -0.15rem;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: rgba(236, 225, 200, 0.56);
}

.feature-card p {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
}

.feature-card span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.45;
}

.feature-card span:empty {
  display: none;
}

.page-header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.back-button {
  flex: 0 0 2.55rem;
  width: 2.55rem;
  height: 2.55rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 950;
  box-shadow: 3px 3px 0 rgba(22, 22, 22, 0.1);
}

.crumple-workspace,
.tear-workspace,
.flush-workspace,
.plane-workspace {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(17rem, 21rem);
  gap: clamp(1rem, 3vw, 1.6rem);
  align-items: stretch;
}

.note-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(62vh, 37rem);
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--note-stage-bg);
  overflow: hidden;
}

.note-paper {
  position: relative;
  width: min(29rem, 95%);
  aspect-ratio: 0.818;
  padding: clamp(4.7rem, 10vw, 6.4rem) 2.4rem 2.6rem;
  display: grid;
  place-items: center;
  background: transparent;
  transform-origin: 50% 54%;
}

.note-paper::after {
  content: "";
  position: absolute;
  inset: 8% 48% 8% 48%;
  z-index: 4;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(36, 28, 24, 0.13),
    rgba(255, 255, 255, 0.4),
    transparent
  );
  opacity: 0;
  pointer-events: none;
}

.note-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.hand-text {
  position: absolute;
  top: 16.5%;
  right: 15%;
  bottom: 11.5%;
  left: 11%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  margin: 0;
  padding: 0 0.15rem;
  color: #241c18;
  font-family: "Nanum Pen Script", "Hi Melody", "Gowun Dodum", "Pretendard", cursive;
  font-size: var(--hand-text-size, clamp(2.2rem, 5vw, 3.7rem));
  font-weight: 400;
  line-height: 0.98;
  text-align: center;
  letter-spacing: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: keep-all;
  overflow: hidden;
}

.crumple-sequence,
.tear-sequence {
  position: absolute;
  inset: clamp(0.7rem, 2vw, 1.25rem);
  z-index: 6;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}

.crumple-sequence {
  inset: -2px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fedccc 0 42%, #fbd2c2 72%, #facdbd 100%);
  isolation: isolate;
}

.crumple-sequence::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  background: rgba(251, 210, 194, 0.16);
  mix-blend-mode: color;
  pointer-events: none;
}

.tear-sequence {
  inset: -2px;
  overflow: hidden;
  background: #fdc8b3;
}

.tear-sequence::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  background: rgba(253, 200, 179, 0.24);
  mix-blend-mode: color;
  pointer-events: none;
}

.crumple-frame,
.tear-frame {
  position: absolute;
  width: min(100%, 27rem);
  height: min(100%, 34rem);
  object-fit: contain;
  opacity: 0;
  transform: scale(1);
  user-select: none;
  pointer-events: none;
}

.crumple-frame {
  z-index: 2;
  width: min(100%, 27rem);
  height: min(100%, 34rem);
  object-fit: contain;
}

.tear-frame {
  z-index: 2;
  width: min(calc(100% + 3rem), 31.2rem);
  height: min(calc(100% + 3rem), 38.2rem);
}

.tear-fold-text {
  position: absolute;
  top: 25%;
  right: 27%;
  bottom: 22%;
  left: 27%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.2rem;
  color: #241c18;
  font-family: "Nanum Pen Script", "Hi Melody", "Gowun Dodum", "Pretendard", cursive;
  font-size: var(--hand-text-size, clamp(2rem, 4.2vw, 3.35rem));
  font-weight: 400;
  line-height: 0.96;
  text-align: center;
  letter-spacing: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: keep-all;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.tear-ink-layer {
  position: absolute;
  width: min(100%, 27rem);
  height: min(100%, 34rem);
  z-index: 7;
  opacity: 0;
  pointer-events: none;
}

.tear-ink-piece {
  position: absolute;
  margin: 0;
  color: rgba(36, 28, 24, 0.78);
  font-family: "Nanum Pen Script", "Hi Melody", "Gowun Dodum", "Pretendard", cursive;
  font-size: var(--piece-text-size, clamp(0.72rem, 1.45vw, 1.04rem));
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0;
  text-align: center;
  white-space: pre-line;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: keep-all;
  display: grid;
  place-items: center;
}

.piece-a {
  top: 38%;
  left: 23.5%;
  width: 8%;
  height: 16%;
  transform: rotate(-9deg);
}

.piece-b {
  top: 38%;
  right: 22.5%;
  width: 8%;
  height: 16%;
  transform: rotate(7deg);
}

.piece-c {
  top: 25%;
  left: 42%;
  width: 7.5%;
  height: 9%;
  transform: rotate(-4deg);
}

.piece-d {
  top: 44%;
  left: 46%;
  width: 8.5%;
  height: 10%;
  transform: rotate(5deg);
}

.piece-e {
  top: 64%;
  left: 41%;
  width: 6%;
  height: 7%;
  transform: rotate(-8deg);
}

.piece-f {
  top: 67%;
  left: 54%;
  width: 6%;
  height: 7%;
  transform: rotate(7deg);
}

.release-message {
  position: absolute;
  right: clamp(1rem, 3vw, 1.7rem);
  bottom: clamp(1rem, 3vw, 1.7rem);
  left: clamp(1rem, 3vw, 1.7rem);
  z-index: 9;
  margin: 0;
  padding: 0.82rem 1rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.9);
  color: var(--ink);
  font-size: clamp(1rem, 2.3vw, 1.18rem);
  font-weight: 950;
  line-height: 1.35;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(22, 22, 22, 0.12);
  opacity: 0;
  transform: translateY(0.6rem);
  pointer-events: none;
}

.thought-field {
  display: grid;
  gap: 0.55rem;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 850;
}

textarea {
  width: 100%;
  min-height: 14rem;
  resize: vertical;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  background: rgba(255, 253, 247, 0.86);
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  outline: none;
  box-shadow: inset 3px 3px 0 rgba(22, 22, 22, 0.05);
}

textarea::placeholder {
  color: rgba(22, 22, 22, 0.45);
}

textarea:focus {
  border-color: var(--purple);
  box-shadow:
    inset 3px 3px 0 rgba(22, 22, 22, 0.05),
    0 0 0 4px rgba(129, 113, 188, 0.2);
}

.page-actions {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.ghost-button,
.primary-button {
  min-height: 3.2rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  font-weight: 950;
  box-shadow: 4px 4px 0 rgba(22, 22, 22, 0.1);
}

.ghost-button {
  background: #fffdf7;
  color: var(--ink);
}

.primary-button {
  background: var(--ink);
  color: #fffdf7;
  box-shadow: 4px 4px 0 var(--purple);
}

.note-wrap.is-crumpled .note-paper {
  animation: hideLiveNote 80ms linear forwards;
}

.note-wrap.is-crumpled,
.note-wrap.is-torn,
.note-wrap.is-flushed,
.note-wrap.is-flown {
  background: var(--ritual-stage-bg);
}

.note-wrap.is-crumpled {
  background: radial-gradient(circle at 50% 42%, #fedccc 0 42%, #fbd2c2 72%, #facdbd 100%);
}

.note-wrap.is-crumpled .crumple-sequence {
  opacity: 1;
}

.note-wrap.is-torn .note-paper {
  animation: hideLiveNote 80ms linear forwards;
}

.note-wrap.is-torn .tear-sequence {
  opacity: 1;
}

.note-wrap.is-torn .tear-ink-layer {
  display: none;
}

.note-wrap.is-crumpled .frame-1 {
  animation: frameOne var(--crumple-duration) ease-in-out forwards;
}

.note-wrap.is-crumpled .frame-2 {
  animation: frameTwo var(--crumple-duration) ease-in-out forwards;
}

.note-wrap.is-crumpled .frame-3 {
  animation: frameThree var(--crumple-duration) ease-in-out forwards;
}

.note-wrap.is-crumpled .frame-4 {
  animation: frameFour var(--crumple-duration) ease-in-out forwards;
}

.note-wrap.is-crumpled .frame-5 {
  animation: frameFive var(--crumple-duration) ease-in-out forwards;
}

.note-wrap.is-crumpled .release-message {
  animation: showReleaseMessage 520ms ease-out 3550ms forwards;
}

.note-wrap.is-torn .tear-frame-1 {
  animation: tearFrameOne var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-2 {
  animation: tearFrameTwo var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-3 {
  animation: tearFrameThree var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-4 {
  animation: tearFrameFour var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-5 {
  animation: tearFrameFive var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-6 {
  animation: tearFrameSix var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-7 {
  animation: tearFrameSeven var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-8 {
  animation: tearFrameEight var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-9 {
  animation: tearFrameNine var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-10 {
  animation: tearFrameTen var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-11 {
  animation: tearFrameEleven var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-frame-12 {
  animation: tearFrameTwelve var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .tear-fold-text {
  animation: tearFoldText var(--tear-ritual-duration) ease-in-out forwards;
}

.note-wrap.is-torn .release-message {
  animation: showReleaseMessage 520ms ease-out calc(var(--tear-ritual-duration) - 450ms) forwards;
}

.flush-wrap {
  background: var(--note-stage-bg);
}

.flush-note {
  z-index: 3;
}

.note-wrap.is-flushed .flush-note {
  animation: hideLiveNote 80ms linear forwards;
}

.flush-tear-sequence,
.flush-sequence {
  position: absolute;
  inset: -2px;
  z-index: 6;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fdc8b3;
  opacity: 0;
  pointer-events: none;
}

.flush-tear-sequence::after,
.flush-sequence::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  background: rgba(253, 200, 179, 0.18);
  mix-blend-mode: color;
  pointer-events: none;
}

.flush-sequence {
  z-index: 7;
}

.flush-tear-frame,
.flush-frame {
  position: absolute;
  z-index: 2;
  width: min(calc(100% + 3rem), 31.2rem);
  height: min(calc(100% + 3rem), 38.2rem);
  object-fit: contain;
  opacity: 0;
  transform: scale(1);
  user-select: none;
  pointer-events: none;
}

.flush-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flush-fold-text {
  z-index: 5;
}

.note-wrap.is-flushed .flush-tear-sequence {
  opacity: 1;
  animation: flushTearSequenceFade var(--flush-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-sequence {
  animation: flushSequenceFade var(--flush-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-1 {
  animation: tearFrameOne var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-2 {
  animation: tearFrameTwo var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-3 {
  animation: tearFrameThree var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-4 {
  animation: tearFrameFour var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-5 {
  animation: tearFrameFive var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-6 {
  animation: tearFrameSix var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-7 {
  animation: tearFrameSeven var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-8 {
  animation: tearFrameEight var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-9 {
  animation: tearFrameNine var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-10 {
  animation: tearFrameTen var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-11 {
  animation: tearFrameEleven var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-tear-frame-12 {
  animation: tearFrameTwelve var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-fold-text {
  animation: flushFoldText var(--tear-duration) ease-in-out forwards;
}

.note-wrap.is-flushed .flush-frame-1 {
  animation: flushFrameOne var(--flush-drop-duration) ease-in-out var(--flush-drop-delay) forwards;
}

.note-wrap.is-flushed .flush-frame-2 {
  animation: flushFrameTwo var(--flush-drop-duration) ease-in-out var(--flush-drop-delay) forwards;
}

.note-wrap.is-flushed .flush-frame-3 {
  animation: flushFrameThree var(--flush-drop-duration) ease-in-out var(--flush-drop-delay) forwards;
}

.note-wrap.is-flushed .flush-frame-4 {
  animation: flushFrameFour var(--flush-drop-duration) ease-in-out var(--flush-drop-delay) forwards;
}

.note-wrap.is-flushed .flush-frame-5 {
  animation: flushFrameFive var(--flush-drop-duration) ease-in-out var(--flush-drop-delay) forwards;
}

.note-wrap.is-flushed .flush-frame-6 {
  animation: flushFrameSix var(--flush-drop-duration) ease-in-out var(--flush-drop-delay) forwards;
}

.note-wrap.is-flushed .release-message {
  animation: showReleaseMessage 520ms ease-out var(--flush-duration) forwards;
}

.plane-wrap {
  background: var(--note-stage-bg);
}

.plane-note {
  z-index: 3;
}

.note-wrap.is-flown .plane-note {
  animation: hideLiveNote 80ms linear forwards;
}

.plane-sequence {
  position: absolute;
  inset: -2px;
  z-index: 6;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fac8b3;
  opacity: 0;
  isolation: isolate;
  pointer-events: none;
}

.plane-sequence::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 4;
  background: rgba(253, 200, 179, 0.34);
  mix-blend-mode: color;
  pointer-events: none;
}

.plane-frame {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  user-select: none;
  pointer-events: none;
}

.plane-fold-text {
  position: absolute;
  top: 23%;
  right: 24%;
  bottom: 20%;
  left: 24%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.2rem;
  color: #241c18;
  font-family: "Nanum Pen Script", "Hi Melody", "Gowun Dodum", "Pretendard", cursive;
  font-size: var(--hand-text-size, clamp(2rem, 4.2vw, 3.35rem));
  font-weight: 400;
  line-height: 0.96;
  text-align: center;
  letter-spacing: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: keep-all;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.note-wrap.is-flown .plane-sequence {
  opacity: 1;
}

.note-wrap.is-flown .plane-frame-1 {
  animation: planeFrameOne var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-2 {
  animation: planeFrameTwo var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-3 {
  animation: planeFrameThree var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-4 {
  animation: planeFrameFour var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-5 {
  animation: planeFrameFive var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-6 {
  animation: planeFrameSix var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-7 {
  animation: planeFrameSeven var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-8 {
  animation: planeFrameEight var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-9 {
  animation: planeFrameNine var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-10 {
  animation: planeFrameTen var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-frame-11 {
  animation: planeFrameEleven var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .plane-fold-text {
  animation: planeFoldText var(--plane-duration) linear forwards;
}

.note-wrap.is-flown .release-message {
  animation: showReleaseMessage 520ms ease-out 8000ms forwards;
}

@keyframes hideLiveNote {
  to { opacity: 0; }
}

@keyframes planeFoldText {
  0%,
  9% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }

  11%,
  17% {
    opacity: 1;
    transform: translateY(0.15rem) rotate(-1deg) scale(0.96);
  }

  19%,
  100% {
    opacity: 0;
    transform: translateY(0.25rem) rotate(-2deg) scale(0.9);
  }
}

@keyframes tearFoldText {
  0%,
  6% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }

  9%,
  14% {
    opacity: 1;
    transform: translateY(0.25rem) rotate(0deg) scale(0.98);
  }

  17%,
  22% {
    opacity: 1;
    transform: translateY(0.35rem) rotate(-1.5deg) scale(0.94);
  }

  24%,
  100% {
    opacity: 0;
    transform: translateY(0.35rem) rotate(-1.5deg) scale(0.94);
  }
}

@keyframes flushFoldText {
  0%,
  22% {
    opacity: 1;
    transform: translateY(0.25rem) rotate(-0.5deg) scale(0.98);
  }

  24%,
  100% {
    opacity: 0;
    transform: translateY(0.35rem) rotate(-1.5deg) scale(0.94);
  }
}

@keyframes foldBeforeTear {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scaleX(1) scaleY(1);
    filter: none;
  }

  32% {
    opacity: 1;
    transform: translateY(0.2rem) rotate(-2deg) scaleX(0.76) scaleY(1.02);
    filter: drop-shadow(0.8rem 0.3rem 0.65rem rgba(36, 28, 24, 0.16));
  }

  62% {
    opacity: 1;
    transform: translateY(0.45rem) rotate(2deg) scaleX(0.48) scaleY(1.03);
    filter: drop-shadow(1rem 0.4rem 0.75rem rgba(36, 28, 24, 0.18));
  }

  84% {
    opacity: 1;
    transform: translateY(0.75rem) rotate(-1deg) scaleX(0.28) scaleY(1.04);
    filter: drop-shadow(1.1rem 0.45rem 0.75rem rgba(36, 28, 24, 0.18));
  }

  100% {
    opacity: 0;
    transform: translateY(0.95rem) rotate(1deg) scaleX(0.16) scaleY(1.02);
    filter: drop-shadow(0.6rem 0.3rem 0.6rem rgba(36, 28, 24, 0.12));
  }
}

@keyframes showFoldCrease {
  0%, 12% {
    opacity: 0;
    transform: scaleX(0.3);
  }

  34%, 82% {
    opacity: 1;
    transform: scaleX(1);
  }

  100% {
    opacity: 0;
    transform: scaleX(0.2);
  }
}

@keyframes frameOne {
  0%, 17% { opacity: 1; transform: scale(1); }
  27%, 100% { opacity: 0; transform: scale(1.015); }
}

@keyframes frameTwo {
  0%, 14% { opacity: 0; transform: scale(1.005); }
  24%, 36% { opacity: 1; transform: scale(1.018); }
  46%, 100% { opacity: 0; transform: scale(1.025); }
}

@keyframes frameThree {
  0%, 33% { opacity: 0; transform: scale(1.01); }
  43%, 56% { opacity: 1; transform: scale(1.025); }
  66%, 100% { opacity: 0; transform: scale(1.015); }
}

@keyframes frameFour {
  0%, 53% { opacity: 0; transform: scale(1.02); }
  63%, 76% { opacity: 1; transform: scale(1.01); }
  86%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes frameFive {
  0%, 73% { opacity: 0; transform: scale(0.995); }
  86%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes showReleaseMessage {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flushTearSequenceFade {
  0%, 59% { opacity: 1; }
  64%, 100% { opacity: 0; }
}

@keyframes flushSequenceFade {
  0%, 59% { opacity: 0; }
  64%, 100% { opacity: 1; }
}

@keyframes flushFrameOne {
  0%, 18% { opacity: 1; transform: scale(1); }
  28%, 100% { opacity: 0; transform: scale(1.006); }
}

@keyframes flushFrameTwo {
  0%, 14% { opacity: 0; transform: scale(1.002); }
  24%, 34% { opacity: 1; transform: scale(1.006); }
  44%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes flushFrameThree {
  0%, 30% { opacity: 0; transform: scale(1.004); }
  40%, 50% { opacity: 1; transform: scale(1.008); }
  60%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes flushFrameFour {
  0%, 46% { opacity: 0; transform: scale(1.006); }
  56%, 66% { opacity: 1; transform: scale(1.01); }
  76%, 100% { opacity: 0; transform: scale(1.006); }
}

@keyframes flushFrameFive {
  0%, 62% { opacity: 0; transform: scale(1.006); }
  72%, 82% { opacity: 1; transform: scale(1.004); }
  92%, 100% { opacity: 0; transform: scale(1.002); }
}

@keyframes flushFrameSix {
  0%, 78% { opacity: 0; transform: scale(1.002); }
  92%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes planeFrameOne {
  0%, 9% { opacity: 1; transform: scale(1); }
  12%, 100% { opacity: 0; transform: scale(1.004); }
}

@keyframes planeFrameTwo {
  0%, 7% { opacity: 0; transform: scale(1.002); }
  10%, 18% { opacity: 1; transform: scale(1.006); }
  21%, 100% { opacity: 0; transform: scale(1.008); }
}

@keyframes planeFrameThree {
  0%, 16% { opacity: 0; transform: scale(1.004); }
  19%, 27% { opacity: 1; transform: scale(1.008); }
  30%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes planeFrameFour {
  0%, 25% { opacity: 0; transform: scale(1.006); }
  28%, 36% { opacity: 1; transform: scale(1.01); }
  39%, 100% { opacity: 0; transform: scale(1.008); }
}

@keyframes planeFrameFive {
  0%, 34% { opacity: 0; transform: scale(1.008); }
  37%, 45% { opacity: 1; transform: scale(1.012); }
  48%, 100% { opacity: 0; transform: scale(1.008); }
}

@keyframes planeFrameSix {
  0%, 43% { opacity: 0; transform: scale(1.008); }
  46%, 54% { opacity: 1; transform: scale(1.012); }
  58%, 100% { opacity: 0; transform: scale(1.008); }
}

@keyframes planeFrameSeven {
  0%, 52% { opacity: 0; transform: scale(1.006); }
  56%, 66% { opacity: 1; transform: scale(1.01); }
  70%, 100% { opacity: 0; transform: scale(1.006); }
}

@keyframes planeFrameEight {
  0%, 64% { opacity: 0; transform: scale(1.004); }
  68%, 78% { opacity: 1; transform: scale(1.006); }
  82%, 100% { opacity: 0; transform: scale(1.002); }
}

@keyframes planeFrameNine {
  0%, 76% { opacity: 0; transform: scale(1.002); }
  80%, 88% { opacity: 1; transform: scale(1.004); }
  92%, 100% { opacity: 0; transform: scale(1.002); }
}

@keyframes planeFrameTen {
  0%, 86% { opacity: 0; transform: scale(1.002); }
  90%, 97% { opacity: 1; transform: scale(1.002); }
  99%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes planeFrameEleven {
  0%, 94% { opacity: 0; transform: scale(1); }
  98%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes tearFrameOne {
  0%, 6% { opacity: 1; transform: scale(1); }
  10%, 100% { opacity: 0; transform: scale(1.006); }
}

@keyframes tearFrameTwo {
  0%, 5% { opacity: 0; transform: scale(1.002); }
  9%, 14% { opacity: 1; transform: scale(1.008); }
  18%, 100% { opacity: 0; transform: scale(1.012); }
}

@keyframes tearFrameThree {
  0%, 13% { opacity: 0; transform: scale(1.004); }
  17%, 22% { opacity: 1; transform: scale(1.01); }
  26%, 100% { opacity: 0; transform: scale(1.014); }
}

@keyframes tearFrameFour {
  0%, 21% { opacity: 0; transform: scale(1.006); }
  25%, 30% { opacity: 1; transform: scale(1.012); }
  34%, 100% { opacity: 0; transform: scale(1.014); }
}

@keyframes tearFrameFive {
  0%, 29% { opacity: 0; transform: scale(1.006); }
  33%, 38% { opacity: 1; transform: scale(1.012); }
  42%, 100% { opacity: 0; transform: scale(1.012); }
}

@keyframes tearFrameSix {
  0%, 37% { opacity: 0; transform: scale(1.006); }
  41%, 46% { opacity: 1; transform: scale(1.012); }
  50%, 100% { opacity: 0; transform: scale(1.01); }
}

@keyframes tearFrameSeven {
  0%, 45% { opacity: 0; transform: scale(1.004); }
  49%, 54% { opacity: 1; transform: scale(1.01); }
  58%, 100% { opacity: 0; transform: scale(1.008); }
}

@keyframes tearFrameEight {
  0%, 53% { opacity: 0; transform: scale(1.002); }
  57%, 62% { opacity: 1; transform: scale(1.008); }
  66%, 100% { opacity: 0; transform: scale(1.006); }
}

@keyframes tearFrameNine {
  0%, 61% { opacity: 0; transform: scale(1.002); }
  65%, 70% { opacity: 1; transform: scale(1.006); }
  74%, 100% { opacity: 0; transform: scale(1.004); }
}

@keyframes tearFrameTen {
  0%, 69% { opacity: 0; transform: scale(1); }
  73%, 78% { opacity: 1; transform: scale(1.004); }
  82%, 100% { opacity: 0; transform: scale(1.002); }
}

@keyframes tearFrameEleven {
  0%, 77% { opacity: 0; transform: scale(1); }
  81%, 86% { opacity: 1; transform: scale(1.002); }
  90%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes tearFrameTwelve {
  0%, 85% { opacity: 0; transform: scale(1); }
  92%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes showTearInk {
  0%, 62% { opacity: 0; transform: scale(1.012); }
  78%, 100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 860px) {
  .app-shell,
  .app-shell.is-page {
    width: min(34rem, calc(100vw - 1rem));
    align-items: start;
    padding-top: 1rem;
  }

  h1 {
    font-size: clamp(3.4rem, 15vw, 5rem);
  }

  .crumple-workspace,
  .tear-workspace,
  .flush-workspace,
  .plane-workspace {
    grid-template-columns: 1fr;
  }

  .page-actions {
    grid-column: auto;
  }

  textarea {
    min-height: 7.8rem;
  }

  .note-wrap {
    min-height: 32rem;
  }
}

@media (max-width: 560px) {
  .action-grid {
    grid-auto-rows: minmax(5.7rem, 1fr);
    gap: 0.58rem;
  }

  .action-button {
    font-size: 0.9rem;
  }

  .note-paper {
    width: 95%;
  }

  .page-actions {
    grid-template-columns: 1fr;
  }
}