.app-window{
  position:fixed;
  z-index:80;
  inset:0;
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
  padding:0;
  background:rgba(43,41,36,.10);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
.app-window.open{
  display:flex;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.app-frame{
  width:min(76vw,1080px);
  height:100dvh;
  margin:0;
  display:flex;
  flex-direction:column;
  background:#f8f7f2;
  border-radius:12px 0 0 12px;
  box-shadow:-24px 0 70px rgba(30,28,24,.16);
  overflow:hidden;
  transform:translateX(28px);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),width .22s cubic-bezier(.2,.8,.2,1);
}
.app-window.open .app-frame{transform:translateX(0)}
.app-window.project-memo-expanded .app-frame{width:90vw}
.app-frame-head{flex:0 0 auto}
.app-content{min-height:0}

@media(max-width:900px) and (min-width:721px){
  .app-frame{width:min(86vw,900px)}
}

@media(max-width:720px){
  .app-window{background:transparent}
  .app-frame{
    width:100%;
    height:100dvh;
    border-radius:0;
    box-shadow:none;
    transform:translateX(100%);
  }
  .app-window.open .app-frame{transform:translateX(0)}
  .app-window.project-memo-expanded .app-frame{width:100%}
}